body { background-color: #F3F4F6; }
.bg-body { background-color: #F3F4F6ce; }
.footer{
    /* margin-top: 36px; */
    border-style: solid;
    border-width: 7px 0px 0px 0px;
    border-color: #FFE500;
    background-color: transparent;
    background-image: linear-gradient(247deg, #0851B9 0%, #2788FD 100%);
    min-height: 220px;
    /* margin-left: -20px; */
    position : relative;
    width: 100%;
}
.footer-background-overlay{
    background-image: url(../img/global-maps.webp);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.06;
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.footer-content{
    margin-right: auto;
    margin-left: auto;
    position: relative;
    max-width: 1140px;
    min-height: 220px;
    align-items: center;
    justify-content: space-between;
}
.footer-img-content{
    display: flex;
    align-items: center;
}
.footer-ut-content{
    min-width:33%;
    padding: 6px;
    display: flex;
    flex-direction: column;
    color:white;
}
.footer-ut-content.ml-12{
    margin-left: 14%;
}
.footer-ut-content p {
    margin-top: 14px;
}
.footer-hallo-ut{
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 8px 0;
    position: relative;
    flex-wrap: wrap;
    width: fit-content;
    width: -moz-fit-content;
}
.footer-hallo-ut i{
    font-size: 20px;
    margin: 0 9px;
}
.overlay-link{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
}
.social{
    padding: 7px 0px 4px 0;
    background-image: linear-gradient(120deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 10%,rgba(25,25,55,0.21) 51%,rgba(25,25,25,0.04)),
                    radial-gradient(circle, rgba(255,155,185,0.31) 4%, rgba(227,217,194,0.21) 14%, rgba(250,212,255,0.31) 50%); 
    /* background-color: rgb(50 40 40 / 90%); */
    background-color: rgba(38, 29, 162, 0.9);
    position: relative;
    margin: 4px;
    border:1px solid rgba(181, 218, 182, 0.84);
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    width: 44px;    
    text-align: center;
}
.social-icon{
    vertical-align: baseline;
    font-size: 15px;
}
.social:hover{
    box-shadow: 0px 1px 3px -6px rgba(15, 11, 58, 0.763), 1px 2px 3px -2px rgba(0, 0, 0, 0.14), -1px 3px 3px -2px rgba(0, 0, 0, 0.12), 0 0 3px #062245a7;
    /* background-image: linear-gradient(360deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 10%,rgba(70, 23, 124, 0.21) 51%,rgba(250,250,250,0.04));  */
    background-image: linear-gradient(360deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 10%,rgba(70, 23, 124, 0.21) 51%,rgba(227,217,196,0.14)); 
    background-color: rgb(20 30 110 / 90%);
}
.help{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.help_icon{
    padding: 6px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    border:1px solid #2788FD;
    background-image: linear-gradient(-144deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 1%,rgba(255,255,255,0.3) 69%,rgba(8, 81, 185, 0.4) 100%);
    background-color: #2788FD;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.help_icon:hover{
    border-color: #2788FDb8;
    background-color: #2788FDce;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
    background-image: linear-gradient(44deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 1%,rgba(255,255,255,0.03) 4%,rgba(218, 181, 185, 0.04) 100%);
    cursor:pointer;
    color:#c8ffa0;
}
.help.view > .help_icon, .help.view > .help.icon:hover {
    background-image: none;
    background-color: white;
    border-color: #0851B9;
    border-radius: 8px 8px 0 0;
    cursor: default;
    color:#021025;    
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
}
.help_preview{
    display:none;
    position: absolute;
    padding: 5px 14px;
    flex-direction: column;
    border: 1px solid #0851B9;
    width: 220px;
    min-height: 100px;
    top: 100%;
    background-color: white;
    z-index: 4;
    border-radius: 5px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
    background-image: linear-gradient(44deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 1%,rgba(255,255,255,0.73) 4%,rgba(218, 181, 185, 0.04) 100%);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.help_preview::before {
    position: absolute;
    content: '';
    background-color: white;
    left: calc(50% - 13px);
    top: -6px;
    width: 26px;
    z-index: 7;
    height: 10px;
    border-radius: 5px;
}
.help.view .help_preview {
    display: flex;
    align-items: flex-end;
}
.font-hdr{
    font-weight: 600;
    font-size: 17px;
    border-bottom: 2px solid #00265e;
    color: #00265e;
    width: 100%;
}
.help_preview .help_label{
    position: absolute;
    left: 13px;
    padding: 2px 8px;
    border: 1px solid;
    background-color: #3791fd;
    height: 29px;
    color: white;
    margin: 6px 0;
    border-radius: 6px;
}
.help_preview .cls_btn{
    text-align: center;
    color: darkred;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: 10px 2px 15px 0;
}

.font-hdr {
    font-weight: 600;
    border-bottom: 2px solid #00265e;
    color: #00265e;
    width: 100%;
}
.text-justify {
    text-align: justify;
}
.text-noto {
    font-family: "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-style: normal;
}
/* Hilangkan semua komponen DataTables */
.dt-layout-row:first-child,
.dt-layout-row:last-child{
    display:none !important;
}

/* Table */
#tblKPI{
    border-collapse: collapse !important;
}

table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer{
    display:block !important;
}
table.dataTable thead>tr>th div.dt-column-header span.dt-column-title, table.dataTable thead>tr>th div.dt-column-footer span.dt-column-title, table.dataTable thead>tr>td div.dt-column-header span.dt-column-title, table.dataTable thead>tr>td div.dt-column-footer span.dt-column-title, table.dataTable tfoot>tr>th div.dt-column-header span.dt-column-title, table.dataTable tfoot>tr>th div.dt-column-footer span.dt-column-title, table.dataTable tfoot>tr>td div.dt-column-header span.dt-column-title, table.dataTable tfoot>tr>td div.dt-column-footer span.dt-column-title{
    margin-right: 2px;
}

/* karena @apply tidak bekerja di browser gunakan CSS biasa */

#tblKPI thead th{
    position: sticky;
    top: 0;
    z-index: 20;
    background: #0056A4;
    color:#fff;
    font-weight:600;
    padding:12px;
    border-bottom:2px solid #334155;
}

#tblKPI tbody td{
    padding:10px 12px;
    border-bottom:1px solid #FDBA12;
}

#tblKPI tbody tr:nth-child(even){
    background:#f8fafc;
}

#tblKPI tbody tr:hover{
    background:#eff6ff;
}

#tblKPI td.dt-type-numeric{
    text-align:right;
}

