/* ************************************* */
/*                                       */
/* 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--hori--digi {
  background-color: #EA8EA4;
}

.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 .button.button--left {
  width:37%;
  background-color: #D7E4EE;
}
.buttongroup .button.button--right {
  width:59%;
  background-color: #D7E4EE;
}

.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--digi,
.buttongroup--verti--kombi,
.buttongroup--verti--papier {
  border-radius: 0;
  padding: 20px 10px 50px 10px;
}
.buttongroup--verti--digi {
  background-color: #EA8EA4;
}
.buttongroup--verti--kombi {
  background-color: #89B881;
}
.buttongroup--verti--papier {
  background-color: #EEB546;
}

.buttongroup--verti--digi .button,
.buttongroup--verti--kombi .button,
.buttongroup--verti--papier .button{
    background-color: #D7E4EE;
    border-radius: 0;
    border: 1px solid #000000;
    color: #000000;
    box-shadow: none;
    font-weight: bold;
    font-family: var(--font-first);
}

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

.buttongroup--verti .button span {
  font-size:14px;
}
.buttongroup--verti--digi .button span,
.buttongroup--verti--kombi .button span,
.buttongroup--verti--papier .button span {
  font-weight: normal;
}


/* ************************************* */
/* 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;
}