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

/* 
  Font
*/
/* NotoSansJP */
@font-face {
  font-family: "NotoSansJPRegular";
  src: url(../js/fonts/NotoSansJP-Regular.otf);
}

/* Roboto */
@font-face {
  font-family: "RobotoBold";
  src: url(../js/fonts/Roboto-Bold.ttf);
}
@font-face {
  font-family: "RobotoBoldItalic";
  src: url(../js/fonts/Roboto-BoldItalic.ttf);
}
@font-face {
  font-family: "RobotoItalic";
  src: url(../js/fonts/Roboto-Italic.ttf);
}
@font-face {
  font-family: "RobotoMedium";
  src: url(../js/fonts/Roboto-Medium.ttf);
}
@font-face {
  font-family: "RobotoMediumItalic";
  src: url(../js/fonts/Roboto-MediumItalic.ttf);
}
@font-face {
  font-family: "RobotoRegular";
  src: url(../js/fonts/Roboto-Regular.ttf);
}

/* RobotoCondensed */
@font-face {
  font-family: "RobotoCondensedBold";
  src: url(../js/fonts/RobotoCondensed-Bold.ttf);
}
@font-face {
  font-family: "RobotoCondensedBoldItalic";
  src: url(../js/fonts/RobotoCondensed-BoldItalic.ttf);
}
@font-face {
  font-family: "RobotoCondensedItalic";
  src: url(../js/fonts/RobotoCondensed-Italic.ttf);
}
@font-face {
  font-family: "RobotoCondensedRegular";
  src: url(../js/fonts/RobotoCondensed-Regular.ttf);
}

/*
  Common Items
*/
/*
  Loading
*/
.loading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.loadingImg {
  width: 60px;
  height: 60px;
  margin: 50% auto 0;
  background-image: url("../images/loading_icon.gif");
  background-size: contain;
  background-repeat: no-repeat;
}
/*
  Main
*/
.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mainFrame {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 49px;
}

