/*  Fonts  */


@font-face {


  font-family: circularStd-book;


  src: url(../fonts/CircularStd-Book.otf);


}


@font-face {


  font-family: circularStd-bookitalic;


  src: url(../fonts/CircularStd-BookItalic.otf);


}


@font-face {


  font-family: circularStd-bold;


  src: url(../fonts/CircularStd-Bold.otf);


}


@font-face {


  font-family: circularStd-bolditalic;


  src: url(../fonts/CircularStd-BoldItalic.otf);


}


@font-face {


  font-family: circularStd-medium;


  src: url(../fonts/CircularStd-Medium.otf);


}


@font-face {


  font-family: circularStd-mediumitalic;


  src: url(../fonts/CircularStd-MediumItalic.otf);


}


@font-face {


  font-family: dk-memory;


  src: url(../fonts/DK\ Frozen\ Memory.otf);


}





/*  General CSS  */


body {


  font-family: circularStd-book;


  font-size: 16px;


  overflow: hidden;


}


img {


  width: 100%;





}


.diagram img{


  box-shadow: 3px 3px 0px #6f7752, 8px 8px 0px rgba(0, 0, 0, 0.1);


  display: -webkit-box;


  display: -webkit-flex;


  display: -moz-box;


  display: -ms-flexbox;





}


img.no-resize {


  max-width: 100%;


  width: auto;


}


strong, b {


  font-family: circularStd-bold;


  font-weight: lighter;


}


.popUp {


	background-color: white;


	position: fixed;


    top: 50%;


    left: 50%;


    transform: translateY(-50%) translateX(-50%);


	-moz-border-radius: 12px;


	-webkit-border-radius: 12px;


	border-radius: 12px;


  max-width: 390px;


  width: 100%;


  padding: 20px;


  padding-left: 100px;


	text-align:center;


	z-index:900;


	-moz-box-shadow:0px 0px 17px 4px rgba(0, 0, 0, 0.27);


	-webkit-box-shadow:0px 0px 17px 4px rgba(0, 0, 0, 0.27);


	box-shadow:0px 0px 17px 4px rgba(0, 0, 0, 0.27);


	visibility: hidden;


	font-size: 1.2rem;


  font-family: circularStd-bold;


  height: 200px;


  display: -webkit-box;


  display: -ms-flexbox;


  display: flex;


  -ms-flex-wrap: wrap;


  flex-wrap: wrap;


  align-items: center;


}


.popUp:before {


  content: '';


  height: 200px;


  width: 200px;


  background: url(../images/popup.png);


  background-repeat: no-repeat;


  background-position: center;


  background-size: contain;


  position: absolute;


  left: 0;


  transform: translateX(-50%);


  top: 0;


}


.popUp .upperRow {


  padding-bottom: 1rem;


}


.popUp > div {





  -webkit-box-flex: 0;


  -ms-flex: 0 0 100%;


  flex: 0 0 100%;


  max-width: 100%;


}


@media (max-width: 767px) {


  .popUp {


    font-size: 14px;


    padding-left: 20px;


    height: auto;


  }


  .popUp:before {


    height: 150px;


    position: initial;


    -webkit-box-flex: 0;


    -ms-flex: 0 0 100%;


    flex: 0 0 100%;


    max-width: 100%;


    width: auto;


    transform: translateX(0);


    margin-bottom: 0.5rem;


  }


}


.blackout {


	position: fixed;


	top: 0;


	left: 0;


	background-color: grey;


	opacity: 0.5;


    min-width: 1px;


    width: 100%;


    height: 100%;


	visibility: hidden;


}





/*  Reuseable CSS  */


.btn-yellow {


  color: black;


  border-radius: 0;


  background: #FFCD00;


  padding: 6px 20px;


}


.btn-green {


  color: black;


  border-radius: 0;


  background: #02f89c;


  padding: 6px 0.3px;


}


.btn-blue {


  color: white !important;


  border-radius: 50px;


  background: #1B55A9;


  padding: 6px 45px;


}


.form-control {


  font-size: 12px;


}


.btn {


  font-size: 12px;


}


.btn-yellow {


  background-color: #FFCD00;


}


.btn-save {


  padding: 0.375rem 1rem;


  border-radius: 50px;


  background: #d10000;


  color: #fff;


  font-size: 14px;


}


.btn-save-pop {


  background: #D10000;


  color: white;


  padding: 0.375rem 1rem;


  border-radius: 50px;


}





