body{
 margin:auto;
}]

.feedsection{
	
	color:black;
background-color: rgb(235 244 243);
background-repeat:no-repeat;
	 position:;
     max-width:;
	width:100%;
  display: ;
font-family: ;
	align:center;
	align-items:center;
	 justify-content:center;
}
  .ingred:nth-child(odd){
background-color: rgb(250, 250, 250);
}
 .ingred:nth-child(even){
background-color: white;
}
  




/*                    header and footer   */
.profile_details{
background:green;
 border: 1px solid #fff;	
}
.profile_details summary{
display:flex;
	
}
.profile_name{
	color:white;
	margin:px;
	font-size:80%;
}
#logoutlink{
background:#800000;
	color:white;
	padding:1px;
	margin-bottom:8px;
}
.profile_pic{
 max-width:40px;
	
}
.site-header .profile_details {

}
	 
img{
	 
    position: center;
    top:;
    bottom: ;
    left:;
    right:;

	 display: block;
	margin:auto;
}
.fimage{
	 max-width: 100%;	
}
.seachpdfimg{
width:100%;
	
	
}
.seachpdfdefstitle{
font-weight:bold;
	text-align:center;
	font-family:math;
	color:green;
}
.img_defs {
	
  border: 1px solid #fff;
	background:#f0f6f4;

  }
.img_defs .seachpdfdefs, .img_defs  .seachpdfimgdiv {
	 width: 100%;
	vertical-align: top;
	margin: 0 1% 0 0; 
	box-sizing: border-box;
	/* display: inline-block;
  vertical-align: top; align to the top 
  width: 48%; /* roughly half width with some margin  
  margin: 0 1% 0 0; /* right margin for spacing  
  box-sizing: border-box; /* include padding/border in width */
}
.seachpdfdefs hr{
	background:#c5fbc5;
	height:1px;
}
.img_defs details {
	
}
.detailslistdiv{
	
	 text-align: left;
}
.site-header a{
color:white;
font-weight:bold;
text-decoration:none;
}

.site-header { 
  position:sticky;
  margin:;
  top:0;
	 border-bottom: 1px solid #d3d3e8;
   
  background: #3c7bab;
	 background: linear-gradient(to bottom, hsl(231deg 38% 63%), hsl(231deg 3% 11%));
 
  width:100%;
  z-index:100;
}

.site-header::after {
  content: "";
  display: table;
  clear: both;
 
}

.site-identity {
  float: left;
	margin:auto;
    text-align: center;
	
}

.site-identity .header_logo{
width: 30px;
    float: left;
    border-radius: 10%;
    margin: 0 3px 0 0;
    display: inline-block;
	transform:translate(5%);
  
}
  transform: translateY(50%);
}

.site-identity a {
text-decoration: none;
 color:#fff;
 font-weight:bold;
   position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.langicon {
	background:red;
  max-width: 25px;
	margin-right:0;
  display: inline-block;
}
.nav{
background:re;
	
	
}


.closemenu{
display: none;	
}
 .openmenu {
  display: inline-block;
	 float:right;
}

img.fieldsfim{
width:90%;
	
}

.site-navigation {
display:none;
}

.site-navigation ul, .site-navigation li {
  margin: 0; 
  padding: 0;
}

.site-navigation li {
  display: inline-block;
  margin: 1.4em 1em 1em 1em;
}
 .gtrans {
  display: inline-block;
  margin: 1.4em 12em 1em 1em;
}




.helpmaterials{

	 background-color:rgb(180, 250, 290);
	color:BLUE;
	FONT-WEIGHT:BOLD;
	FONT-SIZE:1.5REM;
}

.row-add {

	margin-bottom:4px;
		margin-top:4px;
		 width:80%; 
		 font-size:px;
		 color:white;	 
	 
	 } 


.tdvalues{

width:4px;
	
}

 /*------Ingredient combination-----*/
.combin_subhead{
color:green;
	font-family:calibri, timesnewroman;
	font-weight:bold;
	
}

.combin_td{
  display: ;
	align:left;
	
}

.combin_td ul {
width:;
	 display: flex; 
	align:left;
	flex-wrap:wrap;
}	 
.combin_td ul li {
width:;
	align:left;
	margin-botom:15;
 flex: 1 0 45%; 	
}	 
	 
.combin_td  ul a{
width:;
	align:left;
	 margin-botom:15;
	 
	padding-left:10px;
	padding-top:10px;
	color:navy;
	
}

	 .combab{

		 
	 }

	  .comba{
		  width:40%;
		  float:center;
display: inline-block;
		  margin:10px;
		   padding:10px;
		  border-style: solid;
    border-width: 8px;
    border-color: hsl(300, 50%, 10%);
   
	color:lightorange;	
		  background:lightgreen;
	 }


 .combb{
	 width:40%;
	 float:center;
	  margin:10px;
	 padding:10px;
	   border-style: solid;
    border-width: 8px;
    border-color: hsl(300, 50%, 10%);
   
color:navy;
	display: inline-block; 
	  background:lightgreen;
	 }



.quiz_header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
}

.header_1 {
  background: linear-gradient(hsl(23, 50%, 70%), hsl(200, 70%, 50%), hsl(200, 50%, 70%));
  padding: 4rem 0.5rem;
  text-align: center;
  font-weight: bold;
  font-size:43px;
 color: hsl(234, 90%, 22%);
}

.quiz_miniheader {
  background: linear-gradient(hsl(0, 50%, 80%), hsl(200, 50%, 10%));
  padding: 5rem 0.5rem;
  text-align: center;
  color: hsl(300, 40%, 100%);
}

.quiz_bigheader {
  background: linear-gradient(hsl(300, 50%, 50%), hsl(300, 50%, 10%));
  padding: 1rem 0.5rem;
  text-align: center;
 font-size:22px;
 font-weight:bold;
  color: hsl(300, 40%, 100%);
}


.header_yellow2 {
 background: #dedee8;
  padding: 1rem 0.5rem;
	 font-weight:bold;
  text-align: center;
color: hsl(300deg 95% 2%);
border: 1px solid #0612a2;
}

