@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block
}

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

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

[hidden],template {
    display: none
}

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

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

body {
    margin: 0
}

a {
    background: transparent
}

a:focus {
    outline: thin dotted
}

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

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

b,strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

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

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

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

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

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

small {
    font-size: 80%
}

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

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

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

figure {
    margin: 0
}

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

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

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

button,input {
    line-height: normal
}

button,select {
    text-transform: none
}

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

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

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

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

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

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

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

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

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

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: 300;
    font-style: normal;
    src: local("Helvetica-FF, Arial, Tahoma, sans-serif"),url("../index/Helvetica-Light.eot");
    src: local("Helvetica-FF, Arial, Tahoma, sans-serif"),url("../index/Helvetica-Light.woff2") format("woff2"),url("../index/Helvetica-Light.woff") format("woff"),url("../index/Helvetica-Light.ttf") format("truetype"),url("../index/Helvetica-Light.eot?#iefix") format("embedded-opentype");
    font-display: swap;
    size-adjust:99.25%}

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

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

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

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

.container,.container-fluid {
    /*padding-left: calc(26px / 2);
    padding-right: calc(26px / 2);
*/    margin-right: auto;
    margin-left: auto
}

.container {
    width: 1080px
}
@media (max-width: 768px) {
	.container {
		width: 100%;
	}
}
@media (min-width: 1024px) and (max-width:1280px) {
    .container {
        width:1008px
    }
}

.grid-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-26px / 2);
    margin-right: calc(-26px / 2)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 {
    position: relative;
    display: block;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s
}

.ratiobox.ratio_16_9 {
    padding-bottom: 56.25%
}

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

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

.block-link:hover .media__image .ratiobox {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15)
}

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

.ratiobox--4-3 {
    padding-bottom: 75%
}

.ratiobox--3-4 {
    padding-bottom: 133%
}

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

input:focus,select:focus,textarea:focus,button:focus {
    outline: none
}

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

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

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

textarea {
    resize: none
}

textarea.form-element {
    height: auto
}

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

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

.form-check label {
    margin: 0
}

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

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

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

.form-inline {
    align-items: center
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
    background: -moz-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: -webkit-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: radial-gradient(ellipse at left bottom,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$top_color',endColorstr='$bottom_color',GradientType=1)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.copy_url {
    position: relative
}

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

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

.sticky-share .copy_url .notif:before {
    top: -7px;
    border-bottom: 8px solid #FF0000;
    border-left: 7px solid transparent;
    border-top: none;
    border-right: 7px solid transparent
}

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

.sticky-share .copy_url .notif.url_copied {
    bottom: -160%
}

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

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

@media (min-width: 1024px) and (max-width:1280px) {
    .navbar-first .nav__item a,.navbar-second .nav__item a {
        padding:12px 7px
    }
}

.nav__item--new a:after,.nav__item--live a:after {
    content: "";
    width: 5px;
    height: 5px;
    background: #FF0000;
    position: absolute;
    top: 12px;
    right: 4px;
    overflow: hidden
}

.nav--column .nav__item--new a:after,.nav__item--new .nav--column a:after,.nav--column .nav__item--live a:after,.nav__item--live .nav--column a:after {
    top: 4px
}

.navbar-second .nav,.navbar-first .nav {
    margin-left: 8px
}

.nav {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px
}

.navbar-second .dropdown-menu .nav {
    margin-left: 0
}

.nav a {
    display: block
}

.nav__item {
    position: relative;
    padding: 0
}

.nav__item a {
    padding: 12px 10px
}

.navbar-first .nav__item a {
    color: #FFFFFF
}

.navbar-first .nav__item a:hover {
    color: #fcc43f
}

.is-sticky .navbar-first .nav__item a {
    color: inherit
}

.is-sticky .navbar-first .nav__item a:hover {
    color: var(--kuler-1)
}

.navbar-first .dropdown-menu .nav__item a {
    color: #000000
}

.navbar-first .dropdown-menu .nav__item a:hover {
    color: var(--kuler-1)
}

.nav--column .nav__item a {
    padding: 4px 0
}

.footer-nav .nav__item a {
    font-size: 12px;
    color: #666666
}

.static-nav .nav__item a {
    padding: 12px 0;
    font-size: 14px
}

.static-nav .nav__item a:hover {
    color: var(--kuler-3)
}

.sitemap-nav .nav__item a {
    padding: 4px 0;
    font-size: 14px;
    color: #333333
}

.nav__item--active a {
    color: var(--kuler-1)
}

.navbar-first .nav__item--active a {
    color: #fcc43f
}

.is-sticky .navbar-first .nav__item--active a {
    color: var(--kuler-1)
}

.static-nav .nav__item--active a {
    color: var(--kuler-3)
}

.nav__item--new {
    position: relative
}

.nav__item--new a {
    color: #000
}

.nav__item--live {
    position: relative
}

.nav__item--live a {
    color: var(--kuler-1)
}

.nav--column .nav__item {
    display: inline-block;
    width: 100%;
    vertical-align: top
}

.static-nav .nav__item {
    border-bottom: 1px solid #e6e6e6
}

.static-nav .nav__item a {
    justify-content: space-between
}

.nav--center {
    justify-content: center
}

.nav--right {
    justify-content: flex-end
}

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

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

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

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

.navbar {
    position: relative
}

.navbar-sticky {
    z-index: 5;
    position: sticky;
    position: -webkit-sticky;
    top: 46px
}

.navbar-sticky.is-sticky {
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1)
}

.navbar-sticky-top {
    position: absolute;
    margin-top: -46px
}

.navbar-border {
    display: none;
    height: 2px
}

.is-sticky .navbar-border {
    display: block
}

.navbar-logo {
    line-height: inherit;
    white-space: nowrap;
    padding: 8px 12px;
    width: 42px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center
}

.navbar-logo-kanal {
    display: none
}

.is-sticky .navbar-logo {
    display: none
}

.is-sticky .navbar-logo-kanal {
    width: 110px;
    padding: 8px 12px 8px 0;
    margin-right: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center
}

.is-sticky .navbar-logo-kanal img {
    width: 100%
}

.navbar-logo img {
    width: 100%
}

.navbar-first {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px
}

.navbar-first .dropdown-menu--right .dropdown-menu__content:after {
    right: 30px
}

.is-sticky .navbar-first {
    margin-left: -23px;
    margin-right: -100px;
    background: transparent
}

@media (min-width: 1024px) and (max-width:1280px) {
    .is-sticky .navbar-first {
        margin-left:-9px;
        margin-right: -110px
    }
}

.navbar-second .dropdown-menu__content:after {
    display: none
}

.navbar-first .dropdown-menu__content,.navbar-second .dropdown-menu__content {
    margin-top: -4px;
    width: 200px;
    background: #f7f7f7
}

.navbar-first .dropdown-menu__content:after,.navbar-second .dropdown-menu__content:after {
    border-color: #f7f7f7
}

.navbar-second,.navbar--bg {
    background: #f0f0f0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

.list-content {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0
}

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

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

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

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

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

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

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

.list-content__title>a {
    display: block
}

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

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

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

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

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

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

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

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

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

.media__image a {
    display: block
}

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

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

.headline .media__text {
    padding-left: 16px;
    padding-right: 16px
}

.headline--right .media__text {
    padding: 16px;
    height: 100%
}

.headline--video .media__text {
    padding: 0 20px 20px
}

.headline--video .media__text .media__link {
    position: relative
}

.headline--video .media__text:hover a {
    color: #fcc43f
}

.headline--breakingnews .media__text {
    font-size: 14px;
    padding: 12px 16px
}

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

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

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

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

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

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

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

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

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

.media__link {
    position: static
}

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

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

.media__icon {
    position: absolute;
    z-index: 1;
    padding: calc(4px / 2) 4px;
    text-align: center;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 12px;
    background: #000000;
    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;
    background: -moz-linear-gradient(top,rgba(0,0,0,0.8) 0%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,rgba(0,0,0,0.8) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

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

.headline .media--text-overlay .media__text {
    padding-left: 16px;
    padding-right: 16px
}

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

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

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

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

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

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

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

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

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

.box-ads__name {
    position: absolute;
    top: calc(50% - 40px);
    padding: 8px 12px;
    z-index: -1;
    font-size: 14px;
    color: #cccccc
}

.ads-slot--smb .box-ads__name {
    top: calc(50% - 25px)
}

.box-ads--container {
    margin-left: calc(-26px / 1.444444444444);
    margin-right: calc(-26px / 1.444444444444)
}

.ads-slot {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    background: #f7f7f7
}

.ads-slot>* {
    flex: 1 100%
}

.ads-slot img {
    max-width: 100%;
    height: auto
}

.ads-slot:before {
    position: absolute;
    content: "Advertisement";
    left: 50%;
    top: 50%;
    height: 50px;
    z-index: -1;
    letter-spacing: 2px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect opacity='0.2' width='32' height='32' fill='url(%23pattern0)'/%3E%3Cdefs%3E%3Cpattern id='pattern0' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0' transform='scale(0.015625)'/%3E%3C/pattern%3E%3Cimage id='image0' width='64' height='64' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZ5QTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlvQmPgAAAIp0Uk5TABVTfqXL3+z5M43S/v8Nc9UQgO4BYeoexDvpYgOOsVgqODcR/cx0FgJHieYxBV/oZBPyRPs8dcCVwb2MKD2SfJ6BPyYayKvUQSWyhGebh7yflq9/rZDJNg4H4NNRXqb8tAnWoGzO+PbFXUsMHdgf5DC/w1BPLecc3MY6YwSK6yPtD3LQi8qnfVIYuEyKDwAAAuxJREFUeJylV+d/0zAQVbaTSHH2bimQQtgUwggtAVoopexSaEvZo+y9wgplw39NbDmOrHF2ftzHl/deLOl0ukNIET5/IBgKRzQtEg4FA36fiiePaCyOiSNwPBb1qk7oSSKNpJ7wIE+lM3K5EZl0ykWezeXVciPyuSykLxRhuRHFglpfKrvrCSmXVPqK5kVPiFaRyqtD3uRGDFUl+mHvekKGRYcB/t/8BmH9EHvNiBlrWYzbhxK4f+soaT2LaY6zKMDnJzMgZSYfsi75IzUgxX5O5mC9woDkevqUS/6rDPK9m5V20asMSJriCeD+wgYZWh90N73SgOgmrqg/XgySBhxVC7WaiwEx6mRMLh7dEN2Yrfs2bd4CGcS6cFwmL261k2Tb9h1qg3i3/mMR1nY6Cl9qTGmAfcgvort2I2lIDIgfBQSssUeulxoEUFDA9ir0UoMgGuWhfb31R/c3D4xPuBiEUJiHDlJ2tWXubuMQbBBGEf4DLPbhHnAENIggvpZZtW7SBhpTkIEmGByl5GN9ZBo24JZwnHJnWOwEuARuE2cp9ySLnQI3MeQETlPuNIvFwGPkEukM5Z5lsXNgInGpfJ5y51isBRhc4C/TPOVeZDEdMPDz1/kS5TpsF9QG3evMFZTGoslduix4Sg2WkVDSrlDy1T4yAxgYB8QV1WuUXLdTcR66C2bz6Szr1628G7McbtwEDG6ZOPew3Lbo1Tt3V+7df4AQYEDPh3va8ENbwfWU4tP2iP7APa6Rx0geqsdVeN6fPPVmULYbZ77BePbcqVySG9gNhtjiNMaZxn7ihfxleslskdhk5Vsl8/fUq9kaeV0w442D8fYd+5GyNm+l3Xzfrom49esH5zLBRlMWH/ktHrDVbfH6AZvtuU/iKQ/Q7uPPdVGP/nvgQF5Hns6kSu9p6MLNL2q9MfZ1YHmnAo59CB488Wrgq4vcCNXoi5e/LXqQm8EP3xjj7z8W3HVs9Mb/2mr756/ff/6qeP8AIJG7VASH5AAAAAAASUVORK5CYII='/%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 4px;
    background-size: 24px;
    padding: 3px 0;
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    color: #999999;
    font-size: 12px;
    align-items: flex-end
}

.ads-slot__name {
    display: none;
    position: absolute;
    top: calc(50% - 40px);
    padding: 8px 12px;
    z-index: -1;
    font-size: 14px;
    color: #cccccc
}

.smartbanner_new {
    height: 50px;
    padding: 0 8px;
    position: relative;
    font-size: 11px;
    align-items: center;
    text-align: left;
    z-index: 27
}

.smartbanner_new .app_logo {
    height: 36px;
    margin-right: 10px
}

.smartbanner_new strong {
    display: block;
    font-size: 12px
}

.smartbanner_new .get_app {
    margin-right: 20px
}

.smartbanner_new .sb_close {
    position: absolute;
    text-decoration: none;
    height: 14px;
    width: 14px;
    font-size: 10px;
    top: 5px;
    right: 5px;
    border: 1px solid #21409A
}

.smartbanner_new>div>span {
    height: 31px
}

.pd-0 {
    padding: 0!important
}

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

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

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

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

.mg-0 {
    margin: 0!important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hide-element {
    display: none!important
}

.display-block {
    display: block!important
}

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

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

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

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

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

.pos-relative {
    position: relative!important
}

.pos-static {
    position: static!important
}

.overflow-visible {
    overflow: visible!important
}

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

.font-family-base,.font-family-base-2,.font-heading,.font-paragraph,.form-element,.pagination,.footer-nav .nav__item,.list-content__title,.media__title,.media__subtitle,.box .media__subtitle,.indeks-menu__box {
    font-weight: 400
}

.font-base-light,.font-heading-light,.sitemap-nav .nav__item,.media__date,.ads-slot:before,.smartbanner_new,.box__title--sponsored-box,.static-body__box p {
    font-weight: 300
}

.font-base-semibold,.font-heading-semibold,.box-utility-base a,.box-utility-info a,.box-utility-success a,.box-utility-warning a,.box-utility-error a,.notification-overlay,.nav,.text-list--title,.smartbanner_new strong,.smartbanner_new .get_app,.float-vid__content-title,.box__title,.section__title,.page__title,.headline .media__title,.terpopuler .media__title,.detail-body__newstag .media__title,.footer-nav--title,.sitemap-nav__title,.indeks-menu__title,.cb-detik-ramadhan__title,.pemilu-countdown,.nav-haji,.nav-haji-right {
    font-weight: 600
}

.font-base-bold,.font-heading-bold,.modal-body__title,.cb-today-recap__title,.cb-today-recap__date {
    font-weight: 700
}

.font-family-base,.font-paragraph,.navbar-logo {
    font-family: Helvetica-FF,Arial,Tahoma,sans-serif
}

.font-family-base-2,.font-heading,.font-heading-light,.font-heading-semibold,.font-heading-bold,label,.form-file:before,.btn,.pagination,.notification-overlay,.nav,.list-content__title,.headline--breakingnews .media__text,.media__title,.media__subtitle,.media__author,.text-list,.ads-slot:before,.smartbanner_new,.float-vid__content-header,.headline--breakingnews-title.media__label,.float-vid__content-header-20d,.float-vid__content-title,.float-vid__content-sponsor,.modal-body__title,.box__title,.section__title,.box__header a,.box__title--sponsored-box,.box-background,.section__header a,.page__title,.page__breadcrumb,.page__follow,.page__indeks-info,.media__label--live,.footer-title,.footer-nav--title,.headline-terkait,.headline-today-recap,.sitemap-nav,.indeks-menu,.ebook__top,.ebook__bottom,.cb-pemilu,.pemilu-countdown,.cb-hoegeng__desc,.cb-adhyaksa__desc,.cb-detikpilkada__desc,.cb-17an__desc,.cb-jabar-awards,.cb-today-recap,.cb-demi-indonesia-emas,.cb-kabar-haji,.nav-haji,.nav-haji-right {
    font-family: Montserrat-FF,Arial,Tahoma,sans-serif
}

.media--list,.ads-slot:before,.display-flex,.ads-slot,.smartbanner_new .sb_close,.align-middle,.breakingnews-float--detikpagi .flowed .float-vid__close,.pemilu-countdown__btn,.float-vid__content-sponsor,.header__leaderboard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.form-inline,.nav,.static-nav .nav__item a,.nav--center,.nav--right,.navbar-first,.list-content__item,.display-flex-wrap,.breakingnews-float--small .flowed .float-vid__content-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: wrap
}

.notification-overlay,.smartbanner_new,.flex-between,.box__header,.box__title--sponsored,.section__header,.page__header,.page__breadcrumb,.page__follow,.page__indeks-info,.header__logo,.indeks-menu,.indeks-menu__box {
    justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: wrap;
    align-items: center
}

.ads-slot,.text-center,.detikpagi-live,.cb-mostpop .text-list__data,.cb-commented .text-list__data,.icon-item {
    text-align: center!important
}

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

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

.ads-slot,.smartbanner_new .sb_close,.align-middle,.breakingnews-float--detikpagi .flowed .float-vid__close,.pemilu-countdown__btn {
    align-items: center;
    justify-content: center
}

.box-utility-base,.box-utility-info,.box-utility-success,.box-utility-warning,.box-utility-error,.form-check--checkbox label:before,.form-check--checkbox label:after,.form-element,.notification-overlay,.copy_url .notif,.media__label,.media__icon,.media--image-radius .media__image,.dropdown-menu__content,.slick-slide-thumbnail .slick-slide,.box-background,.cb-pemilu--small .cb-pemilu__desc,.pemilu-countdown,.cb-jabar-awards__desc {
    border-radius: 4px
}

.form-check--radio label:before,.form-check--radio label:after,.nav__item--new a:after,.nav__item--live a:after,.media__image--circle,.media__author-image-avatar,.media--image-circle .media__image,.smartbanner_new .sb_close,.circle,.breakingnews-float--detikpagi .flowed .float-vid__close,.detikpagi-live span:before,.lds-ring div,.slick-dots li button,.media__label--live:before,.cb-pemilu .slick-arrow,.pemilu-countdown__btn,.cb-hoegeng .slick-arrow,.cb-adhyaksa .slick-arrow,.cb-detikpilkada .slick-arrow,.cb-17an .slick-arrow,.cb-jabar-awards .slick-arrow,.cb-demi-indonesia-emas .slick-arrow,.cb-kabar-haji .article-slider .slick-arrow {
    border-radius: 50%
}

.color-black,.footer-nav .nav__item a:hover,.footer-nav--title {
    color: #000000
}

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

.color-white,.cb-d-awards .media__title a,.headline-today-recap,.btn--pemilu,.pemilu-countdown__num-day,.cb-hoegeng,.cb-adhyaksa,.cb-detikpilkada,.cb-17an,.cb-jabar-awards__desc,.cb-kabar-haji__desc {
    color: #FFFFFF
}

.color-gray {
    color: #6D8591
}

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

.color-blue-base,.color-blue,.smartbanner_new .sb_close,.cb-pemilu .slick-arrow,.pemilu-countdown__btn,.cb-today-recap__title,.cb-demi-indonesia-emas .slick-arrow {
    color: #21409A
}

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

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

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

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

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

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

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

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

.color-bg-white,.navbar-sticky.is-sticky,.smartbanner_new,.cb-pilkada .box__header,.cb-pemilu .slick-arrow,.cb-hoegeng .slick-arrow,.cb-adhyaksa .slick-arrow,.cb-detikpilkada .slick-arrow,.cb-17an .slick-arrow,.cb-jabar-awards .slick-arrow,.cb-demi-indonesia-emas .slick-arrow {
    background: #FFFFFF
}

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

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

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

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

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

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

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

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

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

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

.float-vid__content-header,.headline--breakingnews-title.media__label {
    color: #FFFFFF;
    background: #FF0000;
    font-size: 18px;
    border-radius: 4px;
    text-transform: uppercase;
    max-width: 350px;
    padding: 8px 12px 4px 24px;
    box-shadow: 4px 8px 18px 0px rgba(0,0,0,0.5);
    transform: skewX(-15deg);
    left: -8px;
    top: -3px
}

.breakingnews-float {
    height: auto;
    bottom: 0;
    position: fixed;
    z-index: 10;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

.breakingnews-float--left {
    left: 0
}

.breakingnews-float--right {
    right: 0
}

.breakingnews-float--detikpagi .media__image {
    width: 250px;
    z-index: 3;
    border-radius: 8px
}

.float-vid__box {
    position: relative;
    width: 100%;
    min-height: 100%
}

.flowed .float-vid__box {
    position: fixed;
    bottom: 0;
    width: 0;
    z-index: 5
}

.breakingnews-float--right .flowed .float-vid__box {
    right: 0
}

.breakingnews-float--left .flowed .float-vid__box {
    left: 0
}

.float-vid__content {
    position: static;
    width: 100%;
    height: 100%;
    color: #FFFFFF
}

.flowed .float-vid__content {
    position: absolute;
    overflow: hidden;
    min-height: 300px;
    bottom: 70px;
    width: 400px;
    height: auto;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s
}

.breakingnews-float--right .flowed .float-vid__content {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%)
}

.breakingnews-float--left .flowed .float-vid__content {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%)
}

.breakingnews-float--small .flowed .float-vid__content {
    min-height: 80px
}

.breakingnews-float--20d .flowed .float-vid__content {
    min-height: 87px;
    bottom: 70px;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15)
}

.breakingnews-float--detikpagi .flowed .float-vid__content {
    min-height: 140px;
    width: 413px;
    background: url("../index/detikpagi-popup.webp") no-repeat right top;
    background-size: cover;
    overflow: visible;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

.breakingnews-float--detikpagi-sore .flowed .float-vid__content {
    background: url("../index/detiksore-popup.webp") no-repeat right top;
    background-size: cover
}

.breakingnews-float--detikpagi-drooftalk .flowed .float-vid__content {
    background: url("../index/drooftalk-popup.webp") no-repeat right top;
    background-size: cover
}

.float-vid__content-header {
    position: relative;
    display: inline-block;
    margin-bottom: 4px;
    font-size: 14px
}

.float-vid__content-header-20d {
    display: block;
    padding: 8px 16px;
    color: #FFFFFF;
    background: #ed131b
}

.float-vid__content-title {
    padding: 12px 16px;
    flex: 1;
    max-height: 82px;
    font-size: 14px
}

.float-vid__content-title a {
    color: #FFFFFF
}

.float-vid__content-title a:hover {
    color: #fcc43f
}

.breakingnews-float--20d .float-vid__content-title a {
    color: #000000
}

.breakingnews-float--20d .float-vid__content-title a:hover {
    color: #ed131b
}

.breakingnews-float--small .flowed .float-vid__content-title {
    padding-top: 0;
    padding-bottom: 8px;
    height: 47px;
    align-items: center
}

.float-vid__content-header,.float-vid__content-title {
    opacity: 0;
    filter: alpha(opacity=0)
}

.flowed .float-vid__content-header,.flowed .float-vid__content-title {
    opacity: 1;
    filter: alpha(opacity=100)
}

.breakingnews-float--small .flowed .float-vid__content-header,.breakingnews-float--small .flowed .float-vid__content-title {
    margin-left: 145px
}

.float-vid__content-sponsor {
    color: #FFFFFF;
    align-items: center;
    z-index: 5;
    font-size: 10px;
    position: absolute;
    right: 8px;
    top: 8px
}

.float-vid__content-sponsor img {
    max-height: 70px;
    max-width: 120px
}

.flowed .float-vid__content-sponsor img {
    max-height: 25px;
    max-width: 50px
}

.flowed .float-vid__content-sponsor {
    top: 5px;
    margin-right: 24px
}

.float-vid__wrap {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 0;
    display: block;
    overflow: hidden;
    padding-bottom: 56.25%;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px
}

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

.flowed .float-vid__wrap {
    position: relative;
    border-radius: 0
}

.flowed .float-vid__wrap .media__image {
    margin: 0
}

.breakingnews-float--small .flowed .float-vid__wrap {
    width: 145px;
    position: absolute
}

.breakingnews-float--20d .flowed .float-vid__wrap {
    width: 145px;
    height: auto;
    padding: 0
}

.float-vid__close {
    position: absolute;
    right: 8px;
    top: 4px;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    color: #FFFFFF
}

.float-vid__close:hover {
    color: #fcc43f
}

.flowed .float-vid__close {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100)
}

.breakingnews-float--20d .flowed .float-vid__close {
    top: 7px
}

.breakingnews-float--detikpagi .flowed .float-vid__close {
    width: 27px;
    height: 27px;
    right: 0;
    background: #666666;
    color: #FFFFFF
}

.breakingnews-float--detikpagi .flowed .float-vid__close:hover {
    background: #C72026
}

.breakingnews-float--detikpagi-drooftalk .flowed .float-vid__close {
    background: #1CDED0;
    color: #232323
}

.breakingnews-float--detikpagi-drooftalk .flowed .float-vid__close:hover {
    color: #FFFFFF
}

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

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

.breakingnews-float--detikpagi-drooftalk .detikpagi-live span {
    color: #232323
}

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

@keyframes live-detikpagi {
    0% {
        background: #fcc43f
    }

    50% {
        background: #C72026
    }

    100% {
        background: #fcc43f
    }
}

.datepick {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 90%;
    padding: 5px
}

.datepick-rtl {
    direction: rtl
}

.datepick-popup {
    z-index: 1000
}

.datepick-disable {
    position: absolute;
    z-index: 100;
    background-color: white;
    opacity: 0.5;
    filter: alpha(opacity=50)
}

.datepick a {
    text-decoration: none
}

.datepick a.datepick-disabled {
    color: #888;
    cursor: auto
}

.datepick button {
    margin: 0.25em;
    padding: 0.125em 0em;
    background-color: #fcc;
    border: none;
    font-weight: bold
}

.datepick-nav,.datepick-ctrl {
    font-size: 90%;
    font-weight: bold;
    display: flex
}

.datepick-ctrl {
    border-top: 1px solid #ccc
}

.datepick-cmd {
    flex: 1;
    padding: 5px 7px;
    text-align: center
}

.datepick-cmd-today {
    margin: 0 2px
}

.datepick-cmd-clear {
    margin: 5px 1px 0 0
}

.datepick-cmd-close {
    margin: 5px 0 0 1px
}

.datepick-cmd:hover {
    background-color: #eee
}

.datepick-month {
    float: left;
    width: 15em;
    text-align: center
}

.datepick-month-nav {
    float: left;
    background-color: #777;
    text-align: center
}

.datepick-month-nav div {
    float: left;
    width: 12.5%;
    margin: 1%;
    padding: 1%
}

.datepick-month-nav span {
    color: #888
}

.datepick-month-row {
    clear: left;
    display: inline-block
}

.datepick-month-header {
    background-color: #fff;
    color: #000;
    font-weight: bold;
    display: flex
}

.datepick-month-header select,.datepick-month-header input {
    margin: 0em;
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    border-radius: 0;
    font-weight: bold;
    flex: 1
}

.datepick-month-header select:last-child {
    border-left: none
}

.datepick-month-header input {
    position: absolute;
    display: none
}

.datepick-month table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px
}

