/* Animations */
.animate-pulse { position: absolute; width: .8rem; height: .8rem; display: inline-block; }
.animate-pulse .animate-pulse-animation { width: .8rem; height: .8rem; border-radius: 50%; background-color: var(--color-secundary); opacity: .75; animation: animatePulse 1s cubic-bezier(0,0,.2,1) infinite; }
.animate-pulse .animate-pulse-circle { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background-color: var(--color-secundary); top: 0; }
@keyframes animatePulse { 75%, 100% { transform: scale(2); opacity: 0; } }

/* ApexCharts */
.apexcharts-canvas { cursor: pointer !important; }
.apexcharts-tooltip { background: var(--color-bg) !important; color: var(--color-text-dark); border: 1px solid var(--color-border) !important; box-shadow: none !important; border-radius: .6rem !important; padding-bottom: .8rem; }
.apexcharts-tooltip-title { background: var(--color-bg) !important; border-bottom: 1px solid var(--color-border) !important; color: var(--color-text) !important; font-size: 1.2rem !important; font-weight: 600 !important; padding: .4rem .8rem !important; margin-bottom: 0 !important; font-family: "Inter", sans-serif !important; }
.apexcharts-tooltip-series-group { padding: 0 .8rem !important; }
.apexcharts-tooltip-series-group-0 { padding-top: .8rem !important; }
.apexcharts-tooltip-series-group .apexcharts-tooltip-text { font-family: "Inter", sans-serif !important; }
.apexcharts-tooltip-series-group .apexcharts-tooltip-text .apexcharts-tooltip-y-group { padding: 0 !important; }
.apexcharts-tooltip-series-group .apexcharts-tooltip-text .apexcharts-tooltip-y-group .apexcharts-tooltip-text-y-value { margin-left: .4rem !important; color: var(--color-text) !important; }

/* 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 label a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.form .form-field.is-suffix div label a:hover .icon { color: var(--color-secundary); }
.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-suffix 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.is-suffix div .form-field-text, .form.is-inline .form-field.is-suffix div .form-field-textarea, .form.is-inline .form-field.is-suffix 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); }

/* Modal */
body.no-scroll { overflow: hidden; }
.modal { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background-color: var(--color-bg-50); backdrop-filter: blur(.8rem); z-index: 30; visibility: hidden; opacity: 0; }
.modal.is-active { visibility: visible; opacity: 1; }
.modal .modal-container { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 40rem; max-height: calc(100% - 4.8rem); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: .6rem; margin-right: 2.4rem; margin-left: 2.4rem; }
.modal .modal-container .modal-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); }
.modal .modal-container .modal-container-title .icon-container { cursor: pointer; }
.modal .modal-container .modal-container-title .icon-container:hover { border-color: var(--color-red); color: var(--color-red); }
.modal .modal-container .modal-container-content { display: flex; flex-direction: column; align-items: center; padding: 2.4rem; overflow: hidden auto; }
.modal .modal-container .modal-container-content .modal-container-content-status { font-size: 4rem; }
.modal .modal-container .modal-container-content .modal-container-content-status.is-error { color: var(--color-red); }
.modal .modal-container .modal-container-content .modal-container-content-status.is-success { color: var(--color-green); }
.modal .modal-container .modal-container-content .modal-container-content-status.is-warning { color: var(--color-yellow); }
.modal .modal-container .modal-container-content .h2 { margin: 1.6rem 0 .8rem 0; }
.modal .modal-container .modal-container-content .form { margin-top: 2.4rem; }

/* 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; }

/* Pickr */
.pickr .pcr-button { width: 2.4rem !important; height: 2.4rem !important; padding: 0 !important; border-radius: 999rem !important; outline: 1px solid var(--color-border) !important; }
.pickr .pcr-button::after, .pickr .pcr-button::before { border-radius: 999rem !important; }
.custom-pickr { top: auto !important; left: auto !important; transform: translateX(2rem) translateY(2rem) !important; border-radius: .6rem !important; border: 1px solid var(--color-border) !important; overflow: hidden !important; font-family: "Inter", sans-serif !important; font-size: 1.4rem !important; font-weight: normal !important; box-shadow: none !important; background-color: var(--color-bg) !important; max-height: 0; }
.custom-pickr.visible { max-height: initial; }
.custom-pickr .pcr-palette { border-radius: 0 !important; }
.custom-pickr .pcr-color-chooser { grid-area: 2/1/2/3 !important; }
.custom-pickr .pcr-swatches { display: none !important; }
.custom-pickr .pcr-result { background-color: var(--color-bg-dark) !important; padding: .4rem .8rem !important; border-radius: .4rem !important; color: var(--color-text-dark) !important; }

