/*========================================
a01. Navigation
==========================================*/

.langsung_ke_konten {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.mt-neg {
    margin-top: -3px;
}

/* Remove the Follow text between these screen settings */
@media (min-width:768px) and (max-width:912px) {
    .follow {
        display:none;
    }
    .konfirmasi {
        width: 140px;
        overflow: hidden;
    }
    .konfirmasi a::after{
        content: "";
        background: linear-gradient(to right, transparent, #ffffff 99%);
        display: block;
        height: calc(2em* 1.5 + 0px);
        position: absolute;
        inset-block-end: 0;
        pointer-events: none;
        width: 79%;
    }
}​

/*========================================
a02. Konfirmasi Pembayaran
==========================================*/

.form-select-not-full-width {
    width:fit-content;
}

.input-group > .tanggalnya {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

/*========================================
a03. Domain Pricing Table
==========================================*/

.wrapper {
    margin-top: 5vh;
}
  
.dataTables_filter {
    float: right;
}
  
.table-hover > tbody > tr:hover {
    background-color: #ccffff;
}
  
@media only screen and (min-width: 768px) {
    .table {
        table-layout: fixed;
        max-width: 100% !important;
    }
}
  
thead {
    background: #ddd;
}
  
.table td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
}
  
.highlight {
    background: #ffff99;
}
  
@media only screen and (max-width: 767px) {
    /* Table berubah menjadi kolom */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
  
    thead tr,
    tfoot tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
  
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
    }
  
    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
  
    .table td:nth-child(1) {
        background: #ccc;
        height: 100%;
        top: 0;
        left: 0;
        font-weight: bold;
    }
  
    /*
    Label datasetnya
    */
    td:nth-of-type(1):before {
        content: "Daftar Baru";
    }
  
    td:nth-of-type(2):before {
        content: "Perpanjangan";
    }
  
    td:nth-of-type(3):before {
        content: "Transfer";
    }
  
    #hargaDomain>tbody>tr>td:nth-of-type(1):before {
        content: "Ekstensi";
    }

    #hargaDomain>tbody>tr>td:nth-of-type(2):before {
        content: "Daftar Baru";
    }
  
    #hargaDomain>tbody>tr>td:nth-of-type(3):before {
        content: "Perpanjangan";
    }

    #hargaDomain>tbody>tr>td:nth-of-type(4):before {
        content: "Transfer";
    }

    #jasaDesain>tbody>tr>td:nth-of-type(1):before {
        content: "SiteJet 01";
        top: 50%;
        transform: translateY(-50%);
    }

    #jasaDesain>tbody>tr>td:nth-of-type(2):before {
        content: "SiteJet 02";
        top: 50%;
        transform: translateY(-50%);
    }
  
    .dataTables_length {
        display: none;
    }
} 

.dataTables_wrapper .dataTables_paginate {
    padding-bottom: 0.25em;
}

.w-34 {
    width: 34%;
}

.w-22 {
    width: 22%;
}

.w-100 {
    width: 100%;
}

/*========================================
a04. Tooltip
==========================================*/
.dotted {
    border-bottom: 2px dotted #0d6efd;
    text-decoration: none;
}

.tooltip-inner small span{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(245deg) brightness(109%) contrast(101%);
}

/*========================================
a05. SVGs
==========================================*/
.questionMark {
    margin-top: 2px;
}

/*========================================
a06. Meta
==========================================*/
.meta_top li {
    display: inline-block;
    padding: 0 10px 0 0;
    margin-top: -20px;
}

.meta_top li::before {
    content: '\2022';
    font-size: 2em;
    top: 5px;
    position: relative;
    padding: 0 5px 0 0;
}

/*========================================
a07. Timer
==========================================*/

.timer {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding:10px 0 10px 0;
    width: 200px;
}

/*========================================
a0z. Screen adjustment
==========================================*/

@media screen and (max-width: 280px) {
    .navbar-brand img {
        width: 180px;
    }
}

@media screen and (max-width: 640px) {
    .dataTables_filter {
        margin-bottom: 0.5em;
    }
}

@media screen and (max-width: 429px) {
    .copyright {
        display: none;
    }
}

.maxw-100 {
    max-width: 100px;
}

@media screen and (max-width: 540px) {
    .meta_past_time {
        width: 35px;
    }
}


/*========================================
a0z2. Colors and Styling
==========================================*/

.mangkuk-red {
    color: #cc3434
}

.mangkuk-red-stabilo {
    color: #ffffff;
    background-color: #cc3434;
}

.fw-500 {
    font-weight: 500 !important;
}

/*
 +-+-+-+-+-+ +-+-+ +-+-+-+-+-+-+-+-+-+-+
 |M|a|n|g|k|u|k|v4| |b|y| |M|a|n|g|M|e|r|
 +-+-+-+-+-+ +-+-+ +-+-+-+-+-+-+-+-+-+-+
*/