.example-parent {
    border: 2px solid #DFA612;
    color: black;
    display: flex;
    font-family: sans-serif;
    font-weight: bold;
}

.example-origin {
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
}

.example-draggable {
    background-color: #4AAE9B;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
}

.example-dropzone {
    background-color: #6DB65B;
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
}

.brs {
    text-indent: 0.5in;
    text-align: justify;
    font-size: 15pt;
}

.bord {
    border-left: 6px solid green;
    background-color: #0B4619;
    border-radius: 0px 10px 0px 10px;
    width: 25%;
    color: white;
    padding: 5px;
}

.bord2 {
    border-left: 6px solid green;
    background-color: #0B4619;
    border-radius: 0px 10px 0px 10px;
    width: 40%;
    color: white;
    padding: 10px;
}

.bord3 {
    border-left: 6px solid #0B4619;
    background-color: green;
    border-radius: 0px 10px 0px 10px;
    width: auto;
    max-width: auto;
    color: white;
    padding: 10px;
}

.bordU {
    border: 2px solid #0B4619;
    padding: 10px;
    border-radius: 10px 0px 10px 0px;
    margin-left: 5px;
}

.bordU2 {
    border: 2px solid #0B4619;
    padding: 10px;
    border-radius: 10px 0px 10px 0px;
    margin-left: 5px;
    width: 50%;
}

.bordU2 ol li {
    color: black;
}

.isicontent {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* font-family: candara; */
    font-size: 17px;
    line-height: 1.5;
    text-align: justify;
    float: left;
    color: black;
}

.simbol>ul>li {
    list-style: square;
    margin-left: 40px;
    font-size: 17px;
}

.nomor>ol>li {
    list-style: number;
    margin-left: 40px;
    font-size: 17px;
}

.bg-utama {
    /* background-image: url('../images/bgnew.png');
    background-repeat: no-repeat;
    background-size: 100%; */
    background-color: #fffdd0;
}

.bgr2-utama {
    /* background-image: url('../images/bgnew.png');
    background-repeat: no-repeat;
    background-size: 100%; */
    background-color: #000000;
}

.bgr-utama {
    background-image: url('../images/bgnew.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.card {
    margin-right: -40px;
}

.boks>ul>li {
    list-style: square;
    margin-left: 40px;
    margin-top: 8px;
}

.angka>ol>li {
    list-style: lower-alpha;
    font-size: 15pt;
    margin-left: 40px;
}
.formsingkat{
    text-align: center;
    width: 40px;
}
.formsingkat2{
    text-align: center;
    width: 70px;
}
.boxhuruf {
    text-align: center;
    width: 100px;
}

.boxhuruf2 {
    text-align: center;
    width: 150px;
}

.ayoamati {
    width: 10%;
}

.warna-danger {
    border-color: red;
    background-color: red;
    color: white;
}

.warna-success {
    border-color: green;
    background-color: green;
    color: white;
}

.btnkuis {
    width: 45px;
    height: 45px;
    padding: 0px;
    border: 1px solid brown;
    background-color: brown;
  }
.btnkuis:hover{
    width: 45px;
    height: 45px;
    padding: 0px;
    border: 1px solid rgb(197, 80, 80);
    background-color: rgb(179, 99, 7);
  }


.btnsize {
    width: 45px;
    height: 45px;
    padding: 0px;
    border: 1px solid brown;
    background-color: rgb(255, 255, 255);
  }
.btnsize:hover{
    width: 45px;
    height: 45px;
    padding: 0px;
    color: wheat;
    border: 1px solid brown;
    background-color: brown;
  }
.btnsize:focus{
    color: wheat;
    border: 1px solid brown;
    background-color: brown;
}

.pembahasan {
    border: 2px solid #0b4619;
}

.pembahasan2 {
    color: #0b4619;
}

.content {
    color: black;
}

.drag1 {
    margin-top: 2px;
    padding: 3px;
    width: 100px;
    border: 1px solid #000;
}

.div1 {
    min-width: 100px;
    min-height: 20px;
    padding: 2px;
    border: 1px solid #000;
}

.div2 {
    min-width: 150px;
    min-height: 200px;
    padding: 2px;
    /* border: 1px solid #000; */
}

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}

.scene {
    width: 200px;
    height: 200px;
    border: 1px solid #CCC;
    margin: 80px;
    perspective: 400px;
}

.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: transform 1s;
}

.cube.show-front {
    transform: translateZ(-100px) rotateY(0deg);
}

.cube.show-right {
    transform: translateZ(-100px) rotateY(-90deg);
}

