.box select {
    background-color: #F4F1DE;
    padding: 8px;
    margin: 01px;
    border-radius: 11px;
    display: inline-block;
    height: 230px; /* Fixed height */
    overflow-y: auto; /* Vertical scrolling */
}

.box select option {
    padding: 2px;
 }

.box select option:checked {
    
    color: black; /* Text color for selected option */
}

.box select option:not(:checked) {
    background-color: F4F1DE; /* Reset background for unselected options */
}

div {
	padding: 2px;
	margin: 01px;
        border-radius:10px;
        display:inline-block;
        overflow:hidden;
        background:#49435C;
        border:1px solid #49435C;	

	
}

label{
	color:#EDEDF8;
	font-size:12px;
	font-weight: bold;
	font-family: Poppins, sans-serif;
 	
}



img {
    padding: 1px;
    width: 38px;
    height: 38px;
   
}

div.d {
  	text-align: justify;
	color:#EDEDF8;
	font-size:12px;
	font-weight: bold;
	font-family: Poppins, sans-serif;

} 



.title{
	color:#FFD401;
	font-size:14px;
	font-weight: bold;
	font-family: Poppins, sans-serif;

}

option,textarea {
	padding:2px;
	color:#000000;
	font-size:14px;
	font-weight: bold;
	font-family: Poppins, sans-serif;
	border-radius:3px;
      	border:#0F0801; 	

}

input {
       border:2px solid;
       font-size: 12px;
       margin: 0.20rem;
       padding: 0.1rem;
       font-weight: bold;
       font-family: Poppins, sans-serif;
       transition: border-color 0.5s ease-out;
       border-radius:5px;
}

input:optional {
  	border-color: gray;
  	background-color:red;
}

input:required:valid {
  	border-color: green;
  	background-color:#CCFFBC;
}

input:invalid {
  	border-color: #E75830;  
}
select {
	width: 600px;	
}

textarea {
	width: 1200px;
	height: 110px;
}



:root
{
--body-color:#cccccc;
--scrollbar-color:#FFD401;
--notepad-header: rgba(36, 116, 7, 0.8);
 
}

*{margin: 0; padding: 0; box-sizing: border-box; font-size: 12px; font-family: Poppins, sans-serif; border: none;}

body{
	min-height: 100vh; 
	background-color: var(--body-color); 
	height: 100vh; width: 100%; 
	margin:auto; 
	overflow-x: hidden;

}

::selection {color: white;background: var(--notepad-header);}
a {color: var(--text-color);}
a: hover{color: var(--hover-color);}
em {font-size: .7em;
}


::-webkit-scrollbar{width:.3em;height: .7em;cursor: pointer;}
::-webkit-scrollbar-thumb:vertical{height: 10px;background-color: var(--scrollbar-color);border: 1px solid transparent;-webkit-border-radius: 16px;}

/* CSS */

.subadd {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

 

}

.subadd-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background:#000000;
  will-change: transform;
  transform: translateY(2px);
  transition:
    transform
    600ms
  
}

.subadd-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    #000000 20%,
    #cccccc 8%,
    #000000 92%,
    #cccccc 100%
  );
}

.subadd-front {
  display: block;
  position: relative;
  border-radius: 12px;
  font-size: 1rem;
  color: white;
  background:#000000;
  will-change: transform;
  transform: translateY(-4px);
  transition:
    transform
    600ms
       ;
}

@media (min-width: 768px) {
  .subadd-front {
    font-size: 1rem;
    padding: 8px 30px;
font-weight: bold;
font-family: Poppins, sans-serif;
  }
}

.subadd:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

.subadd:hover .subadd-front {
  transform: translateY(-6px);
  transition:
    transform
    250ms
     
}

.subadd:active .subadd-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.subadd:hover .subadd-shadow {
  transform: translateY(4px);
  transition:
    transform
    250ms
  
}

.subadd:active .subadd-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.subadd:focus:not(:focus-visible) {
  outline: none;
}


/* Button used to open the contact form - fixed at the bottom of the page */
/* The popup form - hidden by default */

.form-popup {
  display: none;
  position: fixed;
  bottom: 300px;
  right: 430px;
  border: 2px solid #F57F20;
  z-index: 9;
}

/* Hide Button */
.hidden {
            display: none;
        }


/* Developer */

footer {
            margin-top: 50px;
            border-top: 1px solid #ccc;
            padding-top: 20px;
        }


table, th, td {
 /*border: 1px solid white;*/
}