/* ============ Grant Plan NEXT - Global Styles ============ */
:root {
    /* COLORS */
    --gp-primary-color: #00AAE7;
    --gp-secondary-color: #CCEDFC;
    --gp-danger-color: #D51F2A;
    --gp-light-color: #FFF;
    --gp-gray-color: #999;
    --gp-dark-color: #272727;
    --gp-disabled-color: #CCC;
    --gp-hover-color: #EBF8FE;
    --gp-selected-color: #B0E0E6;
    --gp-success-color: #40A819;
    /* SIZE */
    --gp-xsmall-size: 24px;
    --gp-small-size: 28px;
    --gp-normal-size: 34px;
}

/* ----- SECTION ---------------------------------------------------------------- */
.gp-section {
    box-shadow: 0px 3px 8px -2px #c2c2c2;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

    .gp-section a {
        color: var(--gp-primary-color);
    }

    .gp-section label {
        font-weight: normal;
        margin: 0;
    }

    .gp-section .gp-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 16px;
        height: 36px;
        color: var(--gp-light-color);
        background-color: var(--gp-primary-color);
        box-sizing: border-box;
        border-radius: 4px 4px 0 0;
    }

        .gp-section .gp-section-header > div {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
        }

        .gp-section .gp-section-header h4 {
            display: inline-block;
            color: var(--gp-light-color);
            font-size: 15px;
            margin: 0 16px 0 0;
            white-space: nowrap;
        }

        .gp-section .gp-section-header .gp-section-options {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-right: -10px;
            margin-left: 16px;
        }

            .gp-section .gp-section-header .gp-section-options > div {
                display: inline-flex;
                align-items: center;
            }

    .gp-section .gp-section-body {
        padding: 8px 15px;
    }

/* ----- BUTTON ----------------------------------------------------------------- */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    color: var(--gp-primary-color);
    background-color: transparent;
    outline: none;
    margin: 0;
    padding: 0 10px;
    height: var(--gp-normal-size);
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.2s;
}

    .gp-btn:hover:not(:disabled):not(.gp-btn-solid):not(.gp-btn-grayscale) {
        background-color: var(--gp-hover-color);
    }

    .gp-btn:active:not(:disabled):not(.gp-btn-solid) {
        box-shadow: inset 0px 0px 3px 0px #AEE3E6;
    }

    .gp-btn:disabled {
        color: var(--gp-disabled-color);
    }

    .gp-btn.gp-btn-sm {
        height: var(--gp-small-size);
    }

    .gp-btn.gp-btn-icon {
        border-radius: 50%;
        height: var(--gp-normal-size);
        width: var(--gp-normal-size);
    }

        .gp-btn.gp-btn-icon.gp-btn-sm {
            height: var(--gp-small-size);
            width: var(--gp-small-size);
        }

    .gp-btn.gp-btn-outline {
        border: solid 1px var(--gp-primary-color);
    }

        .gp-btn.gp-btn-outline:disabled {
            border: solid 1px var(--gp-disabled-color);
        }

    .gp-btn.gp-btn-solid {
        background-color: var(--gp-primary-color);
        color: #FFF;
    }

        .gp-btn.gp-btn-solid:hover:not(:disabled) {
            background-color: #0098cf;
        }

        .gp-btn.gp-btn-solid:active:not(:disabled) {
            box-shadow: inset 0px 0px 3px 0px #006C94;
        }

        .gp-btn.gp-btn-solid:disabled {
            background-color: var(--gp-disabled-color);
        }

.gp-section-options .gp-btn.gp-btn-solid:disabled {
    background-color: var(--gp-primary-color);
    cursor: not-allowed;
}

.gp-btn.gp-btn-grayscale {
    filter: grayscale(1);
    color: #595959;
}

    .gp-btn.gp-btn-grayscale.gp-btn-outline {
        border-color: #595959;
    }

    .gp-btn.gp-btn-grayscale.gp-btn-solid {
        background-color: #595959;
        color: #FFF;
    }

/* ----- INPUT & SELECT --------------------------------------------------------- */
.gp-input,
.gp-select {
    display: inline-flex;
    justify-content: space-between;
    height: var(--gp-normal-size);
    border: solid 1px var(--gp-gray-color);
    color: var(--gp-dark-color);
    border-radius: 4px;
    background-color: #FFF;
    box-sizing: border-box;
}

.gp-input {
    align-items: center;
    padding: 2px 10px;
}

.gp-select {
    padding: 6px 10px 0px;
}

    .gp-input:focus-within,
    .gp-select:focus-within {
        outline: none;
        border: solid 1px var(--gp-dark-color);
    }

.gp-input > input {
    padding: 0;
    outline: none;
    border: none;
    width: 100%;
    background-color: transparent;
    font-size: 14px;
}

    .gp-input > input::placeholder {
        color: var(--gp-disabled-color);
    }

.gp-input > .mat-icon {
    color: var(--gp-gray-color);
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
}

.gp-input.gp-input-error,
.gp-select.gp-select-error {
    border: solid var(--gp-danger-color) 1px;
}

    .gp-input.gp-input-error > .mat-icon {
        color: var(--gp-danger-color);
    }

