/* KBY Reset */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
body {
     line-height: 1.42;
     -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    width: 100%;
    height: auto;
}

ul {
    padding-left: 1.6rem;
}
li {
   
}
input, button, textarea, select {
    font: inherit;
    padding: 0;
    border: none;
    outline: none;
    background: none;
}
a {
    /* text-decoration:none; */
    color:inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

input[type="search"],
input[type="number"] {
   -webkit-appearance: none;
   appearance: none;
   -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

[popover] {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {
    border:none;
    padding:0;
}

fieldset legend {
    margin-bottom:0.8rem;
    font-weight:bold;
}

dialog {
    border-radius: 0;
    border:none;
    outline: none;
    padding: 0;
}

.kby-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:root {
    interpolate-size: allow-keywords;
    font-size: 62.5%;
    --kby-col:#171717;
    --kby-acc-col: #9d0765;
    --kby-acc-hvr: hsl(322 91% 38% / 1);
    --kby-acc-inv:#fff;
    --kby-hdr-hgt: 5.4rem;
    --kby-icn-hgt: 2rem;
    --kby-btn-hgt:3.2rem;
    --kby-btn-pad:0 calc(var(--kby-btn-hgt) / 2.4);
    --kby-btn-rds:var(--kby-rds-inf);
    --kby-rds-inf:9999px;
    --kby-tag-bg: #dcdcdc;
    --kby-frm-fld-hgt: 4.4rem;
    --kby-tgl-hgt:2.4rem;
    --kby-tgl-wdt:calc((var(--kby-tgl-hgt) * 2) * 0.86);
    --kby-tgl-pdg:0.2rem;
    --kby-frm-bg: #f0f0f0;
    --kby-frm-lbl-col:#898989;
    --kby-frm-fld-bg: #fff;
    --kby-frm-brd: #3a3a3a;
    --kby-frm-fcs-brd: #3a3a3a;
    --kby-frm-fcs-bg:var(--kby-frm-fld-bg);
    --kby-frm-rds: 0.4rem;
    --kby-pnl-rds:0.8rem;
    --kby-tre-rds:0.8rem;
    --kby-tre-bg: #ccc;
    --kby-tre-hgt: 4re;
    --kby-tre-hvr-bg: #ccc: ;
}

* {
    /* overscroll-behavior: none; */
    /* scrollbar-gutter: stable; */
    /* scrollbar-color: #747474 #323232ab; */
    /* scrollbar-width: thin; */
}

body {
    font-size:1.6rem;
    color:var(--kby-col);
}

#kby-header {
    height:var(--kby-hdr-hgt);
    z-index: 500;
    position: sticky;
    top:0;
}

#kby-main {

}

.kby-page {
    display:none;
}

.kby-page.active {
    display:block;
}


/* CONTAINER & ROW */

.kby-column {
    display:flex;
    flex-direction: column;
}

.kby-row {
    display:flex;
    align-items: center;
}

.kby-wrap {
    display:flex;
    flex-wrap:wrap;
}

.kby-dialog {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 3.2rem);
    max-height: calc(100% - 3.2rem);
}

.kby-dialog::backdrop {
    backdrop-filter:blur(0.2rem);
}

/* FORM */

.kby-form .altcha{
    background:var(--kby-frm-bg);
    border:none;
    outline:0.1rem solid var(--kby-frm-brd);
    border-radius: var(--kby-frm-rds);
}

/* ICON */

.kby-icon {
    width: auto;
    height: var(--kby-icn-hgt);
    aspect-ratio: 1;
    pointer-events: none;
    user-select: none;
    border-radius: var(--kby-rds-inf);
    display: inline-flex;
    align-items:center;
    justify-content:center;
}

.kby-icon svg {
    width:100%;
    height:100%;
}

/* BUTTON */

.kby-button {
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.kby-button.kby-button-text,
.kby-button.kby-button-icon,
.kby-button.kby-button-icon-text,
.kby-button.kby-button-image {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--kby-btn-rds);
    user-select: none;
    position: relative;
    padding: var(--kby-btn-pad);
    display: inline-flex;
    height:var(--kby-btn-hgt);
}

.kby-button > * {

}

.kby-button.kby-button-icon {
    aspect-ratio:1;
    padding:0;
}

.kby-button.kby-button-image {
    aspect-ratio:1;
    padding:0;
    overflow: hidden;
}

.kby-button.kby-button-icon-text {
    gap:0.4rem;
    padding-left:calc(var(--kby-btn-hgt) / 4);
}

.kby-button.kby-button-icon-text.kby-button-icon-bg{
    padding-left:0.2rem;
}

