/* General */
:root {
    --brand-color-with-opacity-1: rgba(255, 84, 0, 0.1);
    --brand-color-with-opacity-2: rgba(255, 84, 0, 0.25);
    --rz-input-disabled-background-color: #EAECEF !important;
    --rz-input-focus-border: 1px solid var(--brand-color) !important;
    --rz-input-focus-shadow: 0 0 0 2px var(--brand-color-with-opacity-2) !important;
    --rz-input-disabled-color: #424242 !important;
    --rz-primary: var(--brand-color) !important;
    --rz-switch-checked-circle-background-color: var(--brand-color) !important;
    --rz-primary-lighter: rgb(from var(--brand-color) r g b / 0.12) !important;
    --rz-grid-loading-indicator-background-opacity: 0 !important;
    --rz-accordion-item-padding-block: 0.8rem !important;
    --rz-accordion-content-padding-block: 0 !important;
}

.rz-button-md {
    text-transform: none !important;
}

.rz-timespanpicker > .rz-inputtext, .rz-colorpicker, .rz-lookup-search input,
.rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textbox, .rz-numeric-input {
    height: 2rem !important;
    line-height: 1rem !important;
    padding-left: 0.6rem !important;
    font-weight: 400 !important;
}

.rz-timespanpicker > .rz-inputtext, .rz-colorpicker, .rz-lookup-search input,
.rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .rz-dropdown-item, .mask, .rz-textbox, .rz-textarea, .rz-numeric-input, .rz-inputtext {
    font-size: 14px !important;
}

.rz-pager .rz-dropdown {
    height: 2rem;
    font-size: 0.9rem;
    line-height: 1rem;
    padding-left: 0.6rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
}

.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item,
.rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight,
.rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
    color: black !important;
    background-color: var(--brand-color-with-opacity-1) !important;
}

.rz-dropdown-clear-icon:hover {
    cursor: pointer !important;
}

.customer-dropdown > .rz-dropdown > .rz-inputtext {
    --rz-input-disabled-color: #757575 !important;
}

/* Radzen datagrid BEGIN */
.rz-column-title {
    font-family: "Lato", sans-serif !important;
}

.rz-grid-table td {
    font-family: "Lato", sans-serif !important;
    font-weight: 300 !important;
}

.rz-grid-table thead th.rz-text-align-right .rz-column-title {
    padding-right: 1rem;
}

.rz-pager-page.rz-state-active {
    color: var(--brand-color) !important;
    border: 1px solid var(--brand-color) !important;
    background-color: var(--brand-color-with-opacity-2) !important;
}

/* Change color of text in Radzen selected row in data grid */
.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    color: black !important;
}

/* Change color of Radzen selected row in data grid */
.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background-color: #E6EAED !important;
}

/* Change color of Radzen dark buttons */
.rz-button.rz-variant-text.rz-dark {
    color: #6C757D !important;
}

.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter {
    color: var(--brand-color) !important;
}

.rz-chkbox-box.rz-state-active {
    background-color: var(--brand-color) !important;
}

.rzi.rz-grid-filter-active {
    --rz-grid-header-filter-icon-active-color: var(--brand-color) !important;
}

.rz-datatable-emptymessage {
    font-size: 14px !important;
    padding: 10px !important;
}

.rz-timepicker .rz-button-md {
    background-color: var(--brand-color) !important;
}

.rz-calendar-view td .rz-state-active, .rz-calendar-view td .rz-state-active.rz-calendar-today {
    background-color: var(--brand-color) !important;
}

.data-grid-padding {
    padding-bottom: 8px !important;
    padding-top: 8px !important;
}

.data-grid-header-template {
    display: flex;
}

.custom-data-grid-header-button {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 14px;
    margin-left: 0.5rem;

    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .icon-spacing {
        margin-right: 0.4rem;
        color: #6C757D;
        transition: color 0.2s;
    }
}

.custom-data-grid-header-button:not(:disabled):hover {
    background-color: #5C636B;
    color: white;

    .icon-spacing {
        color: white;
    }
}

.rz-grid-table tr:last-child td {
    border-bottom: 1px solid #E0E0E0 !important;
}

/* Column titles wrap onto a second line at word boundaries; a column resized narrower than a word cuts it off with an ellipsis */
.rz-grid-table thead th,
.rz-grid-table thead th .rz-column-title,
.rz-grid-table thead th .rz-column-title-content {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 20px;
}

.rz-grid-table thead th .rz-column-title-content {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Radzen datagrid END */

/* Radzen dropdown BEGIN */
.rz-dropdown:hover {
    cursor: pointer;
}

.rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item {
    padding: 0.2rem 0.4rem !important;
    font-weight: 400 !important;
}

.rz-dropdown-item:hover {
    cursor: pointer !important;
}

:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown {
    background-color: #EAECEF !important;
    cursor: not-allowed;
}

:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext {
    background-color: #EAECEF !important;
}

.dropdown-group-header {
    margin-left: -12px;
    margin-right: -16px;
    cursor: default;
    font-size: 14px !important;
}

.rz-dropdown-items-wrapper {
    max-height: 350px !important;
}

.rz-multiselect-items-wrapper {
    max-height: 350px !important;
}

.dropdown-group-header-item:hover {
    background-color: transparent !important;
}

/* Radzen dropdown END */

/* Radzen date range BEGIN */

.date-range-date-picker-input {
    height: 30px !important;
    padding: 2px 6px !important;
    font-size: 14px !important;
}

.date-range-date-picker-button {
    font-size: 16px !important;
    height: 16px !important;
    width: 16px !important;
}
/* Radzen date range END */

/* Radzen tabs BEGIN */
.rz-tabview-nav li {
    color: #495057 !important;
    border-radius: 4px 4px 0 0 !important;
}

.rz-tabview-nav .rz-tabview-selected {
    color: var(--brand-color) !important;
    background-color: white !important;
    border: 1px solid #E9EDF0 !important;
}

.rz-tabview-nav li:not(.rz-tabview-selected) {
    background-color: #E9EDF0 !important;
    border: 1px solid #E9EDF0 !important;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-bottom: none !important;
}

.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    color: var(--brand-color) !important;
    background-color: white !important;
    border: 1px solid #E9EDF0 !important;
}

