/* @media only screen and (max-width: 1000px) {
    .layers-panel-right, #help-panel-right {
        transform: translateX(0px) !important;
    }

    .layers-panel-right.active, #help-panel-right.active {
        transform: translateX(400px) !important;
    }
}
 */



:root {
    --white: #E1E1E1;
    --background: #535353;
    --background2n: #5a5a5a;
    --dark-detail: #353535;
    --checked: rgb(59 59 59);
    --border: 0.1px solid #424242;
    --blue: #1567ff;
    --btn-color: #fffafa;
}


html {
    color-scheme: dark !important;
}

html input {
    accent-color: #2690ff;
}

html,
body {
    margin: 0;
    overflow: hidden;
}

* {
    font-family: "Poppins", sans-serif;
}

.svg-eye svg,
.svg-lock svg {
    width: 16px;
    fill: var(--white);
    height: 16px;
}

#angles .child:nth-child(2n+1),
#holes .child:nth-child(2n+1),
#lengths .child:nth-child(2n+1) {
    background-color: var(--background);
}

.btn:not(:disabled) {
    cursor: pointer;
    border-radius: 9999px;
    background-color: rgb(107, 107, 107);
    color: var(--btn-color);
    font-size: 17px;
    opacity: 1;
    transition: .2s ease-in;
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
}

.btn:hover:not(:disabled) {
    background-color: rgb(90, 90, 90);
}

.btn.btn-primary:not(:disabled) {
    background-color: var(--blue);
}

.btn.btn-primary:hover:not(:disabled) {
    background-color: var(--blue);
    opacity: .8;
}

#angles .child:nth-child(2n),
#holes .child:nth-child(2n),
#lengths .child:nth-child(2n),
.settings-hover div:nth-child(2n) {
    background-color: var(--background2n);
}

.svg-eye-button:hover svg,
.svg-lock-length-button:hover svg,
.svg-lock-angle-button:hover svg,
.svg-additional-grind-button:hover svg,
.svg-update-angle-button:hover svg,
.svg-update-hole-button:hover svg,
.svg-lock-group-button:hover svg,
.svg-delete-group-button:hover svg,
.svg-delete-button:hover svg {
    fill: white;

}

.svg-update-length-button {
    background: none;
}

.svg-eye-button:hover,
.svg-lock-length-button:hover,
.svg-lock-angle-button:hover,
.svg-additional-grind-button:hover,
.svg-update-angle-button:hover,
.svg-update-hole-button:hover,
.svg-lock-group-button:hover,
.svg-delete-group-button:hover,
.svg-rotate-button:hover,
.svg-delete-button:hover,
.svg-update-length-button:hover
{
    background-color: var(--dark-detail);
}

.svg-eye-button svg,
.svg-lock-length-button svg,
.svg-lock-angle-button svg,
.svg-additional-grind-button svg,
.svg-update-angle-button svg,
.svg-update-hole-button svg,
.svg-lock-group-button svg,
.svg-delete-group-button svg,
.svg-delete-button svg {
    fill: var(--white);
    width: 16px;
    height: 16px;
}

.list-hover button {
    /* border-bottom: var(--border) !important;
    border-left: none !important;
    border-right: none !important; */
    font-size: small !important;
    height: 38px !important;
    width: 260px;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
}

.list-hover {
    display: inline-flex;
    flex-direction: column;
    background: var(--background);
    position: fixed;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    max-height: 37px;
    margin-top: 42px;
}

iframe.active {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#length-modal-parent:not(.checked) {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;

}

#length-modal-parent.checked,
#angles-modal-parent,
#hole-modal-parent {
    position: absolute;
    display: none;
    /* Początkowo ukryty */
    pointer-events: none;
    /* Zapobiega interakcji z kontenerem */
    z-index: 1000;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    border: var(--border);
    max-width: 120px;
    color: black;
}

#anglesDisplay {
    -moz-appearance: textfield;
    outline: none !important;
}

#length-modal-parent:not(.checked) #lengthDisplay {
    -moz-appearance: textfield;
    text-align: center;
    border: var(--border);
    width: 55px;
    color: white;
    padding: 0;
    outline: none;
    background-color: var(--background);

}

#length-modal-parent:not(.checked) #lengthDisplay::-webkit-inner-spin-button,
#anglesDisplay::-webkit-inner-spin-button,
#anglesDisplay::-webkit-outer-spin-button #length-modal-parent:not(.checked) #lengthDisplay::-webkit-outer-spin-button {
    -webkit-appearance: none;

}

#length-modal-parent.checked #lengthDisplay,
/* #angles-modal-parent.checked  */
#anglesDisplay,
#holeDisplay {
    border-radius: 10px 0 0 10px;
    border: none;
    background: var(--background2n);
    padding: 5px;
    width: 65%;
}

.prefferences-tab,
.startscreen-tab,
.glasschoosescreen-tab,
.glasschooseforlayers-tab,
.import-dxf-screen-tab,
.loadingscreen-tab,
.glasschooseshape-tab {
    z-index: -432;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px) brightness(0.8);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.prefferences-tab.active,
.import-dxf-screen-tab.active,
.startscreen-tab.active,
.glasschoosescreen-tab.active,
.glasschooseforlayers-tab.active,
.loadingscreen-tab.active,
.glasschooseshape-tab.active {
    display: inline-flex !important;
    z-index: 99999999;
}

.glasschooseshape-tab.active {
    z-index: 999;
}
/* .glasschoosescreen-container {
    left: 20px;
    top: 20px;
} */
.prefferences.prefferences-tab.active .max-width,
.startscreen-tab.active .max-width,
.glasschoosescreen-tab.active .max-width,
.glasschooseshape-tab.active .max-width,
.glasschooseforlayers-tab.active .max-width,
.import-dxf-screen-tab.active .max-width,
.loadingscreen-tab.active .max-width {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    height: 100%;
    max-width: calc(100% - 450px);
}

.prefferences.prefferences-tab.active .row .item,
.startscreen-tab.active .row .item,
.glasschoosescreen-tab.active .row .item,
.glasschooseshape-tab.active .row .item,
.glasschooseforlayers-tab.active .row .item,
.import-dxf-screen-tab.active .row .item,
.loadingscreen-tab.active .row .item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prefferences.prefferences-tab.active .row,
.startscreen-tab.active .row,
.glasschoosescreen-tab.active .row,
.glasschooseshape-tab.active .row,
.glasschooseforlayers-tab.active .row,
.import-dxf-screen-tab.active .row,
.loadingscreen-tab.active .row {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    max-width: 75%;
    width: 100%;
}

