:root {
  --app-width: 600px;
  --header-height: 250px;

  /* instagram schema --header-background: linear-gradient(90deg, rgba(105,0,140,1) 10%, rgb(255, 196, 0) 100%);*/
  --header-background: linear-gradient(90deg, rgba(173,40,033,1) 0%, rgb(62,95,138,1) 100%);
  /* instagram schema --button-background: linear-gradient(90deg, rgba(105,0,140,0.4) 0%, rgba(255,222,0,0.2) 100%);*/
  --button-background: linear-gradient(90deg, rgba(173,40,033,0.4) 0%, rgb(62,95,138,0.4) 100%);
  --inverted-corners-size: 50px;

  --color-emblem-blue-hex: #3E5F8A;
  --color-emblem-red-hex: #B32821;
  --color-emblem-blue-rgb: rgba(62,95,138,1);
  --color-emblem-red-rgb: rgba(173,40,033,1);

  --color-scheme-background-1: #da394d;
  --color-scheme-background-2: #ec6838;
  --color-scheme-background-3: #60a25b;
  --color-scheme-background-4: #01a1b1;
  --color-scheme-background-5: #efca45;

  --color-scheme-splash-background: #3e3e45;
  
  --color-scheme-font-dark: #646464;
  --color-scheme-font-light: #e5e5e5;
  --color-scheme-font-light_disabled: #e5e5e599;

  --color-scheme-logo-dark: "la_logo.png";
  --color-scheme-logo-light: "la_logo_white.png"; 

}

@viewport {
  orientation: portrait;
}

@font-face {
  font-family: "Cresta-Bold";
  src: url('./fonts/cresta/bold/cresta.woff2') format('woff2'), url('./fonts/cresta/bold/cresta.woff') format('woff');
}
@font-face {
  font-family: "Cresta-Regular";
  src: url('./fonts/cresta/regular/cresta.woff2') format('woff2'), url('./fonts/cresta/regular/cresta.woff') format('woff');
}

html {
  height: 100%;
}

body {
  font-family: 'Cresta-Regular', sans-serif;
  background-color: var(--color-scheme-splash-background);
}

body, .main {
  height: 100%;
  overflow: hidden;
  margin: 0; 
}

.main {
  background-image: -webkit-image-set(
    url("./images/back_in_blue.avif") 1x,
    url("./images/back_in_blue.png") 1x);
  background-image: image-set(
    url("./images/back_in_blue.avif") 1x,
    url("./images/back_in_blue.png") 1x);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  min-height: 100%;
  height: 100%;
  max-width: var(--app-width);
  position: relative;
  margin: 0 auto;
}

.header {
  z-index: 10;
  height: var(--header-height);
  width: 100%;
  position: relative;
  background: var(--header-background);

  /* Used to position the corner */
  border-radius: 0 0 0 var(--inverted-corners-size);
  position: relative;
}
.headerUNUSED::before {
  content: '';

  /* Absolute position */
  bottom: calc(-2 * var(--inverted-corners-size));
  right: 0;
  position: absolute;

  /* Size */
  height: calc(2 * var(--inverted-corners-size));
  width: var(--inverted-corners-size);

  /* Border */
  background-color: transparent;
  border-top-right-radius: var(--inverted-corners-size);
  box-shadow: var(--color-scheme-background-2) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
}

.headerblock {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 30px;
  left: 25px;
}

.apptitleblock {
  display: flex;
  flex-direction: column;
}

.apptitle {
  margin-top: 10px;
  font-size: 34px;
  line-height: 34px;
  height: 34px;
  font-weight: 700;
  color: #ffffff;
}
.appsubtitle {
  margin-top: 5px;
  color: var(--color-scheme-font-light);
  font-size: 28px;
  line-height: 28px;
  height: 28px;
}
.logo {
  margin-right: 5px;
  height: 90px;
  width: auto;
}

