.row, .col {
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
}



label {
    font-weight: 600;
    font-size: 14px;
}

.address-block {
    white-space: pre-wrap;
    user-select: text;
}

.red-number {
    color: red;
}

.e-tooltip {
    grid-row: 2;
    user-select: none;
}

.e-tip-content {
    user-select: none;
}


.dialog-content .row {
    --bs-gutter-x: 0;
}

.input-readonly {
    border: none;
}

.hide {
    display: none;
} 





/* ========================================================  */
/* ==================== NAVIGATION ========================  */
/* ========================================================  */


.side-navbar {
    overflow: hidden;
    position: relative;
}



/*small screen*/
@media (max-width: 639.98px) {

    .side-navbar {
        width: 50px;
        padding-right: 10px;
    }

    .side-navbar-text {
        display: none;
    }


    .sb-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
    }
}

/*larger screen*/
@media (min-width: 640px) {

    .side-navbar {
        width: 150px;
    }

    .side-navbar-text {
        visibility: visible;
        margin-left: 10px;
        margin-right: 10x;
    }

    .sb-item {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-left: 10px
    }
}




.side-navbar .nav-item {
    font-size: 1rem;
    padding-bottom: 0.5rem;
}

    .side-navbar .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .side-navbar .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .side-navbar .nav-item .nav-link {
        color: white;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        align-items: center;
        line-height: 3rem;
        fill: white;
        stroke: white;
        stroke-width: .75px;
    }

    .side-navbar .nav-item a.active {
        background-color: #3399FF;
        color: white;
    }

    .side-navbar .nav-item .nav-link:hover {
        background-color: gray;
        color: white;
    }




















/* ========================================================  */
/* ==================== APP LAYOUT ========================  */
/* ========================================================  */


.app-container {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: black;
    padding: 0;
    margin: 0;
    overflow: hidden;
}



.app-nav {
    background-color: #333333;
    /*overflow: hidden;*/
    height: calc(100vh - 128px);
}



@media (min-width: 640px) {
    .app-nav {
        width: 140px;
    }
}

@media (max-width: 639.9px) {
    .app-nav {
        width: 50px;
    }
}


.app-content {
    background-color: white;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 128px);
    width: 100%;
    padding: 0;
    margin: 0;
}

.not-authorized-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
}

.not-authorized-text {
    margin-top: 300px;
    font-size: 40px;
    font-weight: bold;
}










/* ========================================================  */
/* ====================== CARD ============================  */
/* ========================================================  */


.card {
    padding: 5px;
    margin-top: 0px;
}

.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 0px;
}

.card-header-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    position: relative;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    align-content: center;
    justify-content: center;
    vertical-align: middle;
    margin-bottom: 10px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-top: 10px;
}

.card-header-title {
    width: 100%;
}

.card-header-btns {
    display: grid;
    direction: rtl;
    grid-template-columns: repeat(4, 40px);
    gap: 5px;
    height: 100%;
}

.card-content {
    user-select: none;
}




/* ========================================================  */
/* ====================== PAGES ===========================  */
/* ========================================================  */

.app-page-container {
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-page {
    display: block;
    position: page;
}

.app-page-with-footer {
    display: block;
    position: page;
    margin-bottom: 80px;
}

.app-page-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    position: relative;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    align-content: center;
    justify-content: center;
    vertical-align: middle;
    margin-bottom: 10px;
    padding-bottom: 0px;
}

.app-page-header-title {
    height: 100%;
}


.app-page-header h4 {
    color: var(--rtblue);
    text-align: left;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
    font-weight: 500;
    height: 100%;
    padding: 0;
    margin: 0;
}


.app-page-header-btns {
    display: grid;
    direction: rtl;
    grid-template-columns: repeat(4, 40px);
    gap: 5px;
    height: 100%;
}


.app-page-edit-footer {
    display: block;
    height: 100px;
    border-top-style: solid;
    border-width: thin;
    border-color: lightgray !important;
    background-color: whitesmoke;
    margin-bottom: -1rem;
    overflow-x: hidden;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    padding-right: 30px;
    padding-bottom: 0;
    padding-top: 20px;
    overflow: hidden;
    text-align: right;
}











/* ========================================================  */
/* ================== MODAL POPUP =========================  */
/* ========================================================  */

.modal-popup-container .e-dialog .e-dlg-header-content {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 20px;
    padding-bottom: 0px;
    margin: 0;
    position: relative;
    display: block;
    border: none;
}


.modal-popup-container .header-container .header-text-container {
    padding-left: 20px;
    padding-right: 20px;
}

.modal-popup-container .e-dialog .e-dlg-header-content .page-close-btn-x {
    position: absolute;
    right: 20px;
    top: 15px;
}