.close-prefferences-tab,
.close-import-dxf-tab,
.close-startscreen-tab,
.close-glasschooseforlayers-tab,
.close-glasschoosescreen-tab,
.modal .modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    padding: 10px;
}

.closeSvgIconButton {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

#close-startscreen-tab,
#close-glasschooseforlayers-tab,
#close-glasschoosescreen-tab,
.modal .modal-close .closeSvgIconButton {
    pointer-events: inherit !important;
    cursor: pointer !important;
}

.import-dxf-screen .main-content {
    overflow-y: auto !important;
}

#response {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

div#response p {
    display: none;
}

div#response div {
    width: 32%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #222222;
    border-radius: 10px;
    contain-intrinsic-block-size: auto 100px;
}

#response svg {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-width: 128px;
    max-height: 128px;
    stroke: white;
}

svg line {
    color: white;
    stroke: white;
    stroke-width: 10px;
}

.container.import-dxf-container.uploading div {
    pointer-events: none;
    filter: blur(10px);
}

.container.import-dxf-container.uploading::after {
    content: url('https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg');
    position: absolute;
    z-index: 432;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.sidebar {
    flex: 1;
    background: #222;
    padding: 20px;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

.suggestions * {
    margin: 0;
}

.menu-item {
    padding: 10px;
    cursor: pointer;
}

.menu-item.active {
    color: #4CAF50;
}

.nonecursor {
    cursor: default !important;
}


.close-startscreen-tab,
.close-glasschooseforlayers-tab,
.close-glasschoosescreen-tab,
.modal .modal-close {
    background: #282828 !important;
    width: 100% !important;
    top: 0px !important;
    right: 0 !important;
    z-index: 432;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 10px !important;
}

input#lengthDisplay:active,
input#lengthDisplay:focus {
    border: 1px solid white !important;
}

.prefferences.prefferences-tab.active .row {
    flex-direction: column;
    gap: 10px;
}

/* .list-hover:hover {
    box-shadow: -3px 3px 20px 10px #00000017 !important;
} */

/* .list-hover {
    box-shadow: -3px 3px 20px 10px #00000017 !important;
} */

.main-content {
    flex: 4;
    padding: 20px 45px 50px;
    overflow-y: scroll;
    display: inline-flex;
    flex-direction: column;
    margin-top: 32px;
}

.container.startscreen-container .sidebar,
.container.glasschooseforlayers-container .sidebar,
.container.glasschoosescreen-container .sidebar,
.modal .modal-container .sidebar {
    margin-top: 32px;
}

.container.startscreen-container .header,
.container.glasschooseforlayers-container .header,
.container.glasschoosescreen-container .header,
.modal .modal-container .header {
    min-height: 200px;
}

#checkbox-redirect-starting-screen * {
    pointer-events: none;
    touch-action: none;
}

.container.prefferencess-container .item:hover label
.modal .modal-container .item:hover label {
    background: #2b2b2b !important;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-file-btn,
.start-drawing-btn {
    background: var(--blue);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 1.25rem;
}

.suggestions h1 {
    font-size: 20px;
}

.suggestions p {
    font-size: 16px;
}

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

.double-glazing-label-start {
    margin-top: 0;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.modal-title {
    margin-bottom: 0;
    text-align: center;
}

.radio-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

#glass .radio-container,
#glass .select-container {
    margin-bottom: 0;
}

#glass .double-glazing-label {
    display: inline-block;
    margin: 10px 0;
}

.radio-container.one-col {
    grid-template-columns: 1fr;
}

.radio-container.two-col {
    grid-template-columns: 1fr 1fr;
}

.radio-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--background2n);
    box-shadow: 1px 1px 10px 0px #0000005e;
    cursor: pointer;
}

.radio-button svg {
    cursor: pointer;
}

.radio-button label {
    cursor: inherit;
}

.radio-button:has(input:checked) {
    box-shadow: inset 1px 1px 10px 0px #0000005e;
    cursor: default;
    background-color: #00000021;
}

.select-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.label-select {
    flex: 0;
    min-width: max-content;
}

.custom-select {
    padding: 7px 14px;
    font-size: 16px;
    flex: 1;
    cursor: pointer;
}

#glassDescription,
#glassDescription-start {
    padding: 10px 16px;
    border-radius: 10px;
    background-color: var(--background2n);
    box-shadow: inset 1px 1px 10px 0px #0000005e;
}

#glassDescription-start {
    margin-bottom: 15px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #555;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#glass .custom-table {
    margin: 0;
}

.custom-table thead {
    background-color: #282828;
}

.custom-table th {
    padding: 15px 20px;
    text-align: left;
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #555;
    border-right: 1px solid #555;
}

.custom-table th:last-child {
    border-right: none;
}

.custom-table tbody tr {
    background-color: #333;
}

.custom-table td {
    padding: 12px 20px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}

#glass .custom-table td {
    padding: 0;
}

.custom-table td:last-child {
    border-right: none;
}

.custom-table tbody tr:last-child td {
    border-bottom: none;
}

.custom-table input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    background-color: #444;
    border: 1px solid #666;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.custom-table input[type="number"]:focus {
    border-color: #888;
    background-color: #555;
    box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.2);
}

.custom-table input[type="number"]::placeholder {
    color: #aaa;
    font-style: italic;
}

.custom-table input[type="number"]:read-only {
    background-color: #3a3a3a;
    cursor: default;
    opacity: 0.8;
}

/* Ukrycie strzałek w input number dla Webkit */
.custom-table input[type="number"]::-webkit-outer-spin-button,
.custom-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ukrycie strzałek w input number dla Firefox */
.custom-table input[type="number"] {
    -moz-appearance: textfield;
}

#popups {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.file-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.file.loading,
.file-container {
    max-width: 32%;
    height: fit-content;
    aspect-ratio: 1 / 1;
}

.file {
    background: #444;
    width: 100%;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}


.file img {
    width: 100%;
    height: 100%;
    max-width: 75%;
    max-height: 75%;
}

/* .startscreen-tab,
.loadingscreen-tab {
    background-color: var(--dark-detail) !important;
} */

/* .loading */
.load {
    animation: loading 2.5s infinite;
    /* animacja trwa 1 sekundę, powtarza się 5 razy */
    /* opóźnienie rozpoczęcia animacji o 1 sekundę */
}

