:root {
    --bs-primary: #2d8a54;
    --bs-primary-sub: #246c42;
    --bs-primary-rgb: 45, 138, 84;
    --bs-primary-sub-rgb: 36, 108, 66;
    --bs-primary-sub-rgba: rgba(36, 108, 66, 0.25);
    --bs-info-sub: #d1ecf1;
    --bs-info-sub-rgb: 209, 236, 241;
    --bs-warning-sub: #fff4e5;
    --bs-warning-sub-rgb: 255, 244, 229;
    --bs-danger-sub: #f8d7da;
    --bs-danger-sub-rgb: 248, 215, 218;
    --bs-success: #4CAF50;
    --bs-success-rgb: 76, 175, 80;
    --bs-success-sub: #45a049;
    --bs-success-sub-rgb: 69, 160, 73;
    --bs-required: #FFDBBB; /* Light Orange */
    --bs-required-sub: #ED9A76; /* Light Amber Orange */
    --bs-body-bg: #f7f7f7;
    /*the page head height in main layout*/
    --m-top-header-height: 4rem;
    --m-bottom-footer-height: 4rem;
    --m-default-border-radius: 0.6rem;
    /*nav bar width in main layout*/
    --y-side-nav-width: 250px;
    --y-side-nav-end-color: rgb(36,108,66);
    /*popover indicator shadow to simulate float over visual style*/
    --y-popover-indicator-box: 3px 3px 3px gray;
    /*global background (not use yet)*/
    --y-layout-0-background: var(--m-bg-body);
    --y-layout-0-front: var(--bs-card-color);
    /*background on main layout (ex: menu etc.) and interactive element (ex: btn etc.)*/
    --y-layout-1-background: rgb(45,138,84);
    --y-layout-1-front: var(--bs-white);
    /*background on content element (ex: table header etc.)*/
    --y-layout-2-background: rgb(228,244,236);
    --y-layout-2-front: var(--bs-body-color);
    /*    --y-paragraph-0-color: var(--bs-body-color);
    --y-paragraph-1-color: var(--bs-body-color);*/
    /*boot strap 'card' element's header*/
    --bs-card-cap-bg: var(--y-layout-2-background);
    --y-remain-body-height: calc(100vh - var(--m-top-header-height) - var(--m-bottom-footer-height));
}

.bg-info-sub {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-info-sub-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning-sub {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-sub-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger-sub {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-sub-rgb), var(--bs-bg-opacity)) !important;
}

.text-info-sub {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-sub-rgb), var(--bs-text-opacity)) !important;
}

.text-warning-sub {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-warning-sub-rgb), var(--bs-text-opacity)) !important;
}

.text-danger-sub {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-sub-rgb), var(--bs-text-opacity)) !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-sub);
    --bs-btn-hover-border-color: #1f5d38;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1f5d38;
    --bs-btn-active-border-color: #1b4f30;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5ba77a;
    --bs-btn-disabled-border-color: #5ba77a;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary-sub);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-sub);
    --bs-btn-active-border-color: #1b4f30;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-gray-500);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-gray-400);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success-sub);
    --bs-btn-hover-border-color: #275939;
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #275939;
    --bs-btn-active-border-color: #224d31;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6ba883;
    --bs-btn-disabled-border-color: #6ba883;
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success-sub);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success-sub);
    --bs-btn-active-border-color: #224d31;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-gray-500);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-gray-400);
}

.link-primary:hover, .link-primary:focus {
    color: rgba(var(--bs-primary-sub-rgb),var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: rgba(var(--bs-primary-sub-rgb),var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: rgba(var(--bs-primary-sub-rgb),var(--bs-link-underline-opacity, 1)) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary-sub);
    accent-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary-sub) !important;
    box-shadow: 0 0 0 0.25rem var(--bs-primary-sub-rgba) !important;
    accent-color: var(--bs-primary);
}

.form-check-input:active {
    background-color: #5ba77a;
    border-color: var(--bs-primary-sub);
}

.form-check-input[type="radio"]:checked {
    background-color: var(--bs-primary);
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--bs-primary);
}

.form-check-input:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary-sub);
}

.form-select {
    border: 1px solid var(--bs-gray-400);
    transition: border-color .2s ease-in-out;
}

    .form-select:focus {
        border-color: var(--bs-primary-sub) !important;
        box-shadow: 0 0 0 0.25rem var(--bs-primary-sub-rgba) !important;
    }

.form-control {
    border: 1px solid var(--bs-gray-400);
    transition: border-color .2s ease-in-out;
}

    .form-control:focus {
        border-color: var(--bs-primary-sub) !important;
        box-shadow: 0 0 0 0.25rem var(--bs-primary-sub-rgba) !important;
    }

.btn:focus {
    border-color: var(--bs-primary-sub) !important;
    box-shadow: 0 0 0 0.25rem var(--bs-primary-sub-rgba) !important;
}

/*  input number appearance none  */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}

html {
    scrollbar-gutter: stable;
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: var(--bs-gray-600) transparent; /* block background */
}

.cursor_pointer{
    cursor: pointer;
}

@media(max-width: 640px){
    html {
        scrollbar-gutter: auto;
    }
}