/*
  Routegadget RG2 Custom CSS
  */

html, body {
	width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  display: block;
  font: 16px/26px -apple-system,Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

.ui-widget {
  font: 16px/26px -apple-system,Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

#rg2-header-container {
    background: #002bd9;
    color: white;
    position: relative;
    height: 30px;
    border-bottom: 4px solid black;
    font-size: 20px;
    line-height: 30px;
}

.rg2-result-search {
    width: 97%;
    margin: 3px;
}

.rg2-event-search {
    width: 97%;
    margin: 3px;
    font-size: 1em;
}

.input-group {
  margin-top: 5px;
}

.form-control {
  width: 90%;
}

#rg2-course-select, #rg2-name-select {
  min-width: 200px;
  max-width: 200px;
}

#rg2-manager-event-select {
  width: 100%;
}

#rg2-new-comments {
	margin-top:10px;
	margin-bottom: 10px;
	width: 100%;
	height: 50px;
}


#rg2-animation-controls {
  display: flex;
  flex-flow: column wrap;
  width: 350px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.rg2-ani-row {
    background: silver;
    color: white;
    vertical-align: middle;
    height: 36px;
  	z-index: 100;
    line-height: 36px;
}

.row-1 {
  border: 4px solid darkgray;
  font-size: 20px;
}

.row-2 {
  border-left: 4px solid darkgray;
  border-right: 4px solid darkgray;
}

.row-3 {
  border: 4px solid darkgray;
  color: black;
}

#rg2-resize-info {
	position: absolute;
  vertical-align: middle;
  padding-right: 10px;
}

#rg2-header {
	position: absolute;
  vertical-align: middle;
  left: 35px;
}

.rg2-button {
  background: silver;
  color: white;
	float: right;
	width: 30px;
	text-align: center;
	border-right: 4px solid darkgray;
}

.rg2-button-left {
  background: silver;
  color: white;
	float: left;
	width: 30px;
	text-align: center;
	border-right: 4px solid darkgray;
}

.rg2-button-right {
  background: silver;
  color: white;
	float: right;
	width: 30px;
	text-align: center;
	border-left: 4px solid darkgray;
}

.rg2-wide-button {
  background: silver;
  color: white;
	float: left;
	width: 55px;
	text-align: center;
  border-right: 4px solid darkgray;
}

.rg2-button:hover  {
  color: darkgray;
}

.rg2-button-left:hover{
  color: darkgray;
}

#btn-edit-delete-event, #btn-add-event {
    margin:0 auto;
    display:block;
}

#rg2-about {
   position: absolute;
   right: 0;
   padding-right: 20px;
}

#rg2-about-dialog {
	 font-size: 0.75em;
   display: none;
}

#rg2-about-dialog hr {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

#rg2-about-dialog table {
  width: 100%;
}

#rg2-about-dialog thead tr {
  background: #002bd9;
  color: #fff
}

#rg2-about-dialog thead th {
  text-align: left;
}

#rg2-about-dialog tbody td:nth-child(odd) {
  background: #ddd;
}

#rg2-about-dialog tbody td:nth-child(even) {
  background: #eee;
}

#rg2-about-dialog tbody td:first-child {
  width: 15%;
}

#rg2-about-dialog tbody td {
  text-align: left;
}

.splitstable {
	 font-size: 0.75em;
}

.splitstable th {
  font-weight: bold;
  background-color: white;
}

.splitsname-row {
  background-color: #C0C0C0;
}

.splitstime-row {
  background-color: #E0E0E0;
}


.splitsdistance-row {
  background-color: white;
}

.showcourse {
	float: right;
}

.allitemsrow {
  font-weight: bold;
}

.rg2-hr {
	margin-top: 10px;
	margin-bottom: 10px;
}

#rg2-clock {
   font-weight: bold;
   font-size: 26px;
   color: black;
 	 text-align: center;
    float:left;
    margin-left: 20px;
}

#rg2-tails-type {
	padding: 0 5px;
	border-right: 4px solid darkgray;
  float:left;
}

#spn-tail-length {
  width: 30px;
}

#rg2-tails-spinner {
  float: left;
  padding: 0 5px;
  border-right: 4px solid darkgray;
}

.rg2-spinner {
  width: 40px;
}

.rg2-run-green {
  color: green;
}

.rg2-run-red {
  color: red;
}

.options {
  float: right;
  padding-right: 5px;
  margin-top: 5px;
  clear:both;
}

#rg2-container {
	 height: 100%;
   width: 100%;
   position: relative;
   background: white;
   overflow: hidden;
   display: none;
}

#rg2-info-panel {
   font-size: 0.75em;
	 width: 360px;
   position: absolute;
	 z-index: 100;
	 height: 99%;
}

#rg2-info-panel-tab-headers {
   overflow: hidden;
   position: relative;
}