.datepick-month thead {
    background: #eee;
    border-bottom: 2px solid #fff
}

.datepick-month th,.datepick-month td {
    margin: 0em;
    padding: 0em;
    text-align: center
}

.datepick-month th {
    padding: 5px;
    border: none
}

.datepick-month th.datepick-week {
    background-color: #777;
    color: #fff
}

.datepick-month td {
    border: 1px solid #fff
}

.datepick-month td.datepick-week {
    border: 1px solid #777
}

.datepick-month td.datepick-week * {
    background-color: #777;
    color: #fff;
    border: none
}

.datepick-month td span {
    color: #888
}

.datepick-month td .datepick-other-month {
    background-color: #fff
}

.datepick-month td .datepick-today,.datepick-month td .datepick-highlight {
    background-color: #cccccc;
    color: #fff
}

.datepick-month td .datepick-selected {
    color: #fff;
    background-color: var(--kuler-1)
}

.datepick-month a {
    display: block;
    width: 100%;
    padding: 0.125em 0em;
    color: #000;
    text-decoration: none
}

.datepick-month span {
    display: block;
    width: 100%;
    padding: 0.125em 0em
}

.datepick-status {
    clear: both;
    background-color: #ddd;
    text-align: center
}

.datepick-clear-fix {
    clear: both
}

button.datepick-cmd {
    text-align: center
}

.p_datepicker {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 64 64' style='enable-background:new 0 0 64 64;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M19.7,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5S18.8,37.7,19.7,37.7z'/%3E%3Cpath d='M27.9,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5S27.1,37.7,27.9,37.7z'/%3E%3Cpath d='M36.2,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5c-0.9,0-1.5,0.7-1.5,1.5S35.3,37.7,36.2,37.7z'/%3E%3Cpath d='M44.4,37.7c0.9,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5c-0.9,0-1.5,0.7-1.5,1.5S43.6,37.7,44.4,37.7z'/%3E%3Cpath d='M19.7,45.6c0.9,0,1.5-0.7,1.5-1.5c0-0.9-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5C18.1,44.9,18.8,45.6,19.7,45.6z'/%3E%3Cpath d='M27.9,45.6c0.9,0,1.5-0.7,1.5-1.5c0-0.9-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5C26.4,44.9,27.1,45.6,27.9,45.6z'/%3E%3Cpath d='M36.2,45.6c0.9,0,1.5-0.7,1.5-1.5c0-0.9-0.7-1.5-1.5-1.5c-0.9,0-1.5,0.7-1.5,1.5C34.6,44.9,35.3,45.6,36.2,45.6z'/%3E%3Cpath d='M49.1,17.6H15c-3.2,0-5.7,2.6-5.7,5.7V49c0,3.2,2.6,5.7,5.7,5.7h34c3.2,0,5.7-2.6,5.7-5.7V23.4 C54.8,20.2,52.2,17.6,49.1,17.6z M51.7,49c0,1.4-1.1,2.6-2.6,2.6H15c-1.4,0-2.6-1.1-2.6-2.6V29.5h39.3V49z M51.7,26.4H12.4v-3.1 c0-1.4,1.1-2.6,2.6-2.6h34.1v0c1.4,0,2.6,1.1,2.6,2.6V26.4z'/%3E%3Cpath d='M19.7,14.5c0.8,0,1.5-0.7,1.5-1.5v-2.1c0-0.8-0.7-1.5-1.5-1.5c-0.8,0-1.5,0.7-1.5,1.5v2.1C18.1,13.8,18.8,14.5,19.7,14.5z' /%3E%3Cpath d='M44.4,14.5c0.8,0,1.5-0.7,1.5-1.5v-2.1c0-0.8-0.7-1.5-1.5-1.5c-0.8,0-1.5,0.7-1.5,1.5v2.1C42.9,13.8,43.6,14.5,44.4,14.5z' /%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 24px;
    background-position: calc(100% - 8px) center;
    background-repeat: no-repeat
}

.dropdown {
    position: relative
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    100% {
        margin-top: 0px;
        opacity: 1
    }
}

.modal-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;
    background: rgba(255,255,255,0.65)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.modal-open {
    overflow: hidden
}

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

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

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

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

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

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

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

    100% {
        transform: rotate(360deg)
    }
}

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

.box,.section {
    position: relative;
    word-wrap: break-word;
    padding-top: 16px;
    margin-bottom: 24px;
    border-top: 2px solid #f0f0f0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: column;
    color: #666666
}

.box__title,.section__title {
    margin: 0;
    color: var(--kuler-1);
    font-size: 18px
}

.box__header {
    margin-bottom: 16px
}

.box__header a {
    padding: 0
}

.box__header--widget {
    position: relative;
    z-index: 3
}

.box__header .cb-covid-19,.cb-pilkada .box__header {
    margin-bottom: 24px
}

.cb-pilkada .box__header {
    margin-top: -16px;
    margin-bottom: 0;
    padding: 16px 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px
}

.cb-covid-19 .box__title {
    position: relative
}

.cb-covid-19 .box__title:before {
    position: absolute;
    content: "";
    width: 120px;
    height: 2px;
    z-index: 2;
    bottom: -8px;
    background: var(--kuler-3)
}

.box__title--sponsored-box {
    margin-left: 32px;
    color: #000000;
    font-size: 12px
}

.box__title--sponsored-box img {
    max-width: 150px;
    max-height: 50px
}

.box__title--sponsored-box-pilkada {
    margin-right: 18%
}

.box__logo {
    max-width: 200px;
    max-height: 45px
}

.cb-pamor .box__logo {
    max-height: 55px
}

.cb-pilkada .box__logo {
    max-height: 50px
}

.box-background {
    padding: 16px;
    background: #e3f5fe;
    color: #666666
}

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

.nhl .box {
    margin-bottom: 32px
}

.box-ads {
    margin-bottom: 24px
}

.nhl .box-ads {
    margin-bottom: 32px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 2px solid #f0f0f0;
    border-bottom: 2px solid #f0f0f0
}

.box-ads__name {
    position: absolute;
    padding: 8px 12px;
    font-size: 14px;
    color: #666666
}

.section__header {
    margin-bottom: 16px
}

.section__header a {
    padding: 0
}

.page {
    position: relative
}

.page__header {
    position: relative;
    margin: 12px 0
}

.page__title {
    margin: 0;
    color: var(--kuler-1);
    font-size: 23px
}

.page__breadcrumb,.page__follow,.page__indeks-info {
    color: #666666;
    font-size: 14px
}

.page__breadcrumb a,.page__follow a,.page__indeks-info a {
    color: #666666
}

.page__breadcrumb a {
    position: relative
}

.page__breadcrumb a:after {
    font-family: detiknetwork-FF;
    content: "\65";
    padding: 0 4px;
    vertical-align: middle
}

.page__breadcrumb a:last-child:after {
    content: ""
}

.page__breadcrumb a:hover {
    color: #333333
}

.nhl .cb,.nhl .widget {
    border-bottom: 2px solid #f0f0f0
}

.grid-row>.cb,.grid-row>.widget {
    margin-left: 13px;
    margin-right: 13px;
    width: 100%
}

.cb.cb-detik-ramadhan,.widget.cb-detik-ramadhan {
    border-color: #000
}

.widget.widget-nhl {
    border: none
}

.nhl>.list-content .widget + .widget,.nhl>.list-content .widget + .box,.nhl>.list-content .widget + .box-ads,.nhl>.list-content .box + .widget,.nhl>.list-content .box + .box,.nhl>.list-content .box + .box-ads,.nhl>.list-content .box-ads + .widget,.nhl>.list-content .box-ads + .box,.nhl>.list-content .box-ads + .box-ads {
    margin-top: -34px
}

.sticky {
    z-index: 2;
    position: sticky;
    position: -webkit-sticky;
    top: 88px
}

.captcha {
    display: inline-block
}

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

.alert--danger {
    border: 1px solid #f6cfd7;
    background: #fae9ec;
    color: #000000
}

.alert--center-inline {
    display: inline-block
}

