/*
	Copyright by Silvia Mazzoni
	silviamazzoni@yahoo.com 
	2024
*/
		*{
			box-sizing: border-box;
			outline: none;
		}
		body {
		  height: 100%;
		  width: 100%;
		  margin: 0;      /* Remove default margin */
		  padding: 0;     /* Remove default padding */
		  overflow: hidden; /* Prevent scrollbars */
		  font-family: 'Lato', sans-serif;
		  background-color: rgba(0, 0, 0, 0.0) /* black; /* #111;*/
		  border-collapse: collapse;
		}
		
		.plotly .modebar-btn {
		    pointer-events: auto !important;
		}
		
		.plotly .modebar {
		    z-index: 10000 !important;
		    position: absolute;
		    right: 0px !important; /* Ensures the modebar is aligned to the right */
		    top: 0px;		    
		}		
	
		
        table {
            /*width: 100%;*/
            border-collapse: collapse;
        }		
		
	    .uppercase-text {
	        text-transform: uppercase;
	    }
	    
	    
	    .rotate-text {
            transform: rotate(180deg); /* Rotate text by 90 degrees */
            /*writing-mode: horizontal-tb; /* Ensure text stays horizontal after rotation */
            
            white-space: nowrap; /* Prevents text from wrapping */
            writing-mode: vertical-rl; /* Optional: ensures the text flows top to bottom */
            
            text-align: left; /* Centers text within the cell */
            vertical-align: top; /* Centers text vertically in the cell */
            /*height: 100px; /* Adjust height to fit rotated text */
        }
        
		.bottom {
            position: fixed; /* Fix to the bottom of the screen */
            bottom: 10;       /* Align with the screen bottom */
            white-space: nowrap; /* Prevent text from wrapping */
        }        
        
	    .labelle {
		    font-size: 0.75em;
		    font-weight:bold;
		    /*padding: .05em 1em;*/
		    margin:0px 0px 0px 0px ;
		    /*top: -15px;*/
	    }
		
		
		.sidenav {
		  /*height: 100%;*/
		  /*width: 0;*/
		  position: fixed;
		  z-index: 1;
		  top: 0;
		  left: 0;
		  background-color: black; /* #111;*/
		  overflow-x: hidden;
		  /*transition: 0.25s;*/
		  /*padding-top: 10px;*/
		  font-size: 12px;
		  color: #818181;
		}
		
		.sidenav .closebtn {
		  /*position: absolute;*/
		  /*top: 0;*/
		  color: #FEFCFF;
		  /*right: 5px;*/
		  font-size: 22px;
		  /*margin-left: 10px;*/
		  background-color: black; /* #111;*/
		}
		
		.sidenav .openbtn {
		  /*position: absolute;*/
		  /*top: 0;*/
		  color: white;
		  /*right: 5px;*/
		  font-size: 22px;
		  /*margin-left: 10px;*/
		  background-color: black; /* #111;*/
		}
		
		.sidenav .closebtnzoom {
		  position: absolute;
		  top: 0;
		  color: #FEFCFF;
		  /*right: 5px;*/
		  font-size: 22px;
		  /*margin-left: 10px;*/
		  background-color: black; /* #111;*/
		}
		
        
		/* General styles for larger screens */
		
		/* Smaller screens: Adjust height constraints */
		@media screen and (max-height: 450px) {
		    .sidenav {
		        padding-top: 5px;
		        width: 100%; /* Full width for narrow screens */
		    }

		
		    #mainDiv {
		        margin: 0; /* Remove extra margins */
		        border-width: 0px; /* Thinner borders */
		    }
		}
		
		/* Very small devices: Handle narrow widths */
		@media screen and (max-width: 768px) {
		    .sidenav {
		        width: 100%; /* Ensure full width for usability */
		    }
		

		}
		
		
		/* Use CSS variables for consistency */
		:root {
		    --graph-height-small: 60vh;
		    --graph-height-large: 80vh;
		}


		
		
		img {
			border-radius: 10px;

		}
		
        /* Hide the default radio button */
        input[type="radio"] {
            display: none;
        }

        /* Style for label to make it look clickable */
        .radio-label {
         /*   display: inline-block;*/
            margin: 0px;
            cursor: pointer;
            text-align: center;
        }

        /* Styling the selected image */
        .radio-label img {
            /*width: 50px;*/
            height: 50px;
            border: 2px solid transparent;
            transition: border 0.3s ease;
            border-radius: 3px;
        }
        
        .radio-label-small-noshadows img {
            /*width: 50px;*/
            /*height: 40px;*/
            border: 2px solid transparent;
            transition: border 0.3s ease;
            border-radius: 3px;
        }
        

        /* Highlight selected option */
        input[type="radio"]:checked + .radio-label img {
            border-color: red; /* Color to indicate selection */
            box-shadow: 0 2px 4px 0 yellow, 0 2px 10px 0 red   /* 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19) */
        }

        input[type="radio"]:checked + .radio-label-small-noshadows img {
        }

        /* Caption styling */
        .radio-label figcaption {
            margin-top: 2px;
            font-size: 14px;
            color: #333;
        }		
        
				/* Style for a regular button */
				button {
				    background-color: rgba(255,255,255,0.002); /* linear-gradient(to bottom, #f3f3f3, #dcdcdc); /* Light to dark gradient */
				    color: #f78ddb;              /* White text color */
				    padding: 0px 5px 0px 5px;        /* Top/bottom and left/right padding */
				    margin: 0px 5px;        /* Top/bottom and left/right padding */
				   /* border: 1px black solid;              /* No border */
				   /* border-radius: 10%;        /* Rounded corners */
				    font-size: 0.9em;           /* Font size */
				    cursor: pointer;           /* Pointer cursor on hover */
				    /*box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), /* Inner top highlight */
                	/*	inset -1px -1px 0 rgba(0, 0, 0, 0.2);     /* Inner bottom shadow */
    				transition: background 0.2s ease; /* Smooth transition */
				}
				
				/* Optional pressed effect when clicking */
				button:active {
				 /*   background: linear-gradient(to bottom, #dcdcdc, #f3f3f3); /* Reverse gradient */     
				 /*   box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2), /* Slightly darken top edge */
				 /*               inset -1px -1px 0 rgba(255, 255, 255, 0.6); /* Lighten bottom edge */
				}				
				
				/* Optional hover effect */
				button:hover {
				    background-color: darkgrey'; #45a049; /* Darker green on hover */
				}
				
				/* Optional focus effect */
				button:focus {
				    outline: none;             /* Remove outline */
				    box-shadow: 0 0 5px #4CAF50; /* Add shadow for focus */
				}
				
				/* Optional disabled style */
				button:disabled {
				    background-color: #ccc;    /* Gray background */
				    color: #666;               /* Dark gray text */
				    cursor: not-allowed;       /* Change cursor to indicate it's disabled */
				}
				        
        .flat-button {
            border: none;               /* No border */
			padding: 0px 10px 0px 10px;        /* Top/bottom and left/right padding */
            font-size: +1.5em;           /* Font size */
            cursor: pointer;           /* Pointer cursor on hover */
            border-radius: 4px;        /* Slightly rounded corners */
            transition: background-color 0.3s; /* Smooth hover transition */
            user-select: none;         /* Prevent text selection */
        }

        .flat-button:hover {
            background-color: #0056b3; /* Darker shade on hover */
        }

        .flat-button:focus {
            outline: none; /* Remove focus outline */
        }
        /* Disable pressed effect */
    /*    .flat-button:active {
    /*        border: none;               /* No border */
   /*         transform: none;            /* No scaling or movement */
   /*         background-color: rgba(255,255,255,0.002); /* linear-gradient(to bottom, #f3f3f3, #dcdcdc); /* Light to dark gradient */
   /*     }         */
        
                
        .rounded-image {
		    border-radius: 15px; /* Adjust the value for more or less rounding */
		}
		
        .topbutt {
            background-color: green; /*rgba(55,55,55,0.002);*/
            float: right; /* Text color */
            color: red; /* Text color */
            border: none; /* Remove border */
            padding: 0px /*10px 20px; /* Add some padding */
            border-radius: 0px; /* Slightly rounded corners */
            cursor: pointer; /* Pointer cursor on hover */
            font-size: 16px; /* Set font size */
            outline: none; /* Remove outline */
            box-shadow: none; /* Remove any shadow */
            transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
        }
		
		
        flat-xxx-button {
            background-color: green; /*rgba(55,55,55,0.002);*/
            float: right; /* Text color */
            color: red; /* Text color */
            border: none; /* Remove border */
            padding: 0px /*10px 20px; /* Add some padding */
            border-radius: 0px; /* Slightly rounded corners */
            cursor: pointer; /* Pointer cursor on hover */
            font-size: 16px; /* Set font size */
            outline: none; /* Remove outline */
            box-shadow: none; /* Remove any shadow */
            transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
        }
		
        .flat-white-button {
            background-color: rgba(55,55,55,0.002);
            color: #333; /* Text color */
            border: none; /* Remove border */
            padding: 0px /*10px 20px; /* Add some padding */
            border-radius: 4px; /* Slightly rounded corners */
            cursor: pointer; /* Pointer cursor on hover */
            font-size: 16px; /* Set font size */
            outline: none; /* Remove outline */
            box-shadow: none; /* Remove any shadow */
            transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
        }
        

        .flat-white-button:hover {
            /*background-color: #f0f0f0; /* Light grey background on hover */
        }

        .flat-white-button:active {
            /*background-color: #e0e0e0; /* Slightly darker grey when pressed */
        } 
        
        
        
        .slider-label {
		    font-size: 1rem;
		    /*font-family: Arial, sans-serif;*/
		    margin-bottom: 5px;
		    color: #333;
		    display: block;
		    padding: 0x;
		}
        
		
		
		
		
        .custom-slider {
		    -webkit-appearance: none;
		    /*width: 80%;*/
		    height: 5px;
		    /*border-radius: 2px;*/
		    background: #d3d3d3;
		    outline: none;
		    opacity: 0.9;
		    transition: opacity 0.2s;
		    margin: 5px 0;
		}
		
		.custom-slider:hover {
		    opacity: 1;
		}
		
		.custom-slider::-webkit-slider-thumb {
		    -webkit-appearance: none;
		    appearance: none;
		    width: 7px;
		    height: 10px;
		    border-radius: 50%;
		    background: #333;
		    cursor: pointer;
		    border: 0px solid #999;
		    padding: 0x;
		    transition: background 0.2s, border-color 0.2s;
		}
		
		.custom-slider::-webkit-slider-thumb:hover {
		    background: #555;
		    border-color: #666;
		}
		
		.custom-slider::-moz-range-thumb {
		    width: 10px;
		    height: 10px;
		    border-radius: 50%;
		    background: #333;
		    cursor: pointer;
		    border: 0px solid #999;
		    transition: background 0.2s, border-color 0.2s;
		}
		
		.custom-slider::-moz-range-thumb:hover {
		    background: #555;
		    border-color: #666;
		}
		
		.slider-value-label {
		    display: inline-block;
		    font-size: 0.75rem;
		    color: #333;
		    margin-left: 5px;
		    margin-top: 2px;
		    /*font-family: Arial, sans-serif;*/
		}
		.slider-value-label-vertical {
		    display: inline-block;
		    font-size: 1rem;
		    color: #333;
		    margin-left: 5px;
		    margin-top: 5px;
		    transform: rotate(-90deg); /* Rotate for vertical orientation */
		    /*font-family: Arial, sans-serif;*/
		}
		
		
		.slider-value-input {
		    margin-left: 10px;
		    width: 100px;
		    font-size: 1rem;
		    font-family: Arial, sans-serif;
		    padding: 2px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		}

		
		
		/* for color swatches */
		/*select {
            padding: 5px;
            font-size: 16px;
        }
        option {
            padding: 5px;
        }*/

		/* Hide the triangle only for <details> with the "no-toggle" class */
		details.no-toggle summary {
		    list-style: none;
		}
		
		/* Optional: Make the summary for "no-toggle" look normal */
		details.no-toggle summary {
		    cursor: default; /* No pointer cursor */
		    user-select: none; /* Prevent text selection */
		}		
        
        
        
        
        .hover-details {
		    cursor: pointer;
		}
		
		/* Open the details when hovered */
		.hover-details:hover, .hover-details[open] {
		    open: true; /* This is pseudo; behavior is styled using appearance */
		}
		
		/* Force details to stay open when hovered */
		.hover-details:hover summary::after {
		    content: '\25B2'; /* Change the arrow to indicate the expanded state */
		}
		
		.hover-details summary::after {
		    content: '\25BC'; /* Default arrow pointing down */
		    margin-left: 5px;
		}
		
		.hover-details[open] summary::after {
		    content: '\25B2'; /* Arrow pointing up when open */
		}
		
		
        /* Switch container -- True/False*/
        .switch-container {
            display: flex;
            align-items: center;
        /*    margin: 10px 0;/
        }

        /* Custom switch styling */
        .switch {
            position: relative;
            display: inline-block;
            width: 35px;
            height: 10px; /* orig 24*/
        }

        /* Hide the default checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        

        /* Slider styling */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 24px;
        }

        /* Slider when checked */
        .slider:before {
            position: absolute;
            content: "";
            height: 10px; /* orig 18*/
            width: 10px; /* orig 18*/
            left: 2px;
            bottom: 1px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        /* Move slider when checked */
        input:checked + .slider {
            background-color: green;
        }

        input:checked + .slider:before {
            transform: translateX(20px);
        }

        /* Label for true/false state */
        .label-text {
            margin-left: 10px;
        }		
        
        
        /* Styling for the container */
        .swipe-container {
            width: 100%;
            overflow-x: auto; /* Enable horizontal scrolling */
            white-space: nowrap; /* Prevent buttons from wrapping */
            border: 1px solid #ddd;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            gap: 10px; /* Space between buttons */
            scroll-behavior: smooth; /* Smooth scrolling */
        }

        /* Styling for buttons */
        .swipe-container button {
            padding: 10px 20px;
            font-size: 16px;
            border: 1px solid #ccc;
            background-color: #f5f5f5;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .swipe-container button:hover {
            background-color: #ddd;
        }