@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap');
@import "./pico.min.css";
@import "./mgkaui.css";

/* VERSION 1.7 */
:root {
    --mgka-darkblue: #315480;
    --mgka-lightblue: #5790C1;
    --material-background: #1a73e8;
    --navdrawer-background: #ffffff;
    --button-red: #b00020;
    --button-black: #111111;
    --button-green: #009900;



    --table-borders: #dddddd; /* The light border around components*/

}
* {
	/* CSS Reset */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.buttonblack {
	background-color: var(--button-black);
	border: 1px solid var(--button-black);
}
.buttongreen {
	background-color: var(--button-green);
	border: 1px solid var(--button-green);
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--mgka-darkblue);
    color: white;
    text-align: center;
}

.box,
.dialog {
        width: 50%;
        border-radius: 10px;
}

.dialog {
        background-color: #ffffff;
	border: 2px solid #111111;
}

html {
	height: 100%;
}

body {
        background-image: url("../img/background.svg");
	background-color: var(--mgka-darkblue);
	background-size: cover;
        background-repeat: repeat-y;
        background-position: center center;              
	min-height: 100%;
}

div.center {
        margin: 0 auto;
        text-align: center;
}

div.box,
div.greenbox {
        position: relative;
        margin: 0 auto;
        margin-top: 10px;
        border: 5px solid black;
        padding: 10px;
        width: 90%;
        /*height: 100px;*/
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.greenbox {
        background-color: "#009688";
}

div.redbox {
        background-color: "#960088";
}

div.blacktext {
        color: black;
}

div.smalltext {
        size: 14px;
}

#table {
        display: table;
}

.tr {
        display: table-row;
}

.td {
        display: table-cell;
        padding: 5px;
}

button {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*
button:hover {
        background-color: yellow;
}

button:active {
        color: black;
}

button.red {
        background-color: "#960088";
}

button.blue {
        background-color: "#000096";
}
*/
input {
        font-family: "Roboto";
        font-size: 24px;
        color: black;
        border: 2px solid black;
        padding: 10px;
        /*height: 100px;*/
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {
        vertical-align: middle;
}

div.tabheader {
    background-color: grey;
    display: inline;
    position: relative;
    padding: 5px;
    cursor: pointer;
}
div.tabheader:hover {
    background-color: yellow;
}
div.tabselected {
    background-color: red;
    display: inline;
    position: relative;
    padding: 5px;
    cursor: pointer;
}
div.tabselected:hover {
    background-color: yellow;
}

/* CSS SPINNER*/
.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 128px;
  height: 128px;
  margin: 6px;
  border: 6px solid #000;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #000 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}