.accordion {
 	box-sizing: border-box;
 	display: flex;
 	font-family: 'degular', Helvetica, sans-serif;
 	overflow: hidden;
 	width: 100%;
    border-radius: 0.5em;
 }

 .accordion-select {
 	cursor: pointer;
 	margin: 0;
 	opacity: 0;
 	z-index: 1;
 }

 .accordion-title {
 	position: relative;
 }

 .accordion-title:not(:nth-last-child(2))::after {
 	border: 1px solid transparent;
 	bottom: 0;
 	content: '';
 	left: 0;
 	position: absolute;
 	right: 0;
 	top: 0;
 }

 .accordion-title span {
 	top: 0px;
 	box-sizing: border-box;
 	display: block;
 	position: absolute;
 	white-space: nowrap;
 	width: 100%;
 }

 .accordion-content {
 	box-sizing: border-box;
 	overflow: auto;
 	position: relative;
 	transition: margin 0.3s ease 0.1s;
 }

 .accordion-select:checked+.accordion-title+.accordion-content {
 	margin-bottom: 0;
 	margin-right: 0;
 }

 /* Generated styles starts here */

 .accordion {
 	border-color: #0f580f;
 	border-style: solid;
 	border-width: 1px;
 	flex-direction: row;
 	height: 96vh;
 }

 .accordion-title,
 .accordion-select {
 	background-color: #b5b5b5;
 	color: #000000;
 	width: 48px;
 	height: 100%;
 	font-size: 16px;
 }

 .accordion-select {
 	margin-bottom: -48px;
 	margin-right: -48px;
 }

 .accordion-title:not(:nth-last-child(2))::after {
 	border-bottom-color: transparent;
 	border-right-color: rgb(0, 0, 0);
 }

 .accordion-select:hover+.accordion-title,
 .accordion-select:checked+.accordion-title {
 	background-color: #000000;
    color:#fff;
 }

 .accordion-title span {
 	transform: rotate(90deg);
 	-ms-writing-mode: lr-tb;
 	writing-mode: sideways-lr;
 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 	padding-bottom: 24px;
 	padding-top: 24px;
 	line-height: 48px;
 }

 .accordion-content {
 	background-color: hsl(0, 0%, 20%);
 	color: hsl(143, 10%, 86%);
 	height: 100%;
 	margin-bottom: 0;
 	margin-right: calc(-1 * calc(100% - 384px));
 	padding: 24px;
 	width: calc(100% - 384px);
 }