/* ************************************* */
/*                                       */
/* Form                                  */
/*                                       */
/* ************************************* */

/* ******************************************************* */
/* Variables: LMd theme -> Fonts and typography            */
/* ******************************************************* */

:root,
[data-theme="default"] {
    --font-form-size: 16px;
    --font-form: 'Fira Sans',Helvetica,Arial,sans-serif;
}


/* ************************************* */
/* Textfields                            */
/* ************************************* */

span.addtobasket_input input[type=text],
.input[type=text],
.input--text {
  font-family: var(--font-form);
  font-size: var(--font-form-size);
  padding:10px 5px 11px 5px;
  border:1px solid var(--color-grey-light);
}

span.addtobasket_input input[type=text],
.input--xs {
  width:40px;
  text-align:center;
}

span.addtobasket_input input[type=text] {
  font-family: var(--font-form);
  font-size: var(--font-form-size);
  padding:10px 5px 11px 5px;
  border:1px solid var(--color-grey-light);
  width:40px;
  text-align:center;
  height:unset;
}


/* ************************************* */
/* Button                                */
/* ************************************* */

.button {
  font-family: var(--font-secondary);
  font-size: 14px;
  padding:10px;
  display:inline-block;
  background:var(--color-accent);
  border:1px solid transparent;
  position:relative;
  color:var(--color-light);
  text-align:center;
  box-shadow: 2px 2px 0 0 rgb(0,0,0,0.2);
  border-radius: 4px;
  cursor:pointer;
}

.button:hover {
  background:var(--color-accent-light);
}

.button--outline {
  border:1px solid var(--color-accent);
  background: var(--color-light);
  color:var(--color-dark);
}

.button--block {
  display:block;
}

.button--wide {
  padding-left:30px;
  padding-right:30px;
}

.input + .button {
    margin-left:10px;
}


/* ************************************* */
/* Buttongroup                           */
/* ************************************* */

.buttongroup {
  border-radius: 4px;
}

.buttongroup--hori {
  background:var(--color-accent);
  padding:10px 10px 12px 10px;
}

.buttongroup > span {
  font-family: var(--font-secondary);
  font-size: 14px;
  padding:14px 8px 14px 8px;
  position:relative;
  color:var(--color-light);
}

.buttongroup--hori > span {
  display:inline-block;
  margin-right:5%;
    font-size:16px;
}

/*.buttongroup--hori > span {
  display:inline-block;
  margin-right:-4px;
  background:#55a0b5;
}*/

.buttongroup--verti > span {
  display:block;
  text-align:center;
  padding:12px 15px 20px 15px;
  font-size:16px;
}

.buttongroup .button {
  border:none;
  width:47%;
  margin-right:1%;
  margin-left:1%;
  background:var(--color-light);
  color:var(--color-accent);
  font-size:16px;
  padding:10px 7px;
}

.buttongroup--hori .button {
  width: 45%;
}
.buttongroup--hori span {
 margin-right: 1%;
}

.buttongroup .button:last-of-type {
  border-right:0;
}

.buttongroup--verti {
  background:var(--color-accent);
  padding:10px 10px 12px 10px;
}

.buttongroup--verti > span {
  padding:10px 0 20px 0;
}


.buttongroup--verti .button span {
  font-size:14px;
}

/* ************************************* */
/* Buttons                               */
/* ************************************* */

.buttons {
  display:flex;
  justify-content: space-between;
  column-gap: 20px;
}

.buttons .button{
 /* flex: 1 1 0;*/
  margin-bottom:20px;
}

.buttons .button.active{
  color:var(--color-accent);
  background-color:var(--color-light);
  border-color:var(--color-light);
  border-radius: 0;
  box-shadow: none;
  cursor: default;

}

.buttons--hori {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}