/*  Custom CSS  */


/*  -Login-  */


#content-frame {


  border: none;








  overflow: auto;


}








.login-wrapper {


  min-height: 100vh;


  background-image: url(../images/background_login.png);


  background-color: #D1FAFF;


  background-repeat: no-repeat;


  background-position: center;


  background-size: cover;


}


.login-wrapper .container {


  height: 100%;


}


.login-wrapper .container > .row {


  height: 100%;


}


.login-wrapper .images img {


  height: 100%;


  width: 100%;


  object-fit: contain;


  object-position: center;


  padding: 3rem;


}


.login-wrapper .intro {


  color: #fff;


  text-align: right;


}


.login-wrapper .intro h2 {


  margin-bottom: 2rem;


  font-weight: bold;


}


.login-wrapper .intro h2 small {


  font-size: 1rem;


  margin-top: 0.5rem;


  display: block;


  text-align: center;


}


.login-wrapper .login-form {


  margin-top: 2rem;


}


.login-wrapper .login-form label {


  color: white;


}


.login-wrapper .login-form .form-control {


  padding: .5rem 1rem;


  border-radius: 50px;


  text-align: center;


}


@media(max-width: 991px) {


  .login-wrapper .images img {


    height: 150px;


    padding: 15px;


  }


  .login-wrapper .intro h2 {


    font-size: 1.2rem;


    margin-bottom: 0.5rem;


  }


  .login-wrapper .intro h2 small {


    font-size: 0.7rem;


  }


  .login-wrapper .login-form {


    margin-top: 0.5rem;


  }


}





/*  -Navigation-  */


.left-nav {


  background: #2EB5C0;


  display: flex;


  align-items: center;


}


.left-nav > div {


  padding: 1rem;


  height: 90px;


}


.left-nav > div:not(:last-child) {


  display: flex;


  align-items: center;


}


.left-nav .logo {


  text-align: center;


}


.left-nav .logo img {


  height: 50px;


  border-right: 1px solid #fff;


  padding-right: 2rem;


  object-fit: contain;


  object-position: center;


}


.left-nav .url-nav {


  -webkit-box-flex: 0;


  -ms-flex: 0 0 calc(100% - 341px);


  flex: 0 0 calc(100% - 341px);


  max-width: calc(100% - 341px);


}


.left-nav .url-nav #url-text {


  background: white;


  border-radius: 50px;


  overflow: hidden;


  /* display: block; */


  padding: 0.5rem 1rem;


  width: 100%;


  display: -webkit-box;


  -webkit-line-clamp: 1;


  -webkit-box-orient: vertical;


}


.left-nav .progress-wrapper {


  /* background: #009FAC; */


  width: 250px;


}


.left-nav .progress-wrapper .text {


  font-size: 0.8rem;


  color: black;


  font-weight: bold;


  text-align: center;


}


.left-nav .progress-boxes {


  position: relative;


  margin-bottom: 0;


  text-align: center;


}


.left-nav .progress-boxes:before {


  content: '';


  height: 50px;


  width: 45px;


  background: url(../images/trophy.png);


  background-size: contain;


  background-repeat: no-repeat;


  background-position: center;


  display: inline-block;


  vertical-align: middle;


}


.left-nav .progress-boxes li {


  display: none;


  font-size: 2rem;


  font-weight: bold;


  color: white;


  margin-left: 0.5rem;


  vertical-align: middle;


}


.left-nav .progress-boxes li.answered {


  display: inline-block;


}


@media (max-width: 767px) {


  .left-nav {


    display:block;


  }


  .left-nav .url-nav {


    -webkit-box-flex: 0;


    -ms-flex: 0 0 100%;


    flex: 0 0 100%;


    max-width: 100%;


    height: auto;





  }


  .left-nav .logo {


    justify-content: center;


    padding-bottom: 0;


    height: auto;


  }


  .left-nav .logo img {


    padding-right: 0;


    border-right: none;


  }


  .left-nav .progress-wrapper {


    width: 100%;


  }


}





.right-nav {


  /* background: url('../images/timer_background.png'); */


  background-color: #ffce00;


  background-repeat: no-repeat;


  background-size: cover;


  height: 90px;


  display: flex;


  align-items: center;


  justify-content: end;


  width: 100%;


}


