.question-container {display: flex;  align-items: stretch; justify-content: space-between; margin: 20px 0px 0px 0px; }
.answer {padding: 10px 20px; border: none; cursor: pointer; flex: 1; transition: background-color 0.3s ease; position: relative; overflow: hidden;}

.left {text-align: right; padding-right: 34px; } 
.right {padding-left: 34px;} 
.left:hover, .right:hover{background-color: #fff; border-color: #FFF;}
.left:hover p, .right:hover p{color:#53519d !important;}

.highlight {background-color: #fff; border-color: #fff;}
.highlight p{color:#53519d !important;}

.toggle-button {position: relative; width: 60px; height: 30px; background-color: #53519d; border: 2px solid #fff; border-radius: 30px; cursor: pointer; margin: 20px -17px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; z-index: 1;  box-shadow: 0 0 0 8px #53519d; }

.toggle-circle {position: absolute; width: 24px; height: 24px; background-color: #FFF; border-radius: 50%; transition: left 0.3s ease; }
.toggle-left .toggle-circle {left: 2px; }
.toggle-right .toggle-circle {left: 30px; }

.toggle-circle::before {content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #53519d transparent transparent; transform: rotate(180deg); transition: transform 0.3s ease;}

.toggle-left .toggle-circle::before {transform: rotate(360deg); left: 6px; top: 6px; }
.toggle-right .toggle-circle::before {transform: rotate(180deg); right: 6px; top: 6px; }

.hidden-div {max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease; margin-top: 10px;  display: block; }
.hidden-div.visible {max-height: 300px; opacity: 1; transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease; margin-bottom: 30px;}
.hidden-div h3{color:#FFF;}

#divA, #divB {width: 50%;}
#divA ul, #divB ul {list-style-type: none; padding: 0;}
#divA li {cursor: pointer; padding: 5px 0px; transition: color 0.3s, background-color 0.3s; color:#FFFFFF}
#divB li {padding: 4.5px 0px;}
#divA li:hover {  background-color: #f0f0f0;  color: #007BFF; }

.hidden-div label:hover  {  background-color: #f0f0f0;  color: #53519d; }
.hidden-div label { width:100%; display: block; color:#fff }

.choices{width:190px; height:auto; margin:10px; display:flex; flex-direction:column}
.choices-image{width:100%; height:auto}
.full-check{visibility:hidden; display:none;}

#orderedList li{color:#FFFFFF;}

input::placeholder {color: #a7a6cf; font-style: italic; font-size: 14px; opacity: 1;}
textarea::placeholder {color: #a7a6cf;}
input::-webkit-input-placeholder {color: #a7a6cf;}
input::-moz-placeholder {color: #a7a6cf;}
input:-ms-input-placeholder {color: #a7a6cf;}
input::-ms-input-placeholder {color: #a7a6cf;}

	.choices{width:190px; height:auto; margin:10px; display:flex; flex-direction:column}
	.choices-image{width:100%; height:auto}
	
	button{font-size:14px; display:inline-block; color: #FFFFFF !important; text-decoration:none !important; border:#f9a139 1px solid; border-radius: 18px; background-color:#f9a139; height:30px; padding:3px 10px 3px 10px; margin: 4px 4px; font-weight:bold}	
	button:hover{background-color:#53519d;  border:#53519d 1px solid; cursor:pointer}
	.full-check{visibility:hidden; display:none;}