@import "colors.css";
  
/* remove all stuff */
button,
fieldset,
input,
legend,
select,
textarea {
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor:pointer;
  min-width:0;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 0 none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  border: none;
  -webkit-appearance: none;
  margin: 0;
}

input:-webkit-autofill, input:-webkit-autofill:focus, input::-webkit-autofill, input::-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px var(--color-content-card) inset !important;
  -webkit-text-fill-color: var(--color-content-font) !important;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    /*display: none;*/
    /*-webkit-appearance: none;*/
    opacity:0;
    max-width:0px;
}



.set-wrap.flex {
  display: flex;
  gap: var(--standard-padding);
  margin-bottom: var(--standard-padding);
  /*margin-top: calc(var(--standard-padding)/2);*/
  padding-right: var(--standard-padding);
}
/*
.set-wrap.flex fieldset{
  flex: 1;
}
*/

fieldset.flex-1 {
  flex:1;
}


/* build new stuff */

.secondary-nav .set-wrap {
  padding: calc(var(--standard-padding)/2);
  /*padding-top: calc(var(--standard-padding)/2);*/
  padding-top: var(--standard-padding);
  padding-bottom: var(--standard-padding);
}


.set-wrap + .set-wrap{
  margin-top: 35px;
}
fieldset {
  background-color: var(--color-content-card);
  border-radius: 8px;
  padding:0;
  /*padding-left: var(--standard-padding);*/
  pointer-events: none;
  overflow:hidden;
  z-index: 0;
  position:relative;
}
fieldset.transparent {
  background-color: transparent;
}
fieldset.full-bars {
  padding-left:0px;
}

fieldset.info {
  border: 1px solid var(--color-content-font-highlight);
}


fieldset.search {
  background-color: var(--color-content-bg-after);
}

@media (min-width: 800px) {
  .table-wrap .set-wrap.flex {
    padding-left: var(--standard-padding);
    padding-right: calc(3*var(--standard-padding));
  }
  .table-wrap .set-wrap.flex fieldset.search {
    background-color: var(--color-content-bg);
  }
}

fieldset.search div input, fieldset.search div .placeholder {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
}

fieldset.search .icon svg {
  width:1.5rem;
}


fieldset.prefix-icons .field-wrap {
  padding-left: 0 !important;
  margin-left: calc(var(--standard-padding) + 1.8rem);
}


fieldset div.icon {
  position:absolute;
  width:calc(2*var(--standard-padding) + 1.8rem);
  height:100%;
  z-index: 100;
  padding-left: var(--standard-padding);
  padding-right: var(--standard-padding);
  pointer-events: all;
}
fieldset div.icon svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color:grey;
}
fieldset div.icon.active svg {
  color:var(--color-content-font);
}


fieldset .delete {


  background-color: var(--color-ui-delete);
  color: var(--color-ui-frame-font);

  display:flex;
  flex:none !important;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  padding: 0;
  margin: 0;

  position:relative;
  right:0px;
  max-width:0px;

  transition: max-width .5s ease-in-out;

  font: 1.3rem / 1.5 sans-serif;

}

fieldset .delete.js-max-width {
  max-width:100%;
}

fieldset .delete span{
  padding: 0 var(--standard-padding) 0 var(--standard-padding);
}


.legend {
  font: 1.4rem / 1.8 sans-serif; /*1.25rem / 1.5 sans-serif;*/
  font-weight:bold;
}

.set-legend {
  padding: 0 var(--standard-padding) calc(var(--standard-padding)*0.5) var(--standard-padding);
  color:grey;
  text-transform: uppercase;
}
.set-caption {
  padding: calc(var(--standard-padding)*0.5) var(--standard-padding) 0 var(--standard-padding);
  color:grey;
}




.field-wrap.flex {
  display:flex;
  padding-top: var(--standard-padding);
}




input,
select,
textarea {
  display: inline-block;
  flex:1;

  margin-bottom: 0;

  padding: 0.5rem 0;
  font: 1.5rem / 1.5 sans-serif;
  color:var(--color-content-font);
  padding-right:var(--standard-padding);

}
input,
textarea {
  text-align: left;
}
select,
input[type=number],
input[type=date] {
  -moz-appearance: textfield;
  text-align: right;
}
textarea {
  resize: vertical;
}

input::-webkit-date-and-time-value{ text-align:right; }