.kby-button.kby-button-image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.kby-button:focus-visible {
    outline:0.2rem solid var(--kby-frm-fcs-brd);
    outline-offset:0.2rem;
}

.kby-button.kby-button-bg{
    background: var(--kby-acc-col);
    color: var(--kby-acc-inv);
}

.kby-button.kby-button-icon-bg .kby-icon{
    background: var(--kby-acc-col);
    color: var(--kby-acc-inv);
    height: calc(var(--kby-btn-hgt) - 0.4rem);
}

.kby-button.kby-button-icon-bg svg{
    height: var(--kby-icn-hgt);
}

@media (hover: hover) {
    .kby-button:not(.kby-button-bg, .kby-button-image):hover{
        background:var(--kby-acc-hvr);
        color:var(--kby-acc-inv);
    }
    .kby-button.kby-button-icon-bg:hover .kby-icon{
        background:transparent;
    }
    .kby-button-bg:hover {
        background:var(--kby-acc-hvr);
    }
    .kby-button-image:hover {
    }
}


/* FIELD */

.kby-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    gap: 0.4rem;
}

.kby-field-g {
    height:var(--kby-frm-fld-hgt);
}

.kby-field .kby-input-container {
    height:var(--kby-frm-fld-hgt);
    display: flex;
    align-items: center;
    border: 0.1rem solid var(--kby-frm-brd);
    border-radius: var(--kby-frm-rds);
    background: var(--kby-frm-fld-bg);
    cursor: text;
}

.kby-field .kby-input-container:has(input:focus-visible) {
    outline:0.2rem solid var(--kby-frm-fcs-brd);
    background:var(--kby-frm-fcs-bg);
}

.kby-field label {
    max-width: calc(100% - 0.8rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color:var(--kby-frm-lbl-col);
}

.kby-field-g label {
    transform: translateY(calc((var(--kby-frm-fld-hgt) / 2) - 50%));
    transition: transform 120ms cubic-bezier(.25,.29,.19,.98);
    padding: 0 0.4rem;
    top: 0;
    left: 0.8rem;
    pointer-events:none;
    position: absolute;
    transform-origin:top left;
    border-radius: 0.4rem;
}

.kby-field-g:has(input:not(:placeholder-shown)) label {
    background: var(--kby-frm-bg);
}

.kby-field-g:has(input:focus-visible) label,
.kby-field-g:has(input:not(:placeholder-shown)) label {
    transform: translateY(-50%) scale(0.84);
}

.kby-field-g:has(input:focus-visible) label {
    background: var(--kby-frm-fcs-bg);
}

.kby-field input {
    flex: 1;
    padding-left: 1.2rem;
    align-self: stretch;
}

.kby-field input::placeholder {
    opacity:0;
    color:var(--kby-frm-lbl-col);
}

.kby-field .kby-input-container .kby-icon{
    /* color:var(--kby-frm-lbl-col); */
}

/* NUMBER */

.kby-field-number .kby-input-container {
    padding-right: 0.4rem;
}

.kby-field-number input {
    padding-right: 0.4rem;
}

.kby-field-number-unit {
    font-size: 84%;
}

/*

.kby-field-number input::-webkit-outer-spin-button,
.kby-field-number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kby-field-number input {
  -moz-appearance: textfield;
  padding-right: 0.2em;
}*/

.kby-number .kby-number-unit {
    font-size: 84%;
    pointer-events: none;
    user-select: none;
    color: var(--kby-frm-lbl-col);
}

.kby-number.kby-field-g .kby-number-unit {
    opacity:0;
}

.kby-number.kby-field-g:has(input:focus-visible) .kby-number-unit,
.kby-number.kby-field-g:has(input:not(:placeholder-shown)) .kby-number-unit {
    opacity:1;
}

/* FIELD SEARCH */

.kby-form-search {
    anchor-scope: all;
}

.kby-form-search .kby-search {
     anchor-name: --my-anchor;
}

.kby-search .kby-input-container {
    padding-left: 0.8rem;
    padding-right: 0.2rem;
}


.kby-search input {
    padding-left: 0.4rem;
}

.kby-search input:not(:focus-visible)::placeholder {
    opacity:1;
}

.kby-search .kby-search-clear {
    display:none;
    width: 2.4rem;
    height: 2.4rem;
}

.kby-search:has(input:not(:placeholder-shown)) .kby-search-clear {
    display:inline-flex;
}

/* FIELD SEARCH TAG*/

.kby-search-dropover .kby-popover-dropdown {
    position-anchor: --my-anchor;
    position-area: bottom span-right;
    min-width: anchor-size(width);
    height: 300px;
    top: 0.2rem;
    box-shadow: 0 0 3.2rem 0 rgb(0 0 0 / 10%);
    border-radius: var(--kby-frm-rds);
    /* position: absolute; */
}

/* AREA */

.kby-area {display: flex;flex-direction: column;}

.kby-area .kby-form-body{
    outline:0.1rem solid var(--kby-frm-brd);
    border-radius:var(--kby-frm-rds);
    background:var(--kby-frm-bg);
    display: flex;
    flex-direction: column;
    position: relative;
}

.kby-area .kby-form-body:has(textarea:focus-visible) {
    outline:0.2rem solid var(--kby-frm-fcs-brd);
    background:var(--kby-frm-fcs-bg);
}

.kby-area label{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0.8rem;
    padding: 0 0.4rem;
    max-width: calc(100% - 0.8rem);
    transform: translateY(calc((var(--kby-frm-fld-hgt) / 2) - 50%));
    transition: transform 120ms cubic-bezier(.25, .29, .19, .98);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform-origin: top left;
    border-radius: 0.4rem;
}

.kby-area:has(textarea:focus-visible) label,
.kby-area:has(textarea:not(:placeholder-shown)) label {
    transform: translateY(-50%) scale(0.84);
}

.kby-area:has(textarea:not(:placeholder-shown)) label {
    background: var(--kby-frm-bg);
}

.kby-area:has(textarea:focus-visible) label {
    background: var(--kby-frm-fcs-bg);
}

.kby-area textarea {
    resize: vertical;
    height: 12rem;
    max-height: 36rem;
    min-height:12rem;
    padding: 1.2rem;
}

.kby-area textarea::placeholder {
    color: transparent;
}

/* iOS Safari / Chrome / Modern Edge
.kby-area textarea::-webkit-input-placeholder {
    color: transparent;
}*/

/* LIST */


.kby-list {
    padding:0;
    list-style: none;
}

.kby-list li{

}


/* TOGGLE */

.kby-toggle {
    display:flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    position:relative;
    user-select:none;
}

.kby-toggle::before {
    content:'';
    width: var(--kby-tgl-wdt);
    height: var(--kby-tgl-hgt);
    background: #e0e0e0;
    border-radius: var(--kby-rds-inf);
    padding: var(--kby-tgl-pdg);
    transition: background 140ms;
    flex-shrink: 0;
}

.kby-toggle::after {
    content:'';
    position: absolute;
    left:0.2rem;
    height:calc(var(--kby-tgl-hgt) - (var(--kby-tgl-pdg) * 2));
    aspect-ratio: 1;
    background: white;
    border-radius: var(--kby-rds-inf);
    transition: transform 140ms;
    box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.1);
}

