/*===============================================*/
/* Impor Font */
/*-----------------------------------------------*/

/* fallback */
@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

/*===============================================*/
/* Definisi Variabel */
/*-----------------------------------------------*/
:root {

	/* FONTS */
	--fnt-main: "Inter", Helvetica, Arial, sans-serif;
	--fnt-secondary: "Inter", Helvetica, Arial, sans-serif;
	--fnt-special: "Inter", Helvetica, Arial, sans-serif;

	/* COLORS */
	--clr-white: #FFFFFF;
	--clr-footertext: #FFFFFFCC;
	--clr-whitetrans: #FFFFFFBB;
	--clr-heading: #1E3C5B;
	--clr-paragraph: #414548;
	--clr-textbox: #6A7075;
	--clr-dummybg: #DFE1E3;
	--clr-inputbox: #D4DCE2;
	--clr-inputoutline: #419FED55;
	--clr-inputoutlinehero: #97D8E977;
	--clr-tabshover: #CFE0ED77;
	--clr-faqitem: #F7F9FA;
	--clr-description: #8D959B;
	--clr-linkhover: #97D8E9;
	--clr-button: #305E8F;
	--clr-button-secondary: #419FED;
	/*--clr-button-accent: #F9D306;*/
	/*--clr-button-accent-text: #113972;*/
	--clr-button-accent: #F87316;
	--clr-button-accent-text: #FFFFFF;	
	--clr-button-accent-main: #0192D5;
	--clr-button-accent-main-text: #FFFFFF;
	--clr-secondary: #157ED4;
	--clr-tertiary: #419FED;
	/*--clr-accent: #F9D306;*/
	--clr-accent: #F87316;
	--clr-accent-hover: #F9822F;
    --clr-emphasis: #FFAD33;
	--clr-pagination: #17181A;
	--clr-pagination-active: #EFF2F6;
	--clr-pagination-hover: #C1CDDC;
	--clr-softshadow: #17181A0D;
	--clr-softshadowhover: #17181A1D;
	--clr-altsection1: #F5FAFF;
	--clr-altsection2: #F7F9FA;
	--clr-separator: #E3E9EE;
	--clr-footer: #06295A;
	--clr-footer-linkslist-bg: #0192D5;
	--clr-footer-hr: #F2F2F2;
	--clr-header-sticky: #FFFFFFDD;
	--clr-header-links: #1E3C5B;
	--clr-header-active: #278EE2;
	--clr-header-inactive: #C2CAD1;
	--clr-header-back: #069ADE;
	--clr-hero-heading: #1F3B70;
	--clr-hero-paragraph: #17181A;
	--clr-label-publikasi: #63B3F4;
	--clr-label-sosialisasi: #6FCF97;
	--clr-label-webinar: #CF6F95;
	--clr-label-praktik-baik: #CF6F95;
	--clr-label-opini: #CF6F95;
	--clr-flyout-btn-accent: #63B3F4;
	--clr-flyout-btn-accent-hover: #7EC0F6;
	--clr-accent-box-title: #061A2E;
	--clr-accent-box-bg: #F7F9FA;
	--clr-accent-box-text: #414548;
	--clr-bar-default: #FFD500;
	--clr-bar-success: #D1E7DD;
	--clr-bar-error: #F8D7DA;
	--clr-bar-warning: #FFF3CD;
	--clr-bar-info: #CFF4FC;
	--clr-bar-btn-default: #63B3F4;
	--clr-bar-btn-success: #0F5133;
	--clr-bar-btn-error: #84202A;
	--clr-bar-btn-warning: #664D03;
	--clr-bar-btn-info: #075162;
	--clr-detail-table-shading: #F7F9FA;
	--clr-transparent: #00000000;
	--clr-modal-bg: #00000055;
	--clr-bg-hero: #DDF0FF;

	/* FILTERS */
	--flt-button-normal: brightness(1);
	--flt-button-lighten: brightness(1.1);
	--flt-button-darken: brightness(0.9);
	--flt-button-half-lighten: brightness(1.05);
	--flt-button-half-darken: brightness(0.95);
	--flt-button-lighten-more: brightness(1.2);
	--flt-button-darken-more: brightness(0.8);

	/* SHADOWS */
	--sdw-soft: 0 13px 30px var(--clr-softshadow);
	--sdw-soft-hover: 0 13px 45px var(--clr-softshadowhover);
	--sdw-hard: 0px 0px 20px var(--clr-softshadowhover), 0px 0px 32px var(--clr-softshadowhover);
	--sdw-text-clarify: 0 0 4px var(--clr-paragraph), 0 0 8px var(--clr-paragraph), 0 0 12px var(--clr-paragraph);

	/* GRADIENT */
	--gra-darkenbg: linear-gradient(180deg, rgba(0, 0, 0, 0.294) 0%, rgba(0, 0, 0, 0.06) 63.54%, rgba(0, 0, 0, 0) 100%);

	/* RADIUSES */
	--rad-button: 12px;
	--rad-card: 12px;

	/* TRANSITIONS */
	--trn-button: all 0.15s ease-in-out;
	--trn-card: all 0.25s ease-in-out;
	--trn-header: all 0.2s ease-in-out;
	--trn-flyout: all 0.35s ease;
	--trn-barba: all 0.25s linear;
	--trn-barba-in: all 0.25s cubic-bezier(0.56, 0.01, 0.94, 0.61);
	--trn-barba-out: all 0.5s cubic-bezier(0.17, 0.26, 0.19, 1.00);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/*===============================================*/

/*===============================================*/
/* Transisi Barba.js */
/*-----------------------------------------------*/

.fade-leave {
	opacity: 1;
}
.fade-leave .hero div {
	transform: translateX(0);
}
.fade-leave-active {
	-webkit-transition: var(--trn-barba);
	-moz-transition: var(--trn-barba);
	-ms-transition: var(--trn-barba);
	-o-transition: var(--trn-barba);
	transition: var(--trn-barba);
}
.fade-leave-to {
	opacity: 0;
}
.fade-leave-to .hero div {
	transform: translateX(-20px);
	-webkit-transition: var(--trn-barba-in);
	-moz-transition: var(--trn-barba-in);
	-ms-transition: var(--trn-barba-in);
	-o-transition: var(--trn-barba-in);
	transition: var(--trn-barba-in);
}

.fade-enter {
	opacity: 0;
}
.fade-enter .hero div {
	transform: translateX(20px);
}
.fade-enter-active {
	-webkit-transition: var(--trn-barba-out);
	-moz-transition: var(--trn-barba-out);
	-ms-transition: var(--trn-barba-out);
	-o-transition: var(--trn-barba-out);
	transition: var(--trn-barba-out);
}
.fade-enter-to {
	opacity: 1;
}
.fade-enter-to .hero div {
	transform: translateX(0);
	-webkit-transition: var(--trn-barba-out);
	-moz-transition: var(--trn-barba-out);
	-ms-transition: var(--trn-barba-out);
	-o-transition: var(--trn-barba-out);
	transition: var(--trn-barba-out);
}

/*===============================================*/

/*===============================================*/
/* Modifikasi HTML */
/*-----------------------------------------------*/
* {
	/*outline: 1px solid #555555;*/
	/*padding: 5px;*/
	/*margin: 5px;*/
	box-sizing: border-box;
}
html {
	-webkit-scroll-behavior: smooth;
	-moz-scroll-behavior: smooth;
	-ms-scroll-behavior: smooth;
	-o-scroll-behavior: smooth;
	scroll-behavior: smooth;
}
body {
	padding: 0;
	margin: 0;
	font-family: var(--fnt-main);
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
	/*font-optical-sizing: none;*/
}
a, a:-webkit-any-link {
	text-decoration: none;
	font-family: var(--fnt-main);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
body:not(:has(.file-gridview)) a:hover, body:not(:has(.file-gridview)) a:-webkit-any-link:hover {
	filter: var(--flt-button-lighten);
	-webkit-filter: var(--flt-button-lighten);
	-moz-filter: var(--flt-button-lighten);
	-ms-filter: var(--flt-button-lighten);
	-o-filter: var(--flt-button-lighten);
}
input, select, button, a {
	outline: 0 solid var(--clr-inputoutline);
	text-decoration: none;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
	transition: var(--trn-button);
	outline: 4px solid var(--clr-inputoutline);
}
.hero input:focus-visible, .hero select:focus-visible, .hero button:focus-visible, .hero a:focus-visible {
	outline: 4px solid var(--clr-inputoutlinehero);
}
/*===============================================*/

/*===============================================*/
/* Modifikasi Style Heading */
/*-----------------------------------------------*/
h1 {
	font-family: var(--fnt-secondary);
	margin: 0;
	font-style: normal;
	font-weight: 600;
	font-size: 40px;
	line-height: 130%;
	color: var(--clr-heading);
}
h2 {
	font-family: var(--fnt-secondary);
	padding: 0;
	margin: 0;
	font-style: normal;
	font-weight: 600;
	font-size: 40px;
	line-height: 130%;
	color: var(--clr-heading);
}
h3 {
	font-family: var(--fnt-secondary);
	padding: 0;
	margin: 0;
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	color: var(--clr-heading);
}
h4 {
	font-family: var(--fnt-secondary);
	padding: 0;
	margin: 0;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-heading);
}
/*===============================================*/

/*===============================================*/
/* Modifikasi Style Paragraf */
/*-----------------------------------------------*/
p {
	padding: 0;
	margin: 0;
	font-style: normal;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
ul, ol {
	margin-top: 0;
	margin-bottom: 0;
	font-style: normal;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
li {
	padding: 0;
	margin: 0;
	font-style: normal;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
/*===============================================*/

/*===============================================*/
/* Style untuk Button */
/*-----------------------------------------------*/
.btn-wrapper {
    display: flex;
    flex-direction: row;
}
.button {
	font-style: normal;
	font-size: 16px;
	line-height: 120%;
    padding: 16px 24px;
	border-radius: var(--rad-button);
	font-weight: 600;
	background: var(--clr-button);
	border: 1px solid var(--clr-button);
	color: var(--clr-white);
    display: inline-flex;
    align-items: center;
	filter: var(--flt-button-normal);
	-webkit-filter: var(--flt-button-normal);
	-moz-filter: var(--flt-button-normal);
	-ms-filter: var(--flt-button-normal);
	-o-filter: var(--flt-button-normal);
	text-decoration: none;
	text-align: center;
	text-wrap: balance;
	/*letter-spacing: 0.5px;*/
}
.button:hover {
	filter: var(--flt-button-lighten);
	-webkit-filter: var(--flt-button-lighten);
	-moz-filter: var(--flt-button-lighten);
	-ms-filter: var(--flt-button-lighten);
	-o-filter: var(--flt-button-lighten);
}
.button:active {
	filter: var(--flt-button-darken);
	-webkit-filter: var(--flt-button-darken);
	-moz-filter: var(--flt-button-darken);
	-ms-filter: var(--flt-button-darken);
	-o-filter: var(--flt-button-darken);
}
.button.secondary {
	background: none;
	color: var(--clr-button-secondary);
	border: 1px solid var(--clr-button-secondary);
}
.button.secondary:hover {
	background: var(--clr-button-secondary);
	color: var(--clr-white);
	border: 1px solid var(--clr-button-secondary);
}
.hero.mainhero .button.secondary {
	background: none;
	color: var(--clr-button-secondary);
	border: 1px solid var(--clr-button-secondary);
}
.hero.mainhero .button.secondary:hover {
	background: var(--clr-button-secondary);
	color: var(--clr-white);
	border: 1px solid var(--clr-button-secondary);
}
.hero .button.secondary,
.button.hero.secondary {
	background: none;
	color: var(--clr-white);
	border: 1px solid var(--clr-white);
}
.hero .button.secondary:hover,
.button.hero.secondary:hover {
	background: var(--clr-white);
	color: var(--clr-button-secondary);
	border: 1px solid var(--clr-white);
}
.button.tertiary {
	padding: 0;
	margin: 0;
	background: none;
	color: var(--clr-tertiary);
	border: none;
}
.hero .button.tertiary,
.button.hero.tertiary {
	padding: 0;
	margin: 0;
	background: none;
	color: var(--clr-white);
	border: none;
}
.hero .button.tertiary:hover,
.button.hero.tertiary:hover {
	padding: 0;
	margin: 0;
	background: none;
	color: var(--clr-linkhover);
	border: none;
}
.hero .button, .button.accent {
	background: var(--clr-button-accent);
	/*color: var(--clr-white);*/
	color: var(--clr-button-accent-text);
	border: 1px solid var(--clr-button-accent);
	padding: 15px 30px;
	font-size: 20px;
	box-shadow: var(--sdw-soft);
}
.button .with-icon {
	padding-left: 8px;
	font-size: 16px;
	width: 16px;
}
/*===============================================*/

/*===============================================*/
/* HEADER */
/*-----------------------------------------------*/
header {
	display: flex;
	display: -webkit-flex;
	width: 100%;
    z-index: 100000;
    justify-content: center;
    position: absolute;
}
.header.sticky {
	position: fixed;
	width: 100%;
	z-index: 9999;
	box-shadow: var(--sdw-soft);
    height: 144px;
    min-height: 144px;
    padding: 20px 0;
}
.header .main {
    max-width: 1200px;
    width: 100%;
    height: 144px;
    min-height: 144px;
    padding: 20px 0;
}
.header.wrapper {
    padding: 0 60px;
    width: 100%;
    background: transparent;
	-webkit-transition: var(--trn-header);
	-moz-transition: var(--trn-header);
	-ms-transition: var(--trn-header);
	-o-transition: var(--trn-header);
	transition: var(--trn-header);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    -ms-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit--webkit-backdrop-filter: blur(10px);
    -moz--webkit-backdrop-filter: blur(10px);
    -ms--webkit-backdrop-filter: blur(10px);
    -o--webkit-backdrop-filter: blur(10px);
}
.header.wrapper.sticky {
    width: 100%;
    top: 0;
    background: var(--clr-header-sticky);
	-webkit-transition: var(--trn-header);
	-moz-transition: var(--trn-header);
	-ms-transition: var(--trn-header);
	-o-transition: var(--trn-header);
	transition: var(--trn-header);
}
.header.wrapper.sticky a {
    color: var(--clr-header-links);
}
.header.wrapper.sticky .menu-active a {
    color: var(--clr-header-active);
}
.header.wrapper.sticky .main {
    max-width: 1200px;
    width: 100%;
}
.header {
	display: flex;
    justify-content: center;
    z-index: 100000;
}
/*.header.wrapper.sticky .logo img {
	width: 306px;
	height: 50px;
	padding-left: 306px;
	background-image: url("../images/logo-kemendikbudristek-dark.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}*/
.header .logo img {
	height: 64px;
}
.header .slogan .slogan-tagar img,
.footer .slogan .slogan-tagar img {
    width: 120px;
    height: auto;
}
.header .slogan .slogan-ramah img,
.footer .slogan .slogan-ramah img {
    width: 100px;
    height: auto;
}
.badge-new {
    width: 8px;
    height: 8px;
    background: var(--clr-emphasis);
    display: inline-flex;
    margin-left: 8px;
    border-radius: 24px;
    position: relative;
    bottom: 8px;
}
.menu-item {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	list-style: none;
	padding: 0;
	height: 28px;
	justify-content: flex-start;
    align-items: flex-start;
	flex-direction: column;
	gap: 32px;
}
.menu-drop-down-wrapper {
    padding-top: 12px;
    margin: 0 -20px;
    position: relative;
    display: none;
}
.menu-drop-down {
	display: none;
	position: absolute;
	background: var(--clr-white);
	min-width: 160px;
	box-shadow: var(--sdw-hard);
	color: var(--clr-paragraph);
	padding: 8px;
	border-radius: 8px;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
    left: 20px;
}
.menu-drop-down .menu-link {
	display: flex;
	width: 100%;
}
.menu-drop-down .menu-link a {
	padding: 8px 12px;
	color: var(--clr-paragraph);
	display: flex;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	border-radius: 8px;
	width: 100%;
}
.menu-drop-down .menu-link a:hover {
	background: var(--clr-tertiary);
	color: var(--clr-dummybg);
}
.menu-link a.active {
	font-weight: 700;
}
.menu-link a {
	padding: 0;
	color: var(--clr-header-links);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	text-decoration: none;
    white-space: nowrap;
}
.header .menu-item > .menu-link:last-child a {
	padding: 0;
}
.sticky .menu-link a:hover {
	color: var(--clr-header-active);
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
}
.menu-link a:hover {
	color: var(--clr-header-active);
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
}
.menu-active {
	font-weight: 700;
}
.menu-drop-arrow {
	font-size: 20px;
	color: var(--clr-header-links);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
    margin: -20px 0 -20px 4px;
    position: relative;
    bottom: -4px;
    width: 20px;
}
.sticky .menu-drop-arrow {
    color: var(--clr-header-links);
}
.sticky .menu-drop-down .menu-link a:hover {
    color: var(--clr-white);
}
.menu-link.menu-drop-exist:hover .menu-drop-arrow {
	color: var(--clr-link-hover);
}

/*===============================================*/

/*===============================================*/
/* FOOTER */
/*-----------------------------------------------*/
footer {
	background: var(--clr-footer);
	padding-top: 96px;
	padding-bottom: 24px;
	padding-left: 60px;
	padding-right: 60px;

}
footer * {
    color: var(--clr-footertext);
}
footer > * {
    max-width: 1200px;
    width: 100%;
}
.footer {
	display: flex;
    justify-content: center;
}
.ftr-heading {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
}
.ftr-links {
	list-style: none;
	padding: 0;
}
.ftr-links li {
	font-style: normal;
    font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	padding-bottom: 14px;
}
.ftr-links li:last-child {
	padding-bottom: 0;
}
.ftr-links.nospace li {
	padding-bottom: 4px;
}
li.nospace {
	padding-bottom: 0;
}
li.smalltext {
	font-size: 14px;
}
.ftr-links.external {
	font-style: normal;
	font-weight: 700;
	font-size: 17px;
}
.ftr-links a:hover, .ftr-list a:hover {
	filter: var(--flt-button-darken-more);
	-webkit-filter: var(--flt-button-darken-more);
	-moz-filter: var(--flt-button-darken-more);
	-ms-filter: var(--flt-button-darken-more);
	-o-filter: var(--flt-button-darken-more);
}
.attribu {
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	line-height: 133%;
	border-top: 0.5px solid var(--clr-footertext);
	padding-top: 8px;
    width: 100%;
}
.ftr-list {
	padding-left: 30px;
}
.ftr-list li {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	padding-bottom: 14px;
	list-style: none;
}
.ftr-list.nospace li {
	padding-bottom: 4px;
}
.ftr-list li:before {
	content: "";
    width: 20px;
    height: 20px;
    display: flex;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin-left: -32px;
    margin-top: 0.75px;
}
.ftr-list.phone li:before {
    background-image: url("../images/ico-wa.svg");
}
.ftr-list.mail li:before {
    background-image: url("../images/ico-mail.svg");
}
.ftr-list.instagram li:before {
    background-image: url("../images/ico-ig.svg");
}
.ftr-list.hours li:first-child:before {
    background-image: url("../images/ico-time.svg");
}
footer .main-logo {
    width: 54px;
    height: auto;
    opacity: 1;
    aspect-ratio: 1 / 1;
    background-image: url("../images/twh-new.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.breakmob {
    display: flex;
    flex-direction: column;
}
/*===============================================*/

/*===============================================*/
/* GENERAL SECTION */
/*-----------------------------------------------*/
.section {
	padding: 96px 60px;
	display: flex;
    justify-content: center;
    overflow: hidden;
    background: var(--clr-white);
}
.section .button {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.section > div {
    max-width: 1200px;
    width: 100%;
}
.altsection1 {
	background: var(--clr-altsection1);
}
.altsection2 {
	background: var(--clr-altsection2);
}
.smallheading {
	padding-top: 64px !important;
}
.smallheading h1, h1.smallheading {
	font-size: 32px;
}
.smallheading .circlenum,
.circlenum-listing {
	font-size: 24px;
	background: var(--clr-footer-linkslist-bg);
	padding: 16px;
    line-height: 160%;
    color: var(--clr-white);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    margin-bottom: 24px;
}
.desctop {
	font-weight: 400;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-accent-box-title);
}
.padshort {
	padding-top: 64px;
	padding-bottom: 64px;
}
.padhero {
	padding-top: 200px;
    padding-bottom: 124px;
}
.padheroshort {
	padding-top: 170px;
	padding-bottom: 64px;
    height: 512px;
}
.padheromoderate {
	padding-top: 120px;
    padding-bottom: 40px;
    height: 370px;
}
.padplatform {
	padding-top: 168px;
	padding-bottom: 175px;
}
.padpagedetail {
	padding-top: 68px;
	padding-bottom: 68px;
}
.padtitleonly {
	padding-top: 160px;
    padding-bottom: 24px;
}
.padheadingonly {
	padding-top: 96px;
    padding-bottom: 0;
}
/*===============================================*/

/*===============================================*/
/* HERO SECTION */
/*-----------------------------------------------*/
.section.hero {
	background: var(--clr-bg-hero);
}
.section.hero.mainhero {
	background: var(--clr-bg-hero);
    background-position: center;
    background-size: cover;
}
#home.section.hero.mainhero {
    min-height: 700px;
}
.section.hero.mainhero.ultimate h1 {
	color: var(--clr-hero-heading);
	font-weight: 600;
}
.section.hero.mainhero.ultimate h1 b {
	color: var(--clr-hero-heading);
	font-weight: 700;
}
.section.hero.mainhero h1 {
	color: var(--clr-hero-heading);
	font-weight: 700;
}
.section.hero.mainhero h1 b {
	color: var(--clr-white);
	font-weight: 1000;
}
h1 .accent,
h2 .accent,
h3 .accent,
h4 .accent,
p .accent,
li .accent{
	color: var(--clr-header-back);
}
h1 .accentbold,
h2 .accentbold,
h3 .accentbold,
h4 .accentbold,
p .accentbold,
li .accentbold{
	font-weight: 700;
}
.section.hero h1,
.section.hero h2,
.section.hero h3,
.section.hero h4,
.section.hero p,
.section.hero li,
.section.hero .list-link,
.section.hero .list-link .material-symbols-outlined.with-icon {
	color: var(--clr-white);
}
.section.hero.mainhero h1,
.section.hero.mainhero h2,
.section.hero.mainhero h3,
.section.hero.mainhero h4 {
	color: var(--clr-hero-heading);
}
.section.hero.mainhero p,
.section.hero.mainhero li,
.section.hero.mainhero .list-link,
.section.hero.mainhero .list-link .material-symbols-outlined.with-icon {
	color: var(--clr-hero-paragraph);
}
.section.hero.padtitleonly h1,
.section.hero.padtitleonly h2,
.section.hero.padtitleonly h3,
.section.hero.padtitleonly h4 {
	color: var(--clr-hero-heading);
}
.section.hero.padtitleonly p,
.section.hero.padtitleonly li,
.section.hero.padtitleonly .list-link,
.section.hero.padtitleonly .list-link .material-symbols-outlined.with-icon {
	color: var(--clr-hero-paragraph);
}
.section.hero.padheromoderate h1,
.section.hero.padheromoderate h2,
.section.hero.padheromoderate h3,
.section.hero.padheromoderate h4 {
	color: var(--clr-hero-heading);
}
.section.hero.padheromoderate p,
.section.hero.padheromoderate li,
.section.hero.padheromoderate .list-link,
.section.hero.padheromoderate .list-link .material-symbols-outlined.with-icon {
	color: var(--clr-hero-paragraph);
}
.section.hero .list.checklist li:before {
    background-image: url("../images/ico-check-white.svg");
}
.section.hero .circlenum-accent {
    background: var(--clr-white);
    color: var(--clr-heading);
}
.section.hero .link {
	padding:0;
	margin: 0;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-white);
	display: inline-block;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.section.hero .link .material-symbols-outlined.with-icon {
	color: var(--clr-white);
    font-size: 16px;
    padding: 0 0 0 8px;
    margin-top: -5px;
    bottom: -2px;
    position: relative;
}
.imageboxfit.section-video {
    width: 100%;
    aspect-ratio: 16/9;
}
.section-video .video-thumb {
    width: 100%;
    aspect-ratio: 16/9;
	pointer-events: auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--sdw-soft);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-white);
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	user-select: none;
}
.section-video .video-thumb.video-km {
    background-image: url(../videos/preview-video-km-loop.gif);
    background-size: cover;
    background-position: center;
}
.section-video .video-thumb:after {
    content: "";
    width: 500px;
    height: 250px;
    position: absolute;
    display: block;
    justify-content: center;
    align-items: center;
    background-image: url(../images/play-overlay.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
}
.section-video:hover .video-thumb:after {
    background-size: 50%;
}
.section-video .video-thumb:hover {
	box-shadow: var(--sdw-soft-hover);
	transform: scale(1.01);
}
.section-video .video-thumb img {
	width: 100%;
}
.videostyle {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
}
.video-preview-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-preview {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
}
.youtube-container {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
}
.youtube-container #videoyoutube {
    width: 100%;
    height: 100%;
    margin-left: 0;
    /*width: 300%;*/
    /*height: 100%;*/
    /*margin-left: -100%;*/
}
#pelajari .link .material-symbols-outlined.with-icon {
	color: var(--clr-button);
    font-size: 16px;
    padding: 0 0 0 8px;
    margin-top: -5px;
    bottom: -12px;
    position: relative;
}
.section.hero .link:hover {
	filter: var(--flt-button-darken);
	-webkit-filter: var(--flt-button-darken);
	-moz-filter: var(--flt-button-darken);
	-ms-filter: var(--flt-button-darken);
	-o-filter: var(--flt-button-darken);
}
#filter-hasil-pencarian .wrapper {
	padding: 0 160px;
}
#filter-hasil-pencarian .message-box, .message-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-pagination-active);
	padding: 26px 40px;
	border-radius: 8px;
	margin: 40px 0;
}
#filter-hasil-pencarian .message-box-title, .message-box-title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
#filter-hasil-pencarian .message-box-btn, .message-box-btn {
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--clr-secondary);
	color: var(--clr-button-accent-text);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
}
#filter-hasil-pencarian .acc-content {
	position: relative;
	top: -12px;
	padding-top: 0;
	padding-left: 64px;
}
.tb-search.hasil-pencarian-search {
    flex-basis: 100%;
	margin-right: 0;
}
.linkslist.link {
	color: var(--clr-button);
	padding:0;
	margin: 0;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 156%;
	display: flex;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	filter: var(--flt-button-normal);
	-webkit-filter: var(--flt-button-normal);
	-moz-filter: var(--flt-button-normal);
	-ms-filter: var(--flt-button-normal);
	-o-filter: var(--flt-button-normal);
	text-decoration: none;
}
.linkslist.link:hover {
	text-decoration: underline;
	color: var(--clr-header-back);
}
.linkslist.button {
	padding: 16px 24px;
	font-size: 16px;
    line-height: 100%;
}
.linkslist.header {
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 138%;
	text-align: center;
	color: var(--clr-footer-hr);
}
.linkslist.header b {
	font-weight: 900;
}
.linkslist:hover {
	filter: var(--flt-button-lightenmore);
	-webkit-filter: var(--flt-button-lightenmore);
	-moz-filter: var(--flt-button-lightenmore);
	-ms-filter: var(--flt-button-lightenmore);
	-o-filter: var(--flt-button-lightenmore);
}
.section.hero .linkslist.link {
	color: var(--clr-white);
}
.section.hero#lebihlanjut{
	background: var(--clr-footer-linkslist-bg);
}
.linkslist.kurikulum-header {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	color: var(--clr-heading);
}
.linkslist.kurikulum-content {
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-paragraph);
	height: 32px;
}
.linkslist .list-separator {
	border-bottom: 1px solid var(--clr-separator);
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.linkslist .list-separator:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.linkslist.kurikulum-box {
	padding: 32px;
	background: var(--clr-faqitem);
	border-radius: 16px;
}
.kurikulum-icon.file-icon {
	width: 32px;
	height: 32px;
	margin-right: 8px;
}
.kurikulum-link:after {
	content: "arrow_forward";
	font-size: 16px;
	color: var(--clr-paragraph);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 8px;
}
/*===============================================*/

/*===============================================*/
/* ICON BOX */
/*-----------------------------------------------*/
.icon-box {
	padding: 32px;
	background: var(--clr-white);
	border: 0.5px solid #F5FAFF;
	box-shadow: var(--sdw-soft);
	border-radius: var(--rad-card);
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
}
.icon-box .icon {
	width: 64px;
	height: 64px;
}
.icon-box .icon .icon-img {
	width: inherit;
	height: inherit;
}
.icon-box:hover {
	box-shadow: var(--sdw-soft-hover);
}
.icon-box .box.par {
	color: var(--clr-textbox);
}
.icon-box .box.par b {
	font-weight: 700;
}
.icon-box .box.par.nospace {
	margin: 0;
}
.icon-box h2 {
	font-size: 32px;
    padding-top: 4px;
}
.icon-box .list.checklist li {
	padding-bottom: 24px;
}
.icon-box .list.checklist li:before {
    background-image: url(../images/ico-check-green.svg);
}
.icon-box .list.checklist li:last-of-type {
	padding-bottom: 0;
}
.icon-box .list.checklist li h3 {
	font-size: 18px;
	color: var(--clr-paragraph);
	font-family: var(--fnt-main);
}
.icon-box .circlenum-integrate {
	font-size: 24px;
	background: var(--clr-footer-linkslist-bg);
	padding: 16px;
    line-height: 160%;
    color: var(--clr-white);
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
}
.icon-box .para-integrate {
	font-size: 18px;
}
.icon-box .example {
	background-color: var(--clr-altsection2);
	border-radius: 8px;
	font-family: var(--fnt-main);
	font-size: 16px;
	color: var(--clr-paragraph);
	padding: 16px;
	line-height: 150%;
}
.icon-box .example ul {
    padding-inline-start: 24px;
}
.backdrop-round {
	background-color: var(--clr-altsection1);
	border-radius: 24px;	
	padding: 24px;
}
/*===============================================*/

/*===============================================*/
/* SPACING */
/*-----------------------------------------------*/
.spacing-8 {
	display: block;
	position: relative;
	margin-bottom: 8px;
}
.spacing-16 {
	display: block;
	position: relative;
	margin-bottom: 16px;
}
.spacing-20 {
	display: block;
	position: relative;
	margin-bottom: 20px;
}
.spacing-24 {
	display: block;
	position: relative;
	margin-bottom: 24px;
}
.spacing-32 {
	display: block;
	position: relative;
	margin-bottom: 32px;
}
.spacing-40 {
	display: block;
	position: relative;
	margin-bottom: 40px;
}
.spacing-50 {
	display: block;
	position: relative;
	margin-bottom: 50px;
}
.spacing-64 {
	display: block;
	position: relative;
	margin-bottom: 64px;
}
/*===============================================*/

/*===============================================*/
/* HORIZONTAL SPACING */
/*-----------------------------------------------*/
.spacing-8-hor {
	display: block;
	position: relative;
	margin-right: 8px;
}
.spacing-16-hor {
	display: block;
	position: relative;
	margin-right: 16px;
}
.spacing-20-hor {
	display: block;
	position: relative;
	margin-right: 20px;
}
.spacing-24-hor {
	display: block;
	position: relative;
	margin-right: 24px;
}
.spacing-32-hor {
	display: block;
	position: relative;
	margin-right: 32px;
}
.spacing-40-hor {
	display: block;
	position: relative;
	margin-right: 40px;
}
.spacing-50-hor {
	display: block;
	position: relative;
	margin-right: 50px;
}
.spacing-64-hor {
	display: block;
	position: relative;
	margin-right: 64px;
}
/*===============================================*/

/*===============================================*/
/* GAP */
/*-----------------------------------------------*/
.gap-2 {
	gap: 2px;
}
.gap-4 {
	gap: 4px;
}
.gap-6 {
	gap: 6px;
}
.gap-8 {
	gap: 8px;
}
.gap-10 {
	gap: 10px;
}
.gap-12 {
	gap: 12px;
}
.gap-16 {
	gap: 16px;
}
.gap-20 {
	gap: 20px;
}
.gap-24 {
	gap: 24px;
}
.gap-32 {
	gap: 32px;
}
.gap-36 {
	gap: 36px;
}
.gap-40 {
	gap: 40px;
}
.gap-48 {
	gap: 48px;
}
.gap-60 {
	gap: 60px;
}
.gap-64 {
	gap: 64px;
}
/*===============================================*/

/*===============================================*/
/* FLEXBOX LAYOUTS */
/*-----------------------------------------------*/
.row {
	display: flex;
	flex-direction: row;
}
.column {
	display: flex;
	flex-direction: column;
}
.inner {
	display: flex;
	flex-direction: row;
}
.equal > * {
	flex: 1;
}
.ftr-width-28 {
	width: 28%;
}
.ftr-width-25 {
	width: 25%;
}
.ftr-width-24 {
	width: 24%;
}
.width-auto {
	width: auto;
}
.width-full {
	width: 100%;
}
.width-fit {
	width: fit-content;
}
.width-100vw {
	width: 100vw !important;
    max-width: unset !important;
}
.fbas-alur1 {
	flex: 0;
	flex-basis: 56px;
}
.fbas-alur2 {
	flex: 0;
	flex-basis: 478px;
}
.fbas-tabel {
	flex: 0;
	flex-basis: 196px;
}
.fbas-long {
	flex: 0;
	flex-basis: 75%;
}
.fbas-equal {
	flex: 0;
	flex-basis: 50%;
}
.fbas-normal {
	flex: 0;
    flex-basis: 35%;
}
.fbas-short {
	flex: 0;
	flex-basis: 24%;
}
.fbas-about {
	flex: 1 0;
	flex-basis: 400px;
}
.fbas-full {
	flex: 1 0;
	flex-basis: 100%;
}
.fbas-info {
    flex: 1 0 760px;
}
.fbas-grow {
	flex: 1 0;
}
.grid, .grid-row {
	display: grid;
	grid-auto-flow: row;
}
.grid-1, .grid-1c {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-2, .grid-2c {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3, .grid-3c {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4, .grid-4c {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-5, .grid-5c {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-6, .grid-6c {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-column {
	display: grid;
	grid-auto-flow: column;
}
.grid-1r {
	grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-2r {
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-3r {
	grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-4r {
	grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-5r {
	grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-6r {
	grid-template-rows: repeat(6, minmax(0, 1fr));
}
#alur p {
	color: var(--clr-textbox);
}
.height-full {
	height: 100%;
}
.remove-margin {
	margin: 0 !important;
}
.remove-padding {
	padding: 0 !important;
}
/*===============================================*/

/*===============================================*/
/* ALIGN */
/*-----------------------------------------------*/
.align.left {
	text-align: left;
}
.align.center {
	text-align: center;
}
.align.right {
	text-align: right;
}
.align.items-flst {
	align-items: flex-start;
}
.align.items-center {
	align-items: center;
}
.align.items-flen {
	align-items: flex-end;
}
.align.items-stretch {
	align-items: stretch;
}
.align.content-flst {
	justify-content: flex-start;
}
.align.content-center {
	justify-content: center;
}
.align.content-flen {
	justify-content: flex-end;
}
.align.content-spbw {
	justify-content: space-between;
}
.align.content-spar {
	justify-content: space-around;
}
.align.content-spev {
	justify-content: space-evenly;
}
.align.self-flst {
	align-self: flex-start;
}
.align.self-center {
	align-self: center;
}
.align.self-flen {
	align-self: flex-end;
}
/*===============================================*/

/*===============================================*/
/* SPECIAL ELEMENTS */
/*-----------------------------------------------*/
.check-lists {
	display: flex;
	flex-direction: column;
	gap: 8px;
    padding: 0;
}
.check-lists li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 16px;
	gap: 8px;
	background-color: var(--clr-white);
	border-radius: 8px;
	font-weight: 400;
    font-size: 16px;
	line-height: 155%;
	color: var(--slate-600);
	box-shadow: var(--sdw-soft);
}
.check-lists li:before {
    content: "";
    width: 20px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/ico-check-green.svg);
    flex-shrink: 0;
}
.circlenum-accent {
	padding: 0 4px;
	margin: 0;
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-white);
	width: 32px;
	height: 32px;
	border-radius: 20px;
	text-align: center;
	background: var(--clr-accent);
}
.list-title {
	padding: 0;
    margin: 0;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 160%;
    color: var(--clr-heading);
}
.list-separator {
	border-bottom: 1px solid var(--clr-separator);
	padding-bottom: 24px;
	margin-bottom: 24px;
}
.list-separator:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.list-link {
	padding:0;
	margin: 0;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-heading);
	display: inline-block;
}
.list-link:hover {
	text-decoration: underline;
}
.list-link .material-symbols-outlined.with-icon {
	color: var(--clr-secondary);
    font-size: 16px;
	padding: 0 0 0 3px;
	bottom: -2px;
	position: relative;
	padding-bottom: 5px;
}
.panduan-icon {
    font-size: 20px;
    position: relative;
    top: 4px;
    left: -2px;
}
.imageboxfit {
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.list.checklist li {
	list-style: none;
}
.list.checklist li:before {
	content: "";
    width: 28px;
    height: 28px;
    display: flex;
    position: absolute;
    background-image: url("../images/ico-check.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin-left: -42.5px;
    margin-top: 0.25px;
}
.spacer-row-fill {
	display: flex;
	flex-direction: row;
	flex-basis: 100%;
}
.spacer-row-fit {
	display: flex;
	flex-direction: row;
	width: 0;
}
.pointers {
	height: 480px;
}
.hidden-on-mobile {
	display: flex;
}
.hidden-on-desktop {
	display: none;
}
.under-construction {
	background: #F7C900;
	text-align: center;
    color: #252525;
    border-top: 8px dashed #252525;
    border-bottom: 8px dashed #252525;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    outline: 10px solid #F7C900;
    align-items: center;
}
.uc-main {
	font-size: 75px;
	line-height: 100%;
	font-weight: 700;
    letter-spacing: 2px;
    width: 100%;
    max-width: 900px;
}
.uc-main:before {
	content: "";
	position: relative;
	display: block;
	width: auto;
	height: 150px;
	background-image: url("../images/warning.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-bottom: 20px;
}
.uc-sub {
    font-size: 35px;
    font-weight: 700;
  
    letter-spacing: 4px;
    border-top: 5px dotted;
    margin-top: 15px;
    padding-top: 30px;
    font-style: italic;
    width: 100%;
    max-width: 900px;
}
.overflowshow {
	overflow: visible;
}
.offset-div {
	position: relative;
	top: -188px;
    margin-bottom: -188px;
}
.row-reverse {
	flex-direction: row-reverse;
}
.km-links {
	color: var(--clr-heading);
	font-weight: 600;
}
.btn-info {
    background: var(--clr-button-accent);
    color: var(--clr-button-accent-text);
    border: 1px solid var(--clr-button-accent);
    font-style: normal;
    font-size: 15px;
    line-height: 160%;
    padding: 10px 24px;
    border-radius: var(--rad-button);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    filter: var(--flt-button-normal);
    -webkit-filter: var(--flt-button-normal);
    -moz-filter: var(--flt-button-normal);
    -ms-filter: var(--flt-button-normal);
    -o-filter: var(--flt-button-normal);
    text-decoration: none;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.btn-info:hover {
    filter: var(--flt-button-lighten);
    -webkit-filter: var(--flt-button-lighten);
    -moz-filter: var(--flt-button-lighten);
    -ms-filter: var(--flt-button-lighten);
    -o-filter: var(--flt-button-lighten);
}
#fitur-pencarian .imageboxfit img {
    width: 572px;
}
#panduan-mata-pelajaran .imageboxfit img {
    width: 560px;
    margin-top: 132px;
}
#home.hero .imageboxfit {
    height: 100%;
    max-height: 700px;
}
#home.hero .imageboxfit img {
    /*height: 85%;*/
    /*margin-right: -24px;*/
}
.home #home.hero .imageboxfit img {
    height: 84%;
    margin-right: -60px;
}
.text-balance {
    text-wrap: balance;
}
/*===============================================*/

/*===============================================*/
/* MODAL POPUP DISPLAY */
/*-----------------------------------------------*/

.modal {
	display: none;
	position: fixed;
	z-index: 1999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
    padding: 20px;
	background-color: var(--clr-modal-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    -ms-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit--webkit-backdrop-filter: blur(10px);
    -moz--webkit-backdrop-filter: blur(10px);
    -ms--webkit-backdrop-filter: blur(10px);
    -o--webkit-backdrop-filter: blur(10px);
}
.modal.modal-closed {
	display: none !important;
}
.modal.modal-opened {
	display: flex !important;
}
.modal-content {
	background-color: var(--clr-white);
    margin: auto;
    padding: 8px;
    border-radius: 16px;
	box-shadow: var(--sdw-hard);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.modal-content iframe {
    width: 100%;
    height: 100%;
}
.modal-content > div {
	display: flex;
	flex-direction: column;
    width: 100%;
    height: 100%;
	align-items: flex-start;
	justify-content: center;
	padding-bottom: 0;
    border-radius: 12px;
    overflow: hidden;
}
.modal-content.video-content {
    padding: 8px;
    width: 100%;
    max-width: 75%;
    margin: auto;
    display: flex;
}
.modal-content.video-content > div {
    padding: 0;
    width: 100%;
    height: 100%;
}
.modal-content.video-content .modal-close{
    margin-top: -20px;
    top: 12px;
    left: 52px;
    font-size: 40px;
    text-shadow: var(--sdw-text-clarify);
    color: var(--clr-white);
}
.modal-content.video-content .modal-close:hover {
	transform: scale(1.3);
    color: var(--clr-linkhover);
}
.modal-content h1 {
	font-size: 32px;
	margin-bottom: 4px;
	text-align: left;
}
.modal-content h2 {
    font-size: 24px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: left;
}
.modal-content h3 {
	font-size: 24px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: left;
}
.modal-content h4 {
	font-size: 16px;
	font-style: italic;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: left;
}
.modal-content p {
	text-align: left;
	margin: 20px 0 32px 0;
}
.modal-close {
	display: flex;
	position: absolute;
    justify-content: center;
    align-items: center;
    color: var(--clr-textbox);
    font-size: 32px;
    cursor: pointer;
    width: min-content;
    user-select: none;
    top: 0;
    right: 0;
    z-index: 999;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border-radius: 8px;
}
.modal-close:hover {
    color: var(--clr-header-active);
	transform: scale(1.05);
}
.modal-close.close-hidden {
    display: none;
}
/*===============================================*/

/*===============================================*/
/* ACCORDION */
/*-----------------------------------------------*/
.acc-wrapper {
    position: relative;
	padding: 24px;
	background: var(--clr-faqitem);
	border-radius: 12px;
	margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.acc-heading:hover {
	filter: var(--flt-button-lighten);
	-webkit-filter: var(--flt-button-lighten);
	-moz-filter: var(--flt-button-lighten);
	-ms-filter: var(--flt-button-lighten);
	-o-filter: var(--flt-button-lighten);
}
.acc-heading {
	padding: 0;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 140%;
	color: var(--clr-heading);
	cursor: pointer;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.acc-content {
    margin: 0;
	overflow: hidden;
	padding-top: 16px;
	font-size: 16px;
    font-weight: 400;
	line-height: 160%;
	display: none;
}
.acc-content p {
    margin: 0 0 20px 0;
	overflow: hidden;
	padding-top: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 160%;
	color: var(--clr-paragraph);
}
.acc-content p:last-child {
    margin: 0;
}
.acc-content ul li {
    text-indent: 10px;
    margin-left: -10px;
	color: var(--clr-paragraph);
    margin-bottom: 5px;
}
.acc-content ol li {
    text-indent: 10px;
    margin-left: -20px;
	color: var(--clr-paragraph);
    margin-bottom: 5px;
}
.acc-content ol li,
.acc-content ol[type="1"] li,
.acc-content ol[type="a"] li {
    text-indent: 0;
    margin-left: 0;
	color: var(--clr-heading);
    margin-bottom: 5px;
}
.acc-expcol {
	display: block;
	width: 24px;
	height: 24px;
	user-select: none;
	pointer-events: none;
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
}
.acc-heading.active .acc-expcol {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit--webkit-transform: rotate(90deg);
	-moz--webkit-transform: rotate(90deg);
	-ms--webkit-transform: rotate(90deg);
	-o--webkit-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.acc-heading.active .modal-det-desc {
	top: 12px;
	opacity: 0;
}
/*===============================================*/

/*===============================================*/
/* FILE */
/*-----------------------------------------------*/
.filac-wrapper {
	position: relative;
    padding: 20px;
    background: var(--clr-faqitem);
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
.filac-heading:hover {
	filter: var(--flt-button-lighten);
	-webkit-filter: var(--flt-button-lighten);
	-moz-filter: var(--flt-button-lighten);
	-ms-filter: var(--flt-button-lighten);
	-o-filter: var(--flt-button-lighten);
}
.filac-heading {
	padding: 0;
	/*padding-top: 2px;*/
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	cursor: pointer;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	flex-basis: 100%;
	flex-direction: row;
}
.filac-heading.active {
	font-weight: 700 !important;
}
.filac-inline {
	display: inline-block;
}
.filac-content {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-description);
	padding-right: 80px;
}
.filac-content.active {
	padding-top: 16px;
}
.filac-content, .filac-content p {
    margin: 0;
	overflow: hidden;
	padding-top: 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 160%;
	display: none;
}
.filac-content ul li {
    text-indent: 10px;
    margin-left: -10px;
    color: var(--clr-heading);
    margin-bottom: 5px;
}
.filac-content ol li {
    text-indent: 10px;
    margin-left: -20px;
    color: var(--clr-heading);
    margin-bottom: 5px;
}
.filac-details {
	font-style: italic;
	font-size: 14px;
}
.filac-heading2.active .file-options2 .ic-info,
.filac-heading.active .file-options .ic-info {
	filter: invert(59%) sepia(24%) saturate(2809%) hue-rotate(182deg) brightness(95%) contrast(96%);
	-webkit-filter: invert(59%) sepia(24%) saturate(2809%) hue-rotate(182deg) brightness(95%) contrast(96%);
	-moz-filter: invert(59%) sepia(24%) saturate(2809%) hue-rotate(182deg) brightness(95%) contrast(96%);
	-ms-filter: invert(59%) sepia(24%) saturate(2809%) hue-rotate(182deg) brightness(95%) contrast(96%);
	-o-filter: invert(59%) sepia(24%) saturate(2809%) hue-rotate(182deg) brightness(95%) contrast(96%);
	opacity: 1;
}
.filac-item {
	margin-bottom: 12px !important;
}

.file-remark {
	font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 143%;
    padding: 1px 8px 2px 8px;
    margin-left: 8px;
    color: var(--clr-button-accent-text);
    background: var(--clr-button-accent);
    border-radius: 8px;
    position: relative;
    top: -1px;
}
.file-icon {
	/*width: 38px;
	height: 38px;*/
    width: 24px;
    height: 24px;
    display: flex;
    margin-right: 12px;
    transition: var(--trn-button);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    flex-grow: 0;
}
.file-section {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	display: flex;
	align-items: center;
	color: var(--clr-paragraph);
	padding: 52px 0 16px 0;
}
.file-options {
	pointer-events: none;
}
.op-icon {
    width: 28px;
    height: 28px;
    display: block;
    margin-left: 12px;
    transition: var(--trn-button);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
}
.op-icon:before {
    content: "";
    width: 40px;
    height: 40px;
    display: block;
    background-color: transparent;
    position: absolute;
    border-radius: 6px;
    z-index: -1;
    left: -6px;
    top: -6px;
}
.op-icon:hover:before {
    background-color: #00000033;
}
.file-listview .filac-content {
	overflow: visible;
}
.file-listview .image-holder {
    display: flex;
    justify-content: center;
    align-items: center;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--sdw-soft);
    width: 25%;
    margin-right: 24px;
    min-width: 180px;
    min-height: 250px;
    max-width: 180px;
    max-height: 250px;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.file-listview .image-holder:hover {
	filter: var(--flt-button-half-lighten);
	-webkit-filter: var(--flt-button-half-lighten);
	-moz-filter: var(--flt-button-half-lighten);
	-ms-filter: var(--flt-button-half-lighten);
	-o-filter: var(--flt-button-half-lighten);
}
.file-listview img {
    width: 100%;
    height: 100%;
    display: flex;
    object-fit: cover;
}
.file-gridview {
    grid-gap: 24px;
    padding-bottom: 48px;
}
.file-gridview .filac-wrapper {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	/*overflow: hidden;*/
	box-shadow: var(--sdw-soft);
    margin: 0;
	padding: 0;
	background: var(--clr-white);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
/*.file-gridview .filac-wrapper:hover {
	filter: var(--flt-button-half-darken);
	-webkit-filter: var(--flt-button-half-darken);
	-moz-filter: var(--flt-button-half-darken);
	-ms-filter: var(--flt-button-half-darken);
	-o-filter: var(--flt-button-half-darken);
}*/
.file-gridview .filac-wrapper.column .column {
    min-height: 368px;
}
.file-gridview .filac-heading {
	display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: var(--clr-paragraph);
    padding: 0 20px 20px 20px;
}
.file-gridview .file-remark {
    padding: 1px 8px;
    margin-left: 8px;
    color: var(--clr-button-accent-text);
    background: var(--clr-button-accent);
    border-radius: 8px;
    position: relative;
    bottom: 0px;
}
.file-gridview .file-section {
	display: grid;
    grid-column: 1 / 4;
}
.file-gridview .file-options {
	background: var(--gra-darkenbg);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	height: 179px;
	padding: 16px;
    width: 100%;
    position: absolute;
	opacity: 0; 
    pointer-events: none;
	visibility: hidden; 
}
.file-gridview .filac-wrapper:hover .file-options, .file-gridview .filac-wrapper:focus .file-options {
	opacity: 1;
	pointer-events: unset;
	visibility: visible;
}
.file-gridview .image-holder{
	width: auto;
	margin: 16px;
	border-radius: 8px;
	overflow: hidden;
}
.file-gridview img {
    display: flex;
    width: 100%;
}
.file-gridview.active {
	display: grid;
}
.file-listview.active {
	display: block;
}
.file-gridview {
	display: none;
}
.file-listview {
	display: none;
    padding-bottom: 48px;
}
.viewoption.itemicon .ic-grid.active {
	display: block;
}
.viewoption.itemicon .ic-list.active {
	display: block;
}
.viewoption.itemicon .ic-grid {
	display: none;
}
.viewoption.itemicon .ic-list {
	display: none;
}

.ty-general							{background-image: url("../images/filetype/general.svg");}
.ty-pdf								{background-image: url("../images/filetype/pdf.svg");}
.ty-doc, .ty-docx					{background-image: url("../images/filetype/doc.svg");}
.ty-xls, .ty-xlsx					{background-image: url("../images/filetype/xls.svg");}
.ty-ppt, .ty-pptx					{background-image: url("../images/filetype/ppt.svg");}
.ty-mp3, .ty-wav, .ty-aac, .ty-ogg	{background-image: url("../images/filetype/mp3.svg");}
.ty-mp4, .ty-avi, .ty-mov, .ty-wmv	{background-image: url("../images/filetype/mp4.svg");}
/*===============================================*/

/*===============================================*/
/* NEWS */
/*-----------------------------------------------*/
.news-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.news-main .news.blurb {
	top: 0;
	padding-top: 24px;
}
.news.wrapper {
    margin: 0 -20px -50px -20px;
    padding: 0 20px 40px 20px;
    overflow: hidden;
}
.news.link {
    height: 100%;
    width: 100%;
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	-o-transition: var(--trn-card);
	transition: var(--trn-card);
}
.news.link:hover {
	filter: var(--flt-button-half-lighten);
	-webkit-filter: var(--flt-button-half-lighten);
	-moz-filter: var(--flt-button-half-lighten);
	-ms-filter: var(--flt-button-half-lighten);
	-o-filter: var(--flt-button-half-lighten);
}
.news.box {
	background: var(--clr-white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--sdw-soft);
	-webkit-transition: var(--trn-card);
	-moz-transition: var(--trn-card);
	-ms-transition: var(--trn-card);
	transition: var(--trn-card);
	-o-transition: var(--trn-card);
    height: 100%;
}
.news.box:hover {
	box-shadow: var(--sdw-soft-hover);
}
.news.image {
    height: auto;
    width: 100%;
    aspect-ratio: 16/9;
	background-image: url("../images/berita/thumbnails/news-placeholder.svg");
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
    background: var(--clr-dummybg);
}
.news.image-big {
    height: 100%;
    width: 100%;
    aspect-ratio: 16/9;
	background-image: url("../images/berita/thumbnails/news-placeholder.svg");
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
    background: var(--clr-dummybg);
}
.news.image-inline {
	min-height: 460px;
    height: auto;
	background-image: url("../images/berita/thumbnails/news-placeholder.svg");
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
    background: var(--clr-dummybg);
	border-radius: 12px;
}
.news.blurb {
	padding: 0 32px 24px 32px;
	position: relative;
	top: -14px;
}
.news.label {
	padding: 4px 16px;
	background: var(--clr-heading);
	color: var(--clr-white);
	border-radius: 8px;
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 143%;
	display: inline-flex;
}
.news.blurb .title {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 140%;
	color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.news.nws-content {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
.news.nws-content p {
	margin-bottom: 20px;
}
.news.box:hover > .news.blurb .title {
	color: var(--clr-heading);
}
.news.blurb .date {
	font-style: normal;
	font-weight: 500;
	font-size: 15px;
	line-height: 160%;
	color: var(--clr-description);
}
.news-detail .box {
	border-radius: 0;
	background: transparent;
}
.news-detail .blurb {
	padding: 0 !important;
	position: relative;
	top: 0;
    height: 100%;
}
.news-detail .blurb .title {
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 138%;
	color: var(--clr-heading);
}
.news .related-title {
	font-weight: 700;
	font-size: 32px;
	line-height: 138%;
	color: var(--clr-heading);
}
#berita-detail-sect {
	padding-top: 64px;
}
#berita-filter {
	padding-top: 48px;
}
#platform .img-fill {
    height: 560px;
    margin-top: 60px;
}
#sibi .img-fill {
	height: 608px;
}
#webinar .img-fill {
	height: 352px;
}
.sharer-bar {
	font-weight: 700;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-paragraph);
}
.sharer-bar .sh-ico {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
}

.sharer-bar .sh-fb {	background-image: url("../images/icons/share/share-fb.svg");	}
.sharer-bar .sh-tw {	background-image: url("../images/icons/share/share-tw.svg");	}
.sharer-bar .sh-wa {	background-image: url("../images/icons/share/share-wa.svg");	}

.label.publikasi	{	background: var(--clr-label-publikasi)		;}
.label.sosialisasi	{	background: var(--clr-label-sosialisasi)	;}
.label.webinar		{	background: var(--clr-label-webinar)		;}
.label.praktik-baik	{	background: var(--clr-label-praktik-baik)	;}
.label.opini		{	background: var(--clr-label-opini)			;}
/*===============================================*/

/*===============================================*/
/* STYLING TOOLBAR */
/*-----------------------------------------------*/
.tb-search input, #tb-sort {
	font-family: var(--fnt-main);
	height: 48px;
	width: 100%;
	border: 1px solid var(--clr-inputbox);
	border-radius: 8px;
	padding: 12px 16px;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 160%;
	color: var(--clr-paragraph);
	background: var(--clr-white);
}
.tb-search input {
	padding-right: 48px;
}
.tb-search:placeholder {
	color: var(--clr-description);
}
.tb-search {
    flex-basis: 50%;
	margin-right: 48px;
}
.tb-search .searchbtn {
	border: none;
	background: none;
    position: absolute;
	width: 40px;
	height: 48px;
}
.tb-search .searchbtn span {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	width: 24px;
	height: 24px;
	display: block;
	cursor: pointer;
}
.tb-sort {
    flex-basis: 100%;
}
.tb-sort .select-wrapper {
    width: 100%;
}
.tb-left {
}
.tb-right {
    flex-basis: 315px;
}
.tb-toolbar .itemicon {
	border-left: 1px solid var(--clr-separator);
	margin-left: 24px;
	height: 32px;
}
.tb-toolbar .itemicon span {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	width: 24px;
	height: 24px;
	display: block;
	cursor: pointer;
	margin-left: 16px;
}
.tb-toolbar-text {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-paragraph);
	text-transform: uppercase;
}
.tb-toolbar-berita {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--clr-separator);
}
.tb-toolbar-berita .query-pill {
	color: var(--clr-paragraph);
	padding: 8px 8px 8px 16px;
	font-size: 18px;
}
.tb-toolbar-berita .query-num {
	padding: 0 8px;
	background: var(--clr-header-inactive);
	border-radius: 30px;
	font-style: normal;
	font-weight: 500;
	line-height: 156%;
	font-size: 18px;
	color: var(--clr-white);
	margin-left: 8px;
}
.tb-toolbar-berita .query-pill.active {
	color: var(--clr-header-active);
	font-weight: 700;
	padding: 8px 8px 8px 16px;
}
.tb-toolbar-berita .query-pill.active .query-num {
	padding: 0 8px;
	background: var(--clr-header-active);
	border-radius: 30px;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-white);
	margin-left: 8px;
}
.tb-faqsikn {
	border-bottom: 1px solid var(--clr-separator);
	width: fit-content;
}
/*===============================================*/

/*===============================================*/
/* SIDE MENU STYLING */
/*-----------------------------------------------*/
.side-menu {
	/*border-right: 1px solid var(--clr-separator);*/
}
.side-menu-item {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-description);
	border-right: 2px solid var(--clr-transparent);
	padding: 16px;
	z-index: 100;
}
.side-menu-item.active {
	font-weight: 700;
	color: var(--clr-secondary);
	padding: 16px;
	margin-right: -1.5px;
	border-right: 2px solid var(--clr-secondary);
	background: var(--clr-faqitem);
}
.side-menu-item.indent {
	padding-left: 32px;
}
.side-menu-item:hover {
	color: var(--clr-header-active);
}
.side-menu-item.active:hover {
	background: var(--clr-tabshover);
}
.side-menu-content {
	padding-left: 64px;
    border-left: 1px solid var(--clr-separator);
}
.side-menu-content p {
	margin-bottom: 16px;
}
.side-menu-content ol, .side-menu-content ul {
    padding-left: 18px;
    margin-bottom: 16px;
}
.side-menu-content li {
    padding-left: 8px;
}
.side-menu-content .accent-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-accent-box-bg);
	padding: 26px 100px;
	border-radius: 16px;
	margin: 32px 0;
}
.side-menu-content .accent-box .title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	margin-bottom: 32px;
	color: var(--clr-accent-box-title);
}
.side-menu-content .accent-box .desc {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	text-align: center;
	margin-top: 16px;
	color: var(--clr-accent-box-text);
}
.side-menu-content .accent-box a {
	color: var(--clr-heading);
}
.side-menu-content .links-box {
	display: flex;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 10px 24px;
	gap: 12px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	margin: 16px 0;
}
.side-menu-content .links-box span {
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
	gap: 10px;
	background: var(--clr-button-secondary);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-white);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.side-menu-content .links-box span:hover {
	background: var(--clr-flyout-btn-accent);
}
.side-menu-content .links-box span a {
	color: var(--clr-white);
}
.side-menu-content .links-box-alt {
	border-top: 1px solid var(--clr-inputbox);
	padding-top: 24px;
	margin: 32px 0 0 0;
	gap: 24px;
	display: flex;
}
.side-menu-content .links-box-alt span {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 12px 16px;
	gap: 10px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.side-menu-content .links-box-alt span.with-arrow:after {
	content: "arrow_forward";
	font-size: 16px;
	color: var(--clr-paragraph);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 10px;
	position: relative;
	bottom: -3px;
}
.side-menu-content .links-box-alt span:hover {
	background: var(--clr-flyout-btn-accent);
}
.side-menu-content .links-box-alt span a {
	color: var(--clr-paragraph);
}
.side-menu-content .helpdesk-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-pagination-active);
	padding: 26px 40px;
	border-radius: 8px;
	margin: 40px 0;
}
.side-menu-content .helpdesk-title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
.side-menu-content .helpdesk-btn {
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--clr-button-accent-main);
	color: var(--clr-button-accent-main-text);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
}
.side-menu-content .helpdesk-img-box {
	background: var(--clr-flyout-btn-accent);
	border-radius: 80px 8px 8px 0;
    margin: -26px -40px;
    position: relative;
    display: flex;
}
.side-menu-content .helpdesk-img-box img {
	margin-top: -34px;
    position: relative;
    display: flex;
    bottom: -1px;
}
/*===============================================*/

