aside, details, figure, footer, header, section, summary { display: block; }

canvas, video { display: inline-block; }

[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; }

b, strong { font-weight: bold; }

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

code, pre { 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; }

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

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; }

/*--------------------------------------------------------------------------------*/
/*GENERAL*/
/*--------------------------------------------------------------------------------*/
:root { --kuler-1: #21409A; --kuler-2: #007cbd; --kuler-3: #ef672f; }

body { margin: 0; line-height: 1.4; font-size: 16px; font-family: Helvetica-FF, Arial, Tahoma, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

a { text-decoration: none; color: #000; -webkit-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; }

a:hover { color: var(--kuler-1); }

a:focus { outline: none; }

hr { border-style: solid none none; border-color: #e6e6e6; margin: 16px 0; }

p { margin-top: 0; margin-bottom: 16px; }

ins { text-decoration: none; display: contents; }

ol, ul { padding: 0 0 0 24px; margin-top: 12px; margin-bottom: 12px; }

ol ol, ol ul, ul ol, ul ul { margin-top: calc(12px / 2); margin-bottom: 0; }

ol li, ul li { padding: 8px 0; }

img { vertical-align: middle; border-style: none; }

header, footer { display: table; width: 100%; }

@media (min-width: 1024px) { header, footer { display: block; } }

/*--------------------------------------------------------------------------------*/
/*TYPOGRAHPHY*/
/*--------------------------------------------------------------------------------*/
h1, h2, h3, h6 { font-weight: 700; margin-top: 0; margin-bottom: 8px; }

h1, h2, h3, h6 { line-height: 1.3; }

h1 { font-size: 40px; }

h2 { font-size: 32px; }

h3 { font-size: 28px; }

h6 { font-size: 16px; }

.head-1 { border: 0 !important; clip: rect(0 0 0 0) !important; height: 0.0625rem !important; margin: -0.0625rem !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 0.0625rem !important; }

@font-face { font-family: "Helvetica-FF"; font-weight: 300; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/helvetica/Helvetica-Light.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/helvetica/Helvetica-Light.woff2") format("woff2"), url("../fonts/helvetica/Helvetica-Light.woff") format("woff"), url("../fonts/helvetica/Helvetica-Light.ttf") format("truetype"), url("../fonts/helvetica/Helvetica-Light.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 99.25%; }

@font-face { font-family: "Helvetica-FF"; font-weight: 400; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/helvetica/Helvetica-Regular.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/helvetica/Helvetica-Regular.woff2") format("woff2"), url("../fonts/helvetica/Helvetica-Regular.woff") format("woff"), url("../fonts/helvetica/Helvetica-Regular.ttf") format("truetype"), url("../fonts/helvetica/Helvetica-Regular.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 99.25%; }

@font-face { font-family: "Helvetica-FF"; font-weight: 700; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/helvetica/Helvetica-Bold.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/helvetica/Helvetica-Bold.woff2") format("woff2"), url("../fonts/helvetica/Helvetica-Bold.woff") format("woff"), url("../fonts/helvetica/Helvetica-Bold.ttf") format("truetype"), url("../fonts/helvetica/Helvetica-Bold.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 99.25%; }

@font-face { font-family: "Montserrat-FF"; font-weight: 300; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-Light.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-Light.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Light.woff") format("woff"), url("../fonts/montserrat/Montserrat-Light.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-Light.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 92.5%; }

@font-face { font-family: "Montserrat-FF"; font-weight: 400; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-Regular.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-Regular.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Regular.woff") format("woff"), url("../fonts/montserrat/Montserrat-Regular.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-Regular.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 92.5%; }

@font-face { font-family: "Montserrat-FF"; font-weight: 600; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-SemiBold.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-SemiBold.woff") format("woff"), url("../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 92.5%; }

@font-face { font-family: "Montserrat-FF"; font-weight: 700; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-Bold.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/montserrat/Montserrat-Bold.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Bold.woff") format("woff"), url("../fonts/montserrat/Montserrat-Bold.ttf") format("truetype"), url("../fonts/montserrat/Montserrat-Bold.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 92.5%; }

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

@media (min-width: 768px) { .container { padding-left: calc(26px / 2); padding-right: calc(26px / 2); } }

@media (min-width: 576px) { .container { max-width: 540px; } }

@media (min-width: 768px) { .container { max-width: 720px; } }

@media (min-width: 992px) { .container { max-width: 960px; } }

@media (min-width: 1200px) { .container { max-width: 1080px; } }

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

@media (min-width: 768px) { .grid-row { margin-left: calc(-26px / 2); margin-right: calc(-26px / 2); } }

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

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

.column, .column-sm-12, .column-lg-3, .column-lg-4, .column-lg-8, .column-lg-9, .column-lg-12 { position: relative; width: 100%; padding-left: calc(26px / 4.3333333333); padding-right: calc(26px / 4.3333333333); }

@media (min-width: 768px) {  .column, .column-sm-12, .column-lg-3, .column-lg-4, .column-lg-8, .column-lg-9, .column-lg-12 { padding-left: calc(26px / 2); padding-right: calc(26px / 2); } }

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

@media (min-width: 576px) {
 .column-sm-12 { -ms-flex: calc(12 / 12); flex: 0 0 calc(100% / (12 / 12)); max-width: calc(100% / (12 / 12)); } }

@media (min-width: 992px) {
 .column-lg-3 { -ms-flex: calc(3 / 12); flex: 0 0 calc(100% / (12 / 3)); max-width: calc(100% / (12 / 3)); }
 .column-lg-4 { -ms-flex: calc(4 / 12); flex: 0 0 calc(100% / (12 / 4)); max-width: calc(100% / (12 / 4)); }
 .column-lg-8 { -ms-flex: calc(8 / 12); flex: 0 0 calc(100% / (12 / 8)); max-width: calc(100% / (12 / 8)); }
 .column-lg-9 { -ms-flex: calc(9 / 12); flex: 0 0 calc(100% / (12 / 9)); max-width: calc(100% / (12 / 9)); }
 .column-lg-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; }

/*--------------------------------------------------------------------------------*/
/*BASE BRAND COLORS*/
/*--------------------------------------------------------------------------------*/

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

.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; }

/*--------------------------------------------------------------------------------*/
/*RATIOBOX*/
/*--------------------------------------------------------------------------------*/
.ratiobox { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 100%; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }

.ratiobox.pdb-counter { padding-bottom: calc(56.25% + 38px) !important; }

.ratiobox iframe { position: absolute; width: 100%; height: 100%; }

.ratiobox--16-9 { padding-bottom: 56.25%; }

.ratiobox--9-16 { padding-bottom: 178%; }

/*--------------------------------------------------------------------------------*/
/*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; }

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; }

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

/*--------------------------------------------------------------------------------*/
/*BUTTONS & LABELS DEFAULT STYLING*/
/*--------------------------------------------------------------------------------*/
.btn, .box-default a.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; }

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

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

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

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

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

.label { cursor: inherit; }

/*--------------------------------------------------------------------------------*/

.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; }

@font-face { font-family: "detiknetwork-FF"; font-weight: normal; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/icons/detiknetwork.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../fonts/icons/detiknetwork.woff2") format("woff2"), url("../fonts/icons/detiknetwork.woff") format("woff"), url("../fonts/icons/detiknetwork.ttf") format("truetype"), url("../fonts/icons/detiknetwork.eot?#iefix") format("embedded-opentype"); font-display: swap; }

.icon { line-height: 0; display: inline-flex; vertical-align: middle; }

.btn .icon, .box-default a.btn .icon, .label .icon { margin: 0 4px; }

[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "detiknetwork-FF" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }

.icon-chevron-right:before { content: "\65"; }

.icon-chevron-left:before { content: "\67"; }

.icon-close:before { content: "\4f"; }

.icon-email:before { content: "\55"; }

.icon-download:before { content: "\23"; }

.icon-facebook:before { content: "\61"; }

.icon-instagram:before { content: "\e006"; }

.icon-linkedin:before { content: "\e007"; }

.icon-youtube:before { content: "\e008"; }

.copy_url { position: relative; }

.nav--column { flex-direction: column; width: 100%; }

.nav--column-2 { display: inherit !important; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

/*--------------------------------------------------------------------------------*/
/*LIST CONTENT GENERAL*/
/*--------------------------------------------------------------------------------*/

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

/*--------------------------------------------------------------------------------*/
/*ADS SLOT STYLE*/
/*--------------------------------------------------------------------------------*/
.box-ads { margin-top: 16px; margin-bottom: 24px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; }

/*--------------------------------------------------------------------------------*/
/*HELPER*/
/*--------------------------------------------------------------------------------*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------------------------*/
/*EXTENDS*/
/*--------------------------------------------------------------------------------*/
.font-family-base-2, .pagination { font-weight: 400; }

.font-family-base-2, label, .btn, .box-default a.btn, .pagination { font-family: Montserrat-FF, Arial, Tahoma, sans-serif; }

.display-flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

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

.text-center, .icon-item { text-align: center !important; }

.lds-ring div { border-radius: 50%; }

.lqd_block > 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-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); }

@media (min-width: 576px) { .modal-dialog { width: 500px; } }

.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-body { padding: 16px; overflow-y: scroll; opacity: 0; transition: opacity 0.75s ease-in-out; }

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

.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); } }

