@charset "utf-8";
@import "https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.min.css";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";

.page-body {font-size:16px;scroll-behavior:auto;font-family:'Noto Sans KR', Arial, Helvetica, sans-serif;}
.page-body, .page-body * {box-sizing:border-box;letter-spacing:0;}

.page-body *:disabled,
.page-body *[disabled] {cursor:not-allowed !important;}

hr[class^="space-"] {visibility:hidden;clear:both;height:1px;margin:0;}
hr.space-1 {margin:.5rem 0;}
hr.space-2 {margin:1rem 0;}
hr.space-3 {margin:1.5rem 0;}
hr.space-4 {margin:2rem 0;}

.bt {display:inline-block;font:inherit;text-decoration:none;border:0;background:#efefef;color:#000;line-height:1.3;padding:.5em 1em;border-radius:3px;cursor:pointer;white-space:nowrap;text-align:center;}
a.bt:hover {text-decoration:none !important;}
.bt.mini {font-size:.85em;padding:.2em .5em;}
.bt.small {font-size:0.9em;}
.bt.large {font-size:1.1em;}
.bt.big {font-size:1.15em;padding:.7em 1.2em;}
.bt[disabled],
.bt.disabled {cursor:not-allowed;}
.bt.blue {background:#0962ea;color:#fff;}
.bt.red {background:#ff004d;color:#fff;}
.bt.green {background:#2eb872;color:#fff;}
.bt.yellow {background:#f7aa00;color:#fff;}
.bt.indigo {background:#474abd;color:#fff;}
.bt.purple {background:#c471f3;color:#fff;}
.bt.grey {background:#606470;color:#fff;}
.bt.dark.blue {background:#0d47a1;}
.bt.dark.red {background:#b71c1c;}
.bt.dark.green {background:#1e7f4e;}
.bt.dark.yellow {background:#f57f17;}
.bt.dark.indigo {background:#1d209d;}
.bt.dark.purple {background:#9c27b0;}
.bt.dark.grey {background:#454851;}
.bt.light.blue {background:#5497ff;}
.bt.light.red {background:#ff6363;}
.bt.light.green {background:#7fcda6;}
.bt.light.yellow {background:#ffc107;}
.bt.light.indigo {background:#9598ff;}
.bt.light.purple {background:#f2a4ff;}
.bt.light.grey {background:#aeb2bd;}

.w-3em {width:3em;}
.w-4em {width:4em;}
.w-5em {width:5em;}
.w-6em {width:6em;}
.w-7em {width:7em;}
.w-8em {width:8em;}
.w-9em {width:9em;}
.w-10em {width:10em;}
.w-11em {width:11em;}
.w-12em {width:12em;}
.w-13em {width:13em;}
.w-14em {width:14em;}
.w-15em {width:15em;}
.w-20em {width:20em;}
.w-25em {width:25em;}
.w-full {width:100%;max-width:100%;}
.w-auto {width:auto;}
.w-fit {width:fit-content;}

.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}
.text-justify {text-align:justify;text-align-last:left;}

.float-right {float:right;}
.float-left {float:left;}
.float-none {float:none;}

.p-relative {position:relative;}
.p-absolute {position:absolute;}
.p-absolute-right {position:absolute;right:0;}

.text-large {font-size:1.2em !important;}
.text-normal {font-size:1em !important;}
.text-small {font-size:.85em !important;}

.flex-between {display:flex;justify-content:space-between;align-items:center;}

.form-normal {max-width:600px;margin:0 auto;}
.form-small {max-width:400px;margin:0 auto;}
.form-rows {display:flex;flex-flow:column;gap:10px;text-align:center;}
.form-rows input,
.form-rows select,
.form-rows textarea {appearance:auto;--webkit-appearance:auto;}
.form-rows input:not([type=checkbox],[type=radio]),
.form-rows select,
.form-rows textarea {border:solid 1px #b9b9b9;line-height:1.3;padding:4px;font:inherit;border-radius:0;width:100%;min-width:1em;}

@media (max-width: 1280px) {
    table:where([data-table-responsive="lg"]) *:where(caption,thead) {display:none;}
    table:where([data-table-responsive="lg"]) {display:block;border-top:solid 1px #ccc;}
    table:where([data-table-responsive="lg"]) tbody {display:flex;flex-wrap:wrap;}
    table:where([data-table-responsive="lg"]) tbody tr {display:block;flex:0 0 50%;align-self:stretch;}
    table:where([data-table-responsive="lg"]) tbody tr {border-bottom:solid 1px #dfdfdf;padding:16px 4px;}
    table:where([data-table-responsive="lg"]) tbody tr::after {content:'';display:table;clear:both;}
    table:where([data-table-responsive="lg"]) tbody *:where(th,td) {border:0 !important;float:left;padding:4px !important;text-align:left !important;}
    table:where([data-table-responsive="lg"]) *[data-table-hide] {display:none;}
    table:where([data-table-responsive="lg"]) *[data-table-clear] {clear:both;}
    table:where([data-table-responsive="lg"]) *[data-table-suffix]:not(:empty)::after {content:attr(data-table-suffix);}
    table:where([data-table-responsive="lg"]) *[data-table-prefix]:not(:empty)::before {content:attr(data-table-prefix);}

    table:where([data-table-block="lg"]) tbody tr {flex:0 0 100%;}
}

@media (max-width: 768px) {
    table:where([data-table-responsive="md"]) *:where(caption,thead) {display:none;}
    table:where([data-table-responsive="md"]) {display:block;border-top:solid 1px #ccc;}
    table:where([data-table-responsive="md"]) tbody {display:flex;flex-wrap:wrap;}
    table:where([data-table-responsive="md"]) tbody tr {display:block;flex:0 0 50%;align-self:stretch;}
    table:where([data-table-responsive="md"]) tbody tr {border-bottom:solid 1px #dfdfdf;padding:16px 4px;}
    table:where([data-table-responsive="md"]) tbody tr::after {content:'';display:table;clear:both;}
    table:where([data-table-responsive="md"]) tbody *:where(th,td) {border:0 !important;float:left;padding:4px !important;text-align:left !important;}
    table:where([data-table-responsive="md"]) *[data-table-hide] {display:none;}
    table:where([data-table-responsive="md"]) *[data-table-clear] {clear:both;}
    table:where([data-table-responsive="md"]) *[data-table-suffix]:not(:empty)::after {content:attr(data-table-suffix);}
    table:where([data-table-responsive="md"]) *[data-table-prefix]:not(:empty)::before {content:attr(data-table-prefix);}

    table:where([data-table-block="md"]) tbody tr {flex:0 0 100%;}
}

@media (max-width: 640px) {
    table:where([data-table-responsive="sm"]) *:where(caption,thead) {display:none;}
    table:where([data-table-responsive="sm"]) {display:block;border-top:solid 1px #ccc;}
    table:where([data-table-responsive="sm"]) tbody {display:flex;flex-wrap:wrap;}
    table:where([data-table-responsive="sm"]) tbody tr {display:block;flex:0 0 50%;align-self:stretch;}
    table:where([data-table-responsive="sm"]) tbody tr {border-bottom:solid 1px #dfdfdf;padding:16px 4px;}
    table:where([data-table-responsive="sm"]) tbody tr::after {content:'';display:table;clear:both;}
    table:where([data-table-responsive="sm"]) tbody *:where(th,td) {border:0 !important;float:left;padding:4px !important;text-align:left !important;}
    table:where([data-table-responsive="sm"]) *[data-table-hide] {display:none;}
    table:where([data-table-responsive="sm"]) *[data-table-clear] {clear:both;}
    table:where([data-table-responsive="sm"]) *[data-table-suffix]:not(:empty)::after {content:attr(data-table-suffix);}
    table:where([data-table-responsive="sm"]) *[data-table-prefix]:not(:empty)::before {content:attr(data-table-prefix);}

    table:where([data-table-block="sm"]) tbody tr {flex:0 0 100%;}
}

figure.user-img {width:90px;height:90px;flex:0 0 90px;font-size:0;margin:5px 0 0 0;border-radius:5px;padding:0;box-shadow:rgba(0,0,0,.75) 0 2px 6px -2px;overflow:hidden;position:relative}
figure.user-img img {width:100%;height:100%;;object-fit:cover;object-position:top;vertical-align:middle;scale:1.1;}
figure.user-img:not(:has(img)) {background:#eee;}
figure.user-img:not(:has(img))::before,
figure.user-img:not(:has(img))::after {content:'';position:absolute;left:20%;top:10%;width:60%;aspect-ratio:1;background:#5599fe;border-radius:100%;}
figure.user-img:not(:has(img))::after {left:-20%;top:75%;width:140%;}

.iwt-flex {display:flex;padding:0;margin:0;list-style:none;align-items:center;justify-content:start;--gap:0px;gap:var(--gap);}
.iwt-flex > * {flex:1 1 auto;}
.iwt-flex.inline {display:inline-flex;}
.iwt-flex.inline > * {max-width:fit-content;}
.iwt-flex.wrap {flex-wrap:wrap;}
.iwt-flex.gap-0 {--gap:0px;}
.iwt-flex.gap-1 {--gap:.5rem;}
.iwt-flex.gap-2 {--gap:1rem;}
.iwt-flex.gap-3 {--gap:1.5rem;}
.iwt-flex.gap-4 {--gap:2rem;}
.iwt-flex > *.right {margin-left:auto;}
.iwt-flex > *.self-stretch {align-self:stretch;}
.iwt-flex > *.self-middle {align-self:center;}
.iwt-flex.start {justify-content:start;}
.iwt-flex.center {justify-content:safe center;}
.iwt-flex.between {justify-content:space-between;}
.iwt-flex.end {justify-content:end;}
.iwt-flex.top {align-items:start;}
.iwt-flex.bottom {align-items:end;}
.iwt-flex.stretch {align-items:stretch;}
.iwt-flex:where(.start,.center,.between,.end) > * {flex:0 1 auto;}
.iwt-flex[class*="grid-"] {--cols:1;flex-wrap:wrap;--col-width:calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));}
.iwt-flex.grid-1 {--cols:1;}
.iwt-flex.grid-2 {--cols:2;}
.iwt-flex.grid-3 {--cols:3;}
.iwt-flex.grid-4 {--cols:4;}
.iwt-flex.grid-5 {--cols:5;}
.iwt-flex.grid-6 {--cols:6;}
.iwt-flex.grid-7 {--cols:7;}
.iwt-flex.grid-8 {--cols:8;}
.iwt-flex.grid-9 {--cols:9;}
.iwt-flex.grid-10 {--cols:10;}
.iwt-flex.grid-11 {--cols:11;}
.iwt-flex.grid-12 {--cols:12;}
.iwt-flex[class*="grid-"] > * {flex:0 0 var(--col-width);}
.iwt-flex[class*="grid-"] > *.col-1 {flex-basis:var(--col-width);}
.iwt-flex[class*="grid-"] > *.col-2 {flex-basis:calc(var(--col-width) * 2 + var(--gap));}
.iwt-flex[class*="grid-"] > *.col-3 {flex-basis:calc(var(--col-width) * 3 + var(--gap) * 2);}
.iwt-flex[class*="grid-"] > *.col-4 {flex-basis:calc(var(--col-width) * 4 + var(--gap) * 3);}
.iwt-flex[class*="grid-"] > *.col-5 {flex-basis:calc(var(--col-width) * 5 + var(--gap) * 4);}
.iwt-flex[class*="grid-"] > *.col-6 {flex-basis:calc(var(--col-width) * 6 + var(--gap) * 5);}
.iwt-flex[class*="grid-"] > *.col-7 {flex-basis:calc(var(--col-width) * 7 + var(--gap) * 6);}
.iwt-flex[class*="grid-"] > *.col-8 {flex-basis:calc(var(--col-width) * 8 + var(--gap) * 7);}
.iwt-flex[class*="grid-"] > *.col-9 {flex-basis:calc(var(--col-width) * 9 + var(--gap) * 8);}
.iwt-flex[class*="grid-"] > *.col-10 {flex-basis:calc(var(--col-width) * 10 + var(--gap) * 9);}
.iwt-flex[class*="grid-"] > *.col-11 {flex-basis:calc(var(--col-width) * 11 + var(--gap) * 10);}
.iwt-flex[class*="grid-"] > *.col-12 {flex-basis:calc(var(--col-width) * 12 + var(--gap) * 11);}

@media (min-width:580px) {
    .iwt-flex.gap-sm-0 {--gap:0px;}
    .iwt-flex.gap-sm-1 {--gap:.5rem;}
    .iwt-flex.gap-sm-2 {--gap:1rem;}
    .iwt-flex.gap-sm-3 {--gap:1.5rem;}
    .iwt-flex.gap-sm-4 {--gap:2rem;}
    .iwt-flex.grid-sm-1 {--cols:1;}
    .iwt-flex.grid-sm-2 {--cols:2;}
    .iwt-flex.grid-sm-3 {--cols:3;}
    .iwt-flex.grid-sm-4 {--cols:4;}
    .iwt-flex.grid-sm-5 {--cols:5;}
    .iwt-flex.grid-sm-6 {--cols:6;}
    .iwt-flex.grid-sm-7 {--cols:7;}
    .iwt-flex.grid-sm-8 {--cols:8;}
    .iwt-flex.grid-sm-9 {--cols:9;}
    .iwt-flex.grid-sm-10 {--cols:10;}
    .iwt-flex.grid-sm-11 {--cols:11;}
    .iwt-flex.grid-sm-12 {--cols:12;}
    .iwt-flex[class*="grid-"] > *.col-sm-1 {flex-basis:var(--col-width);}
    .iwt-flex[class*="grid-"] > *.col-sm-2 {flex-basis:calc(var(--col-width) * 2 + var(--gap));}
    .iwt-flex[class*="grid-"] > *.col-sm-3 {flex-basis:calc(var(--col-width) * 3 + var(--gap) * 2);}
    .iwt-flex[class*="grid-"] > *.col-sm-4 {flex-basis:calc(var(--col-width) * 4 + var(--gap) * 3);}
    .iwt-flex[class*="grid-"] > *.col-sm-5 {flex-basis:calc(var(--col-width) * 5 + var(--gap) * 4);}
    .iwt-flex[class*="grid-"] > *.col-sm-6 {flex-basis:calc(var(--col-width) * 6 + var(--gap) * 5);}
    .iwt-flex[class*="grid-"] > *.col-sm-7 {flex-basis:calc(var(--col-width) * 7 + var(--gap) * 6);}
    .iwt-flex[class*="grid-"] > *.col-sm-8 {flex-basis:calc(var(--col-width) * 8 + var(--gap) * 7);}
    .iwt-flex[class*="grid-"] > *.col-sm-9 {flex-basis:calc(var(--col-width) * 9 + var(--gap) * 8);}
    .iwt-flex[class*="grid-"] > *.col-sm-10 {flex-basis:calc(var(--col-width) * 10 + var(--gap) * 9);}
    .iwt-flex[class*="grid-"] > *.col-sm-11 {flex-basis:calc(var(--col-width) * 11 + var(--gap) * 10);}
    .iwt-flex[class*="grid-"] > *.col-sm-12 {flex-basis:calc(var(--col-width) * 12 + var(--gap) * 11);}
}

@media (min-width:768px) {
    .iwt-flex.gap-md-0 {--gap:0px;}
    .iwt-flex.gap-md-1 {--gap:.5rem;}
    .iwt-flex.gap-md-2 {--gap:1rem;}
    .iwt-flex.gap-md-3 {--gap:1.5rem;}
    .iwt-flex.gap-md-4 {--gap:2rem;}
    .iwt-flex.grid-md-1 {--cols:1;}
    .iwt-flex.grid-md-2 {--cols:2;}
    .iwt-flex.grid-md-3 {--cols:3;}
    .iwt-flex.grid-md-4 {--cols:4;}
    .iwt-flex.grid-md-5 {--cols:5;}
    .iwt-flex.grid-md-6 {--cols:6;}
    .iwt-flex.grid-md-7 {--cols:7;}
    .iwt-flex.grid-md-8 {--cols:8;}
    .iwt-flex.grid-md-9 {--cols:9;}
    .iwt-flex.grid-md-10 {--cols:10;}
    .iwt-flex.grid-md-11 {--cols:11;}
    .iwt-flex.grid-md-12 {--cols:12;}
    .iwt-flex[class*="grid-"] > *.col-md-1 {flex-basis:var(--col-width);}
    .iwt-flex[class*="grid-"] > *.col-md-2 {flex-basis:calc(var(--col-width) * 2 + var(--gap));}
    .iwt-flex[class*="grid-"] > *.col-md-3 {flex-basis:calc(var(--col-width) * 3 + var(--gap) * 2);}
    .iwt-flex[class*="grid-"] > *.col-md-4 {flex-basis:calc(var(--col-width) * 4 + var(--gap) * 3);}
    .iwt-flex[class*="grid-"] > *.col-md-5 {flex-basis:calc(var(--col-width) * 5 + var(--gap) * 4);}
    .iwt-flex[class*="grid-"] > *.col-md-6 {flex-basis:calc(var(--col-width) * 6 + var(--gap) * 5);}
    .iwt-flex[class*="grid-"] > *.col-md-7 {flex-basis:calc(var(--col-width) * 7 + var(--gap) * 6);}
    .iwt-flex[class*="grid-"] > *.col-md-8 {flex-basis:calc(var(--col-width) * 8 + var(--gap) * 7);}
    .iwt-flex[class*="grid-"] > *.col-md-9 {flex-basis:calc(var(--col-width) * 9 + var(--gap) * 8);}
    .iwt-flex[class*="grid-"] > *.col-md-10 {flex-basis:calc(var(--col-width) * 10 + var(--gap) * 9);}
    .iwt-flex[class*="grid-"] > *.col-md-11 {flex-basis:calc(var(--col-width) * 11 + var(--gap) * 10);}
    .iwt-flex[class*="grid-"] > *.col-md-12 {flex-basis:calc(var(--col-width) * 12 + var(--gap) * 11);}
}

@media (min-width:1024px) {
    .iwt-flex.gap-lg-0 {--gap:0px;}
    .iwt-flex.gap-lg-1 {--gap:.5rem;}
    .iwt-flex.gap-lg-2 {--gap:1rem;}
    .iwt-flex.gap-lg-3 {--gap:1.5rem;}
    .iwt-flex.gap-lg-4 {--gap:2rem;}
    .iwt-flex.grid-lg-1 {--cols:1;}
    .iwt-flex.grid-lg-2 {--cols:2;}
    .iwt-flex.grid-lg-3 {--cols:3;}
    .iwt-flex.grid-lg-4 {--cols:4;}
    .iwt-flex.grid-lg-5 {--cols:5;}
    .iwt-flex.grid-lg-6 {--cols:6;}
    .iwt-flex.grid-lg-7 {--cols:7;}
    .iwt-flex.grid-lg-8 {--cols:8;}
    .iwt-flex.grid-lg-9 {--cols:9;}
    .iwt-flex.grid-lg-10 {--cols:10;}
    .iwt-flex.grid-lg-11 {--cols:11;}
    .iwt-flex.grid-lg-12 {--cols:12;}
    .iwt-flex[class*="grid-"] > *.col-lg-1 {flex-basis:var(--col-width);}
    .iwt-flex[class*="grid-"] > *.col-lg-2 {flex-basis:calc(var(--col-width) * 2 + var(--gap));}
    .iwt-flex[class*="grid-"] > *.col-lg-3 {flex-basis:calc(var(--col-width) * 3 + var(--gap) * 2);}
    .iwt-flex[class*="grid-"] > *.col-lg-4 {flex-basis:calc(var(--col-width) * 4 + var(--gap) * 3);}
    .iwt-flex[class*="grid-"] > *.col-lg-5 {flex-basis:calc(var(--col-width) * 5 + var(--gap) * 4);}
    .iwt-flex[class*="grid-"] > *.col-lg-6 {flex-basis:calc(var(--col-width) * 6 + var(--gap) * 5);}
    .iwt-flex[class*="grid-"] > *.col-lg-7 {flex-basis:calc(var(--col-width) * 7 + var(--gap) * 6);}
    .iwt-flex[class*="grid-"] > *.col-lg-8 {flex-basis:calc(var(--col-width) * 8 + var(--gap) * 7);}
    .iwt-flex[class*="grid-"] > *.col-lg-9 {flex-basis:calc(var(--col-width) * 9 + var(--gap) * 8);}
    .iwt-flex[class*="grid-"] > *.col-lg-10 {flex-basis:calc(var(--col-width) * 10 + var(--gap) * 9);}
    .iwt-flex[class*="grid-"] > *.col-lg-11 {flex-basis:calc(var(--col-width) * 11 + var(--gap) * 10);}
    .iwt-flex[class*="grid-"] > *.col-lg-12 {flex-basis:calc(var(--col-width) * 12 + var(--gap) * 11);}
}

@media (min-width:1280px) {
    .iwt-flex.gap-xl-0 {--gap:0px;}
    .iwt-flex.gap-xl-1 {--gap:.5rem;}
    .iwt-flex.gap-xl-2 {--gap:1rem;}
    .iwt-flex.gap-xl-3 {--gap:1.5rem;}
    .iwt-flex.gap-xl-4 {--gap:2rem;}
    .iwt-flex.grid-xl-1 {--cols:1;}
    .iwt-flex.grid-xl-2 {--cols:2;}
    .iwt-flex.grid-xl-3 {--cols:3;}
    .iwt-flex.grid-xl-4 {--cols:4;}
    .iwt-flex.grid-xl-5 {--cols:5;}
    .iwt-flex.grid-xl-6 {--cols:6;}
    .iwt-flex.grid-xl-7 {--cols:7;}
    .iwt-flex.grid-xl-8 {--cols:8;}
    .iwt-flex.grid-xl-9 {--cols:9;}
    .iwt-flex.grid-xl-10 {--cols:10;}
    .iwt-flex.grid-xl-11 {--cols:11;}
    .iwt-flex.grid-xl-12 {--cols:12;}
    .iwt-flex[class*="grid-"] > *.col-xl-1 {flex-basis:var(--col-width);}
    .iwt-flex[class*="grid-"] > *.col-xl-2 {flex-basis:calc(var(--col-width) * 2 + var(--gap));}
    .iwt-flex[class*="grid-"] > *.col-xl-3 {flex-basis:calc(var(--col-width) * 3 + var(--gap) * 2);}
    .iwt-flex[class*="grid-"] > *.col-xl-4 {flex-basis:calc(var(--col-width) * 4 + var(--gap) * 3);}
    .iwt-flex[class*="grid-"] > *.col-xl-5 {flex-basis:calc(var(--col-width) * 5 + var(--gap) * 4);}
    .iwt-flex[class*="grid-"] > *.col-xl-6 {flex-basis:calc(var(--col-width) * 6 + var(--gap) * 5);}
    .iwt-flex[class*="grid-"] > *.col-xl-7 {flex-basis:calc(var(--col-width) * 7 + var(--gap) * 6);}
    .iwt-flex[class*="grid-"] > *.col-xl-8 {flex-basis:calc(var(--col-width) * 8 + var(--gap) * 7);}
    .iwt-flex[class*="grid-"] > *.col-xl-9 {flex-basis:calc(var(--col-width) * 9 + var(--gap) * 8);}
    .iwt-flex[class*="grid-"] > *.col-xl-10 {flex-basis:calc(var(--col-width) * 10 + var(--gap) * 9);}
    .iwt-flex[class*="grid-"] > *.col-xl-11 {flex-basis:calc(var(--col-width) * 11 + var(--gap) * 10);}
    .iwt-flex[class*="grid-"] > *.col-xl-12 {flex-basis:calc(var(--col-width) * 12 + var(--gap) * 11);}
}

@media (min-width:1600px) {
    .iwt-flex.gap-xxl-0 {--gap:0px;}
    .iwt-flex.gap-xxl-1 {--gap:.5rem;}
    .iwt-flex.gap-xxl-2 {--gap:1rem;}
    .iwt-flex.gap-xxl-3 {--gap:1.5rem;}
    .iwt-flex.gap-xxl-4 {--gap:2rem;}
    .iwt-flex.grid-xxl-1 {--cols:1;}
    .iwt-flex.grid-xxl-2 {--cols:2;}
    .iwt-flex.grid-xxl-3 {--cols:3;}
    .iwt-flex.grid-xxl-4 {--cols:4;}
    .iwt-flex.grid-xxl-5 {--cols:5;}
    .iwt-flex.grid-xxl-6 {--cols:6;}
    .iwt-flex.grid-xxl-7 {--cols:7;}
    .iwt-flex.grid-xxl-8 {--cols:8;}
    .iwt-flex.grid-xxl-9 {--cols:9;}
    .iwt-flex.grid-xxl-10 {--cols:10;}
    .iwt-flex.grid-xxl-11 {--cols:11;}
    .iwt-flex.grid-xxl-12 {--cols:12;}
    .iwt-flex[class*="grid-"] > *.col-xxl-1 {flex-basis:var(--col-width);}
    .iwt-flex[class*="grid-"] > *.col-xxl-2 {flex-basis:calc(var(--col-width) * 2 + var(--gap));}
    .iwt-flex[class*="grid-"] > *.col-xxl-3 {flex-basis:calc(var(--col-width) * 3 + var(--gap) * 2);}
    .iwt-flex[class*="grid-"] > *.col-xxl-4 {flex-basis:calc(var(--col-width) * 4 + var(--gap) * 3);}
    .iwt-flex[class*="grid-"] > *.col-xxl-5 {flex-basis:calc(var(--col-width) * 5 + var(--gap) * 4);}
    .iwt-flex[class*="grid-"] > *.col-xxl-6 {flex-basis:calc(var(--col-width) * 6 + var(--gap) * 5);}
    .iwt-flex[class*="grid-"] > *.col-xxl-7 {flex-basis:calc(var(--col-width) * 7 + var(--gap) * 6);}
    .iwt-flex[class*="grid-"] > *.col-xxl-8 {flex-basis:calc(var(--col-width) * 8 + var(--gap) * 7);}
    .iwt-flex[class*="grid-"] > *.col-xxl-9 {flex-basis:calc(var(--col-width) * 9 + var(--gap) * 8);}
    .iwt-flex[class*="grid-"] > *.col-xxl-10 {flex-basis:calc(var(--col-width) * 10 + var(--gap) * 9);}
    .iwt-flex[class*="grid-"] > *.col-xxl-11 {flex-basis:calc(var(--col-width) * 11 + var(--gap) * 10);}
    .iwt-flex[class*="grid-"] > *.col-xxl-12 {flex-basis:calc(var(--col-width) * 12 + var(--gap) * 11);}
}

table[class*="tbl-"] {width:100%;border-spacing:0;}
table[class*="tbl-"] tr > * {padding:10px 0;text-align:center;}
table[class*="tbl-"] th {font-weight:500;}
table:where(.tbl-line,.tbl-border) thead tr:first-child > * {border-top:solid 1px #000;}
table:where(.tbl-line,.tbl-border) thead tr:last-child > * {border-bottom:solid 1px #000;}
table:where(.tbl-line,.tbl-border) tr > * {border-bottom:solid 1px #dfdfdf;}
table:where(.tbl-line,.tbl-border) tfoot tr:first-child > * {border-top:solid 1px #000;}
table.tbl-stripe tbody tr:nth-child(2n) {background:#f8f8f8;}
table.tbl-hover tbody tr:hover {background:#f4f4ff;}
table.tbl-border tr > * {border-left:solid 1px #eee;}
table.tbl-border {border-right:solid 1px #eee;}
table.tbl-border thead tr:first-child > * {border-top:solid 1px #dfdfdf;}
table.tbl-heading thead tr {background:#333;}
table.tbl-heading thead tr > * {color:#ccc;}
table.tbl-heading.tbl-border thead tr > * {border:solid 1px #000 !important;border-right:0 !important;}
table.tbl-heading thead tr > *:last-child {border-right:solid 1px #000 !important;}
table.tbl-heading tfoot tr {background:#607d8b;}
table.tbl-heading tfoot tr > * {color:#fff;}
table.tbl-numbers {counter-reset:table-numbers;}
table.tbl-numbers .tbl-number {counter-increment:table-numbers;}
table.tbl-numbers .tbl-number::before {content:counter(table-numbers);}

@media (max-width:768px) {
    .tbl-responsive {overflow:auto;}
    .tbl-responsive > table {min-width:100%;}
    .tbl-responsive > table tr > * {white-space:nowrap;padding-left:4px;padding-right:4px;}
}

.pagination {margin:3em 0;text-align:center;font-size:.9em;display:flex;align-items:center;justify-content:center;gap:4px;flex-flow:row wrap;}
.pagination a {display:inline-block;min-width:2.5em;text-align:center;padding:.6ch .1ch;border:solid 1px #ccc;margin:0;text-decoration:none;color:#000;white-space:nowrap;background:#fff;}
.pagination a:hover {background:#ccc;}
.pagination a.current {background:#333;color:#eee;border-color:#333;}