.container.prefferencess-container .row .item {
    position: relative !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    height: unset !important;
    font-size: inherit !important;
    text-align: center !important;
    display: inline-flex !important;
    height: 100% !important;
    padding: 0px !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.container.prefferencess-container .item input {
    opacity: 1;
    height: unset !important;
    position: absolute !important;
    right: 20px;
    padding: 20px !important;
}

.container.prefferencess-container .item label {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #222;
    border-radius: 10px;
    justify-content: space-between !important;
    position: relative;
}

@keyframes highlit {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #62626269;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes loading {
    0% {
        background-color: #444;
    }

    50% {
        background-color: #555;
    }

    100% {
        background-color: #444;
    }
}

.file-container h2 {
    font-size: small;
    color: rgb(233, 233, 233);
}

.file-container h3 {
    font-size: smaller;
    color: rgb(175, 175, 175);
}

.startscreen-tab.active .max-width,
.glasschoosescreen-tab.active .max-width,
.glasschooseshape-tab.active.max-width,
.glasschooseforlayers-tab.active .max-width,
.import-dxf-screen-tab.active .max-width,
.loadingscreen-tab.active .max-width {
    max-width: 35% !important;
}

.prefferences.prefferences-tab.active .container,
.startscreen-tab.active .container,
.glasschoosescreen-tab.active .container,
.glasschooseshape-tab.active .container,
.glasschooseforlayers-tab.active .container,
.import-dxf-screen-tab.active .container,
.loadingscreen-tab.active .container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    background: var(--background);
    overflow: hidden;
    max-height: calc(100% - 88px);
    min-height: 500px;
    border-radius: 15px;
    box-shadow: -3px 3px 20px 10px #00000017;
    justify-content: flex-end;
    display: inline-flex;
}

#anglesDisplay+p {
    padding: 0 13.5px !important
}

/* 
input#lengthDisplay::selection,
#anglesDispla::selection {
    background: transparent;
    color: white;
} */

#length-modal-parent:not(.checked) #lengthDisplay+p {
    display: none !important;
}

#length-modal-parent.checked #lengthDisplay+p,
#anglesDisplay+p,
#secondLengthDisplay+p {
    right: 0px;
    top: 0;
    position: absolute;
    margin: 0;
    padding: 0 5px;
    color: white;
    font-size: 12px;
    height: 100%;
    background: var(--checked);
    display: inline-flex;
    align-items: center;
}


.list-hover>*:first-child {
    font-size: 0 !important;
    width: unset !important;
    display: unset !important;
    max-width: 48px;
    max-height: 0px;
}

.list-hover-parent {
    display: flex;
    height: 40px;
    border-right: var(--border);
    border-bottom: var(--border);
    font-size: 10px;
    padding: 1px 6px;
}

.relative {
    position: relative;
    border: none;
}

.list-hover button {
    opacity: 0 !important;
    z-index: -55 !important;
    overflow: hidden;
    max-height: 0;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 
canvas:focus,
canvas:active,
canvas:focus-within {
    background-color: red !important;
} */

.mis-placeholder.actives,
#generateHoleOnCanvas.actives,
#toggleCoordinates.actives,
#generateHolesWithdistanceOnCanvas.actives {
    display: inline-flex !important;
}

/* .mis-placeholder,
#generateHoleOnCanvas,
#toggleCoordinates,
#generateHolesWithdistanceOnCanvas,
#calculatePrice,
#save-path-btn,
#toggleSnap {
    display: none !important;
} */

#save-path-btn, #calculatePrice, #rotateFigureControl {
    display: none !important;
}

label[for="toggleSnap"] {
    display: none !important;
}

.list-hover-parent:hover>.list-hover{
    box-shadow: -3px 3px 20px 10px #00000017 !important;
    border: var(--border);
}

.list-hover-parent:hover>.list-hover>button:not(button:first-child):hover {
    background-color: var(--dark-detail) !important;

}

.list-hover-parent:hover>.list-hover>button:not(button:first-child) {
    opacity: 1 !important;
    z-index: 1 !important;
    max-height: unset !important;
    height: 45px !important;
    padding: 10px !important;

}

.list-hover-parent:hover>.list-hover>button:not(button:last-child) {
    border-bottom: var(--border) !important;
}

.list-hover-parent:hover .list-hover {
    max-height: unset !important;
}

.svg-lock-length-button svg path,
.svg-lock-length-button svg polyline,
.svg-lock-angle-button svg path,
.svg-lock-angle-button svg polyline,
.svg-additional-grind-button svg path,
.svg-additional-grind-button svg polyline,
.svg-update-angle-button svg path,
.svg-update-angle-button svg polyline,
.svg-update-hole-button svg path,
.svg-update-hole-button svg polyline {
    stroke: var(--white) !important;
}
.svg-lock-length-button svg path,
.svg-lock-angle-button svg path,
.svg-additional-grind-button svg path,
.svg-update-angle-button svg path,
.svg-update-hole-button svg path {
    fill: var(--white);
}
.svg-delete-button svg path {
    fill: var(--white);
}

.svg-rotate-button svg {
    width: 16px;
    height: 16px;
}

.block-checkbox+.svg-lock-button svg+.svg-delete-button svg+.svg-delete-group-button svg+.svg-rotate-button svg+.svg-lock-group-button svg {
    filter: invert(1);
}

.svg-eye-button,
.svg-lock-length-button,
.svg-lock-angle-button,
.svg-additional-grind-button,
.svg-update-angle-button,
.svg-update-hole-button,
.svg-lock-group-button,
.svg-delete-group-button,
.svg-rotate-button,
.hide-all,
.svg-delete-button {
    display: inline-flex;
    width: 42px;
    outline: 0;
    aspect-ratio: 1/1;
    border: none;
    background: none;
    height: 42px;
    flex-direction: column;
    align-items: center;
    border-right: var(--border);
    justify-content: center;
}

.svg-update-angle-button {
    width: auto;
    flex-direction: row;
    aspect-ratio: unset;
    gap: 3px;
}

.input-field-correction {
    border-top: var(--border);
}

/* .layers-panel-right > div.active
{
    border-bottom: var(--border);
} */
.layers-text input {
    max-width: 100px;
}

