/* H o r i z o n t a l   N a v */
.pz-l-dv2-nav-container {
    position: relative;
    display: grid;
    grid-template-columns: 950px auto 400px 150px;
    grid-template-areas: "dv2lnks-left . dv2lnks-right companylogo";
    margin-bottom: 4px;
    background-color: var(--white);
}

.pz-dv2-navbar-left {
    grid-area: dv2lnks-left;
}

.pz-dv2-navbar-right {
    grid-area: dv2lnks-right;
}

.pz-dv2-horiz-nav-text {
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-20-25) var(--prism-font);
    text-align: left;
    color: var(--blue-0-dark);
    margin-bottom: -4px;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 50px;
}

.pz-dv2-horiz-nav-divider {
    font: var(--google-font-weight-regular) var(--fontsize-lineheight-30-38) var(--prism-font);
    color: var(--grey-light);
}

.dv2 .link-textcolor-active {
    color: var(--blue-0-dark) !important;
    cursor: pointer;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    line-height: 58px;
    border-bottom-color: var(--blue-0-dark);
}

.dv2 .link-textcolor-inactive:hover {
    font: var(--google-font-weight-bold) var(--fontsize-lineheight-20-25) var(--prism-font);
}

.dv2 .link-textcolor-inactive {
    color: var(--blue-1-medium) !important;
    cursor: pointer;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    line-height: 58px;
}


.pz-dv2-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

    .pz-dv2-tooltip:hover .pz-dv2-tooltiptext,
    .pz-dv2-tooltip:hover .pz-dv2-tooltiptext .pz-dv2-tooltiptext-inplace {
        visibility: visible;
    }

    .pz-dv2-tooltip .pz-dv2-tooltiptext {
        visibility: hidden;
        background-color: var(--black);
        color: var(--white);
        text-align: center;
        padding: 3px;
        position: absolute;
        z-index: 1;
        border-radius: 4px;
        width: 200px;
        font: var(--google-font-weight-semibold) var(--fontsize-lineheight-14-18) var(--prism-font);
        margin-left: -100px;
        bottom: 100%;
        left: 50%;
    }


    .pz-dv2-tooltip .pz-dv2-tooltiptext-inplace {
        width: 140px;
        font: var(--google-font-weight-semibold) var(--fontsize-lineheight-12-15) var(--prism-font);
        margin-left: auto;
        bottom: auto;
        left: auto;
    }



/* Filter Row Content */
.pz-l-dv2-filters-container {
    position: relative;
    display: grid;
    background-color: var(--blue-3-pale);
    grid-template-columns: auto auto auto;
    grid-template-areas: "dsh-filters-left dsh-filters-right";
    /*margin-top: -1px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--blue-0-dark);
    margin-left: var(--site-margin-width-negative);
    margin-right: var(--site-margin-width-negative);
    padding-left: var(--site-margin-width);
}

.pz-dv2-filters-content-left {
    display: flex;
    grid-area: dsh-filters-left;
    align-content: flex-start;
    grid-column-gap: 12px;
}

.pz-dv2-filters-content-right {
    display: flex;
    grid-area: dsh-filters-right;
    align-content: flex-end;
    grid-column-gap: 13px;
}

.pz-dv2-filters-text {
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-20-25) var(--prism-font);
    text-align: left;
    color: var(--blue-0-dark);
    text-transform: uppercase;
    cursor: pointer;
    vertical-align: middle;
    padding-top: 4px;
}

.pz-dv2-filters-dropdown {
    border-bottom: 1px solid var(--blue-1-medium);
    border-radius: 0px;
}

.dropdown-combo-transparent.pz-dv2-filters-dropdown .k-select .k-icon::before {
    color: var(--blue-1-medium);
}

.dropdown-combo-transparent.pz-dv2-filters-dropdown.k-picker:hover,
.dropdown-combo-transparent.pz-dv2-filters-dropdown.k-picker:focus {
    background-color: var(--white);
    border-radius: 6px;
}

.pz-dv2-filters-textbox {
    outline: none;
    padding-left: 6px;
    background-color: transparent;
    border-bottom-width: 1px;
    border-color: transparent;
    border-bottom-color: var(--blue-1-medium);
    border-radius: 0px;
    color: var(--blue-1-medium);
    font: var(--google-font-weight-regular) var(--fontsize-lineheight-16-20) var(--prism-font);
    top: 9px;
    text-transform: uppercase;
}

    .pz-dv2-filters-textbox:focus {
        background-color: var(--white);
        border-radius: 6px;
        border: 3px solid var(--grey-border-80);
    }

.pz-dv2-filters-search-icon {
    margin-top: 10px;
    height: 25px;
    width: 25px;
    margin-right: -50px;
}

/* Main Dashboard Content Grid Containers */
.pz-l-dv2-content {
    width: var(--default-content-width);
}

.pz-l-dv2-content-container {
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 25px;
    grid-auto-rows: auto;
    grid-row-gap: 25px;
}

.pz-l-dv2-task-tiles-container {
    display: grid;
    padding-top: 20px;
    grid-template-columns: repeat(6, 250px);
    grid-column-gap: 25px;
}

.pz-l-dv2-task-summary-container {
    display: grid;
    grid-column: 1;
}

.pz-l-dv2-task-details-container {
    display: grid;
    grid-column: 2 / span 2;
}

.pz-dv2-complete-task {
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-14-18) var(--prism-font);
    color: var(--blue-1-medium);
    cursor: pointer;
    padding-right: 20px;
}

