.spoilnote{display:block;margin:10px;padding:0;}
.spoilnote .tombol{background:#E58BAA;color:#fff;cursor:pointer;font-family:Quicksand,sans-serif;font-weight:700;padding:10px;border:none;outline:none;border-radius:3px;-moz-border-radius:3px;}
.spoilnote .tombol:before{content:'Important Note!';}
.spoilnote .tombol:focus:before{content:'Important Note!';}
.spoilnote .tombol:focus{pointer-events:none;cursor:pointer;}
.spoilnote .isi{background:#1f2429;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease;font-family:Quicksand,sans-serif;font-weight:550; color: #fff}
.spoilnote .tombol:focus + .isi{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease;}
.spoilnote .tombol:after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float:right;}
.spoilnote .tombol:focus::after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float: right;}