/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 *= require bootstrap-table
 *= require bootstrap-datetimepicker
 */
@import "1st_load_framework";
@import "navbar-static-top";
@import "registration-form";
@import "cubing-icons";
@import "fullcalendar";
@import "dragula";
@import "scheduler.min";
@import "groups";
@import "flag-icon";
@import "collapsible-panels";
@import "font-awesome-sprockets";
@import "font-awesome";

.mt {
  margin-top: 15px;
}

.fc-time-grid-event.fc-short .fc-content {
  .fc-title {
    font-size: .95em;
  }
}

.fc-event.staff_event {
  font-weight: bold;
}

.cubing-icon {
  margin: 3px;
}

.alert-dismissible {
  margin-top: 10px;
}

.fc-content a {
  color: black;
}

.event-checkbox,
.event-radio {
  .cubing-icon {
    font-size: 2em;
  }

  label {
    margin-bottom: 0;
  }
  input[type=checkbox],
  input[type=radio] {
    display: none;
    + span.cubing-icon {
      color: #ccc;
    }
    &:checked + span.cubing-icon {
      color: black;
    }
  }

  &:not(.disabled) {
    label {
      cursor: pointer;
    }
  }
}

.delete-btn {
  @extend .btn, .btn-danger;
  margin-bottom: 15px;
}

$blue: #2e81f8;
$orange: #ff9307;
$green: #46c81c;
$yellow: #ffff1b;
$red: #ff4439;
$white: #d9edf7;
.panel-blue {
  border-color: $blue;
  .panel-heading {
    background-color: $blue;
    border-color: $blue;
  }
}
.panel-orange {
  border-color: $orange;
  .panel-heading {
    background-color: $orange;
    border-color: $orange;
  }
}
.panel-green {
  border-color: $green;
  .panel-heading {
    background-color: $green;
    border-color: $green;
  }
}
.panel-yellow {
  border-color: $yellow;
  .panel-heading {
    background-color: $yellow;
    border-color: $yellow;
  }
}
.panel-red {
  border-color: $red;
  .panel-heading {
    background-color: $red;
    border-color: $red;
  }
}
.panel-white {
  border-color: $white;
  .panel-heading {
    background-color: $white;
    border-color: $white;
  }
}
