article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

html { background: #fff; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: Arial; }

body { margin: 0; }

a { background: transparent; }

a:focus { outline: thin dotted; }

a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

mark { background: #ff0; color: #000; }

code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }

q:before, q:after { content: ''; content: none; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; white-space: normal; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; }

button, input { line-height: normal; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; line-height: normal; }

/*--------------------------------------------------------------------------------*/
/*CONTAINER*/
/*--------------------------------------------------------------------------------*/
.container, .container-fluid { width: 100%; padding-left: calc(26px / 1.444444444444); padding-right: calc(26px / 1.444444444444); margin-right: auto; margin-left: auto; }

/*--------------------------------------------------------------------------------*/
/*GRID 12 COLUMNS*/
/*--------------------------------------------------------------------------------*/
.grid-row { display: flex; flex-wrap: wrap; margin-left: calc(-26px / 4.3333333333); margin-right: calc(-26px / 4.3333333333); }

.no-gutter { margin-right: 0; margin-left: 0; }

.no-gutter > .column, .no-gutter > [class*="column-"] { padding-right: 0; padding-left: 0; }

.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column, .column-auto { position: relative; width: 100%; padding-left: calc(26px / 4.3333333333); padding-right: calc(26px / 4.3333333333); }

.column { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }

.column-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }

.column-1 { -ms-flex: calc(1 / 12); flex: 0 0 calc(100% / (12 / 1)); max-width: calc(100% / (12 / 1)); }

.column-2 { -ms-flex: calc(2 / 12); flex: 0 0 calc(100% / (12 / 2)); max-width: calc(100% / (12 / 2)); }

.column-3 { -ms-flex: calc(3 / 12); flex: 0 0 calc(100% / (12 / 3)); max-width: calc(100% / (12 / 3)); }

.column-4 { -ms-flex: calc(4 / 12); flex: 0 0 calc(100% / (12 / 4)); max-width: calc(100% / (12 / 4)); }

.column-5 { -ms-flex: calc(5 / 12); flex: 0 0 calc(100% / (12 / 5)); max-width: calc(100% / (12 / 5)); }

.column-6 { -ms-flex: calc(6 / 12); flex: 0 0 calc(100% / (12 / 6)); max-width: calc(100% / (12 / 6)); }

.column-7 { -ms-flex: calc(7 / 12); flex: 0 0 calc(100% / (12 / 7)); max-width: calc(100% / (12 / 7)); }

.column-8 { -ms-flex: calc(8 / 12); flex: 0 0 calc(100% / (12 / 8)); max-width: calc(100% / (12 / 8)); }

.column-9 { -ms-flex: calc(9 / 12); flex: 0 0 calc(100% / (12 / 9)); max-width: calc(100% / (12 / 9)); }

.column-10 { -ms-flex: calc(10 / 12); flex: 0 0 calc(100% / (12 / 10)); max-width: calc(100% / (12 / 10)); }

.column-11 { -ms-flex: calc(11 / 12); flex: 0 0 calc(100% / (12 / 11)); max-width: calc(100% / (12 / 11)); }

.column-12 { -ms-flex: calc(12 / 12); flex: 0 0 calc(100% / (12 / 12)); max-width: calc(100% / (12 / 12)); }

/*--------------------------------------------------------------------------------*/
/*TABLE*/
/*--------------------------------------------------------------------------------*/
table th, table td { vertical-align: top; }