.layers-text--mis {
    width: auto;
    flex: 1;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.child--coordinates {
    justify-content: center;
    padding: 5px 10px;
    box-sizing: border-box;
}

.layers-text--coordinates {
    width: 100%;
    justify-content: center;
}

.layers-text {
    gap: 10px;
    display: inline-flex;
    align-items: center;
    width: 50%;
    font-size: 11px;
}

.sheet-container {
    margin-right: 10px;
    position: fixed;
}

.canvas-buttons-container {
    font-size: 3;
}

canvas {
    background-color: #282828;
    position: fixed;
    z-index: -2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#icon {
    position: absolute;
    left: 0px;
    top: 2px;
    width: 32px;
    height: 32px;
    mix-blend-mode: lighten;
}

.tips div.active {
    display: inline-flex;
    align-items: center;

}

.grid-tool {
    display: inline-flex;
    gap: 10px;
    cursor: default;
}

.grid-tool p {
    margin: 0;
    padding: 0;
}

.grid-button {
    border: var(--border);
    padding: 2px 25px;
    margin: 3px;
}

.tips div {
    display: none;
}

.tips {
    color: var(--white);
    display: inline-flex;
}

#selectionContainer {
    gap: 2px;
    display: inline-flex;
    flex-direction: column;
}

.mid {
    display: inline-flex;
    align-items: center;
}

#toolbar {
    margin-bottom: 10px;
    background-color: var(--background);
    display: inline-flex;
    z-index: 32423;
    justify-content: space-between;
    width: 100%;
    z-index: 1000;
    border-bottom: var(--border);
    position: relative;
    height: 42px;
}

#toolbar button:not(.active) {
    cursor: pointer;
}

#toolbar button > p,
#toolbar .list-hover-parent > p {
    font-size: 17px;
    margin: auto;
}

/* #toolbar button{
    border-left: var(--border);
} */

/* #toolbar button:first-child {
    border-left: var(--border);
} */

#toolbar button:hover {
    background-color: rgb(100, 100, 100);
}

#toolbar button:active {
    background-color: var(--checked)
}

#toolbar label {
    border-right: var(--border);

    width: 45px;
    display: inline-flex;
    z-index: 432;
    justify-content: center;
    align-items: center;
}
.input-length {
    justify-content: center;
    width: 100%;
    padding: 10px;
    padding-right: 39px;
    box-sizing: border-box;
}

.input-length .layers-text {
    width: 100%;
    justify-content: center;
}

.input-length input {
    background-color: var(--background);
    outline: none;
    color: var(--white);
    border: var(--border);
    border-radius: 5px;
}
.dynamicInputs {
    z-index: 999;
    height: 30px;
    transform: translate(-50%, -50%);
    background: var(--dark-detail);
    display: inline-flex;
    flex-direction: row;
    border-radius: 50px;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv {
    /* transform: translate(-50%, -50%); */
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    width: 30px;
    justify-content: center;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv .divInputForLengthInputFromLayersLockLengthDivCheckbox,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv .divInputForAngleInputFromLayersLockAngleDivCheckbox,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv .divInputForHoleInputFromLayersLockHoleDivCheckbox {
    display: none;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv .divInputForLengthInputFromLayersLockLengthDivCheckboxLabel,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv .divInputForAngleInputFromLayersLockAngleDivCheckboxLabel,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv .divInputForHoleInputFromLayersLockHoleDivCheckboxLabel {
    background: none;
}
.dynamicInputs .divInputForLengthInputFromLayersLockLengthDiv svg,
.dynamicInputs .divInputForAngleInputFromLayersLockAngleDiv svg,
.dynamicInputs .divInputForHoleInputFromLayersLockHoleDiv svg {
    /* fill: var(--white); */
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.dynamicInputs .dynamicInput {
    /* transform: translate(-50%, -50%); */
    border: var(--border);
    border-radius: 50px;
    text-align: center;
    width: 75px;
    background-color: var(--dark-detail);
}


#angles-modal-parent:not(.checked),
#length-modal-parent:not(.checked),
#hole-modal-parent:not(.checked) {
    position: absolute;
    transform: translate(-50%, -50%);

}

#anglesDisplay {
    text-align: center !important;
    height: 100% !important;
    border-radius: 0 !important;
}

#angles-modal-parent.active {
    display: inline-flex !important;

}

#angles-modal-parent {
    border-radius: 0 !important;
}

#anglesDisplay+p {
    display: none !important;
}

#anglesDisplay {
    max-width: 50px;
    padding: 0 !important;
    width: 100%;
}


#toolbar button {
    display: flex;
    align-items: center;
    z-index: 3;
    overflow: hidden;
    border: none;
    background-color: none;
    background: none;
    border-RIGHT: var(--border);
    font-size: 10px;
}

#toolbar input:not([type="range"]):not([type="file"]) {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
}

#rotateFigureControl {
    display: flex;
    align-items: center;
    border-right: var(--border);
    padding: 0 4px;
}

#rotateFigureAngle {
    opacity: 1 !important;
    position: static !important;
    width: 52px !important;
    height: 28px !important;
    z-index: auto !important;
    background: var(--background);
    color: var(--white);
    border: 1px solid #555;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
}


#title {
    text-align: center;
    color: var(--white);
    background-color: var(--background);
    border: 2px solid #424242;
    padding: 5px;
    z-index: 3423424243;
    position: relative;
}

#toolbar label {
    font-size: 0;
}

.radio-group {
    display: inline-flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: row-reverse;
}

input:checked+label:not(.radio label) {
    background-color: rgb(59 59 59);
}

#toolbar button svg,
#toolbar label svg,
.svg-rotate-button svg {
    width: 16px;
    height: 16px;
    padding: 8px;
    fill: var(--white);
}

#toolbar .right path {
    stroke: #8b8b8b;

}

#toolbar .left path:not(#singleSelectTool path) {
    fill: var(--white);
    stroke: #8b8b8b;
}

#toolbar .left {
    justify-content: flex-start;
}

#toolbar .right {
    justify-content: flex-end;
}

#toolbar .left,
#toolbar .right {
    display: inline-flex;
    flex-wrap: wrap;
}

.layers-panel-right.active,
.coordinates-panel-right.active {
    transform: translateX(0px);
}

#coordinates2.active,
#lengths.active,
#angles.active,
#holes.active,
#area.active {
    display: inline-flex !important;
}

#edycjaDlugosciMenu label {
    color: var(--white);
}

.layers-panel-right,
.coordinates-panel-right {
    transform: translateX(1500px);
    z-index: 432;
    transition: 0.2s ease-in-out;
    width: 470px;
    display: inline-flex;
    position: fixed;
    right: 0;
    flex-direction: column;
    top: 43px;
    max-height: calc(100% - 43px);
}


