body{
  background-image: url(../img/background.jpg);
  background-size: 150%;
}

.footer{
  font-size: 15px;
  font-family: Arial;
  font-weight: bold;
  /*background-color: #337ab7;*/
  border-radius: 5px;
  height: 45px;
  line-height: 45px;
  color : #000;
}
.footer p{
  text-align: center;
}
.imgku{margin: auto;}
.cursor{cursor: pointer;}
small{
  color: maroon;
  font-style: italic;
  font-weight: bold;
  font-size: 11px;
}

.navigasi .container-fluid{
  background-color: #fff;
}
.navbar-right li a{
  color: #000 !important;
  font-weight: 600;
}
.navbar-right li a:hover{
  background-color: #ddd !important;
}
.dropdown .dropdown-menu{
  background-color: #fff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
  background-color: #ddd !important;
}
th{
  text-align: center;
}
.btntambah{
  margin-bottom: 10px;
}

.jumbotron{
  background-color: transparent;
}

.base-timer {
  border: 3px solid;
  background-color: #fff;
  border-radius: 60px;
  position: fixed;
  width: 100px;
  height: 100px;
  left: 90%;
  top: 1%;
}

@media (max-width: 768px) {
  .base-timer {
  border: 3px solid;
  border-radius: 50px;
  left: 176px;
  top: 1px;
  width: 50px;
  height: 50px;
  }
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: fixed;
  border: 3px solid;
  border-radius: 5px;
  background-color: #fff;
  left: 90%;
  top: 1%;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

@media (max-width: 768px) {
  .base-timer__label {
  left: 160px;
  top: 5px;
  width: 80px;
  font-size: 12px;
  }
}

#box1{
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(33,33,33,0.1), 0 0 0 1px rgba(33,33,33,0.1);
  display: block;
  padding: 5px;
  border-radius: 3px;
}

@media (max-width: 100%) {
#box1 {
  margin: 100%;
  }
}

#box2{
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(33,33,33,0.1), 0 0 0 1px rgba(33,33,33,0.1);
  display: block;
  padding: 8px;
  border-radius: 3px;
}
.ketelitian2 #box2 table tbody tr td {
  position:relative;
  text-align:center;
  width:80px;
  padding:10px 0px;
  font-size:15px;
  font-weight:bold;
}
.ketelitian2 #box2 table tbody tr td.jawaban {
  padding:0px 0px;
}
.ketelitian2 #box2 table tbody tr td.jawaban:after {
  border-bottom:2px solid #ccc;
}
.ketelitian2 #box2 table tbody tr td.jawaban input{
  border:none;
  background:#eeeeee;
  width:90%;
  margin:0 auto;
}
.ketelitian2 #box2 table tbody tr td:after {
  content: "";
  position:absolute;
  width:95%;
  bottom:0;
  left:0;
  border-bottom: 2px solid #000;
}
@media (max-width: 100%) {
#box2 {
  margin: 100%;
  }
}
.nomor {
  text-align: center;
}


section.mbti #box1 > .row {
  margin-left:0px;
  margin-right:0px;
}
section.mbti #box1 > .row > div {
  min-height:100px;
}
section.mbti #box1 > .row > div.odd {
text-align:left;
border-bottom:1px solid #ccc;
}

section.mbti #box1 > .row > div.col-xs-2 {
  text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
  border: 1px solid #ccc;
  
}
section.mbti #box1 > .row > div.even {
  text-align:right;
  
border-bottom:1px solid #ccc;
  }
section.mbti #box1 > .row .row > div.col-xs-12 {
  text-align:center;
  background:#ccc;
}
section.mbti #box1 > .row .row > div.col-xs-10 {
 padding-top:5px;
}
section.mbti #box1 > .row .row > div.col-xs-2 {
  padding-top:5px;
  padding-right: 0px;
  padding-left: 0px;
 }
 @media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */

  section.mbti #box1 > .row > div {
    min-height:45vh;
  }
}
 @media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ 

  section.mbti #box1 > .row > div {
    min-height:30vh;
  }
}
 @media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  section.mbti #box1 > .row > div {
    min-height:25vh;
  }
}
 @media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 

  section.mbti #box1 > .row > div {
    min-height:25vh;
  }
}
 @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 

  section.mbti #box1 > .row > div {
    min-height:15vh;
  }
}
 @media (min-width:1281px) { /* hi-res laptops and desktops */ 

  section.mbti #box1 > .row > div {
    min-height:15vh;
  }
}