/*
	This file is for core styles that are universal across all clients,
	but can be customzied if needed, but there is no reason for these to
	go into Site.AssetFile, which have complicated deployment.
*/

:root {
    --background-color: #ECF0F3;
}

[v-cloak] {
    display: none;
}

.nomad-table {
    display: flex;
    flex-direction: column;
    padding: 20px 0px;
}

.nomad-table .nomad-table-header,
.nomad-table .nomad-table-row,
.nomad-table .nomad-table-full-row {
    display: grid;
    grid-template-rows: 1fr;
    grid-gap: 10px;
    padding: 10px;
    min-height: 30px;
    align-items: center;
}

.nomad-table-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 20px 0px;
}

.nomad-table .nomad-table-header {
    color: #555;
    background-color: #c4c4c4;
}

.nomad-table.nomad-sub-table {
    padding: 0px;
}

.nomad-table.nomad-sub-table .nomad-table-header {
    background-color: #c4c4c4;
}

.nomad-table .nomad-table-row {
    background-color: white;
}

.nomad-table .nomad-table-row:nth-child(2n) {
    background-color: #f8f8f8;
}

.nomad-table-2 .nomad-table-header,
.nomad-table-2 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2';
    grid-template-columns: auto auto;
}

.nomad-table-3 .nomad-table-header,
.nomad-table-3 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2 cell-3';
    grid-template-columns: auto auto auto;
}

.nomad-table-4 .nomad-table-header,
.nomad-table-4 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2 cell-3 cell-4';
    grid-template-columns: auto auto auto auto;
}

.nomad-table-5 .nomad-table-header,
.nomad-table-5 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2 cell-3 cell-4 cell-5';
    grid-template-columns: auto auto auto auto auto;
}
.nomad-table-6 .nomad-table-header,
.nomad-table-6 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2 cell-3 cell-4 cell-5 cell-6';
    grid-template-columns: auto auto auto auto auto auto;
}

.nomad-table-7 .nomad-table-header,
.nomad-table-7 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2 cell-3 cell-4 cell-5 cell-6 cell-7';
    grid-template-columns: auto auto auto auto auto auto auto;
}
.nomad-table-8 .nomad-table-header,
.nomad-table-8 .nomad-table-row {
    grid-template-areas: 'cell-1 cell-2 cell-3 cell-4 cell-5 cell-6 cell-7 cell-8';
    grid-template-columns: auto auto auto auto auto auto auto auto;
}

.nomad-table .nomad-table-full-row {
    grid-template-areas: 'cell-1';
    grid-template-columns: auto;
}

.cell-1 { grid-area: cell-1; }
.cell-2 { grid-area: cell-2; }
.cell-3 { grid-area: cell-3; }
.cell-4 { grid-area: cell-4; }
.cell-5 { grid-area: cell-5; }
.cell-6 { grid-area: cell-6; }
.cell-7 { grid-area: cell-7; }
.cell-8 { grid-area: cell-8; }

.clickLink,
.v-list-item__content {
    cursor: pointer;
}

.nomad-modal-dialog {
    width: 50%;
    min-width: 500px;
    min-height: 500px;
    border: 1px solid #929292;
}

.nomad-modal-dialog .nomad-modal-dialog-header {
    display: grid;
    grid-template-columns: auto 30px;
}

.nomad-modal-dialog-title h4 {
    align-self: start;
    margin: 0px;
}

.flex-right {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.nomad-pagination {
    display: flex;
    font-size: 10px;
    font-weight: bold;
    color: #5f5f5f;
}

.nomad-pagination .summary
{
    align-self: center;
    margin-right: 12px;
    font-size: 10px;
}

.nomad-pagination .pagination {
    display: flex;
    gap: 2px;
    align-self: center;
    margin: 0;
}

.nomad-pagination.nomad-pagination-vertical {
    flex-direction: column;
}

.nomad-pagination.nomad-pagination-vertical .summary {
    align-self: start;
}

.nomad-pagination ul {
    list-style: none;
}

.nomad-pagination ul li {
    border: solid 1px #cfcfcf;
    border-radius: 4px;
}
    
.nomad-pagination ul li:not(.active)
{
    background-color: #efefef;
}

.nomad-pagination ul li:hover:not(.disabled) {
    background-color: #cfcfcf;
}

.nomad-pagination ul li a {
    color: #5f5f5f;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
}

.nomad-pagination ul li a:hover {
    border-top: 1px solid var(--background-color);
    text-decoration: none;
}