html {
  --search-background-color: #cbdff2;
  --search-color: #5f6368;
  --search-text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
  --search-placeholder-color: rgba(0, 0, 0, 0.4);
  --search-canvas-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.8) 100%), url(../images/background/sky.jpg);

}

html[data-theme='dark'] {
  --search-background-color: #555555;
  --search-color: #DDDDDD;
  --search-text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  --search-placeholder-color: rgba(255, 255, 255, 0.4);
  --search-canvas-background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.95) 100%), url(../images/background/night-sky.jpg);
  /*--text-color: rgba(255, 255, 255, 0.8);(/
  /*--background-gradient-color: background-color: rgba(0, 0, 0, 0.4);*/

  /*--control-panel-background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));*/
}


.searchResultEntry.selected, .searchResult .searchResultEntry:hover {
    background: var(--table-selected-row-background);
}

.searchResult .searchResultEntry:hover {
    cursor: pointer;
}

#routeSearchResult .ticketTitle, #routeSearchResult .price, #routeSearchResult .summary {
    color: var(--search-color);
    font: 400 18px/16px Roboto, HelveticaNeue, Arial, sans-serif;
    letter-spacing: 0.3px;
}

#routeSearchResult .ticketTitle {
    margin-bottom: 10px;
}

.ticketTitle {
    color: var(--search-color);
    font: 400 18px/16px Roboto, HelveticaNeue, Arial, sans-serif;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}


#routeSearchResult .remark {
    font-size : 8px;
    background-color: darkgreen;
    box-shadow:0 0 2px #ffffff inset;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px 2px 2px 2px;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    padding: 4px;
    margin-top: 5px;
    margin-right: 3px;
    color : white;
}

#searchCanvas input {
    font-size: 20px;
    background-color: var(--search-background-color);
    border: 1px solid var(--input-color);
    box-shadow: 0 0 2px inset rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    color: var(--search-color);
}

#searchCanvas div.historySearch input {
    font-size: 14px;
}



#searchCanvas input::placeholder {
	color: var(--search-placeholder-color);
}

#searchCanvas input[type=text]:focus {
    background-color: var(--search-background-color);
    box-shadow: 0 0 2px inset rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.searchResult {
    /*float: left;*/
    width: 300px;
    position: absolute;
    top: 30px;
    background-color: var(--search-background-color);
    box-shadow:0 0 2px #666 inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.searchResult div {
    padding: 3px 5px;
}


#routeSearchResult {
    color: var(--search-color);
}

#routeSearchResult div.itinerary:hover {
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
    cursor: pointer;
}




#searchCanvas .mainSection {
    background: var(--search-canvas-background);
    background-size: cover;
}


#searchCanvas .search.button {
    box-shadow: var(--button-shadow);
    background: var(--button-background);
	backdrop-filter: var(--button-backdrop-filter);
	border-radius:6px;
	display:inline-block;
	cursor:pointer;
	/*color:#777777;*/
	padding:6px 24px;
	text-decoration:none;
	/*text-shadow:0px 1px 0px #ffffff;*/

	font: 400 18px/16px Roboto, HelveticaNeue, Arial, sans-serif;
	/*font-family:Arial;
	font-size:15px;
	font-weight:bold;*/
	width: 200px;
    text-align: center;
    display: block;
    margin : 10px auto;

}

#searchCanvas .search.button:hover {
	background-color: var(--button-hover-color);
}

#searchCanvas .search.button:active {
	position:relative;
	top:1px;
}

.titlesContainer {
    position: relative;
}

.titlesContainer .titleNavigation {
    position: absolute;
    left: 50%;
    transform : translate(-50%, 0%);
    width : 250px;
    bottom: 10px;
}

.titlesContainer .titleSelection {
    margin: 0.8em 0 0.5em 0;
    color: var(--search-color);
    font: 400 25px/12px Roboto, HelveticaNeue, Arial, sans-serif;
    text-shadow: var(--search-text-shadow);
    text-align: center;
    opacity : 0.5;
    width: 100px;
    transition: all 0.5s ease;
}


.titlesContainer .titleSelection.selected {
   width: 200px;
   font: 400 40px/12px Roboto, HelveticaNeue, Arial, sans-serif;
}

.titlesContainer .titleSelection.clickable.selected:hover {
    cursor: default;
}


.titlesContainer .titleSelection.selected, .titlesContainer .titleSelection:hover{
   background-color: transparent;
   opacity : 1.0;
   background: none;
   box-shadow: none;
}

#searchCanvas .searchCriterion div.label {
    font: 400 12px Roboto, HelveticaNeue, Arial, sans-serif;
    text-shadow: var(--search-text-shadow)
}


/*
#routeSearchResult div.itinerary {
    background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF 90%, #e8e8d8);
    backdrop-filter: none;
}
#searchCanvas, #searchCanvas div.table-row, #searchCanvas .label, #searchCanvas h4, #searchCanvas .header,
#floatMessageBox {
    color: #606060;
}
*/