html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* sticky footer
-------------------------------------------------- */
html {
    /*position: relative;*/
    min-height: 100%;
}

body {
    /*margin-bottom: 60px;*/
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.footer {
    /*color: rgba(255, 255, 255, 0.55);*/
    /*color: #5783DB;*/
    color: #29807C;
    width: 100%;
    white-space: nowrap;
}
/* .sticky footer */


/* sticky top
-------------------------------------------------- */
.sticky-top {
    transition: all 0.25s ease-in;
}

/* style for when sitcky is applied */
.navbar.sticky-top {
    /*background-color: #5783DB !important;*/
    background-color: #3AAFA9 !important;
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
}

    .navbar.sticky-top .nav-item a,
    .navbar.sticky-top .nav-item span {
        /*color: rgba(255, 255, 255, 0.55);*/
        color: #DEF2F1;
    }

        .navbar.sticky-top .nav-item a.dropdown-item {
            /*color: var(--bs-gray-800);*/
            color: #A2B2B2;
        }
/* .sticky top */


/* background
-------------------------------------------------- */
.bg-app-gradient {
    /*
    background-color: #5783DB;
    background-image: linear-gradient(180deg, #5783DB 0%, #4568AF 100%);
    */
    background-color: #3AAFA9;
    background-image: linear-gradient(180deg, #3AAFA9 0%, #2B7A78 100%);
    background-size: cover;
}
/* .background */


/* card (color)
-------------------------------------------------- */
.card-app .card .card-header {
    background-color: #2B7A78;
}

.card-blue {
    color: #7892B5;
}

.card-green {
    color: #91B5A9;
}

.card-gray-300,
.card-grey-300 {
    color: #dddfeb;
}

.card-gray-400,
.card-grey-400 {
    color: #ced4da;
}

.card-info {
    color: #8CB9C0;
}

.card-lightsteelblue {
    color: #B0C4DE;
}

.card-skyblue {
    color: #87CEEB;
}

.card-red {
    color: #D98481;
}
/* .card (color) */


/* card (tag)
-------------------------------------------------- */
.card-tag.card-blue {
    border-left: .3rem solid #7892B5;
}

.card-tag.card-green {
    border-left: .3rem solid #91B5A9;
}

.card-tag.card-gray-300,
.card-tag.card-grey-300 {
    border-left: .3rem solid #dddfeb;
}

.card-tag.card-gray-400,
.card-tag.card-grey-400 {
    border-left: .3rem solid #ced4da;
}

.card-tag.card-info {
    border-left: .3rem solid #8CB9C0;
}

.card-tag.card-lightsteelblue {
    border-left: .3rem solid #B0C4DE;
}

.card-tag.card-skyblue {
    border-left: .3rem solid #87CEEB;
}

.card-tag.card-red {
    border-left: .3rem solid #D98481;
}
/* .card (tag) */


/* color
-------------------------------------------------- */
.bg-gray-400,
.bg-grey-400 {
    background: #D1D3E2;
}

.bg-gray-600,
.bg-grey-600 {
    background: #858796;
}

.bg-orange-marmalade {
    background: #EE8525;
}

.bg-light-orange-marmalade {
    background: #FAAF6F;
}

.bg-peachy-tiny {
    background: #E5A082;
}

.text-gray-400,
.text-grey-400 {
    color: #D1D3E2 !important;
}

.text-gray-600,
.text-grey-600 {
    color: #858796 !important;
}

.text-gray-800,
.text-grey-800 {
    color: #343A40 !important;
}

.text-gray-900,
.text-grey-900 {
    color: #212529 !important;
}
/* .color */


/* component
-------------------------------------------------- */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
/* .component */


/* datatable
-------------------------------------------------- */
.table-wrapper .dataTables_wrapper thead th,
.table-wrapper .dataTables_wrapper tbody td {
    background-color: transparent;
}
/* .datatable */


/* footer
-------------------------------------------------- */
footer.sticky-footer {
    flex-shrink: 0;
    padding: 2rem 0;
}

    footer.sticky-footer .copyright,
    footer.sticky-footer .copyright a {
        color: #858796;
    }

    footer.sticky-footer .copyright {
        font-size: .8rem;
        line-height: 1;
    }
/* .footer */


/* form (was-validated)
-------------------------------------------------- */
.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--bs-border-color);
}

    .form-check-input.is-valid:checked,
    .was-validated .form-check-input:valid:checked {
        background-color: #0D6EFD;
    }

    .form-check-input.is-valid:focus,
    .was-validated .form-check-input:valid:focus {
        box-shadow: inherit;
    }

.form-control.is-valid,
.form-control.is-valid:focus,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid {
    background-image: unset;
    border-color: var(--bs-border-color);
    box-shadow: inherit;
    padding-right: .75rem;
}

