/* CSS khusus untuk Job Schedule */
.table thead > tr > th {
    font-size: 13px;
}

/************************************************************************************************************/
/* CSS untuk tampilan DataTables modus card view */
/* Ref.: https://codepen.io/RedJokingInn/pen/bGoppqP/ */
/* Dipakai oleh: master/item_barang2/
/************************************************************************************************************/
.table-bordered.card {
    border: 0 !important;
}

.card thead {
    display: none;
}

/* tambahan sendiri agar memungkinkan semua item anak yang menggunakan class ".card tbody tr" sama tinggi, 
   yaitu dengan menjadikan elemen ".card tbody" sebagai container flexbox
   Ref: https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns
*/
.card tbody {
    display: flex; /* !important; */
    flex-wrap: wrap;
    /* flex-direction: column; !important; */
    align-content: stretch; /* !important; */
}

.card tbody tr {
    float: left;
    width: 25em;
    margin: 0.5em;
    border: 1px solid #bfbfbf;
    border-radius: 0.5em;
    background-color: transparent !important;
    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.card tbody tr td {
    display: block;
    border: 0;
    width: 100%; /* tambahan sendiri agar panjang dari setiap td di dalam card mengambil panjang penuh, karena jika tidak 
        maka setiap td memiliki panjang yang berbeda-beda */
}

/* tambahan sendiri agar prompt dari setiap cell dicetak tebal */
.card .colHeader { 
    font-weight: 600;
 }

/************************************************************************************************************
CSS untuk tampilan preview multiple image yang di-open dari input type=file
************************************************************************************************************/
/* Dipakai oleh: master/pelanggan/pelanggan_tambah.php */
.imageCardList {
    display: flex; 
    flex-flow: row wrap; 
    align-items: flex-start; 
    justify-content: flex-start;
}

/* Dipakai oleh: */
.imageCard {
    display: flex; 
    align-items: center;
}

.previewImageContainer {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 210px; 
    height: 210px; 
    padding: 5px;
}

.previewImageThumbnail {
    width: auto; 
    max-width: 200px !important;
    height: auto !important;
    max-height: 200px;
}

.previewImageActionContainer {
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center; 
    width: 200px; 
    padding: 5px;
}

@media only screen and (max-width: 767px) { /* extra small devices: phones */
    /* .previewImageContainer {
        width: 160px; 
    }
    .previewImageThumbnail {
        max-width: 150px !important;
        max-height: 150px;
    } */
    .previewImageActionContainer {
        width: 125px; 
    }
  }

/************************************************************************************************************
CSS untuk form
************************************************************************************************************/
@media only screen and (max-width: 767px) { /* extra small devices: phones */
    .emptyPrompt {
        display: none;
    }
}

@media only screen and (max-width: 767px) { /* extra small devices: phones */
    .noPaddingLeftXs {
        padding-left: 0 !important;
    }    
    .noPaddingRightXs {
        padding-right: 0 !important;
    }
}

/************************************************************************************************************
SweetAlert2 font
************************************************************************************************************/
.swal2-popup {
    font-size: 1.2rem !important;
}