/******BODY*******/
/* Set global styles for the entire document */
body {
    font-family: Arial, sans-serif; /* Use Arial font family with fallback to sans-serif */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange children vertically */
   /*align-items: center; /* Center items vertically */
    height: 100vh; /* Take full height of viewport */
    width: 100vw; /* Take full height of viewport */
    /*background-color: rgb(132, 231, 20); /* Set the background color */
    /*background-color: white; /* Set the background color */
    /*overflow-x: hidden; /* Hide horizontal overflow */
   /* border: 2px solid rgb(108, 209, 14); /* Background color of header */
    overflow: auto; /* Handle overflow within container */
}
/******END BODY*******/


/******HEADER*******/
/* Styles for the header section */
.header {
    height: 18%;
    width: 98%;
    padding: 0.0% 1%; /* Padding inside header */    
    display: flex; /* Use flexbox for layout */
    flex-direction: row;
    justify-content: space-between; /* Space items evenly along the main axis */
    align-items: center; /* Center items vertically */
    background-color:  white; /* Background color of header */
    /*background-color:  rgb(38, 38, 38); /* Background color of header */
    /*border: 2px solid #b8102f; /* Added border around header */
    }
.logo {
    height: 100%;
    width: auto; /* Adjust the size as needed */
    /* margin-left: 3% */
    /*background-color: rgb(215, 28, 28); /* Background color of header */
    /*border: 2px solid rgb(57, 201, 31); /* Added border around header */
}
.header-content {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Center items vertically */
    height: 100%;
    width: 45%;
    background-color:white; /* Background color of header */
    /*border: 2px solid rgb(57, 201, 31); /* Added border around header */
    }
.header-app {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items vertically */
    height: 100%;
    width: 70%;
    background-color:white; /* Background color of header */
    /*border: 2px solid rgb(35, 200, 229); /* Added border around header */
    }
.header-button {
    height: 60%;
    width: 20%;
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Center items vertically */
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    /*padding: 1px;*/
    transition: all 0.3s ease;
    /*border: 2px solid rgb(201, 31, 82); /* Added border around header */
    }
.icon {
    height: 100%; /* Adjust the height of the icons */
    width: 100%; /* Adjust the width of the icons */
    /* border: 2px solid rgb(11, 40, 224); /* Added border around header */
    }
.header-button:hover {
    /*border-bottom: 0.2rem solid silver; /* Royalblue border on hover */
    background-color: rgba(0, 0, 0, 0.1);/**/
    transform: translateY(-5px) scale(1.1);/**/
    filter: brightness(1.2);
    }
.header-text{
    height: 50%; /* Adjust the height of the icons */
    width: 60%; /* Adjust the width of the icons */
    font-size: 1.6vh; /* Font size is 2% of the viewport width */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center items vertically */
    /* align-items: center; /* Center items vertically */
    /* border: 2px solid rgb(215, 215, 26); /* Added border around header */
    }
.p-header-text{
    margin:0;
    /*border: 2px solid rgb(11, 40, 224); /* Added border around header */
    }
.p-header-text-bold{
    margin:0;
    font-weight: bold;
    /* border: 2px solid rgb(11, 40, 224); /* Added border around header */
    }
.social-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 35%; /* Take 50% of the parent container */
    height: 100%; /* Take 50% of the parent container */
    /*border: 2px solid rgb(215, 26, 199); /* Added border around header */
    }
.social-icon {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    
    align-items: center;
    transition: transform 0.3s ease, filter 0.3s ease;
    padding: 0.5%;
    border-radius: 15%;
    background-color: transparent;
    /*border: 2px solid rgb(215, 26, 199); /* Added border around header */
    }
/*hover effect */
.social-icon:hover {
    transform: translateY(-5px) scale(1.1);/**/
    filter: brightness(1.2);
    }
/* Smooth transition for the icon itself */
.social-icon .icon {
    width: 55%;
    height: auto;/**/
    transition: all 0.3s ease;
    }
/* Specific hover effects for different platforms */
.social-icon[href*="facebook"]:hover {
   background-color:rgba(0, 0, 0, 0.1);/**/
    }
.social-icon[href*="tiktok"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }
.social-icon[href*="twitter"]:hover, .social-icon[href*="x.com"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }
.social-icon[href*="instagram"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }
.social-icon[href*="linkedin"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }
.social-icon[href*="youtube"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }
.social-icon[href*="pinterest"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }
.social-icon[href*="homify"]:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }

.language-selector {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        
    }
.lang-code {
        font-size: 2vh;
    }
.language-selector:hover {
    transition: all 0.3s ease;
    cursor: pointer;
    transform: translateY(-5px) scale(1.1);/**/
    filter: brightness(1.5);
    }
.user-language {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%; /* Take 50% of the parent container */
    height: 40%; /* Take 50% of the parent container */
    /*border: 2px solid lightgray; /* Added border around header */
    border-radius: 10px; /* Rounded corners */
}
.user-language .icon {
    width: 50%; /* Half of original 20px */
    height: auto; /* Half of original 20px */
}
/******HEADER-END*******/


/******PRGRESSBAR*******/
/* Styles for the progressbar section */
.progressbar {
    height: 7%;
    width: 98%;
    /*padding: 0.5% 0.5%;
    /* Padding inside header */
    display: flex;
    /* Use flexbox for layout */
    flex-direction: row;
    justify-content: space-around;
    /* Space items evenly along the main axis */
    align-items: center;
    /* Center items vertically */
    background-color: white;
    /* Background color of header */
    /*background-color:  rgb(38, 38, 38); /* Background color of header */
    border-top: 2px solid lightgray ;
    border-bottom: 2px solid lightgray ;
    /* Added border around header */
}
.progressbar-content {
    height: 85%;
    width: 90%;
   /* padding: 0.5% 0.5%;*/
    /* Padding inside header */
    display: flex;
    /* Use flexbox for layout */
    flex-direction: row;
    justify-content: center;
    /* Space items evenly along the main axis */
    align-items: center;
    /* Center items vertically */
    /*background-color: rgb(209, 39, 39);
    /* Background color of header */
    /*background-color:  rgb(192, 219, 17); /* Background color of header */
    /*border: 2px solid red ; /* Added border around header */
    }