#rg2-info-panel-tab-headers .ui-tabs-nav a {
   padding: .5em;
}

#rg2-info-panel-tab-body {
   overflow: auto; /* add scroll bars if needed */
   height: 95.5%
}

#rg2-event-list .ui-menu-item {
  list-style-image: none;
}

#rg2-event-list .ui-menu-item a {
  text-decoration: none;
}

#rg2-event-list li:nth-child(odd) {
  background: #eee;
}

.rg2-active-event {
   border: 2px solid black;
}

#rg2-hide-info-panel-control {
  position:absolute;
  left: 366px;
  top: 4px;
  z-index: 100;
  color: black;
  width: 20px;
  text-align: center;
  border: 1px solid #AAA;
  background: #E0E0E0;
}

#rg2-map-canvas {
   position: absolute;
   z-index: 50;
}

.rg2-progress-display {
   border: 1px solid darkgray;
   background: rgb(204 204 204);
   background: rgb(204 204 204 / 100%);
   padding : 2px;
   font:1.0em/1.0em Arial, sans-serif;
   text-align:center;
   height: auto;
   width: 200px;
   z-index: 90;
   position: absolute;
}

#rg2-map-load-progress {
   top: 100px;
   left: 400px;
}

#rg2-load-progress {
   top: 200px;
   left: 400px;
}

.rg2-gps-text {
  line-height: 1.75em;
}

.rg2-gps-text ul {
  list-style-position: inside;
  margin: 0 0 0 15px;
  padding: 0;
}

.track-names {
   border: 1px solid darkgray;
   background: rgb(204 204 204);
   background: rgb(204 204 204 / 75%);
   padding : 2px;
   position: absolute;
   font:0.75em Arial, sans-serif;
   top: 0;
   right: 0;
   height: auto;
   width: auto;
   z-index: 90;
   max-height: 500px;
   overflow: auto;
   margin-top:5px;
   margin-right: 5px;
}

.align-right {
   text-align: right;
}

.align-left {
   text-align: left;
}

.align-center {
  text-align: center;
}

.track-names th {
  background: rgb(150 150 150);
  background: rgb(150 150 150 / 75%);
  text-align: left;
}

#rg2-replay-start-control {
  float: right;
  margin-right:5px
}

#rg2-control-select {
  width: 80px;
}

.pushright {
	float: right;
}

.singlerow {
  display: table;
  margin: auto;
  width: 99%;
  padding: 0.5em;
  text-align: center;
}

.singlerowitem {
  display: table-cell;
}

#rg2-manage-edit .ui-button {
	margin-top: 10px;
  margin-bottom: 10px;
}

/* mass start/real time icon colour */
.active {
	color: green;
}

/* light green background */
.valid {
  background-color: #9fc;
  border-radius: 3px;
}

.coursemenutable tbody tr:nth-child(odd) {
  background-color: #eee;
}

.coursemenutable tr, .coursemenutable td, .coursemenutable th {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

/* apply style to first td or th element in table
/ which is Name in this case
*/
table.resulttable td,
table.resulttable th {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

table.resulttable td + td,
table.resulttable th + th {
	width: 80%;
	text-align: left;
}

table.resulttable td + td + td,
table.resulttable th + th + th {
	text-align: center;
}

table.resulttable tbody tr:nth-child(odd) {
  background: #eee;
}

#rg2-result-list .ui-accordion,
#rg2-result-list .ui-accordion-content {
padding: 0;
}


#rg2-select-gps-file .ui-button {
	width: 300px;
	margin-bottom: 10px;
}

#rg2-button-bar .ui-button-text-icon-primary,
#rg2-button-bar .ui-button-text-icons,
#rg2-button-bar .ui-button-text {
	font-size: 0.75em;
	padding: .2em .2em .2em 1em;

}

#rg2-clock-slider {
  margin: 10px 15px;
  width: 175px;
  float:right;

}

#rg2-clock-slider .ui-state-default {
	background: silver;
	border: 4px solid darkgray;
}

#rg2-clock-slider .ui-state-focus {
	outline: none;
}

#rg2-clock-slider .ui-state-hover {
	background: darkgray;
}

#rg2-clock-slider .ui-slider-handle {
width: 15px;
height: 20px;
}

#rg2-tails-spinner .ui-widget-content {
  border: 2px solid darkgray;
}

#rg2-tails-spinner .ui-spinner {
	display: inline;
}

#rg2-tails-spinner .ui-state-default {
	background: silver;
	color: darkgray;
}

#rg2-tails-spinner .ui-state-active {
	color: silver;
}

#rg2-tails-spinner .ui-spinner input {
  font: 16px Helvetica, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 9px
}

#rg2-event-comments {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 95%;
	height: 50px;
}

#rg2-add-new-event .ui-button {
  margin-top: 10px;
  margin-bottom: 10px;
}