.rz-calendar-view .rz-state-disabled {
    cursor: not-allowed !important;
}

.rz-tabview-panel {
    padding: 0 !important;
}

.rz-tabview-nav li button, .rz-tabview-nav li {
    text-transform: none !important;
}

.rz-tabview-nav li button {
    padding-block: 6px !important;
    padding-inline: 12px !important;
}

.port-details-tabs .rz-tabview-panels {
    overflow: visible !important;
}

.port-details-tabs .rz-accordion {
    overflow: visible !important;
}

/* AI Defender tab */
.rz-tabview-nav li.ai-defender-tab:not(.rz-tabview-selected) {
    background-color: color-mix(in srgb, var(--brand-color) 15%, var(--bs-body-bg)) !important;
    border-color: color-mix(in srgb, var(--brand-color) 35%, transparent) !important;
    color: var(--brand-color) !important;
}

.ai-defender-tab > a > .rz-tabview-icon {
    font-size: 1.2rem !important;
}

/* Radzen tabs END */

/* Radzen textbox BEGIN */
.rz-textbox {
    width: 100%;
}
/* Radzen textbox END */

/* Radzen textarea BEGIN */
.rz-textarea {
    width: 100%;
    min-height: 200px;
    max-height: 500px;
    padding-left: 0.6rem !important;
}
/* Radzen textarea END */

/* Radzen numeric box BEGIN */
.rz-numeric {
    width: 100%;
}

.rz-numeric  .rz-inputtext{
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
}

/* Radzen numeric box END */

/* Radzen file upload BEGIN */
.rz-fileupload-files {
    display: none !important;
}

#uploadWithDragAndDrop {
    left: 0;
    --rz-upload-button-bar-background-color: transparent;
    --rz-upload-button-bar-padding: 0;
}

#uploadWithDragAndDrop .rz-fileupload-buttonbar .rz-fileupload-choose {
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 40px 0;
    border: 2px dashed #ccc;
    background-color: white;
    box-shadow: none;
    transition: background-color 0.2s ease-in-out;
}

.rz-fileupload-choose:hover {
    background-color: #F5F5F5 !important;
}

.rz-fileupload-choose {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;

    /* File upload icon */
    .rzi {
        font-size: 1.8rem !important;
    }
}
/* Radzen file upload END */

/* Radzen checkboxes BEGIN */
.rz-chkbox {
    transform: scale(75%) !important;
}

.checkbox-label {
    cursor: pointer;
}
/* Radzen checkboxes END */

/* Radzen listbox BEGIN */
.rz-multiselect-item {
    padding: 0.5rem 0.75rem !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.rz-multiselect-item:hover {
    cursor: pointer;
}

.rz-listbox-header {
    padding-block: 0.5rem !important;
    padding-inline: 0.75rem !important;
}
/* Radzen listbox END */

/* Radzen radio buttons BEGIN */
.rz-radiobutton-label {
    margin-inline: 0.25rem 2rem !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.rz-radiobutton {
    transform: scale(65%) !important;
}
/* Radzen radio buttons END */

/* Radzen dialog BEGIN */
.rz-text-body1 {
    font-family: "Lato", sans-serif !important;
}

.rz-dialog-title {
    font-size: 24px !important;
}
/* Radzen dialog END */

/* Radzen switch BEGIN */
/* Geometry is one set of numbers, not four independent ones: the thumb is the track height less a
   0.15rem gap top and bottom, and it travels the track width less the thumb and both gaps. Change
   the track and the other two have to be recomputed, or the thumb sits off-centre or overshoots. */
.rz-switch .rz-switch-circle::before {
    width: 1rem !important;
    height: 1rem !important;
    inset-inline-start: 0.15rem !important;
    margin-block-start: -0.5rem !important;   /* half the thumb, so it centres vertically */
    border-radius: 50% !important;
    transition: transform 0.2s linear !important;
    box-shadow: none !important;
}
.rz-switch {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: 2.4rem !important;
    min-width: 2.4rem !important;
    height: 1.3rem !important;
    border-radius: 999px !important;          /* always a pill, whatever the height */
}

/* 2.4 track - 1 thumb - 0.15 gap each side = 1.1, so the gap is identical at both ends. */
.rz-switch.rz-switch-checked .rz-switch-circle::before {
    transform: translateX(1.1rem) !important;
}
/* Radzen switch END */

/* Radzen accordion BEGIN */
.rz-accordion {
    box-shadow: none !important;
}

.rz-accordion-header .text-muted {
    color: rgba(33, 37, 41, 0.75) !important;
    font-weight: 300 !important;
}

.rz-accordion-header button {
    width: 100%;
}

.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon), .rz-accordion .rz-accordion-header > button span:not(.rz-accordion-toggle-icon) {
    flex-grow: 0;
}

/* Radzen accordion END */