.horizontal-line-pb {
    width: 5.5%;
    height: 0.1em;  /* Adjust height for line thickness */
    background-color: lightgray;  /* Adjust color as needed */
    margin: 0;  /* Remove default margins */
    }


.horizontal-line-pb.active {
    background-color: black; /* Set your active color */
    }
/* General styling for SVG container */
.svg-container-progressbar {
    height: 90%; /* Adjust height as needed */
    width: auto;  /* Adjust width as needed */
   /* background-color: none;/**/
    stroke: lightgray; /* For the borders */
    fill: lightgray; /* For the text and number */
    /*border: 2px solid red ; /* Added border around header */
    }
.svg-container-progressbar.active {
    stroke: black; /* For the borders */
    fill: black; /* For the text and number */
    /*background: linear-gradient(to right, lightgray 20%, rgba(211, 211, 211, 0) 100%);*/
    }
/* Style for the left vertical black line */
.left-line {
    stroke-width: 7;
    }
/* Style for the outer polyline (polygon shape) */
.outer-shape {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7;
    fill: none;
    }
/* Style for the circle (embedded number) */
.number-circle {
    fill: none;
    stroke-width: 8;
    }
.number-text {
    font-size: 6em; /* Adjust the size of the number */
    text-anchor: middle; /* Center align the text */
    }
/* Style for the text "Pergola Type" */
.text-label-pb {
    font-family: Arial, sans-serif;
    font-size: 3.8em;
    text-anchor: middle;
    }
/******PRGRESSBAR-END*******/


/******CONTAINER*******/
/* Styles for the main container */
.container {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Arrange children vertically if resizing vertically */
    height: 68%;
    min-height: 40%; /* Adjust as needed */
    width: 98%;
    padding: 0.0% 0%; /* Padding inside header */
    /*padding-left: 1%; /***/
    background-color: white; /* Background color for visibility */
    /*border: 2px solid red; /* Added border around header */
    /*box-sizing: border-box; /* Include padding and border in element's total width and height */
    }
/******END-CONTAINER*******/


/******MAIN-CONTAINER*******/
/******MAIN-CONTAINER*******/
/******MAIN-CONTAINER*******/

/* Styles for the main content section */
.main-content {
    flex-direction: column;
    width: 60%;
        min-width: 40%; /* Adjust as needed */
    height: auto;
    padding: 0% 0%; /* Padding inside header */  
    background-color: white; /* Background color of header */
    /*border: 2px solid lightgray; /* Added border around header */
    }

.canvas-container {
    width: 100%;
    height: 100%;
    position: relative;/**/
    overflow: hidden;
    /*border: 2px solid royalblue; /* Added border around header */
    }
#renderCanvas {
    width: 100%;  /* Ensures canvas fills container width */
    height: 100%; /* Ensures canvas fills container height */
    /*display: block; /* Removes any default padding/margin */
    /*border: 2px solid red; /* Added border around header */
}
/******END MAIN-CONTAINER*******/

/******VERTICAL RESIZER*******/
.resizer {
    width: 0.5%; /* Width of the resizer element */
    height: auto;
    cursor: col-resize; /* Set cursor to indicate resizing */
    background-color: lightgray; /* Optional background color */
    z-index: 1000; /* Ensure it's above main content */
  }

  .resizer:hover{
    background-color: darkgray; /* Optional background color */

  }
/******END VERTICAL RESIZER*******/


/******SIDE MENU*******/
/* Styles for the side menu section */
.sidemenu {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    width: 40%;
    min-width: 20%; /* Adjust as needed */
    height: auto;
    /*color: white; /* Text color of menu */
    /*background-color: lightgray; /* Background color of menu */
    /*border: 2px solid rgb(46, 3, 237); /* Added border around header */
    }

/* Styles for the content within the side menu */
.menu-content {
    display: flex; /* Use flexbox for layout */
    flex-shrink:0;/**/
    flex-direction: column; /* Arrange buttons vertically */
    justify-content: flex-start; /* Align buttons to the start (top) */
    width: 75%; /* Adjust as needed */
    min-width:30%;
    height:auto;
    background-color: white; /* Background color of content */
    padding: 0px 3%; /* Padding inside content */
    /* margin-right: 2%; /* Space from menu edge */
    border-right: 0.2em solid lightgray;
    /*border: 2px solid rgb(239, 15, 30); /*Added border around header */
   }
/** **/

/* Styles for the Welcome section */
#menu-content-welcome {
    display: flex; /* Display this content initially */
    overflow: auto;
    align-items: center;
  }

#menu-content-welcome .paragraph {
    display:flex;
    width:100%;
    margin-bottom: 2%;
    /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
}
#menu-content-welcome p {
    margin:0;
    color: black;
    font-size:2.8vh;
     /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }
/** **/

/********************* Type / Structure / Installation *********/
#menu-content-struct {    
    display:flex;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;/* Vertical scrollbar appears when needed */
    /* border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
#menu-content-struct p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }

/* Styles for the text befire buttons */
#menu-content-struct .text-line{
    padding:0;
    margin-right: 0px; /* Adjusted margin between icon and text */
    font-size:2.5vh;
    /*border: 2px solid grey; /* Add border around button */
}
#menu-content-struct .menusubbutton{
    width: 95%; /* Set fixed width to make it square */
    height: 30%; /* Set fixed height to make it square */
    /*border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid red; /* Added border around header */

 }