/* 
  Footer
*/
.footerFarme {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 49px;
}
.footer {
  height: 49px;
  background-color: var(--color-black);
}
.footerGroupBtn > input {
  display: none;
}
.footerGroupBtn > label {
  float: left;
  background-position: center top;
  background-size: 53px 49px;
  background-repeat: no-repeat;
}
/* on */
.footerGroupBtn > input[type="radio"]:checked + label[for="footerGroupBtn-0"] {
  background-image: url(../images/btn_fav_on@2x.png) !important;
}
.footerGroupBtn > input[type="radio"]:checked + label[for="footerGroupBtn-1"] {
  background-image: url(../images/btn_editor_on@2x.png) !important;
}
.footerGroupBtn > input[type="radio"]:checked + label[for="footerGroupBtn-2"] {
  pointer-events: none;
  background-image: url() !important;
  /* 二次実装以降に設定 */
  background-image: url(../images/btn_librarian_on@2x.png) !important;
}
.footerGroupBtn > input[type="radio"]:checked + label[for="footerGroupBtn-3"] {
  pointer-events: none;
  background-image: url() !important;
  /* 二次実装以降に設定 */
  /* background-image: url(../images/btn_sysefx_on@2x.png) !important; */
}
.footerGroupBtn > input[type="radio"]:checked + label[for="footerGroupBtn-4"] {
  pointer-events: none;
  /* background-image: url() !important; */
  /* 二次実装以降に設定 */
  background-image: url(../images/btn_setup_on@2x.png) !important;
}
/* off */
.footerGroupBtn > label[for="footerGroupBtn-0"] {
  background-image: url(../images/btn_fav@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-1"] {
  background-image: url(../images/btn_editor@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-2"] {
/*  pointer-events: none;*/
  background-image: url() !important;
  /* 二次実装以降に設定 */
  background-image: url(../images/btn_librarian@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-3"] {
  pointer-events: none;
  background-image: url() !important;
  /* 二次実装以降に設定 */
  /* background-image: url(../images/btn_sysefx@2x.png) !important; */
}
.footerGroupBtn > label[for="footerGroupBtn-4"] {
/*  pointer-events: none;*/
/*  background-image: url() !important;*/
  /* 二次実装以降に設定 */
  background-image: url(../images/btn_setup@2x.png) !important;
}
/* status */
.footerGroupBtn > label[for="footerGroupBtn-5"] {
  background-image: url(../images/btn_no_connect@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-5"].isPowSource {
  background-image: url(../images/btn_ac@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-5"].isBattLevel0 {
  background-image: url(../images/btn_battery0@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-5"].isBattLevel1 {
  background-image: url(../images/btn_battery30@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-5"].isBattLevel2 {
  background-image: url(../images/btn_battery50@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-5"].isBattLevel3 {
  background-image: url(../images/btn_battery70@2x.png) !important;
}
.footerGroupBtn > label[for="footerGroupBtn-5"].isBattLevel4 {
  background-image: url(../images/btn_battery@2x.png) !important;
}

/*
  FsSlider 
 */
.fsSlider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); 
}
.fsSliderParamNameLbl {
  position: absolute;
  top: 75px;
  right: 0;
  left: 0;
  color: var(--color-white);
  font-size: 17px;
  line-height: 20px;
  font-family: RobotoBold;
  letter-spacing: -0.41px;
  text-align: center;
}
.fsSliderValueStrg {
  position: absolute;
  top: 118px;
  right: 0;
  left: 0;
  color: var(--color-white);
  font-size: 68px;
  line-height: 85px;
  font-family: RobotoRegular;
  letter-spacing: -1.74px;
  text-align: center;
}
.fsSliderSliderArea {
  position: absolute;
  top: 183px;
  right: 0;
  left: 0;
  height: 44px;
}
.fsSliderBar {
  position: absolute;
  top: 40px;
  right: 44px;
  left: 44px;
  height: 4px;
  background-color: var(--color-gray);
}
.fsSliderBar > div {
  position: absolute;
  top: 0 !important; /* ebuilder側でDOMに直接設定されてしまうため、設定 */
  height: 4px !important; /* ebuilder側でDOMに直接設定されてしまうため、設定 */
  pointer-events: none;
  background-color: var(--color-primary);
}
.fsSliderBar > p {
  display: none;
}
.fsSliderIncBtn,
.fsSliderDecBtn {
  position: absolute;
  top: 20;
  width: 44px;
  height: 44px;
}
.fsSliderIncBtn {
  right: 0;
}
.fsSliderDecBtn {
  left: 0;
}
.fsSliderIncBtn::before,
.fsSliderDecBtn::before {
  position: absolute;
  top: 21px;
  right: 12px;
  bottom: 21px;
  left: 12px;
  background-color: var(--color-white);
  text-align: center;
  content: "";
}
.fsSliderIncBtn::after {
  position: absolute;
  top: 12px;
  right: 21px;
  bottom: 12px;
  left: 21px;
  background-color: var(--color-white);
  text-align: center;
  content: "";
}

/* 
  Numpad
*/
.numpad {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 320px;
  height: 274px;
  margin: 0 auto;
  background-color: var(--color-black);
}
.numpadValueAreaFrame {
  position: absolute;
  top: 0;
  left: 1px;
  width: 238px;
  height: 44px;
  background-color: var(--color-gray);
}
.numpadValueLbl {
  position: absolute;
  top: 3px;
  right: 90px;
  color: var(--color-white);
  font-size: 32px;
  line-height: 38px;
  font-family: RobotoBold;
  letter-spacing: -0.77px;
  text-align: right;
}
.numpadBtn0,
.numpadBtn1,
.numpadBtn2,
.numpadBtn3,
.numpadBtn4,
.numpadBtn5,
.numpadBtn6,
.numpadBtn7,
.numpadBtn8,
.numpadBtn9,
.numpadBtnPlusMinus,
.numPadBtnDot {
  position: absolute;
  width: 78px;
  height: 44px;
  background-color: var(--color-gray-darken);
  color: var(--color-white);
  font-size: 25px;
  line-height: 44px;
  font-family: RobotoRegular;
  letter-spacing: -0.6px;
  text-align: center;
}
.numpadBtnDel,
.numpadBtnInc,
.numpadBtnInc10,
.numpadBtnDec,
.numpadBtnDec10 {
  position: absolute;
  width: 78px;
  height: 44px;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: 25px;
  line-height: 44px;
  font-family: RobotoRegular;
  letter-spacing: -0.6px;
  text-align: center;
}
.numpadBtn0 {
  top: 184px;
  left: 81px;
}
.numpadBtn1 {
  top: 138px;
  left: 1px;
}
.numpadBtn2 {
  top: 138px;
  left: 81px;
}
.numpadBtn3 {
  top: 138px;
  left: 161px;
}
.numpadBtn4 {
  top: 92px;
  left: 1px;
}
.numpadBtn5 {
  top: 92px;
  left: 81px;
}
.numpadBtn6 {
  top: 92px;
  left: 161px;
}
.numpadBtn7 {
  top: 46px;
  left: 1px;
}
.numpadBtn8 {
  top: 46px;
  left: 81px;
}
.numpadBtn9 {
  top: 46px;
  left: 161px;
}
.numpadBtnPlusMinus {
  top: 184px;
  left: 1px;
}
.numPadBtnDot {
  top: 184px;
  left: 161px;
}
.numpadBtnDel {
  top: 0;
  right: 1px;
  background-image: url(../images/delete@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.numpadBtnInc {
  top: 92px;
  right: 1px;
}
.numpadBtnInc10 {
  top: 46px;
  right: 1px;
}
.numpadBtnDec {
  top: 138px;
  right: 1px;
}
.numpadBtnDec10 {
  top: 184px;
  right: 1px;
}
.numpadBtn0.pushing,
.numpadBtn1.pushing,
.numpadBtn2.pushing,
.numpadBtn3.pushing,
.numpadBtn4.pushing,
.numpadBtn5.pushing,
.numpadBtn6.pushing,
.numpadBtn7.pushing,
.numpadBtn8.pushing,
.numpadBtn9.pushing,
.numpadBtnPlusMinus.pushing,
.numPadBtnDot.pushing,
.numpadBtnDel.pushing,
.numpadBtnInc.pushing,
.numpadBtnInc10.pushing,
.numpadBtnDec.pushing,
.numpadBtnDec10.pushing {
  background-color: var(--color-primary);
}
.numpadFooterFrame {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44px;
  background-color: var(--color-secondary);
}
.numpadFooterBtn__r,
.numpadFooterBtn__l {
  position: absolute;
  bottom: 10px;
  width: 104px;
  height: 22px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  color: var(--color-white);
  font-size: 13px;
  font-family: RobotoCondensedRegular;
  line-height: 22px;
  letter-spacing: -0.31px;
  text-align: center;
}
.numpadFooterBtn__r {
  right: 21px;
}
.numpadFooterBtn__l {
  left: 21px;
}

/*
  Select Item
*/
.selectItemBox {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 44px;
  background-color: var(--color-black);
}
.selectItemBoxLbl {
  position: absolute;
  top: 3px;
  left: 12px;
  height: 14px;
  color: var(--color-green);
  font-size: 12px;
  font-family: RobotoCondensedRegular;
  line-height: 14px;
  letter-spacing: -0.29px;
}
.selectItemBoxSelectBox__basic,
.selectItemBoxSelectBox__withBtn {
  position: absolute;
  top: 22px;
  left: 2px;
  padding-left: 6px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
}
.selectItemBoxSelectBox__basic,
.selectItemBoxSelectBox__withBtn {
  background-color: var(--color-black);
}
.selectItemBoxSelectBox__basic.pushing,
.selectItemBoxSelectBox__withBtn.pushing {
  background-color: var(--color-highlight);
}
.selectItemBoxSelectBox__basic {
  right: 4px;
  height: 22px;
}
.selectItemBoxSelectBox__withBtn {
  right: 69px;
  height: 22px;
}
.selectItemBoxSelectBox__basic > p,
.selectItemBoxSelectBox__withBtn > p {
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoCondensedItalic;
  line-height: 20px;
  letter-spacing: -0.34px;
  white-space: pre;
}
.selectItemBoxSelectBox__basic > p::after,
.selectItemBoxSelectBox__withBtn > 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;
}
.selectItemBoxRightBtn {
  position: absolute;
  top: 22px;
  right: 4px;
  width: 55px;
  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;
}
.selectItemBoxRightBtn {
  background-color: rgba(0,0,0,0);
}
.selectItemBoxRightBtn.pushing {
  background-color: var(--color-highlight);
}
.selectItemBoxRightBtn.off {
  border: 1px solid var(--color-gray);
  color: var(--color-gray);
}

/*
  Param List Item
*/
.paramListItemFrame {
  position: relative;
}
/* 
  __large: for Curve Select Box
  basic: for Other 
*/
.paramListItem,
.paramListItem__middle,
.paramListItem__large {
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--color-black);
}
.paramListItem {
  height: 44px;
}
.paramListItem__middle {
  height: 89px;
}
.paramListItem__large {
  height: 172px;
}

/* Label */
/* 操作子Switch(basic)、ControlAssignのTab2に付くLabelは表示領域を広めに持つ */
.paramNameLbl,
.paramNameLbl__blk,
.paramNameLbl__swb,
.paramNameLbl__ca2 {
  position: absolute;
  top: 0px;
  left: 15px;
  height: 44px;
  font-size: 17px;
  font-family: RobotoRegular;
  line-height: 44px;
  letter-spacing: -0.41px;
  text-align: left;
}
.paramNameLbl {
  right: 160px;
  color: var(--color-white);
}
.paramNameLbl__blk {
  right: 65px;
  color: var(--color-green);
}
.paramNameLbl__swb {
  right: 65px;
  color: var(--color-white);
}
.paramNameLbl__ca2 {
  right: 92px;
  color: var(--color-white);
}

/* Slider */
/* 実際はebuilderのbarを利用するため、そちらに合わせてスタイルを指定 */
.paramSlider__basic,
.paramSlider__centered {
  position: absolute;
  top: 11px;
  right: 4px;
  width: 150px;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--color-gray);
}
.paramSlider__basic > div,
.paramSlider__centered > div {
  position: absolute;
  top: 0;
  height: 20px;
  pointer-events: none;
  background-color: var(--color-green);
}
.paramSlider__basic > p,
.paramSlider__centered > p {
  display: none;
}
/* range */
.paramSlider__range__r,
.paramSlider__range__l {
  position: absolute;
  top: 11px;
  width: 75px;
  height: 22px;
  overflow: hidden;
  border-top: 1px solid var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
}
.paramSlider__range__r {
  right: 4px;
  border-right: 1px solid var(--color-gray);
}
.paramSlider__range__l {
  right: 79px;
  border-left: 1px solid var(--color-gray);
}
.paramSlider__range__r > div,
.paramSlider__range__l > div {
  position: absolute;
  top: 0;
  height: 20px;
  pointer-events: none;
  background-color: var(--color-green);
}
.paramSlider__range__r > p,
.paramSlider__range__l > p {
  display: none;
}
/* slider stringer */
.paramSliderStrg__basic,
.paramSliderStrg__centered {
  position: absolute;
  top: 11px;
  right: 4px;
  width: 151px;
  height: 22px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoBoldItalic;
  line-height: 22px;
  letter-spacing: -0.3px;
  text-align: center;
  pointer-events: none; /* stringerに対するイベントをキャンセルしてイベントを透過させる */
}
.paramSliderStrg__range__r,
.paramSliderStrg__range__l {
  position: absolute;
  top: 11px;
  width: 75px;
  height: 22px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoBoldItalic;
  line-height: 22px;
  letter-spacing: -0.3px;
  text-align: center;
  pointer-events: none; /* stringerに対するイベントをキャンセルしてイベントを透過させる */
}
.paramSliderStrg__range__r {
  right: 4px;
}
.paramSliderStrg__range__l {
  right: 79px;
}
.paramSwitch__basic > label {
  position: absolute;
  top: 11px;
  right: 5px;
  width: 55px;
  height: 22px;
}

/* Switch */
.paramSwitch__basic > input {
  display: none;
}
.paramSwitch__basic > 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;
}
.paramSwitch__basic > input[type="checkbox"] + label {
  background-image: url(../images/btn_sw_off@2x.png);
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.paramSwitch__toggle {
  position: absolute;
  top: 11px;
  right: 4px;
  width: 150px;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--color-gray);
}
.paramSwitch__toggle > input {
  display: none;
}
.paramSwitch__toggle > label {
  position: absolute;
  width: 75px;
  height: 10px;
  color: var(--color-white);
  font-size: 14px;
  line-height: 22px !important; /* ebuilder側でheightを指定しないと、style属性で0が指定されるため、importantにする。 */
  font-family: RobotoBoldItalic;
  letter-spacing: -0.3px;
  text-align: center;
}
.paramSwitch__toggle > label[for^="editorAssignParamSettingParamList"][for$="AssignModeToggleBtn-1"] {
  padding-right: 2px;
  letter-spacing: -1.7px;
}
.paramSwitch__toggle > label[for^="editorToneParamPart"][for$="ToneCommonBendModeSwitch-1"] {
  padding-right: 2px;
  letter-spacing: -1.4px;
}
.paramSwitch__toggle > input[type="radio"][value="0"] + label {
  left: 0;
}
.paramSwitch__toggle > input[type="radio"][value="1"] + label {
  right: 0;
}
.paramSwitch__toggle > input[type="radio"]:checked + label {
  background-color: var(--color-green);
}

/* List Box */
.paramListBox__func,
.paramListBox__single {
  position: absolute;
  top: 11px;
  right: 4px;
  width: 150px;
  height: 22px;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  border-radius: 3px;
}
.paramListBox__func,
.paramListBox__single {
  background-color: rgba(0,0,0,0);
}
.paramListBox__func.pushing,
.paramListBox__single.pushing {
  background-color: var(--color-highlight);
}
.paramListBox__func > p,
.paramListBox__single > p {
  position: absolute;
  left: 6px;
  color: var(--color-white);
  font-size: 14px;
  font-family: RobotoItalic;
  line-height: 22px;
  letter-spacing: -0.3px;
}
.paramListBox__func::after,
.paramListBox__single::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;
}

/* Group Btn */
.paramGroupBtn {
  position: absolute;
  top: 11px;
  right: 4px;
  width: 151px;
  height: 22px;
  border: 1px solid var(--color-gray);
}
.paramGroupBtn > input {
  display: none;
}

/* Assign Lbl */
.paramAssignLbl__r1,
.paramAssignLbl__r2,
.paramAssignLbl__r3,
.paramAssignLbl__r4,
.paramAssignLbl__r5,
.paramAssignLbl__r6,
.paramAssignLbl__r7,
.paramAssignLbl__r8 {
  position: absolute;
  top: 11px;
  width: 22px;
  height: 22px;
  padding: 2px;
  border-radius: 5px; /* padding分多めにとる。 */
  background-clip: content-box;
  background-color: var(--color-primary);
  color: var(--color-black);
  font-size: 18px;
  font-family: RobotoBold;
  line-height: 19px;
  letter-spacing: -0.43px;
  text-align: center;
}
.paramAssignLbl__r1.off,
.paramAssignLbl__r2.off,
.paramAssignLbl__r3.off,
.paramAssignLbl__r4.off,
.paramAssignLbl__r5.off,
.paramAssignLbl__r6.off,
.paramAssignLbl__r7.off,
.paramAssignLbl__r8.off {
  background-color: var(--color-secondary);
}
.paramAssignLbl__r1 {
  right: 44px;
}
.paramAssignLbl__r2 {
  right: 66px;
}
.paramAssignLbl__r3 {
  right: 88px;
}
.paramAssignLbl__r4 {
  right: 110px;
}
.paramAssignLbl__r5 {
  right: 132px;
}
.paramAssignLbl__r6 {
  right: 154px;
}
.paramAssignLbl__r7 {
  right: 176px;
}
.paramAssignLbl__r8 {
  right: 198px;
}

/* Dril Down　*/
.paramDrillDownBtn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  transform: rotate(0.5turn);
  width: 44px;
  height: 44px;
  background-image: url(../images/btn_back@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Curve Select Box */
.paramCurveSelectBox {
  position: absolute;
  top: 11px;
  right: 4px;
  width: 150px;
  height: 150px;
  padding: 1px;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  background-image: url(../images/Curves_asgn_00@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--color-black);
}
.paramCurveSelectBox > p {
  position: absolute;
  top: 7;
  right: 11;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* disabled */
.paramListItem.disabled *,
.paramListItem__large.disabled * {
  pointer-events: none;
}

.paramListItem.disabled > .paramNameLbl,
.paramListItem__large.disabled > .paramNameLbl,
.paramListItem.disabled > .paramNameLbl__swb,
.paramListItem__large.disabled > .paramNameLbl__swb,
.paramListItem.disabled > .paramNameLbl__ca2,
.paramListItem__large.disabled > .paramNameLbl__ca2,
.paramListItem.disabled > .paramSliderStrg__basic,
.paramListItem.disabled > .paramSliderStrg__centered,
.paramListItem.disabled > .paramSliderStrg__range__r,
.paramListItem.disabled > .paramSliderStrg__range__l,
.paramListItem.disabled > .paramSwitch__toggle > label,
.paramListItem.disabled > .paramListBox__single,
.paramListItem.disabled > .paramListBox__single > p {
  color: var(--color-gray);
}

.paramListItem.disabled > .paramSwitch__basic > input[type="checkbox"] + label {
  background-image: url(../images/btn_sw_off@2x.png);
}

.paramListItem.disabled > .paramSlider__basic > div,
.paramListItem.disabled > .paramSlider__centered > div,
.paramListItem.disabled > .paramSlider__range__r > div,
.paramListItem.disabled > .paramSlider__range__l > div,
.paramListItem.disabled > .paramSwitch__toggle > input[type="radio"]:checked + label {
  background-color: var(--color-secondary);
}

.paramListItem.disabled > .paramListBox__single {
  border: 1px solid var(--color-gray);
}
.paramListItem.disabled > .paramListBox__single::after {
  background-image: url(../images/btn_list_off@2x.png);
}

.paramListItem.disabled > .paramDrillDownBtn,
.paramListItem__large.disabled > .paramCurveSelectBox {
  opacity: 0.3;
}

/* hidden */
.paramListItem.hidden,
.paramListItem__large.hidden {
  display: none;
}

/* 独自のダイアログを使用する為非表示に設定 */
.select-popup-wrapper {
  display: none;
}