:root {
   --color-bg: rgb(40, 40, 40);
   --color-bg-alt: rgb(55, 55, 55);
   --color-bl: rgb(0, 0, 0);
   --color-fg: rgb(80,80,80);
   --color-hv: rgb(120,120,120);
   --color-txt: rgb(230,230,230);

   --color-red-fg: rgb(160,80,80);
   --color-red-hv: rgb(200,120,120);

   --color-cli: rgb(0, 0, 80);
   --color-cli-input: rgb(0, 0, 90);
   --color-cli-border: rgb(0, 0, 140);
   --color-cli-txt: rgb(170, 170, 170);
   --color-cli-txt-gr: rgb(100, 100, 100);
   --color-cli-txt-rd: rgb(140, 50, 50);
   --color-cli-txt-gn: rgb(35, 140, 100);

   --color-chat: rgb(3, 15, 0);
   --color-chat-input: rgb(5, 31, 2);
   --color-chat-input-hl: rgb(60, 110, 30);
   --color-chat-border: rgb(5, 35, 5);
   --color-chat-txt: rgb(130, 200, 75);
   --color-chat-txt-gr: rgb(100, 100, 100);
   --color-chat-txt-rd: rgb(140, 50, 50);
   --color-chat-txt-gn: rgb(35, 140, 100);
   --color-chat-date: rgb(200, 125, 75);

   --color-ebuy: rgb(40, 25, 10);
   --color-ebuy-input: rgb(100, 50, 20);
   --color-ebuy-border: rgb(125, 70, 30);
   --color-ebuy-txt: rgb(210, 150, 50);
   --color-ebuy-hover: rgb(240, 170, 70);

   --color-telex: rgb(40, 0, 0);
   --color-telex-border: rgb(110, 0, 0);
   --color-telex-txt: rgb(180, 0, 0);
   --color-telex-txt2: rgb(140, 0, 0);
   --color-telex-input: rgb(100, 50, 20);
   --color-telex-hover: rgb(240, 170, 70);

   --color-bilanz-rd: rgb(190, 40, 40);
   --color-bilanz-gn: rgb(25, 170, 80);

   --color-bd-bg: rgb(20, 0, 0);
   --color-bd-border: rgb(100, 0, 0);

   --color-bd-input: rgb(60, 0, 0);
   --color-bd-input-hv: rgb(100, 0, 0);
   
}

* {
   box-sizing: border-box;
   margin-top: 0px;
   font-family: Verdana, Helvetica, sans-serif;
}

@media only screen and (max-height: 450px) {
   :root { font-size: 14px; }
}
@media only screen and (min-height: 451px) and (max-height: 550px) {
   :root { font-size: 16px; }
}
@media only screen and (min-height: 551px) and (max-height: 750px) {
   :root { font-size: 18px; }
}
@media only screen and (min-height: 751px) and (max-height: 950px) {
   :root { font-size: 20px; }
}
@media only screen and (min-height: 951px) {
   :root { font-size: 24px; }
}


body {
   font-size: 1em;
   color: var(--color-txt);
   background-color: var(--color-bl);
}

h1 {
   font-size: 1.1em;
   font-style: normal;
   font-weight: 600;
   margin: .6em 0 .4em 0; 
}

h2 {
   font-size: 1em;
   font-style: normal;
   font-weight: 600;
   margin: .6em 0 .4em 0; 
}

h3 {
   font-size: .9em;
   font-style: normal;
   font-weight: 600;
   margin: .6em 0 .4em 0; 
}

h4 {
   font-size: .8em;
   font-style: normal;
   font-weight: 600;
   margin: .6em 0 .4em 0; 
}

h5 {
   font-size: .8em;
   font-style: normal;
   font-weight: 200;
   margin: .2em 0 .4em 0; 
}

h6 {
   font-size: .8em;
   font-style: italic;
   font-weight: 200;
   margin: .2em 0 .4em 0; 
}

hr {
   height: 1px;
   border-width: 1px;
   margin: .6em 0 .4em 0; 
   color: var(--color-bd-border);
}


p {
   font-size: .8em;
   font-style: normal;
   margin: .2em 0 .2em 0; 
}

ul{
   margin: .2em 0 .2em 0; 
}

ol{
   margin: .2em 0 .2em 0; 
}