#menu-content-struct .btn-outline-subbutton{ 
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Center content horizontally */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    width: 45%; /* Set fixed width to make it square */
    height: 95%; /* Set fixed height to make it square */

    padding:0px; /* Padding inside button */
    margin-bottom:0px; /* Space between buttons */
    background-color: white; /* Background color of button */
    color: black; /* Text color of button */
    transition: border 0.3s; /* Smooth transition for background color */
    cursor: pointer; /* Cursor style on hover */
    border-radius: 0px; /* Rounded corners */
    border: 2px solid silver;
    }
#menu-content-struct .btn-outline-subbutton:hover{ 
    border: 2px solid black; /* Add border around button */
    }
#menu-content-struct .btn-outline-subbutton.active{ 
    border: 4px solid black; /* Add border around button */
    }
#menu-content-struct .struct-icon {
    height: 85%; /* Adjust the height of the icons */
    width: 90%; /* Adjust the width of the icons */
    /*border: 2px solid rgb(11, 40, 224); /* Added border around header */
    }

/* Styles for the icon within buttons */
#menu-content-struct .button-text {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    margin-right: 0px; /* Adjusted margin between icon and text */
    font-size:1.9vh;
    /*border: 2px solid grey; /* Add border around button */
}

/*******************END Structure / Installation *********/


/******************* Measures / Dimensions *********/
#menu-content-dim {     
    display:flex;
    justify-content: space-between;
    align-items: center;
    overflow: auto;        /* Vertical scrollbar appears when needed */
    background-color: white;
    /*border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
#menu-content-dim p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /*border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }
#menu-content-dim .row-dim{ 
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:25%;
    border-bottom: 2px solid lightgray;
    /*border: 2px solid red; /* Added border around header */
    }
#menu-content-dim .dim-icon{ 
    width:30%;
    height:85%;
    /* border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
#menu-content-dim .space-dim{ 
    flex-shrink: 0;
    width:30%;
    height:2%;
    /* border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
/* Styles for the content within the side menu */
#menu-content-dim .dimensions-layout {
    display: flex;/* Use flexbox for layout */
    flex-direction: column;/* Arrange buttons vertically */
    justify-content: space-between;/* Align buttons to the start (top) */
    align-items: flex-start;
    width: 60%;/* Adjust as needed */
    background-color: white;
    /*border: 2px solid red; /* Added border around header */
    }
#menu-content-dim .dim-text {
    width: 100%;
    font-weight: bold;/**/
}
#menu-content-dim #dim-x-text p {
    color: #ff0000;
    font-size:2.5vh; 
    }
#menu-content-dim #dim-z-text p {
    color: #0070c0;
    font-size:2.5vh; 
    }
#menu-content-dim #dim-y-text p {
    color: #00af4e; 
    font-size:2.5vh;     
    }

#menu-content-dim .dimensions-layout select {
    width: 95%;
    font-size:2.2vh;

}
/********End Measures / Dimensions************************/




/*************** Shutters / Devices / Features ****************/
#menu-content-shutt {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;        /* Vertical scrollbar appears when needed */
    /* border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
#menu-content-shutt p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }   
/* Styles for the icon within buttons */
#menu-content-shutt .text-line{
    padding:0;
    margin-right: 0px; /* Adjusted margin between icon and text */
    font-size:2.5vh;
    color:black;
    /*border: 2px solid grey; /* Add border around button */
    }
/* Styles for the icon within buttons */
#menu-content-shutt .text-line2{
    padding:0;
    margin-right: 0px; 
    color:black;
    font-size:2.1vh;
    /*border: 2px solid grey; /* Add border around button */
    }
#menu-content-shutt .space-dim{ 
    flex-shrink: 0;
    width:30%;
    height:4%;
    /* border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
 #menu-content-shutt .menusubbutton{
    width: 95%; /* Set fixed width to make it square */
    height: 28%; /* Set fixed height to make it square */
    /* border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid red; /* Added border around header */
    }

 #menu-content-shutt .menusubbutton1{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 95%; /* Set fixed width to make it square */
    height: 28%; /* Set fixed height to make it square */
    /* border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid blue; /* Added border around header */
     }
 #menu-content-shutt .menusubbutton2{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width:50%; /* Set fixed width to make it square */
    height: 90%; /* Set fixed height to make it square */
    /*border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid green; /* Added border around header */
    }

 #menu-content-shutt .menusubbutton3{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Set fixed width to make it square */
    height: 90%; /* Set fixed height to make it square */
    /*border-bottom: 4px solid lightgray; /* Added border around header */
    /* border: 2px solid blue; /* Added border around header */
    }

 #menu-content-shutt .wrapper{
    display:flex;
    justify-content: space-around;
    width:50%;
    /*border: 2px solid blue; /* Added border around header */
    }
    
#menu-content-shutt #operation-mode{
    width: 100%; /* Makes the select element fill the container */
    padding: 0px; /* Optional: for a bit of spacing inside the element */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    font-size: 2vh; /* Change the text size */  
    } 
select, input[type="range"] {
    width: 100%; /* Make the select and range inputs fill the width of their parent */
    /*height: 50%;/***/
    padding: 0px;
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center;
    }

