//@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// A little pizazz, you know how it is
blink {
  -webkit-animation: blink 3s step-end infinite;
  animation: blink 3s step-end infinite
}
 
@-webkit-keyframes blink {
  0% { color: #f00; }
  5% { color: #ffa500; }
  10% { color: #ff0; }
  15% { color: #0f0; }
  20% { color: #00f; }
  25% { color: #f0f; }
  30% { opacity: 0 }
  50% { 
  	opacity: 100;
  	color: #fff;
  	text-shadow: 0px 10px 5px rgba(0,0,0, 1);
  }
  70% { opacity: 0; }
}
 
@keyframes blink {
  0% { color: #f00; }
  5% { color: #ffa500; }
  10% { color: #ff0; }
  15% { color: #0f0; }
  20% { color: #00f; }
  25% { color: #f0f; }
  30% { opacity: 0 }
  50% { 
  	opacity: 100;
  	color: #fff; 
  	text-shadow: 0px 10px 5px rgba(0,0,0, 1);
  }
  70% { opacity: 0; }
}



// Custom Application Pages
.custom-application {
  margin-bottom: 300px;

}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

// Custom message control
// Bootstrap uses 'alert-danger'; Django uses 'error'. This reconciles the two.
.alert-error {
  @extend .alert-danger;
}


// Custom checkbox control
.schooldriver-checkbox {
  display: block;
  min-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

  input[type="checkbox"] {
    display: none;

    &+ i:before {
      content: "\f096";
      color: $gray-light;
    }

    &:checked + i:before {
      content: "\f14a"; //"\f046";
      color: $brand-primary;
    }
  }

  label {
    cursor: pointer;
  }

  i {
    position: relative;
    top: -2px;
    float: left;
    font-size: 24px;
    min-width: 30px;

    &:before {
      box-sizing: border-box;
    }
  }
}