/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */


.keepLineBreaks {
    white-space: pre-line;
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}


.websiteBackgroundColor {
    background-color: #fafafa;
    /*background-color: #ebebeb;*/
}

/* highlight color for datatables search values */
.searchHighlightColor {
    background-color: gold;
}

/*.websiteBackgroundColor {
    background-color: #f3f3f3;
}*/

.required::after {
    content: "*";
    font-weight: bold;
    color: red;
}


/* button CSS */
.pillButton {
    border: none;
    color: white;
    padding: 3px 15px;
    text-align: center;
    text-decoration: none;
    border-radius: 7px;
    font-size: 14px;
}

.disabledButton {
    background-color: lightgray !important;
    /*cursor: wait;*/
}

.blueButton {
    color: #026ccf;
}

.greenButton {
    background-color: #21a366; /* excel color */
}

.grayButton {
    background-color: #859099;
}

.runButton {
    font-weight: bold;
    font-size: 10px;
    vertical-align: text-top; /* makes button aligned with the description text */
    /*background-color: transparent;*/
    background-color: transparent;
}

.blueButton:hover {
    color: blue;
}

.blueButton:active {
    background-color: transparent;
}

.excelFontColor {
    color: #21a366; /* excel color */
}


#yesDeleteButton {
    border: 2px solid red;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    height: 30px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 20px;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    /*height: 60px;*/ /* disabled, was causing a bug with vertical scroll */
    line-height: 45px; /* Vertically center the text there */
}


/* Include specific formating needed for Totals table to acheive specific look on Processing page*/
#ProcessingTotalsTable thead {
    text-align: center;
}

#ProcessingTotalsTable tbody tr {
    text-align: center;
}





#homeSpan {
    color: #007bff;
}


/* removes styles from button so only font awesome icon is displayed */
.noStyleButton {
    background: none;
    padding: 0px;
    border: none;
}

.nextProcess {
    font-weight: bold;
}

    .nextProcess:hover {
        color: #4ae06c !important; /* overrides bootstrap's .text-success color */
    }

.stepsCompleted {
    font-size: 20px;
}


.actionsRow {
    top: 30px;
    padding-top: 30px;
    z-index: 1;
    height: 175px;
}

#tabbedItemsRow {
    top: 205px;
    z-index: 2;
}

.rowPosition {
    position: fixed;
    left: 405px;
    width: calc(100% - 390px); /* width of sidenav + Steps section */
}
/*#tabbedItemsRow .nav {
    position: sticky;
    top: 0;
    z-index: 1;
}*/
#tabbedItemsRow .tabSectionSizeToggleIcons {
    position: absolute;
    right: 20px;
    padding: 5px 0 0 0;
}

    #tabbedItemsRow .tabSectionSizeToggleIcons i {
        cursor: pointer;
        padding: 0.5rem;
    }

.tabsDataFontSize {
    font-size: 11px;
}

#logDataTable {
    font-size: 11px;
}

    #logDataTable th {
        position: sticky;
        top: 0px;
    }


#feedback th {
    position: sticky;
    top: 0px;
}

#feedback td,
#feedbackQueryResultsTable td {
    /* original padding is 0.75rem created by the .table class */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}



.top_wrapper {
    padding: 10px 5px 5px 5px;
    height: 42px;
}




#feedbackQueryResultsTable th {
    position: sticky;
    top: 0px;
}


.tabDatatablesDataScroll {
    overflow-x: auto;
    overflow-y: auto;
    height: calc(100vh - 335px); /* this, along with height of #stepDisplayPartial, allows viewport height to change and kept the app usable */
}


.tabDataScroll.processTabs {
    height: calc(100vh - 250px);
}

.tabDataScroll.clientSettingsTabs {
    height: calc(100vh - 200px);
}

.tabDataScroll.adminPageTabs {
    height: calc(100vh - 170px);
}

.tabDataScroll {
    overflow-x: auto;
    overflow-y: auto;
}