.pagesubtitle {
  color: var(--color-scheme-font-light);
  font-size: 28px;
}

.categories {
  width: 100%;
  overflow-x: scroll;
  margin-top: 145px;
  position: absolute;
  white-space: nowrap;

  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.categories::-webkit-scrollbar {
  display: none;
}
.categories > div {
  padding-left: 25px;
  padding-right: 25px;
}
.categoryBtn {
  border: 3px solid white;
  border-radius: 5px;
  height: 40px;
  min-width: 120px;
  margin-right: 15px;
  background: rgba(0, 0, 0, 0);
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  overflow-x: auto;
}
.categoryBtn:enabled:active {
  background-color: #00004040;
}
.categoryBtn:disabled {
  border: 3px solid var(--color-scheme-font-light_disabled);
  color: var(--color-scheme-font-light_disabled);

}
.categoryanimation {
  animation: cat-pull 2s normal;
}
@keyframes cat-pull {
  from {width: 500%; margin-left: -200px;}
  to {width: 100%; margin-left: 0px;}
}

.categoryname {
  position: absolute;
  right: 20px;
  top: calc(var(--header-height) - 45px);
}
.categoryname > span {
  font-size: 18px;
  font-weight:400;
  color: white;
}

.content {
  z-index: 0;
  position: absolute;
  top: calc(var(--header-height) - var(--inverted-corners-size));
  bottom: 0;
  width: 100%;
  padding-top: calc(var(--inverted-corners-size) + 25px);
  overflow: auto;
  
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.content::-webkit-scrollbar {
  display: none;
}

.freeparkinglots_table {
  margin-left: 20px;
  margin-right: 20px;
}

.sw_version {
  position: absolute;
  min-height: 25px;    
  left: -10px;
  bottom: 25px;
  transform: rotate(270deg);
}
.sw_version > span {
  font-size: 12px;
  color: #a3a3a38c;
  display: block;
  margin-right: 15px;
  text-align: right;
}

.btncontainer,
.btncontainer > div {
  display: flex;
  flex-direction: column;
}

.btncontainer p, 
.btncontainer a:not(.sourcelink), 
.btncontainer > span {
  padding-left: 10%;
  padding-right: 10%;
}

#parkingiframe {   
    border: none; 
    min-height: 200px;
    width: 375px;
    margin: 0 auto;
  }

.btn-style {
  display: flex;
  flex-direction: row;
  border: 3px solid var(--color-scheme-font-light);
  border-right: none;
  border-radius: 38px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  height: 68px;
  margin-bottom: 15px;
  margin-left: 10%;
  margin-right: 0px;
  background: var(--button-background);
  color: var(--color-scheme-font-light);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

.btn-style > .iconcontainer {
  display: flex;
  min-width: 30%;
  min-height: 62px;

}
.btn-style > .iconcontainer > i,img {
  display: flex;
  margin: auto;
  width: auto; 
  height: 40px; 
}
.btn-style > span {
  margin: auto 0;
  margin-left: 10%;
  text-align: left;
}

.searchinput {
    display: flex;
    flex-direction: row;
    border: 3px solid var(--color-scheme-font-light);
    border-right: none;
    border-radius: 34px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 12px 16px;
    margin-bottom: 15px;
    margin-left: 10%;
    margin-right: 0px;
    background: var(--button-background);
    color: var(--color-scheme-font-light);
    font-family: inherit;
    font-size: 18px;
    text-align: left;
    resize: none; /* optional: verhindert, dass der User die Größe ändert */
    overflow-y: auto; /* zeigt Scrollbar, falls nötig */
}

.btn-style-smol {
  height: 60px !important;
}
.btn-style-smol > span {
  margin: auto;
}

.btn-style:active {
  background-color: #D41A31;
}

.noti-btn-style {
    height: 50px;
    min-width: 50px;
    border-radius: 25px;
    border: 2px solid white;
}
.noti-btn-style img {
    height: 25px; 
}

.noti-btn-style-round {
    height: 60px;
    min-width: 60px;
    border-radius: 30px;
    border: 2px solid white;
}
.noticenter-btn-style {
    z-index: 1000; 
    position: absolute; 
    bottom: 10px; 
    right: 0;
    background: rgba(173,40,033,0.8);
}
.noti-remove-btn-style {
    background: rgba(173,40,033,0.4);
}

i::before {
  width: 100%;
  font-size: 40px;
}

.app-button {
  font-weight: 700;
}

.install-button {
  height: 150px;
  font-weight: 700;
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.verlinkung {
  position: absolute;
  width: 100%;
  height: 100%;
}

p, a {
  color: var(--color-scheme-font-light);
}

p > .fett, a > .fett {
  font-weight: 700;
}

.spacer {
  width: 100%;
  min-height: 25px;
}

.customalert {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 12px;
  width: 80%;
  max-width: calc(0.8* var(--app-width));
  background-color: var(--color-scheme-font-light);
  border-radius: 8px;
  position: relative;
  bottom: 140px;
  margin: 0 auto;
  z-index: 100;
}
.customalert > span {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-scheme-font-dark);
  position: relative;
  margin: 0 auto;
  top: 4px;
  text-align: center;
  display: block;
}
.alerttext > a {
    color: var(--color-scheme-font-dark);
}

#resulttext * {
    padding: 0;
}

.dev {
  display: flex;
  margin: 0 auto;
  width: auto;
  height: 50%;
  margin-bottom: 25px;
}
.miscbtn {
  position: absolute;
  top: 30px;
  left: 25px;
  height: 90px;
  width: 90px;
  border: none;
  background-color: #00ff0000;
  z-index: 101;
}

.devinfo {
  color: var(--color-scheme-font-light);
  text-align: center;
}

.accordion {
    padding: 12px; 
    padding-left: 10%; 
    padding-right: 10%;

    --bs-accordion-bg: rgba(0, 0, 0, 0) !important;
    --bs-accordion-active-bg: rgba(0, 0, 0, 0) !important;
    --bs-accordion-body-padding-y: 0.1rem !important;
    --bs-accordion-color: white !important;
    --bs-accordion-active-color: white !important;
    --bs-accordion-btn-color: white !important;
    --bs-accordion-btn-focus-box-shadow: 0 !important;
}
.accordion-button {
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16"><path d="M3.204 5h9.592L8 10.481zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659"/></svg>);
} 
.accordion-button::after {
    filter: invert(100%) sepia(6%) saturate(23%) hue-rotate(181deg) brightness(122%) contrast(100%);
}
.accordion-collapse {
    padding-bottom: 6px;
}

span.VR20S_highlight {
    background-color: #bbbbbb;
    color: black
}

.vrweb_player_main > #vrweb_hover_player_0 {
    position: static !important;
    padding-left: 10px !important;
}
.vrweb_player_main #VR20S_player_1_player_container {
    float: right !important;
}
.vrweb_player_main div.VR20S_h_player_container {
    width: 30px !important;
    height: 30px !important;
    background-image: none !important;
    background: rgba(173, 40, 033, 0.8);
    border: 2px solid var(--color-scheme-font-light);
}
.vrweb_player_main button.VR20S_h_player_button {
    margin-top: 2px !important;
    margin-left: 1px !important;
    background-size: cover !important;    
    width: 20px !important;
    height: 20px !important;
}
.vrweb_player_main button.VR20S_h_player_button:hover {
    border: none !important;
}
.vrweb_player_main button.VR20S_h_button_play {
    background-image: url(/icons/btn/play_white.png);
}


#loadinggif {
  bottom: 20px;
  left: 20px;
  position: absolute;
  z-index: 1000;
  width: 10%;
  height: auto;
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% { 
      -webkit-transform: rotate(360deg); 
      transform:rotate(360deg); 
  } 
}