:root {
    --ebi-green: #18974C;
    --ebi-grey: #54585A;
}

.font-plex-mono {
    font-family: 'IBM Plex Mono', monospace;
}

.font-plex-sans {
    font-family: 'IBM Plex Sans', sans-serif;
}

.fg-ebi-green {
    color: var(--ebi-green);
}

.fg-ebi-grey {
    color: var(--ebi-grey);
}

.fg-ebi-red {
    color: red;
}

.bg-ebi-green {
    color: white;
    background-color: var(--ebi-green);
}

.bg-ebi-grey {
    color: white;
    background-color: var(--ebi-grey);
}

main {
    min-height: 80vh;
    margin-top: 40px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-family: 'IBM Plex Mono', monospace;
    margin-bottom: 30px;
}

.footer {
    border-top: 7px solid var(--ebi-green);
    height: 200px;
    margin-top: 30px;
    padding-top: 20px;
    font-size: 12px;
}

.ebi-icon {
    font-size: 1.2em;
}

.breadcrumb-item {
    font-size: 0.8em;
    color: white;
}

li.breadcrumb-item > a:link, li.breadcrumb-item > a:visited, li.breadcrumb-item > a:hover, li.breadcrumb-item > a:visited {
    color: white;
    text-decoration: none;
}


#sat-toolbar {
    background-color: #F1F1F1;
    border: 1.5px solid #7B7B7B;
}

#ger-toolbar {
    background-color: #F1F1F1;
}

.sat-card {
    color: #193f90;
    border-radius: 0;
    background-color: white;
    border-bottom: 8px solid #18974c;
    box-shadow: 0 .125rem .25rem rgba(84, 88, 90, .5);
}

.sat-card-body {
    font-size: 21px;
}

.sat-button {
    font-family: IBM Plex Sans, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: white;
    background-color: #3b6fb6;
    box-shadow: 8px 8px 0 #193f90;
    padding: 12px 24px;
    text-decoration: none;
}

.sat-device-warning {
    padding: 10px;
    margin: 0;
    background-color: orange;
    text-align: left;
    font-weight: bold;
}

.sat-project-description {
  white-space: pre-wrap;
  background-color: #eee;
  padding: 10px;
}

/* overrides against ebi-global.css */
.button {
    margin: 0;
}

.margin-top-1 {
    margin-top: 1rem;
}

.margin-bottom-1 {
    margin-bottom: 1rem;
}

.margin-1 {
    margin: 1rem;
}

.button.success,
.button.alert {
    color: white;
}

[type="checkbox"] {
    margin: 0;
}



.tabs-title > a {
    font-size: inherit;
    line-height: 1.5;
}

.shadow {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.bordered {
    border: 0.0625rem solid #cacaca;
}

.radius {
    border-radius: 0.1875rem;
}

/* ends overrided against ebi-global.css */

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    /*border-top: none;*/
}

.muted-text {
    color: grey;
}

.strong-white-text {
    font-weight: bold;
    color: white;
}

/* https://css-tricks.com/slightly-careful-sub-elements-clickable-things/
Ensure event is correctly mapped to the target
*/
a > * {
    pointer-events: none;
}

button > * {
    pointer-events: none;
}

section {
    margin-bottom: 30px;
}