html,
body {
    background-color: #fff;
    box-sizing: border-box!important;
}

.navbar-gray {
    background-color: #C4C4C4;
}

.navbar-hcg {
    background-color: #59AD68;
}

.rekananpic,
.profilepic {
    width: 250px;
    min-height: 300px;
    text-align: center;
    padding: 20px;
    background-color: #fff;
}

.profilepic {
    background-image: url('../img/hcgbrand.png');
    background-size: 20px;
    background-position: 100% 10%;
    background-repeat: no-repeat;
}

.rekananpic {
    -webkit-box-shadow: 2px 9px 16px -9px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 9px 16px -9px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 9px 16px -9px rgba(0, 0, 0, 0.3);
}

.rekananpic img,
.profilepic img {
    width: 200px;
    margin-bottom: 2em;
}

.rekananpic img {
    margin-top: 50%;
    margin-bottom: 50%;
}

.btn-hcg {
    background-color: #C7C6C5;
    font-weight: bold;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    min-height: 60px;
    padding-left: 80px;
}

.btn-dribbble {
    background-color: #6DAB6C;
    font-weight: bold;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

.btn-dribbble:hover {
    background-color: #C7C6C5;
    color: #333333;
}

.icon-pribadi {
    background-image: url('../img/icons/pribadi.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-pajak {
    background-image: url('../img/icons/pajak.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-keluarga {
    background-image: url('../img/icons/keluarga.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-pendidikan {
    background-image: url('../img/icons/pendidikan.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-asuransi {
    background-image: url('../img/icons/asuransi.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-bank {
    background-image: url('../img/icons/bank.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-pekerjaan {
    background-image: url('../img/icons/pekerjaan.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-payroll {
    background-image: url('../img/icons/payroll.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-pkwt {
    background-image: url('../img/icons/pkwt.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-medis {
    background-image: url('../img/icons/medis.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-pelatihan {
    background-image: url('../img/icons/pelatihan.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-kinerja {
    background-image: url('../img/icons/kinerja.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-head {
    background-image: url('../img/icons/head.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

.icon-mou {
    background-image: url('../img/icons/mou.png');
    background-repeat: no-repeat;
    background-position: 10px center;
}

span.iconmenu {
    width: 40px;
    height: 55px;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 20px;
}

.card-bg {
    border: 0px;
    box-shadow: none;
    background-color: #fff;
    background-image: url('../img/hcgbrand.png');
    background-size: 66px;
    background-position: 100% 10%;
    background-repeat: no-repeat;
    padding: 150px 0px;
}

.card-bg-2 {
    background-image: url('../img/hcgbrand.png');
    background-size: 66px;
    background-position: 100% 10%;
    background-repeat: no-repeat;
}

.card-bg-3 {
    border: 0px;
    box-shadow: none;
    background-color: #C7C6C5;
    background-image: url('../img/hcgbrand.png');
    background-size: 66px;
    background-position: 100% 10%;
    background-repeat: no-repeat;
    padding: 150px 0px;
}

.card-bg-4 {
    background-image: url('../img/hcgbrand.png');
    background-size: 25px;
    background-position: 99% 10%;
    background-repeat: no-repeat;
}

.bg-hcg {
    background-image: url('../img/tricolors.png');
    background-repeat: no-repeat;
    background-position: 100% 140%;
}

.btn-block {
    display: block;
    width: 100%;
}

.nav-item .nav-link.datadiri .nav-link-icon {
    filter: grayscale(1.0) brightness(50%)!important;
}

.nav-item.active .nav-link .nav-link-icon {
    filter: invert(79%) sepia(28%) saturate(298%) hue-rotate(72deg) brightness(91%) contrast(88%)!important;
}

.nav-item.active .nav-link.datadiri .nav-link-icon {
    filter: none!important;
}

.disabled span {
    filter: invert(50%) sepia(76%) saturate(0%) hue-rotate(263deg) brightness(102%) contrast(102%);
}

.active a.nav-link {
    color: #9BC49C!important;
    font-weight: bold;
}

.nav-item.isactive a.nav-link {
    color: #fff!important;
    font-weight: bold;
}

.nav-item.isactive a.nav-link:hover {
    color: #000!important;
    font-weight: bold;
}
.navbar-lwg li.nav-item a.nav-link {
    font-weight: 800;
    font-size: 1.2em;
}

h2.bigtext {
    font-size: 3em;
    font-weight: bold;
}
.bigtop {
    width: 100%;
    height: 30px;
    position: relative;
}
.bghead-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transform: perspective(1.4em) rotateX(3deg);
    transform-origin: bottom left;
    background-color: #59AD68;
    border: 2px solid #000;
    border-bottom: 0px;
}
.bghead-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transform: perspective(1.4em) rotateX(3deg);
    transform-origin: bottom left;
    border: 2px solid #000;
    border-bottom: 0px;
    background-color: #C7C6C5;
}
.bghead-0::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transform: perspective(1.4em) rotateX(3deg);
    transform-origin: bottom left;
    border: 2px solid #000;
    border-bottom: 0px;
    background-color: #648FFF;
}
.cardhover:hover {
    background-color: #C7C6C5;
}


.btn-primary-hcg {
    background-color: #59AD68;
    font-weight: bold;
    padding: 1.6em 1em;
    border: 1.5pt solid #000;
    margin-bottom: 10px;
}

.btn-primary-hcg:hover {
    background-color: #FFF;
    font-weight: bold;
    padding: 1.6em 1em;
}


.btn-secondary-hcg {
    background-color: #E3EBEB;
    font-weight: bold;
    padding: 1.6em 1em;
    border: 1.5pt solid #000;
    margin-bottom: 10px;
}
::-webkit-scrollbar {
    display: none;
}