input, select {
  white-space: nowrap;
  text-overflow: ellipsis;
}





















/*label tag used as general wrapper*/
label {
  position:relative;
  display:flex;
  cursor:pointer;
  pointer-events: auto;
  flex:1;
  padding: 0 !important;
  
  /*
  background-color: green;
  border-radius: 5px;
  padding: calc(var(--standard-padding)) 0 var(--standard-padding) var(--standard-padding);
  */
}

fieldset label {
  padding-left:var(--standard-padding) !important;
}

/*
really weired behavior, the border radius destroys overlov things and then the error texts are cut down

maybe use css isolation:isolate on the error div

*/

fieldset label:not(.btn):first-of-type.hovered {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
fieldset label:not(.btn):last-of-type.hovered {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}


fieldset.full-bars .label{
  padding-left:calc(var(--standard-padding)*-1);
}


.field-wrap.flex label, .field-wrap.flex .label {
  display:block;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: unset !important;
}


/*use for whole label bar*/
label:not(:first-of-type){
  /*border-top: .5px solid rgba(128,128,128,.5);*/
}

fieldset:not(.full-bars) label:not(:first-of-type) .field-wrap{
  border-top: .5px solid rgba(128,128,128,.5);
}
fieldset.full-bars label:not(:first-child):not(.context){
  border-top: .5px solid rgba(128,128,128,.5);
}
fieldset.full-bars label .field-wrap{
  padding-left: var(--standard-padding);
}
fieldset.full-bars label .field-wrap .icon.invalid{
  margin-left: calc(var(--standard-padding)*-1);
}





label div:not(.img-wrap) {
  position: relative;
  flex: 1;
  display: flex;
  overflow-x: hidden;
}


label .img-wrap {
  position:relative;
  width:100%;
  height:80px;
}
label .img-wrap img {
  position: relative;
  transform: translate(0%, -50%);
  top:50%;
  left:0%;
}



/*icon in input fields*/
label .icon {
  display: inline-block;
  position: relative;
  top: 0px;
  pointer-events: auto;
  color: grey;
  /*padding: calc(var(--standard-padding)*0.5) var(--standard-padding) calc(var(--standard-padding)*0.5) 0;*/
  /*padding: calc(var(--standard-padding)*0.75) var(--standard-padding) calc(var(--standard-padding)*0.75) 0;*/
  padding:0;
  padding-right: var(--standard-padding);

}

label .icon.add {
  color: var(--color-ui-add);
  pointer-events: none !important;
}
label .icon.remove {
  color: var(--color-ui-delete);
  pointer-events: auto;
}
label .icon.checked {
  color: var(--color-content-font-highlight);
}
label .icon.checked:not(.after) {
  padding-left: .2rem;
  padding-right: calc(var(--standard-padding) + .2rem);
}
label .icon.add::before, label .icon.remove::before {
  content: '';
  position: absolute;
  left:calc(50% - (var(--standard-padding)/2));
  top:50%;
  transform:translate(-50%, -50%);
  background-color:#fff;
  width:calc(1.8rem - 2px);
  height:calc(1.8rem - 2px);
  border-radius: 50%;
}
label .icon svg {
  position:relative;
  top:50%;
  left:0px;
  transform:translateY(-50%);
  width:1.8rem;
}
label .icon.checked svg {
  width:1.4rem;
}



/* clear icon in text input fields */
label .icon.after {
  padding-left: var(--standard-padding);
  margin-left:auto;
}
label .icon.after.checked {
  margin-left: auto;
}


label .icon.after svg {
  width:1.2rem;
}
label .icon.after.arrow svg {
  width:1.0rem;
}
label .icon.after.checked svg {
  width:1.4rem;
}


.icon.invalid div.errors {
  position:absolute;
  transform:translateY(-50%);
  top:50%;
  left:100%;
  background-color:var(--color-menu-bg);
  box-shadow: 3px 3px 5px rgb(0 0 0 / 0.2);
  border-radius: 5px;
  pointer-events:none;
  display: none;
  /*min-width: 200px;*/
  padding:var(--standard-padding);
  max-width: 60vw;
  overflow:hidden;
}
.icon.invalid:hover div.errors {
  display:flex;
}
.icon.invalid div.errors ul {
  text-align:left;
  list-style:none;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  flex:1;
  display:flex;
  flex-direction: column;
  width:max-content;
}
.icon.invalid div.errors ul li{
  margin-left: var(--standard-padding);
  /*white-space: nowrap;*/
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  flex: 1;
  display:inline-flex;
  max-width:100%;
  word-break: break-word;
}
.icon.invalid div.errors ul li + li, .icon.invalid div.errors ul ul span + li {
  margin-top: calc(var(--standard-padding)/2);
}


label.disabled {
  pointer-events: none;
}
label.disabled .icon.after.arrow {
  display: none;
}
label.disabled .icon.after.clear {
  display: none;
}
label.disabled input[type="text"] {
  text-align:right;
}
label.disabled .preview {
  padding-right: var(--standard-padding);
}

label.total input{
  font-weight: bold;
}


.icon.clear {
  opacity:0;
  
}
/*hide clear when input empty*/
input:placeholder-shown + .placeholder ~ .icon.clear {
  opacity:0;
}


input:focus:not(:placeholder-shown) + .placeholder ~ .icon.clear{
  opacity:1;
}

/* in search also not on focus */
.search label div input:not(:placeholder-shown) + .placeholder ~ .clear{
  opacity:1;
}



label span.after:not(.icon) {
  align-self:center;
  font: 1.3rem / 2rem sans-serif;
  padding-right: var(--standard-padding);
}



.icon.apple.interaction {
  color:var(--color-content-font-highlight);
}





.js-swipe-left {
  position:relative;
  width:400px;
  height:300px;
  background-color: black;
  pointer-events: auto;
}













/*select inline with labels*/


select {
  position:relative;
  width: auto;
  text-align-last: right;
}
.label {
  display:inline-block;
  position:relative;
  min-width: 110px;
  max-width: 110px;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: center;
  padding-right: var(--standard-padding);
  font: 1.5rem / 2.2 sans-serif;
  color: var(--color-content-font);
}

.label.split {
  min-width: 0px;
  max-width: none;
  padding-right: 0;
}
.label.split.btn-context {
  font-size: var(--font-size);
  line-height: var(--font-size);
  text-wrap: wrap;
}

.label::first-letter {
  text-transform: uppercase;
}

.label.radio {
  font: 1.5rem / 2.2 sans-serif;
}


label.btn div .label {
  max-width:unset;
  min-width:unset;
  width:100%;
  color:var(--color-content-font-highlight);
  text-align: center;
}
label.btn.attention div .label, .menu-option.btn.attention{
  color:var(--color-ui-delete);
}

.full-bars label.btn div .label {
  padding-right: calc(2*var(--standard-padding));
}




/*custom placeholder*/
input::placeholder,
textarea::placeholder {
  opacity: 0; /* Firefox */
}
.placeholder {
  display:inline-block;
  position:absolute;
  top:0px;
  width:100%;
  font: 1.5rem / 1.5 sans-serif;
  opacity: 0;
  pointer-events: none;
  padding: .5rem 0;
  padding-right: var(--standard-padding);
  color:grey;
  pointer-events: none;
  text-align:left;
  z-index: 1;
}
.icon.invalid + input + .placeholder:not(.center) {
  margin-left:calc(var(--standard-padding) + 1.8rem);
}
.placeholder::first-letter {
  text-transform: uppercase;
}
.placeholder.center {
  text-align: center;
}
.full-bars .placeholder.center {
  padding-right: calc(var(--standard-padding)*3);
}
.placeholder.right {
  text-align: right;
}
input:placeholder-shown + .placeholder, textarea:placeholder-shown + .placeholder {
  opacity:1;
}


.preview {
  flex:1;
  position:relative;
  top:0px;
  width:100%;
  font: 1.5rem / 1.5 sans-serif;
  pointer-events: none;
  padding: .5rem 0;
  color:grey;
  pointer-events: none;
  text-align: right;
}
label:not(.preview-naive) .preview::first-letter {
  text-transform: uppercase;
}
.preview.left {
  text-align: left;
}





label.toggle-input {
  display:flex;
}

/*label class in toggle input*/
label.toggle-input > .label {
  align-self: center;
}






.radio-checkbox {
  position: absolute;
  visibility: hidden;
}

label .icon.radio-check {
  padding-right: calc(var(--standard-padding) * 2);
}
label .icon.radio-check svg{
  left: 5px;
  width: calc(1.8rem - 10px);
  color: var(--color-content-card);
}


.radio-check::before{
  content: "";
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 6px;
  background: var(--color-content-card);
  border: 1.5px solid var(--color-content-card);
}
/*
.radio-checkbox:checked + .radio-check::before {
  background: var(--color-content-font-highlight);
  border: 1.5px solid var(--color-content-font-highlight);
}
*/

.radio-checkbox:checked + .radio-check svg {
  color: var(--color-content-font-highlight);
}


.toggle-switch {
  display: inline-block;
  background: var(--color-ui-disabled);
  border-radius: 16px;
  width: 3.8rem;
  max-width: 3.8rem;
  height: 2.4rem;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
  margin-left:auto;
  margin-right: var(--standard-padding);
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  align-self:center;
}
.toggle-switch:before, .toggle-switch:after {
  content: "";
}
.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: calc(2.4rem - 4px);
  height: calc(2.4rem - 4px);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.25s;
}