.h1header {
  border: 2px solid #f6f6f6;
  border-radius: 30px;
	background: linear-gradient( #f1b099,white,white);
   padding: 5px;
	 font-weight:bold;
  text-align: center;
color: hsl(199.95deg 98.12% 38.14%);
 font-size:130%;
box-shadow: 0 0 9px #085503;
}
.greenheader{
  background: linear-gradient(blue,green, blue);
  padding: 2rem 0.5rem;
  text-align: center;
color: hsl(140deg 20% 43%);}

.header_green {
  background: linear-gradient(hsl(127, 60%, 40%), hsl(0deg 0% 100%), hsl(0deg 0% 100%), hsl(0deg 0% 100%), hsl(123, 40%, 70%));
  padding: 3px;
  font-weight:bold;
  font-size:130%;
  text-align: center;
	 width:100%;
color: hslhsl(34, 90%, 42%);}

.header_brown {
  background: linear-gradient(hsl(23, 40%, 60%), hsl(156, 70%, 90%), hsl(23, 40%, 70%));
  padding: 2rem 0.5rem;
  text-align: center;
color: hsl(654, 90%, 42%);}


 .ingred:nth-child(odd){
background-color: rgb(250, 250, 250);
}
 .ingred:nth-child(even){
background-color: white;
}

.header_yellow {
  background: linear-gradient(hsl(100deg 81.72% 80.41%), hsl(60deg 93.19% 27.08%), hsl(100deg 81.72% 80.41%));
   border: 2px solid #84848e;
  border-radius: 50px;
    position:sticky;
	padding: 3px;
	font-weight:bold;
  text-align: center;
color:white;
}

.header_purple {
 margin:auto;
  background: linear-gradient(hsl(255deg 100% 87.28%), hsl(0deg 0% 99.91%), hsl(100deg 100% 94.44%));
   border-style: solid;
    border-width: 1px;
    border-color: hsl(300, 50%, 10%);
    font-size:100%;
	padding: 1px;
	font-weight:bold;
 width:95%;
  text-align: center;
color: hsl(500, 100%, 0%);}

.descr, .main .descr {
	 font-family: timesnewroman, calibri;
     background: ;
	padding: 2rem 0.5rem;
	font-weight: BOLD ;
position:center;
	font-size:;
  text-align: center;
color: hsl(290deg 83% 16%);
}

.quiz_title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.25;
}
.button-group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.button {
  display: inline-block;
  text-align: center;
  padding: ;
  background: black;
  text-decoration: none;
  color: white;
  width: 50%;
    max-width: 14rem;
}
.button + .button {
  margin-left: 1.5rem;
}
.button-primary {
  background: linear-gradient(to bottom, hsl(200, 70%, 30%), hsl(233deg 29% 77%),  hsl(200, 70%, 20%));
  padding: 6px 0.5rem;
}
.button-primary:hover {
  background: linear-gradient(to bottom, hsl(200deg 23% 74%), rgb(250, 250, 250),  hsl(200deg 34% 71%) );
}
.button-primary-current {
  background: linear-gradient(to bottom, hsl(291deg 82% 50%), hsl(233deg 88% 17%),  hsl(261deg 52% 73%));
  padding: 6px 0.5rem;
 border-style: solid;
 border-width:4px;
 border-color:#f1db18;
}
.button-primary-current:hover {
  background: linear-gradient(to bottom, hsl(200deg 23% 74%), rgb(250, 250, 250),  hsl(200deg 34% 71%) );
}
.button-secondary {
  background: linear-gradient(to bottom, hsl(200deg 30% 77%), hsl(130, 60%, 70% ), hsl(200, 10%, 20%));
  padding: 4px 0.5rem;
}
.button-secondary:hover {
  background: linear-gradient(to bottom, hsl(200deg 14% 81%), rgb(199 234 212), hsl(200deg 19% 78%));
}


.button-brown {
  background: linear-gradient(to bottom, hsl(100, 50%, 90%), hsl(400, 30%, 70%), hsl(100, 50%, 80%));
  padding: 4px 0.5rem;
}
.addchem{
  background: linear-gradient(to bottom, hsl(229deg 36% 46%), hsl(277deg 13% 75%), hsl(219deg 26% 16%));
  padding: 2px 0.5rem;
}
.addchem:hover{
  background: linear-gradient(to bottom, hsl(100deg 47% 65%), hsl(130deg 56% 30%), hsl(100, 50%, 80%));
  padding: 2px 0.5rem;
}

.options{
	height:39px; width: 123px; 
	  background: linear-gradient(to bottom, hsl(222deg 27% 82%), hsl(186deg 84% 66%));
  padding: 2px 0.5rem;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:10px;
}

.options:hover {
  background: linear-gradient(to bottom, hsl(100deg 47% 65%), hsl(130deg 56% 30%), hsl(100, 50%, 80%));
  padding: 2px 0.5rem;
}

#process{
	height:44px; width: 103px; 
	background: linear-gradient(hsl(150deg 24% 73%), hsl(300, 40%, 70%), hsl(150, 50%, 30%));
  padding: 2px 0.5rem;
	
}
#process:hover{
	height:44px; width: 103px; 
	background: linear-gradient(to bottom, hsl(100deg 47% 65%), hsl(130deg 56% 30%), hsl(100, 50%, 80%));
  padding: 2px 0.5rem;
	font-size:19px;
}
 
	
	


.feedsection{
	
	color:black;
background-color: rgb(235 244 243);
background-repeat:no-repeat;
	 position:;
     max-width:;
	width:100%;
  display: ;
font-family: ;
	align:center;
	align-items:center;
	 justify-content:center;
}
  .ingred:nth-child(odd){
background-color: rgb(250, 250, 250);
}
 .ingred:nth-child(even){
background-color: white;
}
  

.titlebutton {
  display: inline-block;
  text-align: center;
  padding: 2rem 0.5rem;
  background: green;
  text-decoration: none;
  color: white;
  width: 100%;
max-width: 40rem;
}
.titlebutton-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
}
.titlebutton-primary:hover {
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
}

.menubutton {
  display: inline-block;
  text-align: center;
  padding: 2rem 0.5rem;
  background: black;
  text-decoration: none;
  color: white;
  width: 80%;
max-width: 23rem;
}
.menubutton-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
}
.menubutton-primary:hover {
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
}

 <!--Sidebar menu --> 
.wrapper .sidebar .profile{
    margin-bottom: 30px;
    text-align: center;
}

.wrapper .sidebar .profile img{
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 auto;
}

.wrapper .sidebar .profile h3{
    color: #ffffff;
    margin: 10px 0 5px;
}

.wrapper .sidebar .profile p{
    color: rgb(220 239 246);
    font-size: 14px;
}   


.quiztime{
   font-weight: bold; 
 background: yellow; 
 position:fixed;
}

.quizcontent{
margin-left:  ;
 margin-right: ;
 padding:5px;
 background-color: rgb(207 222 230);
}
 .answerstable{
margin: auto ;
 	justify-content:left;
  position:center;
  background-color: rgb(215 226 232);
}
 
 .scoretable{
  padding:5px;
  margin: left ;
 	justify-content:left;
  position:left;
  background-color: rgb(247 252 255);
}
 

{<!-- a:link {color: blue} -->
a:visited {color: green}
a:hover {color: yellow}
a:active {color: red} 
}

