.container {
    margin: 0 auto;
    padding: 16px;
    position: absolute;
    top: 16px;
    right: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #2c2c2c;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    transition: all 0.2s ease;
    max-width: 300px;
}

#corner-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    z-index: 999;
    display: flex;
    justify-content: end;
    cursor: context-menu;
}

#corner-area:hover {
    width: 50px;
    height: 50px;
}

#corner-area .container-control {
    width: 20px;
    height: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background-color: #ccc;
    transform: translate(100%, -100%);
    transition: transform 100ms ease-out;
}

#corner-area:hover .container-control {
    transform: translate(0, 0);
}

input, button {
    transition: all 0.3s ease;
}

input:hover, button:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

input {
    border-radius: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    color: #ffffff;
}

#toggleForm {
    font-size: 12px;
    padding: 8px;
}

.window-controls {
    display: flex;
    justify-content: space-between;
}

button {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    color: #ffffff;
}

#configForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

#configForm input {
    flex: 1;
    padding: 8px;
}

.components-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.component-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.component-item svg {
    max-width: 100%;
    height: auto;
}

#status {
    max-width: 160px;
    font-size: 11px;
    margin-bottom: 20px;
    color: #ffffff;
  }

main {
    font-size: 11px;
}

.progress-container {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
}

.progress-bar {
    height: 40px;
    background-color: #4CAF50;
    border-radius: 5px;
    transition: width 0.3s ease;
    position: relative;
    backdrop-filter: blur(12px);
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #ffffff;
    margin: 12px;
    line-height: 20px;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
} 


.rotating {
    margin-top: 24px;
    animation: rotation 1s linear infinite;
    transform-origin: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
  }

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



/**

 ██████  ███████ ███    ██ ███████ ██████   █████  ██      
██       ██      ████   ██ ██      ██   ██ ██   ██ ██      
██   ███ █████   ██ ██  ██ █████   ██████  ███████ ██      
██    ██ ██      ██  ██ ██ ██      ██   ██ ██   ██ ██      
 ██████  ███████ ██   ████ ███████ ██   ██ ██   ██ ███████ 

*/


html, body {
    padding: 0;
    margin: 0;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    font-family: 'SKODA Next UI';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  *:focus {
    outline: none;
  }
  
  :root {
    touch-action: pan-x pan-y;
    height: 100% 
  }
  
  * {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */    
    touch-action: none;
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  *::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  * {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /* transition: all .25s ease-in-out; */
  }
  
  foreignObject, svg {
    overflow: visible;
  }
  
  /* Styl pro kontejner chybové zprávy */
  #error-container {
    font-family: 'Courier New', Courier, monospace;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Průhledný červený pozadí */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #error-message {
    max-width: 75vw;
    color: #ccc;
    font-size: 16px;
    text-align: center;
  }
  
  
  #error-message div {
    font-size: 14px;
    border-bottom: 1px solid #333;
    margin-bottom: 24px;
    padding-bottom: 24px;
    max-width: 50vw;
  }
  
  #error-message div:last-child {
    white-space: pre;
    font-size: 12px;
    color: #aaa;
  }
  

/********************************************/
/**                HELPERS                 **/
/********************************************/

.skux-confirm {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, 0);
  z-index: 999;
  background: #3c3c3c;
  color: #fff;
  padding: 16px 24px;
  margin-bottom: 8px;
  width: 360px;
  max-width: calc(100vw - 64px);
  border-radius: 6px;
  transition: all 250ms ease-out;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.skux-confirm-hidden {
  transform: scale(.9) translate(-50%, 10px);
  pointer-events: none;
  /* transition: all 250ms ease-in; */
  opacity: 0;
}

.skux-confirm-title {
  font-weight: bold;
  font-size: 1.2em;
}

.skux-confirm p {
  line-height: 1.3;
  margin: 8px 0;
}

.skux-confirm-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 16px;
}

.skux-confirm-button {
  margin: 0;
  padding: 12px 24px;
}

.skux-confirm-button + .skux-confirm-button {
  margin-left: 16px;
}

.skux-confirm-button__negative {
  background: #770b0b;
}

.skux-confirm-button__positive {
  background: #0d540d;
}

.skux-confirm-button__cta, .button__primary {
  background: #480d54;
}

.skux-toasts {
  position: absolute;
  bottom: 8px;
  margin: 0 16px;
  transition: all 500ms ease-in;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.skux-toast {
  position: relative;
  background: #3c3c3c;
  color: #fff;
  padding: 16px 24px;
  margin-bottom: 8px;
  width: 320px;
  border-radius: 6px;
  transition: all 150ms ease-out;
  overflow: hidden;
  --loading-progress: 0;
}

.skux-toast-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--loading-progress);
  background-color: rgba(255, 255, 255, 0.1);
}

.skux-toast p {
  margin: 0;
}

.skux-toast p+p {
  margin-top: 8px;
}

