react-agenda/src/reactAgendaCtrl.css

An advanced agenda / organizer built with react

.agendCtrls-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agendCtrls-event-input {
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
    z-index: 3;
}

.agendCtrls-remove-button{
  margin-left: 8px;
}

.agendCtrls-timePicker-wrapper{
  display: flex;
  flex-direction: row;
  padding-top: 8px;
}

.agendCtrls-label-wrapper{
  display: flex;
}
.agendCtrls-radio-buttons {
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    margin-left: 8px;
}
.agendCtrls-radio-button {
  width: 100%;
      height: 100%;
      background: none;
      border: none;
      border-radius: 50%;

}
.agendCtrls-radio-button--checked {
  width: 100%;
      height: 100%;
      box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
      background: none;
      border: none;
      border-radius: 50%;
}
.agendCtrls-radio-wrapper{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.agendCtrls-time-picker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.agendCtrls-time-picker label {
  font-size: 15px;
  font-weight: 600;
  padding: 8px;
}

.agendCtrls-label-inline {
  display: flex;
      flex-direction: column;
      width: 50%;
}

.agendCtrls-label-inline label{
  font-size: 15px;
font-weight: 600;
align-self: flex-start;
padding: 8px;
}


@media screen and (max-width: 639px) {
  .agendCtrls-timePicker-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: column;
    padding-top: 8px;
}

.agendCtrls-label-inline {
  display: flex;
      flex-direction: column;
      width: 100%;
}

}