#stepDisplayPartial {
    overflow-y: auto;
    height: calc(100% - 100px); /* if viewport height changes, steps scrollbar still displays fully */
    /*height: 860px;*/
}


/* 
    .stepSection and related layout css 
*/
.stepSection {
    height: 100%;
    width: 306px;
    position: fixed;
    top: 30px;
    padding-top: 30px;
    left: 100px;
    /*margin-left: 100px;*/
    background-color: #fafafa;
    font-size: 14px;
}

    .stepSection #stepsSectionTable {
        width: 100%;
    }

    .stepSection tbody label {
        padding: 5px 10px 5px 10px;
        width: 100%;
        border-radius: 15px;
    }






/*
    UserAccess/Index (sign-in page) CSS
*/
.centerSignIn {
    width: 310px;
    margin: 30vh auto 0 auto;
}

/*older css*/
/*.centerSignIn {
    width: 260px;
    margin: 20vh auto 0 auto;
}*/



/* 
    _sidebarNavPartial CSS
*/
.sidebarNav {
    height: calc(100% - 30px);
    width: 100px;
    position: fixed;
    z-index: 3;
    top: 30px;
    left: 0;
    background-color: #cfebff;
}

    .sidebarNav .sidebarNavItems a {
        text-decoration: none;
        color: black;
    }

.clientsPanel {
    height: calc(100% - 30px);
    width: 200px;
    position: fixed;
    z-index: 3;
    top: 30px;
    left: 100px;
    display: none;
    border-left: white 1px dotted;
    background-color: #e3f2ff;
}

    .clientsPanel .sidebarTitle {
        display: inline-block;
        margin: 5px 0 0 12px;
        font-size: 20px;
    }

    .clientsPanel #clientListNavTable_wrapper {
        border-bottom: 1px solid #a3d8ff;
    }
    /*.sidebarNav #clientListNavTable_wrapper,
.sidebarNav .sidebarTitle {
    display: none;
}*/
    .clientsPanel #clientListNavTable_wrapper {
        font-size: 12px;
    }

#clientListNavTable_wrapper tbody tr {
    cursor: pointer;
    background-color: #e3f2ff;
}

    #clientListNavTable_wrapper tbody tr.details-control:hover {
        background-color: #f0f8ff;
    }

#clientListNavTable_wrapper .menuItemChildRow a:hover { /* could not get the tr element to change background */
    background-color: #ebf2f7;
}



#clientListNavTable_wrapper tbody td {
    border-top: 1px solid aliceblue;
    border-bottom: 1px solid #a3d8ff;
}

#clientListNavTable_wrapper .menuItemChildRow {
    padding: 0;
}

#clientListNavTable_wrapper .processTypesTable tr {
    background-color: #f0f8ff;
}

#clientListNavTable_wrapper .processTypesTable td {
    padding: 0; /* padding is set around the anchor tag instead  so the link takes up the whole td tag */
    border-top: 1px solid white;
    border-bottom: 1px solid #e0f1ff;
}

#clientListNavTable_wrapper .processTypesTable a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 8px 10px 8px 30px;
    text-decoration: none;
}

#clientListNavTable_wrapper .dataTables_filter {
    width: 100%;
    text-align: center;
}

    #clientListNavTable_wrapper .dataTables_filter input {
        margin-left: 0;
    }

#clientListNavTable_wrapper .dataTables_scrollBody {
    border: 0;
}

.clientsPanel .processTypesTable {
    width: 100%;
}

    .clientsPanel .processTypesTable a {
        text-decoration: none;
        color: black;
    }

.sidebarNav .bottomIcons {
    position: absolute;
    bottom: 0;
}

    .sidebarNav .bottomIcons a {
        font-size: 20px;
        cursor: pointer;
        margin: 3px;
        padding: 9px;
        text-decoration: none;
        color: black;
    }


.sidebarNav .inProgressIndicator {
    position: absolute;
    right: 5px;
}





/*
    Home page datatable CSS
*/
#homeNavTable_wrapper tbody td {
    padding: 5px 10px;
}

