body,
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%!important;
} 

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: 'Roboto', sans-serif;
	background-color: var(--bg-color);
}
:root {
	--box-overlay:rgba(85, 102, 136, 0.2);
	--bg-popup:rgba(0, 0, 0, 0.31);
	--bg-color:#F6F6F6;
	--green-color:#20e220;
	--red-color:rgb(252, 4, 4);
	--yellow-color:#dd9927;
	--orange-color:#cf9800;
	--grey-color:#a8a2a2;
	--disable-color:#b8b8b8;
	--dark-color:#404040;
	--medium-color:#cccccc;
	--light-color:#D1D1D1;
	--light-grey:#f0f0f0;
	--light-blue: #dcdfe6;
	--super-light-blue: #f6f8fa;
	--super-light-blue-hl: #eef0f2;
	--pale-blue: #e4e8ee;
	--dark-blue: #556688;
	--medium-blue: #8998b6;
	--black-color:#000000;
	--white-color:#ffffff;
	--tooltip-color:#ffffe7;
	--light-red: #cf000030;

}
.fs_wrapper {
	padding-top: 20px;
}
.fs_main_heading{
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 34px;
	margin-top:10px;
}
.fs_cstm_slider .MuiSlider-thumb.MuiSlider-active{
	box-shadow: none;
}
.fs_cstm_slider .MuiSlider-thumb.Mui-focusVisible,
.fs_cstm_slider .MuiSlider-thumb:hover {
	box-shadow: none;
}
  
textarea {
	border: 2px solid var(--light-blue);
	border-radius: 4px;
	font-family: 'Roboto', sans-serif;
	color:var(--light-color);
	padding:10px;
}
textarea:focus {
	color:black;
}

/* =============== Tooltip =============== */
/* NOTE: useful mostly in buttons (may not look weel in other type of objects) */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
	width: 120px;
	background-color: var(--tooltip-color);
	color: var(--black-color);
	text-align: center;
	padding: 5px 0;
	border-radius: 3px;
	border:1px solid grey;

	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 999999999;
	top:80%;
	left:80%;

	/* animation */
	transition:0.5s;
	transition-delay:0.3s;
	opacity:0;
}
.tooltip:hover .tooltiptext {
	opacity:1;
}