:root {
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;

    --bs-primary: #509554;
    --bs-primary-light: #9EBE9B;
    --bs-primary-dark: #47854A; /* 10% darker shade of --bs-primary */
    --bs-secondary: #D2D9DB;
    --bs-secondary-dark: #C6CFD2;
    --bs-success: #84b674;
    --bs-info: #e1ecd3;
    --bs-warning: #f0c084;
    --bs-danger: #d95250;
    --bs-light: #f8fbf3;
    --bs-dark: #21212B;
    --bs-gray-20: #F3F5F6;
    --bs-gray-30: #E8ECED;
    --bs-gray-40: #d0d6dc;
    --bs-gray-50: #e2e2df;
    --bs-gray-60: #e2e2df;
    --bs-gray-100: #f8fbf3;
    --bs-gray-200: #e0e0e0;
    --bs-gray-300: #c8c8c8;
    --bs-gray-400: #a8a8a8;
    --bs-gray-500: #8a8a8a;
    --bs-gray-600: #6c6c6c;
    --bs-gray-700: #4e4e4e;
    --bs-gray-800: #3c3c3c;
    --bs-gray-900: #21212B;

    --emv-green-20: #DFE9DE;
    --emv-green-30: #CEDFCD;
    --emv-green-60: #9EBE9B;

    --bs-form-invalid-border-color: var(--bs-danger);
    /* Customize button styles */
    --bs-btn-border-radius: 50px;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-weight: 600;

    --bs-btn-primary-bg: var(--bs-primary);
    --bs-btn-primary-color: #fff;
    --bs-btn-primary-border: var(--bs-primary);

    --bs-btn-secondary-bg: var(--bs-secondary);
    --bs-btn-secondary-color: #2A2E28;
    --bs-btn-secondary-border: var(--bs-secondary);

    --bs-btn-success-bg: var(--bs-success);
    --bs-btn-success-color: #fff;
    --bs-btn-success-border: var(--bs-success);

    /* Customize inputs */
    --bs-form-control-border-color: var(--bs-gray-300);
    --bs-form-control-focus-border-color: var(--bs-primary);
    --bs-form-control-focus-box-shadow: 0 0 0 0.2rem rgba(101, 149, 81, 0.25);

    /* Customize alerts */
    --bs-alert-primary-bg: rgba(101, 149, 81, 0.1);
    --bs-alert-primary-border: rgba(101, 149, 81, 0.2);
    --bs-alert-primary-color: var(--bs-primary);

    --bs-alert-secondary-bg: rgba(138, 138, 138, 0.1);
    --bs-alert-secondary-border: rgba(138, 138, 138, 0.2);
    --bs-alert-secondary-color: var(--bs-secondary);

    --bs-alert-danger-bg: rgba(217, 82, 80, 0.1);
    --bs-alert-danger-border: rgba(217, 82, 80, 0.2);
    --bs-alert-danger-color: var(--bs-danger);

    /* Customize card components */
    --bs-card-bg: var(--bs-light);
    --bs-card-border-color: var(--bs-gray-200);
    --bs-card-border-radius: 0.75rem;

    --emv-paragraph-color: #5F675A;
    --emv-header-color: #2A2E28;

    --emv-enabled: #CEDECD;
    --emv-tag-hover: #BED4BD;
    --emv-tag-border: #9EBE9B;

    --bs-body-color: var(--emv-paragraph-color); !important; /* Change the body text color */
    --bs-font-sans-serif: 'Roboto Flex', sans-serif ;
    --bs-table-striped-bg: rgba(223, 233, 222, 0.40) !important;

}

body {
    font-family: var(--bs-font-sans-serif) !important;
}

dropdown-component {
    checkbox-item-component {
        width: var(--spacing-40); /* 100px */
    }
}

