.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* #dashboard {

} */

#dashboard h1 {
    font-size: 4rem;
}

/* body {
    height: 100vh !important;
    background-image: url("../img/TimeSheetAppsBg.png");
    background-size: cover;
} */

#time_sheet {
    /* background-image: url("../img/TimeSheetAppsBg.png");
    background-size: cover; */

    /* margin: 2rem 2rem 2rem 2rem; */
}

.background_ts {
    /* background-image: url("../img/TimeSheetAppsBg.png"); */
    /* background-size: cover; */
}

#info_tab {
    background-color: rgba(0, 0, 0, 0.568);
    border-radius: 10px;
    height: 100%;
    /* margin: 2rem 2rem 2rem 2rem; */
}

.card-custom {
    position: relative;
    padding: 3rem;
}

.card-custom h3 {
    position: absolute;
    top: 50%;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 576px) {
    .card-group.card-group-scroll {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

.card-group.card-group-scroll > .card {
    flex-basis: 50%;
}

.mask-custom {
    backdrop-filter: blur(7px);
    background-color: rgba(0, 0, 0, 0.45);
}

#menu_dashboard .card {
    padding: 3rem;
    border: none;
}

#menu_dashboard {
    /* height: 10rem; */
    background-image: linear-gradient(
        173deg,
        rgb(89, 33, 33) 36%,
        rgba(74, 74, 84, 1) 100%
    );
    border: none;
}

.card-group,
.card-group-scroll {
    border: none;
}

#fleet_setup {
    background-image: url("../img/fleet_bg.jpg");
    background-size: cover;
    padding: 2rem;
    height: 100vh;
}

/* .mask1 {
    -webkit-mask-image: linear-gradient(173deg, rgba(0,0,0,1) 36%, rgba(74,74,84,0) 100%);
    mask-image: linear-gradient(173deg, rgba(0,0,0,1) 36%, rgba(74,74,84,0) 100%);

#fleet_setup .card {
    background-color: rgba(0, 0, 0, 0.806);
    border-radius: 25px;
} */

#fleet_setup hr {
    border: 3px solid white;
}

#fleet_setup .row .col-4 p {
    margin: 0;
    text-decoration: underline;
}

.text-hijau {
    color: greenyellow;
}

#fleet_setup .table thead {
    border-radius: 20px;
}

.app-header-primary {
    background-color: rgba(255, 255, 255, 0.529) !important;
}
.reset {
    all: revert;
    border-radius: 5px;
    /* border-color: red; */
}

.body-container {
    padding: 10px 5px 10px 15px;
}

/* .btn_function .btn {
    border-radius: 50%;
} */

.hide_column {
    display: none;
}

main {
    padding: 0 1rem 0 1rem;
}

.modal-footer {
    display: block;
}

.input-wrapper {
    padding-top: 30px;
}

.custom-select {
    width: max-content;
    /* max-width: 100%; */
}

#kt_app_root {
    background-color: rgba(0, 0, 0, 0.568);
}

#display_unit h1,
#display_unit h2,
#display_unit h3,
#display_unit h4,
#display_unit h5,
#display_unit h6,
#display_unit p {
    color: white;
}

#display_unit img {
    max-height: 23vh;
}

#display_detail {
    height: 30vw;
}

.input-wrapper {
    padding-top: 30px;
}

.custom-select {
    width: 300px;
    max-width: 100%;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: center !important;
}

div.dataTables_wrapper div.dataTables_filter label {
    width: 100% !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 93% !important;
}

.card-input-element + .card {
    height: calc(36px + 2 * 1rem);
    color: red;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid transparent;
    border-radius: 4px;
}

.card-input-element + .card:hover {
    cursor: pointer;
}

.card-input-element:checked + .card {
    background-color: red;
    color: white;
    -webkit-transition: border 0.3s;
    -o-transition: border 0.3s;
    transition: border 0.3s;
}

.card-input-element:checked + .card::after {
    content: "\e5ca";
    color: #afb8ea;
    font-family: "Material Icons";
    font-size: 24px;
    -webkit-animation-name: fadeInCheckbox;
    animation-name: fadeInCheckbox;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes fadeInCheckbox {
    from {
        opacity: 0;
        -webkit-transform: rotateZ(-20deg);
    }
    to {
        opacity: 1;
        -webkit-transform: rotateZ(0deg);
    }
}

@keyframes fadeInCheckbox {
    from {
        opacity: 0;
        transform: rotateZ(-20deg);
    }
    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

.d-none {
    display: none;
}