@import "accordion.css";
@import "badges.css";
@import "buttons.css";
@import "modals.css";
@import "tables.css";

body {
	margin: 1rem;
    background-color: var(--theme-bg);
    color: var(--theme-text1);
    min-width: 420px;
}

.content {
    font-family: sans-serif;
    font-size: 1.2rem;
    width: 100%;
    padding: 0;
    margin: auto;
}

.bold {
    font-weight: bold;
}

.centered {
    text-align: center;
}

.marginLeft {
    margin-left: 1rem;
}

.marginRight {
    margin-right: 1rem;
}

.marginBottom {
    margin-bottom: 1rem;
}

.inline {
    display: inline-block;
}

.textIcon {
    vertical-align: bottom;
}

strong > .textIcon {
    vertical-align: top;
}

em > .textIcon {
    vertical-align: middle;
}

input[type="number"] {
    margin: 0.5rem;
    max-width: 3rem;
    border-radius: 0.5rem;
    text-align: center;
}

input[type="date"] {
	margin: 0.5rem;
	border-radius: 0.5rem;
}

.componentList {
    width: 100%;
    vertical-align: top;
    border: solid 0.25rem var(--theme-border);
    border-radius: 0.25rem;
    padding: 0.5rem;
	margin: 0.25rem auto;
}

.settingsContainer {
    border: solid 0.125em var(--theme-border);
    border-radius: 0.125em;
    margin: 0.5em;
    padding: 0.5em;
}

.settingsContainer > h4 {
	background-color: #000;
}

.hidden {
    display: none;
}

.panel {
	background-color: var(--theme-panel);
	border: solid 0 var(--theme-border);
	border-radius: 0.5rem;
	padding: 1rem;
}