@charset "UTF-8"; @import url(../../../assets/css/cb-detikevent.css); 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 { width: 100%; padding-left: calc(26px / 1.444444444444); padding-right: calc(26px / 1.444444444444); margin-right: auto; margin-left: auto; } /*--------------------------------------------------------------------------------*/ /*GRID 12 COLUMNS*/ /*--------------------------------------------------------------------------------*/ .grid-row { display: flex; flex-wrap: wrap; margin-left: calc(-26px / 4.3333333333); margin-right: calc(-26px / 4.3333333333); } .no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > .column, .no-gutter > [class*="column-"] { padding-right: 0; padding-left: 0; } .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column, .column-auto { position: relative; width: 100%; padding-left: calc(26px / 4.3333333333); padding-right: calc(26px / 4.3333333333); } .column { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .column-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .column-1 { -ms-flex: calc(1 / 12); flex: 0 0 calc(100% / (12 / 1)); max-width: calc(100% / (12 / 1)); } .column-2 { -ms-flex: calc(2 / 12); flex: 0 0 calc(100% / (12 / 2)); max-width: calc(100% / (12 / 2)); } .column-3 { -ms-flex: calc(3 / 12); flex: 0 0 calc(100% / (12 / 3)); max-width: calc(100% / (12 / 3)); } .column-4 { -ms-flex: calc(4 / 12); flex: 0 0 calc(100% / (12 / 4)); max-width: calc(100% / (12 / 4)); } .column-5 { -ms-flex: calc(5 / 12); flex: 0 0 calc(100% / (12 / 5)); max-width: calc(100% / (12 / 5)); } .column-6 { -ms-flex: calc(6 / 12); flex: 0 0 calc(100% / (12 / 6)); max-width: calc(100% / (12 / 6)); } .column-7 { -ms-flex: calc(7 / 12); flex: 0 0 calc(100% / (12 / 7)); max-width: calc(100% / (12 / 7)); } .column-8 { -ms-flex: calc(8 / 12); flex: 0 0 calc(100% / (12 / 8)); max-width: calc(100% / (12 / 8)); } .column-9 { -ms-flex: calc(9 / 12); flex: 0 0 calc(100% / (12 / 9)); max-width: calc(100% / (12 / 9)); } .column-10 { -ms-flex: calc(10 / 12); flex: 0 0 calc(100% / (12 / 10)); max-width: calc(100% / (12 / 10)); } .column-11 { -ms-flex: calc(11 / 12); flex: 0 0 calc(100% / (12 / 11)); max-width: calc(100% / (12 / 11)); } .column-12 { -ms-flex: calc(12 / 12); flex: 0 0 calc(100% / (12 / 12)); max-width: calc(100% / (12 / 12)); } /*--------------------------------------------------------------------------------*/ /*TABLE*/ /*--------------------------------------------------------------------------------*/ table th, table td { vertical-align: top; } table thead th { vertical-align: bottom; border-bottom: 2px solid #b3b3b3; } table tbody + tbody { border-top: 2px solid #b3b3b3; } table th { border: 1px solid #b3b3b3; background: #f2f2f2; padding: 10px; text-align: left; } table td { border: 1px solid #b3b3b3; padding: 5px 10px; } .table-wrap { display: block; width: 100%; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap th, .table-wrap td { white-space: nowrap; } .table-strip tr:nth-of-type(odd) { background: #f7f7f7; } /*--------------------------------------------------------------------------------*/ /*BASE BRAND COLORS*/ /*--------------------------------------------------------------------------------*/ .color-utility-base { color: #6D8591 !important; } .box-utility-base { color: #4c5d65 !important; background: #e7ebed; border: 1px solid #b6c2c8; padding: 12px 16px; } .box-utility-base a { color: #415057 !important; } .box-utility-base a:hover { text-decoration: underline; } .color-utility-info { color: #2099d6 !important; } .box-utility-info { color: #166993 !important; background: #d4ecf9; border: 1px solid #88cbed; padding: 12px 16px; } .box-utility-info a { color: #135a7d !important; } .box-utility-info a:hover { text-decoration: underline; } .color-utility-success { color: #11aa3d !important; } .box-utility-success { color: #0a6424 !important; background: #9cf5b5; border: 1px solid #4ded7b; padding: 12px 16px; } .box-utility-success a { color: #084d1c !important; } .box-utility-success a:hover { text-decoration: underline; } .color-utility-warning { color: #FCB715 !important; } .box-utility-warning { color: #c28902 !important; background: #fff8e8; border: 1px solid #fede93; padding: 12px 16px; } .box-utility-warning a { color: #a97702 !important; } .box-utility-warning a:hover { text-decoration: underline; } .color-utility-error { color: #FF0000 !important; } .box-utility-error { color: #b30000 !important; background: #ffd6d6; border: 1px solid #ff8080; padding: 12px 16px; } .box-utility-error a { color: #990000 !important; } .box-utility-error a:hover { text-decoration: underline; } /*--------------------------------------------------------------------------------*/ /*IMAGES STYLE*/ /*--------------------------------------------------------------------------------*/ .lqd, .lqd_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } .img-xxs { width: 40px !important; } .img-xs { width: 80px !important; } .img-sm { width: 100px !important; } .img-md { width: 200px !important; } .img-lg { width: 400px !important; } .img-fluid { width: 100% !important; } .img-fluid img { width: 100%; } .lqd_img { position: absolute; width: 150%; height: 150%; top: -25%; left: -25%; z-index: 0; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .lqd_block { overflow: hidden; } .lqd img { display: none; } /*--------------------------------------------------------------------------------*/ /*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% + 35px) !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, textarea.tagsinput { height: auto; } button { cursor: pointer; background: #f0f0f0; color: #000000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } label { display: inline-block; margin-top: 8px; margin-bottom: 8px; font-size: 14px; } .form-check label { margin: 0; } .form-inline label { display: inline-block; margin-right: 4px; margin-top: 0; margin-bottom: 0; } .form-check--inline label { line-height: 2; } label a { color: var(--kuler-1); position: relative; z-index: 2; } .form-inline { align-items: center; } .form-block { position: relative; margin-bottom: 12px; } .form-block--error .tagsinput { border-color: #FF0000; background: #fae9ec; } .form-check { position: relative; display: block; padding-left: 24px; } .form-check__input { margin-left: -25px; position: absolute; z-index: 2; 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, .tagsinput { display: block; width: 100%; height: 42px; padding: 8px 12px; border: 1px solid #e6e6e6; line-height: 1.4; background-color: #FFFFFF; color: #333333; font-size: 14px; -webkit-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -moz-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -ms-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; -o-transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; } .form-element:focus, .tagsinput:focus { border-color: #cccccc; } .form-element[type="date"], .tagsinput[type="date"] { padding-top: 7px; padding-bottom: 7px; } .form-element--error, .form-element--error:focus { color: #b30000 !important; background: #ffd6d6; border-color: #ff8080; } .form-inline .form-element, .form-inline .tagsinput { display: inline-block; width: auto; vertical-align: middle; } .form-rounded .form-element, .form-rounded .tagsinput { border-radius: 24px; } .form-gray .form-element, .form-gray .tagsinput { background-color: #f7f7f7; } .form-file { position: relative; width: 100%; height: 42px; padding: 8px 12px 0 20px; margin: 0; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; font-size: 16px; } .form-file:before { position: absolute !important; left: 0; top: 0; line-height: 1.4; content: 'Pilih file'; z-index: 1; font-size: 16px; display: inline-block; line-height: 1.4; padding: 8px 16px; text-align: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; background: #e6e6e6; color: #000000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .form-file:after { content: ""; position: absolute; left: 0; top: 0; width: 117px; height: 37px; background: #fff; } .form-file__input { position: absolute; left: 12px; } .form-element:disabled, .tagsinput:disabled, .form-element[readonly], .tagsinput[readonly], .form-gray .form-element:disabled, .form-gray .tagsinput:disabled, .form-gray .form-element[readonly], .form-gray .tagsinput[readonly] { background-color: #f0f0f0; } /*--------------------------------------------------------------------------------*/ /*BUTTONS & LABELS DEFAULT STYLING*/ /*--------------------------------------------------------------------------------*/ .btn, .label { position: relative; font-size: 16px; display: inline-flex; align-items: center; line-height: 1.4; padding: 8px 16px; justify-content: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; } .btn--default, .label--default { background: #f0f0f0; color: #000000; } .btn--rounded, .label--rounded { padding-left: 24px; padding-right: 24px; border-radius: 24px; } .btn--sm, .label--sm { font-size: 12px; padding: calc(12px / 3) 12px; } .btn--md, .label--md { font-size: 14px; padding-top: 6px; padding-bottom: 6px; } .btn--lg, .label--lg { font-size: 20px; padding: 8px 32px; } /*--------------------------------------------------------------------------------*/ /*BUTTON & LABEL STYLING VARIATIONS*/ /*--------------------------------------------------------------------------------*/ .btn:hover { color: #000000; opacity: 0.8; filter: alpha(opacity=80); } .btn--rounded.btn--sm { padding-left: 16px; padding-right: 16px; border-radius: 16px; } .btn--rounded.btn--lg { padding-left: 48px; padding-right: 48px; border-radius: 32px; } .btn--default.btn--outline { border: 1px solid #666666; color: #666666; } .btn--default.btn--link { color: #007cbd; } .btn--outline { border: 1px solid #000000; color: #000000; } .btn--link:hover { text-decoration: underline; opacity: 1; filter: alpha(opacity=100); } .btn--outline, .btn--link { background: transparent !important; } .btn--block { display: block; text-align: center; width: 100%; } .form-inline .btn { margin-bottom: 0; } .form-rounded .btn { padding-left: 24px; padding-right: 24px; border-radius: 24px; } .label { cursor: inherit; } .label--rounded.label--sm { padding-left: 16px; padding-right: 16px; border-radius: 16px; } .label--rounded.label--lg { padding-left: 48px; padding-right: 48px; border-radius: 32px; } /*--------------------------------------------------------------------------------*/ .btn--sosmed-instagram { color: #FFFFFF; border: none; background: #5851DB; /* Old browsers */ background: -moz-radial-gradient(left bottom, ellipse cover, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* FF3.6+ */ background: -webkit-radial-gradient(left bottom, ellipse cover, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at left bottom, #ffdc80 15%, #e1306c 55%, #5851db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top_color', endColorstr='$bottom_color',GradientType=1 ); /* IE6-9 */ } .btn--sosmed-instagram:hover { color: #FFFFFF; border: none; } .pagination { display: block; font-size: 14px; } .pagination a { text-align: center; display: inline-block; padding: 4px 8px; } .pagination a:first-child { margin-right: 16px; } .pagination a:last-child { margin-left: 16px; } .pagination__item:hover { background: #f0f0f0; color: #000000; border-radius: 4px; } .pagination__item--active, .pagination__item--active:hover { background: var(--kuler-1); color: #FFFFFF; border-radius: 4px; } .pagination__range { letter-spacing: 4px; background: transparent; } @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: 17px; } .sticky-share__wrap .icon-twitter:before { width: 14px; 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; } .copy_url .notif.url_copied { display: inline-block; bottom: 135%; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .livereport_notif { text-align: center; padding-top: 16px; z-index: 3; } .livereport_notif a:hover i { transform: rotate(360deg); transition: 2s; } .breaking-sticky { visibility: hidden; z-index: 5; position: fixed; left: -100%; right: 0; height: 0; top: 88px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .breaking-sticky--sticked { visibility: visible; left: 0px; top: 88px; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .breaking-sticky .media__text { overflow: hidden; } .breaking-sticky .breaking-detikpagi .media__text { background: none; display: block; } .breaking-sticky .media__title { white-space: nowrap; margin-left: -10px; overflow: hidden; padding: 10px 0; line-height: normal; font-size: 14px; } .breaking-sticky .media__link { color: white; } .breaking-sticky .media__label { background: #FF0000; border-radius: 0; -webkit-transform: skew(-15deg, 0deg); -moz-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); left: -8px; top: auto; padding: 10px 20px 10px 24px; position: relative; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.8); } .breaking-detikpagi { visibility: hidden; left: -100%; width: 100%; height: 62px !important; background: #ff4c05 url("../images/detikpagi-new-bg-m.svg") no-repeat top; background-size: 101%; bottom: 100px; position: fixed; z-index: 10; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .breaking-detikpagi--livesore-liveshop { background: #17b8ca url("../images/detiksore-live-liveshoping.svg") no-repeat top; background-size: 101%; } .breaking-detikpagi--livepagi-liveshop { background: #ff4c05 url("../images/detikpagi-live-liveshoping.svg") no-repeat top; background-size: 101%; } .breaking-detikpagi--sore { background: #17b8ca url("../images/detiksore-new-bg-m.svg") no-repeat top; background-size: 101%; } .breaking-detikpagi--drooftalk { background: #020202 url("../images/bg-drooftalk.webp") no-repeat top; background-size: 101%; } .breaking-detikpagi--liveshop { background: unset; bottom: 180px !important; z-index: 28 !important; } .breaking-detikpagi--liveshop .bg-liveshop-top { position: relative; top: 44px; z-index: 4; left: 16px; } .breaking-detikpagi--liveshop .bg-liveshop-bottom { position: relative; top: -15px; z-index: 4; left: 16px; } .breaking-detikpagi--liveshop .breaking-detikpagi__close { top: 45px; } .breaking-sticky .breaking-detikpagi { bottom: auto; } .breaking-detikpagi--sticked { visibility: visible; left: 0; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .breaking-detikpagi__content { border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .breaking-detikpagi__close { position: absolute; z-index: 5; width: 27px; height: 27px; right: 0; top: 0; color: #FFFFFF; } .breaking-detikpagi .media--left { height: 72px !important; } .breaking-detikpagi .media--left .media__image { width: 110px; height: 80px; z-index: 3; } .breaking-detikpagi .mt-7 { margin-top: 7px; } .detikpagi-live { margin-top: 8px; } .breaking-detikpagi--drooftalk .detikpagi-live { margin-left: 6px; display: inline-block; } .detikpagi-live span { position: relative; background: #ffe600; display: inline-block; padding: 0 8px 0 20px; color: #EE4023; font-size: 9px; border-radius: 12px; } .breaking-detikpagi--drooftalk .detikpagi-live span { color: #232323; } .detikpagi-live span:before { content: ""; width: 7px; height: 7px; position: absolute; top: 3px; left: 7px; overflow: hidden; animation: live-detikpagi 1s; -moz-animation: live-detikpagi 1s infinite; -webkit-animation: live-detikpagi 1s infinite; background: #C72026; } .detikpagi-live__body { display: flex; align-items: center; gap: 16px; margin-left: 12px; } .breaking-detikpagi--drooftalk .detikpagi-live__body { margin-left: -6px; } .detikpagi-live__body__left { margin-top: 5px; } .detikpagi-live__body__right { display: flex; gap: 12px; align-items: center; margin-right: 16px; width: 100%; } .breaking-detikpagi--drooftalk .detikpagi-live__body__right { margin-top: -12px; } .detikpagi-live__body__right__text { font-weight: 600; font-size: 11px; color: #ffffff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 80%; margin-top: -7px; } .detikpagi-live__body__right__button { width: 20%; } .detikpagi-live__body__right__button__play { display: block; padding: 2px 0 8px; } .detikpagi-live__body__right__button__pause { display: none; padding: 2px 0 8px; } .detikpagi-live__body__img { padding-top: 15px; } @keyframes live-detikpagi { 0% { background: #fcc43f; } 50% { background: #C72026; } 100% { background: #fcc43f; } } .today-recap-title { display: inline-block; font-size: 18px; -webkit-transform: skew(15deg); -moz-transform: skew(15deg); -ms-transform: skew(15deg); -o-transform: skew(15deg); transform: skew(15deg); } .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: 14px; height: 14px; border-radius: 100%; background: #ccc; } .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; } .header { display: flex; padding: 8px 0 0 0; justify-content: space-between; align-items: center; background: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); position: sticky; position: -webkit-sticky; top: 0; z-index: 26; width: 100%; line-height: 1; } .header__top { width: 100%; display: block; } .header__left { display: flex; align-items: center; left: -12px; } .header__right { display: flex; height: 41px; } .header__brand { height: 24px; } .header__brand img { height: 100%; } .header__icon { width: 43px; font-size: 35px; padding: 0 0 0 8px; position: relative; } .header__icon--live { color: #21409A; } .header__icon--notif { color: #999999; } .menu-button { cursor: pointer; height: 45px; width: 40px; position: relative; } .menu-button__wrap { position: absolute; top: 15px; left: 12px; } .menu-button span { cursor: pointer; height: 2px; width: 20px; background: #21409A; position: absolute; display: block; border-radius: 10px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .menu-button span:nth-child(1) { top: 0px; } .menu-button span:nth-child(2) { top: 7px; } .menu-button span:nth-child(3) { top: 14px; width: 14px; } .js-menu-active .menu-button span { background: #FF0000; } .js-menu-active .menu-button span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .js-menu-active .menu-button span:nth-child(2) { opacity: 0; left: -60px; } .js-menu-active .menu-button span:nth-child(3) { top: 8px; width: 20px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } @keyframes top-x { 0% { transform: translateY(-8px) rotate(0); } 50% { transform: translateY(0px) rotate(0); } 100% { transform: translateY(0px) rotate(45deg); } } @keyframes bottom-x { 0% { transfrom: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(0); } 100% { transform: translateY(-8px) rotate(-45deg); } } @keyframes bottom-x2 { 0% { transfrom: translateY(5px) rotate(0); width: 18px; } 50% { transform: translateY(0px) rotate(0); } 100% { transform: translateY(0px) rotate(-45deg); } } @keyframes undo-top { 0% { transform: translateY(0px) rotate(45deg); } 50% { transform: translateY(0px) rotate(0); } 100% { transform: translateY(-8px) rotate(0); } } @keyframes undo-bottom { 0% { transform: translateY(-8px) rotate(-45deg); } 50% { transform: translateY(-8px) rotate(0); } 100% { transfrom: translateY(0px) rotate(0); } } .notif__balon { position: absolute; width: 22px; height: 22px; padding: 4px; right: -4px; top: 0; z-index: 1; border-radius: 50%; background: #FF0000; color: #FFFFFF; font-size: 12px; } .headline { margin: 12px calc(-26px / 4.3333333333) 20px; overflow: hidden; border-radius: 8px; } .headline a { color: #FFFFFF; } .headline--video h2.media__title a { position: relative; } .headline .media__image { margin-bottom: 0; background: transparent; } .headline.headline--breakingnews .media__image { width: 100%; background: transparent; } .headline .media__text { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; justify-content: center; } .headline.headline--video .media__text, .headline.headline--breakingnews .media__text { width: 100%; height: 154px; } .headline .media__title { flex: none; font-size: 20px; } .headline.headline--breakingnews .media__title, .headline.headline--video .media__title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .headline.headline--breakingnews .media__title a, .headline.headline--video .media__title a { display: block; display: -webkit-box; max-width: 100%; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .headline.headline--video .media__title a { -webkit-line-clamp: 3; } .headline.headline--breakingnews .media__title { height: 88px; } .headline.headline--breakingnews .media__title a { -webkit-line-clamp: 3; } .headline .media__subtitle, .headline .detail__subtitle { color: #fcc43f; } .headline .media__subtitle a, .headline .detail__subtitle a { color: #fcc43f; } .headline .media__date { color: #f7f7f7; } .headline.headline--breakingnews .media__label { background: #FF0000; border-radius: 6px; -webkit-transform: skew(-15deg, 0deg); -moz-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); left: -20px; top: -20px; padding: 12px 20px 8px 24px; position: relative; margin-bottom: -5px; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.8); } .headline .media--text-overlay .media__text { padding: 15% 16px 16px; min-height: 160px; } /*--------------------------------------------------------------------------------*/ /*LIST CONTENT GENERAL*/ /*--------------------------------------------------------------------------------*/ .list-content { padding-left: 0; margin-top: 0; margin-bottom: 0; } .list-content__item { position: relative; width: 100%; padding-top: 0; padding-bottom: 8px; margin-bottom: 8px; } .list-content__item:first-child { margin-top: 8px; } .list-content--column .list-content__item:first-child { margin-top: 0; } .list-content__item:last-child { margin-bottom: 0; } .list-content--column .list-content__item { padding-bottom: 12px; margin-bottom: 12px; } .list-content__item .page__share { position: absolute; right: 0; } .list-content__title { margin: 0; font-size: 14px; } .list-content__title > a { display: block; } .list-content--column { margin-top: 8px; } .list-content--bordered .list-content__item { border-bottom: 1px solid #f0f0f0; } .list-content--bordered .list-content__item:last-child { border: none; } .list-content--bordered.list-content--column .list-content__item { border: none; } .list-content--bordered.list-content--column .list-content__item:after { content: ""; position: absolute; left: calc(26px / 2); right: calc(26px / 2); bottom: 0; height: 1px; background: #f0f0f0; } .media { position: relative; overflow: hidden; flex: 1; } .list-content--equal-height .media { background: #FFFFFF; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; } .media__image { position: relative; margin-bottom: 12px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); background: #f0f0f0; } .media__image.float-vid.flowed { -webkit-mask-image: unset; } .media__image a { display: block; } .media__text { flex: 1; position: static; font-size: 12px; color: #666666; } .list-content--equal-height .media__text { padding-left: 12px; padding-right: 12px; padding-bottom: 32px; } .media__title { margin: 0; flex: 1; font-size: 14px; } .media__subtitle, .detail__subtitle { display: inline-block; margin-top: 0; margin-bottom: 4px; font-size: 12px; } .media__subtitle a, .detail__subtitle a { position: relative; z-index: 3; } .media__subtitle a:hover, .detail__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; } .media--text-overlay .media__subtitle, .media--text-overlay .detail__subtitle { color: #fcc43f; } .media--text-overlay .media__subtitle a, .media--text-overlay .detail__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; } /*--------------------------------------------------------------------------------*/ /*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; } .ads-slot--smb { height: 50px; z-index: 2; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); position: sticky; position: -webkit-sticky; top: 0; } .ads-slot-mb-container { width: 100%; height: 506px; position: absolute; background-attachment: scroll; background-position: left top; background-size: cover; clip: rect(auto, auto, auto, auto); justify-content: center; } .ads-slot--mb { width: 320px; height: 480px; margin-top: 26px !important; position: fixed !important; z-index: 1 !important; background-image: url("../../../assets/images/ads/mega-billboard-placeholder.webp"); background-repeat: no-repeat; background-position: center center; } .ads-slot--mb iframe { border: 0px; vertical-align: bottom; width: 320px; height: 480px; } .ads-slot--bb { width: 100%; height: 156px; background-image: url("../../../assets/images/ads/billboard-placeholder.webp"); background-repeat: no-repeat; background-position: center center; position: relative; z-index: 1; margin: 0 auto; background-color: #f7f7f7; } .ads-slot--bb .tvcbillboard + div { position: absolute; } .ads-slot--sb { width: 300px; height: 250px; } .ads-slot--ib { width: 320px; height: 50px; } .ads-slot--pd { width: 320px; height: 180px; } .megabillboard { height: 524px; position: relative; } .megabillboard__swipe { position: absolute; left: 0; bottom: 0; right: 0; } .megabillboard__swipe p { display: block; margin: 0px; font-size: 10px; padding: 2px 0px; background: var(--kuler-1); } .megabillboard-close { cursor: pointer; position: fixed; right: calc(50% - 160px); padding: 5px 0; z-index: 2; color: var(--kuler-1); font-size: 12px; } .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; } .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-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-end { align-items: flex-end !important; } /*--------------------------------------------------------------------------------*/ /*EXTENDS*/ /*--------------------------------------------------------------------------------*/ .font-family-base, .font-family-base-2, .font-heading, .font-paragraph, .form-element, .tagsinput, .pagination, .breaking-sticky .media__link, .breaking-sticky .media__label, .headline.headline--breakingnews .media__label, .list-content__title, .media__title, .media__subtitle, .detail__subtitle, .box__title, .section__title, .navbar-second .nav a, .livereport-content .media__date, .detail__artikel-selanjutnya .detail__title, .detail__newstag-title, .detail__multiple-paging, .detail-header-haji__price span, .new-listing__footer span { font-weight: 400; } .font-base-light, .font-heading-light, .media__date, .ads-slot:before, .smartbanner_new, .box__title--sponsored-box, .detail__body-tag .nav__item, .footer .nav, .footer__copy, .detail__date, .detail__media-caption, .static__body-text p, .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, .today-recap-title, .headline .media__title, .text-list--title, .smartbanner_new strong, .smartbanner_new .get_app, .box__title, .section__title, .page__title, .nav, .terpopuler .media__title, .redirect__ring-seconds, .detail__title, .detail__body-text > a, .detail__body-text p > a, .detail__anchor-numb, .detail__multiple-link, .detail__artikel-selanjutnya-title, .detail-header-haji__author, .detail-header-haji__price, .linksisip a, .embed_video .title, .box-article__title, .list-link a, .accordion-title, .nav-haji, .nav-haji-right, .new-listing__footer, .kategori-travel__title, .cb-tanya-ustaz__slider-item-title { font-weight: 600; } .font-base-bold, .font-heading-bold, .megabillboard-close, .modal-body__title, .nav--bold .nav-item, .terpopuler .nav, .livereport-content .media__title, .koleksi-wide .media__title, .article__recomendation .media__label, .linksisip strong, .quotesisip blockquote, .banner-haji__title, .konten-nav__title, .koleksi__header-title { font-weight: 700; } .font-family-base, .font-paragraph, .footer .nav, .detail__date, .detail__media-caption, .quotesisip, .profile__box__bottom, .detailFoto__title { 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, .breaking-sticky .media__link, .breaking-sticky .media__label, .detikpagi-live__body__right__text, .headline.headline--breakingnews .media__label, .list-content__title, .media__title, .media__subtitle, .detail__subtitle, .media__author, .text-list, .ads-slot:before, .smartbanner_new, .modal-body__title, .box__title, .section__title, .box__header a, .box__title--sponsored-box, .page__header-social, .page__title, .page__breadcrumb, .page__follow, .page__indeks-info, .page__share, .nav, .detail__body-tag .nav__item, .accordion > .list-content__item, .livereport-content .media__title, .livereport-content .media__date, .article__recomendation .media__label, .media__label--live, .text__body, .label--hikmah, .footer, .footer-title, .detail__title, .detail__author, .detail__multiple .detail__anchor, .detail__newstag-title, .detail__multiple-link, .detail__artikel-selanjutnya-title, .detail-header-haji, .detail-header-haji__price, .linksisip, .embed_video, .profile__box__top, .profile-box, .banner-haji__text, .konten-nav__title, .box-article, .list-link a, .toast, .jadwal__title, .jadwal__sub, .jadwal__body__top__right, .jadwal__body__top__right__list__dropdown__search input, .jadwal__body__top__right__list__dropdown__items, .jadwal__body__top__right__list__dropdown__active, .jadwal__body__table, .jadwal__body__footer__left, .share, .imsakiyah, .wording, .surah__search, .surah__search__body__search input, .surah__search__body__search input::placeholder, .surah__search__body__search__suggest__item a, .list__surah, .describe__title, .describe__sub, .describe__point, .describe__arabic, .surah__choose, .detail__surah__sponsor__text, .surah__button, .surah__button2, .surah__button2__title h1, .surah__detail, .zakat-wrap, .zakat-title, .zakat-form .btn, .kalkulator-waris__title, .kalkulator-waris__rp, .kalkulator-waris__header, .kalkulator-waris__body__title, .kalkulator-waris__body__option, .kalkulator-waris__body__bottom__title, .kalkulator-waris__body__bottom__line__select select, .kalkulator-waris__body__bottom__line__total input, .kalkulator-waris__body__bottom__line__total input::placeholder, .kalkulator-waris__body__button__reset, .kalkulator-waris__body__button__hitung, .hasil-waris, .hasil-waris__bottom__button, .cb-pendamping__body, .box-planner, .tab-filter-quran, .bookmark-list__item, .collection-list__item, .box-choice-planner, .box-planner-plan, .choice-program .box-planner-plan, .tabbing .surah__search__body__search input, .tabbing .surah__search__body__search input::placeholder, .box-progress, .modal-delete-collection, .modal-button-more, .modal-add-collection, .modal-info-tajwid, .notification-status, .box-detail-collection, .list-detail-collection__button, .modal-help, .header-quran, .arah-kiblat, .kartu__title, .kartu__left__name, .kartu__left__button, .kartu__right, .kartu__right__text, .kartu__right__choose, .kartu__right__scroll__items__item__name, .kartu__sample, .kartu__photowall, .modal__title, .modal__desc, .text__body-box, .static__body, .koleksi__header, .input-style, .input-style::placeholder, .box-hasil, .nav-haji, .nav-haji-right, .hikmah-otd__content, .wording-login, .wording-login a, .cb-ngaji, .col-search, .new-listing__footer, .kategori-travel, .tanya-ustaz-cover, .tanya-ustaz-step, .tanya-ustaz-kategori, .tanya-ustaz-kategori__list, .tanya-ustaz-diskusi, .tanya-ustaz-diskusi__list, .ustaz-list .cb-tanya-ustaz__foto .media__desc, .list-ustaz, .profile__form__name, .profile__form__edit, .profile-ustaz, .tab, .tab-pill, .list-kategori, .notif, .cb-tanya-ustaz, .list__berita__title, .list__berita__item__bottom__title, .list__berita__item__bottom__date, .cb-detikpagi__right__text, .cb-detikpagi__right__button__text a, .collapsible__top { font-family: Montserrat-FF, Arial, Tahoma, sans-serif; } .breaking-sticky .media__text, .media--list, .ads-slot:before, .ads-slot-mb-container, .display-flex, .breaking-detikpagi__close, .notif__balon, .ads-slot, .ads-slot--bb, .smartbanner_new .sb_close, .align-middle, .box__title--sponsored-box a, .sticky-share, .box__title--sponsored-box, .navbar-first, .footer__app-store, .detail__newstag { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .form-inline, .list-content__item, .display-flex-wrap, .nav, .detail__body-tag .nav, .nav--center, .nav--right, .static__body-form .steps { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; } .notification-overlay, .smartbanner_new, .flex-between, .box__header, .section__header, .box__title--sponsored, .page__header, .page__nav, .page__breadcrumb, .page__follow, .page__indeks-info, .list-link a, .foto__anchor, .check-list .form-check label, .cb-tanya-ustaz__body, .cb-tanya-ustaz__kategori { justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: wrap; align-items: center; } .detikpagi-live, .header__icon, .ads-slot, .megabillboard__swipe p, .text-center, .cb-mostpop .text-list__data, .cb-commented .text-list__data, .detail__newstag, .banner-haji, .konten-nav, .icon-item, .arah-kiblat, .cb-tanya-ustaz__slider { text-align: center !important; } .text-right { text-align: right !important; } .text-style-italic { font-style: italic !important; } .breaking-detikpagi__close, .notif__balon, .ads-slot, .ads-slot--bb, .smartbanner_new .sb_close, .align-middle, .box__title--sponsored-box a, .sticky-share { align-items: center; justify-content: center; } .box-utility-base, .box-utility-info, .box-utility-success, .box-utility-warning, .box-utility-error, .form-check--checkbox label:before, .form-check--checkbox label:after, .form-element, .tagsinput, .notification-overlay, .copy_url .notif, .media__label, .media__icon, .media--image-radius .media__image, .slick-slide-thumbnail .slick-slide, .dropdown-menu__content, .box-background, .detail__body-tag .nav__item, .detail-header-haji__act .dropdown-menu .detail__share, .tagsinput .tag, .cb-tanya-ustaz__kategori-item { border-radius: 4px; } .form-check--radio label:before, .form-check--radio label:after, .detikpagi-live span:before, .media__image--circle, .media__author-image-avatar, .media--image-circle .media__image, .smartbanner_new .sb_close, .circle, .lds-ring div, .slick-dots li button, .nav__item--new a:after, .icon-item .comment-count, .detail__author-image-avatar, .close-modal, .static__body-form .numb, .cb-tanya-ustaz__slider .slick-arrow { border-radius: 50%; } .color-black, .zakat-form__col_tab_2, .zakat-hasil__title, .zakat-keterangan p { color: #000000; } .color-black-light-4 { color: #cccccc; } .color-white, .breaking-sticky .media__text, .megabillboard__swipe p, .label--hikmah, .detail-header-haji__price, .banner-haji__text, .konten-nav, .konten-nav a, .box-article__title, .toast, .arah-kiblat, .btn--indeks, .btn--indeks:hover, .btn--indeks-alt, .btn--indeks-alt:hover, .new-listing__footer, .tanya-ustaz-cover, .tab-pill a.active, .cb-tanya-ustaz, .cb-tanya-ustaz__next:hover, .expert .slider .slick-arrow { color: #FFFFFF; } .color-gray { color: #6D8591; } .color-gray-light-1 { color: #879ba5; } .color-blue-base, .color-blue, .smartbanner_new .sb_close { color: #21409A; } .color-orange-light-1, .color-orange { color: #ef672f; } .color-red-light-2, .color-red { color: #FF0000; } .color-purple-light-2, .color-purple, .section__header, .media__subtitle a, .detail__subtitle a, .detail__multiple-paging .text-list--title { 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, .smartbanner_new, .sticky-share__wrap, .close-modal, .cb-tanya-ustaz__kategori-item, .cb-tanya-ustaz__slider .slick-dots li button, .cb-tanya-ustaz__slider .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, .detail__media-image-wrap img, .area_ipt img { position: absolute; max-height: 100%; max-width: 100%; width: auto; height: auto; z-index: 1; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } /*MODAL STYLE*/ .modal-box { position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 26; opacity: 0; transition: opacity 0.3s ease-out 0s; background: #fff; /* The Fallback */ background: rgba(255, 255, 255, 0.65); } .modal-box--show { opacity: 1; overflow-x: hidden; overflow-y: auto; } .modal-box--inline { pointer-events: none; } .modal-box--inline.modal-box--show { pointer-events: auto; } .modal-dialog { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 18px auto; transition: transform 0.3s ease-out 0s; transform: translate(0, 50px); height: 100%; min-height: calc(100% - 36px); max-height: calc(100% - 36px); -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; width: calc(100% - 36px); } .modal-box--md .modal-dialog { width: 700px; } .modal-box--full .modal-dialog { width: calc(100% - 36px); } .anim .modal-dialog { transition: transform 0.3s ease-out 0s; transform: translate(0, 0); } .modal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100px; max-height: 0; transition: all 0.3s ease-in-out; transform: scale(0.75); box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; background: #FFFFFF; } .modal-content--loaded { max-height: 100%; transform: scale(1); } .modal-box--full .modal-content { height: 100%; } .modal-body { padding: 16px; overflow-y: scroll; opacity: 0; transition: opacity 0.75s ease-in-out; } .modal-content--loaded .modal-body { opacity: 1; } .modal-body__title { padding-bottom: 12px; margin-bottom: 4px; font-size: 18px; } .close-modal { display: block; position: absolute; top: 8px; right: 8px; opacity: 0; visibility: hidden; z-index: 3; color: #999999; } .modal-content--loaded .close-modal { opacity: 1; visibility: visible; } .modal-overlay { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-out 0s; z-index: 22; background: #FFFFFF; } .modal-open { overflow: hidden; } .modal-open .modal-overlay { opacity: 0.9; } .lds-ring { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) scale(1); width: 40px; height: 40px; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 40px; height: 40px; border: 7px solid #999999; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #999999 transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .accordion-wrap, .accordion-title { position: relative; } .accordion-title { cursor: pointer; } .accordion-title .icon { -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .accordion-content { display: none; overflow: hidden; } .accordion-open .icon-chevron-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /*ZOOM IMAGES*/ .wrap-zoom { z-index: 666; position: relative !important; } .img-zoomin { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } .img-zoomout, .wrap-zoom { cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } .wrap-zoom, .p_img_zoomin { position: relative; -webkit-transition: transform 300ms; -ms-transition: transform 300ms; transition: transform 300ms; } .overflow-x-hidden { overflow-x: hidden; } .zoom-overlay { z-index: 27; position: fixed; top: 0; left: 0; right: 0; bottom: 0; filter: "alpha(opacity=0)"; opacity: 0; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.85); } .zoom-overlay-open .zoom-overlay { filter: "alpha(opacity=100)"; opacity: 1; } .capzoom { position: fixed; bottom: 0; left: 0; right: 0; display: block; text-align: center; z-index: 999; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .capzoom .container { display: block; } .capzoom span { position: relative; display: inline-block; padding: 8px 12px; border-top-right-radius: 4px; border-top-left-radius: 4px; color: #f7f7f7; background: #000000; /* The Fallback */ background: rgba(0, 0, 0, 0.75); font-size: 14px; } .zoom-overlay-open .capzoom { opacity: 1; filter: alpha(opacity=100); } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; display: none; } .slick-slide-thumbnail .slick-slide { opacity: 0.5; filter: alpha(opacity=50); } .slick-slide-thumbnail .slick-slide:hover { opacity: 1; filter: alpha(opacity=100); } .slick-slide:focus { outline: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-slide-thumbnail { margin-top: 20px; margin-left: 20px; margin-right: 20px; } .slick-slide-thumbnail .slick-slide { margin-left: 4px; margin-right: 4px; overflow: hidden; } .slick-arrow.slick-hidden { display: none; } .slick-arrow { position: absolute; z-index: 2; top: 50%; outline: none; border: none; background: transparent; font-size: 0; padding: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -o-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -ms-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .detail__media-image-wrap .slick-arrow { opacity: 0.5; filter: alpha(opacity=50); } .detail__media-image-wrap:hover .slick-arrow { opacity: 1; filter: alpha(opacity=100); } .append-nav .slick-arrow, .foto-pop-up .slick-arrow { color: #FFFFFF; } .slick-prev:before, .slick-next:before { font-family: detiknetwork-FF; font-size: 64px; } .slick-slide-thumbnail .slick-prev:before, .slick-slide-thumbnail .slick-next:before { font-size: 24px; } .foto-pop-up .slick-prev:before, .foto-pop-up .slick-next:before { color: #FFFFFF; } .slick-prev { left: 0; } .slick-slide-thumbnail .slick-prev { left: -24px; } .slick-prev:before { content: "\67"; } .slick-next { right: 0; } .slick-slide-thumbnail .slick-next { right: -24px; } .slick-next:before { content: "\65"; } .slick-slide-thumbnail .slick-active { opacity: 0.5; filter: alpha(opacity=50); } .slick-slide-thumbnail .slick-active:hover { opacity: 1; filter: alpha(opacity=100); } .slick-slide-thumbnail .slick-current { opacity: 1; filter: alpha(opacity=100); } .slick-disabled { opacity: 0; filter: alpha(opacity=0); pointer-events: none; } .slick-dotted.slick-slider { padding-bottom: 30px; } .slick-dots { position: absolute; bottom: 10px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 10px; width: 10px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 1px solid #666666; background: #c7d0d5; opacity: 0.3; display: block; height: 10px; width: 10px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li.slick-active button { opacity: 0.8; } .append-nav { position: absolute; left: 0; right: 0; } #slider-foto__detail-nav.minim-img .slick-track { transform: none !important; } .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; } } .box, .section, .box__form-indeks, .box--komentar, .detail__multiple-paging .text-list--title, .detail__media, .detail__anchor, .detail__multiple-box, .detail__multiple-paging, .detail__multiple-bg, .cb-tanya-ustaz { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } .box, .section { position: relative; word-wrap: break-word; padding-top: 8px; padding-bottom: 8px; border-top: 3px solid #f0f0f0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; } .box__header, .section__header { margin-top: 8px; margin-bottom: 8px; font-size: 23px; } .box__title, .section__title { margin: 0; font-size: 18px; } .box { margin-bottom: 24px; } .koleksi-wide--ondetail .box { padding: 0 36px; padding-top: 0; } .box__header a { padding: 0; } .box__title--sponsored { width: 100%; } .box__title--sponsored-box { width: 130px; font-size: 11px; align-items: center; margin: -9px 0; color: #000000; } .box__title--sponsored-box > span { flex: 1; } .box__title--sponsored-box a { width: 64px; height: 40px; } .box__title--sponsored-box img { max-width: 64px; max-height: 40px; } .box__logo { max-width: 200px; max-height: 45px; display: block; } .box__form-indeks { margin-top: 8px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .box__form-indeks-date { border-left: 1px solid #e6e6e6; } .box-background { padding: 16px; background: #f7f7f7; } .box--komentar { padding: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; } .section { margin-bottom: 16px; } .page__header { margin-top: 12px; } .page__header-blak { background: #666666; /* Old browsers */ background: -moz-linear-gradient(135deg, #666666 50%, #999999 100%); /* FF3.6+ */ background: -webkit-linear-gradient(135deg, #666666 50%, #999999 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #666666 50%, #999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ padding: 12px 12px 12px 0; width: 66%; height: 60px; position: relative; margin-top: 24px; } .page__header-blak-logo { position: relative; top: -38px; } .page__header-social { position: absolute; top: 8px; right: 8px; color: #FFFFFF; font-size: 12px; } .page__title { margin: 0; font-size: 23px; } .page__nav--float { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; margin-top: 8px; } .page__nav--float a { color: #FFFFFF; } .page__breadcrumb, .page__follow, .page__indeks-info { color: #999999; font-size: 12px; } .page__breadcrumb a, .page__follow a, .page__indeks-info a { color: #999999; } .page__breadcrumb a { position: relative; } .page__breadcrumb a:after { content: "/"; padding: 0 4px; } .page__breadcrumb a:last-child:after { content: ""; padding: 0; } .page__breadcrumb a:hover { color: #333333; } .page__share { color: #666666; font-size: 12px; text-align: left; line-height: 1.6; } .page__share a { color: #666666; } .livereport-content .page__share { padding: 0 0 8px; } .nhl .box, .nhl .cb, .nhl .widget { border-bottom: 3px solid #f0f0f0; } .nhl .box + .box, .nhl .box + .cb, .nhl .box + .widget, .nhl .box + div .box, .nhl .box + div .cb, .nhl .box + div .widget, .nhl .cb + .box, .nhl .cb + .cb, .nhl .cb + .widget, .nhl .cb + div .box, .nhl .cb + div .cb, .nhl .cb + div .widget, .nhl .widget + .box, .nhl .widget + .cb, .nhl .widget + .widget, .nhl .widget + div .box, .nhl .widget + div .cb, .nhl .widget + div .widget { border-top: none; margin-top: -24px; } .widget.widget-nhl { border: none; margin-top: 8px; background: #f0f0f0; } .sticky { 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--exclamation { border: 1px solid #f9ba6f; background: #fce7cc; color: #000000; } .alert--center-inline { display: inline-block; } .nav__item--new a:after { content: ""; width: 5px; height: 5px; background: #FF0000; position: absolute; top: 0; margin-left: 4px; overflow: hidden; } .nav { position: relative; list-style: none; margin: 0; padding: 0; font-size: 14px; } .nav a { display: block; } .navbar-second .nav a { position: relative; display: inline-block; padding: 4px 8px; text-align: center; cursor: pointer; vertical-align: top; border: 1px solid transparent; border-radius: 4px; background: #f7f7f7; } .navbar-filter .nav a { padding: 4px 16px; border: 1px solid var(--kuler-1); color: var(--kuler-1); font-size: 12px; border-radius: 24px; } .nav__item { position: relative; padding: 0; } .nav__item a { padding: 4px 24px 4px 0; } .nav--column .nav__item a { padding: 4px 0; } .footer .nav__item a { padding: 0 8px; position: relative; margin-bottom: 8px; color: #666666; } .footer .nav__item a:after { content: "."; position: absolute; top: -12px; right: -4px; font-size: 23px; font-weight: 400; } .navbar-first .nav__item:last-child a { padding-right: 0; } .navbar-first .nav__item, .navbar-second .nav__item, .navbar-filter .nav__item { white-space: nowrap; } .navbar-second .nav__item, .navbar-filter .nav__item { margin-top: 8px; margin-right: 8px; margin-bottom: 8px; } .navbar-second .nav__item:last-child { margin-right: 0; } .nav__item--green a { color: #75b72e; } .nav__item--green ins { text-decoration: none; } .nav__item--red a { color: #FF0000; } .nav__item--red ins { text-decoration: none; } .nav__item--new { position: relative; } .navbar-first .nav__item--active a { color: var(--kuler-1); } .navbar-filter .nav__item--active a { background: var(--kuler-1); color: #FFFFFF; } .nav--column .nav__item { display: inline-block; width: 100%; vertical-align: top; } .footer .nav__item:last-child a:after { content: ""; } .detail__body-tag .nav__item { background: #f0f0f0; margin: 4px; display: block; padding: 4px 16px; color: #000000; font-size: 12px; } .terpopuler .nav__item { padding: 4px 24px 4px 0; font-size: 14px; } .footer .nav { margin: 24px 0; } .navbar--scroll .nav { padding-top: 4px; padding-right: 16px; padding-bottom: 4px; padding-left: 16px; } .navbar-first .nav { height: 45px; } .navbar-first .nav, .navbar-second .nav, .navbar-filter .nav { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: nowrap; } .navbar-first .nav::-webkit-scrollbar, .navbar-second .nav::-webkit-scrollbar, .navbar-filter .nav::-webkit-scrollbar { display: none; } .detail__body-tag .nav { margin: 8px; margin-left: -4px; margin-right: -4px; } .nav--center { justify-content: center; } .nav--right { justify-content: flex-end; } .nav--column { flex-direction: column; width: 100%; } .nav--ordered { list-style: decimal; padding-left: 24px; } .nav--ordered .nav__item { display: list-item; padding: 4px 0 4px 8px; } .navbar { position: relative; } .header .navbar { height: 35px; overflow: hidden; } .navbar-logo { display: inline-block; line-height: inherit; white-space: nowrap; } .navbar--scroll { padding-top: 0; overflow-x: hidden !important; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; } .navbar-wrap { overflow: hidden; } .navbar-shadow { position: relative; margin-left: -18px; margin-right: -18px; } .navbar-shadow:before { content: ""; width: 18px; height: 100%; top: 0; left: 0; z-index: 1; background: #fff; /* Old browsers */ background: -moz-linear-gradient(right, white 25%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(right, white 25%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, white 25%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ position: absolute; } .navbar-shadow:after { content: ""; width: 18px; height: 100%; top: 0; right: 0; z-index: 1; background: #fff; /* Old browsers */ background: -moz-linear-gradient(left, white 25%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(left, white 25%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to left, white 25%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ position: absolute; } .navbar-filter { margin-top: 16px; padding-top: 4px; border-top: 3px solid #f0f0f0; } .back-top { width: 40px; height: 40px; position: fixed; right: 8px; bottom: 60px; background: #cccccc; /* The Fallback */ background: rgba(204, 204, 204, 0.5); color: #FFFFFF; display: flex; justify-content: center; align-items: center; font-size: 22px; z-index: 10; } .back-top a { display: inherit; color: #FFFFFF; } /*--------------------------------------------------------------------------------*/ /*LIST CONTENT*/ /*--------------------------------------------------------------------------------*/ .list-content--column .list-content__item:last-child { margin-bottom: 12px; } .dropdown-wrap .list-content__item:last-child, .moment .list-content__item:last-child { border-bottom: none; } .terpopuler .list-content__item { padding-bottom: 4px; margin-bottom: 4px; } .dropdown-wrap .list-content__item { border-bottom: 1px solid #f0f0f0; } .moment .list-content__item { padding: 0 24px; border-bottom: 1px solid #cccccc; } .accordion > .list-content__item { display: block; margin: 0; padding: 0; } .accordion > .list-content__item, .list-link .list-content__item { border-bottom-color: #e6e6e6; } .list-content__title { font-size: 16px; } .list-content > div.widget-nhl:first-child { margin-top: -8px; } .list-content--border-left { border-left: 1px solid #e6e6e6; padding: 12px 0 0 12px; } .livereport-content .media { overflow: visible; flex: auto; } .media__image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 15% 12px 12px; } .headline--fotostop .media__image:before, .headline--fotostop .media__image:after { position: absolute; top: 0; content: ""; height: 0; } .headline--fotostop .media__image:before { border-bottom: 400px solid #332070; width: 70px; border-right: 44px solid transparent; z-index: 1; } .headline--fotostop .media__image:after { border-bottom: 400px solid #aa248c; width: 47px; border-right: 32px solid transparent; z-index: 2; } .detail__media .media__image img { width: 100%; max-width: none; } .livereport-content .media__image { margin-left: 12px; margin-right: 12px; } .radius-md .media__image { border-radius: 8px; } .moment .media__text { padding-left: 40px; display: block; padding: 0 0 16px 24px; position: relative; } .moment .media__text:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #C72026; position: absolute; left: 0px; top: 12px; } .koleksi-wide .media__text { flex: 0; } .media__title { font-size: 16px; } .list-content--equal-height .media__title { margin-bottom: 24px; } .list-content--column .media__title { font-size: 14px; } .detail__artikel-selanjutnya .media__title { margin-bottom: 0; font-size: 14px; } .livereport-content .media__title { font-size: 16px; padding: 12px; } .terpopuler .media__title { font-size: 14px; } .koleksi-wide .media__title { color: #FFFFFF; font-size: 20px; } .media__subtitle, .detail__subtitle { font-size: 14px; color: #f7931d; } .koleksi-wide .media__subtitle, .koleksi-wide .detail__subtitle { color: #FFFFFF; font-size: 12px; } .cb-mostpop .media__date { margin-left: 40px; } .prokontra .media__date { display: block; margin-top: 0; margin-bottom: 8px; } .livereport-content .media__date { font-size: 14px; color: #666666; background: #FFFFFF; padding: 12px 0; margin: 0; text-align: left; margin-left: -16px; } .koleksi-wide .media__date { color: #FFFFFF; } .media__label { padding: 5px 12px; background: #562b77; font-size: 14px; } .article__recomendation .media__label { position: relative; background: none; color: #332070; padding: 0; margin-bottom: 4px; } .media__label--live { background: #FF0000; padding: 4px 8px 4px 20px; top: 8px; left: 8px; z-index: 3; } .media__label--live:before { content: ""; width: 8px; height: 8px; position: absolute; top: 10px; left: 6px; overflow: hidden; border-radius: 50%; animation: live 1s; -moz-animation: live 1s infinite; -webkit-animation: live 1s infinite; background: #FF0000; } .media--left .media__image { margin: 0 12px 0 0; } .media--right .media__image { margin: 0 0 0 12px; } .widget-nhl .media--right .media__image { width: 150px; } .media--left .media__image, .media--right .media__image { width: 100px; } .media--text-overlay .media__text { padding-top: 51%; background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.9) 20%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.9) 20%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, 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 */ } .radius-md .media--text-overlay .media__text { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } .koleksi-wide .media__desc { color: #FFFFFF; font-size: 12px; } .cb-mostpop .text-list { align-items: normal; } .cb-mostpop .text-list__data, .cb-commented .text-list__data { margin-right: 12px; margin-top: -4px; font-size: 20px; color: #999999; } .terpopuler .text-list__data { color: #999999; } .detail__multiple .text-list, .detail__multiple-paging .text-list { color: var(--kuler-1); } .detail__multiple-paging .text-list--title { border-top: 1px solid #e6e6e6; padding-top: 12px; } .text__body { color: #333333; font-size: 14px; } @keyframes live { 0% { background: #fcc43f; } 50% { background: #FF0000; } 100% { background: #fcc43f; } } /*--------------------------------------------------------------------------------*/ /*BUTTON & LABEL COLOR VARIATIONS*/ /*--------------------------------------------------------------------------------*/ .btn--tosca-base { background: #009076; color: #FFFFFF; } .btn--tosca-base:hover { color: #FFFFFF; } .btn--tosca-base.btn--link { color: #009076; } .btn--tosca-light-1 { background: #2ea48f; color: #FFFFFF; } .btn--tosca-light-1:hover { color: #FFFFFF; } .btn--tosca-light-1.btn--link { color: #2ea48f; } .btn--tosca-light-2 { background: #67bcad; color: #FFFFFF; } .btn--tosca-light-2:hover { color: #FFFFFF; } .btn--tosca-light-2.btn--link { color: #67bcad; } .btn--tosca-light-3 { background: #9ed4ca; color: rgba(0, 0, 0, 0.75); } .btn--tosca-light-3:hover { color: rgba(0, 0, 0, 0.75); } .btn--tosca-light-3.btn--link { color: #9ed4ca; } .btn--tosca-light-4 { background: #cae7e2; color: rgba(0, 0, 0, 0.75); } .btn--tosca-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--tosca-light-4.btn--link { color: #cae7e2; } .btn--tosca-light-5 { background: #e6f4f1; color: rgba(0, 0, 0, 0.75); } .btn--tosca-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--tosca-light-5.btn--link { color: #e6f4f1; } .btn--orange-base { background: #EE4023; color: #FFFFFF; } .btn--orange-base:hover { color: #FFFFFF; } .btn--orange-base.btn--link { color: #EE4023; } .btn--orange-light-1 { background: #ef672f; color: #FFFFFF; } .btn--orange-light-1:hover { color: #FFFFFF; } .btn--orange-light-1.btn--link { color: #ef672f; } .btn--orange-light-2 { background: #f7931d; color: #FFFFFF; } .btn--orange-light-2:hover { color: #FFFFFF; } .btn--orange-light-2.btn--link { color: #f7931d; } .btn--orange-light-3 { background: #f9ba6f; color: rgba(0, 0, 0, 0.75); } .btn--orange-light-3:hover { color: rgba(0, 0, 0, 0.75); } .btn--orange-light-3.btn--link { color: #f9ba6f; } .btn--orange-light-4 { background: #fbd3a3; color: rgba(0, 0, 0, 0.75); } .btn--orange-light-4:hover { color: rgba(0, 0, 0, 0.75); } .btn--orange-light-4.btn--link { color: #fbd3a3; } .btn--orange-light-5 { background: #fce7cc; color: rgba(0, 0, 0, 0.75); } .btn--orange-light-5:hover { color: rgba(0, 0, 0, 0.75); } .btn--orange-light-5.btn--link { color: #fce7cc; } .btn--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--utility-base { background: #6D8591; color: #FFFFFF; } .btn--utility-base:hover { color: #FFFFFF; } .btn--utility-base.btn--link { color: #6D8591; } .btn--utility-info { background: #2099d6; color: #FFFFFF; } .btn--utility-info:hover { color: #FFFFFF; } .btn--utility-info.btn--link { color: #2099d6; } .btn--utility-success { background: #11aa3d; color: #FFFFFF; } .btn--utility-success:hover { color: #FFFFFF; } .btn--utility-success.btn--link { color: #11aa3d; } .btn--utility-warning { background: #FCB715; color: rgba(0, 0, 0, 0.75); } .btn--utility-warning:hover { color: rgba(0, 0, 0, 0.75); } .btn--utility-warning.btn--link { color: #FCB715; } .btn--utility-error { background: #FF0000; color: #FFFFFF; } .btn--utility-error:hover { color: #FFFFFF; } .btn--utility-error.btn--link { color: #FF0000; } button[disabled] { background: #e0e5e8; color: #879ba5; } button[disabled]:hover { color: #879ba5; } .btn--paging { background: var(--kuler-1); color: #FFFFFF; } .btn--paging:hover { color: #FFFFFF; } .media--text-overlay .btn { z-index: 3; } .label--hikmah { background: var(--kuler-1); } .footer { text-align: center; font-size: 14px; background: #e6e6e6; color: #666666; } .footer__logo { margin-top: 24px; display: inline-block; } .footer__logo img { width: 160px; } .footer__social { margin: 0px 0px 20px 0; } .footer__copy { display: inline-block; margin-bottom: 64px; } .footer__border { height: 4px; display: block; } .footer-title { font-size: 12px; } .footer-title__partof { margin-top: 8px; color: #666666; padding: 4px 0; } .footer-title__partof img { width: 80px; vertical-align: bottom; margin: 0 0 3px 3px; } .footer__get-app { font-size: 12px; } .footer__app-store { justify-content: center; align-items: center; } .footer__app-store img { margin: 16px 2px; width: auto; height: 34px; } @media (max-width: 359px) { .footer__app-store img { height: 25px; } } .bottom-sticky { position: fixed; bottom: 0; left: 0; width: 100%; height: 0; z-index: 26; } .redirect { position: relative; } .redirect__page { background: var(--kuler-1); margin: 0 0px 16px; border-radius: 8px; padding: 8px 12px; color: #f7f7f7; transform: translateY(500px); -webkit-transition: transform 0.4s cubic-bezier(0.79, 0.33, 0.64, 0.82); transition: transform 0.4s cubic-bezier(0.79, 0.33, 0.64, 0.82); } .redirect__page h3, .redirect__page h4 { color: #f7f7f7; } .redirect__page h4 { margin-bottom: 0; max-height: 48px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } .redirect__close { display: flex; justify-content: center; align-items: center; padding-left: 0px; } .redirect__close-btn { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; text-align: center; border-radius: 100%; color: var(--kuler-1); background: #e3f5fe99; font-size: 18px; } .redirect__ring { padding: 0 8px 0 0; display: flex; position: relative; } .redirect__ring-circle { transition: 0.35s stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%; } .redirect__ring-seconds-wrap { position: absolute; width: 100%; text-align: center; top: 50%; transform: translateY(-65%); padding-right: 8px; padding-top: 12px; } .redirect__ring-seconds-wrap span { display: block; padding-top: 0px; font-size: 12px; font-size: 12px; } .redirect__ring-seconds { font-size: 26px; line-height: 1em; } .redirect .media__image.img-xss { width: 56px; } .redirect .media__text { display: flex; align-items: center; justify-content: center; padding-left: 12px; } .redirect .media__text.nomargin { padding-left: 0px; width: 100%; } .redirect .media__text.nomargin > *:first-child { width: 100%; } .redirect .media { align-items: center; justify-content: center; } .sticky-share { visibility: hidden; padding: 4px 0; z-index: 27; position: fixed; left: 0; right: 0; height: 0; bottom: -100px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .sticky-share__wrap { padding-left: 8px; padding-right: 8px; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); border-radius: 24px; } .sticky-share--sticked { visibility: visible; bottom: 0; margin-bottom: 25px; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .detail .sticky-share .icon-item { position: relative; width: 26px; height: 26px; margin-left: 6px; margin-right: 6px; } .icon-item .comment-count { position: absolute; font-size: 10px; top: -4px; right: -4px; padding: 0 4px; min-width: 15px; background: #ed131b; } .foto-pop-up .detail { color: #FFFFFF; max-width: 750px; margin-top: 16px; margin-left: auto; margin-right: auto; } .detail__header { text-align: center; padding: 16px 0; } .detail__title { font-size: 23px; margin-bottom: 12px; } .foto-pop-up .detail__title { color: #FFFFFF; margin-bottom: 28px; } .dropdown-wrap .detail__title { font-size: 14px; padding-bottom: 12px; margin: 0; color: var(--kuler-1); } .detail__artikel-selanjutnya .detail__title { font-size: 14px; position: absolute; top: 16px; margin-bottom: 0; } .detail__date { display: inline-block; margin-top: 4px; color: #666666; font-size: 12px; } .foto-pop-up .detail__date { margin-bottom: 0; } .detail__subtitle { font-size: 18px; margin-bottom: 0; color: #f7931d; } .detail__author { margin-top: 8px; margin-bottom: 8px; font-size: 12px; color: #666666; } .detail__author-image-avatar { width: 25px; height: 25px; display: inline-flex; margin-right: 8px; overflow: hidden; vertical-align: middle; } .detail__author-image-avatar img { width: 100%; } .detail__label { color: #f7931d; } .detail__media { padding: 0; position: relative; } .detail__media.no-strech { margin: 0; } .detail__media-image > img { width: 100%; min-height: 211px; max-width: none; position: relative; z-index: 2; } .detail__media-image .img-zoomout { width: 100%; max-width: 100%; } .detail__media-image-wrap--rounded, .detail__media-image-wrap--rounded .slick-slider { overflow: hidden; border-radius: 8px; } .foto-pop-up .detail__media-image { margin-bottom: 0; } .detail__media-caption { display: inline-block; margin-top: 4px; color: #666666; font-size: 12px; padding: 4px 18px; } .foto-pop-up .detail__media-caption { color: #FFFFFF; font-size: 14px; margin-top: 16px; } .no-strech .detail__media-caption { padding-left: 0; padding-right: 0; } .detail__media.detail__media--rounded { margin: 0; } .detail__media.detail__media--rounded img { border-radius: 8px; } .detail__media--slider-infografis .slick-slider { margin-left: -18px; margin-right: -18px; } .detail__media--slider-infografis .slick-slide-thumbnail { margin-left: 20px; margin-right: 20px; } .detail__media--slider-infografis .detail__media-caption { padding-left: 18px; padding-right: 18px; } .foto-pop-up .detail__media { margin-bottom: 0; } .detail__body { margin-top: 16px; } .detail__body-text > a, .detail__body-text p > a { color: var(--kuler-1); } .detail__body-text .label { display: block; text-align: left; } .detail__body-text img { max-width: 100%; } .detail__body-text > p:nth-of-type(1) { display: inline; } .detail__body-text > p:nth-of-type(2) { margin-top: 16px; } .detail__body-text > h1 { font-size: 23px; } .detail__body-text > h2, .detail__body-text > h3 { font-size: 18px; } .detail__body-text > h2 a, .detail__body-text > h3 a { color: var(--kuler-1); } .detail__body-text > h4, .detail__body-text > h5, .detail__body-text > h6 { font-size: 16px; } .detail__body-text > h4 a, .detail__body-text > h5 a, .detail__body-text > h6 a { color: var(--kuler-1); } .detail__share { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 14px; justify-content: center; } .detail__prokontra { text-align: center; } .detail__prokontra-option { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: baseline; justify-content: center; } .detail__prokontra label { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: baseline; justify-content: center; } .detail__prokontra label span { margin-left: 8px; } .detail__prokontra label input { opacity: 0; z-index: 0; } .detail__prokontra label input#input-pro:checked + small + span { background: #562b77; color: white; } .detail__prokontra label input#input-kontra:checked + small + span { background: #ef672f; color: white; } .detail__anchor { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; background: #f0f0f0; margin-bottom: 12px; margin-top: 12px; margin-top: 8px; margin-bottom: 8px; } .detail__multiple .detail__anchor { font-size: 14px; text-align: left; display: inline-block; background: none; } .detail__multiple-box .detail__anchor { padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; } .detail__anchor.detail__anchor--multi { background: #FFFFFF; } .detail__anchor a { color: white; } .detail__anchor-icon { border-radius: 50%; width: 30px; height: 30px; background: #999999; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 8px 0; } .detail__multiple .detail__anchor-icon { border-radius: 50%; width: 30px; height: 30px; background: #cccccc; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 8px 2px; color: #FFFFFF; } .detail__anchor--multi .detail__anchor-icon { background: #cccccc; margin: 0 2px; width: 25px; height: 25px; font-size: 14px; } .detail__anchor-numb { color: #ef672f; } .detail__multiple .detail__anchor-numb { border-radius: 50%; background: #cccccc; color: var(--kuler-1); width: 30px; height: 30px; display: inline-block; margin: 0; text-align: center; line-height: 30px; } .detail__multiple .detail__anchor-numb.detail__anchor-numb--active { color: #FFFFFF; } .detail__newstag { margin: 16px 0; } .detail__newstag-title { font-size: 14px; flex: 1; } .detail__newstag img { margin-left: 16px; } .detail__multiple { margin-top: 24px; margin-bottom: 24px; } .detail__multiple-link { color: var(--kuler-1); } .detail__multiple a.btn--indeks { color: #FFFFFF; } .detail__multiple-box { border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; margin-top: 8px; margin-bottom: 8px; } .detail__multiple-nav { margin: 0; padding: 12px 8px 12px 0; } .detail__multiple-nav .media--left { align-items: center; } .detail__multiple .btn--blue-base { color: white; } .detail__multiple .color-orange-light-1 { color: #ef672f; } .detail__multiple-paging { padding: 12px 18px 0; border-top: 1px solid #f0f0f0; color: #999999; font-size: 14px; } .detail__multiple-bg { padding-top: 8px; padding-bottom: 8px; background: #f7f7f7; } .detail__multiple .dropdown-wrap { flex: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: end; } .detail__artikel-selanjutnya { background: #FFFFFF; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; margin-top: 24px; margin-bottom: 24px; padding: 12px 16px 16px; border-top: 5px solid var(--kuler-1); } .detail__artikel-selanjutnya-title { margin-bottom: 8px; display: block; } .detail-header-haji { text-align: left !important; } .detail-header-haji__label { margin-bottom: 12px; display: inline-block; padding: 4px 8px; border: 1px solid #1e9d6f; border-radius: 8px; font-size: 14px; color: #1e9d6f; } .detail-header-haji__author { margin-bottom: 16px; font-size: 18px; color: #006536; } .detail-header-haji__price { background: var(--kuler-1); padding: 8px 16px; font-size: 23px; border-radius: 6px; } .detail-header-haji__price span { display: block; margin-right: 16px; font-size: 12px; } .detail-header-haji__act { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 70px; padding: 12px; margin-bottom: 12px; border-top: 1px solid #295243; } .detail-header-haji__act button { height: 26px; border: none; background: none; line-height: 1; } .detail-header-haji__act button .active-state { display: none; } .detail-header-haji__act button.liked .active-state, .detail-header-haji__act button.bookmarked .active-state { display: block; } .detail-header-haji__act button.liked .default-state, .detail-header-haji__act button.bookmarked .default-state { display: none; } .detail-header-haji__act .dropdown-aktif .dropdown svg path { fill: #295243; } .detail-header-haji__act .dropdown-menu { left: 12px; width: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .detail-header-haji__act .dropdown-menu .detail__share { padding: 8px; background: #f0f0f0; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); } .detail-header-haji__act .dropdown-menu .detail__share a { margin: 0 4px; } .detail-header-haji__act .copy_url .notif { background: var(--kuler-1); } .detail-header-haji__act .copy_url .notif:before { top: -7px; border-bottom: 8px solid var(--kuler-1); border-left: 7px solid transparent; border-top: none; border-right: 7px solid transparent; } .detail-header-haji__act .copy_url .notif.url_copied { bottom: -124%; } .detail-header-haji .detail__title { color: #1c1c1c; font-size: 18px; } .detail-media-haji { padding: 12px; border: 1px solid #e6e6e6; border-radius: 8px; } .linksisip { position: relative; margin: 8px 0; border-left: 5px solid var(--kuler-1); } .linksisip td { border: none; padding: 0; } .linksisip strong { font-size: 14px; } .linksisip a { font-size: 16px; display: block; } .linksisip .lihatjg { padding-left: 20px; } .linksisip .lihatjg strong { display: block; margin-bottom: 4px; } .linksisip .lihatjg a { display: block; } .quotesisip { position: relative; margin: 20px 0; padding: 0; border: 0; width: 100%; background: #FFFFFF; border-left: 5px solid #562b77; } .quotesisip td { border: none; padding: 0; } .quotesisip span { width: 5px; height: 100%; background: #812e88; position: absolute; } .quotesisip blockquote { display: block; width: 100%; font-size: 23px; margin: 0 0 12px 0; padding: 8px 12px 0 24px; line-height: 120%; position: relative; color: #000000; } .quotesisip blockquote:before { font-family: detiknetwork-FF; content: "\7b"; font-size: 45px; display: block; margin-bottom: 8px; color: #999999; } .quotesisip cite { color: #666666; font-size: 14px; display: block; margin-top: 4px; margin-left: 24px; } .pic_artikel_sisip_table { text-align: center; margin-bottom: 20px; color: #666666; font-size: 12px; line-height: 120%; width: 100%; table-layout: fixed; } .pic_artikel_sisip_table td { border: none; padding: 0; } .pic_artikel_sisip { text-align: center; color: #999999; font-size: 12px; line-height: 120%; width: 100%; } .pic_artikel_sisip .pic { position: relative; display: inline-block; max-width: 100%; text-align: center; } .pic_artikel_sisip .pic img { position: relative; max-width: 100%; max-height: 400px; height: auto; overflow: hidden; display: block; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin-left: auto; margin-right: auto; } .pic_artikel_sisip .pic > span { position: relative; display: block; z-index: 1; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; } .sisip_embed_sosmed iframe { min-width: 100% !important; width: 100px !important; } .sisip_embed_sosmed twitter-widget { width: 100% !important; } .embed_video { padding-bottom: 20px; } .embed_video .title { font-size: 14px; padding-bottom: 12px; } .embed_video input { border-radius: 4px; font-size: 12px; background: #FFFFFF; display: block; padding: 16px; width: 90%; height: 15px; margin: 0; border: 1px solid #f0f0f0; } .skybanner { margin-left: 16px; z-index: 2; } .profile__box { background: #f7f7f7; border-radius: 8px; margin: 24px 0px; position: relative; } .profile__box__top { background: #562b77; color: #ffffff; height: 41px; border-radius: 8px 8px 0px 0px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; display: flex; align-items: center; padding-left: 70px; } .profile__box__bottom { display: flex; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: #000000; padding-left: 70px; padding-right: 14px; } .profile__box__bottom__img { position: absolute; top: 12px; left: 0px; margin-left: 12px; } .profile__box__bottom__img img { width: 48px; height: 48px; object-fit: cover; border-radius: 100%; border: solid 2px #fff; background: #fff; } .profile__box__bottom__text { margin: 12px 0px; } .profile-box { display: flex; padding: 20px; border-bottom: 5px solid var(--kuler-1); background: url("../images/profile-bg.webp") no-repeat bottom; background-size: cover; align-items: center; margin-bottom: 24px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; } .profile-box__pict { width: 90px; flex: 90px 0 0; } .profile-box__pict .ratiobox { border-radius: 50%; } .profile-box__desc { flex-grow: 1; font-size: 12px; margin-left: 12px; line-height: 1.5; color: #333333; } .profile-box__name { font-size: 16px; font-weight: bold; line-height: 2; } .banner-haji { width: 100%; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; justify-content: center; border-radius: 8px; background-size: cover; } .banner-haji--panduan { background-image: url("../images/banner-haji-panduan.webp"); } .banner-haji--perlengkapan { background-image: url("../images/banner-haji-perlengkapan.webp"); } .banner-haji--doa { background-image: url("../images/banner-haji-doa.webp"); } .banner-haji--tabungan { background-image: url("../images/banner-haji-tabungan.webp"); } .banner-haji--travel { background-image: url("../images/banner-haji-travel.webp"); } .banner-haji__text { margin-top: 12px; font-size: 14px; } .banner-haji__title { margin-bottom: 4px; font-size: 18px; } .progress { border-radius: 4px !important; height: 17px !important; } .progress-bar { border-radius: 4px !important; } .konten-nav { background: var(--kuler-1); padding: 16px; margin: 24px 0; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .konten-nav__title { flex: 1; margin: 0 8px; font-size: 16px; } .box-article { border-radius: 8px; background: #f7f7f7; overflow: hidden; } .box-article__title { padding: 16px 24px; background: var(--kuler-1); font-size: 18px; } .list-link a { width: 100%; padding: 8px 0; font-size: 18px; } .foto__anchor { margin-top: 12px; font-size: 12px; } .media-slider-haji { border-radius: 8px; overflow: hidden; } .media-slider-haji .media__icon { z-index: 2; } .wrap-toast { position: fixed; width: 100%; bottom: 60px; pointer-events: none; } .toast { margin: 0 auto 8px; overflow: hidden; pointer-events: none; width: -moz-max-content; width: max-content; max-height: 0; opacity: 0; padding: 0; transition: none; background: var(--kuler-1); border-radius: 8px; } .toast.show { animation: slideDown .3s ease-out forwards; padding: .625rem 1rem; pointer-events: auto; } .toast button { border: none; background: none; line-height: 1; } .toast p { margin: 0; } @keyframes slideDown { 0% { max-height: 0; opacity: 0; } to { max-height: 100px; opacity: 1; } } .icon-item { display: inline-flex; align-items: center; justify-content: center; margin: 5px 2px; width: 28px; height: 28px; vertical-align: middle; font-size: 16px; color: #FFFFFF; border-radius: 100%; } .icon-item:hover { color: #FFFFFF; } .detail .icon-item { width: 35px; height: 35px; padding: 2px; } .icon-item__fb { background: #3C5A99; } .icon-item__tw { background: #000000; } .icon-item__ig { 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 { background: #0077B5; } .icon-item__yt { background: #FF0000; } .icon-item__wa { color: #FFFFFF; background: #25D366; } .icon-item__tele { color: #FFFFFF; background: #0088CC; } .icon-item__tk { color: #FFFFFF; background: #000000; } .icon-item__link { color: #FFFFFF; background: #999999; } .icon-item__line-fb, .icon-item__line-tw, .icon-item__line-ig, .icon-item__line-in, .icon-item__line-yt { color: #666666; margin: 0; } .icon-item__line-fb:hover, .icon-item__line-tw:hover, .icon-item__line-ig:hover, .icon-item__line-in:hover, .icon-item__line-yt:hover { color: #666666; } .icon-item--light { color: #666666; background: #e6e6e6; } .icon-item--light.icon-item:hover { color: #000000; } .icon-item--light.icon-item__fb, .icon-item--light.icon-item__fb:hover { color: #3C5A99; } .icon-item--light.icon-item__tw, .icon-item--light.icon-item__tw:hover { color: #000000; } .icon-item--light.icon-item__in, .icon-item--light.icon-item__in:hover { color: #0077B5; } .icon-logo { position: absolute; z-index: 2; top: 8px; right: 8px; } .icon-logo img { display: block; max-height: 20px; max-width: 70px; } /*--------------------------------------------------------------------------------*/ /*FORMS*/ /*--------------------------------------------------------------------------------*/ .form-element:disabled, .tagsinput:disabled, .form-element[readonly], .tagsinput[readonly], .form-gray .form-element:disabled, .form-gray .tagsinput:disabled, .form-gray .form-element[readonly], .form-gray .tagsinput[readonly] { background-color: #f0f0f0; } .char-count { padding-right: 40px; } #charNum { position: absolute; top: 10px; right: 12px; } .mce-container, .mce-container * { background: #f7f7f7 !important; } .mce-container label, .mce-container * label { background: none !important; } .mce-panel { border-color: #e6e6e6 !important; } .mce-tinymce { box-shadow: none !important; } .mce-top-part:before { box-shadow: none !important; } .area_ipt { position: relative; overflow: hidden; margin-bottom: 8px; border: 2px dashed #cccccc; border-radius: 8px; background: #f7f7f7; color: #999999; } .area_ipt .icon_inside span { position: absolute; top: 50%; width: 100%; text-align: center; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .area_ipt .hide { display: none; } .area_ipt .show { display: block; } .file_upload { position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .delimgtemp { position: absolute; right: 4px; bottom: 4px; z-index: 2; padding: 4px !important; } .bgon .delimgtemp { display: none; } .tagsinput { width: auto; height: auto !important; min-height: 50px !important; overflow-y: auto; } .tagsinput input { background: transparent; border: none; float: left; } .tagsinput .tag { float: left; margin-top: 4px; margin-right: 8px; margin-bottom: 4px; border: 1px solid #84c6e9; background: #e3f5fe; } .tagsinput .tag span { margin: 0; padding: 4px; display: inline-block; } .tagsinput .tag a { display: inline-block; margin-right: 4px; } .tagsinput div { display: inline-block; margin: 3px 0 0; } #tags_1_tag { width: 100px; } .form-select { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; color: #999999; font-size: 14px; margin-bottom: 16px; } .form-select-group { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #e6e6e6; color: #666666; } .form-select-group i { font-size: 20px; margin-right: 4px; } .form-select-group select { color: #666666; } .pop-info { color: #666666; } .pop-info .btn--rounded { width: 20px; height: 20px; border-radius: 50%; padding: 0; text-align: center; line-height: 20px; display: inline-block; vertical-align: middle; font-weight: 700; } .box__form-indeks .form-block { margin-top: 8px; margin-bottom: 8px; } .box__form-indeks .form-element, .box__form-indeks .tagsinput { border: none; } .check-list .form-check__input:checked + label:before { background: var(--kuler-1); } .check-list .form-check { padding-left: 35px; } .check-list .form-check label { font-size: 14px; } .check-list .form-check label:before { background: var(--kuler-1); } .check-list .form-check label:before, .check-list .form-check label:after { width: 20px; height: 20px; left: -35px; top: calc(50% - 10px); } .check-list .form-check--checkbox label:after { font-size: 20px; } .tableSpec { max-width: 100%; width: 100%; color: #727374; font-size: 13px; overflow: hidden; } .tableSpec tr td { border: 1px solid #f1f2f3; padding: 7px 10px; } .tableSpec tr td:first-child { background: #f7f8f9; font-weight: bold; width: 40%; } .tableSpec tr td:nth-child(2) { display: none; } .tableSpec tr td.title { padding: 5px 10px; font-size: 16px; line-height: 1.5; background: none; font-weight: normal; color: #000; } .tableSpec tr:hover td { background: #ffffe6; } .tableSpec tr:hover td.title { background: none; } .tableSpec tr:hover td.title--alt { background: #f7f8f9; } .tableSpec__caption { font-weight: bold; font-size: 16px; line-height: 24px; margin-bottom: 10px; background: none; color: #222; } .tableSpec__caption tr td { border: 0px; padding: 0; } .tableSpec__caption tr td:first-child { background: none; } .tableSpec__caption tr:hover td { background: none; } .tableSpec2 { --theme-color: #562b77; max-width: 100%; width: 100%; font-size: 13px; overflow: hidden; } .tableSpec2 tr td { border: 0; border-bottom: 1px solid #e6e6e6; padding: 7px 10px 7px 0; font-weight: normal; font-size: 14px; line-height: 20px; color: #000; } .tableSpec2 tr td:first-child { width: 40%; } .tableSpec2 tr td.title { width: auto; color: #000; font-style: normal; font-weight: bold; font-size: 16px; line-height: 24px; border: 0; border-bottom: 2px solid var(--theme-color); padding: 15px 0; } .tableSpec2 tr td.title--alt { color: var(--theme-color); font-weight: bold; font-size: 16px; padding: 15px 0; } .tableSpec2__caption { font-weight: bold; font-size: 16px; line-height: 24px; margin-bottom: 10px; } .jadwal__title { font-weight: 600; font-size: 18px; color: #295243; width: 100%; text-align: center; } .jadwal__sub { width: 100%; font-weight: 550; font-size: 18px; color: #295243; margin-bottom: 33px; } .jadwal__body { width: 100%; } .jadwal__body__top { display: flex; justify-content: space-between; align-items: center; } .jadwal__body__top__left img { width: auto; height: auto; max-width: 100px; max-height: 40px; } .jadwal__body__top__right { display: flex; position: relative; } .jadwal__body__top__right__wilayah { width: 81px; height: 37px; background: #2E7259; border-radius: 4px 0px 0px 4px; color: #FFFFFF; font-weight: 600; font-size: 14px; } .jadwal__body__top__right__list { z-index: 1; } .jadwal__body__top__right__list__select { height: 37px; width: 142px; border: 1px solid #2E7259; border-radius: 0px 4px 4px 0px; } .jadwal__body__top__right__list__select__text { padding-right: 10px; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jadwal__body__top__right__list__dropdown { position: absolute; top: 37px; right: 0; max-width: 221px; max-height: 429px; overflow: auto; z-index: 1; background: #FFFFFF; border-radius: 0px 0px 4px 4px; padding: 10px; border-left: 1px solid #2e7259; border-bottom: 1px solid #2e7259; border-right: 1px solid #2e7259; z-index: 0; } .jadwal__body__top__right__list__dropdown__search input { width: calc(100% - 16px); color: #333333; font-weight: 400; font-size: 12px; padding-left: 12px; height: 24px; } .jadwal__body__top__right__list__dropdown__items { font-weight: 400; font-size: 12px; color: #000000; line-height: 150%; } .jadwal__body__top__right__list__dropdown__active { background: #6697F4; color: #FFFFFF; font-weight: 400; font-size: 12px; height: 27px; margin-left: -10px; margin-right: -10px; padding-left: 10px; display: flex; align-items: center; } .jadwal__body__table { margin-top: 16px; margin-bottom: 26px; } .jadwal__body__table__header { display: grid; grid-template-columns: 1.5fr repeat(6, 1fr); background: #295243; color: #FFFFFF; font-weight: 700; font-size: 12px; height: 42px; } .jadwal__body__table__header__title { display: flex; justify-content: center; align-items: center; } .jadwal__body__table__items { display: grid; grid-template-columns: 1.5fr repeat(6, 1fr); height: 35px; } .jadwal__body__table__items__basic { display: flex; justify-content: center; align-items: center; font-weight: 350; font-size: 13px; color: #333333; } .jadwal__body__table__items__highlight { color: #2E7259; font-weight: 600; font-size: 13px; display: flex; justify-content: center; align-items: center; } .jadwal__body__table__items__today { font-weight: 350; font-size: 13px; color: #FFFFFF; display: flex; justify-content: center; align-items: center; } .jadwal__body__table__items__highlight2 { color: #ffffff; font-weight: 600; font-size: 13px; display: flex; justify-content: center; align-items: center; } .jadwal__body__footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; width: 100%; } .jadwal__body__footer__left { color: #333333; font-weight: 350; font-size: 14px; } .jadwal__body__footer__right { display: flex; justify-content: space-around; letter-spacing: 0.04em; width: 100%; } .even { background: #E7E4B4; } .odd { background: #F7F7F7; } .today { background: #F7931D; } .share { color: #666666; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; } .bg-download { background: #2E7259; } .box-slider { height: 401px; background: linear-gradient(180deg, #23634B 0%, #136346 72.92%, #1A4736 100%); border-radius: 8px; width: 100%; margin-bottom: 24px; } .box-slider__logo { padding: 20px 0px; } .banner { width: 727px; } .display-none { display: none !important; } @font-face { font-family: "LPMQIsepMisbah-FF"; font-weight: bold; font-style: normal; src: url("../../../assets/fonts/LPMQIsepMisbah.ttf") format("truetype"); font-display: swap; size-adjust: 99.25%; } .imsakiyah { padding: 12px; background-image: url("../images/bg-jadwal.png"); background-repeat: repeat; background-size: 30%; width: 100%; background-color: #295243; border-radius: 4px; } .imsakiyah__left { margin-top: 12px; line-height: 14px; display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 12px; gap: 15px; } .imsakiyah__left__text { color: #fcd373; font-weight: 700; font-size: 17px; text-align: center; } .imsakiyah__left__text-small { margin-top: 4px; color: white; font-size: 14px; font-weight: 600; } .imsakiyah__left__border { height: 36px; border: 0.5px solid #ffffff; margin: 0 10px; } .imsakiyah__mid { width: 100%; } .imsakiyah__mid-jadwal { display: flex; width: 100%; gap: 1px; background: white; border-radius: 3px; overflow: hidden; } .imsakiyah__mid-tgl { text-align: center; padding: 5px 10px; background: rgba(32, 76, 60, 0.8); border-radius: 3px; margin-bottom: 10px; } .imsakiyah__mid-tgl-text { color: white; font-size: 20px; font-weight: 700; } .imsakiyah__mid-tgl-text--small { color: white; font-size: 12px; font-weight: 600; } .imsakiyah__mid__content { text-align: center; font-weight: 500; font-size: 10px; color: #000; line-height: 17px; width: 100%; background-color: #a9d4c4; } .imsakiyah__mid__content.selected { background-color: #1e9d6f; color: white; } .imsakiyah__mid__content div { padding: 6px 0; } .imsakiyah__mid__content-jam { font-size: 14px; font-weight: 600; background-color: white; } .selected .imsakiyah__mid__content-jam { background-color: #a9d4c4; color: #000; } .imsakiyah__right { width: 100%; margin-bottom: 10px; gap: 15px; } .imsakiyah__right select { max-width: 168px; width: 100%; height: 32px; padding: 5px 10px; padding-right: 32px !important; color: #2e7259; font-weight: 500; font-size: 12px; border-radius: 4px; } .imsakiyah--no-sponsor .imsakiyah__left__text { width: auto; } .wording { display: flex; justify-content: flex-start; color: #333333; font-weight: 400; font-size: 12px; width: 100%; } .wording__link { color: #2e7259; text-decoration-line: underline; margin-left: 10px; } .surah__search { width: 100%; display: flex; justify-content: center; align-items: center; background: url("../images/bg-masjid.webp") no-repeat #ededed; background-position-y: center; background-size: cover; border-radius: 8px; height: auto; position: relative; margin-bottom: 25px; } .surah__search__body { padding: 0px 20px; width: 100%; z-index: 1; margin: 5% 0; } .surah__search__body__title { font-weight: 700; font-size: 26px; color: #ffffff; margin-bottom: 23px; text-align: center; } .surah__search__body__search { position: relative; margin-bottom: 15px; } .surah__search__body__search input { width: 100%; padding: 16px 40px 16px 18px; color: #333333; font-weight: 600; font-size: 14px; border: 2px solid #e6e6e6; border-radius: 44px; background: #ffffff; } .surah__search__body__search input::placeholder { color: #999999; font-weight: 600; font-size: 14px; } .surah__search__body__search img { position: absolute; right: 20px; top: 15px; } .surah__search__body__search__suggest { position: absolute; z-index: 3; background-color: #fff; color: #295243; top: 60px; border: 1px solid #295243; border-bottom: none !important; width: 100%; display: none; } .surah__search__body__search__suggest__item { padding: 8px; border-bottom: 1px solid #295243; cursor: pointer; } .surah__search__body__search__suggest__item a { color: #295243; } .surah__search__body__suggestion__box { display: inline-grid; grid-template-columns: auto auto; gap: 10px; } .surah__search__body__suggestion__box__item { display: flex; justify-content: center; align-items: center; border: 1px solid #e6e6e6; border-radius: 4px; background: #ffffff; height: 35px; padding: 11px 14px; font-weight: 500; font-size: 12px; color: #295243; width: fit-content; } .surah__search__body__suggestion__box__item__img { padding-right: 4px; } .surah__search__body__suggestion__box__item:hover { background: #f7f7f7; } .bunga-top { position: absolute; top: 0; left: 0; } .bunga-bottom { position: absolute; bottom: 0; right: 0; z-index: 0; } .list__surah { width: 100%; gap: 25px; margin-bottom: 36px; font-weight: 700; } .list__surah__item { margin-bottom: 10px; display: flex; padding: 20px; border: 1px solid #e6e6e6; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.06); border-radius: 4px; background: #ffffff; align-items: center; width: 100%; } .list__surah__item__number { width: 30px; height: 30px; background: #e0e5e8; border-radius: 22px; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 14px; color: #295243; margin-right: 12px; } .list__surah__item__title { margin-right: 7px; width: 150px; width: 55%; } .list__surah__item__title__surah { font-weight: 700; font-size: 14px; line-height: 20px; color: #295243; } .list__surah__item__title__mean { font-weight: 400; font-size: 12px; color: #333333; } .list__surah__item__title__total { font-weight: 400; font-size: 12px; color: #2e7259; } .list__surah__item__arabic { font-weight: 700; font-size: 23px; color: #383838; width: 30%; display: flex; justify-content: flex-end; font-family: "LPMQIsepMisbah-FF"; } .list__surah__item:hover { background: #f7f7f7; } .mgb-42 { margin-bottom: 42px; } .mgb-16 { margin-bottom: 16px; } .mgb-28 { margin-bottom: 28px; } .mgb-12 { margin-bottom: 12px; } .describe { margin-bottom: 36px; } .describe__title { font-size: 20px; font-weight: 600; margin-bottom: 16px; color: #295243; } .describe__sub { font-size: 14px; line-height: 20px; color: #000; font-weight: 350; } .describe__point { font-size: 16px; font-weight: 600; line-height: 22px; margin-bottom: 12px; color: #000; } .describe__arabic { display: flex; justify-content: flex-end; font-size: 20px; line-height: 28px; color: #2e7259; text-align: right; } @font-face { font-family: "LPMQIsepMisbah-FF"; font-weight: bold; font-style: normal; src: url("../../../assets/fonts/LPMQIsepMisbah.ttf") format("truetype"); font-display: swap; size-adjust: 99.25%; } .surah__choose { width: 100%; display: flex; align-items: center; height: 61px; background: #f0f0f0; border-radius: 8px; margin-bottom: 26px; padding: 0px 12px; justify-content: space-around; position: sticky; top: 60px; z-index: 1; } .surah__choose__back { display: flex; align-items: center; height: 37px; border: 1px solid #2e7259; border-radius: 4px; font-weight: 500; font-size: 12px; color: #2e7259; padding: 12px 12px 12px 5px; margin-right: 12px; width: 9%; } .surah__choose__search { display: flex; width: 100%; justify-content: space-between; } .surah__choose__search__select { margin-right: 10px; width: 100%; } .surah__choose__search__select label { font-weight: 400; font-size: 14px; color: #333333; } .surah__choose__search__select select { width: 100%; height: 37px; border: 1px solid #e6e6e6; border-radius: 4px; font-weight: 600; font-size: 12px; color: #333333; letter-spacing: 0.04em; padding: 10px 12px; } .surah__choose__search__select--tafsir { margin-right: 10px; width: auto; } .surah__choose__search__select--tafsir label { font-weight: 400; font-size: 14px; color: #333333; } .surah__choose__search__select--tafsir select { width: 147px; height: 37px; border: 1px solid #e6e6e6; border-radius: 4px; font-weight: 600; font-size: 12px; color: #333333; letter-spacing: 0.04em; padding: 12px; } .surah__choose__search__select2 { margin-right: 10px; width: 20%; } .surah__choose__search__select2 label { font-weight: 400; font-size: 14px; color: #333333; } .surah__choose__search__select2 select { width: auto; height: 37px; border: 1px solid #e6e6e6; border-radius: 4px; font-weight: 600; font-size: 12px; color: #333333; letter-spacing: 0.04em; padding: 12px; } .surah__choose__search__go { height: 35px; background: #2e7259; border-radius: 4px; color: #ffffff; font-weight: 600; font-size: 12px; width: 45px; } .surah__choose__tajwid { border-left: 1px solid #e0e5e8; margin-left: 7px; padding-left: 7px; display: flex; height: 37px; } .surah__choose__tajwid label { display: flex; align-items: center; gap: 10px; margin: 0; } .surah__choose__tajwid .switch { position: relative; display: inline-block; width: 25px; height: 10px; } .surah__choose__tajwid .switch input { opacity: 0; width: 0; height: 0; } .surah__choose__tajwid .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 34px; } .surah__choose__tajwid .slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: -3px; bottom: -3px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-radius: 50%; } .surah__choose__tajwid input:checked + .slider { background-color: rgba(46, 114, 89, 0.7); } .surah__choose__tajwid input:focus + .slider { box-shadow: 0 0 1px #2e7259; } .surah__choose__tajwid input:checked + .slider:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); background-color: #2e7259; box-shadow: none; } .surah__choose-tafsir { top: 110px; } .audio-track { width: 100%; margin-bottom: 26px; } .detail__surah { width: 100%; margin-bottom: 27px; } .detail__surah__title { font-weight: 650; font-size: 23px; line-height: 32px; color: #333333; } .detail__surah__desc { font-weight: 350; font-size: 16px; color: #333333; } .detail__surah__sponsor { gap: 10px; margin-top: 8px; margin-bottom: 8px; } .detail__surah__sponsor__text { font-size: 12px; font-weight: 400; color: #000; } .detail__surah .detail__share { margin-top: 10px; margin-bottom: 46px; gap: 10px; } .detail__surah__ayat { width: 100%; border-bottom: 1px solid #e6e6e6; padding: 15px 10px; } .detail__surah__ayat__right { text-align: right; } .detail__surah__ayat__right__arabic { font-weight: 500; font-size: 30px; color: #333; letter-spacing: 0; line-height: 2.5em; margin-bottom: 14px; font-family: "LPMQIsepMisbah-FF"; direction: rtl; } .detail__surah__ayat__right__number { background: url("../images/bg-ayat.png") bottom center no-repeat; background-size: 40px 40px; display: inline-flex; align-items: center; justify-content: center; direction: rtl; width: 40px; height: 40px; font-size: 18px; letter-spacing: 1px; } .detail__surah__ayat__right__text { color: #2e7259; font-weight: 500; font-size: 16px; margin-bottom: 20px; font-family: "Times New Roman - Arab"; } .detail__surah__ayat__left { display: flex; width: 100%; } .detail__surah__ayat__left__number { height: 40px; background: #e0e5e8; border-radius: 22px; color: #295243; font-weight: 650; font-size: 14px; margin-right: 15px; width: 70px; } .detail__surah__ayat__left__desc { width: 100%; } .detail__surah__ayat__left__desc__title { font-weight: 500; font-size: 14px; color: #333333; margin-bottom: 10px; } .detail__surah__ayat__left__desc__sub { font-weight: 350; font-size: 12px; color: #333333; margin-bottom: 10px; } .detail__surah__ayat__left__desc__button { display: flex; } .detail__surah__ayat__left__desc__button__tafsir { display: flex; justify-content: center; align-items: center; width: 119px; height: 35px; border: 1px solid #e6e6e6; background: #ffffff; border-radius: 4px; margin-right: 10px; } .detail__surah__ayat__left__desc__button__tafsir img { margin-bottom: 4px; object-fit: contain; } .detail__surah__ayat__left__desc__button__tafsir__text { padding-right: 9px; color: #295243; font-weight: 600; font-size: 12px; } .detail__surah__ayat__left__desc__button__audio { display: flex; justify-content: center; align-items: center; width: 119px; height: 35px; border: 1px solid #e6e6e6; background: #ffffff; border-radius: 4px; margin-right: 10px; } .detail__surah__ayat__left__desc__button__audio img { object-fit: contain; } .detail__surah__ayat__left__desc__button__audio__text { padding-right: 9px; color: #295243; font-weight: 600; font-size: 12px; } .detail__surah__ayat__left__desc__button__bookmark { display: flex; justify-content: center; align-items: center; width: 40px; height: 35px; border: 1px solid #e6e6e6; background: #ffffff; border-radius: 4px; } .detail__surah__ayat__left__desc__button__bookmark img { margin-bottom: 4px; } .detail__surah__ayat__left__desc__button__bookmark__text { color: #295243; font-weight: 600; font-size: 12px; margin-left: 0; display: flex; } .detail__surah__ayat__left__desc__button__bookmark__text:hover { cursor: pointer; } .detail__surah__ayat__left__desc__button__bookmark__text .bookcheck { display: block; width: 13px; height: 16px; background: url("data:image/svg+xml,%3Csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6667 0H1.77778C0.8 0 0 0.8 0 1.77778V16L6.22222 13.3333L12.4444 16V1.77778C12.4444 0.8 11.6444 0 10.6667 0ZM10.6667 13.3333L6.22222 11.3956L1.77778 13.3333V1.77778H10.6667V13.3333Z' fill='%232E7259'/%3E%3C/svg%3E%0A") center no-repeat; } .detail__surah__ayat__left__desc__button__bookmark__text input[type="checkbox"] { -webkit-appearance: none; appearance: none; background-color: #fff; margin: 0; } .detail__surah__ayat__left__desc__button__bookmark__text input[type="checkbox"]:checked ~ .bookcheck { background-image: url("data:image/svg+xml,%3Csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6667 0H1.77778C0.8 0 0 0.8 0 1.77778V16L6.22222 13.3333L12.4444 16V1.77778C12.4444 0.8 11.6444 0 10.6667 0Z' fill='%232E7259'/%3E%3C/svg%3E%0A"); } .surah-active { background: #f8f8ec; } .surah__button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 90px; gap: 10px; } .surah__button__prev { width: 100%; height: 46px; padding: 0 4px; background: #2e7259; border-radius: 4px; color: #ffffff; font-weight: 500; font-size: 16px; } .surah__button__next { width: 100%; height: 46px; padding: 0 4px; background: #2e7259; border-radius: 4px; color: #ffffff; font-weight: 500; font-size: 16px; } .surah__button2 { width: 100%; justify-content: space-between; align-items: center; margin-bottom: 50px; } .surah__button2__prev { width: 215px; height: 46px; background: #2e7259; border-radius: 4px; color: #ffffff; font-weight: 500; font-size: 16px; } .surah__button2__title h1 { display: flex; justify-content: center; align-items: center; font-size: 16px; width: 100%; text-align: center; width: 100%; } .surah__button2__next { width: 215px; height: 46px; background: #2e7259; border-radius: 4px; color: #ffffff; font-weight: 500; font-size: 16px; text-align: center; } .surah__detail { font-size: 16px; line-height: 22px; color: #333333; font-weight: 350; margin-bottom: 26px; } .text-putih { color: #ffffff !important; } .audio-track audio#player { width: 100%; } .tab-zakat ul { list-style: none; margin: 0; padding: 0; display: flex; align-content: space-around; } .tab-zakat ul li { float: left; padding: 0; margin-right: 10px; font-size: 14px; text-transform: uppercase; } .tab-zakat ul li:last-child { margin: 0; } .tab-zakat ul li a { color: #fff; background: var(--kuler-1); display: block; padding: 15px 20px; border-radius: 4px 4px 0 0; padding: 10px; font-size: 13px; } .tab-zakat ul li a.selected { color: var(--kuler-1); background: #F7F7F7; } .zakat-title { color: var(--kuler-1); font-size: 20px; text-transform: uppercase; display: block; padding: 20px 0; font-weight: 600; } .zakat-form { width: 100%; position: relative; padding: 30px; margin-bottom: 20px; background: #F7F7F7; border-radius: 0 4px 4px 4px; } .zakat-form__title { margin-right: 90px; width: 160px; } .zakat-form__title h3 { text-transform: uppercase; color: var(--kuler-1); display: block; margin-bottom: 20px; font-size: 20px; font-weight: 500; } .zakat-form__title span { color: #4a4a4a; display: block; font-size: 13px; } .zakat-form__rp { color: #4a4a4a; } .zakat-form__form { width: 100%; font-size: 16px; } .zakat-form__info { font-size: 12px; font-weight: lighter; color: #797979; font-style: italic; } .zakat-form__group { margin-bottom: 20px !important; padding-left: 6px; } .zakat-form__col_tab_2 { flex: 0 0 100%; max-width: none; font-weight: lighter; margin: 5px 0 5px; font-size: 14px !important; } .zakat-form__text.text { border: 1px solid var(--kuler-4); border-radius: 4px; background: #fff; text-align: left; color: #4a4a4a; width: 100%; height: 33px; padding-left: 12px; } .zakat-form__text.text:hover { border-color: var(--kuler-4); } .zakat-form__col_tab_10 { color: #4a4a4a; position: relative; width: 100%; padding-left: calc(26px / 4.3333333333); padding-right: calc(26px / 4.3333333333); -ms-flex: calc(10 / 12); flex: 0 0 calc(100% / (12 / 10)); max-width: calc(100% / (12 / 10)); } .zakat-form .btn { font-size: 12px; padding: 10px 40px; margin: 20px 2px; font-weight: 500; font-size: 16px; color: #FFFFFF; } .zakat-form .btn--reset { background: #999999; width: 107px; height: 37px; } .zakat-form .btn--hitung { background: #2E7259; width: 107px; height: 37px; } .zakat-hasil { width: 100%; position: relative; margin: 50px 0; } .zakat-hasil__title { font-size: 14px; font-weight: 500; } .zakat-hasil__total { height: 52px; margin-bottom: 15px; } .zakat-hasil__total span { background: #F0F3F4; padding: 10px 32px; } .zakat-hasil__transfer { font-weight: 350; font-size: 12px; color: #333333; margin-bottom: 15px; } .zakat-hasil__atau { font-weight: 450; font-size: 12px; color: #333333; margin-bottom: 15px; } .zakat-hasil__button { height: 36px; background: #EA7000; border-radius: 4px; color: #FFFFFF; font-weight: 550; font-size: 12px; margin-bottom: 15px; } .center-box { margin: 0 auto; position: relative; text-align: center; padding: 20px; border: 3px solid var(--kuler-4); background: #fff; border-radius: 4px; } .center-box span { font-size: 20px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: var(--kuler-1); display: inline-block; margin: 10px; margin: 10px 10px 20px; } .zakat-btn { text-align: left; display: flex; } .zakat-keterangan { background: #F7F7F7; margin-left: 20px; padding: 30px; border-radius: 4px; margin: 0; padding: 15px; } .zakat-keterangan h3 { color: var(--kuler-1); font-size: 18px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } .zakat-keterangan p { margin-bottom: 20px; font-size: 14px; line-height: 22px; font-weight: lighter; } .custom-background { position: fixed; top: 0; z-index: -1; right: 0; left: 0; margin: auto; } .custom-background img { max-width: 100%; height: unset; } .custom-billboard { padding-top: 10px; text-align: center; } .custom-billboard-mobile { display: none; } .hastagh-dd { position: absolute; right: 3%; top: 7%; } .hastagh-dd img { width: 200px; } .kalkulator-waris { border-radius: 8px; margin-bottom: 26px; } .kalkulator-waris__title { font-size: 16px; font-weight: 500; } .kalkulator-waris__rp { font-size: 16px; font-weight: 600; color: #000; } .kalkulator-waris__header { padding: 24px; position: relative; background: linear-gradient(125deg, #295243 0%, #295243 56.12%, #1e9d6f 100%); border-radius: 8px 8px 0px 0px; } .kalkulator-waris__header__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: #ffffff; } .kalkulator-waris__header__sub { font-size: 12px; font-weight: 500; color: #ffffff; width: 75%; z-index: 1; position: relative; } .kalkulator-waris__header__img { position: absolute; right: 0; top: 10px; z-index: 0; } .kalkulator-waris__body { padding: 20px; background: #f7f7f7; border: 1px solid #e6e6e6; } .kalkulator-waris__body__title { letter-spacing: -0.1px; font-weight: 600; font-size: 16px; color: #2e7259; margin-bottom: 20px; } .kalkulator-waris__body__option { display: flex; justify-content: space-between; width: 100%; } .kalkulator-waris__body__option__text { font-weight: 500; font-size: 14px; } .kalkulator-waris__body__option__gender { display: flex; gap: 42px; } .kalkulator-waris__body__option__gender__radio { display: flex; align-items: center; } .kalkulator-waris__body__option__gender__radio label { margin-left: 8px !important; margin-top: 8px; margin-bottom: 8px; font-weight: 400; font-size: 14px; } .kalkulator-waris__body__option__gender__radio input[type="radio"] { accent-color: #295243; } .kalkulator-waris__body__bottom { margin-top: 40px; } .kalkulator-waris__body__bottom__title { letter-spacing: -0.1px; font-size: 16px; font-weight: 600; margin-bottom: 20px; color: #295243; } .kalkulator-waris__body__bottom__line { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; } .kalkulator-waris__body__bottom__line__select { width: 60%; outline: none; } .kalkulator-waris__body__bottom__line__select select { width: 100%; height: 37px; border: 1px solid #e6e6e6; border-radius: 4px; padding-left: 12px; color: #333; font-weight: 500; font-size: 14px; } .kalkulator-waris__body__bottom__line__total { width: 30%; /* Chrome, Safari, Edge, Opera */ /* Firefox */ } .kalkulator-waris__body__bottom__line__total input { width: 100%; height: 37px; text-align: right; color: #333; font-weight: 500; font-size: 14px; padding-right: 12px; border: 1px solid #e6e6e6; } .kalkulator-waris__body__bottom__line__total input::placeholder { text-align: right; color: #999; font-weight: 500; font-size: 14px; } .kalkulator-waris__body__bottom__line__total input::-webkit-outer-spin-button, .kalkulator-waris__body__bottom__line__total input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .kalkulator-waris__body__bottom__line__total input[type="number"] { -moz-appearance: textfield; } .kalkulator-waris__body__bottom__line__img { width: 10%; cursor: pointer; } .kalkulator-waris__body__bottom__add { width: 100%; display: flex; justify-content: center; letter-spacing: 0.48px; font-size: 12px; color: #295243; text-decoration-line: underline; cursor: pointer; margin-bottom: 60px; } .kalkulator-waris__body__button { display: flex; gap: 10px; width: 100%; } .kalkulator-waris__body__button__reset { outline: none; border: none; height: 44px; width: 40%; display: flex; justify-content: center; align-items: center; cursor: pointer; background: #999; border-radius: 4px; color: #ffffff; font-size: 16px; font-weight: 600; } .kalkulator-waris__body__button__hitung { outline: none; border: none; height: 44px; width: 60%; display: flex; justify-content: center; align-items: center; cursor: pointer; background: #2e7259; border-radius: 4px; color: #ffffff; font-size: 16px; font-weight: 600; } .hasil-waris { margin-bottom: 50px; } .hasil-waris__title { font-weight: 600; letter-spacing: -0.1px; font-size: 20px; color: #2e7259; padding: 26px 18px 16px 18px; } .hasil-waris__sub { display: flex; justify-content: space-between; padding: 0px 24px 24px 24px; } .hasil-waris__sub__left { font-weight: 600; font-size: 14px; color: #000; padding: 0px 18px 8px 18px; } .hasil-waris__sub__right { font-size: 16px; font-weight: 600; color: #2e7259; padding: 0px 18px 26px 18px; } .hasil-waris__box { padding: 16px; background: #f7f7f7; margin-bottom: 24px; } .hasil-waris__box__header { display: flex; justify-content: space-between; color: #000; font-size: 14px; font-weight: 500; margin-bottom: 16px; } .hasil-waris__box__line { display: flex; justify-content: space-between; padding: 12px; background: #ffffff; color: #000; font-size: 12px; font-weight: 500; margin-bottom: 12px; width: 100%; } .hasil-waris__box__line__left { width: 34%; } .hasil-waris__box__line__middle { width: 34%; } .hasil-waris__box__line__right { width: 32%; text-align: right; } .hasil-waris__bottom { width: 100%; display: flex; justify-content: center; margin-bottom: 24px; } .hasil-waris__bottom__button { outline: none; border: none; height: 36px; width: 127px; display: flex; justify-content: center; align-items: center; cursor: pointer; background: #999; border-radius: 4px; color: #ffffff; font-size: 14px; font-weight: 600; } .cb-pendamping__body { display: grid; gap: 8px 24px; font-size: 12px; font-style: normal; font-weight: 600; grid-template-columns: repeat(4, 1fr); } .cb-pendamping__body__item { text-align: center; position: relative; } .cb-pendamping__body__item__img { margin-bottom: 6px; } .cb-pendamping__body__item__text { color: #295243; } .cb-pendamping__body__item__badget { position: absolute; top: 0; right: 15px; } .mgb-18 { margin-bottom: 18px !important; } .box-planner { margin: 24px 0px; justify-content: center; align-items: center; background: url(../images/quran-planner/bg-planner-m.webp) no-repeat; background-size: cover; border-bottom: 5px solid var(--kuler-1); width: 100%; background-size: 100% 100%; border-radius: 8px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); } .box-planner__content { width: 100%; padding: 17px; display: flex; justify-content: center; gap: 24px; } .box-planner__content__left { display: flex; justify-content: center; margin-bottom: 0; } .box-planner__content__mid { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; gap: 0; } .box-planner__content__mid__title { font-size: 19px; font-weight: 700; color: #295243; display: flex; justify-content: center; text-align: left; margin-bottom: 5px; line-height: 100%; } .box-planner__content__mid__sub { font-size: 14px; font-weight: 700; color: #295243; display: flex; padding-left: 0; justify-content: center; text-align: left; margin-bottom: 0; line-height: 110%; font-weight: 500; } .box-planner__content__right { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; gap: 0; } .tab-filter-quran { width: 100%; } .tab-filter-quran ul { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; justify-content: center; } .tab-filter-quran ul li { padding: 0px !important; } .tab-filter-quran ul li a.selected .tab-filter-quran__choice { color: #295243 !important; border-bottom: 5px solid #295243; } .tab-filter-quran__choice { display: flex; gap: 12px; align-items: end; font-size: 16px; font-weight: 600; width: 113px; justify-content: center; color: #999; height: 100%; } .selected-filter { color: #295243 !important; border-bottom: 5px solid #295243; } .border-bottom-line { border-bottom: 1px solid #999; } .bookmark-list { overflow-x: scroll; display: flex; gap: 16px; white-space: nowrap; margin-bottom: 24px; } .bookmark-list__item { display: flex; padding: 8px 13px; align-items: center; border-radius: 100px; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06); border: 1px solid #7ebfa7; background: #d4eae2; } .bookmark-list__item__icon { padding-right: 11px; } .bookmark-list__item__text { font-size: 14px; font-style: italic; font-weight: 600; padding-right: 20px; color: #295243; } .bookmark-list__item:hover { background: #fff; } .collection-list { overflow-x: scroll; display: flex; gap: 16px; white-space: nowrap; margin-bottom: 24px; } .collection-list__item { display: flex; padding: 8px 13px; align-items: center; border-radius: 100px; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06); border: 1px solid #7ebfa7; background: #d4eae2; } .collection-list__item__icon { padding-right: 11px; } .collection-list__item__text a { color: #295243; } .collection-list__item__text__title { font-size: 14px; font-style: italic; font-weight: 600; padding-right: 20px; } .collection-list__item__text__ayat { font-size: 12px; font-style: italic; font-weight: 600; padding-right: 20px; } .collection-list__item:hover { background: #fff; } .box-choice-planner { width: 100%; height: 234px; background: url(../images/quran-planner/bg-quran-planner-new.webp) no-repeat; background-size: cover; padding: 28px 14px; margin-bottom: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .box-choice-planner__logo { display: flex; justify-content: center; align-items: center; } .box-choice-planner__text__title { font-size: 20px; font-weight: 700; color: #fff; display: flex; justify-content: center; align-items: center; margin-bottom: 16px; } .box-choice-planner__text__sub { font-size: 16px; color: #fff; font-weight: 600; display: flex; justify-content: center; align-items: center; text-align: center; } .box-planner-plan { border-radius: 8px; border: 0px solid #e6e6e6; width: 100%; margin-bottom: 34px; } .box-planner-plan__left { width: 100%; position: relative; padding: 16px 46px; border-radius: 14px; background: #e6f4f1; height: fit-content; margin-bottom: 34px; } .box-planner-plan__left__title { font-size: 18px; font-weight: 700; letter-spacing: -0.18px; color: #295243; margin-bottom: 12px; text-align: center; } .box-planner-plan__left__sub { font-size: 16px; font-style: italic; font-weight: 600; color: #295243; text-align: center; } .box-planner-plan__left__poligon { position: absolute; left: 47%; bottom: -30px; transform: rotate(90deg); } .box-planner-plan__right { width: 100%; } .box-planner-plan__right__list { display: flex; gap: 14px; padding: 18px 26px; background: #feffff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); border-radius: 8px; border: 1px solid #ccc; margin-bottom: 16px; } .box-planner-plan__right__list__left { background: url(../images/quran-planner/border-number.webp) no-repeat; background-size: cover; width: 75px; height: 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .box-planner-plan__right__list__left__ayat { font-size: 16px; font-weight: 700; color: #404041; } .box-planner-plan__right__list__left__text { font-size: 12px; font-style: normal; font-weight: 350; color: #404041; } .box-planner-plan__right__list__right { display: flex; flex-direction: column; justify-content: center; } .box-planner-plan__right__list__right__title { font-size: 16px; font-weight: 600; color: #295243; } .box-planner-plan__right__list__right__sub { font-size: 14px; font-style: italic; font-weight: 600; color: #295243; } .box-planner-plan__right__list:hover { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); background: #f7ebd3; border: 1px solid #efd297; border-radius: 8px; cursor: pointer; } .box-planner-plan__right__button { display: flex; width: 100%; justify-content: center; gap: 27px; } .box-planner-plan__right__button__back { display: flex; gap: 12px; justify-content: center; align-items: center; width: 125px; height: 36px; border-radius: 4px; border: 1px solid #7ebfa7; background: #d4eae2; } .box-planner-plan__right__button__back :hover { cursor: pointer; } .box-planner-plan__right__button__back__text { font-size: 14px; font-style: normal; font-weight: 600; color: #295243; } .box-planner-plan__right__button__next { display: flex; gap: 12px; justify-content: center; align-items: center; width: 125px; height: 36px; border-radius: 4px; border: 1px solid #d4eae2; background: #295243; } .box-planner-plan__right__button__next :hover { cursor: pointer; } .box-planner-plan__right__button__next__text { font-size: 14px; font-weight: 600; color: #fff; } .active-box { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); background: #f7ebd3; border: 1px solid #efd297; border-radius: 8px; } .choice-program .box-planner-plan { border-radius: 8px; border: 0px solid #e6e6e6; width: 100%; margin-bottom: 34px; background: #f7f7f7; padding: 20px; } .choice-program .box-planner-plan__left { width: 100%; position: relative; padding: 16px 46px; border-radius: 14px; background: #e6f4f1; height: fit-content; margin-bottom: 34px; } .choice-program .box-planner-plan__left__title { font-size: 18px; font-weight: 700; letter-spacing: -0.18px; color: #295243; margin-bottom: 12px; text-align: center; } .choice-program .box-planner-plan__left__sub { font-size: 16px; font-style: italic; font-weight: 600; color: #295243; text-align: center; } .choice-program .box-planner-plan__left__poligon { position: absolute; left: 47%; bottom: -30px; transform: rotate(90deg); } .choice-program .box-planner-plan__right { width: 100%; } .choice-program .box-planner-plan__right__list { display: flex; justify-content: space-between; padding: 18px 26px; background: #feffff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); border-radius: 8px; border: 1px solid #ccc; margin-bottom: 24px; align-items: center; } .choice-program .box-planner-plan__right__list__programl { display: flex; gap: 18px; } .choice-program .box-planner-plan__right__list__programl__left { background: url(../images/quran-planner/calendar.webp) no-repeat; background-size: cover; width: 58px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .choice-program .box-planner-plan__right__list__programl__left__ayat { font-size: 18px; font-weight: 700; color: #404041; padding-top: 3px; } .choice-program .box-planner-plan__right__list__programl__left__text { font-size: 12px; font-style: normal; font-weight: 350; color: #404041; } .choice-program .box-planner-plan__right__list__programl__right { display: flex; flex-direction: column; justify-content: center; } .choice-program .box-planner-plan__right__list__programl__right__title { font-size: 18px; font-weight: 600; color: #295243; } .choice-program .box-planner-plan__right__list__programl__right__sub { font-size: 16px; font-style: italic; font-weight: 600; color: #295243; } .choice-program .box-planner-plan__right__list__programr { display: flex; align-items: center; width: 97px; height: 40px; justify-content: center; border-radius: 4px; background-color: #fdefcd; font-size: 16px; font-style: normal; font-weight: 600; color: #295243; } .choice-program .box-planner-plan__right__button { display: flex; width: 100%; justify-content: center; gap: 27px; } .choice-program .box-planner-plan__right__button__back { display: flex; gap: 12px; justify-content: center; align-items: center; width: 125px; height: 36px; border-radius: 4px; border: 1px solid #7ebfa7; background: #d4eae2; } .choice-program .box-planner-plan__right__button__back :hover { cursor: pointer; } .choice-program .box-planner-plan__right__button__back__text { font-size: 14px; font-style: normal; font-weight: 600; color: #295243; } .choice-program .box-planner-plan__right__button__next { display: flex; gap: 12px; justify-content: center; align-items: center; width: 125px; height: 36px; border-radius: 4px; border: 1px solid #d4eae2; background: #295243; } .choice-program .box-planner-plan__right__button__next :hover { cursor: pointer; } .choice-program .box-planner-plan__right__button__next__text { font-size: 14px; font-weight: 600; color: #fff; } .tabbing .surah__search__body__search { position: relative; margin-bottom: 15px; } .tabbing .surah__search__body__search input { width: 100%; padding: 16px 40px 16px 18px; color: #333333; font-weight: 600; font-size: 12px; border: 1px solid #a9d4c4; border-radius: 44px; background: #ffffff; height: 34px; } .tabbing .surah__search__body__search input::placeholder { color: #999; font-weight: 600; font-size: 12px; } .tabbing .surah__search__body__search img { position: absolute; right: 20px; top: 8px; } .box-progress { padding: 26px; width: 100%; background: url(../images/quran-planner/bg-box-progress-m.webp) no-repeat; background-size: 100% 100%; margin-bottom: 24px; } .box-progress__top { display: flex; gap: 16px; margin-bottom: 16px; height: 80px; } .box-progress__top__content { margin-bottom: 19px; } .box-progress__top__content__box { background: url(../images/quran-planner/border-number.webp) no-repeat; background-size: cover; width: 80px; height: 80px; } .box-progress__top__content__box__box { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 80px; } .box-progress__top__content__box__box span { font-size: 14px; font-weight: 700; color: #404041; } .box-progress__top__content__box__box__ayat { font-size: 23px; font-weight: 700; color: #404041; } .box-progress__top__content__box__box__text { font-size: 16px; font-weight: 350; color: #404041; margin-top: -7px; } .box-progress__top__right { width: 100%; } .box-progress__top__right__title { height: 36px; display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 4px; background-color: #a9d4c4; font-size: 14px; color: #295243; font-weight: 700; margin-bottom: 10px; } .box-progress__top__right__sub { display: flex; justify-content: center; font-size: 14px; font-weight: 600; color: #295243; } .box-progress__content { position: relative; } .box-progress__content__title { font-size: 18px; color: #295243; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: center; } .box-progress__content__left { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; } .box-progress__content__left__text { font-size: 12px; font-style: italic; font-weight: 600; color: #295243; } .box-progress__content__box { width: 100%; } .box-progress__content__box__list { display: flex; gap: 6px; z-index: 3; position: relative; margin-bottom: 18px; width: 100%; } .box-progress__content__box__list__day { z-index: 4; width: calc(100% / 7); } .box-progress__content__box__list__day__title { text-align: center; font-size: 12px; color: #295243; margin-bottom: 10px; font-weight: 500; } .box-progress__content__box__list__day__img { justify-content: center; display: flex; } .box-progress__content__box__line { position: absolute; z-index: 1; bottom: 11px; height: 3px; background-color: #295243; border-radius: 50px; width: 100%; } .box-progress__content__text { font-size: 12px; font-style: italic; font-weight: 600; color: #295243; display: flex; justify-content: center; } .box-progress__button { display: flex; justify-content: center; align-items: center; gap: 8px; width: 155px; height: 36px; font-size: 14px; font-weight: 600; color: #fff; background: #295243; border-radius: 4px; } .modal-delete-collection { width: 240px !important; display: flex; align-items: center; margin: 18px auto; min-height: calc(100% - 36px); max-height: calc(100% - 36px); flex-direction: column; justify-content: center; } .modal-delete-collection__content { padding: 0px 16px 16px 16px; } .modal-delete-collection__close { width: 100%; display: flex; justify-content: end; padding: 8px 0px 0px 0px; } .modal-delete-collection__title { padding-top: 15px; font-size: 14px; font-weight: 600; color: #295243; text-align: center; margin-bottom: 6px; } .modal-delete-collection__sub { font-size: 12px; color: #333; font-weight: 400; color: #295243; text-align: center; margin-bottom: 14px; } .modal-delete-collection__button { display: flex; justify-content: center; gap: 10px; } .modal-delete-collection__button__delete button { width: 90px; height: 25px; outline: none; border-radius: 4px; background: #295243; font-size: 12px; font-weight: 600; color: #fff; border: none; } .modal-delete-collection__button__cancel button { width: 90px; height: 25px; outline: none; border-radius: 4px; border: 1px solid #a9d4c4; background: #d4eae2; font-size: 12px; font-weight: 600; color: #295243; border: none; } .mendal { display: flex; align-items: end; gap: 3px; } .mendal a { margin-left: 13px; } .quran-planner-button { display: flex; justify-content: space-between; width: 100%; margin-top: 12px; margin-bottom: 12px; } .quran-planner-button__left { display: flex; align-items: center; gap: 16px; } .quran-planner-button__left__item { display: flex; align-items: center; gap: 8px; } .quran-planner-button__left__item__text { font-size: 12px; font-weight: 400; color: #2e7259; } .quran-planner-button__left__item__text a { font-size: 12px; font-weight: 400; color: #2e7259; } @media only screen and (max-width: 320px) { .quran-planner-button__left { gap: 8px !important; } .quran-planner-button__left__item { gap: 6px !important; } .quran-planner-button__left__item__text a { font-size: 10px !important; } } .modal-button-more { width: 240px !important; display: flex; align-items: center; margin: 18px auto; min-height: calc(100% - 36px); max-height: calc(100% - 36px); flex-direction: column; justify-content: center; } .modal-button-more__content { position: absolute; bottom: 0; width: 324px; border-radius: 14px 14px 0px 0px !important; } .modal-button-more__content__close { width: 100%; display: flex; justify-content: end; padding: 16px 16px 0px 0px; } .modal-button-more__content__body { padding: 0px 23px 0px 23px; } .modal-button-more__content__body__item { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .modal-button-more__content__body__item__text { font-size: 14px; font-weight: 400; color: #2e7259; } .modal-add-collection { width: 280px !important; display: flex; align-items: center; margin: 18px auto; min-height: calc(100% - 36px); max-height: calc(100% - 36px); flex-direction: column; justify-content: center; } .modal-add-collection__content { padding: 16px 16px 16px 16px; } .modal-add-collection__close { width: 100%; display: flex; justify-content: end; cursor: pointer; } .modal-add-collection__title { font-size: 16px; font-style: normal; font-weight: 600; color: #295243; margin-bottom: 14px; } .modal-add-collection__input { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #ccc; background-color: #f7f7f7; border-radius: 4px; height: 41px; padding: 8px 12px; } .modal-add-collection__input input { border: none; outline: none; border-radius: 4px; width: 100%; background-color: #f7f7f7; } .modal-add-collection__input input ::placeholder { font-size: 12px; font-style: normal; font-weight: 400; color: #999; } .modal-add-collection__input a { outline: none; cursor: pointer; border-radius: 4px; background: #ccc; font-size: 12px; font-style: normal; font-weight: 600; color: #666; width: 55px; height: 25px; text-align: center; border: none; } .modal-add-collection__checkbox { margin-bottom: 14px; } .modal-add-collection__checkbox__item { display: flex; gap: 8px; } .modal-add-collection__checkbox__item label { font-size: 14px; font-style: normal; font-weight: 400; color: #333; margin-left: 0px !important; } .modal-add-collection__button { width: 100%; display: flex; justify-content: center; } .modal-add-collection__button button { width: 131px; height: 36px; border-radius: 4px; outline: none; background-color: #295243; border: none; color: #fff; font-size: 14px; font-weight: 600; } .modal-info-tajwid { width: 100%; display: flex; align-items: center; margin: 18px auto; min-height: calc(100% - 36px); max-height: calc(100% - 36px); flex-direction: column; justify-content: center; } .modal-info-tajwid__content { position: absolute; bottom: 0; width: 100%; border-radius: 14px 14px 0px 0px !important; } .modal-info-tajwid__content__sponsor { display: flex; justify-content: center; align-items: center; gap: 11px; margin-bottom: 27px; } .modal-info-tajwid__content__sponsor__text { font-size: 12px; font-style: normal; font-weight: 400; } .modal-info-tajwid__content__close { width: 100%; display: flex; justify-content: end; padding: 16px 16px 0px 0px; } .modal-info-tajwid__content__body { padding: 0px 23px 0px 23px; overflow-y: scroll; max-height: 156px; margin-bottom: 15px; } .modal-info-tajwid__content__body__item { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; } .modal-info-tajwid__content__body__item__text { font-size: 12px; font-weight: 400; color: #333; } .notification-status { position: fixed; right: 50px; bottom: 5%; z-index: 3; } .notification-status__box { position: relative; padding: 12px 16px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); border-radius: 4px; background-color: #d4eae2; cursor: pointer; } .notification-status__box__content { display: flex; gap: 11px; align-items: center; } .notification-status__box__content__text { font-size: 16px; font-style: normal; font-weight: 600; color: #295243; } .notification-status__box__close { position: absolute; top: -10px; right: -10px; cursor: pointer; } .box-detail-collection { width: 100%; display: flex; justify-content: center; align-items: center; background: url(../images/quran-planner/bg-collection-m.webp) no-repeat; background-size: cover; height: 100px; gap: 28px; margin-bottom: 24px; } .box-detail-collection__text__title { font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #f9ba6f; } .box-detail-collection__text__sub { font-size: 18px; font-weight: 600; color: #fff; } .box-detail-collection__text__ayat { font-size: 14px; font-style: italic; font-weight: 400; color: #fff; } .list-detail-collection { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 34px; } .list-detail-collection__box { display: flex; justify-content: center; flex: 1; } .list-detail-collection__button { display: flex; justify-content: center; width: 100%; height: 44px; align-items: center; font-size: 20px; } .list-detail-collection__button img { rotate: 180deg; } .w-max-content { width: max-content !important; } .modal-help { width: 285px !important; display: flex; align-items: center; margin: 18px auto; min-height: calc(100% - 36px); max-height: calc(100% - 36px); flex-direction: column; justify-content: center; } .modal-help__content { padding: 0px 16px 16px 16px; } .modal-help__content__title { padding-top: 15px; font-size: 14px; font-weight: 600; color: #295243; margin-bottom: 15px; padding-left: 20px; } .modal-help__content__body { padding: 0px 16px; } .modal-help__content__body__item { display: flex; gap: 10px; margin-bottom: 17px; } .modal-help__content__body__item__text { font-size: 12px; color: #295243; font-weight: 500; width: 150px; } .modal-help__close { width: 100%; display: flex; justify-content: end; padding: 8px 0px 0px 0px; } .modal-help__close img { cursor: pointer; } .header-quran { padding: 10px 18px; display: flex; justify-content: space-between; width: 100%; background: #fff; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); margin-bottom: 18px; width: 100%; position: fixed; z-index: 5; } .header-quran__rightl { display: flex; align-items: center; gap: 7px; } .header-quran__rightl__daftar { width: 93px; height: 25px; display: flex; justify-content: center; align-items: center; background-color: #21409a; border-radius: 100px; font-size: 12px; font-weight: 400; color: #fff; } .header-quran__rightl__masuk { border-radius: 100px; border: 1px solid #21409a; width: 58px; height: 25px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 400; } .pt-70 { padding-top: 70px !important; } .pt-80 { padding-top: 80px !important; } .margin-side-minus-18 { margin-left: -18px !important; margin-right: -18px !important; } .w-auto { width: auto !important; } .mgb-46 { margin-bottom: 46px !important; } .arah-kiblat { background: url("../images/arah-kiblat-bg.webp") no-repeat top var(--kuler-1); background-size: cover; margin: 24px 0; padding: 24px; border-radius: 6px; overflow: hidden; } .arah-kiblat__title { color: #FCD373; margin-top: 24px; font-size: 23px; } .kartu-image-top { width: 100%; height: auto; } .kartu__title { font-weight: 500; font-size: 23px; color: #2e7259; margin-bottom: 16px; } .kartu__left { margin-bottom: 60px; } .kartu__left__name { margin-bottom: 20px; font-weight: 500; font-size: 16px; color: #333333; margin-top: 8px; } .kartu__left__underline { border: 1px solid #cccccc; width: 254px; } .kartu__left__button { display: flex; width: 100%; justify-content: center; margin-bottom: 60px; } .kartu__left__button__download { width: 141px; height: 36px; background: #2e7259; border-radius: 4px; font-weight: 500; font-size: 14px; color: #ffffff; padding-left: 10px; margin-right: 12px; } .kartu__left__button__preview { width: 97px; height: 36px; border: 1px solid #2e7259; border-radius: 4px; text-align: center; } .kartu__left__button__preview a { font-weight: 600; font-size: 14px; color: #2e7259; } .kartu__right__text { font-weight: 400; font-size: 14px; color: #232323; margin-bottom: 8px; } .kartu__right__choose { display: flex; flex-wrap: wrap; width: 100%; gap: 10px; } .kartu__right__choose a { background: #e6e6e6; border-radius: 4px; font-weight: 600; font-size: 12px; color: #232323; padding: 8px; } .kartu__right__choose a.selected { color: #ffffff; background: #2e7259; } .kartu__right__scroll { overflow-y: scroll; max-height: 440px; margin-bottom: 30px; display: flex; justify-content: center; } .kartu__right__scroll__items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .kartu__right__scroll__items__item img { width: 100%; height: auto; } .kartu__right__scroll__items__item__name { font-weight: 600; font-size: 14px; color: #333333; margin-bottom: 8px; text-align: center; } .kartu__sample { background: #f7f7f7; border: 1px solid #f0f0f0; border-radius: 4px; padding: 25px; margin-bottom: 25px; } .kartu__sample__title { font-weight: 600; font-size: 16px; color: #2e7259; } .kartu__sample__list { padding-left: 0; list-style: none; } .kartu__sample__list li { padding: 5px 0; font-weight: lighter; display: flex; align-items: center; } .kartu__sample__list li input[type="radio"] { min-width: 12px; display: flex; align-items: center; } input[type="radio"] { float: left; -webkit-appearance: radio; } label { margin-left: 10px; display: block; } .kartu__photowall { border: 1px solid #e6e6e6; border-radius: 4px; padding: 25px; margin-bottom: 30px; } .kartu__photowall__title { color: #295243; font-weight: 600; font-size: 18px; width: 100%; text-align: center; margin-bottom: 16px; } .kartu__photowall__title__text { width: 180px; } .kartu__photowall__img { margin-bottom: 16px; } .kartu__photowall__img img { max-width: 100%; height: auto; } .kartu__photowall__button { width: 100%; display: flex; justify-content: center; align-items: center; } .kartu__photowall__button__item { background: #ea7000; border-radius: 4px; width: 156px; height: 36px; font-weight: 600; font-size: 14px; color: #ffffff; } .modal-dialog { width: 100%; padding: 0px 20px; } .modal-body { padding: 0px !important; } .close-modal { top: -15px !important; right: -14px !important; display: flex; justify-content: center; align-items: center; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); width: 30px; height: 30px; } .modal__title { font-weight: 600; font-size: 18px; color: #ffffff; margin-bottom: 20px; } .modal__desc { font-weight: 600; font-size: 14px; line-height: 20px; color: #ffffff; text-align: center; } .modal-box { background: rgba(0, 0, 0, 0.75) !important; } .ecard-title { color: #2e7259; font-size: 26px; text-transform: uppercase; display: block; padding: 40px 0; font-size: 17px; padding: 20px 15px; } .ecard { width: 100%; position: relative; border-radius: 4px; } .ecard__content { width: 50%; margin: 0 auto; position: relative; padding: 50px 0 0; padding: 35px 0 0; width: 100% !important; } .ecard .icon-angle-right:before, .ecard .icon-angle-left:before { margin-bottom: 3px; } .ecard .icon-angle-right:before { margin-left: 12px; } .ecard__images { width: 100%; height: 100%; margin: auto; display: block; padding: 15px 19px; border: 10px solid #fff; filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.16)); border-radius: 8px; } .ecard__images .ratiobox_content { border-radius: 0px; } .ecard__arrow { z-index: 2; font-size: 44px; color: #2e7259; padding: 0; margin-left: -2px; line-height: 30px; } .ecard__arrow:hover { color: #fff; } .ecard__arrow--prev { margin-left: -3px; } .ecard__arrow--next { margin-left: -1px; } .ecard__input-text { position: absolute; width: 395px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.4); border: 1px solid green; color: green; font-size: 13px; padding: 10px; font-weight: lighter; text-align: center; mix-blend-mode: difference; } .ecard__input-text::placeholder { color: #000000; font-style: italic; color: #4a4a4a; } .ecard__input-text:focus::placeholder { color: transparent; } .ecard__input-text--nama { top: 12%; height: 30px; top: inherit; top: 35px; width: 360px; } .ecard__input-text--kata { top: 23%; height: 89px; } .ecard__input-text--kata::placeholder { padding-top: 2px; } .ecard__text { color: green; font-size: 16px; text-align: center; padding-top: 15px; padding-bottom: 15px; font-size: 15px; } .ecard article { display: block; margin: 0 10px; } .ecard-step { background: #fff; padding: 40px; margin-top: 40px; border-radius: 8px; } .ecard-step img { width: 100%; } .ecard-step__title { font-weight: 500; font-size: 20px; text-transform: uppercase; color: #2e7259; display: flex; justify-content: center; align-items: center; font-size: 16px; text-align: center; margin-bottom: 20px; } .ecard-step__item { padding: 0 20px; position: relative; text-align: center; } .ecard-step__num { position: absolute; display: inline-block; top: 0; left: 30px; color: green; background: #fff; padding: 5px; width: 28px; height: 28px; font-size: 20px; border-radius: 50%; } .ecard-step__img { margin-bottom: 15px; } .ecard-step__img img { width: 120px; } .ecard-step__desc { font-size: 16px; color: #2e7259; font-weight: 500; text-transform: uppercase; height: 40px; display: flex; justify-content: center; align-items: center; } .ecard-sample { background: #ffffff; padding: 20px 15px; border-radius: 8px; } .ecard-sample__title { font-size: 18px; color: #206460; text-transform: uppercase; text-align: center; } .ecard-sample__list { padding-left: 0; list-style: none; } .ecard-sample__list li { padding: 5px 0; font-weight: lighter; } .ecard-sample__list li input[type="radio"] { box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4); } .ecard-title-template { width: 100%; color: #2e7259; font-size: 20px; display: block; padding: 20px 0; } .ecard-template { width: 100%; padding: 0; } .ecard-template-wrap { padding: 20px 40px; margin-bottom: 40px; border-radius: 4px; } .ecard-template__content { padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px 15px; } .ecard-template__images { width: 100%; border: 5px solid #fff; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1); box-sizing: border-box; border-radius: 8px; } .ecard-template__images .ratiobox_content { border-radius: 0px; } .ecard-template__text h2 { font-size: 14px; color: #000000; padding-top: 15px; text-align: center; } input[type="radio"] { float: left; } label { margin-left: 30px; display: block; } .h-450 { position: relative; } .textarea-ucapan { mix-blend-mode: unset; border-radius: 8px; color: #000; border-color: rgba(255, 255, 255, 0.2); width: 75% !important; padding: 0px !important; margin: 0 auto !important; } .textarea-ucapan--event { top: 30%; height: 56px; } .input-nama-ucapan { mix-blend-mode: unset; border-radius: 8px; color: #000; border-color: rgba(255, 255, 255, 0.2); width: 75% !important; margin: 0 auto !important; } .input-nama-ucapan--event { top: 18%; height: auto; padding: 0; font-size: 18px; } .input-nama-ucapan--event::placeholder { font-size: 13px; } .share { gap: 10px; } :root { --kuler-1: #295243; --kuler-2: #1e9d6f; --kuler-3: #f7931d; --kuler-4: #fcd373; } body { text-rendering: optimizeLegibility; } .breaking-sticky .media__text, .headline, .headline .media--text-overlay .media__text, .footer__border { background: #295243; /* Old browsers */ background: -moz-linear-gradient(100deg, #295243 60%, #1e9d6f 100%); /* FF3.6+ */ background: -webkit-linear-gradient(100deg, #295243 60%, #1e9d6f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(100deg, #295243 60%, #1e9d6f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ } .headline .media--text-overlay .media__text { background: #295243; /* Old browsers */ background: -moz-linear-gradient(top, #295243 65%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #295243 65%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, #295243 65%, 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 */ } .color-orange-light-2 { color: #f7931d; } .box__title, .section__title, .page__title, .detail__multiple-paging .text-list--title, .detail__title, .linksisip a, .color-hikmah { color: var(--kuler-1); } .detail__anchor-icon.detail__anchor-icon--active, .detail__multiple .detail__anchor-numb.detail__anchor-numb--active { background: var(--kuler-1); } .color-kuler-1, .color-kuler-1 .color-paging { color: var(--kuler-1); } .color-kuler-2 { color: var(--kuler-2); } .color-kuler-3 { color: var(--kuler-3); } .color-black-light2 { color: #666666; } .color-black-light3 { color: #999999; } .stretch { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } .content__bg { background: #FFFFFF; } .btn--indeks, .btn--indeks:hover { background: var(--kuler-1); } .btn--indeks-alt, .btn--indeks-alt:hover { background: var(--kuler-2); } .linksisip, .quotesisip { border-left: 5px solid var(--kuler-1); } .cb-commented__color-data { color: var(--kuler-3); } .btn--default-next { color: var(--kuler-3); } .textarea-grey { width: 100%; border-radius: 8px; } .section__blak { background: #666666; /* Old browsers */ background: -moz-linear-gradient(135deg, #666666 50%, #999999 100%); /* FF3.6+ */ background: -webkit-linear-gradient(135deg, #666666 50%, #999999 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #666666 50%, #999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color',GradientType=1 ); /* IE6-9 */ padding: 0px 0px 0px 0; height: 39px; position: relative; margin-top: 20px; } .section__blak img { margin-top: -17px; } .article__recomendation { padding: 8px 12px; background: #FFFFFF; border-top: 8px solid #812e88; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3); display: none; } .bottom-sticky { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 26; } #slider-headline .slick-slide { margin: 0 9px; } .slider-hikmah { overflow: hidden; background: linear-gradient(180deg, #23634b 0%, #136346 72.92%, #1a4736 100%); padding: 20px 0px; margin: 0px -18px; margin-bottom: 18px; height: 365px; } .slider-hikmah--media { max-height: 217px !important; } .slider-hikmah .slick-dotted { padding-bottom: 40px; } .slick-dots { bottom: 20px; } .slick-dots li { margin: 0 8px; } .slick-dots li button { border: 1px solid #666666; background: transparent; } .slick-dots li.slick-active button { opacity: 1; filter: alpha(opacity=100); background: #666666; } .text__body-box { padding: 16px; background: #f7f7f7; border-radius: 5px; color: #666666; position: relative; } .text__body-box-title { font-size: 18px; color: #333333; } .text__body-box .media__author { margin-top: 0; } .text__body-box .media__author-image-avatar { width: 35px; height: 35px; } .static { margin-bottom: 16px; } .static-nav { margin-bottom: 16px; } .static-nav .selected div { color: #ef672f; } .static-nav .selected div i { color: #000000; } .static__body { color: #000000; font-size: 14px; } .static__body-text ul { list-style: none; } .static__body-text h1 { font-size: 23px; } .static__body-text h2 { font-size: 20px; } .static__body-text h3 { font-size: 18px; } .static__body-text h4 { font-size: 16px; } .static__body-text h5 { font-size: 14px; } .static__body-text h6 { font-size: 12px; } .static__body-box { margin: 24px 0; padding: 16px; background: #e3f5fe; border-radius: 5px; } .static__body-box div { color: #21409A; } .static__body-box p { margin: 4px 0 16px; } .static__body-form { margin-bottom: 24px; } .static__body-form span { margin: 20px 0; display: block; vertical-align: middle; } .static__body-form--disable { opacity: 0.4; } .static__body-form .steps { align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e6e6; margin-bottom: 16px; } .static__body-form .steps span { margin-bottom: 4px; } .static__body-form .numb { display: inline-block; margin: 0 4px 0 0; padding: 6px; text-align: center; width: 30px; height: 30px; color: #FFFFFF; background: #21409A; } .new_banner_reg_100:before { position: relative; content: ""; width: auto; } .loader-animate { width: 32px; margin: 12px auto; } .livereport { margin-top: 8px; } .livereport__sponsor { text-align: center; padding: 4px 12px 12px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; font-size: 12px; } .livereport__sponsor img { margin-top: 4px; max-width: 200px; max-height: 80px; } .media-pinch { min-height: 140%; max-width: 1000px; max-height: unset; position: relative; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #333333; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; padding: 16px; } .media-pinch > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; cursor: move; touch-action: none; vertical-align: unset; border-style: unset; position: relative; max-height: 100%; max-width: 100%; z-index: 1; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .media__image.img-xss { width: 56px; } .pagination__item--active, .pagination__item--active:hover { background: var(--kuler-1); } .snk { border-bottom: 1px solid #000; } .snk__accordion-title { display: flex; align-items: center; justify-content: space-between; } .snk__accordion-title span { display: flex; align-items: center; } .snk__accordion-content { font-size: 14px; line-height: 20px; font-weight: 300; display: none; } .snk__list { margin: 0; padding: 0 0 0 20px; } .snk__list li { margin: 0; padding: 5px 0 0 0; } .snk__login { font-size: 16px; line-height: 22px; font-weight: 400; color: #000; } .snk__login p { margin-bottom: 10px; } #snk__check { display: none; } #snk__check ~ .snk__accordion-content { display: none; } #snk__check:checked ~ .snk__accordion-content { display: block; } #snk__check:checked ~ .snk__accordion-title span { transform: rotate(180deg); } .koleksi { border-radius: 8px; overflow: hidden; } .nhl .koleksi { margin: -8px; margin-bottom: 8px; } .koleksi__bg { position: absolute; left: 0; top: 0; width: 100%; display: inline-block; height: 100px; } .koleksi__bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .koleksi.koleksi--index { background: #FFFFFF; } .koleksi__header { padding: 0 16px; height: 100px; color: #FFFFFF; display: flex; justify-content: space-between; align-items: center; position: relative; } .koleksi__header-text { z-index: 1; position: relative; } .koleksi__header-title { font-size: 20px; margin-bottom: 0; } .koleksi__header-subtitle { font-size: 14px; color: #fcd373; margin-bottom: 0; } .koleksi__list { padding: 8px 0 16px 0; } .koleksi__list .column-12 { overflow: hidden; } .koleksi--index .koleksi__list { padding: 8px 5px 16px 5px; } .nhl .koleksi__list { margin: -16px; margin-top: 8px; } .koleksi__list .list-content__item { margin-bottom: 16px; padding: 0 8px; } .koleksi--index .koleksi__list .list-content__item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e6e6e6; } .koleksi__list .box .list-content__item { margin-bottom: 16px; padding: 0 0; } .koleksi__list.list-content--column .list-content__item:last-child { margin-bottom: 16px; } .koleksi-wide { overflow: hidden; border-radius: 8px; position: relative; margin-bottom: 16px; } .koleksi-wide--ondetail .koleksi-wide { border-radius: 0; margin-bottom: 0; } .koleksi-wide--ondetail { border-radius: 8px; overflow: hidden; background: #f7f7f7; margin-bottom: 16px; border: 1px solid #e6e6e6; } .koleksi-wide__bg { width: 100%; padding-top: 100%; overflow: hidden; position: relative; } .koleksi-wide__bg img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } .koleksi-wide__overlay { flex: 1; position: static; font-size: 12px; color: #666666; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.4); height: 100%; padding: 16px; display: flex; flex-flow: column; justify-content: center; } .koleksi-wide--ondetail .koleksi-wide__overlay { background: rgba(41, 82, 67, 0.6); } .koleksi-wide .detail__share { color: #FFFFFF; padding: 0; justify-content: flex-start; margin-top: 12px; } .foto-pop-up { background: #000000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; overflow: scroll; padding: 20px 0; } .media-pinch { min-height: 140%; max-width: 1000px; max-height: unset; position: relative; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #333333; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; padding: 16px; } .media-pinch > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; cursor: move; touch-action: none; vertical-align: unset; border-style: unset; position: relative; max-height: 100%; max-width: 100%; z-index: 1; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .ratiobox--10-7 { padding-bottom: 78.125%; } .slider-hikmah { /* the slides */ /* the parent */ } .slider-hikmah .slick-next { right: 110px !important; color: #2e7259 !important; } .slider-hikmah .slick-prev { left: 110px !important; color: #2e7259 !important; } .slider-hikmah .slick-arrow { top: 41% !important; background: #ffffff !important; border-radius: 2px; } .slider-hikmah .slick-prev::before { font-size: 30px !important; } .slider-hikmah .slick-next::before { font-size: 30px !important; } .slider-hikmah .slick-dots li.slick-active button { background: #fcd373; } .slider-hikmah .slick-dots li button { opacity: 1; background: #ffffff; } .slider-hikmah .slick-slide { opacity: 0.5; filter: alpha(opacity=50); } .slider-hikmah .slick-list { overflow: visible; } .slider-hikmah .slick-active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); transform-origin: center; opacity: 1; filter: alpha(opacity=100); } .accordion-content { padding: 16px 0; } .accordion-title { padding: 16px 16px 16px 0; color: var(--kuler-1); font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: nowrap; align-items: center; justify-content: space-between; -webkit-transition: padding 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s; -moz-transition: padding 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s; -ms-transition: padding 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s; -o-transition: padding 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s; transition: padding 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s; } .accordion-open { padding-left: 16px; background: #f0f0f0; } .mgb-18 { margin-bottom: 18px; } .border-gray { border: 1px solid #e6e6e6 !important; } .input-style { padding-left: 12px; color: #000 !important; font-weight: 600; font-size: 16px; } .input-style::placeholder { color: #000 !important; font-weight: 600; font-size: 16px; } .box-hasil { border-radius: 8px; border: 2px solid #2e7259; width: 100%; padding: 20px; background: #fff; margin-bottom: 26px; } .box-hasil__title { color: #232323; font-size: 14px; font-weight: 550; line-height: 20px; padding-bottom: 10px; width: 100%; display: flex; justify-content: center; } .box-hasil__title span { text-align: center; } .box-hasil__jumlah { background: #f0f3f4; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 56px; margin-bottom: 15px; } .box-hasil__jumlah__text { width: 180px; font-size: 20px; color: #2e7259; font-weight: 600; line-height: 32px; } .box-hasil__jumlah__button button { outline: none; border: 1px solid #2e7259; border-radius: 4px; background: none; cursor: pointer; width: 90px; height: 36px; font-size: 14px; color: #2e7259; } .box-hasil__logo { width: 100%; display: flex; justify-content: center; margin-top: 15px; } .box-hasil__jumlah2 { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; margin-bottom: 15px; width: 100%; } .box-hasil__jumlah2__text { font-size: 23px; color: #2e7259; font-weight: 600; line-height: 32px; background: #f0f3f4; padding: 10px 16px; } .box-hasil__button { width: 100%; display: flex; justify-content: center; } .box-hasil__button button { width: 141px; height: 36px; outline: none; border: none; background: #2e7259; border-radius: 4px; color: #fff; } .nav-haji { font-size: 14px; } .nav-haji__icon { width: 70px; height: 70px; margin: 0 auto 8px; display: block; } .nav-haji a { display: block; color: var(--kuler-1); text-align: center; } .nav-haji a:hover { color: var(--kuler-3); } .nav-haji-right { font-size: 16px; } .nav-haji-right__icon { width: 63px; height: 63px; margin-right: 12px; } .nav-haji-right .nav__item { width: 100%; display: block; } .nav-haji-right .nav__item a { padding: 8px 0; } .nav-haji-right .nav__item a:hover { color: var(--kuler-3); } .nav-haji--column .column { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .nav-haji--column .column a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; text-align: left; width: 100%; } .nav-haji--column .nav-haji__icon { margin: 0 12px 0 0; } .btn--green-gradient { border-radius: 8px; background: linear-gradient(127deg, #1d380b 3.89%, #4d642c 52.48%, #778d4f 90.47%); box-shadow: 1px 1px 4px 0px #000; text-shadow: 1px 1px 1px #000; color: white; } .btn--green-gradient:hover { opacity: 1; color: white; text-shadow: 1px 1px 0px #000; box-shadow: 1px 1px 1px 0px #000; } .mamah-dedeh { position: relative; } .mamah-dedeh img { max-width: 100%; } .mamah-dedeh .btn { position: absolute; bottom: 12px; } .mamah-dedeh p { font-weight: 600; font-style: italic; margin: 5px 0; max-height: 60px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mamah-dedeh__box { position: absolute; left: 0; right: 0; bottom: 0; margin: 7px; } .mamah-dedeh__curhat { border-radius: 8px; background: rgba(255, 255, 255, 0.8); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 5px 10px; font-size: 12px; height: 104px; margin: 0 5px; } .mamah-dedeh-slider.slick-dotted.slick-slider { padding-bottom: 20px; } .mamah-dedeh-slider .slick-track { height: 120px !important; } .mamah-dedeh-slider .slick-dots { display: inline-flex; gap: 5px; justify-content: end; bottom: -11px; right: 5px; } .mamah-dedeh-slider .slick-dots li { margin: 0; width: auto; height: auto; } .mamah-dedeh-slider .slick-dots li.slick-active button { background: #fcd373; } .mamah-dedeh-slider .slick-dots li button { background: #fff; opacity: 1; border: none; width: 6px; height: 6px; padding: 0; } .hikmah-otd { position: relative; } .hikmah-otd img { width: 100%; } .hikmah-otd__content { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0 16px; display: flex; flex-flow: column; row-gap: 30px; justify-content: space-between; } @media (max-width: 359px) { .hikmah-otd__content { bottom: 10px; row-gap: 12px; } } @media (min-width: 400px) { .hikmah-otd__content { row-gap: 40px; } } .hikmah-otd__content .title { color: #295243; text-shadow: 0px 5px 8px rgba(0, 0, 0, 0.25); font-size: 24px; font-weight: 700; line-height: 28px; text-align: center; } .hikmah-otd__content .body { color: #000; font-size: 16px; font-style: italic; font-weight: lighter; line-height: 20px; min-height: 200px; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; } .hikmah-otd__content .info { color: #2e7259; text-align: right; text-shadow: 0px 5px 8px rgba(0, 0, 0, 0.25); font-size: 14px; font-style: italic; font-weight: 600; line-height: 20px; text-decoration-line: underline; } .wording-login { padding: 13px 14px; border-radius: 8px; border: 1px solid #f9ba6f; width: 100%; background: #fce7cc; color: #666; font-size: 14px; font-weight: 400; } .wording-login a { color: #ef672f; font-weight: 700; } .cb-ngaji { border-radius: 8px 8px 8px 8px; background-color: #f7f7f7; } .cb-ngaji__button { margin-bottom: 10px; } .cb-ngaji__top { padding: 16px 20px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: url(../images/bg-ngaji-m.png); background-size: cover; border-radius: 8px 8px 0px 0px; } .cb-ngaji__top__title { font-size: 18px; font-weight: 600; color: #fff; } .cb-ngaji__top__sub { font-size: 12px; font-weight: 400; color: #fcd373; margin-bottom: 8px; } .cb-ngaji__bottom { padding: 20px 16px; width: 100%; display: flex; overflow: auto; gap: 16px; } .cb-ngaji__bottom__item { width: 224px; } .cb-ngaji__bottom__item__img img { aspect-ratio: 16 / 9; } .cb-ngaji__bottom__item__content { padding: 8px 12px 16px 12px; background: #fff; border-radius: 0px 0px 8px 8px; } .cb-ngaji__bottom__item__content__title { font-size: 14px; font-weight: 600; color: #000; margin-bottom: 8px; width: 224px; } .cb-ngaji__bottom__item__content__date { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: #666; margin-bottom: 8px; } .cb-ngaji__bottom__item__content__location { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: #666; margin-bottom: 20px; } .cb-ngaji__bottom__item__content__bottom { width: 100%; display: flex; justify-content: space-between; margin-bottom: 8px; } .cb-ngaji__bottom__item__content__bottom__price { font-size: 14px; font-style: normal; font-weight: 600; color: #f7931d; } .cb-ngaji__bottom__item__content__bottom__kuota { font-size: 12px; font-style: normal; font-weight: 400; color: #000; } .btn--green-ngaji { background: #1e9d6f; color: #fff !important; } .share__mob { text-align: center; margin: 20px; } .share__mob .detail__share span { font-weight: 600; font-size: 12px; padding-right: 10px; } .share__mob .detail__share .icon-item { margin: 0 3px; } .share__mob .comments { margin: 20px; } .share__mob .comments .btn-comment { background-color: #f2f2f2; border-radius: 4px; padding-left: 8px !important; padding-right: 8px !important; } .nav-haji--column .column { flex: 33.3%; padding-bottom: 10px; } .nav-haji--column .column a { display: block !important; text-align: center; } .nav-haji--column .nav-haji__icon { margin: 0 auto; } /* 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 #ccc; background: #ccc; opacity: 1; 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: 1; background: var(--kuler-1); } .append-nav { position: absolute; left: 0; right: 0; } .tl { text-align: left; color: #fff; margin: 0 8px; } img.m-680 { max-width: 100%; } .mb-0 { margin-bottom: 0 !important; } .collapsible__top { color: #295243 !important; } .mgt-5 { margin-top: 5px !important; } .green-rco { background-color: #295243; } .green-rco #slider-foto__detail { margin: 0 18px; } .green-rco .detail__media { margin-bottom: 10px; } .green-rco .slick-slide-thumbnail article { margin: 0 5px !important; } .green-rco .slick-slide-thumbnail .slick-current { border-radius: 4px; } .green-rco .slick-arrow { top: 35%; } .green-rco .slick-prev:before, .green-rco .slick-next:before { font-size: 28px; border-radius: 50%; background-color: #fff; color: #2c5498; padding: 3px; margin: 0 10px; } .green-rco .slick-slide-thumbnail .slick-prev .slick-next { left: 5px; top: 50% !important; } .green-rco .slick-slide-thumbnail { margin-top: 10px; margin-left: 24px; margin-right: 24px; padding-bottom: 10px; } .green-rco .slick-slide-thumbnail .slick-arrow { top: 50%; } .green-rco .slick-slide-thumbnail .slick-prev:before, .green-rco .slick-slide-thumbnail .slick-next:before { font-size: 22px; border-radius: 50%; background-color: #fff; color: #2c5498; padding: 3px; margin: 0 32px; } .green-rco .slick-slide-thumbnail .slick-slide { margin-left: 0; margin-right: 0; } .p10 { padding: 0; } .wrapper { width: 100%; } .ratiobox--16-9-rco { padding-bottom: 56.25%; max-width: 100%; margin: 0 auto; } .media__icon--top-right-rco { position: absolute; bottom: 6px; left: 6px; color: #fff; border-radius: 4px; padding: 0 3px; font-weight: 700; font-size: 12px; background-color: rgba(0, 0, 0, 0.3); } .m-290 { max-width: 100%; border-radius: 4px; height: auto !important; } .gr-rco { color: #295243; font-size: 20px; } .mont { font-family: Montserrat-FF, Arial, Tahoma, sans-serif; } .sembold { font-weight: 500; } .bold { font-weight: 700; } .reg { font-weight: 300; } .f-12 { font-size: 12px !important; } .f-14 { font-size: 14px !important; } .f-18 { font-size: 18px !important; } .f-24 { font-size: 24px !important; } .f-42 { font-size: 42px !important; } .mb-20 { margin-bottom: 20px !important; } .img-embed { padding-bottom: 24px; border-radius: 8px; } .img-embed img { width: 100%; } .vid-embed { background-color: #f7f7f7; padding: 10px 18px; border-radius: 8px; } .vid-embed .wrap { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .vid-embed .wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tabtab { padding-bottom: 20px; } .tabtab table { width: 100%; } .tabtab table th { text-align: center; vertical-align: middle; } .tabtab table td { background-color: #f2f2f2; max-width: 445px; } .cb-kewajiban-haji-umrah { background-color: #f7f7f7; border-radius: 8px; padding-bottom: 1px; } .cb-kewajiban-haji-umrah .title { background-color: #295243; padding: 14px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .cb-kewajiban-haji-umrah .title h3 { color: #fff; } .cb-kewajiban-haji-umrah .content-list ol { margin: 14px 10px; } .ads-buy { text-align: center; padding: 14px 0; } .ads-buy a img.ads-buy-item { width: 100%; height: auto; } .box-ads__name { position: absolute; padding: 8px 12px; font-size: 14px; color: #666666; margin: auto; } .static-slot { background-image: url("../images/bg-static-haji-mobile.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; height: 316px; width: 324px; position: relative; } .static-slot .iframe-container .shell-slot { position: absolute; bottom: 6%; left: 6%; border-radius: 8px; height: 158.77px; width: 285px; background-color: #295243; } .static-slot .iframe-container .shell-slot iframe { position: absolute; bottom: 0; left: 0; border: solid 3px #fff; border-radius: 8px; height: 158.77px; width: 285px; } @media screen and (min-width: 360px) { .static-slot { height: 316px; width: 324px; } } @media screen and (min-width: 390px) { .static-slot { height: 346px; width: 337px; } .static-slot .iframe-container .shell-slot { height: 163px; width: 292px; } .static-slot .iframe-container .shell-slot iframe { height: 163px; width: 292px; } } @media screen and (min-width: 412px) { .static-slot { height: 368px; width: 359px; } .static-slot .iframe-container .shell-slot { height: 176px; width: 315px; } .static-slot .iframe-container .shell-slot iframe { height: 176px; width: 315px; } } .col-search { position: relative; } .col-search input { padding-right: 36px; } .col-search .icon-search { position: absolute; right: 8px; top: 8px; } .new-listing#travel-slider .media { height: 355px; } .new-listing#travel-slider .media__image { height: 165px; } .new-listing .media { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; } .new-listing .media__text { padding-bottom: 16px; } .new-listing .media__title { text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .new-listing__label { font-size: 11px; margin: 0 12px 8px; color: #1e9d6f; } .new-listing__label span { display: inline-block; padding: 4px; border: 1px solid #1e9d6f; border-radius: 8px; } .new-listing__footer { background: var(--kuler-1); padding: 8px 12px; font-size: 16px; } .new-listing__footer span { display: block; font-size: 10px; } .new-listing__footer-clamp { text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .kategori-travel { padding: 12px; margin-top: 12px; margin-bottom: 24px; background: #e6e6e6; border-radius: 8px; } .kategori-travel__title { color: var(--kuler-1); margin-bottom: 4px; font-size: 16px; } .kategori-travel__nav { font-size: 14px; } .kategori-travel__nav-item { border: 1px solid #006536; padding: 4px 8px; margin-right: 4px; display: inline-block; margin-top: 8px; border-radius: 8px; color: #006536; } .kategori-travel__nav-item--active, .kategori-travel__nav-item--active:hover { background: #006536; color: #FFFFFF; } .detailFoto { margin-inline: calc(var(--gutter-x) * -0.5); max-width: 100vw; } .detailFoto__list { display: grid; gap: 16px; line-height: 0 !important; } .detailFoto__item { background: rgba(var(--champagne-pink), 1); } .detailFoto__item button { background: none; border: 0; padding: 0; } .detailFoto__caption { color: rgba(var(--black-lighter), 1); font-size: 12px; font-weight: 400; line-height: 17px; } .detailFoto__title { color: #666666; font-size: 14px !important; font-weight: 500; line-height: 20px; padding: 8px 18px 18px; } .detailFoto__img { position: relative; width: 100%; } .detailFoto__img img { width: 100%; } .beaut__sym--img { align-items: center; background: rgba(0, 0, 0, 0.6); color: #ffffff; display: flex; flex-shrink: 0; font-family: var(--bs-body-font-family); font-size: 12px; padding: 0; position: absolute; left: 0; bottom: 0; } .beaut__sym--img span { padding: 4px 10px; } .detail__body { margin-top: 16px; } .detail__body a { color: var(--kuler-1) !important; } .detail__body h2 { font-size: 20px; } .detail__body h3 { font-size: 18px; } .detail__body h4 { font-size: 16px; } .detail__body h5 { font-size: 14px; } .detail__body h6 { font-size: 12px; } .multi-card { opacity: 0; max-height: 0px; overflow: hidden; transition: all 0.3s ease; margin: 0; } .multi-card.show { opacity: 1; max-height: 9999px; margin-block: 12px; } .next-article { border: 1px solid var(--kuler-1); background-color: #fff; padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--kuler-1); font-weight: 500; margin: 0; display: flex; align-items: center; transition: all 0.3s ease; } .next-article:hover { background-color: var(--kuler-1); color: #fff; } .flex { display: flex; } .custom-box-simplified { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; text-align: center; } .custom-btn-simplified { border: none !important; font-size: 16px !important; color: black !important; font-weight: 700; display: flex; justify-content: center; width: 100%; } .text-sub-simplified { color: #c9c9c9; font-size: 12px; font-weight: 500; margin-bottom: 5px; } :root { --ustaz-1: #fcd373; --ustaz-2: #FCF8F0; --ustaz-3: #d3ebe2; } .tanya-ustaz-cover { background: url("../images/tanya-ustaz-cover.webp") no-repeat right center var(--kuler-1); background-size: cover; padding: 24px; font-size: 14px; border-radius: 8px; } .tanya-ustaz-cover--2 { background: url("../images/tanya-ustaz-cover2.webp") no-repeat right center var(--kuler-1); } .tanya-ustaz-cover__title { font-size: 20px; color: var(--ustaz-1); } .tanya-ustaz-cover__share { padding: 2px 8px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; color: #666666; border-radius: 6px; background: #fff; /* The Fallback */ background: rgba(255, 255, 255, 0.8); } .tanya-ustaz-step { padding: 16px; background: var(--ustaz-2); } .tanya-ustaz-step ul { margin: 0; padding: 0; list-style: none; gap: 24px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; } .tanya-ustaz-step li { padding: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .tanya-ustaz-step__text { flex: 1; margin-left: 20px; font-size: 12px; } .tanya-ustaz-kategori { border: 1px solid #e6e6e6; padding: 18px; border-radius: 12px; width: 100%; box-shadow: 0 calc(4px / 2) 4px 0 rgba(0, 0, 0, 0.15); } .tanya-ustaz-kategori__list { display: flex; flex-wrap: wrap; gap: 12px; } .tanya-ustaz-kategori__list a { display: inline-block; padding: 8px; font-size: 14px; font-weight: 600; border-radius: 4px; background: var(--ustaz-2); color: var(--kuler-1); } .tanya-ustaz-kategori__list a:hover { background: var(--ustaz-3); } .tanya-ustaz-diskusi__list { margin: 0; padding: 0; list-style: none; } .tanya-ustaz-diskusi__list li { padding: 8px 0 18px; border-bottom: 1px solid #e6e6e6; } .tanya-ustaz-diskusi__list li:last-child { border: none; } .tanya-ustaz-diskusi__list h2 { max-height: 74px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .tanya-ustaz-diskusi__desc { max-height: 50px; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; font-weight: 300; font-style: italic; } .modal-body__content .tanya-ustaz-diskusi__desc { line-clamp: unset !important; -webkit-line-clamp: unset !important; max-height: none !important; } .tanya-ustaz-diskusi__answer { display: flex; gap: 10px; font-size: 12px; align-items: center; } .tanya-ustaz-diskusi__img { width: 53px; height: 53px; border-radius: 100%; overflow: hidden; border: 1px solid #cccccc; } .ustaz-list .cb-tanya-ustaz__foto .media__image { margin-left: auto; margin-right: auto; width: 80px; height: 80px; border: 1px solid #cccccc; } .ustaz-list .cb-tanya-ustaz__foto .media__desc { color: #666666; } .list-ustaz.nhl .media--left .media__image { width: 100px; } .cb-tanya-ustaz__title { font-weight: 600; color: #000; font-size: 14px; } .cb-tanya-ustaz__desc { padding-top: 15px; position: relative; max-height: 66px; line-clamp: 3; -webkit-line-clamp: 3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; font-style: italic; line-height: 18px; padding-right: 15px; } .cb-tanya-ustaz__desc p { display: inline; margin: 0; } .cb-tanya-ustaz__desc:before { content: "“"; font-size: 32px; font-style: italic; display: inline; float: left; line-height: 10px; margin-right: 5px; } .cb-tanya-ustaz__desc:after { content: "“"; font-size: 32px; font-style: italic; line-height: 10px; position: absolute; bottom: 0; right: 5px; } .cb-tanya-ustaz__foto .media__image { margin: auto; width: 80px; height: 80px; background: transparent; margin-bottom: 10px; border-radius: 100%; } .cb-tanya-ustaz__foto .media__text { width: 130px; margin: auto; } .dokter-list .cb-tanya-ustaz__foto .media__text { width: 100%; padding: 0 24px; } .cb-tanya-ustaz__name { font-size: 12px; margin-bottom: 6px; font-weight: 600; } .cb-tanya-ustaz__status { max-height: 40px; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; font-weight: 300; } .profile__form { border-radius: 12px; height: 100%; width: 100%; overflow: hidden; border-bottom: 5px solid var(--kuler-1); background: url("../images/profile-bg.webp") no-repeat bottom var(--ustaz-3); background-size: cover; padding-bottom: 36px; } .profile__form__top { position: relative; width: 100%; } .profile__form__top__background { width: 100%; } .profile__form__top__background img { width: 100%; } .profile__form__top__profile { width: 100%; display: flex; justify-content: center; position: absolute; top: 42px; } .profile__form__top__profile img { width: 130px; height: 130px; border: 2px solid #ffffff; border-radius: 100%; object-fit: cover; } .profile__form__name { display: flex; justify-content: center; margin-top: 85px; font-style: normal; font-weight: 600; font-size: 18px; line-height: 25px; color: var(--kuler-1); margin-bottom: 4px; } .profile__form__edit { display: flex; justify-content: center; color: #999999; letter-spacing: 0.04em; font-style: italic; font-weight: 400; font-size: 14px; line-height: 17px; cursor: pointer; } .profile-ustaz { background: url("../images/profile-bg.webp") no-repeat bottom var(--ustaz-3); background-size: cover; position: relative; padding: 30px; overflow: hidden; border-radius: 8px; } .profile-ustaz__top-background { height: 110px; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; } .profile-ustaz__top-background img { max-width: 100%; background-size: cover; } .profile-ustaz__top-profile { width: 140px; height: 140px; position: relative; z-index: 2; margin: auto; overflow: hidden; border-radius: 100%; } .profile-ustaz__top-profile img { width: 100%; object-fit: cover; } .box-border { border: 1px solid var(--kuler-1); border-radius: 8px; padding: 16px; background: var(--ustaz-2); } .tab { display: flex; align-items: center; } .tab a { padding: 6px; color: #999999; border-bottom: 2px solid #ccc; text-align: center; font-weight: 600; } .tab a.active { color: var(--kuler-1); border-bottom: 2px solid var(--kuler-1); } .tab-pill { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--kuler-1); margin-bottom: 20px; overflow-x: auto; white-space: nowrap; } .tab-pill a { display: inline-block; padding: 8px 20px; font-size: 14px; font-weight: 600; border-radius: 4px; background: var(--ustaz-2); color: var(--kuler-1); } .tab-pill a:hover { background: var(--ustaz-3); } .tab-pill a.active { background: var(--kuler-1); } .list-kategori { padding: 0; list-style: none; margin: 0; display: grid; grid-gap: 12px; grid-template-columns: 1fr 1fr; } .list-kategori li { padding: 0; } .list-kategori li a { text-align: center; display: block; padding: 30px 10px; background: #295243; border-radius: 8px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.24); } .list-kategori li a:hover { box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.24); background: var(--kuler-1); } .list-kategori__title { font-size: 16px; font-weight: 600; color: #f9ba6f; display: block; position: relative; height: 50px; margin-bottom: 16px; padding-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .list-kategori__title:after { position: absolute; bottom: -10px; left: calc(50% - 20px); content: ""; display: block; border-bottom: 1px solid #fff; width: 40px; margin: 10px auto; } .list-kategori__desc { display: block; font-size: 14px; height: 58px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #e6e6e6; } .notif { background: var(--ustaz-2); padding: 14px; border: 1px solid var(--kuler-1); border-radius: 8px; } .notif--grey { background: #f7f7f7; border: 1px solid #e6e6e6; } .notif--sm { border-radius: 4px; } .notif--green { background: #e6f4f1; border: 1px solid var(--kuler-1); } .notif--orange { background: #fce7cc; border: 1px solid var(--kuler-3); } .copy_url .notif { border: none; } .box-pertanyaan { position: relative; font-style: italic; margin-bottom: 24px; } .box-pertanyaan .detail__media-caption { padding: 4px 0; } .box-jawaban { border-radius: 20px; border: 1px solid #f0f0f0; background: #FFFFFF; overflow: hidden; } .box-jawaban__isi { padding: 0 16px 16px; line-height: 150%; } .box-jawaban__isi p { margin: 1em 0; } .box-jawaban .detail__media-caption { padding: 4px 0; } .modal-dialog--normal .close-modal { top: 8px !important; right: 8px !important; box-shadow: none !important; background: transparent !important; } .cb-tanya-ustaz { position: relative; max-height: 560px; overflow: hidden; padding: 20px; background: url("../images/bg-cb-tanya-ustaz.webp") no-repeat var(--kuler-1); background-size: cover; background-position: 0 -120px; } .cb-tanya-ustaz__title { color: var(--ustaz-1); font-size: 18px; } .cb-tanya-ustaz__next { color: var(--ustaz-1); margin-bottom: 12px; } .cb-tanya-ustaz__body { font-size: 14px; } .cb-tanya-ustaz__kategori { padding: 12px 16px; margin: 16px 0; border: 1px solid var(--kuler-1); color: var(--kuler-1); width: 100%; background: #fff; /* The Fallback */ background: rgba(255, 255, 255, 0.75); border-radius: 8px; } .cb-tanya-ustaz__kategori-item { display: inline-block; padding: 4px 8px; margin: 4px 2px; color: var(--kuler-1); font-size: 14px; } .cb-tanya-ustaz__kategori-item:hover { opacity: 0.75; filter: alpha(opacity=75); color: #EE4023; } .cb-tanya-ustaz .slick-dotted.slick-slider { padding: 0; } .cb-tanya-ustaz__slider { background: url("../images/bg-cb-tanya-item.webp") no-repeat bottom #fff; background-size: cover; border-bottom: 4px solid var(--kuler-1); border-radius: 8px; } .cb-tanya-ustaz__slider .slick-track { height: auto !important; } .cb-tanya-ustaz__slider .slick-dots { bottom: -24px; } .cb-tanya-ustaz__slider .slick-dots li { margin: 0 4px; } .cb-tanya-ustaz__slider .slick-dots li.slick-active button { background: var(--ustaz-1); } .cb-tanya-ustaz__slider .slick-dots li button { width: 8px; height: 8px; border: none; opacity: 1; filter: alpha(opacity=100); } .cb-tanya-ustaz__slider .slick-prev { left: -18px; } .cb-tanya-ustaz__slider .slick-next { right: -18px; } .cb-tanya-ustaz__slider .slick-arrow { width: 36px; height: 36px; color: #EE4023; } .cb-tanya-ustaz__slider .slick-prev:before, .cb-tanya-ustaz__slider .slick-next:before { font-size: 24px; } .cb-tanya-ustaz__slider-wrap { width: 95%; margin: 0 2.5%; } .cb-tanya-ustaz__slider-item { padding: 12px 24px; } .cb-tanya-ustaz__slider-item-title { position: relative; padding-bottom: 12px; color: var(--kuler-1); font-size: 16px; } .cb-tanya-ustaz__slider-item-title:before { position: absolute; bottom: 0; left: calc(50% - 20px); content: ""; width: 40px; height: 1px; background: var(--kuler-1); } .cb-tanya-ustaz__slider-item-tanya { position: relative; padding: 12px 0; margin-bottom: 4px; font-style: italic; max-height: 66px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #000000; font-size: 12px; } .cb-tanya-ustaz__slider-item-tanya:before { content: "\7b"; font-family: "detiknetwork-FF"; position: absolute; left: 0; top: -4px; } .expert .detail-slider__item .media__image { border-radius: 8px; } .expert .detail-slider__item .media__image .icon { position: absolute; top: 3%; right: 2%; background: url(../images/icon-zoom-bg.webp) no-repeat; background-size: contain; width: 30px; height: 30px; z-index: 3; } .expert .detail-slider__item span { font-size: 12px; color: #666666; font-style: normal; display: block; height: 48px; } .expert .slider .slick-arrow { margin-top: -25px; } .expert .slider .slick-arrow:before { font-size: 32px; } .list__berita { width: 100%; overflow-x: scroll; overflow-y: hidden; margin-bottom: 12px; padding-bottom: 20px; display: flex; } .list__berita__title { color: var(--kuler-1); font-style: normal; font-weight: 600; font-size: 18px; line-height: 22px; } .list__berita__item { width: 150px; margin-right: 14px; } .list__berita__item__top { position: relative; margin-top: 10px; } .list__berita__item__top__logo { position: absolute; top: 2px; right: 5px; } .list__berita__item__bottom { margin-top: 5px; } .list__berita__item__bottom__title { font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; letter-spacing: 0.04px; color: #000000; } .list__berita__item__bottom__date { color: #9B9B9B; font-style: normal; font-weight: 300; font-size: 11px; line-height: 13px; letter-spacing: -0.22px; } .cb-detikpagi { background: #ff4c05; padding: 12px 8px 12px 12px; display: flex; gap: 15px; margin-bottom: 24px; } .cb-detikpagi__right__text { margin: 8px 0px; font-weight: 500; font-size: 10px; color: #ffffff; line-height: 12px; } .cb-detikpagi__right__button { display: flex; align-items: center; gap: 7px; } .cb-detikpagi__right__button__text a { color: #ff4c05; font-weight: 600; font-size: 7px; padding: 3px 5px; background: #ffe600; border-radius: 15px; } .position-relative { position: relative !important; } .top-0 { top: 0; } .collapsible { background: #F7F7F7; padding: 16px; width: 100%; border: none; text-align: left; outline: none; border: 1px solid #CCCCCC; border-radius: 4px; margin-bottom: 24px; cursor: pointer; } .collapsible__top { color: #000000; font-weight: 700; font-size: 16px; width: 100%; } .collapsible__top::after { content: ""; background-image: url("../images/path-down.png"); float: right; margin-left: 5px; background-size: cover; background-repeat: no-repeat; height: 13px; width: 23px; margin-top: 5px; position: relative; -webkit-transition: transform 0.2s ease-in-out 0s; -moz-transition: transform 0.2s ease-in-out 0s; -ms-transition: transform 0.2s ease-in-out 0s; -o-transition: transform 0.2s ease-in-out 0s; transition: transform 0.2s ease-in-out 0s; } .active .collapsible__top::after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .collapsible__content { transition: max-height 0.5s ease-out; overflow: hidden; max-height: 0px; padding: 0px 16px; } .collapsible__content a { display: block; } .mgt-0 { margin-top: 0px !important; } .fs-14 { font-size: 14px !important; } .active__content { max-height: 2000px; transition: max-height 0.5s ease-in; } .color__blue { color: #21409A !important; }