.one-line-description{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.two-line-description{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.table {
    --bs-table-hover-color: #181c32;
    --bs-table-hover-bg: #d8f1ff;
}

.form-check-custom.form-check-body .form-check-input{
    background-color: var(--kt-body-bg)
}

.table-with-border>:not(caption)>*>* {
    border-width: 0 1px !important;
    border-color: var(--kt-border-color) !important;
    border-style: solid !important;
}

.table-with-border>:not(caption)>*>*:is(td:first-child:not(.not-first), th:first-child:not(.not-first),  tr:first-child:not(.not-first)){
    border-left: none !important;
}

.table-with-border>:not(caption)>*>*:is(td:last-child, th:last-child,  tr:last-child){
    border-right: none !important;
}

.table-with-border .not-first {
    border-width: 0 1px !important;
    border-color: var(--kt-border-color) !important;
    border-style: solid !important;
    padding-left: 0.75rem !important;
}

.separator.separator-content.border-gray-500::after, .separator.separator-content.border-gray-500::before {
    border-color: var(--kt-gray-500)!important;
}

.app-custom-floating {
    position: fixed;
    z-index: 105;
    bottom: 40px;
    right: 50px;
}

.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
        height: calc(3.75rem + 2px)!important;
        min-height: calc(3.75rem + 2px)!important;
        line-height: 1.25!important;
        padding-top: 1.5rem !important;
}

@media (max-width: 991.98px) {
    .app-custom-floating {
        bottom: 20px;
        right: 40px;
    }
}

.app-engage {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: end;
    z-index: 5;
    padding-right: 12px;
}
.app-engage .app-engage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--bs-engage-btn-box-shadow);
    border-width: 1px;
    border-style: solid;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    border-radius: 6px;
    width: 66px;
    height: 70px;
    color: var(--bs-engage-btn-color);
    border-color: var(--bs-engage-btn-border-color);
    background-color: var(--bs-engage-btn-bg);
}
.app-engage .app-engage-btn i,
.app-engage .app-engage-btn .svg-icon {
    color: var(--bs-engage-btn-icon-color);
}
.app-engage .app-engage-btn.dropdown-toggle:after {
    color: var(--bs-engage-btn-icon-color);
}
.app-engage .app-engage-btn.hover-dark:hover {
    color: var(--bs-dark-inverse);
    border-color: var(--bs-dark);
    background-color: var(--bs-dark);
}
.app-engage .app-engage-btn.hover-dark:hover i,
.app-engage .app-engage-btn.hover-dark:hover .svg-icon {
    color: var(--bs-dark-inverse);
}
.app-engage .app-engage-btn.hover-danger:hover {
    color: var(--bs-danger-inverse);
    border-color: var(--bs-danger);
    background-color: var(--bs-danger);
}
.app-engage .app-engage-btn.hover-danger:hover i,
.app-engage .app-engage-btn.hover-danger:hover .svg-icon {
    color: var(--bs-danger-inverse);
}
.app-engage .app-engage-btn.hover-primary:hover {
    color: var(--bs-primary-inverse);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}
.app-engage .app-engage-btn.hover-primary:hover i,
.app-engage .app-engage-btn.hover-primary:hover .svg-icon {
    color: var(--bs-primary-inverse);
}
.app-engage .app-engage-btn.hover-success:hover {
    color: var(--bs-success-inverse);
    border-color: var(--bs-success);
    background-color: var(--bs-success);
}
.app-engage .app-engage-btn.hover-success:hover i,
.app-engage .app-engage-btn.hover-success:hover .svg-icon {
    color: var(--bs-success-inverse);
}
.app-engage .app-engage-btn.app-engage-btn-toggle-off {
    width: 35px;
    height: 35px;
}
.app-engage .app-engage-btn.app-engage-btn-toggle-on {
    width: 35px;
    height: 35px;
    display: none;
}
.app-engage.app-engage-hide .app-engage-btn {
    visibility: hidden;
}
.app-engage.app-engage-hide .app-engage-btn.app-engage-btn-toggle-off {
    display: none;
}
.app-engage.app-engage-hide .app-engage-btn.app-engage-btn-toggle-on {
    visibility: visible;
    display: flex;
}