#holes>.child>.svg-update-hole-button>svg,
#holes>.child>.svg-lock-group-button>svg,
#holes>.child>.svg-delete-group-button>svg,
#holes>.child>.svg-rotate-button>svg,
#holes>.child>.svg-delete-button>svg {
    filter: invert(1);
}

/* .layers-text .content p {
    margin: 2px !important;
} */

.layers-text .content {
    max-width: 120px;
}


.layers-text .row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#toggle-holes svg

/* #generateHoleOnCanvas svg path  */
    {
    fill: none !important;
}

.delete-hole {
    aspect-ratio: 1/1;
    width: 24px;
    height: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.delete-hole svg {
    fill: var(--white);
    width: 12px;
    height: 12px;
    padding: 3px;
    aspect-ratio: 1/1;
}

label b {
    font-weight: 100;
}

.input-field-correction>*:first-child,
#area>*:first-child {
    margin-top: 20px;
}

.input-field-correction>*:last-child,
#area>*:last-child {
    margin-bottom: 20px;
}

#help-panel-right>div:not(.icons-nav-help)>*,
#coordinates-panel-right>div:not(.icons-nav-help)>* .input-field-correction>*,
#area>*,
.input-field-correction>*,
#glass>div>* {
    margin: 5px 10px;
}

.disabled,
.Disabled,
.disabled:hover,
#Disabled:hover {
    pointer-events: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;

}

#glass-price {
    display: inline-flex;
    flex-direction: column;
}

#edycjaDlugosciMenu {
    position: absolute;
    top: 400px;
    left: 300px;
    background: var(--background);
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;

}

#edycjaDlugosciMenu button {
    background-color: var(--blue);
    color: white;
    border-radius: 5px;
    border: none;
}

#help-panel-right>div:not(.icons-nav-help, .position-relative),
#coordinates-panel-right>div:not(.icons-nav-help, .position-relative) {
    display: none;
}

#help-panel-right>div.active,
#coordinates-panel-right>div.active {
    display: inline-flex !important;
}

.icons-navbar-css>button:hover,
.icons-navbar-css>button.active {
    background-color: var(--background) !important;
}

.icons-navbar-css>button {
    display: inline-flex;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 5px 0;
    justify-content: center;
    cursor: default;
    align-items: center;
    cursor: pointer;
    border: none;
    border-right: var(--border);
}

.icons-navbar-css svg *:not(.toggle-lenghts svg *) {
    stroke: var(--white);

}

.icons-nav-help>div{
    flex: 2 1 auto;
    cursor: pointer;
}

.icons-nav-help>div.active {
    cursor: default;
    background-color: #838383;
}

.icons-navbar-css>div:not(div:last-child) {
    border-right: var(--border)
}

.icons-navbar-css svg:not(#help-panel-right svg),
.icons-navbar-css svg:not(#coordinates-panel-right svg) {
    width: 24px;
    height: 24px;
    fill: var(--white);

}

.icons-nav-help svg{
    display: block;
    margin: auto;
}

#hide-all-angles-input {
    display: none;
}

#help-panel-right svg,
#coordinates-panel-right svg,
.stick-tuts svg,
.stick-coordinates-tuts svg {
    width: 16px;
    height: 16px;
    padding: 4px;
    fill: var(--white);

}

.icons-navbar-css {
    color: var(--white);
    display: inline-flex;
    background: var(--background2n);
    border-bottom: var(--border);
    width: 100%;
    justify-content: space-evenly;
    font-size: 12px;
}

#lengths .child,
#coordinates .child {
    display: inline-flex;
}

#coordinates .child {
    justify-content: flex-start;
}

.child.position-relative {
    border-bottom-left-radius: 15px;
    position: fixed;
    bottom: -42px;
    z-index: 452432;
    width: 100%;
}

#layers-panel-right>#lengths {
    opacity: 0;
    z-index: -1;
    position: absolute;
}

#layers-panel-right>#lengths.active {
    opacity: 1 !important;
    z-index: 2 !important;
    position: unset !important;
    /* border-radius: 0 0 10px 10px; */
}

/* #toggleSnap+label+.list-hover-parent>.list-hover {
    box-shadow: none;
} */

#coordinates2,
#angles,
#lengths,
#holes,
#area,
#glass {
    overflow-y: auto;
    display: none !important;
    z-index: 2;
    font-size: 16px;
    background-color: var(--dark-detail);
    color: var(--white);
    flex-direction: column;
}

.checked-checkbox-tut {
    right: 470px;
}



#help-panel-right>div:not(.icons-nav-help, .position-relative),
#coordinates-panel-right>div:not(.icons-nav-help, .positon-relative) {
    z-index: 2;
    font-size: 16px;
    background-color: var(--dark-detail);
    color: var(--white);
    flex-direction: column;
}


#nowaDlugosc {
    border-radius: 10px;
    border: none;
    padding-left: 5px;
    background: var(--white);
}

button.active {
    background-color: var(--checked) !important;
}

#toolbar button.menu-active {
    background-color: var(--checked);
}

.layers-panel-title {
    background: var(--background2n);
    padding: 8px;
    text-align: center;
    font-size: 20px;
}

.settings-hover div {
    padding: 10px;
    cursor: pointer;
}

.settings-hover .save-img,
.settings-hover .prefferences-button
{
    display: none;
}

.layers-panel-right>div:not(.icons-navbar-css) .child,
.coordinates-panel-right>div:not(.icon-navbar-css) .child {
    cursor: default;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.settings-hover div:hover,
#angles div:hover,
#holes div:hover,
#lengths div:hover {
    background-color: var(--checked) !important;
}

.settings-hover.active {
    display: block !important;
}


.highlitAnimation.active,
.highlitAnimationForGlassScreen.active,
.highlitAnimationForGlassChooseForLayersScreen.active {
    animation: highlit 1s infinite;
}

.settings-hover div>* {
    cursor: default;
}



.settings-hover div>a {
    display: block;
    height: 100%;
    width: 100%;
}

#angles,
#lengths,
#holes,
#area,
#glass,
.layers-panel-right,
.coordinates-panel-right {
    box-shadow: -3px 3px 20px 10px #00000017;
}

#toggle-coordinates-layer {
    border-radius: 0 !important;
}

.settings-hover {
    display: none;
    box-shadow: -3px 3px 20px 10px #00000017;
    position: fixed;
    z-index: 1;
    top: 39px;
    overflow: hidden;
    padding-top: 9px;
    left: 0px;
    color: var(--white);
    width: 240px;
    background-color: var(--background);
    border-radius: 0 0 10px 0;
}

