@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap); @import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap); @import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap); @import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap"); 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; } /*--------------------------------------------------------------------------------*/ /*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, h4, h5, h6 { font-weight: 700; margin-top: 0; margin-bottom: 8px; } h1, h2, h3, h4, h5, h6, .font-heading, .font-heading-light, .font-heading-semibold, .font-heading-bold { line-height: 1.3; } h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } 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-hero { font-size: 32px !important; } .font-xxl { font-size: 26px !important; } .font-xl { font-size: 23px !important; } .font-lg { font-size: 20px !important; } .font-md { font-size: 18px !important; } .font-sm { font-size: 16px !important; } .font-xs { font-size: 14px !important; } .font-xxs { font-size: 12px !important; } @font-face { font-family: "Helvetica-FF"; font-weight: 400; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/helvetica/Helvetica-Regular.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/helvetica/Helvetica-Regular.woff2") format("woff2"), url("../../../assets/fonts/helvetica/Helvetica-Regular.woff") format("woff"), url("../../../assets/fonts/helvetica/Helvetica-Regular.ttf") format("truetype"), url("../../../assets/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("../../../assets/fonts/helvetica/Helvetica-Bold.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/helvetica/Helvetica-Bold.woff2") format("woff2"), url("../../../assets/fonts/helvetica/Helvetica-Bold.woff") format("woff"), url("../../../assets/fonts/helvetica/Helvetica-Bold.ttf") format("truetype"), url("../../../assets/fonts/helvetica/Helvetica-Bold.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 99.25%; } @font-face { font-family: "Montserrat-FF"; font-weight: 400; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/montserrat/Montserrat-Regular.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/montserrat/Montserrat-Regular.woff2") format("woff2"), url("../../../assets/fonts/montserrat/Montserrat-Regular.woff") format("woff"), url("../../../assets/fonts/montserrat/Montserrat-Regular.ttf") format("truetype"), url("../../../assets/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("../../../assets/fonts/montserrat/Montserrat-SemiBold.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.woff") format("woff"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"), url("../../../assets/fonts/montserrat/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"); font-display: swap; size-adjust: 92.5%; } .detail__body-text .multi-card h2 { font-size: 22px; color: var(--kuler-1); } @media only screen and (max-width: 768px) { .detail__body-text .multi-card h2 { font-size: 18px; color: var(--kuler-1); } } /*--------------------------------------------------------------------------------*/ /*CONTAINER*/ /*--------------------------------------------------------------------------------*/ .container, .container-fluid { padding-left: calc(26px / 2); padding-right: calc(26px / 2); margin-right: auto; margin-left: auto; } .container { width: 1080px; } @media (min-width: 1024px) and (max-width: 1280px) { .container { width: 1008px; } } /*--------------------------------------------------------------------------------*/ /*GRID 12 COLUMNS*/ /*--------------------------------------------------------------------------------*/ .grid-row { display: flex; flex-wrap: wrap; 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-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 / 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%; } .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:has(th:nth-child(4)) { display: block; width: 100%; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .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; } /*--------------------------------------------------------------------------------*/ /*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.ratio_16_9 { padding-bottom: 56.25%; } .ratiobox.pdb-counter { padding-bottom: calc(56.25% + 38px) !important; } .ratiobox iframe { position: absolute; width: 100%; height: 100%; } .block-link:hover .media__image .ratiobox { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .ratiobox--16-9 { padding-bottom: 56.25%; } .ratiobox--4-3 { padding-bottom: 75%; } .ratiobox--3-4 { padding-bottom: 133%; } .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,"); 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 { 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; height: 100%; cursor: pointer; left: 0; right: 0; 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 { 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 { border-color: #cccccc; } .form-element[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 { display: inline-block; width: auto; vertical-align: middle; } .form-rounded .form-element { border-radius: 24px; } .form-gray .form-element { 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: 12px; } .form-element:disabled, .form-element[readonly], .form-gray .form-element:disabled, .form-gray .form-element[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; } @font-face { font-family: "detiknetwork-FF"; font-weight: normal; font-style: normal; src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/icons/detiknetwork.eot"); src: local("Helvetica-FF, Arial, Tahoma, sans-serif"), url("../../../assets/fonts/icons/detiknetwork.woff2") format("woff2"), url("../../../assets/fonts/icons/detiknetwork.woff") format("woff"), url("../../../assets/fonts/icons/detiknetwork.ttf") format("truetype"), url("../../../assets/fonts/icons/detiknetwork.eot?#iefix") format("embedded-opentype"); font-display: swap; } .icon { line-height: 0; display: inline-flex; vertical-align: middle; } .icon--xxl { font-size: 256px; } .icon--xl { font-size: 128px; } .icon--lg { font-size: 64px; } .icon--md { font-size: 32px; } .icon--sm { font-size: 24px; } .icon--xs { font-size: 16px; } .btn .icon, .label .icon { margin: 0 4px; } [data-icon]:before { font-family: "detiknetwork-FF" !important; content: attr(data-icon); 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; } [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-home:before { content: "\63"; } .icon-home-bg:before { content: "\64"; } .icon-chevron-right:before { content: "\65"; } .icon-chevron-right-bg:before { content: "\66"; } .icon-chevron-left:before { content: "\67"; } .icon-chevron-left-bg:before { content: "\68"; } .icon-arrow-right:before { content: "\69"; } .icon-arrow-left:before { content: "\6a"; } .icon-chevron-up:before { content: "\6b"; } .icon-chevron-up-bg:before { content: "\6c"; } .icon-chevron-down:before { content: "\6d"; } .icon-chevron-down-bg:before { content: "\6e"; } .icon-arrow-up:before { content: "\6f"; } .icon-arrow-down:before { content: "\70"; } .icon-search:before { content: "\71"; } .icon-search-bg:before { content: "\72"; } .icon-user:before { content: "\73"; } .icon-user-bg:before { content: "\74"; } .icon-live-tv:before { content: "\75"; } .icon-live-tv-bg:before { content: "\76"; } .icon-tv:before { content: "\77"; } .icon-tv-bg:before { content: "\78"; } .icon-menu:before { content: "\79"; } .icon-menu-bg:before { content: "\7a"; } .icon-lock:before { content: "\41"; } .icon-lock-bg:before { content: "\42"; } .icon-open-lock:before { content: "\43"; } .icon-open-lock-bg:before { content: "\44"; } .icon-doc:before { content: "\45"; } .icon-doc-bg:before { content: "\46"; } .icon-calendar:before { content: "\47"; } .icon-calendar-bg:before { content: "\48"; } .icon-check:before { content: "\49"; } .icon-check-bg:before { content: "\4a"; } .icon-trash:before { content: "\4b"; } .icon-trash-bg:before { content: "\4c"; } .icon-pencil:before { content: "\4d"; } .icon-pencil-bg:before { content: "\4e"; } .icon-close:before { content: "\4f"; } .icon-close-bg:before { content: "\50"; } .icon-card:before { content: "\51"; } .icon-card-bg:before { content: "\52"; } .icon-network:before { content: "\53"; } .icon-network-bg:before { content: "\54"; } .icon-email:before { content: "\55"; } .icon-email-bg:before { content: "\56"; } .icon-info:before { content: "\57"; } .icon-info-bg:before { content: "\58"; } .icon-warning:before { content: "\59"; } .icon-warning-bg:before { content: "\5a"; } .icon-video:before { content: "\30"; } .icon-video-bg:before { content: "\31"; } .icon-image:before { content: "\32"; } .icon-image-bg:before { content: "\33"; } .icon-file-text:before { content: "\34"; } .icon-file-text-bg:before { content: "\35"; } .icon-graphic:before { content: "\36"; } .icon-graphic-bg:before { content: "\37"; } .icon-folder:before { content: "\38"; } .icon-folder-bg:before { content: "\39"; } .icon-notification:before { content: "\21"; } .icon-notification-bg:before { content: "\22"; } .icon-download:before { content: "\23"; } .icon-download-bg:before { content: "\24"; } .icon-upload:before { content: "\25"; } .icon-upload-bg:before { content: "\26"; } .icon-filter:before { content: "\27"; } .icon-filter-bg:before { content: "\28"; } .icon-sent-mail:before { content: "\29"; } .icon-sent-mail-bg:before { content: "\2a"; } .icon-play:before { content: "\2b"; } .icon-play-bg:before { content: "\2c"; } .icon-comment:before { content: "\2d"; } .icon-comment-bg:before { content: "\2e"; } .icon-plus:before { content: "\2f"; } .icon-plus-bg:before { content: "\3a"; } .icon-favorite:before { content: "\3b"; } .icon-favorite-bg:before { content: "\3c"; } .icon-share:before { content: "\3d"; } .icon-share-bg:before { content: "\3e"; } .icon-setting:before { content: "\3f"; } .icon-setting-bg:before { content: "\40"; } .icon-crown:before { content: "\5b"; } .icon-crown-bg:before { content: "\5d"; } .icon-zoom:before { content: "\5e"; } .icon-zoom-bg:before { content: "\5f"; } .icon-quote-right:before { content: "\60"; } .icon-quote-left:before { content: "\7b"; } .icon-camera:before { content: "\7c"; } .icon-camera-bg:before { content: "\7d"; } .icon-link:before { content: "\7e"; } .icon-link-bg:before { content: "\5c"; } .icon-love:before { content: "\e000"; } .icon-love-bg:before { content: "\e001"; } .icon-sign-out:before { content: "\e002"; } .icon-sign-out-bg:before { content: "\e003"; } .icon-sign-in:before { content: "\e004"; } .icon-sign-in-bg:before { content: "\e005"; } .icon-facebook:before { content: "\61"; } .icon-twitter:before { content: ""; background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.425986 0.877441L6.99437 9.65591L0.390625 16.7901H1.8758L7.65739 10.5399L12.3339 16.7901H17.3906L10.4598 7.51655L16.6038 0.877441H15.1187L9.79676 6.63251L5.49151 0.877441H0.434827H0.425986ZM2.60955 1.97364H4.93457L15.1982 15.6939H12.8732L2.60955 1.97364Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 18px; height: 16px; } .page__follow .icon-twitter:before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.425986 0.877441L6.99437 9.65591L0.390625 16.7901H1.8758L7.65739 10.5399L12.3339 16.7901H17.3906L10.4598 7.51655L16.6038 0.877441H15.1187L9.79676 6.63251L5.49151 0.877441H0.434827H0.425986ZM2.60955 1.97364H4.93457L15.1982 15.6939H12.8732L2.60955 1.97364Z' fill='%23666666'/%3E%3C/svg%3E%0A"); } .icon-instagram:before { content: "\e006"; } .icon-linkedin:before { content: "\e007"; } .icon-youtube:before { content: "\e008"; } .icon-refresh:before { content: "\e009"; } .icon-eye:before { content: "\e00a"; } .icon-back-in-time:before { content: "\e00b"; } .icon-whatsapp:before { content: "\e00c"; } .icon-code:before { content: "\e00d"; } .icon-telegram:before { content: "\e00e"; } .icon-tiktok:before { content: ""; width: 16px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.96337 19.1587C-1.43553 15.3416 1.4095 6.84288 8.17224 7.91213V8.69927C2.46079 8.43365 -0.053318 15.2464 2.96337 19.1587ZM15.2989 4.41544C15.9938 4.97071 16.9521 5.3803 18.2731 5.45848V6.22958C16.8113 5.9596 15.8848 5.23316 15.2989 4.41544ZM13.4649 0.355957C13.4639 0.640509 13.5008 0.946185 13.5474 1.2254H10.8514V14.6486C10.8514 15.2675 10.7878 15.8184 10.6611 16.3018C9.56319 18.7217 6.45472 18.4056 5.59573 16.7449C6.87451 17.5456 8.97733 17.333 9.84046 15.4324C9.96623 14.9499 10.0298 14.3978 10.0298 13.7792V0.355957H13.4651H13.4649Z' fill='%2300F7EF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.287 1.22559V1.24282C14.288 1.5536 14.379 6.04768 19.0953 6.3281C19.0953 10.509 19.0974 6.32811 19.0974 9.80052C18.7432 9.82164 15.9931 9.62279 14.2819 8.09636L14.2766 14.8562C14.3188 17.9171 12.6149 20.9189 9.42486 21.5237C8.53114 21.693 7.72628 21.7121 6.37539 21.4169C-1.40683 19.089 1.17915 7.54644 8.99317 8.78176C8.99317 12.5081 8.99536 8.78079 8.99536 12.5081C5.76719 12.0332 4.68725 14.7188 5.54528 16.6414C6.3261 18.392 9.54018 18.7717 10.6614 16.302C10.7884 15.8186 10.8517 15.2675 10.8517 14.6488V1.22559H14.287Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.17395 8.69921C8.44029 8.71087 8.7144 8.73709 8.99483 8.78152C8.99483 12.5079 8.99701 8.78055 8.99701 12.5079C5.76885 12.033 4.68891 14.7185 5.54694 16.6412C5.56272 16.6761 5.57971 16.7111 5.59768 16.7449C5.21383 16.5047 4.905 16.1748 4.72533 15.7717C3.86852 13.8488 4.94724 11.1636 8.17541 11.6382C8.17541 8.22285 8.17443 11.065 8.17443 8.69897L8.17395 8.69921ZM18.2748 6.22977C18.5317 6.27712 18.8058 6.31087 19.0967 6.3281C19.0967 10.509 19.0989 6.3281 19.0989 9.80052C18.7446 9.82164 15.9945 9.62279 14.2833 8.09636L14.278 14.8562C14.3202 17.9171 12.6163 20.9189 9.42627 21.5237C8.53255 21.693 7.7277 21.7121 6.3768 21.4169C4.85595 20.9622 3.7328 20.1541 2.96484 19.1587C3.64903 19.7531 4.50779 20.2343 5.55616 20.5484C6.9056 20.8425 7.7107 20.8235 8.60442 20.6541C11.7945 20.049 13.4984 17.0474 13.4571 13.9875L13.4615 7.22668C15.1727 8.75311 17.9228 8.95293 18.2782 8.93059C18.2782 5.70583 18.2751 9.08088 18.2751 6.22953L18.2748 6.22977ZM14.2884 1.22559V1.24282C14.2884 1.42565 14.3212 3.04823 15.3006 4.41563C14.1202 3.47117 13.6994 2.10692 13.5491 1.22559H14.2884Z' fill='%23FF004F'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; } .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; } .sticky-share .copy_url .notif:before { top: -7px; border-bottom: 8px solid #FF0000; border-left: 7px solid transparent; border-top: none; border-right: 7px solid transparent; } .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); } .sticky-share .copy_url .notif.url_copied { bottom: -160%; } .livereport_notif { text-align: center; padding-top: 16px; z-index: 3; } .livereport_notif a:hover i { transform: rotate(360deg); transition: 2s; } .mgt-36 { margin-top: 36px !important; } .custom-width-popup { width: 128px; height: 127px !important; border-radius: 20px; } .position-live-custom { top: -102px !important; left: 10px !important; } .custom-close { width: 20px; height: 20px; right: -3px; top: -5px; border-radius: 100%; background: rgba(0, 0, 0, 0.7); } .custom-icon { width: 14px; height: 14px; font-size: 10px; padding-left: 2px; padding-top: 2px; } .left-10 { left: 10px !important; } .margin-none { margin: 0px !important; } .width-128 { width: 128px !important; } .close-edit { background: none !important; right: 8px !important; top: 10px !important; } @media (min-width: 1024px) and (max-width: 1280px) { .navbar-first .nav__item a, .navbar-second .nav__item a { padding: 12px 7px; } } .nav__item--new a:after, .nav__item--live a:after { content: ""; width: 5px; height: 5px; background: #FF0000; position: absolute; top: 12px; right: 4px; overflow: hidden; } .nav--column .nav__item--new a:after, .nav__item--new .nav--column a:after, .nav--column .nav__item--live a:after, .nav__item--live .nav--column a:after { top: 4px; } .navbar-second .nav, .navbar-first .nav { margin-left: 8px; } .nav { position: relative; list-style: none; margin: 0; padding: 0; font-size: 14px; } .navbar-second .dropdown-menu .nav { margin-left: 0; } .nav a { display: block; } .nav__item { position: relative; padding: 0; } .nav__item a { padding: 12px 10px; } .navbar-first .nav__item a { color: #FFFFFF; } .navbar-first .nav__item a:hover { color: #fcc43f; } .is-sticky .navbar-first .nav__item a { color: inherit; } .is-sticky .navbar-first .nav__item a:hover { color: var(--kuler-1); } .navbar-first .dropdown-menu .nav__item a { color: #000000; } .navbar-first .dropdown-menu .nav__item a:hover { color: var(--kuler-1); } .nav--column .nav__item a { padding: 4px 0; } .footer-nav .nav__item a { font-size: 12px; color: #666666; } .static-nav .nav__item a { padding: 12px 0; font-size: 14px; } .static-nav .nav__item a:hover { color: var(--kuler-3); } .sitemap-nav .nav__item a { padding: 4px 0; font-size: 14px; color: #333333; } .nav__item--active a { color: var(--kuler-1); } .navbar-first .nav__item--active a { color: #fcc43f; } .is-sticky .navbar-first .nav__item--active a { color: var(--kuler-1); } .static-nav .nav__item--active a { color: var(--kuler-3); } .nav__item--new { position: relative; } .nav__item--new a { color: #75b72e; } .nav__item--live { position: relative; } .nav__item--live a { color: var(--kuler-1); } .nav--column .nav__item { display: inline-block; width: 100%; vertical-align: top; } .static-nav .nav__item { border-bottom: 1px solid #e6e6e6; } .static-nav .nav__item a { justify-content: space-between; align-items: center; } .nav--center { justify-content: center; } .nav--right { justify-content: flex-end; } .nav--column { flex-direction: column; width: 100%; } .nav--column-2 { display: inherit !important; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .nav--column-3 { display: inherit !important; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .nav--column-4 { display: inherit !important; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .navbar { position: relative; } .navbar-sticky { z-index: 5; position: sticky; position: -webkit-sticky; top: 46px; } .navbar-sticky.is-sticky { box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); } .navbar-sticky-top { position: absolute; margin-top: -46px; } .navbar-border { display: none; height: 2px; } .is-sticky .navbar-border { display: block; } .navbar-logo { line-height: inherit; white-space: nowrap; padding: 8px 12px; width: 42px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .navbar-logo-kanal { display: none; } .is-sticky .navbar-logo { display: none; } .is-sticky .navbar-logo-kanal { width: 110px; padding: 8px 12px 8px 0; margin-right: 16px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .is-sticky .navbar-logo-kanal img { width: 100%; } .navbar-logo img { width: 100%; } .navbar-first { border-top-right-radius: 4px; border-top-left-radius: 4px; } .navbar-first .dropdown-menu--right .dropdown-menu__content:after { right: 30px; } .is-sticky .navbar-first { margin-left: -23px; margin-right: -100px; background: transparent; } @media (min-width: 1024px) and (max-width: 1280px) { .is-sticky .navbar-first { margin-left: -9px; margin-right: -110px; } } .navbar-second .dropdown-menu__content:after { display: none; } .navbar-first .dropdown-menu__content, .navbar-second .dropdown-menu__content { margin-top: -4px; width: 200px; background: #f7f7f7; } .navbar-first .dropdown-menu__content:after, .navbar-second .dropdown-menu__content:after { border-color: #f7f7f7; } .navbar-second, .navbar--bg { background: #f0f0f0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } /*--------------------------------------------------------------------------------*/ /*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; } .headline .media__text { padding-left: 16px; padding-right: 16px; } .headline--right .media__text { padding: 16px; height: 100%; } .headline--video .media__text { padding: 0 20px 20px; } .headline--video .media__text .media__link { position: relative; } .headline--video .media__text:hover a { color: #fcc43f; } .headline--breakingnews .media__text { font-size: 14px; padding: 12px 16px; } .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: 2; 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: 2; 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; } .headline .media--text-overlay .media__text { padding-left: 16px; padding-right: 16px; } .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; } .berita-utama .media__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* Limits the text to 2 lines */ overflow: hidden; text-overflow: ellipsis; } /*--------------------------------------------------------------------------------*/ /*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; } .box-ads__name { position: absolute; top: calc(50% - 40px); padding: 8px 12px; z-index: -1; font-size: 14px; color: #cccccc; } .ads-slot--smb .box-ads__name { top: calc(50% - 25px); } .box-ads--container { margin-left: calc(-26px / 1.444444444444); margin-right: calc(-26px / 1.444444444444); } .ads-slot { position: relative; z-index: 1; margin: 0 auto; background: #f7f7f7; } .ads-slot > * { flex: 1 100%; } .ads-slot img { max-width: 100%; height: auto; } .ads-slot:before { position: absolute; content: "Advertisement"; left: 50%; top: 50%; height: 50px; z-index: -1; letter-spacing: 2px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect opacity='0.2' width='32' height='32' fill='url(%23pattern0)'/%3E%3Cdefs%3E%3Cpattern id='pattern0' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0' transform='scale(0.015625)'/%3E%3C/pattern%3E%3Cimage id='image0' width='64' height='64' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZ5QTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlvQmPgAAAIp0Uk5TABVTfqXL3+z5M43S/v8Nc9UQgO4BYeoexDvpYgOOsVgqODcR/cx0FgJHieYxBV/oZBPyRPs8dcCVwb2MKD2SfJ6BPyYayKvUQSWyhGebh7yflq9/rZDJNg4H4NNRXqb8tAnWoGzO+PbFXUsMHdgf5DC/w1BPLecc3MY6YwSK6yPtD3LQi8qnfVIYuEyKDwAAAuxJREFUeJylV+d/0zAQVbaTSHH2bimQQtgUwggtAVoopexSaEvZo+y9wgplw39NbDmOrHF2ftzHl/deLOl0ukNIET5/IBgKRzQtEg4FA36fiiePaCyOiSNwPBb1qk7oSSKNpJ7wIE+lM3K5EZl0ykWezeXVciPyuSykLxRhuRHFglpfKrvrCSmXVPqK5kVPiFaRyqtD3uRGDFUl+mHvekKGRYcB/t/8BmH9EHvNiBlrWYzbhxK4f+soaT2LaY6zKMDnJzMgZSYfsi75IzUgxX5O5mC9woDkevqUS/6rDPK9m5V20asMSJriCeD+wgYZWh90N73SgOgmrqg/XgySBhxVC7WaiwEx6mRMLh7dEN2Yrfs2bd4CGcS6cFwmL261k2Tb9h1qg3i3/mMR1nY6Cl9qTGmAfcgvort2I2lIDIgfBQSssUeulxoEUFDA9ir0UoMgGuWhfb31R/c3D4xPuBiEUJiHDlJ2tWXubuMQbBBGEf4DLPbhHnAENIggvpZZtW7SBhpTkIEmGByl5GN9ZBo24JZwnHJnWOwEuARuE2cp9ySLnQI3MeQETlPuNIvFwGPkEukM5Z5lsXNgInGpfJ5y51isBRhc4C/TPOVeZDEdMPDz1/kS5TpsF9QG3evMFZTGoslduix4Sg2WkVDSrlDy1T4yAxgYB8QV1WuUXLdTcR66C2bz6Szr1628G7McbtwEDG6ZOPew3Lbo1Tt3V+7df4AQYEDPh3va8ENbwfWU4tP2iP7APa6Rx0geqsdVeN6fPPVmULYbZ77BePbcqVySG9gNhtjiNMaZxn7ihfxleslskdhk5Vsl8/fUq9kaeV0w442D8fYd+5GyNm+l3Xzfrom49esH5zLBRlMWH/ktHrDVbfH6AZvtuU/iKQ/Q7uPPdVGP/nvgQF5Hns6kSu9p6MLNL2q9MfZ1YHmnAo59CB488Wrgq4vcCNXoi5e/LXqQm8EP3xjj7z8W3HVs9Mb/2mr756/ff/6qeP8AIJG7VASH5AAAAAAASUVORK5CYII='/%3E%3C/defs%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center 4px; background-size: 24px; padding: 3px 0; -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); color: #999999; font-size: 12px; align-items: flex-end; } .ads-slot__name { display: none; position: absolute; top: calc(50% - 40px); padding: 8px 12px; z-index: -1; font-size: 14px; color: #cccccc; } .smartbanner_new { height: 50px; padding: 0 8px; position: relative; font-size: 11px; align-items: center; text-align: left; z-index: 27; } .smartbanner_new .app_logo { height: 36px; margin-right: 10px; } .smartbanner_new strong { display: block; font-size: 12px; } .smartbanner_new .get_app { margin-right: 20px; } .smartbanner_new .sb_close { position: absolute; text-decoration: none; height: 14px; width: 14px; font-size: 10px; top: 5px; right: 5px; border: 1px solid #21409A; } .smartbanner_new > div > span { height: 31px; } /*--------------------------------------------------------------------------------*/ /*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; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 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; } .px-4 { padding-left: 4px !important; padding-right: 4px !important; } .py-4 { padding-top: 4px !important; padding-bottom: 4px !important; } .mx-4 { margin-left: 4px !important; margin-right: 4px !important; } .my-4 { margin-top: 4px !important; margin-bottom: 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; } .px-8 { padding-left: 8px !important; padding-right: 8px !important; } .py-8 { padding-top: 8px !important; padding-bottom: 8px !important; } .mx-8 { margin-left: 8px !important; margin-right: 8px !important; } .my-8 { margin-top: 8px !important; margin-bottom: 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; } .px-12 { padding-left: 12px !important; padding-right: 12px !important; } .py-12 { padding-top: 12px !important; padding-bottom: 12px !important; } .mx-12 { margin-left: 12px !important; margin-right: 12px !important; } .my-12 { margin-top: 12px !important; margin-bottom: 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; } .px-16 { padding-left: 16px !important; padding-right: 16px !important; } .py-16 { padding-top: 16px !important; padding-bottom: 16px !important; } .mx-16 { margin-left: 16px !important; margin-right: 16px !important; } .my-16 { margin-top: 16px !important; margin-bottom: 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; } .px-24 { padding-left: 24px !important; padding-right: 24px !important; } .py-24 { padding-top: 24px !important; padding-bottom: 24px !important; } .mx-24 { margin-left: 24px !important; margin-right: 24px !important; } .my-24 { margin-top: 24px !important; margin-bottom: 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; } .px-48 { padding-left: 48px !important; padding-right: 48px !important; } .py-48 { padding-top: 48px !important; padding-bottom: 48px !important; } .mx-48 { margin-left: 48px !important; margin-right: 48px !important; } .my-48 { margin-top: 48px !important; margin-bottom: 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; } .px-96 { padding-left: 96px !important; padding-right: 96px !important; } .py-96 { padding-top: 96px !important; padding-bottom: 96px !important; } .mx-96 { margin-left: 96px !important; margin-right: 96px !important; } .my-96 { margin-top: 96px !important; margin-bottom: 96px !important; } .gap-0 { gap: 0 !important; } .gap-4 { gap: 4px !important; } .gap-8 { gap: 8px !important; } .gap-12 { gap: 12px !important; } .gap-16 { gap: 16px !important; } .gap-24 { gap: 24px !important; } .gap-48 { gap: 48px !important; } .gap-96 { gap: 96px !important; } .mx-auto { margin-left: auto; margin-right: auto; } .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; } .overflow-hidden { overflow: hidden !important; } .w-100 { width: 100% !important; } .align-self-start { align-self: flex-start !important; } .justify-content-start { justify-content: 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; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } /*--------------------------------------------------------------------------------*/ /*EXTENDS*/ /*--------------------------------------------------------------------------------*/ .font-family-base, .font-family-base-2, .font-heading, .font-paragraph, .form-element, .pagination, .footer-nav .nav__item, .list-content__title, .media__title, .media__subtitle, .box .media__subtitle, .indeks-menu__box { font-weight: 400; } .font-base-light, .font-heading-light, .sitemap-nav .nav__item, .media__date, .ads-slot:before, .smartbanner_new, .box__title--sponsored-box, .static-body__box p { font-weight: 300; } .font-base-semibold, .font-heading-semibold, .box-utility-base a, .box-utility-info a, .box-utility-success a, .box-utility-warning a, .box-utility-error a, .notification-overlay, .nav, .text-list--title, .smartbanner_new strong, .smartbanner_new .get_app, .float-vid__content-title, .box__title, .section__title, .page__title, .headline .media__title, .terpopuler .media__title, .detail-body__newstag .media__title, .footer-nav--title, .sitemap-nav__title, .indeks-menu__title { font-weight: 600; } .font-base-bold, .font-heading-bold, .modal-body__title, .cb-pilihan-redaksi .box__title, .cb-today-recap__title, .cb-today-recap__date { font-weight: 700; } .font-family-base, .font-paragraph, .navbar-logo { font-family: Helvetica-FF, Arial, Tahoma, sans-serif; } .font-family-base-2, .font-heading, .font-heading-light, .font-heading-semibold, .font-heading-bold, label, .form-file:before, .btn, .pagination, .notification-overlay, .nav, .list-content__title, .headline--breakingnews .media__text, .media__title, .media__subtitle, .media__author, .text-list, .ads-slot:before, .smartbanner_new, .float-vid__content-header, .headline--breakingnews-title.media__label, .float-vid__content-header-20d, .float-vid__content-title, .float-vid__content-sponsor, .modal-body__title, .box__title, .section__title, .box__header a, .box__title--sponsored-box, .box-background, .section__header a, .page__title, .page__breadcrumb, .page__follow, .page__indeks-info, .media__label--live, .footer-title, .footer-nav--title, .headline-terkait, .headline-today-recap, .sitemap-nav, .indeks-menu, .ebook__top, .ebook__bottom, .cb-hoegeng__desc, .cb-adhyaksa-2025__desc, .cb-detikpilkada__desc, .cb-d-awards, .cb-today-recap, .cb-pov__desc, .cb-komdigi__desc, .cb-kmp { font-family: Montserrat-FF, Arial, Tahoma, sans-serif; } .media--list, .ads-slot:before, .display-flex, .ads-slot, .smartbanner_new .sb_close, .align-middle, .breakingnews-float--detikpagi .flowed .float-vid__close, .slider-snap__item--index .media__text, .slider-snap__item--index .media__text .icon, .slider-snap__btn, .float-vid__content-sponsor, .header__leaderboard { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .form-inline, .nav, .static-nav .nav__item a, .nav--center, .nav--right, .navbar-first, .list-content__item, .display-flex-wrap, .breakingnews-float--small .flowed .float-vid__content-title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; } .notification-overlay, .smartbanner_new, .flex-between, .box__header, .box__title--sponsored, .section__header, .page__header, .page__breadcrumb, .page__follow, .page__indeks-info, .header__logo, .indeks-menu, .indeks-menu__box { justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; align-items: center; } .ads-slot, .text-center, .detikpagi-live, .cb-mostpop .text-list__data, .cb-commented .text-list__data, .icon-item { text-align: center !important; } .text-right { text-align: right !important; } .text-style-italic { font-style: italic !important; } .ads-slot, .smartbanner_new .sb_close, .align-middle, .breakingnews-float--detikpagi .flowed .float-vid__close, .slider-snap__item--index .media__text, .slider-snap__item--index .media__text .icon, .slider-snap__btn { 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, .notification-overlay, .copy_url .notif, .media__label, .media__icon, .media--image-radius .media__image, .dropdown-menu__content, .slick-slide-thumbnail .slick-slide, .box-background, .cb-d-awards__desc { border-radius: 4px; } .form-check--radio label:before, .form-check--radio label:after, .nav__item--new a:after, .nav__item--live a:after, .media__image--circle, .media__author-image-avatar, .media--image-circle .media__image, .smartbanner_new .sb_close, .circle, .breakingnews-float--detikpagi .flowed .float-vid__close, .detikpagi-live span:before, .lds-ring div, .slick-dots li button, .media__label--live:before, .cb-pilihan-redaksi .slick-arrow, .cb-hoegeng .slick-arrow, .cb-adhyaksa-2025 .slick-arrow, .cb-detikpilkada .slick-arrow, .cb-d-awards .slick-arrow, .cb-pov .slick-arrow, .cb-pesanwarga-slider .slick-arrow, .cb-korlantas .slick-arrow, .slider-snap__item--index .media__text .icon, .slider-snap__btn, .cb-kmp .slick-arrow { border-radius: 50%; } .color-black, .footer-nav .nav__item a:hover, .footer-nav--title, .btn--d-awards, .cb-kmp__desc { color: #000000; } .color-black-light-4 { color: #cccccc; } .color-white, .cb-d-awards .media__title a, .headline-today-recap, .cb-pilihan-redaksi .box__title, .cb-pilihan-redaksi .slick-arrow, .cb-hoegeng, .cb-adhyaksa-2025, .cb-detikpilkada, .cb-d-awards__desc, .cb-pov, .cb-korlantas, .slider-snap__item--index .media__text .icon, .slider-snap__btn, .cb-komdigi { color: #FFFFFF; } .color-gray { color: #6D8591; } .color-gray-light-1 { color: #879ba5; } .color-blue-base, .color-blue, .smartbanner_new .sb_close, .cb-d-awards .slick-arrow, .cb-today-recap__title, .cb-kmp .slick-arrow { 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, .navbar-sticky.is-sticky, .smartbanner_new, .cb-pilkada .box__header, .cb-hoegeng .slick-arrow, .cb-adhyaksa-2025 .slick-arrow, .cb-detikpilkada .slick-arrow, .cb-d-awards .slick-arrow, .cb-pov .slick-arrow, .cb-pesanwarga-slider .slick-arrow, .cb-korlantas .slick-arrow, .slider-snap__item--index .media__image, .cb-kmp .slick-arrow { 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 { 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); } .float-vid__content-header, .headline--breakingnews-title.media__label { color: #FFFFFF; background: #FF0000; font-size: 18px; border-radius: 4px; text-transform: uppercase; max-width: 350px; padding: 8px 12px 4px 24px; box-shadow: 4px 8px 18px 0px rgba(0, 0, 0, 0.5); transform: skewX(-15deg); left: -8px; top: -3px; } .breakingnews-float { height: auto; bottom: 0; position: fixed; z-index: 10; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .breakingnews-float--left { left: 0; } .breakingnews-float--right { right: 0; } .breakingnews-float--detikpagi .media__image { width: 250px; z-index: 3; border-radius: 8px; } .float-vid__box { position: relative; width: 100%; min-height: 100%; } .flowed .float-vid__box { position: fixed; bottom: 0; width: 0; z-index: 5; } .breakingnews-float--right .flowed .float-vid__box { right: 0; } .breakingnews-float--left .flowed .float-vid__box { left: 0; } .float-vid__content { position: static; width: 100%; height: 100%; color: #FFFFFF; } .flowed .float-vid__content { position: absolute; overflow: hidden; min-height: 300px; bottom: 70px; width: 400px; height: auto; -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; } .breakingnews-float--right .flowed .float-vid__content { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .breakingnews-float--left .flowed .float-vid__content { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .breakingnews-float--small .flowed .float-vid__content { min-height: 80px; } .breakingnews-float--20d .flowed .float-vid__content { min-height: 87px; bottom: 70px; background: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); } .breakingnews-float--detikpagi .flowed .float-vid__content { min-height: 140px; width: 188px; height: 148px; background: url("../images/notif-pagi-sore/detikpagi-pop-video-bg-desktop.webp") no-repeat right top; background-size: contain; overflow: visible; border-radius: 17px; left: 10px !important; } .breakingnews-float--detikpagi-sore .flowed .float-vid__content { background: url("../images/notif-pagi-sore/detiksore-pop-video-bg-desktop.webp") no-repeat right top; background-size: contain; } .breakingnews-float--detikpagi-small .flowed .float-vid__content { background: url("../images/notif-pagi-sore/detikpagi-pop-novideo-bg.webp") no-repeat right top; background-size: contain; } .breakingnews-float--detiksore-small .flowed .float-vid__content { background: url("../images/notif-pagi-sore/detiksore-pop-novideo-bg.webp") no-repeat right top; background-size: contain; } .breakingnews-float--detikpagi-pagi-live-liveshop .flowed .float-vid__content { background: url("../images/detikpagi-live-liveshoping.svg") no-repeat right top !important; background-size: cover; min-height: 140px; width: 240px; height: 240px; overflow: visible; border-radius: 37px; left: 0 !important; } .breakingnews-float--detikpagi-pagi-live-liveshop .flowed .float-vid__content .detikpagi-live { display: block; width: calc(100% - 16px); margin-top: 8px; } .breakingnews-float--detikpagi-pagi-live-liveshop .flowed .float-vid__content .detikpagi-live span:before { top: 8px; left: 5px; } .breakingnews-float--detikpagi-pagi-live-liveshop .flowed .float-vid__content .custom-position { position: absolute !important; top: 20px !important; left: 20px !important; } .breakingnews-float--detikpagi-pagi-live-liveshop .flowed .float-vid__content .custom-position .detikpagi-live span { font-size: 14px !important; } .breakingnews-float--rekomendit-liveshop .flowed .float-vid__content { background: url("../images/bg-rekomendit-liveshop.svg") no-repeat right top !important; background-size: cover; min-height: 140px; width: 240px; height: 240px; overflow: visible; border-radius: 37px; left: 0 !important; } .breakingnews-float--rekomendit-liveshop .flowed .float-vid__content .detikpagi-live { display: block; width: calc(100% - 16px); margin-top: 8px; } .breakingnews-float--rekomendit-liveshop .flowed .float-vid__content .detikpagi-live span:before { top: 8px; left: 5px; } .breakingnews-float--rekomendit-liveshop .flowed .float-vid__content .custom-position { position: absolute !important; top: 20px !important; left: 20px !important; } .breakingnews-float--rekomendit-liveshop .flowed .float-vid__content .custom-position .detikpagi-live span { font-size: 14px !important; } .breakingnews-float--rekomendit-liveshop .flowed .float-vid__content .float-vid__close { color: #000; } .breakingnews-float--detikpagi-sore-live-liveshop .flowed .float-vid__content { background: url("../images/detiksore-live-liveshoping.svg") no-repeat right top !important; background-size: cover; min-height: 140px; width: 240px; height: 240px; overflow: visible; border-radius: 37px; left: 0 !important; } .breakingnews-float--detikpagi-sore-live-liveshop .flowed .float-vid__content .detikpagi-live { display: block; width: calc(100% - 16px); margin-top: 8px; } .breakingnews-float--detikpagi-sore-live-liveshop .flowed .float-vid__content .detikpagi-live span:before { top: 8px; left: 5px; } .breakingnews-float--detikpagi-sore-live-liveshop .flowed .float-vid__content .custom-position { position: absolute !important; top: 20px !important; left: 20px !important; } .breakingnews-float--detikpagi-sore-live-liveshop .flowed .float-vid__content .custom-position .detikpagi-live span { font-size: 14px !important; } .breakingnews-float--detikpagi-drooftalk .flowed .float-vid__content { background: url("../images/drooftalk-popup.webp") no-repeat right top; background-size: cover; } .breakingnews-float--liveshop .flowed .float-vid__content { background: unset; bottom: 110px !important; z-index: 29 !important; } .breakingnews-float--liveshop .flowed .float-vid__content .mgt-70 { margin-top: 37px !important; } .breakingnews-float--liveshop .flowed .float-vid__content .float-vid__close.close-edit { background: #666666 !important; position: relative; left: 212px; top: 30px !important; } .breakingnews-float--liveshop .flowed .float-vid__content .bg-liveshop-top { position: relative; top: 79px; left: 23px; z-index: 4; } .breakingnews-float--liveshop .flowed .float-vid__content .bg-liveshop-bottom { position: relative; z-index: 4; left: 26px; top: -6px; } .float-vid__content-header { position: relative; display: inline-block; margin-bottom: 4px; font-size: 14px; } .float-vid__content-header-20d { display: block; padding: 8px 16px; color: #FFFFFF; background: #ed131b; } .float-vid__content-title { padding: 12px 16px; flex: 1; max-height: 82px; font-size: 14px; } .float-vid__content-title a { color: #FFFFFF; } .float-vid__content-title a:hover { color: #fcc43f; } .breakingnews-float--20d .float-vid__content-title a { color: #000000; } .breakingnews-float--20d .float-vid__content-title a:hover { color: #ed131b; } .breakingnews-float--small .flowed .float-vid__content-title { padding-top: 0; padding-bottom: 8px; height: 47px; align-items: center; } .float-vid__content-header, .float-vid__content-title { opacity: 0; filter: alpha(opacity=0); } .flowed .float-vid__content-header, .flowed .float-vid__content-title { opacity: 1; filter: alpha(opacity=100); } .breakingnews-float--small .flowed .float-vid__content-header, .breakingnews-float--small .flowed .float-vid__content-title { margin-left: 145px; } .float-vid__content-sponsor { color: #FFFFFF; align-items: center; z-index: 5; font-size: 10px; position: absolute; right: 8px; top: 8px; } .float-vid__content-sponsor img { max-height: 70px; max-width: 120px; } .flowed .float-vid__content-sponsor img { max-height: 25px; max-width: 50px; } .flowed .float-vid__content-sponsor { top: 5px; margin-right: 24px; } .float-vid__wrap { position: absolute; width: 100%; top: 0; bottom: 0; height: 0; display: block; overflow: hidden; padding-bottom: 56.25%; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } .pdb-counter .float-vid__wrap { padding-bottom: calc(56.25% + 38px) !important; } .flowed .float-vid__wrap { position: relative; border-radius: 0; } .flowed .float-vid__wrap .media__image { margin: 0; } .breakingnews-float--small .flowed .float-vid__wrap { width: 145px; position: absolute; } .breakingnews-float--20d .flowed .float-vid__wrap { width: 145px; height: auto; padding: 0; } .float-vid__close { position: absolute; right: 8px; top: 4px; z-index: 5; visibility: hidden; font-size: 12px; opacity: 0; filter: alpha(opacity=0); color: #FFFFFF; } .float-vid__close:hover { color: #fcc43f; } .flowed .float-vid__close { visibility: visible; opacity: 1; filter: alpha(opacity=100); } .breakingnews-float--20d .flowed .float-vid__close { top: 7px; } .breakingnews-float--detikpagi .flowed .float-vid__close { width: 25px; height: 25px; right: -7px; top: -10px; background: #666666; color: #FFFFFF; } .breakingnews-float--detikpagi .flowed .float-vid__close:hover { background: #C72026; } .breakingnews-float--detikpagi-drooftalk .flowed .float-vid__close { background: #1cded0; color: #232323; } .breakingnews-float--detikpagi-drooftalk .flowed .float-vid__close:hover { color: #FFFFFF; } .detikpagi-live { display: block; width: calc(100% - 16px); margin-top: 8px; } .detikpagi-live span { position: relative; background: #ffe600; display: inline-block; padding: 2px 8px 2px 16px; color: #EE4023; font-size: 10px; font-weight: bold; border-radius: 12px; } .breakingnews-float--detikpagi-drooftalk .detikpagi-live span { color: #232323; } .detikpagi-live span:before { content: ""; width: 8px; height: 8px; position: absolute; top: 5px; left: 4px; 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; } } .mgt-70 { margin-top: 70px !important; } .border-radius-none { border-radius: 0px !important; } .custom-position { position: absolute !important; top: 0 !important; left: 3px !important; z-index: 3; } .margin-none { margin: 0px !important; } .cursor-pointer { cursor: pointer; } .border-radius-top { border-radius: 0 !important; border-top-left-radius: 9px !important; border-top-right-radius: 9px !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } /*DATEPICKER STYLE*/ /* Default styling for jQuery Datepicker v5.0.1. */ .datepick { background-color: #fff; border: 1px solid #ccc; color: #000; font-family: Arial,Helvetica,Sans-serif; font-size: 90%; padding: 5px; } .datepick-rtl { direction: rtl; } .datepick-popup { z-index: 1000; } .datepick-disable { position: absolute; z-index: 100; background-color: white; opacity: 0.5; filter: alpha(opacity=50); } .datepick a { text-decoration: none; } .datepick a.datepick-disabled { color: #888; cursor: auto; } .datepick button { margin: 0.25em; padding: 0.125em 0em; background-color: #fcc; border: none; font-weight: bold; } .datepick-nav, .datepick-ctrl { font-size: 90%; font-weight: bold; display: flex; } .datepick-ctrl { border-top: 1px solid #ccc; } .datepick-cmd { flex: 1; padding: 5px 7px; text-align: center; } .datepick-cmd-today { margin: 0 2px; } .datepick-cmd-clear { margin: 5px 1px 0 0; } .datepick-cmd-close { margin: 5px 0 0 1px; } .datepick-cmd:hover { background-color: #eee; } .datepick-month { float: left; width: 15em; text-align: center; } .datepick-month-nav { float: left; background-color: #777; text-align: center; } .datepick-month-nav div { float: left; width: 12.5%; margin: 1%; padding: 1%; } .datepick-month-nav span { color: #888; } .datepick-month-row { clear: left; display: inline-block; } .datepick-month-header { background-color: #fff; color: #000; font-weight: bold; display: flex; } .datepick-month-header select, .datepick-month-header input { margin: 0em; padding: 5px; border: 1px solid #ccc; font-size: 100%; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; border-radius: 0; font-weight: bold; flex: 1; } .datepick-month-header select:last-child { border-left: none; } .datepick-month-header input { position: absolute; display: none; } .datepick-month table { width: 100%; border-collapse: collapse; font-size: 11px; } .datepick-month thead { background: #eee; border-bottom: 2px solid #fff; } .datepick-month th, .datepick-month td { margin: 0em; padding: 0em; text-align: center; } .datepick-month th { padding: 5px; border: none; } .datepick-month th.datepick-week { background-color: #777; color: #fff; } .datepick-month td { border: 1px solid #fff; } .datepick-month td.datepick-week { border: 1px solid #777; } .datepick-month td.datepick-week * { background-color: #777; color: #fff; border: none; } .datepick-month td span { color: #888; } .datepick-month td .datepick-other-month { background-color: #fff; } .datepick-month td .datepick-today, .datepick-month td .datepick-highlight { background-color: #cccccc; color: #fff; } .datepick-month td .datepick-selected { color: #fff; background-color: var(--kuler-1); } .datepick-month a { display: block; width: 100%; padding: 0.125em 0em; color: #000; text-decoration: none; } .datepick-month span { display: block; width: 100%; padding: 0.125em 0em; } .datepick-status { clear: both; background-color: #ddd; text-align: center; } .datepick-clear-fix { clear: both; } button.datepick-cmd { text-align: center; } .p_datepicker { padding-right: 36px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' 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;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M19.7,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5S18.8,37.7,19.7,37.7z'/%3E%3Cpath d='M27.9,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5S27.1,37.7,27.9,37.7z'/%3E%3Cpath d='M36.2,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5c-0.9,0-1.5,0.7-1.5,1.5S35.3,37.7,36.2,37.7z'/%3E%3Cpath d='M44.4,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5c-0.9,0-1.5,0.7-1.5,1.5S43.6,37.7,44.4,37.7z'/%3E%3Cpath d='M19.7,45.6c0.9,0,1.5-0.7,1.5-1.5c0-0.9-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5C18.1,44.9,18.8,45.6,19.7,45.6z'/%3E%3Cpath d='M27.9,45.6c0.9,0,1.5-0.7,1.5-1.5c0-0.9-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5C26.4,44.9,27.1,45.6,27.9,45.6z'/%3E%3Cpath d='M36.2,45.6c0.9,0,1.5-0.7,1.5-1.5c0-0.9-0.7-1.5-1.5-1.5c-0.9,0-1.5,0.7-1.5,1.5C34.6,44.9,35.3,45.6,36.2,45.6z'/%3E%3Cpath d='M49.1,17.6H15c-3.2,0-5.7,2.6-5.7,5.7V49c0,3.2,2.6,5.7,5.7,5.7h34c3.2,0,5.7-2.6,5.7-5.7V23.4 C54.8,20.2,52.2,17.6,49.1,17.6z M51.7,49c0,1.4-1.1,2.6-2.6,2.6H15c-1.4,0-2.6-1.1-2.6-2.6V29.5h39.3V49z M51.7,26.4H12.4v-3.1 c0-1.4,1.1-2.6,2.6-2.6h34.1v0c1.4,0,2.6,1.1,2.6,2.6V26.4z'/%3E%3Cpath d='M19.7,14.5c0.8,0,1.5-0.7,1.5-1.5v-2.1c0-0.8-0.7-1.5-1.5-1.5c-0.8,0-1.5,0.7-1.5,1.5v2.1C18.1,13.8,18.8,14.5,19.7,14.5z' /%3E%3Cpath d='M44.4,14.5c0.8,0,1.5-0.7,1.5-1.5v-2.1c0-0.8-0.7-1.5-1.5-1.5c-0.8,0-1.5,0.7-1.5,1.5v2.1C42.9,13.8,43.6,14.5,44.4,14.5z' /%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 24px; background-position: calc(100% - 8px) center; background-repeat: no-repeat; } .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; } } /*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: 500px; } .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); } } /* 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; } #slider-foto__detail-nav.minim-img .slick-track { transform: none !important; } .box, .section { position: relative; word-wrap: break-word; padding-top: 16px; margin-bottom: 24px; border-top: 2px solid #f0f0f0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; color: #666666; } .box__title, .section__title { margin: 0; color: var(--kuler-1); font-size: 18px; } .box__header { margin-bottom: 16px; } .box__header a { padding: 0; } .box__header--widget { position: relative; z-index: 3; } .box__header .cb-covid-19, .cb-pilkada .box__header { margin-bottom: 24px; } .cb-pilkada .box__header { margin-top: -16px; margin-bottom: 0; padding: 16px 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } .cb-covid-19 .box__title { position: relative; } .cb-covid-19 .box__title:before { position: absolute; content: ""; width: 120px; height: 2px; z-index: 2; bottom: -8px; background: var(--kuler-3); } .box__title--sponsored-box { margin-left: 32px; color: #000000; font-size: 12px; } .box__title--sponsored-box img { max-width: 150px; max-height: 50px; } .box__title--sponsored-box-pilkada { margin-right: 18%; } .box__logo { max-width: 200px; max-height: 45px; } .cb-pamor .box__logo { max-height: 55px; } .cb-pilkada .box__logo { max-height: 50px; } .box-background { padding: 16px; background: #e3f5fe; color: #666666; } .box-background__title { font-size: 18px; color: #333333; } .nhl .box { margin-bottom: 32px; } .box-ads { margin-bottom: 24px; } .nhl .box-ads { margin-bottom: 32px; padding-top: 24px; padding-bottom: 24px; border-top: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0; } .box-ads__name { position: absolute; padding: 8px 12px; font-size: 14px; color: #666666; } .section__header { margin-bottom: 16px; } .section__header a { padding: 0; } .page { position: relative; } .page__header { position: relative; margin: 12px 0; } .page__title { margin: 0; color: var(--kuler-1); font-size: 23px; } .page__breadcrumb, .page__follow, .page__indeks-info { color: #666666; font-size: 14px; } .page__breadcrumb a, .page__follow a, .page__indeks-info a { color: #666666; } .page__breadcrumb a { position: relative; } .page__breadcrumb a:after { font-family: detiknetwork-FF; content: "\65"; padding: 0 4px; vertical-align: middle; } .page__breadcrumb a:last-child:after { content: ""; } .page__breadcrumb a:hover { color: #333333; } .nhl .cb, .nhl .widget { border-bottom: 2px solid #f0f0f0; } .grid-row > .cb, .grid-row > .widget { margin-left: 13px; margin-right: 13px; width: 100%; } .cb.cb-detik-ramadhan, .widget.cb-detik-ramadhan { border-color: #75b72e; } .widget.widget-nhl { border: none; } .nhl > .list-content .widget + .widget, .nhl > .list-content .widget + .box, .nhl > .list-content .widget + .box-ads, .nhl > .list-content .box + .widget, .nhl > .list-content .box + .box, .nhl > .list-content .box + .box-ads, .nhl > .list-content .box-ads + .widget, .nhl > .list-content .box-ads + .box, .nhl > .list-content .box-ads + .box-ads { margin-top: -34px; } .sticky { z-index: 2; position: sticky; position: -webkit-sticky; top: 88px; } .captcha { display: inline-block; } .alert { margin: 0 0 24px; padding: 16px; border-radius: 5px; font-size: 14px; } .alert--danger { border: 1px solid #f6cfd7; background: #fae9ec; color: #000000; } .alert--center-inline { display: inline-block; } .navbar-border, .navbar-first, .footer__border, .headline, .headline-today-recap { background: #21409A; /* Old browsers */ background: -moz-linear-gradient(100deg, #21409a 50%, #5699f3 100%); /* FF3.6+ */ background: -webkit-linear-gradient(100deg, #21409a 50%, #5699f3 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(100deg, #21409a 50%, #5699f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ } .navbar-first .dropdown-menu .nav__item, .navbar-second .dropdown-menu .nav__item { border-bottom: 1px solid #f0f0f0; } .navbar-first .dropdown-menu .nav__item:last-child, .navbar-second .dropdown-menu .nav__item:last-child { border: none; } .navbar-first .nav__item.dropdown-aktif .dropdown { color: #fcc43f; } .is-sticky .navbar-first .nav__item.dropdown-aktif .dropdown { color: var(--kuler-1); } .navbar-second .nav__item.dropdown-aktif .dropdown { color: var(--kuler-1); } .navbar-first .logo-image-nav { display: inline-block; width: 54px; height: 18px; } .navbar-first .logo-image-nav img { width: 54px; height: auto; } .navbar-sticky.is-sticky .navbar-first .logo-image-nav img { filter: invert(1); } .navbar-second .logo-image-nav { display: inline-block; height: auto; width: 80px; } .navbar-second .logo-image-nav img { width: 80px; height: auto; margin-top: -5px; } /*--------------------------------------------------------------------------------*/ /*LIST CONTENT*/ /*--------------------------------------------------------------------------------*/ .headline-terkait .list-content--column .list-content__item { padding-bottom: 0; margin-bottom: 0; } .nhl .list-content__item, .nhl > .list-content--column .list-content__item { padding-bottom: 16px; margin-bottom: 16px; } .headline-terkait .list-content--column { margin-top: 0; } .headline .media:hover .media__title a { color: #fcc43f; } .headline .media__image { background: none; } .headline--breakingnews .media__image { margin-bottom: 0; overflow: visible; position: static; } .widget .media__text, .cb-detik-ramadhan .media__text { font-size: 14px; } .headline .media__title { font-size: 23px; } .headline .media__title a { color: #FFFFFF; } .nhl .media__title { font-size: 20px; } .nhl .list-content--column .column-6 .media__title, .terpopuler .media__title, .cb-mostpop .media__title, .cb-commented .media__title { font-size: 16px; } .widget-detikx .media__title, .nhl .cb .media__title { font-size: 14px; } .detail-body__newstag .media__title { color: #000000; font-size: 14px; } .headline--breakingnews .media__title { text-transform: uppercase; margin-top: 32px; margin-right: 130px; color: #FFFFFF; } .cb-d-awards .media__title a:hover { color: #C2BB3C; } .media__subtitle { color: var(--kuler-3); } .media__subtitle a { color: var(--kuler-3); } .headline .media__subtitle a { color: #fcc43f; } .headline .media__subtitle { color: #fcc43f; } .nhl .media__subtitle { margin-bottom: 8px; } .cb-mostpop .media__date { margin: 4px 0 0 50px; } .cb-berita-terbaru .media__date { margin: 0; } .headline .media__date { color: #FFFFFF; } .nhl .media__date { margin-top: 12px; } .cb .media__date { margin-top: 8px; } .headline .media__author { color: #f0f0f0; } .headline .media__author a { color: #f0f0f0; } .headline .media__author span { color: #FFFFFF; } .media__label { background: var(--kuler-1); } .media__label--live { background: #FF0000; padding: 4px 8px 4px 20px; top: 8px; left: 8px; } .media__label--live:before { content: ""; width: 8px; height: 8px; position: absolute; top: 8px; left: 6px; overflow: hidden; animation: live 1s; -moz-animation: live 1s infinite; -webkit-animation: live 1s infinite; background: #fcc43f; } .nhl .media--left .media__image { margin: 0 24px 0 0; } .nhl .media--right .media__image { margin: 0 0 0 24px; } .nhl .media--left, .nhl .media--right { align-items: center; } .nhl .media--left .media__image, .nhl .media--right .media__image { width: 31%; } .widget-nhl .media--left .media__image, .widget-nhl .media--right .media__image { width: 400px; } .cb-kolom .media--left .media__image, .cb-kolom .media--right .media__image { width: 100px; } .indeks .media--left .media__image, .indeks .media--right .media__image { width: 26%; } .media--text-overlay .media__subtitle { color: var(--kuler-3); } .headline .media--text-overlay .media__subtitle { color: #fcc43f; } .media--text-overlay .media__subtitle a { color: var(--kuler-3); } .headline .media--text-overlay .media__subtitle a { color: #fcc43f; } .cb-mostpop .text-list { align-items: normal; } .cb-mostpop .text-list__data, .cb-commented .text-list__data { margin-left: 12px; margin-right: 12px; margin-top: -4px; font-size: 20px; } .cb-commented .text-list__data { font-size: 10px; } .terpopuler .text-list__data, .cb-mostpop .text-list__data, .cb-commented .text-list__data { color: #999999; } @keyframes live { 0% { background: #fcc43f; } 50% { background: #FF0000; } 100% { background: #fcc43f; } } /*--------------------------------------------------------------------------------*/ /*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--blue-base.btn--link { color: #21409A; } .btn--blue-light-1 { background: #2c5498; color: #FFFFFF; } .btn--blue-light-1:hover { color: #FFFFFF; } .btn--blue-light-1.btn--outline { border-color: #2c5498; color: #2c5498; } .btn--blue-light-1.btn--link { color: #2c5498; } .btn--blue-light-2 { background: #007cbd; color: #FFFFFF; } .btn--blue-light-2:hover { color: #FFFFFF; } .btn--blue-light-2.btn--outline { border-color: #007cbd; color: #007cbd; } .btn--blue-light-2.btn--link { color: #007cbd; } .btn--blue-light-3 { background: #3ea6dd; color: #FFFFFF; } .btn--blue-light-3:hover { color: #FFFFFF; } .btn--blue-light-3.btn--outline { border-color: #3ea6dd; color: #3ea6dd; } .btn--blue-light-3.btn--link { color: #3ea6dd; } .btn--blue-light-4 { background: #84c6e9; color: #FFFFFF; } .btn--blue-light-4:hover { color: #FFFFFF; } .btn--blue-light-4.btn--outline { border-color: #84c6e9; color: #84c6e9; } .btn--blue-light-4.btn--link { color: #84c6e9; } .btn--blue-light-5 { background: #e3f5fe; color: rgba(0, 0, 0, 0.75); } .btn--blue-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--blue-light-5.btn--outline { border-color: #e3f5fe; color: #e3f5fe; } .btn--blue-light-5.btn--link { color: #e3f5fe; } .btn--orange-base { background: #EE4023; color: #FFFFFF; } .btn--orange-base:hover { color: #FFFFFF; } .btn--orange-base.btn--outline { border-color: #EE4023; color: #EE4023; } .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--outline { border-color: #ef672f; color: #ef672f; } .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--outline { border-color: #f7931d; color: #f7931d; } .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--outline { border-color: #f9ba6f; color: #f9ba6f; } .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--outline { border-color: #fbd3a3; color: #fbd3a3; } .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--outline { border-color: #fce7cc; color: #fce7cc; } .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--outline { border-color: #6D8591; color: #6D8591; } .btn--utility-base.btn--link { color: #6D8591; } .btn--utility-info { background: #2099d6; color: #FFFFFF; } .btn--utility-info:hover { color: #FFFFFF; } .btn--utility-info.btn--outline { border-color: #2099d6; color: #2099d6; } .btn--utility-info.btn--link { color: #2099d6; } .btn--utility-success { background: #11aa3d; color: #FFFFFF; } .btn--utility-success:hover { color: #FFFFFF; } .btn--utility-success.btn--outline { border-color: #11aa3d; color: #11aa3d; } .btn--utility-success.btn--link { color: #11aa3d; } .btn--utility-warning { background: #FCB715; color: rgba(0, 0, 0, 0.75); } .btn--utility-warning:hover { color: rgba(0, 0, 0, 0.75); } .btn--utility-warning.btn--outline { border-color: #FCB715; color: #FCB715; } .btn--utility-warning.btn--link { color: #FCB715; } .btn--utility-error { background: #FF0000; color: #FFFFFF; } .btn--utility-error:hover { color: #FFFFFF; } .btn--utility-error.btn--outline { border-color: #FF0000; color: #FF0000; } .btn--utility-error.btn--link { color: #FF0000; } button[disabled] { background: #e0e5e8; color: #879ba5; } button[disabled]:hover { color: #879ba5; } .btn--default-next { color: var(--kuler-3); } .header { margin: 16px 0; } .header__logo { min-height: 90px; } .header__logo img { width: 265px; } @media (min-width: 1024px) and (max-width: 1280px) { .header__logo img { width: 240px; } } .header__leaderboard { min-height: 90px; justify-content: flex-end; } .header__leaderboard img { width: 728px; } .footer { background: #f0f0f0; } .footer__logo { margin: 12px 0 8px; display: inline-block; } .footer__logo img { width: 189px; } .footer-title { font-size: 12px; } .footer-title__copyright { color: #666666; margin-top: 40px; } .footer-title__connect { color: #333333; margin-bottom: 4px; } .footer-title__partof { color: #666666; padding: 4px 0; } .footer-title__partof img { width: 80px; vertical-align: bottom; margin: 0 0 3px 3px; } .footer__social { margin-top: 40px; margin-bottom: 4px; } .footer__grid { padding: 32px 0 52px; } .footer-nav { padding-top: 24px; padding-bottom: 12px; padding-left: 24px; } .footer-nav--title { margin-bottom: 8px; font-size: 14px; } .footer__border { height: 4px; } .headline { margin-bottom: 24px; overflow: hidden; border-radius: 8px; } .headline-terkait { font-size: 14px; padding: 12px 16px; } .headline-terkait__title { margin: 0; position: relative; color: #fcc43f; } .headline-terkait__title:after { content: " "; position: absolute; width: 83%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); line-height: 0.1em; margin: 10px 0; right: 6px; } .headline-terkait a { color: #FFFFFF; margin: 8px 0; display: inline-block; } .headline-terkait a:hover { color: #fcc43f; } .headline--breakingnews .ratiobox { overflow: visible; position: static; } .headline-today-recap { position: relative; z-index: 1; overflow: hidden; margin-bottom: -6px; line-height: 1; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .headline-today-recap:hover .headline-today-recap__title { color: #fcd373; } .headline-today-recap__title { position: relative; z-index: 2; padding: 8px 16px 6px; background: #ed131b; } .headline-today-recap__title:before { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 20px; background: #ed131b; -webkit-transform: skew(-17deg); -moz-transform: skew(-17deg); -ms-transform: skew(-17deg); -o-transform: skew(-17deg); transform: skew(-17deg); } .headline-today-recap__item { padding: 8px 0 6px; flex: 1; } .icon-item { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: 5px 0; width: 28px; height: 28px; cursor: pointer; 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; } .icon-item__wa, .icon-item__wa:hover { color: #FFFFFF; background: #25D366; } .icon-item__tk, .icon-item__tk:hover { color: #FFFFFF; background: #000000; } .detail__top-follow .icon-item { color: #666666; margin: 0; } .icon-logo { position: absolute; z-index: 1; top: 8px; right: 8px; } .icon-logo img { display: block; max-height: 26px; max-width: 75px; } /*--------------------------------------------------------------------------------*/ /*WP DETIKCOM*/ /*--------------------------------------------------------------------------------*/ .cb-commented__color-data { color: var(--kuler-3); } .content__bg { background: #FFFFFF; } .widget-detikx .media__text a:hover { color: var(--kuler-3); } .color-red { color: #C72026; } .color-orange-light-2 { color: #f7931d; } .static { margin-bottom: 16px; } .static-nav { margin-bottom: 16px; } .static-nav .selected div { color: var(--kuler-3); } .static-nav .selected div i { color: #000000; } .static-body { color: #000000; font-size: 14px; } .static-body__text ul { list-style: none; } .static-body__text a { color: var(--kuler-1); } .static-body__text > h1 { font-size: 32px; } .static-body__text > h2 { font-size: 26px; } .static-body__text > h3 { font-size: 23px; } .static-body__text > h4 { font-size: 20px; } .static-body__text > h5 { font-size: 18px; } .static-body__text > h6 { font-size: 16px; } .static-body__box { margin: 0 0 24px; padding: 16px; background: #e3f5fe; border-radius: 5px; } .static-body__box div { color: var(--kuler-1); } .static-body__box p { margin: 4px 0 16px; } .static-body__form span { margin: 20px 0; display: block; } .sitemap-nav { color: #666666; font-size: 14px; margin-bottom: 24px; } .sitemap-nav__title { color: var(--kuler-1); margin-bottom: 16px; display: block; } .sitemap-nav ul { max-height: 200px; overflow: scroll; } .indeks-menu { background: #f0f0f0; border-radius: 4px; padding: 12px 12px; } .indeks-menu__title { color: var(--kuler-1); font-size: 18px; } .indeks-menu__box { font-size: 12px; } .indeks-menu__box span { text-transform: uppercase; padding-right: 8px; } .flowed .float-vid__content { background: #21409A; /* Old browsers */ background: -moz-linear-gradient(100deg, #21409a 50%, #007cbd 100%); /* FF3.6+ */ background: -webkit-linear-gradient(100deg, #21409a 50%, #007cbd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(100deg, #21409a 50%, #007cbd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ } .datepick-month td .datepick-selected { background-color: #562b77; } .ebook__top { position: relative; height: 500px; } .ebook__top__img { width: 100%; position: absolute; top: 0; width: 100%; } .ebook__top__content { position: absolute; top: 0; width: 100%; padding: 85px 193px; } .ebook__top__content__left { width: 50%; } .ebook__top__content__left__logo { margin-bottom: 28px; } .ebook__top__content__left__title { font-style: normal; font-weight: 700; font-size: 36px; line-height: 44px; color: #21409a; margin-bottom: 28px; } .ebook__top__content__left__desc { font-style: normal; font-weight: 500; font-size: 18px; line-height: 25px; color: #000000; margin-bottom: 28px; } .ebook__top__content__left__button { background: #fcb715; border-radius: 4px; width: 240px; height: 38px; display: flex; justify-content: center; align-items: center; } .ebook__top__content__left__button__text { color: #21409a; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; padding-right: 12px; } .ebook__top__content__right { width: 50%; } .ebook__bottom { width: 100%; } .ebook__bottom__content { display: flex; margin-bottom: 40px; } .ebook__bottom__content__left { margin-right: 26px; } .ebook__bottom__content__left img { border-radius: 4px; } .ebook__bottom__content__right__title { font-style: normal; color: #000000; font-weight: 700; font-size: 26px; line-height: 36px; margin-bottom: 14px; } .ebook__bottom__content__right__year { font-style: normal; color: #666666; font-weight: 400; font-size: 16px; line-height: 22px; margin-bottom: 32px; } .ebook__bottom__content__right__desc { font-style: normal; font-weight: 500; font-size: 18px; line-height: 25px; margin-bottom: 60px; } .ebook__bottom__content__right__bottom { display: flex; } .ebook__bottom__content__right__bottom__button { display: flex; justify-content: center; align-items: center; width: 150px; height: 38px; background: #21409a; border-radius: 4px; margin-right: 32px; } .ebook__bottom__content__right__bottom__button__img img { margin-right: 12px; } .ebook__bottom__content__right__bottom__button__text { color: #ffffff; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; } .ebook__bottom__content__right__bottom__share__text { color: #4d4d4d; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; } .column-recap { margin-top: 12px; margin-left: 13%; margin-right: 13%; } .mgt-minus-10 { margin-top: -10px; } .profil-box { display: flex; margin-bottom: 16px; padding: 16px 20px; align-items: center; gap: 20px; align-self: stretch; background: #F7F7F7; } .profil-box .profil-img img { width: 75px; height: 75px; border-radius: 100%; overflow: hidden; object-fit: cover; } .profil-box .profil-text .profil-text__name { color: #21409A; font-size: 18px; font-style: normal; font-weight: 500; line-height: 17px; } .profil-box .profil-text .profil-text__desc { color: #666; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .new-breakingnews { background: #ffffff; border: 1px solid #E6E6E6; } .new-breakingnews-ads { overflow: visible; margin-top: 22px; } .new-breakingnews__header { padding: 18px 16px; display: grid; gap: 16px; } .new-breakingnews__header-top { display: flex; justify-content: space-between; align-items: center; } .new-breakingnews__header-top-name { position: relative; width: 100%; } .new-breakingnews__header-top-name .media__label--live { background: none; padding: 0; display: flex; align-items: center; } .new-breakingnews__header-top-name .media__label--live:before { top: 6px; left: 0px; width: 12px; height: 12px; } .new-breakingnews__header-top-name strong { font-size: 20px; font-style: italic; line-height: 1.25; text-transform: uppercase; color: #C72026; padding-left: 20px; } .new-breakingnews__header-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .new-breakingnews__header-title .media__title { color: #2C5498; max-width: 100%; flex: auto; line-height: 140%; margin: 0; } .new-breakingnews__header-title i.icon-chevron-right { background: #2C5498; border-radius: 100%; display: flex; padding: 4px; align-items: center; } .new-breakingnews__header-title:hover .media__title { text-decoration: underline; } .new-breakingnews__header-ads-sponsor { padding: 8px 16px; border: 1px solid #E6E6E6; background: #ffffff; border-radius: 8px; display: flex; justify-content: center; width: fit-content; margin: -23px auto 0; } .new-breakingnews__header-ads-sponsor img { max-width: 500px; height: auto; width: 100%; } .berita-utama .media__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* Limits the text to 2 lines */ overflow: hidden; text-overflow: ellipsis; } .cb-pilihan-redaksi { border: 1px solid var(--kuler-1); padding: 0; overflow: hidden; border-radius: 8px; } .cb-pilihan-redaksi .box__header { padding: 12px 16px; font-style: italic; background: #21409A; /* Old browsers */ background: -moz-linear-gradient(bottom, #21409a 0%, #007cbd 100%); /* FF3.6+ */ background: -webkit-linear-gradient(bottom, #21409a 0%, #007cbd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #21409a 0%, #007cbd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ } .cb-pilihan-redaksi .box__title { letter-spacing: -1px; } .cb-pilihan-redaksi .list-content { padding: 0 16px 8px; } .cb-pilihan-redaksi .list-content .media__title { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; display: -moz-box; } .cb-pilihan-redaksi .slick-dots { left: 0; } .cb-pilihan-redaksi .slick-dots li button { border: none; width: 7px; height: 7px; background: #cccccc; opacity: 1; filter: alpha(opacity=100); } .cb-pilihan-redaksi .slick-dots li.slick-active button { background-color: var(--kuler-1); } .cb-pilihan-redaksi .slick-arrow { top: 40px; width: 34px; height: 34px; background: #2C5498; /* The Fallback */ background: rgba(44, 84, 152, 0.5); } .cb-pilihan-redaksi .slick-arrow:hover { background: #2C5498; /* The Fallback */ background: #2c5498; } .cb-pilihan-redaksi .slick-prev, .cb-pilihan-redaksi .slick-next { margin: 0 16px; } .cb-pilihan-redaksi .slick-prev:before, .cb-pilihan-redaksi .slick-next:before { font-size: 24px; } .cb-pilkada { padding-bottom: 24px; z-index: 2; border-top: 2px solid #21409A; background: #f0f3f4; } .cb-kadokeluarga .media { background: #f0f0f0; border-radius: 8px; padding: 12px; } .cb-kadokeluarga .media__image { margin-right: 12px; } .cb-kadokeluarga .list-content__item { padding-bottom: 8px; margin-bottom: 12px; } .btn--yellow-base { background: #FCB715; color: rgba(0, 0, 0, 0.75); } .btn--yellow-base:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-base.btn--link { color: #FCB715; } .btn--yellow-light-1 { background: #fcc43f; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1.btn--link { color: #fcc43f; } .btn--yellow-light-2 { background: #fcd373; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2.btn--link { color: #fcd373; } .btn--yellow-light-3 { background: #fde3a5; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3.btn--link { color: #fde3a5; } .btn--yellow-light-4 { background: #fdefcd; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4.btn--link { color: #fdefcd; } .btn--yellow-light-5 { background: #fef7e8; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5.btn--link { color: #fef7e8; } .cb-hoegeng { padding: 12px; background-image: url("../images/bg-hoegeng-2026.webp"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; max-height: 500px; margin-top: 24px !important; border-radius: 8px; margin-bottom: 24px !important; } .cb-hoegeng-btn { width: 100%; justify-content: center; display: flex; margin-bottom: 15px; } .cb-hoegeng__logo { width: 180px; height: auto; margin-bottom: 4px; } .cb-hoegeng__desc { position: relative; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; font-weight: 500px; } .cb-hoegeng .media__subtitle { color: #FCB715; } .cb-hoegeng .media__title a { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; display: -moz-box; color: #FFFFFF; } .cb-hoegeng .media__title a:hover { color: #FCB715; } .cb-hoegeng .slick-dots li button { border: none; width: 12px; height: 12px; opacity: 1; filter: alpha(opacity=100); background: #fef7e8; } .cb-hoegeng .slick-dots li.slick-active button { background: #FCB715; } .cb-hoegeng .slick-arrow { top: 40px; width: 34px; height: 34px; opacity: 0.65; filter: alpha(opacity=65); color: #232323; } .cb-hoegeng .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-hoegeng .slick-prev, .cb-hoegeng .slick-next { margin: 0 16px; } .cb-hoegeng .slick-prev:before, .cb-hoegeng .slick-next:before { font-size: 24px; } .color-yellow { color: #fcb715 !important; } .btn--yellow-base { background: #FCB715; color: rgba(0, 0, 0, 0.75); } .btn--yellow-base:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-base.btn--link { color: #FCB715; } .btn--yellow-light-1 { background: #fcc43f; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1.btn--link { color: #fcc43f; } .btn--yellow-light-2 { background: #fcd373; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2.btn--link { color: #fcd373; } .btn--yellow-light-3 { background: #fde3a5; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3.btn--link { color: #fde3a5; } .btn--yellow-light-4 { background: #fdefcd; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4.btn--link { color: #fdefcd; } .btn--yellow-light-5 { background: #fef7e8; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5.btn--link { color: #fef7e8; } .cb-adhyaksa-2025 { padding: 12px; background-image: url("../images/bg-adhyaksa-2025.webp"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; max-height: 500px; margin-top: 24px !important; border-radius: 8px; margin-bottom: 24px !important; } .cb-adhyaksa-2025-btn { width: 100%; justify-content: center; display: flex; margin-bottom: 15px; } .cb-adhyaksa-2025__logo { width: 180px; height: auto; margin-top: 8px; margin-bottom: 12px; } .cb-adhyaksa-2025__desc { position: relative; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; font-weight: 500; background-color: rgba(0, 0, 0, 0.4); padding: 8px; border-radius: 8px; } .cb-adhyaksa-2025 .media__subtitle { color: #FCB715; } .cb-adhyaksa-2025 .media__title a { color: #FFFFFF; } .cb-adhyaksa-2025 .media__title a:hover { color: #FCB715; } .cb-adhyaksa-2025 .slick-dots li button { border: none; width: 12px; height: 12px; opacity: 1; filter: alpha(opacity=100); background: #fef7e8; } .cb-adhyaksa-2025 .slick-dots li.slick-active button { background: #FCB715; } .cb-adhyaksa-2025 .slick-arrow { top: 40px; width: 34px; height: 34px; opacity: 0.65; filter: alpha(opacity=65); color: #232323; } .cb-adhyaksa-2025 .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-adhyaksa-2025 .slick-prev, .cb-adhyaksa-2025 .slick-next { margin: 0 16px; } .cb-adhyaksa-2025 .slick-prev:before, .cb-adhyaksa-2025 .slick-next:before { font-size: 24px; } .color-yellow { color: #fcb715 !important; } .btn--red-base { background: #C72026; color: #FFFFFF; } .btn--red-base:hover { color: #FFFFFF; } .btn--red-base.btn--link { color: #C72026; } .btn--red-light-1 { background: #ed131b; color: #FFFFFF; } .btn--red-light-1:hover { color: #FFFFFF; } .btn--red-light-1.btn--link { color: #ed131b; } .btn--red-light-2 { background: #FF0000; color: #FFFFFF; } .btn--red-light-2:hover { color: #FFFFFF; } .btn--red-light-2.btn--link { color: #FF0000; } .btn--red-light-3 { background: #ff5c5c; color: #FFFFFF; } .btn--red-light-3:hover { color: #FFFFFF; } .btn--red-light-3.btn--link { color: #ff5c5c; } .btn--red-light-4 { background: #ffa6a6; color: rgba(0, 0, 0, 0.75); } .btn--red-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--red-light-4.btn--link { color: #ffa6a6; } .btn--red-light-5 { background: #ffd6d6; color: rgba(0, 0, 0, 0.75); } .btn--red-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--red-light-5.btn--link { color: #ffd6d6; } .cb-detikpilkada { padding: 12px; background-color: #F5F5F5; background-image: url("../images/bg-cb-detikpilkada.webp"); background-position: right top; background-repeat: no-repeat; background-size: 177px 41px; overflow: hidden; max-height: 500px; margin-top: 24px !important; border-radius: 8px; margin-bottom: 24px !important; } .cb-detikpilkada__logo { width: 144px; height: auto; margin-bottom: 4px; margin-top: -8px; } .cb-detikpilkada__desc { color: #000000; background-color: white; position: relative; padding: 12px; border-radius: 4px; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .cb-detikpilkada .media__subtitle { color: #2c5498; } .cb-detikpilkada .media__title a:hover { color: #C72026; } .cb-detikpilkada--regional .cb-detikpilkada__logo { width: auto; height: 33px; margin: 0; } .cb-detikpilkada--regional .cb-detikpilkada__desc { color: var(--kuler-sp3); } .cb-detikpilkada--regional .media__subtitle { color: var(--kuler-3); } .cb-detikpilkada--regional .media__title a:hover { color: var(--kuler-1); } .cb-detikpilkada .slick-dots li button { border: none; width: 7px; height: 7px; opacity: 1; filter: alpha(opacity=100); background: #999999; } .cb-detikpilkada .slick-dots li.slick-active button { background: #ed131b; } .cb-detikpilkada .slick-arrow { top: 40px; width: 34px; height: 34px; background-color: rgba(0, 0, 0, 0.5); opacity: 0.65; filter: alpha(opacity=65); color: #FFFFFF; } .cb-detikpilkada .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-detikpilkada .slick-prev, .cb-detikpilkada .slick-next { margin: 0 16px; } .cb-detikpilkada .slick-prev:before, .cb-detikpilkada .slick-next:before { font-size: 24px; } .btn-detikhot-color { background: #c72026; background: -moz-linear-gradient(137deg, #c72026 0%, #cd222c 48%, #ef672f 100%); background: -webkit-linear-gradient(137deg, #c72026 0%, #cd222c 48%, #ef672f 100%); background: linear-gradient(137deg, #c72026 0%, #cd222c 48%, #ef672f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c72026",endColorstr="#ef672f",GradientType=1); color: white; min-width: 80px; padding: calc(12px / 3) 10px; } .btn-detikhot-color span { transition: transform 0.3s ease; } .btn-detikhot-color span:hover { transform: scale(1.05); } .btn-detikhot-color:hover { background: #d50e15; background: -moz-linear-gradient(137deg, #d50e15 0%, #cf121d 48%, #f2591a 100%); background: -webkit-linear-gradient(137deg, #d50e15 0%, #cf121d 48%, #f2591a 100%); background: linear-gradient(137deg, #d50e15 0%, #cf121d 48%, #f2591a 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d50e15",endColorstr="#f2591a",GradientType=1); color: white; min-width: 80px; padding: calc(12px / 3) 10px; opacity: 1; } .cb-d-awards { position: relative; margin-top: 24px !important; padding: 12px; overflow: hidden; background: url("../images/bg-detikcom-awards.webp") #1e1001 no-repeat; background-size: cover; border-radius: 8px; max-height: 435px; margin-bottom: 24px !important; } .cb-d-awards__desc { padding: 12px; font-size: 12px; } .cb-d-awards__logo { width: 135px; height: auto; } .cb-d-awards .slick-dots li button { border: none; width: 7px; height: 7px; background: #f1f0d6; opacity: 1; filter: alpha(opacity=100); } .cb-d-awards .slick-dots li.slick-active button { background: #C2BB3C; } .cb-d-awards .slick-arrow { top: 40px; width: 34px; height: 34px; opacity: 0.65; filter: alpha(opacity=65); } .cb-d-awards .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-d-awards .slick-prev, .cb-d-awards .slick-next { margin: 0 16px; } .cb-d-awards .slick-prev:before, .cb-d-awards .slick-next:before { font-size: 24px; } .btn--d-awards { background: linear-gradient(88deg, #fff0a1 8.59%, #fffbe7 36.55%, #fcf4d8 55.53%, #cfaf66 95.35%); } .btn--d-awards:hover { opacity: 1 !important; background: linear-gradient(268deg, #fff0a1 8.59%, #fffbe7 36.55%, #fcf4d8 55.53%, #cfaf66 95.35%); } .cb-today-recap { padding: 16px; margin-top: 8px; background: url("../images/today-recap.webp") no-repeat center; background-size: cover; } .cb-today-recap__title { margin: 0; font-size: 23px; } .cb-today-recap__date { margin-bottom: 4px; font-size: 18px; color: #f7931d; } .dm-sans-thin-italic { font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: italic; } .poppins-thin { font-family: "Poppins", sans-serif; font-weight: 100; font-style: normal; } .btn--red-base { background: #C72026; color: #FFFFFF; } .btn--red-base:hover { color: #FFFFFF; } .btn--red-base.btn--link { color: #C72026; } .btn--red-light-1 { background: #ed131b; color: #FFFFFF; } .btn--red-light-1:hover { color: #FFFFFF; } .btn--red-light-1.btn--link { color: #ed131b; } .btn--red-light-2 { background: #FF0000; color: #FFFFFF; } .btn--red-light-2:hover { color: #FFFFFF; } .btn--red-light-2.btn--link { color: #FF0000; } .btn--red-light-3 { background: #ff5c5c; color: #FFFFFF; } .btn--red-light-3:hover { color: #FFFFFF; } .btn--red-light-3.btn--link { color: #ff5c5c; } .btn--red-light-4 { background: #ffa6a6; color: rgba(0, 0, 0, 0.75); } .btn--red-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--red-light-4.btn--link { color: #ffa6a6; } .btn--red-light-5 { background: #ffd6d6; color: rgba(0, 0, 0, 0.75); } .btn--red-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--red-light-5.btn--link { color: #ffd6d6; } .cb-pov { padding: 12px; background-color: white; background-image: url("../images/pov/bg-cb-pov.webp"); background-position: top; background-repeat: no-repeat; background-size: cover; overflow: hidden; max-height: 500px; margin-top: 24px !important; border: solid 1px #D8D8D8; border-radius: 8px; border-radius: 8px; margin-bottom: 24px !important; } .cb-pov .slick-track { padding: 14px 0; } .cb-pov .slick-dotted.slick-slider { padding-bottom: 30px !important; } .cb-pov__logo { width: 62px; height: auto; margin-bottom: 4px; margin-top: -8px; } .cb-pov__desc { color: #000000; background-color: #FFC700; position: relative; font-weight: bold; padding: 12px; border-radius: 4px; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .cb-pov__desc__icon img { max-width: 10px; } .cb-pov .card { background-color: #FFFFFF; padding: 32px 18px 18px 18px; border-radius: 14px; position: relative; z-index: 0; box-shadow: 1px 7px 11px -4px rgba(0, 0, 0, 0.41); -webkit-box-shadow: 1px 7px 11px -4px rgba(0, 0, 0, 0.41); -moz-box-shadow: 1px 7px 11px -4px rgba(0, 0, 0, 0.41); } .cb-pov .card .quote p { color: #000000; font-family: "DM Sans", sans-serif; font-size: 14px; font-style: italic; overflow: hidden; text-overflow: ellipsis; line-height: 18px; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; display: -moz-box; } .cb-pov .card:before { content: ""; position: absolute; top: -15px; left: -5px; width: 50px; height: 40px; background-image: url(../images/pov/quotation-mark.png); background-repeat: no-repeat; background-size: contain; background-position: top; z-index: -1; } .cb-pov .card:after { content: ""; position: absolute; bottom: 25px; right: 30px; width: 80px; height: 119px; background-image: url(../images/pov/exclamation-mark.png); background-repeat: no-repeat; background-size: contain; background-position: top; z-index: -1; opacity: 0.6; } .cb-pov .card .bottom-source { padding-top: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .cb-pov .card .bottom-source .source-person .name h4 { font-size: 13px; color: #000000; font-family: "Poppins", sans-serif; font-weight: bold; margin-bottom: 0; } .cb-pov .card .bottom-source .source-person .time { color: #6E6E6E; font-size: 11px; font-family: "Poppins", sans-serif; font-weight: 300; } .cb-pov .card .bottom-source .more-details .inline-flex { display: inline-flex; align-items: center; justify-content: center; } .cb-pov .card .bottom-source .more-details .inline-flex a { border-radius: 50%; border: 1px solid #DC7500; pointer-events: all; } .cb-pov .card .bottom-source .more-details .inline-flex a svg { width: 22px; height: 14px; fill: #DC7500; } .cb-pov .card .bottom-source .more-details .inline-flex a svg path { fill-rule: nonzero; clip-rule: evenodd; } .cb-pov .slick-dots li button { border: none; width: 7px; height: 7px; opacity: 1; filter: alpha(opacity=100); background: #879ba5; } .cb-pov .slick-dots li.slick-active button { background: #ef672f; opacity: 1; filter: alpha(opacity=100); } .cb-pov .slick-arrow { top: 40px; width: 34px; height: 34px; background-color: rgba(0, 0, 0, 0.5); opacity: 0.65; filter: alpha(opacity=65); color: #FFFFFF; } .cb-pov .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-pov .slick-prev, .cb-pov .slick-next { margin: 0 16px; } .cb-pov .slick-prev:before, .cb-pov .slick-next:before { font-size: 24px; } .btn-detikhot-color { background: #000000; color: white; min-width: 100px; padding: calc(16px / 3) 16px; font-weight: 500; } .btn-detikhot-color span { transition: transform 0.3s ease; min-width: 90px; } .btn-detikhot-color span:hover { transform: scale(1.05); } .btn-detikhot-color img:hover { transform: scale(1.05); } .btn-detikhot-color:hover { background: #515151; color: white; min-width: 100px; padding: calc(16px / 3) 16px; opacity: 1; } .dm-sans-thin-italic { font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: italic; } .poppins-thin { font-family: "Poppins", sans-serif; font-weight: 100; font-style: normal; } .btn--red-base { background: #C72026; color: #FFFFFF; } .btn--red-base:hover { color: #FFFFFF; } .btn--red-base.btn--link { color: #C72026; } .btn--red-light-1 { background: #ed131b; color: #FFFFFF; } .btn--red-light-1:hover { color: #FFFFFF; } .btn--red-light-1.btn--link { color: #ed131b; } .btn--red-light-2 { background: #FF0000; color: #FFFFFF; } .btn--red-light-2:hover { color: #FFFFFF; } .btn--red-light-2.btn--link { color: #FF0000; } .btn--red-light-3 { background: #ff5c5c; color: #FFFFFF; } .btn--red-light-3:hover { color: #FFFFFF; } .btn--red-light-3.btn--link { color: #ff5c5c; } .btn--red-light-4 { background: #ffa6a6; color: rgba(0, 0, 0, 0.75); } .btn--red-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--red-light-4.btn--link { color: #ffa6a6; } .btn--red-light-5 { background: #ffd6d6; color: rgba(0, 0, 0, 0.75); } .btn--red-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--red-light-5.btn--link { color: #ffd6d6; } .cb-pesanwarga { background-color: #ececec; font-family: "Poppins", sans-serif; border-radius: 8px; overflow: hidden; } .cb-pesanwarga .flex-none { flex: none; } .cb-pesanwarga__header { position: relative; padding-bottom: 10px; margin-top: 0; } .cb-pesanwarga__header-bg { width: 100%; height: auto; } .cb-pesanwarga__header a { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } .cb-pesanwarga__header-logo { width: 56%; height: auto; } .cb-pesanwarga__wrapper { padding: 0 16px 16px; } .cb-pesanwarga__cta { display: flex; justify-content: space-between; align-items: center; color: #000; font-size: 12px; font-weight: 700; padding: 10px; border: 1px solid #21409a; line-height: 20px; } .cb-pesanwarga__cta a { background-color: #ffc700; color: #000; padding: 7px 14px; font-size: 12px; font-weight: 700; margin-left: 16px; display: inline-flex; align-items: center; flex-shrink: 0; line-height: 17px; } .cb-pesanwarga__cta a svg { margin-left: 8px; } .cb-pesanwarga__card { position: relative; padding: 33px 22px 14px; margin: 16px 16px 8px 4px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='158' height='111' viewBox='0 0 158 111' fill='none'%3E%3Cg clip-path='url(%23clip0_509_36495)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.538 17.0785L20.626 19.9664C22.2609 20.4511 23.8283 21.0839 25.3686 21.7571L26.6387 19.0038C24.97 18.27 23.281 17.5901 21.5448 17.0718L21.538 17.0785Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0661 14.9784L11.627 17.974C13.3362 18.2231 15.0252 18.526 16.7006 18.9098L17.383 15.9545C15.6197 15.5506 13.8496 15.2342 12.0661 14.9717V14.9784Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.48594 14.1436L2.37109 17.1728C3.2426 17.193 4.10736 17.2469 4.97887 17.3075C5.84362 17.3613 6.71513 17.4085 7.57313 17.5094L7.85688 14.4936C6.9651 14.3926 6.06657 14.3455 5.17479 14.2849C4.28301 14.2243 3.38448 14.1705 2.4927 14.1503L2.48594 14.1436Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M42.7103 36.0956L39.8525 37.1323C40.4403 38.6873 40.8659 40.3164 41.2307 41.9657L44.2033 41.3262C43.8115 39.5625 43.3521 37.7987 42.7103 36.0889V36.0956Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.9212 27.5264L35.5566 29.4315C36.597 30.697 37.4956 32.077 38.259 33.5378L40.9478 32.1242C40.0966 30.5018 39.09 28.9535 37.9212 27.5264Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30.5299 21.0771L28.9287 23.6554C30.3339 24.544 31.6716 25.5201 32.8944 26.6174L34.9347 24.369C33.5633 23.1438 32.077 22.06 30.5299 21.0771Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M45.359 64.753L42.3189 64.6655C42.2648 66.4292 42.2175 68.2064 42.1973 69.9971L45.2374 70.0375C45.2577 68.2805 45.3117 66.5235 45.359 64.753Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M45.5152 55.207L42.475 55.234C42.4885 56.9708 42.475 58.721 42.4277 60.4713L45.4679 60.5386C45.5084 58.7681 45.5287 56.9909 45.5152 55.207Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44.9409 45.6348L41.9277 46.0185C42.1372 47.7149 42.279 49.4247 42.3669 51.1481L45.4003 51C45.3057 49.2161 45.1638 47.4254 44.9409 45.6415V45.6348Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M50.757 90.8721L48.791 93.208C50.0003 94.1841 51.392 94.9111 52.8378 95.4901L54.0876 95.9613L55.1213 93.1137L54.1011 92.73C52.9054 92.2655 51.7568 91.6731 50.757 90.8721Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M46.3049 83.4131L43.3594 84.1738C43.8593 86.0991 44.5957 87.9839 45.6631 89.6669L48.1831 87.9503C47.3116 86.5568 46.7171 85.0085 46.3049 83.4131Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M45.2511 74.2646L42.2109 74.3387C42.2515 76.1428 42.3528 77.9671 42.569 79.8049L45.5889 79.4481C45.3862 77.7382 45.2849 76.0082 45.2511 74.2646Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M75.6729 89.7816L77.8145 91.9291C79.2062 90.576 80.3682 89.0546 81.3951 87.4659L78.8346 85.8301C77.9158 87.2572 76.8822 88.6103 75.6729 89.7816Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M68.0186 94.2246L68.782 97.1596C69.7481 96.9442 70.6669 96.5672 71.5857 96.2172L72.9166 95.5709C73.3625 95.3555 73.7678 95.0728 74.1934 94.8237L72.572 92.2656C72.214 92.4743 71.8694 92.7167 71.4978 92.8984L70.3764 93.4437C69.5994 93.7331 68.836 94.0563 68.0186 94.238V94.2246Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M59.0941 94.2582L58.4658 97.2202C60.3169 97.651 62.2559 97.8058 64.1948 97.7924L64.1205 94.7631C62.445 94.7631 60.7493 94.6419 59.0941 94.2515V94.2582Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M84.3738 64.2948L87.4072 64.0727C87.4072 63.864 87.3599 63.5207 87.3126 63.211C87.2518 62.9014 87.1775 62.585 87.0694 62.282C86.8668 61.6627 86.5357 61.0972 86.1709 60.5789C85.4007 59.5691 84.4211 58.8488 83.4348 58.3574L82.0498 61.0569C82.7389 61.3934 83.3199 61.8579 83.732 62.3897C84.1306 62.9485 84.3468 63.514 84.3806 64.2948H84.3738Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M83.6444 73.4566L86.6238 74.0557C86.9819 72.2449 87.2453 70.4138 87.3737 68.5626L84.3403 68.3472C84.2187 70.057 83.9755 71.7669 83.6377 73.4566H83.6444Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M80.8202 82.2146L83.5766 83.4869C84.3603 81.7905 85.0021 80.0469 85.5494 78.2832L82.6376 77.4014C82.1309 79.0439 81.5296 80.6595 80.8135 82.2146H80.8202Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.5998 67.21L61.5664 67.4254C61.6542 68.6034 62.0055 69.694 62.4582 70.6566C62.9176 71.6193 63.4783 72.4877 64.0999 73.2618L66.4982 71.3971C65.4781 70.1114 64.7079 68.6506 64.5998 67.21Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M69.5187 61.3533L68.3431 58.5596C66.519 59.3337 64.6949 60.4041 63.2627 62.1678L65.6408 64.0527C66.5866 62.8814 68.0053 61.9928 69.5187 61.3533Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M78.3076 60.0607L78.6183 57.0449C76.6456 56.8496 74.6932 56.9506 72.7812 57.2805L73.3015 60.2626C74.9566 59.9732 76.6591 59.8924 78.3076 60.054V60.0607Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.2324 80.1619L86.3201 83.1979C88.1172 82.3834 89.5697 80.9966 90.806 79.482L88.9076 76.9307C87.9145 78.2299 86.739 79.4551 85.2392 80.1619H85.2324Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M76.733 79.2666L76.125 82.3497C77.9153 83.171 79.8002 83.8105 81.7594 83.9721L81.4149 80.7745C79.7732 80.5928 78.2126 79.9869 76.7398 79.2666H76.733Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M69.3427 74.312L67.3564 76.6075C68.0793 77.2201 68.7887 77.7856 69.5656 78.3578C70.3696 78.9502 71.2006 79.5089 72.0315 80.0609L73.3759 77.3144C72.6936 76.8566 72.0113 76.3921 71.3492 75.9007C70.6736 75.4026 69.9845 74.8573 69.3359 74.312H69.3427Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M99.4199 56.614L101.535 58.7884C102.683 57.718 104.054 56.6611 105.439 55.7389L103.75 53.2212C102.23 54.2377 100.798 55.335 99.4199 56.614Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M94.5693 65.1634L97.4203 66.2136L98.0013 64.6181L98.5283 63.1304C98.7175 62.5986 98.8796 62.0533 99.1769 61.5686L96.5286 60.0405C96.1637 60.6329 95.9543 61.2994 95.7246 61.9523C95.3192 63.1035 94.9612 64.093 94.5693 65.1499V65.1634Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.9824 73.5514L93.401 75.4767C94.3401 73.7399 95.1846 71.855 95.8804 70.172L93.07 69.0142C92.4012 70.6163 91.7458 72.0838 90.9824 73.5514Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M126.645 47.6074L125.922 50.5492C127.442 50.9262 128.881 51.5388 130.185 52.3802L131.833 49.8356C130.246 48.8057 128.476 48.0584 126.645 47.6074Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M116.708 47.6272L117.33 50.5892C118.944 50.2526 120.572 50.0574 122.18 50.0843L122.221 47.055C120.356 47.0214 118.505 47.2502 116.708 47.6205V47.6272Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M107.532 50.9799L108.944 53.6659C110.437 52.8917 111.978 52.2118 113.558 51.6531L112.545 48.7988C110.822 49.4047 109.154 50.1452 107.539 50.9799H107.532Z' fill='%23DFDFDF'/%3E%3Cpath d='M153.871 64.2342L151.622 61.151L120.612 32.292L122.004 43.8774L108.972 54.2847L123.767 58.9632L125.334 68.556L155.905 66.8798L153.871 64.2342Z' fill='white'/%3E%3Cpath d='M158.317 66.9202C158.459 66.5028 158.29 66.1864 157.973 65.9239C157.932 65.8902 157.891 65.8566 157.858 65.8229C150.656 59.044 143.447 52.2652 136.246 45.4863C131.287 40.8212 126.328 36.156 121.376 31.4842C121.085 31.2082 120.795 30.9659 120.383 30.9053L119.829 31.1813C119.633 31.5717 119.599 31.9689 119.748 32.3795C119.754 32.5007 119.761 32.6151 119.775 32.7363C120.2 36.1964 120.626 39.6566 121.072 43.11C121.119 43.4735 121.018 43.6754 120.734 43.8774C120.254 44.2072 119.795 44.5707 119.336 44.9275C115.883 47.6202 112.424 50.3062 108.986 53.0124C108.526 53.3759 107.911 53.6586 107.851 54.3722L108.128 54.9242C109.492 55.4627 110.931 55.7926 112.303 56.3109C114.161 57.0178 116.059 57.5967 117.951 58.2093C119.457 58.7007 120.93 59.2729 122.464 59.6701C122.808 59.7576 122.95 59.9326 123.011 60.2961C123.504 63.1437 124.017 65.9845 124.531 68.8253C124.673 69.6196 124.923 69.8216 125.72 69.7543C126.591 69.6802 127.456 69.5725 128.321 69.5321C131.044 69.4042 133.759 69.1686 136.475 68.9599C136.631 68.9599 136.779 68.9599 136.935 68.9464C140.394 68.6974 143.853 68.4618 147.312 68.1992C149.244 68.0579 151.169 67.8963 153.102 67.7549C154.534 67.6472 155.973 67.5395 157.405 67.4857C157.817 67.4655 158.148 67.3308 158.297 66.9135L158.317 66.9202ZM122.7 42.8945C122.389 40.3634 122.058 37.839 121.727 35.3146C121.693 34.9174 121.66 34.5135 121.619 33.9884C131.408 43.1975 141.11 52.3257 150.879 61.5146C150.555 61.555 150.433 61.4069 150.284 61.3126C145.481 58.1824 140.677 55.0521 135.867 51.9286C132.604 49.8081 129.328 47.6943 126.058 45.5805C125.97 45.5267 125.875 45.493 125.787 45.4459C124.929 44.8804 124.085 44.2947 123.213 43.7495C122.876 43.5341 122.747 43.285 122.7 42.8945ZM121.531 35.2203C121.531 35.2203 121.531 35.2203 121.538 35.2203C121.538 35.2203 121.538 35.2203 121.531 35.2203ZM121.572 35.2473C121.572 35.2473 121.619 35.2742 121.646 35.2876C121.619 35.2742 121.599 35.2607 121.572 35.2473ZM112.418 52.8306C112.269 52.8575 112.12 52.9316 111.918 52.8306C113.775 51.3833 115.606 49.9562 117.444 48.5223C118.876 47.4116 120.315 46.3075 121.727 45.1766C121.991 44.9679 122.146 45.0016 122.389 45.1631C123.815 46.0921 125.247 47.0009 126.672 47.9232C128.767 49.2964 130.854 50.6765 132.949 52.0363C134.347 52.9451 135.8 53.7798 137.171 54.729C139.056 56.0349 141.008 57.2399 142.92 58.5122C144.44 59.5153 145.967 60.5116 147.487 61.5079C147.474 61.5415 147.454 61.5752 147.44 61.6088C145.508 60.8145 143.569 60.0201 141.637 59.2123C137.847 57.6304 134.063 56.0349 130.28 54.453C130.172 54.4058 130.05 54.3789 129.942 54.3453C127.76 53.423 125.565 52.5142 123.396 51.5583C122.747 51.2756 122.133 51.2285 121.45 51.3496C118.437 51.868 115.424 52.3527 112.404 52.8441L112.418 52.8306ZM130.577 55.8936C130.564 55.8532 130.55 55.8195 130.537 55.7859C130.55 55.8195 130.564 55.8599 130.577 55.8936ZM130.456 55.6041C130.456 55.6041 130.429 55.5435 130.409 55.5099C130.422 55.5435 130.442 55.5704 130.456 55.6041ZM122.241 57.9064C119.072 56.8495 115.91 55.7993 112.749 54.7424C112.654 54.7088 112.559 54.6617 112.472 54.6213C112.458 54.6213 112.451 54.6213 112.438 54.6213C112.451 54.6213 112.465 54.6213 112.472 54.6213C112.478 54.5876 112.492 54.5539 112.499 54.5203C114.465 54.1904 116.424 53.8606 118.39 53.5307C119.383 53.3624 120.376 53.1941 121.369 53.0393C121.525 53.0124 121.727 52.8912 121.781 53.2211C122.051 54.803 122.342 56.385 122.626 58.0073C122.47 57.9669 122.355 57.9468 122.247 57.9131L122.241 57.9064ZM143.285 66.8461C140.954 67.0144 138.624 67.176 136.3 67.3443C136.144 67.3578 135.996 67.3847 135.847 67.4049C135.921 67.6001 136.029 67.7819 136.137 67.9703C136.036 67.7886 135.928 67.6001 135.847 67.4049C133.368 67.5732 130.888 67.7415 128.409 67.9098C127.76 67.9569 127.105 67.9905 126.463 68.0579C126.186 68.0848 126.091 68.004 126.037 67.7213C125.754 66.072 125.443 64.4227 125.146 62.7734C124.598 59.6768 124.051 56.5802 123.49 53.3826C125.923 54.3924 128.307 55.382 130.685 56.3648C132.341 57.0918 134.036 57.7381 135.692 58.4516C137.563 59.2595 139.448 60.0471 141.326 60.8414C142.826 61.4742 144.332 62.0935 145.846 62.7061C148.426 63.7495 150.973 64.8939 153.534 65.9979C153.52 66.0316 153.514 66.0585 153.507 66.0922C150.102 66.3413 146.697 66.5971 143.292 66.8461H143.285Z' fill='%23DFDFDF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_509_36495'%3E%3Crect width='158' height='111' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-color: #fff; background-position: 95% 100%; background-repeat: no-repeat; } .cb-pesanwarga__card a { color: #000; } .cb-pesanwarga__card::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='42' viewBox='0 0 51 42' fill='none'%3E%3Cpath d='M11.7578 41.4068C8.3879 41.4068 5.70251 40.2608 3.70163 37.9687C1.75341 35.6234 0.779297 32.5851 0.779297 28.8538C0.779297 23.4701 2.12199 18.273 4.80738 13.2624C7.54543 8.25185 10.7574 4.14745 14.4432 0.949219L23.0522 5.18688C19.9456 8.54502 17.5762 11.9032 15.9439 15.2613C14.3642 18.6194 13.5744 21.5512 13.5744 24.0564H23.0522V31.8122C23.0522 34.1042 21.9991 36.2897 19.893 38.3685C17.8394 40.3941 15.1277 41.4068 11.7578 41.4068ZM39.3774 41.4068C36.0075 41.4068 33.3221 40.2608 31.3212 37.9687C29.373 35.6234 28.3989 32.5851 28.3989 28.8538C28.3989 23.4701 29.7416 18.273 32.427 13.2624C35.1124 8.25185 38.298 4.14745 41.9838 0.949219L50.5929 5.18688C47.4862 8.54502 45.1168 11.9032 43.4845 15.2613C41.9048 18.6194 41.115 21.5512 41.115 24.0564H50.5929V31.8122C50.5929 34.1042 49.5398 36.2897 47.4336 38.3685C45.38 40.3941 42.6946 41.4068 39.3774 41.4068Z' fill='%23DC7500'/%3E%3C/svg%3E"); width: 52px; height: 42px; display: block; position: absolute; left: -4px; top: -16px; background-repeat: no-repeat; } .cb-pesanwarga__card::after { content: ""; display: block; width: 14px; height: 14px; width: 0px; height: 0px; border-style: solid; border-width: 14px 0 0 14px; border-color: transparent transparent transparent #ffffff; transform: rotate(0deg); position: absolute; right: -13px; top: 46px; } .cb-pesanwarga__card-text { font-family: "DM Sans", sans-serif; font-size: 14px; font-style: italic; font-weight: 400; line-height: 121%; display: flex; align-items: center; margin-bottom: 24px; height: 67px; } .cb-pesanwarga__card-text p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .cb-pesanwarga__card-info { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; } .cb-pesanwarga__card-info a { display: inline-block; flex: 0; margin-left: 8px; } .cb-pesanwarga-slider .slick-dotted.slick-slider { padding-bottom: 24px; } .cb-pesanwarga-slider .slick-dots { bottom: 4px; } .cb-pesanwarga-slider .slick-dots li button { border: none; width: 7px; height: 7px; opacity: 1; filter: alpha(opacity=100); background: #cccccc; } .cb-pesanwarga-slider .slick-dots li.slick-active button { background: #2c5498; opacity: 1; filter: alpha(opacity=100); } .cb-pesanwarga-slider .slick-arrow { top: 40px; width: 34px; height: 34px; background-color: rgba(0, 0, 0, 0.5); opacity: 0.65; filter: alpha(opacity=65); color: #FFFFFF; } .cb-pesanwarga-slider .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-pesanwarga-slider .slick-prev, .cb-pesanwarga-slider .slick-next { margin: 0 16px; } .cb-pesanwarga-slider .slick-prev:before, .cb-pesanwarga-slider .slick-next:before { font-size: 24px; } .cb-pesanwarga--long .cb-pesanwarga__header { display: flex; justify-content: space-between; flex-wrap: nowrap; background-color: #0066B2; align-items: center; padding-right: 16px; } .cb-pesanwarga--long .cb-pesanwarga__header--long { position: relative; height: 60px; overflow: hidden; width: 288px; } .cb-pesanwarga--long .cb-pesanwarga__header-logo-wrap { position: absolute; right: inherit; left: 38px; top: 46px; } .cb-pesanwarga--long .cb-pesanwarga__header-logo-wrap img { width: 179px; height: auto; } .cb-pesanwarga--long .cb-pesanwarga__wrapper { display: flex; padding: 18px 18px 12px; } .cb-pesanwarga--long .cb-pesanwarga__cta { border: none; align-items: flex-start; flex-flow: column; justify-content: center; font-size: 16px; line-height: 26px; gap: 10px; } .cb-pesanwarga--long .cb-pesanwarga__cta a { margin-left: 0; } .cb-pesanwarga--long .cb-pesanwarga-slider { flex: none; width: 420px; } .btn--yellow-base { background: #FCB715; color: rgba(0, 0, 0, 0.75); } .btn--yellow-base:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-base.btn--link { color: #FCB715; } .btn--yellow-light-1 { background: #fcc43f; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1.btn--link { color: #fcc43f; } .btn--yellow-light-2 { background: #fcd373; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2.btn--link { color: #fcd373; } .btn--yellow-light-3 { background: #fde3a5; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3.btn--link { color: #fde3a5; } .btn--yellow-light-4 { background: #fdefcd; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4.btn--link { color: #fdefcd; } .btn--yellow-light-5 { background: #fef7e8; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5.btn--link { color: #fef7e8; } .cb-korlantas { padding: 12px; background-image: url("../images/bg-korlantas-2026.webp"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; max-height: 500px; margin-top: 24px !important; border-radius: 8px; margin-bottom: 24px !important; } .cb-korlantas__logo { width: 270px; height: auto; margin-bottom: 30px; } .cb-korlantas .media__subtitle { color: #FCB715; } .cb-korlantas .media__title a { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; display: -moz-box; color: #FFFFFF; } .cb-korlantas .media__title a:hover { color: #FCB715; } .cb-korlantas .slick-dots li button { border: none; width: 12px; height: 12px; opacity: 1; filter: alpha(opacity=100); background: #fef7e8; } .cb-korlantas .slick-dots li.slick-active button { background: #FCB715; } .cb-korlantas .slick-arrow { top: 40px; width: 34px; height: 34px; opacity: 0.65; filter: alpha(opacity=65); color: #232323; } .cb-korlantas .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-korlantas .slick-prev, .cb-korlantas .slick-next { margin: 0 16px; } .cb-korlantas .slick-prev:before, .cb-korlantas .slick-next:before { font-size: 24px; } .color-yellow { color: #fcb715 !important; } .ph-item { position: relative; display: flex; flex-wrap: wrap; width: auto; margin-left: -6px; margin-right: -6px; overflow: hidden; direction: ltr; } .ph-item, .ph-item *, .ph-item ::after, .ph-item ::before { box-sizing: border-box; } .ph-item::before { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 1; width: 500%; margin-left: -250%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%; animation: phAnimation 0.8s linear infinite; content: " "; pointer-events: none; } .widget-nhl .ph-item::before { background: linear-gradient(to right, rgba(240, 240, 240, 0) 46%, rgba(240, 240, 240, 0.35) 50%, rgba(240, 240, 240, 0) 54%) 50% 50%; } .ph-item > * { display: flex; flex: 1 1 auto; flex-flow: column; padding-right: 6px; padding-left: 6px; } .ph-row { display: flex; flex-wrap: wrap; margin-top: -16px; } .ph-row div { height: 18px; margin-top: 16px; background-color: #f7f7f7; border-radius: 8px; } .ph-row .big, .ph-row.big div { height: 35px; } .ph-row .mid, .ph-row.mid div { height: 30px; } .ph-row .empty { background-color: rgba(255, 255, 255, 0); } .ph-col-1 { flex: 0 0 8.33333%; } .ph-col-2 { flex: 0 0 16.66667%; } .ph-col-3 { flex: 0 0 25%; } .ph-col-4 { flex: 0 0 33.33333%; } .ph-col-5 { flex: 0 0 41.66667%; } .ph-col-6 { flex: 0 0 50%; } .ph-col-7 { flex: 0 0 58.33333%; } .ph-col-8 { flex: 0 0 66.66667%; } .ph-col-9 { flex: 0 0 75%; } .ph-col-10 { flex: 0 0 83.33333%; } .ph-col-11 { flex: 0 0 91.66667%; } .ph-col-12 { flex: 0 0 100%; } [class*="ph-col"] { direction: ltr; } [class*="ph-col"] > * + .ph-row { margin-top: 0; } [class*="ph-col"] > * + * { margin-top: 16px; } .ph-avatar { position: relative; width: 100%; min-width: 60px; overflow: hidden; background-color: #f7f7f7; border-radius: 50%; } .ph-avatar::before { display: block; padding-top: 100%; content: " "; } .ph-picture { width: 100%; background-color: #f7f7f7; border-radius: 8px; } @keyframes phAnimation { 0% { transform: translate3d(-30%, 0, 0); } 100% { transform: translate3d(30%, 0, 0); } } .ratiobox__ph-holder { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; } .ph-nhl-img { flex: 0 0 32%; } .cb-detikevent { background: #f0f0f0; border-radius: 8px; max-width: 694px; width: 100%; padding: 20px 0; margin: 0; font-family: "Montserrat", Arial, Tahoma, sans-serif; box-sizing: border-box; text-rendering: auto; display: flex; flex-direction: column; gap: 16px; overflow: hidden; container-type: inline-size; } .cb-detikevent :where(*) { margin: 0; padding: 0; box-sizing: border-box; } .cb-detikevent .swiper-button-prev, .cb-detikevent .swiper-button-next { --swiper-navigation-color: #fff; --swiper-navigation-size: 40px; --swiper-navigation-sides-offset: 0px; --swiper-navigation-top-offset: 80px; background-color: rgba(0, 0, 0, 0.3); width: 40px; } .cb-detikevent .swiper-button-prev:after, .cb-detikevent .swiper-button-next:after { font-size: 25px; } .cb-detikevent.placeholder { --cbdtkevent-title: #fce7cc; --cbdtkevent-subtitle: #fff; --cbdtkevent-subtitle-size: 14px; --cbdtkevent-more: #fff; --cbdtkevent-more-text-hover: #21409a; padding-bottom: 0px; border-radius: 24px; gap: 12px; background: #21409a; } .cb-detikevent__image-placeholder { width: 100%; aspect-ratio: var(--cbdtkevent-placeholder-ratio, 16/9); display: block; position: relative; } @media screen and (min-width: 768px) { .cb-detikevent__image-placeholder { aspect-ratio: var(--cbdtkevent-placeholder-ratio, 3/1); } } .cb-detikevent__image-placeholder > img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; object-position: top; } .cb-detikevent__logo { width: auto; height: 22px; } .placeholder .cb-detikevent__logo { filter: brightness(0) invert(1); } .cb-detikevent__header { display: flex; align-items: center; flex-direction: column; padding-inline: 20px; gap: 10px; } @container (min-width: 640px) { .cb-detikevent__header { gap: 8px; flex-direction: row; justify-content: space-between; } } .cb-detikevent__name { display: flex; flex-direction: column; text-align: center; gap: 10px; } .cb-detikevent__title { font-size: 20px; font-style: normal; font-weight: 700; line-height: 15px; color: var(--cbdtkevent-title, #ee4023); } .cb-detikevent__subtitle { font-size: var(--cbdtkevent-subtitle-size, 12px); font-style: normal; font-weight: 500; line-height: 15px; color: var(--cbdtkevent-subtitle, #21409a); } .cb-detikevent__more { font-size: 12px; line-height: 24px; font-weight: 600; line-height: 16px; text-decoration: none; display: none; align-items: center; border: 1px solid var(--cbdtkevent-more, #21409a); padding: 4px 16px; gap: 10px; color: var(--cbdtkevent-more, #21409a); border-radius: 9999px; transition: all 0.3s ease; } @media (min-width: 768px) { .cb-detikevent__more { display: inline-flex; } .cb-detikevent__more:hover { background-color: var(--cbdtkevent-more, #21409a); color: var(--cbdtkevent-more-text-hover, #fff); } } .cb-detikevent__more--mobile { font-size: 12px; font-weight: 600; padding: 4px 16px; margin-inline: 16px; display: flex; justify-content: center; align-items: center; gap: 7px; border-radius: 2px; text-decoration: none; color: var(--cbdtkevent-more, #21409a); border: 1px solid var(--cbdtkevent-more, #21409a); } @media (min-width: 768px) { .cb-detikevent__more--mobile { display: none; } } .cb-detikevent__content { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; } .cb-detikevent__content.swiper { width: 100%; } .cb-detikevent__content:has(> .cb-detikevent__item:is(:nth-child(2n), :nth-child(1n))) { padding-inline: 16px; display: flex; } @media screen and (min-width: 480px) { .cb-detikevent__content:has(.cb-detikevent__item:first-child:nth-last-child(3)) { padding-inline: 16px; } } .cb-detikevent__content:has(> .cb-detikevent__item:nth-child(2n)) .cb-detikevent__item { flex: 1; } .cb-detikevent__item { display: flex; container-type: inline-size; container-name: cb-item; } .cb-detikevent__item.swiper-slide { height: auto; } .cb-detikevent__info { border-radius: 6px; overflow: hidden; background-color: #fff; font-size: 16px; line-height: 24px; font-weight: 400; display: flex; flex: 1; height: 100%; flex-direction: column; } @container cb-item (min-width: 384px) { .cb-detikevent__info { flex-direction: row; padding: 10px; gap: 16px; } } .cb-detikevent__infoimage { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; object-position: top; } @container cb-item (min-width: 384px) { .cb-detikevent__infoimage { width: 50%; border-radius: 6px; aspect-ratio: 2.3/1; } } .cb-detikevent__infotext { padding: 10px; display: flex; flex-direction: column; gap: 5px; height: 100%; } @container cb-item (min-width: 384px) { .cb-detikevent__infotext { padding: 0; width: 100%; } } .cb-detikevent__infotitle { font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; color: #21409a; text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .cb-detikevent__infodate { font-size: 12px; font-style: normal; line-height: 17px; color: #666; display: flex; align-items: flex-start; gap: 10px; text-wrap: pretty; } .cb-detikevent__infodate svg { flex-shrink: 0; margin-top: 1px; } .cb-detikevent__infodate--date { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .cb-detikevent__infoprice { font-size: 12px; font-style: normal; font-weight: 700; } .cb-detikevent__infourl { font-size: 12px; font-style: normal; font-weight: 600; line-height: 18px; letter-spacing: 0.48px; text-decoration: none; padding: 8px 16px; background-color: var(--cbdtkevent-btn, #21409a); color: #fff; border-radius: 6px; text-align: center; margin-top: auto; display: block; border: 1px solid var(--cbdtkevent-btn, #21409a); transition: all 0.3s ease; } @media (min-width: 768px) { .cb-detikevent__infourl:hover { background-color: #fff; color: var(--cbdtkevent-btn, #21409a); } } .slider-snap { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .slider-snap::-webkit-scrollbar { display: none; } .slider-snap__item { position: relative; width: 115px; scroll-snap-align: start; flex-shrink: 0; } .slider-snap__item--index .media__image { border: 1px solid #cccccc; -webkit-transition: background 0.3s ease-in-out 0s; -moz-transition: background 0.3s ease-in-out 0s; -ms-transition: background 0.3s ease-in-out 0s; -o-transition: background 0.3s ease-in-out 0s; transition: background 0.3s ease-in-out 0s; } .slider-snap__item--index:hover .media__image { background: #f0f0f0; } .slider-snap__item--index .media__text { position: absolute; top: 0; bottom: 0; width: 100%; } .slider-snap__item--index .media__text .icon { width: 40px; height: 40px; background: #EE4023; } .slider-snap__item--index .media__link { color: #EE4023; } .slider-snap__btn { position: absolute; top: 50%; width: 34px; height: 34px; z-index: 2; border: none; opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background: #999999; } .slider-snap__btn:hover { opacity: 1; filter: alpha(opacity=100); } .slider-snap__btn--prev { left: -16px; } .slider-snap__btn--next { right: -16px; } .media__icon--transparent { background: transparent; } .border-top-none { border-top: none; } .btn--yellow-base { background: #FCB715; color: rgba(0, 0, 0, 0.75); } .btn--yellow-base:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-base.btn--link { color: #FCB715; } .btn--yellow-light-1 { background: #fcc43f; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-1.btn--link { color: #fcc43f; } .btn--yellow-light-2 { background: #fcd373; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-2.btn--link { color: #fcd373; } .btn--yellow-light-3 { background: #fde3a5; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-3.btn--link { color: #fde3a5; } .btn--yellow-light-4 { background: #fdefcd; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-4.btn--link { color: #fdefcd; } .btn--yellow-light-5 { background: #fef7e8; color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--yellow-light-5.btn--link { color: #fef7e8; } .cb-komdigi { padding: 12px; background-image: url("../images/bg-cb-komdigi.webp"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; max-height: 600px; margin-top: 24px !important; border-radius: 8px; margin-bottom: 24px !important; } .cb-komdigi-btn { width: 100%; justify-content: center; display: flex; margin-bottom: 15px; } .cb-komdigi__logo { width: 230px; height: auto; margin-top: 35px; margin-bottom: 12px; } .cb-komdigi__desc { position: relative; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; font-weight: 500; background-color: rgba(0, 0, 0, 0.4); padding: 8px; border-radius: 8px; } .cb-komdigi .media__subtitle { color: #FCB715; } .cb-komdigi .media__title a { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; display: -moz-box; color: #FFFFFF; } .cb-komdigi .media__title a:hover { color: #FCB715; } .color-yellow { color: #fcb715 !important; } .cb-kmp { position: relative; margin-top: 24px !important; padding: 12px; overflow: hidden; background: url("../images/bg-cb-kmp.webp") #E3F1FF no-repeat; background-size: cover; border-radius: 8px; max-height: 510px; margin-bottom: 24px !important; } .cb-kmp__desc { padding: 0; background: rgba(255, 255, 255, 0.5); text-align: left; display: flex; align-content: center; flex-wrap: nowrap; align-items: center; font-size: 12px; padding: 10px; border-radius: 10px; font-weight: 400; font-style: normal; gap: 10px; } .cb-kmp__logo { width: 100%; display: flex; align-items: center; justify-content: center; } .cb-kmp__logo img { width: 209px; margin: 10px 0 0; height: auto; } @media only screen and (max-width: 325px) { .cb-kmp__logo img { width: 143px; } } .cb-kmp .slick-dots li button { border: none; width: 7px; height: 7px; background-color: #fff; opacity: 1; filter: alpha(opacity=100); } .cb-kmp .slick-dots li.slick-active button { background-color: #fcc43f; } .cb-kmp .slick-arrow { top: 40px; width: 34px; height: 34px; opacity: 0.65; filter: alpha(opacity=65); } .cb-kmp .slick-arrow:hover { opacity: 1; filter: alpha(opacity=100); } .cb-kmp .slick-prev, .cb-kmp .slick-next { margin: 0 16px; } .cb-kmp .slick-prev:before, .cb-kmp .slick-next:before { font-size: 24px; } .cb-kmp .kmp-slider { background-color: rgba(255, 255, 255, 0.1); margin-bottom: -12px; } .cb-kmp .kmp-slider a.media__link { color: #1f3368; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .cb-kmp .kmp-slider a.media__link:hover { color: #3f5daf; } .cb-kmp .flex-center-cb { display: flex; justify-content: center; } .btn--kmp { border: none !important; background: #FDB813; color: #1f3368; } .btn--kmp:hover { color: #fff; opacity: 1; background: #a37302; }