.container { width: 100%; }

@media (min-width: 576px) { .container { max-width: 1180px; } }

.content__bg { padding: 0 0 72px; }

@media (min-width: 576px) { .content__bg { padding: 40px 0 72px; } }

.box { padding: 24px 0; }

.box__step { min-height: 430px; width: 75%; margin: auto; }

.box__step-title { font-weight: 500; }

.box__eqvid { height: 680px; }

@media (min-width: 576px) { .box__eqvid { height: auto; min-height: 500px; max-height: 800px; } }

.box__eqvid--scroll { overflow-y: auto; padding: 0 8px; }

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

.box__eqvid--vertical { height: 680px; }

@media (min-width: 576px) { .box__eqvid--vertical { height: 680px; max-height: 800px; } }

.box__eqvid-info { width: 75%; margin: auto; }

.box__eqvid #chat-container { height: 680px; }

.box__logo-apps img { width: 150px; }

.box-duo-btn { justify-content: center; }

.box-duo-btn a, .box-duo-btn button { margin: 0 8px 15px; }

.alert { margin: 0 0 24px; padding: 15px 8px; border-radius: 5px; font-size: 14px; }

@media (min-width: 576px) { .alert { padding: 10px; } }

.alert--info { font-size: 12px; border: solid 1px #ededed; background: #f0f3f4; border: 2px solid #e0e5e8; color: #333333; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12); font-weight: 300; width: 100%; position: relative; padding-right: 24px; }

.alert--info a { font-weight: 500; }

.alert--text { font-size: 12px; color: #333333; background: #fdefcd; }

.text-detail__content { padding: 30px; }

.text-detail__content h3 { font-size: 18px; margin: 30px 0 20px; }

.text-detail__content ol li a, .text-detail__content ul li a { font-weight: 700; }

.text-detail__title { font-size: 18px; padding: 20px 0; border-bottom: 1px solid #B9B9B9; }

.text-detail__title h2 { font-size: 18px; }

/*S:ACCORDION*/
.accordion .title_acc { cursor: pointer; }

.accordion .title_acc:after { content: ''; background-image: url(../images/arrow-right.png); background-size: cover; width: 16px; height: 16px; position: absolute; top: 18px; right: 10px; display: inline-block; z-index: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

.accordion .title_acc.buka:after { transform: rotate(90deg); }

.accordion .box_acc { display: none; font-size: 14px; line-height: 150%; padding: 20px 20px 10px 25px; background: #eee; }

.accordion h3 { margin: 0; background: none; font-size: 16px; position: relative; z-index: 2; background: #fff; border: solid 1px #ededed; padding: 16px 25px 16px 12px; }

@media (min-width: 576px) { .accordion h3 { padding: 16px 20px 16px 12px; } }

/*E:ACCORDION*/
/*--------------------------------------------------------------------------------*/
/*BUTTON & LABEL COLOR VARIATIONS*/
/*--------------------------------------------------------------------------------*/
.btn--blue-base { background: #21409A; color: #FFFFFF; }

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

.btn--blue-base.btn--outline { border-color: #21409A; color: #21409A; }

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

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

.btn, .box-default a.btn { color: #fff; vertical-align: middle; }

.btn:hover, .box-default a.btn:hover { color: #fff; opacity: 0.8; }

.btn.disabled, .box-default a.disabled.btn { background: #e0e5e8; color: #879ba5; border: solid 1px #b1b1b1; }

.btn.disabled:hover { color: #879ba5; }

.btn i, .box-default a.btn i { font-size: 20px; }

button[disabled] { background: #e0e5e8; color: #879ba5; border: solid 1px #b1b1b1; }

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

.header { padding-top: 20px; padding-bottom: 8px; position: relative; }

@media (min-width: 576px) { .header { padding-top: 36px; } }

.header__logo { justify-content: center; margin-bottom: 0; }

@media (min-width: 576px) { .header__logo { margin-bottom: 40px; } }

.header__logo img { width: auto; max-width: 100%; }

.header__logo-event { width: auto; height: auto; }

.header__logo-event--solo { width: 100%; }

@media (min-width: 576px) { .header__logo-event--solo { width: 540px; } }

.header__logo-main { width: 250px; display: flex; align-items: center; margin-left: 20px; border-left: 1px solid #333; position: relative; }

.header__logo-main-title { margin-bottom: 5px; display: inline-block; }

.header__logo-main a { padding-left: 24px; }

.header__logo-main--cross { border: none; }

.header__logo-main--cross:before { content: 'x'; position: absolute; top: 40%; font-size: 30px; left: 0; color: #000000; }

.topbar { background: white; padding: 4px 0; position: fixed; top: 0; width: 100%; z-index: 10; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12); }

.topbar__wrap { display: flex; align-items: center; justify-content: space-between; height: 40px; }

.topbar__button { width: 50%; text-align: right; }

@media (min-width: 576px) { .topbar__button { width: auto; } }

.topbar__button img { width: 16px; position: relative; top: -1px; margin-right: 6px; }

.topbar__button .btn, .topbar__button .box-default a.btn, .box-default .topbar__button a.btn { font-size: 12px; padding: 6px 3px; }

@media (min-width: 576px) { .topbar__button .btn, .topbar__button .box-default a.btn, .box-default .topbar__button a.btn { font-size: 14px; padding: 8px 16px; } }

.topbar__button .btn:hover { color: #21409A; }

.topbar__button .btn i { font-size: 14px; }

.topbar__logo { width: 50%; }

@media (min-width: 576px) { .topbar__logo { width: auto; } }

.topbar__logo a { display: block; }

.topbar__logo .logo-kanal { display: block; height: 43px; }

.topbar__logo .logo-kanal.detikcom { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_detikcom.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 110px; }

@media (min-width: 576px) { .topbar__logo .logo-kanal.detikcom { width: 153px; } }

.topbar__logo .logo-kanal.haibunda { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_haibunda.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 110px; }

@media (min-width: 576px) { .topbar__logo .logo-kanal.haibunda { width: 140px; } }

.topbar__logo .logo-kanal.cnbc-h { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_cnbc-horizontal.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 110px; }

@media (min-width: 576px) { .topbar__logo .logo-kanal.cnbc-h { width: 140px; } }

.topbar__logo .logo-kanal.cnbc { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_cnbc-vertical.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 40px; }

.topbar__logo .logo-kanal.cnn { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_cnn.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 40px; height: 40px; }

.topbar__logo .logo-kanal.insertlive { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_insertlive.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 80px; }

.topbar__logo .logo-kanal.beautynesia { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_beautynesia.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 110px; }

@media (min-width: 576px) { .topbar__logo .logo-kanal.beautynesia { width: 145px; } }

.topbar__logo .logo-kanal.femaledaily { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_femaledaily.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 110px; }

@media (min-width: 576px) { .topbar__logo .logo-kanal.femaledaily { width: 140px; } }

.topbar__logo .logo-kanal.cxomedia { background-image: url("https://cdnstatic.detik.com/webinar/images/logo/logo_cxomedia.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 64px; }

.footer { font-weight: 500; }

.footer__inner { padding: 32px 0; }

.footer__logo { text-align: center; }

@media (min-width: 576px) { .footer__logo { float: left; text-align: left; } }

.footer__logo-inset { font-size: 12px; margin-top: 12px; }

.footer__logo-inset img { width: 90px; vertical-align: bottom; position: relative; bottom: 3px; margin-left: 4px; }

.footer__connect { margin-top: 32px; text-align: center; }

@media (min-width: 576px) { .footer__connect { margin-top: 12px; float: right; text-align: left; } }

.footer__connect-title { font-size: 12px; margin-bottom: 4px; }

.footer__copyright { border-top: 1px solid #ccc; margin-top: 20px; padding: 20px 0 0; font-size: 12px; }

.icon-item { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: 5px 2px; cursor: pointer; width: 30px; height: 30px; font-size: 18px; border-radius: 50%; }

.icon-item__fb, .icon-item__fb:hover { color: #FFFFFF; background: #3C5A99; }

.icon-item__tw, .icon-item__tw:hover { color: #FFFFFF; background: #000000; }

.icon-item__ig, .icon-item__ig:hover { color: #FFFFFF; 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 */ }

.icon-item__in, .icon-item__in:hover { color: #FFFFFF; background: #0077B5; }

.icon-item__yt, .icon-item__yt:hover { color: #FFFFFF; background: #FF0000; }

/*--------------------------------------------------------------------------------*/
/*FORMS*/
/*--------------------------------------------------------------------------------*/
.form label { font-weight: bold; }

.form .error { color: #C72026; font-size: 12px; font-weight: normal; }

.blocker { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 10; padding: 20px; box-sizing: border-box; background-color: #000; background-color: rgba(0, 0, 0, 0.75); text-align: center; }

.blocker:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em; }

.blocker.behind { background-color: transparent; }

.modal { display: none; vertical-align: middle; position: relative; z-index: 2; max-width: 500px; box-sizing: border-box; width: 90%; background: #fff; padding: 15px 30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -o-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; text-align: left; }

.modal a.close-modal { position: absolute; opacity: 1; visibility: visible; top: -12.5px; right: -12.5px; display: block; width: 30px; height: 30px; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg=="); }

@-webkit-keyframes sk-stretchdelay { 0%, 100%, 40% { -webkit-transform: scaleY(0.5); }
 20% { -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay { 0%, 100%, 40% { transform: scaleY(0.5);
   -webkit-transform: scaleY(0.5); }
 20% { transform: scaleY(1);
   -webkit-transform: scaleY(1); } }

.socialshare { font-family: "Montserrat", Montserrat-FF, Arial, Tahoma, sans-serif; padding-bottom: 1px; }

.socialshare.share-color { color: #fff; }

.socialshare.share-color a { color: #fff; }

.socialshare.share-color a svg { fill: #fff; }

.socialshare.share-color .socialshare__btn, .socialshare.share-color .socialshare__btn-mobile { color: #fff; }

.socialshare__mobile { font-weight: 600; font-size: 10px; display: flex; justify-content: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px 15px; background-color: #6a6a6a; width: 100%; margin: 0 auto 1px; }

@media (min-width: 576px) { .socialshare__mobile { display: none; } }

.socialshare__mobile a { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100%; }

.socialshare__mobile a * + * { margin-top: 8px; }

.socialshare__mobile > * + * { margin-left: 50px; }

.socialshare__desktop { display: none; font-weight: 600; font-size: 16px; align-items: center; margin-bottom: 28px; padding-top: 30px; }

@media (min-width: 576px) { .socialshare__desktop { display: flex; } }

.socialshare__desktop a + a { margin-left: 8px; }

.socialshare__desktop span { margin-right: 10px; }

.socialshare__desktop button { border: none; background: none; }

.socialshare__desktop .block-share { display: flex; align-items: center; background-color: #6a6a6a; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 8px 25px 5px; }

.socialshare__btn { background: #21409a; border-radius: 4px; padding: 15px 10px; display: inline-flex; align-items: center; color: #fff; margin-left: auto !important; }

.socialshare__btn svg { margin-left: 12px; }

.socialshare__btn:hover { color: #c5c5c5; }

.socialshare__btn-mobile { margin: 20px auto 10px; width: 100%; padding: 16px; align-items: center; justify-content: center; }

@media (min-width: 576px) { .socialshare__btn-mobile { display: none; } }

.socialshare__popup { text-align: center; }

.socialshare__popup__title { font-weight: 600; font-size: 16px; color: #333; }

.socialshare__popup__link { display: flex; justify-content: center; margin-top: 16px; }

.socialshare__popup__link > * + * { margin-left: 12px; }

.socialshare__popup__copy { font-style: normal; font-weight: 600; font-size: 16px; color: #333; margin-top: 12px; }

.socialshare__formgroup { background: #e6e6e6; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

.socialshare__formgroup #myclipboard { overflow: hidden; }

.socialshare__formgroup a { border: 1px solid #e6e6e6; background: #fff; padding: 6px 12px; border-radius: 4px; flex-shrink: 0; }

.copy_url-notif { display: inline-block; padding: 8px; margin: 0; position: absolute; z-index: 5; bottom: 0; left: 51%; 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; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.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: 105%; 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); }

.banner-320 { max-width: 320px; min-height: 0; display: inline-block; }

.banner-320 img { max-width: 100%; margin: 20px 0 42px; }

.ads-mr img { width: 100%; margin-bottom: 15px; }

.page-404 { min-height: 400px; }

.page-404 [class*="four-"] img { max-width: 100%; }

.move-area { padding: 60px 0; background: #fafafa; height: 100vh; }

@media (min-width: 576px) { .move-area { padding-bottom: 0; } }

.four-image { width: 100%; margin: 0 auto; text-align: center; position: relative; }

@media (min-width: 576px) { .four-image { width: 40%; } }

.four-image__left { display: inline-block; position: absolute; left: 0; top: 20px; width: 80px; }

@media (min-width: 576px) { .four-image__left { width: 100px; left: 20px; } }

.four-image__right { display: inline-block; right: 0; top: 20px; position: absolute; width: 110px; }

@media (min-width: 576px) { .four-image__right { width: 145px; } }

.four-image__name { display: inline-block; padding: 20px; z-index: 1; width: 150px; }

.four-doodle { text-align: center; padding-top: 30px; }

.four-wrap { display: inline-block; position: relative; width: 100%; padding: 0 20px; }

@media (min-width: 576px) { .four-wrap { width: 400px; } }

.four-eye { position: absolute; left: 40%; top: 46%; width: 35px; }

.four-eye:nth-child(2) { left: 58%; }

@media (min-width: 576px) { .four-eye:nth-child(2) { left: 60%; } }

@media (min-width: 576px) { .four-eye { width: 30px; left: 41%; } }

.four-text { font-size: 20px; color: #636363; }

html { scroll-behavior: smooth; scroll-padding-top: 60px; }

@media (min-width: 576px) { html { scroll-padding-top: 0; } }

body { font-family: Montserrat-FF, Arial, Tahoma, sans-serif !important; font-weight: 400; padding-top: 48px; }

.mobile-show { display: block; margin-bottom: -20px; }

@media (min-width: 576px) { .mobile-show { display: none; } }

.mobile-hide { display: none; }

@media (min-width: 576px) { .mobile-hide { display: block; } }

.hide { display: none !important; }

.bg__default-color { background-color: #eaeaea; }

.bg__default-image { background-position: top center; background-repeat: no-repeat; background-size: 100%; }

@media (min-width: 576px) { .bg__default-image { background-position: top center; background-repeat: no-repeat; } }

.btn-default-primary { background-color: #333; color: #fff; }

.btn-default-primary:hover { color: #fff; }

.btn-submit { background-color: #21409A !important; color: #fff; }

.btn-submit:hover { color: #fff; }

.header__back--default { background-color: #333; }

.header__back--default:hover { background-color: #1a1a1a; opacity: 0.7; }

.left-content { padding-right: 0 !important; }

@media (min-width: 576px) { .left-content { padding-right: 16px !important; } }

@media (min-width: 576px) { .left-content:has(div.full) { padding-right: 0 !important; } }

.full__content--default { background: #fff; }

.full__text { height: auto; padding: 20px; }

@media (min-width: 576px) { .full__text { height: 550px; padding: 40px; } }

.full__text h3 img { max-width: 300px; }

.full__embed { height: auto; padding: 20px; }

@media (min-width: 576px) { .full__embed { padding: 40px; } }

.full__embed-box { margin: 16px 0; }

@media (min-width: 576px) { .full__embed-box { margin: 32px 0; } }

.full__img img { max-width: 100%; }

.main img { max-width: 100%; }

.main__content--default { background: #fff; }

.main__content-text { padding: 20px; }

@media (min-width: 576px) { .main__content-text { padding: 40px; } }

.main__content-text h3 img { max-width: 300px; }

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

@media (min-width: 576px) { .main__content--med { height: 550px; } }

.poster { height: 100vh; text-align: center; }

@media (min-width: 576px) { .poster { padding: 0; } }

.poster img { height: 100%; }

@media (min-width: 576px) { .poster img { height: 100%; } }

.box-default { background-color: #fff; color: #333; border-radius: 5px; }

.box-default .box__step-title { color: #333; }

.box-default .box__step-content { color: #333; }

.box-default a { color: #333; }

.footer { background-color: #fafafa; }

.footer__border { height: 4px; background: linear-gradient(to right, #21409a 0%, #007cbd 100%); }

.footer__border-detikcom { background: linear-gradient(to right, #21409a 0%, #007cbd 100%); }

.footer__border-haibunda { background: #55C1D2; }

.footer__border-insertlive { background: #89201c; }

.footer__border-cnbc { background: #204D7F; }

.footer__border-cnbc-h { background: #204D7F; }

.footer__border-cnn { background: #c00; }

.footer__border-beautynesia { background: linear-gradient(to right, #f179ac 0%, #f2c0d9 100%); }

.footer__border-femaledaily { background: #D7244E; }

.footer__border-cxomedia { background: #333333; }

.modal-box { background: rgba(0, 0, 0, 0.5); }

.modal-content { background: #f0f0f0; color: #646464; }

.modal-content input { background: #fff; border: 1px solid #d0d0d0; color: #646464; padding: 7px 10px; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; margin: 10px auto 15px; text-align: center; }

.modal-body { overflow: auto; padding: 50px 30px 50px; font-weight: 400; }

.modal-body h6.fail { color: #C72026; }

.modal-body h6.success { color: #006536; }

.modal-body p { font-size: 14px; }

.modal-body .error { color: #C72026; }

.modal-body .link { color: #21409A; }

.close-modal { font-size: 24px; top: 15px; right: 15px; }

.close-modal:hover { color: #C72026; }

.sertifikat { min-height: 100vh; text-align: center; display: flex; justify-content: center; align-items: center; color: white; }

.info-btn { position: absolute; right: 6px; top: 6px; display: block; color: #333333; text-align: center; width: 16px; height: 16px; border-radius: 50%; background: #f9ba6f; border: 1px solid #f7931d; font-weight: 500; line-height: 14px; font-size: 15px; }

.info-btn:hover { cursor: pointer; }

.info-btn--min { line-height: 12px; font-size: 20px; }

.info-btn span { display: block; }

.ratiobox.pdb-counter { padding-bottom: calc(56.25% + 35px) !important; }

@media (min-width: 576px) { .ratiobox.pdb-counter { padding-bottom: calc(56.25% + 38px) !important; } }

.ratiobox--9-16 { background-color: #000; padding-bottom: 178%; }

@media (min-width: 576px) { .ratiobox--9-16 { /* padding-bottom: 56.25%; */ } }

.ratiobox--9-16.pdb-counter { padding-bottom: calc(178% + 35px) !important; }

@media (min-width: 576px) { .ratiobox--9-16.pdb-counter { /* padding-bottom: calc(178% + 38px) !important; */ } }

.img-unauth { padding: 20px 0; }

.img-unauth img { width: 90%; }

@media (min-width: 576px) { .img-unauth img { width: 628px; } }

.countdown { background: #000; color: #fff; padding: 10px 8px; font-size: 12px; display: flex; justify-content: space-between; }

@media (min-width: 576px) { .countdown { padding: 10px 20px; font-size: 16px; } }

form .btn, form .box-default a.btn, .box-default form a.btn, form .box-default a.btn, .box-default form a.btn { padding: 8px 16px; font-size: 14px; }

.nopadding { padding: 0; }

.nomargin { margin: 0; }

.modal-box { z-index: 23; }

.grid-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; }

.column { -webkit-box-flex: 1; }

.ratiobox--9-16 { padding-bottom: 178%; }

.btn, .box-default a.btn, .box-default a.btn, .label { display: -webkit-inline-box; display: -ms-inline-flexbox; -webkit-box-align: center; -ms-flex-align: center; }

.media { -webkit-box-flex: 1; -ms-flex: 1; }

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

.modal-box { -webkit-transition: opacity 0.3s ease-out 0s; }

.modal-dialog { display: -webkit-box; -webkit-box-align: center; -webkit-transition: -webkit-transform 0.3s ease-out 0s; transition: -webkit-transform 0.3s ease-out 0s; transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; -webkit-transform: translate(0, 50px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; }

.modal-content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-transition: all 0.3s ease-in-out; -webkit-transform: scale(0.75); -webkit-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15); }

.modal-content--loaded { -webkit-transform: scale(1); }

.modal-overlay { -webkit-transition: opacity 0.3s ease-out 0s; }

.lds-ring { -webkit-transform: translate3d(-50%, -50%, 0) scale(1); }

.lds-ring div { -webkit-box-sizing: border-box; -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; }

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

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

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

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

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

.box__eqvid--middle { display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; }

.alert--info { -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12); }

.box-duo-btn { -webkit-box-pack: center; -ms-flex-pack: center; }

.accordion .title_acc.buka:after { -webkit-transform: rotate(90deg); }

.header__logo { -webkit-box-pack: center; -ms-flex-pack: center; }

.header__logo-main { width: 250px; display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; }

.topbar { -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12); }

.topbar__wrap { display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: justify; -ms-flex-pack: justify; }

.icon { line-height: unset; }

.icon-item { line-height: 18px; display: -webkit-inline-box; display: -ms-inline-flexbox; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; }

.icon-item__tw { position: relative; top: 9px; }

.box.livechat { padding: 10px 8px; height: max-content; }

@media (min-width: 576px) { .countdown { padding: 10px 20px; font-size: 14px; }
  .column-sm-12 { -webkit-box-flex: 0; }
 .ratiobox--9-16.pdb-counter { /*        padding-bottom: calc(56.25% + 38px) !important;*/ } }

@media (max-width: 992px) { .ratiobox--9-16 { /* padding-bottom: calc(56.25% + 38px) !important; */ } }

.box:has(div.box__eqvid) { padding: 0; }

.box-default:has(div.box__eqvid) { background: none; padding: 0 0 10px 0; }

.box-default:has(div.box__eqvid) .box__eqvid { background: #fff; padding: 0; }

@media (max-width: 920px) { #rightcontent { margin-top: 20px; } }

@media (max-width: 500px) { #rightcontent { margin-top: 10px; } }