/* Task tiles */
.pz-dv2-tile {
    display: grid;
    border-radius: 6px;
    border: 1px solid var(--grey-border-80);
    background-clip: content-box;
    padding: 6px;
    height: 109px;
    background-color: var(--white);
    grid-template-areas: 'tile-txt tile-nbr';
    grid-template-columns: auto auto;
    color: var(--grey);
}

    .pz-dv2-tile.selected {
        background-color: var(--blue-3-pale);
        color: var(--black);
    }

    .pz-dv2-tile.disabled {
        background-color: var(--white);
        color: var(--black);
        border: 1px solid var(--grey-border-80);
    }

.pz-dv2-tile-content-text {
    grid-area: tile-txt;
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-16-20) var(--prism-font);
    text-transform: uppercase;
}

.pz-dv2-tile-content-number {
    grid-area: tile-nbr;
    font: var(--google-font-weight-bold) var(--fontsize-lineheight-30-38) var(--prism-font);
    text-transform: uppercase;
    align-self: center;
    color: var(--black);
}

    .pz-dv2-tile-content-number.pz-red {
        color: var(--red);
    }

/* Cards */
.pz-dv2-card {
    display: grid;
    border-radius: 6px;
    border: 1px solid var(--grey-border-80);
    background-clip: content-box;
    padding: 6px;
}

.pz-dv2-card-header {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: 'card-hdr-text . card-hdr-button';
    height: 60px;
    background-color: var(--grey-background)
}

.pz-dv2-card-header-text {
    display: grid;
    grid-area: card-hdr-text;
    color: var(--blue-0-dark);
    font: var(--google-font-weight-bold) var(--fontsize-lineheight-30-38) var(--prism-font);
    text-transform: capitalize;
    padding: 10px;
}

.pz-dv2-card-header-button-container {
    display: flex;
    grid-area: card-hdr-button;
    justify-content: right;
    justify-self: right;
    align-self: center;
    cursor: pointer;
}

.pz-dv2-card-header-button {
    border-radius: 6px;
    border: 1px solid var(--grey-border-80);
    background-color: var(--white);
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-12-15) var(--prism-font);
    text-transform: uppercase;
    text-align: center;
    padding: 4px 10px 4px 10px;
    margin-right: 10px;
}

    .pz-dv2-card-header-button.selected {
        background-color: var(--blue-3-pale);
    }

    .pz-dv2-card-header-button.refresh {
        padding: 7px 10px 3px 10px;
    }

.pz-dv2-card-header-button-text {
    color: var(--grey);
    padding: 3px;
}

    .pz-dv2-card-header-button-text.pz-red {
        color: var(--red);
    }

.pz-dv2-card-header-button-number {
    color: var(--black);
    padding-left: 2px;
}

    .pz-dv2-card-header-button-number.pz-red {
        color: var(--red);
    }

.pz-dv2-card-content {
    display: grid;
    background-color: var(--white);
    text-transform: none;
}

    .pz-dv2-card-content.pad {
        padding: 10px;
    }

    .pz-dv2-card-content.margintop {
        margin-top: 15px;
        padding-top: 15px;
    }

    .pz-dv2-card-content.details {
        grid-row: 2;
        grid-column: 1;
    }

    .pz-dv2-card-content.notes-row {
        height: 580px;
    }

.pz-notes-content-top {
    padding-bottom: 550px;
}

.pz-details-card-loader {
    text-align: center;
    height: 400px;
    padding: 6px;
}

/* Misc */
.pz-details-unread-note-link-label {
    font: var(--google-font-weight-regular) var(--fontsize-lineheight-12-15) var(--prism-font);
    color: var(--black-opacity);
}
    .pz-details-unread-note-link-label.clickable {
        cursor: pointer;
    }

/* Summary grid styling */
.pz-task-summary-grid-container {
    display: block;
    vertical-align: top;
}

.pz-task-summary-grid {
    display: grid;
    padding: 10px;
    grid-template-columns: 170px repeat(4, 80px);
    grid-template-rows: 30px repeat(6, 50px);
}