/*===============================================*/
/* TABS VERT MENU STYLING */
/*-----------------------------------------------*/
.tabs-vert-menu {
	/*border-right: 1px solid var(--clr-separator);*/
}
.tabs-vert-menu-item {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-description);
	border-right: 2px solid var(--clr-transparent);
	padding: 16px;
	z-index: 100;
}
.tabs-vert-menu-item.active {
	font-weight: 700;
	color: var(--clr-secondary);
	padding: 16px;
	margin-right: -1.5px;
	border-right: 2px solid var(--clr-secondary);
	background: var(--clr-faqitem);
}
.tabs-vert-menu-item.indent {
	padding-left: 32px;
}
.tabs-vert-menu-item:hover {
	color: var(--clr-header-active);
}
.tabs-vert-menu-item.active:hover {
	background: var(--clr-tabshover);
}
.tabs-vert-menu-content {
	padding-left: 64px;
    border-left: 1px solid var(--clr-separator);
}
.tabs-vert-menu-content p {
	margin-bottom: 16px;
}
.tabs-vert-menu-content ol, .tabs-vert-menu-content ul {
    padding-left: 18px;
    margin-bottom: 16px;
}
.tabs-vert-menu-content li {
    padding-left: 8px;
}
.tabs-vert-menu-content .accent-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-accent-box-bg);
	padding: 26px 100px;
	border-radius: 16px;
	margin: 32px 0;
}
.tabs-vert-menu-content .accent-box .title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	margin-bottom: 32px;
	color: var(--clr-accent-box-title);
}
.tabs-vert-menu-content .accent-box .desc {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	text-align: center;
	margin-top: 16px;
	color: var(--clr-accent-box-text);
}
.tabs-vert-menu-content .accent-box a {
	color: var(--clr-heading);
}
.tabs-vert-menu-content .links-box {
	display: flex;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 10px 24px;
	gap: 12px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	margin: 16px 0;
}
.tabs-vert-menu-content .links-box span {
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
	gap: 10px;
	background: var(--clr-button-secondary);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-white);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.tabs-vert-menu-content .links-box span:hover {
	background: var(--clr-flyout-btn-accent);
}
.tabs-vert-menu-content .links-box span a {
	color: var(--clr-white);
}
.tabs-vert-menu-content .links-box-alt {
	border-top: 1px solid var(--clr-inputbox);
	padding-top: 24px;
	margin: 32px 0 0 0;
	gap: 24px;
	display: flex;
}
.tabs-vert-menu-content .links-box-alt span {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 12px 16px;
	gap: 10px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.tabs-vert-menu-content .links-box-alt span.with-arrow:after {
	content: "arrow_forward";
	font-size: 16px;
	color: var(--clr-paragraph);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 10px;
	position: relative;
	bottom: -3px;
}
.tabs-vert-menu-content .links-box-alt span:hover {
	background: var(--clr-flyout-btn-accent);
}
.tabs-vert-menu-content .links-box-alt span a {
	color: var(--clr-paragraph);
}
.tabs-vert-menu-content .helpdesk-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-pagination-active);
	padding: 26px 40px;
	border-radius: 8px;
	margin: 40px 0;
}
.tabs-vert-menu-content .helpdesk-title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
.tabs-vert-menu-content .helpdesk-btn {
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--clr-button-accent-main);
	color: var(--clr-button-accent-main-text);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
}
.tabs-vert-menu-content .helpdesk-img-box {
	background: var(--clr-flyout-btn-accent);
	border-radius: 80px 8px 8px 0;
    margin: -26px -40px;
    position: relative;
    display: flex;
}
.tabs-vert-menu-content .helpdesk-img-box img {
	margin-top: -34px;
    position: relative;
    display: flex;
    bottom: -1px;
}
/*===============================================*/

