#right, #left{
    float: left;
    height: 100vh;
}
#left{
    width: 100vw;
    overflow-y: auto;
	scroll-behavior: smooth;
}
#right{
    width: 0;
    overflow: hidden;
    background-color: #ccc;
}
.open #left{
	width: 200px;
	direction: rtl;
	-moz-mask-image: -moz-linear-gradient(top, rgba(68,68,68,0) 0%, rgba(68,68,68,1) 3%, rgba(68,68,68,1) 97%, rgba(68,68,68,0) 100%);
	-webkit-mask-image: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(68,68,68,0)), color-stop(3%, rgba(68,68,68,1)), color-stop(97%, rgba(68,68,68,1)), color-stop(100%, rgba(68,68,68,0)));
	-webkit-mask-image: -webkit-linear-gradient(top, rgba(68,68,68,0) 0%, rgba(68,68,68,1) 3%, rgba(68,68,68,1) 97%, rgba(68,68,68,0) 100%);
	-o-mask-image: -o-linear-gradient(top, rgba(68,68,68,0) 0%, rgba(68,68,68,1) 3%, rgba(68,68,68,1) 97%, rgba(68,68,68,0) 100%);
	-ms-mask-image: -ms-linear-gradient(top, rgba(68,68,68,0) 0%, rgba(68,68,68,1) 3%, rgba(68,68,68,1) 97%, rgba(68,68,68,0) 100%);
	mask-image: linear-gradient(to bottom, rgba(68,68,68,0) 0%, rgba(68,68,68,1) 3%, rgba(68,68,68,1) 97%, rgba(68,68,68,0) 100%);
}
.open #right{ width: calc(100vw - 200px); overflow-y: auto; }
.open h3{ display: none; }
.open .element{
    padding-left: 0;
    padding-right: 0;
}
.element.selected{ border-radius: 16px 0 0 16px; }

.open .element:first-of-type{ margin-top: 5vh; }
.open .element:last-of-type{ margin-bottom: 5vh; }

#right .left, #right .right, #right .center{ background-color: #eee; }
#right .left{ background-color: #b8daff; text-transform: capitalize; }
#right .right{ font-family: monospace; }

.qr img { display: inline-block !important; }