.module.iconbox {
	border-radius: var(--br-card);
	background-color: var(--cl-white);
	border: 1px solid var(--cl-bright-2);
	padding: var(--gl-narrowest);
	gap: 10px;
	align-items: center;
    color: var(--cl-shady-3);
    height: 100%;
    cursor: default;
}
.module.iconbox .icon {
	width: 72px;
	height: 72px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.module.iconbox .text {
	font-family: var(--fn-secondary);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 150%;
	text-align: center;
}

.module.iconbox.large {
	padding: var(--gl-narrowest);
	gap: var(--gl-narrowest);
	max-width: 300px;
}
.module.iconbox.large .icon {
	width: 92px;
	height: 92px;
}
.module.iconbox.large .text {
	font-family: var(--fn-primary);
	font-size: var(--fs-modtitle);
	font-weight: 600;
	line-height: 130%;
}

.module.iconbox.as-tab {
	opacity: 0.5;
	cursor: pointer;
}
.module.iconbox.as-tab:hover {
	opacity: 0.85;
}
.module.iconbox.as-tab.active {
	opacity: 1;
	box-shadow: var(--sd-hover);
	background-color: var(--cl-secondary-1);
}

.module.iconbox.card {
	padding: var(--gl-micro-5);
	gap: var(--gl-micro-5);
	max-width: 300px;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 280px;
}
.module.iconbox.card .icon {
	width: 96px;
	height: 96px;
	border-radius: var(--br-full);
	background-color: var(--cl-secondary-2);
	align-self: flex-start;
    background-size: 64px;
}
.module.iconbox.card .title {
	font-family: var(--fn-primary);
	font-size: var(--fs-subtitle);
	color: var(--cl-primary-5);
	font-weight: 500;
	line-height: 130%;
	text-align: left;
}
.module.iconbox.card .text {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 160%;
	text-align: left;
}
.module.iconbox.card .semibody.text {
	font-size: var(--fs-modtitle);
	font-weight: 400;
}

.module.iconbox.card .about .title {
	font-family: var(--fn-secondary);
	font-size: var(--fs-modtitle);
	color: var(--cl-shady-5);
	font-weight: 600;
	line-height: 150%;
	text-align: left;
	letter-spacing: 0;
	text-wrap: balance;
	display: flex;
}
.module.iconbox.card .about .title:before {
    content: "";
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    flex-shrink: 0;
    border-radius: var(--br-full);
    background-image: var(--im-yesno-no);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #EF4444;
    margin-top: 3px;
    margin-right: 16px;
}
.module.iconbox.card .about .text {
    font-family: var(--fn-secondary);
    font-size: var(--fs-emphasis);
    color: var(--cl-shady-2);
    font-weight: 400;
    line-height: 160%;
    text-align: left;
    padding-left: calc(var(--gl-micro-4) + var(--gl-narrowest));
}
.module.iconbox.card.about {
	min-height: unset;
	padding: var(--gl-narrowest);
}

.module.iconbox.card.offset {
	padding: 0 var(--gl-narrowest) var(--gl-narrowest) var(--gl-narrowest);
	border-radius: var(--br-news);
	gap: var(--gl-micro-5);
	justify-content: space-between;
	align-items: flex-start;
	min-height: 244px;
}
.module.iconbox.card.fit {
	min-height: unset;
}
.module.iconbox.card.offset .icon {
	width: 72px;
	height: 72px;
	border-radius: var(--br-full);
	background-color: var(--cl-secondary-2);
	align-self: flex-start;
    background-size: 48px;
    position: relative;
    margin-top: -36px;
}
.module.iconbox.card.offset.yesno-yes .icon {
	background-color: #ECFCCB;
	background-image: var(--im-card-yesno-yes);
}
.module.iconbox.card.offset.yesno-no .icon {
	background-color: #FEF2F2;
	background-image: var(--im-card-yesno-no);
}
.module.iconbox.card.offset .title {
	font-family: var(--fn-secondary);
	font-size: var(--fs-modtitle);
	color: var(--cl-shady-5);
	font-weight: 600;
	line-height: 150%;
	text-align: left;
}
.module.iconbox.card.offset .text {
	font-family: var(--fn-secondary);
	font-size: var(--fs-emphasis);
	color: var(--cl-shady-2);
	font-weight: 400;
	line-height: 160%;
	text-align: left;
}
.module.iconbox.card.offset .text.clarity {
	color: var(--cl-shady-3);
}

.module.iconbox-tabcontent {
    display: none;
    transition: none;
}
.module.iconbox-tabcontent.active {
    /*display: flex;*/
}

.module.iconbox.full {
	max-width: unset;
}

main[pageclass="target-perubahan"] ul.iconbox {
	padding-top: var(--gl-normal);
}