.cube.show-back {
    transform: translateZ(-100px) rotateY(-180deg);
}

.cube.show-left {
    transform: translateZ(-100px) rotateY(90deg);
}

.cube.show-top {
    transform: translateZ(-100px) rotateX(-90deg);
}

.cube.show-bottom {
    transform: translateZ(-100px) rotateX(90deg);
}

.cube__face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid black;
    line-height: 200px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.cube__face--front {
    background: hsla(0, 100%, 50%, 0.7);
}

.cube__face--right {
    background: hsla(60, 100%, 50%, 0.7);
}

.cube__face--back {
    background: hsla(120, 100%, 50%, 0.7);
}

.cube__face--left {
    background: hsla(180, 100%, 50%, 0.7);
}

.cube__face--top {
    background: hsla(240, 100%, 50%, 0.7);
}

.cube__face--bottom {
    background: hsla(300, 100%, 50%, 0.7);
}

.cube__face--front {
    transform: rotateY(0deg) translateZ(100px);
}

.cube__face--right {
    transform: rotateY(90deg) translateZ(100px);
}

.cube__face--back {
    transform: rotateY(180deg) translateZ(100px);
}

.cube__face--left {
    transform: rotateY(-90deg) translateZ(100px);
}

.cube__face--top {
    transform: rotateX(90deg) translateZ(100px);
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

label {
    margin-right: 10px;
}


.scene {
    width: 300px;
    height: 200px;
    border: 1px solid #CCC;
    margin: 80px;
    perspective: 400px;
}

.box {
    width: 300px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-50px);
    transition: transform 1s;
}

.box.show-front {
    transform: translateZ(-50px) rotateY(0deg);
}

.box.show-back {
    transform: translateZ(-50px) rotateY(-180deg);
}

.box.show-right {
    transform: translateZ(-150px) rotateY(-90deg);
}

.box.show-left {
    transform: translateZ(-150px) rotateY(90deg);
}

.box.show-top {
    transform: translateZ(-100px) rotateX(-90deg);
}

.box.show-bottom {
    transform: translateZ(-100px) rotateX(90deg);
}


.box__face {
    position: absolute;
    border: 2px solid black;
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.box__face--front,
.box__face--back {
    width: 300px;
    height: 200px;
    top: 0px;
    left: 0px;
    line-height: 200px;
}

.box__face--right,
.box__face--left {
    width: 100px;
    height: 200px;
    left: 100px;
    top: 0px;
    line-height: 200px;
}

.box__face--top,
.box__face--bottom {
    width: 300px;
    height: 100px;
    left: 0px;
    top: 50px;
    line-height: 100px;
}

.box__face--front {
    background: hsla(0, 100%, 50%, 0.7);
}

.box__face--right {
    background: hsla(60, 100%, 50%, 0.7);
}

.box__face--back {
    background: hsla(120, 100%, 50%, 0.7);
}

.box__face--left {
    background: hsla(180, 100%, 50%, 0.7);
}

.box__face--top {
    background: hsla(240, 100%, 50%, 0.7);
}

.box__face--bottom {
    background: hsla(300, 100%, 50%, 0.7);
}

.box__face--front {
    transform: rotateY(0deg) translateZ(50px);
}

.box__face--back {
    transform: rotateY(180deg) translateZ(50px);
}

.box__face--right {
    transform: rotateY(90deg) translateZ(150px);
}

.box__face--left {
    transform: rotateY(-90deg) translateZ(150px);
}

.box__face--top {
    transform: rotateX(90deg) translateZ(100px);
}

.box__face--bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

label {
    margin-right: 10px;
}

.pyramid {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateY(326deg) rotateX(2deg) rotateZ(359deg);
}

.side {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0.7;
    border: 100px solid transparent;
    border-bottom: 200px solid red;
    border-top: 0px;
}

.one {
    transform: rotateX(30deg);
    transform-origin: 0 0;
}

.two {
    transform-origin: 100px 0;
    transform: rotateY(90deg) rotateX(-30deg);
    border-bottom-color: purple;
}

.three {
    transform-origin: 100px 0;
    transform: rotateY(270deg) rotateX(-30deg);
    border-bottom-color: hotpink;
}

.four {
    transform-origin: 100px 0;
    transform: rotateY(0) rotateX(-30deg);
    border-bottom-color: yellow;
}

.base {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(73px) rotateX(90deg);
    border: 0;
    background: blue;
}

@keyframes rotate {
    from {
        transform: rotateY(0) rotateX(30deg) rotateZ(30deg);
    }

    to {
        transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);
    }
}

.pyramid {
    animation: rotate 5s linear infinite;
}