@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  --melocolor: rgb(254,80,0); /*this is the pantone 021*/
  --txtcolor: rgb(132, 128, 133);
  --linecolor: rgb(208,233,220);
  --placecolor: rgb(27, 136, 161);
  --fontsize: 1.2rem;
  --fontsizeh3: 1.4rem;
  --melobabes: rgb(193,217,209);
  --melobabes_color:rgb(250,103,194);
  --oncology: rgb(68,117,147);
  --melo24: rgb(244,130,33);
  --orthopaedics: rgb(61,163,164);
  --melohearts: rgb(136,208,200);
  --melominds: rgb(102,99,98);
  --renalcare: rgb(93,137,161);
  --melocares: rgb(255,81,0);
  --header_color:rgb(102, 102, 102);
} 

.main_container{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	width:100%;
	gap:15px;
	border:0px solid green;
}

.main_container_item{
width:100%;
border:0px solid red;

}


.grid-container{
	display:grid;
	grid-template-columns:repeat(8, 1fr);
	width:100%;
	gap:15px;
	margin-top:30px;
}

.grid-item{
	border:0px solid hotpink;
	width:100%;
}

.grid-item-span2{
	grid-column:span 2;
	border:0px solid lime;
	position:relative;
}

.grid-item-span3{
	grid-column:span 3;
	border:0px solid lime;
	position:relative;
}

.grid-item-span4{
	position:relative;
	grid-column:span 4;
	border:1px solid green;
}

.grid-item-span5{
	position:relative;
	grid-column:span 5;
	border:0px solid green;
}

.grid-item-span6{
	position:relative;
	grid-column:span 6;
	border:0px solid green;
}

.grid-item-span8{
	grid-column:span 8;
	border:0px solid red;
}



.images_overlay{
	z-index:10;
	width:100%;
	height:380px;
	position:relative;
	top:0;
	left:0;
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,.5) 100%);
	border-radius:10px;
	object-fit:cover;
}






.logo{
	position:absolute;
	top:0;
	right:20px;
	display:inline-block;
	float:right;
	width:200px;
	vertical-align:top;
}

h1{
	display:inline;
	font-weight:500;
	padding:20px 0;
}
h2{
	display:inline;
	font-weight:500;
	padding:20px 0;
	font-size:1.2rem;
}

p{
	display:inline;
	color:var(--txtcolor);
	padding:20px 0;
}

a{text-decoration:none;}

.images_overlay h2{
		position:absolute;
		top:10px;
		left:10px;
		color:white;
		font-size:1.3rem;
		font-weight:400;
}
.images_overlay p{
		position:absolute;
		top:15%;
		left:10px;
		color:white;
		font-size:1.4rem;
		font-weight:300;
		width:100%;
		border:0px solid lime;
		letter-spacing:3px;
}

.images_overlay .btn{
	position:absolute;
	bottom:15px; 
	right:15px;
	text-decoration:none;
	font-size:1rem;
	padding:4px 8px;
	background-color:transparent;
	color:white;
	cursor:pointer;
	border-radius:10px;
	border:1px solid white;
	transition:1s;
	animation-delay: 1.6s;
}

.images_overlay .btn:hover{
	background-color:var(--txtcolor);
	color:white;
	border:1px solid var(--txtcolor);
	border-radius:20px;
}

.images_overlay img{
	width:100%;
	border-radius:10px;
}

.img{
	width:100%;
	border-radius:10px;
	
}


 .customfileinput {
    content: 'Choose File';
    display: inline;
    background-color: steelblue; 
    color:white;
    margin:0;
    border-radius: 6px;
    padding: 10px 6px 6px 10px;
    outline: none;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 1rem;
	width:100%;
  }
  .customfileinput:hover {
    background-color: var(--melocolor);
  }
  
  .form_btn{
	  background-color:steelblue;
	  width:250px;
	  font-size:1rem;
	  color:white;
	  cursor:pointer;
   padding: 8px 6px 6px 8px;	
outline:none;
border:none;
border-radius:6px;   
transition:1s;
  }
    .form_btn:hover {
    background-color: var(--melocolor);
  }
  
 .button{
	background-color:steelblue;
	font-size:1rem;
	color:white;
	cursor:pointer;
	padding: 6px 10px 6px 10px;	
	outline:none;
	border:none;
	border-radius:6px; 
	transition:1s;
 }
 
 .button2{
	background-color:limegreen;
	font-size:1rem;
	color:white;
	cursor:pointer;
	padding: 6px 10px 6px 10px;	
	outline:none;
	border:none;
	border-radius:6px;
	transition:1s;	
 }
 .button:hover, .button2:hover{
	 background-color:white;
	 border:1px solid grey;
	 color:black;
 }
 
  
 .blah_img{
	 width:50%;
 } 
 
 
 
 
 
 
 
 
 
  
 table{
	 width:100%;
	 border:1px solid grey;
	 border-radius:20px;
	 padding:6px;
 }
 
 td{
	 border-bottom:1px solid ghostwhite;
	 padding:6px;
 }
 
 .desc_txt{
	 font-size:0.85rem;
	 color:orangered;
 }
 
 input[type='text']{
	 width:100%;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:3px 5px;
 }
  input[type='date']{
	 width:100%;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:3px 5px;
 }
 
  input[type='time']{
	 width:100%;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:3px 5px;
 }
 
 input[type='radio']{
	 width:30px;
	 height:30px;
 }
 
 .dateinput{
		 width:100%;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:3px 5px; 
	 
 }
 