.dialog {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.dialog-content {
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    width: 30%;
    max-width: 500px;
    width: 100%;
    background: var(--background);
    color: var(--white);
}

.alertPopText {
    text-align: center;
    font-size: 20px;
    margin: 10px 0 20px;
}

.dialog-content button:last-child {

    opacity: 1;
    color: var(--white);
    background-color: #1567ff;
}
.dialog-content.angle button:first-child,
.dialog-content.length button:first-child {

    opacity: 1;
    color: var(--white);
    background-color: #1567ff !important;
}

.dialog-content button:first-child:hover {
    opacity: 0.5;
}

.dialog-content button {
    transition: 0.1s;
    border: none;
    border-radius: 50px;
    padding: 8px 25px;
    opacity: 0.3;
}

.dialog-content-doublehole {
    margin: 15% auto;
    padding: 20px;
    border-radius: 5px;
    width: 30%;
    background: var(--background);
    color: var(--white);
}

.dialog-content-doublehole button {
    transition: 0.1s;
    border: none;
    border-radius: 50px;
    padding: 8px 25px;
    opacity: 1;
}

.dialog-content-doublehole button:hover {
    opacity: 0.5;
}

.wipe-or-dont {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 20px;
}

.earaser {
    filter: brightness(1.35);
}

.more-settings:hover + .settings-hover,
.settings-hover:hover {
    display: block;
}

.more-settings svg {
    filter: brightness(2.5);
}

#area,
#glass {
    border-radius: 0 !important;
    position: unset !important;
}

.input-field-correction *,
#area *,
#glass * {
    outline: none;
}

#container-for-angles-lenghts {
    position: relative;
    width: 100%;
}

.hide,
.input-field-correction {
    display: none !important;
}

.input-field-correction {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

#selectionContainer label {
    display: inline-flex;
    gap: 5px;
    justify-content: space-between;
}

.input-field-correction,
#area,
#glass {
    gap: 5px;
    border-radius: 5px;
    background: var(--background2n);
    color: var(--white);
    display: inline-flex;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    flex-direction: column;
    width: 100%;
    border-bottom-left-radius: 15px !important;
    overflow-x: hidden;
}

#glass>div {
    display: inline-flex;
    flex-direction: column;
}

.marign-left-10 {
    margin-left: 10% !important;
}

.input-field-correction input,
.layers-input,
#area input,
#glass input {
    background-color: var(--background);
    outline: none;
    color: var(--white);
    border: none;
    border: var(--border);
    border-radius: 5px;
}

#area input {
    appearance: none;
    -moz-appearance: textfield; /* Firefox */
    cursor: default;
    padding: 5px 10px;
    margin-top: 0;
    margin-bottom: 0;
}

#area input::-webkit-outer-spin-button,
#area input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    cursor: default;
}

#area button,
#glass button {
    border-radius: 5px;
    outline: none;
    border: none;
}

#selectionContainer .input-field-submit {
    margin-top: 20px;
}

.input-field-submit,
.wmc-bottom-buttons a {
    background-color: var(--blue);
    color: white;
    border-radius: 50px;
    border: none;
    padding: 10px 0;
}

.input-field-correction button:not(.input-field-submit) {
    border: none;
    border-radius: 5px;
    opacity: 0.3;
}

.input-field-correction button:not(.input-field-submit):hover {
    opacity: 0.5;
}

select {
    background: var(--background2n);
    outline: none;
    color: var(--white);
    border-radius: 5px;
}

select {
    scrollbar-width: none;
    /*For Firefox*/
    ;
    -ms-overflow-style: none;
    /*For Internet Explorer 10+*/
    ;
}

select::-webkit-scrollbar {
    /*For WebKit Browsers*/
    width: 0;
}



#roundButton {
    position: absolute;
    bottom: 90px;
    left: 10px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    /* Ensure it's above all canvas layers */
}

#stick-tus-checkbox,
#stick-coordinates-tus-checkbox,
.obrobka-checkbox,
.block-angle-checkbox,
.block-length-checkbox {
    display: none;
}

.length-checkboxes,
.angle-checkboxes {
    display: inline-flex;
    outline: 0;
    background: none;
    height: 42px;
    border-left: var(--border);
    flex-direction: row;
    align-items: center;
    border-right: var(--border);
    justify-content: center;
}

.obrobka-checkbox svg,
.block-length-checkbox svg,
.block-angle-checkbox svg {
    fill: var(--white);
    width: 16px;
    height: 16px;
}

.checked-checkbox {
    display: none;
}

.checked-checkbox.active {
    display: inline-flex !important;
    margin-left: 17px;
    margin-top: 9px;
}

#glass,
#glass>div {
    flex-direction: column;
    background: var(--background);
}

#glass.active {
    display: inline-flex !important;
}





.stick-tuts,
.stick-coordinates-tuts {
    border-bottom-left-radius: 15px;
    gap: 10px;
    display: inline-flex;
    align-items: center;
    font-weight: 100;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background: var(--background2n);
}

#stick-tus-checkbox+label,
#stick-coordinates-tus-checkbox+label,
#hide-all-angles-input+label {
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 10px;
}

.layers-input+p {
    position: absolute;
    right: 20px;
}

#coordinates {
    padding: 20px 0;
    overflow-y: auto !important;
}

.nomargin {
    margin: 0;
    padding: 0;
}

.prices-row input {
    cursor: default;
}

.prices-row input::-webkit-inner-spin-button,
.prices-row input::-webkit-inner-spin-button {
    opacity: 0 !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {

    opacity: 1;

}

#hide-all-angles-input+label,
#hide-all-lengths-input+label,
#hide-all-holes-input+label {
    width: 41px !important;
    height: 42px !important;
}

#angles .child button>svg,
#holes .child button>svg .stick-tuts svg {
    pointer-events: none;
}

.svg-oczko {
    pointer-events: none !important;
}

.svg-oczko-2 path {
    fill: var(--white);
}

#lengths .child button>svg {
    pointer-events: none;
}

.magnify-toolbar,
#hide-all-lengths-input,
#hide-all-holes-input,
.scaling-toolbar {
    display: none;
}

.fat {
    top: 103.5px !important;
}

#toolbar .mid {
    width: min-content;
}

.scaling-toolbar p {
    margin: 0;
    white-space: nowrap;
}

.magnify-toolbar.active,
.scaling-toolbar.active {
    display: inline-flex;
}

.svg-eye-button svg path {
    fill: var(--white);
}

