/*******************************************************
 *******************************************************
 ***************     THEME STYLING     *****************
 *******************************************************
 *******************************************************/
 
 /*************** GENERAL COLORS - NOT TOUCH *************/
.neu-container,
.neu-dropdown,
.neu-button,
.neu-input,
.neu-expansion-panel,
.neu-table thead tr th,
.neu-paginator-actions,
.neu-chip {
    background-image: linear-gradient(135deg, #E5E6EC -50%, #F2F3F6 120%);
    border-radius: 16px;
    box-shadow: -4px -4px 20px #FFF;
    position: relative;
}

.neu-container::before,
.neu-dropdown::before,
.neu-button::before,
.neu-input::before,
.neu-expansion-panel::after,
.neu-table thead tr th::after,
.neu-paginator-actions::before,
.neu-chip::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    box-shadow: 3px 3px 20px rgba(36, 65, 93, 0.3);
    border-radius: 16px;
    pointer-events: none;
}

.neu-container.neu-pressed,
neu-container.neu-pressed .neu-container,
.neu-dropdown.neu-pressed,
.neu-button:active,
neu-button.neu-pressed .neu-button,
.neu-input,
.neu-expansion-panel.neu-pressed,
.neu-table thead tr th.sortable:active,
.neu-paginator-actions .btn:disabled,
.neu-paginator-actions .btn:active {
    box-shadow: 3px 3px 20px rgba(88, 108, 138, 0.5) inset;
}

.neu-container.neu-pressed::before,
neu-container.neu-pressed .neu-container::before,
.neu-dropdown.neu-pressed::before,
.neu-button:active::before,
neu-button.neu-pressed .neu-button::before,
.neu-input::before,
.neu-expansion-panel.neu-pressed::after,
.neu-table thead tr th.sortable:active::after,
.neu-paginator-actions .btn:disabled::before,
.neu-paginator-actions .btn:active::before {
    box-shadow: -4px -4px 20px #FFF inset;
}


/* MODALITY SMALL */
.neu-small, .neu-small::before,
.neu-dropdown, .neu-dropdown::before,
.neu-button, .neu-button::before,
.neu-input, .neu-input::before,
.neu-paginator-actions, .neu-paginator-actions::before {
    border-radius: 8px !important;
}

.neu-small.neu-pressed,
.neu-dropdown.neu-pressed,
.neu-button:active,
neu-button.neu-pressed .neu-button,
.neu-input,
.neu-paginator-actions .btn:disabled,
.neu-paginator-actions .btn:active {
    box-shadow: 1px 1px 12px rgba(88, 108, 138, 0.5) inset;
}

.neu-small.neu-pressed::before,
.neu-dropdown.neu-pressed::before,
.neu-button:active::before,
neu-button.neu-pressed .neu-button::before,
.neu-input::before,
.neu-paginator-actions .btn:disabled::before,
.neu-paginator-actions .btn:active::before  {
    box-shadow: -3px -3px 13px #FFF inset;
}


/*************************************
            TABLE
*************************************/
.neu-table {
    display: block;
    width: calc(100% + 40px);
    border-collapse: separate;
    border-spacing: 20px 0;
    margin: 0px -20px;
    text-align: left;
}

.neu-table thead tr th,
.neu-table tbody tr th,
.neu-table tbody tr td {
    padding: 20px;
    vertical-align: middle;
}

.neu-table tbody tr:first-child td,
.neu-table tbody tr:first-child th {
    padding-top: 40px;
}

.neu-table thead tr {
    padding-bottom: 40px;
}

.neu-table tr .expand {
    width: 99%;
}

.neu-table thead tr th,
.neu-table tbody tr th {
    font-weight: 500;
    position: relative;
}

.neu-table thead tr th.sortable {
    cursor: pointer;
    padding-right: 50px;
}

.neu-table thead tr th.sortable:before {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}