:root {
	--bs-primary: var(--text-color);
	
	--bg-color: #fff;
	--text-color: #444;
	--base-text-color: #444;
	--deep-bg-color: #fff;
	--bg-color-stronger: #f3f3f3;
	--bg-color-strong: #e7e7e7;	
	--border-color: #f3f3f3;
	--shadow-color : #e6e6e6;
}
:root.light-theme {
	--bg-color: #fff;
	--text-color: #444;
	--base-text-color: #444;
	--deep-bg-color: #ddd;
	--bg-color-stronger: #f3f3f3;
	--bg-color-strong: #e7e7e7;
	--border-color: #f3f3f3;
	--shadow-color : #e6e6e6;
}

:root.dark-theme {
	--bg-color: #272727;
	--text-color: #888;
	--base-text-color: #f3f3f3;
	--deep-bg-color: #444;
	--bg-color-stronger: #333;
	--bg-color-strong: #474747;	
	--border-color: #000;
	--shadow-color : #1c1c1c;
} 

body {
	font-family:"Roboto", sans-serif;
	background: var(--bg-color);
	color: var(--base-text-color);
	font-size:18px;
}

a {
	color: var(--text-color);
	text-decoration: underline;
}

.accordion-button {
	border: var(--border-color) !important;
	background: var(--bg-color) !important;
	color: var(--base-text-color) !important;
	border-radius: 6px !important;
}

.accordion-button:not(.collapsed) {
	border-bottom: 1px var(--border-color) solid !important;
	box-shadow: none !important;
	color: var(--text-color) !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.accordion-button:focus {
	box-shadow: none !important;
}

.accordion-button:hover {
	color: var(--text-color) !important;
}

.accordion-button:not(.collapsed)::after {
	fill: var(--text-color) !important;
}

.accordion-button::after {
	fill: var(--bg-color-strong) !important;
}

.accordion-item {
	border: var(--border-color) !important;
	background: var(--bg-color) !important;
	color: var(--base-text-color) !important;
}

.accordion-item:last-of-type {
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}


::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-color-strong);
    border-radius: 5px;

}

.btn-main {
	background: var(--text-color) !important;
	color: #ffffff !important;
}

.btn-main:hover {
	border-color: var(--text-color);
	background: var(--bg-color-strong);
	color: var(--text-color);
}

.btn-outline-main {
	border-color: var(--text-color);
	background: var(--bg-color);
	color: var(--text-color);
	font-weight:300;
}

.btn-outline-main:hover {
	background: var(--text-color);
	color: #ffffff;
}

.topic-btn-description {
	color: #888;
}

.main-color {
	color: var(--text-color);
}

.main-color-stronger {
	color: var(--bg-color-stronger);
}

.main-color-strong {
	color: var(--bg-color-strong);
}

.expandable {
	border: 1px #e3e3e3 solid;
	color: var(--base-text-color);
}

.dialog {
	padding: 10px 15px;
	margin-bottom: 5px;	
	border-radius: 3px;	
}

.link-button {
	position:relative;
	white-space: nowrap;	
	border-left: 3px var(--bg-color-strong) solid;
	color: var(--base-text-color);
	cursor: pointer;
	border-radius: 0;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;		
	padding: 10px 15px;
	margin-bottom: 5px;	
	box-shadow: rgba(0,0,0,0.10) 0 1px 9px 0;
	overflow:hidden;
	text-overflow: ellipsis;

}

.link-button:hover {
	border-left: 3px var(--text-color) solid;
	color: var(--text-color);
}

.hover-scale {
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.hover-scale:hover {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
}

#loader {
	background:#fff;
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	z-index: 999;
	opacity: 0.7;
}

h5 {
	font-size: 1.2rem;
}

.object {
	box-shadow: rgba(0,0,0,0.10) 0 1px 9px 0;
	border-radius:6px;
}

/* Formatting search box */
.search-box{
	width: 300px;
	max-width:100%;
	position: relative;
	display: inline-block;
	font-size: 14px;
	
}
.search-box input[type="text"]{
	padding: 5px 10px;
	border: 0;
	border-bottom: 2px var(--text-color) solid;
	font-size: 18px;
	font-weight:300;
	margin-bottom: 8px;
	border-radius: 6px 6px 0 0;
	background: var(--bg-color);
	color: var(--base-text-color);
}
.search-result{
	position: absolute;        
	z-index: 999;
	top: 100%;
	left: 0;
}
.search-box input[type="text"], .search-result{
	width: 100%;
	box-sizing: border-box;
}
/* Formatting result items */
.search-result p{
	margin: 0;
	padding: 7px 10px;
	border: 1px solid #CCCCCC;
	border-top: none;
	cursor: pointer;
	background: var(--bg-color);
}
.search-result p:hover{
	background: #f2f2f2;
}

.search-result b {
	font-size: 1.2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width:100%;
	display:inline-block;
}
.search-result span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	display: inline-block;
}

.cursor-default {
	cursor: default;
}

.cursor-pointer {
	cursor: pointer;
}