/* Quill */
.ql-toolbar.ql-snow { border-color: var(--color-border) !important; font-family: "Inter", sans-serif !important; border-radius: .6rem .6rem 0 0 !important; }
.ql-container.ql-snow { border-color: var(--color-border) !important; font-family: "Inter", sans-serif !important; border-radius: 0 0 .6rem .6rem !important; font-size: 1.4rem !important; min-height: 10rem !important; }
.ql-container.ql-snow .ql-editor { min-height: 10rem !important; max-height: 20rem !important; }
.ql-snow .ql-stroke { stroke: var(--color-text-dark) !important; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--color-text-dark) !important; }
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected { color: var(--color-secundary) !important; }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { stroke: var(--color-secundary) !important; }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: var(--color-secundary) !important; }

/* Switch */
.switch { display: flex; align-items: center; width: 3.6rem; height: 2rem; background-color: var(--color-border); cursor: pointer; border-radius: 999rem; padding: .2rem; }
.switch .switch-icon { display: block; background-color: var(--color-white); width: 1.6rem; height: 1.6rem; border-radius: 999rem; }
.switch.is-active { background-color: var(--color-secundary); }
.switch.is-active .switch-icon { background-color: var(--color-bg); transform: translateX(1.6rem); }

/* Table */
.table { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: .6rem; overflow: hidden; }
.table .table-header { display: flex; flex-wrap: wrap; padding: 1.2rem 0; font-weight: 500; border-bottom: 1px solid var(--color-border); }
.table .table-header > div { display: flex; align-items: center; gap: .4rem; color: var(--color-text-dark); }
.table .table-header > div.is-center { justify-content: center; }
.table .table-header > div.is-right { justify-content: right; }
.table .table-header > div:first-child { padding-left: 2.4rem; }
.table .table-header > div:last-child { padding-right: 2.4rem; }
.table .table-items .table-items-item { display: flex; flex-wrap: wrap; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.table .table-items .table-items-item:last-child { border-bottom: 0; }
.table .table-items .table-items-item > div { display: flex; align-items: center; gap: .4rem; color: var(--color-text-dark); }
.table .table-items .table-items-item > div.is-center { justify-content: center; }
.table .table-items .table-items-item > div.is-right { justify-content: right; }
.table .table-items .table-items-item > div.is-white { color: var(--color-text); cursor: pointer; }
.table .table-items .table-items-item > div.is-white:hover { color: var(--color-secundary); }
.table .table-items .table-items-item > div:nth-child(2) { padding-left: 2.4rem; }
.table .table-items .table-items-item > div:last-child { padding-right: 2.4rem; }
.table .table-items .table-items-item > div .icon-container { cursor: pointer; }
.table .table-items .table-items-item > div .js-btn-move:hover { color: var(--color-secundary); border-color: var(--color-secundary); cursor: move; }
.table .table-items .table-items-item > div .js-btn-edit:hover { color: var(--color-secundary); border-color: var(--color-secundary); }
.table .table-items .table-items-item > div .js-btn-remove:hover { color: var(--color-red); border-color: var(--color-red); }
.table .table-items .table-items-item .is-title { display: none; width: 40%; border-bottom: 1px solid var(--color-border); padding: 1rem .8rem 1rem 1.6rem; }
.table .table-items .table-items-empty { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 2.4rem; }
.table .table-items .table-items-empty > .icon { color: var(--color-red); font-size: 5.2rem; }
.table .table-items .table-items-empty.is-loading > .icon { animation: buttonLoading 1s linear infinite; color: var(--color-text-dark); }
.table .table-items .table-items-empty .h2 { margin: .8rem 0 .4rem 0; }

/* 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); }

/* Tooltip */
.tooltip { position: fixed; background: var(--color-bg-dark); color: var(--color-text); padding: .4rem .8rem; font-size: 1.2rem; border-radius: .6rem; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 9999; transition: opacity .15s ease-in-out; }
.tooltip.is-active { opacity: 1; }
.tooltip::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; }
.tooltip[data-position="top"]::after { border-width: .6rem .6rem 0 .6rem; border-color: var(--color-bg-dark) transparent transparent transparent; bottom: -.6rem; left: 50%; transform: translateX(-50%); }
.tooltip[data-position="bottom"]::after { border-width: 0 .6rem .6rem .6rem; border-color: transparent transparent var(--color-bg-dark) transparent; top: -.6rem; left: 50%; transform: translateX(-50%); }
.tooltip[data-position="left"]::after { border-width: .6rem 0 .6rem .6rem; border-color: transparent transparent transparent var(--color-bg-dark); right: -.6rem; top: 50%; transform: translateY(-50%); }
.tooltip[data-position="right"]::after { border-width: .6rem .6rem .6rem 0; border-color: transparent var(--color-bg-dark) transparent transparent; left: -.6rem; top: 50%; transform: translateY(-50%); }