/* Define icon states */
.button-selected {
  --border_stroke: var(--app-dark-gray);
  --border_fill: var(--app-red);
  --icon_stroke: #fff;
  --icon_fill: #fff;
  cursor: all-scroll;
  --icon_arrow_up: var(--app-red);
  --icon_arrow_left: var(--app-red);
  --icon_arrow_down: var(--app-green);
  --icon_arrow_right: var(--app-green);
}

.button-active {
  --border_stroke: var(--app-red);
  --border_fill: var(--app-light-gray);
  --icon_stroke: var(--app-dark-gray);
  --icon_fill: var(--app-dark-gray);
  cursor: auto;
  --icon_arrow_up: var(--app-red);
  --icon_arrow_left: var(--app-red);
  --icon_arrow_down: var(--app-green);
  --icon_arrow_right: var(--app-green);
}

.button-disabled {
  --border_stroke: #fff;
  --border_fill: var(--app-medium-gray);
  --icon_stroke: #fff;
  --icon_fill: #fff;
}

.button-disabled-dim {
  --border_stroke: #fff;
  --border_fill: var(--app-custom-gray);
  --icon_stroke: #fff;
  --icon_fill: #fff; 
  --icon_arrow_up: var(--app-custom-gray);
  --icon_arrow_left: var(--app-custom-gray);
  --icon_arrow_down: var(--app-custom-gray);
  --icon_arrow_right: var(--app-custom-gray);
}

.button-outline {
  --border_stroke: #fff;
  --border_fill: #fff;
  --icon_stroke: var(--app-medium-gray);
  --icon_fill: var(--app-medium-gray);
}

.button-outline-active {
  --border_stroke: var(--app-red);
  --border_fill: var(--app-red);
  --icon_stroke: #fff;
  --icon_fill: #fff;
}

.hide-arrow-up {
  --icon_arrow_up: none;
  --icon_arrow_down: none;
}

.hide-arrow-left {
  --icon_arrow_left: none;
  --icon_arrow_right: none;
}



.button-hidden {
  /* opacity: 0; */
  fill: none;
}

/* Add pointer to anythingthat needs it  */
.point-me:hover {
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent;
}

.waiting, .waiting:hover {
  cursor: wait;
}

/* but don't show the outline */
.point-me:active,
.point-me:focus {
  outline: none !important;
  box-shadow: none !important
}

/* Input formatting */
#presentation-designer label {
  margin:0px;
}

#presentation-designer .input-label {
  padding: 5px 0px;
}

#presentation-designer .input-label::after {
  content: ": ";
  white-space: pre;
}

#presentation-designer .tblabel::after,
#presentation-designer .sliderswitchcontainer::after,
#presentation-designer .mktoLabel::after,
#presentation-designer #toplabel::after,
#presentation-designer #bottomlabel::after,
#presentation-designer .acousticstoggle label:after {
  content: "";
}

#presentation-designer .cd-modal .number-input .input-label {
  display: inline-flex;
}


#presentation-designer input {
  border: none;
  padding: 5px 0px 5px 5px;
  background-color: var(--app-light-gray);
  font-size: 20px;
  outline: none;
  border-radius: 0px;
  box-shadow: none;
}

#presentation-designer input[type="radio"] {
  display: none;
  appearance: none;
}

#presentation-designer .rendertoggle,
#presentation-designer .coverageplottoggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;

}

#presentation-designer .radio-item {
  margin: 4px 0px;
  display: flex;
  align-items: center;
  gap: 4px;
}

#presentation-designer .radio-item input {
  display: inline-block;
  margin: 0px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--app-custom-gray);
  background: #fff;
  border-radius: 50%;
}

#presentation-designer .radio-item input:checked {
box-shadow: inset 0 0 0 3px white;
background-color: var(--app-red);
}

#presentation-designer .radio-label {
  user-select: none;
}

/* Fancy distance input stuff */
.distance-input {
  display: inline-flex;
  white-space: nowrap;
  max-width: 150px;
}

.sub-line .distance-input {
  max-width: 100px;
}

.sub-line > label:not(.slider),
.sub-line > .slider-container {
  padding: 15px 0px 0px 0px !important;
}

.distance-input::part(spinpart) {
  width: 1em;
	border: 0px;
	float: right;
  color: transparent;
  border: none;
  padding: 5px 0px 5px 5px;
  background-color: var(--app-light-gray);
  font-size: 20px;
  outline: none;
  border-radius: 0px;
  min-width: 0px;
}

.distance-input::part(textpart) {
  border: 1px;
	float: left;
  width: 88%;
  border: none;
  padding: 5px 0px 5px 5px;
  background-color: var(--app-light-gray);
  font-size: 20px;
  outline: none;
  border-radius: 0px;
  min-width: 0px;
}

.distance-input::part(textpart):hover, 
.distance-input::part(spinpart):hover {
  outline: none !important;
  border: 0px !important;
} 

.distance-input::part(textpart):focus, 
.distance-input::part(spinpart):focus,
.distance-input::part(textpart):active, 
.distance-input::part(spinpart):active {
  outline: none !important;
  border: 0px !important;
  box-shadow: none;
}

#urlcopy {
  visibility: none;
}