/* Shared styles for both sliders */
.sliderCommon {
    appearance: none;
    height: 2.5vh;
    }
    /* WebKit-based browsers (Chrome, Safari) */
    .sliderCommon::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        width: 100%;
        height: 60%;
        background: lightgray;
        border-radius: 8px;
        border: 2px solid lightgray;
    }
    .sliderCommon::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 2vh;
        height: 2vh;
        margin-top: -0.5vh;
        background: lightgray;
        border-radius: 50%;
        border: 2px solid grey;
        cursor: pointer;
    }
    .sliderCommon:active::-webkit-slider-thumb {
        background: black;
        border: 2px solid black;
    }
    .sliderCommon:hover::-webkit-slider-thumb {
        background: lightgray;
        border: 2px solid black;
    }
    /* Firefox-based browsers */
    .sliderCommon::-moz-range-track {
        width: 100%;
        height: 50%;
        background: lightgray;
        border-radius: 8px;
        border: 2px solid lightgray;
    }
    .sliderCommon::-moz-range-thumb {
        width: 8%;
        height: 80%;
        background: lightgray;
        border-radius: 50%;
        border: 2px solid grey;
        cursor: pointer;
    }
    .sliderCommon:active::-moz-range-thumb {
        background: black;
        border: 2px solid black;
    }
    .sliderCommon:hover::-moz-range-thumb {
        background: lightgray;
        border: 2px solid black;
    }
    /* Edge-based browsers */
    .sliderCommon::-ms-track {
        width: 100%;
        height: 50%;
        background: transparent;
        border-color: transparent;
        color: lightgray;
    }
    .sliderCommon::-ms-thumb {
        width: 10%;
        height: 100%;
        background: lightgray;
        border-radius: 50%;
        border: 2px solid grey;
        cursor: pointer;
    }
    .sliderCommon:active::-ms-thumb {
        background: black;
        border: 2px solid black;
    }
    .sliderCommon:hover::-ms-thumb {
        background: lightgray;
        border: 2px solid black;
    }

#menu-content-shutt .wrapper1{
    display:flex;
    justify-content: space-around;
    width:100%;
    /*border: 2px solid blue; /* Added border around header */
    }


#menu-content-shutt .btn-outline-subbutton{ 
    display: flex; /* Use flexbox for layout */
    justify-content: flex-start; /* Center content horizontally */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    width: 38%; /* Set fixed width to make it square */
    height: 85%; /* Set fixed height to make it square */
    padding:0px; /* Padding inside button */
    margin-bottom:0px; /* Space between buttons */
    background-color: white; /* Background color of button */
    color: black; /* Text color of button */
    border: 2px solid silver;
    cursor: pointer; /* Cursor style on hover */
    border-radius: 0px; /* Rounded corners */
    transition: border 0.3s; /* Smooth transition for background color */
    /*border: 2px solid blue; /* Added border around header */
 }

 #menu-content-shutt .btn-outline-subbutton:hover{ 
    border: 2px solid black; /* Add border around button */
    }
#menu-content-shutt .btn-outline-subbutton.active{ 
    border: 4px solid black; /* Add border around button */
    }

#menu-content-shutt .struct-icon{
    height: 85%; /* Adjust the height of the icons */
    width: 90%; /* Adjust the width of the icons */
    /*border: 2px solid rgb(11, 40, 224); /* Added border around header */
    }
#menu-content-shutt .struct-icon2{
    height: 80%; /* Adjust the height of the icons */
    width: 100%; /* Adjust the width of the icons */
    margin-bottom:2%;
    /*border: 2px solid rgb(64, 224, 11); /* Added border around header */
    }
#menu-content-shutt .struct-icon3{
    height: 80%; /* Adjust the height of the icons */
    width: 30%; /* Adjust the width of the icons */
    /* border: 2px solid rgb(64, 224, 11); /* Added border around header */
    }

/* Styles for the icon within buttons */
#menu-content-shutt .button-text {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center content vertically */


    height:10%; /* Adjust the height of the icons */
    width: 90%; /* Adjust the width of the icons */
    /*margin-bottom: 2%; /* Adjusted margin between icon and text */
    /*border: 2px solid grey; /* Add border around button */
    font-size:1.9vh;
}

/************END  Shutters / Devices / Features ****************/

/************ Color Configuration / Palette ****************/
#menu-content-color {
    display:flex;
    justify-content: space-between;
    align-items: center;
    overflow: auto;        /* Vertical scrollbar appears when needed */
   /* border: 2px solid rgb(21, 42, 235); /* Added border around header */
    }
#menu-content-color p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }
#menu-content-color .row-space-color{
    display: flex; /* Use flexbox for layout */
    flex-direction: row;  /* Arrange buttons vertically */
    justify-content: space-between; /* Align buttons to the start (top) */
    align-items: center;
    width: 100%;  /* Adjust as needed */
    background-color: white; /* Background color of content */
    padding: 0px 0px; /* Padding inside content */
    margin-bottom: 0px;
    border-bottom: 2px solid lightgray;
    /*border: 2px solid rgb(245, 24, 234); /*Added border around header */
}
/* Styles for the icon within buttons */
#menu-content-color .text-line{
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 38%;
    padding:0;
    margin-right: 0px; /* Adjusted margin between icon and text */
    font-size:2.5vh;
    color: Black;/**/
    /*   border: 2px solid grey; /* Add border around button */
}   

#menu-content-color .color-icon{
    width: 80%; /* Adjust the width of the icons */
    /*height: 10%; /* Adjust the height of the icons */
    /*border: 2px solid rgb(11, 40, 224); /* Added border around header */
    }
/* Styles for the icon within buttons */
#menu-content-color .button-text {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    font-size:2.8vh;
    height:10%; /* Adjust the height of the icons */
    width: 60%; /* Adjust the width of the icons */
    margin-right: 0px; /* Adjusted margin between icon and text */
    /*border: 2px solid grey; /* Add border around button */
    }
#menu-content-color .custom-select-container {
    position: relative;
    display: inline-block;
    width: 60%;
    /*border: 2px solid grey; /* Add border around button */
    }