.toggle-checkbox:checked + .toggle-switch {
  background: var(--color-ui-enabled);
}
.toggle-checkbox:checked + .toggle-switch:before {
  left: calc(3.8rem - (2.4rem - 2px));
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}


input[type="radio"]{
  display:none;
}
input[type="radio"] + .icon.checked {
  opacity:0;
}
input[type="radio"]:checked + .icon.checked {
  opacity:1;
}


input[type="radio"] + .checked ~ div > .preview {
  opacity:0;
}
/* this would also hide the arrow right icon in combo-radios when not selected -> but users don't understand there are combo options without the arrow
input[type="radio"] + .checked ~ div > .icon {
  opacity:0;
}
*/


input[type="radio"]:checked + .checked ~ div > .preview, input[type="radio"]:checked + .checked ~ div > .icon {
  opacity:1;
}



input[type="radio"] + .img-wrap img {
  transition: filter 0.3s ease-in-out, height 0.3s ease-in-out, width 0.3s ease-in-out;
  filter: grayscale(100%);
}
input[type="radio"]:checked + .img-wrap img {
  filter: grayscale(0%);
  height:80px;
  width:80px;
}


input.center{
  text-align: center;
  padding-left: calc(var(--standard-padding) + 1.2rem)
}
/*
.full-bars input.center {
  padding-left: calc(var(--standard-padding)/2 + 1.2rem)
}
*/
.icon.invalid + input.center {
  padding-left: 0;
  padding-right: calc(var(--standard-padding) + 0.6rem)
}

