#sddm
	{	margin: 0;
		padding: 0;
		}

	#sddm li
	{	margin: 0;
		padding: 0;
		list-style: none;
		float: left;
		font: bold 14px calibri;}

	
		
	#sddm li a
	{	display: block;
		margin: 0 1px 0 0;
		padding: 5px 20px;
		width: 60px;
		background: #05605c;
		color: white;
		text-align: center;
		text-decoration: none}

	#sddm li a:hover
	{	background: orange;
		color: black;}	

	#sddm div
	{	position: absolute;
		visibility: hidden;
		margin: 0;
		padding: 0;
		background: #359d98;
		border: 1px #359d98}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 20px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #05605c;
		color: white;
		font: bold 14px calibri;
		font-bold:true;}

	#sddm div a:hover
	{	background: #359d98;
		color: black;}


	#myboard
	{
	font: bold italic 20px calibri;
	color: white;
	
	background-image: linear-gradient(241deg, rgba(18, 99, 158, 0.15) 0%,rgba(28, 247, 0, 0.15) 100%),linear-gradient(194deg, rgb(223, 130, 32),rgb(244, 244, 132));
	}

	#myhead
	{
	font: bold italic 18px calibri;
	color: white;
	background: #0c68a9;
	border-style:thin;
	border-width:1px;
	border-color:white;
	border-radius: 5px;
	border: 1px solid black;	
	}

 	#mylabel
	{
	font: bold  14px calibri;
	color: black;
	background: #6f828340;
	border-radius: 5px;
	border: 1px solid green;

	}
	
	#myhead1
	{
	font: bold italic 16px calibri;
	color: white;
	background: #505b19;
	border-style:thin;
	border-width:1px;
	border-color:white;
	}

 	#mylabel1
	{
	font: bold  14px calibri;
	color: black;
	background: #48b1bf2e;
	}
	
	

	#hsn
	{
	font: bold  14px calibri;
	}
    #hr {
	border:none;
	
	border:3px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	
	}
	
	#bg-img {
  /* The image used */
  background-image: url("./images/SCBC ORIGINAL LOGO.png");

  /* Control the height of the image */
  min-height: 50px;

  /* Center and scale the image nicely */
  background-position: auto;
  background-repeat: no-repeat;
  
  filter: alpha(opacity=10);
 
  style : opacity:0.4px;
     

  width: 1023;
  height:585;  
}
  
   #submit input[type=submit] {
  width: 15%;
  background-color: #4CAF50;
  color: white;
  padding: 8px 3px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
 #button  {
  width: 15%;
  background-color: #4CAF50;
  color: white;
  padding: 8px 3px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 #button1 {
  width: 20%;
  background-color: #f44336;
  color: white;
  padding: 8px 3px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 #button2 {
  width: 100%;
  background-color: #008CBA;
  color: white;
  padding: 8px 3px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}




   #submit input[type=submit]:hover {
  background-color: #45a049;
}
 
   
   /* blink style for mandatory fields*/
    #blinkimp {
    animation: blinker 1s step-end infinite;
    }
    @keyframes blinker {
    50% {
        opacity: 0;
    }
}
   
   
   #tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
   }

  #tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  }

  #tooltip:hover .tooltiptext {

  visibility: visible;
   }
 
 
/* MAIN TABLE */
#mytable {
    width: 100%; /* Ensures table spans the full screen width */
    max-width: 100%; /* Prevents the table from exceeding the screen width */
    border-collapse: collapse;
    font-size: 14px; /* Keeps font size readable */
    margin: 0 auto; /* Centers the table */
    table-layout: auto; /* Automatically adjusts column widths based on content */
}

#mytable th, #mytable td {
    border: 1px solid black;
    padding: 4px; /* Small padding for compact cells */
    word-wrap: break-word; /* Ensures long words wrap */
    max-width: 100px; /* Sets a max-width for word wrapping */
    overflow-wrap: break-word; /* Breaks long words for better fit */
    text-align: left; /* Aligns text to the left for better readability */
    vertical-align: top; /* Aligns cell content to the top */
}

#mytable td {
    height: auto; /* Allows height to adjust dynamically based on content */
}

#mytable tr:hover {
    background-color: coral;
}


    #progress-bar-file1-container {
      width: 200px;
      height: 20px;
      border: 1px solid #ccc;
      margin-top: 20px;
    }

    #progress-bar-file1 {
      width: 100%;
      height: 100%;
      background-color: #4CAF50;
      text-align: center;
      line-height: 20px;
      color: white;
	  
    }

    #container {
      border: 1px solid #000;
      padding: 10px;
      max-width: 500px;
      margin: 0 auto;
      margin-top: 50px;
    }