.sidebarleft .profile{
    margin-bottom: 30px;
    text-align: center;
}

.sidebarleft .profile img{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

.sidebarleft.profile h3{
    color: #ffffff;
    margin: 10px 0 5px;
}

.sidebarleft .profile p{
    color: rgb(206, 240, 253);
    font-size: 14px;
}   





.table {

text-align: center;
background-color:yellow ;
}


 
	
.formular th{
		width: ;
		position:relative;
		background-color: navy;
		margin: auto;
		padding: auto;
		height: 50px;
}
	
	.formular{
		
		position:relative;
		background-color: ;
		margin: auto;
		padding: auto;
}
	
	.formular tbody p{
		
		position:relative;
		padding: 8px;
		background-color: ;
		margin: 10px;
		border:;
}
	
	.formular .tablename{
		position:relative;
		padding: 4px;
		height: 50px;
		margin: auto;
		 background: linear-gradient( hsl(300, 90%, 30%), hsl(300, 50%, 70%));
		
  padding: 5rem 0.5rem;
  text-align: center;
}
 .formulatedfeedtotal{
		position:relative;
		padding: 8px;
		height: 50px;
		margin: 4px;
		background: linear-gradient(hsl(200, 50%, 90%), hsl(130, 90%, 70%), hsl(200, 50%, 90%));
 padding: 4px;
  text-align: left;
}
	
.formulatedfeedtotal td, .formulatedfeedtotal p{
		position:relative;
		padding: 8px;
		margin: 4px;
		  text-align: left;
		font-weight: bold;

}

.feedsectionq{
background-color: rgb(200, 200, 260);
}
/* ---------------------------    Below app  */
  .DEMO{
font-weight: ;
text-decoration : blink;
font-familly: calibri, timesnewroman;	  
}
 .desc{
	 padding: 2rem 0.5rem;
  text-align: center;
color: hsl(500, 100%, 0%);}
 }

.demopara {
 padding: 2rem 0.5rem;
  text-align: center;
color: hsl(0deg 21% 49%);
background-color: rgb(52 52 119);
	
}
/* ------------------    Below app  */
.feedtable {
background-color:  linear-gradient( to right, #bac776, hsl(167deg 19% 91%), #bac776);
}

#cart  { 
  margin:2%;
	
}

#cart .widthsmall { 
  max-width : 70px;
	width : 60px;
	
}


 #cart .x , .x1, #Ingredient{ 
    max-width : 100px;
	 overflow:none;
	  word-wrap: break-word;
	 break-word:break-all;
	 text-overflow:ellipsis;
	 height: 50px;
	 background-color:rgb(180, 250, 290);
}

 #cart .inam , #fnam { 
    max-width : 150px;
	  word-wrap: break-word;
	 height: 30px;
	  background: white;
}

  #cart #cartcurrency,  #cart .Ipr,.mass { 
   
	  max-width : 150px;
	  width : 90px;
	  word-wrap: break-word;
	 height: 30px
}

#cart .line_items .Ix {
    border-style: solid;
    border-width: 9px;
    border-color: #BCBCBC;
   
}
#cart .line_items {
    background: #2e8822 ;
	border-color: #8d1010;
}

#foot  {
    border-style: solid;
    border-width: 5px;
	font-weight:bold;
background: linear-gradient(to bottom, hsl(148deg 47% 77%), hsl(200, 100%, 15%), hsl(200deg 30% 61%));

    
}

.values, .Xtot, input, select {
    color: black;
}

#foot .values,#foot .Xtot, #foot input, select {
    color: black;
}
	 
#foot .values {
    border-style: solid;
    border-width: 5px;
    border-color: #2cc718;
     max-width : 100px;
	width: 90px;
}

#foot .Xtot {
    border-style: solid;
 
     max-width : 100px;
}

/*  BOOTRAP      */

.text-white {
  color: #ffffff;
}
	 
.sub{
  background: linear-gradient(hsl(23, 50%, 70%), hsl(200deg 10% 64%), hsl(200, 50%, 70%));
  padding: 1rem 0.5rem;
  text-align: center;
  font-weight: bold;
	possition:relative;
  font-size:13px;
 color: #faebcc;
	
	width:100vw;
}

 .name{

	 background:#eadde9; 
	 
 }
	 
.details .firstcol, .essentials .firstcol, .ingredients .firstcol{

	max-width : 500px;
	
}
	 
#feeddata{
background:#eadde9; 
	width:80vw;
	right:0;
	margin:0;
	possition:relative;
}	 
	 
.fieldtotal{
	 border-style: solid;
    border-width: 1px;
    border-color: #2cc718;
	background:rgb(250, 250, 250); 
}

	 
.main{
background:#dedeee; 
	
}

	.tab{
background:#d6b2a9; 
	
}

	.error{
background:#d5c7c7; 
text-align: center;
  font-weight: bold;
  font-size:13px;
 color: #b80c35;	
}

	.toggle{
 background: linear-gradient(to bottom, hsl(200deg 30% 77%), hsl(291deg 10% 72%), hsl(200, 10%, 20%));
  padding: 7px 0.5rem;
		
	}

.toggle:hover{
 background: linear-gradient(to bottom, hsl(61deg 65% 81%), hsl(291deg 44% 97%), hsl(86deg 48% 37%));
  padding: 7px 0.5rem;
	width:146px;
	color:blue;
	}


	.analysisdatatext{
background:#d5c7c7; 
text-align: center;
  font-weight: bold;
  font-size:13px;
 color: #b80c35;	
}

	 .analysisdata{
background:#d1f692; 
		 padding: 4px 0.5rem;
	
	}

 .linkbutton{
background:; 
		 padding: 4px 0.5rem;
	font-weight: bold;
  font-size:;
 color: blue;
	}
.dropdown:hover .dropdown-content {
  display: block;
} 

	 table, thead {
  
}
	  trd {
  max-width: 100%;
  display: block;
}

.line_itemss{
  max-width: 100%;
  display: block;
}




 
 .gtrans {
  display: inline-block;
  margin: 1.4em 12em 1em 1em;
}



/*----------------FOOTER---------------------*/
.site_footer {
 width:100%;
 background:#23273d;
 overflow:hidden;
}
 

.footer_heading {
 color:white;
 
 
}
  .footer_heading_line {
 color:white;
 width:70%;
 
}
  .site_footer a {
  text-decoration: none;
 color:white;
 
  
}

.columns   , .footer_identity    {
 width: 100%;
	
             //  display:flex;
             overflow:hidden;
	margin: auto ;
	
               }
  
  
  .footer_identity    {
              border: 1px solid #424347;
                }
.columns  {

  }
  
.columns div   { 
               width: 100%; 
 padding:5px;
          background-color:; /*  color that affects popup */
                
               }
