:root {
    --shspu-color-darkgreen: #008736;
    --shspu-color-darkgreen-shadow: #017a32;
    --shspu-color-lightgreen: #4bb462;
    --shspu-color-lightgreen-shadow: #40a356;
    --shspu-color-yellow: #eda400;
    --shspu-color-yellow-shadow: #df9a00;
    --shspu-color-blue-dark: #0660a5;
    --shspu-color-blue-dark-shadow: #08528b;
    --shspu-color-blue-light: #1ca7c9;
    --shspu-color-blue-light-shadow: #1594b3;
    --shspu-color-red: #bd2130;
    --shspu-color-purple: #89669d;
    --shspu-color-black: #000000;
    --shspu-color-darkgray: #444444;
    --shspu-color-lightgray: #cecece;
    --shspu-color-lightergray: #ececec;
    --shspu-color-white: #ffffff;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a.link-shspu {
    color: var(--shspu-color-darkgreen);
}
a.link-shspu:visited {
    color: var(--shspu-color-darkgreen-shadow);
}

header {
    background-color: var(--shspu-color-darkgreen);
}
.navbar-brand, .navbar-brand:hover {
    color: var(--shspu-color-white);
}
.navbar-nav .nav-link {
    color: var(--shspu-color-lightergray);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.show  {
    color: var(--shspu-color-white);
}
.navbar-nav .nav-link.active {
    color: var(--shspu-color-white);
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-radius: 10px;
}
main {
    flex: 1;
}
footer {
    background: var(--shspu-color-darkgray);
    color: var(--shspu-color-white);
}

.payment-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.payment-logos img {
    max-height: 80px;
    margin: 10px;
}
canvas {
    margin: auto;
    width: 100%;
}

.sub-fields {
    margin-left: calc(.5* var(--bs-gutter-x));
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
    border-color: var(--bs-dark-border-subtle)!important;
}
input[readonly], input[readonly]:active, input[readonly]:focus {
    background-color: #f4f4f4;
}
.btn-shspu {
    background-color: var(--shspu-color-darkgreen);
    color: var(--shspu-color-white);
}
.btn-shspu:active, .btn-shspu:focus, .btn-shspu:hover {
    background-color: var(--shspu-color-darkgreen-shadow);
    color: var(--shspu-color-white);
}

.list-group-item-shspu {
    color: var(--bs-list-group-color);
}

.list-group-item-shspu.active {
    background-color: var(--shspu-color-darkgreen);
    border-color: var(--shspu-color-darkgreen);
}

.list-group-item-shspu-secondary {
    background-color: var(--shspu-color-lightergray);
}
.list-group-item-shspu-secondary:hover {
    background-color: var(--shspu-color-lightgray);
}

.nav-shspu .nav-link {
    color: var(--shspu-color-black);
}

.nav-shspu .nav-link:hover {
    color: var(--shspu-color-darkgreen);
}

.nav-shspu .nav-link.active {
    background-color: var(--shspu-color-darkgreen);
}

.nav-shspu .nav-link.active:hover {
    color: var(--shspu-color-white);
}
.card-shspu img {
    margin: 10px;
}
[v-cloak] {
  display: none;
}

.invalid-feedback-shspu {
    /* display: none; */
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}
.valid-feedback-shspu {
    /* display: none; */
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #28a745;
}

.toast-header-success-shspu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .25rem .75rem;
    color: #ffffff;
    background-color: var(--shspu-color-lightgreen);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.toast-header-danger-shspu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .25rem .75rem;
    color: #ffffff;
    background-color: var(--shspu-color-red);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.toast-header-warning-shspu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .25rem .75rem;
    color: #212529;
    background-color: var(--shspu-color-yellow);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.toast-header-primary-shspu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .25rem .75rem;
    color: #fff;
    background-color: var(--shspu-color-blue-dark);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05);
}