#menu-content-color .custom-select {
    display: flex;
    flex-direction:row;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 5px;
    color: black; /* Text color for the dropdown button */
    font-size:2.3vh;
    }
#menu-content-color .custom-select-options {
    display: flex;
    position: absolute;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    border: 1px solid grey;
    border-radius: 5px;
    margin-top: 5px;
    z-index: 1;
    width: 100%;
    color: black; /* Text color for the dropdown button */
    font-size:2.1vh;
    /*border: 2px solid grey; /* Add border around button */
    }
#menu-content-color .custom-select-options div {
    padding: 2%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    }
#menu-content-color .custom-select-options div:hover {
    background-color: lightgray;
    }
#menu-content-color .color-swatch {
    width: 40%;
    height:1.9vh;
    margin-right: 4%;
    border: 1px solid black;/**/
    }

.color1 { background-color: #293133; } /* 7016 Sablé (anthracite gray) */
.color2 { background-color: #F6F6F6; } /* 9016 Sablé (white) */
.color3 { background-color: #0A0A0A; } /* 9005 Sablé (black) */
.color4 { background-color: #343A42; } /* Noir 100 Sablé (black) */
/*.color6 { background-color: #e12121; } /* Golden */
.color5 { background-color: #8B4513; } /* Mars Sablé (brown) */
.color7 { background-color: #e9fce3; } /* Clear Water Green */
.color8 { background-color: #d1e0e0; } /* Clear Water Blue */
.color9 { background-color: #f2f2f2; } /* Clear Grey */
.color10 { background-color: #000000; } /* Black */
.color11 { background-color: #437645; } /* Very Dark Green */
/*.color1-1 { background-color: #293133; } /* 7016 Sablé (anthracite gray) */
/*.color2-2 { background-color: #F6F6F6; } /* 9016 Sablé (white) */
/*.color3-3 { background-color: #0A0A0A; } /* 9005 Sablé (black) */
/*.color4-4 { background-color: #343A42; } /* Noir 100 Sablé (black) */
/*.color5-5 { background-color: #8B4513; } /* Mars Sablé (brown) */
/*********END Color Configuration / Palette ****************/


/********* Photo / Characters ****************/
#menu-content-opt {
    display:flex;
    justify-content: space-between;
    align-items: center;
    overflow: auto;/* Vertical scrollbar appears when needed */
    /*border: 2px solid rgb(232, 66, 199); /* Added border around header */
    }
#menu-content-opt p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }

/* Styles for the icon within buttons */
#menu-content-opt .text-line{
    width: 100%;
    justify-content: center;
    align-items: center;
    padding:0;
    margin-right: 0px; /* Adjusted margin between icon and text */
    font-size:2.5vh;
    color:black;
    /* border: 2px solid grey; /* Add border around button */
    }
/* Hide the default checkbox */
#menu-content-opt .chk-obj{
    display: none;
    }
/* Create a custom checkbox */
#menu-content-opt .check-position {
    width: 100%;
    height:3.7vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
   /*border: 2px solid grey; /* Add border around button */
    }
/* Create a custom checkbox */
#menu-content-opt #text-obj-select {
    display: flex;
    align-items: center;
    cursor: pointer;
    }
.custom-checkbox {
    width: 2vh;         /* Customize size */
    height: 1vw;        /* Customize size */
    border: 2px solid silver; /* Border for the checkbox */
    background-color: white;
    border-radius: 0px;  /* Optional: make the checkbox rounded */
    margin-left: 1.2vw;   /* Space between text and checkbox */
    position: relative;
    transition: background-color 0.2s ease;
    }
/* The "checked" state with a custom tick (using ::after) */
.chk-obj:checked + .custom-checkbox {
    background-color: white;   /* Change background color when checked */
    border-color: grey;       /* Optional: change border color */
    }
.chk-obj:checked + .custom-checkbox::after {
    content: '';
    position: absolute;
    left: 30%;         /* Adjusted position for the left side */
    top: 5%;          /* Adjusted position for the top */
    width: 0.25em;       /* Relative width of the checkmark */
    height: 0.6em;       /* Relative height of the checkmark */
    border: solid grey;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);   /* Rotate to form the checkmark */
    display: block;
    }
/* Optional: Hover effect */
.custom-checkbox:hover {
    /*background-color: lightgray;  /* Lighten background on hover */
    border-color: grey;  
    }
/* Styles for the icon within buttons */
#menu-content-opt .input-position{
    display: flex;
    width: 100%;
    height: 10%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:0;
    margin-right: 0px; /* Adjusted margin between icon and text */
   /* border: 2px solid grey; /* Add border around button */
    font-size:2.5vh;
    }
/* Style the custom button */
#menu-content-opt .custom-file-upload {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 80%;
    cursor: pointer;
    background-color: white;
   border: 1px solid grey; /* Add border around button */
    color: black;
    border-radius: 6px;
    font-size:2.0vh;
    }
#menu-content-opt .custom-file-upload:hover{ 
    border: 1px solid black; /* Add border around button */
    background-color: lightgray;
    }
#menu-content-opt input[type="file"] {
    display: none;
    }
/* Style for file name display */
#menu-content-opt #fileNameInput {
    width: 70%;
    height: 60%;
    font-size:2.0vh;
    }
/* Style the custom button */
#menu-content-opt .obj-position{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content: flex-start;
  /*  border: 1px solid black; /* Add border around button */
    }
#menu-content-opt #text-obj-select {
    color: black; /* Text color for the dropdown options */
    font-size:2.1vh;
    }
/*********END Photo / Characters ****************/


/********* Shadow Simulstion ****************/
#menu-content-sim {
    display:flex;
    justify-content: space-between;
    align-items: center;
    overflow: auto; /* Vertical scrollbar appears when needed */
    /*border: 2px solid rgb(232, 66, 199); /* Added border around header */
    }