.modal-popup-container .e-dlg-content {
    padding-bottom: 0px;
}










/* ========================================================  */
/* ===================== DIALOGS ==========================  */
/* ========================================================  */



.dialog-page {
    display: block;
    position: page;
}


    .dialog-page .e-dlg-header-content {
        padding: 15px;
        margin: 0;
        border: none;
        padding-bottom: 0;
        margin-bottom: 5px;
    }

.dialog-header-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    position: relative;
    width: 100%;
    height: 30px;
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    align-content: center;
    justify-content: center;
    vertical-align: middle;
    padding-bottom: 0px;
}




.e-dlg-header-content {
    padding: 0;
}

    .e-dlg-header-content .e-dlg-header {
        width: 100%;
    }

.dialog-header-title {
    width: 100%;
}

    .dialog-header-title h4 {
        color: var(--rtblue);
        text-align: left;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
        font-weight: 500;
        height: 100%;
        padding: 0;
        margin: 0;
        font-size: calc(1.275rem + .3vw)
    }

.dialog-header-btns {
    display: grid;
    direction: rtl;
    grid-template-columns: repeat(2, 40px);
    gap: 5px;
    height: 100%;
    align-content: center;
    vertical-align: middle;
}

.dialog-page .e-dlg-content {
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
    user-select: none;
}

.dialog-page .e-footer-content {
    padding: 0;
    margin: 0;
    border: none;
}

.dialog-footer {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-top-style: solid;
    border-width: thin;
    border-color: lightgray !important;
    background-color: whitesmoke;
    margin: 0;
    overflow-x: hidden;
    bottom: 0px;
    right: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-top: 20px;
    overflow: hidden;
    text-align: right;
    border-end-end-radius: 6px;
    height: 80px;
    user-select: none;
}

.dialog-footer-left {
    text-align: left;
    width: 100%;
}

.dialog-footer-right {
    text-align: right;
    width: 100%;
}

.address-grid-container .e-columnheader {
    display: none;
}

.public-checkbox {
    position: absolute;
    right: 5px;
    top: 0;
    color: green;
    width: 170px;
    text-align: right;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    display: none;
}

.e-schedule-dialog .e-dlg-header-content {
    border: none;
}

.e-dialog .e-footer-content {
    padding: 0;
    border: none;
}
















/* ========================================================  */
/* ==================== BUTTONS ===========================  */
/* ========================================================  */
.btn:disabled {
    background-color: lightgray;
    border-color: gray;
}

.btn:hover, .btn-primary:hover {
    background-color: #303030;
    color: whitesmoke;
}

.header-btn * {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--rtgray) !important;
    /*fill: var(--rtgray) !important;*/
    stroke: none;
    position: relative;
    top: 0px;
    right: 0px;
}

.header-btn:hover * {
    color: var(--rtblue) !important;
    /*   fill: var(--rtblue) !important;*/
    cursor: pointer;
}

.popup-close-btn-x {
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 25px;
    top: 20px;
    stroke: var(--rtgray);
    stroke-width: .4px;
}

    .popup-close-btn-x:hover {
        stroke-width: .7px !important;
        stroke: var(--rtblue) !important;
        cursor: pointer;
    }



.icon-btn {
    position: absolute;
    color: var(--rtgray);
    height: 25px;
    width: 25px;
}

    .icon-btn:hover {
        color: var(--rtblue);
        cursor: pointer;
    }

.edit-save-btn {
    background-color: var(--rtblue);
    color: white;
    border: solid thin var(--rtgray);
    width: 80px;
}

    .edit-save-btn:hover {
        background-color: var(--rtgray);
        color: white;
        border: solid thin var(--rtblue);
    }


/*.btn-reminder {
    display: block;
    position: absolute;
    right: 50px;
    top: 0px;
    height: 30px;
    width: 30px;
    fill: var(--rtgray);
    stroke: var(--rtgray);
    stroke-width: 3px;
}

    .btn-reminder:hover {
        fill: var(--rtblue);
        stroke: var(--rtblue);
        cursor: pointer;
    }*/

.header-btn-blink * {
    animation: blinker .75s linear infinite;
    color: red !important;
    /*fill: red !important;*/
    /*stroke: red !important;*/
}

.header-btn-blink:hover * {
    animation: blinker .75s linear infinite;
    color: red !important;
    /*fill: red !important;*/
    /*stroke: red !important;*/
}

@keyframes blinker {
    80% {
        opacity: 0;
    }
}

/*lowered to stop blocking the context menu of the datagrid in the schedule section of the job detail control */
.offcanvas {
    z-index: 900;
}

