@font-face{
    font-family:"Poppins";
    src : url("/assets/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
}
@font-face{
    font-family:"Poppins";
    src : url("/assets/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
    font-weight:bold;
}
@font-face {
    font-family: 'Mulish';
    src: url('/assets/fonts/Mulish/static/Mulish-Regular.ttf') format("truetype");
}
@font-face{
    font-family:"Mulish";
    src: url("/assets/fonts/Mulish/static/Mulish-Bold.ttf") format("truetype");
    font-weight:bold;
}
::-webkit-scrollbar {
  width: 5px;
  height:5px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #e0e0e0;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}
a[onclick]{
    cursor:pointer;
}
a[href]{
    color:#4396ef;
}
body{
    font-family: 'Poppins','Mulish',tahoma, sans-serif,arial;
    color:#fff;
    background:black;
    font-size:17px;
    min-width:1140px;
    line-height:1.5;
}
textarea{
    resize:none;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
    font-weight:bold;
    margin-bottom:0px;
}
.media-side{
    width:20%;
    padding:2rem;
    position:sticky;
    top:0px;
    color:#555;
    z-index:2;
}
.media-content{
    width:60%;
    background:white;
    min-height:600px;
    color:#333;
    padding:2rem;
    z-index:3;
}
.wrapper{
    background:#e0e0e0;
}
header{
    background:url(/assets/img/header.png);
    background-position:center center;
}
.menu{
    background:url(/assets/img/navigasi.png) no-repeat center center;
}
.menu ul,.menu ul li{
    list-style:none;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.menu ul{
    display:flex;
    justify-content:center;
}
.menu ul li a{
    font-size:20px;
    line-height:60px;
    padding:18px 20px;
    text-transform:uppercase;
    color:black!important;
    font-weight:bold;
}
.menu ul li a:hover{
    background:url(/assets/img/mouseover.png) center center no-repeat;
    text-decoration:none!important;
}
footer{
    background:url(/assets/img/fotter-atas.png);
}
.ball{
    background-image:linear-gradient(45deg,white,goldenrod,darkgoldenrod);
    position:relative;
    width:50px;
    height:50px;
    display:block;
    border-radius:5rem;
    font-weight:bold;
    text-align:center;
    padding:6px;
    font-size:25px;
    border:1px solid darkgoldenrod;
}
.ball::before{
    content:"";
    position:absolute;
    top:5px;
    right:0px;
    width:25px;
    height:10px;
    background:radial-gradient(ellipse,#fff,#fff0);
    border-radius:100%;
    transform:rotate(35deg);
}
.block{
    padding:1rem;
    background:linear-gradient(45deg,antiquewhite,#fff);
    border:5px solid goldenrod;
    outline:5px solid darkgoldenrod;
}
.title{
    font-weight:bold;
    font-size:3em;
    color:goldenrod;
    margin-bottom:1rem;
}
.left-menu ul,.left-menu ul li{
    list-style:none;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.left-menu ul li a{
    color:#555;
    padding-bottom:1rem;
    display:block;
}
.left-menu ul li a:hover{
    text-decoration:none!important;
}
.sub-title{
    color:goldenrod;
    font-size:1.5rem;
    margin-bottom:2rem;
}
.right-menu{
}
.right-menu>div+div{
    border-top:1px solid #ccc;
    margin-top:1rem;
    padding-top:1rem;
}
.right-menu a[href]{
    color:#555;
}
.right-menu a[href]:hover{
    text-decoration:none;
}
.calendar>div{
    width:12%;
    font-size:12px;
    margin:1px;
    text-align:center;
}
.pagination{
    justify-content:center;
}
.pagination li a{
    padding:0px 5px;
}
.pagination li a[href]{
    color:#555;
}