.login-page {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-color: #000; }
  .login-page:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("../img/login-barker-college-bg.png") center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px);
    filter: blur(6px);
    opacity: .65; }
  .login-page #navbar {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); }
    .login-page #navbar #navbar-container {
      background: none;
      box-shadow: none; }
    .login-page #navbar .school-reach-logo-container {
      text-align: center;
      margin: 0.5em auto;
      display: block; }
      .login-page #navbar .school-reach-logo-container img {
        height: 35px;
        display: inline-block;
        margin: 0em 1em; }
  @media (min-width: 500px) {
    .login-page .login-card-container {
      margin-top: 70px;
      padding: 0em; } }
  @media (min-width: 768px) {
    .login-page .login-card-container {
      margin-top: 100px;
      padding: 0em 1em; } }
  @media (min-width: 900px) {
    .login-page .login-card-container {
      margin-top: 130px;
      padding: 0em 1.5em; } }
  @media (min-width: 500px) {
    .login-page .login-card-container .login-card {
      padding: 1em; } }
  @media (min-width: 768px) {
    .login-page .login-card-container .login-card {
      padding: 1em; } }
  @media (min-width: 900px) {
    .login-page .login-card-container .login-card {
      padding: 2em 3em; } }
  .login-page .login-card-container .login-card .title {
    text-align: center; }
    .login-page .login-card-container .login-card .title #school-emblem {
      height: 80px; }
      @media (min-width: 500px) {
        .login-page .login-card-container .login-card .title #school-emblem {
          height: 50px; } }
      @media (min-width: 768px) {
        .login-page .login-card-container .login-card .title #school-emblem {
          height: 80px; } }
    .login-page .login-card-container .login-card .title #school-name {
      font-size: 14px;
      font-weight: 700;
      margin-top: 0.5em;
      margin-bottom: 1em; }
    .login-page .login-card-container .login-card .title .sub-title {
      font-weight: 500;
      font-size: 15px; }
  .login-page .login-card-container .login-card .form-container {
    margin-top: 3em;
    padding: 0em 1em; }
    .login-page .login-card-container .login-card .form-container .form-group {
      margin-bottom: 2.5em; }
    .login-page .login-card-container .login-card .form-container input {
      font-size: 14px;
      background: none;
      font-weight: 400;
      border: 0px;
      border-bottom: 2px solid #C1BDBD; }
      .login-page .login-card-container .login-card .form-container input:focus {
        font-weight: 700;
        border-bottom: 2px solid #DC8383; }
    .login-page .login-card-container .login-card .form-container .form-inline-checkbox input[type="checkbox"] {
      width: 16px;
      height: 16px; }
    .login-page .login-card-container .login-card .form-container .form-inline-checkbox label {
      font-size: 13px;
      font-weight: 600; }
    .login-page .login-card-container .login-card .form-container .sign-in-btn {
      width: 100%;
      text-align: center;
      color: #FFF;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 700;
      border-radius: 3px;
      padding: 0.8em; }
    .login-page .login-card-container .login-card .form-container .forgot-pw-btn {
      color: #C02130;
      font-size: 13px;
      text-align: center; }
      .login-page .login-card-container .login-card .form-container .forgot-pw-btn:hover {
        color: #7f1620;
        text-decoration: underline; }
  .login-page #content-container {
    background: none; }

#page-title .page-title-heading {
  display: inline-block;
  margin-right: 1em;
  font-weight: 600; }
#page-title .searchbox .input-group input {
  background: #FFF; }

.table-card-toggle-container {
  display: inline-block;
  margin-right: 1em;
  float: right; }

.form-toggle-container {
  display: inline-block;
  float: right; }
  .form-toggle-container .btn {
    margin-left: 1em;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 25px; }
  .form-toggle-container .btn-cancel {
    background: #D9D9D9; }
    .form-toggle-container .btn-cancel:hover {
      background: silver; }
  .form-toggle-container .btn-save {
    background: #00D67B;
    color: #FFF; }
    .form-toggle-container .btn-save:hover {
      background: #00a35e; }

.toggle-icon i {
  font-size: 2em; }