.dataTables_wrapper{
    width:100%;
}

table.dataTable{
    border:none !important;
}

table.dataTable th,
table.dataTable td{
    border:none !important;
}

div.dt-container div.dt-layout-row{
    margin: 0 !important;
    padding: 0 !important;
}

.rank-1{
    height:11rem;
    z-index:20;
}

.rank-2{
    height:9.8rem;
}
.rank-3{
    height:9.5rem;
}

.rank-4{
    height:8.7rem;
} 
.rank-5{
    height:8.5rem;
}

/* .rank-1{
    background:linear-gradient(180deg,#FFE78A 0%,#FFC938 100%);
}

.rank-2{
    background:linear-gradient(180deg,#ECECEC,#BFC4CB);
}

.rank-3{
    background:linear-gradient(180deg,#F4C28E,#D88941);
}

.rank-4{
    background:linear-gradient(180deg,#93C5FD,#2563EB);
}

.rank-5{
    background:linear-gradient(180deg,#22D3EE,#0284C7);
} */

.rank-1, .rank-2, .rank-3, .rank-4, .rank-5{
    /* background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.13), hsla(0, 0%, 100%, 0) 10%, rgba(252, 249, 251, 0.36) 11%, white); */
    background-image: linear-gradient(180deg,hsla(0,0%,100%,0.13),hsla(0,0%,100%,0) 10%,rgba(255,255,255,0.84) 21%,rgba(250,250,250,0.21));
}

.rank-card:hover .rank-number, .rank-card:hover .rank-label{
    filter:brightness(1.2);
    box-shadow:0 0 15px white;
}

