/*
  Copyright 2020 Roland Corporation. All rights reserved.
*/
.editorPage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
}
.editorHeader {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 44px;
  background-color: var(--color-secondary);
}
.editorHeaderBtnArea {
  position: absolute;
  right: 65px;
  left: 0;
  height: 44px;
  background-color: var(--color-secondary);
}
.editorMain {
  position: absolute;
  top: 44px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
}
.editorFollow {
  position: absolute;
  top: 44px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
}

/*
  Header
*/
.editorHeaderImg {
  position: absolute;
  top: 32px;
  left: 2px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold_w@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorHeaderBackBtn {
  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;
}
.editorHeaderLbl,
.editorHeaderLbl__withImg,
.editorHeaderLbl__withBackBtn {
  position: absolute;
  height: 44px;
  right: 33px;
  color: var(--color-white);
  font-size: 14px;
  line-height: 44px;
  letter-spacing: -0.34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.editorHeaderLbl {
  left: 0;
  font-family: RobotoItalic;
}
.editorHeaderLbl__withImg {
  left: 17px;
  font-family: RobotoItalic;
}
.editorHeaderLbl__withBackBtn {
  left: 39px;
  font-family: RobotoRegular;
}
.editorHeaderSelectBtn {
  position: absolute;
  top: 11;
  right: 11;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorHeaderRightBtn1,
.editorHeaderRightBtn2 {
  position: absolute;
  top: 10px;
  width: 57px;
  height: 22px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 22px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorHeaderRightBtn1 {
  right: 4px;
}
.editorHeaderRightBtn2 {
  right: 69px;
}
.editorHeaderRightBtn1.off,
.editorHeaderRightBtn2.off {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
.editorHeaderRightBtn1,
.editorHeaderRightBtn2 {
  background-color: rgba(0,0,0,0);
}
.editorHeaderRightBtn1.pushing,
.editorHeaderRightBtn2.pushing {
  background-color: var(--color-highlight);
}

/*
 Tab
*/
.editorTab,
.editorTab__drum {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  height: 44px;
  background-color: var(--color-black);
  box-shadow: inset 0 -1px 0 0 var(--color-green-darken-1);
}
.editorTab > div,
.editorTab__drum > div {
  clear: both;
}
.editorTab.hide,
.editorTab__drum.hide {
  display: none;
}
.editorTab label,
.editorTab__drum label {
  float: left;
  height: 44px;
  color: var(--color-primary);
  font-size: 13px;
  line-height: 44px !important; /* ebuilder側でheightを指定しないと、style属性で0が指定されるため、importantにする。 */
  text-align: center;
}
.editorTab label.off,
.editorTab__drum label.off {
  color: var(--color-gray);
}
.editorTab label.disabled,
.editorTab__drum label.disabled {
  display: none;
  pointer-events: none;
}
.editorTab label[checked],
.editorTab label[checked].off,
.editorTab__drum label[checked],
.editorTab__drum label[checked].off {
  box-shadow: inset 0 -5px 0 0 var(--color-primary);
}
.editorTab > p,
.editorTab__drum > p {
  display: none;
}

/*
 SceneEdit
*/
.editorScenePartListFrame,
.editorSceneChainFrame,
.editorSceneBtnAreaFrame {
  position: absolute;
  right: 0;
  left: 0;
}
.editorScenePartListFrame {
  top: 0;
  height: 270px;
  background-color: var(--color-green-darken-2);
}
.editorSceneChainFrame {
  top: 270px;
  height: 120px;
  background-color: var(--color-green-darken-2);
}
.editorSceneBtnAreaFrame {
  top: 390px;
  height: 65px;
  background-color: var(--color-black);
}
.editorScenePartListPartLbl,
.editorScenePartListToneLbl,
.editorScenePartListMfxLbl,
.editorScenePartListOutAssignLbl {
  position: absolute;
  top: 14px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.editorScenePartListPartLbl {
  left: 22px;
}
.editorScenePartListToneLbl {
  left: 51px;
}
.editorScenePartListMfxLbl {
  right: 82px;
}
.editorScenePartListOutAssignLbl {
  right: 14px;
}
/*
 part
*/
/* 各Part用のスタイル。on, off切り替え, SuperNatural/DrumKit選択時に付け替えを行う。 */
.editorScenePart__on,
.editorScenePart__off,
.editorScenePart__disabled {
  position: absolute;
  right: 0;
  left: 0;
  height: 45px;
  border-radius: 4px;
}
.editorScenePart__on,
.editorScenePart__off {
  background-color: var(--color-black);
}
.editorScenePart__on.pushing,
.editorScenePart__off.pushing {
  background-color: var(--color-highlight-darken);
}

/* Remove outer borders on on/off containers (override) */
.editorScenePart__on {
  background-color: var(--color-black);
  border: none;
}
.editorScenePart__off {
  background-color: var(--color-black);
  border: none;
}

/* Bordered left part area box by state */
.editorScenePart__on .editorScenePartAreaFrame {
  border: 1px solid var(--color-primary);
  border-radius: 1px;
  box-sizing: border-box;
  background-color: var(--color-highlight-darken);
}
.editorScenePart__off .editorScenePartAreaFrame,
.editorScenePart__disabled .editorScenePartAreaFrame {
  border: 1px solid var(--color-gray);
  border-radius: 3px;
  box-sizing: border-box;
}

.editorScenePartAreaFrame {
  position: absolute;
  top: 0;
  left: 0;
  width: 43px;
  height: 43px;
}
.editorScenePartAreaFrame {
  background-color: rgba(0,0,0,0);
}
.editorScenePartAreaFrame.pushing {
  background-color: var(--color-highlight);
}
.editorScenePartImg {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: none;
}
.editorScenePartNoLbl {
  position: absolute;
  top: 8px;
  left: 16.5px;
  font-size: 24px;
  font-family: RobotoCondensedRegular;
  line-height: 28px;
  letter-spacing: -0.53px;
}
.editorScenePartSelectToneAreaFrame {
  position: absolute;
  top: 0;
  right: 110px;
  left: 49px;
  height: 43px;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}
.editorScenePartSelectToneAreaFrame.pushing {
  background-color: var(--color-highlight);
}
.editorScenePart__off .editorScenePartSelectToneAreaFrame,
.editorScenePart__disabled .editorScenePartSelectToneAreaFrame {
  border-color: var(--color-gray);
}
.editorScenePartToneNoLbl {
  position: absolute;
  top: 7px;
  font-size: 12px;
  font-family: RobotoCondensedItalic;
  line-height: 14px;
  letter-spacing: -0.29x;
  left: 5px;
}
.editorScenePartToneDroneLbl {
  position: absolute;
  top: 7px;
  left: 32px;
  font-size: 12px;
  font-family: RobotoCondensedItalic;
  line-height: 14px;
  letter-spacing: -0.29x;
}
.editorScenePartToneDroneLbl.disabled {
  display: none;
}
.editorScenePartToneNameLbl {
  position: absolute;
  bottom: 7px;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 16px;
  left: 4px;
  right: 33px;
  letter-spacing: -0.34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.editorScenePartSelectToneBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 43px;
}
.editorScenePartOutAssignBtn {
  position: absolute;
  top: 8px;
  right: 7px;
  width: 44px;
  height: 26px;
}
.editorScenePartOutAssignBtn {
  background-color: rgba(0,0,0,0);
}
.editorScenePartOutAssignBtn.pushing {
  background-color: var(--color-highlight);
}
.editorScenePartOutAssignBtn > input {
  display: none;
}
.editorScenePartOutAssignBtn > label {
  position: absolute;
  width: 100%;
  height: 100%;
}
.editorScenePartOutAssignBtn input[type="checkbox"]:checked + label::before,
.editorScenePartOutAssignBtn input[type="checkbox"] + label::before {
  position: absolute;
  width: 100%;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 26px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorScenePartOutAssignBtn input[type="checkbox"]:checked + label::before {
  content: "IFX";
}
.editorScenePartOutAssignBtn input[type="checkbox"] + label::before {
  content: "DRY";
}
/* on */
.editorScenePart__on .editorScenePartNoLbl {
  color: var(--color-primary);
}
.editorScenePart__on .editorScenePartToneNoLbl {
  color: var(--color-primary);
}
.editorScenePart__on .editorScenePartToneDroneLbl {
  color: var(--color-primary);
}
.editorScenePart__on .editorScenePartToneNameLbl {
  color: var(--color-primary);
}
.editorScenePart__on .editorScenePartSelectToneBtn {
  top: 11px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list2@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorScenePart__on > .editorScenePartOutAssignBtn > label,
.editorScenePartOutAssignBtn input[type="checkbox"]:checked + label {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.editorScenePart__on .editorScenePartImg {
  background: none;
}
/* Drumパート表示用 */
#editorScenePartFrame1.hide {
  display: none;
}
/* off */
.editorScenePart__off .editorScenePartNoLbl {
  color: var(--color-gray);
}
.editorScenePart__off .editorScenePartToneNoLbl {
  color: var(--color-gray);
}
.editorScenePart__off .editorScenePartToneDroneLbl {
  color: var(--color-gray);
}
.editorScenePart__off .editorScenePartToneNameLbl {
  color: var(--color-gray);
}
.editorScenePart__off .editorScenePartSelectToneBtn {
  top: 11px;
  right: 8px;
  width: 22px;
  height: 22px;
 background-image: url(../images/btn_list_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorScenePart__off > .editorScenePartOutAssignBtn > label,
.editorScenePartOutAssignBtn input[type="checkbox"] + label {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
.editorScenePart__off > .editorScenePartOutAssignBtn input[type="checkbox"]:checked + label {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
.editorScenePart__off .editorScenePartImg {
  background-image: url(../images/btn_hold_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* disabled */
.editorScenePart__disabled {
  border: 1px solid var(--color-gray);
}
.editorScenePart__disabled .editorScenePartNoLbl {
  display: none;
}
.editorScenePart__disabled .editorScenePartToneNoLbl {
  display: none;
}
.editorScenePart__disabled .editorScenePartToneDroneLbl {
  display: none;
}
.editorScenePart__disabled .editorScenePartToneNameLbl {
  display: none;
}
.editorScenePart__disabled .editorScenePartSelectToneBtn {
  display: none;
}
.editorScenePart__disabled > .editorScenePartOutAssignBtn {
  display: none;
}
.editorScenePart__disabled .editorScenePartImg {
  background-image: url(../images/btn_hold_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Hover feedback for select areas */
.editorScenePartSelectToneAreaFrame:hover,
.editorTonePartialSelectOscAreaFrame:hover {
  background-color: var(--color-highlight);
}

/* Disable interactions on disabled parts */
.editorScenePart__disabled .editorScenePartSelectToneAreaFrame {
  pointer-events: none;
  cursor: default;
}

/*
  Part Effect
*/
.editorScenePartMfxBtn {
  position: absolute;
  top: 8px;
  right: 60px;
  width: 44px;
  height: 26px;
}
.editorScenePartMfxBtn {
  background-color: rgba(0,0,0,0);
}
.editorScenePartMfxBtn.pushing {
  background-color: var(--color-highlight);
}
.editorScenePartMfxBtn > input {
  display: none;
}
.editorScenePartMfxBtn > label {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 26px;
  letter-spacing: -0.34px;
  text-align: center;
}
/* on */
.editorScenePart__on > .editorScenePartMfxBtn > label,
.editorScenePartMfxBtn input[type="checkbox"]:checked + label {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
/* on (Follow Tone MFX) */
.editorScenePartMfxBtn.link input[type="checkbox"]:checked + label {
  border-style: dotted;
}
/* on (Part MFX) */
.editorScenePartMfxBtn input[type="checkbox"]:checked + label {
  border-style: solid;
}

/* off */
.editorScenePart__off > .editorScenePartMfxBtn > label,
.editorScenePartMfxBtn input[type="checkbox"] + label {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
.editorScenePart__off > .editorScenePartMfxBtn input[type="checkbox"]:checked + label {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
/* off (Follow Tone MFX) */
.editorScenePartMfxBtn.link input[type="checkbox"] + label,
.editorScenePart__off > .editorScenePartMfxBtn.link input[type="checkbox"]:checked + label {
  border-style: dotted;
}
/* off (Part MFX) */
.editorScenePartMfxBtn input[type="checkbox"] + label,
.editorScenePart__off > .editorScenePartMfxBtn input[type="checkbox"]:checked + label {
  border-style: solid;
}
/* disabled */
.editorScenePart__disabled > .editorScenePartMfxBtn {
  display: none;
}

.editorScenePartMfxBtn input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorScenePartMfxBtn input[type="checkbox"] + label::before,
.editorScenePart__off > .editorScenePartMfxBtn input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorPartMfxSeparator {
  position: absolute;
  top: 43px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--color-green-darken-1);
}

/*
  Scene Effect chain
*/
.editorSceneChainImg {
  position: absolute;
  top: 33px;
  right: 0;
  bottom: 0;
  left: 45px;
  clear: both;
  overflow: auto;
  padding: 0;
  background-image: url(../images/scene_fx_line@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorSceneChainOutAssignLbl {
  position: absolute;
  top: 3px;
  left: 13px;
  color: var(--color-gray-lighten);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.editorSceneChainSceneEffectsLbl {
  position: absolute;
  top: 3px;
  left: 137px;
  color: var(--color-gray-lighten);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.editorSceneChainIFXLbl {
  position: absolute;
  top: 27px;
  left: 15px;
  color: var(--color-white-darken);
  font-size: 17px;
  font-family: RobotoCondensedRegular;
  line-height: 20px;
  letter-spacing: -0.41px;
}
.editorSceneChainDRYLbl {
  position: absolute;
  top: 91px;
  left: 15px;
  color: var(--color-white-darken);
  font-size: 17px;
  font-family: RobotoCondensedRegular;
  line-height: 20px;
  letter-spacing: -0.41px;
}
/* IFX, Chorus, Reverb, Delay 共通部分 */
.editorSceneChainBtn > input {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
.editorSceneChainBtn > label {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 23px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorSceneChainBtn input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorSceneChainBtn input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* IFXBtn */
.editorSceneChainIFXBtnFrame {
  position: absolute;
  top: 24px;
  left: 55px;
  width: 66px;
  height: 25px;
  cursor: pointer;
}
.editorSceneChainIFXBtnFrame {
  background-color: var(--color-black);
}
.editorSceneChainIFXBtnFrame.pushing {
  background-color: var(--color-highlight);
}

.editorSceneChainBtn input[type="checkbox"]:checked + label[for="editorSceneChainIFXBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorSceneChainBtn input[type="checkbox"] + label[for="editorSceneChainIFXBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}
/* ChorusBtn */
.editorSceneChainChorusBtnFrame {
  position: absolute;
  top: 24px;
  left: 146px;
  width: 44px;
  height: 25px;
  cursor: pointer;
}
.editorSceneChainChorusBtnFrame {
  background-color: var(--color-black);
}
.editorSceneChainChorusBtnFrame.pushing {
  background-color: var(--color-highlight);
}

.editorSceneChainBtn input[type="checkbox"]:checked + label[for="editorSceneChainChorusBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorSceneChainBtn input[type="checkbox"] + label[for="editorSceneChainChorusBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}
/* ReverbBtn */
.editorSceneChainReverbBtnFrame {
  position: absolute;
  top: 24px;
  left: 215px;
  width: 44px;
  height: 25px;
  cursor: pointer;
}
.editorSceneChainReverbBtnFrame {
  background-color: var(--color-black);
}
.editorSceneChainReverbBtnFrame.pushing {
  background-color: var(--color-highlight);
}

.editorSceneChainBtn input[type="checkbox"]:checked + label[for="editorSceneChainReverbBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorSceneChainBtn input[type="checkbox"] + label[for="editorSceneChainReverbBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}
/* DelayBtn */
.editorSceneChainDelayBtnFrame {
  position: absolute;
  top: 57px;
  left: 146px;
  width: 44px;
  height: 25px;
  cursor: pointer;
}
.editorSceneChainDelayBtnFrame {
  background-color: var(--color-black);
}
.editorSceneChainDelayBtnFrame.pushing {
  background-color: var(--color-highlight);
}

.editorSceneChainBtn input[type="checkbox"]:checked + label[for="editorSceneChainDelayBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorSceneChainBtn input[type="checkbox"] + label[for="editorSceneChainDelayBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}
/* Control / Assign */
.editorSceneBtnAreaControlAssignFrame {
  position: absolute;
  top: 15px;
  left: 159px;
  width: 107px;
  height: 33px;
  background-image: url(../images/Group@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorSceneControlAssignLbl {
  position: absolute;
  top: 8;
  left: 159px;
  width: 107px;
  height: 33px;
  color: var(--color-gray-lighten);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
  text-align: center;
}

/* Scene CommonBtn */
.editorSceneCommonBtn {
  position: absolute;
  bottom: 9px;
  left: 7px;
  width: 90px;
  height: 24px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 24px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorSceneCommonBtn {
  background-color: rgba(0,0,0,0);
}
.editorSceneCommonBtn.pushing {
  background-color: var(--color-highlight);
}
.editorSceneCommonBtn > input {
  display: none;
}
/* InternalBtn */
.editorSceneInternalBtn {
  position: absolute;
  bottom: 9px;
  left: 114px;
  width: 90px;
  height: 24px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 24px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorSceneInternalBtn {
  background-color: rgba(0,0,0,0);
}
.editorSceneInternalBtn.pushing {
  background-color: var(--color-highlight);
}
.editorSceneInternalBtn > input {
  display: none;
}
/* MIDIOutBtn */
.editorSceneMIDIOutBtn {
  position: absolute;
  bottom: 9px;
  left: 220px;
  width: 90px;
  height: 24px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 24px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorSceneMIDIOutBtn {
  background-color: rgba(0,0,0,0);
}
.editorSceneMIDIOutBtn.pushing {
  background-color: var(--color-highlight);
}
.editorSceneMIDIOutBtn > input {
  display: none;
}
.editorSceneMIDIOutBtn.off {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}

/*
  SceneParamEdit
*/

.editorParamParamListFrame {
  height: 100%;
  overflow: auto;
}

/*
  PartEdit
*/
.editorPartSelectParamGroupFrame {
  position: absolute;
  top: 44px;
  right: 0;
  left: 0;
}
.editorPartSelectParamGroup {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 44px;
  background-color: var(--color-black);
}
.editorPartSelectParamGroupAreaFrame {
  position: absolute;
  top: 0;
  left: 0;
  right: 64px;
  height: 44px;
  background-color: var(--color-black);
}
.editorPartSelectParamGroupLbl {
  position: absolute;
  top: 3;
  right: 65px;
  left: 22px;
  height: 39px;
  color: var(--color-primary);
  font-size: 13px;
  font-family: RobotoRegular;
  line-height: 39px;
  letter-spacing: -0.31px;
  text-align: left;
}
.editorPartSelectParamGroupBtn {
  position: absolute;
  top: 11px;
  right: 9px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list2@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorPartSelectParamGroupRightBtnLbl {
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 22px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 22px;
  letter-spacing: -0.29px;
  text-align: center;
}
.editorPartSelectParamGroupRightBtn > label {
  position: absolute;
  top: 22px;
  right: 5px;
  width: 55px;
  height: 22px;
}
.editorPartSelectParamGroupRightBtn > input {
  display: none;
}
.editorPartSelectParamGroupRightBtn > input[type="checkbox"]:checked + label {
  background-image: url(../images/btn_sw_on@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editorPartSelectParamGroupRightBtn > input[type="checkbox"] + label {
  background-image: url(../images/btn_sw_off@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editorPartSelectParamGroupUnderLine {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 5px;
  background-color: var(--color-primary);
}
.editorPartSeparator {
  position: absolute;
  top: 107px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--color-green-darken-1);
}
.editorPartSelectToneFrame {
  position: absolute;
  top: 108px;
  right: 0;
  left: 0;
}
.editorPartParamListFrame {
  position: relative;
  top: 175px;
  right: 0;
  left: 0;
  height: calc(100% - 175px);
  overflow: auto;
}
.editorPartParamList {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--color-black);
}

/*
  ControlAssignList
*/

.editorControlAssignListParamListFrame {
  height: 100%;
  overflow: auto;
}

/*
  AssignParamSetting
*/

.editorAssignParamSettingParamListFrame {
  position: absolute;
  top: 44px;
  right: 0;
  left: 0;
  height: calc(100% - 44px);
  overflow: auto;
}

/*
  Fx
*/
.editorFxSelectParamGroupBtnLbl {
  position: absolute;
  top: 0;
  left: 10px;
  width: 248px;
  height: 22px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 22px;
  letter-spacing: -0.29px;
}
.editorFxSelectParamGroupLbl {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 248px;
  height: 22px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoItalic;
  line-height: 22px;
  letter-spacing: -0.29px;
}
.editorPartialSelectParamGroupBtn {
  position: absolute;
  top: 11px;
  right: 9px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list2@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorFxSelectParamGroupRightBtnLbl {
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 22px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 22px;
  letter-spacing: -0.29px;
  text-align: center;
}
.editorFxSelectParamGroupRightBtn > label {
  position: absolute;
  top: 22px;
  right: 5px;
  width: 55px;
  height: 22px;
}
.editorFxSelectParamGroupRightBtn > input {
  display: none;
}
.editorFxSelectParamGroupRightBtn > input[type="checkbox"]:checked + label {
  background-image: url(../images/btn_sw_on@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editorFxSelectParamGroupRightBtn > input[type="checkbox"] + label {
  background-image: url(../images/btn_sw_off@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editorFxParamList {
  position: absolute;
  top: 44px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
  overflow: auto;

}
.editorFxParamList.disabled {
  display: none;
}
.editorFxPage {
  position: absolute;
  top: 44px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
}
/*
 ToneEdit
*/
.editorToneHeaderBtnArea {
  position: absolute;
  right: 65px;
  left: 44;
  height: 44px;
  background-color: var(--color-secondary);
}
.editorTonePartialListFrame,
.editorToneChainFrame,
.editorToneBtnAreaFrame {
  position: absolute;
  right: 0;
  left: 0;
}
.editorTonePartialListFrame {
  top: 0;
  height: 287px;
  background-color: var(--color-green-darken-2);
}
.editorToneChainFrame {
  top: 287px;
  height: 120px;
  background-color: var(--color-green-darken-2);
}
.editorToneBtnAreaFrame {
  top: 407px;
  height: 48px;
  background-color: var(--color-black);
}
.editorTonePartialListPartialLbl,
.editorTonePartialListOscLbl,
.editorTonePartialListOutAssignLbl {
  position: absolute;
  top: 14px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.editorTonePartialListPartialLbl {
  left: 16px;
}
.editorTonePartialListOscLbl {
  left: 51px;
}
.editorTonePartialListOutAssignLbl {
  right: 18px;
}
/* 各Partial用のスタイル。on, off切り替え */
.editorTonePartial__on,
.editorTonePartial__off {
  position: absolute;
  right: 0;
  left: 0;
  height: 56px;
  border-radius: 4px;
}
.editorTonePartial__on,
.editorTonePartial__off {
  background-color: var(--color-black);
}
.editorTonePartial__on.pushing,
.editorTonePartial__off.pushing {
  background-color: var(--color-highlight-darken);
}
.editorTonePartialAreaFrame {
  position: absolute;
  top: 0;
  left: 0;
  width: 43px;
  height: 54px;
}
.editorTonePartialImg {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
}
.editorTonePartialNoLbl {
  position: absolute;
  top: 14px;
  left: 16.5px;
  font-size: 24px;
  font-family: RobotoCondensedRegular;
  line-height: 28px;
  letter-spacing: -0.53px;
}
.editorTonePartialSelectOscAreaFrame {
  position: absolute;
  top: 0;
  right: 58px;
  left: 43px;
  height: 56px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 3px;
}
.editorTonePartialSelectOscAreaFrame.pushing {
  background-color: var(--color-highlight);
}
.editorTonePartial__on .editorTonePartialSelectOscAreaFrame {
  border: 1px solid var(--color-primary);
  border-radius: 3px;
}
.editorTonePartial__off .editorTonePartialSelectOscAreaFrame {
  border: 1px solid var(--color-gray);
  border-radius: 3px;
}
.editorTonePartialOscTypeLbl {
  position: absolute;
  top: 4px;
  font-size: 12px;
  font-family: RobotoCondensedItalic;
  line-height: 14px;
  letter-spacing: -0.29x;
}

.editorTonePartialOscNameLblL {
  position: absolute;
  top: 19px;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 16px;
  letter-spacing: -0.34px;
  white-space: pre;
}

.editorTonePartialOscNameLblR {
  position: absolute;
  top: 36px;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 16px;
  letter-spacing: -0.34px;
  white-space: pre;
}

.editorTonePartialSelectOscBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 43px;
}
.editorTonePartialOutAssignBtn {
  position: absolute;
  top: 8px;
  right: 7px;
  width: 44px;
  height: 26px;
}
.editorTonePartialOutAssignBtn {
  background-color: rgba(0,0,0,0);
}
.editorTonePartialOutAssignBtn.pushing {
  background-color: var(--color-highlight);
}
.editorTonePartialOutAssignBtn > input {
  display: none;
}
.editorTonePartialOutAssignBtn > label {
    position: absolute;
    width: 100%;
    height: 100%;
}
.editorTonePartialOutAssignBtn input[type="checkbox"]:checked + label::before,
.editorTonePartialOutAssignBtn input[type="checkbox"] + label::before {
  position: absolute;
  width: 100%;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 26px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorTonePartialOutAssignBtn input[type="checkbox"]:checked + label::before {
  content: "MFX";
}
.editorTonePartialOutAssignBtn input[type="checkbox"] + label::before {
  content: "DRY";
}

/* on */
.editorTonePartial__on {
  border: 1px solid var(--color-primary);
}
.editorTonePartial__on .editorTonePartialNoLbl {
  color: var(--color-primary);
}
.editorTonePartial__on .editorTonePartialOscTypeLbl {
  color: var(--color-primary);
}
.editorTonePartial__on .editorTonePartialOscNameLblL {
  color: var(--color-primary);
}
.editorTonePartial__on .editorTonePartialOscNameLblR {
  color: var(--color-primary);
}
.editorTonePartial__on .editorTonePartialSelectOscBtn {
  top: 11px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list2@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorTonePartial__on > .editorTonePartialOutAssignBtn > label,
.editorTonePartialOutAssignBtn input[type="checkbox"]:checked + label {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.editorTonePartial__on .editorTonePartialImg {
  background-image: url(../images/btn_hold@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* off */
.editorTonePartial__off {
  border: 1px solid var(--color-gray);
}
.editorTonePartial__off .editorTonePartialNoLbl {
  color: var(--color-gray);
}
.editorTonePartial__off .editorTonePartialOscTypeLbl {
  color: var(--color-gray);
}
.editorTonePartial__off .editorTonePartialOscNameLblL {
  color: var(--color-gray);
}
.editorTonePartial__off .editorTonePartialOscNameLblR {
  color: var(--color-gray);
}
.editorTonePartial__off .editorTonePartialSelectOscBtn {
  top: 11px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorTonePartial__off > .editorTonePartialOutAssignBtn > label,
.editorTonePartialOutAssignBtn input[type="checkbox"] + label {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
.editorTonePartial__off > .editorTonePartialOutAssignBtn input[type="checkbox"]:checked + label {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}
.editorTonePartial__off .editorTonePartialImg {
  background-image: url(../images/btn_hold_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}


/*
  Tone Effect chain
*/
.editorToneChainImg {
  position: absolute;
  top: 33px;
  right: 0;
  bottom: 0;
  left: 45px;
  clear: both;
  overflow: auto;
  padding: 0;
  background-image: url(../images/tone_fx_line@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorToneChainOutAssignLbl {
  position: absolute;
  top: 3px;
  left: 13px;
  color: var(--color-gray-lighten);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.editorToneChainSceneEffectsLbl {
  position: absolute;
  top: 3px;
  left: 100px;
  color: var(--color-gray-lighten);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.editorToneChainMFXLbl {
  position: absolute;
  top: 27px;
  left: 15px;
  color: var(--color-white-darken);
  font-size: 17px;
  font-family: RobotoCondensedRegular;
  line-height: 20px;
  letter-spacing: -0.41px;
}
.editorToneChainDRYLbl {
  position: absolute;
  top: 91px;
  left: 15px;
  color: var(--color-white-darken);
  font-size: 17px;
  font-family: RobotoCondensedRegular;
  line-height: 20px;
  letter-spacing: -0.41px;
}
.editorToneChainPartLbl {
  position: absolute;
  top: 59px;
  left: 237px;
  color: var(--color-white-darken);
  font-size: 17px;
  font-family: RobotoCondensedRegular;
  line-height: 20px;
  letter-spacing: -0.41px;
}

/* Tone MFX */
.editorToneChainBtn > input {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
.editorToneChainBtn > label {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 23px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorToneChainBtn input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.editorToneChainBtn input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-image: url(../images/btn_hold_off@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Tone MFXBtn */
.editorToneChainMFXBtnFrame {
  position: absolute;
  top: 24px;
  left: 95px;
  width: 66px;
  height: 25px;
  cursor: pointer;
}
.editorToneChainMFXBtnFrame {
  background-color: var(--color-black);
}
.editorToneChainMFXBtnFrame.pushing {
  background-color: var(--color-highlight);
}

.editorToneChainBtn input[type="checkbox"]:checked + label[for="editorTonePart1ChainMFXBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorToneChainBtn input[type="checkbox"] + label[for="editorTonePart1ChainMFXBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}

.editorToneChainBtn input[type="checkbox"]:checked + label[for="editorTonePart2ChainMFXBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorToneChainBtn input[type="checkbox"] + label[for="editorTonePart2ChainMFXBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}

.editorToneChainBtn input[type="checkbox"]:checked + label[for="editorTonePart3ChainMFXBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorToneChainBtn input[type="checkbox"] + label[for="editorTonePart3ChainMFXBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}

.editorToneChainBtn input[type="checkbox"]:checked + label[for="editorTonePart4ChainMFXBtnSwitch-0"] {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.editorToneChainBtn input[type="checkbox"] + label[for="editorTonePart4ChainMFXBtnSwitch-0"] {
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}

/* Tone CommonBtn */
.editorToneCommonBtn {
  position: absolute;
  bottom: 9px;
  left: 9px;
  width: 135px;
  height: 24px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 24px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorToneCommonBtn {
  background-color: rgb(0,0,0,0);
}
.editorToneCommonBtn.pushing {
  background-color: var(--color-highlight);
}
.editorToneCommonBtn > input {
  display: none;
}
/* StructureBtn */
.editorToneStructureBtn {
  position: absolute;
  bottom: 9px;
  left: 175px;
  width: 130px;
  height: 24px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 24px;
  letter-spacing: -0.34px;
  text-align: center;
}
.editorToneStructureBtn {
  background-color: rgb(0,0,0,0);
}
.editorToneStructureBtn.pushing {
  background-color: var(--color-highlight);
}
.editorToneStructureBtn > input {
  display: none;
}

/*
  PartialEdit
*/
.editorPartialSelectParamGroupFrame {
  position: absolute;
  top: 44px;
  right: 0;
  left: 0;
}
.editorPartialSelectParamGroupAreaFrame {
  position: absolute;
  top: 0;
  left: 0;
  right: 64px;
  height: 44px;
  background-color: var(--color-black);
}
.editorPartialSelectParamGroupLbl {
  position: absolute;
  top: 3;
  right: 65px;
  left: 22px;
  height: 39px;
  color: var(--color-primary);
  font-size: 13px;
  font-family: RobotoRegular;
  line-height: 39px;
  letter-spacing: -0.31px;
  text-align: left;
}
.editorPartialSeparator {
  position: absolute;
  top: 107px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--color-green-darken-1);
}
.editorPartialParamListFrame {
  position: relative;
  top: 108px;
  right: 0;
  left: 0;
  height: calc(100% - 108px);
  overflow: auto;
}
.editorPartialSelectParamGroupRightBtnLbl {
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 22px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 22px;
  letter-spacing: -0.29px;
  text-align: center;
}
.editorPartialSelectParamGroupRightBtn > label {
  position: absolute;
  top: 22px;
  right: 5px;
  width: 55px;
  height: 22px;
}
.editorPartialSelectParamGroupRightBtn > input {
  display: none;
}
.editorPartialSelectParamGroupRightBtn > input[type="checkbox"]:checked + label {
  background-image: url(../images/btn_sw_on@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editorPartialSelectParamGroupRightBtn > input[type="checkbox"] + label {
  background-image: url(../images/btn_sw_off@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editorPartialSelectParamGroupUnderLine {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 5px;
  background-color: var(--color-primary);
}

/* partial select box for partial page */

.editorPartialSelectOscAreaFrame {
  position: absolute;
  top: 22px;
  right: 4px;
  left: 2px;
  height: 44px;
}
.editorPartialOscSelectBox {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  right: 0px;
  height: 44px;
}
.editorPartialOscSelectBox {
  background-color: var(--color-black);
}
.editorPartialOscSelectBox.pushing {
  background-color: var(--color-highlight);
}
.editorPartialOscTypeLbl {
  position: absolute;
  top: 4px;
  left: 12px;
  font-size: 12px;
  font-family: RobotoCondensedItalic;
  line-height: 14px;
  letter-spacing: -0.29x;
  color: var(--color-white);
}
.editorPartialOscNameLblL {
  position: absolute;
  top: 4px;
  left:80px;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 16px;
  letter-spacing: -0.34px;
  white-space: pre;
  color: var(--color-white);
}
.editorPartialOscNameLblR {
  position: absolute;
  top: 24px;
  left: 80px;
  font-size: 14px;
  font-family: RobotoCondensedRegular;
  line-height: 16px;
  letter-spacing: -0.34px;
  white-space: pre;
  color: var(--color-white);
}
.editorPartialSelectOscBtn {
  position: absolute;
  top: -1;
  right: 2;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}