body{
	background-color: #ededed;
}

h1,h2,h3,h4,h5,h6{
	color:hsl(0, 0%, 30%);
}

footer{
	margin-top: 1.5rem !important;
	background-color: #fff;
	position:absolute;
    bottom: 0;
	width: 100%;
}

.box-element{
	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
	background-color: #fff;
	border-radius: 4px;
	padding: 10px;
}

.thumbnail{
	width: 100%;
	height: 200px;
	-webkit-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
    -moz-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
    box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
}

.product{
	border-radius: 0 0 4px 4px;
}

.navbar-light{
	background-color: #ffffff!important;
}

#price{
	text-align: right;
}

#store-table{
	margin-bottom: 0px;
}

#cart-icon{
	width:40px;
	display: inline-block;
	margin-left: 15px;
}

#tf-icon{
	width:75px;
	display: inline-block;
	margin-left: 5px;
}

#tf-icon-foot{
	width:50px;
	display: inline-block;
	margin-left: 5px;
}

#cart-total{
	display: block;
	text-align: center;
	color:#fff;
	background-color: red;
	width: 20px;
	height: 25px;
	border-radius: 50%;
	font-size: 14px;
}

.col-lg-4, .col-lg-6, .col-lg-8, .col-lg-12{
	margin-top: 10px;
}

.btn{
	border-radius: 0;
}

.row-image{
	width: 100px;
}

.form-field{
	width:250px;
	display: inline-block;
	padding: 5px;
}

.cart-row{
	display: flex;
    align-items: stretch;
    padding-bottom: 5px;
    margin-bottom: 2px;
    border-bottom: 1px solid #ececec;
}

/* capacity badge */
.cap {
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

.cap-green { color: #1f7a1f; }
.cap-orange { color: #c77700; }
.cap-red { color: #b00020; }

/* grid layout for discipline rows */
.cart-row-perf {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "disc cap"
    "perf ml";
  column-gap: 12px;
  row-gap: 6px;
}

/* map areas */
.cart-row-perf .grid-disc { grid-area: disc; }
.cart-row-perf .grid-cap  { grid-area: cap;  align-self: end; }
.cart-row-perf .grid-perf { grid-area: perf; }
.cart-row-perf .grid-ml   { grid-area: ml; }

/* make selects/inputs not overflow on iOS */
.cart-row-perf select,
.cart-row-perf input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile layout as you described */
@media (max-width: 768px) {
  .cart-row-perf {
    grid-template-columns: 1fr;
    grid-template-areas:
      "disc"
      "cap"
      "perf"
      "ml";
  }

  .grid-cap { align-self: start; }
}

@media (min-width: 769px) {

  /* 50% / 50% main grid */
  .cart-row-perf {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "disc cap"
      "perf ml";
  }

  /* Capacity aligned right */
  .cart-row-perf .grid-cap {
    justify-self: end;
    text-align: right;
  }

  /* Discipline dropdown not too wide */
  .cart-row-perf .grid-disc select {
    width: auto;
    max-width: 420px;
  }

  /* === Meldeleistung mini-grid === */
  .cart-row-perf .grid-ml {
    display: grid;
    grid-template-columns: auto 200px;  /* label | input */
    align-items: center;
    gap: 8px;
    justify-self: end;   /* push whole ML block to the right */
    text-align: right;
  }

  .cart-row-perf .grid-ml label {
    white-space: nowrap;
    text-align: right;
    margin: 0;
  }

  .cart-row-perf .grid-ml input {
    width: 200px;
    max-width: 100%;
  }
}

/* tiny spinner */
.perf-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: perf-spin 0.8s linear infinite;
  opacity: 0.75;
}

@keyframes perf-spin {
  to { transform: rotate(360deg); }
}

/* highlight on update */
.perf-updated {
  animation: perf-flash 900ms ease-out;
}

@keyframes perf-flash {
  0%   { background: rgba(255, 230, 150, 0.9); }
  100% { background: transparent; }
}

.quantity{
	display: inline-block;
	font-weight: 700;
	padding-right:10px;
}

.chg-quantity{
	width: 18px;
	cursor: pointer;
	display: block;
	margin-top: 5px;
	transition:.1s;
}

.chg-quantity:hover{
	opacity: .6;
}


.hidden{
	display: none!important;
}

.nav-item a.nav-link:hover{
	color: black;
}

.nav-item a.nav-link{
	color: #9e9e9e;
}

#international-athlete {
	text-align: center;
}

#parent {
	align-items: center;
    justify-content: center;
}

.on-click-a:hover {
	text-decoration: underline!important;
	cursor: pointer!important;
}