.form-select.is-valid,
.was-validated .form-select:valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    );
}

    .form-select.is-valid:focus,
    .was-validated .form-select:valid:focus {
        border-color: var(--bs-border-color);
        box-shadow: inherit;
    }

.form-control.is-invalid-forced {
    border-color: var(--bs-form-invalid-border-color) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
/* .form (was-validated) */


/* height
-------------------------------------------------- */
.h-60 {
    height: 60%;
}
/* .height */


/* html (element)
-------------------------------------------------- */
form .row .form-floating label {
    margin-left: .75rem;
}

.form-floating-fixed {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-left: 0;
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    padding-left: .375rem;
}

    .form-floating-fixed .form-check-input {
        font-size: 1.75rem;
    }
/* .html (element) */

/* image
-------------------------------------------------- */
.bg-img-fixed .form-image {
    height: auto;
}
/* .image */


/* input (hide number arrow)
-------------------------------------------------- */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* .input (hide number arrow) */


/* login
-------------------------------------------------- */
.app-abbv {
    color: #B8860B;
}

.bg-login-image {
    background: url(../img/app.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30%;
}

.btn-login {
    color: #FFF;
    background: #3AAFA9;
}

    .btn-login:hover {
        color: #FFF;
        background: #2B7A78;
    }
/* .login */


/* margin
-------------------------------------------------- */
.ms-2_5 {
    margin-left: .75rem;
}

.mt-6 {
    margin-top: 5rem;
}
/* .margin */


/* modal dialog
-------------------------------------------------- */
.modal-dialog-confirm .modal-header svg {
    border: 0.25rem solid;
    border-radius: 50%;
    height: 2.5rem;
    padding: 0.5rem;
    width: 2.5rem;
}

.modal-dialog-message .modal-header img {
    height: 4rem;
}
/* .modal dialog */


/* navbar
-------------------------------------------------- */
.nav-item .nav-link {
    color: var(--bs-gray-800);
}

.nav-item.active {
    color: #5a5c69;
    font-size: 1.1rem;
    font-weight: 600;
}

    .nav-item.active a {
        padding: .4rem var(--bs-nav-link-padding-x);
    }

.navbar-brand img {
    height: 2.5rem;
}

@media (min-width: 768px) {
    .nav-item.active a {
        padding: .4rem var(--bs-navbar-nav-link-padding-x);
    }
}

/* .navbar */


/* scroll to top
-------------------------------------------------- */
.scroll-to-top {
    background: rgba(90, 92, 105, .5);
    bottom: 1rem;
    color: #fff;
    display: none;
    height: 2.75rem;
    line-height: 2.875rem;
    position: fixed;
    right: 1rem;
    text-align: center;
    width: 2.75rem;
}
/* .scroll to top */


/* spinner
-------------------------------------------------- */
.spin-wrapper {
    background-color: rgb(224, 224, 224, 0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    /*z-index: 10;*/
    z-index: 1060;
}


.spinner {
    position: absolute;
    left: calc(50% - 2rem);
    top: calc(50vh - 2rem);
}

    .spinner div {
        position: absolute;
        width: .4rem;
        height: .4rem;
        background-color: #ccc;
        border-radius: 50%;
        animation: spinner 1.2s linear infinite;
    }

        .spinner div:nth-child(1) {
            animation-delay: 0s;
            top: 37px;
            left: 66px;
        }

        .spinner div:nth-child(2) {
            animation-delay: -0.1s;
            top: 22px;
            left: 62px;
        }

        .spinner div:nth-child(3) {
            animation-delay: -0.2s;
            top: 11px;
            left: 52px;
        }

        .spinner div:nth-child(4) {
            animation-delay: -0.3s;
            top: 7px;
            left: 37px;
        }

        .spinner div:nth-child(5) {
            animation-delay: -0.4s;
            top: 11px;
            left: 22px;
        }

        .spinner div:nth-child(6) {
            animation-delay: -0.5s;
            top: 22px;
            left: 11px;
        }

        .spinner div:nth-child(7) {
            animation-delay: -0.6s;
            top: 37px;
            left: 7px;
        }

        .spinner div:nth-child(8) {
            animation-delay: -0.7s;
            top: 52px;
            left: 11px;
        }

        .spinner div:nth-child(9) {
            animation-delay: -0.8s;
            top: 62px;
            left: 22px;
        }

        .spinner div:nth-child(10) {
            animation-delay: -0.9s;
            top: 66px;
            left: 37px;
        }

        .spinner div:nth-child(11) {
            animation-delay: -1s;
            top: 62px;
            left: 52px;
        }

        .spinner div:nth-child(12) {
            animation-delay: -1.1s;
            top: 52px;
            left: 62px;
        }

@keyframes spinner {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}
/* .spinner */


/* width
-------------------------------------------------- */
.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-12 {
    width: 12%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-22 {
    width: 22%;
}
/* .width */