#dialog_message {
  justify-content: center;
}

#dialog_ok, #dialog_cancel {
  color: var(--app-red);
  width: 30%;
  text-align: center;
  line-height: 60px;
}

.mycheck {
  width: 19px;
  height: 19px;
  border: 2px solid var(--app-dark-gray);
  border-radius: 4px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: bottom;
  text-align: center;
  line-height: 1;
  color: #fff;
}

.dialogoptions input:checked + label .mycheck {
  background-color: var(--app-red);
}

.icon-toggle {
  text-align: center;
}

.inline-svg {
  width: 100%;
}

label[for="acoustics"] {
  width: 200px;
} 

.togglebuttons.acousticstoggle {
  flex-grow: 1;
  flex-shrink: 1;
}

.acousticstoggle label {
  display: block !important;
  background-color: var(--app-light-gray) !important;
  color: var(--app-medium-gray) !important;
  text-align: center !important;
  text-shadow: none;
  font-weight: 700;
  font-size: 13px !important;
  border: 1px solid var(--app-dark-gray);
  width: 72px;
  line-height: 26px;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
}

.acousticstoggle input:checked + label{
  background-color: var(--app-red) !important;
  color:#fff !important;
}

#acousticlink a{
  font-size: 12px;
  color: var(--app-red) !important;
}

#acousticlink a:visited {
  color: var(--app-red) !important;
}

#edit-modal input {
  flex: auto;
  width: auto;
}

#legend-modal .cd-modal-next::before,
#edit-modal .cd-modal-next::before,
#tutorial-modal .cd-modal-next::before {
  content: "RETURN TO DESIGN >";
} 

#request-modal .cd-modal-title::after {
  content: " QUOTE";
}

#fillform:before {
  content: "Fill out this form and a Biamp expert will reach out to you via phone or email. In some regions we may share your contact details and inquiry with one of our qualified third-party sales partners to follow up directly to ensure better local service.";
}

#invalidform:before {
  content: "All fields are required";
  color: var(--app-red);
  align-self: center;
}

.cd-modal-back[data-this="#request-modal"]::after {
  content: "CANCEL";
}

.cd-modal-next[data-this="#request-modal"]::after {
  content: "SUBMIT";
}

.mktoForm {
  flex:auto;
  display: flex;
  flex-flow: column;
  margin-top: 16px;
}

.mktoOffset, .mktoGutter {
  display: none !important;
}

.mktoAsterix {
  display: inline;
  color: var(--app-red);
}

.mktoFieldWrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}

.mktoLabel {
  flex: 0 1 26%;
  font-weight: normal !important;
}

.mktoForm input, .mktoForm select {
  flex: auto;
  width:auto !important;
}

.mktoError {
  display: none !important
}

#legend-modal .cd-modal-header {
  background-color: #fff;
  color: var(--app-medium-gray);
}

#legend-modal .cd-modal-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#legend-modal .cd-modal-content {
  padding-bottom: 25px;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#speaker-legend {
  overflow-y: auto;
  height: 170px;
}

#speaker-legend .legend-row {
  height: 200px;
}

.column1 {
  flex: 0 1 38%
}

.column2 {
  flex: 0 1 58%
}

.legendthumbs {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border: 1px solid var(--app-medium-gray);
}

.columnlabel {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  color: var(--app-red);
  margin: 0px
}

.columntext {
  width: 100%;
  font-size: 14px;
  color: var(--app-red);
  margin: 8px 0px;
} 

.navleft.fa.fa-chevron-left,
.navright.fa.fa-chevron-right {
  display: none;
  color: var(--app-red);
  padding: 0px 10px;
  font-size: 40px;
  text-shadow: 0px 0 6px var(--app-red);
}

#tutorial-modal {
  top: 0;
  left: 0;
}

#tutorial-modal .cd-modal-container {
  /* flex: 0 1 65%; */
  margin-top:20%;
  z-index: 1;
}

#tutorial-modal > .cd-modal-container > .content-outer > .cd-modal-content >.cd-modal-line {
  justify-content: center;
  flex-basis: auto !important;
}

.content-outer {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;

}

#tutorial-modal .cd-modal-header.tutorial {
  background-color: #fff;
  color: var(--app-dark-gray);
  position: relative;
  border-bottom: 2px solid var(--app-light-gray);
}

#tutorial-modal .cd-modal-title.tutorial {
  padding: 0 139px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.top-next {
  position: absolute;
  right: 25px;
  left: auto;
  font-size: 16px;
  color: var(--app-red)
}

.empty-div {
  padding: 0px;
  pointer-events: none;
}

#tutorial-line1, #tutorial-line2 {
  font-size: 16px;
  padding: 0px 10px;
}

#tutorial-modal .distance-input::part(spinpart)::-webkit-outer-spin-button, 
#tutorial-modal .distance-input::part(spinpart)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0%;
}

.progress-dots {
  text-align: center;
  display: block;
  width: 100%;
}

span.dots {
  background: var(--app-light-gray);
  border-radius: 50%;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
}

span.dots.dot-active {
  background: var(--app-red);
}

.spotlight {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset #fff 0 0 0 0px, var(--app-medium-gray) 0 0 0 100vw;
  border-radius: 5px;
  opacity: 0;
  transition: all .3s cubic-bezier(.6,.4,0,1),opacity .15s ease .1s;
}

.is-visible {
  opacity: 0.6;
  transition: all .3s cubic-bezier(.6,.4,0,1),opacity .15s ease;
}

.is-moving {
  background-color: var(--app-medium-gray);
  transition: background-color .1s ease;
}

#mobiledevice {
  padding: 24px;
  background-color: #554F53;
  opacity: .9;
  color: #fff;
}