/*lowered to stop blocking the context menu of the datagrid in the schedule section of the job detail control */
.offcanvas-backdrop {
    z-index: 800;
}


.ev-lock-btn-container {
    text-align: right;
    padding-right: 17px;
}

    .ev-lock-btn-container:hover {
        cursor: pointer;
    }

.trash-icon-btn {
    position: absolute;
    color: var(--rtgray);
    fill: var(--rtgray);
    stroke: none;
    height: 25px;
    width: 25px;
}

    .trash-icon-btn:hover {
        stroke: none;
        color: var(--rtblue);
        fill: var(--rtblue);
    }

.link-btn-container {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 28px;
    padding: 0 !important;
    margin: 0;
    background-color: none;
    align-content: start;
    align-items: start;
    text-align: start;
    justify-content: start;
}

.quicklink-btn:hover {
    cursor: pointer;
}

.add-change-location-btn {
    background-color: var(--rtblue);
    color: white;
    border: solid thin var(--rtgray);
    width: 150px;
}


    .add-change-location-btn:hover {
        background-color: var(--rtgray);
        color: white;
        border: solid thin var(--rtblue);
    }








/* ========================================================  */
/* ====================== MISC ============================  */
/* ========================================================  */

.e-tooltip-wrap .e-tip-content {
    word-break: normal;
}






/* ========================================================  */
/* =================== DATA GRIDS =========================  */
/* ========================================================  */

/*This stripes the cells in the syncfusion grid */
.e-grid .e-altrow {
    background-color: floralwhite;
}


    /*This blocks the blue border that appears around cells in the syncfusion grid */
    .e-grid .e-altrow .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
        box-shadow: none !important;
    }

.e-grid td.e-rowcell.e-focus.e-focused {
    box-shadow: none;
}

.e-grid .e-rowcell {
    line-height: 20px;
}

.e-rowcell:hover {
    cursor: pointer;
}

.e-grid th.e-headercell.e-focus.e-focused {
    box-shadow: none;
}

.e-grid {
    border: none;
}

.existing-reminder-grid-container .e-grid .e-gridheader {
    border-top: none;
}










/* ========================================================  */
/* ==================== SCHEDULER =========================  */
/* ========================================================  */



.e-schedule .e-vertical-view .e-day-wrapper .e-appointment {
    border-radius: 10px;
    filter: drop-shadow(2px 2px 5px #333333);
    border-color: black;
}


.e-toolbar .e-toolbar-item .e-tbar-btn-text {
    color: var(--rtgray);
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
    color: white;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
    color: var(--rtblue);
}

.e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {
    padding: 0;
    height: 100%;
}

.e-schedule .e-appointment .template-wrap {
    height: 100%;
    white-space: normal;
    padding: 3px;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
    /*visibility: hidden;       Was causing issue with no blue selection bar showing in the tree and therefor the white text appeared empty */
}


.time {
    font-size: 11px;
    padding: 2px 2px 2px;
    font-weight: 700;
    position: relative;
    word-wrap: anywhere;
    margin-left: .25em;
    margin-right: .25em;
}

.travel-time {
    font-size: 10px;
    padding: 2px 2px 2px;
    font-weight: 600;
    position: relative;
    word-wrap: anywhere;
    margin-left: .25em;
    margin-right: .25em;
}

.name {
    font-size: 11px;
    width: 100%;
    font-weight: 700;
    position: relative;
    word-wrap: anywhere;
}

.location {
    font-size: 9px;
    word-wrap: anywhere;
    width: 100%;
    position: relative;
    font-style: italic;
}

.subject {
    margin-top: 2px;
    font-weight: 600;
    font-size: 9px;
    position: relative;
}



.color-key-container {
    line-height: 1em;
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    margin: auto;
    justify-content: center;
    margin-bottom: 20px;
}

.color-key-title {
    font-size: 14px;
    font-weight: 600;
    width: 70px;
    margin: 0;
    padding: 0;
    text-align: right;
    margin-inline-end: 5px;
}

.color-key {
    display: block;
    line-height: normal;
    width: 80px;
    border-color: black;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    margin-right: 5px;
    text-align: center;
}

.unscheduled-events-card {
    border: 5px dashed red;
    text-align: center;
    user-select: none;
}

.unscheduled-events-title {
    font-size: larger;
    color: red;
    font-weight: 700;
}

/*@keyframes blinker {
    20% {
        opacity: 0;
    }
}*/


.unscheduled-event-item {
    line-height: 25px;
    color: black;
    border: 5px solid purple;
    background-color: yellow;
    padding: 10px;
    border-radius: 10px;
    animation: blinker .75s linear infinite;
}

.location-btn {
    color: var(--rtgray);
    height: 25px;
    width: 25px;
}

    .location-btn:hover {
        color: var(--rtblue);
    }



.ev-header {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 30px;
    width: 100%;
    text-align: left;
}

.ev-time:hover {
    cursor: pointer;
}

.ev-content {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
}

.ev-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30px;
    width: 100%;
}