.columns  ul   { 
margin:auto;
text-align:center;
}
  .columns  ul li  { 
margin-bottom:15px;
 text-align:center;
}
.footer_identity img {
  max-width: 90px;
  float: left;
  margin: 5px;
  border: 2px solid #ffffff;
  border-radius: 60%;
  
}
.social_icon  img {
  max-width: 25px;
  
  margin-left: 25px;
  border: 2px solid #ffffff;
  border-radius: 60%;
  
}
.footernav {
 
   padding: 0;
  margin-right:10;
  display: inline-block;
}
  .social_icon{
   width:25px;
    margin:5px;
  
  }
.social_icon_group{
  width:100%;
margin:auto;
}
 .social_icon_group div {
  
  justify-content:space-between;
  align:center;
display:inline-block;
  }

.footernav  li {
  margin: 5px; 
  padding: 5px;
   display: inline-block;
 
}
.footercontact {
  display: inline-block;
  margin: 1.4em 1em 1em 1em;

}


.footernav {
  float: right;
  margin-top:0;
   padding-top: 0;
  margin-right:20%;
   padding: 10 10 10 10;
}

.footernav li {
    margin: 0; 
  padding: 14;
  
}


/*-----------------------LOGIN FORM------------------------*/
#login_form{
	max-width:500px;
 margin:auto;
   padding: 9px;
  margin-bottom: 10px;
  background-color: #fafafa;
  border: 1px solid #b1afab;
  border-radius: 10px;
 box-shadow: 1px 5px 5px 3px #000, 1px 1px 4px 3px #3F51B5 inset;

}
  .login_table{
 margin:auto;
   padding: 9px;
   background-color: #fab2fa;
   
  }
	 #login_form div, #login_form  textarea{
 margin:auto;
     
  }
.form-group {
  margin-bottom: 12px;
}
  .notes {
 padding: 9px;
 font-weight:normal;
 text-align:left;  
}
.form-control {
  display: block;
  width: 70%;
  padding: 15px 18px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #373737;
  background-color: #f6f6f6;
  background-image: none;
  border: 2px solid #f6f6f6;
  border-radius: 0px;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #f6f6f6;
  outline: 0;
}
.form-control:focus::-moz-placeholder {
  color: #9a9a9a;
  opacity: 1;
}
.form-control:focus:-ms-input-placeholder {
  color: #9a9a9a;
}
.form-control:focus::-webkit-input-placeholder {
  color: #9a9a9a;
}
.form-control.input-inverse:focus {
  border-color: #252525;
}
.form-control.input-inverse:focus::-moz-placeholder {
  color: #5a5a5a;
  opacity: 1;
}
.form-control.input-inverse:focus:-ms-input-placeholder {
  color: #5a5a5a;
}
.form-control.input-inverse:focus::-webkit-input-placeholder {
  color: #5a5a5a;
}
.form-control::-moz-placeholder {
  color: #b8b8b8;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #b8b8b8;
}
.form-control::-webkit-input-placeholder {
  color: #b8b8b8;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eeeeee;
  opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
}
textarea.form-control {
  height: auto;
}

.form-placeholder {
  color: #b8b8b8;
}
input[type="search"] {
  -webkit-appearance: none;
}
.btn-text{
width:20px;
 background-color: blue;
color: white; 
}
/*       -------------------------------COMMENTS---------------           */

.comment-form-container {
	background: #F0F0F0;
	border: #e0dfdf 1px solid;
	padding: 10px;
	border-radius: 5px;
	
}

.input-row {
	margin-bottom: 20px;
	left:0;
}

.input-field {
	min-width: 250px;
	border-radius: 4px;
	padding: 10px;
	border: #e0dfdf 1px solid;
}
	 .comment_textarea{
		min-width: 250px;
		 min-height: 150px;
	border-radius: 4px;
	padding: 10px;
	border: #e0dfdf 1px solid; 
	 }

.btn-submit {
	padding: 10px 20px;
	background: #333;
	border: #1d1d1d 1px solid;
	color: #f0f0f0;
	font-size: 0.9em;
	width: 100px;
	border-radius: 4px;
	cursor: pointer;
}

ul {
	list-style-type: none;
}

.comment-row {
	border-bottom: #e0dfdf 1px solid;
	margin-bottom: 15px;
	padding: 5px;
	border-top: #aba7a7 2px solid;
	
}
	 .reply_row{
	border-bottom: #e0dfdf 1px solid;
	border-right: #e0dfdf 1px solid;
	margin-bottom: 15px;
	margin-left: 15px;
	padding: 5px;
		 background:#0000ff08;
	 }

.outer-comment {
	background: #ffffff;
	padding: 1px;
	border-radius: 2px;
	text-align :left;
	width:95%;
	justify-content:center;
	align-items:center;
	margin:auto;
	left:50%;
}
  .Commentdiv {
	   background: #fff;
  border: #657cec 1px solid;
	border-radius: 2px;
}

span.comment-row-label {
	color: #484848;
}

span.posted-by {
	font-weight: bold;
}

.comment-info {
	font-size: 0.9em;
	padding: 0 0 10px 0;
}

.comment-text {
	margin: 10px 0px 30px 0;
}

	 .commenticon{

position:;
		 margin:2;
		 
	 }
.btn-reply {
	color: #2f20d1;
	cursor: pointer;
	text-decoration: none;
}

.btn-reply:hover {
	text-decoration: underline;
}

#comment-message {
	margin-left: 20px;
	color: #005e00;
	display: none;
}

.label {
	padding: 0 0 4px 0;
}


	 /*------Images-----*/
#loading{

	width:65px;
}


.helpmaterials{

	 background-color:rgb(180, 250, 290);
	color:BLUE;
	FONT-WEIGHT:BOLD;
	FONT-SIZE:1.5REM;
}

.row-add {

	margin-bottom:4px;
		margin-top:4px;
		 width:80%; 
		 font-size:px;
		 color:white;	 
	 
	 } 


.tdvalues{

width:4px;
	
}

 /*------Ingredient combination-----*/
.combin_subhead{
color:green;
	font-family:calibri, timesnewroman;
	font-weight:bold;
	
}

.combin_td{
  display: inline-block; 	 
	
}

.combin_td ul {
width:;
	 display: flex; 
	align:left;
	flex-wrap:wrap;
}	 
.combin_td ul li {
width:;
	align:left;
	margin-botom:15;
 flex: 1 0 45%; 	
}	 
	 