#homeNavTable_wrapper .dataTables_filter { /* search input box */
    float: left;
}

/*older css*/
/*#homeNavTable_wrapper tr:hover .processTypesTable  {
    visibility: visible;
}
#homeNavTable_wrapper .processTypesTable {
    visibility: hidden;
}*/

#homeNavTable_wrapper tr:hover .processTypesTable {
    opacity: 1;
}

#homeNavTable_wrapper .processTypesTable {
    opacity: 0.2;
}


    #homeNavTable_wrapper .processTypesTable tr {
        float: left; /* the table is wide enough, unlike sidenav table, to put all links on the same row */
        background-color: #cfebff;
        border-radius: 16px;
        margin: 0px 5px 0px 5px;
    }

        #homeNavTable_wrapper .processTypesTable tr:hover {
            background-color: #e3f2ff;
        }

    #homeNavTable_wrapper .processTypesTable td {
        padding: 0; /* padding is set around the anchor tag instead  so the link takes up the whole td tag */
    }

    #homeNavTable_wrapper .processTypesTable a {
        display: block;
        height: 100%;
        width: 100%;
        padding: 4px 10px;
        text-decoration: none;
        color: black;
    }
/*Top, right, bottom, left*/
.logMarginContainer {
    margin: 0 0 -210px 100px;
}

.marginContainer {
    margin: 40px 6% 0 100px;
}


td.ellipseTableData {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;
    /*min-width: 150px;*/
}


/* Sidebar + Home nav common CSS  */
tr.details-control i {
    padding: 0 10px;
    /*color: forestgreen;*/
    color: #007bff;
}

tr.shown.details-control i {
    /*color: darkred;*/
    color: #007bff;
}


.dataTables_wrapper .dataTables_processing { /* datatables processing overlay that appears when running server-side actions */
    background-color: #cfebff;
}





.tabbedItems .nav-item span { /* Hide text in the navigation tabs by default */
    display: none;
}

.tabbedItems .active span { /* Show the one that's active */
    display: inline-block;
}

#feedbackQueriesTable th {
    position: sticky;
    top: 0;
}

.querySelect:hover {
    cursor: pointer;
    background-color: #e3f2ff;
}

.datatablesCustomToolbar button {
    margin-right: 10px;
}







/*
    top:30px is header width
    left:10px is nav width 
    //TODO: standardize css so that on pages with header and nav, I can adjust the content 
        position with one or two css classes for the whole site (in case we need to change 
        thickness of nav or header).
*/
.contentCustomPositioning {
    position: fixed;
    top: 30px;
    left: 100px;
    width: calc(100% - 100px);
}

/*#region step editor CSS*/
.subStepsIndicator {
    font-size: 10px;
    vertical-align: top;
}

#noDeleteButton {
    width: 100px;
}


.hoverRowColor:hover {
    background-color: #e3f2ff;
}

#reorderableTable tbody tr {
    cursor: grab;
}

    #reorderableTable tbody tr:active {
        cursor: grabbing;
    }


.stepEditorStickyTableHeader th {
    position: sticky;
    top: 64px;
    background-color: #fafafa; /* websiteBackgroundColor class in site.css */
}

#subStepEditorTable tbody tr,
#stepsEditorTable tbody tr,
{
    cursor: pointer;
}

.setPointerCursor {
    cursor: pointer;
}

#exportStepsTable tbody .detailedDescription,
#exportSubStepsTable tbody .detailedDescription,
#stepsEditorTable tbody .detailedDescription {
    max-width: 0px;
    width: 30%;
}

#subStepEditorTable td.detailedDescription {
    max-width: 0px;
    width: 45%;
}

.selectedTableRow {
    background-color: #cfebff;
}


.editorActionPartialBackground {
    background-color: white;
}


#editorActionOverlay textarea {
    resize: none;
}

/* CSS for overlay from here https://www.w3schools.com/howto/howto_css_overlay.asp */
.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.5);
}