#order-confirm {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.popup {
    position: fixed;
    z-index: 10;
    display: none;
    right: 0px;
    top: 0;
}

/* Style dla wyświetlenia popupa */
.popup.active {
    display: flex;
    margin: auto;
    color: var(--white);
    text-align: center;
    background: #282828;
    flex-direction: column;
    border-radius: 0 0 15px 15px;

}

.popup img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0 0 15px 15px;
}

.popup-start {
    position: relative;
    z-index: 10;
    display: none;
    max-width: 565px;
    width: 100%;
}

/* Style dla wyświetlenia popupa */
.popup-start.active {
    display: flex;
    margin: auto;
    color: var(--white);
    text-align: center;
    background: #282828;
    flex-direction: column;
    border-radius: 15px;
}

.popup-start img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 0 15px 15px;
    width: 565px;
    height: 353px;
}

.title-bar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    border-radius: 0 0 15px 15px
}

.title-bar .close {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.title-bar p {
    width: 90%;
}

.dialog.active {
    display: flex !important;
}

/* #generateHoleOnCanvas,
#toggle-holes {
    display: none !important;
} */

#toggle-options-layer>div:first-child,
#toggle-coordinates-layer>div:first-child {
    overflow-y: scroll;
    max-height: 400px;
    height: 100%;
}

.prices-row {
    display: inline-flex;
    justify-content: space-between;
}

.prices-row .row {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.glass-first-child {
    display: none !important;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    background: #00000054;
    justify-content: center;
    backdrop-filter: blur(1px);
}

.loader.active {
    display: inline-flex !important;
    z-index: 999 !important;
}

.cart-parent {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    transform: translateX(-781px);
    transition: 0.2s ease-in-out;
    width: 1000vh;
    z-index: -50;
}

.cart-parent.active {
    transform: translateX(0) !important;
    backdrop-filter: blur(1px) brightness(0.8);
    z-index: 999;

}

.cart-parent .cart-content {
    background: #242424;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
}


/* .cart-icon {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    display: inline-flex;
    align-items: center;
    width: 47px;
    background: var(--blue);
}
 */
.cart-buttons {
    margin-top: 75px;
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
}
.close-cart-icon svg, .redirect-cart-icon svg {
    padding: 8px;
}

.cart-icon svg {
    width: 24px;
    padding: 8px;
    height: 24px;
    fill: var(--white);
}

.left-icons {
    height: 100vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 432;
}

.cart-content .woocommerce>* {
    margin: 0 50px;
}

.cart-content .woocommerce {
    display: inline-flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.cart-collaterals .cart_totals {
    padding-bottom: 50px;
}

.cart-content .content {
    display: inline-flex;
    flex-direction: column;
    height: 100%;
}

form.woocommerce-cart-form {
    max-height: 500px;
    overflow-y: scroll;
}

/* koszyk */

.wmc-cart {
    display: none;
}



.wmc-count {
    position: absolute;
    right: -10px;
    height: 25px;
    width: 25px;
    border-radius: 100px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 12px;
    top: 0;
}

.wmc-content {
    width: 400px;
    flex-direction: column;
    display: inline-flex;
    text-align: center;
    justify-content: space-between;
    height: 100%;
    max-height: 85%;
}


.wmc-content h3:not(.wmc-empty h3) {
    display: none;
}

.wmc-subtotal {
    height: 40px;
}

.wmc-bottom-buttons {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}


.wmc-products {
    margin: 0 !important;
    padding-left: 0;
    max-height: 100%;
    height: 73%;
    overflow: scroll;
}

.bottom-things {
    background: var(--background);
    padding-bottom: 20px;
    border-top: 2px solid #424242;
    position: fixed;
    bottom: 0;
    left: 0;
    width: inherit;
}

.wmc-products li {
    padding: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}



.wmc-remove {
    width: 10%;
}

.wmc-image {
    width: 30%;
}

.wmc-product-title {
    color: #333 !important;
    text-decoration: none !important;
}

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

.wmc-details {
    width: 60%;
    text-align: center;
}

.wmc-details h4 {
    font-size: 18px;
    color: var(--white);
    font-weight: 700;
}

.wmc-price {
    font-size: 16px;
}

.wmc-content a {
    text-decoration: none;
    color: white !important;
    margin: 0 10px;
}

.wmc-content h5 b {
    font-weight: 100;
}

.wmc-content h5 {
    font-size: 18px;
    padding: 0;
    font-weight: 500;
    margin: 0 !important;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.wmc-empty {
    height: auto;
}



.shortcode-wrapper .wmc-cart {
    position: relative !important;
}

.wmc-cart-wrapper.shortcode-wrapper {
    height: 100%;
}

.wmc-details h4,
.wmc-details p {
    margin: 0;
}

#holes svg {
    pointer-events: none;
}

.layerContainer.active {
    background: #2f2f2f;
}

.layerContainer {
    height: 34px;
    display: inline-flex;
    border-radius: 4px;
    background: var(--background);
    align-items: center;
}



.layerContainer button {
    background: none;
    display: inline-flex;
    border: none;
}

.layerContainer svg {
    fill: var(--white);
}

.layerContainer p {
    margin: 0;
    font-size: 12px;
    padding: 0;
}

#canvas-buttons-container {
    display: inline-flex;
    gap: 10px;
}

#add-sheet-btn {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    border: none;
    height: 25px;
    cursor: pointer;
}

/* .layer-name-input {
    pointer-events: none;
} */

.sheets {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 10px;
    align-items: center;
}

.layer-name-input {
    width: 85px;
    border: none;
    outline: none;
    background: transparent;
    font-size: inherit;
    color: inherit;
    padding: 0;
    color: #e3e3e3;
    margin: 0;
    cursor: text;
    font-size: 15px;
}

#coordinates .layers-text .content:last-child {
    padding-right: 10px;
}

.holes-checkboxes {
    display: inline-flex;
}

.svg-rotate-button svg path {
    stroke: var(--white);
}

.svg-rotate-button svg {
    fill: transparent;
}

.remove-sheet-btn {
    cursor: pointer;
    height: 93%;
    background: #656565 !important;
    border-radius: 0px 4px 4px 0;
    align-items: center;
}

.sheet-tab {
    width: 20px;
}

.edgesExample active {
    display: inline-flex;
    flex-direction: column;
}

.popupImages,
.popupImages-start {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    /* width: 200px; */
}

.popupImages>img {
    width: 200px;
}

