body {
    color: var(--page-text-typical-color);
}

.page-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .page-container .tab-pane {
        padding: 0 0 1rem;
    }

.page-footer-container {
    background-color: white;
    border-top: 1px rgba(0,0,0,.125) solid;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    min-height: 4rem;
    box-shadow: 0 0 1rem 1rem white;
    z-index: 1021;
}

.page-footer-msg {
    padding: 1rem 1rem 0;
    font-size: .8rem;
    color: red;
    display: block;
}

.page-btn-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    flex-wrap: wrap;
}

    .page-btn-area .btn:not(.item-group) {
        width: 35%;
        max-width: 15rem;
        margin: .2rem;
        padding: .5rem;
        font-size: 1rem;
        min-width: 9rem;
    }

    .page-btn-area .btn-group {
        width: 35%;
        max-width: 16rem;
        font-size: 1rem;
        min-width: 11rem;
    }

        .page-btn-area .btn-group .btn:not(.dropdown-toggle) {
            width: calc(100% - 3rem);
        }

        .page-btn-area .btn-group .btn.dropdown-toggle {
            width: 3rem;
            border-right: 1px rgba(255,255,255,.2) solid;
        }

.page-btn-opr-active {
    display: block;
    text-align: center;
    background-color: var(--page-opration-btn-backcolor);
    border-radius: .3rem;
    color: var(--page-opration-btn-color);
    transition: .3s ease all;
    font-weight: bold;
    font-size: 1rem;
    border: 1px solid var(--page-opration-btn-bordercolor);
    letter-spacing: -.05rem;
    --bs-btn-active-color: var(--page-opration-btn-color);
    --bs-btn-active-bg: var(--page-opration-btn-backcolor);
    --bs-btn-active-border-color: var(--page-opration-btn-bordercolor);
    --bs-btn-disabled-color: var(--page-opration-btn-color);
    --bs-btn-disabled-bg: var(--page-opration-btn-backcolor);
    --bs-btn-disabled-border-color: var(--page-opration-btn-bordercolor);
}

    .page-btn-opr-active:hover {
        background-color: var(--page-opration-btn-backcolor-hover);
        color: var(--page-opration-btn-color);
        letter-spacing: 0;
    }

    .page-btn-opr-active:focus {
        color: var(--page-opration-btn-color) !important;
    }

.page-btn-opr-active-outline {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--page-opration-btn-color);
    border-radius: .3rem;
    color: var(--page-opration-btn-backcolor);
    transition: .3s ease all;
    font-weight: bold;
    font-size: 1rem;
    border: 1px solid var(--page-opration-btn-bordercolor);
    letter-spacing: -.05rem;
    --bs-btn-active-color: var(--page-opration-btn-backcolor);
    --bs-btn-active-bg: var(--page-opration-btn-color);
    --bs-btn-active-border-color: var(--page-opration-btn-bordercolor);
    --bs-btn-disabled-color: var(--page-opration-btn-backcolor);
    --bs-btn-disabled-bg: var(--page-opration-btn-color);
    --bs-btn-disabled-border-color: var(--page-opration-btn-bordercolor);
}

    .page-btn-opr-active-outline:hover {
        background-color: var(--page-opration-btn-backcolor);
        color: var(--page-opration-btn-color);
        letter-spacing: 0;
    }

    .page-btn-opr-active-outline:focus {
        color: var(--page-opration-btn-color) !important;
    }

.page-btn-opr-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .25rem 0;
    padding: .3rem;
    border-radius: .3rem;
    transition: .3s ease all;
    font-weight: normal;
    font-size: .9rem;
    border: 1px solid var(--page-opration-btn-inactive-bordercolor);
    background-color: var(--page-opration-btn-inactive-backcolor);
    color: var(--page-opration-btn-inactive-color);
    letter-spacing: -.05rem;
    --bs-btn-active-color: var(--page-opration-btn-inactive-color);
    --bs-btn-active-bg: var(--page-opration-btn-inactive-backcolor);
    --bs-btn-active-border-color: var(--page-opration-btn-inactive-bordercolor);
    --bs-btn-disabled-color: var(--page-opration-btn-inactive-color);
    --bs-btn-disabled-bg: var(--page-opration-btn-inactive-backcolor);
    --bs-btn-disabled-border-color: var(--page-opration-btn-inactive-bordercolor);
}

    .page-btn-opr-inactive:hover {
        background-color: var(--page-opration-btn-inactive-backcolor-hover);
        color: var(--nsop-theme-palette-primary-color, navy);
        letter-spacing: 0;
    }

    .page-btn-opr-inactive:focus {
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(214, 221, 232, 0.25) !important;
    }