.kby-toggle:has(input:checked)::before {
    background: var(--kby-acc-col);
}

.kby-toggle:has(input:checked)::after {
    transform: translateX(calc(var(--kby-tgl-wdt) - var(--kby-tgl-hgt)));
}

.kby-toggle:has(input:focus-visible)::before {
    outline: 0.2rem solid var(--kby-frm-brd);
    outline-offset: 0.2rem;
}

.kby-toggle:has(input:disabled) {
    opacity:0.64;
    background: #e0e0e0;
}


/* checkbox */

.kby-checkbox {

}

.kby-checkbox{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    position: relative;
    margin-bottom: 1.2rem;
}

.kby-checkbox .kby-icon {
    width:2.4rem;
    height:2.4rem;
    border: 0.1rem solid var(--kby-frm-lbl-col);
    flex-shrink: 0;
    color: var(--kby-acc-inv);
    border-radius: var(--kby-frm-rds);
}

.kby-checkbox .kby-icon svg{
    opacity:0;
    height: var(--kby-icn-hgt);
}

.kby-checkbox:has(input:checked) .kby-icon {
     background-color: var(--kby-acc-col);
}

.kby-checkbox:has(input:checked) .kby-icon svg {
     opacity:1;
}

.kby-button-checkbox-set{
    display:flex;
    flex-wrap:wrap;
    gap: 0.6rem 0.4rem;
    position: relative;
}

.kby-button-checkbox:has(input:not(:checked)){
    background:var(--kby-frm-bg);
    color:var(--kby-col);
}

.kby-checkbox:has(input:focus-visible) .kby-icon,
.kby-button-checkbox:has(input:focus-visible) 
 {
   outline: 0.2rem solid var(--kby-frm-fcs-brd);
   outline-offset: 0.2rem;
}

/* radio */

.kby-radio {

}

.kby-radio{
    display:flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    position:relative;
    margin-bottom: 1.2rem;
}