.rank-card{
    transition:.35s;
    cursor:pointer;
    border-width: 1px 1px 0 1px;
    border-color: #e5e7eb;
    position: relative;
}

.rank-card:hover .rank-angka{
    display: flex;
    flex-direction: column;
}

.rank-card:hover{
    transform: translateY(-30px) scale(1.05);
    box-shadow: 0 35px 60px rgba(0,0,0,.25);
    z-index:30;
    height:12rem;
}

.rank-number{
    position: absolute;
    width: 58px;
    height: 58px;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translateX(-50%);
    top: -50px;
    /* border-radius: 9999px; */
    border-width: 6px;
    border: 6px solid #e5e7eb;
    border-width: 6px 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 48px; */
    font-weight: bold;
    color: white;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}
.rank-label{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem;
}
.rank-angka{
    position: absolute;
    bottom: 60px;
    display:none;
}
.rank-info{
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid #e5e7ebeb;
    border-width: 1px 0;
}
.err_flashbg{
    animation: flashing 1500ms ease-in normal 2;
}
.err_flash{
    animation: flashing-text 1500ms ease-in normal 2;
}
.err_info:before{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7px 10px 7px;
    border-color: transparent transparent #475569 transparent;
    content: "";
    top: -11px;
    left: 14px;
    position: absolute;
}
@keyframes flashing{
    0%{
      opacity: 0.8;
      background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.13), hsla(0, 0%, 100%, 0) 10%, rgba(250, 250, 250, 0.11) 21%, rgba(255, 255, 255, 0.14));
      background-color: #fcfeff;
      color: #b5bbc3;
     }
    15%{
      opacity: 0.5;
      background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.13), hsla(0, 0%, 100%, 0) 10%, rgba(250, 250, 250, 0.11) 21%, rgba(255, 255, 255, 0.14));
      background-color: #e2e7eb;
      color: #7e8896;
     }
    30%{
      opacity: 0.8;
      background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.13), hsla(0, 0%, 100%, 0) 10%, rgba(250, 250, 250, 0.11) 21%, rgba(255, 255, 255, 0.14));
      background-color: #f6fbff;
      color: #a3aab4;
    }
    50% { 
      opacity: 0.5; 
      background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.13), hsla(0, 0%, 100%, 0) 10%, rgba(250, 250, 250, 0.11) 21%, rgba(255, 255, 255, 0.14));
      background-color: white;
      color: #505e71;
    } 
    70% {
      opacity: 0.8;
      background-color: #f2f7fa;
      color: #7e8896;
    }
    85% {
      opacity: 0.8;
      background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.13), hsla(0, 0%, 100%, 0) 10%, rgba(250, 250, 250, 0.11) 21%, rgba(255, 255, 255, 0.14));
      background-color: #f5f5ff;
      color: #636e80;   
    }
    100% {
      opacity: 0.9;
      background-color: white;
      color: #475569;    
    }
}
@keyframes flashing-text{
0%{
    opacity: 1;
    -webkit-text-fill-color: unset;
    -webkit-text-stroke-width: unset;
    -webkit-text-stroke-color: unset;
    }
20%{
    opacity: 0.8;
    -webkit-text-stroke-width: 2;
    -webkit-text-stroke-color: #0004ff;
    border-color: yellow;
    }
40%{
    opacity: 0.5;
    -webkit-text-stroke-width: 3;
    -webkit-text-stroke-color: honeydew;
    border-color: honeydew;
}
60% { 
    opacity: 0.8; 
    -webkit-text-stroke-width: 3;
    -webkit-text-stroke-color: #0004ff;
    border-color: #0004ff;
} 
80% {
    opacity: 0.91;
    -webkit-text-stroke-width: 3;
    -webkit-text-stroke-color: yellow;
    border-color: yellow;
}
100% {
    opacity: 1;
    -webkit-text-stroke-width: 3;
    -webkit-text-stroke-color: #0004ff;
    border-color: yellow;
}
}
@media(max-width:480px) {
    .font-header{
        font-size: 24px;
    }
    .help_preview{
        right: -44px;
    }
    .help_preview::before{
        left: calc(100% - 70px);
    }
    .body-img-container{
        display: none;
    }
}