.engage-btn {
    display: flex;
    align-items: center;
    height: 35px !important;
    color: var(--bs-engage-btn-color);
    border-color: var(--bs-engage-btn-bg);
    background-color: var(--bs-engage-btn-bg);
}
.engage-btn i,
.engage-btn .svg-icon {
    color: var(--bs-engage-btn-color);
}
.engage-btn.dropdown-toggle:after {
    color: var(--bs-engage-btn-color);
}

[data-theme="light"] .hero-bg, [data-theme="light"] .bg-1 {
    background-image: url('/themes/metronic/media/images/2600x1200/bg-1.png');
}

[data-theme="dark"] .hero-bg, [data-theme="dark"] .bg-1 {
    background-image: url('/themes/metronic/media/images/2600x1200/bg-1-dark.png');
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

.btn-shadow.active, .btn-shadow:active, .btn-shadow:focus, .btn-shadow:hover {
    box-shadow: var(--kt-box-shadow-sm);
}

.row-gap-3 {
    row-gap: .75rem!important
}

.column-gap-3 {
    column-gap: .75rem!important
}

.row-gap-5 {
    row-gap: 1.25rem;
}

.column-gap-5 {
    column-gap: 1.25rem;
}

.row-gap-6 {
    row-gap: 1.50rem;
}

.column-gap-6 {
    column-gap: 1.50rem;
}

.row-gap-8 {
    row-gap: 2rem;
}

.column-gap-8 {
    column-gap: 2rem;
}

/*//--------Custom CSS ditaruh diarasnya ini aja --------------
.header .header-menu .menu>.menu-item>.menu-link .menu-title,
.header .header-menu .menu>.menu-item>.menu-link .menu-icon i {
    color: #EDEDED !important;
}

.img-logo {
    max-width: none !important;
}

.container-xxl.top-header {
    padding-right: 0 !important;
}

@media (min-width: 992px){

    .container-xxl.top-header {
        padding-left: 5px !important;
    }
}
*/

[data-theme=light] {

    --bs-engage-btn-bg: #ffffff;
    --bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
    --bs-engage-btn-border-color: #E8E8E8;
    --bs-engage-btn-color: #3F4254;
    --bs-engage-btn-icon-color: #7E8299;
    --bs-engage-btn-color-active: #3F4254;
    --bs-primary-light: #f1faff;
    --bs-secondary-light: #F9F9F9;
    --bs-success-light: #e8fff3;
    --bs-info-light: #f8f5ff;
    --bs-warning-light: #fff8dd;
    --bs-danger-light: #fff5f8;
    --bs-dark-light: #F4F4F4;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #3F4254;
    --bs-light-inverse: #7E8299;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #ffffff;
    #kt_header {
        background-color: #b02a00 !important;
    }
    #kt_header > #kt_header_nav {
        background-color: #a12700 !important;
    }
}

[data-theme=dark] {

    --bs-engage-btn-bg: #2B2B40;
    --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-engage-btn-border-color: #2B2B40;
    --bs-engage-btn-color: #CDCDDE;
    --bs-engage-btn-icon-color: #6D6D80;
    --bs-engage-btn-color-active: #CDCDDE;
    --bs-primary-light: #212e48;
    --bs-success-light: #1c3238;
    --bs-info-light: #2f264f;
    --bs-warning-light: #392f28;
    --bs-danger-light: #3a2434;
    --bs-dark-light: #2B2B40;
    --bs-secondary-light: #1b1b29;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #92929F;
    --bs-light-inverse: #7E8299;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #1b1b29;

    #kt_header {
        background-color: #0b0c10 !important;
    }
    #kt_header > #kt_header_nav {
        background-color: #000000 !important;
    }
}