html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background-color: #F2F6FF;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Roboto", sans-serif ;
}

p {
  margin: 0;
}

h3 {
  margin: 0;
}

/* MOBILE VIEW */
@media screen and (max-width: 767px) {
/* wrapper max width */
.MainWrapper {
  max-width: 1140px;
  background-color: #F2F6FF;
  margin: 0 auto;
  font-size: 0;
  display: flex;
}

.SideNavLeft {
  display: none;
  width: 20.7%;
  min-width: 170px;
  background-color: #0A62A3;
  vertical-align: top;
  transition: all 0.3s ease;
  /* setting to full height */
  height: 100vh;
  /* fixed sidenav */
  position: sticky;
  top: 0;
  font-size: 14px;
}

.SideNavLeftShrinked {
  width: 59px;
  background-color: #0A62A3;
  vertical-align: top;
  transition: all 0.3s ease;
  /* setting to full height */
  height: 100vh;
  /* fixed sidenav */
  position: sticky;
  top: 0;
  font-size: 14px;
}

.LinksAppearSideNav {
  display: flex;
  flex-direction: column;
/* prevent link from whitespace */
  white-space: nowrap;
  align-items: flex-start;
  justify-content: space-evenly;
  transition: all 0.3s ease;
  margin-top: 5px;
  /* width: 100%; */
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.LinksAppearSideNav > a {
  width: 22px;
  background-color: #0A62A3;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 18.5px;
  padding-left: 18.5px;
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.NavHover:hover {
  width: calc(100% - 37px);
  background-color: #5096E9;
  transition: all 0.1s ease;
}

.LinksAppearSideNav > a:nth-child(1){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.1s forwards;
}

.LinksAppearSideNav > a:nth-child(2){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.2s forwards;
}

.LinksAppearSideNav > a:nth-child(3){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.LinksAppearSideNav > a:nth-child(4){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.4s forwards;
}

.LinksAppearSideNav > a:nth-child(5){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.5s forwards;
}

.LinksAppearSideNav > a:nth-child(6){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.6s forwards;
}

.FriendsLinks {
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.7s forwards;
}

/* Sidenav Buttons shrink */
.ButtonAppear {
  display: none;
  flex-direction: column;
/* prevent link from whitespace */
  white-space: nowrap;
  align-items: flex-start;
  justify-content: space-evenly;
  transition: all 0.3s ease;
  margin-top: 5px;
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.HomeButton {
  width: 22px;
}

.ButtonAppear > a {
  width: 22px;
  background-color: #0A62A3;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 18.5px;
  padding-left: 18.5px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  overflow: hidden;
}

.NavHoverShrink:hover {
  width: 183px;
  background-color: #5096E9;
  transition: all 0.1s ease;
}

.ButtonAppear > a:nth-child(1){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.1s forwards;
}

.ButtonAppear > a:nth-child(2){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.2s forwards;
}

.ButtonAppear > a:nth-child(3){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.ButtonAppear > a:nth-child(4){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.4s forwards;
}

.ButtonAppear > a:nth-child(5){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.5s forwards;
}

.ButtonAppear > a:nth-child(6){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.6s forwards;
}

@keyframes flyIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes flyOut {
  to {
    transform: translateY(1000%);
    opacity: 0;
  }
}

/* svg class */
.SvgButtons {
  width: 22px;
  margin-right: 20px;
}

.WrapAllAsideNav {
  width: 100%;
  max-width: calc(79.29% + 177px);
  background-color: #F2F6FF;
  vertical-align: top;
  display: inline-block;
  font-size: 14px;
  transition: all 0.3s ease;
}

.WrapAllAsideNavShrinked {
  width: 100%;
  max-width: 100%;
  background-color: #F2F6FF;
  vertical-align: top;
  display: inline-block;
  flex: 1;
  font-size: 14px;
  transition: all 0.3s ease;
  /* z-index: 1;  */
}

/* flex super hyper giga class */
.FlexNavTopItems  {
  height: 69px;
  width: 100%;
  background-color: #F2F6FF;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
}

button {
  width: 26px;
  border: unset;
  background-color: transparent;
}

[class^='FlexContent'] {
  margin: 5px;
}

/* burgerbutton */
.FlexContent1 {
  order: 6;
  width: 36px;
  align-items: center;
}

.BurgerButton {
  width: 26px;
  transform: rotate(90deg);
  transition: transform 0.5s ease;
}

.rotate {
  transform: rotate(0deg);
}

/* duckduckgo searchbar */
.FlexContent2 {
  order: 2;
  flex: 1 0 auto;
}

.SearchButton {
  width: 26px;
}

/* translate button*/
.FlexContent3 {
  order: 3;
}

/* darkmode togglebutton */
.FlexContent4 {
  order: 4;
}

.Darkmode{
  background-color: black;
}

/* darkmode sidenavleft (terrorselector edit)*/
.Darkmode .SideNavLeft, .Darkmode .SideNavLeftShrinked, .Darkmode .NavHoverShrink, .Darkmode .NavHover, .Darkmode .HomeButton, .Darkmode .LinksAppearSideNav, .Darkmode .ButtonAppear, .Darkmode .HomeBackground{
  background-color: rgb(59, 57, 57);
  color: rgb(221, 221, 221);
}

.Darkmode .NavHoverShrink:hover, .Darkmode .NavHover:hover{
  background-color: rgb(15, 15, 15);
  color: rgb(221, 221, 221);
}

/* darkmode wrapAllAsideSidenav */
.Darkmode nav{
  background-color: rgb(109, 108, 108);
  color: rgb(221, 221, 221);
}

.Darkmode .MainWrapper{
  background-color: black;
}

.Darkmode .MainRight{
  background-color: rgb(114, 114, 114);
  color: rgb(221, 221, 221);
}

.Darkmode .WrapMainContentRight, .Darkmode .WrapAllAsideNav{
  background-color: rgb(119, 119, 119);
  color: rgb(221, 221, 221);
}

.Darkmode [class^='Content']{
  background-color: rgb(124, 124, 124);
  color: rgb(221, 221, 221);
}

.Darkmode [class^='Grid-item']{
  background-color: rgb(134, 134, 134);
  color: rgb(240, 240, 240);
}

/* fullscreen HTML */
.FlexContent5 {
  order: 5;
}

.MainRight {
  background-color: #BED4FE;
  display: inline-block;
}

/* article wrap for margins */
.WrapMainContentRight {
  margin: 20px;
  padding: 20px;
  background-color: #88B5F9;
  display: inline-block;
}


/* select all content containers*/
[class^='Content'] {
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* select all grid-item */
[class^='Grid-item'] {
  margin: 20px ;
  background-color: #1D77CC;
  display: grid;
}

.Content1 {
  background-color: #5096E9;
  display: grid;
  grid-template-areas:
  'header'
  'two'
  'three';
}

.Grid-item1-1 {
  grid-area: header;
}

.Grid-item1-2 {
  grid-area: two;
}

.Grid-item1-3 {
  grid-area: three;
}

.SpiderChart {
  align-self: center;
}

.Content2 {
  background-color: #5096E9;
  display: grid;
  grid-template-areas:
  'header'
  'two'
  'three';
}

.Grid-item2-1 {
  grid-area: header;
}

.Grid-item2-2 {
  grid-area: two;
}

.Grid-item2-3 {
  grid-area: three;
}

.Content3 {
  background-color: #5096E9;
  display: grid;
  align-items: center;
  grid-template-areas:
  'header header'
  'two three'
  'four five'
  'vid vid';
}

.imgGrid {
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
}

.Grid-item3-1 {
  grid-area: header;
}

.Grid-item3-2 {
  grid-area: two;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-3 {
  grid-area: three;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-4 {
  grid-area: four;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-5 {
  grid-area: five;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-6 {
  position: relative;
  grid-area: vid;
  max-width: 352px;
  max-height: 352px;
}

#vidGrid{
  height: 100%;
  width: auto;
}

video {
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* canvas Vidcontrols eventlistener */
#VidControls{
  position: absolute;
  width: 100%;
}

.Content4 {
  background-color: #5096E9;
  display: grid;
  grid-template-areas:
  'header header'
  'two two';
}

.Grid-item4-1{
 grid-area: header;
}

.Grid-item4-2{
  grid-area: two;
  justify-content: center;
  display: grid;
}

.Content5 {
  background-color: #5096E9;
}

.FooterRight {
  height: 69px;
  width: 100%;
  background-color: rgb(223, 250, 250);
  display: inline-block;
}

.FlexNavFooter {
  height: 69px;
  width: 100%;
  background-color: #F2F6FF;
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.FlexContent1Footer {
  text-decoration: none;
}

.Fullscreen {
  display: none;
  top: 0;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.651);
  z-index: 10;
}

.FullscreenVid {
  display: none;
  top: 0;
  left: 0;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.651);
  z-index: 10;
}

.FullscreenAsset {
  max-width: 100%;
  max-height: 100%;
  min-width: 65%;
  min-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
}
}

/* DESKTOP VIEW */
@media screen and (min-width: 768px) {

/* wrapper max width */
.MainWrapper {
  /* max-width: 1440px; */
  background-color: #F2F6FF;
  margin: 0 0;
  font-size: 0;
  display: flex;
}

.SideNavLeft {
  width: 20.7%;
  min-width: 170px;
  background-color: #0A62A3;
  vertical-align: top;
  transition: all 0.3s ease;
  /* setting to full height */
  height: 100vh;
  /* fixed sidenav */
  position: sticky;
  top: 0;
  display: inline-block;
  font-size: 14px;
}

.SideNavLeftShrinked {
  width: 59px;
  background-color: #0A62A3;
  vertical-align: top;
  transition: all 0.3s ease;
  /* setting to full height */
  height: 100vh;
  /* fixed sidenav */
  position: sticky;
  top: 0;
  font-size: 14px;
}

.LinksAppearSideNav {
  display: flex;
  flex-direction: column;
/* prevent link from whitespace */
  white-space: nowrap;
  align-items: flex-start;
  justify-content: space-evenly;
  transition: all 0.3s ease;
  margin-top: 5px;
  /* width: 100%; */
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.LinksAppearSideNav > a {
  width: 22px;
  background-color: #0A62A3;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 18.5px;
  padding-left: 18.5px;
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.NavHover:hover {
  width: calc(100% - 37px);
  background-color: #5096E9;
  transition: all 0.1s ease;
}

.LinksAppearSideNav > a:nth-child(1){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.1s forwards;
}

.LinksAppearSideNav > a:nth-child(2){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.2s forwards;
}

.LinksAppearSideNav > a:nth-child(3){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.LinksAppearSideNav > a:nth-child(4){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.4s forwards;
}

.LinksAppearSideNav > a:nth-child(5){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.5s forwards;
}

.LinksAppearSideNav > a:nth-child(6){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.6s forwards;
}

.FriendsLinks {
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.7s forwards;
}

/* Sidenav Buttons shrink */
.ButtonAppear {
  display: none;
  flex-direction: column;
/* prevent link from whitespace */
  white-space: nowrap;
  align-items: flex-start;
  justify-content: space-evenly;
  transition: all 0.3s ease;
  margin-top: 5px;
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.HomeButton {
  width: 22px;
}

.ButtonAppear > a {
  width: 22px;
  background-color: #0A62A3;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 18.5px;
  padding-left: 18.5px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  overflow: hidden;
}

.NavHoverShrink:hover {
  width: 183px;
  background-color: #5096E9;
  transition: all 0.1s ease;
}

.ButtonAppear > a:nth-child(1){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.1s forwards;
}

.ButtonAppear > a:nth-child(2){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.2s forwards;
}

.ButtonAppear > a:nth-child(3){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.3s forwards;
}

.ButtonAppear > a:nth-child(4){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.4s forwards;
}

.ButtonAppear > a:nth-child(5){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.5s forwards;
}

.ButtonAppear > a:nth-child(6){
  transform: translateY(1000%);
  opacity: 0;
  animation: flyIn 0.6s forwards;
}

@keyframes flyIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes flyOut {
  to {
    transform: translateY(1000%);
    opacity: 0;
  }
}

/* svg class */
.SvgButtons {
  width: 22px;
  margin-right: 20px;
}

.WrapAllAsideNav {
  width: 100%;
  max-width: 100%;
  background-color: #F2F6FF;
  vertical-align: top;
  display: inline-block;
  font-size: 14px;
  transition: all 0.3s ease;
}

.WrapAllAsideNavShrinked {
  width: 100%;
  max-width: 100%;
  background-color: #F2F6FF;
  vertical-align: top;
  display: inline-block;
  flex: 1;
  font-size: 14px;
  transition: all 0.3s ease;
  /* z-index: 1;  */
}

/* flex super hyper giga class */
.FlexNavTopItems  {
  height: 69px;
  width: 100%;
  background-color: #F2F6FF;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
}

button {
  width: 26px;
  border: unset;
  background-color: transparent;
}

[class^='FlexContent'] {
  margin: 5px;
}

/* burgerbutton */
.FlexContent1 {
  order: 1;
  width: 36px;
  align-items: center;
}

.BurgerButton {
  width: 26px;
  transform: rotate(90deg);
  transition: transform 0.5s ease;
}

.rotate {
  transform: rotate(0deg);
}

/* duckduckgo searchbar */
.FlexContent2 {
  order: 2;
  flex: 1 0 auto;
}

.SearchButton {
  width: 26px;
}


.SearchButtonImg {
  height: 14;
}

/* translate button*/
.FlexContent3 {
  order: 3;
}

/* darkmode togglebutton */
.FlexContent4 {
  order: 4;
}

.Darkmode{
  background-color: black;
}

/* darkmode sidenavleft (terrorselector edit)*/
.Darkmode .SideNavLeft, .Darkmode .SideNavLeftShrinked, .Darkmode .NavHoverShrink, .Darkmode .NavHover, .Darkmode .HomeButton, .Darkmode .LinksAppearSideNav, .Darkmode .ButtonAppear, .Darkmode .HomeBackground{
  background-color: rgb(59, 57, 57);
  color: rgb(221, 221, 221);
}

.Darkmode .NavHoverShrink:hover, .Darkmode .NavHover:hover{
  background-color: rgb(15, 15, 15);
  color: rgb(221, 221, 221);
}

/* darkmode wrapAllAsideSidenav */
.Darkmode nav{
  background-color: rgb(109, 108, 108);
  color: rgb(221, 221, 221);
}

.Darkmode .MainWrapper{
  background-color: black;
}

.Darkmode .MainRight{
  background-color: rgb(114, 114, 114);
  color: rgb(221, 221, 221);
}

.Darkmode .WrapMainContentRight, .Darkmode .WrapAllAsideNav{
  background-color: rgb(119, 119, 119);
  color: rgb(221, 221, 221);
}

.Darkmode [class^='Content']{
  background-color: rgb(124, 124, 124);
  color: rgb(221, 221, 221);
}

.Darkmode [class^='Grid-item']{
  background-color: rgb(134, 134, 134);
  color: rgb(240, 240, 240);
}

/* fullscreen HTML */
.FlexContent5 {
  order: 5;
}

.MainRight {
  background-color: #BED4FE;
  display: inline-block;
}

/* article wrap for margins */
.WrapMainContentRight {
  margin: 20px;
  padding: 20px;
  background-color: #88B5F9;
  display: inline-block;
}


/* select all content containers*/
[class^='Content'] {
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* select all grid-item */
[class^='Grid-item'] {
  margin: 20px ;
  background-color: #1D77CC;
  display: grid;
}

.Content1 {
  background-color: #5096E9;
  display: grid;
  grid-template-areas:
  'header'
  'two';
}

.Grid-item1-1 {
  grid-area: header;
}

.Grid-item1-2 {
  grid-area: two;
}

.Grid-item1-3 {
}



.Content2 {
  background-color: #5096E9;
  display: grid;
  grid-template-areas:
  'header'
  'two';
}

.Grid-item2-1 {
  grid-area: header;
}

.Grid-item2-2 {
  grid-area: two;
}

.Grid-item2-3 {
  grid-area: three;
}

.Content3 {
  background-color: #5096E9;
  display: grid;
  align-items: center;
  grid-template-areas:
  'header '
  'two'
  'four';
}

.imgGrid {
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
}

.Grid-item3-1 {
  grid-area: header;
}

.Grid-item3-2 {
  grid-area: two;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-3 {
  grid-area: three;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-4 {
  grid-area: four;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-5 {
  grid-area: five;
  max-width: 156px;
  max-height: 156px;
}

.Grid-item3-6 {
  position: relative;
  grid-area: vid;
  max-width: 352px;
  max-height: 352px;
}

#vidGrid{
  height: 100%;
  width: auto;
}

video {
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* canvas Vidcontrols eventlistener */
#VidControls{
  position: absolute;
  width: 100%;
}

.Content4 {
  background-color: #5096E9;
  display: grid;
  grid-template-areas:
  'header header'
  'two two';
}

.Grid-item4-1{
 grid-area: header;
}

.Grid-item4-2{
  grid-area: two;
  justify-content: center;
  display: grid;
}

.Content5 {
  background-color: #5096E9;
}

.FooterRight {
  height: 69px;
  width: 100%;
  background-color: rgb(223, 250, 250);
  display: inline-block;
}

.FlexNavFooter {
  height: 69px;
  width: 100%;
  background-color: #F2F6FF;
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.FlexContent1Footer {
  text-decoration: none;
}

.Fullscreen {
  display: none;
  top: 0;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.651);
  z-index: 10;
}

.FullscreenVid {
  display: none;
  top: 0;
  left: 0;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.651);
  z-index: 10;
}

.FullscreenAsset {
  max-width: 100%;
  max-height: 100%;
  min-width: 65%;
  min-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
}



}

/* adressbuch specific formating */
.sqlTable th, .sqlTable td, .sqlTable{
  border: 1px solid;
  width: auto;
}

.sqlTable th, .sqlTable td {
  padding-left: 3px;

}

td > input {
  width: 100%;
}

.ActionButtonclass {
  background-color:  #BED4FE;
  border: 1px solid #000000;
  font-weight: bold;
}


/* spamfilter */
.antispam {
  display: none;
}

.FlexContent2 > * {
  margin: 0;
}