.page-btn-opr-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 .4rem;
    background-color: var(--page-opration-btn-danger-backcolor);
    padding: .5rem;
    border-radius: .3rem;
    color: var(--page-opration-btn-danger-color);
    transition: .3s ease all;
    font-weight: bold;
    font-size: 1rem;
    border: 1px solid var(--page-opration-btn-danger-bordercolor);
    letter-spacing: -.05rem;
    --bs-btn-active-color: var(--page-opration-btn-danger-color);
    --bs-btn-active-bg: var(--page-opration-btn-danger-backcolor);
    --bs-btn-active-border-color: var(--page-opration-btn-danger-bordercolor);
    --bs-btn-disabled-color: var(--page-opration-btn-danger-color);
    --bs-btn-disabled-bg: var(--page-opration-btn-danger-backcolor);
    --bs-btn-disabled-border-color: var(--page-opration-btn-danger-bordercolor);
}

    .page-btn-opr-danger:hover {
        background-color: var(--page-opration-btn-danger-backcolor-hover);
        color: var(--page-opration-btn-danger-color);
        letter-spacing: 0;
    }

    .page-btn-opr-danger:focus {
        outline: 0;
        color: var(--page-opration-btn-danger-color) !important;
        box-shadow: 0 0 0 .25rem rgba(253, 13, 13, 0.25) !important;
    }

.btn .page-btn-icon {
    display: inline-flex;
    font-size: 1.25rem;
    margin-left: .3rem;
}


.option-btn-group {
    width: 100%;
    min-height: 2rem;
}

    .option-btn-group .btn {
        font-size: unset;
    }

    .option-btn-group .input-group-text {
        font-size: .8rem !important;
        color: var(--nsop-theme-palette-primary-color, navy);
        min-width: 4.5rem;
    }

.btn-check:active + .option-btn-outline, .btn-check:checked + .option-btn-outline, .option-btn-outline.active, .option-btn-outline.dropdown-toggle.show {
    color: #fff;
    background-color: var(--page-opration-btn-backcolor, royalblue) !important;
    font-weight: bold;
}

    .btn-check:active + .option-btn-outline:hover, .btn-check:checked + .option-btn-outline:hover, .option-btn-outline.active:hover, .option-btn-outline.dropdown-toggle.show:hover {
        color: #fff;
        background-color: var(--page-opration-btn-backcolor-hover, royalblue) !important;
        border-color: var(--page-opration-btn-backcolor-hover, royalblue) !important;
        font-weight: bold;
    }

    .btn-check:active + .option-btn-outline:focus, .btn-check:checked + .option-btn-outline:focus, .option-btn-outline.active:focus, panel-radio-btn-outline.dropdown-toggle.show:focus, .option-btn-outline:active:focus {
        box-shadow: 0 0 0 .1rem rgba(13,110,253,.5);
    }

    .btn-check + .option-btn-outline:hover, .btn-check + .option-btn-outline:hover, .option-btn-outline.active:hover, .option-btn-outline.dropdown-toggle.show:hover {
        color: #fff;
        background-color: var(--page-opration-btn-backcolor-hover, royalblue) !important;
        border-color: var(--page-opration-btn-backcolor-hover, royalblue) !important;
        font-weight: bold;
    }

.option-btn-outline {
    transition: .3s ease all;
    color: var(--page-opration-btn-backcolor);
    border-color: var(--page-opration-btn-backcolor, royalblue) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .option-btn-outline:hover {
        color: #fff;
        border-color: var(--page-opration-btn-backcolor, royalblue) !important;
        background-color: var(--page-opration-btn-backcolor, royalblue) !important;
    }

.option-btn-icon {
    font-size: 1.33rem;
    vertical-align: middle;
    position: relative;
    top: .2rem;
    margin: 0 .2rem 0 .5rem;
}


.btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
    text-shadow: 1px 1px 5px rgba(0,0,0,.2);
}

.form-check-input, .form-check-label {
    cursor: pointer;
}

    .form-check-input:checked {
        background-color: var(--page-opration-btn-backcolor, royalblue);
        border-color: var(--page-opration-btn-backcolor-hover, royalblue);
        transition: .2s ease all;
    }

    .form-check-input:hover:checked {
        background-color: var(--page-opration-btn-backcolor-hover);
    }

@media screen and (max-width:767px) {
    .page-btn-opr-active, .page-btn-opr-danger, .page-btn-opr-inactive, .page-btn-opr-sec-active, panel-btn-opr-active-outline {
        letter-spacing: 0;
    }
}