body{
    background: #c7c8ca
}
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ccc; 
}

.btn-nav{
    position: fixed;
    top: 10px;
    left: 15px;
    display: none;
    z-index: 9999999;
}
.logo-mobile{
    position: fixed;
    top: 15px;
    right: 15px;
    display: none;
    z-index: 9999999;
}
.logo-mobile img{
    height: 40px
}

#sidebar{
    margin-top: 10vh;
    height: 80vh;
    background: #ffffff;
    background-image: url(../../image/bg-sidebar.png);
    background-size: 100% 100%;
    padding: 15px;
}

#sidebar .top{
    text-align: center;
    margin-top: 20px;
    height: 55vh;
}
#sidebar .top .logo{
    width:170px;
    max-width: 100%    
}

#sidebar .bottom .sosmed{
    padding-left: 5px !important;
}
#sidebar .bottom .sosmed li{
    list-style: none;
    font-size: 10px;
    padding: 2px 0;
}
#sidebar .bottom .sosmed li a{
    color: #939598
}
#sidebar .bottom .sosmed li i{
    background: #939598;
    color: #ffffff;
    padding: 5px;;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50em;
    margin-right: 10px
}

#sidebar .menu{
    text-align: right;
    margin-top: 20px;
    font-size: 14px
}
#sidebar .list-group-item{
    border: none;
    background: none;
    padding: 8px 10px;
}
#sidebar .list-group-item a{
    list-style: none;
    color: #636466 !important
}

#sidebar .list-group-item a:hover{
    font-weight: bold;
    text-decoration: none
}

#sidebar .list-group-item a.active{
    font-weight: bold;
}

.heading{
    margin-top: 10vh;
    background: #e6e7e8;
    padding: 9px;
    font-size: 15px;
    color: #636466;
    font-weight: 600;
}
#content{
    background: #ffffff;
    padding: 10px;
}
#content p, #content li,  #content td{
    font-size: 14px
}
#content .box{
    padding: 10px;
    overflow-y: scroll;
    height: calc(80vh - 60px);
}

#content img.banner{
    height: 200px;
    width: 100%;
    object-fit: cover;
}
#content .title{
    margin-top: 20px;
    color: #636466;
}

.copyright{
    text-align: right;
    font-size: 12px;
    padding: 6px 0;
    color: #939598
}

.owl-carousel{
    position: relative;
}
.owl-dots{
    position: absolute;
    bottom:10px;
    right:10px;
    z-index: 999999;
}

/*
.owl-dots .owl-dot{
    width: 10px;
    height: 10px;
    margin: 1px;
    border-radius: 50em;
    background: #939598 !important
}
.owl-dots .owl-dot.active{
    background: #ffffff !important
}
*/

.slider img{
    height: calc(80vh - 40px);
    object-fit: cover;
}
.slider h3{
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #ffffff
}

.thumbnails{
    margin-right: 0;
}
.thumbnails .card{
    border: none;
    text-align: center;
    color: #636466
}
.thumbnails img{
    height: 150px;
    object-fit: cover;
    margin-bottom: 10px
}

.thumbnails .card-body{
    padding: 0
}

.thumbnails .card a{
    color: #636466
}
.thumbnails .card h5{
    font-size: 18px;
    margin-bottom: 0px;
}
.thumbnails .card p{
    font-size: 14px;
}
.thumbnails .portofolio{
    text-align: left
}


@media (max-width: 762px) {
    .btn-nav{
        display: block   
    }
    .logo-mobile{
        display: block 
    }
    #sidebar{
        position: fixed;
        left: -300px;
        top: 0;
        width: 300px;
        z-index: 99999;
        transition: all 0.3s ease;
    }
    #sidebar.show{
        left: 0;
    }
}