.popupImages>p>svg,
.popupImages-start>p>svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.learn-more,
.learn-more-start {
    cursor: pointer;
    color: var(--blue);
}

.squareSizeDialog,
.rectangleSizeDialog,
.rhombusSizeDialog,
.trapezoidSizeDialog,
.polygonSizeDialog {
    display: none;
}

.squareSizeDialog active,
.rectangleSizeDialog active,
.rhombusSizeDialog active,
.trapezoidSizeDialog active,
.polygonSizeDialog active {
    display: inline-flex;
    z-index: 123456;
}

.square-dimensions-content,
.rectangle-dimensions-content,
.rhombus-dimensions-content,
.trapezoid-dimensions-content,
.polygon-dimensions-content {
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    max-width: 600px;
    background: var(--background);
    color: var(--white);
}

.square-dimensions-content img,
.rectangle-dimensions-content img,
.rhombus-dimensions-content img,
.trapezoid-dimensions-content img,
.polygon-dimensions-content img {
    display: block;
    margin: 20px auto 20px;
    height: 200px;
    filter: invert(100%);
}

.square-dimensions-content button,
.rectangle-dimensions-content button,
.rhombus-dimensions-content button,
.trapezoid-dimensions-content button,
.polygon-dimensions-content button {
    transition: 0.1s;
    border: none;
    border-radius: 5px;
    padding: 8px 25px;
    cursor: pointer;
}

.square-dimensions-content button:last-child,
.rectangle-dimensions-content button:last-child,
.rhombus-dimensions-content button:last-child,
.trapezoid-dimensions-content button:last-child,
.polygon-dimensions-content button:last-child {

    opacity: 1;
    color: var(--white);
    background-color: #1567ff;
    cursor: pointer;
}

.square-inputs>*:not(:last-child),
.rectangle-inputs>*:not(:last-child),
.rhombus-inputs>*:not(:last-child),
.trapezoid-inputs>*:not(:last-child),
.polygon-inputs>*:not(:last-child) {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 10px;
    width: 100%;
}

#second-length-modal-parent {
    position: absolute;
    display: none;
    pointer-events: none;
    /* Zapobiega interakcji z kontenerem */
    z-index: 1000;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    /* border: var(--border); */
    max-width: 120px;
    color: black;
}

#second-length-modal-parent.checked {
    display: block;
    /* Wyświetl modal */
}

#second-length-modal-parent #secondLengthDisplay {
    -moz-appearance: textfield;
    text-align: center;
    border: var(--border);
    width: 100px;
    color: white;
    padding: 0;
    outline: none;
    background-color: var(--background);
}

#second-length-modal-parent #secondLengthDisplay::-webkit-inner-spin-button,
#second-length-modal-parent #secondLengthDisplay::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

#second-length-modal-parent.checked #secondLengthDisplay,
#secondLengthDisplay {
    border-radius: 10px 0 0 10px;
    border: none;
    background: var(--background2n);
    padding: 5px;
    width: 65%;
}

/* .sheets, .save, .import-dxf-start, .open-file-btn {
    display: none !important;
} */


.blinker {
    animation: blinker-animation 1.5s linear infinite; /* 1.5s to czas trwania animacji */
  }
  
  @keyframes blinker-animation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0; /* Znika na chwilę */
    }
    100% {
      opacity: 1; /* Pojawia się z powrotem */
    }
  }
  


  .main-content h1 {
    font-size: 2em;
    color: var(--light-text);
    text-align: center;
    margin-bottom: 20px;
}

.main-content > p {
    font-size: 1.2em;
    color: var(--light-text);
    text-align: center;
    margin-bottom: 40px;
}

.choose {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    gap: 35px;
    height: -webkit-fill-available;
}

.chooseformanysheets,
.chooseforonesheet {
    cursor: pointer;
    background: #282828;
    border-radius: 15px;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.chooseformanysheets:hover,
.chooseforonesheet:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.chooseformanysheets img,
.chooseforonesheet img {
    width: 100%;
    height: 100px;
    border-radius: 15px 15px 0 0;
}

.chooseformanysheets h2,
.chooseforonesheet h2 {
    font-size: 1.5em;
    color: var(--light-text);
    margin-top: 10px;
    text-align: center;
    padding: 0 15px;
}

.chooseformanysheets p,
.chooseforonesheet p {
    font-size: 1.25em;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 20px;
    text-align: center;
}

.chooseformanysheets > div,
.chooseforonesheet > div {
    padding: 16px 25px;
    display: inline-flex;
    flex-direction: column;
}

.chooseformanysheets > div > button,
.chooseforonesheet > div > button {
    margin: auto;
}

.chooseforonesheet .icons-container,
.chooseformanysheets .icons-container {
    display: flex;
    gap: 10px;
    width: min-content;
    margin: auto;
    padding: 7px 0;
    color: rgba(255, 255, 255, 0.75);
}

.shape-choose {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: auto;
    margin-bottom: 20px;
}

.choose-own-shape-btn {
    padding: 6px;
    cursor: pointer;
    margin-bottom: auto;
}

.main-content h1.modal-title {
    font-size: 30px;
    margin-bottom: 40px;
}

.shape-choose button {
    display: flex;
    flex-direction: column;
    padding: 20px;
    cursor: pointer;
    max-height: 220px;
    height: 100%;
    font-size: 21px;
    border: 3px solid #ffffff52;
    transition: border-color .2s ease-in-out, transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.shape-choose button:hover,
.shape-choose button:focus,
.shape-choose button:focus-visible {
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 1px 1px 10px 0px #fff;
    outline: none;
}

.shape-choose button svg {
    width: 100%;
    height: 100%;
}

.set-glass-btn {
    background: var(--background);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    width: fit-content;
}
.set-glass-btn:hover {
    background: var(--blue);
}

.file-grid > div#glass-second-child {
    width: 100%;
}
.file-grid > div#glass-second-child .row {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
}
div#popupFpInfo-start .popupImages-start > img {
    height: auto;
    width: auto;
}

/* TODO: display addtional grind options */
.length-checkboxes .svg-additional-grind-button{
    display: none;
}
/* TODO: display addtional grind options */
.additionalGrindContainer{
    display: none;
}

.spinner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #c639a2 #c639a2 transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .spinner::after,
  .spinner::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #305ec2 #305ec2;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }
  .spinner::before {
    width: 50px;
    height: 50px;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1.5s linear infinite;
  }
      
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
      
 .ui-dialog-titlebar-close { /* jQuery ui dialog hide close button */
    display: none;
  }