.spoiler-label {
  font-size: 1em;
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;
}
.spoiler-input {display: none;} /*Hide input element*/
.spoiler-content {margin-top: 1.5em;}
.spoiler-input:not(checked) ~ .spoiler-content {display: none;}
.spoiler-input:checked ~ .spoiler-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler2-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler2-input {display: none;} /*Hide input element*/
.spoiler2-content {margin-top: 1.5em;}
.spoiler2-input:not(checked) ~ .spoiler2-content {display: none;}
.spoiler2-input:checked ~ .spoiler2-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler3-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler3-input {display: none;} /*Hide input element*/
.spoiler3-content {margin-top: 1.5em;}
.spoiler3-input:not(checked) ~ .spoiler3-content {display: none;}
.spoiler3-input:checked ~ .spoiler3-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler4-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler4-input {display: none;} /*Hide input element*/
.spoiler4-content {margin-top: 1.5em;}
.spoiler4-input:not(checked) ~ .spoiler4-content {display: none;}
.spoiler4-input:checked ~ .spoiler4-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler5-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler5-input {display: none;} /*Hide input element*/
.spoiler5-content {margin-top: 1.5em;}
.spoiler5-input:not(checked) ~ .spoiler5-content {display: none;}
.spoiler5-input:checked ~ .spoiler5-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler6-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler6-input {display: none;} /*Hide input element*/
.spoiler6-content {margin-top: 1.5em;}
.spoiler6-input:not(checked) ~ .spoiler6-content {display: none;}
.spoiler6-input:checked ~ .spoiler6-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler7-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler7-input {display: none;} /*Hide input element*/
.spoiler7-content {margin-top: 1.5em;}
.spoiler7-input:not(checked) ~ .spoiler7-content {display: none;}
.spoiler7-input:checked ~ .spoiler7-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler8-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler8-input {display: none;} /*Hide input element*/
.spoiler8-content {margin-top: 1.5em;}
.spoiler8-input:not(checked) ~ .spoiler8-content {display: none;}
.spoiler8-input:checked ~ .spoiler8-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler9-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler9-input {display: none;} /*Hide input element*/
.spoiler9-content {margin-top: 1.5em;}
.spoiler9-input:not(checked) ~ .spoiler9-content {display: none;}
.spoiler9-input:checked ~ .spoiler9-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler10-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler10-input {display: none;} /*Hide input element*/
.spoiler10-content {margin-top: 1.5em;}
.spoiler10-input:not(checked) ~ .spoiler10-content {display: none;}
.spoiler10-input:checked ~ .spoiler10-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler11-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler11-input {display: none;} /*Hide input element*/
.spoiler11-content {margin-top: 1.5em;}
.spoiler11-input:not(checked) ~ .spoiler11-content {display: none;}
.spoiler11-input:checked ~ .spoiler11-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}

.spoiler12-label {
  font-size: 1em; 
  font-family: 'Helvetica' serif;
  color: white;
  background: #0030A0;
  padding: 0.4em;
  cursor: pointer;
  margin-top: 20px; margin-bottom: 20px;}
.spoiler12-input {display: none;} /*Hide input element*/
.spoiler12-content {margin-top: 1.5em;}
.spoiler12-input:not(checked) ~ .spoiler12-content {display: none;}
.spoiler12-input:checked ~ .spoiler12-content {display: block; border: 2px dotted #000000; background: #f7f7f7; padding: 5px; padding-bottom: 10px; padding-top: 10px;}
/*
Example-HTML Code:
<input type="checkbox" value="selected" id="someID" class="spoiler-input">
<label for="someID" class="spoiler-label">*Spoiler*</label>
<div role="spoiler" id="spoilerID" class="spoiler-content">
 ....... CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT ......
 </div> 
*/