#rg2-new-event-details input {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* spinner icons */
#rg2-tails-spinner .ui-icon,
#rg2-tails-spinner .ui-widget-content .ui-icon {
	background-image: url("../img/ui-icons_222222_256x240.png");
}

#rg2-tails-spinner .ui-widget-header .ui-icon {
	background-image: url("../img/ui-icons_222222_256x240.png");
}

#rg2-tails-spinner .ui-state-default .ui-icon {
	background-image: url("../img/ui-icons_888888_256x240.png");
}

#rg2-tails-spinner .ui-state-hover .ui-icon,
#rg2-tails-spinner .ui-state-focus .ui-icon {
	background-image: url("../img/ui-icons_454545_256x240.png");
}

#rg2-tails-spinner .ui-state-active .ui-icon {
	background-image: url("../img/ui-icons_454545_256x240.png");
}

#rg2-tails-spinner .ui-state-highlight .ui-icon {
	background-image: url("../img/ui-icons_2e83ff_256x240.png");
}

#rg2-tails-spinner .ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("../img/ui-icons_cd0a0a_256x240.png");
}

/* allow close button on dialog to be hidden
 * see http://api.jqueryui.com/dialog
 */
.no-close .ui-dialog-titlebar-close {
display: none;
}

/*
 * prevent selection of objects everywhere
 */
body {
  -ms-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.selectable {
  -ms-user-select: all;
  -webkit-user-select: all;
  -khtml-user-select: all;
  -moz-user-select: all;
  -webkit-touch-callout: all;
  -webkit-user-drag: all;
  user-select: all;
}

.manage-input {
  margin-top: 3px;
  margin-right: 3px;
  width: 200px;
}

.manage-label {
  margin-left: 3px;
}

#rg2-draw label {
  margin-left: 3px;
}

.no-top-margin {
  margin-top: 0;
  margin-bottom: 2px;
}

#rg2-manage-create {
  padding-right: 5px;
}

#rg2-manage-create > div::after {
  display: block;
  content: "";
  clear: both;
}

#rg2-manage-create div, #rg2-manage-map div, #rg2-manage-edit div {
  margin-top: 5px;
}

.manage-file-input {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 200px;
}

.manage-file-input-div {
  height: 41px;
}

.manage-file-label {
  margin-top: 9px;
  margin-bottom: 9px;
}

.manage-event-edit-div {
  height: 30px;
  }

.manage-event-edit-div label, .manage-event-edit-div input {
  display: inline-block;
}

.manage-event-edit-div label {
  width: 80px;
}

#manage-edit-options input {
  width: 220px;
}

#manage-edit-options .ui-accordion-content {
  padding: 1em 0.5em;
}

#rg2-option-controls input[type="checkbox"] {
  margin-left: 10px;
  margin-top: 10px;
}

#rg2-draw .ui-button {
  margin-left: 5px;
  margin-top: 5px;
}

textarea {
  width: 95%;
  height: 100px;
}

#rg2-event-selected {
  width: 95%;
}

#rg2-world-file-map {
  height: 180px;
}

.rg2-first {
  color: darkblue;
  font-weight: bold;
}

.rg2-second {
  color: red;
  font-weight: bold;
}

.rg2-third {
  color: green;
  font-weight: bold;
}

.rg2-lost-time {
  background-color: #fde;
}

.rg2-results-table-container {
  height: 100%;
}

#rg2-results-grid-wrapper {
  height: 200px;
}

.rg2-event-stats-table {
  display: grid;
  grid-template-columns: 1fr 5fr;
  column-gap: 5px;
  row-gap: 5px;
  padding: 10px 0;
}

.rg2-event-stats-table .header {
  font-weight: bold;
  background-color: #AAA;
  padding: 5px;
}

.rg2-event-stats-table .item {
  background-color: #D8D8D8;
  padding: 5px;
}

.rg2-comments-table {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
  column-gap: 5px;
  row-gap: 5px;
  padding: 10px 0;
}

.rg2-comments-table .header {
  font-weight: bold;
  background-color: #AAA;
  padding: 5px;
}

.rg2-comments-table .item {
  background-color: #D8D8D8;
  padding: 5px;
}

.rg2-overlay-details-table {
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 1fr;
}

.overlay-bar {
  background-color: var(--overlay-colour);
  margin: 5px;
}

.rg2-info {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

#rg2-course-filter-table {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  row-gap: 10px;
  column-gap: 10px;
}

.filter-item {
  align-self: center;
  line-height: 1.5em;
}

.rg2-unused-map-table {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  margin-bottom: 15px;
}

.rg2-unused-map-table .title {
  font-weight: bold;
}

.rg2-control-slider-grid {
  display: grid;
  grid-template-columns: 125px 1fr;
  align-items: center;
}

#rg2-iterations {
  width: 100px;
}

div[data-filter="true"] {
  display: grid;
}

div[data-filter="false"] {
  display: none;
}