table thead th { vertical-align: bottom; border-bottom: 2px solid #b3b3b3; }

table tbody + tbody { border-top: 2px solid #b3b3b3; }

table th { border: 1px solid #b3b3b3; background: #f2f2f2; padding: 10px; text-align: left; }

table td { border: 1px solid #b3b3b3; padding: 5px 10px; }

.table-wrap { display: block; width: 100%; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-wrap th, .table-wrap td { white-space: nowrap; }

.table-strip tr:nth-of-type(odd) { background: #f7f7f7; }

/*--------------------------------------------------------------------------------*/
/*BASE BRAND COLORS*/
/*--------------------------------------------------------------------------------*/
.color-utility-base { color: #6D8591 !important; }

.box-utility-base { color: #4c5d65 !important; background: #e7ebed; border: 1px solid #b6c2c8; padding: 12px 16px; }

.box-utility-base a { color: #415057 !important; }

.box-utility-base a:hover { text-decoration: underline; }

.color-utility-info { color: #2099d6 !important; }

.box-utility-info { color: #166993 !important; background: #d4ecf9; border: 1px solid #88cbed; padding: 12px 16px; }

.box-utility-info a { color: #135a7d !important; }

.box-utility-info a:hover { text-decoration: underline; }

.color-utility-success { color: #11aa3d !important; }

.box-utility-success { color: #0a6424 !important; background: #9cf5b5; border: 1px solid #4ded7b; padding: 12px 16px; }

.box-utility-success a { color: #084d1c !important; }

.box-utility-success a:hover { text-decoration: underline; }

.color-utility-warning { color: #FCB715 !important; }

.box-utility-warning { color: #c28902 !important; background: #fff8e8; border: 1px solid #fede93; padding: 12px 16px; }

.box-utility-warning a { color: #a97702 !important; }

.box-utility-warning a:hover { text-decoration: underline; }

.color-utility-error { color: #FF0000 !important; }

.box-utility-error { color: #b30000 !important; background: #ffd6d6; border: 1px solid #ff8080; padding: 12px 16px; }

.box-utility-error a { color: #990000 !important; }

.box-utility-error a:hover { text-decoration: underline; }

/*--------------------------------------------------------------------------------*/
/*IMAGES STYLE*/
/*--------------------------------------------------------------------------------*/
.lqd, .lqd_img { background-size: cover; background-position: center center; background-repeat: no-repeat; }

.img-xxs { width: 40px !important; }

.img-xs { width: 80px !important; }

.img-sm { width: 100px !important; }

.img-md { width: 200px !important; }

.img-lg { width: 400px !important; }

.img-fluid { width: 100% !important; }

.img-fluid img { width: 100%; }

.lqd_img { position: absolute; width: 150%; height: 150%; top: -25%; left: -25%; z-index: 0; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }

.lqd_block { overflow: hidden; }

.lqd img { display: none; }

/*--------------------------------------------------------------------------------*/
/*FORMS*/
/*--------------------------------------------------------------------------------*/
input:focus, select:focus, textarea:focus, button:focus { outline: none; }

textarea, select, input[type="text"], input[type="date"], input[type="button"], input[type="submit"], input[type="file"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; }

select { height: 42px; padding-right: 32px !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 64 64' style='enable-background:new 0 0 64 64;' fill='%23999999' xml:space='preserve'><path d='M51.4,20.3c0.7-0.8,1.9-0.8,2.6,0c0.8,0.7,0.8,1.9,0,2.6L33.2,43.7c-0.7,0.7-1.9,0.7-2.7,0L9.8,22.9c-0.7-0.7-0.7-1.9,0-2.6c0.8-0.8,1.9-0.8,2.7,0l19.4,19.4L51.4,20.3z'/></svg>"); background-size: 16px; background-position: calc(100% - 8px) center; background-repeat: no-repeat; }

[type="checkbox"], [type="radio"] { padding: 0; }

textarea { resize: none; }

textarea.form-element, textarea.tagsinput { height: auto; }

button { cursor: pointer; background: #f0f0f0; color: #000000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

label { display: inline-block; margin-top: 8px; margin-bottom: 8px; font-size: 14px; }

.form-check label { margin: 0; }

.form-inline label { display: inline-block; margin-right: 4px; margin-top: 0; margin-bottom: 0; }

.form-check--inline label { line-height: 2; }

label a { color: var(--kuler-1); position: relative; z-index: 2; }

.form-inline { align-items: center; }

.form-block { position: relative; margin-bottom: 12px; }

.form-block--error .tagsinput { border-color: #FF0000; background: #fae9ec; }

.form-check { position: relative; display: block; padding-left: 24px; }

.form-check__input { margin-left: -25px; position: absolute; z-index: 2; width: 100%; height: 100%; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }

.form-check__input:checked + label:before { background: #007cbd; -webkit-transform: scale(1.075); -moz-transform: scale(1.075); -ms-transform: scale(1.075); -o-transform: scale(1.075); transform: scale(1.075); }

.form-check--radio .form-check__input:checked + label:after { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }

.form-check--checkbox .form-check__input:checked + label:after { font-family: "detiknetwork-FF"; content: "\49"; background: transparent; line-height: 1; color: #FFFFFF; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }

.form-check__input:disabled ~ label { color: #999999; }

.form-check__input:hover + label:after { -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); }

.form-check label { position: relative; cursor: pointer; }

.form-check label:before, .form-check label:after { content: ""; width: 16px; height: 16px; position: absolute; left: -24px; top: 2px; }

.form-check label:before { background: #cccccc; -webkit-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); -moz-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); -ms-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); -o-transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2); }

.form-check label:after { background: #FFFFFF; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); -moz-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); -ms-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); -o-transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4); }

.form-check label:hover:after { -webkit-transform: scale(0.35); -moz-transform: scale(0.35); -ms-transform: scale(0.35); -o-transform: scale(0.35); transform: scale(0.35); }

.form-check--checkbox label:after { font-size: 16px; }

.form-check--inline { display: inline-flex; align-items: center; margin-right: 12px; }

.form-check--inline__input { position: static; margin-top: 0; margin-right: 8px; margin-left: 0; }

.form-check--inline label:before, .form-check--inline label:after { top: 5px; }

.form-element, .tagsinput { display: block; width: 100%; height: 42px; padding: 8px 12px; border: 1px solid #e6e6e6; line-height: 1.4; background-color: #FFFFFF; color: #333333; font-size: 14px; -webkit-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -moz-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -ms-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -o-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; }

.form-element:focus, .tagsinput:focus { border-color: #cccccc; }

.form-element[type="date"], .tagsinput[type="date"] { padding-top: 7px; padding-bottom: 7px; }

.form-element--error, .form-element--error:focus { color: #b30000 !important; background: #ffd6d6; border-color: #ff8080; }

.form-inline .form-element, .form-inline .tagsinput { display: inline-block; width: auto; vertical-align: middle; }

.form-rounded .form-element, .form-rounded .tagsinput { border-radius: 24px; }

.form-gray .form-element, .form-gray .tagsinput { background-color: #f7f7f7; }

.form-file { position: relative; width: 100%; height: 42px; padding: 8px 12px 0 20px; margin: 0; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; font-size: 16px; }

.form-file:before { position: absolute !important; left: 0; top: 0; line-height: 1.4; content: 'Pilih file'; z-index: 1; font-size: 16px; display: inline-block; line-height: 1.4; padding: 8px 16px; text-align: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; background: #e6e6e6; color: #000000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.form-file:after { content: ""; position: absolute; left: 0; top: 0; width: 117px; height: 37px; background: #fff; }

.form-file__input { position: absolute; left: 25px; }

.form-element:disabled, .tagsinput:disabled, .form-element[readonly], .tagsinput[readonly], .form-gray .form-element:disabled, .form-gray .tagsinput:disabled, .form-gray .form-element[readonly], .form-gray .tagsinput[readonly] { background-color: #f0f0f0; }

/*--------------------------------------------------------------------------------*/
/*BUTTONS & LABELS DEFAULT STYLING*/
/*--------------------------------------------------------------------------------*/
.btn, .label { position: relative; font-size: 16px; display: inline-flex; align-items: center; line-height: 1.4; padding: 8px 16px; justify-content: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; }

.btn--default, .label--default { background: #f0f0f0; color: #000000; }

.btn--rounded, .label--rounded { padding-left: 24px; padding-right: 24px; border-radius: 24px; }

.btn--sm, .label--sm { font-size: 12px; padding: calc(12px / 3) 12px; }

.btn--md, .label--md { font-size: 14px; padding-top: 6px; padding-bottom: 6px; }

.btn--lg, .label--lg { font-size: 20px; padding: 8px 32px; }

/*--------------------------------------------------------------------------------*/
/*BUTTON & LABEL STYLING VARIATIONS*/
/*--------------------------------------------------------------------------------*/
.btn:hover { color: #000000; opacity: 0.8; filter: alpha(opacity=80); }

.btn--rounded.btn--sm { padding-left: 16px; padding-right: 16px; border-radius: 16px; }

.btn--rounded.btn--lg { padding-left: 48px; padding-right: 48px; border-radius: 32px; }

.btn--default.btn--outline { border: 1px solid #666666; color: #666666; }

.btn--default.btn--link { color: #007cbd; }

.btn--outline { border: 1px solid #000000; color: #000000; }

.btn--link:hover { text-decoration: underline; opacity: 1; filter: alpha(opacity=100); }

.btn--outline, .btn--link { background: transparent !important; }

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

.form-inline .btn { margin-bottom: 0; }

.form-rounded .btn { padding-left: 24px; padding-right: 24px; border-radius: 24px; }

.label { cursor: inherit; }

.label--rounded.label--sm { padding-left: 16px; padding-right: 16px; border-radius: 16px; }

.label--rounded.label--lg { padding-left: 48px; padding-right: 48px; border-radius: 32px; }

/*--------------------------------------------------------------------------------*/
.btn--sosmed-instagram { color: #FFFFFF; border: none; background: #5851DB; /* Old browsers */ background: -moz-radial-gradient(left bottom, ellipse cover, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* FF3.6+ */ background: -webkit-radial-gradient(left bottom, ellipse cover, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at left bottom, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top_color', endColorstr='$bottom_color',GradientType=1 ); /* IE6-9 */ }

.btn--sosmed-instagram:hover { color: #FFFFFF; border: none; }

.pagination { display: block; font-size: 14px; }

.pagination a { text-align: center; display: inline-block; padding: 4px 8px; }

.pagination a:first-child { margin-right: 16px; }

.pagination a:last-child { margin-left: 16px; }

.pagination__item:hover { background: #f0f0f0; color: #000000; border-radius: 4px; }

.pagination__item--active, .pagination__item--active:hover { background: var(--kuler-1); color: #FFFFFF; border-radius: 4px; }

.pagination__range { letter-spacing: 4px; background: transparent; }

.notification-overlay { width: 300px; position: fixed; top: 215px; left: 50%; z-index: 12; padding: 12px 16px; color: var(--kuler-1); background: #FFFFFF; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.notification-overlay__close { position: absolute; top: calc(4px / 2); right: 4px; color: #999999; }

.notification-overlay a:hover .icon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; }

.notification-overlay--alpha { opacity: 0.5; filter: alpha(opacity=50); }

.loader-animate { width: 32px; margin: 12px auto; }

.copy_url { position: relative; }

.copy_url .notif { display: inline-block; padding: 8px; margin: 0; position: absolute; z-index: 5; bottom: 0%; left: 50%; width: auto; white-space: nowrap; font-size: 14px; background: #FF0000; color: #FFFFFF; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.copy_url .notif:before { position: absolute; content: ""; border: 3px solid; right: 50%; margin: 0 -7px 0 0; top: 100%; border-top: 8px solid #FF0000; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: none; }

.copy_url .notif.url_copied { display: inline-block; bottom: 135%; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }

.livereport_notif { text-align: center; padding-top: 16px; z-index: 3; }

.livereport_notif a:hover i { transform: rotate(360deg); transition: 2s; }

.breaking-sticky { visibility: hidden; z-index: 5; position: fixed; left: -100%; right: 0; height: 0; top: 88px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; }

.breaking-sticky--sticked { visibility: visible; left: 0; top: 88px; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

.breaking-sticky .media__text { overflow: hidden; }

.breaking-sticky .media__title { white-space: nowrap; margin-left: -10px; overflow: hidden; padding: 10px 0; line-height: normal; font-size: 14px; }

.breaking-sticky .media__link { color: white; }

.breaking-sticky .media__label { background: #FF0000; border-radius: 0; -webkit-transform: skew(-15deg, 0deg); -moz-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); left: -8px; top: auto; padding: 10px 20px 10px 24px; position: relative; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.8); }

.breaking-detikpagi { visibility: hidden; left: -100%; width: 296px; min-height: 100px; background: url("../images/detikpagi-popup.webp") no-repeat top; background-size: cover; bottom: 100px; position: fixed; z-index: 10; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; }

.breaking-detikpagi--sticked { visibility: visible; left: 0; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

.breaking-detikpagi__content { border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.breaking-detikpagi__close { position: absolute; z-index: 5; width: 27px; height: 27px; right: 0; background: #666666; color: #FFFFFF; }

.breaking-detikpagi .media--left .media__image { width: 177px; z-index: 3; border-radius: 8px; }

.detikpagi-live { display: block; width: calc(100% - 24px); margin-top: 8px; }

.detikpagi-live span { position: relative; background: #FFE600; display: inline-block; padding: 0 8px 0 20px; color: #EE4023; font-size: 12px; border-radius: 12px; }

.detikpagi-live span:before { content: ""; width: 8px; height: 8px; position: absolute; top: 5px; left: 5px; overflow: hidden; animation: live-detikpagi 1s; -moz-animation: live-detikpagi 1s infinite; -webkit-animation: live-detikpagi 1s infinite; background: #C72026; }

@keyframes live-detikpagi { 0% { background: #fcc43f; }
  50% { background: #C72026; }
  100% { background: #fcc43f; } }

/*--------------------------------------------------------------------------------*/
/*LIST CONTENT GENERAL*/
/*--------------------------------------------------------------------------------*/
.list-content { padding-left: 0; margin-top: 0; margin-bottom: 0; }

.list-content__item { position: relative; width: 100%; padding-top: 0; padding-bottom: 8px; margin-bottom: 8px; }

.list-content__item:first-child { margin-top: 8px; }

.list-content--column .list-content__item:first-child { margin-top: 0; }

.list-content__item:last-child { margin-bottom: 0; }

.list-content--column .list-content__item { padding-bottom: 12px; margin-bottom: 12px; }

.list-content__item .page__share { position: absolute; right: 0; }

.list-content__title { margin: 0; font-size: 14px; }

.list-content__title > a { display: block; }

.list-content--column { margin-top: 8px; }

.list-content--bordered .list-content__item { border-bottom: 1px solid #f0f0f0; }

.list-content--bordered .list-content__item:last-child { border: none; }

.list-content--bordered.list-content--column .list-content__item { border: none; }

.list-content--bordered.list-content--column .list-content__item:after { content: ""; position: absolute; left: calc(26px / 2); right: calc(26px / 2); bottom: 0; height: 1px; background: #f0f0f0; }

.media { position: relative; overflow: hidden; flex: 1; }

.list-content--equal-height .media { background: #FFFFFF; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; }

.media__image { position: relative; margin-bottom: 12px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); background: #f0f0f0; }

.media__image.float-vid.flowed { -webkit-mask-image: unset; }

.media__image a { display: block; }

.media__text { flex: 1; position: static; font-size: 12px; color: #666666; }

.list-content--equal-height .media__text { padding-left: 12px; padding-right: 12px; padding-bottom: 32px; }

.media__title { margin: 0; flex: 1; font-size: 14px; }

.media__subtitle { display: inline-block; margin-top: 0; margin-bottom: 4px; font-size: 12px; }

.media__subtitle a { position: relative; z-index: 3; }

.media__subtitle a:hover { text-decoration: underline; }

.media__date { display: inline-block; margin-top: 4px; line-height: 1.5; color: #666666; font-size: 12px; }

.list-content--equal-height .media__date { position: absolute; bottom: 12px; }

.media__author { position: relative; z-index: 3; margin-top: 8px; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: #333333; }

.media__author-image-avatar { position: relative; width: 25px; height: 25px; display: inline-flex; overflow: hidden; margin-right: 8px; background: #f0f0f0; }

.media__author a:hover { text-decoration: underline; }

.media__link { position: static; }

.media__link:before { position: absolute; content: ""; bottom: 0; left: 0; top: 0; right: 0; overflow: hidden; white-space: nowrap; z-index: 2; }

.media__label { display: inline-block; padding: calc(12px / 3) 12px; position: absolute; top: 4px; left: 4px; z-index: 1; color: #FFFFFF; background: #21409A; font-size: 12px; }

.media__icon { position: absolute; z-index: 1; padding: calc(4px / 2) 4px; text-align: center; vertical-align: middle; display: inline-flex; align-items: center; color: #FFFFFF; font-size: 12px; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.5); }

.media__icon .icon { margin: 0 2px; }

.media__icon--middle { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

.media__icon--top-right { top: 4px; right: 4px; }

.media__icon--top-left { top: 4px; left: 4px; }

.media__icon--bottom-right { bottom: 4px; right: 4px; }

.media__icon--bottom-left { bottom: 4px; left: 4px; }

.media__icon--no-bg { background: none; padding: 0; }

.media__desc { color: #000000; font-size: 14px; margin-bottom: 12px; }

.media--left { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; }

.media--right { flex-direction: row-reverse; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; }

.media--left .media__image { margin: 0 16px 0 0; }

.media--right .media__image { margin: 0 0 0 16px; }

.media--left .media__image, .media--right .media__image { width: 116px; }

.media--align-center { align-items: center; }

.media--text-overlay .media__image { margin-bottom: 0; }

.media--text-overlay .media__text { position: absolute; bottom: 0; left: 0; right: 0; padding: 15% 12px 12px; z-index: 3; color: #FFFFFF; background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ }

.media--text-overlay .media__text a { color: #FFFFFF; }

.media--text-overlay .media__subtitle { color: #fcc43f; }

.media--text-overlay .media__subtitle a { color: #fcc43f; }

.media--text-overlay .media__date { color: #f7f7f7; }

.media--text-overlay.media--image-radius .media__text { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }

.text-list { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: baseline; font-size: 16px; }

.text-list__data { margin-right: 8px; }

.text-list__title { font-size: inherit; font-weight: inherit; }

.text-list--title { margin-bottom: 12px; font-size: 18px; }

/*--------------------------------------------------------------------------------*/
/*HELPER*/
/*--------------------------------------------------------------------------------*/
.pd-0 { padding: 0 !important; }

.pdt-0 { padding-top: 0 !important; }

.pdr-0 { padding-right: 0 !important; }

.pdb-0 { padding-bottom: 0 !important; }

.pdl-0 { padding-left: 0 !important; }

.mg-0 { margin: 0 !important; }

.mgt-0 { margin-top: 0 !important; }

.mgr-0 { margin-right: 0 !important; }

.mgb-0 { margin-bottom: 0 !important; }

.mgl-0 { margin-left: 0 !important; }

.pd-4 { padding: 4px !important; }

.pdt-4 { padding-top: 4px !important; }

.pdr-4 { padding-right: 4px !important; }

.pdb-4 { padding-bottom: 4px !important; }

.pdl-4 { padding-left: 4px !important; }

.mg-4 { margin: 4px !important; }

.mgt-4 { margin-top: 4px !important; }

.mgr-4 { margin-right: 4px !important; }

.mgb-4 { margin-bottom: 4px !important; }

.mgl-4 { margin-left: 4px !important; }

.pd-8 { padding: 8px !important; }

.pdt-8 { padding-top: 8px !important; }

.pdr-8 { padding-right: 8px !important; }

.pdb-8 { padding-bottom: 8px !important; }

.pdl-8 { padding-left: 8px !important; }

.mg-8 { margin: 8px !important; }

.mgt-8 { margin-top: 8px !important; }

.mgr-8 { margin-right: 8px !important; }

.mgb-8 { margin-bottom: 8px !important; }

.mgl-8 { margin-left: 8px !important; }

.pd-12 { padding: 12px !important; }

.pdt-12 { padding-top: 12px !important; }

.pdr-12 { padding-right: 12px !important; }

.pdb-12 { padding-bottom: 12px !important; }

.pdl-12 { padding-left: 12px !important; }

.mg-12 { margin: 12px !important; }

.mgt-12 { margin-top: 12px !important; }

.mgr-12 { margin-right: 12px !important; }

.mgb-12 { margin-bottom: 12px !important; }

.mgl-12 { margin-left: 12px !important; }

.pd-16 { padding: 16px !important; }

.pdt-16 { padding-top: 16px !important; }

.pdr-16 { padding-right: 16px !important; }

.pdb-16 { padding-bottom: 16px !important; }

.pdl-16 { padding-left: 16px !important; }

.mg-16 { margin: 16px !important; }

.mgt-16 { margin-top: 16px !important; }

.mgr-16 { margin-right: 16px !important; }

.mgb-16 { margin-bottom: 16px !important; }

.mgl-16 { margin-left: 16px !important; }

.pd-24 { padding: 24px !important; }

.pdt-24 { padding-top: 24px !important; }

.pdr-24 { padding-right: 24px !important; }

.pdb-24 { padding-bottom: 24px !important; }

.pdl-24 { padding-left: 24px !important; }

.mg-24 { margin: 24px !important; }

.mgt-24 { margin-top: 24px !important; }

.mgr-24 { margin-right: 24px !important; }

.mgb-24 { margin-bottom: 24px !important; }

.mgl-24 { margin-left: 24px !important; }

.pd-48 { padding: 48px !important; }

.pdt-48 { padding-top: 48px !important; }

.pdr-48 { padding-right: 48px !important; }

.pdb-48 { padding-bottom: 48px !important; }

.pdl-48 { padding-left: 48px !important; }

.mg-48 { margin: 48px !important; }

.mgt-48 { margin-top: 48px !important; }

.mgr-48 { margin-right: 48px !important; }

.mgb-48 { margin-bottom: 48px !important; }

.mgl-48 { margin-left: 48px !important; }

.pd-96 { padding: 96px !important; }

.pdt-96 { padding-top: 96px !important; }

.pdr-96 { padding-right: 96px !important; }

.pdb-96 { padding-bottom: 96px !important; }

.pdl-96 { padding-left: 96px !important; }

.mg-96 { margin: 96px !important; }

.mgt-96 { margin-top: 96px !important; }

.mgr-96 { margin-right: 96px !important; }

.mgb-96 { margin-bottom: 96px !important; }

.mgl-96 { margin-left: 96px !important; }

.hide-element { display: none !important; }

.display-block { display: block !important; }

.display-inline-block { display: inline-block !important; }

.font-light { font-weight: 300 !important; }

.font-regular { font-weight: 400 !important; }

.font-semibold { font-weight: 600 !important; }

.font-bold { font-weight: 700 !important; }

.pos-relative { position: relative !important; }

.pos-static { position: static !important; }

.overflow-visible { overflow: visible !important; }

.w-100 { width: 100% !important; }

.align-self-start { align-self: flex-start !important; }

.justify-content-center { justify-content: center !important; }

.justify-content-end { justify-content: flex-end !important; }

.justify-content-evenly { justify-content: space-evenly !important; }

.justify-content-around { justify-content: space-around !important; }

.justify-content-between { justify-content: space-between !important; }

.flex-1 { flex: 1 !important; }

.flex-center, .align-items-center { align-items: center !important; }

/*--------------------------------------------------------------------------------*/
/*EXTENDS*/
/*--------------------------------------------------------------------------------*/
.form-element, .tagsinput, .pagination, .breaking-sticky .media__link, .breaking-sticky .media__label, .list-content__title, .media__title, .media__subtitle { font-weight: 400; }

.media__date, .footer__copy, .static__body-text p, .static__body-box p { font-weight: 300; }

.box-utility-base a, .box-utility-info a, .box-utility-success a, .box-utility-warning a, .box-utility-error a, .notification-overlay, .text-list--title, .moment__anchor, .list-soal__paket-header, .tabel-bank-soal__title, .tabel-bank-soal-teknis__header { font-weight: 600; }

.modal-body__title, .cb-bank-soal__title, .koleksi__header-title { font-weight: 700; }

label, .form-file:before, .btn, .pagination, .notification-overlay, .breaking-sticky .media__link, .breaking-sticky .media__label, .list-content__title, .media__title, .media__subtitle, .media__author, .text-list, .modal-body__title, .footer, .footer-title, .text__body-box, .static__body, .top__konsultasi__text, .top__konsultasi__button, .cb__konsultasi__text, .cb__konsultasi__button, .cb__psikologi, .cb__psikologi__body__items__right__title, .cb__psikologi__body__items__right__sub, .cb__psikologi__body__items__right__kategori, .cb__psikologi__body__items__right__start, .konsultasi__question__left__text, .konsultasi__question__left__button__text, .detail__question__top, .detail__question__body__items__text, .detail__back__text, .detail__next__last, .detail__next__title, .detail__next__body__text, .detail__next__body__text1, .detail__next__page__list__active, .detail__next__page__list__basic, .detail__next__page__button, .detail__nextLast__title, .container__form__title, .container__form__status__select select, .container__form__status__textarea textarea, .container__form__status__textarea textarea::placeholder, .container__form__data__usia__input__text, .container__form__name__left__title, .container__form__name__left__sub, .container__form__check__text1, .container__form__check__text2, .container__form__button__cancel, .container__form__button__send, .container__sended__body__text, .container__sended__body__sub, .container__sended__body__box__title, .container__sended__body__box__body__items__title, .container__sended__body__box__body__items__date, .foto__disini, .foto__disini__size, .foto__disini__upload__text, .terms__header, .terms__body__title, .terms__body__list, .container__pilihan__title, .container__pilihan__sub, .container__pilihan__body__items__title, .container__pilihan__body__items__sub, .container__pilihan__body__items__kategori, .container__pilihan__body__items__start__text, .container__pilihan__footer, .cb-bank-soal, .list-soal, .tabel-bank-soal, .tabel-bank-soal-teknis__header, .modal__kategory__body__title, .modal__kategory__body__body__text, .container__persetujuan__text, .container__persetujuan__logo, .body__pilihan__title, .body__pilihan__section__left, .body__pilihan__section__right, .body__pilihan__wording, .body__pilihan__button__agree, .body__pilihan__button__disagree, .question__pilihan__section, .question__pilihan__desc, .question__pilihan__order, .question__pilihan__body__text, .question__pilihan__body__choice, .question__pilihan__body__button, .question__wording, .result__pertanyaan, .koleksi__new, .koleksi__header, .detail__koleksi, .list__berita__title, .list__berita__item__bottom__title, .list__berita__item__bottom__date { font-family: Montserrat-FF, Arial, Tahoma, sans-serif; }

.breaking-sticky .media__text, .media--list, .display-flex, .breaking-detikpagi__close, .align-middle, .footer__app-store { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

.form-inline, .list-content__item, .display-flex-wrap, .static__body-form .steps { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; }

.notification-overlay, .flex-between { justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; align-items: center; }

.detikpagi-live, .text-center, .list-soal__paket, .list-soal__paket-header, .list-soal__paket-footer { text-align: center !important; }

.text-right { text-align: right !important; }

.text-style-italic { font-style: italic !important; }

.breaking-detikpagi__close, .align-middle { align-items: center; justify-content: center; }

.box-utility-base, .box-utility-info, .box-utility-success, .box-utility-warning, .box-utility-error, .form-check--checkbox label:before, .form-check--checkbox label:after, .form-element, .tagsinput, .notification-overlay, .copy_url .notif, .media__label, .media__icon, .media--image-radius .media__image, .slick-slide-thumbnail .slick-slide, .dropdown-menu__content, .tagsinput .tag { border-radius: 4px; }

.form-check--radio label:before, .form-check--radio label:after, .breaking-detikpagi__close, .detikpagi-live span:before, .media__image--circle, .media__author-image-avatar, .media--image-circle .media__image, .circle, .lds-ring div, .slick-dots li button, .static__body-form .numb { border-radius: 50%; }

.color-black { color: #000000; }

.color-black-light-4 { color: #cccccc; }

.color-white, .breaking-sticky .media__text, select.dark, .top__konsultasi__text, .top__konsultasi__button, .top__konsultasi__button a { color: #FFFFFF; }

.color-gray { color: #6D8591; }

.color-gray-light-1 { color: #879ba5; }

.color-blue-base, .color-blue { color: #21409A; }

.color-orange-light-1, .color-orange { color: #ef672f; }

.color-red-light-2, .color-red { color: #FF0000; }

.color-purple-light-2, .color-purple { color: #812e88; }

.color-green-light-2, .color-green { color: #11aa3d; }

.color-yellow-base, .color-yellow { color: #FCB715; }

.color-pink-light-1, .color-pink { color: #ec1b7a; }

.color-bg-black { background: #000000; }

.color-bg-black-light-5 { background: #e6e6e6; }

.color-bg-white, .tabel-bank-soal__content { background: #FFFFFF; }

.color-bg-gray { background: #6D8591; }

.color-bg-gray-light-4 { background: #e0e5e8; }

.color-bg-blue-base, .color-bg-blue { background: #21409A; }

.color-bg-orange-light-1, .color-bg-orange { background: #ef672f; }

.color-bg-red-light-2, .color-bg-red { background: #FF0000; }

.color-bg-purple-light-2, .color-bg-purple { background: #812e88; }

.color-bg-green-light-2, .color-bg-green { background: #11aa3d; }

.color-bg-yellow-base, .color-bg-yellow { background: #FCB715; }

.color-bg-pink-light-1, .color-bg-pink { background: #ec1b7a; }

.lqd_block > img, .media__image > img, .media__image a > * > img, .media__author-image-avatar img, .area_ipt img { position: absolute; max-height: 100%; max-width: 100%; width: auto; height: auto; z-index: 1; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

/*MODAL STYLE*/
.modal-box { position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 26; opacity: 0; transition: opacity 0.3s ease-out 0s; background: #fff; /* The Fallback */ background: rgba(255, 255, 255, 0.65); }

.modal-box--show { opacity: 1; overflow-x: hidden; overflow-y: auto; }

.modal-box--inline { pointer-events: none; }

.modal-box--inline.modal-box--show { pointer-events: auto; }

.modal-dialog { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 18px auto; transition: transform 0.3s ease-out 0s; transform: translate(0, 50px); height: 100%; min-height: calc(100% - 36px); max-height: calc(100% - 36px); -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; width: calc(100% - 36px); }

.modal-box--md .modal-dialog { width: 700px; }

.modal-box--full .modal-dialog { width: calc(100% - 36px); }

.anim .modal-dialog { transition: transform 0.3s ease-out 0s; transform: translate(0, 0); }

.modal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100px; max-height: 0; transition: all 0.3s ease-in-out; transform: scale(0.75); box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; background: #FFFFFF; }

.modal-content--loaded { max-height: 100%; transform: scale(1); }

.modal-box--full .modal-content { height: 100%; }

.modal-body { padding: 16px; overflow-y: scroll; opacity: 0; transition: opacity 0.75s ease-in-out; }

.modal-content--loaded .modal-body { opacity: 1; }

.modal-body__title { padding-bottom: 12px; margin-bottom: 4px; font-size: 18px; }

.close-modal { display: block; position: absolute; top: 8px; right: 8px; opacity: 0; visibility: hidden; z-index: 3; color: #999999; }

.modal-content--loaded .close-modal { opacity: 1; visibility: visible; }

.modal-overlay { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-out 0s; z-index: 22; background: #FFFFFF; }

.modal-open { overflow: hidden; }

.modal-open .modal-overlay { opacity: 0.9; }

.lds-ring { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) scale(1); width: 40px; height: 40px; }

.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 40px; height: 40px; border: 7px solid #999999; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #999999 transparent transparent transparent; }

.lds-ring div:nth-child(1) { animation-delay: -0.45s; }

.lds-ring div:nth-child(2) { animation-delay: -0.3s; }

.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.accordion-wrap, .accordion-title { position: relative; }

.accordion-title { cursor: pointer; }

.accordion-title .icon { -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; }

.accordion-content { display: none; overflow: hidden; }

.accordion-open .icon-chevron-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

/*ZOOM IMAGES*/
.wrap-zoom { z-index: 666; position: relative !important; }

.img-zoomin { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }

.img-zoomout, .wrap-zoom { cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; }

.wrap-zoom, .p_img_zoomin { position: relative; -webkit-transition: transform 300ms; -ms-transition: transform 300ms; transition: transform 300ms; }

.overflow-x-hidden { overflow-x: hidden; }

.zoom-overlay { z-index: 27; position: fixed; top: 0; left: 0; right: 0; bottom: 0; filter: "alpha(opacity=0)"; opacity: 0; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.85); }

.zoom-overlay-open .zoom-overlay { filter: "alpha(opacity=100)"; opacity: 1; }

.capzoom { position: fixed; bottom: 0; left: 0; right: 0; display: block; text-align: center; z-index: 999; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }

.capzoom .container { display: block; }

.capzoom span { position: relative; display: inline-block; padding: 8px 12px; border-top-right-radius: 4px; border-top-left-radius: 4px; color: #f7f7f7; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.75); font-size: 14px; }

.zoom-overlay-open .capzoom { opacity: 1; filter: alpha(opacity=100); }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }

.slick-track:before, .slick-track:after { content: ""; display: table; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; display: none; }

.slick-slide-thumbnail .slick-slide { opacity: 0.5; filter: alpha(opacity=50); }

.slick-slide-thumbnail .slick-slide:hover { opacity: 1; filter: alpha(opacity=100); }

.slick-slide:focus { outline: none; }

[dir="rtl"] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-slide-thumbnail { margin-top: 20px; margin-left: 20px; margin-right: 20px; }

.slick-slide-thumbnail .slick-slide { margin-left: 4px; margin-right: 4px; overflow: hidden; }

.slick-arrow.slick-hidden { display: none; }

.slick-arrow { position: absolute; z-index: 2; top: 50%; outline: none; border: none; background: transparent; font-size: 0; padding: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -o-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -ms-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

.detail__media-image-wrap .slick-arrow { opacity: 0.5; filter: alpha(opacity=50); }

.detail__media-image-wrap:hover .slick-arrow { opacity: 1; filter: alpha(opacity=100); }

.append-nav .slick-arrow, .foto-pop-up .slick-arrow { color: #FFFFFF; }

.slick-prev:before, .slick-next:before { font-family: detiknetwork-FF; font-size: 64px; }

.slick-slide-thumbnail .slick-prev:before, .slick-slide-thumbnail .slick-next:before { font-size: 24px; }

.foto-pop-up .slick-prev:before, .foto-pop-up .slick-next:before { color: #FFFFFF; }

.slick-prev { left: 0; }

.slick-slide-thumbnail .slick-prev { left: -24px; }

.slick-prev:before { content: "\67"; }

.slick-next { right: 0; }

.slick-slide-thumbnail .slick-next { right: -24px; }

.slick-next:before { content: "\65"; }

.slick-slide-thumbnail .slick-active { opacity: 0.5; filter: alpha(opacity=50); }

.slick-slide-thumbnail .slick-active:hover { opacity: 1; filter: alpha(opacity=100); }

.slick-slide-thumbnail .slick-current { opacity: 1; filter: alpha(opacity=100); }

.slick-disabled { opacity: 0; filter: alpha(opacity=0); pointer-events: none; }

.slick-dotted.slick-slider { padding-bottom: 30px; }

.slick-dots { position: absolute; bottom: 10px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; }

.slick-dots li { position: relative; display: inline-block; height: 10px; width: 10px; margin: 0 5px; padding: 0; cursor: pointer; }

.slick-dots li button { border: 1px solid #666666; background: #c7d0d5; opacity: 0.3; display: block; height: 10px; width: 10px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; }

.slick-dots li.slick-active button { opacity: 0.8; }

.append-nav { position: absolute; left: 0; right: 0; }

.dropdown { position: relative; }

.dropdown-wrap { display: inline-block; position: relative; }

.dropdown-menu { text-align: left; padding-top: 4px; display: none; min-width: 150px; position: absolute; top: 100%; left: -8px; visibility: hidden; z-index: 3; }

.dropdown-menu__content { min-width: 200px; position: relative; margin: 8px; background: #FFFFFF; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); }

.dropdown-menu__content:after { content: ""; position: absolute; left: 28px; width: 0; height: 0; top: 0; border: 6px solid black; border-color: transparent transparent #FFFFFF #FFFFFF; transform-origin: 0 0; transform: rotate(135deg); box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05); }

.dropdown-menu__content-article { min-width: 260px; max-width: 300px; padding: 12px; }

.dropdown-menu--right .dropdown-menu__content:after { left: auto; right: 2px; }

.dropdown-menu--right { left: auto; right: -8px; }

.dropdown-menu--top { top: unset; bottom: 100%; margin-top: 0; margin-bottom: 4px; }

.dropdown-menu--top .dropdown-menu__content:after { transform: rotate(-45deg); top: 100%; right: 12px; }

.dropdown-aktif > .dropdown-menu { display: block; visibility: visible; animation: dropdown-in 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

.dropdown-aktif .dropdown .icon-chevron-down, .dropdown-aktif .dropdown .icon-chevron-up { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.dropdown > .icon { -webkit-transition: transform 0.25s ease-in-out 0s; -moz-transition: transform 0.25s ease-in-out 0s; -ms-transition: transform 0.25s ease-in-out 0s; -o-transition: transform 0.25s ease-in-out 0s; transition: transform 0.25s ease-in-out 0s; }

@keyframes dropdown-in { 0% { margin-top: 30px;
    opacity: 0; }
  100% { margin-top: 0px;
    opacity: 1; } }

/*--------------------------------------------------------------------------------*/
/*BUTTON & LABEL COLOR VARIATIONS*/
/*--------------------------------------------------------------------------------*/
.btn--tosca-base { background: #009076; color: #FFFFFF; }

.btn--tosca-base:hover { color: #FFFFFF; }

.btn--tosca-base.btn--link { color: #009076; }

.btn--tosca-light-1 { background: #2ea48f; color: #FFFFFF; }

.btn--tosca-light-1:hover { color: #FFFFFF; }

.btn--tosca-light-1.btn--link { color: #2ea48f; }

.btn--tosca-light-2 { background: #67bcad; color: #FFFFFF; }

.btn--tosca-light-2:hover { color: #FFFFFF; }

.btn--tosca-light-2.btn--link { color: #67bcad; }

.btn--tosca-light-3 { background: #9ed4ca; color: rgba(0, 0, 0, 0.75); }

.btn--tosca-light-3:hover { color: rgba(0, 0, 0, 0.75); }

.btn--tosca-light-3.btn--link { color: #9ed4ca; }

.btn--tosca-light-4 { background: #cae7e2; color: rgba(0, 0, 0, 0.75); }

.btn--tosca-light-4:hover { color: rgba(0, 0, 0, 0.75); }

.btn--tosca-light-4.btn--link { color: #cae7e2; }

.btn--tosca-light-5 { background: #e6f4f1; color: rgba(0, 0, 0, 0.75); }

.btn--tosca-light-5:hover { color: rgba(0, 0, 0, 0.75); }

.btn--tosca-light-5.btn--link { color: #e6f4f1; }

.btn--orange-base { background: #EE4023; color: #FFFFFF; }

.btn--orange-base:hover { color: #FFFFFF; }

.btn--orange-base.btn--link { color: #EE4023; }

.btn--orange-light-1 { background: #ef672f; color: #FFFFFF; }

.btn--orange-light-1:hover { color: #FFFFFF; }

.btn--orange-light-1.btn--link { color: #ef672f; }

.btn--orange-light-2 { background: #f7931d; color: #FFFFFF; }

.btn--orange-light-2:hover { color: #FFFFFF; }

.btn--orange-light-2.btn--link { color: #f7931d; }

.btn--orange-light-3 { background: #f9ba6f; color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-3:hover { color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-3.btn--link { color: #f9ba6f; }

.btn--orange-light-4 { background: #fbd3a3; color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-4:hover { color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-4.btn--link { color: #fbd3a3; }

.btn--orange-light-5 { background: #fce7cc; color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-5:hover { color: rgba(0, 0, 0, 0.75); }

.btn--orange-light-5.btn--link { color: #fce7cc; }

.btn--utility-base { background: #6D8591; color: #FFFFFF; }

.btn--utility-base:hover { color: #FFFFFF; }

.btn--utility-base.btn--link { color: #6D8591; }

.btn--utility-info { background: #2099d6; color: #FFFFFF; }

.btn--utility-info:hover { color: #FFFFFF; }

.btn--utility-info.btn--link { color: #2099d6; }

.btn--utility-success { background: #11aa3d; color: #FFFFFF; }

.btn--utility-success:hover { color: #FFFFFF; }

.btn--utility-success.btn--link { color: #11aa3d; }

.btn--utility-warning { background: #FCB715; color: #FFFFFF; }

.btn--utility-warning:hover { color: #FFFFFF; }

.btn--utility-warning.btn--link { color: #FCB715; }

.btn--utility-error { background: #FF0000; color: #FFFFFF; }

.btn--utility-error:hover { color: #FFFFFF; }

.btn--utility-error.btn--link { color: #FF0000; }

button[disabled] { background: #e0e5e8; color: #879ba5; }

button[disabled]:hover { color: #879ba5; }

.btn--default-next { color: var(--kuler-1); }

.btn--paging { background: var(--kuler-1); color: #FFFFFF; }

.btn--paging:hover { color: #FFFFFF; }

.footer { text-align: center; font-size: 14px; background: #e6e6e6; color: #666666; }

.footer__logo { margin-top: 24px; display: inline-block; }

.footer__logo img { width: 160px; }

.footer__social { margin: 0px 0px 20px 0; }

.footer__copy { display: inline-block; margin-bottom: 64px; }

.footer__border { height: 4px; display: block; }

.footer-title { font-size: 12px; }

.footer-title__partof { margin-top: 8px; color: #666666; padding: 4px 0; }

.footer-title__partof img { width: 80px; vertical-align: bottom; margin: 0 0 3px 3px; }

.footer__get-app { font-size: 12px; }

.footer__app-store { justify-content: center; align-items: center; }

.footer__app-store img { margin: 16px 2px; width: auto; height: 34px; }

@media (max-width: 359px) { .footer__app-store img { height: 25px; } }

/*--------------------------------------------------------------------------------*/
/*FORMS*/
/*--------------------------------------------------------------------------------*/
.form-element:disabled, .tagsinput:disabled, .form-element[readonly], .tagsinput[readonly], .form-gray .form-element:disabled, .form-gray .tagsinput:disabled, .form-gray .form-element[readonly], .form-gray .tagsinput[readonly] { background-color: #f0f0f0; }

.char-count { padding-right: 40px; }

#charNum { position: absolute; top: 10px; right: 12px; }

.mce-container, .mce-container * { background: #f7f7f7 !important; }

.mce-container label, .mce-container * label { background: none !important; }

.mce-panel { border-color: #e6e6e6 !important; }

.mce-tinymce { box-shadow: none !important; }

.mce-top-part:before { box-shadow: none !important; }

.area_ipt { position: relative; overflow: hidden; margin-bottom: 8px; border: 2px dashed #cccccc; border-radius: 8px; background: #f7f7f7; color: #999999; }

.area_ipt .icon_inside span { position: absolute; top: 50%; width: 100%; text-align: center; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

.area_ipt .hide { display: none; }

.area_ipt .show { display: block; }

.file_upload { position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 2; opacity: 0; filter: alpha(opacity=0); }

.delimgtemp { position: absolute; right: 4px; bottom: 4px; z-index: 2; padding: 4px !important; }

.bgon .delimgtemp { display: none; }

.tagsinput { width: auto; height: auto !important; min-height: 50px !important; overflow-y: auto; }

.tagsinput input { background: transparent; border: none; float: left; }

.tagsinput .tag { float: left; margin-top: 4px; margin-right: 8px; margin-bottom: 4px; border: 1px solid #84c6e9; background: #e3f5fe; }

.tagsinput .tag span { margin: 0; padding: 4px; display: inline-block; }

.tagsinput .tag a { display: inline-block; margin-right: 4px; }

.tagsinput div { display: inline-block; margin: 3px 0 0; }

#tags_1_tag { width: 100px; }

.form-select { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; color: #999999; font-size: 14px; margin-bottom: 16px; }

.form-select-group { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #e6e6e6; color: #666666; }

.form-select-group i { font-size: 20px; margin-right: 4px; }

.form-select-group select { color: #666666; }

.pop-info { color: #666666; }

.pop-info .btn--rounded { width: 20px; height: 20px; border-radius: 50%; padding: 0; text-align: center; line-height: 20px; display: inline-block; vertical-align: middle; font-weight: 700; }

.box__form-indeks .form-block { margin-top: 8px; margin-bottom: 8px; }

.box__form-indeks .form-element, .box__form-indeks .tagsinput { border: none; }

select.dark { background-color: var(--kuler-1); background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4349 0.767458C14.6785 0.523803 15.044 0.523803 15.2877 0.767458C15.5313 1.01111 15.5313 1.4172 15.2877 1.62025L8.54657 8.40198C8.30291 8.60502 7.89682 8.60502 7.65317 8.40198L0.91205 1.62025C0.709004 1.4172 0.709004 1.01111 0.91205 0.767458C1.19631 0.523803 1.5618 0.523803 1.80545 0.767458L8.09987 7.10248L14.4349 0.767458Z' fill='white'/%3E%3C/svg%3E%0A"); }

.tableSpec { max-width: 100%; width: 100%; color: #727374; font-size: 13px; overflow: hidden; }

.tableSpec tr td { border: 1px solid #f1f2f3; padding: 7px 10px; }

.tableSpec tr td:first-child { background: #f7f8f9; font-weight: bold; width: 40%; }

.tableSpec tr td:nth-child(2) { display: none; }

.tableSpec tr td.title { padding: 5px 10px; font-size: 16px; line-height: 1.5; background: none; font-weight: normal; color: #000; }

.tableSpec tr:hover td { background: #ffffe6; }

.tableSpec tr:hover td.title { background: none; }

.tableSpec tr:hover td.title--alt { background: #f7f8f9; }

.tableSpec__caption { font-weight: bold; font-size: 16px; line-height: 24px; margin-bottom: 10px; background: none; color: #222; }

.tableSpec__caption tr td { border: 0px; padding: 0; }

.tableSpec__caption tr td:first-child { background: none; }

.tableSpec__caption tr:hover td { background: none; }

.tableSpec2 { --theme-color: #562b77; max-width: 100%; width: 100%; font-size: 13px; overflow: hidden; }

.tableSpec2 tr td { border: 0; border-bottom: 1px solid #e6e6e6; padding: 7px 10px 7px 0; font-weight: normal; font-size: 14px; line-height: 20px; color: #000; }

.tableSpec2 tr td:first-child { width: 40%; }

.tableSpec2 tr td.title { width: auto; color: #000; font-style: normal; font-weight: bold; font-size: 16px; line-height: 24px; border: 0; border-bottom: 2px solid var(--theme-color); padding: 15px 0; }

.tableSpec2 tr td.title--alt { color: var(--theme-color); font-weight: bold; font-size: 16px; padding: 15px 0; }

.tableSpec2__caption { font-weight: bold; font-size: 16px; line-height: 24px; margin-bottom: 10px; }

:root { --kuler-1: #009076; --kuler-2:#006536; --kuler-3:#068c45; }

.breaking-sticky .media__text, .footer__border { background: #009076; /* Old browsers */ background: -moz-linear-gradient(135deg, #009076 50%, #11aa3d 100%); /* FF3.6+ */ background: -webkit-linear-gradient(135deg, #009076 50%, #11aa3d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #009076 50%, #11aa3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ }

.stretch { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }

.color-kuler-1 { color: var(--kuler-1); }

.color-kuler-2 { color: var(--kuler-2); }

.color-kuler-3 { color: var(--kuler-3); }

.bg-tosca { background: #e6f4f1; }

.bg-gray { background: #f7f7f7; }

.border-radius-sm { border-radius: 4px !important; }

.border-radius-md { border-radius: 8px !important; }

.border-radius-lg { border-radius: 16px !important; }

.border-radius-xl { border-radius: 24px !important; }

.color-purple-light-2 { color: #009076; }

.text-grey { color: #999999; }

.color-paging { color: var(--kuler-1); }

.textarea-grey { width: 100%; border-radius: 8px; }

.section__blak { background: #666666; /* Old browsers */ background: -moz-linear-gradient(135deg, #666666 50%, #999999 100%); /* FF3.6+ */ background: -webkit-linear-gradient(135deg, #666666 50%, #999999 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #666666 50%, #999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ padding: 0px 0px 0px 0; height: 39px; position: relative; margin-top: 20px; }

.section__blak img { margin-top: -17px; }

.article__recomendation { padding: 8px 12px; background: #FFFFFF; border-top: 8px solid #11aa3d; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3); display: none; }

.bottom-sticky { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 26; }

.text__body-box { padding: 16px; background: #f7f7f7; border-radius: 5px; color: #666666; position: relative; }

.text__body-box-title { font-size: 18px; color: #333333; }

.text__body-box .media__author { margin-top: 0; }

.text__body-box .media__author-image-avatar { width: 35px; height: 35px; }

.static { margin-bottom: 16px; }

.static-nav { margin-bottom: 16px; }

.static-nav .selected div { color: #ef672f; }

.static-nav .selected div i { color: #000000; }

.static__body { color: #000000; font-size: 14px; }

.static__body-text ul { list-style: none; }

.static__body-text h1 { font-size: 23px; }

.static__body-text h2 { font-size: 20px; }

.static__body-text h3 { font-size: 18px; }

.static__body-text h4 { font-size: 16px; }

.static__body-text h5 { font-size: 14px; }

.static__body-text h6 { font-size: 12px; }

.static__body-box { margin: 24px 0; padding: 16px; background: #e3f5fe; border-radius: 5px; }

.static__body-box div { color: #21409A; }

.static__body-box p { margin: 4px 0 16px; }

.static__body-form { margin-bottom: 24px; }

.static__body-form span { margin: 20px 0; display: block; vertical-align: middle; }

.static__body-form--disable { opacity: 0.4; }

.static__body-form .steps { align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e6e6; margin-bottom: 16px; }

.static__body-form .steps span { margin-bottom: 4px; }

.static__body-form .numb { display: inline-block; margin: 0 4px 0 0; padding: 6px; text-align: center; width: 30px; height: 30px; color: #FFFFFF; background: #21409A; }

.new_banner_reg_100:before { position: relative; content: ""; width: auto; }

.loader-animate { width: 32px; margin: 12px auto; }

.livereport { margin-top: 8px; }

.livereport__sponsor { text-align: center; padding: 4px 12px 12px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; font-size: 12px; }

.livereport__sponsor img { margin-top: 4px; max-width: 200px; max-height: 80px; }

.moment { padding: 0 0; border-radius: 8px; background: #e6e6e6; }

.moment__anchor { padding: 12px; display: block; border-radius: 8px; color: #009076; display: flex; justify-content: space-between; overflow: hidden; }

.moment__anchor .icon { font-size: 20px; }

.moment a:hover { color: #009076; }

.foto-pop-up { background: #000000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; overflow: scroll; padding: 20px 0; }

.media-pinch { min-height: 140%; max-width: 1000px; max-height: unset; position: relative; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #333333; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; padding: 16px; }

.media-pinch > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; cursor: move; touch-action: none; vertical-align: unset; border-style: unset; position: relative; max-height: 100%; max-width: 100%; z-index: 1; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.media__image.img-xss { width: 56px; }

.pagination__item--active, .pagination__item--active:hover { background: #009076; }

.snk { border-bottom: 1px solid #000; }

.snk__accordion-title { display: flex; align-items: center; justify-content: space-between; }

.snk__accordion-title span { display: flex; align-items: center; }

.snk__accordion-content { font-size: 14px; line-height: 20px; font-weight: 300; display: none; }

.snk__list { margin: 0; padding: 0 0 0 20px; }

.snk__list li { margin: 0; padding: 5px 0 0 0; }

.snk__login { font-size: 16px; line-height: 22px; font-weight: 400; color: #000; }

.snk__login p { margin-bottom: 10px; }

#snk__check { display: none; }

#snk__check ~ .snk__accordion-content { display: none; }

#snk__check:checked ~ .snk__accordion-content { display: block; }

#snk__check:checked ~ .snk__accordion-title span { transform: rotate(180deg); }

.top__konsultasi { width: 100%; background: #2EA48F; padding: 13.5px 15.5px; display: flex; justify-content: space-between; margin-bottom: 18px; border-radius: 5px; }

.top__konsultasi__text { font-style: normal; font-weight: 400; font-size: 12px; line-height: 17px; }

.top__konsultasi__button { width: 47px; height: 21px; display: flex; justify-content: center; align-items: center; background: #F7931D; border-radius: 5px; font-style: normal; font-weight: 600; font-size: 10px; line-height: 12px; }

.cb__konsultasi { display: flex; justify-content: space-between; align-items: center; background: #2EA48F; padding: 12px 15px; border-radius: 5px; width: 100%; margin-bottom: 18px; }

.cb__konsultasi__text { font-style: normal; color: #FFFFFF; font-weight: 400; font-size: 12px; line-height: 17px; }

.cb__konsultasi__button { width: 105px; height: 20px; background: #F7931D; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-style: normal; color: #FFFFFF; font-weight: 600; font-size: 10px; line-height: 12px; }

.cb__psikologi { color: #000000; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; margin-bottom: 16px; }

.cb__psikologi__body { width: 100%; }

.cb__psikologi__body__items { width: 100%; padding: 16px; display: flex; border: 1px solid #E6E6E6; border-radius: 5px; margin-bottom: 16px; }

.cb__psikologi__body__items__left { margin-right: 12px; }

.cb__psikologi__body__items__right__title { color: #000000; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; margin-bottom: 7px; }

.cb__psikologi__body__items__right__sub { color: #666666; font-style: normal; font-weight: 400; font-size: 12px; line-height: 17px; margin-bottom: 7px; }

.cb__psikologi__body__items__right__kategori { display: flex; color: #009076; letter-spacing: 0.04em; font-style: normal; font-weight: 600; font-size: 11px; line-height: 17px; margin-bottom: 16px; }

.cb__psikologi__body__items__right__kategori__1 { padding-right: 4px; margin-right: 4px; border-right: 1px solid #009076; }

.cb__psikologi__body__items__right__start { display: flex; justify-content: flex-end; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #11AA3D; }

.cb__psikologi__body__items__right__start__text { margin-right: 8px; }

.konsultasi__question { margin-bottom: 18px; display: flex; background: #E6F4F1; border-radius: 5px; width: 100%; }

.konsultasi__question__left { padding: 12px; width: 55%; }

.konsultasi__question__left__text { font-style: normal; color: #009076; color: #009076; font-weight: 700; font-size: 14px; line-height: 20px; margin-bottom: 12px; width: 150px; }

.konsultasi__question__left__button { background: #F7931D; border-radius: 5px; display: flex; justify-content: center; align-items: center; height: 25px; }

.konsultasi__question__left__button__text { padding-right: 10px; font-style: normal; font-weight: 600; font-size: 10px; line-height: 17px; color: #FFFFFF; letter-spacing: 0.04em; }

.konsultasi__question__left__button__img { padding-bottom: 4px; }

.konsultasi__question__right { width: 45%; padding-right: 12px; padding-top: 12px; }

.detail__question { width: 100%; margin-top: 38px; }

.detail__question__top { height: 65px; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; color: #FFFFFF; letter-spacing: 0.04em; font-style: normal; font-weight: 700; font-size: 12px; line-height: 17px; margin-bottom: 15px; }

.detail__question__top__img { width: 100%; }

.detail__question__top__img img { border-radius: 4px; width: 100%; }

.detail__question__top__text { position: absolute; top: 25px; }

.detail__question__body { width: 100%; }

.detail__question__body__items { position: relative; background: #009076; margin-bottom: 15px; border-radius: 4px; }

.detail__question__body__items__img { width: 100%; }

.detail__question__body__items__img img { width: 100%; }

.detail__question__body__items__answer { position: absolute; top: 10px; left: 10px; }

.detail__question__body__items__text { font-style: normal; font-weight: 700; font-size: 12px; line-height: 17px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.04em; color: #FFFFFF; height: 50px; width: 100%; }

.detail__back { display: flex; align-items: center; justify-content: center; width: 190px; height: 36px; background: #E6E6E6; border-radius: 4px; margin-top: 11px; }

.detail__back__img { padding-right: 9px; padding-bottom: 6px; }

.detail__back__text { font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #333333; }

.detail__next { margin-top: 19px; }

.detail__next__last { display: flex; justify-content: flex-end; align-items: center; color: #ffffff; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; padding-bottom: 10px; }

.detail__next__last__text { background: #009076; border-radius: 4px; padding: 0px 8px; }

.detail__next__title { color: #000000; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; padding-bottom: 10px; border-bottom: 1px solid #E5E5E5; }

.detail__next__body { display: flex; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; padding-top: 16px; }

.detail__next__body__img { border-radius: 4px; width: 35%; height: 100%; }

.detail__next__body__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 22px; color: #000000; width: 45%; }

.detail__next__body__text1 { font-style: normal; font-weight: 500; font-size: 16px; line-height: 22px; color: #000000; }

.detail__next__body__icon { width: 20%; display: flex; justify-content: center; }

.detail__next__body__img { display: flex; justify-content: center; align-items: center; }

.detail__next__page { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; padding-top: 12px; border-bottom: 1px solid #e5e5e5; margin-bottom: 19px; }

.detail__next__page__list { display: flex; }

.detail__next__page__list__active { width: 30px; height: 30px; border-radius: 100%; background: #009076; margin-right: 8px; color: #ffffff; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 600; font-size: 12px; line-height: 17px; }

.detail__next__page__list__basic { width: 30px; height: 30px; border-radius: 100%; background: #CCCCCC; margin-right: 8px; color: #2EA48F; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 600; font-size: 12px; line-height: 17px; }

.detail__next__page__button { display: flex; align-items: center; height: 25px; background: #009076; color: #FFFFFF; letter-spacing: 0.04em; font-style: normal; font-weight: 600; font-size: 12px; line-height: 17px; padding: 4px 8px; border-radius: 4px; }

.detail__next__page__button__text { padding-right: 8px; }

.detail__nextLast { margin-bottom: 24px; width: 100%; background: #FFFFFF; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); border-radius: 12px; }

.detail__nextLast__top { background: #009076; height: 4px; border-radius: 12px 12px 0px 0px; }

.detail__nextLast__title { display: flex; align-items: center; font-style: normal; color: #000000; font-weight: 400; font-size: 14px; line-height: 20px; padding: 16px 0px 0px 16px; }

.detail__nextLast__title__text { padding-right: 15px; }

.container__form { width: 100%; background: #FFFFFF; border-radius: 8px; margin-bottom: 60px; }

.container__form__title { width: 100%; display: flex; justify-content: center; font-style: normal; color: #666666; font-weight: 600; font-size: 20px; line-height: 28px; margin-bottom: 30px; }

.container__form__status { width: 100%; margin-bottom: 14px; }

.container__form__status__select { width: 100%; }

.container__form__status__select img { width: 100%; }

.container__form__status__select select { border: 1px solid #E6E6E6; border-radius: 4px; height: 34px; padding: 8px 12px; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; width: 100%; }

.container__form__status__select option[value=""][disabled] { display: none; }

.container__form__status__select select { color: #999999; }

.container__form__status__select option { color: #000000; }

.container__form__status__select option:first-child { color: #999999; }

.container__form__status__textarea { width: 100%; }

.container__form__status__textarea textarea { width: 100%; height: 107px; border: 1px solid #E6E6E6; border-radius: 4px; font-style: normal; color: #000000; font-weight: 400; font-size: 12px; line-height: 17px; padding: 9px 12px 0px 12px; }

.container__form__status__textarea textarea::placeholder { font-style: normal; color: #999999; font-weight: 400; font-size: 12px; line-height: 17px; }

.container__form__data { display: flex; width: 100%; margin-bottom: 14px; }

.container__form__data__usia { width: 33.33%; }

.container__form__data__usia__input { display: flex; align-items: center; }

.container__form__data__usia__input__input { margin-right: 8px; }

.container__form__data__usia__input__input input { width: 60px; height: 34px; border: 1px solid #E6E6E6; border-radius: 4px; }

.container__form__data__usia__input__input input::-webkit-outer-spin-button, .container__form__data__usia__input__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.container__form__data__usia__input__input input[type=number] { -moz-appearance: textfield; }

.container__form__data__usia__input__text { color: #999999; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; }

.container__form__name { margin-bottom: 15px; width: 100%; display: flex; justify-content: space-between; align-items: center; }

.container__form__name__left__title { font-style: normal; color: #000000; font-weight: 600; font-size: 14px; line-height: 20px; padding-bottom: 4px; }

.container__form__name__left__sub { color: #666666; font-style: normal; font-weight: 400; font-size: 12px; line-height: 17px; }

.container__form__check { display: flex; align-items: center; margin-bottom: 30px; }

.container__form__check__img { padding-right: 7px; }

.container__form__check__text1 { font-style: normal; color: #000000; font-weight: 400; font-size: 14px; line-height: 20px; }

.container__form__check__text2 { font-style: normal; color: #11AA3D; font-weight: 400; font-size: 14px; line-height: 20px; }

.container__form__button { width: 100%; display: flex; justify-content: center; margin-bottom: 61px; }

.container__form__button__cancel { display: flex; justify-content: center; align-items: center; background: #000000; border-radius: 33px; width: 108px; height: 36px; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #FFFFFF; margin-right: 11px; }

.container__form__button__cancel__img { padding-right: 8px; }

.container__form__button__send { display: flex; justify-content: center; align-items: center; background: #000000; border-radius: 33px; width: 108px; height: 36px; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #FFFFFF; }

.container__form__button__send__text { padding-right: 8px; }

.label__mandatory { display: flex; font-style: normal; color: #000000; font-weight: 600; font-size: 16px; line-height: 22px; position: relative; width: fit-content; margin-bottom: 4px; }

.label__mandatory__icon { position: absolute; right: -8px; top: -3px; }

.container__sended { display: flex; justify-content: center; margin-top: 60px; }

.container__sended__body { width: 694px; text-align: center; margin-bottom: 60px; }

.container__sended__body__cancel { text-align: right; margin-bottom: 8px; }

.container__sended__body__success { margin-bottom: 24px; }

.container__sended__body__text { font-style: normal; font-weight: 600; font-size: 20px; line-height: 28px; color: #009076; margin-bottom: 28px; }

.container__sended__body__sub { font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 60px; }

.container__sended__body__box { text-align: left; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }

.container__sended__body__box__title { color: #009076; font-style: normal; font-weight: 600; font-size: 18px; line-height: 25px; padding: 18px 0px; }

.container__sended__body__box__body { display: flex; width: 100%; margin-bottom: 16px; }

.container__sended__body__box__body__items { width: 50%; }

.container__sended__body__box__body__items__img { margin-bottom: 8px; }

.container__sended__body__box__body__items__img img { width: 100%; height: 125px; }

.container__sended__body__box__body__items__title { color: #000000; font-style: normal; padding-bottom: 8px; font-weight: 400; font-size: 14px; line-height: 20px; }

.container__sended__body__box__body__items__date { color: #999999; font-style: normal; font-weight: 400; font-size: 12px; line-height: 17px; }

.foto__disini { position: absolute; max-height: 100%; max-width: 100%; width: auto; height: auto; z-index: 1; top: 45%; margin-right: auto; margin-left: auto; left: 0; right: 0; text-align: center; color: #000000; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; }

.foto__disini__size { position: absolute; max-height: 100%; max-width: 100%; width: auto; height: auto; z-index: 1; top: 55%; margin-right: auto; margin-left: auto; left: 0; right: 0; text-align: center; color: #FF0000; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; }

.foto__disini__upload { position: absolute; width: 83px; height: 25px; z-index: 1; top: 73%; margin-right: auto; margin-left: auto; left: 0; right: 0; text-align: center; display: flex; background: #000000; border-radius: 4px; }

.foto__disini__upload__img img { position: relative; margin-top: 9px; left: 30%; top: 0%; margin-left: 10px; padding-right: 10px; }

.foto__disini__upload__text { color: #FFFFFF; letter-spacing: 0.04em; font-style: normal; font-weight: 600; font-size: 12px; line-height: 17px; padding-top: 4px; }

.switch { position: relative; display: inline-block; width: 60px; height: 20px; }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }

.slider:before { position: absolute; content: ""; height: 30px; width: 30px; left: 4px; bottom: -4px; background-color: #009076; -webkit-transition: .4s; transition: .4s; }

input:checked + .slider { background-color: #349785; }

input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }

/* Rounded sliders */
.slider.round { border-radius: 34px; }

.slider.round:before { border-radius: 50%; }

@media screen and (max-width: 340px) { .label__mandatory { display: flex; font-style: normal; color: #000000; font-weight: 600; font-size: 14px; line-height: 22px; position: relative; width: fit-content; margin-bottom: 4px; }
  .label__mandatory__icon { position: absolute; right: -8px; top: -3px; } }

@media screen and (max-width: 300px) { .label__mandatory { display: flex; font-style: normal; color: #000000; font-weight: 600; font-size: 12px; line-height: 22px; position: relative; width: fit-content; margin-bottom: 4px; }
  .label__mandatory__icon { position: absolute; right: -8px; top: -3px; } }

.terms__header { background: none; color: #495b63; border-bottom: 1px solid #CFD8DC; padding: 10px 25px 10px 0; margin-bottom: 20px; font-size: 22px; }

.terms__body__title { font-size: 18px; margin-bottom: 20px; margin-top: 20px; font-weight: normal; line-height: 1.25; color: #333; }

.terms__body__list { padding: 0; margin: 0px 0px 0px 30px; }

.terms__body__list li { padding: 15px 0 15px 15px; line-height: 23px; position: relative; }

.container__pilihan { width: 100%; margin-bottom: 60px; }

.container__pilihan__title { margin-top: 60px; font-style: normal; color: #009076; font-weight: 700; font-size: 26px; line-height: 36px; margin-bottom: 24px; }

.container__pilihan__sub { font-style: normal; color: #000000; font-weight: 400; font-size: 16px; line-height: 22px; margin-bottom: 40px; }

.container__pilihan__body { width: 100%; margin-bottom: 40px; }

.container__pilihan__body__flex { display: flex; }

.container__pilihan__body__items { padding: 20px; border: 1.56612px solid #E6E6E6; background: #FFFFFF; border-radius: 7.83058px; margin-bottom: 24px; }

.container__pilihan__body__items__img { margin-bottom: 28px; margin-right: 16px; }

.container__pilihan__body__items__title { color: #000000; font-style: normal; font-weight: 600; font-size: 18px; line-height: 25px; margin-bottom: 8px; }

.container__pilihan__body__items__sub { font-style: normal; color: #666666; font-weight: 400; font-size: 14px; line-height: 20px; margin-bottom: 8px; }

.container__pilihan__body__items__kategori { display: flex; color: #009076; letter-spacing: 0.04em; font-style: normal; font-weight: 600; font-size: 11px; line-height: 17px; margin-bottom: 22px; }

.container__pilihan__body__items__kategori__1 { border-radius: 1px solid #009076; margin-right: 4px; }

.container__pilihan__body__items__kategori__2 img { padding-bottom: 2px; }

.container__pilihan__body__items__start { display: flex; justify-content: flex-end; align-items: center; }

.container__pilihan__body__items__start__text { color: #11AA3D; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; margin-right: 12px; }

.container__pilihan__footer { letter-spacing: 0.01em; color: #666666; font-style: normal; font-weight: 300; font-size: 14px; line-height: 20px; }

.cb-bank-soal__bg { background: #FFF2E1 url("../images/ill-banksoal.svg") no-repeat bottom right; padding: 16px; margin: 10px 0; }

.cb-bank-soal__title { color: #EE4023; font-size: 18px; }

.list-soal__paket { height: 265px; }

.list-soal__paket-header { position: relative; padding: 16px; border-bottom: 1px solid #e6e6e6; font-size: 18px; }

.list-soal__paket-header:before { position: absolute; bottom: -26px; left: 0; content: ""; width: 100%; height: 25px; z-index: 2; background: #fff; /* Old browsers */ background: -moz-linear-gradient(bottom, white 25%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(bottom, white 25%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, white 25%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ }

.list-soal__paket-footer { position: relative; padding: 16px; border-top: 1px solid #e6e6e6; }

.list-soal__paket-footer:before { position: absolute; top: -26px; left: 0; content: ""; width: 100%; height: 25px; z-index: 2; background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, white 25%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, white 25%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, white 25%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ }

.tabel-bank-soal { padding: 2px; margin-bottom: 24px; background: #fbd3a3; border-radius: 8px; }

.tabel-bank-soal__item:last-child .tabel-bank-soal__title { border: none; }

.tabel-bank-soal__item:last-child .tabel-bank-soal__content { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }

.tabel-bank-soal__title { padding: 16px; border-bottom: 1px solid white; }

.tabel-bank-soal__content { padding: 12px; font-size: 12px; }

.tabel-bank-soal__content-item { padding: 4px; }

.tabel-bank-soal__content-title { padding-right: 12px !important; }

.tabel-bank-soal-teknis { padding: 16px; margin-bottom: 24px; background: #f7f7f7; border-radius: 8px; font-size: 14px; }

.tabel-bank-soal-teknis__header { font-size: 18px; }

.modal__kategory__body { width: 100%; }

.modal__kategory__body__title { font-style: normal; font-weight: 700; font-size: 23px; text-align: center; line-height: 32px; color: #000000; margin-bottom: 24px; }

.modal__kategory__body__body { height: 184px; padding: 18px; }

.modal__kategory__body__body__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #000000; text-align: center; margin-top: 16px; margin-bottom: 26px; }

.modal__kategory__body__body__button { text-align: center; margin-bottom: 24px; }

.modal-box { background: #000; /* The Fallback */ background: rgba(0, 0, 0, 0.7); }

.container__persetujuan { width: 100%; display: flex; background-color: #E6F4F1; align-items: center; height: 60px; margin-bottom: 24px; }

.container__persetujuan__text { font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #000000; margin-right: 20px; margin-left: 18px; }

.container__persetujuan__logo { background: #C4C4C4; height: 35px; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 400; font-size: 11px; line-height: 14px; color: #000000; width: 128px; }

.body__pilihan__title { width: 290px; font-style: normal; color: #000000; font-weight: 600; font-size: 26px; line-height: 36px; margin-bottom: 12px; }

.body__pilihan__section { margin-bottom: 20px; display: flex; width: 100%; align-items: center; height: 44px; background-color: #E6F4F1; }

.body__pilihan__section__left { margin-right: 16px; color: #000000; font-style: normal; font-weight: 700; font-size: 14px; line-height: 20px; padding-left: 12px; }

.body__pilihan__section__right { color: #999999; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; padding-right: 20px; }

.body__pilihan__wording { font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; color: #000000; }

.body__pilihan__button { width: 100%; margin-top: 40px; margin-bottom: 30px; }

.body__pilihan__button__agree { background: #009076; border-radius: 10px; height: 40px; display: flex; justify-content: center; align-items: center; font-style: normal; color: #FFFFFF; font-weight: 500; font-size: 14px; line-height: 20px; margin-bottom: 12px; cursor: pointer; }

.body__pilihan__button__disagree { font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #999999; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; }

.question__pilihan { background: #F7F7F7; border-radius: 5px; width: 100%; padding: 20px; }

.question__pilihan__section { font-style: normal; font-weight: 700; font-size: 23px; line-height: 32px; color: #000000; margin-bottom: 10px; }

.question__pilihan__desc { font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; color: #999999; margin-bottom: 40px; }

.question__pilihan__order { width: 66px; height: 41px; background: #CAE7E2; display: flex; justify-content: center; align-items: center; color: #000000; letter-spacing: 0.11em; font-style: normal; font-weight: 600; font-size: 14px; line-height: 17px; margin-bottom: 24px; }

.question__pilihan__body { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); background: #FFFFFF; padding: 20px; width: 100%; }

.question__pilihan__body__text { font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 40px; }

.question__pilihan__body__choice { width: 100%; }

.question__pilihan__body__choice__basic { width: 100%; display: flex; padding: 10px 10px 10px 22px; align-items: center; border: 1px solid #E6E6E6; border-radius: 5px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #000000; min-height: 52px; margin-bottom: 20px; }

.question__pilihan__body__choice__choose { width: 100%; display: flex; padding: 10px 10px 10px 22px; align-items: center; border: 1px solid #E6E6E6; border-radius: 5px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #ffffff; min-height: 52px; background: #009076; margin-bottom: 20px; }

.question__pilihan__body__button { display: flex; justify-content: flex-end; width: 100%; }

.question__pilihan__body__button__back { width: 100px; height: 40px; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #999999; cursor: pointer; }

.question__pilihan__body__button__next { width: 100px; height: 40px; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #ffffff; background: #009076; border-radius: 10px; cursor: pointer; }

.question__wording { width: 100%; padding: 20px 18px 20px 18px; background: #DA1F26; border-radius: 4px; margin-bottom: 24px; }

.question__wording__top { display: flex; margin-bottom: 12px; }

.question__wording__top__img { margin-right: 16px; }

.question__wording__top__text { font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; color: #FFFFFF; }

.question__wording__bottom { font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #FFFFFF; }

.result__pertanyaan { width: 100%; }

.result__pertanyaan__ads { width: 100%; margin-bottom: 28px; }

.result__pertanyaan__ads img { width: 100%; }

.result__pertanyaan__title { font-style: normal; font-weight: 700; font-size: 26px; line-height: 36px; color: #009076; margin-bottom: 28px; }

.result__pertanyaan__desc { font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 20px; }

.result__pertanyaan__button { width: 100%; display: flex; justify-content: center; margin-top: 40px; margin-bottom: 40px; }

.result__pertanyaan__button__button { background: #11AA3D; width: 200px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 10px; color: #ffffff; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; }

.result__pertanyaan__help { padding: 32px 28px; width: 100%; background: #F0F0F0; border-radius: 5px; margin-bottom: 28px; }

.result__pertanyaan__help__title { font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 12px; }

.result__pertanyaan__help__desc { font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #000000; margin-bottom: 5px; }

.result__pertanyaan__box { padding: 32px 28px; background: #CAE7E2; border-radius: 5px; }

.result__pertanyaan__box__top { display: flex; width: 100%; }

.result__pertanyaan__box__top__left { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: #ffffff; border-radius: 100%; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #000000; margin-right: 28px; }

.result__pertanyaan__box__top__right { width: 80%; }

.result__pertanyaan__box__top__right__name { font-style: normal; color: #000000; letter-spacing: 0.04em; font-weight: 600; font-size: 12px; line-height: 17px; }

.result__pertanyaan__box__top__right__desc { font-style: normal; font-weight: 400; font-size: 11px; line-height: 16px; color: #000000; }

.result__pertanyaan__box__bottom { display: flex; justify-content: flex-end; width: 100%; margin-top: 40px; }

.result__pertanyaan__box__bottom__button { width: 88px; height: 30px; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 600; font-size: 12px; line-height: 20px; cursor: pointer; color: #FFFFFF; background: #009076; border-radius: 10px; }

.result__pertanyaan__assesment { margin-top: 28px; width: 100%; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; text-align: center; }

.result__pertanyaan__share { margin-bottom: 70px; }

.bg-box-title-koleksi { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 51.04%); }

.koleksi { border-radius: 8px; overflow: hidden; }

.koleksi__new { position: absolute; z-index: 1; right: 0; padding: 4px 6px; background: #F7931D; color: #FFFFFF; font-weight: 600; font-size: 8px; }

.nhl .koleksi { margin: -8px; margin-bottom: 8px; }

.koleksi__bg { position: absolute; left: 0; top: 0; width: 100%; display: inline-block; height: 100px; }

.koleksi__bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.koleksi.koleksi--index { background: #FFFFFF; }

.koleksi.koleksi--index .media--text-overlay .media__text a { color: #ffffff; }

.koleksi__header { padding: 0 16px; height: 100px; color: #FFFFFF; display: flex; justify-content: space-between; align-items: center; position: relative; }

.koleksi__header-text { z-index: 1; position: relative; }

.koleksi__header-title { font-size: 20px; color: #009076; margin-bottom: 0; }

.koleksi__header-subtitle { font-size: 14px; color: #000000; margin-bottom: 0; font-weight: 350; }

.koleksi__list { padding: 8px 0 16px 0; }

.koleksi__list .column-12 { overflow: hidden; }

.koleksi--index .koleksi__list { padding: 8px 5px 16px 5px; }

.nhl .koleksi__list { margin-top: 8px; }

.koleksi__list .list-content__item { margin-bottom: 16px; padding: 0 8px; }

.koleksi--index .koleksi__list .list-content__item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e6e6e6; }

.koleksi__list .box .list-content__item { margin-bottom: 16px; padding: 0 0; }

.koleksi__list.list-content--column .list-content__item:last-child { margin-bottom: 16px; }

.koleksi-wide { overflow: hidden; border-radius: 8px; position: relative; margin-bottom: 16px; }

.koleksi-wide--ondetail .koleksi-wide { border-radius: 0; margin-bottom: 0; }

.koleksi-wide--ondetail { border-radius: 8px; overflow: hidden; background: #f7f7f7; margin-bottom: 16px; border: 1px solid #e6e6e6; }

.koleksi-wide__bg { width: 100%; overflow: hidden; position: absolute; height: 100%; }

.koleksi-wide__bg img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; }

.koleksi-wide__overlay { flex: 1; position: static; font-size: 12px; color: #666666; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.4); height: 100%; padding: 16px; display: flex; flex-flow: column; justify-content: center; }

.koleksi-wide--ondetail .koleksi-wide__overlay { background: rgba(41, 82, 67, 0.6); }

.koleksi-wide__overlay2 { flex: 1; position: static; font-size: 12px; color: #666666; background: rgba(0, 0, 0, 0.4); position: relative; padding: 16px; display: flex; flex-flow: column; justify-content: center; }

.koleksi-wide .detail__share { color: #FFFFFF; padding: 0; justify-content: flex-start; margin-top: 12px; }

.detail__koleksi { width: 100%; margin-bottom: 40px; display: flex; background-image: url("../images/bg-koleksi2x2.png"); background-size: cover; background-repeat: no-repeat; height: 310px; }

.detail__koleksi__left { width: 70%; padding: 42px 26px; }

.detail__koleksi__left__title { font-weight: 700; font-size: 26px; color: #000000; margin-bottom: 8px; }

.detail__koleksi__left__desc { font-weight: 500; font-size: 14px; margin-bottom: 24px; color: #000000; }

.detail__koleksi__right { width: 100%; display: flex; justify-content: flex-end; }

.detail__koleksi__right__subscribe { width: 77px; height: 21px; background: #F7931D; border-radius: 5px; font-size: 10px; color: #ffffff; font-weight: 500; display: flex; justify-content: center; align-items: center; }

.text-left { text-align: left !important; }

.border-bottom { border-bottom: 2px solid #f0f0f0; }

.mgb-70 { margin-bottom: 70px !important; }

.border-none { border: none !important; }

.color-green2 { color: #009076 !important; }

.color-gray3 { color: #999999 !important; }

.bg-none { background: none !important; }

.border-bottom-gray { border-bottom: 1px solid #e6e6e6; }

.h-284 { height: 284px; }

.bg-none { background: none !important; }

.border-bottom-gray { border-bottom: 2px solid #f0f0f0; }

.border-bottom-gray2 { border: 1px solid #e6e6e6; }

.object-fit-none { object-fit: none !important; }

.border-bottom-none { border-bottom: none !important; }

.color-bg-green2 { background: #009076 !important; }

.border-radius-4 { border-radius: 4px; }

.mw-100 { max-width: 100%; }

.opacity-05 { opacity: 0.5; }

.black-text { color: #000000 !important; font-weight: 700; }

.padding-box { padding: 20px 16px 0px 16px; }

.color_white { color: #fff !important; }

.cb-penyakit__border { padding: 16px 16px 0; margin-bottom: 12px; border: 1px solid #e6e6e6; border-top: none; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; }

.list__berita { width: 100%; overflow-x: scroll; overflow-y: hidden; margin-bottom: 12px; padding-bottom: 20px; display: flex; }

.list__berita__title { color: var(--kuler-1); font-style: normal; font-weight: 600; font-size: 18px; line-height: 22px; }

.list__berita__item { width: 150px; margin-right: 14px; }

.list__berita__item__top { position: relative; margin-top: 10px; }

.list__berita__item__top__logo { position: absolute; top: 2px; right: 5px; }

.list__berita__item__bottom { margin-top: 5px; }

.list__berita__item__bottom__title { font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; letter-spacing: 0.04px; color: #000000; }

.list__berita__item__bottom__date { color: #9B9B9B; font-style: normal; font-weight: 300; font-size: 11px; line-height: 13px; letter-spacing: -0.22px; }