/* Badge */
.badge { display: flex; align-items: center; gap: .4rem; border-radius: 999rem; font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; padding: .2rem .8rem; outline: 1px solid var(--color-border); color: var(--color-text); }
.badge .icon { font-size: 1.2rem; }
.badge.is-green .icon { color: var(--color-green); }
.badge.is-red .icon { color: var(--color-red); }
.badge.is-yellow .icon { color: var(--color-yellow); }

/* Button */
.btn { display: flex; justify-content: center; align-items: center; width: auto; background-color: var(--color-secundary); border: 1px solid var(--color-secundary); color: var(--color-bg); padding: .8rem 1.6rem; border-radius: .6rem; font-weight: 600; gap: .8rem; cursor: pointer; }
.btn:hover { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn.is-red { background-color: var(--color-red) !important; border-color: var(--color-red) !important; color: var(--color-bg) !important; }
.btn.is-green { background-color: var(--color-green) !important; border-color: var(--color-green) !important; color: var(--color-bg) !important; }
.btn.is-inactive { background-color: var(--color-bg-dark) !important; border-color: var(--color-border) !important; color: var(--color-text-dark) !important; cursor: no-drop; }
.btn.is-loading.is-active { background-color: var(--color-bg-dark) !important; border-color: var(--color-border) !important; color: var(--color-text-dark) !important; }
.btn.is-loading.is-active .icon { animation: buttonLoading 1s linear infinite; }
.btn.is-nobg { background-color: transparent !important; border-color: var(--color-border) !important; color: var(--color-text-dark) !important; }
.btn.is-nobg:hover { background-color: var(--color-bg-dark) !important; color: var(--color-text) !important; }
.btn-container { display: flex; gap: 1.6rem; margin-top: 1.6rem; }
@keyframes buttonLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Dropdown */
.drop { position: absolute; top: 100%; min-width: 20rem; display: flex; flex-direction: column; background-color: var(--color-bg); color: var(--color-text-dark); margin-top: .8rem; padding: .8rem 0; border-radius: .6rem; z-index: 30; border: 1px solid var(--color-border); cursor: default; overflow: hidden; opacity: 0; visibility: hidden; }
.drop.is-top { top: auto; bottom: 100%; margin-top: 0; margin-bottom: .8rem; }
.drop.is-active { opacity: 1; visibility: visible; }
.drop .drop-item { display: flex; align-items: center; white-space: nowrap; padding: .8rem; border-radius: .6rem; gap: .8rem; cursor: pointer; border: 1px solid transparent; margin: 0 .8rem; }
.drop .drop-item:hover { background-color: var(--color-bg-dark); color: var(--color-text); border-color: var(--color-border); }
.drop .drop-separator { width: 100%; height: 1px; margin: .8rem 0; background-color: var(--color-border); }

/* Form */
.form { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.form .form-field { width: 100%; display: flex; flex-direction: column; }
.form .form-field.is-50 { width: calc(50% - .8rem); }
.form .form-field .form-field-name { display: flex; align-items: center; gap: .4rem; font-weight: 500; margin-bottom: .8rem; color: var(--color-text-dark); }
.form .form-field .form-field-name > .req { color: var(--color-red); margin-left: .2rem; }
.form .form-field .form-field-select { position: relative; }
.form .form-field .form-field-text, .form .form-field .form-field-textarea, .form .form-field .form-field-select .form-field-select-container { width: 100%; display: block; border-radius: .6rem; padding: .8rem; border: 1px solid var(--color-border); }
.form .form-field .form-field-textarea { height: 7.2rem; resize: vertical; }
.form .form-field .form-field-select .form-field-select-container { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: .8rem; color: var(--color-text); }
.form .form-field .form-field-select .form-field-select-options { position: fixed; width: auto; display: flex; flex-direction: column; background-color: var(--color-bg); margin-top: .8rem; border-radius: .6rem; z-index: 5; border: 1px solid var(--color-border); cursor: default; overflow: hidden; visibility: hidden; opacity: 0; }
.form .form-field .form-field-select .form-field-select-options.is-active { visibility: visible; opacity: 1; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-header { display: flex; align-items: center; padding-top: .2rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-header .icon { color: var(--color-text-dark); margin-left: 1.7rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-header .form-field-text { border-radius: 0; border: 0; padding-left: .8rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-separator { width: 100%; height: 1px; background-color: var(--color-border); margin-top: .2rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-content { max-height: 24rem; overflow-y: auto; padding: .8rem 0; color: var(--color-text-dark); }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-content .form-field-select-options-content-empty { display: none; padding: .6rem .8rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-content .form-field-select-options-content-option { display: flex; align-items: center; height: 3.7rem; padding: 0 .8rem; border-radius: .6rem; gap: .8rem; border: 1px solid transparent; margin: 0 .8rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-content .form-field-select-options-content-option > .icon { color: transparent; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-content .form-field-select-options-content-option:hover, .form .form-field .form-field-select .form-field-select-options .form-field-select-options-content .form-field-select-options-content-option.is-selected { background-color: var(--color-bg-dark); color: var(--color-text); border-color: var(--color-border); }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-content .form-field-select-options-content-option.is-selected > .icon { color: var(--color-text); }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-scroll { position: absolute; width: 100%; display: none; justify-content: center; padding: .4rem; background-color: var(--color-bg); }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-scroll .icon { color: var(--color-text-dark); }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-scroll.is-up { top: 4.1rem; }
.form .form-field .form-field-select .form-field-select-options .form-field-select-options-scroll.is-down { bottom: 0; }
.form .form-field .form-field-text:focus, .form .form-field .form-field-textarea:focus, .form .form-field .form-field-select .form-field-select-container.is-active { outline: 0; border-color: var(--color-text); }
.form .form-field .form-field-checkbox { display: flex; flex-direction: column; gap: 1.2rem; }
.form .form-field .form-field-checkbox .form-field-checkbox-item { display: flex; align-items: center; gap: 1.2rem; }
.form .form-field .form-field-checkbox .form-field-checkbox-item input { flex-shrink: 0; padding: 0; display: inline-block; height: 1.6rem; width: 1.6rem; color: var(--color-secundary); background-color: var(--color-border); border-radius: .4rem; cursor: pointer; appearance: none; user-select: none; }
.form .form-field .form-field-checkbox .form-field-checkbox-item input:checked { background-color: var(--color-secundary); position: relative; }
.form .form-field .form-field-checkbox .form-field-checkbox-item input:checked::before { font-family: "tabler-icons"; content: '\ea5e'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.6rem; color: var(--color-bg); }
.form .form-field.is-more-check .form-field-checkbox { margin-top: .8rem; }
.form .form-field .form-field-color { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 999rem; outline: 1px solid var(--color-border); cursor: pointer; }
.form .form-field .form-field-upload { display: flex; gap: 1.6rem; align-items: center;}
.form .form-field .form-field-upload .form-field-upload-empty { width: 7.2rem; height: 7.2rem; border-radius: 999rem; flex-shrink: 0; border: .2rem dashed var(--color-border); display: flex; justify-content: center; align-items: center; }
.form .form-field .form-field-upload .form-field-upload-empty .icon { color: var(--color-text-dark); }
.form .form-field .form-field-upload .form-field-upload-image { display: none; width: 7.2rem; height: 7.2rem; flex-shrink: 0; }
.form .form-field .form-field-upload .form-field-upload-image img { width: 7.2rem; height: 7.2rem; border-radius: 50%; object-fit: cover; }
.form .form-field .form-field-upload .form-field-upload-infos { display: flex; flex-wrap: wrap; flex-direction: column; align-items: baseline; gap: .4rem; }
.form .form-field .form-field-upload .form-field-upload-infos div { display: flex; align-items: center; gap: .8rem; }
.form .form-field .form-field-upload .form-field-upload-infos div .btn { position: relative; }
.form .form-field .form-field-upload .form-field-upload-infos div .btn input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.form .form-field .form-field-upload .form-field-upload-infos div .icon-container { cursor: pointer; }
.form .form-field .form-field-upload .form-field-upload-infos .text-dark { font-size: 1.2rem; }
.form .form-field .form-field-upload.is-big { flex-direction: column; gap: .8rem; }
.form .form-field .form-field-upload.is-big .form-field-upload-empty { width: 100%; height: auto; min-height: 7.2rem; border-radius: .6rem; }
.form .form-field .form-field-upload.is-big .form-field-upload-image { width: 100%; height: auto; min-height: 7.2rem; }
.form .form-field .form-field-upload.is-big .form-field-upload-image img { width: 100%; height: auto; min-height: 7.2rem; border-radius: .6rem; }
.form .form-field .form-field-upload.is-big .form-field-upload-infos { align-items: center; }
.form .form-field.is-link { position: relative; }
.form .form-field.is-link > span { position: absolute; margin: 2.85rem 0 0 .05rem; color: var(--color-text-dark); padding: .8rem; border-right: 1px solid var(--color-border); border-radius: .6rem 0 0 .6rem; }
.form .form-field.is-link .form-field-text { padding-left: 14.4rem !important; }
.form .form-field.is-prefix div { position: relative; }
.form .form-field.is-prefix div label { position: absolute; top: 1px; left: 1px; width: 3.6rem; height: 3.6rem; display: flex; justify-content: center; align-items: center; color: var(--color-text-dark); border-radius: .6rem 0 0 .6rem; border-right: 1px solid var(--color-border); }
.form .form-field.is-prefix div .form-field-text, .form .form-field.is-prefix div .form-field-textarea, .form .form-field.is-prefix div .form-field-select .form-field-select-container { position: relative; padding-left: 4.4rem; z-index: 1; }
.form .form-field.is-suffix div { position: relative; }
.form .form-field.is-suffix div label { position: absolute; top: 1px; right: 1px; width: 3.6rem; height: 3.6rem; display: flex; justify-content: center; align-items: center; color: var(--color-text-dark); border-radius: 0 .6rem .6rem 0; border-left: 1px solid var(--color-border); }
.form .form-field.is-suffix div .form-field-text, .form .form-field.is-suffix div .form-field-textarea, .form .form-field.is-suffix div .form-field-select .form-field-select-container { position: relative; padding-right: 4.4rem; z-index: 1; }
.form .form-field .form-field-warning { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; color: var(--color-yellow); font-size: 1.2rem; }
.form .form-field .form-field-error { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; color: var(--color-red); font-size: 1.2rem; }
.form .form-field.is-error .form-field-text, .form .form-field.is-error .form-field-textarea, .form .form-field.is-error .form-field-select .form-field-select-container { border-color: var(--color-red) !important; color: var(--color-red); }
.form.is-inline .form-field { flex-wrap: wrap; flex-direction: row; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 1.6rem; }
.form.is-inline .form-field .form-field-text, .form.is-inline .form-field .form-field-textarea, .form.is-inline .form-field .form-field-select { width: 50%; }
.form.is-inline .form-field:last-child { border-bottom: 0; padding-bottom: 0; }
.form.is-inline .form-field .form-field-name { margin-bottom: 0; padding-right: 2.4rem; }
.form.is-inline .form-field.is-link > span { top: 0; margin: .05rem 0 0 calc(50% + .05rem); }
.form.is-inline .form-field.is-prefix div { width: 50%; }
.form.is-inline .form-field.is-prefix div .form-field-text, .form.is-inline .form-field.is-prefix div .form-field-textarea, .form.is-inline .form-field.is-prefix div .form-field-select { width: 100%; }
.form.is-inline .form-field .form-field-warning { width: 50%; margin-left: 50%; }
.form.is-inline .form-field .form-field-error { width: 50%; margin-left: 50%; }
.form.is-inline .form-field.is-more-check .form-field-checkbox { margin-left: 50%; }

/* Icon */
.icon { font-size: 2rem; }
.icon.is-small { font-size: 1.6rem; }
.icon-container { display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border: 1px solid var(--color-border); border-radius: .6rem; flex-shrink: 0; }
.icon-container.is-small { width: 3.2rem; height: 3.2rem; }
.icon-container.is-red { border-color: var(--color-red); color: var(--color-red); }

/* Range */
.range .range-container { position: relative; height: 5rem; }
.range .range-container .range-container-track, .range .range-container .range-container-progress { position: absolute; height: .4rem; background: var(--color-border); top: 3.9rem; border-radius: .4rem; }
.range .range-container .range-container-progress { background: var(--color-secundary); }
.range .range-container .range-container-input { position: absolute; height: 1.6rem; top: 3.1rem; left: 0; background: transparent; -webkit-appearance: none; appearance: none; accent-color: var(--color-secundary); pointer-events: none; }
.range .range-container input[type="range"] { cursor: pointer; }
.range .range-container .range-container-input::-webkit-slider-runnable-track { height: .4rem; background: transparent; pointer-events: none; }
.range .range-container .range-container-input::-moz-range-track { height: .4rem; background: transparent; pointer-events: none; }
.range .range-container .range-container-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-secundary); border: none; cursor: pointer; margin-top: -.4rem; }
.range .range-container .range-container-input::-moz-range-thumb { pointer-events: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-secundary); border: none; cursor: pointer; }
.range .range-container .range-container-input.min-range { z-index: 2; }
.range .range-container .range-container-input.max-range { z-index: 3; }
.range .range-container .range-container-bubble { position: absolute; background: var(--color-border); color: var(--color-text); font-size: 1rem; font-weight: 600; padding: .4rem .8rem; border-radius: .6rem; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.range .form { flex-wrap: nowrap; margin-top: 1.6rem; }

/* Sheet */
.sheet { position: fixed; inset: 0; display: flex; justify-content: right; align-items: center; background-color: var(--color-bg-50); backdrop-filter: blur(.8rem); z-index: 30; visibility: hidden; opacity: 0; transition: all .30s ease-in-out; }
.sheet.is-active { visibility: visible; opacity: 1; transition: all .30s ease-in-out; }
.sheet .sheet-container { position: relative;  display: flex; flex-direction: column; align-items: center; left: 40rem; max-width: 40rem; height: 100%; background-color: var(--color-bg); border-left: 1px solid var(--color-border); }
.sheet.is-active .sheet-container { left: 0; transition: all .30s ease-in-out; }
.sheet .sheet-container .sheet-container-title { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: 1.2rem 2.4rem; border-bottom: 1px solid var(--color-border); }
.sheet .sheet-container .sheet-container-title .icon-container { cursor: pointer; }
.sheet .sheet-container .sheet-container-title .icon-container:hover { border-color: var(--color-red); color: var(--color-red); }
.sheet .sheet-container .sheet-container-content { display: flex; flex-direction: column; align-items: center; padding: 2.4rem; overflow: hidden auto; flex: 1; }
.sheet .sheet-container .sheet-container-footer { display: flex; flex-direction: column; padding: 1.2rem 2.4rem; border-top: 1px solid var(--color-border); }

/* Overlay */
.overlay { position: fixed; inset: 0; z-index: 9999; cursor: wait; display: none; background: rgba(255,255,255,0); pointer-events: all; }

/* Pagination */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1.6rem; color: var(--color-text-dark); }
.pagination .pagination-results { display: none; align-items: center; gap: 1.6rem; }
.pagination .pagination-results .form { width: 10rem; }
.pagination .pagination-nav { display: flex; gap: .8rem; }
.pagination .pagination-nav .icon-container { width: auto; min-width: 3.2rem; padding: 0 .8rem; cursor: pointer; }
.pagination .pagination-nav .icon-container:hover, .pagination .pagination-nav .icon-container.is-active { background-color: var(--color-bg-dark); color: var(--color-text); }
.pagination .pagination-nav .icon-container.is-active { cursor: default; }

/* Toast */
.toast { position: fixed; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .8rem; background-color: var(--color-bg); border: 1px solid var(--color-border); padding: 1.6rem; border-radius: .6rem; z-index: 30; visibility: hidden; opacity: 0; }
.toast.is-active { visibility: visible; opacity: 1; top: 2.4rem; }
.toast .toast-status.is-error { color: var(--color-red); }
.toast .toast-status.is-success { color: var(--color-green); }
.toast .toast-status.is-warning { color: var(--color-yellow); }