.overlay-content {
    position: relative;
    top: 3%;
    left: 25%;
    width: 50%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    text-decoration: none;
}

.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 7%;
    font-size: 30px;
    z-index: 1;
}

#editorActionPartial {
    border: 4px outset;
}

#clientSettingsContent .tab-pane {
    position: relative;
}

.alertPosition {
    position: absolute;
    left: 44%;
    top: 7px;
    z-index: 4;
    display: none;
}

#featureNotEnabledAlerts {
    display: block;
    z-index: 3;
}
    #featureNotEnabledAlerts .alert-warning {
        background-color: #ffe287;
        border-color: #ffd34a;
    }

#processingTypeSpan {
    width: 100%;
    z-index: 1; /*TEMP*/ /* the reorder button is rotated and does not hide unles Processing type dropdown unless I set its z-index above the button's. */
    position: sticky;
    top: 0;
}

.editorToolbar {
    position: sticky;
    top: 41px;
}

    .editorToolbar button {
        margin-right: 5px;
    }

/* this style tag contains common styles for step and substep delete partials */
.deleteRecordTableDiv {
    padding: 30px 30px 0 30px;
}

.deleteRecordTable {
    table-layout: fixed;
}

    .deleteRecordTable th,
    .deleteRecordTable td {
        text-align: left;
    }

    .deleteRecordTable th {
        vertical-align: top;
        white-space: nowrap;
        width: 25%;
    }
/*#endregion step editor CSS*/


/*#region Admin page CSS*/

#userEditorContent #userSelectionDiv,
#userEditorContent .buttonContainer,
#clientEditorContent #clientSelectionDiv,
#clientEditorContent .buttonContainer {
    width: 18%;
    min-width: 200px;
}

#clientFormTable {
    width: 500px;
}

    #clientFormTable tr:nth-child(even) td {
        padding-bottom: 15px;
    }

#userSelection {
    width: 300px;
}

#clientsSelection {
    width: 50%;
}

#clientEditorButtons button,
#userEditorButtons button {
    margin-left: 5px;
}

.adminPageEditorSelections {
    height: calc(100vh - 205px);
    overflow-x: auto;
    overflow-y: auto;
}

    .adminPageEditorSelections option {
        cursor: pointer;
    }


.bootstrap-duallistbox-container select {
    height: calc(100vh - 550px) !important;
}

.bootstrap-duallistbox-container option {
    cursor: pointer;
}

.bootstrap-duallistbox-container .customButtonBox {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 105px;
}

    .bootstrap-duallistbox-container .customButtonBox button {
        margin-bottom: 15px;
        font-size: 25px;
    }

.userEditorButtons input:nth-child(-n+2) {
    margin-right: 10px;
}

#userEditorFormScroll,
#clientEditorFormScroll {
    height: calc(100vh - 205px);
    overflow-x: hidden;
    overflow-y: auto;
}

.userActivationLinkPartialBackground {
    background-color: white;
}

#userActivationLinkPartial {
    border: 4px outset;
}

/*#endregion Admin page CSS*/


#queryEditorToolbar {
    position: sticky;
    top: 0;
}

    #queryEditorToolbar button {
        margin-right: 5px;
    }

.queryEditorStickyTableHeader th {
    position: sticky;
    top: 22px;
    background-color: #fafafa; /* websiteBackgroundColor class in site.css */
}

.queryEditorQueryDescription {
    max-width: 0;
    width: 50%;
}

#storedProcedureEditorToolbar {
    position: sticky;
    top: 0;
}

    #storedProcedureEditorToolbar button {
        margin-right: 5px;
    }

.storedProcedureEditorStickyTableHeader th {
    position: sticky;
    top: 22px;
    background-color: #fafafa; /* websiteBackgroundColor class in site.css */
}

.storedProcedureEditorQueryDescription {
    max-width: 0;
    width: 50%;
}


.notesTabHeight {
    height: 100%;
}

#notesTextArea {
    width: 100%;
    height: calc(100% - 35px);
    resize: none;
}