/*! 
 * 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;
}

/* Horizontal ruler slightly darker */
hr {
    border:0;
    border-top:1px solid var(--color-hr);
    margin:20px 0
}

.legend {
	font-size: 14px; 
    background-color: var(--color-legend-bg);
}


/* Color of radio button dot / checkbox */
input[type='radio'],input {
    accent-color: var(--color-slider);
}

input, select, textarea{
    color: var(--color-control);
    background-color: var(--color-input-bg);
}

.w3-card,.color-card {
    background: var(--color-card-bg);
}


button.selected,button.primary,button.w3-btn.primary {
    color: var(--color-button-primary);
    background-color: var(--color-button-primary-bg);
}

button.secondary,button.w3-btn.secondary {
    color: var(--color-button-secondary);
    background-color: var(--color-button-secondary-bg);
}

.color-main {
    color:var(--color-main) !important; 
    background-color:var(--color-main-bg) !important;   
}

.color-card-header{
    color: var(--color-card-header)
}

.color-menu {
    color:var(--color-menu) !important; 
    background-color:var(--color-menu-bg) !important;   
}


/* Color of routing indicators */
.color-matrix-routing-ok {
    color: var(--color-matrix-routing-ok);
}

.color-matrix-routing-asrc {
    color: var(--color-matrix-routing-asrc);
}

.color-matrix-routing-error {
    color: var(--color-matrix-routing-error);
}

.color-button {
    color: var(--color-button);
    background-color: var(--color-button-bg);
}


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

/* Link formatting: Remove underlines from links, only on hover */
#about-tab a:link, #about-tab a:visited, #about-tab .warning-more-link {
    color: var(--color-about-link);
    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: var(--color-helptext);
    -webkit-margin-after: 0em;
    -webkit-margin-before: 0em;
    margin-top: 0px;
    margin-bottom: 0px;
}


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

/* Color for "offline" crossed-out cloud */
#offline line, #offline path {
    stroke: var(--color-main);
}

/* Different background color for dialogs */
.color-dialog-bg {
    background: var(--color-dialog-bg);
}
 


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


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


/* 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:  var(--color-control-bg); 
}

/* Black border means "Appsys black" (anthracite) */
.w3-border-black {
	border-color: var(--color-title) !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;
}

p.headamp-type {
    font-weight: bold;
    color : var(--color-card-header);   
}

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

#about-tab table th {
     border-bottom: 1px solid var(--color-hr);
}


/* 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: var(--color-background);
}

/* 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: var(--color-routinglist-ok-bg); 
	color:            var(--color-routinglist-ok);
}

/* Routing list: failure entries red */ 
#RoutingList option[data-state="failure"] { 
	background-color: var(--color-routinglist-error-bg);
	color:            var(--color-routinglist-error);
}
	
#ifdef MK1	
/* Routing list: asrc entries yellow */ 
#RoutingList option[data-state="asrc"] { 
	background-color: var(--color-routinglist-asrc-bg); 
	color:            var(--color-routinglist-asrc); 
}
#endif
#ifdef MK2
/* Routing list: asrc entries yellow */ 
#RoutingList option[data-state="asrc"] { 
	background-color: var(--color-routinglist-asrc-bg);
	color:            var(--color-routinglist-asrc);
}
#endif

/* Routing list: mixed entries grey */ 
#RoutingList option[data-state="mixed"] { 
    background-color: var(--color-routinglist-mixed-bg) ; 
    color:            var(--color-routinglist-mixed) ; 
}

.w3-bordered tr, .w3-table-all tr {
    border-top: 1px solid var(--color-hr);
    border-bottom: none;
}

.w3-border {
    border: 1px solid var(--color-hr) !important;
}

.crosshair {
    background-color: var(--color-matrix-crosshair);
}