html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Zapobiega poziomemu paskowi przewijania */
}

#renderCanvas {
    width: 100vw; /* 100% szerokości viewportu */
    height: 800px; /* Stała wysokość */
    outline: none;
}


/* TŁO ŁADOWANIA */
#graphicElement_loadingpage {
    width: 100vw;  /* 100% szerokości widoku */
    height: 80vh;  /* 100% wysokości widoku */
    background-color: #101010;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
}

#txt_loadingpage {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a4a4a4;
    position: absolute; /* Zmiana z absolute na fixed, aby element był względem viewportu */
    top: 50%; /* Ustawienie na środku w pionie */
    left: 50%; /* Ustawienie na środku w poziomie */
    transform: translate(-50%, -50%); /* Przesunięcie elementu o połowę jego wysokości i szerokości w lewo i w górę */
    z-index: 20;
}

#graphicElement_progressbar {
    width: 5px;
    height: 2px;
    background-color: #ff3d00;
    position: absolute; /* Zmiana z absolute na fixed, aby element był względem viewportu */
    top: 45%; /* Ustawienie na środku w pionie */
    left: 50%; /* Ustawienie na środku w poziomie */
    transform: translate(-50%, -45%); /* Przesunięcie elementu o połowę jego wysokości i szerokości w lewo i w górę */
    z-index: 20;
}



/* MENU */

/* AIR PURIFIER */
#txt_AirPurifier {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a4a4a4;
    position: absolute;
    left: 50px;
    top: 318px;
}


/* OPEN */
#menuOpenButton {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    color: #a4a4a4; /* Kolor tekstu */
    position: absolute;
    left: 50px;
    top: 353px;
    background-color: #000000; /* Czarne tło */
    width: 55px; /* Szerokość przycisku */
    height: 25px; /* Wysokość przycisku */
    cursor: pointer;
    border: 1px solid #303030; /* Obramówka przycisku */
    display: flex;
    justify-content: center; /* Wyśrodkowanie tekstu w poziomie */
    align-items: center; /* Wyśrodkowanie tekstu w pionie */
}

#menuOpenButton:hover {
    color: #ffffff; /* Biały kolor tekstu po najechaniu */
}

#menuOpenButton:active {
    color: #ff3d00; /* Pomarańczowy kolor tekstu po naciśnięciu */
}

#menuOpenButton::before {
    content: '';
    background-color: #a4a4a4; /* Kolor elementu graficznego */
    width: 5px; /* Szerokość elementu graficznego */
    height: 100%; /* Wysokość równa wysokości przycisku */
    position: absolute;
    left: 0; /* Umieszczenie elementu na lewej stronie przycisku */
}


/* CLOSE */
#menuCloseButton {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    color: #a4a4a4; /* Kolor tekstu */
    position: absolute;
    left: 115px;
    top: 353px;
    background-color: #000000; /* Czarne tło */
    width: 55px; /* Szerokość przycisku */
    height: 25px; /* Wysokość przycisku */
    cursor: pointer;
    border: 1px solid #303030; /* Obramówka przycisku */
    display: flex;
    justify-content: center; /* Wyśrodkowanie tekstu w poziomie */
    align-items: center; /* Wyśrodkowanie tekstu w pionie */
}

#menuCloseButton:hover {
    color: #ffffff; /* Biały kolor tekstu po najechaniu */
}

#menuCloseButton:active {
    color: #ff3d00; /* Pomarańczowy kolor tekstu po naciśnięciu */
}

#menuCloseButton::before {
    content: '';
    background-color: #a4a4a4; /* Kolor elementu graficznego */
    width: 5px; /* Szerokość elementu graficznego */
    height: 100%; /* Wysokość równa wysokości przycisku */
    position: absolute;
    left: 0; /* Umieszczenie elementu na lewej stronie przycisku */
}



#txt_Holders {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a4a4a4;
    position: absolute;
    left: 50px;
    top: 423px;
}



/* SX200 Holder*/
#menuShowHolderButton {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    color: #a4a4a4; /* Kolor tekstu */
    position: absolute;
    left: 50px;
    top: 458px;
    background-color: #000000; /* Czarne tło */
    width: 55px; /* Szerokość przycisku */
    height: 25px; /* Wysokość przycisku */
    cursor: pointer;
    border: 1px solid #303030; /* Obramówka przycisku */
    display: flex;
    justify-content: center; /* Wyśrodkowanie tekstu w poziomie */
    align-items: center; /* Wyśrodkowanie tekstu w pionie */
}

#menuShowHolderButton:hover {
    color: #ffffff; /* Biały kolor tekstu po najechaniu */
}

#menuShowHolderButton:active {
    color: #ff3d00; /* Pomarańczowy kolor tekstu po naciśnięciu */
}

#menuShowHolderButton::before {
    content: '';
    background-color: #a4a4a4; /* Kolor elementu graficznego */
    width: 5px; /* Szerokość elementu graficznego */
    height: 100%; /* Wysokość równa wysokości przycisku */
    position: absolute;
    left: 0;
}

/* SX300 Holder*/
#menuHideHolderButton {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    color: #a4a4a4; /* Kolor tekstu */
    position: absolute;
    left: 115px;
    top: 458px;
    background-color: #000000; /* Czarne tło */
    width: 55px; /* Szerokość przycisku */
    height: 25px; /* Wysokość przycisku */
    cursor: pointer;
    border: 1px solid #303030; /* Obramówka przycisku */
    display: flex;
    justify-content: center; /* Wyśrodkowanie tekstu w poziomie */
    align-items: center; /* Wyśrodkowanie tekstu w pionie */
}

#menuHideHolderButton:hover {
    color: #ffffff; /* Biały kolor tekstu po najechaniu */
}

#menuHideHolderButton:active {
    color: #ff3d00; /* Pomarańczowy kolor tekstu po naciśnięciu */
}

#menuHideHolderButton::before {
    content: '';
    background-color: #a4a4a4; /* Kolor elementu graficznego */
    width: 5px; /* Szerokość elementu graficznego */
    height: 100%; /* Wysokość równa wysokości przycisku */
    position: absolute;
    left: 0; /* Umieszczenie elementu na lewej stronie przycisku */
}

/* AIR PURIFIER */
#txt_opis_elementow {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a4a4a4;
    position: absolute;
    left: 50px;
    top: 200px;
}