.skux-toast-positive {
  background: #0d540d;
  border-color: rgba(255, 255, 255, 0.1);
}

.skux-toast-negative {
  background: #770b0b;
  border-color: rgba(255, 255, 255, 0.1);
}

.skux-toast-hidden {
  perspective: 20px;
  transform: scale(0.9) translate3d(0, 30px, 40px) rotate3d(1, 0, 0, 45deg);
  opacity: 0;
  z-index: 0;
  transition: all 300ms ease-in;
}

  
  /**
  
    ███████  ██████  ███    ██ ████████ ███████ 
    ██      ██    ██ ████   ██    ██    ██      
    ████   ██    ██ ██ ██  ██    ██    ███████ 
    ██      ██    ██ ██  ██ ██    ██         ██ 
    ██       ██████  ██   ████    ██    ███████ 
  
  */
  
  @font-face {
    font-family: 'SKODA Next UI';
    src: local('SKODA Next UI'), url(./fonts/Skoda/SKODANextUI-Regular.ttf) format('truetype');
  }
  
  @font-face {
    font-family: 'SKODA Next UI Bold';
    src: local('SKODA Next UI Bold'), url(./fonts/Skoda/SKODANextUI-Bold.ttf) format('truetype');
  }
  
  @font-face {
    font-family: 'SKODA Next Bold';
    src: local('SKODA Next Bold'), url(./fonts/Skoda/SKODANextUI-Bold.ttf) format('truetype');
  }
  
  
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Bold Italic'), url('./fonts/Skoda/SKODANext-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Light Italic'), url('./fonts/Skoda/SKODANext-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Black'), local('SKODANext-Black'), url('./fonts/Skoda/SKODANext-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Black Italic'), local('SKODANext-BlackItalic'), url('./fonts/Skoda/SKODANext-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Bold'), local('SKODANext-Bold'), url('./fonts/Skoda/SKODANext-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODA Next Black Expanded';
    src: local('SKODA Next Black Expanded'), local('SKODANext-BlackExpanded'), url('./fonts/Skoda/SKODANext-BlackExpanded.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next'), local('SKODANext-Regular'), url('./fonts/Skoda/SKODANext-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Italic'), local('SKODANext-Italic'), url('./fonts/Skoda/SKODANext-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SKODA Next';
    src: local('SKODA Next Light'), local('SKODANext-Light'), url('./fonts/Skoda/SKODANext-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
  
  
  
  
  /**
  SK NEXT FLOW
  */
  
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow Black'), local('SKODANextFlow-Black'), url('./fonts/Skoda/SKODANextFlow-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow Bold'), local('SKODANextFlow-Bold'), url('./fonts/Skoda/SKODANextFlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow ExtraBold'), local('SKODANextFlow-ExtraBold'), url('./fonts/Skoda/SKODANextFlow-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow Light'), local('SKODANextFlow-Light'), url('./fonts/Skoda/SKODANextFlow-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow Medium'), local('SKODANextFlow-Medium'), url('./fonts/Skoda/SKODANextFlow-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow Thin'), local('SKODANextFlow-Thin'), url('./fonts/Skoda/SKODANextFlow-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SKODANextFlow';
    src: local('SKODA Next Flow'), local('SKODANextFlow-Regular'), url('./fonts/Skoda/SKODANextFlow.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

  
  /**
  *  montserrat alternates
  **/

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Regular'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Bold'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Light'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Medium'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates SemiBold'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates ExtraBold'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Black'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Thin'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }

  /* Italic variants */
  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Italic'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Bold Italic'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }

  @font-face {
    font-family: 'Montserrat Alternates';
    src: local('Montserrat Alternates Light Italic'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Regular'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Bold'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Light'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Medium'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates SemiBold'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates ExtraBold'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Black'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Thin'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }

  /* Italic variants */
  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Italic'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Bold Italic'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }

  @font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Alternates Light Italic'), 
         url('./fonts/Montserrat_Alternates/MontserratAlternates-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }
  
  /*
  
   ██████ ██    ██ ███████ ████████  ██████  ███    ███ 
  ██      ██    ██ ██         ██    ██    ██ ████  ████ 
  ██      ██    ██ ███████    ██    ██    ██ ██ ████ ██ 
  ██      ██    ██      ██    ██    ██    ██ ██  ██  ██ 
   ██████  ██████  ███████    ██     ██████  ██      ██ 
                                                                                                          
  */
  
  .background-blur > foreignObject > svg:first-child,
  .background-blur > svg:first-child {
    backdrop-filter: blur(175px);
  }
  
  .autoAnim * {
    transition: all .3s ease-in-out;
  }
  
  #root {
    width: 100vw;
    height: 100vh;
    /* margin-top: 142px; */
  }
  
  /* Mapbox */
  #navigation-arrow {
    width: 188px;
    height: 168px;
    background-image: url('./images/navigation-arrow.png');
    background-repeat: no-repeat;
  }