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

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