.right-nav .timer {


  text-align: center;


  font-weight: bold;


  font-size: 1.2rem;


  width: 90%;


  padding-left: 10%;


}


/*.right-nav .timer > span {*/


/*  padding: 0.5rem 1.5rem;*/


/*  color: #fff;*/


/*}*/


.right-nav .timer .clock-title {


  background: #D10000;


}


.right-nav .timer .timer-val {


  background: #363636;


}





/*  -Main Content-  */


.iframe-wrapper iframe {


  width: 100%;


  min-height: 5%;


  height:87%;





  /*height: calc(100% - 90px);*/


  border: none;


}


/*  -Question-  */


.disableQuestion {


  opacity: 0.5;


}


.hiddenQuestion {


  display: none !important;


  visibility: hidden;


}


#rightPanel {


  /*background-image: url(../images/chat_background.png);


  background-color: #EAECEF;*/


  /*background: #ffd900;


  background-size: cover;


  min-height: 100vh;


  background-repeat: no-repeat;


  background-size: cover;


  background-position: center;


  overflow: auto;


  padding-bottom: 3.5rem;*/


  background-image: url(../images/chat_background.png);


  /*background: #ffd900;*/


  background-size: cover;
  
  background-position: center;

  background-repeat: no-repeat;


  min-height: 100vh;


  font-size: .95rem;


  padding-bottom: 3.5rem;


  overflow: auto;


}





#rightPanel .teacher,


#rightPanel .question,


#rightPanel .student {


  display: flex;


  margin: 1rem 0;


  padding: 0 1rem;


  padding-bottom: 0;


}


#rightPanel .textbox-wrapper {


  background: #fff;


  padding: 0.75rem;


  border-radius: 6px;


  position: relative;


  font-size: 16px;


  -webkit-box-flex: 0;


  -ms-flex: 0 0 calc(100% - 70px);


  flex: 0 0 calc(100% - 70px);


  max-width: calc(100% - 70px);


}


#rightPanel .question .textbox-wrapper {


  padding: 0.75rem;


  border-radius: 6px;


  position: relative;


  font-size: 16px;


  -webkit-box-flex: 0;


  -ms-flex: 0 0 100%;


  flex: 0 0 100%;


  max-width: 100%;


  /* background-color: #b5fbff; */


  background-color: #ffff9f;


}


#rightPanel .student .textbox-wrapper {


  /* background-color: #b5fbff; */


  background-color: #ffff9f;


}


#rightPanel .icon img {


  height: 50px;


  width: 50px;


}


#rightPanel .textbox-wrapper .name {


  border-bottom: 1px solid #CCCCCC;


  padding-bottom: 0.5rem;


  margin-bottom: 0.5rem;


  color: #D10000;


  text-transform: uppercase;


  font-family: circularStd-bold;


  font-size: 14px;


}


#rightPanel .teacher .textbox-wrapper {


  margin-left: 1rem;


}


#rightPanel .question .textbox-wrapper {


  margin-left: 0;


}


#rightPanel .teacher .textbox-wrapper:before {


  content: '';


  position: absolute;


  width: 0;


  height: 0;


  border-top: 1rem solid #fff;


  border-left: 1rem solid transparent;


  top: 0;


  left: -0.75rem;


}


#rightPanel .question .qnumber {


  border-bottom: 1px solid #999999;


  padding-bottom: 0.5rem;


  margin-bottom: 0.5rem;


  color: #D10000;


  text-transform: uppercase;


  font-family: circularStd-bold;


  font-size: 1.2rem;


}


#rightPanel .student .textbox-wrapper {


  margin-right: 1rem;


}


#rightPanel .student .textbox-wrapper:before {


  content: '';


  position: absolute;


  width: 0;


  height: 0;


  /* border-top: 1rem solid #b5fbff; */


  border-top: 1rem solid #ffff9f;


  border-right: 1rem solid transparent;


  top: 0;


  right: -0.75rem;


}


#rightPanel .student .textbox-wrapper .name {


  color: #484848;


  margin-bottom: 1rem;


  border-color: #999999;


}





/*  -Top Menu-  */


.top-menu {


  margin: 0.25rem;


}


.top-menu .nav-item {


  margin: 0 0.5rem;


}


.top-menu .nav-link {


  background-color: #FFCD00;


  color: #1850A0;


  font-family: circularStd-bold;


  font-size: 1rem;


  /*opacity: 0.5;*/


}


.top-menu .nav-link.active {


  opacity: 1;


}