.full-bars .icon.invalid + input.center {
  padding-left: 0.9rem;
}

input.monetary {
  text-align: right;
}
input.monetary.positive {
  color: var(--font-color-income)
}
input.monetary.negative {
  color: var(--font-color-expense)
}

.screen[data-view="display"] input.monetary {
  font-weight: bold;
}






.radios {
  font-size: 0;
  position:relative;
  background-color:var(--color-ui-disabled);
  border-radius:8px;
  z-index:1;
  white-space: nowrap;
  padding: 0px !important;
  margin: 0px !important;
}
label.radio-slide {
  padding:0px !important;
  margin: 0px !important;
  position:relative;
  display:inline-block;
  z-index:3;
}

label.radio-slide .label{
  font: 1.2rem / 2.4 sans-serif;
  padding:0 !important;
  margin:0 !important;
  transition: all 0.3s;
  color:var(--color-content-font);
  -webkit-text-stroke: .5px transparent;
  text-align: center;
  min-width:100%;
  max-width:100%;
}


/* one item */
.radio-slide:nth-child(2):nth-last-child(2) {
  width: 100% !important;
  min-width:100% !important;
  max-width:100% !important;
}

/* two items */
.radio-slide:nth-child(2):nth-last-child(4),
.radio-slide:nth-child(2):nth-last-child(4) ~ .radio-slide {
  width: 50% !important;
  min-width:50% !important;
  max-width:50% !important;
}

/* three items */
.radio-slide:nth-child(2):nth-last-child(6),
.radio-slide:nth-child(2):nth-last-child(6) ~ .radio-slide {
  width: 33.3333% !important;
  min-width:33.3333% !important;
  max-width:33.3333% !important;
}

