:root {
  --scrollbar-track-color: gainsboro;
  --scrollbar-color: green;
  --scrollbar-minlength: 1.5rem; 
}
.summaryTool::-webkit-scrollbar {
  height: 20px;
  width: var(--scrollbar-size);
}
.summaryTool::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.summaryTool::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 20px;
}
.summaryTool::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.summaryTool::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}

.sv-btn.sv-footer__prev-btn{
	display: none;
}

.mainContent{
	min-height: 50px; width: 66%; float: left; background-color: white;
}

.introPage{
	padding: 5px;
}

body{
	background-color: white;
	font-size: 24px;
}

button{
	font-size: 24px;
}

textarea { font-size: 18px; }

.sidebar{
	float: right;
	min-height: 50px; width: 33%;
}

.robotToolHeader{
	position: relative;
	left: 10%;
	width: 899px; 
	text-align: center;
	font-weight: bold;
	padding-bottom: 10px;
}

.robotTool{
	background-image: url('./robotImages/robotScreen.png'); 
	width: 899px; 
	height: 380px; 
	position: relative; 
	left: 10%; 
	bottom: 30px;
	z-index: 2;
	margin-top: 45px;
}

.robotScreen{
	float: right;
	min-height: 50px; 
}

.robotImg{
	float: right;
	min-height: 50px;
}

.header{
	min-height: 50px; width: 100%; float: left; background-color: white; padding-left: 15px;
}

.configs{
	min-height: 50px; width: 100%; float: left; background-color: white; padding-left: 7px;
}

.summaryContainer{
	min-height: 50px; 
	width: 100%; 
	height: 100%; 
	float: left; 
	background-color: white; 

}

.question{
	border: 3px solid red;
	max-width: 80%;
	padding-left: 20px;
	padding-bottom: 20px;
	left: 30px;	
}

.questionPage img{
	width: 70%; position: relative; left: 30px; padding: 5px; background-color: blue
}

input[type=radio] {
    border: 0px;
    width: 50px;
    height: 2.5em;
}

.footer{
	min-height: 50px; width: 100%; float: left; background-color: gold; margin-top: 6px; 
}

.footerText{
	margin-left: 10px; margin-right: 10px; float: left; width:100%;
}

.continue{
	float: left; margin: 10px;
}

td {
	text-align: center; 
	border-right: 1px dotted black;
	line-height: 0.9;
	padding: 5px;
}

/* toggle in label designing */
.toggle {
	position : relative ;
	display : inline-block;
	width : 70px;
	height : 38px;
	background-color: red;
	border-radius: 30px;
	border: 2px solid black;
}

/* After slide changes */
.toggle:after {
	content: '';
	position: absolute;
	width: 39px;
	height: 39px;
	border-radius: 50%;
	background-color: black;
	top: 0px;
	left: 0px;
	transition:  all 0.5s;
}

/* Toggle text */
 p.toggleLabel {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	width: 100%;
	font-size: 13px;
} 

/* Checkbox checked effect */
.checkbox:checked + .toggle::after {
	left : 32px; 
}
                
/* Checkbox checked toggle label bg color */
.checkbox:checked + .toggle {
	background-color: green;
}
                
/* Checkbox vanished */
.checkbox { 
	display : none;
}