.pz-dv2-summary-tasks-row-label {
    color: var(--black);
    font: var(--google-font-weight-bold) var(--fontsize-lineheight-14-18) var(--prism-font);
    text-transform: uppercase;
}

.pz-dv2-summary-tasks-col-label {
    color: var(--blue-0-dark);
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-16-20) var(--prism-font);
    margin-top: 10px;
    margin-left: 5px;
}

.pz-summary-grid-button {
    font: var(--google-font-weight-reg) var(--fontsize-lineheight-16-20) var(--prism-font);
    border: none;
    background-color: var(--white);
    color: var(--black);
    border-radius: 4px;
    width: 40px;
    height: 40px;
}

    .pz-summary-grid-button.pz-black {
        color: var(--black);
    }

    .pz-summary-grid-button.pz-red {
        color: var(--red);
        font: var(--google-font-weight-semibold) var(--fontsize-lineheight-18-23) var(--prism-font);
    }

    .pz-summary-grid-button.selected,
    .pz-summary-grid-button:active,
    .pz-summary-grid-button:target,
    .pz-summary-grid-button:focus {
        background-color: var(--blue-3-pale);
        box-shadow: none;
    }

.pz-summary-split-container {
    display: grid;
    grid-template-columns: auto auto 35px;
    margin: 0px 15px 10px 15px;
}

.pz-summary-refreshed-label {
    font: var(--google-font-weight-regular) var(--fontsize-lineheight-14-18) var(--prism-font);
    color: var(--grey);
    padding-top: 4px;
    padding-right: 10px;
    font-style: italic;
}

.pz-summary-treeview {
    margin-top: 5px;
    overflow-y: scroll;
    height: 400px !important;
}

    .pz-summary-treeview .k-treeview .k-top, .k-treeview .k-mid, .k-treeview .k-bot {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .pz-summary-treeview .k-icon {
        color: var(--blue-1-medium);
    }

/* The following class also modifies the treeview in the Service Order Details left nav */
/* It removes the outline from the selected item in the treeview */

.k-treeview .k-mid .k-state-focused {
    box-shadow: none;
}

.pz-summary-orders-grid-hdr {
    display: grid;
    margin-top: 7px;
    margin-left: 30px;
    color: var(--black);
    font: var(--google-font-weight-bold) var(--fontsize-lineheight-14-18) var(--prism-font);
    text-transform: uppercase;
    grid-template-columns: 300px 40px 40px;
    grid-column-gap: 25px;
}

.pz-summary-orders-group-grid-row {
    display: grid;
    grid-template-columns: 300px 40px 40px;
    grid-column-gap: 25px;
}

.pz-summary-orders-child-grid-row {
    display: grid;
    grid-template-columns: 284px 40px 40px;
    grid-column-gap: 25px;
}

/* Details grid styling */
.dv2.details .k-grid-header .k-header {
    color: var(--blue-0-dark);
    font: var(--google-font-weight-semibold) var(--fontsize-lineheight-16-20) var(--prism-font);
    text-transform: capitalize;
}

div.details.dv2 td {
    font-size: 0.875rem;
    background-color: white;
}

div.bottomborder.dv2 table td {
    border-bottom: 1px solid var(--grey-light);
    border-top: none;
    border-left: none;
    border-right: none;
}

div.bottomborder.dv2 table th {
    border: none;
}

.dv2 .k-grid-content td {
    vertical-align: top;
}

.srs .k-grid-header .k-header > .k-link,
.dv2 .k-grid-header .k-header > .k-link {
    padding-right: 0px;
    overflow: visible;
    text-overflow: unset;
}

    .srs .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-desc-sm,
    .srs .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-asc-sm,
    .dv2 .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-desc-sm,
    .dv2 .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-asc-sm {
        margin-left: 0px;
    }


div.pz-dashboard-chevron {
    background-image: url('../assets/Icon chevron right.svg');
    background-position: center;
    background-repeat: no-repeat;
    height: 20px;
}

.dv2-task-details-icon-col {
    display: grid;
    margin-left: -8px;
}
/* Loader on Landing page*/
.pz-dashboard-details-loading-panel-wrapper {
    grid-row: 2;
    grid-column: 1 / 2;
    z-index: 5;
    display: flex;
    justify-content: center;
    text-align: center;
    opacity: 0.7;
    background-color: lightgray;
}

.pz-dashboard-notes-loading-panel-wrapper {
    grid-row: 3;
    grid-column: 1;
    z-index: 5;
    display: flex;
    justify-content: center;
    text-align: center;
    opacity: 0.7;
    background-color: lightgray;
}

.pz-dashboard-full-loading-panel-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
}

/* Notes grid styling */
.pz-dashboard-notes-grid .k-grid-header {
    content: ' ';
    height: 1px;
    background-color: transparent;
}