/* four items */
.radio-slide:nth-child(2):nth-last-child(8),
.radio-slide:nth-child(2):nth-last-child(8) ~ .radio-slide {
  width: 25% !important;
  min-width:25% !important;
  max-width:25% !important;
}


















input[type="radio"]:checked + .radio-slide > .label {
  color:var(--color-content-font);
  /*font-weight:600;*/
  -webkit-text-stroke: .5px var(--color-content-font);
}


.radios > .radio-slider {
  font: 1.2rem / 2.4 sans-serif;
  position:absolute;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  width:calc(100% / 3 - 6px);
  height:calc(100% - 6px);
  margin:0;
  background:var(--color-content-card);
  transition:transform 1s;
  border-radius:5px;
  animation-timing-function: ease-in-out;
  animation-duration:.3s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
  z-index:2;
  box-shadow: 2px 2px 5px rgb(0 0 0 / 0.3);
}
#login:checked  ~ .radio-slider{ left:3px; }
#register:checked  ~ .radio-slider{ left:calc(100% / 3 + 3px); }
#demo:checked  ~ .radio-slider{ left:calc(200% / 3 + 3px); }


@keyframes login{ 0%, 70% { transform:scale(1); } }
@keyframes register{ 0%, 70% { transform:scale(1); } }
@keyframes demo{ 0%, 70% { transform:scale(1); } }


@keyframes input4{ 30%, 70% { transform:scale(0.5); } }
@keyframes input5{ 30%, 70% { transform:scale(0.5); } }







/*STARTFORMS*/


.start-forms {
  position:relative;
  top:0px;
  left:0px;
  width: 300vw;
  flex:1;
  display:flex;
}

.start-forms form {
  padding:0;
  padding-top: calc(var(--standard-padding)*2);
  padding-bottom: calc(var(--standard-padding)*2);
  padding-left: max(40px, 10vw);
  padding-right: max(40px, 10vw);
  margin:0px;
  height: 100%;
  flex:1;
  text-align:center;

  display:flex;
  flex-direction:column;
  width:100vw;

  padding-left: clamp(40px, 50vw, ((100vw - 500px) / 2));
  padding-right: clamp(40px, 50vw, ((100vw - 500px) / 2));
  max-width: 100vw;


}

/*
.start-forms form > div {
  align-self:center;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
}
*/

.form-header {
  text-align: center;
}

.start-forms form .form-header {
  margin:0 0 auto 0;
  padding-bottom:calc(var(--standard-padding)*2);
}
.start-forms form .form-content {
  margin:auto 0 auto 0;
}
.form-content-prefix, .form-content-suffix {
  padding-top:35px;
  padding-bottom:35px;
}


.start-forms .form-content-prefix {
  margin-top:-15px;
  padding-top:0px;
  padding-bottom:15px;
}

.start-forms .form-content-suffix {
  margin-bottom:-15px;
  padding-top:15px;
  padding-bottom:0px;
}
.form-content-prefix p, .form-content-suffix p{
  font-size: 1.2rem;
  line-height: 1.8rem;
  text-align:center;
}
.form-content-suffix p {
  display: inline-block;
}
.start-forms form .form-actions {
  margin:auto 0 0 0;
}


.splash-screen .set-wrap {
  margin-top: var(--standard-padding);
  margin-bottom: var(--standard-padding);
}



.start-forms form input{

  /*border-radius: 5px;*/
}

form.login-form {
  /*background-color:red;*/
}
form.register-form {
  /*background-color:yellow;*/
}
form.demo-form {
  /*background-color:green;*/
}



.start-forms fieldset.transparent .label {
  color: var(--color-ui-frame-font);
}


.demo-form img {
  width:50px;
  height:50px;
}

.btn::first-letter {
  text-transform: uppercase;
}

.btn {
  color:var(--color-content-font-highlight);
}



.btn:not(.menu-option) {
  /*background-color: var(--color-ui-disabled);*/
  background-color: var(--color-content-card);
}


/*for button type highlights in splitted labels*/
.btn-start {
  background-color: var(--color-content-card);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-left: var(--standard-padding) !important;
}
.btn-end {
  background-color: var(--color-content-card);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-right: var(--standard-padding) !important;
}

.icon.btn-start, .icon.btn-end {
  padding-right: var(--standard-padding) !important;
  padding-left: var(--standard-padding) !important;
}

