@import 'init';

@blue: @brown;
@green: @d-brown;
@grey: grey;
@program: #3C6980;

.bg-blue {
  background-color: @blue;
  border: 1px solid @blue;
  color:white;
  &:hover {
    color:@blue;
    background-color:transparent;
  }
}
.bg-green {
  background-color: @green;
  border: 1px solid @green;
  color:white;
  &:hover {
    color:@green;
    background-color:transparent;
  }
}
#events {
  .btn-primary {
    .bg-blue;
    border-color: @blue;
    &:hover {
      background-color: white;
      color: @blue;
    }
  }
  .btn-secondary {
    .bg-green;
    border-color: @green;
    &:hover {
      background-color: white;
      color: @green;
    }
  }
  .fc-event, .fc-event-dot {
    background-color: @blue;
    border-color: @blue;
  }
  #search_events {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.3em;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
/*    #search_title, #search_keyword, #search_location {*/
    #search_keyword {
      display: flex;
      flex-grow: 1;
      align-items: center;
    }
    label {
      margin-bottom: 0;
    }
    #search_title, label {
      text-transform: uppercase;
    }
    input[type=text] {
      width: 100%;
      margin: 0 10px;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .resultRow {
    margin-bottom: 1rem;
    > div {
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .result-date {
      b, span {
        display: block;
        line-height: 1;
      }
      b {
        font-weight: 600;
        font-size: 1.7em;
        text-transform: uppercase;
        color: @blue;
      }
      span {
        font-weight: 800;
        font-size: 3.3em;
        color: @green;
      }
    }
    .result-details span {
      padding-left: 1rem;
      padding-bottom: 0.3rem;
      font-size: 1.3em;
      font-weight: 600;
      color: @blue;
    }
  }
  @media only screen and (min-width: 576px) and (max-width:991px) {
    #search_events {
      flex-wrap: wrap;
      #search_keyword, #search_location {
        width: 40%;
      }
      .buttons {
        margin-left: auto;
        margin-top: 1rem;
      }
    }
  }
  @media only screen and (max-width:575px) {
    #search_events {
      flex-direction: column;
      #search_title, #search_keyword, #search_location {
        margin-bottom: 8px;
      }
    }
  }
}
#data-list {
    &.events #results .resultRow.events {
      .result-date {
        h3, span {
          color:@brown;
        }
      }
      .result-details span {
        color:@brown;
      }
      .result-more-details .bg-blue {
        &:hover {
          color:@brown;
          background-color:white;
        }
      }
    }
    &.programs #results .resultRow.programs {
      .result-date {
        h3, span {
          color:@program;
        }
      }
      .result-details {
        span {
          color:@program;
        }
      }
      .result-more-details .bg-blue {
        background-color:@program;
        border:1px solid @program;
        &:hover {
          color:@program;
          background-color:white;
        }
      }
    }
}
@media only screen and (max-width:575px) {
  #events {
    .resultRow {
      .result-date {
        h3 {
          font-size:1em;
        }
        span {
          font-size:2em;
        }
      }      
      .result-details span {
        font-size:1em;
        padding-left:0.5rem;
        padding-right:0.5rem;
      }
      .result-more-details .btn {
        font-size:0.6em;
      }
    }
  }
  
}