#menu-content-sim p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /* border: 2px solid rgb(245, 24, 234); /*Added border around header */
}
/* Hide the default checkbox */
#menu-content-sim .chk-obj{
    display: none;
}
/* Create a custom checkbox */
#menu-content-sim .check-position {
    width: 50%;
    height:3.7vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /*border: 2px solid grey; /* Add border around button */
    }
/* Create a custom checkbox */
#menu-content-sim [name="initial"] {
    width: 50%;
    height:3.7vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
   /*border: 2px solid grey; /* Add border around button */
    }
#menu-content-sim .custom-checkbox {
    width: 2vh;         /* Customize size */
    height: 1vw;        /* Customize size */
    border: 2px solid silver; /* Border for the checkbox */
    background-color: white;
    border-radius: 0px;  /* Optional: make the checkbox rounded */
    margin-left: 1.2vw;   /* Space between text and checkbox */
    position: relative;
    transition: background-color 0.2s ease;
    }
/* The "checked" state with a custom tick (using ::after) */
#menu-content-sim .chk-obj:checked + .custom-checkbox {
    background-color: white;   /* Change background color when checked */
    border-color: grey;       /* Optional: change border color */
    }
#menu-content-sim .chk-obj:checked + .custom-checkbox::after {
    content: '';
    position: absolute;
    left: 30%;         /* Adjusted position for the left side */
    top: 5%;          /* Adjusted position for the top */
    width: 0.25em;       /* Relative width of the checkmark */
    height: 0.6em;       /* Relative height of the checkmark */
    border: solid grey;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);   /* Rotate to form the checkmark */
    display: block;
    }
/* Optional: Hover effect */
#menu-content-sim .custom-checkbox:hover {
    /*background-color: lightgray;  /* Lighten background on hover */
    border-color: grey;  
    }
#menu-content-sim #text-obj-select {
    display: flex;
    align-items: center;
    cursor:pointer;
    margin:0;
    color: black; /* Text color for the dropdown options */
    font-size:2.5vh;
    }
#menu-content-sim .dropdown-container {
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    width:100%;
    margin-bottom: 0%;
    text-align: left;
   /* border: 2px solid grey; /* Add border around button */
    }
#menu-content-sim .dropdown-container label {
    /*margin-right: 5em; /**/
    margin:0;
    width: 40%;
    
    color: black; /* Set the text color to black */
    text-align: left;
    font-size:2.5vh;
   /* border: 2px solid grey; /* Add border around button */
    }
#menu-content-sim .dropdown {
    width: 40%;
    height: 80%;   
    padding-bottom: 2%;
    font-size:2.1vh;
    }
#menu-content-sim .orient-distri{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Set fixed width to make it square */
    /*height: 28%; /* Set fixed height to make it square */
   /* border-bottom: 4px solid lightgray; /* Added border around header */
   /* border: 2px solid red; /* Added border around header */
    }
#menu-content-sim .labelSlider span {
    font-size: 1.9vh; /* Adjust this value to the desired size */
    }
#menu-content-sim .menusubbutton1{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Set fixed width to make it square */
    /*height: 28%; /* Set fixed height to make it square */
    /* border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid rgb(159, 11, 137); /* Added border around header */
    }
/* Styles for the icon within buttons */
#menu-content-sim .text-line2{
    width: 40%;
    padding:0;
    margin-right: 0px; 
    color:black;
    /* Adjusted margin between icon and text */
    /*border: 2px solid grey; /* Add border around button */
    font-size:2.5vh;
    }

#menu-content-sim .wrapper{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color:black;
    /*border: 2px solid grey; /* Add border around button */
    }
#menu-content-sim .menusubbutton2{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Set fixed width to make it square */
    /*height: 28%; /* Set fixed height to make it square */
    /* border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid rgb(11, 16, 159); /* Added border around header */
 }
#menu-content-sim .icon-compas{
    width:20%;
    /*border: 2px solid grey; /* Add border around button */
}

/*********END Shadow Simulstion ****************/


/*********Buttons Menu ****************/
/***** Menu-Buttons/
/* Styles for the buttons within the side menu */
.menu-buttons {
    width: 20%; /* Adjust as needed */
    height:auto;
    min-width: 18%;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange buttons vertically */
    justify-content: flex-start; /* Align buttons to the start (top) */
    background-color:white; /* Background color of buttons */
    overflow: auto;
    /*border: 2px solid rgb(193, 245, 24); /* Added border around header */    
    }
.controlRows {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Arrange buttons vertically */
    justify-content: space-evenly; /* Align buttons to the start (top) */
    align-items: center; /* Center content vertically */
    height:15%;
    width: 100%; /* Adjust as needed */
    min-width: 90%;
    margin:0;
    padding-bottom: 5%;
    background-color:white; /* Background color of buttons */
    /*border: 2px solid rgb(195, 10, 182); /* Added border around header */
    }
.menu-buttons .btn {
    display: flex; /* Use flexbox for layout */
    justify-content: space-evenly; /* Center content horizontally */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    height:85%;
    width:70%;
    background-color:white; /* Background color of buttons */
    color: black; /* Text color of button */
    text-align: end ; /* Center text */
    cursor: pointer; /* Cursor style on hover */
    border-radius: 20%; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition for background color */
    border: 0.15vw solid black; /* Add border around button */
    }
/* Adjust icon styling */
.menu-buttons .icon {
    width: auto; /* Set width of main SVG icon */
    height: 50%; /* Set height of main SVG icon */
    fill: black; /* Fill color of main icon */
    margin-right: 0px; /* Margin between main icon and text */
    }
