.table td{
    white-space: inherit !important;
}

.grid-view .filters > td{
    padding:5px;
}
.grid-view .filters > td > input, .grid-view .filters > td > select{
    width: 100%;
    padding: 3px;
    font-size: 11px;
    opacity: 0.5;
}
.grid-view span.empty{
    font-style: italic;
    color: red;
}
.grid-view .summary{
    float: right;
    padding-right: 10px;
    font-size: 11px;
}

table.detail-view tr>th, table.detail-view tr>td{
    padding: 5px !important;
}
table.detail-view tr>th{
    text-align: right;
    width: 40%;
    font-weight: 600;
}
span.null{
    color: pink;
    font-style: italic;
}

.text-black{
    color: black;
}

.datetimepicker-days, .datetimepicker-months, .datetimepicker-hours, .datetimepicker-minutes{
    font-size: 13px;
}
.datetimepicker-days .switch, .datetimepicker-days .day, .datetimepicker-days .today,
.datetimepicker-months .switch, .datetimepicker-months .month, .datetimepicker-months .today,
.datetimepicker-hours .switch, .datetimepicker-hours .hour, .datetimepicker-hours .today,
.datetimepicker-minutes .switch, .datetimepicker-minutes .minute, .datetimepicker-minutes .today,

.datepicker-days .datepicker-switch, .datepicker-days .day, .datepicker-days .today,
.datepicker-months .datepicker-switch, .datepicker-months .month, .datepicker-months .today,
.datepicker-years .datepicker-switch, .datepicker-years .year, .datepicker-years .focused,
.datepicker-days .prev, .datepicker-days .next,
.datepicker-months .prev, .datepicker-months .next,
.datepicker-years .prev, .datepicker-years .next{
    text-align: center;
}
.datetimepicker-days .prev > span, .datetimepicker-days .next > span,
.datetimepicker-months .prev > span, .datetimepicker-months .next > span,
.datetimepicker-hours .prev > span, .datetimepicker-hours .next > span,
.datetimepicker-minutes .prev > span, .datetimepicker-minutes .next > span{
    background-color: #04c;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.no-margin{
    margin:0 !important;
}
.no-padding{
    padding: 0 !important;
}

.nav-sm .nav-link {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Ringkasan galat form.
 *
 * CActiveForm::errorSummary() memberi kelas .errorSummary — konvensi Yii 1.x,
 * bukan kelas Bootstrap, sehingga tanpa aturan sendiri ia tidak tergaya sama
 * sekali. Gayanya sebenarnya sudah ada, tapi HANYA di login.css yang dimuat
 * layouts/login.php. Akibatnya di 33 view lain yang memakai errorSummary
 * kotaknya tampil polos — paragraf dan bullet tanpa bingkai maupun warna —
 * sehingga peringatan tidak terbaca sebagai peringatan.
 *
 * Nilainya sengaja disamakan dengan login.css supaya komponen yang sama
 * terlihat sama di seluruh aplikasi. Aturan di login.css dibiarkan apa adanya:
 * layout login tidak memuat berkas ini, dan mengubah muatannya berisiko pada
 * halaman yang justru paling tidak boleh rusak. */
.errorSummary {
    background: #fb6340;
    color: #fff;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 80%;
    margin-bottom: 10px;
}
.errorSummary p {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.errorSummary ul {
    margin-bottom: 0;
    padding-left: 20px;
}
.errorSummary a {
    color: #fff;
    text-decoration: underline;
}

/* Di dalam alert, ringkasan galat TIDAK menggambar kotaknya sendiri.
 *
 * Enam form modal memakai pola Notification::getAlert(CHtml::errorSummary(...),
 * 'danger') — errorSummary dibungkus lagi oleh alert Argon yang sudah punya
 * latar, ikon, dan tombol tutup. Selama .errorSummary belum bergaya, susunan
 * itu tampak wajar; begitu ia diberi latar sendiri, hasilnya dua kotak
 * bertumpuk untuk satu pesan. Wadahnya diserahkan ke alert, isinya ke sini. */
.alert .errorSummary {
    background: transparent;
    color: inherit;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
    font-size: inherit;
}
.alert .errorSummary a {
    color: inherit;
}

/* Menu samping halaman Pengaturan disamakan dengan menu kiri.
 *
 * Keduanya menu navigasi setingkat, tapi ukurannya berbeda 14%: menu kiri
 * memakai .navbar-vertical .nav-link (.875rem), sementara .list-group-item
 * bawaan Bootstrap tidak menyetel font-size sama sekali sehingga mewarisi
 * body (1rem). Menu kanan jadi tampak lebih berat daripada menu utama.
 *
 * Disaring lewat .list-group-nav, bukan .list-group polos — daftar
 * notifikasi di layouts/main/top.php memakai .list-group juga dan
 * ukurannya memang tidak boleh ikut berubah. */
.list-group-nav .list-group-item {
    font-size: .875rem;
    padding: .75rem 1rem;
}
.list-group-nav .list-group-item i {
    font-size: .9375rem;   /* sama dengan ikon .navbar-vertical .nav-link > i */
}
.navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item > .nav-link.active{
    background: #efefef;
}

/* Aturan .pagination .selected > .page-link DIHAPUS dari sini.
 *
 * CLinkPager merender <li class="selected"><a>, tanpa kelas .page-link — itu
 * kelas Bootstrap yang tidak pernah muncul di markup Yii. Jadi aturan itu tidak
 * pernah cocok dengan apa pun sejak ditulis, dan membiarkannya hanya menyesatkan
 * siapa pun yang mengira paginasi sudah diatur di sini. Gaya paginasi yang
 * benar-benar berlaku ada di main.css. */


/* Blocks Mobile Screen Size buttons
   .btn-xs-block
   .btn-sm-block
   .btn-md-block
   .btn-lg-block
*/
@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }

    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block+.btn-xs-block,
    .btn-xs-block+.btn-block,
    .btn-xs-block+.btn-xs-block {
        margin-top: 0.5rem;
    }
    .page-link{
        padding: 0.4rem 0.36rem;
        font-size: 11px;
    }
    .grid-view .card-footer{
        padding-right: 0 !important;
    }
    .table-responsive > .table{
        min-width: 1000px;
    }
    
}

@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block+.btn-sm-block,
    .btn-sm-block+.btn-block,
    .btn-sm-block+.btn-sm-block {
        margin-top: 0.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block+.btn-md-block,
    .btn-md-block+.btn-block,
    .btn-md-block+.btn-md-block {
        margin-top: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block+.btn-lg-block,
    .btn-lg-block+.btn-block,
    .btn-lg-block+.btn-lg-block {
        margin-top: 0.5rem;
    }
}