body {
	font-family: 'Arial';
	padding: 10px;
}
#systemId {
	width: 90px;
}
#apiUrl {
	width: 200px;
	margin-right: 10px;
}
#token {
	width: 150px;
}
.author {
	font-size: 50%;
}
.about {
	float: right;
}
.input-section {
	margin-bottom: 12px;
}
.input-section span {
	font-family: 'Verdana';
}
.error-text {
	color: #CC0000;
	display: inline;
}
.fc-time-grid-event .fc-content {
	padding-left: 3px;
}
.fc-today {
	background: transparent !important;
}
.fc-disabled-day {
	color: #777777;
}
.fc-bootstrap a.fc-event:not([href]):not([tabindex]) {
	min-width: 10px;
}

/* LOADER SECTION */
.loading {
  display: none;
  opacity: 0.8;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.load-container {
	display: none;
	position: absolute;
	left: 40%;
	top: 40%;
	width: 20%;
	text-align: center;
}

.spinner {
  display: inline-block;
  z-index: 10;
  width: 150px;
  height: 150px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.progress-pane {
	z-index: 10;
	color: white;
	font-weight: bold;
	margin-top: 20px;
	font-size: 1.2rem;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

/* Animate loading text */
.progress-dots:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

/* PRINT CSS */

@media print {
	.about, .input-section {
		visibility: hidden;
	}
}