/*! 
 * Custom adjustments of W3 theme and general look-and-feel
 * NOTE: Matrix styling is complex and goes into own file "matrix.css"
 */
   

/* Default font for all elements */
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial, sans-serif;
}


/* Font size for everything except headers */
html, body, .menu * {
  font-size: 16px;
}

.legend {
	font-size: 14px; 
    background-color: #eeeeee;
}


/* Link formatting: Remove underlines from links, only on hover */
a:link, a:visited, .warning-more-link {
    color: #0645AD;
    text-decoration: none;
}

a:hover:not(.w3-bar-item) {
    text-decoration: underline;
}


/* Help box formatting */
.helptext, label.interface {
	font-weight: normal;
	font-size: 16px;
	color: #777777;
    -webkit-margin-after: 0em;
    -webkit-margin-before: 0em;
    margin-top: 0px;
    margin-bottom: 0px;
}


/* Grey out disabled elements */
:disabled {
	opacity: 0.26;
}


#preset-menu-title {
	padding-bottom: 14px; /* overwrite bottom-bar */
}


/* Normal labels except bar items */
label:not(.w3-bar-item) {
	font-weight: bold;
}

/* Prevent selection of divs, https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
div {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/* Adjust opacity */
label.w3-opacity {
	opacity: 0.26;
}


/* All tabs uppercase, top spaced */ 
.main-tablink, .main-lock {
	padding-top: 16px !important;
	text-transform:uppercase; 
}

/* Non-selected tabs: dim slightly */
.main-tablink.w3-opacity {
	opacity: 0.7;
}


/* Match the "PRESET" menu to look like the tabs */
#preset-menu-title {
	padding-top: 16px;
	width: 150px !important;
	text-align: center;
	text-transform:uppercase; 
}

/* Indent non-checked preset numbers to align with the selected one */
.preset-item::before {
    content: "\2002\2002";
}

/* Insert Dot+space befor the number of the selected preset */ 
.preset-item.checked::before {
	content: "\25CF\2002";
}


/* Add "star" to indicate a changed, unsaved preset */
.preset-item.checked.modified::after {
	content: "*";
}

/* Dropdowns and Delete all button in light grey */
.w3-select, #button-delete-all {
	background-color: #dddddd; /* light gray */
}

/* Black border means "Appsys black" (anthracite) */
.w3-border-black {
	border-color: #333333 !important;
}


/* Routing list: size of  +/Edit/- buttons */ 
.w3-circle {
	height: 48px;
	width: 48px;
}

/* Information area below Routing-view bar */
.warning {
    position: fixed;
    bottom: 0;
    width: calc(100% + 64px);
    box-sizing: border-box;
    padding: 10px 10px 10px 30px;
    margin: 0px -32px 0px -32px;
}

/* Tables in "ABOUT" Tab */
#about-tab table {
	 text-align: left;
}

#about-tab table th {
     border-bottom: 1px solid grey;
}


/* Routing mode button style */
#Routing .routing-mode-button {
    width: 170px;
}

/* List view: Sort mode button */ 
#routing-sort-mode {
	font-family: monospace;
}


/* Routing list general appearance */ 
#RoutingList {
	font-family: monospace;
	padding-top: 0px;
	margin-top:  0px;
	background-color: #ffffff;
}

/* Routing list: Hide entries containing any "NONE" routings */
#RoutingList option[data-state="none"] {
	display:none;
}

/* Routing list: ok entries green */ 
#RoutingList option[data-state="ok"] {
	background-color: #c8e6c9; /* Green 100 */
	color:            #003300; /* Green 900 dark */
}

/* Routing list: failure entries red */ 
#RoutingList option[data-state="failure"] { 
	background-color: #ffcdd2; /* Red 100 */
	color:            #7F0000; /* Red 900 dark */
}
	
/* Routing list: asrc entries yellow */ 
#RoutingList option[data-state="asrc"] { 
	background-color: #fff9c4; /* Yellow 100 */
	color:            #bc5100; /* Yellow 900 dark */
}

/* Routing list: mixed entries grey */ 
#RoutingList option[data-state="mixed"] { 
    background-color: #f5f5f5; /* Gray 100 */
    color:            #212121; /* Gray 900 dark */
}