/** Loading indicator **/

body.loading {
  background: white !important;
}

#loading {
  margin-top: 200px;
  text-align: center;
}

#loading p {
  margin: 0;
  font-size: 12pt;
  font-weight: bold;
  font-family: arial,helvetica,sans-serif;
}

#waitIndicator {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6; /* above .grayOverlay in common-gwt.css */
}


/** jQuery **/

.ui-autocomplete {
	font-family: sans-serif;
	font-size: 12px;
}

.ui-autocomplete,
.ui-autocomplete .ui-corner-all {
	border-radius: 0;
}

.ui-autocomplete a {
	color: #444;
}

.ui-autocomplete .ui-state-focus {
	border: 0;
	margin: 0;
	background: #e5f1fe;
}

.ui-autocomplete .emphasize {
	color: black;
	font-weight: bold;
}


/** Date Range Picker **/

.date-picker-wrapper .custom-shortcut {
	margin-left: 5px;
}


/** Indeterminate Circular Progress Indicator */

.indeterminateProgress {
  position: relative;
  width: 100px;
  height: 100px;
  animation: indeterminateProgressRotate 2s linear infinite;
}

.indeterminateProgressPath {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  stroke: #0057e7;
  animation: indeterminateProgressDash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes indeterminateProgressRotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes indeterminateProgressDash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

/** Media rules **/

/* GWT doesn't allow @media rules, so we had to put them here instead. */

@media only screen and (max-width: 700px) {
	/* If the screen is narrow then reduce the gap between columns, so that hopefully more of them will fit */
	.worldsGrid {
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) 200px !important;
	}
}

@media only screen and (max-width: 500px) {
	/* If there's only room for one column then don't make the grid display two columns */
	.worldsGrid {
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
	}
}