body {
	background: var(--bg-main-light);
	/*font-family: Arial, sans-serif;*/
	/*color: #464646;*/
	margin: 0px;
	padding: 0px;
	/*overflow-x: hidden;*/
	box-sizing: border-box;
}







/************************************* Style for the header and theme menu */
#top-head {

    background: var(--bg-main);
    color: var(--text-color);
	

}

#container-header{
	/*fixed position*/
	position: fixed;
	width: 100vw;
	top: 0;
	z-index: 999;

}


#logo-image{
	border-radius: 50%;
}

#theme-navbar{
	background-color: var(--bg-theme-navbar);
	border-top: 1px solid #c6c6c6;
}

a.theme-item, a.suggestionLink {
	color: var(--text-color);
}

a.theme-item:hover, a.suggestionLink:hover {
	color: var(--bg-main-hover);
}

/*********************************************Search*/

#search-results .list-group-item {
  cursor: pointer;
}

#search-results .list-group-item:hover {
  background-color: #f8f9fa;
}



/*********************************************left menu*/

#main-container {

	padding-top: 210px;
}

/*menu category head*/






.accordion-button, .accordion-button:not(.collapsed) {
	color: var(--text-color); 
	background-color: var(--bg-accordion-button);
}

.accordion-body, .accordion-collapse .list-group-item, #suggestionBox .list-group-item {
    background-color: var(--bg-theme-navbar); 
}
.accordion-collapse .list-group-item a {
    color: var(--text-color); 
}
.accordion-collapse .list-group-item a:hover {
    color: var(--bg-main-hover); 
}

/* theme-details */

#theme-details-title, #home-details-title, #home-description-title {
	text-align: center;
}

/* Content */
.boxContent {

  background: var(--bg-box-content);
	
}

.boxGrouped {
	margin-bottom: 15px;
  background: var(--bg-box-content);
  /*border-radius: 30px;*/
  padding: 20px;	
}
.main-content {
	padding: 0px 0px;
}

.preserve-newlines {
    white-space: pre-line;
}

.main-content h1 {
	text-align: center;
	padding: 30px 0px;
	color: var(--text-hx-color);
}

.main-content h2,
.main-content h3,
.main-content h4 {
	color: var(--text-hx-color);
	padding: 0px 0px 20px 0px;
}


.main-content li {
	list-style-type: circle;
}

pre.codeSection {
    background-color: var(--bg-code-section);
	padding: 30px;
	border: 1px solid gray;
	border-radius: 25px;
	margin-top: 1rem;
}

.hljs {
	background-color: var(--bg-code-section);
}

.feature-link {
    display: block;
    text-decoration: none; /* Remove underline */
    /*color: inherit; /* Inherit text color from parent */
	margin: 10px 20px;
	background: var(--bg-theme-navbar);
	padding: 20px;
	min-height: 220px;
}

a.feature-link {
	color: var(--text-color);
}

a.feature-link:hover {
	color: var(--bg-main-hover);
}

/*FAQ*/

.faq-block {
    /*background-color: #f9f9f9;*/
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}

.faq-block h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-hx-color);
}

.faq-block ul {
    list-style: none;
    padding: 0;
}

.faq-block li {
    margin-bottom: 20px;
}

.faq-block .question {
    font-weight: bold;
    /*color: #333;*/
    margin-bottom: 8px;
}

.faq-block .answer {
    /*color: #666;*/
    line-height: 1.6;
}

/*Ingredient*/

.bg-prepTime {
	background: rgb(74, 107, 155);
}

.bg-cookTime {
	background: rgb(77, 132, 106);
}

.bg-servings {
	background: rgb(238, 213, 136);
}

/********************************************* footer */

.footer {
	background: var(--bg-main);
	color: white;
	text-align: center;
	padding: 15px;
	font-size: 14px;
	/*font-family: Arial, sans-serif;*/
	position: relative;
	bottom: 0;
	border-radius: 0px;
	border-top: 1px solid #c6c6c6;
}
/*footer on bottom*/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

#main-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#footer-container {
    flex-shrink:0;
	margin-top: 50px;
}

/********************************************* info page */
#info-details-container table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1em;
	  border: 1px solid grey;
}
#info-details-container td, #info-details-container th {

	  border: 1px solid grey;
}

#info-details-container th {

	  background-color: #e6e6e6;
}