/*===============================================*/
/* TABS MENU STYLING */
/*-----------------------------------------------*/
.tabs-menu {
	/*border-right: 1px solid var(--clr-separator);*/
}
.tabs-menu-item {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-description);
	border-bottom: 2px solid var(--clr-transparent);
	padding: 16px;
	z-index: 100;
}
.tabs-menu-item.active {
	font-weight: 700;
	color: var(--clr-secondary);
	padding: 16px;
	margin-bottom: -1.5px;
	border-bottom: 2px solid var(--clr-secondary);
	/*background: var(--clr-faqitem);*/
}
.tabs-menu-item.indent {
	padding-left: 32px;
}
.tabs-menu-item:hover {
	color: var(--clr-header-active);
}
.tabs-menu-item.active:hover {
	background: var(--clr-inputoutlinehero);
}
.tabs-menu-content {
	padding-top: 64px;
    border-top: 1px solid var(--clr-separator);
}
.tabs-menu-content.snp {
    min-height: 640px;
}
.tabs-menu-content.opsi {
    min-height: 476px;
}
.tabs-menu-content p {
	margin-bottom: 16px;
}
.tabs-menu-content ol, .tabs-menu-content ul {
    padding-left: 18px;
    margin-bottom: 16px;
}
.tabs-menu-content li {
    padding-left: 24px;
}
.tabs-menu-content .accent-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-accent-box-bg);
	padding: 26px 100px;
	border-radius: 16px;
	margin: 32px 0;
}
.tabs-menu-content .accent-box .title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	margin-bottom: 32px;
	color: var(--clr-accent-box-title);
}
.tabs-menu-content .accent-box .desc {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	text-align: center;
	margin-top: 16px;
	color: var(--clr-accent-box-text);
}
.tabs-menu-content .accent-box a {
	color: var(--clr-heading);
}
.tabs-menu-content .links-box {
	display: flex;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 10px 24px;
	gap: 12px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	margin: 16px 0;
}
.tabs-menu-content .links-box span {
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
	gap: 10px;
	background: var(--clr-button-secondary);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-white);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.tabs-menu-content .links-box span:hover {
	background: var(--clr-flyout-btn-accent);
}
.tabs-menu-content .links-box span a {
	color: var(--clr-white);
}
.tabs-menu-content .links-box-alt {
	border-top: 1px solid var(--clr-inputbox);
	padding-top: 24px;
	margin: 32px 0 0 0;
	gap: 24px;
	display: flex;
}
.tabs-menu-content .links-box-alt span {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 12px 16px;
	gap: 10px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.tabs-menu-content .links-box-alt span.with-arrow:after {
	content: "arrow_forward";
	font-size: 16px;
	color: var(--clr-paragraph);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 10px;
	position: relative;
	bottom: -3px;
}
.tabs-menu-content .links-box-alt span:hover {
	background: var(--clr-flyout-btn-accent);
}
.tabs-menu-content .links-box-alt span a {
	color: var(--clr-paragraph);
}
.tabs-menu-content.faqsikn {
	border-top: none;
	padding-top: 32px;
}
/*===============================================*/

/*===============================================*/
/* TABS HORZ MENU STYLING */
/*-----------------------------------------------*/
.tabs-horz-menu {
	/*border-right: 1px solid var(--clr-separator);*/
}
.tabs-horz-menu-item {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-description);
	border-bottom: 2px solid var(--clr-transparent);
	padding: 16px;
	z-index: 100;
}
.tabs-horz-menu-item.active {
	font-weight: 700;
	color: var(--clr-secondary);
	padding: 16px;
	margin-bottom: -1.5px;
	border-bottom: 2px solid var(--clr-secondary);
	/*background: var(--clr-faqitem);*/
}
.tabs-horz-menu-item.indent {
	padding-left: 32px;
}
.tabs-horz-menu-item:hover {
	color: var(--clr-header-active);
}
.tabs-horz-menu-item.active:hover {
	background: var(--clr-inputoutlinehero);
}
.tabs-horz-menu-content {
	padding-top: 64px;
    border-top: 1px solid var(--clr-separator);
}
.tabs-horz-menu-content.snp {
    min-height: 640px;
}
.tabs-horz-menu-content.opsi {
    min-height: 476px;
}
.tabs-horz-menu-content p {
	margin-bottom: 16px;
}
.tabs-horz-menu-content ol, .tabs-horz-menu-content ul {
    padding-left: 18px;
    margin-bottom: 16px;
}
.tabs-horz-menu-content li {
    padding-left: 24px;
}
.tabs-horz-menu-content .accent-box {
	text-align: center;
	padding-left: 24px;
	background: var(--clr-accent-box-bg);
	padding: 26px 100px;
	border-radius: 16px;
	margin: 32px 0;
}
.tabs-horz-menu-content .accent-box .title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	margin-bottom: 32px;
	color: var(--clr-accent-box-title);
}
.tabs-horz-menu-content .accent-box .desc {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	text-align: center;
	margin-top: 16px;
	color: var(--clr-accent-box-text);
}
.tabs-horz-menu-content .accent-box a {
	color: var(--clr-heading);
}
.tabs-horz-menu-content .links-box {
	display: flex;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 10px 24px;
	gap: 12px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	margin: 16px 0;
}
.tabs-horz-menu-content .links-box span {
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
	gap: 10px;
	background: var(--clr-button-secondary);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-white);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.tabs-horz-menu-content .links-box span:hover {
	background: var(--clr-flyout-btn-accent);
}
.tabs-horz-menu-content .links-box span a {
	color: var(--clr-white);
}
.tabs-horz-menu-content .links-box-alt {
	border-top: 1px solid var(--clr-inputbox);
	padding-top: 24px;
	margin: 32px 0 0 0;
	gap: 24px;
	display: flex;
}
.tabs-horz-menu-content .links-box-alt span {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 12px 16px;
	gap: 10px;
	background: var(--clr-pagination-active);
	border-radius: 8px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.tabs-horz-menu-content .links-box-alt span.with-arrow:after {
	content: "arrow_forward";
	font-size: 16px;
	color: var(--clr-paragraph);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 10px;
	position: relative;
	bottom: -3px;
}
.tabs-horz-menu-content .links-box-alt span:hover {
	background: var(--clr-flyout-btn-accent);
}
.tabs-horz-menu-content .links-box-alt span a {
	color: var(--clr-paragraph);
}
.tabs-horz-menu-content.faqsikn {
	border-top: none;
	padding-top: 32px;
}
/*===============================================*/

/*===============================================*/
/* FILTER CAPAIAN PEMBELAJARAN */
/*-----------------------------------------------*/
.cp-title {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-paragraph);
}
.cp-title-pin.is-sticky .cp-title {
    background: var(--clr-white);
    box-shadow: 0 8px 12px 20px var(--clr-white),
    			0 -24px 0 var(--clr-white);
}
.cp-check-group {
	padding-bottom: 32px;
}
.cp-check-group .check-title {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-paragraph);
	padding-bottom: 10px;
}
.cp-check-group .check-group {
	border: 1px solid var(--clr-separator);
	border-radius: 8px;
	padding: 16px 16px 8px 16px;
}
.cp-check-group .identlv {
	padding-left: 32px;
}
.cp-check-group .checkitem {
	padding-bottom: 8px;
    display: flex;
    align-items: flex-start;
}
.cp-check-group .checkitem input, .cp-check-group .checkitem label {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
.cp-check-group .checkitem input {
	margin-right: 8px;
}
.cp-check-group .checkitem .expcol {
    margin-left: -4px;
    margin-right: 4px;
    font-size: 20px;
    bottom: -2px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.cp-check-group .checkitem .expcol:hover {
    color: var(--clr-description);
}
.cp-check-group .checkitem.expandable .expcol.expanded {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.cp-pagination {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-paragraph);
	height: auto;
}
.cp-pagination .pages-group {
	display: flex;
}
.cp-pagination .pages-group .pages {
	color: var(--clr-pagination);
    padding: 4px;
    border-radius: 8px;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.cp-pagination .pages-group a:hover {
	filter: var(--flt-button-lighten-more);
	-webkit-filter: var(--flt-button-lighten-more);
	-moz-filter: var(--flt-button-lighten-more);
	-ms-filter: var(--flt-button-lighten-more);
	-o-filter: var(--flt-button-lighten-more);
}
.cp-pagination .pages-group a:hover .pages{
	background: var(--clr-pagination-hover);
}
.cp-pagination .pages-group .pages.active {
	color: var(--clr-pagination);
	background: var(--clr-pagination-active);
}

.cp-pagination .page-prev span {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	width: 34px;
	height: 34px;
	display: block;
	cursor: pointer;
	margin-right: 8px;
	background-image: url("../images/pg-prev.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.cp-pagination .page-next span {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	width: 34px;
	height: 34px;
	display: block;
	cursor: pointer;
	margin-left: 8px;
	background-image: url("../images/pg-next.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.cp-pagination .page-prev a:hover,
.cp-pagination .page-next a:hover {
	filter: var(--flt-button-darken);
	-webkit-filter: var(--flt-button-darken);
	-moz-filter: var(--flt-button-darken);
	-ms-filter: var(--flt-button-darken);
	-o-filter: var(--flt-button-darken);
}
/*===============================================*/

/*===============================================*/
/* FILTER PANDUAN MATA PELAJARAN */
/*-----------------------------------------------*/
.pmp-title {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-paragraph);
}
.pmp-title-pin.is-sticky .pmp-title {
    background: var(--clr-white);
    box-shadow: 0 8px 12px 20px var(--clr-white),
    			0 -24px 0 var(--clr-white);
}
.pmp-check-group {
	padding-bottom: 32px;
}
.pmp-check-group .check-title {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-paragraph);
	padding-bottom: 10px;
}
.pmp-check-group .check-group {
	border: 1px solid var(--clr-separator);
	border-radius: 8px;
	padding: 16px 16px 8px 16px;
}
.pmp-check-group .identlv {
	padding-left: 32px;
}
.pmp-check-group .checkitem {
	padding-bottom: 8px;
    display: flex;
    align-items: flex-start;
}
.pmp-check-group .checkitem input, .pmp-check-group .checkitem label {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
.pmp-check-group .checkitem input {
	margin-right: 8px;
}
.pmp-check-group .checkitem .expcol {
    margin-left: -4px;
    margin-right: 4px;
    font-size: 20px;
    bottom: -2px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--clr-paragraph);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.pmp-check-group .checkitem .expcol:hover {
    color: var(--clr-description);
}
.pmp-check-group .checkitem.expandable .expcol.expanded {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.pmp-pagination {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-paragraph);
	height: auto;
}
.pmp-pagination .pages-group {
	display: flex;
}
.pmp-pagination .pages-group .pages {
	color: var(--clr-pagination);
    padding: 4px;
    border-radius: 8px;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.pmp-pagination .pages-group a:hover {
	filter: var(--flt-button-lighten-more);
	-webkit-filter: var(--flt-button-lighten-more);
	-moz-filter: var(--flt-button-lighten-more);
	-ms-filter: var(--flt-button-lighten-more);
	-o-filter: var(--flt-button-lighten-more);
}
.pmp-pagination .pages-group a:hover .pages{
	background: var(--clr-pagination-hover);
}
.pmp-pagination .pages-group .pages.active {
	color: var(--clr-pagination);
	background: var(--clr-pagination-active);
}

.pmp-pagination .page-prev span {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	width: 34px;
	height: 34px;
	display: block;
	cursor: pointer;
	margin-right: 8px;
	background-image: url("../images/pg-prev.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.pmp-pagination .page-next span {
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	width: 34px;
	height: 34px;
	display: block;
	cursor: pointer;
	margin-left: 8px;
	background-image: url("../images/pg-next.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.pmp-pagination .page-prev a:hover,
.pmp-pagination .page-next a:hover {
	filter: var(--flt-button-darken);
	-webkit-filter: var(--flt-button-darken);
	-moz-filter: var(--flt-button-darken);
	-ms-filter: var(--flt-button-darken);
	-o-filter: var(--flt-button-darken);
}
/*===============================================*/

/*===============================================*/
/* FILTER RUJUKAN */
/*-----------------------------------------------*/
.rujukan .rj-search {
	flex-basis: 500px;
}
/*===============================================*/

/*===============================================*/
/* FILTER FAQ */
/*-----------------------------------------------*/
.modal-result {
	position: absolute;
	background: var(--clr-white);
	box-shadow: var(--sdw-hard);
	z-index: 99999;
	max-width: 880px;
	align-self: flex-end;
	margin-top: 72px;
	border-radius: 8px;
	padding: 24px;
	display: none;
}
.modal-result:focus {
	outline: none;
}
.modal-result .message-box {
    margin-bottom: 0;
    padding: 12px;
    min-width: 320px;
}
.modal-result .message-box .message-box-title {
    font-size: 16px;
}
.modal-result-close {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    color: var(--clr-textbox);
    font-size: 24px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    top: -12px;
    right: -12px;
    user-select: none;
    z-index: 999;
    padding: 0 0 2px 0px;
    border-radius: 600px;
    -webkit-transition: var(--trn-button);
    -moz-transition: var(--trn-button);
    -ms-transition: var(--trn-button);
    -o-transition: var(--trn-button);
    transition: var(--trn-button);
    background: var(--clr-white);
    box-shadow: var(--sdw-hard);
}
.modal-result-close:hover {
    color: var(--clr-white);
    background: var(--clr-button-accent);
}
.modal-det-box {
	background: var(--clr-faqitem);
	border-radius: 8px;
	padding: 16px 24px;
	margin-bottom: 8px;
}
.modal-det-icon {
	width: 48px;
	height: 48px;
	margin-right: 16px;
	background: var(--clr-white);
	border-radius: 8px;
	display: flex;
}
.modal-det-icon img {
	width: inherit;
	height: inherit;
	padding: 8px;
}
.modal-det-title {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	align-items: center;
	color: var(--clr-paragraph);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
	overflow: hidden;
    margin: -4px;
    padding: 8px 4px 4px 4px;
    position: relative;
    top: -4px;
}
.active .modal-det-title {
    -webkit-line-clamp: unset;
}
.active .modal-det-desc {
	height: 0;
}
.modal-det-desc {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	align-items: center;
	color: var(--clr-description);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;  
	overflow: hidden;
	position: relative;
	top: 0;
	height: 100%;
	opacity: 1;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
}
.modal-det-arrow:after {
	content: "chevron_right";
	font-size: 24px;
	color: var(--clr-textbox);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 2px;
}
/*===============================================*/

/*===============================================*/
/* DETAIL TABLE */
/*-----------------------------------------------*/
.detail-table .first-col {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-heading);
}
.detail-table .first-col.top-shading {
	padding: 48px 24px 24px 24px;
	border-radius: 16px 16px 0 0;
	margin: -24px 4px 0 4px;
}
.detail-table .first-col.mid-shading {
	padding: 24px;
	border-radius: 0;
	border-top: 0.5px solid var(--clr-inputbox);
	margin: 0 4px;
}
.detail-table .first-col.btm-shading {
	border-top: 0.5px solid var(--clr-inputbox);
	padding: 24px;
	border-radius: 0 0 16px 16px;
	margin: 0 4px;
}
.detail-table .content-col, .detail-table .content-col p {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-textbox);
}
.detail-table .content-col p {
	margin-bottom: 16px;
}
.detail-table .content-col p:last-child {
	margin-bottom: 0;
}
.detail-table .content-col.top-shading {
	background: var(--clr-detail-table-shading);
	padding: 48px 24px 24px 24px;
	border-radius: 16px 16px 0 0;
	margin: -24px 4px 0 4px;
}
.detail-table .content-col.mid-shading {
	background: var(--clr-detail-table-shading);
	padding: 24px;
	border-radius: 0;
	border-top: 0.5px solid var(--clr-inputbox);
	margin: 0 4px;
}
.detail-table .content-col.btm-shading {
	border-top: 0.5px solid var(--clr-inputbox);
	background: var(--clr-detail-table-shading);
	padding: 24px;
	border-radius: 0 0 16px 16px;
	margin: 0 4px;
}
.detail-table .header-shading > span {
	padding: 10px;
	border-radius: 8px;
	background: var(--clr-bg-hero);
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-white);
    z-index: 99;
    width: 75%;
}
/*===============================================*/

/*===============================================*/
/* TENTANG */
/*-----------------------------------------------*/
.about h2 {
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 138%;
}
.about h3 {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-heading);
}
.about p {
	margin-bottom: 32px;
}
.about .linkslist {
	margin-bottom: 16px;
	color: var(--clr-paragraph);
}
.about .linkslist .with-icon {
	padding-left: 8px;
	padding-top: 6px;
	font-size: 16px;
}
.about .circlenum-accent {
	margin-right: 24px;
}
.about .list-separator {
	padding-bottom: 24px;
	margin-bottom: 24px;
}
/*===============================================*/

/*===============================================*/
/* KATEGORI FAQ */
/*-----------------------------------------------*/
.faq-kat .fqka-item {
	border-radius: 16px;
	padding: 32px 16px;
	background: var(--clr-faqitem);
}
.faq-kat .fqka-item:hover {
	filter: var(--flt-button-half-darken);
	-webkit-filter: var(--flt-button-half-darken);
	-moz-filter: var(--flt-button-half-darken);
	-ms-filter: var(--flt-button-half-darken);
	-o-filter: var(--flt-button-half-darken);
}
.faq-kat .fqka-icon {
	width: 64px;
	height: 64px;
	display: block;
}
.faq-kat .fqka-icon img {
	width: inherit;
	height: inherit;
}
.faq-kat .fqka-text {
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 156%;
	color: var(--clr-heading);
	text-align: center;
	height: 64px;
}
.faq-search {
    flex-basis: 25%;
	margin-right: 0;
}
.fqka-det-title {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 150%;
	display: flex;
	align-items: center;
	color: var(--clr-heading);
}
.fqka-det-desc {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-description);
}
.fqka-det-sub {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-heading);
}
/*===============================================*/

/*===============================================*/
/* BANDING KURIKULUM */
/*-----------------------------------------------*/
.banding-kurikulum .side-menu-content {
	padding-left: 32px;
}
.banding-kurikulum .tb-toolbar-text {
	text-transform: initial;
}
.banding-title {
	font-family: var(--fnt-secondary);
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 160%;
	color: var(--clr-pagination);
}
.banding-box {
	padding: 16px 24px;
	background: var(--clr-accent-box-bg);
	border-radius: 8px;
	margin-bottom: 12px;
}
.banding-box:last-child {
	margin-bottom: 0;
}
.banding-content, .banding-content p, .banding-content li {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 143%;
	color: var(--clr-accent-box-text);
}
.banding-content p, .banding-content li {
	margin-bottom: 20px;
}
.banding-content ol.nospace li, .banding-content ul.nospace li, .banding-content p.nospace {
	margin-bottom: 0;
}
.banding-content p:last-child {
	margin-bottom: 0;
}
.banding-content {
	overflow-wrap: anywhere;
}
.banding-content a {
	text-decoration: underline;
	color: var(--clr-textbox);
}
.banding-divider {
	border-right: 1px solid var(--clr-header-inactive);
    max-width: 0;
    padding-right: 32px;
    margin-right: 32px;
}
.banding-pin {
    height: 64px !important;
}
.banding-pin.is-sticky .dropdown-banding {
    background: var(--clr-white);
    margin-top: -24px;
    margin-left: -32px;
    margin-right: -32px;
    margin-bottom: -24px;
	border-top: 24px solid var(--clr-white);
	border-left: 32px solid var(--clr-white);
	border-right: 32px solid var(--clr-white);
	box-sizing: content-box;
    box-shadow: 0 1px 0 var(--clr-separator);
}
.tb-banding {
	padding-bottom: 16px;
}
#tb-perbandingan-left, #tb-perbandingan-right {
	font-family: var(--fnt-main);
	height: 48px;
	width: 100%;
	border: 1px solid var(--clr-inputbox);
	border-radius: 8px;
	padding: 12px 16px;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-secondary);
	background: var(--clr-white);
}
/*===============================================*/

/*===============================================*/
/* ICON DEFINITION */
/*-----------------------------------------------*/
.ic-download	{background-image: url("../images/icons/download.svg");}
.ic-view		{background-image: url("../images/icons/view.svg");}
.ic-share		{background-image: url("../images/icons/share.svg");}
.ic-list		{background-image: url("../images/icons/list.svg");}
.ic-grid		{background-image: url("../images/icons/grid.svg");}
.ic-search		{background-image: url("../images/icons/search.svg");}
.ic-info		{background-image: url("../images/icons/info.svg");}
.ic-forward		{background-image: url("../images/icons/forward.svg");}

.ic-menu			{background-image: url("../images/header/menu-inv.svg");}
.sticky .ic-menu	{background-image: url("../images/header/menu-inv.svg");}

.ic-close			{background-image: url("../images/header/close-inv.svg");}
.sticky .ic-close	{background-image: url("../images/header/close-inv.svg");}

.ic-makewhite {
	filter: brightness(0) invert(1);
	-webkit-filter: brightness(0) invert(1);
	-moz-filter: brightness(0) invert(1);
	-ms-filter: brightness(0) invert(1);
	-o-filter: brightness(0) invert(1);
}
.ic-transparent {
	opacity: 0.35;
}
.ic-transparent:hover {
	opacity: 0.75;
}
/*===============================================*/

/*===============================================*/
/* CHECKBOX STYLING */
/*-----------------------------------------------*/
.checkitem input, .checkitem label {
	cursor: pointer;
}
.checkitem input {
	position: absolute;
	opacity: 0;
    width: 17px;
    height: 17px;
}
.stycheckbox {
    position: relative;
    padding-left: 32px;
	background-image: url("../images/checkbox-unchecked.svg");
	background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.stycheckbox.indeterminate{
    position: relative;
    padding-left: 32px;
	background-image: url("../images/checkbox-mixed.svg");
	background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.checkitem:hover {
	filter: var(--flt-button-lighten-more);
	-webkit-filter: var(--flt-button-lighten-more);
	-moz-filter: var(--flt-button-lighten-more);
	-ms-filter: var(--flt-button-lighten-more);
	-o-filter: var(--flt-button-lighten-more);
}
.checkitem input:checked ~ .stycheckbox {
	background-image: url("../images/checkbox-checked.svg");
}
/*===============================================*/

/*===============================================*/
/* SELECT (DROPDOWN) STYLING */
/*-----------------------------------------------*/
select {
	cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    user-select: none;
}
.select-wrapper:after {
	content: "";
    width: 24px;
    height: 48px;
    margin-left: -36px;
	position: absolute;
	background-image: url("../images/icons/arrow-down.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	opacity: 0.35;
}
select option:checked {
	background: var(--clr-inputoutlinehero);
	font-weight: 700;
}
select:invalid {
	color: var(--clr-description);
}
option[value=""][disabled] {
	display: none;
}
option {
	color: var(--clr-paragraph);
}

/*===============================================*/

/*===============================================*/
/* SCROLL TO TOP BUTTON */
/*-----------------------------------------------*/
.scrl-top {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 999999;
    width: 28px;
    height: 28px;
    border-radius: 5000px;
    bottom: 48px;
    right: 12px;
    border: none;
    background-color: var(--clr-secondary);
    opacity: 1;
    color: var(--clr-white);
    visibility: visible;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
	cursor: pointer;
	overflow: hidden;
}
.scrl-top.flyhid {
    width: 36px;
    height: 36px;
    bottom: 56px;
    right: 12px;
}
.scrl-top.flyhid:after {
    font-size: 24px;
}
.scrl-top:after {
	content: "expand_less";
    font-size: 18px;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
}
.scrl-top:hover {
    background-color: var(--clr-header-active);
}
.scrl-top.flyhid.top-hid {
    opacity: 0;
    visibility: hidden;
    bottom: 48px;
}
.scrl-top.top-hid {
    opacity: 0;
    visibility: hidden;
    bottom: 40px;
}
/*===============================================*/

/*===============================================*/
/* HELPDESK FLYOUT */
/*-----------------------------------------------*/
.flyout-cs {
	display: flex;
	flex-direction: row-reverse;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 999999;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
}
.flyout-cs.hidden {
	right: -350px;
	z-index: 1000000;
}
.flyout-cs.hidden .balloon {
    right: 236px;
}
.flyout-cs.hidden .balloon:before {
    margin-bottom: 20px;
}

@media screen and (max-width: 1280px)  {
	.flyout-cs.hidden .balloon:hover {
	    right: 216px;
	}
	.flyout-cs.hidden .balloon {
	    right: 136px;
	}
}

.flyout-cs-minimize {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--clr-secondary);
	box-shadow: var(--sdw-soft);
	border-radius: 100%;
	width: 28px;
	height: 28px;
	position: fixed;
	z-index: 1000000;
	right: 12px;
	bottom: 12px;
	color: var(--clr-button-accent-text);
	cursor: pointer;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	-ms-transform: scaleX(1);
	-o-transform: scaleX(1);
	transform: scaleX(1);
	transform-origin: -50% 50%;
	overflow: hidden;
}
.flyout-cs-minimize:hover {
    background-color: var(--clr-header-active);
}
.flyout-cs-minimize.active {
	width: 36px;
	height: 36px;
	-webkit-transform: scaleX(-1) translateX(-72px);
	-moz-transform: scaleX(-1) translateX(-72px);
	-ms-transform: scaleX(-1) translateX(-72px);
	-o-transform: scaleX(-1) translateX(-72px);
	transform: scaleX(-1) translateX(-72px);
}
.flyout-cs-minimize:after {
	content: "keyboard_double_arrow_right";
	font-size: 18px;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
}
.flyout-cs-minimize.active:after {
	font-size: 24px;
}
.flyout-cs .person {
	display: flex;
	flex-direction: row-reverse;
	background-image: url("../images/flyout-cs.svg");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
	width: calc(161px * 1.15);
	height: calc(150px * 1.15);
	margin-left: -56px;
	margin-top: -8px;
}
.flyout-cs .balloon {
	display: flex;
	flex-direction: row-reverse;
	background: var(--clr-white);
	box-shadow: var(--sdw-hard);
	width: fit-content;
	height: fit-content;
	align-items: center;
	border-radius: 10px;
	z-index: 255;
	position: relative;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
    bottom: 0;
    right: 0;
}
.flyout-cs .balloon.expanded {
    bottom: 36px;
}
.flyout-cs .balloon:before {
	content: "";
	display: flex;
	background: var(--clr-white);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	width: 12px;
	height: 12px;
	position: absolute;
	align-self: flex-end;
    margin-bottom: -10px;
    margin-right: 8px;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
}
.flyout-cs .balloon.expanded:before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: 16px 0;
    margin-bottom: 32px;
    margin-right: 2px;
    width: 16px;
    height: 16px;
}
.flyout-cs .button-part {
	display: flex;
	padding: 10px 12px 10px 24px;
	flex-direction: column;
	overflow: hidden;
	border-radius: 10px;
}
.flyout-cs .button-part.expanded {
	padding: 14px 12px 14px 24px;
}
.flyout-cs .help-text {
	display: flex;
	flex-direction: column;
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	line-height: 117%;
	color: var(--clr-heading);
	width: 70px;
	height: 35px;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
	position: relative;
	bottom: 0;
}
.flyout-cs .expanded .help-text {
	/*display: none;*/
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	height: 0;
	bottom: -38px;
}
.flyout-cs .button-set {
	/*display: none;*/
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	height: 0;
	width: 70px;
	flex-direction: column;
	-webkit-transition: var(--trn-flyout);
	-moz-transition: var(--trn-flyout);
	-ms-transition: var(--trn-flyout);
	-o-transition: var(--trn-flyout);
	transition: var(--trn-flyout);
	position: relative;
	bottom: 70px;
	left: -168px;
}
.flyout-cs .expanded .button-set {
	display: flex;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
	height: 108px;
	width: 208px;
	pointer-events: auto;
	bottom: 0;
	left: 0;
}
.flyout-cs .button-set .button-cs {
	display: flex;
	border-radius: 15px;
	cursor: pointer;
	padding: 8px 12px;
	background: var(--clr-faqitem);
	align-items: center;
	border-radius: 30px;
	color: var(--clr-heading);
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	line-height: 17px;
	margin-bottom: 8px;
	width: 208px;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	text-decoration: none;
}
.flyout-cs .button-set .button-cs > div {
    bottom: -2px;
    position: relative;
}
.flyout-cs .button-set .button-cs:last-child {
	margin-bottom: 0;
}
.flyout-cs .expanded .button-set .button-cs {
	height: 36px;
}
.flyout-cs .button-set .button-cs:hover {
	background: #c4d5de;
}
.flyout-cs .button-set .button-cs:after {
	content: "chevron_right";
	font-size: 12px;
	color: var(--clr-description);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin-left: 2px;
}
.flyout-cs .button-set .button-cs.accent {
	background: var(--clr-flyout-btn-accent);
	color: var(--clr-white);
}
.flyout-cs .button-set .button-cs.accent:hover {
	background: var(--clr-flyout-btn-accent-hover);
}
.flyout-cs .button-set .button-cs.accent.whatsapp:before {
	content: "";
	margin-right: 4px;
	display: flex;
	width: 20px;
	height: 20px;
	background-image: url("../images/ico-wa.svg");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
}
.flyout-cs .button-set .button-cs.accent.email:before {
	content: "";
	margin-right: 4px;
	display: flex;
	width: 20px;
	height: 20px;
	background-image: url("../images/ico-mail.svg");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
}
.flyout-cs .button-set .button-cs.accent:after {
	content: "";
}
.flyout-cs .button-body {
    font-size: 15px;
    padding-bottom: 8px;
    font-weight: 700;
    color: var(--clr-heading);
}
.flyout-cs .expcol {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--clr-accent);
	box-shadow: var(--sdw-soft);
	border-radius: 100%;
	width: 30px;
	height: 30px;
	position: absolute;
    left: -15px;
	color: var(--clr-button-accent-text);
	cursor: pointer;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
	overflow: hidden;
}
.flyout-cs .expcol:after {
	content: "chevron_left";
	font-size: 24px;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.flyout-cs .expcol:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.flyout-cs .expcol.expanded:after {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.flyout-cs .expcol:hover {
	background: var(--clr-accent-hover);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.flyout-cs .expcol:active {
	background: var(--clr-accent);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
}

/*===============================================*/

/*===============================================*/
/* WELCOME BAR */
/*-----------------------------------------------*/
.welcome-bar {
	position: relative;
    display: flex;
    height: 0;
    overflow: hidden;
    background: var(--clr-bar-default);
    padding: 0 60px;
}

.welcome-bar.bar-success				{background: var(--clr-bar-success);}
.welcome-bar.bar-error					{background: var(--clr-bar-error);}
.welcome-bar.bar-warning				{background: var(--clr-bar-warning);}
.welcome-bar.bar-info					{background: var(--clr-bar-info);}

.welcome-bar.bar-success	.bar-btn a	{background: var(--clr-bar-btn-success);}
.welcome-bar.bar-error		.bar-btn a	{background: var(--clr-bar-btn-error);}
.welcome-bar.bar-warning	.bar-btn a	{background: var(--clr-bar-btn-warning);}
.welcome-bar.bar-info		.bar-btn a	{background: var(--clr-bar-btn-info);}

.welcome-bar > div {
    max-width: 1200px;
    width: 100%;
}
.welcome-bar .bar-txt {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: var(--clr-paragraph);
}
.welcome-bar .bar-btn a {
	padding: 4px 12px;
	background: var(--clr-bar-btn-default);
	border-radius: 8px;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
    line-height: 160%;
	color: var(--clr-white);
	letter-spacing: 0.5px;
}
.welcome-bar .bar-close {
	font-size: 24px;
	color: var(--clr-paragraph);
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga';
	-o-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
    position: relative;
    cursor: pointer;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
.welcome-bar .bar-close:hover {
	opacity: 0.75;
}
/*===============================================*/

/*===============================================*/
/* CAROUSEL */
/*-----------------------------------------------*/
.swiper-container {
    max-width: 1200px;
    width: 100%;
    overflow-x: hidden;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
    height: 210px !important;
    overflow-x: hidden;
	border-radius: 8px;
}
.swiper-button-prev, .swiper-button-next {
	position: relative !important;
    top: 50% !important;
    left: unset !important;
    right: unset !important;
    width: 50px !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.swiper-button-prev:after {
	content: "" !important;
	-webkit-transition: var(--trn-button);
    -moz-transition: var(--trn-button);
    -ms-transition: var(--trn-button);
    -o-transition: var(--trn-button);
    transition: var(--trn-button);
    width: 48px;
    height: 48px;
    border-radius: 500px;
    background-color: var(--clr-white);
    box-shadow: var(--sdw-hard);
    padding: 0;
    display: flex;
    cursor: pointer;
    background-image: url(../images/car-prev.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    left: 70px;
    position: relative;
	transform: scale(1);
	opacity: 0.95;
}
.swiper-button-next:after {
	content: "" !important;
	-webkit-transition: var(--trn-button);
    -moz-transition: var(--trn-button);
    -ms-transition: var(--trn-button);
    -o-transition: var(--trn-button);
    transition: var(--trn-button);
    width: 48px;
    height: 48px;
    border-radius: 500px;
    background-color: var(--clr-white);
    box-shadow: var(--sdw-hard);
    padding: 0;
    display: flex;
    cursor: pointer;
    background-image: url(../images/car-next.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    right: 70px;
    position: relative;
	transform: scale(1);
	opacity: 0.95;
}
.swiper-button-prev:hover:after, .swiper-button-next:hover:after {
	-webkit-transition: var(--trn-card);
    -moz-transition: var(--trn-card);
    -ms-transition: var(--trn-card);
    -o-transition: var(--trn-card);
    transition: var(--trn-card);
	transform: scale(1.15);
	opacity: 1;
	filter: var(--flt-button-lighten-more);
	-webkit-filter: var(--flt-button-lighten);
	-moz-filter: var(--flt-button-lighten);
	-ms-filter: var(--flt-button-lighten);
	-o-filter: var(--flt-button-lighten);
    background-color: var(--clr-bg-hero);
}
.swiper-nav {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: 0;
}
.swiper-nav.navprev {
    align-items: flex-end;
}
.swiper-nav.navnext {
    align-items: flex-start;
}
.swiper-pagination {
	display: none;
}
.swiper-pagination-bullet-active {
	background-color: var(--clr-inputbox);
}
.swiper-pagination-bullet {
	margin: 0 4px;
	background-color: var(--clr-secondary);
}
.item {
    height: 100%;
	background: var(--clr-white);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.item img {
    height: inherit;
    border-radius: 8px;
}
.swiper-pagination-bullet {
	width: 8px !important;
	height: 8px !important;
	border-radius: 20px !important;
	background: var(--clr-active);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
@keyframes slide {
	0% {
		transform:translateX(-25%);
	}
	100% {
		transform:translateX(25%);
	}
}
.swiper-title {
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 138%;
	color: var(--clr-heading);
	max-width: 1200px;
}
.judul-besar {
	font-size: 40px !important;
	line-height: 130%;
}

/*===============================================*/
/* CAROUSEL WIDE */
/*-----------------------------------------------*/
.swiper-wide {
    max-width: 1200px;
    width: 100%;
    overflow-x: hidden;
}
.swiper-wide-slide {
	border-radius: 16px;
    aspect-ratio: 100 / 21;
    width: 100% !important;
    height: auto !important;
	/*height: 252px !important;*/
}
.swiper-wide-button-prev, .swiper-wide-button-next {
	position: relative !important;
    top: calc(50% - 20px) !important;
    left: unset !important;
    right: unset !important;
    width: 50px !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.swiper-wide-button-prev:after {
	content: "" !important;
	-webkit-transition: var(--trn-button);
    -moz-transition: var(--trn-button);
    -ms-transition: var(--trn-button);
    -o-transition: var(--trn-button);
    transition: var(--trn-button);
    width: 48px;
    height: 48px;
    border-radius: 500px;
    background-color: var(--clr-white);
    box-shadow: var(--sdw-hard);
    padding: 0;
    display: flex;
    cursor: pointer;
    background-image: url(../images/car-prev.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    left: 24px;
    position: relative;
	transform: scale(1);
	opacity: 0.95;
}
.swiper-wide-button-next:after {
	content: "" !important;
	-webkit-transition: var(--trn-button);
    -moz-transition: var(--trn-button);
    -ms-transition: var(--trn-button);
    -o-transition: var(--trn-button);
    transition: var(--trn-button);
    width: 48px;
    height: 48px;
    border-radius: 500px;
    background-color: var(--clr-white);
    box-shadow: var(--sdw-hard);
    padding: 0;
    display: flex;
    cursor: pointer;
    background-image: url(../images/car-next.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    right: 24px;
    position: relative;
	transform: scale(1);
	opacity: 0.95;
}
.swiper-wide-button-prev:hover:after, .swiper-wide-button-next:hover:after {
	-webkit-transition: var(--trn-card);
    -moz-transition: var(--trn-card);
    -ms-transition: var(--trn-card);
    -o-transition: var(--trn-card);
    transition: var(--trn-card);
	transform: scale(1.15);
	opacity: 1;
	filter: var(--flt-button-lighten-more);
	-webkit-filter: var(--flt-button-lighten);
	-moz-filter: var(--flt-button-lighten);
	-ms-filter: var(--flt-button-lighten);
	-o-filter: var(--flt-button-lighten);
    background-color: var(--clr-bg-hero);
}
.swiper-wide-nav {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: 0;
    z-index: 4;
}
.swiper-wide-nav.navprev {
    align-items: flex-end;
}
.swiper-wide-nav.navnext {
    align-items: flex-start;
}
.swiper-wide-pagination {
	display: none;
}
.swiper-wide-pagination-bullet-active {
	background-color: var(--clr-inputbox);
}
.swiper-wide-pagination-bullet {
	margin: 0 4px;
	background-color: var(--clr-secondary);
}
.swiper-wide-pagination-bullet {
	width: 8px !important;
	height: 8px !important;
	border-radius: 20px !important;
	background: var(--clr-active);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
}
@keyframes slide {
	0% {
		transform:translateX(-25%);
	}
	100% {
		transform:translateX(25%);
	}
}
.swiper-wide-title {
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 138%;
	color: var(--clr-heading);
	max-width: 1200px;
}
.judul-besar {
	font-size: 40px !important;
	line-height: 130%;
}
.swiper-wide-item {
    height: 100%;
	/*background: linear-gradient(225.54deg, #2D9CDB 0.93%, #47B374 74.77%);*/
	background: var(--clr-dummybg);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
    width: 100%;
    overflow: hidden;
}
.swiper-wide-item picture,
.swiper-wide-item source,
.swiper-wide-item img {
	width: 100%;
	height: 100%;
    object-fit: cover;
}
.swiper-wide-item * {
	font-family: var(--fnt-special);
}
.swiper-wide-item .fanfare {
    margin-top: -20px;
    margin-left: 40px;
    margin-right: 28px;
}
.swiper-wide-item .fanfare .carofanfare {
	transform: scale(0.9);
}
.swiper-wide-item .content {
    flex-basis: 50%;
	text-align: left;
	align-items: flex-start;
}
.swiper-wide-item .content .title {
	font-size: 32px;
	color: var(--clr-white);
	line-height: 120%;
	font-weight: 500;
	margin-bottom: 8px;
}
.swiper-wide-item .content .title.big {
	font-size: 36px;
}
.swiper-wide-item .content .title .small {
	font-size: 20px;
	color: #FACC15;
	line-height: 120%;
	font-weight: 500;
}
.swiper-wide-item .content .title b {
	font-weight: 700;
}
.swiper-wide-item .content .subtitle {
	font-size: 16px;
	color: var(--clr-white);
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
.swiper-wide-item .content .subtitle b {
	font-weight: 600;
}
.swiper-wide-item .content .title.feskurmer {
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
}
.swiper-wide-item .content .title.feskurmer .small {
	font-weight: 400;
    font-family: 'Poppins', sans-serif;
}
.swiper-wide-item .content .feskurmer.hili {
	padding: 4px;
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #2563EB;
    background: #EF74BB;
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
}
.swiper-wide-item .content .feskurmer.date {
	padding: 8px 12px;
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #2563EB;
    background: #EFF6FF;
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
}
.swiper-wide-item .content .feskurmer.hili .location {
	padding: 8px;
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
    text-wrap: balance;
}
.swiper-wide-item .content .feskurmer.date:before {
	content: "";
    width: 20px;
    height: 20px;
    margin-right: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../festivalkurikulummerdeka/images/home/date-icon.svg);
}
.swiper-wide-item .content .cta {
	font-size: 16px;
	color: var(--clr-white);
	line-height: 140%;
	font-weight: 400;
	background: #F3A802;
	border-radius: 24px;
	padding: 12px 24px;
	box-shadow: 0px 0px 1px rgba(35, 35, 38, 0.5), 0px 0px 4px rgba(35, 35, 38, 0.08), 0px 8px 8px rgba(35, 35, 38, 0.08);
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
    display: inline-flex;
}
.swiper-wide-item .content .cta:hover {
	background: #EFBA1E;
	box-shadow: 0px 0px 1px rgba(35, 35, 38, 0.5), 0px 0px 4px rgba(35, 35, 38, 0.08), 0px 8px 8px rgba(35, 35, 38, 0.08);
}
.swiper-wide-item .image {
    flex-basis: 29%;
    height: 100%;
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
}
.swiper-wide-item .image.cover {
    background-size: cover;
}
.swiper-wide-item.style-1 {
	background: linear-gradient(225.54deg, #2D9CDB 0.93%, #47B374 74.77%);
}
.swiper-wide-item.style-1 .cta {
	background: #F3A802;
}
.swiper-wide-item.style-1 .cta:hover {
	background: #EFBA1E;
}
.swiper-wide-item.style-2 {
	background: #1E3A8A;
}
.swiper-wide-item.style-2 .cta {
	background: #14B8A6;
}
.swiper-wide-item.style-2 .cta:hover {
	background: #30BFBE;
}

/*===============================================*/

/*===============================================*/
/* TES MICROINTERACTION */
/*-----------------------------------------------*/
.interaksi:after {
	content: "";
	opacity: 0;
	-webkit-transition: var(--trn-button);
	-moz-transition: var(--trn-button);
	-ms-transition: var(--trn-button);
	-o-transition: var(--trn-button);
	transition: var(--trn-button);
    position: absolute;
    pointer-events: none;
    padding: 1px 0 0 4px;
    width: max-content;
    white-space: pre;
    font-weight: 500;
    font-size: 80%;
    color: var(--clr-linkhover);
}
.interaksi:hover:after {
	opacity: 1;
}
.interaksi.sibi:after {
	content: "— Sistem Informasi Perbukuan Indonesia";
}