li{
   font-size: .8em;
   font-style: normal;
}

ion-icon {
   font-size: 1em;
   padding: 0em .2em;
 }

.headTitle{
   font-size: .75em;
   font-style: normal;
   font-weight: 600;
   margin: 0 0 0 0; 
}

.mainContainer {
   width: 60em;
   margin: 0.5em auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;
   align-items: start;
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.navContainer {
   width: 60em;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-rows: auto;
   align-items: start;
   column-gap: 0.5em;
   row-gap: 0.5em;
   padding: .5em .5em 0em .5em;
}

.tableContainer {
   width: 60em;
   margin: auto;
   display: grid;
   grid-template-columns: 3em 1fr 3em 4fr 2fr 1fr;
   grid-template-rows: auto;
   align-items: start;
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.landingContainer {
   width: 60em;
   margin: auto;
   display: grid;
   grid-template-columns: 10em auto 10em auto 10em;
   grid-template-rows: auto;
   align-items: start;
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.container {
   padding: 0.5em;
   margin: 0em; 
   align-items: start;
   background-color: var(--color-bd-bg);
   opacity: 0.95;
   border-radius: 0.25em;
   display: grid;
   grid-template-rows: auto;
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.containerStandings{
   border-top: 0.25em solid var(--color-bd-border);
   grid-template-columns: 2em 2em auto 2em 2em 2em 3em;
}

.containerGamedays{
   padding: 0;
   margin: 0; 
   align-items: start;
   display: grid;
   grid-template-rows: auto;
   column-gap: 0;
   row-gap: 0.5em;
   grid-template-columns: 1fr;
}

.containerGameday{
   border-top: 0.25em solid var(--color-bd-border);
   grid-template-columns: 2em auto 2em 2em 2em auto 2em;
}

.stretch {
   align-self: stretch;
}

.note{
   padding: 0.5em;
   margin: 0em;
   align-items: start;
   background-color: var(--color-bd-bg);
   border-top: 0.25em solid var(--color-bd-border);
   opacity: 0.95;
   border-radius: 0.25em;
   display: inline;
   align-self: stretch;
}

.notespace{
   margin: 0 0 .5em 0;
}

.pinnwandContainer{
   grid-template-columns: 1fr 1fr 1fr;
}

.pinnwandContainer{
   grid-template-columns: 1fr 1fr 1fr;
}

.tablePBay{
   grid-template-columns: 2fr 6fr 2fr 1fr 1fr;
}

.cartContainer { 
   grid-template-columns: 1.75fr .15fr .25fr .15fr .7fr;
}

.productContainer { 
   grid-template-columns: 2fr .5fr .5fr .25fr;
}

.loginContainer { 
   grid-template-columns: 1fr 2fr 1fr;
}

.calcContainer { 
   grid-template-columns: 1.5fr .5fr .5fr .5fr;
}

.carsContainer { 
   grid-template-columns: 1fr .25fr .5fr .5fr .5fr;
}

.todoContainer { 
   grid-template-columns: 2fr 5fr 1fr;
   grid-template-rows: 1.5em 1.5em auto 1.5em auto;
   grid-template-areas:
    'company text button1'
    'caller text button2'
    'call text agent'
    'creator text date'
    'order order order';
}

.todoCompany { grid-area: company; }
.todoCaller { grid-area: caller; }
.todoCreator { grid-area: creator; }
.todoCall { grid-area: call; }
.todoText { grid-area: text; height: 100%; }
.todoDate { grid-area: date; }
.todoButton1 { grid-area: button1; }
.todoAgent { grid-area: agent; }
.todoOrder { 
   grid-area: order; 
   display: grid;
   grid-template-columns: 4fr 2fr 1fr 2fr;
   grid-template-rows: auto;
   align-content: start;    
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.todoWarning {
   background-color: rgb( 60, 0, 0 );
}

.todoDone {
   background-color: rgb( 0, 60, 0 );
}

.todoError {
   background-color: rgb(70, 40, 0);
}

.gewContainer { 
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1.5em 1.5em auto;
   grid-template-areas:
   'company caller call'
   'creator agent agent'
   'text text button';
}
.gewButton { grid-area: button; }

.kryptonContainer { 
   grid-template-columns: 4fr 1fr;
   grid-template-rows: 1.5em 1.5em 1.5em auto;
   grid-template-areas:
    'text creator '
    'text date '
    'text button1'
    'text button2';
}

.kryptonCompany { grid-area: company; }
.kryptonCaller { grid-area: caller; }
.kryptonCreator { grid-area: creator; }
.kryptonCall { grid-area: call; }
.kryptonText { grid-area: text; height: 100%; }
.kryptonDate { grid-area: date; }
.kryptonButton1 { grid-area: button1; }
.kryptonAgent { grid-area: agent; }

.kryptonWarning {
   background-color: rgb( 60, 0, 0 );
}

.kryptonDone {
   background-color: rgb( 0, 60, 0 );
}

.bilanzContainer { 
   grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr .75fr;
}

.bilanzGrn { color: var(--color-bilanz-gn); }
.bilanzRed { color: var(--color-bilanz-rd); }

.bilanzTable > div:nth-child(14n + 8),
.bilanzTable > div:nth-child(14n + 9),
.bilanzTable > div:nth-child(14n + 10),
.bilanzTable > div:nth-child(14n + 11),
.bilanzTable > div:nth-child(14n + 12),
.bilanzTable > div:nth-child(14n + 13),
.bilanzTable > div:nth-child(14n + 14) {
   background-color: var(--color-bg-alt);
}

.ausgabenContainer { 
   grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr;
}

.ausgabenPos { color: var(--color-bilanz-gn); }
.ausgabenNeg { color: var(--color-bilanz-rd); }


.spacer{
   height: 2em;
}

.title {
   padding: .5em .5em 0em .5em;
   margin: .5em .5em 0em .5em;
   border-radius: 0.25em;
}

.cardtitle{
   font-size: 1.1em;
   font-style: normal;
   font-weight: 600;
}

.footer {
   font-size: .75em;
}

.item {
   display: flex;
   justify-content: center;
   align-items: center;
   align-self: stretch;
}

.item-left {
   justify-content: left;
   text-align: left;
}

.item-right {
   justify-content: right;
   text-align: right;
}

.textGrn { color: var(--color-bilanz-gn); }
.textRed { color: var(--color-bilanz-rd); }

.item-order {
   color: var(--color-bg);
   background-color: var(--color-hv);
   align-items: top;
   text-align: left;
   justify-self: stretch;
}

.table{
   font-size: .75em;
}

.logo {
   grid-row: span 2;
}

.double {
   grid-column: span 2;
}

.tripple {
   grid-column: span 3;
}

.quatre {
   grid-column: span 4;
}

.quinte {
   grid-column: span 5;
}

.sexte {
   grid-column: span 6;
}

.septe {
   grid-column: span 7;
}

input {
   width: 100%;
   height: 1.5em;
   font-size: 1em;
   text-align: left;
   color: var(--color-txt);
   background-color: var(--color-bd-input);
   border: .1em solid var(--color-bd-input) ;
   border-radius: .25em;
}

input:hover { outline-color: var(--color-bd-input-hv); background-color: var(--color-bd-input-hv); }
input:focus { outline-color: var(--color-bd-input-hv); background-color: var(--color-bd-input-hv); }
input:active { outline-color: var(--color-bd-input-hv); background-color: var(--color-bd-input-hv); }

.small-td {
   width: 5em;
}

button {
   font-size: 0.8em;
   padding: 0.2em 0.6em;
   text-align: right;
   color: var(--color-txt);
   background-color: var(--color-bd-input);
   border: .1em solid var(--color-bd-input);
   border-radius: .25em;
}

button:hover { border-color: var(--color-bd-input-hv); background-color: var(--color-bd-input-hv); }
button:focus { border-color: var(--color-bd-input-hv); background-color: var(--color-bd-input-hv); }
button:active { border-color: var(--color-bd-input-hv); background-color: var(--color-bd-input-hv); }

.button-red{
   background-color: var(--color-red-fg);
   border: .1em solid var(--color-red-fg);
}
.button-red:hover { border-color: var(--color-red-hv); background-color: var(--color-red-hv); }
.button-red:focus { border-color: var(--color-red-hv); background-color: var(--color-red-hv); }
.button-red:active { border-color: var(--color-red-hv); background-color: var(--color-red-hv); }


select, textarea {
   font-size: 1rem;
   text-align: left;
   color: var(--color-txt);
   background-color: var(--color-bg);
   border: .1em solid var(--color-fg);
   border-radius: .25em;
}

textarea {
   font-size: 0.8em;
}

.pin {
   letter-spacing: 1em;
   text-align: center;
}

.dropdown {
   position: relative;
   background: var(--color-fg);
   color: var(--color-txt);
   font-size: .8em;
   padding: 0.2em 0.6em;
   transition: 0.5s;
   border-bottom: .25em solid transparent;
   text-align: left;
}

.dropdown:hover,
.dropdown.active{
   border-bottom: .25em solid var(--color-txt);
   cursor: pointer;
}

.dropdown-menu {
   z-index: 25;
   position: absolute;
   background: var(--color-fg);
   font-size: 1em;
   padding: 0.25em;
   top: calc(100% + .25em);
   left:0;
   right:0;
   margin: 0;
   max-height: 16em;
   overflow: auto;
}

.dropdown-item {
   transition: 0.5s;
}

.dropdown-item:hover {
   background: var(--color-hv);
}

.titel {
   overflow: hidden;
}


.cli{
   position: absolute;
   left: 38%;
   right: 3%;
   top: 20%;
   bottom: 5%;
   padding: .5em;
   color: var(--color-cli-txt);
   background-color: var(--color-cli);
   border-style: solid;
   border-width: 12px 2px 2px 2px;
   border-color: var(--color-cli-border);
   display: grid;
   grid-template-rows: auto 1em;
   grid-template-columns: auto;
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.cli-line{
   font-family: 'Courier New', monospace;
   font-size: .8em;
   font-weight: bold;
   align-items: bottom;
   text-align: left;
   animation: fadeInAnimation ease 0.5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;  
}

.cli-output{
   overflow: hidden;
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
}

.cli-input{
   font-family: 'Courier New', monospace;
   width: 88%;
   font-size: 1em;
   font-weight: bold;
   text-align: left;
   color: var(--color-cli-txt);
   background-color: var(--color-cli-input);
   border: 0px solid black;
   border-radius: 0;
   outline: 0;
   display: inline;
}

.cli-input:hover { outline-color: var(--color-cli); background-color: var(--color-cli-input); }
.cli-input:focus { outline-color: var(--color-cli); background-color: var(--color-cli-input); }
.cli-input:active { outline-color: var(--color-cli); background-color: var(--color-cli-input); }

.cli-col-gr{
   color: var(--color-cli-txt-gr);
}

.cli-col-rd{
   color: var(--color-cli-txt-rd);
}

.cli-col-gn{
   color: var(--color-cli-txt-gn);
}

@keyframes fadeInAnimation {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}


.imageView{
   position: absolute;
   left: 0%;
   right: 0%;
   top: 0%;
   bottom: 0%;
   padding: .5em;
   background-color: rgba(0,0,0,0.7);
}

.imageContainer{
   margin: auto;
   max-width: 42em;
   display: flex;
   justify-content: center;
   align-items: center;
}


.th{
   text-align: left;
}

.MDimgDIV{
   width: 100%; 
   text-align: center;
   margin: .6em 0 .4em 0; 
}
.MDimg{
   width: 100%; 
   max-width: 42em;
}

.chat{
   position: absolute;
   left: 5%;
   right: 30%;
   top: 5%;
   bottom: 20%;
   padding: .5em;
   color: var(--color-chat-txt);
   background-color: var(--color-chat);
   border-style: solid;
   border-width: 12px 2px 2px 2px;
   border-color: var(--color-chat-border);
   display: grid;
   grid-template-rows: auto 2.75em;
   grid-template-columns: auto;
   column-gap: 0.5em;
   row-gap: 0.5em;
}

.chat-line{
   font-family: 'Courier New', monospace;
   font-size: .8em;
   font-weight: bold;
   align-items: bottom;
   text-align: left;
}

.chat-item {
   font-family: 'Courier New', monospace;
   font-size: 1em;
   font-weight: bold;
   align-items: bottom;
   text-align: left;
   align-items: top;
   text-align: left;
   justify-self: stretch;
}

.chat-date{
   font-size: 1em;
   color: var(--color-chat-date);
}

.chat-line-grid{
   display: grid;
   grid-template-columns: 6fr 1fr 1fr;
   grid-template-rows: auto;
   align-items: start;
   column-gap: 0.25em;
   row-gap: 0.25em;
}

.chat-output{
   overflow-y: auto;
   display: flex;
   flex-flow: column nowrap;
}

.chat-output > :first-child {
   margin-top: auto !important;
   /* use !important to prevent breakage from child margin settings */
}

.chat-input{
   font-family: 'Courier New', monospace;
   width: 20 em;
   font-size: 1em;
   font-weight: bold;
   text-align: left;
   color: var(--color-chat-txt);
   background-color: var(--color-chat-input);
   border: 0px solid black;
   border-radius: 0;
   outline: 0;
   display: inline;
}

.chat-input-btn{
   text-align: center;
   border: 1px solid var(--color-chat-input-hl);
}

.chat-input:hover  { outline-color: var(--color-chat); background-color: var(--color-chat-input-hl); }
.chat-input:focus  { outline-color: var(--color-chat); background-color: var(--color-chat-input); }
.chat-input:active { outline-color: var(--color-chat); background-color: var(--color-chat-input); }

.chat-col-drk {
   color: var(--color-chat-input-hl);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.ebuy{
   position: absolute;
   left: 40%;
   right: 2.5%;
   top: 25%;
   bottom: 20%;
   padding: .5em;
   color: var(--color-ebuy-txt);
   background-color: var(--color-ebuy);
   border-style: solid;
   border-width: 12px 2px 2px 2px;
   border-color: var(--color-ebuy-border);
   display: grid;
   grid-template-columns: 4fr 2fr .5fr 1fr .5fr 2fr;
   grid-template-rows: auto;
   align-content: start;    
   column-gap: 0.5em;
   row-gap: 0.5em;
}


.ebuy-item {
   font-family: 'Courier New', monospace;
   font-size: 1em;
   font-weight: bold;
   text-align: left;
   align-items: stretch;
}


.ebuy-hover:hover {
   cursor: pointer;
   color: var(--color-ebuy-hover);
}

.ebuy-input{
   font-family: 'Courier New', monospace;
   width: 100%;
   font-size: 1em;
   font-weight: bold;
   text-align: left;
   color: var(--color-ebuy-txt);
   background-color: var(--color-ebuy);
   border: 1px solid var(--color-ebuy-txt);
   border-radius: 0;
   outline: 0;
   display: inline;
}

.ebuy-input:hover { background-color: var(--color-ebuy); border-color: var(--color-ebuy-hover); }
.ebuy-input:focus { background-color: var(--color-ebuy); border-color: var(--color-ebuy-txt); }
.ebuy-input:active { background-color: var(--color-ebuy); border-color: var(--color-ebuy-txt); }



.telex{
   position: absolute;
   left: 2.5%;
   right: 40%;
   top: 25%;
   bottom: 15%;
   padding: .25em;
   color: var(--color-telex-txt);
   background-color: var(--color-telex);
   border-style: solid;
   border-width: 12px 2px 2px 2px;
   border-color: var(--color-telex-border);
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: auto;
   column-gap: 0.5em;
   row-gap: 0.25em;
}

.telex-line{
   height: 1em;
   font-family: 'Courier New', monospace;
   font-size: .66em;
   font-weight: bold;
   align-items: bottom;
   text-align: left;
   animation: fadeInAnimation ease 0.5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
}

.telex-output{
   overflow: hidden;
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
}

.telex-col-dr{
   color: var(--color-telex-txt2);
}




@keyframes example {
   0% {
     -webkit-filter: saturate(8);
     filter: saturate(8);
     left: 20px;
   }
   25% {
     -webkit-filter: hue-rotate(180deg);
     filter: hue-rotate(180deg);
     right: 20px;
   }
   50% {
     -webkit-filter: invert(.8);
     filter: invert(.8);
     top: 20px;
   }
   100% {
     -webkit-filter: hue-rotate(0deg);
     filter: hue-rotate(0deg);
     bottom: 20px;
   }
 }
 
 .glitch:hover {
   position: relative;
   animation-name: example;
   animation-duration: 300ms;
   cursor: pointer;
 }
 


.price {
   text-align: right;
}

.quantity {
   text-align: center;
}

.fullWidth{
   width: 100%;
}