.combin_td  ul a{
width:;
	 margin-botom:15;
	 
	padding-left:10px;
	padding-top:10px;
	color:navy;
	
}

	 .combab{

		 
	 }

	  .comba{
		  width:40%;
		  float:center;
display: inline-block;
		  margin:10px;
		   padding:10px;
		  border-style: solid;
    border-width: 8px;
    border-color: hsl(300, 50%, 10%);
   
	color:lightorange;	
		  background:lightgreen;
	 }


 .combb{
	 width:40%;
	 float:center;
	  margin:10px;
	 padding:10px;
	   border-style: solid;
    border-width: 8px;
    border-color: hsl(300, 50%, 10%);
   
color:navy;
	display: inline-block; 
	  background:lightgreen;
	 }
	 
.combin_result{
	 width:90%;
	 float:center;
	  margin:10px;
	 padding:10px;
	   border-style: solid;
    border-width: 8px;
    border-color: hsl(300, 50%, 10%);
   
color:navy;
	display: inline-block; 
	  background:lightgreen;
	 }

	 /*---------------ANALYSER-------*/


.Percentage_weight, .Iw{
max-width:80px;
	
}

.ingred_img{

		 max-width:95%;
		 
 }
  /*---------------featured image-------*/
#tocfimage{
background-color:#851d1d;
  display: inline-block;
	width:100%;
}
	#fimagediv{
background-color:#3d4e48;
	width:98%;		
}

	  /*---------------Table of content-------*/
	 

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
box-shadow: 0 3px 9px 1px gray;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
 text-align: left;
}

tr#searchdiv{
padding:5px;
	background-color:#fff;
	text-align:left;
	  color:#089e07;
	border-radius: 12px;
  box-shadow: 1px 1px 400px 100px #000000, 0px 0px inset;
 z-index: 1000;
  border: 1px solid #eee;
  display: none; /* Hidden by default */
}

table.searchtb {
	  border-radius: 10px;
  	padding:1px;
}
	
/*----------  Legal instruments----------------*/
	 .def_readmore{
		  margin:2px;
	 }
#laws_h1{
	 color:#4CAF50;
}
.contin_name{

	background-color:#fff;
	margin:auto;
	  color:#8e0232;
	font-family:monospace;
		 
}
.countr_name{

	background-color:#fff;
	margin:auto;
	font-family:Courier New, monospace;
		 
	 
}
	  .instruments{

		 width:100%;
		position:center;
		 font-size:100%;
		 margin:5px;
		  justify-content: center;
		  align:center;		 
	 }
.instrument{
background:#fff;
	margin:5px;
	padding:3px;
	 border: 1px solid #24860c;
  border-radius: 15px;
	}
.instr_number_name{
	display:flex;	
}
.paranumbering{
background:#eaf1ff;
	color:#000;
	border: 1px solid #05116d;
  border-radius: 9px;
	padding:5px;
	display:flex;
	 align-items: center; /* Vertically center the content */
    justify-content: center; /* (Optional) Horizontally center as well */
	margin-right:0px;

}
 .instrname{

color:#139813;
		 width:97%;
		 text-align:left;
		 font-size:100%;
	  margin-bottom: 0.2em; /* Adjust this value as needed */
		 margin-left:5px;
	 background:#ffffff;
	 padding:1px;
		  font-weight:bold;
		 font-family: sans-serif;
  
	 }
.image_and_text{
	display:inline;
}
.parathumbnail{
	width:20%;
}
	 .instrdesc{

color:#0e000f;
		 width:100%;
		 text-align:center;
		 font-size:90%;
		  margin-top: 0em; /* Adjust this value as needed */
		margin:auto;
		  font-style:normal;
		  font-family:Courier New, monospace;
		  background:#fcf9f3;
		 padding:1px;
	 }
.para_line{
	width:50%;
	margin-bottom:0px;
}
   /* Pagination container */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            gap: 10px;
        }

        /* Links styling */
        .pagination a {
            text-decoration: none;
            color: #007BFF; /* Blue color for links */
            border: 1px solid #007BFF;
            padding: 8px 12px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Hover effect for links */
        .pagination a:hover {
            background-color: #007BFF;
            color: #fff; /* White text on hover */
        }

        /* Current page styling */
        .pagination .current-page {
            font-weight: bold;
            color: #fff;
            background-color: #007BFF; /* Highlight current page */
            border: 1px solid #007BFF;
            padding: 8px 12px;
            border-radius: 5px;
		}

.fisheries_lawterm_def{

color:#E91E63;
		 width:80%;
		 text-align:center;
		 font-size:90%;
		margin:auto;
	font-weight:bold;
		  font-style:italic;
		  font-family: calibri;
		  background:#fff;
		 padding:1px;
	
}
 /* Style the thumbnail image */
  .thumbnail {
    width: 20%; /* Set the width to 20% */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Change cursor on hover to indicate it's clickable */
  }

  /* Style for the popup overlay */
  .popup-overlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    z-index: 1000; /* Ensure it's on top of everything */
  }

  /* Style for the popup content (image container) */
  .popup-content {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%; /* Adjust max width as needed */
    max-height: 90%; /* Adjust max height as needed */
    text-align: center; /* Center the image horizontally */
  }

  /* Style for the full-size image in the popup */
  .popup-image {
	  
    max-width: 85%;
    max-height: 100%;
  }

  /* Style for the close button */
  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }
/*----------  Legal instruments----------------*/


	 .notsynonyme{
color:#bb00c9;
		background:#ececfd; 
	 }
 .synonyme{
color:#0cd446;
		
	 }
	.imgresult{
		//background:#babad0; 
		//border: 2px solid white;
		 width:100%;
		
	}

	 .dictiontable{
text-align:left;
		border: 2px solid white;
	max-width:95%;
	margin:auto;
		 margin-top:1px;
		 margin-bottom:5px;
	 }
	  .dictiontable td{
	padding:7px;
		
	 }
 .dictiontabletr,.localappel tr :nth-child(odd){
background-color: rgb(206 229 247);
}
 .dictiontabletr:nth-child(even){
background-color: #fdfffe;
}
	 .termname{
	 background: rgb(255 255 255);
color:#011107;
	 }
	 .synonymeterm{
		font-weight:bold;
		 color:rgb(129 216 167);
		 background:#796e1f;
	 }

	 .GItable{
text-align:left;
	max-width:40%;
	margin:5%;
		 border: 3px solid #71a6dd;
		 margin-top:1px;
		 margin-bottom:5px;
		 
	 }
	  .GItable td{
padding: 3px;
		  
	  }
	 .GItable td:nth-child(even){
padding: 3px;
	color:rgb(21 159 12);
	 font-family: sans-serif;		  
	  }
	 
	  .dictionbox{

	 margin-left:auto;
		 margin-right:auto;
		 max-width: 50%;
    border: solid darkgray 2px;
	padding: 5px; border-radius: 20px; 
position: center;
background-color: rgb(200, 200, 200);
	 }
	 
	 .recordtableLS{

text-align:center;
background-color: rgb(190 246 194);
 font-family: calibri;
font-weight:bold;
		 color:black;
	 }
	  .term{
 font-family: calibri;

		 color:#ffd400;	
		 
	 }
	 .termstatus{
 font-family: calibri;
font-weight:bold;
		 color:black;	
		  font-size:80%;
		 }
	 
	 	 .etymology{
	font-family: sans-serif;
		  color:#0510a0;	
	 }

	 	 .etymologysource{
	font-family: sans-serif;
		  color:#0510a0;	
	 }

	 	 .definition{
	font-family: serif;
		 
		 }

 .example{
 font-family: calibri;

		 color:black;	
		  font-size:;
		 }
	  .notes{
 font-family: calibri;

		 color:black;	
		  font-size:;
		 }

	 .mainsection{

		 background-color: rgb(200, 200, 260); 
		 position: relative; 
		 background-attachment: scroll; 
		 background-size: auto;
	 }
	 
	 .searchcontainer{
	margin-left:auto; 
	margin-right:auto;
	 box-shadow: 5px 5px #888, 10px 10px 5px 3px #ddd inset; 
	
      border: solid darkgray 2px;
	  padding: 10px;
		 width:fit-content;
	border-radius: 20px; 
	  background-color: rgb(200, 200, 200);
	  
	 }
	 .imagesection{
		box-shadow: 5px 5px #888, 10px 10px 5px 3px #ddd inset; 
	
        border: solid darkgray 2px; 
		padding: 5px; 
		border-radius:0px; 
		 
	 }
	 .legalsection{
		 border: 2px solid darkgray ; 
		padding: 5px; 
			 
	 }


