/*
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
*/

:before,
:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}

.togglebox {
 width: 200px;
 height: auto;
 margin: 0 0 0 0;
/* background: #3c566f; */
/* background: #E9E9E9; */
}

input[type="radio"] {
 position: absolute;
 opacity: 1;
}

label {
 position: relative;
 display: block;
 height: auto;
 line-height: 18px;
 padding: 5px 10px 5px 0px;
 font-size: 1em;
 font-weight: bold;
 color: #ffffff;
/* background: #2e4155; */
 background: #869DC6;
 cursor: pointer;
 border-top : 2px solid #E9E9E9;
 border-radius: 25px 0px 0px 25px; // lengkung menu
}

label:hover {
 background: #d0d0d0;
 color:#000000;
}

label:after {
/* content: '\f078';  // icon */
 top: 0px;
 right: 20px;
 font-family: fontawesome;
 color:#000000;
}

.content {
 height: 0;
 overflow: hidden;
 padding: 0 10px 0 0;
}

input[type="radio"]:checked ~ label {
/* color: rgba(255, 255, 255, 0.8); */
 color:#ffff00;
}

input[type="radio"]:checked ~ label:after {
 transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}

input[type="radio"]:checked ~ .content {
 height: auto;
}

.p1 {
 margin: 15px 0;
 padding: 0 5px 0px 0;
 font-size: 1em;
 line-height: 24px;
 color: #000000;
 text-align:right;
}