.icon.btn-context-inline {
  margin-top: var(--standard-padding);
  margin-bottom: var(--standard-padding);
  padding-top: calc(var(--standard-padding)*0.9);
  padding-bottom: calc(var(--standard-padding)*0.9);
}



.freetext {
  font: 1.2rem / 2.4 sans-serif;
}



form ul {
  text-align: left;
  list-style: circle inside;
  list-style: none;
}

form ul li {
  margin-left: var(--standard-padding);
}

li.valid,
li.invalid {
  color:grey;
}

form ul li::before, div.errors ul li::before {
  content: "\2022";
  font-weight:bold;
  display: inline-block;
  width: .8em;
  height: 1rem;
  margin-left: calc(var(--standard-padding)*-1);
}

form ul li.valid::before, div.errors ul li.valid::before {
  content: "\2713";
  color:green;
  margin-right: .5rem;
}

form ul li.invalid::before, div.errors ul li.invalid::before {
  content: "\00D7";
  color:red;
  margin-right: .5rem;
}






fieldset:not(.btn-wrap) {
  overflow: visible !important;
}
.field-wrap {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: clip !important;
  /*z-index:0;*/
}
label {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: clip !important;
}
.icon.invalid {
  overflow: visible !important;
}








.txt-right {
  text-align: right !important;
}

.txt-left {
  text-align: left !important;
}

.font-color-content {
  color: var(--color-content-font) !important;
}




























/*OLD STYLES TO BE REMOVED, BUT TESTED BEFORE*/




  /*
  input:focus,
  select:focus,
  textarea:focus {
    background-color: var(--color-menu-bg-hover);
  }

  */
  



  
textarea {
  min-height: 10rem;
}
  
  

  
  /*
  select {
    background-image: url("./images/icons/app-icon.svg") no-repeat center right 0.75rem;
  }
  */
  

  input[type="checkbox"] {
    vertical-align: middle;
  }
  

  

  





  
  /*
  button {
    font: 1.25rem sans-serif;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
  }
  button:focus {
    outline: none;
    box-shadow: 0 0 0 4px lightcoral;
  }
  
  
  button[type="submit"] {
    background-color: turquoise;
    color: white;
  }
  
  button[type="submit"]:hover {
    background-color: orange;
  }
  
  button[type="reset"] {
    text-decoration: underline;
    margin-left: 1rem;
  }
  
  button[type="reset"]:hover {
    text-decoration: none;
  }

*/



  form .error {
    position: relative;
    display:inline-block;
    align-self:center;
    padding: 0;
    border-radius: 5px;
  }
  form .error .error-container {
    padding: calc(var(--standard-padding)/2);
  }
  form .error div {
    text-align: left;
  }
  form .error div:not(.hidden) + div{
    margin-top: calc(var(--standard-padding)/2);
  }
  form .error span {
    font: 1rem / 1.4 sans-serif;
  }
  form .error:empty {
      /*opacity: 0;*/
      background: transparent;
      display:none;
      padding:0;
  }

   




  .fieldset-btn {
    cursor:pointer;
    position:relative;
  }

  @media (min-width: 800px) {
    .fieldset-btn.small-only {
      display: none;
    }
  }

  .fieldset-btn.margin-left-auto {
    margin-left: auto;
  }


  .fieldset-btn svg, .submenu svg {
    display:inline-block;
    position:relative;
    left:0;
    /*height:1.8rem;*/
    height:2rem;
    padding: 0;
    transform: translateY(-50%);
    top:50%;
  }
  .fieldset-btn > svg {
    color: grey;
  }

  .fieldset-btn.prominent svg {
    color: var(--color-content-font-highlight);
  }

  .fieldset-btn.prominent.hovered svg {
    color: grey;
  }




  .fieldset-btn .submenu, .fieldset-btn .submenu .menu-option {
    z-index: 0;
  }

  .fieldset-btn > .submenu:after {
    /*this element is for browser view when submenu is expanded, to make sure footer does not cover submenu*/
    content: "";
    position:absolute;
    top:0px;
    left:0px;
    height:calc(100% + 25px);
    width:1px;
    display:block;
    pointer-events: none;
  }