.pronounceicon,
.speak-button {
  position: relative;
  cursor: pointer;
  font-size: 2em;
  display: inline-block;
  transition: transform 0.3s ease; /* smooth scaling */
}

/* Pop-out effect on hover for both */
.pronounceicon:hover,
.speak-button:hover {
  transform: scale(1.2); /* scale up 20% */
}

/* Tooltip text - hidden by default */
.pronounceicon::after,
.speak-button::after {
  content: "click to hear pronunciation";
  position: absolute;
  bottom: 125%; /* position above the icon */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.7em; /* smaller font size */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* Tooltip arrow */
.pronounceicon::before,
.speak-button::before {
  content: "";
  position: absolute;
  bottom: 115%; /* slightly below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* Show tooltip on hover */
.pronounceicon:hover::after,
.pronounceicon:hover::before,
.speak-button:hover::after,
.speak-button:hover::before {
  opacity: 1;
  pointer-events: auto;
}
.speak-button {
	font-size:20px;
}
	 .icon{
max-width:30px;
		 
	 }
	 .iconsmall{
max-width:20px;
		 
	 }
	 
	 .header_lightblue {
  background: linear-gradient(hsl(227deg 67% 66%), hsl(60deg 72% 66%), hsl(238deg 50% 70%));
   border-style: solid;
    border-width: 1px;
    border-color: hsl(300, 50%, 10%);
    font-size:150%;
	padding: 1rem 0.5rem;
	font-weight:bold;
  text-align: center;
color: hsl(500, 100%, 0%);}
	 
	 .hierarchy{
		 width:100%;
		  text-align:left;
		  background:hsl(127deg 55% 94%);
		 border-bottom: 1px solid #75acdb;
     	font-weight:bold;
 color: hsl(0deg 0% 0%);}
 .li .hierarchytd{
		font-weight:bold;
		 font-family:;
		font-weight:normal;
 color: hsl(0deg 0% 0%);}
	  .hierarchy li{
	display: inline-block;

	  }
/*----------  Legal instruments----------------*/
	 .lexicontb {
		 width:30%;
	 }

	.lexicontb .lexiconrow:nth-child(odd){
background-color: rgb(250, 250, 250);
}
.lexicontb  .lexiconrow:nth-child(even){
background-color: white;
}

 .tbdef{
	 text-align:left;
	  font-size:80%;
 }	 

	.recordtb tr, .recordtable tr:nth-child(odd){
background-color: rgb(247 247 247);
}
.recordtb tr, .recordtable tr:nth-child(even){
background-color: white;
} 
	.recordtb tr{
	 text-align:left;
	  font-size:80%;
 }	
	.recordtb thead td, .recordtable thead td {
		font-weight:bold;
 color: hsl(0deg 0% 0%);
	 text-align:center;
	background-color: #8890b0;
 }	

	.localappel .localaudio{
		 width:150px;
	 }
	  .dictiondiv{
	 background: white;
		 padding:15px;
		  align:center;
      
  border-radius: 10px;
 box-shadow: 1px 15px 33px 9px #00000047, 0px 0px inset;

		
	 }
	 .termhead2{
	 background: rgb(10 45 131);
color:#fff;
		  padding:3px;
	margin:auto;
		  align:center;
	 }

.dictioncontent{
		  padding:2px;
	  text-align:justify;
		  text-justify:inter-word;
}
 
  
	  .def a{

   color:  #0442f2;
 text-decoration:none;
      
  }
	 .notes a{

   color: inherit;
 font-size:inherit;
  text-transform: inherit;

  }
	  .notes a:HOVER{

   color: BLUE;
      
  }
	  .notes table{
margin:auto;
  border: 2px solid #000;
      
  }
	 
	 .notes td{

  border: 1px dotted  #000;
   padding:4px;   
  }
	 
	 
	 .dictiondivout{
	 background: white;
 padding:5px;
		 margin:auto;
		 	  width:97%;
		  align:center;
		
}
  .login_table{
 margin:auto;
   padding: 9px;
   background-color: #fab2fa;
   
  }
	 #login_form div, #login_form  textarea{
 margin:auto;
     
  }
.form-group {
 
}
  .login_table{
 margin:auto;
   padding: 9px;
   background-color: #fab2fa;
   
  }
	 #login_form div, #login_form  textarea{
 margin:auto;
     
  }