.kby-radio::before {
    content:'';
    width:2.4rem;
    height:2.4rem;
    border: 0.1rem solid var(--kby-frm-lbl-col);
    border-radius: 50%;
    flex-shrink: 0;
}

.kby-radio:has(input:checked)::after {
    content:'';
    width: 1.32rem;
    aspect-ratio: 1;
    background: var(--kby-acc-col);
    position: absolute;
    left: 0.54rem;
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}

.kby-button-radio-set {
    display:flex;
    flex-wrap:wrap;
    gap: 0.6rem 0.4rem;
}

.kby-button-radio:has(input:not(:checked)){
    background:var(--kby-frm-bg);
    color:var(--kby-col);
}

.kby-radio:has(input:focus-visible)::before,
.kby-button-radio:has(input:focus-visible) {
   outline: 0.2rem solid var(--kby-frm-fcs-brd);
   outline-offset: 0.2rem;
}


/* COUNTER */

.kby-counter .kby-input-container{
    display:flex;
    /* background-color: #ccc; */
    justify-self: start;
    align-self: start;
    border: 0.1rem solid var(--kby-frm-brd);
    border-radius: var(--kby-btn-rds);
}

.kby-counter input{
    width: 3.2rem;
    text-align: center;
    -moz-appearance: textfield;
}

.kby-counter input::-webkit-outer-spin-button,
.kby-counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kby-counter .kby-input-container:has(input:focus-visible) {
    outline: 0.2rem solid var(--kby-frm-fcs-brd);
}

.kby-counter .kby-input-container:has(input:focus-visible) {
    outline: 0.2rem solid var(--kby-frm-fcs-brd);
}

/* SELECT */

.kby-select .kby-input-container {
    anchor-name: --kbySelectAnchor;
}

.kby-select input:not(:focus-visible)::placeholder {
    opacity:1;
}

.kby-select .kby-popover-dropdown {
    position-anchor: --kbySelectAnchor;
    top: anchor(--kbySelectAnchor bottom);
    left: anchor(--kbySelectAnchor left);
    scrollbar-width: none;
    margin-top:0.2rem;
}

/* TREE */

.kby-tree ul{
    list-style: none;
    padding:0;
}

.kby-tree li {
    margin-left:1.6rem;
}

.kby-tree .kby-header{
    display:flex;
    align-items:center;
}

.kby-tree .kby-title {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex: 1;
}

.kby-tree .kby-image {
    width:2.4rem;
    height:2.4rem;
    background:#ff0000;
    margin-right:0.8rem;
}

/* TAG */

.kby-tag-list {
    display:flex;
    flex-wrap:wrap;
    gap: 0.6rem 0.4rem;
}

.kby-tag {
    display: flex;
    align-items: center;
    border-radius: 999px;
    /* border: 0.1rem solid; */
    padding: 0 1.2rem;
    height: 3.2rem;
    background: #ffd793;
    font-size: 92%;
}

.kby-tag.kby-tag-removeable {
    padding-right: 0.4rem;
}

.kby-tag.kby-tag-removeable .kby-button{
    height: 100%;
    width: 1.8rem;
}

.kby-tag.kby-tag-removeable .kby-button .kby-icon{
    height: 1.8rem;
    color:var(--kby-frm-lbl-col);
}

.kby-tag.kby-state-selected {
    background: #e28a8a;
}

.kby-tag .kby-label {
    white-space:nowrap;
}

@keyframes dropdownEnter {
    to {
       height:auto;
    }
}


/* base */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

/* single track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--kby-rds-inf);
  background: linear-gradient(
    to right,
    #ff0000 var(--fill),
    #ccc var(--fill)
  );
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--kby-rds-inf);
  background: #ccc;
}
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--kby-rds-inf);
  background: #ff0000;
}

/* thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff0000;
  margin-top: -7px;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff0000;
  border: none;
}

/* dual track */
.kby-range-track {
  position: relative;
  height: 18px;
}
.kby-range-track input[type="range"] {
  position: absolute;
  width: 100%;
  pointer-events: none;
  background: transparent;
  top: 0;
  left: 0;
}
.kby-range-track input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
}
.kby-range-track input[type="range"]::-moz-range-thumb {
  pointer-events: all;
}
.kby-range-track input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #ccc var(--min),
    #ff0000 var(--min),
    #ff0000 var(--max),
    #ccc var(--max)
  );
}
.kby-range-track input[type="range"]::-moz-range-track {
  background: linear-gradient(
    to right,
    #ccc var(--min),
    #ff0000 var(--min),
    #ff0000 var(--max),
    #ccc var(--max)
  );
}
.kby-range-track input[type="range"]::-moz-range-progress {
  background: transparent;
}