/* override Bootstrap 5 */
:root {
    --btn-bg-primary: #002B5B;
    --btn-color-primary: #F5F7FA;
    --btn-border-color-primary: #002B5B;
    --btn-hover-bg-primary: #001f40;
    --btn-hover-color-primary: #F5F7FA;
    --btn-hover-border-color-primary: #001f40;
    --btn-active-bg-primary: #001f40;
    --btn-active-color-primary: #F5F7FA;
    --btn-active-border-color-primary: #001f40;

    /* form */
    --form-invalid-border-color: #e57373;
    --form-valid-border-color: #4CAF50;
}

/* button */
.btn {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.btn:focus-visible {
    background-color: var(--btn-hover-bg-primary);
    color: var(--btn-hover-color-primary);
    border-color: var(--btn-hover-border-color-primary);
    box-shadow: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: var(--btn-active-bg-primary);
    color: var(--btn-active-color-primary);
    border-color: var(--btn-active-border-color-primary);
}

.btn-primary:hover {
    background-color: var(--btn-hover-bg-primary);
    color: var(--btn-hover-color-primary);
    border-color: var(--btn-hover-border-color-primary);
}

.btn-primary {
    background-color: var(--btn-bg-primary);
    color: var(--btn-color-primary);
    border-color: var(--btn-border-color-primary);
    /* transition: all 0.2s ease-in; */
}

/* akhir button */

/* form */
.form-control {
    background-color: transparent;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: .44rem;
}

.form-control:focus {
    background-color: transparent;
    border-color: #8698FFFF;
    box-shadow: none;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--form-valid-border-color);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--form-valid-border-color);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--form-invalid-border-color);
}

.input-group-text {
    padding: 8px 16px;
    font-size: .875rem;
    background: transparent;
    color: #FFFFFF;
    transition: all 0.3s ease-in;
}

.input-group-text:hover {
    cursor: pointer;
    background: #FFFFFF;
    color: #003499;
}

/* akhir form */

/* card */
.card-body {
    padding: 1.75rem 1.75rem;
}

/* akhir card */

/* akhir override Bootstrap 5 */

::selection {
    background: #dce1ff;
    color: #344479;
}

input:-webkit-autofill {
    background-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s;
}

.glass {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.py-8 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* browser */
:focus-visible {
    outline: 0;
}

/* OLD */
div.g-recaptcha div {
    margin-right: auto!important;
    margin-left: auto!important;
}

.border-bottom-dashed {
    border-bottom: var(--bs-border-width) dashed var(--bs-border-color) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, ">");
}

.table-responsive {
    overflow-x: hidden;
}

.dataTables_wrapper.no-footer .table-responsive {
    overflow-x: auto;
}

.table-responsive .dataTables_wrapper .dataTables_filter input {
    padding-left: 2.5rem!important;
    padding-top: .5rem!important;
    padding-bottom: .5rem!important;
}

div.dataTables_wrapper div.dataTables_filter label {
    position: relative;
}

div.dataTables_wrapper div.dataTables_filter label svg {
    top: 50%;
    transform: translateY(-50%)!important;
    margin-left: 1rem!important;
    width: 20px;
    height: 20px;
    color: #2A3547;
    position: absolute;
}

.inv-list-bottom-section {
    padding-top: 1em;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0px;
    padding-bottom: .85em;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: .85rem!important;
    cursor: pointer;
    color: #2A3547;
    border: none;
    border-radius: 50%;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #F6F9FC;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    background-color: #EAEFF4;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #2A3547;
    background-color: #EAEFF4;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    border-radius: 50%;
    padding: 6px 6px;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.previous svg {
    vertical-align: top;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-radius: 50%;
    padding: 6px 6px;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.next svg {
    vertical-align: top;
}