:root{
  --rohm-red:#D90013;
  --rohm-gray:#444F58;

  --bg:#F6F7F8;
  --card:#fff;
  --line:#D9DEE3;
  --line-strong:#C7CED6;

  --text:#2F3941;
  --muted:#667480;

  --shadow:0 10px 28px rgba(0,0,0,.08);
  --shadow-soft:0 8px 20px rgba(0,0,0,.06);

  --radius:14px;

  --nav-h:72px; /* fallback */
  --container:1240px;
  --wbs-container:1480px;

  --focus:rgba(217,0,19,.18);
  --red-soft:rgba(217,0,19,.08);

  --link:#0A66C2;

  /* UX polish */
  --hover-bg:#F1F4F7;
  --head-bg:#F2F4F6;
  --chip:#F1F3F5;
  --tap:rgba(68,79,88,.08);

  /* Bottom nav overlap fix (extra clearance) */
  --bottom-clear:calc(var(--nav-real, var(--nav-h)) + 40px);

  /* measured heights (set by JS) */
  --header-real:92px;
  --nav-real:5px;
}
html,body{height:100%}
body, body.de_DE, body.de_DE #content, body.en_US, body.en_US #content {
    margin: 0;
    /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial !important; */
	font-family: 'IBM Plex SansRegular', Verdana, Roboto, "Myriad Set Pro", Helvetica, Arial, sans-serif !important;
    color: var(--text);
    background: var(--bg);
    padding-bottom: var(--bottom-clear);
	--bottom-clear: calc(var(--nav-real, var(--nav-h)) + 40px);
    --nav-real: 5px;
}
body.zh_CN #content {font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Helvetica Neue, Arial, simsun, sans-serif !important;}
body.zh_TW #content {font-family: Arial, "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif, "新細明體"!important;}
body.ko_KR #content{font-family: "Malgun Gothic", NanumGothic, Verdana, Roboto, "Yoon Gothic", Gulim, Batang, Dotum, Arial, "sans-serif"!important;}
body.ja_JP #content {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important;}
#wrapper {display: none;}
.main{
  max-width:var(--container);
  margin:20px auto;
  padding:0 20px;
  /*padding-bottom:var(--bottom-clear);/* /* ✅ ensure bottom reachable */
}
@media (max-width:1499.98px){.row {margin-left: -13px;margin-right: -13px;}}
.container-fluid{width:99%;}
@media (max-width:767.98px){
	:has(.main.wbs) .container-fluid {width: 97.7%;}
}
.main.wbs{max-width:var(--wbs-container);}
#wbsExplanation {
    margin: 0px;
	border:0px none;
}
.portlet-title-text{display:none;}
.container-fluid, .col-md-12 {padding-left:0;padding-right:0;}
.portlet-boundary_com_rohm_portal_wbs_plecs_RohmWbsWebPortlet_.portlet-borderless section .portlet-content{padding:0;}
.portlet-boundary_com_rohm_portal_wbs_plecs_RohmWbsWebPortlet_.portlet-borderless section .portlet-header{margin-bottom: 0;}
.portlet-boundary_com_rohm_portal_wbs_plecs_RohmWbsWebPortlet_ section .portlet-header h2 {display: none;}
.app.plecs-webs {
      max-width: 1200px;
      width: 100%;
      margin: 24px auto;
      padding: 24px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
	  display: flow-root;
    }
    /*h1 {
		margin: 0;
		font-size: 18px;
		font-weight: 850;
		letter-spacing: .2px;
	}
    .steps {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      font-size: 0.9rem;
    }
    .step {
      flex: 1;
      padding: 8px 10px;
      border-radius: 999px;
      background: #e5e7eb;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .step.active {
      background: #1f2937;
      color: #ffffff;
      font-weight: 600;
    }*/
	header{background:#fff;border-bottom:1px solid var(--line)}
	header .wrap{
	  max-width:var(--container);
	  margin:0 auto;
	  padding:16px 20px;
	  display:flex;
	  gap:12px;
	  align-items:flex-start;
	}
	.brand{
	  width:40px;height:40px;border-radius:10px;
	  display:grid;place-items:center;
	  background:var(--rohm-red);
	  color:#fff;font-weight:900;
	  box-shadow:0 6px 14px rgba(217,0,19,.22);
	}
	h1{margin:0;font-size:18px;font-weight:850;letter-spacing:.2px}
	.stepper{display:flex;column-gap:18px;margin-top:10px;font-size:13px;flex-wrap:wrap}
	.stepper button{
	  appearance:none;border:0;background:transparent;
	  padding:0 0 6px 0;
	  border-bottom:2px solid transparent;
	  color:var(--muted);
	  cursor:text;
	  font:inherit;
	  transition:color .15s ease, border-color .15s ease;
	}
	.stepper button.clickable{cursor:pointer;}
	.stepper button.clickable:hover{color:var(--text);border-color:rgba(68,79,88,.25)}
	.stepper button.active{color:var(--text);border-color:var(--rohm-red);font-weight:900;}
	a:focus-visible, button:focus-visible, input:focus-visible {
	    outline: 3px solid var(--focus);
	    outline-offset: 2px;
	    border-radius: 10px;
	}
    /*.step span.num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid currentColor;
      font-size: 0.75rem;
    }*/
/* ===== Cards ===== */
	.card{
	  background:var(--card);
	  border:1px solid var(--line);
	  border-radius:var(--radius);
	  box-shadow:var(--shadow);
	}
	.card h2{
	  margin:0;
	  padding:14px 16px;
	  font-size:15px;
	  border-bottom:1px solid var(--line);
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  gap:10px;
	  font-weight: 700;
	}
	.card h2 .muted{color:var(--muted);font-size:12px;font-weight:800}
	.card .card_wrapper{padding:16px}

	.step{display:none}
	.step.active{display:block;}

	.badge{
	  display:inline-flex;align-items:center;
	  padding:3px 10px;border-radius:999px;
	  border:1px solid var(--line);
	  background:var(--chip);
	  font-size:12px;font-weight:900;
	  color:var(--text);
	}
	.hr{height:1px;background:var(--line);margin:10px 0}
	.muted{color:var(--muted);}
	.mt20{margin-top:12px;}
	.w900{font-weight: 900;}
	
	.step[data-step="1"] .card > .card_wrapper{ /* Step1 outer body (the one that contains grid) */
	  /* keep it clean; no scrolling here */
	  overflow:hidden;
	}

	.step1-grid{
	  display:grid;
	  grid-template-columns: 0.8fr 1.2fr;
	  gap:16px;
	  align-items:stretch;

	  /* ✅ explicit height => stable */
	  height:calc(100vh - var(--header-real) - var(--nav-real) - 40px);
	  overflow:hidden; /* ✅ do not allow the grid itself to overflow */
	  min-height:528px; /* avoid collapsing on small heights */
	}
	@media (max-width:1200px){
	  .step1-grid{
		grid-template-columns: 0.8fr 1.2fr;
		height: auto; /* mobile/tablet: allow normal flow */
		overflow:visible;
		min-height:auto;
	  }
	  /* .step1-grid .col3{grid-column:1/-1} */
	}
	@media (max-width:760.98px){
	  .step1-grid{grid-template-columns:1fr}
	}
	@media (min-width:599px) and (max-width:760.98px){
	  :has(.buttons.step-nav__center button + button) .buttons.step-nav__center {left: 38vw!important;}
	  :has(.buttons.step-nav__center button) .buttons.step-nav__center,
	  :not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{left: 44vw!important;}
	}
	@media (min-width:480px) and (max-width:600.98px){
	  :has(.buttons.step-nav__center button + button) .buttons.step-nav__center {left: 36vw!important;}
	  :has(.buttons.step-nav__center button) .buttons.step-nav__center,
	  :not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{left: 44vw!important;}
	}
	@media (max-width:479.98px){
	  :has(.buttons.step-nav__center button + button) .buttons.step-nav__center {left: 30.33333vw!important;}
	  :has(.buttons.step-nav__center button) .buttons.step-nav__center,
	  :not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{left: 41vw!important;}
	}

	/* each Step1 column is a flex card so header stays, body scrolls */
	.step1-grid>.card:first-child{ padding-bottom: 15px;}
	.step1-grid > .card{
	  height:100%;
	  display:flex;
	  flex-direction:column;
	  min-height:0; /* ✅ critical for nested scroll */
	  margin-bottom:0;
	}
	/* .step1-grid > .card > .card_wrapper */
	.step[data-step="1"] .card_wrapper.step1-grid > .card > .card_wrapper,
	.step[data-step="1"] .card_wrapper .step1-grid > .card > .card_wrapper.overflow-y{
	  overflow:auto;  /* ✅ internal scroll */
	  min-height:0;   /* ✅ critical for flex overflow */
	  padding-right:12px;
	}
	
	/* Step1 clickable elements */
	.pillbar{display:flex;gap:10px;flex-wrap:nowrap;width: 90%;margin-right: 3%;align-items: center;/*margin-bottom:12px*/}
	.pillbar:last-child {width: 80%; margin-right: 0;}
	.pill{
	  padding:8px 12px;border-radius:999px;
	  font-size:13px;font-weight:900;
	  cursor:pointer;
	  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
	  white-space:nowrap;
	  /*border:1px solid var(--line);
	  background:#fff;
	  box-shadow:0 2px 8px rgba(0,0,0,.04);*/
	}
	.pill-normal{padding:8px 12px;font-size:13px;font-weight:900;cursor:pointer;}
	/* .pill:hover{border-color:rgba(68,79,88,.35);background:var(--hover-bg);box-shadow:0 6px 14px rgba(0,0,0,.06)} */
	.pill:active{background:var(--tap)}
	.pill.active{background:var(--rohm-red);border-color:var(--rohm-red);color:#fff;box-shadow:0 10px 22px rgba(217,0,19,.22)}
	.lgray {background-color: #f8fafc;border-radius: 30px;padding: 4px; border: 1px solid var(--line-strong); display: flex; align-content: center;min-width: 480px;}
	@media (min-width:1200px){
		.step1-grid{ height:auto;}
		.step1-grid .card:first-child{height: auto;max-height:528px;} 
	}
	@media (min-width:1160px) and (max-width:1199.98px){
		/* .lgray{margin-right: 50px;} */
		.step1-grid .card:first-child{height: auto;max-height: 528px;} 
	}
	@media (min-width:980px) and (max-width:1159.98px){
		/* .lgray{margin-right: 50px;} */
		.step1-grid .card:first-child{height: auto;max-height: 528px;}
	}
	@media (max-width:979.98px){
		.step[data-step="1"] .card > .card_wrapper.d-flex, #categoryPills{display: flex !important;}
		.lgray{margin-right: 0px;width: 100%;}
		.step1-grid{height: auto;}
	}
	@media (max-width:849.98px){
		.step[data-step="1"] .card > .card_wrapper.d-flex, #categoryPills{display:block !important;}
		.step[data-step="1"] .card > .card_wrapper.d-flex{overflow: hidden; width: 100%;}
		#categoryPills{margin-bottom: 10px;}
		.lgray{min-width:max-content;width:max-content;margin-right:0;}
		.pillbar, .pillbar:last-child{width:100%;margin-right:0;}
		.pillbar:first-child{overflow: auto;}
		.lgray{overflow: auto;}
		.pillbar:last-child {width:100%;margin-right: 0;}
	}
	@media (min-width:761px) and (max-width:979.98px){
		.step1-grid .card:first-child{height: auto;max-height: 528px;} 
	}
	@media (max-width:760.98px){
		.step1-grid .card:first-child{height: auto;max-height: 400px;} 
	}
	@media (max-width:584.98px){
		/* .pill{line-height:1;} */
	}
	.fontnormal {font-weight: normal;}
	.search, .searchreset-btn {/*max-height: 38px;*/ line-height: 14px;}
	.searchreset-btn {padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; max-height: 38px; line-height: 14px;cursor: pointer;}
	.search{
	  width:100%;
	  padding:10px 12px;border-radius:20px;
	  border:1px solid var(--line-strong);
	  background:#fff;
	  line-height: normal;
	  font-size: 13.3333px;
	}
	 input:focus-visible.search{border-radius:20px;}
	.search:focus{border-color:var(--rohm-red);box-shadow:0 0 0 3px var(--focus)}
	.card_wrapper b{font-weight:700;}
	/* Sticky bottom nav */
	.step-nav{
	  position:fixed;left:0;right:0;bottom:0;
	  height:var(--nav-h);
	  background:#fff;
	  border-top:1px solid var(--line);
	  box-shadow:0 -10px 26px rgba(0,0,0,.10);
	  z-index:90;

	  display:grid;
	  grid-template-columns: 1fr auto 1fr;
	  align-items:center;
	  gap:12px;
	  padding:10px 10px;
	}
	.step-nav__left{justify-self:start;min-width:0}
	.step-nav__step{font-size:12px;font-weight:950;color:var(--rohm-gray)}
	.step-nav__label{font-size:12px;color:var(--muted);font-weight:900;margin-top:2px}
	.zh_TW .step-nav__label{font-weight:600;}
	.step-nav__center{
	  justify-self:center;
	  display:flex;gap:10px;align-items:center;
	  padding:6px;
	  border:1px solid var(--line);
	  border-radius:999px;
	  background:#fff;
	  box-shadow:0 8px 18px rgba(0,0,0,.08);
	}
	.navbtn{
	  padding:10px 14px;margin: 0 auto;border-radius:999px;border:1px solid var(--line-strong);
	  background:#fff;font-weight:950;cursor:pointer;color:var(--text);
	  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
	  font-size: 13.3333px;
	}
	.zh_TW .navbtn{font-weight:600;}
	.navbtn:hover{border-color:rgba(68,79,88,.45);background:var(--hover-bg);box-shadow:0 6px 14px rgba(0,0,0,.05)}
	.navbtn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
	.navbtn--primary{background:var(--rohm-red);border-color:var(--rohm-red);color:#fff;box-shadow:0 10px 20px rgba(217,0,19,.22)}
	.navbtn--primary:hover{background:#C50011;border-color:#C50011}
	
	.step-nav__center {
		position: fixed;
		bottom: 5px;
		z-index: 100;
		margin-top: -10px !important;
		width: auto;
	}
	:has(.buttons.step-nav__center button + button) .buttons.step-nav__center {width: 185px;left: 41vw;}

	:has(.buttons.step-nav__center button) .buttons.step-nav__center,
	:not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{width: 95px;left: 44vw;}
	
	.card_wrapper::-webkit-scrollbar, div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell::-webkit-scrollbar, .card_wrapper.overflow-y::-webkit-scrollbar, #categoryPills::-webkit-scrollbar{height:5px;border-radius:5px;width:5px}
	.card_wrapper::-webkit-scrollbar-track, div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell::-webkit-scrollbar-track, .card_wrapper.overflow-y::-webkit-scrollbar-track, #categoryPills::-webkit-scrollbar-track{--tw-bg-opacity:1;background-color:rgb(255 255 255, 0%/var(--tw-bg-opacity,1));border-radius:5px}
	.card_wrapper::-webkit-scrollbar-thumb, div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell::-webkit-scrollbar-thumb, .card_wrapper.overflow-y::-webkit-scrollbar-thumb, #categoryPills::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1));border-radius:5px}
	.card_wrapper::-webkit-scrollbar-thumb:hover, div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell::-webkit-scrollbar-thumb:hover, .card_wrapper.overflow-y::-webkit-scrollbar-thumb:hover, #categoryPills::-webkit-scrollbar-thumb:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}
	
    .view {
      display: none;
      animation: fadeIn 0.18s ease-out;
    }
    .view.active {
      display: block;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /*.card {
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 20px;
      background: #f9fafb;
    }
    .topology-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-top: 12px;
    }
    .topology-item {
      border-radius: 10px;
      border: 1px solid #d1d5db;
      padding: 14px 16px;
      background: #ffffff;
      cursor: pointer;
      transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
    }
    .topology-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
      border-color: #4b5563;
    }
    .topology-item.selected {
      border-color: #111827;
      box-shadow: 0 0 0 2px #111827;
    }
    .topology-item h3 {
      margin: 0 0 4px;
      font-size: 1rem;
    }
    .topology-item p {
      margin: 0;
      font-size: 0.8rem;
      color: #6b7280;
    }*/
    .topology-list{display:flex;flex-direction:column;gap:10px;/*margin-top:12px*/}
	.topology-item{
	  border:1px solid var(--line);
	  border-radius:14px;
	  padding:12px;
	  font-size:13px;
	  background:#fff;
	  cursor:pointer;
	  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
	}
	.topology-item h3{font-size:inherit; font-weight:950;margin-bottom: 0;}
	.topology-item p{margin-top: 4px;margin-bottom:0;}
	.topology-item:hover{border-color:rgba(68,79,88,.35);background:var(--hover-bg);box-shadow:0 6px 14px rgba(0,0,0,.06)}
	.topology-item:active{background:var(--tap)}
	.topology-item.selected{border-color:rgba(217,0,19,.45);background:var(--red-soft);box-shadow:0 8px 18px rgba(217,0,19,.10)}
	.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
	
	@media (max-width:760px){.formgrid{grid-template-columns:1fr}}
	/* Step 4 frame only */
	.wbs-frame{
	  /* height:min(72vh, 720px); */
	  border-radius:14px;border:1px dashed var(--line-strong);
	  background:#fff;display:flex;align-items:center;justify-content:center;
	  color:var(--muted);font-weight:950;
	}
    label {
      display: flex;
      flex-direction: column;
      font-size: 0.9rem;
      gap: 4px;
    }
    input[type="number"], select {
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      font-size: 0.9rem;
      background: #ffffff;
    }
    input[type="number"]:focus,
    select:focus {
      outline: none;
      border-color: #111827;
      box-shadow: 0 0 0 1px #111827;
    }
    .buttons {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;
    }
    .btn {
      border-radius: 999px;
      border: none;
      padding: 8px 18px;
      font-size: 0.9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-primary {
	  background: #111827 !important;
	  color: #ffffff;
	}
	.btn-outline {
	  background: transparent !important;
	  border: 1px solid #d1d5db;
	  color: #111827;
	}
    .btn:disabled {
      opacity: 0.4;
      cursor: default;
    }
    .summary {
      font-size: 0.9rem;
      margin-bottom: 10px;
      color: #374151;
    }
    .summary strong {
      font-weight: 600;
    }
    .param-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
      font-size: 0.8rem;
    }
    .param-badge {
      padding: 2px 8px;
      border-radius: 999px;
      background: #e5e7eb;
    }
    .placeholder-box {
      margin-top: 16px;
      padding: 16px;
      border-radius: 12px;
      border: 1px dashed #9ca3af;
      background: transparent;
      font-size: 0.9rem;
      color: #374151;
      line-height: 1.5;
    }
    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.8rem;
      background: #f3f4f6;
      padding: 2px 4px;
      border-radius: 4px;
    }
    small.hint {
      font-size: 0.75rem;
      color: #6b7280;
    }
 html:not(#__):not(#___) .cadmin .badge {position: absolute; top: 5px;}
.mat-typography {max-width: 1170px; margin: 0 auto;}
.uneditable-input, input[type=text], input[type=password], input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=color], input[type=search], textarea{
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;}
button>b,
.plecs-button.large {text-shadow: none;}
.container.ng-star-inserted {background-color: transparent;}
@media (min-width: 1200px) {
    .container.ng-star-inserted {background-color: transparent;}
}
.cadmin.control-menu-container{display:none;}


.parameterInputArea, .sectionArea {
    position: relative;
}  
.parameterInputArea .card:first-child ,.sectionArea .card:first-child  {
    width: 68%;
    float: left;
    margin-right: 1.6%;
}
.parameterInputArea .card:nth-child(2), .sectionArea .card:nth-child(2) {
    width: 32%;
    float:left;
    max-width: 100%;
}
.buttons-wrap {
    display: block;
    width: 100%;
    clear: both;
    text-align: right;
}  
/* 20-01-26 */
.parametergroup {display: flex; flex-direction: column; align-items: stretch;}
/*.parametergroup .circuit-image{height:160px;border:1px dashed var(--line-strong);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-weight:900}
.parametergroup .circuit-image img{height:158px;}*/
.parametergroup .circuit-image {height: 260px;display: flex;align-items: center;justify-content: center;margin-top:0;}
.parametergroup .circuit-image img {max-width: 95%;max-height: 240px;}

.parametergroup .form-group-plecs input[type=number], .parametergroup .form-group-plecs-step3 input[type=number],
.parametergroup .form-group-plecs select, .parametergroup .form-group-plecs-step3 select{width:100%;/* height:28px; */}
.parametergroup .form-group-plecs input[type=number], .parametergroup .form-group-plecs-step3 input[type=number]{/* padding-left:5px; *//* padding-right:5px; */}

.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.step1-grid .col3 .formgrid{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:760px){.formgrid{grid-template-columns:1fr}}
@media (max-width:479.98px){.step1-grid .col3 .formgrid{grid-template-columns:1fr 1fr;}}
@media (max-width:424.98px){.step1-grid .col3 .formgrid{grid-template-columns:1fr;}}
.field label{display:block;font-size:12px;font-weight:900;color:var(--rohm-gray)}
.field input{width:100%;/* margin-top:6px; */padding: 8px 12px;border-radius:12px;border:1px solid var(--line-strong);background:#fff;box-shadow: none;}
.field input:focus, .field select:focus{border-color:var(--rohm-red);box-shadow:0 0 0 3px var(--focus)}
/* ===== Step 2/3 + Live View ===== */
.leftbox .card {margin-bottom: 10px;}
.split{display:grid;grid-template-columns: 1fr 380px;gap:16px;align-items:start}
@media (max-width:1020px){.split{grid-template-columns:1fr}}
.aside-sticky{position:sticky;top:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:13px}
.kv span.basic-bold{color:var(--rohm-gray);font-weight:900}
.f16{font-size:16px;}
.preview-thumb{
  height:150px;
  border:1px dashed var(--line-strong);
  border-radius:12px;
  margin-top:10px;
  display:grid;place-items:center;
  cursor:pointer;
  background:#fff;
  color:var(--muted);
  font-weight:900;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.preview-thumb:hover{border-color:rgba(217,0,19,.35);background:var(--red-soft);color:var(--text);box-shadow:0 8px 18px rgba(0,0,0,.06)}
.mt10{margin-top:10px;}
.badge{line-height:1.7;}
.topology-wrapper .circuit-image img{height: 148px;}

/* Step 2 blocks */
.block{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
.block + .block{margin-top:14px}
.block .head{padding:10px 12px;background:var(--head-bg);border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px; flex-wrap: wrap;}
.block .title{font-weight:950;font-size:13px;display:flex;align-items:center;gap:10px}
.status{display:inline-flex;align-items:center;font-size:11px;font-weight:950;padding:2px 8px;border-radius:999px;border:1px solid rgba(217,0,19,.25);background:var(--red-soft)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px; padding:8px 10px;font-size:12px;font-weight:900;cursor:pointer;color:var(--text); transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;}
.tab:hover{border-color:rgba(68,79,88,.35);background:var(--hover-bg);box-shadow:0 6px 14px rgba(0,0,0,.05)}
.tab:active{background:var(--tap)}
.tab.selected{border-color:rgba(217,0,19,.45);background:var(--red-soft)}

/* Step 2 table */
div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell{max-height: 360px;overflow: auto;}
.filterhead, .block.keyProducts:nth-child(2) .head{border-bottom:0 !important;}
div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell{position: relative; z-index: 0; margin: auto;}
div.dt-container div.dt-layout-row.dt-layout-table .dt-layout-cell thead th {position: -webkit-sticky; position: sticky; top: -0.5px; box-shadow: inset #D9DEE3 0 1px 0px 0px;}

.plecs-table{max-height:360px;overflow:auto;border-top:1px solid var(--line);}
.partList table.plecs-table{width:100%!important;border-collapse:separate;border-spacing:0!important;font-size:13px!important;}
.partList .plecs-table th,td{border-right: 1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;padding:10px 4px 10px 10px!important;text-align:left!important;background:#fff!important;vertical-align:middle!important;}
.partList .plecs-table th:last-child,td:last-child{border-right:0!important;}
.partList table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order,.partList table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order,.partList table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order,.partList table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order,.partList table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,.partList table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order,.partList table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order,.partList table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order {right: 6px;}
.partList .plecs-table th{vertical-align: text-top !important;position:sticky!important;/* top:0!important; */padding:10px 26px 10px 10px!important;z-index:3!important;background:var(--head-bg)!important;color:var(--rohm-gray)!important;font-weight:950!important;}
.partList .plecs-table tr th:first-child, .partList .plecs-table tr td:first-child, .partList .plecs-table tr th:first-child, .partList .plecs-table tr td.radio-table{padding-right:4px !important;}
.partList .plecs-table tr:hover td{background:#FBFCFD!important;}
.partList .plecs-table tr th:first-child, .partList .plecs-table tr td:first-child,
.partList .plecs-table tr th:first-child, .partList .plecs-table tr td.radio-table{width:56px;}
.partList .plecs-table.table-bordered td, .partList .plecs-table.table-bordered th{border:0 none;}
.radio{width:18px;height:18px;border-radius:999px;border:2px solid #AEB7C0;display:inline-block;vertical-align:middle}
.radio.on{border-color:var(--rohm-red);box-shadow: inset 0 0 0 5px var(--rohm-red)}
.partList table.table-bordered tr.row-selected:nth-child(even),
.partList table.table-bordered tr.row-selected:nth-child(odd),
.partList table.table-bordered tr.row-selected:nth-child(even) td,
.partList table.table-bordered tr.row-selected:nth-child(odd) td{background:rgba(217,0,19,.05)!important;}

.thwrap{display:flex;align-items:center;gap:8px;white-space:nowrap}
.partList .plecs-table.table-bordered td.PartNumber {min-width: 130px;}
.downloadinfo {float: right;}
.downloadinfo img {width: 17px; margin-top: -2px;}
/*Sorting*/
/*down*/table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc span.dt-column-order{background: #fff url(/o/rohm-theme/images/rohm-theme/newrohm-img/down-vertical-arrows.png) 50% 50% no-repeat;}
/*up*/table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order{background: #fff url(/o/rohm-theme/images/rohm-theme/newrohm-img/top-vertical-arrows.png) 50% 50% no-repeat;}
/*both*/table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc span.dt-column-order{background: #fff url(/o/rohm-theme/images/rohm-theme/newrohm-img/both-vertical-arrows.png) 50% 50% no-repeat;}

table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc span.dt-column-order,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc span.dt-column-order{background-size: 13px;width: 22px;height: 22px;place-items: center;border: 1px solid var(--line);border-radius: 8px;margin-top: 10px;margin-bottom: 7px;pointer-events: all;}

table.dataTable.plecs-table thead>tr>th.dt-orderable-desc.dt-ordering-desc span.dt-column-order:before,table.dataTable.plecs-table thead>tr>th.dt-orderable-desc.dt-ordering-desc span.dt-column-order:after,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-asc.dt-orderable-desc span.dt-column-order:before,table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-asc.dt-orderable-desc span.dt-column-order:after,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order:before, table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order:after{display: none;}

table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc{cursor: auto;pointer-events: none;}
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc span.dt-column-order:hover,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order:hover,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc span.dt-column-order:hover{border-color:rgba(68,79,88,.35);box-shadow:0 6px 14px rgba(0,0,0,.05);background-color:var(--hover-bg);color:var(--text);cursor:pointer;}

table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc[aria-sort] span.dt-column-order,
table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc[aria-sort] span.dt-column-order {border-color: rgba(217, 0, 19, .45); background-color: var(--red-soft); color: var(--text);}

/* Radio */
input[type="radio"] {height: 18px;width: 18px;background-color: #eee;border-radius: 50%;display: inline-block;position: relative;margin-right: 10px; /* Spacing between custom button and label text */cursor: pointer;border: 1px solid #ccc;}
input[type="radio"]:checked:after {box-shadow: 0 0 0 5.5px var(--rohm-red);border-color: var(--rohm-red) !important;content: "";position: absolute;display: block;top: 50%;left: 50%;width: 7px;height: 7px;border-radius: 50%;background: white;transform: translate(-50%, -50%); /* Center the inner dot */}
label:hover input[type="radio"] {background-color: #ccc;}
input[type="radio"]:checked:after {background-color: #fff; border-color: #fff;}

/* Checkbox */
input[type="checkbox"] {border: 1px solid #7c7c7c ;appearance: none;background-color: #fff;margin: 0;color: #fff;width: 1.15em;height: 1.15em;;border-radius: 0.15em;transform: translateY(-0.075em);}
input[type="checkbox"]::before {background-color: CanvasText;transform-origin: bottom left;clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);border-color: var(--rohm-red) !important;}
input[type="checkbox"] {display: grid;place-content: center;}
input[type="checkbox"]::before {content: "";width: 0.70em;height: 0.70em;transform: scale(0);transition: 120ms transform ease-in-out;box-shadow: inset 1em 1em #fff;}
input[type="checkbox"]:checked::before {transform: scale(1);}
:has(input[type="checkbox"]:checked) input[type="checkbox"]:checked{border-color: var(--rohm-red) !important; background-color:var(--rohm-red);}
input[type="checkbox"]:disabled{background-color: #f6f6f6;}

@media (max-width:767.98px){
    .split {display: block;}
    .leftbox {width: 100%;}
    table.dataTable.plecs-table thead>tr>th{text-align: center !important;vertical-align: text-top !important;height: 90px;}
    table.dataTable.plecs-table thead>tr>th span.dt-column-title{/* height: 56%; *//* min-height: 56%; *//* max-height: 60px; */display: block;line-height: 1.2;word-break: keep-all;}
    table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc span.dt-column-order, 
    table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order, 
    table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc span.dt-column-order{position: absolute;display: inline-block;bottom: 0;left: 38%;top: auto;}
}
/* End */
.part-link{
  font-weight:950;text-decoration:none;color:inherit;
  border-bottom:1px dashed rgba(68,79,88,.45);
  transition:color .15s ease, border-bottom-color .15s ease;
}
.part-link:hover{color:var(--link);border-bottom-color:var(--link); text-decoration:none;}

.paramlist{display:grid;grid-template-columns: 1fr 1fr;gap:10px}
@media (max-width:760px){.paramlist{grid-template-columns:1fr}}
div.dt-container div.dt-layout-cell{padding:0 !important;}

.sectionArea .parametergroup .card:nth-child(2) .card{width: 100%;border-radius: 0;padding: 0;border: 0;}
.sectionArea .card, .sectionArea .card .placeholder-box{padding: 10px;}
.sectionArea .card .placeholder-box{background-color:transparent;border-radius:0px;border:0;padding:0;}
													
.sectionArea .card .placeholder-box .keyProducts {margin-top:10px;font-size:13px;line-height:1.7;position:relative;}
.sectionArea .card .placeholder-box .keyProducts span{font-weight:600;margin-bottom:10px;display: block;}
.sectionArea .card .placeholder-box .keyProducts .category-bar button.cat-btn{background-color:#fff;border-color: #fff;color: #666;border:1px solid #666;text-shadow:none;margin-right: 4px;font-weight: normal;}
.sectionArea .card .placeholder-box .keyProducts .category-bar button.cat-btn:hover, .sectionArea .card .placeholder-box .keyProducts .category-bar button.cat-btn.selected{background-color:#9b9b9b; color: #fff; border:1px solid #9b9b9b;}
.sectionArea .parametergroup .circuit-image{border:1px solid #999;}
.sectionArea .parametergroup .circuit-image,
.sectionArea .parametergroup .parameter,
.sectionArea .parametergroup .keyproduct{margin-bottom:20px;}
.sectionArea .parametergroup .parameter span,
.sectionArea .parametergroup .keyproduct span{font-weight: 600;}
.parametergroup .form-group-plecs .error-msg.activate, .parametergroup .form-group-plecs-step3 .error-msg.activate {font-size:12px; color: red;margin-top: 0px;margin-bottom: 4px;}
.btn-primary[disabled]:hover {color: #fff;opacity: 0.65;cursor:not-allowed !important;}
.btn-primary[disabled] {cursor:not-allowed !important;}
.partList {margin-top: 0px;position:static;}
.partList table th{background-color: #F5F5F5;}
.partList table.table-bordered tr:nth-child(even){background-color: #FAFAFA;}
.partList table.table-bordered td, .partList table.table-bordered th{border-bottom:0px;border-right:0px;}
/*.form-group-plecs .inlineTable , .form-group-plecs-step3 .inlineTable{display: inline-table; width: 48.6%;}
.form-group-plecs .inlineTable:nth-child(odd) ,.form-group-plecs-step3 .inlineTable:nth-child(odd){margin-right: 2%;}
.form-group-plecs .inlineTable:nth-child(even) ,.form-group-plecs-step3 .inlineTable:nth-child(even){margin-right:0;}*/
.partList #tboverlay .center {
    display: inline-block;
    background-position: 0% 0%;
    width: 140px;
    height: 30px;
    text-align: center;
    top: 50%;
    left: 40%;
    background-size: 25px;
}
.center {
    font-size: 18px;
    width: 100px;
    height: 64px;
    font-weight: 400;
    margin: 0 auto;
    background: url(/o/rohm-theme/images/progress_bar/loading_animation.gif) 50% 72% no-repeat;
    left: 40%;
    top: 36%;
    text-align: center;
    position: absolute;
}
.table td.radio-table {padding: 4px 5px 5px 5px;}
.keyproduct .keyProducts strong ,.parameter strong{padding-right: 10px; font-weight: 400;}
.keyproduct .keyProducts,.parameter strong {margin: 4px 0;}
.parameter strong {display:block;}

/* Modal */
dialog{border:0;border-radius:16px;padding:0;box-shadow:0 22px 70px rgba(0,0,0,.26)}
dialog:focus-visible {outline: 0;}
dialog::backdrop{background:rgba(0,0,0,.40)}
.modal-head{padding:12px 14px;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between; background:var(--head-bg);font-weight:950;color:var(--rohm-gray);}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:900}
.preview-big{width:min(980px, 92vw);/*height:min(560px, 72vh);*/ border-radius:14px;border:1px solid var(--line); background:#fff;display:grid;place-items:center;color:var(--text);font-weight:950;padding: 6px;}
.status.partnum span.cancel {padding-left: 5px;font-weight: 400;cursor: pointer;}
.filterhead {padding: 0 12px 10px;background: var(--head-bg);border-bottom: 1px solid var(--line);margin-top: -1px;display: flex;align-items: baseline;}
.filterhead .status.partnum {margin-right: 5px;}
.filterhead a.comparelink { font-weight:normal;text-decoration:none;font-size:13px;color:#000;border-bottom:1px dotted #000;padding-bottom:3px;}
.filterhead a.comparelink:hover, .filterhead a.comparelink:focus{opacity:0.5;}
.selectedcount {font-size: 13px;}
.zh_CN .mb-15, .zh_TW .mb-15, .ko_KR .mb-15, .ja_JP .mb-15 {margin-bottom: 7rem !important;}
@media (min-width: 1021px) and (max-width: 1169.98px){
	table.dataTable.plecs-table thead>tr>th span.dt-column-title {display: inline-flex;line-height: 1.2;word-break: keep-all;}
	#DataTables_Table_0_wrapper table.dataTable.plecs-table thead>tr>th:nth-child(5) span.dt-column-title {display: inline;}
	table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc span.dt-column-order, table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order, table.dataTable.plecs-table thead>tr>th.dt-orderable-asc.dt-orderable-desc span.dt-column-order {/* position: absolute; *//* display: inline-block; *//* bottom: 0; *//* left: 38%; */top: 10%;}
	.partList .plecs-table th{padding: 10px 30px 10px 10px!important;}
}
@media (max-width:767.98px){
    .parametergroup {flex-direction: column;}
    .parameterInputArea .card:first-child, .sectionArea .card:first-child,
    .parameterInputArea .card:nth-child(2), .sectionArea .card:nth-child(2){width: 100%;margin-right: 0;}
    .sectionArea .card:first-child, .parameterInputArea .card:nth-child(2){margin-bottom:15px;}
}
@media (max-width:570.98px){
    .app.plecs-webs h1{width:100%;display:block;}
    .app.plecs-webs small{clear: both;width:100%;display:block;margin-top: 10px;}
}
@media (max-width:470.98px){
    .steps {display: inline-block;width: 100%;}
    .steps .step {width:48%;float: left;margin-bottom:2%;}
    .steps .step:nth-child(odd){margin-right:2%;}
}
.step-nav__copyrights {font-size: 11px; font-weight: 400; color: #999;}
.step-nav__right {position: fixed; right: 15px;max-width: 30%; z-index: 100; bottom: 10px;line-height: 0.8em;}
.rohmlogo {width: 70px;margin-top: 3px;}
.disclaimer-text{padding: 16px;line-height:22px}
@media (max-width:650.98px){
    .step-nav__right {max-width: 21%;bottom: 17px;}
}
@media (max-width:456.98px){
	.stepper{column-gap: 10px;}
	.navbtn{/*padding: 10px 8px;*/padding: 10px 10px;}
	.zh_TW .navbtn{/*padding: 10px 5px;*/padding: 10px 10px;} 
	:has(.buttons.step-nav__center button + button) .buttons.step-nav__center{/*width: 154px;*/width: 168px;}
	:has(.buttons.step-nav__center button) .buttons.step-nav__center, :not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{/*width: 80px;*/width: 90px;}
    .rohmlogo{}
	.step-nav__right{}
}
@media (max-width:412.98px){
	.topology-wrapper .circuit-image img{height: 112px;}
}
@media (max-width:374.98px){
	.navbtn{padding: 10px 8px;}
	.zh_TW .navbtn{padding: 10px 5px;} 
	:has(.buttons.step-nav__center button + button) .buttons.step-nav__center{width: 156px;}
	:has(.buttons.step-nav__center button) .buttons.step-nav__center, :not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{width: 80px;}
	.zh_CN :has(.buttons.step-nav__center button + button) .buttons.step-nav__center{width: 168px;}
	.zh_CN :has(.buttons.step-nav__center button) .buttons.step-nav__center, .zh_CN :not(:has(.buttons.step-nav__center button + button)) .buttons.step-nav__center{width: 88px;}
}