/*
  Copyright 2020 Roland Corporation. All rights reserved.
*/

/*
  Modal
*/
/* page style */
.mdl_pageStyle__fs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--color-black);
}

/* main frame */
.mdl_mainFrame__basic,
.mdl_mainFrame__withSelector {
  position: absolute;
  right: 0;
  left: 0;
  overflow: auto;
  background-color: var(--color-black);
}
.mdl_mainFrame__basic {
  top: 44px;
  height: calc(100% - 88px);
}
.mdl_mainFrame__withSelector {
  top: 88px;
  height: calc(100% - 88px);
}
/* header frame, footer frame */
.mdl_headerFrame,
.mdl_headerFrame__small,
.mdl_footerFrame,
.mdl_footerFrame__small {
  position: absolute;
  right: 0;
  left: 0;
  background-color: var(--color-secondary);
}
.mdl_headerFrame,
.mdl_footerFrame {
  height: 44px;
}
.mdl_headerFrame__small,
.mdl_footerFrame__small {
  height: 42px;
}
.mdl_headerFrame,
.mdl_headerFrame__small {
  top: 0;
}
.mdl_footerFrame,
.mdl_footerFrame__small {
  bottom: 0;
}
/* header elements　*/
.mdl_headerLbl__center,
.mdl_headerLbl__centerSmall,
.mdl_headerLbl__withBackBtn {
  position: absolute;
  color: var(--color-white);
  font-size: 17px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
  text-align: center;
}
.mdl_headerLbl__center,
.mdl_headerLbl__withBackBtn {
  height: 44px;
  line-height: 44px;
}
.mdl_headerLbl__centerSmall {
  height: 42px;
  line-height: 42px;
}
.mdl_headerLbl__center,
.mdl_headerLbl__centerSmall {
  top: 0;
  right: 0;
  left: 0;
}
.mdl_headerLbl__withBackBtn {
  left: 39px;
  height: 44px;
}
.mdl_headerBackBtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_back@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* footer elements */
.mdl_footerBtn__l,
.mdl_footerBtn__lSmall,
.mdl_footerBtn__r,
.mdl_footerBtn__rSmall,
.mdl_footerBtn__center {
  position: absolute;
  bottom: 11px;
  width: 104px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoCondensedRegular;
  letter-spacing: -0.31px;
  text-align: center;
}
.mdl_footerBtn__l,
.mdl_footerBtn__r,
.mdl_footerBtn__center {
  height: 22px;
  line-height: 22px;
}
.mdl_footerBtn__lSmall,
.mdl_footerBtn__rSmall {
  height: 20px;
  line-height: 20px;
}
.mdl_footerBtn__l,
.mdl_footerBtn__lSmall {
  left: 21px;
}
.mdl_footerBtn__r,
.mdl_footerBtn__rSmall {
  right: 21px;
}
.mdl_footerBtn__center {
  right: 93px;
  left: 93px;
}
.mdl_footerBtn__l,
.mdl_footerBtn__lSmall,
.mdl_footerBtn__r,
.mdl_footerBtn__rSmall,
.mdl_footerBtn__center {
  background-color: rgba(0,0,0,0);
}
.mdl_footerBtn__l.pushing,
.mdl_footerBtn__lSmall.pushing,
.mdl_footerBtn__r.pushing,
.mdl_footerBtn__rSmall.pushing,
.mdl_footerBtn__center.pushing {
  background-color: var(--color-highlight);
}
.mdl_footerBtn__r.off,
.mdl_footerBtn__rSmall.off {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}

/* footer elements for 3 button */
.mdl_footer3Btn__l,
.mdl_footer3Btn__r,
.mdl_footer3Btn__center {
  position: absolute;
  bottom: 11px;
  width: 70px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoCondensedRegular;
  letter-spacing: -0.31px;
  text-align: center;
  height: 22px;
  line-height: 22px;
  background-color: rgba(0,0,0,0);
}
.mdl_footer3Btn__l {
  left: 21px;
}
.mdl_footer3Btn__r {
  right: 21px;
}
.mdl_footer3Btn__center {
  left: 109px;
}
.mdl_footer3Btn__l.pushing,
.mdl_footer3Btn__r.pushing,
.mdl_footer3Btn__center.pushing {
  background-color: var(--color-highlight);
}
.mdl_footer3Btn__r.off,
.mdl_footer3Btn__center.off {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}

/* progress */

.progressDlg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; /* raised from 10 to ensure above overlays */
  height: 228px;
  width: 290px;
  margin: auto;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-black);
}