.flex.grid-container {
  display: grid;

  grid-template-columns: 1fr min-content;
  grid-template-rows: min-content 1fr;
  grid-template-areas:
    "legend legend"
    "fieldset buttons";
  grid-auto-flow: row;
  row-gap: 0;
  column-gap: calc(var(--standard-padding)*2);

  row-gap: 0;
  column-gap: 0;
  padding-right:0;
  padding-left:0;
  margin-right:0;
  margin-left:0;
}


.flex.grid-container .set-legend {
  grid-area: legend;
}

.flex.grid-container fieldset {
  grid-area: fieldset;
}



.flex.grid-container .fieldset-btn-wrapper {
  grid-area: buttons;
  display:inline-flex;
  gap: calc(var(--standard-padding)*2);
  gap: 0;
  padding-right:0;
  padding-left:0;
  margin-right:0;
  margin-left:0;
}

.fieldset-btn {
  margin-left: calc(2*var(--standard-padding));
}


.fieldset-btn-wrapper .fieldset-btn:first-of-type {
  margin-left: var(--standard-padding);
}
.fieldset-btn-wrapper .fieldset-btn:last-of-type {
  margin-right: var(--standard-padding);
}




/*
.submenu li {
  display: grid;

  grid-template-columns: 10px 1fr 15px;
  grid-template-rows: 1fr;
  grid-template-areas:
    "prefix text suffix";
  grid-auto-flow: row;
  row-gap: 0;
  column-gap: 0;

  padding-right:0;
  padding-left:0;
  margin-right:0;
  margin-left:0;
}

.submenu li .prefix{
  grid-area: prefix;
}
.submenu li .menu-option{
  grid-area: text;
}
.submenu li .prefix{
  grid-area: suffix;
}

*/





.mx-css-range-wrap {
  display: flex;
  flex-direction: column;
}

.mx-css-range-wrap input:disabled {
  cursor: auto;
}



[class*='mx-css-range-value'] {

  padding:0;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:0px;
  padding-right:0px;

  margin:0;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;

  font: 1.5rem / 1 sans-serif;
  font-size: calc(var(--font-size)*1.2);
  color:var(--color-content-font);





  text-align:unset;

  white-space: nowrap;
  text-overflow: ellipsis;

}

.mx-css-range-value-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  /*font-size: 24px;*/
  font-size: calc(var(--font-size)*1.2);
  color: var(--color-content-font);

  padding-top:calc(1.5*var(--standard-padding));
  padding-bottom:var(--standard-padding);
}


.mx-css-range-value-min, input.mx-css-range-value-min {
  flex:1;
  text-align: left !important;
  color: var(--color-content-font) !important;
  -webkit-text-fill-color: var(--color-content-font);
  opacity: 1; /* required on iOS on disabled inputs*/
}

.mx-css-range-value-max, input.mx-css-range-value-max {
  flex:1;
  text-align: right !important;
  color: var(--color-content-font) !important;
  -webkit-text-fill-color: var(--color-content-font);
  opacity: 1; /* required on iOS on disabled inputs*/
}

.mx-css-range-slider-wrap {
  position: relative;
  margin: 0;
  height:calc(2.4rem);
}

input[class*='mx-css-range-slider']{
  -webkit-appearance: none; 
  appearance: none;
  height: 2px;
  width: 100%;
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  background-color: grey;
  border-radius: 1px;
  pointer-events: none;

  margin:0;
  padding:0;

}




input[class*='mx-css-range-slider']::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all !important;
  width: calc(2.4rem - 4px);
  height: calc(2.4rem - 4px);;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
input[class*='mx-css-range-slider']::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all !important;
  width: calc(2.4rem - 4px);;
  height: calc(2.4rem - 4px);;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);;
  cursor: pointer;
}


/*
input[class*='mx-css-range-slider']::-webkit-slider-thumb:hover {
  background: aqua;
}
*/

input[class*='mx-css-range-slider']::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25), 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25), 0 0 5px rgba(0, 0, 0, 0.25);
  border: .5px solid #808080;
}










.mx-css-range-slider-min {
  height: 2px;
  background-color: transparent !important;
  z-index: 1;
}

.mx-css-range-slider-max {
  z-index: 0;

}


.mx-css-range-label-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: grey;

  padding-top: var(--standard-padding);
  padding-bottom:calc(1.5*var(--standard-padding));
}

[class*='mx-css-range-label'] {
  font-size: var(--font-size);
}




.subslide > .mx-css-range-wrap {
  padding-right: calc(2*var(--standard-padding))
}