/**
 * UI WIDGET
 */
.ui-widget {
    font-family: var(--font) !important;
}

/**
 * COLOR PICKER
 */
.ui-colorpicker,
.ui-dialog.ui-colorpicker {
    padding: 0;
    resize: none;
}

.ui-colorpicker-hsv-container .ui-colorpicker-unit,
.ui-colorpicker-hex label {
    font-size: 12px;
    color: var(--color-mat-input-label);
    opacity: .8;
}

.ui-colorpicker-hsv-container .ui-colorpicker-unit {
    margin-left: .25em;
}

.ui-colorpicker-hex label {
    margin-right: -1.5em;
}

.ui-colorpicker-hex-input {
    text-transform: uppercase !important;
    font-size: 12px !important;
    padding-left: 1.8em !important;
}

.ui-dialog.ui-colorpicker > table {
    padding: 1.5em;
}

.ui-colorpicker .ui-dialog-buttonset {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

.ui-colorpicker .ui-dialog-buttonset > button {
    flex: 1;
    height: var(--size-button);
    padding: 1.8em .75em;
    border-radius: 0;
    margin: 0;
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-error {
    border: none;
    color: var(--color-light-text);
    background-color: var(--color-modal-error-bg);
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-error > span {
    color: var(--color-light-text) !important;
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-error:hover {
    background-color: var(--color-modal-error-bg-dark) !important;
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-ok {
    border: none;
    color: var(--color-light-text);
    background-color: var(--color-modal-confirm-bg);
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-ok > span {
    color: var(--color-light-text) !important;
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-ok:hover {
    background-color: var(--color-modal-confirm-bg-dark) !important;
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-cancel {
    border: none;
    color: var(--color-light-text);
    background-color: var(--color-modal-confirm-bg-light);
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-cancel > span {
    color: var(--color-light-text) !important;
}

.ui-colorpicker .ui-dialog-buttonset > button.btn-cancel:hover {
    background-color: var(--color-modal-confirm-bg) !important;
}

.ui-colorpicker-map,
[class^="ui-colorpicker-bar"],
.ui-colorpicker-map-container {
    border-radius: var(--border-radius);
}

[class^="ui-colorpicker-map"] {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.ui-colorpicker-border {
    border: none !important;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ui-colorpicker-dialog .ui-widget-content {
    background: transparent;
    border: none;
    color: var(--color-text);
    padding: 0;
    margin: 0;
}

.ui-colorpicker-number.form-control {
    max-width: unset !important;
}

/**
 * DATE PICKER
 */
.ui-datepicker {
    z-index: 206 !important; /* If we put a smaller number the calendar disapears behind the modal */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    min-height: 150px;
    font-size: var(--font-size);
    background-color: var(--color-input-bg);
    border: 1.5px solid var(--color-input-border) !important;
    border-radius: var(--border-radius);
    box-shadow: 8px 8px 16px var(--color-menubar-dropdown-shadow);
    padding: var(--padding-inside-horiz);
    width: fit-content !important;
}

.ui-datepicker > * {
    width: 100%;
}

.ui-widget-header {
    color: var(--color-text);
    background: var(--color-input-bg);
    border: none !important;
    padding: .8em 0 !important;
}

.ui-datepicker table {
    font-size: var(--font-size);
    color: var(--color-text);
}

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

.ui-datepicker .ui-datepicker-title {
    order: 3;
    flex: 1 1 auto;
    margin: 0 !important;
    text-align: center;
    line-height: normal;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
    width: auto !important;
    height: auto !important;
    bottom: 2px !important;
    align-content: center !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: static !important;
}

.ui-datepicker .ui-datepicker-prev { order: 2; }
.ui-datepicker .ui-datepicker-prev-big { order: 1; }
.ui-datepicker .ui-datepicker-next { order: 4; }
.ui-datepicker .ui-datepicker-next-big { order: 5; }

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: var(--color-primary);
    border: none;
    color: var(--color-light-text) !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-image: none !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.ui-datepicker-prev span.ui-icon,
.ui-datepicker-next span.ui-icon {
    height: inherit !important;
    padding: .25em .5em;
}

.ui-datepicker-prev span:before {
    content: "\f053" !important;
    font-weight: normal;
    font-family: 'Font Awesome 5 Pro' !important;
    color: var(--color-text);
    text-indent: 0 !important;
    margin: 0 !important;
    position: absolute;
    top: 2px;
    bottom: 0;
}

.ui-datepicker-next span:before {
    content: "\f054" !important;
    font-weight: normal;
    font-family: 'Font Awesome 5 Pro' !important;
    color: var(--color-text);
    text-indent: 0 !important;
    margin: 0 !important;
    position: absolute;
    top: 2px;
    bottom: 0;
}

.ui-datepicker .ui-datepicker-prev-big span:before {
    content: "\f100" !important;
}

.ui-datepicker .ui-datepicker-next-big span:before {
    content: "\f101" !important;
}

.ui-datepicker-prev:hover span:before,
.ui-datepicker-next:hover span:before {
    color: var(--color-light-text) !important;
}

.ui-datepicker th {
    font-weight: normal;
    opacity: .6;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
    padding: .7em;
}

.ui-datepicker .ui-state-default {
    color: var(--color-text);
    background: var(--color-input-bg);
    border: none;
    border-radius: var(--border-radius);
}

.ui-datepicker .ui-state-disabled {
    opacity: 1 !important;
}

.ui-datepicker .ui-datepicker-group {
    width: 100%;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-hover {
    background: var(--color-primary) !important;
    color: var(--color-light-text) !important;
}

.ui-datepicker .ui-state-highlight {
    background-color: var(--color-input-bg);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.ui-datepicker .ui-datepicker-current-day .ui-state-default {
    background-color: var(--color-primary);
    color: var(--color-light-text);
}

.ui-datepicker .ui-datepicker-week-end .ui-state-default:not(.ui-state-highlight) {
    background-color: var(--color-mat-input-disabled);
}

/* Calendar + time panel */
.ui-datepicker-main {
    display: flex;
    align-items: stretch;
}

.ui-datepicker-date-side {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.ui-datepicker-time {
    display: flex;
    flex-direction: column;
    margin-left: .8em;
    padding-left: .8em;
    border-left: 1px solid var(--color-input-border);
}

.ui-datepicker-time-cols {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    gap: .3em;
}

.ui-datepicker-time-col {
    display: flex;
    flex-direction: column;
    width: 5em;
}

.ui-datepicker-time-label {
    padding: .8em 0;
    text-align: center;
    text-transform: uppercase;
    opacity: .6;
}

.ui-datepicker-time-list {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ui-datepicker-time-item,
.ui-datepicker-shortcut {
    text-align: center;
    cursor: pointer;
    color: var(--color-text);
    border-radius: var(--border-radius);
}

.ui-datepicker-time-item {
    padding: .6em 0;
}

.ui-datepicker-time-item:hover,
.ui-datepicker-shortcut:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-input-bg));
}

.ui-datepicker .ui-datepicker-time-selected {
    background: var(--color-primary);
    color: var(--color-light-text);
}

.ui-datepicker .ui-datepicker-shortcut-selected {
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-input-bg));
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.ui-datepicker .ui-datepicker-shortcut-selected {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-input-bg));
}

/* Shortcuts (08h, 10h... / 00, 15...) and footer */
.ui-datepicker-shortcuts {
    display: flex;
    gap: .4em;
    margin-top: .3em;
    padding: .6em 0;
    border-top: 1px solid var(--color-input-border);
}

.ui-datepicker-shortcut {
    flex: 1 1 0;
    padding: .5em .6em;
    border: 1px solid var(--color-input-border);
}

.ui-datepicker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .3em;
    padding-top: .8em;
    border-top: 1px solid var(--color-input-border);
}

.ui-datepicker-preview {
    color: var(--color-primary);
}

.ui-datepicker-btn {
    color: var(--color-tab-vert-btn);
    background: transparent;
    height: 32px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    padding: 0 .75em;
    margin-left: .5em;
}

.ui-datepicker-btn:hover {
    color: var(--color-ico-cancel) !important;
    background-color: color-mix(in srgb, var(--color-ico-cancel) 10%, transparent) !important;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.ui-datepicker-btn-primary {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-input-bg));
}

.ui-datepicker-btn-primary:hover {
    color: var(--color-primary) !important;
    background-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    border: none;
    font-weight: var(--font-weight-semibold);
}