.gp-input.gp-input-disabled,
.gp-select.gp-select-disabled {
    border-color: var(--gp-disabled-color);
    color: var(--gp-gray-color);
}

    .gp-input.gp-input-disabled > .mat-icon {
        color: var(--gp-disabled-color);
        cursor: default;
    }

.gp-input.gp-input-sm,
.gp-select.gp-select-sm {
    height: var(--gp-small-size);
}

.gp-select.gp-select-sm {
    padding: 2px 10px;
}

.gp-input input[type="number"]::-webkit-outer-spin-button,
.gp-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gp-input input[type="number"] {
    -moz-appearance: textfield;
}

/* ----- TABLE ------------------------------------------------------------------ */

/* DIV container that contains the Table */
.gp-table-container {
    width: 100%;
    overflow: auto;
}

.gp-table {
    width: 100%;
}

    .gp-table thead tr th,
    .gp-table tbody tr td {
        border: none;
    }

        .gp-table thead tr th,
        .gp-table thead tr th:first-of-type,
        .gp-table thead tr th:last-of-type,
        .gp-table tbody tr td,
        .gp-table tbody tr td:first-of-type,
        .gp-table tbody tr td:last-of-type,
        .gp-table tfoot tr td,
        .gp-table tfoot tr td:first-of-type,
        .gp-table tfoot tr td:last-of-type {
            padding: 0 4px;
        }

    .gp-table label {
        margin-bottom: 0;
        font-weight: normal;
    }

    /* SIZE of all the table Rows */
    .gp-table tr {
        height: var(--gp-normal-size) !important;
    }

    .gp-table.gp-table-xs tr {
        height: var(--gp-xsmall-size) !important;
    }

    .gp-table.gp-table-sm tr {
        height: var(--gp-small-size) !important;
    }

    /* TABLE Header */
    .gp-table thead tr {
        background-color: var(--gp-secondary-color);
    }

        .gp-table thead tr th {
            font-weight: bold;
            color: var(--gp-dark-color);
        }

    /* TABLE Body Rows */
    .gp-table:not(.gp-table-nohover) tbody tr:hover {
        background-color: var(--gp-hover-color);
        transition: all 0.2s;
    }

    /*FONT SIZE of all the elements inside the table*/
    .gp-table tr th,
    .gp-table tr td {
        font-size: 14px;
        line-height: 17px;
    }

    .gp-table.gp-table-sm tr th,
    .gp-table.gp-table-sm tr td {
        font-size: 13px;
        line-height: 14px;
    }

    .gp-table.gp-table-xs tr th,
    .gp-table.gp-table-xs tr td {
        font-size: 12px;
        line-height: 12px;
    }

    /* Child DIV inside a cell */
    .gp-table thead tr th > div,
    .gp-table tbody tr td > div {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* CELL alignment */
    .gp-table .gp-cell-align-center,
    .gp-table .gp-cell-align-center input {
        text-align: center;
    }

    .gp-table .gp-cell-align-end,
    .gp-table .gp-cell-align-end input {
        text-align: right;
    }

    .gp-table thead tr th.gp-cell-align-center > div,
    .gp-table tbody tr td.gp-cell-align-center > div {
        justify-content: center;
    }

    .gp-table thead tr th.gp-cell-align-end > div,
    .gp-table tbody tr td.gp-cell-align-end > div {
        justify-content: flex-end;
    }

    .gp-table thead tr th.gp-cell-align-space-between > div,
    .gp-table tbody tr td.gp-cell-align-space-between > div {
        justify-content: space-between;
    }

    /* TABLE Borders */
    .gp-table tfoot tr td {
        border: none;
    }

    .gp-table.gp-table-semi-border {
        border: solid 1px var(--gp-secondary-color);
        border-top: none;
    }

        .gp-table.gp-table-semi-border tbody tr td,
        .gp-table.gp-table-semi-border tfoot tr td {
            border-bottom: solid 1px var(--gp-secondary-color);
        }

    .gp-table.gp-table-border {
        border: solid 1px var(--gp-secondary-color);
        border-top: none;
    }

        .gp-table.gp-table-border tbody tr td,
        .gp-table.gp-table-border tfoot tr td {
            border: solid 1px var(--gp-secondary-color);
        }

    /* INPUT & SELECT inside a CELL */
    .gp-table input,
    .gp-table select {
        border: solid 1px var(--gp-gray-color) !important; /* Important because Site.css */
        border-radius: 3px;
        width: 100%;
        max-width: 100%;
        height: 22px;
    }

        .gp-table input:focus,
        .gp-table select:focus {
            border: solid 1px var(--gp-primary-color) !important; /* Important because Site.css */
            outline: none;
        }

    .gp-table.gp-table-sm input,
    .gp-table.gp-table-sm select {
        height: 20px;
        line-height: 20px;
    }

    .gp-table.gp-table-xs input,
    .gp-table.gp-table-xs select {
        height: 18px;
        line-height: 18px;
    }

    .gp-table input[type="number"]::-webkit-outer-spin-button,
    .gp-table input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .gp-table input[type="number"] {
        -moz-appearance: textfield;
    }

    .gp-table select {
        padding-left: 2px;
    }

    /* SIZE of BUTTONS inside the table */
    .gp-table .gp-btn {
        height: var(--gp-small-size);
    }

    .gp-table.gp-table-sm .gp-btn {
        height: var(--gp-xsmall-size);
    }

    .gp-table.gp-table-xs .gp-btn {
        height: calc(var(--gp-xsmall-size) - 4px);
    }

    .gp-table .gp-btn.gp-btn-icon {
        height: var(--gp-small-size);
        width: var(--gp-small-size);
    }

    .gp-table.gp-table-sm .gp-btn.gp-btn-icon {
        height: var(--gp-xsmall-size);
        width: var(--gp-xsmall-size);
    }

    .gp-table.gp-table-xs .gp-btn.gp-btn-icon {
        height: calc(var(--gp-xsmall-size) - 4px);
        width: calc(var(--gp-xsmall-size) - 4px);
    }

    .gp-table.gp-table-sm .gp-btn.gp-btn-icon .mat-icon {
        height: calc(var(--gp-xsmall-size) - 2px);
        width: calc(var(--gp-xsmall-size) - 2px);
        font-size: calc(var(--gp-xsmall-size) - 2px);
    }

    .gp-table.gp-table-xs .gp-btn.gp-btn-icon .mat-icon {
        height: calc(var(--gp-xsmall-size) - 4px);
        width: calc(var(--gp-xsmall-size) - 4px);
        font-size: calc(var(--gp-xsmall-size) - 4px);
    }

    /* Selected ROWS */
    .gp-table .gp-row-selected,
    .gp-table .gp-row-selected:hover {
        background-color: var(--gp-selected-color) !important;
        user-select: none;
    }

.gp-text-ellipsis,
.gp-text-ellipsis * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ----- ANGULAR MATERIAL ------------------------------------------------------- */

/* mat-checkbox */
.mat-checkbox .mat-checkbox-layout {
    align-items: center;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled) .mat-checkbox-background,
.mat-checkbox-indeterminate:not(.mat-checkbox-disabled) .mat-checkbox-background {
    background-color: var(--gp-primary-color) !important;
}

/* mat-radio-button */
.mat-radio-button.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle {
    border-color: var(--gp-primary-color) !important;
}

.mat-radio-button:not(.mat-radio-disabled) .mat-radio-inner-circle,
.mat-radio-button:not(.mat-radio-disabled) .mat-radio-ripple .mat-ripple-element {
    background-color: var(--gp-primary-color) !important;
}

/* mat-dialog-container */
.gp-dialog .mat-dialog-container {
    padding: 0 !important;
}

.cdk-overlay-container {
    overflow: auto !important;
}

/* TODO: Review these styles */
/* ========== Text Input with an Icon (USED IN USERS & MULTISELECT, THIS WILL BE REMOVED) ========== */
.outline-icon-input {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 2px 10px;
    background-color: #FFF;
    color: var(--gp-dark-color);
    border: solid 1px var(--gp-gray-color);
    border-radius: 4px;
    box-sizing: border-box;
}

    .outline-icon-input > input {
        padding: 0;
        outline: none;
        border: none;
        width: 100%;
        background-color: transparent;
        font-size: 14px;
    }

        .outline-icon-input > input::placeholder {
            color: var(--gp-disabled-color);
        }

    .outline-icon-input > .mat-icon {
        color: var(--gp-gray-color);
        display: inline;
        position: relative;
        margin: 0;
        padding: 0;
    }

.outline-icon-input-disabled {
    border-color: var(--gp-disabled-color);
}

    .outline-icon-input-disabled > .mat-icon {
        color: var(--gp-disabled-color);
    }


/* ========== Form Control Input (input, select, textarea) ========== */
.gp-form-control {
    display: inline-block;
    width: 100%;
    max-width: none;
    margin-bottom: 10px;
    padding: 0px 3px;
    color: var(--gp-dark-color);
    border-color: var(--gp-gray-color);
    background-color: #FFF;
}

    .gp-form-control::placeholder {
        color: var(--gp-disabled-color);
    }

    .gp-form-control:disabled {
        color: var(--gp-gray-color);
        border-color: var(--gp-disabled-color) !important;
        background-color: #FFF !important;
    }

    .gp-form-control.ng-touched.ng-pristine.ng-invalid {
        border-color: var(--gp-danger-color) !important;
    }

input.gp-form-control,
select.gp-form-control {
    height: 25px;
    min-height: 25px;
}

textarea.gp-form-control {
    min-height: 25px;
    padding: 3px;
}

/* ========== User Modal Styles ========== */

button:focus {
    outline: none !important;
}

.modal-title, .user-modal-global-h4 {
    font-weight: 700;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px !important;
}

.subtitle {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 !important;
    font-weight: 700;
    font-size: 14px !important;
}

.user-modal-global-span {
    font-size: 14px !important;
}

.radio-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-modal-global-row {
    display: block !important;
}

.borde {
    border: solid red 1px;
}

.bordeb {
    border: solid blue 1px;
}