:root {
    --bs-primary: #1D3B5E;
    --bs-primary-rgb: 29, 59, 94;
    --bs-success: #2E7D32;
    --bs-success-rgb: 46, 125, 50;
    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-warning: #F6B93B;
    --bs-warning-rgb: 246, 185, 59;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: #1B2733;
    --bs-body-bg: #F4F6F9;
    --bs-border-color: #E1E6EC;
    --bs-link-color: #1D3B5E;
    --bs-link-hover-color: #142B45;
}

.container {
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 10px;
}

.footer {
	background-color: #444444;
}

.wallpaper {
	height: 100vh;
	background: #F9F6F0 url("images/wallpaper.webp") no-repeat scroll 0 0;
}

.darkbackground {
    background: rgba(0, 0, 0, 0.5);
}

.FullWindow {
	margin-top: 6em;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

/* Larger than Bootstrap default (calc(1.325rem + .9vw), 2rem on wide screens), still smaller than h1. */
h2, .h2 {
    font-size: calc(1.35rem + 1.2vw);
}

@media (min-width: 1200px) {
    h2, .h2 {
        font-size: 2.25rem;
    }
}

.btn {
    --bs-btn-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 50rem;
    text-decoration: none;
}

.btn-sm {
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: 50rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-font-size: 1.15rem;
    --bs-btn-border-radius: 50rem;
	margin-bottom: 10px;
	margin-left: 10px;
}

.btn-stacked {
	margin-top: 10px;
	margin-left: 10px;
}

/* Quantity [-] [input] [+] groups: no stacking margins, so the buttons stretch to the input height,
   and square input corners so it joins the buttons cleanly. */
.btn-group > .btn-stacked {
	margin-top: 0;
	margin-left: 0;
}

.btn-group > .form-control {
	border-radius: 0;
}

.btn-xs {
    --bs-btn-padding-x: 0.8em;
    --bs-btn-padding-y: 0.1em;
    --bs-btn-font-size: 0.75rem;
	margin-bottom: 0px;
	margin-top: 0px;
}

.btn-default, .btn-info, .btn-secondary {
    --bs-btn-color: #1B2733;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #C5CED8;
    --bs-btn-hover-color: #1B2733;
    --bs-btn-hover-bg: #F1F4F8;
    --bs-btn-hover-border-color: #A9B5C2;
    --bs-btn-active-color: #1B2733;
    --bs-btn-active-bg: #E6EBF1;
    --bs-btn-active-border-color: #A9B5C2;
    --bs-btn-disabled-color: #5B6B7B;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #C5CED8;
    --bs-btn-focus-shadow-rgb: 29, 59, 94;
}

.btn-primary, .btn-branded {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #1D3B5E;
    --bs-btn-border-color: #1D3B5E;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #142B45;
    --bs-btn-hover-border-color: #142B45;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #0E1F33;
    --bs-btn-active-border-color: #0E1F33;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #1D3B5E;
    --bs-btn-disabled-border-color: #1D3B5E;
    --bs-btn-focus-shadow-rgb: 29, 59, 94;
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #2E7D32;
    --bs-btn-border-color: #2E7D32;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #25662A;
    --bs-btn-hover-border-color: #25662A;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #1D5221;
    --bs-btn-active-border-color: #1D5221;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #2E7D32;
    --bs-btn-disabled-border-color: #2E7D32;
    --bs-btn-focus-shadow-rgb: 46, 125, 50;
}

.btn-danger {
    --bs-btn-color: #B42318;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #E4B4AE;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #B42318;
    --bs-btn-hover-border-color: #B42318;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #921C13;
    --bs-btn-active-border-color: #921C13;
    --bs-btn-disabled-color: #B42318;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #E4B4AE;
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.btn-warning, .btn-amber {
    --bs-btn-color: #3B2A05;
    --bs-btn-bg: #F6B93B;
    --bs-btn-border-color: #F6B93B;
    --bs-btn-hover-color: #3B2A05;
    --bs-btn-hover-bg: #EAA820;
    --bs-btn-hover-border-color: #EAA820;
    --bs-btn-active-color: #3B2A05;
    --bs-btn-active-bg: #D99A12;
    --bs-btn-active-border-color: #D99A12;
    --bs-btn-disabled-color: #3B2A05;
    --bs-btn-disabled-bg: #F6B93B;
    --bs-btn-disabled-border-color: #F6B93B;
    --bs-btn-focus-shadow-rgb: 246, 185, 59;
}

.btn-unsaved {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #B42318;
    --bs-btn-border-color: #B42318;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #921C13;
    --bs-btn-hover-border-color: #921C13;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #7A170F;
    --bs-btn-active-border-color: #7A170F;
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.bg-danger {
    background-color: #B42318 !important;
    color: #FFFFFF;
}

.navbar {
	background-color: #FFFFFF;
	box-shadow: 0 1px 0 #E1E6EC, 0 2px 8px rgba(16, 24, 40, 0.04);
	opacity: 255;
}

.navbar-light .navbar-nav .nav-link {
	color: #33475B;
}

.navbar .nav-item.btn {
    --bs-btn-color: #33475B;
    --bs-btn-hover-color: #1B2733;
    --bs-btn-hover-bg: #EEF2F7;
    --bs-btn-active-bg: #E3E9F0;
    --bs-btn-font-weight: 500;
}

.btn-navbar {
	margin-top: 0px;
	text-align: left;
}

.btn-navbarright {
	margin-top: 0px;
	text-align: right;
}

.card {
    --bs-card-border-color: #E1E6EC;
    --bs-card-border-radius: 8px;
    --bs-card-inner-border-radius: 7px;
    --bs-card-cap-bg: #FFFFFF;
    --bs-card-bg: #FFFFFF;
	margin-bottom: 1em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.infoform-card-header {
    background-color: #FFFFFF;
    color: #1B2733;
}

/* No font-size here: card titles take their size from the heading level (h2, h4, h5...). */
.card-header .card-title {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
}

.table {
    --bs-table-border-color: #E8ECF1;
    --bs-table-striped-bg: #FAFBFC;
    --bs-table-hover-bg: #F1F4F8;
	font-size: 0.8rem;
	margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.table td, .table th {
	padding: 0.3rem 0.6rem;
    vertical-align: middle;
}

.table > thead th {
    background-color: #F1F4F8;
    color: #3B4C5E;
    font-weight: 600;
    font-size: 0.78rem;
}

label {
	margin-bottom: 0.25rem;
	margin-top: 0.6em;
    font-weight: 500;
}

span.input-group-text {
	background-color: #F1F4F8;
    border-color: #C3CCD6;
    color: #1B2733;
}

.form-control, .form-select {
    background-color: #FFFFFF;
    color: #1B2733;
    border-color: #C3CCD6;
    border-radius: 6px;
}

.form-control:focus, .form-select:focus {
    border-color: #1D3B5E;
    box-shadow: 0 0 0 0.25rem rgba(29, 59, 94, 0.28);
}

/* Disabled fields are often used to display information (fit_layout.php), so keep the text dark. */
.form-control:disabled, .form-select:disabled {
    background-color: #EEF1F4;
    color: #1B2733;
}

.form-check-input {
	width: 2em;
	height: 2em;
	margin-left: 1em;
	margin-right: 1em;
    border-color: #C3CCD6;
}

.form-check-input:focus {
    border-color: #1D3B5E;
    box-shadow: 0 0 0 0.25rem rgba(29, 59, 94, 0.28);
}

.form-check-input:checked {
    background-color: #1D3B5E;
    border-color: #1D3B5E;
}

.form-radio-input {
	width: 1.5em;
	height: 1.5em;
	margin-left: 1em;
	margin-right: 1em;
}

.form-radio-input:checked {
    background-color: #1D3B5E;
    border-color: #1D3B5E;
}

.bg-waitingapproval {
    background-color: #EDE3FB !important;
    color: #4B2C7A !important;
    --bs-table-accent-bg: rgba(0, 0, 0, 0) !important;
}

.bg-complete {
    background-color: #DDF3E2 !important;
    color: #1E5B2A !important;
    --bs-table-accent-bg: rgba(0, 0, 0, 0) !important;
}

.bg-editing {
    background-color: #FFF3C4 !important;
    color: #5C4700 !important;
    --bs-table-accent-bg: rgba(0, 0, 0, 0) !important;
}

.cardinfoform
{
	padding: 1em;
}



.cardsection
{
    border-radius: 8px;
    border: 1px solid #E1E6EC;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 0px;
    text-align: center;
    overflow: hidden;
    margin-top: 10px;
}

.cardproduct
{
    border-radius: 8px;
    border: 1px solid #E1E6EC;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 0px;
    text-align: center;
    overflow: hidden;
	margin-top: 10px;
}

.cardproduct .card-body {
    background-color: #F7F9FB;
}

.cardproduct .card-footer {
    background-color: #FFFFFF;
    border-top: 0;
}

.cardsize
{
    border-radius: 8px;
    border: 1px solid #E1E6EC;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 0px;
    text-align: center;
    overflow: hidden;
	margin-top: 30px;
}

.cardlink
{
	text-decoration: none;
	color: #1B2733;
}

.cardlink:hover
{
    color: #1D3B5E;
    background-color: #F1F4F8;
    text-decoration: none;
}

.cardtooltip
{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    color: #2E7D32;
    background-color: #EDF7EE;
    border: 1px solid #2E7D32;
    border-radius: 8px;
    padding: 10px 15px 10px 15px;
    margin-left: 10px;
	text-align: center;
}

.carderror
{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    color: #B42318;
    background-color: #FDF0EE;
    border: 1px solid #B42318;
    border-radius: 8px;
    padding: 10px 15px 10px 15px;
    margin-left: 10px;
	text-align: left;
}


.productimg {
	border: solid 1px #E1E6EC;
}

.dropbtn {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #C5CED8;
    background-color: #FFFFFF;
    color: #1B2733;
    border-radius: 50rem;
    padding: 5px 40px 5px 40px;
    margin-left: 10px;
}

.pricearea {
    padding: 55px 0px !important;
    text-align: center;
    font-size: 1.2em !important;
}

.cartitem h2 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    color: #1B2733;
}

.cartitem p {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #1B2733;
}

.cartitem td {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #1B2733;
}

.carttitles {
    background-color: #1D3B5E;
    color: #FFFFFF;
}

.carttitles th {
    text-align: center;
    padding: 18px 0px !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    background-color: #1D3B5E;
    color: #FFFFFF;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
}

.nav {
    background-color: #F9FAFB;
    padding: 20px 0px 20px 0px;
    text-align: center;
}

.navbar-brand {
    float: none;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

.image-fan-container {
    position: relative;
    max-width: 60%;
    margin: 1em auto 0;
    display: flex;
    justify-content: center;
    min-height: 14em;
}

.image-fan-stack {
    position: absolute;
    padding: 1em;
    background: #FFFFFF;
    border: 1px solid #B9AB8E;
    border-radius: .1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    transform-origin: center 325%; 
    transition: transform .5s ease-out;
}

.image-fan-card-body {
    height: 15em;
}

.image-fan-caption {
}

.image-fan-image {
    max-width: 100px;
}

.image-fan-stack:first-child {
  transform: rotate(1deg);
}

.image-fan-stack:last-child {
  transform: rotate(-1deg);
}

.image-fan-container:hover .image-fan-stack:first-child {
  transform: rotate(5deg);
}

.image-fan-container:hover .image-fan-stack:last-child {
  transform: rotate(-5deg);
}

.image-fan-stack:hover {
  z-index: 1;
}