.navbar-border,.navbar-first,.footer__border,.headline,.headline-today-recap {
    background: #21409A;
    background: -moz-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: -webkit-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.navbar-first .dropdown-menu .nav__item,.navbar-second .dropdown-menu .nav__item {
    border-bottom: 1px solid #f0f0f0
}

.navbar-first .dropdown-menu .nav__item:last-child,.navbar-second .dropdown-menu .nav__item:last-child {
    border: none
}

.navbar-first .nav__item.dropdown-aktif .dropdown {
    color: #fcc43f
}

.is-sticky .navbar-first .nav__item.dropdown-aktif .dropdown {
    color: var(--kuler-1)
}

.navbar-second .nav__item.dropdown-aktif .dropdown {
    color: var(--kuler-1)
}

.headline-terkait .list-content--column .list-content__item {
    padding-bottom: 0;
    margin-bottom: 0
}

.nhl .list-content__item,.nhl>.list-content--column .list-content__item {
    padding-bottom: 16px;
    margin-bottom: 16px
}

.headline-terkait .list-content--column {
    margin-top: 0
}

.headline .media:hover .media__title a {
    color: #fcc43f
}

.headline .media__image {
    background: none
}

.headline--breakingnews .media__image {
    margin-bottom: 0;
    overflow: visible;
    position: static
}

.widget .media__text,.cb-detik-ramadhan .media__text {
    font-size: 14px
}

.headline .media__title {
    font-size: 23px
}

.headline .media__title a {
    color: #FFFFFF
}

.nhl .media__title {
    font-size: 20px
}

.nhl .list-content--column .column-6 .media__title,.terpopuler .media__title,.cb-mostpop .media__title,.cb-commented .media__title {
    font-size: 16px
}

.widget-detikx .media__title,.nhl .cb .media__title {
    font-size: 14px
}

.detail-body__newstag .media__title {
    color: #000000;
    font-size: 14px
}

.headline--breakingnews .media__title {
    text-transform: uppercase;
    margin-top: 32px;
    margin-right: 130px;
    color: #FFFFFF
}

.cb-d-awards .media__title a:hover {
    color: #C2BB3C
}

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

.media__subtitle a {
    color: var(--kuler-3)
}

.headline .media__subtitle a {
    color: #fcc43f
}

.headline .media__subtitle {
    color: #fcc43f
}

.nhl .media__subtitle {
    margin-bottom: 8px
}

.cb-mostpop .media__date {
    margin: 4px 0 0 50px
}

.cb-berita-terbaru .media__date {
    margin: 0
}

.headline .media__date {
    color: #FFFFFF
}

.nhl .media__date {
    margin-top: 12px
}

.cb .media__date {
    margin-top: 8px
}

.headline .media__author {
    color: #f0f0f0
}

.headline .media__author a {
    color: #f0f0f0
}

.headline .media__author span {
    color: #FFFFFF
}

.media__label {
    background: var(--kuler-1)
}

.media__label--live {
    background: #FF0000;
    padding: 4px 8px 4px 20px;
    top: 8px;
    left: 8px
}

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

.nhl .media--left .media__image {
    margin: 0 24px 0 0
}

.nhl .media--right .media__image {
    margin: 0 0 0 24px
}

.nhl .media--left,.nhl .media--right {
    align-items: center
}

.nhl .media--left .media__image,.nhl .media--right .media__image {
    width: 31%
}

.widget-nhl .media--left .media__image,.widget-nhl .media--right .media__image {
    width: 400px
}

.cb-kolom .media--left .media__image,.cb-kolom .media--right .media__image {
    width: 100px
}

.indeks .media--left .media__image,.indeks .media--right .media__image {
    width: 26%
}

.media--text-overlay .media__subtitle {
    color: var(--kuler-3)
}

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

.media--text-overlay .media__subtitle a {
    color: var(--kuler-3)
}

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

.cb-mostpop .text-list {
    align-items: normal
}

.cb-mostpop .text-list__data,.cb-commented .text-list__data {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: -4px;
    font-size: 20px
}

.cb-commented .text-list__data {
    font-size: 10px
}

.terpopuler .text-list__data,.cb-mostpop .text-list__data,.cb-commented .text-list__data {
    color: #999999
}

@keyframes live {
    0% {
        background: #fcc43f
    }

    50% {
        background: #FF0000
    }

    100% {
        background: #fcc43f
    }
}

.btn--blue-base {
    background: #21409A;
    color: #FFFFFF
}

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

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

.btn--blue-base.btn--link {
    color: #21409A
}

.btn--blue-light-1 {
    background: #2c5498;
    color: #FFFFFF
}

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

.btn--blue-light-1.btn--outline {
    border-color: #2c5498;
    color: #2c5498
}

.btn--blue-light-1.btn--link {
    color: #2c5498
}

.btn--blue-light-2 {
    background: #007cbd;
    color: #FFFFFF
}

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

.btn--blue-light-2.btn--outline {
    border-color: #007cbd;
    color: #007cbd
}

.btn--blue-light-2.btn--link {
    color: #007cbd
}

.btn--blue-light-3 {
    background: #3ea6dd;
    color: #FFFFFF
}

.btn--blue-light-3:hover {
    color: #FFFFFF
}

.btn--blue-light-3.btn--outline {
    border-color: #3ea6dd;
    color: #3ea6dd
}

.btn--blue-light-3.btn--link {
    color: #3ea6dd
}

.btn--blue-light-4 {
    background: #84c6e9;
    color: #FFFFFF
}

.btn--blue-light-4:hover {
    color: #FFFFFF
}

.btn--blue-light-4.btn--outline {
    border-color: #84c6e9;
    color: #84c6e9
}

.btn--blue-light-4.btn--link {
    color: #84c6e9
}

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

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

.btn--blue-light-5.btn--outline {
    border-color: #e3f5fe;
    color: #e3f5fe
}

.btn--blue-light-5.btn--link {
    color: #e3f5fe
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn--utility-warning {
    background: #FCB715;
    color: rgba(0,0,0,0.75)
}

.btn--utility-warning:hover {
    color: rgba(0,0,0,0.75)
}

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

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

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

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

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

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

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

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

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

.header {
    margin: 16px 0
}

.header__logo {
    min-height: 90px
}

.header__logo img {
    width: 265px
}

@media (min-width: 1024px) and (max-width:1280px) {
    .header__logo img {
        width:240px
    }
}

.header__leaderboard {
    min-height: 90px;
    justify-content: flex-end
}

.header__leaderboard img {
    width: 728px
}

.footer {
    background: #f0f0f0
}

.footer__logo {
    margin: 12px 0 8px;
    display: inline-block
}

.footer__logo img {
    width: 189px
}

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

.footer-title__copyright {
    color: #666666;
    margin-top: 40px
}

.footer-title__connect {
    color: #333333;
    margin-bottom: 4px
}

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

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

.footer__social {
    margin-top: 40px;
    margin-bottom: 4px
}

.footer__grid {
    padding: 32px 0 52px
}

.footer-nav {
    padding-top: 24px;
    padding-bottom: 12px;
    padding-left: 24px
}

.footer-nav--title {
    margin-bottom: 8px;
    font-size: 14px
}

.footer__border {
    height: 4px
}

.headline {
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 8px
}

.headline-terkait {
    font-size: 14px;
    padding: 12px 16px
}

.headline-terkait__title {
    margin: 0;
    position: relative;
    color: #fcc43f
}

.headline-terkait__title:after {
    content: " ";
    position: absolute;
    width: 83%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    line-height: 0.1em;
    margin: 10px 0;
    right: 6px
}

.headline-terkait a {
    color: #FFFFFF;
    margin: 8px 0;
    display: inline-block
}

.headline-terkait a:hover {
    color: #fcc43f
}

.headline--breakingnews .ratiobox {
    overflow: visible;
    position: static
}

.headline-today-recap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: -6px;
    line-height: 1;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.headline-today-recap:hover .headline-today-recap__title {
    color: #fcd373
}

.headline-today-recap__title {
    position: relative;
    z-index: 2;
    padding: 8px 16px 6px;
    background: #ed131b
}

.headline-today-recap__title:before {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 20px;
    background: #ed131b;
    -webkit-transform: skew(-17deg);
    -moz-transform: skew(-17deg);
    -ms-transform: skew(-17deg);
    -o-transform: skew(-17deg);
    transform: skew(-17deg)
}

.headline-today-recap__item {
    padding: 8px 0 6px;
    flex: 1
}

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

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

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

.icon-item__ig,.icon-item__ig:hover {
    color: #FFFFFF;
    background: #5851DB;
    background: -moz-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: -webkit-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: radial-gradient(ellipse at left bottom,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$top_color',endColorstr='$bottom_color',GradientType=1)
}

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

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

.icon-item__wa,.icon-item__wa:hover {
    color: #FFFFFF;
    background: #25D366
}

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

.detail__top-follow .icon-item {
    color: #666666;
    margin: 0
}

.icon-logo {
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px
}

.icon-logo img {
    display: block;
    max-height: 26px;
    max-width: 75px
}

.cb-commented__color-data {
    color: var(--kuler-3)
}

.content__bg {
    background: #FFFFFF
}

.widget-detikx .media__text a:hover {
    color: var(--kuler-3)
}

.color-red {
    color: #C72026
}

.color-orange-light-2 {
    color: #f7931d
}

.static {
    margin-bottom: 16px
}

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

.static-nav .selected div {
    color: var(--kuler-3)
}

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

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

.static-body__text ul {
    list-style: none
}

.static-body__text a {
    color: var(--kuler-1)
}

.static-body__text>h1 {
    font-size: 32px
}

.static-body__text>h2 {
    font-size: 26px
}

.static-body__text>h3 {
    font-size: 23px
}

.static-body__text>h4 {
    font-size: 20px
}

.static-body__text>h5 {
    font-size: 18px
}

.static-body__text>h6 {
    font-size: 16px
}

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

.static-body__box div {
    color: var(--kuler-1)
}

.static-body__box p {
    margin: 4px 0 16px
}

.static-body__form span {
    margin: 20px 0;
    display: block
}

.sitemap-nav {
    color: #666666;
    font-size: 14px;
    margin-bottom: 24px
}

.sitemap-nav__title {
    color: var(--kuler-1);
    margin-bottom: 16px;
    display: block
}

.indeks-menu {
    background: #f0f0f0;
    border-radius: 4px;
    padding: 12px 12px
}

.indeks-menu__title {
    color: var(--kuler-1);
    font-size: 18px
}

.indeks-menu__box {
    font-size: 12px
}

.indeks-menu__box span {
    text-transform: uppercase;
    padding-right: 8px
}

.flowed .float-vid__content {
    background: #21409A;
    background: -moz-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: -webkit-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.datepick-month td .datepick-selected {
    background-color: #562b77
}

.ebook__top {
    position: relative;
    height: 500px
}

.ebook__top__img {
    width: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.ebook__top__content {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 85px 193px
}

.ebook__top__content__left {
    width: 50%
}

.ebook__top__content__left__logo {
    margin-bottom: 28px
}

.ebook__top__content__left__title {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: #21409a;
    margin-bottom: 28px
}

.ebook__top__content__left__desc {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: #000000;
    margin-bottom: 28px
}

.ebook__top__content__left__button {
    background: #fcb715;
    border-radius: 4px;
    width: 240px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center
}

.ebook__top__content__left__button__text {
    color: #21409a;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    padding-right: 12px
}

.ebook__top__content__right {
    width: 50%
}

.ebook__bottom {
    width: 100%
}

.ebook__bottom__content {
    display: flex;
    margin-bottom: 40px
}

.ebook__bottom__content__left {
    margin-right: 26px
}

.ebook__bottom__content__left img {
    border-radius: 4px
}

.ebook__bottom__content__right__title {
    font-style: normal;
    color: #000000;
    font-weight: 700;
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 14px
}

.ebook__bottom__content__right__year {
    font-style: normal;
    color: #666666;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 32px
}

.ebook__bottom__content__right__desc {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 60px
}

.ebook__bottom__content__right__bottom {
    display: flex
}

.ebook__bottom__content__right__bottom__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 38px;
    background: #21409a;
    border-radius: 4px;
    margin-right: 32px
}

.ebook__bottom__content__right__bottom__button__img img {
    margin-right: 12px
}

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

.ebook__bottom__content__right__bottom__share__text {
    color: #4d4d4d;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px
}

.column-recap {
    margin-top: 12px;
    margin-left: 13%;
    margin-right: 13%
}

.mgt-minus-10 {
    margin-top: -10px
}

.cb-detik-ramadhan__jadwal {
    font-size: 12px;
    color: #333333;
    margin: 8px 0
}

.cb-detik-ramadhan__jadwal table {
    width: 100%;
    border-collapse: collapse;
    display: table;
    border-spacing: 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000
}

.cb-detik-ramadhan__jadwal td {
    text-align: center;
    border: 0;
    padding: 4px 0
}

.cb-detik-ramadhan__title {
    font-size: 14px;
    color: #333333;
    margin-bottom: 8px
}

.cb-detik-ramadhan__date,.cb-detik-ramadhan__desc {
    font-size: 12px;
    color: #666666;
    margin-bottom: 8px
}

.cb-covid-19 {
    padding-bottom: 24px;
    z-index: 2;
    border-bottom: 2px solid #21409A;
    border-color: #21409A
}

.cb-pilkada {
    padding-bottom: 24px;
    z-index: 2;
    border-top: 2px solid #21409A;
    background: #f0f3f4
}

.cb-vaksin .box__logo {
    width: 334px;
    max-width: 100%;
    max-height: inherit;
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.cb-vaksin .box__header {
    position: relative;
    margin-bottom: 8px
}

.cb-vaksin .box__header a {
    padding: 4px 8px
}

.cb-vaksin .box__header .btn {
    position: absolute;
    right: 10px;
    bottom: 14px;
    background-color: #FF7C00;
    color: #fff
}

.cb-kadokeluarga .media {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 12px
}

.cb-kadokeluarga .media__image {
    margin-right: 12px
}

.cb-kadokeluarga .list-content__item {
    padding-bottom: 8px;
    margin-bottom: 12px
}

.btn--pemilu {
    background: #C72026;
    background: -moz-linear-gradient(127deg,#c72026 40%,#ef672f 100%);
    background: -webkit-linear-gradient(127deg,#c72026 40%,#ef672f 100%);
    background: linear-gradient(127deg,#c72026 40%,#ef672f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-pemilu {
    position: relative;
    margin-top: 24px!important;
    margin-bottom: 24px!important
}

.cb-pemilu--big {
    padding: 16px;
    border-radius: 8px;
    background: #f7f7f7;
    background: -moz-linear-gradient(100deg,#f7f7f7 50%,#f0f0f0 100%);
    background: -webkit-linear-gradient(100deg,#f7f7f7 50%,#f0f0f0 100%);
    background: linear-gradient(100deg,#f7f7f7 50%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-pemilu--small {
    padding: 12px;
    max-height: 410px;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
    background: -moz-linear-gradient(-100deg,#f0f0f0 50%,#f7f7f7 100%);
    background: -webkit-linear-gradient(-100deg,#f0f0f0 50%,#f7f7f7 100%);
    background: linear-gradient(-100deg,#f0f0f0 50%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-pemilu--small .bg-flag {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 120px;
    background: url("../index/flag-pemilu-small.png") no-repeat
}

.cb-pemilu__desc {
    background: #fff;
    background: rgba(255,255,255,0.95)
}

.cb-pemilu .slick-dots li button {
    border: none;
    width: 12px;
    height: 12px;
    background: #f0a7b8
}

.cb-pemilu .slick-dots li.slick-active button {
    background: #C72026
}

.cb-pemilu .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65)
}

.cb-pemilu .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-pemilu .slick-prev,.cb-pemilu .slick-next {
    margin: 0 16px
}

.cb-pemilu .slick-prev:before,.cb-pemilu .slick-next:before {
    font-size: 24px
}

.cb-pemilu--big .cb-pemilu__logo {
    width: 130px;
    height: auto
}

.cb-pemilu--small .cb-pemilu__logo {
    width: 94px;
    height: auto
}

.cb-pemilu--small .cb-pemilu__desc {
    padding: 12px;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.btn--pemilu {
    padding-left: 16px;
    padding-right: 16px
}

.btn--pemilu:hover {
    color: white!important
}

.pemilu-countdown {
    border: 1px solid #f0f0f0;
    background: #f7f7f7;
    padding: 12px
}

.pemilu-countdown__logo {
    height: auto;
    width: 73px;
    margin-right: 16px
}

.pemilu-countdown__num {
    color: #2c5498;
    margin-right: 16px
}

.pemilu-countdown__num-day {
    padding: 2px 4px;
    border-radius: 2px;
    background: #21409A;
    background: -moz-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: -webkit-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1);
    font-size: 18px
}

.pemilu-countdown__num-text {
    font-size: 18px
}

.pemilu-countdown__num-title {
    font-size: 10px
}

.pemilu-countdown__desc {
    font-size: 16px
}

.pemilu-countdown__btn {
    background: #e0e5e8;
    width: 30px;
    height: 30px;
    margin-left: 16px
}

.pemilu-countdown__btn:hover {
    color: #C72026
}

.pemilu-countdown__btn .icon {
    font-size: 16px
}

.btn--yellow-base {
    background: #FCB715;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base.btn--link {
    color: #FCB715
}

.btn--yellow-light-1 {
    background: #fcc43f;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1.btn--link {
    color: #fcc43f
}

.btn--yellow-light-2 {
    background: #fcd373;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2.btn--link {
    color: #fcd373
}

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

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

.btn--yellow-light-3.btn--link {
    color: #fde3a5
}

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

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

.btn--yellow-light-4.btn--link {
    color: #fdefcd
}

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

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

.btn--yellow-light-5.btn--link {
    color: #fef7e8
}

.cb-hoegeng {
    padding: 12px;
    background-image: url("../index/bg-hoegeng.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border-radius: 8px;
    margin-bottom: 24px!important
}

.cb-hoegeng__logo {
    width: 180px;
    height: auto;
    margin-bottom: 4px
}

.cb-hoegeng__desc {
    position: relative;
    padding-bottom: 12px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-hoegeng__desc:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #FCB715
}

.cb-hoegeng .media__subtitle {
    color: #FCB715
}

.cb-hoegeng .media__title a {
    color: #FFFFFF
}

.cb-hoegeng .media__title a:hover {
    color: #FCB715
}

.cb-hoegeng .slick-dots li button {
    border: none;
    width: 12px;
    height: 12px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #fef7e8
}

.cb-hoegeng .slick-dots li.slick-active button {
    background: #FCB715
}

.cb-hoegeng .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #232323
}

.cb-hoegeng .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-hoegeng .slick-prev,.cb-hoegeng .slick-next {
    margin: 0 16px
}

.cb-hoegeng .slick-prev:before,.cb-hoegeng .slick-next:before {
    font-size: 24px
}

.btn--yellow-base {
    background: #FCB715;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base.btn--link {
    color: #FCB715
}

.btn--yellow-light-1 {
    background: #fcc43f;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1.btn--link {
    color: #fcc43f
}

.btn--yellow-light-2 {
    background: #fcd373;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2.btn--link {
    color: #fcd373
}

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

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

.btn--yellow-light-3.btn--link {
    color: #fde3a5
}

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

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

.btn--yellow-light-4.btn--link {
    color: #fdefcd
}

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

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

.btn--yellow-light-5.btn--link {
    color: #fef7e8
}

.cb-adhyaksa {
    padding: 12px;
    background-image: url("../index/bg-adhyaksa.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border-radius: 8px;
    margin-bottom: 24px!important
}

.cb-adhyaksa__logo {
    width: 200px;
    height: auto;
    margin-bottom: 4px;
    margin-top: -8px
}

.cb-adhyaksa__desc {
    position: relative;
    padding-bottom: 12px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-adhyaksa__desc:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #fcc43f
}

.cb-adhyaksa .media__subtitle {
    color: #fcc43f
}

.cb-adhyaksa .media__title a {
    color: #FFFFFF
}

.cb-adhyaksa .media__title a:hover {
    color: #fcc43f
}

.cb-adhyaksa .slick-dots li button {
    border: none;
    width: 12px;
    height: 12px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #999999
}

.cb-adhyaksa .slick-dots li.slick-active button {
    background: #fcc43f
}

.cb-adhyaksa .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #232323
}

.cb-adhyaksa .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-adhyaksa .slick-prev,.cb-adhyaksa .slick-next {
    margin: 0 16px
}

.cb-adhyaksa .slick-prev:before,.cb-adhyaksa .slick-next:before {
    font-size: 24px
}

.btn--red-base {
    background: #C72026;
    color: #FFFFFF
}

.btn--red-base:hover {
    color: #FFFFFF
}

.btn--red-base.btn--link {
    color: #C72026
}

.btn--red-light-1 {
    background: #ed131b;
    color: #FFFFFF
}

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

.btn--red-light-1.btn--link {
    color: #ed131b
}

.btn--red-light-2 {
    background: #FF0000;
    color: #FFFFFF
}

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

.btn--red-light-2.btn--link {
    color: #FF0000
}

.btn--red-light-3 {
    background: #ff5c5c;
    color: #FFFFFF
}

.btn--red-light-3:hover {
    color: #FFFFFF
}

.btn--red-light-3.btn--link {
    color: #ff5c5c
}

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

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

.btn--red-light-4.btn--link {
    color: #ffa6a6
}

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

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

.btn--red-light-5.btn--link {
    color: #ffd6d6
}

.cb-detikpilkada {
    padding: 12px;
    background-color: #F5F5F5;
    background-image: url("../index/bg-cb-detikpilkada.webp");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 177px 41px;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border-radius: 8px;
    margin-bottom: 24px!important
}

.cb-detikpilkada__logo {
    width: 144px;
    height: auto;
    margin-bottom: 4px;
    margin-top: -8px
}

.cb-detikpilkada__desc {
    color: #000000;
    background-color: white;
    position: relative;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-detikpilkada .media__subtitle {
    color: #2c5498
}

.cb-detikpilkada .media__title a {
    color: #000000
}

.cb-detikpilkada .media__title a:hover {
    color: #2c5498
}

.cb-detikpilkada .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #999999
}

.cb-detikpilkada .slick-dots li.slick-active button {
    background: #ed131b
}

.cb-detikpilkada .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    background-color: rgba(0,0,0,0.5);
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #FFFFFF
}

.cb-detikpilkada .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-detikpilkada .slick-prev,.cb-detikpilkada .slick-next {
    margin: 0 16px
}

.cb-detikpilkada .slick-prev:before,.cb-detikpilkada .slick-next:before {
    font-size: 24px
}

.btn-detikhot-color {
    background: #c72026;
    background: -moz-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: -webkit-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c72026",endColorstr="#ef672f",GradientType=1);
    color: white;
    min-width: 80px;
    padding: calc(12px / 3) 10px
}

.btn-detikhot-color span {
    transition: transform 0.3s ease
}

.btn-detikhot-color span:hover {
    transform: scale(1.05)
}

.btn-detikhot-color:hover {
    background: #d50e15;
    background: -moz-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: -webkit-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d50e15",endColorstr="#f2591a",GradientType=1);
    color: white;
    min-width: 80px;
    padding: calc(12px / 3) 10px;
    opacity: 1
}

.btn--red-base {
    background: #C72026;
    color: #FFFFFF
}

.btn--red-base:hover {
    color: #FFFFFF
}

.btn--red-base.btn--link {
    color: #C72026
}

.btn--red-light-1 {
    background: #ed131b;
    color: #FFFFFF
}

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

.btn--red-light-1.btn--link {
    color: #ed131b
}

.btn--red-light-2 {
    background: #FF0000;
    color: #FFFFFF
}

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

.btn--red-light-2.btn--link {
    color: #FF0000
}

.btn--red-light-3 {
    background: #ff5c5c;
    color: #FFFFFF
}

.btn--red-light-3:hover {
    color: #FFFFFF
}

.btn--red-light-3.btn--link {
    color: #ff5c5c
}

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

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

.btn--red-light-4.btn--link {
    color: #ffa6a6
}

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

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

.btn--red-light-5.btn--link {
    color: #ffd6d6
}

.cb-17an {
    padding: 12px;
    background-color: white;
    background-image: url("../index/bg-17an.webp");
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border: solid 1px #D8D8D8;
    border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 24px!important
}

.cb-17an .slick-dotted.slick-slider {
    padding-bottom: 10px!important
}

.cb-17an__logo {
    width: 144px;
    height: auto;
    margin-bottom: 4px;
    margin-top: -8px
}

.cb-17an__desc {
    color: #C72026;
    background-color: #E0E5E8;
    background-image: url("../index/bg-cta-17an.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-17an .media__subtitle {
    color: #ef672f
}

.cb-17an .media__title a {
    color: #000000
}

.cb-17an .media__title a:hover {
    color: #ef672f
}

.cb-17an .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #2c5498
}

.cb-17an .slick-dots li.slick-active button {
    background: #ed131b;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-17an .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    background-color: rgba(0,0,0,0.5);
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #FFFFFF
}

.cb-17an .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-17an .slick-prev,.cb-17an .slick-next {
    margin: 0 16px
}

.cb-17an .slick-prev:before,.cb-17an .slick-next:before {
    font-size: 24px
}

.btn-detikhot-color {
    background: #c72026;
    background: -moz-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: -webkit-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c72026",endColorstr="#ef672f",GradientType=1);
    color: white;
    min-width: 100px;
    padding: calc(12px / 3) 10px
}

.btn-detikhot-color span {
    transition: transform 0.3s ease
}

.btn-detikhot-color span:hover {
    transform: scale(1.05)
}

.btn-detikhot-color:hover {
    background: #d50e15;
    background: -moz-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: -webkit-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d50e15",endColorstr="#f2591a",GradientType=1);
    color: white;
    min-width: 100px;
    padding: calc(12px / 3) 10px;
    opacity: 1
}

.cb-jabar-awards {
    position: relative;
    margin-top: 24px!important;
    padding: 12px;
    overflow: hidden;
    background: url("../index/bg-detikjabar-awards.webp");
    background-size: 100% 100%;
    border-radius: 8px;
    background-repeat: no-repeat;
    margin-bottom: 24px!important
}

.cb-jabar-awards__desc {
    margin-top: 90px;
    padding: 8px 12px;
    text-align: center;
    background: rgba(199,118,2,0.7);
    font-size: 12px
}

.cb-jabar-awards__logo {
    width: 175px;
    height: auto
}

@media only screen and (max-width: 325px) {
    .cb-jabar-awards__logo {
        width:143px
    }
}

.cb-jabar-awards .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    background-color: #975900;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-jabar-awards .slick-dots li.slick-active button {
    background-color: #fcd373
}

.cb-jabar-awards .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #000
}

.cb-jabar-awards .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-jabar-awards .slick-prev,.cb-jabar-awards .slick-next {
    margin: 0 16px
}

.cb-jabar-awards .slick-prev:before,.cb-jabar-awards .slick-next:before {
    font-size: 24px
}

.cb-jabar-awards .jabar-awards-slider {
    line-height: normal!important;
    margin-bottom: -10px
}

.cb-jabar-awards .jabar-awards-slider a.media__link {
    color: #fff
}

.cb-jabar-awards .jabar-awards-slider a.media__link:hover {
    color: #ffe48e
}

.cb-jabar-awards .media__subtitle {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: #fcc43f
}

.btn--jabar-awards {
    background-color: #ef672f;
    color: #fff
}

.btn--jabar-awards:hover {
    color: #df0a0a;
    opacity: 1;
    background: linear-gradient(268deg,#fff0a1 8.59%,#fffbe7 36.55%,#fcf4d8 55.53%,#e3a444 95.35%)
}

.cb-today-recap {
    padding: 16px;
    margin-top: 8px;
    background: url("../index/today-recap.webp") no-repeat center;
    background-size: cover
}

.cb-today-recap__title {
    margin: 0;
    font-size: 23px
}

.cb-today-recap__date {
    margin-bottom: 4px;
    font-size: 18px;
    color: #f7931d
}

.cb-demi-indonesia-emas {
    position: relative;
    margin-top: 24px!important;
    padding: 16px 12px;
    overflow: hidden;
    background: url("../index/bg-demi-indonesia-emas.webp");
    background-size: 100% 100%;
    border-radius: 8px;
    max-height: 420px;
    margin-bottom: 24px!important
}

.cb-demi-indonesia-emas .desc-emas {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    line-height: 16px
}

.cb-demi-indonesia-emas__logo {
    width: 164px;
    height: auto
}

@media only screen and (max-width: 325px) {
    .cb-demi-indonesia-emas__logo {
        width:143px
    }
}

.cb-demi-indonesia-emas .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    background: #f1f0d6;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-demi-indonesia-emas .slick-dots li.slick-active button {
    background: #ef672f
}

.cb-demi-indonesia-emas .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65)
}

.cb-demi-indonesia-emas .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-demi-indonesia-emas .slick-prev,.cb-demi-indonesia-emas .slick-next {
    margin: 0 16px
}

.cb-demi-indonesia-emas .slick-prev:before,.cb-demi-indonesia-emas .slick-next:before {
    font-size: 24px
}

.cb-demi-indonesia-emas .indonesia-emas-slider {
    background-color: rgba(0,0,0,0.4);
    margin-bottom: -10px
}

.cb-demi-indonesia-emas .indonesia-emas-slider a.media__link {
    color: #fff
}

.cb-demi-indonesia-emas .indonesia-emas-slider a.media__link:hover {
    color: #ffe48e
}

.cb-demi-indonesia-emas .slick-dotted.slick-slider {
    padding-bottom: 5px!important
}

.cb-demi-indonesia-emas .media__subtitle {
    color: #fcc43f!important
}

.cb-demi-indonesia-emas .media__link {
    color: #fff!important
}

.btn-juara-eropa {
    border-radius: 4px;
    background: linear-gradient(85deg,#f4953d 1.82%,#ffe48e 49.98%,#ffd129 98.13%);
    color: #000
}

.cb-kabar-haji {
    position: relative;
    margin-top: 24px!important;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 24px!important
}

.cb-kabar-haji__header {
    position: relative
}

.cb-kabar-haji__header img {
    background-size: contain;
    width: 100%;
    height: 112px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative
}

.cb-kabar-haji__desc {
    font-size: 11px
}

.cb-kabar-haji__logo {
    width: 130px;
    height: 61px
}

.cb-kabar-haji .article-slider .slick-dots {
    bottom: 7%;
    left: 50%;
    transform: translate(-50%,0)
}

.cb-kabar-haji .kabar-haji-slider .slick-dots {
    bottom: 7%;
    left: 50%;
    transform: translate(-50%,0)
}

.cb-kabar-haji .slick-dots li {
    width: 5px;
    height: 5px
}

.cb-kabar-haji .slick-dots li button {
    border: none;
    width: 5px;
    height: 5px;
    background-color: #7EBFA7;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-kabar-haji .slick-dots li.slick-active button {
    background: #295243
}

.cb-kabar-haji .article-slider .slick-arrow {
    top: 17%;
    width: 34px;
    height: 34px;
    opacity: 0.45;
    filter: alpha(opacity=45);
    background-color: #136559;
    color: #fff
}

.cb-kabar-haji .article-slider .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-kabar-haji .slick-prev,.cb-kabar-haji .slick-next {
    margin: 0 16px
}

.cb-kabar-haji .slick-prev:before,.cb-kabar-haji .slick-next:before {
    font-size: 24px
}

.cb-kabar-haji .slick-prev {
    left: 0
}

.cb-kabar-haji .slick-next {
    right: 0
}

.cb-kabar-haji .kabar-haji-slider a.media__link {
    color: #fff
}

.cb-kabar-haji .kabar-haji-slider a.media__link:hover {
    color: #ffe48e
}

.cb-kabar-haji .kabar-haji-slider .media__subtitle a {
    text-decoration: none;
    color: #F7931D
}

.cb-kabar-haji .media__link {
    color: #000!important;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.btn--kabar-haji {
    padding: 1px 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 7px;
    border-radius: 4px;
    background: #f8fcfc;
    background: -moz-linear-gradient(130deg,#f8fcfc 0%,#d5e3cb 50%,#a4c090 100%);
    background: -webkit-linear-gradient(130deg,#f8fcfc 0%,#d5e3cb 50%,#a4c090 100%);
    background: linear-gradient(130deg,#f8fcfc 0%,#d5e3cb 50%,#a4c090 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8fcfc",endColorstr="#a4c090",GradientType=1);
    color: #295243
}

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

.nav-haji {
    font-size: 14px
}

.nav-haji__icon {
    width: 55px;
    height: 55px;
    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: 55px;
    height: 55px
}

.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 {
    margin: 0
}

.nav-haji--column .column {
    display: inline-block
}

.nav-haji--column .column a {
    display: inline-block;
    text-align: center;
    width: 100%;
    color: #295243
}

.nav-haji--column .column a:hover {
    color: #174735
}

.nav-haji--column .nav-haji__icon {
    margin: 0 auto
}

.plr-12 {
    margin: 12px
}

.bg-w {
    background: #F7F7F7
}

.p-14 {
    padding-top: 14px;
    padding-bottom: 14px
}

.ph-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin-left: -6px;
    margin-right: -6px;
    overflow: hidden;
    direction: ltr
}

.ph-item,.ph-item *,.ph-item ::after,.ph-item ::before {
    box-sizing: border-box
}

.ph-item::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    background: linear-gradient(to right,rgba(255,255,255,0) 46%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 54%) 50% 50%;
    animation: phAnimation 0.8s linear infinite;
    content: " ";
    pointer-events: none
}

.widget-nhl .ph-item::before {
    background: linear-gradient(to right,rgba(240,240,240,0) 46%,rgba(240,240,240,0.35) 50%,rgba(240,240,240,0) 54%) 50% 50%
}

.ph-item>* {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    padding-right: 6px;
    padding-left: 6px
}

.ph-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: -16px
}

.ph-row div {
    height: 18px;
    margin-top: 16px;
    background-color: #f7f7f7;
    border-radius: 8px
}

.ph-row .big,.ph-row.big div {
    height: 35px
}

.ph-row .mid,.ph-row.mid div {
    height: 30px
}

.ph-row .empty {
    background-color: rgba(255,255,255,0)
}

.ph-col-1 {
    flex: 0 0 8.33333%
}

.ph-col-2 {
    flex: 0 0 16.66667%
}

.ph-col-3 {
    flex: 0 0 25%
}

.ph-col-4 {
    flex: 0 0 33.33333%
}

.ph-col-5 {
    flex: 0 0 41.66667%
}

.ph-col-6 {
    flex: 0 0 50%
}

.ph-col-7 {
    flex: 0 0 58.33333%
}

.ph-col-8 {
    flex: 0 0 66.66667%
}

.ph-col-9 {
    flex: 0 0 75%
}

.ph-col-10 {
    flex: 0 0 83.33333%
}

.ph-col-11 {
    flex: 0 0 91.66667%
}

.ph-col-12 {
    flex: 0 0 100%
}

[class*="ph-col"] {
    direction: ltr
}

[class*="ph-col"]>* + .ph-row {
    margin-top: 0
}

[class*="ph-col"]>* + * {
    margin-top: 16px
}

.ph-avatar {
    position: relative;
    width: 100%;
    min-width: 60px;
    overflow: hidden;
    background-color: #f7f7f7;
    border-radius: 50%
}

.ph-avatar::before {
    display: block;
    padding-top: 100%;
    content: " "
}

.ph-picture {
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 8px
}

@keyframes phAnimation {
    0% {
        transform: translate3d(-30%,0,0)
    }

    100% {
        transform: translate3d(30%,0,0)
    }
}

.ratiobox__ph-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.ph-nhl-img {
    flex: 0 0 32%
}

.cb-detikevent {
    background: #f0f0f0;
    border-radius: 8px;
    max-width: 694px;
    width: 100%;
    padding: 20px 0;
    margin: 0;
    font-family: "Montserrat",Arial,Tahoma,sans-serif;
    box-sizing: border-box;
    text-rendering: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    container-type: inline-size
}

.cb-detikevent :where(*) {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.cb-detikevent .swiper-button-prev,.cb-detikevent .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 40px;
    --swiper-navigation-sides-offset: 0px;
    --swiper-navigation-top-offset: 80px;
    background-color: rgba(0,0,0,0.3);
    width: 40px
}

.cb-detikevent .swiper-button-prev:after,.cb-detikevent .swiper-button-next:after {
    font-size: 25px
}

.cb-detikevent.placeholder {
    --cbdtkevent-title: #fce7cc;
    --cbdtkevent-subtitle: #fff;
    --cbdtkevent-subtitle-size: 14px;
    --cbdtkevent-more: #fff;
    --cbdtkevent-more-text-hover: #21409a;
    padding-bottom: 0px;
    border-radius: 24px;
    gap: 12px;
    background: #21409a
}

.cb-detikevent__image-placeholder {
    width: 100%;
    aspect-ratio: var(--cbdtkevent-placeholder-ratio,16/9);
    display: block;
    position: relative
}

@media screen and (min-width: 768px) {
    .cb-detikevent__image-placeholder {
        aspect-ratio:var(--cbdtkevent-placeholder-ratio,3/1)
    }
}

.cb-detikevent__image-placeholder>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    object-position: top
}

.cb-detikevent__logo {
    width: auto;
    height: 22px
}

.placeholder .cb-detikevent__logo {
    filter: brightness(0) invert(1)
}

.cb-detikevent__header {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-inline:20px;gap: 10px
}

@container (min-width:640px) {
    .cb-detikevent__header {
        gap: 8px;
        flex-direction: row;
        justify-content: space-between
    }
}

.cb-detikevent__name {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px
}

.cb-detikevent__title {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    color: var(--cbdtkevent-title,#ee4023)
}

.cb-detikevent__subtitle {
    font-size: var(--cbdtkevent-subtitle-size,12px);
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    color: var(--cbdtkevent-subtitle,#21409a)
}

.cb-detikevent__more {
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    display: none;
    align-items: center;
    border: 1px solid var(--cbdtkevent-more,#21409a);
    padding: 4px 16px;
    gap: 10px;
    color: var(--cbdtkevent-more,#21409a);
    border-radius: 9999px;
    transition: all 0.3s ease
}

@media (min-width: 768px) {
    .cb-detikevent__more {
        display:inline-flex
    }

    .cb-detikevent__more:hover {
        background-color: var(--cbdtkevent-more,#21409a);
        color: var(--cbdtkevent-more-text-hover,#fff)
    }
}

.cb-detikevent__more--mobile {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 16px;
    margin-inline:16px;display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border-radius: 2px;
    text-decoration: none;
    color: var(--cbdtkevent-more,#21409a);
    border: 1px solid var(--cbdtkevent-more,#21409a)
}

@media (min-width: 768px) {
    .cb-detikevent__more--mobile {
        display:none
    }
}

.cb-detikevent__content {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.cb-detikevent__content.swiper {
    width: 100%
}

.cb-detikevent__content:has(>.cb-detikevent__item:is(:nth-child(2n),:nth-child(1n))) {
    padding-inline:16px;display: flex
}

@media screen and (min-width: 480px) {
    .cb-detikevent__content:has(.cb-detikevent__item:first-child:nth-last-child(3)) {
        padding-inline:16px
    }
}

.cb-detikevent__content:has(>.cb-detikevent__item:nth-child(2n)) .cb-detikevent__item {
    flex: 1
}

.cb-detikevent__item {
    display: flex;
    container-type: inline-size;
    container-name: cb-item
}

.cb-detikevent__item.swiper-slide {
    height: auto
}

.cb-detikevent__info {
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column
}

@container cb-item (min-width:384px) {
    .cb-detikevent__info {
        flex-direction: row;
        padding: 10px;
        gap: 16px
    }
}

.cb-detikevent__infoimage {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: top
}

@container cb-item (min-width:384px) {
    .cb-detikevent__infoimage {
        width: 50%;
        border-radius: 6px;
        aspect-ratio: 2.3/1
    }
}

.cb-detikevent__infotext {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%
}

@container cb-item (min-width:384px) {
    .cb-detikevent__infotext {
        padding: 0;
        width: 100%
    }
}

.cb-detikevent__infotitle {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #21409a;
    text-wrap: pretty;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.cb-detikevent__infodate {
    font-size: 12px;
    font-style: normal;
    line-height: 17px;
    color: #666;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-wrap: pretty
}

.cb-detikevent__infodate svg {
    flex-shrink: 0;
    margin-top: 1px
}

.cb-detikevent__infodate--date {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.cb-detikevent__infoprice {
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

.cb-detikevent__infourl {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.48px;
    text-decoration: none;
    padding: 8px 16px;
    background-color: var(--cbdtkevent-btn,#21409a);
    color: #fff;
    border-radius: 6px;
    text-align: center;
    margin-top: auto;
    display: block;
    border: 1px solid var(--cbdtkevent-btn,#21409a);
    transition: all 0.3s ease
}

@media (min-width: 768px) {
    .cb-detikevent__infourl:hover {
        background-color:#fff;
        color: var(--cbdtkevent-btn,#21409a)
    }
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    src: url("../index/roboto_light.woff") format("woff"),url("../index/roboto_light.woff2") format("woff2")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: url("../index/roboto_medium.woff") format("woff"),url("../index/roboto_medium.woff2") format("woff2")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: url("../index/roboto_bold.woff") format("woff"),url("../index/roboto_bold.woff2") format("woff2")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300;
    src: url("../index/Montserrat-Light.woff") format("woff"),url("../index/Montserrat-Light.woff2") format("woff2")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    src: url("../index/Montserrat-Regular.woff") format("woff"),url("../index/Montserrat-Regular.woff2") format("woff2")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: bold;
    src: url("../index/Montserrat-Bold.woff") format("woff"),url("../index/Montserrat-Bold.woff2") format("woff2")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    src: url("../index/Montserrat-SemiBold.woff") format("woff"),url("../index/Montserrat-SemiBold.woff2") format("woff2")
}

body {
    margin: 0;
    padding: 0
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.text-center {
    text-align: center
}

.pop_box_dtkid {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 30
}

.dtkframebar {
    position: relative;
    height: 46px;
    font-family: "Montserrat",sans-serif;
    z-index: 22
}

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

.dtkframebar__clearfix:after {
    clear: both
}

.dtkframebar__icons {
    width: 46px;
    height: 46px;
    background: url("icon-sprite.png") no-repeat;
    display: block
}

.dtkframebar__icons-search {
    background-position: -34px 12px
}
@media (min-width: 769px) {
	body {
		margin-top: 4rem!important;
	}
	.header_mobile {
		display: none;
	}
	.footer-lazy {
		display: none;
	}
}
@media (max-width: 768px) {
	.header_descop,.footer_descop {
		display: none;
	}
}
.header_mobile, .footer-lazy, .header_descop,.footer_descop {
	width: 100%;

}
#popover-trigger {
	display: flex;
}
.dtkframebar__icons-notif {
    background-position: 14px 12px
}

.dtkframebar__icons-setting {
    background-position: -80px 12px
}

.dtkframebar a {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    text-decoration: none
}

.dtkframebar__btn {
    padding: 7px 15px;
    display: inline-block;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 2px solid #244B9C;
    text-decoration: none;
    color: #244B9C;
    font-family: "Montserrat",sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box
}

.dtkframebar__btn:hover,.dtkframebar__btn.active,.dtkframebar__btn.blue {
    background: #244B9C;
    color: #fff;
    cursor: pointer
}

.dtkframebar__btn.active:hover,.dtkframebar__btn.blue:hover {
    background: #266eef;
    border-color: #266eef
}

.dtkframebar__caret-down {
    position: relative
}

.dtkframebar__caret-down:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 5px solid #9b9b9b;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}

.dtkframebar__caret-down:after {
    content: '';
    position: absolute;
    left: 1px;
    top: 0;
    border-top: 4px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

.dtkframebar__bg {
    width: 100%;
    height: 46px;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.dtkframebar__bg__inner {
    background: #FFF;
    border-bottom: #9B9B9B;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    z-index: 1
}

@media (min-width: 0px) and (max-width:640px) {
    .dtkframebar__bg__inner {
        position:inherit
    }
}

.dtkframebar__wrapper {
    width: 1100px;
    margin: 0 auto
}

@media (min-width: 1025px) and (max-width:1280px) {
    .dtkframebar__wrapper {
        width:1000px
    }
}

@media (max-width: 1025px) {
    .dtkframebar__wrapper {
        width:100%
    }
}

.dtkframebar__menu {
    padding-right: 2%;
    border-right: 1px solid #e5e5e5;
    position: relative;
    z-index: 10;
    height: 46px;
    overflow: hidden
}

@media (max-width: 415px) {
    .dtkframebar__menu {
        margin-left:15px
    }
}

.dtkframebar__menu__icon {
    z-index: 11;
    width: 20px;
    height: 14px;
    position: relative;
    margin: 17px 9px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    display: block
}

.dtkframebar__menu__icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 12px;
    background: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.dtkframebar__menu__icon span:nth-child(1) {
    top: 0px
}

.dtkframebar__menu__icon span:nth-child(2) {
    top: 5px
}

.dtkframebar__menu__icon span:nth-child(3) {
    top: 10px
}

.dtkframebar__menu__icon.show {
    left: 5px
}

.dtkframebar__menu__icon.show span {
    background: #505050
}

.dtkframebar__menu__icon.show span:nth-child(1) {
    top: 6px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}

.dtkframebar__menu__icon.show span:nth-child(2) {
    opacity: 0;
    left: -60px
}

.dtkframebar__menu__icon.show span:nth-child(3) {
    top: 6px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.dtkframebar__menu__icon.show:before {
    opacity: 0;
    background: #f1f1f1
}

.dtkframebar__menu__icon.show:hover:before {
    opacity: 1
}

.dtkframebar__menu__icon:before {
    content: "";
    display: block;
    border-radius: 50%;
    background: #244b9c;
    position: absolute;
    left: -7px;
    top: -7px;
    width: 26px;
    height: 26px;
    transition: opacity 0.2s ease
}

.dtkframebar__menu__text {
    font-size: 13px;
    font-weight: bold;
    color: #5b5b5b;
    text-align: left;
    letter-spacing: -0.02em;
    margin: 15px 0 0 0;
    display: inline-block;
    min-width: 45px;
    cursor: pointer
}

.dtkframebar__menu__logo {
    width: 28px;
    height: 28px;
    margin: 9px 0
}

.dtkframebar__menu__logo img {
    height: 100%
}

@media (min-width: 300px) and (max-width:1099px) {
    .dtkframebar__menu__logo {
        margin:10px 0;
        height: 25px
    }

    .dtkframebar__menu__logo img {
        height: 25px
    }
}

.dtkframebar__menu__kanal {
    width: 440px;
    height: calc(100% - 46px);
    background: #fff;
    position: fixed;
    z-index: 1;
    top: 46px;
    left: -100%;
    -webkit-box-shadow: 0px 0px 32px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 32px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 32px rgba(0,0,0,0.2);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    overflow-y: scroll;
    padding: 0 0 20px 0
}

@media (max-width: 415px) {
    .dtkframebar__menu__kanal {
        width:100%
    }
}

.dtkframebar__menu__kanal.show {
    left: 0
}

.dtkframebar__menu__kanal__icon {
    width: 23px;
    height: 23px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: 5px
}

.dtkframebar__menu__kanal__icon img {
    vertical-align: top;
    height: 23px
}

.dtkframebar__menu__kanal ul {
    list-style: none;
    margin: 7px 0 0;
    padding: 20px 0 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -moz-appearance: none!important
}

.dtkframebar__menu__kanal ul::-webkit-scrollbar-track {
    background-color: #eee
}

.dtkframebar__menu__kanal ul::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5
}

.dtkframebar__menu__kanal ul::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px
}

.dtkframebar__menu__kanal ul:last-child {
    border-bottom: none
}

.dtkframebar__menu__kanal ul li {
    padding: 5px 20px;
    position: static;
    margin: 0
}

.dtkframebar__menu__kanal ul li:nth-child(11) {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    margin-bottom: 20px
}

.dtkframebar__menu__kanal ul li .kanal__new {
    display: inline-block;
    padding: 0px 3px;
    background: #bb071d;
    color: #fff;
    font-size: 8px;
    line-height: 14px;
    border-radius: 2px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    vertical-align: top;
    margin-left: 2px;
    letter-spacing: -0.02em
}

.dtkframebar__menu__kanal ul li a {
    font: 600 12px/24px "Montserrat",sans-serif;
    font-weight: normal;
    color: #6a6a6a;
    display: block;
    position: relative
}

.dtkframebar__menu__kanal ul li a i {
    display: block;
    width: 18px;
    height: 18px;
    float: left;
    margin-top: 3px;
    margin-right: 15px
}

.dtkframebar__menu__kanal ul li a:hover {
    background-color: #f8f8f8
}

.dtkframebar__menu__kanal ul li:hover a:after {
    border-left: 4px solid #eee
}

.dtkframebar__menu__kanal ul li:hover .show-menu {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform: translateX(-5px);
    -moz-webkit-transform: translateX(-5px);
    transform: translateX(-5px);
    -o-transform: translateX(-5px)
}

@media (min-width: 0px) and (max-width:640px) {
    .dtkframebar__menu__kanal ul li .show-menu,.dtkframebar__menu__kanal ul li:before,.dtkframebar__menu__kanal ul li:after {
        display:none
    }

    .dtkframebar__menu__kanal ul li a:before,.dtkframebar__menu__kanal ul li a:after {
        display: none
    }
}

.dtkframebar__menu__kanal ul li .show-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 98%;
    background: #fafafa;
    border: 1px solid #9B9B9B;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    min-width: 200px;
    cursor: auto;
    z-index: 10
}

.dtkframebar__menu__kanal ul li .show-menu h3 {
    font: 13px "Montserrat",sans-serif;
    font-weight: 500;
    margin: 20px 30px 10px;
    color: #9B9B9B
}

.dtkframebar__menu__kanal ul li .show-menu:before {
    content: '';
    position: absolute;
    top: 18px;
    left: -11px;
    border-right: 11px solid #9B9B9B;
    border-bottom: 11px solid transparent;
    border-top: 11px solid transparent;
    z-index: 10
}

.dtkframebar__menu__kanal ul li .show-menu:after {
    content: '';
    position: absolute;
    left: -10px;
    top: 18px;
    border-right: 11px solid #fafafa;
    border-bottom: 11px solid transparent;
    border-top: 11px solid transparent;
    z-index: 11
}

.dtkframebar__menu__kanal ul li .show-menu.edge:before {
    bottom: 25px;
    top: inherit
}

.dtkframebar__menu__kanal ul li .show-menu.edge:after {
    bottom: 25px;
    top: inherit
}

.dtkframebar__menu__kanal ul li .show-menu.half {
    width: 420px
}

.dtkframebar__menu__kanal ul li .show-menu.half li {
    width: calc(100% / 2 - 61px);
    float: left;
    border-right: 1px solid #e5e5e5;
    position: relative;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.dtkframebar__menu__kanal ul li .show-menu.half li:nth-child(2n) {
    border-right: none
}

.dtkframebar__menu__kanal ul li .show-menu.three {
    width: 600px
}

.dtkframebar__menu__kanal ul li .show-menu.three li {
    width: calc(100% / 3 - 61px);
    float: left;
    border-right: 1px solid #e5e5e5;
    position: relative;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.dtkframebar__menu__kanal ul li .show-menu.three li:nth-child(3n) {
    border-right: none
}

.dtkframebar__menu__kanal ul li .show-menu ul {
    width: auto;
    padding-top: 0;
    border-bottom: none
}

.dtkframebar__menu__kanal ul li .show-menu ul li {
    padding: 5px 30px
}

.dtkframebar__menu__kanal ul li .show-menu ul li a {
    color: #202020
}

.dtkframebar__menu__kanal ul li .show-menu ul li a:after,.dtkframebar__menu__kanal ul li .show-menu ul li a:before {
    display: none
}

.dtkframebar__menu__kanal ul li .show-menu ul li:after,.dtkframebar__menu__kanal ul li .show-menu ul li:before {
    display: none
}

.dtkframebar__menu__kanal ul li .show-menu ul li:nth-child(11) {
    border-bottom: none;
    padding-bottom: 5px;
    margin-bottom: 0
}

.dtkframebar__menu__kanal ul li .show-menu.bottom {
    bottom: 0;
    top: inherit
}

.dtkframebar__menu__kanal ul.newlist {
    padding: 0;
    height: auto
}

.dtkframebar__menu__kanal ul.newlist>li {
    padding: 0
}

.dtkframebar__menu__kanal ul.newlist>li a {
    color: #6a6a6a;
    font-size: 12px;
    letter-spacing: -0.02em;
    display: block;
    padding: 17px 24px
}

.dtkframebar__menu__kanal ul.newlist>li>ul {
    padding: 0
}

.dtkframebar__menu__kanal ul.newlist>li>ul>li {
    padding: 3px 20px
}

.dtkframebar__menu__kanal ul.newlist>li>ul>li a {
    font-weight: normal;
    padding: 0px 15px
}

.dtkframebar__menu__kanal ul.newlist>li>ul>li span img {
    height: 23px
}

.dtkframebar__menu__kanal ul.newlist>li.sub_list>a {
    padding: 5px 24px
}

.dtkframebar__menu__kanal ul.newlist>li.pb10 a {
    padding-bottom: 10px!important
}

.dtkframebar__menu__kanal ul.newlist-double {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: space-between;
    padding: 0
}

.dtkframebar__menu__kanal ul.newlist-double>li {
    width: 50%;
    padding: 0;
    margin: 0 0 0px 0
}

.dtkframebar__menu__kanal ul.newlist-double>li:nth-child(11) {
    border: 0px
}

.dtkframebar__menu__kanal ul.newlist-double>li a {
    padding: 5px 8px
}

.dtkframebar__menu__kanal ul.newlist-double>li:nth-child(odd) a {
    padding-left: 24px
}

.dtkframebar__menu__kanal ul.newlist-double>li:nth-child(even) a {
    padding-right: 24px
}

.dtkframebar__menu__kanal ul.newlist-double>li.sub_list a {
    padding: 5px 20px
}

.dtkframebar__menu__kanal ul.newlist-double>li.sub_list:nth-child(odd) a {
    padding-left: 32px
}

.dtkframebar__menu__kanal ul.networkList {
    padding: 0
}

.dtkframebar__menu__kanal ul.networkList li {
    padding: 0 24px;
    margin: 0 0 9px 0
}

.dtkframebar__menu__kanal .kat_divide {
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #6a6a6a;
    letter-spacing: -0.02em;
    border-top: 1px solid #efefef;
    margin: 5px 0 0 0
}

.dtkframebar__search {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2
}

@media (min-width: 0px) and (max-width:640px) {
    .dtkframebar__search {
        display:none
    }
}

.dtkframebar__search .dtkframebar__icons {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    cursor: pointer;
    outline: none
}

.dtkframebar__search .dtkframebar__icons-search {
    background-position: -34px 6px;
    height: 34px
}

.dtkframebar__search .dtkframebar__icons:hover {
    opacity: 0.7
}

.dtkframebar__search__input {
    position: relative;
    width: 380px;
    height: 34px;
    display: inline-block;
    margin: 6px 0
}

@media (min-width: 640px) and (max-width:780px) {
    .dtkframebar__search__input {
        width:30%
    }
}

.dtkframebar__search__input input {
    border: none;
    outline: none;
    text-align: left;
    width: 100%;
    display: block;
    background: none;
    margin: 0;
    font: 300 14px/14px "Montserrat",sans-serif;
    height: 34px;
    background: #FFF;
    border: 1px solid #E5E5E5;
    padding: 7px 40px 7px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px
}

.dtkframebar__search__input input:focus {
    border-color: #9ecaed;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s
}

.dtkframebar__search__input ::-webkit-input-placeholder {
    color: #9b9b9b
}

.dtkframebar__search__input ::-moz-placeholder {
    color: #9b9b9b
}

.dtkframebar__search__input :-ms-input-placeholder {
    color: #9b9b9b
}

.dtkframebar__search__input :-moz-placeholder {
    color: #9b9b9b
}

.dtkframebar__user {
    display: block;
    text-align: right;
    z-index: 2;
    position: relative
}

.dtkframebar__user__notif {
    display: inline-block;
    opacity: 1;
    position: relative;
    cursor: pointer;
    z-index: 8
}

.dtkframebar__user__notif .dtkframebar__icons-notif {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s
}

.dtkframebar__user__notif:hover .dtkframebar__icons-notif {
    opacity: 0.5
}

.dtkframebar__user__notif .red-notif {
    width: 5px;
    height: 5px;
    -webkit-box-shadow: 0 0 0 2px #fff;
    -moz-box-shadow: 0 0 0 2px #fff;
    box-shadow: 0 0 0 2px #fff;
    background: #c00;
    position: absolute;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    top: 13px;
    right: 15px
}

.dtkframebar__user__notif__box {
    position: absolute;
    right: -4px;
    text-align: left;
    cursor: default;
    visibility: hidden;
    opacity: 0;
    top: 51px;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

.dtkframebar__user__notif__box-wrapper {
    background: #fff;
    width: 400px;
    border-top: 8px solid #F63F2D;
    position: relative;
    z-index: 8;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
    box-shadow: 0 0 10px rgba(0,0,0,0.15)
}

.dtkframebar__user__notif__box-wrapper:before {
    content: '';
    position: absolute;
    top: -18px;
    right: 17px;
    border-bottom: 11px solid #F63F2D;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent
}

.dtkframebar__user__notif__box__header {
    padding: 15px 20px;
    background: #FFF;
    border-bottom: 1px solid #eee
}

.dtkframebar__user__notif__box__header span {
    font: 400 18px "Montserrat",sans-serif;
    color: #244B9C;
    display: inline-block;
    vertical-align: top
}

.dtkframebar__user__notif__box__header__link {
    text-align: right
}

.dtkframebar__user__notif__box__header__link a {
    color: #244B9C;
    font: 400 13px "Montserrat",sans-serif;
    display: inline-block;
    vertical-align: top;
    margin: 4px 4px
}

.dtkframebar__user__notif__box__header__link a .dtkframebar__icons-setting {
    background-position: -83px 3px;
    width: 30px;
    height: 25px
}

.dtkframebar__user__notif__box__header__link a .dtkframebar__icons-setting:hover {
    opacity: 0.6
}

.dtkframebar__user__notif__box__header__link a:last-child {
    margin: 0;
    position: relative
}

.dtkframebar__user__notif__box__header__link a:last-child:before {
    content: '';
    width: 4px;
    height: 4px;
    background: #244B9C;
    position: absolute;
    left: 0;
    top: 12px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px
}

.dtkframebar__user__notif__box__header__link a:hover {
    color: #F63F2D
}

.dtkframebar__user__notif__box__content {
    max-height: 400px;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.dtkframebar__user__notif__box__content__list {
    padding: 10px 20px;
    border-bottom: 1px solid #dedede;
    font: 300 13px "Montserrat",sans-serif;
    color: #444;
    background: #fff
}

.dtkframebar__user__notif__box__content__list.read {
    background: #eee
}

.dtkframebar__user__notif__box__content__list p {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 17px
}

.dtkframebar__user__notif__box__content__list p a {
    font-weight: 700;
    color: #444
}

.dtkframebar__user__notif__box__content__list p a:hover {
    color: #F63F2D
}

.dtkframebar__user__notif__box__content__list .text-center {
    text-align: center
}

.dtkframebar__user__notif__box__content__list .dtkframebar__btn {
    margin-top: 10px;
    padding: 8px 30px
}

.dtkframebar__user__notif__box__content__list .dtkframebar__btn:hover {
    background: #F63F2D;
    border-color: #F63F2D
}

.dtkframebar__user__notif__box__content__list .dtkframebar__btn.half {
    width: calc(50% - 66px)
}

.dtkframebar__user__notif__box__more {
    text-align: center;
    padding: 10px 20px;
    background: #FFF;
    border-top: 1px solid #eee
}

.dtkframebar__user__notif__box__more a {
    color: #244B9C;
    font: 400 14px "Montserrat",sans-serif
}

.dtkframebar__user__notif__box__more a:hover {
    color: #F63F2D
}

.dtkframebar__user__notif__box.show {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-5px);
    -moz-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -o-transform: translateY(-5px)
}

@media (min-width: 0px) and (max-width:640px) {
    .dtkframebar__user {
        position:inherit
    }

    .dtkframebar__user__notif {
        position: inherit
    }

    .dtkframebar__user__notif .red-notif {
        display: none
    }

    .dtkframebar__user__notif__box-wrapper {
        width: 100%
    }

    .dtkframebar__user__notif__box-wrapper:before {
        display: none
    }

    .dtkframebar__user__notif__box__header__link {
        float: left
    }

    .dtkframebar__user__notif__box__header__link a {
        margin: 4px 10px 4px 0px
    }

    .dtkframebar__user__notif__box__content {
        max-height: 250px
    }

    .dtkframebar__user__notif__box__content .dtkframebar__btn.half {
        width: 100%;
        padding: 5px 0
    }
}

.dtkframebar__user__login {
    display: inline-block;
    vertical-align: top;
    padding: 8px 10px 7px;
    border-left: 1px solid #E5E5E5;
    position: relative
}

.dtkframebar__user__login__in {
    display: block;
    margin: 0 0;
    cursor: pointer;
    line-height: normal
}

.dtkframebar__user__login__in h4 {
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    color: #444;
    display: inline-block;
    vertical-align: top;
    margin: 9px 10px 9px 5px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    font-family: "Montserrat",sans-serif;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s
}

.dtkframebar__user__login__in__img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top
}

.dtkframebar__user__login__in__img img {
    height: 100%
}

.dtkframebar__user__login__in .dtkframebar__caret {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    margin-top: 14px;
    margin-right: 15px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s
}

.dtkframebar__user__login__in__db {
    background: #f7f7f7;
    width: max-content;
    min-width: 200px;
    border-top: 2px solid #F63F2D;
    position: relative;
    z-index: 8;
    position: absolute;
    right: 0;
    top: 51px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    cursor: default;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    border-radius: 0 0 4px 4px;
    overflow: hidden
}

.dtkframebar__user__login__in__db.show {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-5px);
    -moz-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -o-transform: translateY(-5px)
}

.dtkframebar__user__login__in__db:before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 37px;
    border-bottom: 11px solid #F63F2D;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent
}

.dtkframebar__user__login__in__db ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.dtkframebar__user__login__in__db ul li {
    margin: 0;
    padding: 0
}

.dtkframebar__user__login__in__db ul li>a {
    padding: 10px 20px;
    display: block;
    color: #444;
    font: 14px "Montserrat",sans-serif
}

.dtkframebar__user__login__in__db ul li>a:hover {
    background: #eee
}

.dtkframebar__user__login__in__db ul li:last-child {
    border-top: 1px solid #E5E5E5
}

.dtkframebar__user__login__in__db .allobank__container {
    background: #fff;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.08));
    padding: 6px 0px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 33%;
    grid-auto-columns: calc(100% / 3);
    color: #6C6D6D;
    font-size: 10px;
    min-width: 340px
}

.dtkframebar__user__login__in__db .allobank__item {
    display: flex;
    flex-flow: column nowrap;
    gap: 2px;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid #DADADA;
    padding: 9px 15px
}

.dtkframebar__user__login__in__db .allobank__item:first-child {
    border-left: none
}

.dtkframebar__user__login__in__db .allobank__content {
    color: #3F3F3F;
    height: 20px;
    display: flex;
    align-items: center
}

.dtkframebar__user__login__in__db .allobank__cta {
    display: flex;
    flex-flow: column nowrap;
    gap: 4px;
    align-items: center
}

.dtkframebar__user__login__in__db .allobank__cta .allobank__title {
    color: #3F3F3F
}

.dtkframebar__user__login__in__db .allobank__cta,.dtkframebar__user__login__in__db .allobank__cta:hover,.dtkframebar__user__login__in__db .allobank__cta:active,.dtkframebar__user__login__in__db .allobank__cta:focus {
    color: #F38000;
    font-size: 10px;
    padding: 0;
    text-align: center
}

.dtkframebar__user__login__in__db .allobank__balance {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px
}

.dtkframebar__user__login__in__db .allobank__balance--number {
    background: url("data:image/svg+xml,%3Csvg width='6' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='2.5' r='2.5' fill='%23BDBDBD'/%3E%3C/svg%3E") center left space no-repeat;
    color: rgba(0,0,0,0)
}

.dtkframebar__user__login__in__db .allobank__input {
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 18px;
    color: #BDBDBD;
    width: 100%;
    background: none;
    cursor: default;
    pointer-events: none
}

.dtkframebar__user__login__in__db .allobank__input[type='text'] {
    color: #3F3F3F;
    font-size: 10px
}

.dtkframebar__user__login__in__db .allobank__eye {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 2.5 10 11M9.682 9.85a2.5 2.5 0 0 1-3.364-3.7' stroke='%234F4F4F' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.625 4.287C2.077 5.577 1 8 1 8s2 4.5 7 4.5a7.376 7.376 0 0 0 3.375-.788M13.038 10.57C14.401 9.348 15 8 15 8s-2-4.5-7-4.5c-.433 0-.865.035-1.292.105' stroke='%234F4F4F' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.47 5.544a2.502 2.502 0 0 1 2.02 2.22' stroke='%234F4F4F' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    overflow: hidden;
    text-indent: -99999px;
    border: 0;
    z-index: 1;
    cursor: pointer
}

.dtkframebar__user__login__in__db .allobank__toogle {
    display: none
}

.dtkframebar__user__login__in__db .allobank__toogle:checked ~ .allobank__balance--number {
    color: #3F3F3F;
    background: none
}

.dtkframebar__user__login__in__db .allobank__toogle:checked ~ .allobank__balance--number.alt {
    color: #F38000
}

.dtkframebar__user__login__in__db .allobank__toogle:checked ~ .allobank__eye {
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3.5C3 3.5 1 8 1 8s2 4.5 7 4.5S15 8 15 8s-2-4.5-7-4.5Z' stroke='%234F4F4F' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z' stroke='%234F4F4F' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    background-size: contain
}

.dtkframebar__user__login__in__db .allobank__notif {
    background: #DCF7EC;
    border-radius: 16px;
    padding: 13px 13px;
    font-size: 12px;
    line-height: 15px;
    color: #3F3F3F;
    font-weight: normal
}

.dtkframebar__user__login__in__db .allobank__notif__title {
    color: #0F0F0F;
    letter-spacing: 0.04em;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 5px
}

.dtkframebar__user__login__in__db .allobank__reload {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px;
    color: #F38000;
    cursor: pointer
}

.dtkframebar__user__login__in__db .allobank__reload label {
    font-size: 10px;
    cursor: pointer
}

.dtkframebar__user__login__in__db .allobank__reload .icon__reload {
    width: 12px;
    height: 12px;
    background-size: contain;
    overflow: hidden;
    text-indent: -99999px;
    border: 0;
    z-index: 1;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTk1Ni45LDEyNS41bC03MS43LDcxLjdjLTM5LjItNDkuOC04OC05MS45LTE0My4yLTEyMy4zQzY2OC42LDMyLjEsNTg0LjksMTAsNTAwLDEwYy02Ni4xLDAtMTMwLjMsMTMtMTkwLjgsMzguNWMtNTguNCwyNC43LTExMC44LDYwLTE1NS43LDEwNWMtNDUsNDUtODAuMyw5Ny40LTEwNSwxNTUuN0MyMywzNjkuNywxMCw0MzMuOSwxMCw1MDBjMCw2Ni4xLDEzLDEzMC4zLDM4LjUsMTkwLjhjMjQuNyw1OC40LDYwLDExMC44LDEwNSwxNTUuN2M0NSw0NSw5Ny40LDgwLjMsMTU1LjcsMTA1QzM2OS43LDk3Nyw0MzMuOSw5OTAsNTAwLDk5MGM4Ny42LDAsMTczLjYtMjMuNCwyNDguNy02Ny43YzcyLjgtNDMsMTMzLjYtMTA0LjQsMTc1LjktMTc3LjZjMTkuMy0zMy41LDcuOS03Ni4zLTI1LjYtOTUuNmMtMzMuNS0xOS4zLTc2LjMtNy45LTk1LjYsMjUuNmMtMzAuMiw1Mi40LTczLjcsOTYuMy0xMjUuOCwxMjdDNjI0LDgzMy4zLDU2Mi42LDg1MCw1MDAsODUwYy05My41LDAtMTgxLjQtMzYuNC0yNDcuNS0xMDIuNUMxODYuNCw2ODEuNCwxNTAsNTkzLjUsMTUwLDUwMGMwLTkzLjUsMzYuNC0xODEuNCwxMDIuNS0yNDcuNUMzMTguNiwxODYuNCw0MDYuNSwxNTAsNTAwLDE1MGM2MC43LDAsMTIwLjUsMTUuOCwxNzIuOCw0NS42YzQ0LjMsMjUuMiw4Mi45LDYwLjEsMTEyLjUsMTAxLjZsLTk5LjgsOTkuOGMtMTguMywxOC4zLTEyLjEsMzMuMSwxMy43LDMzLjFIOTU1YzE5LjQsMCwzNS0xNS43LDM1LTM1LjFWMTM5LjJDOTkwLDExMy40LDk3NS4yLDEwNy4zLDk1Ni45LDEyNS41eiIvPjwvZz4NCjwvc3ZnPg==");
    filter: invert(43%) sepia(79%) saturate(1124%) hue-rotate(8deg) brightness(104%) contrast(101%)
}

.dtkframebar__user__login:hover h4 {
    color: #F63F2D
}

.dtkframebar__user__login:hover .dtkframebar__caret-down:before {
    border-top: 5px solid #F63F2D
}

@media (min-width: 300px) and (max-width:640px) {
    .dtkframebar__user__login {
        padding:7px 0 8px 10px;
        position: inherit
    }

    .dtkframebar__user__login .dtkframebar__btn {
        font-size: 11px;
        padding: 7px 10px
    }

    .dtkframebar__user__login .dtkframebar__btn:last-child {
        margin-right: 10px
    }

    .dtkframebar__user__login .dtkframebar__btn:first-child {
        display: none
    }

    .dtkframebar__user__login__in h4 {
        display: none
    }

    .dtkframebar__user__login__in__db {
        width: 100%
    }
}

.dtkframebar__user__login__cookies {
    position: absolute;
    left: 0;
    top: 46px;
    text-align: left;
    cursor: default;
    display: block
}

.dtkframebar__user__login__cookies-wrapper {
    background: #f7f7f7;
    width: auto;
    border-top: 8px solid #F63F2D;
    position: relative;
    z-index: 8;
    padding: 20px
}

.dtkframebar__user__login__cookies-wrapper p {
    font: 300 15px "Montserrat",sans-serif;
    color: #444;
    text-align: center
}

.dtkframebar__user__login__cookies-wrapper a {
    color: #244B9C;
    display: block;
    text-decoration: underline;
    text-align: center
}

.dtkframebar__user__login__cookies-wrapper .dtkframebar__btn {
    display: block;
    margin: 20px 0 0;
    padding: 8px 0;
    text-decoration: none;
    font-size: 15px
}

.dtkframebar__user__login__cookies:after {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 7;
    top: 46px;
    left: 0
}

.dtkframebar__user__allo {
    width: 375px;
    min-height: 70px;
    max-height: 105px;
    background: #fff;
    padding: 0 8px!important
}

.ac_results {
    padding: 0px;
    border: 0px solid #ccc;
    overflow: hidden;
    background-color: #fff;
    z-index: 99999;
    width: 298px!important;
    font-family: helvetica,arial;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
    position: fixed!important
}

.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0
}

.ac_results iframe {
    display: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    filter: mask();
    width: 3000px;
    height: 3000px
}

.ac_results li {
    margin: 0px;
    padding: 8px 13px;
    cursor: pointer;
    display: block;
    width: 100%;
    font: menu;
    font-size: 14px;
    overflow: hidden;
    color: #525252;
    font-family: helvetica,arial
}

.ac_loading {
    background: #AFD2FD url("img/loader.gif") right center no-repeat
}

.ac_input {
    padding: 5px;
    border: 1px solid #ccc
}

.ac_over {
    background-color: #e6e6e6;
    color: black
}

#modal-coupon {
    overflow-y: hidden
}

#modal-coupon .modal-body {
    overflow-y: hidden
}

.btn--coupon-modal {
    background: #FFBC25;
    border-radius: 24px;
    color: #333333;
    font-weight: 600;
    font-size: 12px;
    min-width: 70%;
    border: 0;
    padding: 8px 16px;
    display: inline-block;
    cursor: pointer
}

.btn--coupon-modal:hover {
    color: inherit
}

#modal-background {
    display: none;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 25
}

#modal-allobank {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
    border-radius: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 316px;
    width: min-content;
    padding: 20px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #333;
    animation-name: animatemodal;
    animation-duration: 0.4s;
    font-family: 'Inter',sans-serif
}

.close-x {
    position: absolute;
    top: 19px;
    right: 19px;
    display: block;
    color: #afafaf;
    font-size: 27px;
    font-weight: normal;
    cursor: pointer;
    z-index: 2
}

@keyframes animatemodal {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 50%;
        opacity: 1
    }
}

.loader-content-allo {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 10px;
    overflow: hidden
}

.loader-content-allo div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 7px;
    background: #F38000;
    animation: loader-content-allo 1.2s cubic-bezier(0,0.5,0.5,1) infinite;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%
}

.loader-content-allo div:nth-child(1) {
    left: 10%;
    animation-delay: -0.30s
}

.loader-content-allo div:nth-child(2) {
    left: 30%;
    animation-delay: -0.24s
}

.loader-content-allo div:nth-child(3) {
    left: 49%;
    animation-delay: -0.18s
}

.loader-content-allo div:nth-child(4) {
    left: 67%;
    animation-delay: -0.10s
}

.loader-content-allo div:nth-child(5) {
    left: 86%;
    animation-delay: 0
}

@keyframes loader-content-allo {
    0% {
        top: 0;
        height: 10px
    }

    50%,100% {
        top: 5px;
        height: 3px
    }
}

.dropdown-search .dropdown {
    position: relative
}

.dropdown-search .dropdown:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer
}

.dropdown-search .dropdown-menu {
    top: -6px;
    padding: 0;
    background: #fff;
    width: 395px;
    visibility: visible!important;
    display: block;
    opacity: 0;
    pointer-events: none;
    -webkit-box-shadow: 0px 14px 20px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 14px 20px rgba(0,0,0,0.4);
    box-shadow: 0px 14px 20px rgba(0,0,0,0.4);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px
}

.dropdown-search .dropdown-menu a:hover {
    color: #123494
}

.dropdown-aktif.dropdown-search>.dropdown-menu {
    animation: dropdown-search 0.2s cubic-bezier(0.39,0.575,0.565,1) both;
    pointer-events: inherit
}

.js-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background: #000;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s
}

.search-active .js-overlay {
    opacity: 1;
    filter: alpha(opacity=100)
}

body.search-active {
    overflow: hidden
}

.search-form {
    position: relative;
    padding: 6px 8px
}

.search-form:before {
    content: "";
    position: absolute;
    bottom: -24px;
    right: 0;
    left: 0;
    height: 24px;
    z-index: 2;
    background: #fff;
    background: -moz-linear-gradient(bottom,#fff 0%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(bottom,#fff 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.search-form .icon-right {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 24px;
    height: 100%;
    max-height: 35px;
    z-index: 1;
    width: 50px;
    height: 100%;
    padding: 0 18px;
    display: flex;
    align-items: center
}

.search-content,.search-suggest {
    position: relative;
    padding-top: 16px;
    max-height: 612px;
    overflow-x: hidden!important;
    overflow-y: scroll!important
}

.search-section {
    margin-bottom: 36px
}

.search-section:last-child {
    margin-bottom: 18px
}

.search-section__title {
    margin: 0 18px 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-weight: 600
}

.search-section__list {
    margin: 0;
    padding: 0;
    font-size: 13px;
    list-style: none
}

.search-section__list li {
    position: relative;
    padding: 0
}

.search-section__list li a {
    display: block;
    border-top: 1px solid get("base-color.white.dark-2");
    padding: 4px 24px 4px 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 2
}

.search-section__list li a:hover {
    background: #f0f0f0
}

.search-section__list li .icon-right {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-height: 35px;
    z-index: 1;
    width: 50px;
    height: 100%;
    padding: 0 18px;
    display: flex;
    align-items: center
}

.search-section__grid {
    margin: 0 18px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.search-section__grid a {
    display: block;
    font-size: 13px;
    padding: 12px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background: #BDC7E3;
    background: -moz-linear-gradient(right,#bdc7e3 0%,#dfecf8 100%);
    background: -webkit-linear-gradient(right,#bdc7e3 0%,#dfecf8 100%);
    background: linear-gradient(to right,#bdc7e3 0%,#dfecf8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1);
    text-align: center
}

@keyframes dropdown-search {
    0% {
        margin-top: 0px;
        opacity: 0
    }

    100% {
        margin-top: 0px;
        opacity: 1
    }
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block
}

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

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

[hidden],template {
    display: none
}

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

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

body {
    margin: 0
}

a {
    background: transparent
}

a:focus {
    outline: thin dotted
}

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

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

b,strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

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

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

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

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

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

small {
    font-size: 80%
}

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

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

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

figure {
    margin: 0
}

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

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

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

button,input {
    line-height: normal
}

button,select {
    text-transform: none
}

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

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

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

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

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

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

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

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

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

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: 300;
    font-style: normal;
    src: local("Helvetica-FF, Arial, Tahoma, sans-serif"),url("../index/Helvetica-Light.eot");
    src: local("Helvetica-FF, Arial, Tahoma, sans-serif"),url("../index/Helvetica-Light.woff2") format("woff2"),url("../index/Helvetica-Light.woff") format("woff"),url("../index/Helvetica-Light.ttf") format("truetype"),url("../index/Helvetica-Light.eot?#iefix") format("embedded-opentype");
    font-display: swap;
    size-adjust:99.25%}

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

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

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

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

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

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

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

.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 {
    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%
}

input:focus,select:focus,textarea:focus,button:focus {
    outline: none
}

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

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

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

textarea {
    resize: none
}

textarea.form-element {
    height: auto
}

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

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

.form-check label {
    margin: 0
}

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

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

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

.form-inline {
    align-items: center
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
    background: -moz-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: -webkit-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: radial-gradient(ellipse at left bottom,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$top_color',endColorstr='$bottom_color',GradientType=1)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.copy_url {
    position: relative
}

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

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

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

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

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

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

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

.breaking-sticky .media__text {
    overflow: hidden
}

.breaking-sticky .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("../index/bg-detikpagi.webp") 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--sore {
    background: #17B8CA url("../index/bg-detiksore.webp") no-repeat top;
    background-size: 101%
}

.breaking-detikpagi--drooftalk {
    background: #020202 url("../index/bg-drooftalk.webp") no-repeat top;
    background-size: 101%
}

.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: 62px!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)
}

.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 {
    color: #fcc43f
}

.headline .media__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 {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0
}

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

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

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

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

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

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

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

.list-content__title>a {
    display: block
}

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

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

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

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

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

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

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

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

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

.media__image a {
    display: block
}

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

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

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

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

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

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

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

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

.media__author {
    position: relative;
    z-index: 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;
    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;
    background: -moz-linear-gradient(top,rgba(0,0,0,0.8) 0%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,rgba(0,0,0,0.8) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

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

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

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

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

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

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

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

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

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

.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("../index/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("../index/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
}

.pd-0 {
    padding: 0!important
}

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

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

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

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

.mg-0 {
    margin: 0!important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hide-element {
    display: none!important
}

.display-block {
    display: block!important
}

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

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

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

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

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

.pos-relative {
    position: relative!important
}

.pos-static {
    position: static!important
}

.overflow-visible {
    overflow: visible!important
}

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

.font-family-base,.font-family-base-2,.font-heading,.font-paragraph,.form-element,.pagination,.breaking-sticky .media__link,.breaking-sticky .media__label,.headline.headline--breakingnews .media__label,.list-content__title,.media__title,.media__subtitle,.box__title,.section__title,.navbar-second .nav a {
    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,.text__body,.footer__copy,.detail__date,.detail__caption,.static-body__text p,.static-body__box p,.sitemap-nav .nav li a {
    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,.detail__title,.sitemap-nav--title,.pemilu-countdown,.nav-haji,.nav-haji-right {
    font-weight: 600
}

.font-base-bold,.font-heading-bold,.megabillboard-close,.nav--bold .nav-item,.modal-body__title,.cb-today-recap__title,.cb-today-recap__date {
    font-weight: 700
}

.font-family-base,.font-paragraph,.footer .nav,.detail__date,.detail__caption {
    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,.media__author,.text-list,.ads-slot:before,.smartbanner_new,.box__title,.section__title,.box__header a,.box__title--sponsored-box,.page__title,.page__breadcrumb,.page__follow,.page__indeks-info,.page__share,.nav,.detail__body-tag .nav__item,.media__label--live,.text__body,.modal-body__title,.footer,.footer-title,.detail__title,.detail__author,.static-body,.sitemap-nav,.sitemap-nav .nav li a,.ebook__top,.ebook__bottom,.cb-detikpagi__right__text,.cb-detikpagi__right__button__text a,.cb-pemilu,.pemilu-countdown,.cb-hoegeng__desc,.cb-adhyaksa__desc,.cb-detikpilkada__desc,.cb-17an__desc,.cb-jabar-awards,.cb-today-recap,.cb-demi-indonesia-emas,.cb-kabar-haji,.nav-haji,.nav-haji-right {
    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,.pemilu-countdown__btn,.box__title--sponsored-box,.navbar-first,.footer__app-store {
    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 {
    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 {
    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,.icon-item {
    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,.pemilu-countdown__btn {
    align-items: center;
    justify-content: center
}

.box-utility-base,.box-utility-info,.box-utility-success,.box-utility-warning,.box-utility-error,.form-check--checkbox label:before,.form-check--checkbox label:after,.form-element,.notification-overlay,.copy_url .notif,.media__label,.media__icon,.media--image-radius .media__image,.box-background,.detail__body-tag .nav__item,.slick-slide-thumbnail .slick-slide,.cb-pemilu--small .cb-pemilu__desc,.pemilu-countdown,.cb-jabar-awards__desc {
    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,.nav__item--new a:after,.lds-ring div,.slick-dots li button,.cb-pemilu .slick-arrow,.pemilu-countdown__btn,.cb-hoegeng .slick-arrow,.cb-adhyaksa .slick-arrow,.cb-detikpilkada .slick-arrow,.cb-17an .slick-arrow,.cb-jabar-awards .slick-arrow,.cb-demi-indonesia-emas .slick-arrow,.cb-kabar-haji .article-slider .slick-arrow {
    border-radius: 50%
}

.color-black {
    color: #000000
}

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

.color-white,.breaking-sticky .media__text,.megabillboard__swipe p,.cb-d-awards .media__title a,.btn--pemilu,.pemilu-countdown__num-day,.cb-hoegeng,.cb-adhyaksa,.cb-detikpilkada,.cb-17an,.cb-jabar-awards__desc,.cb-kabar-haji__desc {
    color: #FFFFFF
}

.color-gray {
    color: #6D8591
}

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

.color-blue-base,.color-blue,.smartbanner_new .sb_close,.page__title,.static-body__text a,.notification-overlay,.cb-pemilu .slick-arrow,.pemilu-countdown__btn,.cb-today-recap__title,.cb-demi-indonesia-emas .slick-arrow {
    color: #21409A
}

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

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

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

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

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

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

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

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

.color-bg-white,.smartbanner_new,.cb-pilkada .box__header,.cb-pemilu .slick-arrow,.cb-hoegeng .slick-arrow,.cb-adhyaksa .slick-arrow,.cb-detikpilkada .slick-arrow,.cb-17an .slick-arrow,.cb-jabar-awards .slick-arrow,.cb-demi-indonesia-emas .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,.cb-covid-19 .box__title:before {
    background: #ef672f
}

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

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

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

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

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

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

.box,.section,.detail__media {
    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 {
    font-size: 18px;
    color: #21409A
}

.box {
    margin-bottom: 24px
}

.box__header a {
    padding: 0
}

.cb-pilkada .box__header {
    margin-top: 0;
    padding: 16px 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px
}

.cb-covid-19 .box__title {
    position: relative
}

.cb-covid-19 .box__title:before {
    position: absolute;
    content: "";
    width: 120px;
    height: 2px;
    z-index: 2;
    bottom: -8px
}

.cb-pilkada .box__title {
    margin-bottom: 0
}

.box__title--sponsored {
    width: 100%
}

.box__title--sponsored-text {
    max-width: 200px
}

.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__title--sponsored-box-pilkada {
    width: 209px
}

.box__logo {
    max-width: 200px;
    max-height: 45px;
    display: block
}

.box-background {
    padding: 16px;
    background: #e3f5fe
}

.section {
    margin-bottom: 16px
}

.page__header {
    margin-top: 12px
}

.page__title {
    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: ""
}

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

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

.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-shadow .navbar--scroll .nav__item:first-child {
    padding-left: 16px
}

.navbar-shadow .navbar--scroll .nav__item:last-child {
    padding-right: 16px
}

.navbar-first .nav__item:last-child a {
    padding-right: 0
}

.navbar-first .nav__item,.navbar-second .nav__item {
    white-space: nowrap
}

.navbar-second .nav__item {
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px
}

.nav__item--green a {
    color: #000
}

.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: #21409A
}

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

.footer .nav {
    margin: 24px 0
}

.navbar--scroll .nav {
    padding-top: 4px;
    padding-bottom: 4px
}

.navbar-first .nav {
    height: 45px
}

.navbar-first .nav,.navbar-second .nav {
    overflow-x: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: nowrap
}

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

.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: scroll!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;
    background: -moz-linear-gradient(right,white 25%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(right,white 25%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,white 25%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1);
    position: absolute
}

.navbar-shadow:after {
    content: "";
    width: 24px;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    background: #fff;
    background: -moz-linear-gradient(left,white 25%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,white 25%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to left,white 25%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1);
    position: absolute
}

.back-top {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 8px;
    bottom: 60px;
    background: #cccccc;
    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__item:last-child {
    margin-bottom: 0
}

.list-content--column .list-content__item:last-child {
    margin-bottom: 12px
}

.terpopuler .list-content__item {
    padding-bottom: 4px;
    margin-bottom: 4px
}

.list-content__title {
    font-size: 16px
}

.list-content>div.widget-nhl:first-child {
    margin-top: -8px
}

.livereport-content .media {
    overflow: visible;
    flex: auto
}

.detail__media .media__image img {
    width: 100%;
    max-width: none
}

.livereport-content .media__image {
    margin-left: 12px;
    margin-right: 12px
}

.media__title {
    font-size: 16px
}

.list-content--equal-height .media__title {
    margin-bottom: 24px
}

.list-content--column .media__title {
    font-size: 14px
}

.terpopuler .media__title {
    font-size: 14px
}

.cb-d-awards .media__title a:hover {
    color: #C2BB3C
}

.media__subtitle {
    color: var(--kuler-3);
    font-size: 14px
}

.media__subtitle a {
    color: var(--kuler-3)
}

.list-content--equal-height .media__date {
    bottom: 0
}

.cb-mostpop .media__date {
    margin-left: 37px
}

.media__label {
    padding: 5px 12px;
    font-size: 14px
}

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

.headline .media--text-overlay .media__text {
    background: #21409A;
    background: -moz-linear-gradient(top,#21409a 65%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,#21409a 65%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to top,#21409a 65%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-mostpop .text-list {
    align-items: normal
}

.text-list__data--red {
    color: #FF0000
}

.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: #EE4023
}

.text__body {
    color: #666666;
    font-size: 14px
}

.btn--blue-base {
    background: #21409A;
    color: #FFFFFF
}

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

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

.btn--blue-base.btn--link {
    color: #21409A
}

.btn--blue-light-1 {
    background: #2c5498;
    color: #FFFFFF
}

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

.btn--blue-light-1.btn--outline {
    border-color: #2c5498;
    color: #2c5498
}

.btn--blue-light-1.btn--link {
    color: #2c5498
}

.btn--blue-light-2 {
    background: #007cbd;
    color: #FFFFFF
}

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

.btn--blue-light-2.btn--outline {
    border-color: #007cbd;
    color: #007cbd
}

.btn--blue-light-2.btn--link {
    color: #007cbd
}

.btn--blue-light-3 {
    background: #3ea6dd;
    color: #FFFFFF
}

.btn--blue-light-3:hover {
    color: #FFFFFF
}

.btn--blue-light-3.btn--outline {
    border-color: #3ea6dd;
    color: #3ea6dd
}

.btn--blue-light-3.btn--link {
    color: #3ea6dd
}

.btn--blue-light-4 {
    background: #84c6e9;
    color: #FFFFFF
}

.btn--blue-light-4:hover {
    color: #FFFFFF
}

.btn--blue-light-4.btn--outline {
    border-color: #84c6e9;
    color: #84c6e9
}

.btn--blue-light-4.btn--link {
    color: #84c6e9
}

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

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

.btn--blue-light-5.btn--outline {
    border-color: #e3f5fe;
    color: #e3f5fe
}

.btn--blue-light-5.btn--link {
    color: #e3f5fe
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn--utility-base.btn--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--default-next {
    color: var(--kuler-3)
}

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

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

.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;
    background: #21409A;
    background: -moz-linear-gradient(135deg,#21409a 50%,#007cbd 100%);
    background: -webkit-linear-gradient(135deg,#21409a 50%,#007cbd 100%);
    background: linear-gradient(135deg,#21409a 50%,#007cbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1);
    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
    }
}

.detail__header {
    text-align: center;
    padding: 16px 0
}

.detail__title {
    font-size: 23px;
    color: #21409A;
    margin-bottom: 12px
}

.detail__date {
    display: inline-block;
    margin-top: 4px;
    color: #666666;
    font-size: 12px
}

.detail__caption {
    display: inline-block;
    margin-top: 4px;
    color: #666666;
    font-size: 12px
}

.detail__author {
    margin-top: 8px;
    font-size: 12px;
    color: #FF0000
}

.detail__media {
    padding: 0
}

.detail__media img {
    width: 100%;
    max-width: none;
    position: relative;
    z-index: 2
}

.detail__body {
    margin-top: 16px
}

.detail__body a {
    color: #21409A
}

.detail__body h1 {
    font-size: 23px
}

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

.detail__share {
    text-align: center
}

.icon-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 5px 2px;
    width: 28px;
    height: 28px;
    font-size: 20px;
    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;
    background: -moz-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: -webkit-radial-gradient(left bottom,ellipse cover,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    background: radial-gradient(ellipse at left bottom,#ffdc80 15%,#e1306c 55%,#5851db 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$top_color',endColorstr='$bottom_color',GradientType=1)
}

.icon-item__in {
    background: #0077B5
}

.icon-item__yt {
    background: #FF0000
}

.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__wa {
    background: #25D366
}

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

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

.breaking-sticky .media__text,.headline {
    background: #21409A;
    background: -moz-linear-gradient(135deg,#21409a 50%,#007cbd 100%);
    background: -webkit-linear-gradient(135deg,#21409a 50%,#007cbd 100%);
    background: linear-gradient(135deg,#21409a 50%,#007cbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-commented__color-data {
    color: #ef672f
}

.color-orange-light-2 {
    color: #f7931d
}

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

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

.static-body__form--disable {
    opacity: 0.4
}

.sitemap-nav {
    color: #666666;
    font-size: 14px;
    margin-bottom: 16px
}

.sitemap-nav--title {
    color: #21409A;
    margin-bottom: 16px;
    display: block
}

.sitemap-nav .nav {
    display: flex;
    flex-wrap: wrap;
    flex-flow: wrap;
    overflow-x: hidden
}

.sitemap-nav .nav li {
    display: flex;
    flex-basis: 100%
}

.sitemap-nav .nav li a {
    color: #666666;
    font-size: 14px
}

@keyframes live {
    0% {
        background: #fcc43f
    }

    50% {
        background: #FF0000
    }

    100% {
        background: #fcc43f
    }
}

.footer_banner {
    z-index: 12!important
}

.notification-overlay {
    width: 300px;
    position: fixed;
    top: 146px;
    left: 50%;
    z-index: 12;
    padding: 12px 16px;
    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: 2px;
    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
}

.ebook__top {
    position: relative;
    height: 380px
}

.ebook__top__img {
    width: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.ebook__top__content {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 43px 18px
}

.ebook__top__content__left {
    width: 100%
}

.ebook__top__content__left__logo {
    margin-bottom: 25px
}

.ebook__top__content__left__title {
    font-style: normal;
    font-weight: 700;
    font-size: 23px;
    line-height: 32px;
    color: #21409A;
    margin-bottom: 28px
}

.ebook__top__content__left__desc {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    margin-bottom: 24px
}

.ebook__top__content__left__button {
    background: #FCB715;
    border-radius: 4px;
    width: 189px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center
}

.ebook__top__content__left__button__text {
    color: #21409A;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding-right: 8px
}

.ebook__top__content__right {
    width: 50%
}

.ebook__bottom {
    width: 100%
}

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

.ebook__bottom__content__left {
    margin-right: 26px
}

.ebook__bottom__content__left img {
    border-radius: 4px
}

.ebook__bottom__content__right {
    align-self: center
}

.ebook__bottom__content__right__title {
    color: #000000;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 6px
}

.ebook__bottom__content__right__year {
    color: #666666;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 16px
}

.ebook__bottom__content__right__desc {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.04em;
    color: #000000;
    margin-bottom: 24px
}

.ebook__bottom__content__right__bottom {
    display: flex
}

.ebook__bottom__content__right__bottom__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 103px;
    height: 25px;
    background: #21409A;
    border-radius: 4px;
    margin-right: 6px
}

.ebook__bottom__content__right__bottom__button__img img {
    margin-right: 9px;
    width: 11px;
    height: 12px
}

.ebook__bottom__content__right__bottom__button__text {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    padding-top: 3px
}

.ebook__bottom__content__right__bottom__share {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 25px;
    border-radius: 4px;
    border: 1px solid #21409A
}

.ebook__bottom__content__right__bottom__share__img img {
    margin-right: 9px;
    width: 11px;
    height: 12px
}

.ebook__bottom__content__right__bottom__share__text {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    padding-top: 3px
}

.cb-covid-19 {
    margin-bottom: -2px;
    z-index: 2;
    border-bottom: 2px solid #21409A;
    border-color: #21409A
}

.cb-pilkada {
    margin-bottom: -2px;
    z-index: 2;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    border-top: 2px solid #21409A;
    background: #f0f3f4
}

.cb-vaksin .box__logo {
    max-width: 100%;
    max-height: inherit;
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.cb-vaksin .box__header {
    position: relative;
    margin-bottom: 8px;
    margin-left: -18px;
    margin-right: -18px
}

.cb-vaksin .box__header a {
    padding: 4px 8px
}

.cb-vaksin .box__header .btn {
    position: absolute;
    right: 10px;
    bottom: 24px;
    background-color: #FF7C00;
    color: #fff
}

.cb-kadokeluarga .media {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 12px
}

.cb-kadokeluarga .media__image {
    margin-right: 12px
}

.cb-kadokeluarga .media__title {
    font-size: 14px
}

.cb-kadokeluarga .list-content__item {
    padding-bottom: 8px;
    margin-bottom: 12px
}

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

.btn--pemilu {
    background: #C72026;
    background: -moz-linear-gradient(127deg,#c72026 40%,#ef672f 100%);
    background: -webkit-linear-gradient(127deg,#c72026 40%,#ef672f 100%);
    background: linear-gradient(127deg,#c72026 40%,#ef672f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-pemilu {
    position: relative;
    margin-top: 24px!important;
    margin-bottom: 36px!important
}

.cb-pemilu--big {
    padding: 16px;
    border-radius: 8px;
    background: #f7f7f7;
    background: -moz-linear-gradient(100deg,#f7f7f7 50%,#f0f0f0 100%);
    background: -webkit-linear-gradient(100deg,#f7f7f7 50%,#f0f0f0 100%);
    background: linear-gradient(100deg,#f7f7f7 50%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-pemilu--small {
    padding: 12px;
    max-height: 475px;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
    background: -moz-linear-gradient(-100deg,#f0f0f0 50%,#f7f7f7 100%);
    background: -webkit-linear-gradient(-100deg,#f0f0f0 50%,#f7f7f7 100%);
    background: linear-gradient(-100deg,#f0f0f0 50%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1)
}

.cb-pemilu--small .bg-flag {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 120px;
    background: url("../index/flag-pemilu-small.png") no-repeat
}

.cb-pemilu__desc {
    background: #fff;
    background: rgba(255,255,255,0.95)
}

.cb-pemilu .slick-dots li button {
    border: none;
    width: 12px;
    height: 12px;
    background: #f0a7b8
}

.cb-pemilu .slick-dots li.slick-active button {
    background: #C72026
}

.cb-pemilu .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65)
}

.cb-pemilu .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-pemilu .slick-prev,.cb-pemilu .slick-next {
    margin: 0 16px
}

.cb-pemilu .slick-prev:before,.cb-pemilu .slick-next:before {
    font-size: 24px
}

.cb-pemilu--big .cb-pemilu__logo {
    width: 130px;
    height: auto
}

.cb-pemilu--small .cb-pemilu__logo {
    width: 94px;
    height: auto
}

.cb-pemilu--small .cb-pemilu__desc {
    padding: 12px;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.btn--pemilu {
    padding-left: 16px;
    padding-right: 16px
}

.btn--pemilu:hover {
    color: white!important
}

.pemilu-countdown {
    border: 1px solid #f0f0f0;
    background: #f7f7f7;
    padding: 6px 8px;
    margin-left: calc(-26px / 4.3333333333);
    margin-right: calc(-26px / 4.3333333333)
}

.pemilu-countdown__logo {
    height: auto;
    width: 54px;
    margin-right: 8px
}

.pemilu-countdown__num {
    color: #2c5498;
    margin-right: 16px
}

.pemilu-countdown__num-day {
    padding: 2px 4px;
    border-radius: 2px;
    background: #21409A;
    background: -moz-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: -webkit-linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    background: linear-gradient(100deg,#21409a 50%,#007cbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start_color',endColorstr='$end_color',GradientType=1);
    font-size: 14px
}

.pemilu-countdown__num-text {
    font-size: 14px
}

.pemilu-countdown__num-title {
    font-size: 8px
}

.pemilu-countdown__desc {
    font-size: 12px;
    font-weight: 400
}

.pemilu-countdown__btn {
    background: #e0e5e8;
    width: 20px;
    height: 20px;
    margin-left: 8px
}

.pemilu-countdown__btn:hover {
    color: #C72026
}

.pemilu-countdown__btn .icon {
    font-size: 14px
}

.btn--yellow-base {
    background: #FCB715;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base.btn--link {
    color: #FCB715
}

.btn--yellow-light-1 {
    background: #fcc43f;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1.btn--link {
    color: #fcc43f
}

.btn--yellow-light-2 {
    background: #fcd373;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2.btn--link {
    color: #fcd373
}

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

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

.btn--yellow-light-3.btn--link {
    color: #fde3a5
}

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

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

.btn--yellow-light-4.btn--link {
    color: #fdefcd
}

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

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

.btn--yellow-light-5.btn--link {
    color: #fef7e8
}

.cb-hoegeng {
    padding: 12px;
    background-image: url("../index/bg-hoegeng.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border-radius: 8px;
    margin-bottom: 36px!important
}

.cb-hoegeng__logo {
    width: 180px;
    height: auto;
    margin-bottom: 4px
}

.cb-hoegeng__desc {
    position: relative;
    padding-bottom: 12px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-hoegeng__desc:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #FCB715
}

.cb-hoegeng .media__subtitle {
    color: #FCB715
}

.cb-hoegeng .media__title a {
    color: #FFFFFF
}

.cb-hoegeng .media__title a:hover {
    color: #FCB715
}

.cb-hoegeng .slick-dots li button {
    border: none;
    width: 12px;
    height: 12px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #fef7e8
}

.cb-hoegeng .slick-dots li.slick-active button {
    background: #FCB715
}

.cb-hoegeng .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #232323
}

.cb-hoegeng .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-hoegeng .slick-prev,.cb-hoegeng .slick-next {
    margin: 0 16px
}

.cb-hoegeng .slick-prev:before,.cb-hoegeng .slick-next:before {
    font-size: 24px
}

.btn--yellow-base {
    background: #FCB715;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-base.btn--link {
    color: #FCB715
}

.btn--yellow-light-1 {
    background: #fcc43f;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-1.btn--link {
    color: #fcc43f
}

.btn--yellow-light-2 {
    background: #fcd373;
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2:hover {
    color: rgba(0,0,0,0.75)
}

.btn--yellow-light-2.btn--link {
    color: #fcd373
}

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

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

.btn--yellow-light-3.btn--link {
    color: #fde3a5
}

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

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

.btn--yellow-light-4.btn--link {
    color: #fdefcd
}

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

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

.btn--yellow-light-5.btn--link {
    color: #fef7e8
}

.cb-adhyaksa {
    padding: 12px;
    background-image: url("../index/bg-adhyaksa.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border-radius: 8px;
    margin-bottom: 36px!important
}

.cb-adhyaksa__logo {
    width: 200px;
    height: auto;
    margin-bottom: 4px;
    margin-top: -8px
}

.cb-adhyaksa__desc {
    position: relative;
    padding-bottom: 12px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-adhyaksa__desc:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: #fcc43f
}

.cb-adhyaksa .media__subtitle {
    color: #fcc43f
}

.cb-adhyaksa .media__title a {
    color: #FFFFFF
}

.cb-adhyaksa .media__title a:hover {
    color: #fcc43f
}

.cb-adhyaksa .slick-dots li button {
    border: none;
    width: 12px;
    height: 12px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #999999
}

.cb-adhyaksa .slick-dots li.slick-active button {
    background: #fcc43f
}

.cb-adhyaksa .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #232323
}

.cb-adhyaksa .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-adhyaksa .slick-prev,.cb-adhyaksa .slick-next {
    margin: 0 16px
}

.cb-adhyaksa .slick-prev:before,.cb-adhyaksa .slick-next:before {
    font-size: 24px
}

.btn--red-base {
    background: #C72026;
    color: #FFFFFF
}

.btn--red-base:hover {
    color: #FFFFFF
}

.btn--red-base.btn--link {
    color: #C72026
}

.btn--red-light-1 {
    background: #ed131b;
    color: #FFFFFF
}

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

.btn--red-light-1.btn--link {
    color: #ed131b
}

.btn--red-light-2 {
    background: #FF0000;
    color: #FFFFFF
}

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

.btn--red-light-2.btn--link {
    color: #FF0000
}

.btn--red-light-3 {
    background: #ff5c5c;
    color: #FFFFFF
}

.btn--red-light-3:hover {
    color: #FFFFFF
}

.btn--red-light-3.btn--link {
    color: #ff5c5c
}

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

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

.btn--red-light-4.btn--link {
    color: #ffa6a6
}

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

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

.btn--red-light-5.btn--link {
    color: #ffd6d6
}

.cb-detikpilkada {
    padding: 12px;
    background-color: #F5F5F5;
    background-image: url("../index/bg-cb-detikpilkada.webp");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 177px 41px;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border-radius: 8px;
    margin-bottom: 36px!important
}

.cb-detikpilkada__logo {
    width: 144px;
    height: auto;
    margin-bottom: 4px;
    margin-top: -8px
}

.cb-detikpilkada__desc {
    color: #000000;
    background-color: white;
    position: relative;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-detikpilkada .media__subtitle {
    color: #2c5498
}

.cb-detikpilkada .media__title a {
    color: #000000
}

.cb-detikpilkada .media__title a:hover {
    color: #2c5498
}

.cb-detikpilkada .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #999999
}

.cb-detikpilkada .slick-dots li.slick-active button {
    background: #ed131b
}

.cb-detikpilkada .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    background-color: rgba(0,0,0,0.5);
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #FFFFFF
}

.cb-detikpilkada .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-detikpilkada .slick-prev,.cb-detikpilkada .slick-next {
    margin: 0 16px
}

.cb-detikpilkada .slick-prev:before,.cb-detikpilkada .slick-next:before {
    font-size: 24px
}

.btn-detikhot-color {
    background: #c72026;
    background: -moz-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: -webkit-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c72026",endColorstr="#ef672f",GradientType=1);
    color: white;
    min-width: 80px;
    padding: calc(12px / 3) 10px
}

.btn-detikhot-color span {
    transition: transform 0.3s ease
}

.btn-detikhot-color span:hover {
    transform: scale(1.05)
}

.btn-detikhot-color:hover {
    background: #d50e15;
    background: -moz-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: -webkit-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d50e15",endColorstr="#f2591a",GradientType=1);
    color: white;
    min-width: 80px;
    padding: calc(12px / 3) 10px;
    opacity: 1
}

.btn--red-base {
    background: #C72026;
    color: #FFFFFF
}

.btn--red-base:hover {
    color: #FFFFFF
}

.btn--red-base.btn--link {
    color: #C72026
}

.btn--red-light-1 {
    background: #ed131b;
    color: #FFFFFF
}

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

.btn--red-light-1.btn--link {
    color: #ed131b
}

.btn--red-light-2 {
    background: #FF0000;
    color: #FFFFFF
}

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

.btn--red-light-2.btn--link {
    color: #FF0000
}

.btn--red-light-3 {
    background: #ff5c5c;
    color: #FFFFFF
}

.btn--red-light-3:hover {
    color: #FFFFFF
}

.btn--red-light-3.btn--link {
    color: #ff5c5c
}

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

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

.btn--red-light-4.btn--link {
    color: #ffa6a6
}

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

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

.btn--red-light-5.btn--link {
    color: #ffd6d6
}

.cb-17an {
    padding: 12px;
    background-color: white;
    background-image: url("../index/bg-17an.webp");
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    max-height: 500px;
    margin-top: 24px!important;
    border: solid 1px #D8D8D8;
    border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 36px!important
}

.cb-17an .slick-dotted.slick-slider {
    padding-bottom: 10px!important
}

.cb-17an__logo {
    width: 144px;
    height: auto;
    margin-bottom: 4px;
    margin-top: -8px
}

.cb-17an__desc {
    color: #C72026;
    background-color: #E0E5E8;
    background-image: url("../index/bg-cta-17an.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cb-17an .media__subtitle {
    color: #ef672f
}

.cb-17an .media__title a {
    color: #000000
}

.cb-17an .media__title a:hover {
    color: #ef672f
}

.cb-17an .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #2c5498
}

.cb-17an .slick-dots li.slick-active button {
    background: #ed131b;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-17an .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    background-color: rgba(0,0,0,0.5);
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #FFFFFF
}

.cb-17an .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-17an .slick-prev,.cb-17an .slick-next {
    margin: 0 16px
}

.cb-17an .slick-prev:before,.cb-17an .slick-next:before {
    font-size: 24px
}

.btn-detikhot-color {
    background: #c72026;
    background: -moz-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: -webkit-linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    background: linear-gradient(137deg,#c72026 0%,#cd222c 48%,#ef672f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c72026",endColorstr="#ef672f",GradientType=1);
    color: white;
    min-width: 100px;
    padding: calc(12px / 3) 10px
}

.btn-detikhot-color span {
    transition: transform 0.3s ease
}

.btn-detikhot-color span:hover {
    transform: scale(1.05)
}

.btn-detikhot-color:hover {
    background: #d50e15;
    background: -moz-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: -webkit-linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    background: linear-gradient(137deg,#d50e15 0%,#cf121d 48%,#f2591a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d50e15",endColorstr="#f2591a",GradientType=1);
    color: white;
    min-width: 100px;
    padding: calc(12px / 3) 10px;
    opacity: 1
}

.cb-jabar-awards {
    position: relative;
    margin-top: 24px!important;
    padding: 12px;
    overflow: hidden;
    background: url("../index/bg-detikjabar-awards.webp");
    background-size: 100% 100%;
    border-radius: 8px;
    background-repeat: no-repeat;
    max-height: 475px;
    margin-bottom: 36px!important
}

.cb-jabar-awards__desc {
    margin-top: 90px;
    padding: 8px 12px;
    text-align: center;
    background: rgba(199,118,2,0.7);
    font-size: 12px
}

.cb-jabar-awards__logo {
    width: 175px;
    height: auto
}

@media only screen and (max-width: 325px) {
    .cb-jabar-awards__logo {
        width:143px
    }
}

.cb-jabar-awards .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    background-color: #975900;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-jabar-awards .slick-dots li.slick-active button {
    background-color: #fcd373
}

.cb-jabar-awards .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65);
    color: #000
}

.cb-jabar-awards .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-jabar-awards .slick-prev,.cb-jabar-awards .slick-next {
    margin: 0 16px
}

.cb-jabar-awards .slick-prev:before,.cb-jabar-awards .slick-next:before {
    font-size: 24px
}

.cb-jabar-awards .jabar-awards-slider {
    line-height: normal!important;
    margin-bottom: -10px
}

.cb-jabar-awards .jabar-awards-slider a.media__link {
    color: #fff
}

.cb-jabar-awards .jabar-awards-slider a.media__link:hover {
    color: #ffe48e
}

.cb-jabar-awards .media__subtitle {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: #fcc43f
}

.btn--jabar-awards {
    background-color: #ef672f;
    color: #fff
}

.btn--jabar-awards:hover {
    color: #df0a0a;
    opacity: 1;
    background: linear-gradient(268deg,#fff0a1 8.59%,#fffbe7 36.55%,#fcf4d8 55.53%,#e3a444 95.35%)
}

.cb-today-recap {
    padding: 16px;
    margin-top: 8px;
    background: url("../index/today-recap.webp") no-repeat center;
    background-size: cover;
    margin-bottom: 8px
}

.cb-today-recap__title {
    margin: 0;
    font-size: 23px
}

.cb-today-recap__date {
    margin-bottom: 4px;
    font-size: 18px;
    color: #f7931d
}

.cb-demi-indonesia-emas {
    position: relative;
    margin-top: 24px!important;
    padding: 16px 12px;
    overflow: hidden;
    background: url("../index/bg-demi-indonesia-emas.webp");
    background-size: 100% 100%;
    border-radius: 8px;
    max-height: 475px;
    margin-bottom: 36px!important
}

.cb-demi-indonesia-emas .desc-emas {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    line-height: 16px
}

.cb-demi-indonesia-emas__logo {
    width: 164px;
    height: auto
}

@media only screen and (max-width: 325px) {
    .cb-demi-indonesia-emas__logo {
        width:143px
    }
}

.cb-demi-indonesia-emas .slick-dots li button {
    border: none;
    width: 7px;
    height: 7px;
    background: #f1f0d6;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-demi-indonesia-emas .slick-dots li.slick-active button {
    background: #ef672f
}

.cb-demi-indonesia-emas .slick-arrow {
    top: 40px;
    width: 34px;
    height: 34px;
    opacity: 0.65;
    filter: alpha(opacity=65)
}

.cb-demi-indonesia-emas .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-demi-indonesia-emas .slick-prev,.cb-demi-indonesia-emas .slick-next {
    margin: 0 16px
}

.cb-demi-indonesia-emas .slick-prev:before,.cb-demi-indonesia-emas .slick-next:before {
    font-size: 24px
}

.cb-demi-indonesia-emas .indonesia-emas-slider {
    background-color: rgba(0,0,0,0.4);
    margin-bottom: -10px
}

.cb-demi-indonesia-emas .indonesia-emas-slider a.media__link {
    color: #fff
}

.cb-demi-indonesia-emas .indonesia-emas-slider a.media__link:hover {
    color: #ffe48e
}

.cb-demi-indonesia-emas .slick-dotted.slick-slider {
    padding-bottom: 5px!important
}

.cb-demi-indonesia-emas .media__subtitle {
    color: #fcc43f!important
}

.cb-demi-indonesia-emas .media__link {
    color: #fff!important
}

.btn-juara-eropa {
    border-radius: 4px;
    background: linear-gradient(85deg,#f4953d 1.82%,#ffe48e 49.98%,#ffd129 98.13%);
    color: #000
}

.cb-kabar-haji {
    position: relative;
    margin-top: 24px!important;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 36px!important
}

.cb-kabar-haji__header {
    position: relative
}

.cb-kabar-haji__header img {
    background-size: contain;
    width: 100%;
    height: 112px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative
}

.cb-kabar-haji__desc {
    font-size: 11px
}

.cb-kabar-haji__logo {
    width: 130px;
    height: 61px
}

.cb-kabar-haji .article-slider .slick-dots {
    bottom: 7%;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 6%
}

.cb-kabar-haji .kabar-haji-slider .slick-dots {
    bottom: 7%;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 6%
}

.cb-kabar-haji .slick-dots li {
    width: 5px;
    height: 5px
}

.cb-kabar-haji .slick-dots li button {
    border: none;
    width: 5px;
    height: 5px;
    background-color: #7EBFA7;
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-kabar-haji .slick-dots li.slick-active button {
    background: #295243
}

.cb-kabar-haji .article-slider {
    padding: 0 12px 24px 12px
}

.cb-kabar-haji .article-slider .slick-arrow {
    top: 17%;
    width: 34px;
    height: 34px;
    opacity: 0.45;
    filter: alpha(opacity=45);
    background-color: #136559;
    top: 22%;
    color: #fff
}

.cb-kabar-haji .article-slider .slick-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cb-kabar-haji .slick-prev,.cb-kabar-haji .slick-next {
    margin: 0 16px
}

.cb-kabar-haji .slick-prev:before,.cb-kabar-haji .slick-next:before {
    font-size: 24px
}

.cb-kabar-haji .slick-prev {
    left: 0;
    left: 2%
}

.cb-kabar-haji .slick-next {
    right: 0;
    right: 2%
}

.cb-kabar-haji .kabar-haji-slider a.media__link {
    color: #fff
}

.cb-kabar-haji .kabar-haji-slider a.media__link:hover {
    color: #ffe48e
}

.cb-kabar-haji .kabar-haji-slider .media__subtitle a {
    text-decoration: none;
    color: #F7931D
}

.cb-kabar-haji .media__link {
    color: #000!important;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.btn--kabar-haji {
    padding: 1px 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 7px;
    border-radius: 4px;
    background: #f8fcfc;
    background: -moz-linear-gradient(130deg,#f8fcfc 0%,#d5e3cb 50%,#a4c090 100%);
    background: -webkit-linear-gradient(130deg,#f8fcfc 0%,#d5e3cb 50%,#a4c090 100%);
    background: linear-gradient(130deg,#f8fcfc 0%,#d5e3cb 50%,#a4c090 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8fcfc",endColorstr="#a4c090",GradientType=1);
    color: #295243
}

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

.nav-haji {
    font-size: 14px
}

.nav-haji__icon {
    width: 55px;
    height: 55px;
    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: 55px;
    height: 55px
}

.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 {
    margin: 0
}

.nav-haji--column .column {
    display: inline-block
}

.nav-haji--column .column a {
    display: inline-block;
    text-align: center;
    width: 100%;
    color: #295243
}

.nav-haji--column .column a:hover {
    color: #174735
}

.nav-haji--column .nav-haji__icon {
    margin: 0 auto
}

.plr-12 {
    margin: 12px
}

.bg-w {
    background: #F7F7F7
}

.p-14 {
    padding-top: 14px;
    padding-bottom: 14px
}

.ph-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin-left: -6px;
    margin-right: -6px;
    overflow: hidden;
    direction: ltr
}

.ph-item,.ph-item *,.ph-item ::after,.ph-item ::before {
    box-sizing: border-box
}

.ph-item::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    background: linear-gradient(to right,rgba(255,255,255,0) 46%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 54%) 50% 50%;
    animation: phAnimation 0.8s linear infinite;
    content: " ";
    pointer-events: none
}

.widget-nhl .ph-item::before {
    background: linear-gradient(to right,rgba(240,240,240,0) 46%,rgba(240,240,240,0.35) 50%,rgba(240,240,240,0) 54%) 50% 50%
}

.ph-item>* {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    padding-right: 6px;
    padding-left: 6px
}

.ph-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: -16px
}

.ph-row div {
    height: 18px;
    margin-top: 16px;
    background-color: #f7f7f7;
    border-radius: 8px
}

.ph-row .big,.ph-row.big div {
    height: 35px
}

.ph-row .mid,.ph-row.mid div {
    height: 30px
}

.ph-row .empty {
    background-color: rgba(255,255,255,0)
}

.ph-col-1 {
    flex: 0 0 8.33333%
}

.ph-col-2 {
    flex: 0 0 16.66667%
}

.ph-col-3 {
    flex: 0 0 25%
}

.ph-col-4 {
    flex: 0 0 33.33333%
}

.ph-col-5 {
    flex: 0 0 41.66667%
}

.ph-col-6 {
    flex: 0 0 50%
}

.ph-col-7 {
    flex: 0 0 58.33333%
}

.ph-col-8 {
    flex: 0 0 66.66667%
}

.ph-col-9 {
    flex: 0 0 75%
}

.ph-col-10 {
    flex: 0 0 83.33333%
}

.ph-col-11 {
    flex: 0 0 91.66667%
}

.ph-col-12 {
    flex: 0 0 100%
}

[class*="ph-col"] {
    direction: ltr
}

[class*="ph-col"]>* + .ph-row {
    margin-top: 0
}

[class*="ph-col"]>* + * {
    margin-top: 16px
}

.ph-avatar {
    position: relative;
    width: 100%;
    min-width: 60px;
    overflow: hidden;
    background-color: #f7f7f7;
    border-radius: 50%
}

.ph-avatar::before {
    display: block;
    padding-top: 100%;
    content: " "
}

.ph-picture {
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 8px
}

@keyframes phAnimation {
    0% {
        transform: translate3d(-30%,0,0)
    }

    100% {
        transform: translate3d(30%,0,0)
    }
}

.ratiobox__ph-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.ph-nhl-img {
    flex: 0 0 32%
}

.headline .ph-item {
    margin-bottom: 0;
    background-color: #fff
}

.headline .ph-item>* {
    margin-bottom: 0
}

.ph-item--cb-img {
    margin-left: -18px;
    margin-right: -18px;
    flex: 1
}

.ph-item.terpopuler {
    height: 185px
}

.ph-full-img .ph-row {
    margin-top: 0;
    height: 102px
}

.ph-item--column .ph-row {
    margin-bottom: 24px
}

.box__header .ph-row {
    flex: 1;
    margin-bottom: 16px
}

.ph-full-img .ph-picture {
    flex: 1
}

.ph-picture.pic-nhl {
    width: 100px
}

.ph-picture.pic-nhl--small {
    width: 50px
}

.ph-picture--box {
    height: 122px;
    margin-bottom: 16px
}

.ph-item--cb-img .ph-picture {
    height: 85px;
    border-radius: 0;
    margin-bottom: 8px
}

.cb-detikevent {
    background: #f0f0f0;
    border-radius: 8px;
    max-width: 694px;
    width: 100%;
    padding: 20px 0;
    margin: 0;
    font-family: "Montserrat",Arial,Tahoma,sans-serif;
    box-sizing: border-box;
    text-rendering: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    container-type: inline-size
}

.cb-detikevent :where(*) {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.cb-detikevent .swiper-button-prev,.cb-detikevent .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 40px;
    --swiper-navigation-sides-offset: 0px;
    --swiper-navigation-top-offset: 80px;
    background-color: rgba(0,0,0,0.3);
    width: 40px
}

.cb-detikevent .swiper-button-prev:after,.cb-detikevent .swiper-button-next:after {
    font-size: 25px
}

.cb-detikevent.placeholder {
    --cbdtkevent-title: #fce7cc;
    --cbdtkevent-subtitle: #fff;
    --cbdtkevent-subtitle-size: 14px;
    --cbdtkevent-more: #fff;
    --cbdtkevent-more-text-hover: #21409a;
    padding-bottom: 0px;
    border-radius: 24px;
    gap: 12px;
    background: #21409a
}

.cb-detikevent__image-placeholder {
    width: 100%;
    aspect-ratio: var(--cbdtkevent-placeholder-ratio,16/9);
    display: block;
    position: relative
}

@media screen and (min-width: 768px) {
    .cb-detikevent__image-placeholder {
        aspect-ratio:var(--cbdtkevent-placeholder-ratio,3/1)
    }
}

.cb-detikevent__image-placeholder>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    object-position: top
}

.cb-detikevent__logo {
    width: auto;
    height: 22px
}

.placeholder .cb-detikevent__logo {
    filter: brightness(0) invert(1)
}

.cb-detikevent__header {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-inline:20px;gap: 10px
}

@container (min-width:640px) {
    .cb-detikevent__header {
        gap: 8px;
        flex-direction: row;
        justify-content: space-between
    }
}

.cb-detikevent__name {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px
}

.cb-detikevent__title {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    color: var(--cbdtkevent-title,#ee4023)
}

.cb-detikevent__subtitle {
    font-size: var(--cbdtkevent-subtitle-size,12px);
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    color: var(--cbdtkevent-subtitle,#21409a)
}

.cb-detikevent__more {
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    display: none;
    align-items: center;
    border: 1px solid var(--cbdtkevent-more,#21409a);
    padding: 4px 16px;
    gap: 10px;
    color: var(--cbdtkevent-more,#21409a);
    border-radius: 9999px;
    transition: all 0.3s ease
}

@media (min-width: 768px) {
    .cb-detikevent__more {
        display:inline-flex
    }

    .cb-detikevent__more:hover {
        background-color: var(--cbdtkevent-more,#21409a);
        color: var(--cbdtkevent-more-text-hover,#fff)
    }
}

.cb-detikevent__more--mobile {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 16px;
    margin-inline:16px;display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border-radius: 2px;
    text-decoration: none;
    color: var(--cbdtkevent-more,#21409a);
    border: 1px solid var(--cbdtkevent-more,#21409a)
}

@media (min-width: 768px) {
    .cb-detikevent__more--mobile {
        display:none
    }
}

.cb-detikevent__content {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.cb-detikevent__content.swiper {
    width: 100%
}

.cb-detikevent__content:has(>.cb-detikevent__item:is(:nth-child(2n),:nth-child(1n))) {
    padding-inline:16px;display: flex
}

@media screen and (min-width: 480px) {
    .cb-detikevent__content:has(.cb-detikevent__item:first-child:nth-last-child(3)) {
        padding-inline:16px
    }
}

.cb-detikevent__content:has(>.cb-detikevent__item:nth-child(2n)) .cb-detikevent__item {
    flex: 1
}

.cb-detikevent__item {
    display: flex;
    container-type: inline-size;
    container-name: cb-item
}

.cb-detikevent__item.swiper-slide {
    height: auto
}

.cb-detikevent__info {
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column
}

@container cb-item (min-width:384px) {
    .cb-detikevent__info {
        flex-direction: row;
        padding: 10px;
        gap: 16px
    }
}

.cb-detikevent__infoimage {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: top
}

@container cb-item (min-width:384px) {
    .cb-detikevent__infoimage {
        width: 50%;
        border-radius: 6px;
        aspect-ratio: 2.3/1
    }
}

.cb-detikevent__infotext {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%
}

@container cb-item (min-width:384px) {
    .cb-detikevent__infotext {
        padding: 0;
        width: 100%
    }
}

.cb-detikevent__infotitle {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #21409a;
    text-wrap: pretty;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.cb-detikevent__infodate {
    font-size: 12px;
    font-style: normal;
    line-height: 17px;
    color: #666;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-wrap: pretty
}

.cb-detikevent__infodate svg {
    flex-shrink: 0;
    margin-top: 1px
}

.cb-detikevent__infodate--date {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.cb-detikevent__infoprice {
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}
.fa-solid {
	font-size: 20px;
}
.cb-detikevent__infourl {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.48px;
    text-decoration: none;
    padding: 8px 16px;
    background-color: var(--cbdtkevent-btn,#21409a);
    color: #fff;
    border-radius: 6px;
    text-align: center;
    margin-top: auto;
    display: block;
    border: 1px solid var(--cbdtkevent-btn,#21409a);
    transition: all 0.3s ease
}

@media (min-width: 768px) {
    .cb-detikevent__infourl:hover {
        background-color:#fff;
        color: var(--cbdtkevent-btn,#21409a)
    }
}