.boxld {
    position: relative;
    margin: 1%;
	padding:2%;
    float: left;
    width: 100%;
    height: fit-content;
    background-color: white;
	box-shadow:2px 2px 10px lightgrey;
	border:2px solid lightgrey;
	border-radius:10px;
}
.boxtl {
    position: relative;
    margin: 1%;
	padding:2%;
    float: left;
    width: 98%;
    height: fit-content;
    background: linear-gradient(45deg, #FF8000, #000080);
	box-shadow:2px 2px 10px lightgrey;
	border:2px solid lightgrey;
	border-radius:10px;
	cursor:pointer;
}
.boxsl {
    position: relative;
    margin: 1%;
	padding:2%;
    float: left;
    width: 100%;
    height: fit-content;
    background-color: rgba(0,0,0,0.7);
	box-shadow:2px 2px 10px lightgrey;
	border:2px solid lightgrey;
	border-radius:10px;
}
.boxslot {
    position: relative;
    margin: 1%;
	padding:2%;
    float: left;
    width: 98%;
    height: fit-content;
    background-color: #fff;
	box-shadow:2px 2px 10px lightgrey;
	border:2px solid lightgrey;
	border-radius:10px;
}
.titleldpred{
	font-size: calc(1.275rem + 0.3vw);
	font-weight:700;
}
.titlepred{
	font-size: calc(1.rem + 0.3vw);
	font-weight:700;
	font-style:italic;
}
@media only screen and (max-width: 576px) {
	.titleldpred{
		font-size: 4.5vw !important;
	}
	.dtld{
		font-size: 3vw !important;
	}
	.bgboxpagi img,.bgboxsore img,.bgboxmalam img{
		top:10px;
		position:relative;
	}
}
@media only screen and (max-width: 766px) {
	.titleldpred{
		font-size: 2.75vw;
	}
	.bgboxpagi img,.bgboxsore img,.bgboxmalam img{
		top:10px;
		position:relative;
	}
}
.dtld{
	font-size: calc(0.85rem + 0.3vw);
	font-weight:700;
	text-align:left;
	margin-top:-3.5%;
	margin-left:16%;
	font-style:italic;
	text-shadow:0px 0px 2px black;
}
.numld{
	font-size: calc(2rem + 0.3vw);
	text-align:center;
	color:white;
	border-radius:5px;
	background-color: rgba(0,0,0,0.8);
	text-shadow:0px 0px 5px #fff;
}
.bgboxpagi{
	background:url(../assets/pagi.jpg) center center;	
	border-radius:10px;
	background-size:cover;
}
.bgboxsore{
	background:url(../assets/sore.jpg) bottom center;	
	border-radius:10px;
	background-size:cover;
}
.bgboxmalam{
	background:url(../assets/malam.jpg) bottom center;
	border-radius:10px;
	background-size:cover;
}
.bgboxpagi img,.bgboxsore img,.bgboxmalam img{
		top:10px;
		position:relative;
	}
.boxprediksi{
	background-color:rgba(211,211,211,0.7);
	border-radius:20px;
	box-shadow:0px 0px 5px white,0px 0px 10px white;
}
.boxpagi{
	background:url(../assets/box1.jpg) bottom center;
}
.boxsore{
	background: linear-gradient(45deg, #fff, #eda72e);
}
.boxmalam{
	background:url(../assets/box2.jpg) bottom center;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff;
  }
  to {
    text-shadow: 0 0 10px #000, 0 0 15px #000;
  }
}

.btnld {
  font-size: calc(0.75rem + 0.3vw);
  font-weight: 500;
  color: #fff;
  width:30%;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 0.1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btntools {
  font-size: calc(0.6rem + 0.3vw);
  font-weight: 500;
  color: #fff;
  width:20%;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 0.1rem;
  margin: 0px 3px 0px 3px;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btntools:hover {
  font-weight: 700;
  color: #000;
  text-shadow:0px 0px 5px #fff, 0px 0px 20px #f6f6f6;
}

.frequency-cointainer {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 10px 0;
}
.frequency-cointainer h1 {
  width:100%;
  font-size:2.5rem;
  font-weight: 700;
  text-align: center;
  margin:10px 0;
}
.frequency-card {
  background: linear-gradient(0deg, #f4f4f4, #fff);
  border-radius: 5px;
  height: auto;
  padding: 5px;
  margin:5px;
  flex: 1 0 21%;
  box-shadow:2px 2px 10px lightgrey;
}
@media only screen and (max-width: 960px) {
  .frequency-card {
    flex: 1 0 42%;
  }
}
@media only screen and (max-width: 640px) {
.dispcard{
	display:inline;
}
    
  .frequency-card {
    flex: 1 0 100%;
  }
}

.frequency-graph {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
  height: 200px;
  align-items: flex-end;
}
.frequency-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width:10%;
  margin:0 2px;
  justify-content: flex-end;
  font-size: 0.7em;
  height: 200px;
}
.frequency-bar .bar {
  display: block;
  text-align: center;
  background: -webkit-linear-gradient(0deg, #cc6600, #ffa500);
  width: 100%;
  border-radius: 3px;
  margin: 0;
  height: 0;
  transition: height 0.5s;
}
.frequency-bar .bar div {
  color: #fff;
  font-weight: 600;
}
.frequency-bar .number {
  order:2;
  justify-content: center;
  color:#ff6700;
}
.frequency-card .position {
  text-align: center;
  font-weight: 600;
  font-size: 2em;
  color:#ff6700;
}

.prediksi-table {
  border-collapse: collapse;
  margin-bottom: 5px;
  width: 100%;
}
.prediksi-table td {
  width: 50%;
  color:#c35817;
  border:0;
}
.prediksi-table th {
  font-size: 1.2em;
  text-align:center;
  color:#f87217;
}
.shio-table {
  width:100%;
  box-shadow: 0 3px 5px 0px rgba(0,0,0,0.3);
  text-align: center;
  margin-bottom:20px;
  border:0;
  border: 0px solid #2d3139;
  border-radius: 5px;
}

.shio-table td {padding:10px; border:0px solid;}
.shio-table td.head {
  color:#f87217;
  background:#fff;
  width:30%;
  font-size: calc(0.75rem + 0.3vw) !important;
  box-shadow: 3px 8px 10px lightgrey;
  }
.shio-table td.data-shio {
  display: inline-flex;
  justify-content: flex-start;
  width:100%;
}
.shio-table td .bar {
  display: block;
  text-align: right;
  color:white;
  padding:5px;
  font-size: 0.7em;
  background: -webkit-linear-gradient(0deg, #cc6600, #ffa500);
  border-radius: 5px;
  margin: 0;
  height: 100%;
  transition: width 0.5s;
  box-shadow: 0 3px 4px 0px rgba(0,0,0,0.3);
  }