/*@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
*/
/*
 * SMARTADMIN VARIABLES
 * All variables related specifically to the theme starts from here:
 */
/* left side */
/* right side */
/* the color that flashes when you click on the first nav element */
/* the plus icon that appears on the parent nav when expanding and collapsing */
/* these values will only address the first parent in the entire nav */
/* the plus & minus icons */
/* margin top */
/* Style for all the jquery extensions / plugins */
.bootstrap-timepicker-widget table td a {
  padding: 6px 0;
}
.datepicker table tr td.disabled {
  color: #CCC;
  font-style: italic;
}
.datepicker table tr td.disabled:hover {
  cursor: not-allowed;
}
.datepicker table tr td span {
  font-weight: bold;
}
.datepicker table tr td span.disabled {
  font-weight: normal;
  font-style: italic;
  color: #CCC !important;
}
.datepicker table tr td span.disabled:hover {
  cursor: not-allowed;
}
#toast-container > div {
  padding: 12px 15px 12px 50px;
}
#toast-container .toast.auth-timer {
  opacity: 0.9 !important;
  margin-top: 200px !important;
  margin-bottom: auto;
  font-size: 15px;
  background-color: #444;
  width: 100%;
  border-radius: 0;
}
#toast-container .toast.auth-timer a.btn-default {
  color: #444 !important;
}
.popover.calculator .popover-title {
  padding: 3px 6px;
  font-size: 11px;
  text-align: left !important;
  font-style: normal;
}
.popover.calculator .popover-content {
  padding: 5px;
}
.editableform .form-group {
  margin-left: 0;
  margin-right: 0;
}
@keyframes highlight {
  0% {
    background: #ffff99;
  }
  100% {
    background: none;
  }
}
.highlight-5s {
  animation: highlight 5s;
}
.highlight-10s {
  animation: highlight 10s;
}
.highlight {
  background-color: #FFFF44;
}
form.disabled a,
div.disabled a {
  pointer-events: none;
  cursor: not-allowed;
  color: #bbb;
}
.autosave-msg {
  display: none;
  font-style: italic;
  color: #C79121;
  position: relative;
  left: -7px;
  /*&.error span
	{
		background-color: @brand-danger;
		-moz-border-radius: 3px 3px 3px 3px;
		-webkit-border-radius: 3px 3px 3px 3px;
		border-radius: 3px 3px 3px 3px;
		color: #FFFFFF;
		padding: 2px 4px;
	}*/
}
.autosave-msg.error {
  color: #A90329;
  font-weight: bold;
}
.autosave-msg .autosave-msg-saved {
  border-radius: 0.25em;
  background-color: #739E73;
  color: #FFFFFF;
  font-weight: bold;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
}
.autosave-msg .autosave-msg-counter {
  font-weight: bold;
}
.autosave-msg .autosave-msg-counter:after {
  content: " secs";
}
#ajaxSuccess {
  background-color: #009AD9;
  bottom: 3px;
  color: #FFFFFF;
  font-weight: bold;
  height: 26px;
  top: 0;
  right: 0;
  padding: 3px;
  position: fixed;
  display: none;
  z-index: 1003;
}
#toast-container > div {
  padding: 12px 15px 12px 50px;
}
a.sort.active:after {
  font-family: fontawesome;
  content: " \f0de";
}
a.sort.active.desc:after {
  font-family: fontawesome;
  content: " \f0dd";
}
/* styles for validation helpers */
.field-validation-error {
  color: #b94a48;
  font-size: 110%;
}
.field-validation-error.error-icon:before {
  font-family: fontawesome;
  content: " \f071";
  margin-right: 5px;
}
.field-validation-valid {
  display: none;
}
.input-validation-error,
input.error,
select.error,
textarea.error {
  background-color: #f2dede;
  border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
  background: none repeat scroll 0 0 #FFF0F0;
  border-color: #A90329;
}
.validation-summary-errors {
  color: #b94a48;
  padding-left: 10px;
  margin-top: 20px;
}
.validation-summary-errors:before {
  content: "Please resolve following errors to continue.";
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 5px;
}
.validation-summary-errors ul {
  margin-top: 7px;
}
.validation-summary-valid {
  display: none;
}
/* #region New Game popup when new game is scanned */
#newGame .modal-dialog {
  width: 350px;
}
#newGame label {
  font-size: 11px;
  margin-bottom: 1px;
}
#newGame .modal-title {
  color: #3276B1;
  font-weight: bold;
  font-size: 15px;
}
#newGame .form-control {
  padding: 5px 7px;
  text-align: left !important;
}
#newGame .btn-group .btn {
  padding: 2px 4px;
  font-size: 11px;
}
#newGame .btn-group .btn.active {
  font-weight: bold;
  background-color: #3276B1;
  color: #fff;
}
#newGame #GameNbr {
  width: 70px;
}
#newGame #GameName {
  width: 225px;
}
#newGame #TicketValue {
  width: 70px;
}
#newGame #TotalValue {
  width: 100px;
}
/* #endregion */
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -70px;
  /* Pad bottom by footer height */
  padding: 0 0 70px;
}
/* Set the fixed height of the footer here */
#wrap + footer,
#wrap + * + footer {
  background: #121214;
  border-top: 4px solid #1F1F1F;
  padding: 0;
  color: #777;
  min-height: 70px;
}
#wrap + footer hr,
#wrap + * + footer hr {
  border-color: #232323;
  margin: 3px 0;
}
#wrap + footer h4,
#wrap + * + footer h4 {
  margin: 5px 0;
}
/* HOME */
#wrap > #content {
  padding-top: 50px;
}
div.cp {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}
div.cp.shade {
  background-color: #fefefe;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
#homeCarousel {
  height: 380px;
  /* Carousel base class */
  /* Since positioning the image, we need to help out the caption */
  /* Declare heights because of positioning of img element */
}
#homeCarousel.carousel {
  background-color: #efefef;
}
#homeCarousel .carousel-caption {
  z-index: 10;
}
#homeCarousel.carousel .item {
  padding: 75px 30px;
}
#homeCarousel div.img {
  text-align: center;
}
#homeCarousel div.img img {
  width: 280px;
}
#homeCarousel div.text h2 {
  line-height: 1;
  letter-spacing: -1px;
  font-size: 50px;
  margin: 50px 20px 100px 20px;
}
#homeCarousel .carousel-indicators li {
  background-color: #fff;
}
#homeCarousel .carousel-indicators .active {
  background-color: #aaa;
}
div.social {
  padding-top: 10px;
}
#quotesCarousel.carousel .item {
  min-height: 92px;
}
#quotesCarousel blockquote {
  margin: 0;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#features i.fa.features {
  font-size: 7em;
  margin: 5px 10px 5px 20px;
}
/* Featurettes
------------------------- */
.featurette p.lead {
  font-size: 20px;
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
/* Thin out the marketing headings */
.featurette-heading {
  line-height: 1;
  letter-spacing: -1px;
}
#faq p {
  font-size: 16px;
  margin-bottom: 21px;
}
div.clients {
  text-align: center;
}
div.clients img {
  height: 56px;
  opacity: 0.7;
  margin-right: 21px;
}
.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.flex-video.widescreen {
  padding-bottom: 57.25%;
}
.flex-video.vimeo {
  padding-top: 0;
}
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video {
    padding-top: 0;
  }
}
/* HOME (end) */