.progress-bar-style {
  position: absolute;
  clear: both;
  overflow: hidden;
  outline: none;

  margin: 0;
  padding: 0;

  cursor: pointer;
  
  color: #fff;
  border: 1px solid var(--color-white);
  background-color: rgba(0, 0, 0, 0);
}

.progress-bar-style div {
  position: absolute;
  margin: 0;
  padding: 0;
  /* left: 0;
  top: 0; */
  background-color: #33D6FF;
}

.progress-bar-style p {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

/* bluetooth setup */
.bluetoothSetupTitleLbl {
  position: absolute;
  top: 56px;
  left: 15px;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
  text-align: left;
  color: var(--color-white);
}
.bluetoothSetupSeparator {
  position: absolute;
  top: 83px;
  right: 0;
  left: 0;
  height: 1px;
  margin: 0 0 0 15px;
  background-color: var(--color-black-lighten);
}
.bluetoothSetupMessageLbl {
  position: absolute;
  left: 15px;
  top: 88px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
  text-align: left;
  color: var(--color-white);
}
.bluetoothSetupCheckBox {
  position: absolute;
  left: 19px;
  top: 160px;
  clear: both;
  overflow: hidden;
  margin: 0;
  padding: 0;
  color: var(--color-white);
  font-size: 11px;
  line-height: 20px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
}
.bluetoothSetupCheckBox > input {
  display: none;
}
.bluetoothSetupCheckBox > label {
  display: inline;
  position: relative;
  margin-left: 30px;
}
.bluetoothSetupCheckBox > label:before {
  position: absolute;
  top: -17px;
  left: -44px;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_select_box_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}
.bluetoothSetupCheckBox > input:checked + label:before {
  background-image: url(../images/btn_select_box@2x.png);
}
/* bluetooth select */
.bluetoothSelectDeviceListItem {
  height: 44px;
  margin: 0 0 0 15px;
  padding-left: 29px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 17px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
  line-height: 44px;
  text-align: left;
  box-shadow: inset 0 -1px 0 0 var(--color-white-op-1);
}
.bluetoothSelectDeviceListItem.connected {
  color: var(--color-primary);
}
.bluetoothSelectDeviceListItem.selected::before {
  position: absolute;
  left: 0px;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_check@2x.png);
  background-size: contain;
  vertical-align: middle;
  content: "";
}
/* scene, tone select */
.sceneSelectGroupAreaLbl {
  position: absolute;
  top: 47px;
  left: 10px;
  height: 14px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.sceneSelectGroupAreaSelectBox {
  position: absolute;
  top: 66px;
  left: 4px;
  right: 4px;
  height: 22px;
  padding-left: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.sceneSelectGroupAreaSelectBox {
  background-color: var(--color-black);
}
.sceneSelectGroupAreaSelectBox.pushing {
  background-color: var(--color-highlight);
}
.sceneSelectGroupAreaSelectBox p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
}
.sceneSelectGroupAreaSelectBox p::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 2px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.sceneSelectListItem,
.sceneSelectListItem__favorite {
  height: 44px;
  margin: 0 0 0 15px;
  color: var(--color-white);
  font-size: 17px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
  line-height: 44px;
  width: calc(100% - 44px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sceneSelectListItem.selected,
.sceneSelectListItem__favorite.selected {
  color: var(--color-primary);
}
.sceneSelectListItem::after {
  position: absolute;
  right: 0px;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_star_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}
.sceneSelectListItem__favorite::after {
  position: absolute;
  right: 0px;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_star_on@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

/* tone select */
.toneSelectToneTypeAreaLbl {
  position: absolute;
  top: 3px;
  left: 10px;
  height: 14px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.toneSelectToneTypeAreaSelectBox {
  position: absolute;
  top: 22px;
  left: 4px;
  right: 4px;
  height: 22px;
  padding-left: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.toneSelectToneTypeAreaSelectBox {
  background-color: var(--color-black);
}
.toneSelectToneTypeAreaSelectBox.pushing {
  background-color: var(--color-highlight);
}
.toneSelectToneTypeAreaSelectBox p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
}
.toneSelectToneTypeAreaSelectBox p::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 2px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.toneSelectToneTypeAreaFrame {
  position: absolute;
  top: 44px;
  left: 0px;
  width: 50%;
  height: 56px;
}
.toneSelectToneGroupAreaLbl {
  position: absolute;
  top: 3px;
  left: 8px;
  height: 14px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.toneSelectToneGroupAreaSelectBox {
  position: absolute;
  top: 22px;
  left: 2px;
  right: 4px;
  height: 22px;
  padding-left: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.toneSelectToneGroupAreaSelectBox {
  background-color: var(--color-black);
}
.toneSelectToneGroupAreaSelectBox.pushing {
  background-color: var(--color-highlight);
}
.toneSelectToneGroupAreaSelectBox p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
}
.toneSelectToneGroupAreaSelectBox p:after {
  content: "";
  position: absolute;
  top: -1px;
  right: 2px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.toneSelectGroupAreaFrame {
  position: absolute;
  top: 44px;
  right: 0px;
  width: 50%;
  height: 56px;
}
.toneSelectGroupAreaFrame {
  background-color: rgba(0,0,0,0);
}
.toneSelectGroupAreaFrame.pushing {
  background-color: var(--color-highlight);
}
.toneSelectListItem {
  left: 15px;
  height: 44px;
  margin: 0 0 0 15px;
  color: var(--color-white);
  font-size: 17px;
  font-family: RobotoRegular;
  letter-spacing: -0.4px;
  line-height: 44px;
  white-space: pre;
}
.toneSelectListItem.selected {
  color: var(--color-primary);
 }

/* rename dialog */
.renameDlg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; /* raised from 10 to ensure above overlays */
  width: 290px;
  height: 158px;
  margin: auto;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-black);
}
.renameDlgTextInputLbl {
  position: absolute;
  top: 52px;
  left: 19px;
  height: 16px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoItalic;
  line-height: 16px;
  letter-spacing: -0.34px;
}
.renameDlgTextInput {
  position: absolute;
  top: 79px;
  right: 19px;
  left: 19px;
  height: 22px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.renameDlgTextInput > input {
  width: 100%;
  height: 100%;
  border: none;
  background-color: inherit;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoItalic;
  letter-spacing: -0.34px;
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
}

/* write dialog */
.writeDlg {
  height: 228px;
}
.writeDlgWithBank {
  height: 298px;
}
.writeDlg,
.writeDlgWithBank {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; /* raised from 10 to ensure above overlays */
  width: 290px;
  margin: auto;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-black);
}
.writeDlgSelectBoxLbl {
  top: 52px;
}
.writeDlgSelectBox2Lbl {
  top: 125px;
}
.writeDlgSelectBoxLbl,
.writeDlgSelectBox2Lbl {
  position: absolute;
  left: 19px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoItalic;
  line-height: 19px;
  letter-spacing: -0.34px;
}
.writeDlgSelectBox {
  top: 79px;
}
.writeDlgSelectBox2 {
  top: 149px;
}
.writeDlgSelectBox,
.writeDlgSelectBox2 {
  position: absolute;
  left: 19px;
  right: 19px;
  height: 22px;
  padding-left: 6px;
  padding-right: 22px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.writeDlgSelectBox,
.writeDlgSelectBox2 {
  background-color: var(--color-black);
}
.writeDlgSelectBox.pushing,
.writeDlgSelectBox2.pushing {
  background-color: var(--color-highlight);
}
.writeDlgSelectBox p,
.writeDlgSelectBox2 p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.writeDlgSelectBox p:after,
.writeDlgSelectBox2 p:after {
  content: "";
  position: absolute;
  top: -1px;
  right: 2;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.writeDlgTextInputLbl {
  top: 125px;
}
.writeDlgTextInput2Lbl {
  top: 195px;
}
.writeDlgTextInputLbl,
.writeDlgTextInput2Lbl {
  position: absolute;
  left: 19px;
  height: 16px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoItalic;
  line-height: 16px;
  letter-spacing: -0.34px;
}
.writeDlgTextInput {
  top: 149px;
}
.writeDlgTextInput2 {
  top: 219px;
}
.writeDlgTextInput,
.writeDlgTextInput2 {
  position: absolute;
  right: 19px;
  left: 19px;
  height: 23px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.writeDlgTextInput > input,
.writeDlgTextInput2 > input {
  width: 100%;
  height: 100%;
  border: none;
  background-color: inherit;
  color: var(--color-white);
  font-family: RobotoItalic;
  font-size: 13px;
    letter-spacing: -0.34px;
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
}
.writeDlgConfirmLbl {
  top: 52px;
}
.writeDlgConfirm2Lbl {
  top: 125px;
}
.writeDlgConfirmLbl,
.writeDlgConfirm2Lbl {
  position: absolute;
  left: 19px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoItalic;
  line-height: 19px;
  letter-spacing: -0.34px;
}
.writeDlgConfirm {
  top: 79px;
}
.writeDlgConfirm2 {
  top: 149px;
}
.writeDlgConfirm,
.writeDlgConfirm2 {
  position: absolute;
  left: 19px;
  right: 19px;
  height: 22px;
  padding-left: 6px;
  padding-right: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  background-color: var(--color-black);
}
.writeDlgConfirm p,
.writeDlgConfirm2 p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* notification dialog */
.notificationDlg {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 290px;
  height: 222px;
  margin: auto;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-black);
  align-items: center;
}
.notificationDlgMessageLbl {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoCondensedRegular;
  letter-spacing: -0.31px;
  text-align: center;
  white-space: normal;
}

/* list box dialog */
.listBoxDlg,
.listBoxDlg__small,
.listBoxDlg__curve {
  position: absolute;
  width: 290px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; /* raised from 10 to ensure above overlays */
  margin: auto;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-black);
}
.listBoxDlg {
  height: 536px;
}
.listBoxDlg__small {
  height: 266px;
}
.listBoxDlg__curve {
  height: 463px;
}
.listBoxDlgListItem__single,
.listBoxDlgListItem__multi,
.listBoxDlgListItem__multi__small {
  height: 44px;
  margin: 0 0 0 15px;
  padding-left: 29px;
  padding-right: 4px;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 0 var(--color-white-op-1);
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 17px;
  font-family: RobotoRegular;
  letter-spacing: -0.41px;
  line-height: 44px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listBoxDlgListItem__single.selected {
  color: var(--color-primary);
}
.listBoxDlgListItem__single.selected::before {
  position: absolute;
  left: 0px;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_check@2x.png);
  background-size: contain;
  vertical-align: middle;
  content: "";
}

.listBoxDlgListItem__multi::before,
.listBoxDlgListItem__multi__small::before {
  position: absolute;
  /* left: 14.5px;
  width: 15px;
  height: 15px; */
  left: 0;
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_select_box_off@2x.png);
  background-size: contain;
  vertical-align: middle;
  content: "";
}
.listBoxDlgListItem__multi.selected::before,
.listBoxDlgListItem__multi__small.selected::before {
  background-image: url(../images/btn_select_box@2x.png);
}
.listBoxDlgListItem__single.off,
.listBoxDlgListItem__multi.off,
.listBoxDlgListItem__multi__small.off {
  color: var(--color-gray);
}
/* .listBoxDlgListItem__multi.off::before,
.listBoxDlgListItem__multi__small.off::before {
  border: 1px solid var(--color-gray);
} */
.listBoxDlgListItem__multi__small:last-child {
  box-shadow: inset 0 0 0 0 var(--color-white-op-1);
}
.listBoxDlgCurveBtn1,
.listBoxDlgCurveBtn2,
.listBoxDlgCurveBtn3,
.listBoxDlgCurveBtn4,
.listBoxDlgCurveBtn5,
.listBoxDlgCurveBtn6,
.listBoxDlgCurveBtn7,
.listBoxDlgCurveBtn8,
.listBoxDlgCurveBtn9,
.listBoxDlgCurveBtn10,
.listBoxDlgCurveBtn11,
.listBoxDlgCurveBtn12 {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 1px solid var(--color-black-lighten);
  background-size: contain;
  background-repeat: no-repeat;
}
.listBoxDlgCurveBtn1.selected,
.listBoxDlgCurveBtn2.selected,
.listBoxDlgCurveBtn3.selected,
.listBoxDlgCurveBtn4.selected,
.listBoxDlgCurveBtn5.selected,
.listBoxDlgCurveBtn6.selected,
.listBoxDlgCurveBtn7.selected,
.listBoxDlgCurveBtn8.selected,
.listBoxDlgCurveBtn9.selected,
.listBoxDlgCurveBtn10.selected,
.listBoxDlgCurveBtn11.selected,
.listBoxDlgCurveBtn12.selected {
  border: 1px solid var(--color-primary);
}
.listBoxDlgCurveBtn1.disable,
.listBoxDlgCurveBtn2.disable,
.listBoxDlgCurveBtn3.disable,
.listBoxDlgCurveBtn4.disable,
.listBoxDlgCurveBtn5.disable,
.listBoxDlgCurveBtn6.disable,
.listBoxDlgCurveBtn7.disable,
.listBoxDlgCurveBtn8.disable,
.listBoxDlgCurveBtn9.disable,
.listBoxDlgCurveBtn10.disable,
.listBoxDlgCurveBtn11.disable,
.listBoxDlgCurveBtn12.disable {
  border: 0px
}
.listBoxDlgCurveBtn1 {
  top: 57px;
  left: 15px;
  background-image: url(../images/Curves_asgn_d_00@2x.png);
}
.listBoxDlgCurveBtn2 {
  top: 57px;
  left: 106px;
  background-image: url(../images/Curves_asgn_d_01@2x.png);
}
.listBoxDlgCurveBtn3 {
  top: 57px;
  right: 15px;
  background-image: url(../images/Curves_asgn_d_02@2x.png);
}
.listBoxDlgCurveBtn4 {
  top: 148px;
  left: 15px;
  background-image: url(../images/Curves_asgn_d_03@2x.png);
}
.listBoxDlgCurveBtn5 {
  top: 148px;
  left: 106px;
  background-image: url(../images/Curves_asgn_d_04@2x.png);
}
.listBoxDlgCurveBtn6 {
  top: 148px;
  right: 15px;
  background-image: url(../images/Curves_asgn_d_05@2x.png);
}
.listBoxDlgCurveBtn7 {
  top: 239px;
  left: 15px;
  background-image: url(../images/Curves_asgn_d_06@2x.png);
}
.listBoxDlgCurveBtn8 {
  top: 239px;
  left: 106px;
  background-image: url(../images/Curves_asgn_d_07@2x.png);
}

.listBoxDlgCurveBtn9 {
  top: 239px;
  right: 15px;
  background-image: url(../images/Curves_asgn_d_08@2x.png);
}

.listBoxDlgCurveBtn10 {
  top: 330px;
  left: 15px;
  background-image: url(../images/Curves_asgn_d_09@2x.png);
}

.listBoxDlgCurveBtn11 {
  top: 330px;
  left: 106px;
  background-image: url(../images/Curves_asgn_d_10@2x.png);
}

.listBoxDlgCurveBtn12 {
  top: 330px;
  right: 15px;
  background-image: url(../images/Curves_asgn_d_11@2x.png);
}

/* import/export dialog */
.libDlg_short,
.libDlg_basic,
.libDlg_tall {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; /* raised from 10 to ensure above overlays */
  height: 228px;
  width: 290px;
  margin: auto;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-black);
}

.libDlg_short {
  height: 158px;
}
.libDlg_basic {
  height: 228px;
}
.libDlg_tall {
  height: 298px;
}

.libDlgImpBtn__l,
.libDlgImpBtn__center,
.libDlgImpBtn__r,
.libDlgExpBtn__l,
.libDlgExpBtn__center,
.libDlgExpBtn__r {
  position: absolute;
  top: 72px;
  width: 82px;
  height: 82px;
  border: 1px solid var(--color-black);
  background-size: contain;
  background-repeat: no-repeat;
}

.libDlgImpBtn__l.selected,
.libDlgImpBtn__center.selected,
.libDlgImpBtn__r.selected,
.libDlgExpBtn__l.selected,
.libDlgExpBtn__center.selected,
.libDlgExpBtn__r.selected {
  border: 1px solid var(--color-primary);
}

.libDlgImpBtn__l {
  left: 7px;
  background-image: url(../images/import_aerophone@2x.png);
}

.libDlgImpBtn__center {
  left: 103px;
  background-image: url(../images/import_file@2x.png);
}

.libDlgImpBtn__r {
  right: 7px;
  background-image: url(../images/import_cloud@2x.png);
}

.libDlgExpBtn__l {
  left: 7px;
  background-image: url(../images/export_aerophone@2x.png);
}

.libDlgExpBtn__center {
  left: 103px;
  background-image: url(../images/export_file@2x.png);
}

.libDlgExpBtn__r {
  right: 7px;
  background-image: url(../images/export_cloud@2x.png);
}

/*
  Radio button List Item
*/
.radioBtnListItemFrame,
.radioBtnListItemFrame__wBox,
.radioBtnListItemFrame__wLblBox,
.radioBtnListItemFrame__w2Box {
  position: relative;
}
.radioBtnListItem,
.radioBtnListItem__wBox,
.radioBtnListItem__wLblBox,
.radioBtnListItem__w2Box {
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--color-black);
}
.radioBtnListItem {
  height: 44px;
}
.radioBtnListItem__wBox {
  height: 70px;
}
.radioBtnListItem__wLblBox {
  height: 83px;
}
.radioBtnListItem__w2Box {
  height: 128px;
}
.radioBtnListItem__w3Box {
  height: 172px;
}
.radioCircleBtn {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-repeat: no-repeat;
}
.radioCircleBtn {
  background-image: url(../images/btn_radio_off@2x.png);
}
.radioCircleBtn.selected {
  background-image: url(../images/btn_radio@2x.png); 
}
.radioCircleBtnLbl {
  position: absolute;
  top: 0px;
  left: 44px;
  height: 44px;
  font-size: 17px;
  font-family: RobotoRegular;
  line-height: 44px;
  letter-spacing: -0.41px;
  text-align: left;
  color: var(--color-white);
}

.selectItemInputBoxLbl,
.selectItemTitleLbl,
.radioCircleBtnLbl__small {
  position: absolute;
  top: 0px;
  height: 44px;
  font-size: 13px;
  font-family: RobotoItalic;
  line-height: 44px;
  letter-spacing: -0.34px;
  color: var(--color-white);
}
.selectItemInputBoxLbl,
.selectItemTitleLbl {
  left: 19px;
}
.radioCircleBtnLbl__small {
  left: 44px;
}

.selectItemBoxSelectBoxLbl__l,
.selectItemBoxSelectBoxLbl__r,
.selectItemBoxSelectBoxLbl__l2,
.selectItemBoxSelectBoxLbl__r2,
.selectItemBoxSelectBoxLbl__l3,
.selectItemBoxSelectBoxLbl__wRadioBtn__l,
.selectItemBoxSelectBoxLbl__wRadioBtn__r,
.selectItemBoxSelectBoxLbl__wRadioBtn__l2,
.selectItemBoxSelectBoxLbl__wRadioBtn__r2 {
  position: absolute;
  height: 14px;
  font-size: 11px;
  font-family: RobotoItalic;
  line-height: 14px;
  letter-spacing: -0.34px;
  color: var(--color-white);
}
.selectItemBoxSelectBoxLbl__l.disabled,
.selectItemBoxSelectBoxLbl__r.disabled,
.selectItemBoxSelectBoxLbl__l2.disabled,
.selectItemBoxSelectBoxLbl__r2.disabled,
.selectItemBoxSelectBoxLbl__l3.disabled,
.selectItemBoxSelectBoxLbl__wRadioBtn__l.disabled,
.selectItemBoxSelectBoxLbl__wRadioBtn__r.disabled,
.selectItemBoxSelectBoxLbl__wRadioBtn__l2.disabled,
.selectItemBoxSelectBoxLbl__wRadioBtn__r2.disabled {
  color: var(--color-gray);
}
.selectItemBoxSelectBoxLbl__l,
.selectItemBoxSelectBoxLbl__r,
.selectItemBoxSelectBoxLbl__wRadioBtn__l,
.selectItemBoxSelectBoxLbl__wRadioBtn__r {
  top: 36px;
}
.selectItemBoxSelectBoxLbl__l2,
.selectItemBoxSelectBoxLbl__r2,
.selectItemBoxSelectBoxLbl__wRadioBtn__l2,
.selectItemBoxSelectBoxLbl__wRadioBtn__r2 {
  top: 80px;
}

.selectItemBoxSelectBoxLbl__l3 {
  top: 124px;
}

.selectItemInputBox,
.selectItemInputBox__wRadioBtn {
  position: absolute;
  right: 21px;
  height: 23px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.selectItemInputBox.disabled,
.selectItemInputBox__wRadioBtn.disabled {
  border: 1px solid var(--color-gray);
}
.selectItemInputBox {
  left: 19px;
}
.selectItemInputBox__wRadioBtn {
  left: 44px;
}
.selectItemInputBox > input,
.selectItemInputBox__wRadioBtn > input {
  width: 100%;
  height: 100%;
  border: none;
  background-color: inherit;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoItalic;
  letter-spacing: -0.34px;
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
}
.selectItemInputBox.disabled > input,
.selectItemInputBox__wRadioBtn.disabled > input {
  color: var(--color-gray);
}
.selectItemBoxSelectBox,
.selectItemBoxSelectBox__wLbl,
.selectItemBoxSelectBox__wLbl2,
.selectItemBoxSelectBox__wLbl3,
.selectItemBoxSelectBox__wRadioBtn,
.selectItemBoxSelectBox__wRadioBtn__l,
.selectItemBoxSelectBox__wRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn,
.selectItemBoxSelectBox__wLblRadioBtn__l,
.selectItemBoxSelectBox__wLblRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn__l2,
.selectItemBoxSelectBox__wLblRadioBtn__r2 {
  position: absolute;
  height: 22px;
  padding-left: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.selectItemBoxSelectBox.disabled,
.selectItemBoxSelectBox__wLbl.disabled,
.selectItemBoxSelectBox__wLbl2.disabled,
.selectItemBoxSelectBox__wLbl3.disabled,
.selectItemBoxSelectBox__wRadioBtn.disabled,
.selectItemBoxSelectBox__wRadioBtn__l.disabled,
.selectItemBoxSelectBox__wRadioBtn__r.disabled,
.selectItemBoxSelectBox__wLblRadioBtn.disabled,
.selectItemBoxSelectBox__wLblRadioBtn__l.disabled,
.selectItemBoxSelectBox__wLblRadioBtn__r.disabled,
.selectItemBoxSelectBox__wLblRadioBtn__l2.disabled,
.selectItemBoxSelectBox__wLblRadioBtn__r2.disabled {
  border: 1px solid var(--color-gray);
}

.selectItemInputBox,
.selectItemInputBox__wRadioBtn,
.selectItemBoxSelectBox,
.selectItemBoxSelectBox__wRadioBtn,
.selectItemBoxSelectBox__wRadioBtn__l,
.selectItemBoxSelectBox__wRadioBtn__r {
  top: 38px;
}
.selectItemBoxSelectBox__wLbl,
.selectItemBoxSelectBox__wLblRadioBtn,
.selectItemBoxSelectBox__wLblRadioBtn__l,
.selectItemBoxSelectBox__wLblRadioBtn__r {
  top: 52px;
}
.selectItemBoxSelectBox__wLbl2,
.selectItemBoxSelectBox__wLblRadioBtn__l2,
.selectItemBoxSelectBox__wLblRadioBtn__r2 {
  top: 96px;
}
.selectItemBoxSelectBox__wLbl3 {
  top: 140px;
}
.selectItemBoxSelectBox,
.selectItemBoxSelectBox__wLbl,
.selectItemBoxSelectBox__wLbl2,
.selectItemBoxSelectBox__wLbl3,
.selectItemBoxSelectBoxLbl__l,
.selectItemBoxSelectBoxLbl__l2,
.selectItemBoxSelectBoxLbl__l3 {
  left: 19px;
}
.selectItemBoxSelectBox__wRadioBtn,
.selectItemBoxSelectBox__wRadioBtn__l,
.selectItemBoxSelectBox__wLblRadioBtn,
.selectItemBoxSelectBox__wLblRadioBtn__l,
.selectItemBoxSelectBox__wLblRadioBtn__l2,
.selectItemBoxSelectBoxLbl__wRadioBtn__l,
.selectItemBoxSelectBoxLbl__wRadioBtn__l2 {
  left: 44px;
}
.selectItemBoxSelectBox,
.selectItemBoxSelectBox__wLbl,
.selectItemBoxSelectBox__wLbl2,
.selectItemBoxSelectBox__wLbl3 {
  right: 19px;
}

.selectItemBoxSelectBox__wRadioBtn,
.selectItemBoxSelectBox__wLblRadioBtn,
.selectItemBoxSelectBox__wRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn__r2,
.selectItemBoxSelectBoxLbl__wRadioBtn__r,
.selectItemBoxSelectBoxLbl__wRadioBtn__r2 {
  right: 21px;
}
.selectItemBoxSelectBoxLbl__l,
.selectItemBoxSelectBoxLbl__r,
.selectItemBoxSelectBoxLbl__l2,
.selectItemBoxSelectBoxLbl__r2 {
  width: 102px;
}
.selectItemBoxSelectBoxLbl__l3 {
  width: 200px;
}
.selectItemBoxSelectBox__wRadioBtn__l,
.selectItemBoxSelectBox__wRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn__l,
.selectItemBoxSelectBox__wLblRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn__l2,
.selectItemBoxSelectBox__wLblRadioBtn__r2,
.selectItemBoxSelectBoxLbl__wRadioBtn__l,
.selectItemBoxSelectBoxLbl__wRadioBtn__r,
.selectItemBoxSelectBoxLbl__wRadioBtn__l2,
.selectItemBoxSelectBoxLbl__wRadioBtn__r2 {
  width: 102px;
}
.selectItemBoxSelectBox,
.selectItemBoxSelectBox__wLbl,
.selectItemBoxSelectBox__wLbl2,
.selectItemBoxSelectBox__wLbl3,
.selectItemBoxSelectBox__wRadioBtn,
.selectItemBoxSelectBox__wRadioBtn__l,
.selectItemBoxSelectBox__wRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn,
.selectItemBoxSelectBox__wLblRadioBtn__l,
.selectItemBoxSelectBox__wLblRadioBtn__r,
.selectItemBoxSelectBox__wLblRadioBtn__l2,
.selectItemBoxSelectBox__wLblRadioBtn__r2 {
  background-color: var(--color-black);
}
.selectItemBoxSelectBox.pushing,
.selectItemBoxSelectBox__wLbl.pushing,
.selectItemBoxSelectBox__wLbl2.pushing,
.selectItemBoxSelectBox__wLbl3.pushing,
.selectItemBoxSelectBox__wRadioBtn.pushing,
.selectItemBoxSelectBox__wRadioBtn__l.pushing,
.selectItemBoxSelectBox__wRadioBtn__r.pushing,
.selectItemBoxSelectBox__wLblRadioBtn.pushing,
.selectItemBoxSelectBox__wLblRadioBtn__l.pushing,
.selectItemBoxSelectBox__wLblRadioBtn__r.pushing,
.selectItemBoxSelectBox__wLblRadioBtn__l2.pushing,
.selectItemBoxSelectBox__wLblRadioBtn__r2.pushing {
  background-color: var(--color-highlight);
}
.selectItemBoxSelectBox > p,
.selectItemBoxSelectBox__wLbl > p,
.selectItemBoxSelectBox__wLbl2 > p,
.selectItemBoxSelectBox__wLbl3 > p,
.selectItemBoxSelectBox__wRadioBtn > p,
.selectItemBoxSelectBox__wRadioBtn__l > p,
.selectItemBoxSelectBox__wRadioBtn__r > p,
.selectItemBoxSelectBox__wLblRadioBtn > p,
.selectItemBoxSelectBox__wLblRadioBtn__l > p,
.selectItemBoxSelectBox__wLblRadioBtn__r > p,
.selectItemBoxSelectBox__wLblRadioBtn__l2 > p,
.selectItemBoxSelectBox__wLblRadioBtn__r2 > p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
  padding-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.selectItemBoxSelectBox.disabled > p,
.selectItemBoxSelectBox__wLbl.disabled > p,
.selectItemBoxSelectBox__wLbl2.disabled > p,
.selectItemBoxSelectBox__wLbl3.disabled > p,
.selectItemBoxSelectBox__wRadioBtn.disabled > p,
.selectItemBoxSelectBox__wRadioBtn__l.disabled > p,
.selectItemBoxSelectBox__wRadioBtn__r.disabled > p,
.selectItemBoxSelectBox__wLblRadioBtn.disabled > p,
.selectItemBoxSelectBox__wLblRadioBtn__l.disabled > p,
.selectItemBoxSelectBox__wLblRadioBtn__r.disabled > p,
.selectItemBoxSelectBox__wLblRadioBtn__l2.disabled > p,
.selectItemBoxSelectBox__wLblRadioBtn__r2.disabled > p {
  color: var(--color-gray);
}
.selectItemBoxSelectBox > p::after,
.selectItemBoxSelectBox__wLbl > p::after,
.selectItemBoxSelectBox__wLbl2 > p::after,
.selectItemBoxSelectBox__wLbl3 > p::after,
.selectItemBoxSelectBox__wRadioBtn > p::after,
.selectItemBoxSelectBox__wRadioBtn__l > p::after,
.selectItemBoxSelectBox__wRadioBtn__r > p::after,
.selectItemBoxSelectBox__wLblRadioBtn > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__l > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__r > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__l2 > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__r2 > p::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 2;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.selectItemBoxSelectBox.disabled > p::after,
.selectItemBoxSelectBox__wLbl.disabled > p::after,
.selectItemBoxSelectBox__wLbl2.disabled > p::after,
.selectItemBoxSelectBox__wLbl3.disabled > p::after,
.selectItemBoxSelectBox__wRadioBtn.disabled > p::after,
.selectItemBoxSelectBox__wRadioBtn__l.disabled > p::after,
.selectItemBoxSelectBox__wRadioBtn__r.disabled > p::after,
.selectItemBoxSelectBox__wLblRadioBtn.disabled > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__l.disabled > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__r.disabled > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__l2.disabled > p::after,
.selectItemBoxSelectBox__wLblRadioBtn__r2.disabled > p::after {
  background-image: url(../images/btn_list_off@2x.png);
}