.jw-fieldset-M { position:relative; border:1px solid transparent; border-bottom-color:#CCCCCC; padding:5px 0; }
.jw-fieldset-M:after { content:""; position:absolute; width:0; height:1px; left:50%; bottom:-1px; transform:translateX(-50%); background:#ff0000; transition: all 0.3s ease; }
.jw-fieldset-M legend { position: absolute; top:50%; transform:translateY(-50%); font-size:14px; pointer-events: none; user-select: none; color:#ccc; transition: all 0.3s ease; }
.jw-fieldset-M:focus-within legend, input:not(:placeholder-shown) + legend { top:-2px; font-size:12px; color:#000; background: #fff; }
.jw-fieldset-M:focus-within:after { width: 100%; }
.jw-fieldset-M input { width:100%; height:100%; }


.ic-close{ position:relative; width:24px; height:24px; cursor:pointer; display:flex; justify-content:center; align-items:center; transition-duration: 0.5s; }
.ic-close::after{ content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(45deg); }
.ic-close::before{ content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(-45deg); }
.ic-close:hover{ transform: rotate(360deg); }

.jw-checkbox { display:flex; --border-color:#222; cursor:pointer; }
.jw-checkbox input{ display:none; }
.jw-checkbox .icon{ display:inline-block; vertical-align:middle; cursor:pointer; }
.jw-checkbox .icon{ position:relative; width:20px; height:20px; border:1px solid var(--border-color); border-radius:3px; transition:background 0.1s ease;}
.jw-checkbox .icon::after{ content:''; position:absolute; top:-3px; left:7px; width:6px; height:16px; border-right:2px solid var(--border-color); border-bottom:2px solid var(--border-color); transform:rotate(45deg) scale(0); transition:all 0.3s ease; opacity:0; }
.jw-checkbox input:checked ~ .icon{ border-color:transparent; border:1px solid var(--border-color); }
.jw-checkbox input:checked ~ .icon::after{ opacity:1; transform:rotate(45deg) scale(1);}
.jw-checkbox .text{ margin-left:10px; color:#222222; }

.jw-tableA { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.jw-tableA th { background:#f4f6f8; border-bottom: 1px solid #ccc; text-align:center; }
.jw-tableA tr:not(:last-child) td { border-bottom: 1px solid #ccc; }
.jw-tableA tr.hover:hover td { background:#F9F9F9; }
.jw-tableA .actions { width:150px; text-align:center; }
.jw-tableA .nodata { height:150px; text-align:center; } 

.jw-tableB tr:last-child td, .jw-tableB tr:last-child th { border-bottom: 1px solid #000; }
.jw-tableB tr:first-child td, .jw-tableB tr:first-child th { border-top: 1px solid #000; }
.jw-tableB td { height:45px; border-bottom: 1px solid #E9E9E9; }
.jw-tableB td > div.field { position:relative; display:flex; align-items:center; height:100%; padding:5px 10px; gap:10px; }
.jw-tableB th { width:150px; background:#F5F5F5; text-align:center; font-weight:normal; color:#1D1D1D; border-bottom: 1px solid #E9E9E9; }
.jw-tableB input { background:#FAFAFA; border-radius:5px; padding:0 10px; }



dialog { position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding:15px; border: 1px solid #ccc; border-radius: 10px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width:300px; overflow:hidden; outline: none; }
dialog .dialog-container { width:100%; height:100%; display:flex; flex-direction:column; }
dialog h1 { padding-left:10px; font-size:16px; font-weight:bold; height:30px; display:flex; align-items:center; }
dialog .dialog-content { flex:1; padding:10px;}
dialog .dialog-controls { display:flex; justify-content:flex-end; gap:10px; }
dialog .dialog-controls button { height:30px; }

.jw-pagebox { margin-top:20px; display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .info { flex:1; font-size:10px; font-weight:300; color:#666666; }
.jw-pagebox > .info.right { display:flex; justify-content:flex-end; }
.jw-pagebox > .contents { flex:1; display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .contents.off { display:none; }
.jw-pagebox > .contents > div { position:relative; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > div.btn {  width:28px; height:28px; }
.jw-pagebox > .contents > div.btn > button { width:100%; height:100%; }
.jw-pagebox > .contents > div.btn.off { display:none; }
.jw-pagebox > .contents > .page { display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .contents > .page > .p { width:28px; height:28px; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > .page > .p.show { color:#4d7cff; font-size:16px; font-weight:bold; }
.jw-pagebox > .contents > div > span:last-child { position:absolute; }
.jw-pagebox > .contents button { position:relative; background:transparent; border-radius:50%; } 
.jw-pagebox > .contents button:hover { background:#eee; } 
.jw-pagebox .prev { position:relative; height:0; height:0; display:flex; justify-content:center; align-items:center; }
.jw-pagebox .prev:after { content:""; position:absolute; width:6px; height:6px; transform:rotate(135deg); border:1px solid transparent; border-color: transparent #000 #000 transparent;  }
.jw-pagebox .prev2 { position:relative; height:0; height:0; }
.jw-pagebox .prev2:after { content:""; position:absolute; left:15px; width:6px; height:6px;  transform:rotate(135deg); border:1px solid transparent; border-color: transparent #000 #000 transparent; }
.jw-pagebox .next { position:relative; height:0; height:0; display:flex; justify-content:center; align-items:center; }
.jw-pagebox .next:after { content:""; position:absolute; width:6px; height:6px; transform:rotate(-45deg); border:1px solid transparent; border-color: transparent #000 #000 transparent;  }
.jw-pagebox .next2 { position:relative; height:0; height:0; }
.jw-pagebox .next2:after { content:""; position:absolute; left:5px; width:6px; height:6px;  transform:rotate(-45deg); border:1px solid transparent; border-color: transparent #000 #000 transparent; }

.jw-button { position:relative; display:flex; justify-content:center; align-items:center; padding:0 15px; height:28px; gap:10px; border-radius:5px; background:var(--btn-bgcolor); color:var(--btn-font-color); }
.jw-button svg { fill:var(--btn-font-color); }

.jw-radio { display:flex; align-items:center; cursor:pointer; }
.jw-radio input{ display:none; }
.jw-radio .icon{ display:inline-block; }
.jw-radio .icon{ position:relative; width:16px; height:16px; border:1px solid #CBCCD4; border-radius:50%; transition:all 0.1s ease;}
.jw-radio .icon::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:8px; height:8px; border-radius:50%; background:#3F51B5; transition:all 0.3s ease; opacity:0; }
.jw-radio input:checked ~ .icon{ border-color:transparent; border:1px solid #3F51B5; }
.jw-radio input:checked ~ .icon::after{ opacity:1; }
.jw-radio .text{ margin-left:10px; color:#666666; }

#inputFilebox { display:flex; flex-direction:column; gap:5px; }
.inputFile { position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; }
.inputFile > .value { flex:1; height:100%; overflow:hidden; white-space:nowrap;  text-overflow:ellipsis;  word-break:break-all; padding:0 15px 0 10px; border: 1px solid #ccc; }
.inputFile > .jw-button { pointer-events: none; font-size:12px; }
.inputFile > .progress { position:absolute;  height:2px; background:#ff6600; left:0; bottom:0; }

.ic-hamberg { position:relative; width:var(--s, 30px); height:var(--s, 25px); cursor:pointer; }
.ic-hamberg > i { position:absolute; width:20px; height:2px; background:var(--color, #ccc); left:50%; transform:translate(-50%, -50%); transition: all 0.2s ease; }
.ic-hamberg > i:nth-child(1) { top:calc(0% + 5px); }
.ic-hamberg > i:nth-child(2) { top:50%; }
.ic-hamberg > i:nth-child(3) { top:calc(100% - 5px); }

.ic-hamberg.on > i:first-child{ top:50%; left:50%; transform:translate(-50%, -50%) rotate(45deg); }
.ic-hamberg.on > i:nth-child(2){ top:50%; left:50%; transform:translateX(-50%, -50%); opacity:0; }
.ic-hamberg.on > i:last-child{ top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); }


/* ################### select*/
.jw-select { position:relative; display:inline-block; --select-height:35px; height:var(--select-height); cursor:pointer; }
.jw-select > .jw-selected { display:flex; align-items:center; width:100%; height:100%; padding-left:10px; border: 1px solid #ccc; }
.jw-select > .jw-selected:after { content: ""; position: absolute; width:5px; height:5px; right:10px; top:calc(50% - 3px); border:1px solid transparent; transform:translateY(-50%) rotate(-45deg); border-color: transparent transparent #333333 #333333; transition: all 0.2s ease-in; }
.jw-select > .jw-selected:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
.jw-select > .jw-selected.active { box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
.jw-select > .jw-selected.active:after { margin-top:4px; transform:translateY(-50%) rotate(-225deg); }
.jw-select > .jw-select-list { display:none; position:absolute; overflow:auto; top:100%; right:0; left:0; background:#FFFFFF; border: 1px solid #eaeaea; z-index:90; }
.jw-select > .jw-select-list > .jw-select-item { display:flex; align-items:center; width:100%; height:var(--select-height); padding:0 10px; transition: all 0.15s ease-in; color:#333333; white-space: nowrap; }
.jw-select > .jw-select-list > .jw-select-item:not(last-child) { border-bottom: 1px solid #eaeaea; }
.jw-select > .jw-select-list > .jw-select-item:hover { background:#f8f8f8; }
.jw-select > .jw-select-list > .jw-select-item[rel="hide"] { display: none; }

/* select style */
.jw-select:has(.jw-select-type-A) .jw-selected { border-radius:5px; }
.jw-select:has(.jw-select-type-A) .jw-selected.active { border-radius:5px 5px 0 0; }
.jw-select:has(.jw-select-type-B) .jw-selected { border-radius:18px; text-indent:20px; }
.jw-select:has(.jw-select-type-B) .jw-selected.active { border-radius:18px 18px 0 0; }
.jw-select:has(.jw-select-type-B) .jw-selected:after { right:20px; }
.jw-select:has(.jw-select-type-B) .jw-select-item { text-indent:20px; }