:root
{
    --app-background: rgb(0, 0, 0);
    --app-content-background: #101010;
    --app-font-color: white;
    
    --app-color-red:#ec0b16;
    --app-color-green: #14B714;
    
    --element-radius: 1em;
    --element-background: #9a9996;
    --element-background-dark: rgb(94, 92, 100);  
    --element-height: 4em;
    
    --sub-element-height: 3.5em;
    
    --dialog-background: rgba(0, 0, 0, 0.8);
    --dialog-content-background: #34683f;
    
    --form-background-color: #444444;
    
    --topbar-height: 2em;
}

html
{
    background: var(--app-background);
}

body
{
    color: var(--app-font-color);
    font-weight: bold;
    
    margin: 0.5em;
    
    display: grid;
}

header
{
	grid-row: 1;
}

h3
{
	text-align: center;
}

label, 
div, 
input, 
textarea
{
    color: var(--app-font-color);
    font-weight: bold;
}

input:focus,
textarea:focus,
button:focus,
a:focus
{
	outline: none;
}

input,
textarea
{
	background-color: transparent;
	border: 0px;
	
	width: 100%;
	
	text-align: center;
}

.app-page
{
	background-color: var(--form-background-color);
	border-radius: var(--element-radius);
	
	padding: 0.5em;
	
	display: flex;
	flex-direction: column;
	
	align-items: center;
}

.app-form
{
	padding: 0.5em;
	
	background-color: var(--form-background-color);
	border-radius: var(--element-radius);
}

.flash-error
{
	color: var(--app-color-red);
	font-size: 1.3em;
}

a
{   
    text-decoration: none;
    cursor: pointer;
    color: var(--app-font-color);
    font-weight: bold;
    
    width: 100%;
    flex-grow: 1;
    min-height: 1em;
    text-align: center;
}

td
{
	text-align: center;
}

form
{
	display: flex;
	justify-content: center;
}

button,
[id="form_cancle"]
{
	width: 100%;
	border: 0px;
	border-radius: var(--element-radius);
	color: var(--app-font-color);
    font-weight: bold;
    background: var(--element-background);
    
    padding: 0.2em;
}

button[id="form_save"]
{
    background: var(--app-color-green);
}

.app-grid-layout
{
	display: grid;
}