/* TODO: für CompAir gab es einen eigenen Font ...
 */
.app {
	font-family: Arial, Helvetica, sans-serif;
}

html, body {
	height: 100%;
	width: 100%;
}

@font-face {
    font-family: SmartAirMaster;
    src: url("swissc.ttf");
    unicode-range:
        U+0020-U+0040, /* Punctuation, Numbers */

        U+0041-U+005A, /* Upper-Case A-Z */
        U+005B-U+0060, /* Punctuation and Symbols */
        U+0061-U+007A, /* Lower-Case a-z */
        U+007B-U+007E; /* Punctuation and Symbols */
}
@font-face {
    font-family: SmartAirMasterItalic;
    src: url("swisscit.ttf");
    font-style: italic;
    unicode-range:
        U+0020-U+0040, /* Punctuation, Numbers */

        U+0041-U+005A, /* Upper-Case A-Z */
        U+005B-U+0060, /* Punctuation and Symbols */
        U+0061-U+007A, /* Lower-Case a-z */
        U+007B-U+007E; /* Punctuation and Symbols */
}

/* Für die 3 hr, die Header, Status und Footer voneinander trennen */
hr {
	border-top: 1px solid #000000;
}

/* react-bootstrap <Button /> verwendet als Default immer variant="primary",
 * also bietet es sich an an dessen Aussehen herum zu drehen.
 * Dummerweise müssten die Farben abhängig vom Branding werden, argh!
 *
 * https://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap
 */
.btn-primary {
	background-image: linear-gradient(#fefefe, #d1d1d1) !important;
	/* Textfarbe */
	color: #0b333c !important;
	/* Umrandung */
	border-color: #3e3e3e !important;
}
.btn-primary:hover {
	background-image: linear-gradient(#bebebe, #818181) !important;
}
/* Während der Button vom Benutzer gedrückt wird */
.btn-primary:active,
.btn-primary.active{
	background-image: linear-gradient(#2b4a52, #232831) !important;
	color: #fdfdfd !important;
}
/* Erweiterung für (störrische) Buttons, die wie Togglebuttons aussehen sollen.
 * Diese Klasse wird durch die Anwendung dazu genommen, und sieht absichtlich
 * so aus, wie btn-primary:active.
 * Siehe LanguageButton.tsx.
 */
.btn-primary-active {
	background-image: linear-gradient(#2b4a52, #232831) !important;
	color: #fdfdfd !important;
}
/* Keinen Rand darstellen, wenn der Button den Tastatur-Fokus hat. */
/*.btn-primary:focus {
	box-shadow: 0 0 0 0 !important;
}*/

.card {
	border: 1px solid #000000
}
/* Stammt vom Footer */
.card-body {
	padding: 0.4rem !important;
}

/* z.B. im Footer, wenn !is_active
 * stammt von https://www.html-seminar.de/css-blinkender-text.htm
 */
.blink {
	animation-name: animation_blink;
	animation-timing-function: ease-in;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes animation_blink {
	0% { opacity: 1; }
	50% { opacity: 0.1; }
	100% { opacity: 1; }
}