.form-group {
 
	 }

	 /*--------------------------------dictionary field-----------------------------*/
 .tooltip {
            position: absolute;
            display: none;
	  background: rgba(255, 255, 255, 0.1);
             color: blue;
            padding: 12px;
            border-radius: 8px;
             max-width: 300px;
            z-index: 1000;
            font-size: 14px;
            line-height: 1.5;
            transform: translateY(10px);
            transition: opacity 0.2s ease, transform 0.2s ease;
           
			 backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-top-color: #1e3a8a;
        }
        .tooltip.visible {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
 .tooltip_def {
            display: block;
           color:black;
	 
      }
        .dict-term {
            position: relative;
            color:  #1e3a8a;
            text-decoration: underline;
            cursor: pointer;
        }
        .dict-term:hover {
            color: #FFC107;
        }
.dictionhead{
	 background: rgb(243 244 247);
color:#052abf;
	 padding:5px;
	font-weight:bold;
	
	 }
	 .translist li{
		 text-align:left;
	 margin-top:10px;
	 }
	.translist a{
		 text-align:left;
	color:#3a68a1;
  text-decoration: none;	
	 }

	 .synlist a{
		 text-align:left;
	color:#c603b7;
  text-decoration: none;	
	 }
	  .synlist a:hover{
		 text-align:center;
	color:#0400ff;
  text-decoration: underline;	
	 }

	 .etym a{
	color:#009688;
		  text-decoration: none;
		 
	 }
	  .etym a:hover{
	color:yellow;
		   text-decoration: underline;	
	 }
	 /*--------------------------------Table of content-----------------------------*/

	 #toc_container {
		  text-align:left;
	background:#fff;
  	
	 }

 #toc_container li{
		  text-align:center;
		margin-top:15px; 
	 text-decoration: none;
	 }
 #toc_container a{
		  text-align:center;

  text-decoration: none;	
	 }
	  #toc_container .h2{
	color:#0007e3;
		  font-weight:bold;
  text-decoration: none;	
		 
	 }
	  #toc_container .h3{
	color:#000e2f;
  text-decoration: none;
		  margin-left:6px;	
		  
	 }
	  #toc_container .h4,.h5,.h6{
	color:#000;
  text-decoration: none;
		   font-size:95%;
		    margin-left:12px;	
	 }
	  #toc_container a:hover{
		  text-align:left;
	color:#27f901;
  text-decoration: underline;	
	 }
/*--------------------------------Homepage-----------------------------*/
  
.welcometitle{
	font-weight:bold;
 font-size:170%;
 text-shadow: 1px 4px #011a40;
color:#fff;
	 padding:5px;
		  width:90%;
		  align:center;
 margin:auto;
	 }
   
.welcometext{
	font-weight:bold;
  text-shadow: 1px 1px #011a40;
color:#fff;
	 padding:5px;
  margin:auto;
		  width:90%;
		  align:center;
	 }
  .fieldtitle{
   margin:auto;
	font-weight:bold;
   font-family: serif;
      background:white;
  font-size:150%;
color:#012e02;
	 padding:5px;
		  width:70%;
		  align:center;
	 }
.home_animate_items{
  background:#7ac673;
 color:#fff;
 padding:15px;
 margin:auto;
  text-decoration: none;
		  width:70%;
		  align:center;
 font-weight:bold;
   font-family: serif;
}
 
.home_animate_items:hover {
 color:#033188;
  background: linear-gradient(to bottom, #4CAF50, rgb(250, 250, 250),rgb(250, 250, 250),  hsl(200deg 95.78% 5.54%) );
}
   .animatebuttons{
		  
        width: 100%;
        position: relative;
        overflow: hidden;
        text-align: center;
        margin: auto;
          animation-name: slided;
        animation-duration: 5s;
        animation-direction: normal;
        animation-iteration-count: 1;
		
      }
  
      @keyframes slided {
         0% { margin-bottom: -50%;
            margin-left: -100%;
            }
  
  100% { margin-bottom: 0;
        margin-left: 0%;
       }
      }
	  
  .homeimages{
    width:500px;
  height:200px;
   border-radius:50%;
  }
 
  .portal_des_text{
text-align:justify;
  
  }
.home_col_container{
	//display: flex;
  margin: auto;
	 background:#ecf3fc;
}
.home_col_container	div{
 padding:5px;
	 background:white;
	 margin: 2px;
	display: inline;
	} 
.home_col_container div p{

	font-family: Arial, Geneva, Helvetica, sans-serif;	 
text-align:center;
 font: 1rem Geneva;
	font-style: oblique 10deg;
	 }
	 .home_col_container	hr{
 height:5px;
 border-top: 2px dotted #f1f1f1;
	
	} 
  .comenthead{
   margin:auto;
color:#040476;
   background:white;
  width:90%;
    padding:5px;
   font-weight:bold;
  }

.question{
   text-align: center;
 
 color: hsl(224deg 93% 18%);
}

section .subjectfields{
   text-align: center;
 
 color: hsl(121deg 62% 47%);
}
  .fields{
   margin-top:8px;
    margin-left:auto;
    margin-right:auto;
   padding:10px;
   width:90%;
   text-align: center;
  background: linear-gradient(hsl(227deg 29% 73%), hsl(40deg 56% 79%), hsl(238deg 24% 17%));
  border: 2px solid #f6f6f6;
  border-radius: 20px;
	border-color: #4cb0aa;
 color: hsl(138deg 97% 36%);
} 

.successlog_msg{
 
  border: 2px solid #f6f6f6;
  border-radius: 20px;
  border-width: 10px;
	border-color: #419efa;
 background:#fff ;
 margin:5px;;
   padding:10px;
   width:70%;
   text-align: center;
 text-color: #fff;
 
}

.alert{
  border: 2px solid #f6f6f6;
  border-radius: 20px;
  border-width: 10px;
	border-color: #991648;
 background:yellow ;
margin:auto;
   padding:10px;
   width:70%;
   text-align: center;
 text-color: #fff;
 
}

  
  .termlista{
flex: 0 0 45%; 	

  margin: auto;
   
  }
.edfads{
 border: 5px solid #f6f6f6;
  border-radius: 10px;
  
	border-color: #236806;
 background: #e66161 ;
 margin:auto;
	width:150px;
height:60px;	
}
  .glossary{
  border: 5px solid #f6f6f6;
  border-radius: 20px;
  
	border-color: #236806;
 background: #fff ;
 margin:auto;
   padding:5px;
   width:90%;
   text-align: center;
 
 
}

.suggestiondef{
color:black; 
height:80%; '
margin-left:15px;
}

.suggestion{



}
  .leftrightdiv{
  margin:auto;
    padding:5px;
}

  
.leftdiv{

 
}
  .rightdiv{
  
  padding:2px;
    min-width:25%;
   
}
  .rightdivcontainer{
  
   border: 2px solid #f6f6f6;
   background: linear-gradient(to right,  hsl(254.12deg 6.87% 88.18%), hsl(0deg 0% 100%), hsl(0deg 0% 100%));

  border-radius: 10px;
	
  padding:2px;
   
}
  
  .rightbarfield{
  
   border: 2px solid #f6f6f6;
  border-radius: 10px;
	
   background: #ffffff ;
   color: #288e07;
}
  .rightbarcontent {
  padding:10px;
   text-align:left;
   background: #ffffff ;
   color: black;
   border: 2px solid #afb1b4;
}
.rightbarcontent a{
  text-align:left;
   color: black;
	
}
 .rightbarcontent li{
		  
		margin-top:15px; 
	
	 }
  .mainsection{

   background-color: rgb(200, 200, 260);
   background-attachment: scroll;
   position: sticky;
   background-size: auto;
  }
  
  .acc{
background:#070b8c;
   
   display: ;
  grid-template-columns: auto auto;
   grid-auto-rows: auto;
    grid-gap: 10px;
  }
  
  
/* ---------------------- hr ---------------------- */


hr {
	border:none;
	border-top:1px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	}

/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{
	position:relative;
	height:56px;
	color:#E0E0E0;
	background:#143D55;
	width:100%;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	}

#dolphinnav{
	position:relative;
	height:33px;
	font-size:12px;
	text-transform:uppercase;
	font-weight:bold;
	background:#fff url(dolphin_bg.gif) repeat-x bottom left;
	padding:0 0 0 20px;
	}