.e-scheudle-form .row {
    --bs-gutter-x: 0;
}















/* ========================================================  */
/* ====================== JOB DETAIL ======================  */
/* ========================================================  */

.job-detail-offcanvas {
}

    .job-detail-offcanvas .offcanvas, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl {
        --bs-offcanvas-width: 700px;
    }

    .job-detail-offcanvas .offcanvas-md, .offcanvas-sm {
        --bs-offcanvas-width: 300px;
    }



















.job-detail-page {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    padding-bottom: 100px;
}















/* ========================================================  */
/* =================== PRODUCT DETAIL =====================  */
/* ========================================================  */


.product-thumbnail-image {
    width: auto;
    height: 50px;
    image-resolution: from-image;
}

.product-detail-layout-container {
    /*    display: grid;
    grid-template-rows: 30px repeat(3, 70px);*/
}

.product-detail-qty-row {
    /*    display: grid;
    grid-template-columns: 120px 120px 1fr;
    gap: 5px;*/
}




.product-detail-dropdown-tree {
    max-width: 500px;
}

    .product-detail-dropdown-tree .e-input:read-only {
        background: none !important;
        margin: 0;
        padding: 0;
    }

.category-dropdown-container {
    margin-top: 0;
    margin-bottom: 10px;
}

.product-detail-file-drop-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 3px dotted var(--rtgray);
    align-items: start;
    min-height: 50px;
    padding: 0px;
    margin-bottom: 5px;
}

.product-detail-file-uploader-container {
    position: relative;
    width: 100%;
    background-color: none;
    height: 100%;
    padding: 10px;
    z-index: 100;
}

.product-detail-current-file-uploading-container {
    height: 25px;
    width: 100%;
    background-color: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    user-select: none;
    margin-bottom: 5px;
}

.product-detail-progress-bar-container {
    display: flex;
    align-items: center;
    background-color: none;
    width: 100%;
    height: 25px;
    padding: 0;
    position: relative;
    user-select: none;
}

.product-detail-Image-uploader-container {
    margin-bottom: 15px;
}

.product-detail-image-container {
    display: block;
    width: 200px;
    height: 200px;
    padding: 5px;
    border: thin solid gray;
    object-fit: contain;
    position: relative;
    text-align: center;
}

.product-detail-image {
    aspect-ratio: auto;
    vertical-align: central;
    margin-top: auto;
    margin-bottom: auto;
    object-fit: contain;
    image-resolution: from-image;
    height: 100%;
    width: 100%;
    max-height: 190px;
    max-width: 190px;
}

.product-detail-image-delete-btn-container {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 10;
}

.product-detail-image-delete-btn {
    color: var(--rtgray);
}

    .product-detail-image-delete-btn:hover {
        color: var(--rtblue);
    }

.product-detail-transaction-card {
    height: 400px;
}






/* ========================================================  */
/* =================== PRODUCT TRANSACTION ================  */
/* ========================================================  */


.dialog-page .product-transaction {
    max-height: 855px;
}

.product-transaction .row {
    --bs-gutter-x: 0;
}


.product-transaction .type-form-select {
    max-width: 200px !important;
}

.product-transaction .vendor-form-select {
    max-width: 300px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    text-align: right;
}

.product-transaction textarea {
    height: 120px;
}

.product-transaction .reason-text-area {
    height: 40px;
}





/* ========================================================  */
/* ===================== SETTINGS =========================  */
/* ========================================================  */

.product-category-treeview {
    height: 380px;
    overflow-y: auto;
}


.product-category-treeview-container {
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    border: thin solid gray;
}

.product-category-new-main-container {
    width: 100%;
    display: grid;
    grid-template-rows: 20px 40px 20px 40px;
    vertical-align: baseline;
    align-items: center;
    margin-top: 15px;
}

.product-category-entry-container {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow-x: hidden;
    margin-top: 5px;
}

.product-category-entry-input {
    display: inline-block;
    margin-left: 0px;
}

.product-category-entry-btn {
    display: inline-block;
    margin-left: 2px;
    position: relative;
    height: 30px;
    width: 30px;
}

.product-categories-card {
    height: 532px;
    position: relative;
    margin-top: 0 !important;
}





/* ========================================================  */
/* ================= QB Customer Linker  ==================  */
/* ========================================================  */

.qb-linker-content-container {
    display: flex
}

    .qb-linker-content-container .left-col {
    }

    .qb-linker-content-container .right-col {
    }

    .