/*in this css file we don't change the style of any svg element*/
.buttonContainer, .formContainer {
    /*align-items: center;*/
    /*margin: 5px;*/

    /*display: flex;*/
    /*flex-direction: row;*/
}

/*#svgWrapper {*/
/*    max-width: 100%; !* Set a maximum width if necessary *!*/
/*    margin: 0 auto; !* Center the container *!*/
/*}*/

#svgWrapper {
    width: 100%; /* Make the wrapper take the full width of its parent */
    /* height: auto; This will be managed by JavaScript to preserve aspect ratio */
    background-color: rgb(33, 37, 41);
    margin: 0 auto; /* Center the container if needed */
    overflow: hidden; /* Ensures no part of the SVG spills out */
}

#hexSVG {
    width: 100%;
    height: auto; /* This will make the SVG responsive */
    background-color: rgb(33, 37, 41);
}
/*#hexSVG {*/
/*    width: 100%;*/
/*    height: auto;*/
/*}*/
.colorLabel {
    font-size: 15px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

.notClickable {
    pointer-events: none;
}

.rangeLabel {
    font-size: 15px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

.colorInput {
    display: none;
}

.svg-hidden {
    visibility: visible;
}

.highlighted_image {
    opacity: 0.33;
    stroke: red;
}

/*center the svgDiv*/
#svgDiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}



.loader-shown {
    position: fixed;
    bottom: 0;
    right: 0;
    /* border: 16px solid #f3f3f3; */
    /* border-top: 16px solid #3498db; */
    /* border-radius: 50%; */
    /* width: 175px; */
    /* height: 175px; */
    /* animation: spin 2s linear infinite; */
}

.loader {
    position: fixed;
    bottom: 50%;
    right: 50%;
}

.bottom-right {
    position: fixed;
    bottom: 10px; /* Adjust this value as needed */
    right: 10px; /* Adjust this value as needed */
}


/*this enables the tooltip of an disabled button*/
.btn.disabled {
    /*pointer-events: auto;*/
    /*  pointer-events: all !important;*/

}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.powerWall {
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Optional: Adjust this value to control the centering within the viewport */
    text-align: center;
}

#powerWallText {
    /* display: flex; */
    flex-direction: column;
    /* flex-direction: row; */
    /*margin-right: 20px;*/
}

@media (max-width: 2000px) {
    .powerWall h1 {
        font-size: 20px;
    }

    .powerWall .btn-outline-dark {
        font-size: 15px;
    }

    .powerWall #config-select {
        font-size: 10px;
    }
}

@media (max-width: 5000px) {
    .powerWall h1 {
        font-size: 50px;
    }

    .powerWall .btn-outline-dark {
        font-size: 30px;
    }

    .powerWall #config-select {
        font-size: 20px;
    }
}

@media (max-width: 10000px) {
    .powerWall h1 {
        font-size: 100px;
    }

    .powerWall .btn-outline-dark {
        font-size: 50px;
        margin: 20px;
    }

    .powerWall #config-select {
        font-size: 30px;
        margin: 20px;
    }
}