#dolphinnav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	float:left;
	}

#dolphinnav ul li{
	display:block;
	float:left;
	margin:0 1px;
	}

#dolphinnav ul li a{
	display:block;
	float:left;
	color:#EAF3F8;
	text-decoration:none;
	padding:0 0 0 20px;
	height:33px;
	}

#dolphinnav ul li a span{
	padding:12px 20px 0 0;
	height:21px;
	float:left;
	}

#dolphinnav ul li a:hover{
	color:#fff;
	background:transparent url(dolphin_bg-OVER.gif) repeat-x bottom left;
	}

#dolphinnav ul li a:hover span{
	display:block;
	width:auto;
	cursor:pointer;
	}

#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
	color:#fff;
	background:#1D6893 url(dolphin_left-ON.gif) no-repeat top left;
	line-height:275%;
	}

#dolphinnav ul li a.current span{
	display:block;
	padding:0 20px 0 0;
	width:auto;
	background:#1D6893 url(dolphin_right-ON.gif) no-repeat top right;
	height:33px;
	}
/* ---------------------- END Dolphin nav ---------------------- */

/* ---------------------- END Dolphin nav ---------------------- */

.socialshare{
  padding:10px;
 width:80%;
   background: #ffffff ;
 margin:auto;
	
}
.socialshare-heading{
  margin:auto;
 color:black;
	text-decoration: underline;
  font-weight:bold;
}
.socialshare a{

  display: inline-block;
  margin-left:15px;
	background:#cedae1;
	padding:8px;
	 border: 2px solid #d1fdd4;
  border-radius: 5px;
	
}

.ngramdescr{

 margin:auto;
 color:#389329;
  font-size:80%;
 	width:70%;
  font-weight:bold;
}

.imgram_hr{
border: 3px solid #44da4e;

	
}


.bi-volume-up{
	
  font-size:150%;
	
}
	 .deleteim{
	
  margin:auto;
background:red;		 
	
}
	 /* Style the header: fixed position (always stay at the top) */
.header_container {
  position: fixed;
	margin-bottom:15px;
  z-index: 1;
  width: 100%;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 3px;
  background:;
	display: inline-block;
	
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 3px;
  background: #05e291;
  width: 0%;
}

	 .article_info{
margin:auto;
	margin-bottom:10px;	 
	 }

	  .article_info p{
margin:auto;
	display:inline-block;
	padding:5px;
	 }


.backnext{
	margin:auto;
	display:inline-block;
	padding:5px;
	width:120px;
	margin:10px;
  background: linear-gradient(to bottom, hsl(200deg 23% 74%), rgb(250, 250, 250),  hsl(200deg 34% 71%) );
}
.backnext:hover{
	margin:auto;
	display:inline-block;
	padding:7px;
	margin:7px;
	width:120px;
  background: linear-gradient(to bottom,  hsl(200deg 90.81% 47.54%), rgb(250, 250, 250),  hsl(200deg 85.59% 51.95%) );
}

.home{
	margin:auto;
	display:inline-block;
	padding:5px;
	width:120px;
	margin:10px;
  background: linear-gradient(to bottom, hsl(291.24deg 27.62% 38.85%), rgb(250, 250, 250),  #9C27B0 );
}
.home:hover{
	margin:auto;
	display:inline-block;
	padding:7px;
	margin:7px;
	width:120px;
  background: linear-gradient(to bottom,  hsl(200deg 90.81% 47.54%), rgb(250, 250, 250),  hsl(200deg 85.59% 51.95%) );
}

.pageinfo{
 color:#0696dc;
 font-weight:bold;
  font-size: 1.5em;
	text-decoration:underline;
	
}

.editdiv{
 background:#e6f803;
 background: linear-gradient( #e6f803,white,#e6f803);
	font-weight:bold;
  font-size: 1.5em;
	text-decoration:underline;
	
}

/* /--------------------------------------------Pup-up--------------
			
Popup Styles */

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.popup-content {
  background-color: #fff;
  margin: 20% auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 80%;
  max-width: 600px;
  text-align: center;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close:hover,
.close:focus {
  color: #333;
  text-decoration: none;
}

/* Heading and Paragraph */
.popup-content h2 {
  color: #333;
  margin-bottom: 20px;
}

.popup-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Button Container */
.button-container {
  display: flex;
	color:#d31a1a;
  justify-content: center;
  gap: 10px; /* Space between buttons */
  margin: 10px;
	
}

/* Button Styles */
.popup .button {
  background-color: #007bff;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
  text-decoration: none; /* Remove underline from link */
}

.popup .button:hover {
  background-color: #0056b3;
}

.popup .button.register {
  background-color: #28a745; /* Green color for register */
}

.popup .button.register:hover {
  background-color: #1e7e34; /* Darker green on hover */
}


/* Example Text Styling (optional) */
.protected-text {
  margin-top: 20px;
  font-size: 16px;
}


/* Search pdf */
.legal_instrument_summary {
 background-color: #c8f7d3;
  font-size: 16px;
	font-weight:bold;
}
span.legal_instrument_details {
 color: #1e7e4;
	 background-color: #f4fff8; 
  font-size: 11px;
	text-align:left;
	  display: inline-block;
  padding: 5px; /* Adjust as needed */
}

.pdf-icon{
	width:30px;
	display:inline;
}






















 /*------Larger screen-----*/
@media (min-width: 800px) {
.closemenu, .openmenu {
	display: none;

				}
	nav.site-navigation{	
	  float: right;
   padding: 1px;
  margin-right:10px;
  display: inline-block;
	}
	.termlistul{
   width:95%;
  display: flex;
   	flex-wrap:wrap;

		  }
	.img_defs, #tocfimage, .home_col_container,.leftrightdiv,
	div.columns, div.image_and_text{
		display:flex;
		
	}
	div.acc{
		display:grid;
	}
	
.acc, termlistul{
display:inline-block;
	
}

	
}

 /*------Larger screen end-----*/