.form-control {
    font-family: var(--bs-font-sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    border-color: var(--bs-gray-20);
    border-width: 2px;
    border-style: solid;
    margin-top: var(--spacing-4); /* 6px */
    margin-bottom: var(--spacing-4); /* 6px */
    padding-left: var(--spacing-20); /* 20px */
    padding-right: var(--spacing-20); /* 20px */
    padding-top: var(--spacing-8); /* 10px */
    padding-bottom: var(--spacing-8); /* 10px */
    background-color: var(--bs-gray-20);
    color: var(--emv-paragraph-color);
}
.form-control::placeholder {
    color: var(--emv-paragraph-color);
    font-family: var(--bs-font-sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
.form-control:focus {
    border-color: var(--bs-primary-light);
    box-shadow: none;
    background-color: var(--bs-gray-30);
    color: var(--emv-header-color);
}
.form-control:hover {
    background-color: var(--bs-gray-30);
}
form-control:not(:placeholder-shown) {
    background-color: var(--bs-gray-30);
    color: var(--emv-header-color);
}
input[type="date"].form-control:not(:placeholder-shown) {
    background-color: var(--bs-gray-20);
    color: var(--emv-paragraph-color);
}
input[type="date"].form-control:not(:placeholder-shown):hover {
    background-color: var(--bs-gray-30);
    color: var(--emv-paragraph-color);
}

.input-group-text {
    font-family: var(--bs-font-sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    border-color: var(--bs-gray-20);
    border-width: 2px;
    border-style: solid;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: var(--spacing-20); /* 20px */
    padding-right: var(--spacing-20); /* 20px */
    padding-top: var(--spacing-8); /* 10px */
    padding-bottom: var(--spacing-8); /* 10px */
    background-color: var(--bs-gray-20);
    color: var(--emv-paragraph-color);
}
.form-check-input {
    width: var(--spacing-20); /* 20px */
    height: var(--spacing-20); /* 20px */
    border-width: 1px;
    border-color: var(--bs-gray-400) !important;
    background-color: var(--bs-btn-primary-color);
    --bs-form-check-bg: var(--bs-body-bg);
    flex-shrink: 0;
    margin-top: 0;
    margin-right: var(--spacing-20); /* 10px */
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-print-color-adjust: exact;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--bs-btn-primary-color);
    border: 1px solid #4CAF50;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%232A2E28%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M9%2016.2L4.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z%22/%3E%3C/svg%3E');
}
.form-check-input:checked:after {
    top: 50%;
    left: 50%;
    width: var(--spacing-16); /* 16px */
    height: var(--spacing-16); /* 16px */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#5F675A"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

:root {
    --bs-accordion-border-width: 0; /* Remove the border width */
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: var(--bs-primary-light) !important;
    padding: 0;
}

.accordion-item {
    border: none; /* Ensure no border is applied to accordion item */
}

.accordion-button {
    border: none; /* Remove border from accordion button */
    box-shadow: none; /* Remove box-shadow */
    background-color: #fff; /* white */
    padding: var(--spacing-8); /* 8px */
}

.accordion-button::after {
    border: none; /* Remove the border from the icon */
}

.accordion-body {
    border-top: none; /* Remove the top border from the accordion body */
    padding: 0;
}
.accordion-button:not(.collapsed) {
    background-color: #fff; /* white */
    box-shadow: none;
    color: var(--emv-header-color);
}

.accordion-button:active {
    border-color: var(--emv-header-color);
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-color: var(--bs-primary);
    border-width: 2px;
    border-style: solid;
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
    background-color: var(--bs-primary);
    color: white;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):disabled {
    background-color: var(--emv-green-20) !important;
    color: var(--bs-primary);
    border-color: var(--emv-green-20) !important;
    cursor: not-allowed; /* Indicate disabled state visually */
    opacity: 0.6; /* Optional: Lower the opacity for a more subdued look */
}

.hidden {
    display: none !important;
}

.popover-header {
    background-color: var(--bs-danger);
    color: var(--emv-header-color);

}
h5 {
    color: var(--emv-paragraph-color);
    /* H5 Regular */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
h4 {
    color: var(--emv-header-color);
    /* H5 Regular */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}
.material-symbols-outlined {
    border-bottom-right-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.warning-tooltip {
    --bs-tooltip-bg: var(--bs-danger);
    --bs-tooltip-color: white;
}