/* Hover effect for buttons */
.menu-buttons button:hover {
    background-color: lightgrey; /* Change background color on hover */
    color: black; /* Change text color on hover (optional) */
    }
/* Style for the text inside the button */
.menu-buttons .button-text {
    margin-top: 0px; /* Space between the icon and text */
    margin-bottom: 0px; /* Space between the icon and text */
    text-align: center; /* Center the text */
    font-size: 1.5vh; /* Set the font size for the button text */
    color:black;
    }
/* Active button style */
.menu-buttons button.active {
    background-color: silver; /* Background color of the active button */
    color: black; /* Text color of the active button */
}
.menu-buttons .check2-square {
    width: 20%; /* Set width of the SVG icon */
    height: auto; /* Set height of the SVG icon */
    fill:lightgray; /* Fill color of the SVG icon */
    }
/*********END Buttons Menu ****************/
/*****/


/******END MAIN-CONTAINER*******/
/******END MAIN-CONTAINER*******/
/******END MAIN-CONTAINER*******/



/******FOOTER*******/

/* Styles for the footer section */
.footer {
    height: 15%;
    width: 98%;
    min-height: 5%; /* Adjust as needed */ 
    /*padding: 0.5% 0.5%; /* Padding inside header */
    padding-left: 0%;  
    display: flex; /* Use flexbox for layout */
    background-color: white; /* Background color of footer */    
    flex-direction:row;  
    justify-content: space-between; /* Space items evenly along the main axis */
    align-items: center; /* Center items vertically */
    z-index: 1000; /* Ensure it's above main content */
    /*border: 2px solid red; /* Add border around button */
    }
.footer .footerCol{
    height: 100%;
    width: 59%;
    padding: 0.0% 0.0%; /* Padding inside header */
    padding-left: 1%;    
    /*border-right: 2px solid lightgray; /* Add border around button */
    display: flex; /* Use flexbox for layout */
    background-color: white; /* Background color of footer */    
    flex-direction:column;  
    justify-content: flex-start; /* Space items evenly along the main axis */
    align-items:flex-start; /* Center items vertically */
    /*border: 2px solid green; /* Add border around button */
    }
.footer p {
    margin:0;
    color: black;
    font-size:2.8vh;
    padding: 0.5% 0.5%;
    /*border: 2px solid rgb(0, 24, 234); /*Added border around header */
}
.footer0 {
    height: 20%;
    width: 60%;
    padding: 0% 0%; /* Padding inside header */ 
    display: flex;
    flex-direction:row;  
    justify-content: flex-start; /* Space items evenly along the main axis */
    align-items: center;
    border-bottom: 2px solid lightgray;
    /*border: 2px solid rgb(223, 174, 11); /* Add border around button */
    }
.footer0 p {
    margin:0;
    color: black;
    font-size:2.8vh;
    /*border: 2px solid rgb(245, 24, 234); /*Added border around header */
    }

/* Container for currency symbol and price */
.price-display-container {
    display: flex;
    align-items: center;
    height: 4vh;
    margin-left: 30%;
    padding: 0 7%;
   /* background-color: white;*/
    color: black;
    font-size: 2.5vh;
   /* font-weight: bold;*/
   /* border: 2px solid black;*/
   /* border-radius: 0.5vw;*/
    transition: background-color 0.3s;
}

.price-display-container:hover {
    font-weight: bold;
}

/* Currency symbol styling */
#currency-symbol {
    margin-right: 0.2vw;
}

/* Price value styling */
#dynamic-price-display {
    /* If you want different styling for the number itself */
}



.footer .footer-left {
    height: 80%;
    width: 60%;
    padding: 0% 0%; /* Padding inside header */ 
    display: flex;
    flex-direction:row;  
    justify-content: flex-start; /* Space items evenly along the main axis */
    align-items: center;
    /*border: 2px solid rgb(223, 174, 11); /* Add border around button */
    }
.footer-left .menusubbutton3{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 35%; /* Set fixed width to make it square */
    height: 90%; /* Set fixed height to make it square */
    /*border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid blue; /* Added border around header */
    }
.footer-left #action-button{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 35%; /* Set fixed width to make it square */
    height: 90%; /* Set fixed height to make it square */
    /*border-bottom: 4px solid lightgray; /* Added border around header */
    /*border: 2px solid green; /* Added border around header */
    }
/* Styles for the icon within buttons */
.footer-left .text-line2{
    display:flex;
    justify-content: center;
    width: 70%;
    padding:0;
    margin-right: 0px; 
    color:black;
    /*border: 2px solid red; /* Add border around button */
    font-size:2.5vh;
    }
.footer-left .wrapper1{
    display:flex;
    justify-content: space-around;
    width:80%;
    /*border: 2px solid blue; /* Added border around header */
    }
.footer-left .btn {
    display: flex;
    justify-content: space-evenly;/* Center content horizontally */
    flex-direction: column;
    align-items: center;
    width: 4vw;
    height: 6vh;
    background-color: white;
    background-color: white;
    border: 0.18vw solid black;
    color: black;/* Text color of button */
    text-align: end;
    cursor: pointer;/* Cursor style on hover */
    border-radius: 20%;/* Rounded corners */
    transition: background-color 0.3s;
    }    
/* Adjust icon styling */
.footer-left .icon {
    width: auto; /* Set width of main SVG icon */
    height: 50%; /* Set height of main SVG icon */
    fill: black; /* Fill color of main icon */
    margin-right: 0px; /* Margin between main icon and text */
    }