/*  -iFrame Body-  */


.body-content {


  margin: 0 1rem 1rem;








}


.body-question {





  overflow:scroll;





}


.body-content .section {


  padding: 2rem;





}


.intro {


  margin-top: 0.75rem;


  margin-bottom: 0.75rem;





}


.intro1 {


  background-color: #ffff9f;


}


.opal p:first-letter{


display: block;


float: left;


font-size: 80px;


margin-top: -25px;





color:black;


font-weight: bold;


}


.opals p:first-letter{


display: block;


float: left;


font-size: 40px;


margin-top: -10px;





color:black;


font-weight: bold;


}


.opal1{


margin: 0px;


background-image: linear-gradient(#ffffff, #fbfbcc);


border-radius: 15px;


padding: 20px


}

.opal1v1{


  margin: 40px;
  
  
  background-image: url(../images/bg_hal3.png);
  
  
  border-radius: 15px;
  
  
  padding: 20px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
  
  }

  .opal1v2{


    margin: 40px;
    
    
    background-image: url(../images/bg_hal4.png);
    
    
    border-radius: 15px;
    
    
    padding: 50px;
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    
    
    }

.opal2v1{


margin: 40px;


background-image: url(../images/bg_kertas.png);


background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;


border-radius: 15px;

padding: 20px;


}

.opal2v2{


  margin: 40px;
  
  
  background-image: url(../images/bg_hal2.png);
  
  
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  
  
  border-radius: 15px;

  padding: 15px;
  
  
  }





.opal3{


margin: 25px;


background-image: linear-gradient(#adcff7, #f2f8ff);


border-radius: 15px;


padding: 15px


}


.intro .title {


  font-family: circularStd-Book;


  font-size: 2.5rem;


  line-height: 1;


  margin-bottom: 1rem;


}


.intro .desc {


  font-size: 1.2rem;


  margin: 20px;


  font-family: circularStd-Book;


  





}





.card-wrapper .card-item {


  border-radius: 8px;


  overflow: hidden;


  margin-bottom: 30px;





}


.card-wrapper .card-header {


  font-size: 1.4rem;


  font-family: circularStd-bold;


  line-height: 1.25;


}


.card-wrapper .card-body {


  background: #d8d8d8;


  font-size: 1rem;


}


/*  Mengapa Ada Pasar  */


.mengapaada-pasar .body-content {


  background-color: #81C0FF;


}





/*  Jenis Pasar  */


.jenis-pasar .body-content {


  background-color: #A5E7EA;


}





/*  Pasar Indonesia  */


.pasar-indonesia .body-content {


  background-color: #EAF9FF;


}


.pasar-indonesia .intro .title {


  color: #1C3591


}





/*  Pasar Indonesia  */


.pasar-apung .body-content {


  background-color: #F8FCEA;


}


.pasar-apung .intro .title {


  color: #1C3591


}





/*  Pasar Kaget  */


.pasar-kaget .body-content {


  background-image: linear-gradient(#F8FCEA, #EBFFA7);


  -webkit-background-image: linear-gradient(#F8FCEA, #EBFFA7);


  -moz-background-image: linear-gradient(#F8FCEA, #EBFFA7);


  -o-background-image: linear-gradient(#F8FCEA, #EBFFA7);


}


.pasar-kaget .intro .title {


  color: #547E12;


}





/*  Jual Beli Isyarat  */


.jualbeli-isyarat .body-content {


  background-color: #F4F4F4;


}


.jualbeli-isyarat .intro .title {


  color: #653B16;


}





/*  Pasar Modern  */


.pasar-modern .body-content {


  background-color: #ECEBFF;


}





/*  Pasar Genggaman Tangan  */


.pasar-genggamantangan .body-content {


  background-image: url(../images/pasargenggam_tangan_2.png);


  background-repeat: no-repeat;


  background-size: cover;


  background-position: center;


  background-color: #D3E9FC;


}





/*  Result  */


.loginMainLogo {


  background: url(../images/header.jpg);


  padding: 1rem;


  text-align: center;


}


.loginMainLogo img {


  width: 150px;





}


#answerTable .table th {


  font-weight: normal;


  font-family: circularStd-bold;


  background: #f7d173;


  color: white;


}


#answerTable .table th:first-child {


  border-top-left-radius: 6px;


  border-bottom-left-radius: 6px;


}


#answerTable .table th:last-child {


  border-top-right-radius: 6px;


  border-bottom-right-radius: 6px;


}


.actionsContainer {


  text-align: center;


  margin: 2rem 0;


}





/*  Tooltip  */


.tooltip-custom {


  position: relative;


}


.tooltip-custom:hover .tooltip-container,


.tooltip-custom:focus .tooltip-container,


.tooltip-custom:active .tooltip-container {


  display: block;


}


.tooltips {


  text-decoration: underline;


  cursor: pointer;


}


.tipit {


 background:white;


  box-shadow: 0 0 10px rgba(0,0,0,0.2);


  padding: 1rem;


  border-radius: 6px;


  font-size: 1rem;


  color: black;


  text-align: center;


  width: 300px;


}


.tipit:before {


  content: '';


}


.tipit.top:before {


  border-top-color: #fff;


}


.tipit.bottom:before {


  border-bottom-color: #fff;


}





.tooltip-custom .tooltip-container {


  display: none;


  position: absolute;


  top: 2rem;


  width: 300px;


  left: -1rem;


  background: white;


  box-shadow: 0 0 10px rgba(0,0,0,0.2);


  padding: 1rem;


  border-radius: 6px;


  font-size: 1rem;


  color: #000;


  text-align: center;


}


.tooltip-custom .tooltip-container.top {


  display: block;


  position: absolute;


  bottom: 100%;


  width: 300px;


  left: -1rem;


  background: white;


  box-shadow: 0 0 10px rgba(0,0,0,0.2);


  padding: 1rem;


  border-radius: 6px;


  font-size: 1rem;


  color: #000;


  text-align: center;


}


.tooltip-custom .tooltip-container:before {


  width: 0;


  height: 0;


  border-left: 1rem solid transparent;


  border-right: 1rem solid transparent;


  border-bottom: 1rem solid white;


  content: '';


  position: absolute;


  top: -1rem;


  left: 1rem;


}


.tooltip-custom .tooltip-container.top:before {


  content: '';


  display: none;


}


.tooltip-custom .tooltip-container.top:after {


  width: 0;


  height: 0;


  border-left: 1rem solid transparent;


  border-right: 1rem solid transparent;


  border-top: 1rem solid white;


  content: '';


  position: absolute;


  bottom: -1rem;


  left: 1rem;


}


.copyright {


  position: fixed;


  bottom: 0;


  left: 0;


  width: 100%;


  font-size: .65rem;


  padding: .75rem;


  border-top: 2px solid #999999;


  background-color: #fff;


  text-align: center;


}





.rightRadio{float:right; width:90%;}





.leftRadio{float:left; width:10%;}





.qitems.form-group {


  float: left;


  width: 100%;


  margin-bottom: .65rem;


}





.fakeLink {


  cursor: pointer;


  font-weight: bold;


  text-decoration: underline;


}


.btn-orange {


  background-image: linear-gradient(white, orange);


  border: 2px solid #555555;


}





/* The Modal (background) */


.modal {


  display: none;


  position: fixed;


  z-index: 1;


  padding-top: 100px;


  left: 0;


  top: 0;


  width: 100%;


  height: 100%;


  overflow: auto;


  background-color: black;


}





/* Modal Content */


.modal-content {


  position: relative;


  background-color: #fefefe;


  margin: auto;


  padding: 0;


  width: 90%;


  max-width: 1200px;


}





/* The Close Button */


.close {


  color: white;


  position: absolute;


  top: 10px;


  right: 25px;


  font-size: 35px;


  font-weight: bold;


}





.close:hover,


.close:focus {


  color: #999;


  text-decoration: none;


  cursor: pointer;


}





.mySlides {


  display: none;


}





.cursor {


  cursor: pointer;


}





/* Next & previous buttons */


.prev,


.next {


  cursor: pointer;


  position: absolute;


  top: 50%;


  width: auto;


  padding: 16px;


  margin-top: -50px;


  color: white;


  font-weight: bold;


  font-size: 20px;


  transition: 0.6s ease;


  border-radius: 0 3px 3px 0;


  user-select: none;


  -webkit-user-select: none;


}





/* Position the "next button" to the right */


.next {


  right: 0;


  border-radius: 3px 0 0 3px;


}





/* On hover, add a black background color with a little bit see-through */


.prev:hover,


.next:hover {


  background-color:  rgba(234, 210, 210, 0.72);


}





/* Number text (1/3 etc) */


.numbertext {


  color: #f2f2f2;


  font-size: 12px;


  padding: 8px 12px;


  position: absolute;


  top: 0;


}





img {


  margin-bottom: -4px;


}





.caption-container {


  text-align: center;


  background-color: black;


  padding: 2px 16px;


  color: white;


}





.demo {


  opacity: 0.6;


}





.active,


.demo:hover {


  opacity: 1;


}





img.hover-shadow {


  transition: 0.3s;


}





.hover-shadow:hover {


  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


}





.dropcap{


float:left;


margin-right:5px;


font-size:3em;


vertical-align:text-top;


}





.footer {


  position: fixed;


  left: 0;


  bottom: 0;


  width: 100%;


  padding: 6px;


  background-color: #fece00;


  color: black;


  text-align: center;


}





/* img klik add by opal */


.column {


  float: left;


  width: 25%;


}





.left {


  width: 50%;


  padding: 24px;


}





.right {


  width: 50%;


  padding: 24px;


}





/* Clear floats after the columns */


.row:after {


  content: "";


  display: table;


  clear: both


}





.tabs {


	margin: 0;


	border: 1px solid transparent;


	background: trasparent;


  list-style-type: none;


  padding:0px;


}





.tabs:after,


.tabs:before {


	display: table;


	content: " ";


	-webkit-flex-basis: 0;


	-ms-flex-preferred-size: 0;


	flex-basis: 0;


	-webkit-box-ordinal-group: 2;


	-webkit-order: 1;


	-ms-flex-order: 1;


	order: 1


}





.tabs:after {


	clear: both


}





.tabs.vertical>li {


	display: block;


	float: none;


	width: auto


}





.tabs.simple>li>a {


	padding: 0


}





.tabs.simple>li>a:hover {


	background: transparent


}





.tabs.primary {


	background: #1f6baa


}





.tabs.primary>li>a {


	color: #fefefe


}





.tabs.primary>li>a:focus,


.tabs.primary>li>a:hover {


	background: #2173b7


}





.tabs-title {


  float: left;


  width: 25%;


  padding: 2px;


}





.tabs-title>a {


	display: block;


  padding: 1rem 1.5rem;


  height: 100px;


  font-size: 1rem;


  text-align: center;


	/* line-height: 2; */


  color: #f7e5e4;


  background: #f14f42;





  -webkit-border-top-left-radius: 15px;


  -webkit-border-top-right-radius: 15px;


  -moz-border-radius-topleft: 15px;


  -moz-border-radius-topright: 15px;


  border-top-left-radius: 15px;


  border-top-right-radius: 15px; 


}





[data-whatinput=mouse] .tabs-title>a {


	outline: 0


}





.tabs-title>a:hover {


	background: #f7e5e4;


  color: #f14f42;


  text-decoration: none


}





.tabs-title>a:focus,


.tabs-title>a[aria-selected=true] {


	background: #f7e5e4;


  color: #f14f42; 


  -webkit-border-top-left-radius: 15px;


  -webkit-border-top-right-radius: 15px;


  -moz-border-radius-topleft: 15px;


  -moz-border-radius-topright: 15px;


  border-top-left-radius: 15px;


  border-top-right-radius: 15px; 


}





.tabs-content {


	border: 1px solid transparent;


	border-top: 0;


	background: #fefefe;


	color: #0a0a0a;


	-webkit-transition: all .5s ease;


	-o-transition: all .5s ease;


	transition: all .5s ease


}





.tabs-content.vertical {


	border: 1px solid transparent;


	border-left: 0


}





.tabs-panel {


	display: none;


	padding: 1rem


}





.tabs-panel.is-active {


	display: block


}

/* p.drop-cap:first-letter {
  -webkit-initial-letter: 4;
          initial-letter: 4;
  font-weight: bold;
} */

.drop-cap::first-letter {
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
}

.drop-cap-white::first-letter {
  float: left;
  color: white;
  font-size: 6rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
}

.drop-cap-white {
  /* float: left; */
  color: white;
  /* font-size: 6rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0; */
}

.dropdown{
  width:70px;   
 }

.dropdown option{
  width:70px;   
}

.soal7{
  width:50px;   
 }

 table.presisi {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid grey;
}

tr.a {
  width: 150px;
  border: 1px solid grey;
}

td.b {
  width: 150px;
  border: 1px solid grey;
}