.input_datalist{
		 width:100%;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:3px 5px;
} 
 
  select{
	 width:100%;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:3px 5px;
 }
 
  input[type='checkbox']{
	 width:20px;
	 height:20px;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 
 }
 ::placeholder{
	 color:lightgrey;
	 font-size:1rem;
 }
 
 textarea{
	 width:100%;
	 height:100px;
	 font-size:1rem;
	 border:1px solid lightgrey;
	 outline:none;
	 border-radius:3px;
	 padding:0 5px;
 }
 
 
 .main_table{
	font-size:1rem;
	width:98%;
	border-collapse:collapse;
	padding:6px;
	margin:auto;
	border:none;
}

 .main_table tr:nth-child(odd){ 
		background:white;
		}
		
 .main_table tr:nth-child(even){ 
background:ghostwhite;
		}

 .main_table th{
	 font-size:1.1rem;
background: whitesmoke;
padding:4px;
border: 1px solid lightgrey;
text-align: left;
font-weight:500;
}

 .main_table td{
padding-left: 5px;
border: 0px solid lightgrey;

}

.bx_icon{
	font-size:2rem;
	color:steelblue;
	transition:1s;
}
.bx_icon:hover{
	scale:1.05;
	color:orangered;
}

.img_container {
  position: relative; /* Necessary for absolute positioning of the pseudo-element */
  width: 100%;
  height: 350px;
  border-radius: 4px;
}





.img_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.img_container::after {
  content: "";
  color:white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
  border-radius: 4px;
  z-index: 1; /* Ensure the overlay is on top */
}

.img_container p{
position:absolute;
bottom:5px;
left:10px;
color:white;	
z-index: 2;
font-size:1.5rem;
}



.btclose{
color:red;
}

.btother{
	
}



.image-container {
    position: relative;
    display: inline-block;
}

.thumbnail {
    width: 100px; /* Adjust size as needed */
    height: auto;
    display: block;
	width:100px;
	height:100px;
	object-fit:cover;
	cursor:pointer;
	transition:1s;
	border-radius:3px;
}
.thumbnail:hover{
	scale:1.1;
	filter: grayscale(100%);
	border-radius:20px;
}

.real-image {
    position: absolute;
    top: 50%;
    right: 100%; /* Move it to the right of the table cell */
    width: 600px; /* Adjust size as needed */
    height: auto;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 10; /* Make sure it's above other content */
    transform: translateX(10px); /* Add some space between the thumbnail and the real image */
}

.image-container:hover .real-image {
    opacity: 1;
}


.deltooltip {
  position: relative;
  display: inline-block;
}

.deltooltip .deltooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: dodgerblue;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 font-size:0.95rem;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  right:30px;
  z-index: 1;
}

.deltooltip:hover .deltooltiptext {
  visibility: visible;
}

.img_grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	width:80%;
	gap:15px;
	border:0px solid green;
	margin:auto;
	border:0px solid lime;
}
.img_grid_item{
	width:100%;
	border:1px solid whitesmoke;
	height:400px;
	position:relative;
	box-shadow: 0 -10px 20px -5px rgba(115, 115, 115, 0.4);
}
.img_grid_item img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.img_grid_item p{
	position:absolute;
	bottom:0;
	right:10px;
}

.main_grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 100%;
}

.main_grid_item_nb {
  border: 0px solid hotpink;
  padding:10px;
   margin:0 10px;
}
.main_grid_item {
  border: 1px solid whitesmoke;
  box-shadow: 0 -10px 20px -5px rgba(115, 115, 115, 0.4);
  padding:10px;
 
  border-radius:10px;
}

.main_grid_item_span2 {
  grid-column: span 2;
  border: 0px solid steelblue;
  padding:15px;
}

.logo_main{
	width:200px;
}

.innertbl{
		width:100%;
		border:none;
		border-collapse:collapse;
}

.innertbl td{
	border-bottom: 1px solid lightgrey;
}
.innertbl th{
	border-bottom: 1px solid grey;
	text-align:left;
}

@media only screen and (max-width: 768px){
	h1{font-size:1rem;}
	h2{font-size:0.75rem;}
	.logo{
	left:50%;
	transform: translate(-50%, -50%);
	}
	.grid-item-span6{
	grid-column:span 8;
	border:0px solid green;
	padding:2px;
	}
	.removethis{display:none;}
	.logo_main{width:120px;}
	
}