/* Hover effect for buttons */
.footer button:hover {
    background-color: lightgrey; /* Change background color on hover */
    color: black; /* Change text color on hover (optional) */
}
/* Style for the text inside the button */
.footer .button-text {
    margin-top: 0px; /* Space between the icon and text */
    margin-bottom: 0px; /* Space between the icon and text */
    text-align: center; /* Center the text */
    font-size: 1.6vh; /* Set the font size for the button text */
    color:rgb(0, 0, 0);
}

#right{
    height: 100%;
    width: 40%;
    padding: 0.0% 0.0%; /* Padding inside header */  
    border-right: none; /* Add border around button */
    display: flex; /* Use flexbox for layout */
    background-color: white; /* Background color of footer */    
    flex-direction:column;  
    justify-content: flex-start; /* Space items evenly along the main axis */
    align-items:flex-start; /* Center items vertically */
    /*border: 2px solid red; /* Add border around button */
}
#right .footer0 {
    height: 20%;
    width: 100%;
    padding: 0% 0%; /* Padding inside header */ 
    display: flex;
    flex-direction:row;  
    justify-content: flex-start; /* Space items evenly along the main axis */
    align-items: center;
    border-bottom: 2px solid lightgray; /**/
    /*border: 2px solid rgb(223, 174, 11); /* Add border around button */
    }
.footerCol .footer-right {
    display: flex; /* Use flexbox for layout */
    height: 99%;
    width: 100%;
    padding: 0.0% 0.0%; /* Padding inside header */ 
    border:none;
    background-color: white; /* Background color of footer */    
    flex-direction:row;  
    justify-content: flex-start; /* Space items evenly along the main axis */
    align-items: center; /* Center items vertically */
    /*border: 2px solid rgb(223, 174, 11); /* Add border around button */
    }
/* Styles for buttons within the footer */
.footer-button {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    width: 10vw;
    height: 6.5vh;
    padding: 0.4em; /* Padding inside button */
    margin-left: 2%; /* Adjusted margin between buttons */
    background-color: white; /* White background */
    color: black; /* Royalblue text color */
    border: 2px solid black; /* Add border around button */
    cursor: pointer; /* Cursor style on hover */
    border-radius: 1vw; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
    }


/* Styles for the icon within buttons */
.footer-button .icon-container {
    margin-right: 3%; /* Adjusted margin between icon and text */
}
/* Hover effect for buttons */
.footer-button:hover {
    background-color: silver; /* Change background color on hover */
    color: black; /* Change text color on hover */
}

/* Adjust the icon size within button 2 and button 3 */
.footer-button .icon-container img {
    width: 2vw; /* Adjust the width of the icon */
    /*height: 25px; /* Adjust the height of the icon */
    fill: currentColor; /* Ensure the icon inherits text color */
    margin-right: 5px; /* Optional: Adjust margin between icon and text */
}



.resizer-vert {
    /*flex:0.06;*/
    width:98%;
    height: 1%; /* height of the resizer element */
    cursor: row-resize; /* Set cursor to indicate resizing */
    background-color: lightgray; /* Optional background color */
    /*border: 1em solid lightgray; /* Added border around header */
    z-index: 1000; /* Ensure it's above main content */
}
.resizer-vert:hover {
background-color: darkgray; /* Optional background color */    
}

/******END FOOTER*******/



/* Commom Styles -> /* to be improved */

.menusubtitle {  /* to be improved */
    display:flex;
    flex-direction: row; /* Arrange buttons vertically */
    justify-content: space-around;
    align-items: center;
    color:black;
    width:100%;
    /*border: 2px solid green; /* Add border around button */
    }

.menusubbutton {  /* to be improved */
    display:flex;
    flex-direction: row; /* Arrange buttons vertically */
    justify-content: space-around;
    align-items: center;
    /*width:100% /**/ 
    }
 
    /* Hover effect for buttons */
.menusubbutton button:hover { /* to be improved */
    background-color: lightgrey; /* Change background color on hover */
    color: black; /* Change text color on hover (optional) */
}

.horizontal-line { /* looks ok */
    width: 100%;
    height: 0.5%;  /* Adjust height for line thickness */
    background-color: lightgray;  /* Adjust color as needed */
    margin: 0;  /* Remove default margins */
    }


.btn-outline-secondary-down, .btn-outline-secondary-up{
    display: flex; 
    justify-content: flex-start;
    align-items: center;
    border-radius: 15px; /* Add this line for rounded corners */
    margin-top: 1%; /* Add space above the first button */
    margin-bottom: 1%; /* Add space above the first button */
    }

/* Styles for the icon within buttons */
.button-text-sec-down, .button-text-sec-up {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    height:1vh; /* Adjust the height of the icons */
    width: 2.2vw; /* Adjust the width of the icons */
    margin-right: 0px; /* Adjusted margin between icon and text */
    font-size:1.7vh;
    /*border: 2px solid grey; /* Add border around button */
}
   
.icon-sec {
    height: 100%; /* Adjust the height of the icons */
    width: 100%; /* Adjust the width of the icons */
    /* border: 2px solid green; /* Added border around header */
}
 
/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1005; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
}

.error-message {
    color: red;
    margin-top: 10px;
    display: none;
}

.hidden {
    display: none;
  }
  /* CSS to style the disabled state */
.disabled {
    opacity: 0.5;
    pointer-events: none; /* Disables clicking and interaction */
    filter: grayscale(100%); /* Optional: convert to grayscale */
    background-color: #e0e0e0; /* Light grey background */
    opacity: 0.15; /* Lower opacity for a translucent effect */
   /* background-color: red; /* Light grey background */
   cursor: default; /* Default arrow cursor when disabled */
}

.disabled input[type="range"] {
    background-color: #d0d0d0; /* Lighter grey for range sliders */
}

.disabled input[type="checkbox"] {
    pointer-events: none; /* Disable interaction with the checkbox */
    cursor: default; /* Default cursor, not clickable */
  }