@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --b2Blue: #61cbe8;
    --b2DarkBlue: #253e8b;
    --b2NavyBlue: #1f2958;
    --b2HeaderBg: #e6e4e4;
    --b2Red: #ed1d2b;
    --b2BgMainColor: #faf6f6;
    --b2White: #fff;
    --b2Green: #19B041;
    --b2Orange: #ff6a00;
    --b2DarkGrey: #898a88;
}
html, body {
    font-family: Barlow, 'Roboto', sans-serif;  /* 'Roboto', Helvetica, Arial, sans-serif;*/
}
body{
    overflow:hidden;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}


app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
    background-color: var(--b2BgMainColor);
    margin-left:-20px;
    margin-top:-25px;
    overflow:hidden;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    /* background-image: linear-gradient(180deg, #61cbe8 10%, #61cbe8 60%);*/
    background-image: linear-gradient(180deg, var(--b2Blue) 10%, var(--b2Blue) 60%);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: .9rem;
        padding-bottom: 0.5rem;
    }

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

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

        .sidebar .nav-item a {
            color: #f7f7f7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                color: var(--b2NavyBlue);
                font-weight: bold;
            }

            .sidebar .nav-item a:hover {
                background-color: #f7f7f7;
                color: #000000;
                /*font-weight: bold;*/
            }
    .sidebar .logout {
       bottom:0px;
       position:absolute;
    }
.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* SMALL SCREENS */
@media (max-width: 767.98px) {
    .main {
        margin-top:70px;
        height:100%;
        overflow:scroll;
    }
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }

    .navImgBrand {
        margin-left: 0px;
    }

        .navImgBrand a {
            margin-left: 0px;
        }
        .navImgBrand span {
            margin-left: 0px;
        }

    .sidebar {
        float: left;
        top: 0;
        width: 100%;
        height: 0px;
        z-index: 888;
    }
        .sidebar ul {
           background-color:var(--b2Blue);
        }
   
    .sidebar .logout {
        bottom: 0px;
        position: relative;
    }
    .logoDisp {
        background-color: #fff;
        margin-left: 0;
        left: 4px;
        position: relative;
        top: 5px;
    }
    .navbar-toggler{
        border:1px solid var(--b2Blue);
        display:block;
        background:var(--b2Blue);
        margin-right:10px;
    }

    .filterItems {
        height: 50px;
        width: 40px;
        position: fixed;
        z-index: 901;
        top: .5%;
        right: 0;
        background-color: var(--b2White);
        overflow-x: hidden;
        transition: 0.3s;
        padding-top: 0px;
        opacity: 0.3;
        cursor: pointer;
        border: thin solid var(--b2HeaderBg);
        overflow-y: hidden;
        margin-top:90px;
    }

    .dashMainStats{
        float:left;
        display:table-column;
        margin-bottom:20px;
        width:100%;
        border:none;
        box-shadow:none;
    }
        .dashMainStats ul  {
            display: table;
            margin-bottom:20px;
        }
            .dashMainStats ul li {
                float: left;
                display: table-row;
                width: 100%;
                border: none;
                margin-bottom: 10px;
                background-color: var(--b2White);
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
                border-image:none;
            }
    .slidecontainer {
        float: left;
        display: table;
        width: 100%;
        border:none;
        box-shadow:none;
    }
    .statsHdr{
        float:left;
        display:flex;
        width:100%;
        margin-top:100px;
    }
    /* context */
    .content px-4{
        height:100%;
        width:100%;
        overflow:auto;
    }
    /* chart */
    .dashMainChart {
        float: left;
        display: table;
        position: relative;
        margin-top: 50vh;
    }
        .dashMainChart canvas {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

    .row1{
        top:70vh;
    }
    .dashMainSmallChartsContainerLeft {
        display: table-row;
        width: 100%;
        top: 70vh;
    }
        .dashMainSmallChartsContainerLeft  {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
    .dashMainSmallChartsContainerMiddle {
        display: table;
        top: 70vh;
        width: 100%;
    }
    .dashMainSmallChartsContainerRight {
        display: table;
        top: 70vh;
        width: 100%;

    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
        .sidebar .logout {
            bottom: 0px;
            position: absolute;
        }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .navImgBrand {
        margin-left: 0px;
    }

        .navImgBrand a {
            margin-left: 0px;
        }
        .navImgBrand span {
            margin-left: 0px;
        }
}

.logoDisp {
    background-color: #fff;
    margin-left: 0;
    left: 4px;
    position: absolute;
    top: 5px;
}

.main header{
    left:20px;
    height:40px;
    background-color: var(--b2HeaderBg);
    border-bottom:thin solid var(--b2HeaderBg);
    padding-left:10px;
}

/* Dashboard Classes -- Charts */

.finalDollarsCompareChart{
    width:200px;
    height:100px;
}

.dashMainStats {
    height: 18vh;
    width: 100%;
    align-content: center;
    text-align: center;
    padding-bottom: 0px;
    margin-bottom: 8px;
    padding-top: 10px;
    /*    border: 1px solid #e6e4e4;*/
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}

    .dashMainStats ul {
        padding-left: 5px;
        padding-right: 5px;
    }
        .dashMainStats ul li {
            height: 80px;
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: .25%;
            margin-right: .25%;
            font-size: 20px;
            color: #4b4b4b;
            font-weight: 600;
            text-align: center;
            border-left: thin solid   #19B041;
     
           /* background-image: linear-gradient(white,green,white);*/
           border-image: linear-gradient(transparent 10%, #19B041 45% 30%, transparent 90%) 0 0 0 1 / 1px; 
         
        }
    .dashMainStats ul li:first-child{border-left:none;}
            .dashMainStats ul li span {
                font-size: 15px;
                color: var(--b2DarkBlue);/*  #253e8b; /*#0a7285;  #8b8b8b;*/
            }


    .dashMainStats li span {
        margin:0;
        font-size: 15px;
        color: var(--b2DarkBlue);/* #253e8b; /* #add8e6; /*#8b8b8b;*/
    }

    .dashMainStats li  #upArrow{
        padding-top:0px;
        color: #19B041;
        font-size: 22px;
    }
    .dashMainStats li #downArrow {
        padding-top: 0px;
        color: #ff0000;
        font-size: 22px;
    }
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Dashboard Main Charts */
.dashMainChart {
    width: 100%;
    height: 35vh;
    /*    border-bottom: 1px solid #d1d0d0;*/
    padding-bottom: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    background-color: var(--b2White);
    padding-right:20px;
    padding-left:20px;
}

    .dashMainChart canvas {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

 /* Analytics Charts */
.analyticsMainStatsContainer {
    height: 7vh;
    left: -15px;
    margin-right:0px;
    width: 101%;
    margin-bottom: 8px;
    position:relative;
    margin-top:-12px;
    display:none;
}
    .analyticsMainStatsContainer .analyticsMainStats {
        height: 7vh;
        width: 32.4%;
        margin-left: 15px;
        align-content: center;
        text-align: center;
        padding-bottom: 0px;
        margin-bottom: 8px;
        padding-top: 10px;
        /*    border: 1px solid #e6e4e4;*/
        background-color: var(--b2White);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
        float: left;
    }

        .analyticsMainStatsContainer .analyticsMainStats .analyticsStatNums {
            float: left;
            margin-left: 18%;
            font-size: 26px;
            color: #4b4b4b;
            font-weight: 600;
            margin-top:5px;
        }

        .analyticsMainStatsContainer .analyticsMainStats .analyticsStatIcon {
            float: right;
            margin-right: 30px;
            font-size:32px;
            color:var(--b2Green);
            margin-top:-8px;
        }
        .analyticsMainStatsContainer .analyticsMainStats #analyticsStatTitle {
            float:left;
            font-size: 20px;
            margin-left: 5%;
            color:var(--b2Red);
            font-weight:600;
        }
        .analyticsMainStatsContainer .analyticsMainStats #analyticsStatNumFormat {
            font-size: 12px;
            /* left: -30%;*/
            margin-top:10%;
            position:relative;
            float:right;
        }

        .analyticsMainStatsContainer .analyticsMainStats .oi-pulse{
            color:var(--b2NavyBlue);
        }
        .analyticsMainStatsContainer .analyticsMainStats .oi-compass {
            color: var(--b2Blue);
        }
        .analyticsMainStatsContainer .analyticsMainStats .oi-dollar {
            color: var(--b2Green);
        }

        .analyticsMainStatsContainer .analyticsMainStats ul {
            padding-left: 5px;
            padding-right: 5px;
        }

    .analyticsMainStatsContainer .analyticsMainStats ul li {
        height: 80px;
        display: inline-block;
        padding-left: 30px;
        padding-right: 30px;
        margin-left: .25%;
        margin-right: .25%;
        font-size: 22px;
        color: #4b4b4b;
        font-weight: 600;
        text-align: center;
        /*            background-color: var(--b2BgMainColor);*/
        /*            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);*/
        /*          border-width: thin;*/
        /*            border: 1px solid var(--b2Blue);*/
        border-left: thin solid #19B041;
        border-image: linear-gradient(transparent 10%, #19B041 45% 30%, transparent 90%) 0 0 0 1 / 1px;
    }

        .analyticsMainStatsContainer .analyticsMainStats ul li:first-child {
            border-left: none;
        }

        .analyticsMainStatsContainer .analyticsMainStats ul li span {
            font-size: 15px;
            color: var(--b2DarkBlue); /*  #253e8b; /*#0a7285;  #8b8b8b;*/
        }


        .analyticsMainStatsContainer .analyticsMainStats li span {
            margin: 0;
            font-size: 15px;
            color: var(--b2DarkBlue); /* #253e8b; /* #add8e6; /*#8b8b8b;*/
        }

        .analyticsMainStatsContainer .analyticsMainStats li #upArrow {
            padding-top: 0px;
            color: #19B041;
            font-size: 22px;
        }

        .analyticsMainStatsContainer .analyticsMainStats li #downArrow {
            padding-top: 0px;
            color: #ff0000;
            font-size: 22px;
        }

.analyticsMainChart {
    width: 100%;
    height: 35vh;
    top: 0px;
    margin-top:-10px;
    position: relative;
    /*    border-bottom: 1px solid #d1d0d0;*/
    padding-bottom: -30px;
    margin-bottom: -30px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    padding-left:15px;
    padding-right:15px;
}
    .analyticsMainChart canvas {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
.analyticsStatsBtm {
    top:33.2vh;
    height: 11vh;
    width: 100%;
    align-content: center;
    text-align: center;
    padding-bottom: 0px;
    padding-top: 10px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    position:relative;
    display:none;
}
    .analyticsStatsBtm .title {
        padding-bottom: 10px;
        color: #4b4b4b;
        text-decoration: underline;
        font-size: 18px;
    }

    .analyticsStatsBtm ul {
        padding-left: 10px;
        padding-right: 10px;
    }

        .analyticsStatsBtm ul li {
            display: inline-block;
            padding-left: 1%;
            padding-right: 1%;
            margin-left: 0%;
            margin-right: 0%;
            font-size: 18px;
            color: #4b4b4b;
            font-weight: 600;
            text-align: center;
            border-width: thin;
            border-left: 1px solid #19B041;
            border-image: linear-gradient(transparent 10%, #19B041 65% 20%, transparent 90%) 0 0 0 1 / 1px;
        }

            .analyticsStatsBtm ul li:first-child {
                border-left: none;
            }

    .analyticsStatsBtm li span {
        font-size: 12px;
        color: var(--b2DarkBlue); /* #253e8b; /* #0a7285; /*#8b8b8b;*/
    }
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/* Forecast Main Charts */
.forecastMainChart {
    width: 100%;
    height: 45.5vh;
    top: 0px;
    position: relative;
    /*    border-bottom: 1px solid #d1d0d0;*/
    /*    padding-bottom: -30px;*/
    margin-bottom: -30px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 28px;
}

    .forecastMainChart canvas {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

.forecastStats {
    height: 12vh;
    width: 100%;
    align-content: center;
    text-align: center;
    padding-bottom: 0px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    margin-bottom:8px;
    margin-top:-10px;
    padding-top:10px;
}

    .forecastStats ul {
        padding-left: 5px;
        padding-right: 5px;
    }

        .forecastStats ul li {
            display: inline-block;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: 0%;
            margin-right: 0%;
            font-size: 20px;
            color: #4b4b4b;
            font-weight: 600;
            text-align: center;
            border-width: thin;
            border-left: 1px solid #19B041;
            border-image: linear-gradient(transparent 10%, #19B041 65% 20%, transparent 90%) 0 0 0 1 / 1px;
        }

            .forecastStats ul li:first-child {
                border-left: none;
            }

            .forecastStats ul li span {
                font-size: 15px;
                color: var(--b2DarkBlue); /*  #253e8b; /*#0a7285;  #8b8b8b;*/
            }


    .forecastStats li span {
        margin: 0;
        font-size: 15px;
        color: var(--b2DarkBlue); /* #253e8b; /* #add8e6; /*#8b8b8b;*/
    }

    .forecastStats li #upArrow {
        padding-top: 0px;
        color: #19B041;
        font-size: 16px;
    }

    .forecastStats li #downArrow {
        padding-top: 0px;
        color: #ff0000;
        font-size: 16px;
    }


.forecastTblData {
    overflow: auto;
    display: inline-block;
    max-height: 40%;
    width: 85%;
    top: 59.7vh;
    position: fixed;
    overflow-y: scroll;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);

}
    .forecastTblData table {
        width: 100%;
        height: 50%;
        border-collapse: collapse;
        position: relative;
        overflow-y: scroll;
    }
    .forecastTblData table td{
      text-align:right;

      padding-right:7px;
    }
        .forecastTblData table td:first-child {
            text-align: left;
      
        }
        .forecastTblData table th {
            text-align: right;
        }
        .forecastTblData table th:first-child {
            text-align: left;
        }
        .forecastTblData table th {
            position: sticky;
            top: 0;
            background-color: var(--b2Blue);
            border:none;
        }
        .forecastTblData table tr:hover{
            background:var(--b2Blue);
            cursor:pointer;
        }
        .forecastTblData table tr:last-child{
             font-weight:bold;
             color:var(--b2NavyBlue);
        }
        /*--------------------------------------------------------------------------------------------------------------------------------------------*/
        /* Estimate Summary */
        .estimateSummaryItems {
            top: 10px;
            position: fixed;
            height: 20vh;
            width: 85%;
        }
.estimateSummaryItems table{
    width:100%;
}
.estimateSummaryItems table th{
    background-color:var(--b2Blue);
}

/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.dashMainSmallChartsContainerLeft {
    margin-left:0px;
    margin-right:10px;
    background-color: #fafafa;
    height: 31vh;
    padding-top:10px;
    padding-bottom:30px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    margin-top:-11px;
    margin-bottom:8px;
    width:40%;
    padding-left:5px;
    padding-right:5px;
    overflow:hidden;
    float:left;
}
    .dashMainSmallChartsContainerLeft h6{
        margin-top:-2px;
        text-align:center;
        margin-bottom:12px;
    }
    .dashMainSmallChartsContainerLeft table {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        padding: 0 10px 0 10px;
        font-size: 14px;
        padding-bottom: 20px;
    }
        .dashMainSmallChartsContainerLeft table th {
            position: sticky;
            top: 0;
            z-index: 500;
            border:none;
        }
    .dashMainSmallChartsContainerLeft table th, tr {
        padding-top: 1px;
        padding-bottom: 1px;
        border-bottom: thin solid #e6e4e4;
    }
    .dashMainSmallChartsContainerLeft table tr:last-child{
        border-bottom:none;
    }

        .dashMainSmallChartsContainerLeft table tr:hover {
            background-color: var(--b2Blue);
            color: #f7f7f7;
            cursor: pointer;
        }
        .dashMainSmallChartsContainerLeft table tr:first-child:hover {
            background-color: #fff;color:#000;
            cursor: default;
        }

        .dashMainSmallChartsContainerMiddle {
            margin-left: 0.15em;
            margin-right: 0px;
            background-color: #fafafa;
            height: 31vh;
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: var(--b2White);
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
            margin-top: -11px;
            margin-bottom: 8px;
            width: 22.5%;
            float: left;
        }

.dashMainSmallChartsContainerLeft .statusTblScrollable {
    overflow: auto;
    height: 90%;
}

.dashMainSmallChartsContainerRight {
    margin-left: 10px;
    margin-right: 0px;
    background-color: #fafafa;
    height: 31vh;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    margin-top:-11px;
    margin-bottom: 8px;
    width: 35.9%;
    float:right;
    overflow:hidden;
}


        .dashMainSmallChartsContainer div:first-child {
            border-left: none;
        }


.dashMainSmallCharts {
    width: 100px;
    height: 100px;
    cursor: pointer;
    display: inline-block;
}



.dashMainStatsBtm {
    margin-top:32.7vh;
    height: 11vh;
    width: 100%;
    align-content: center;
    text-align: center;
    padding-bottom: 0px;
    padding-top: 10px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}

    .dashMainStatsBtm .title {
        padding-bottom: 10px;
        color: #4b4b4b;
        text-decoration: underline;
        font-size: 18px;
    }

    .dashMainStatsBtm ul {
        padding-left: 10px;
        padding-right: 10px;
    }

        .dashMainStatsBtm ul li {
            display: inline-block;
            padding-left: 1%;
            padding-right: 1%;
            margin-left: 0%;
            margin-right: 0%;
            font-size: 18px;
            color: #4b4b4b;
            font-weight: 600;
            text-align: center;
            border-width: thin;
            border-left: 1px solid #19B041;
            border-image: linear-gradient(transparent 10%, #19B041 65% 20%, transparent 90%) 0 0 0 1 / 1px;
        }

            .dashMainStatsBtm ul li:first-child {
                border-left: none;
            }

    .dashMainStatsBtm li span {
        font-size: 12px;
        color: var(--b2DarkBlue); /* #253e8b; /* #0a7285; /*#8b8b8b;*/
    }

.dashMainTable{
    padding-left:10%;
    padding-right:10%;
    padding-top:50px;
    width:100%;
    height:200px;
}

.slidecontainer {
    width: 100%;
    margin-bottom:10px;

}
.slider {
    -webkit-appearance: none;
    width: 50px;
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;

}
.slidecontainer span {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    height: 15px;

}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 15px;
    background: #19B041;
    cursor: pointer;

}

.errorMsg{
    font-size:15px;
    color:red;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 15px;
    background: #19B041;
    cursor: pointer;

}
.tblFixedHdr{
    width:100%;
    right:5%;

}
.tblFixedHdr td:first-child{
    width:30%;
    align-content:flex-start;
}



.smalltablediv {
    overflow: auto;
    display: inline-block;
    max-height: 40vh;
    min-width: 100%;
    margin-top: 0px;
}
    .smalltablediv table {
        width: 100%;
        border-collapse: collapse;
        position: relative;
    }

        .smalltablediv table tbody tr {
            cursor: pointer;
        }

            .smalltablediv table tbody tr:hover {
                background-color: var(--b2Blue);
                color: #f7f7f7;
            }

        .smalltablediv table th {
            position: sticky;
            top: 0;
            background-color: var(--b2Blue);
            box-shadow: 0 2px 0px 0px var(--b2Blue);
            border:none;
        }

    .smalltablediv .created {
        color: #109834;
    }

    .smalltablediv .changes {
        color: #3e95cd;
    }

    .smalltablediv .deleted {
        color: #FF0004;
    }

/* no results found*/
.nodataFoundSearchRslts {
    margin-top:18.5%;
    position:relative;
}
/* Results Table */
.tblRptSearchResults, rptTableContainer {
    overflow: auto;
    display: inline-block;
    max-height: 60%;
    width: 85%;
    left: 262px;
    top: 31.5%;
    position: fixed;
    overflow-y: scroll;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    margin-top: 10px;
    margin-right: 0%;
    margin-bottom: 10px;
}

    .tblRptSearchResults table {
        width: 100%;
        height: 50%;
        border-collapse: collapse;
        position: relative;
        overflow-y: scroll;
        margin-top: 0px;
        padding-top: 0px;
        padding-left:0px;
    }

    .tblRptSearchResults table tbody tr {
        cursor: pointer;
        height:30px;
    }
        .tblRptSearchResults table tbody tr:hover{
           background-color:var(--b2Blue);
        }
        .tblRptSearchResults table tbody tr td:not(:first-child){
            border-left:1px solid var(--b2NavyBlue);
        }

        .tblRptSearchResults table th span {
            color: var(--b2NavyBlue);
            font-size: 14px;
            cursor: pointer;
            float: right;
            padding-left:5px;
        }

        .tblRptSearchResults table thead, th {
            position: sticky;
            top: 0;
            background-color: var(--b2Blue);
            border: 1px solid var(--b2DarkBlue);
            /*            box-shadow: inset 1px 1px var(--b2DarkBlue), 1px 0px var(--b2DarkBlue);*/
            box-shadow: 0px -1px 0px 0px #888;
            z-index: 680;
        }



    #rptTable {
        overflow: hidden;
    }

.paginationNav {
    padding-top:5px;
    padding-left:10px;
    overflow: hidden;
    margin-top: 91.5vh;
    position: relative;
    width: 100%;
    height:6vh;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}

     .paginationNav button {
        background-color: var(--b2Blue);
        border: none;
        color: white;
        padding: 8px 5px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
        width: 120px;
    }
         .paginationNav button:hover {
            background-color: var(--b2NavyBlue);
        }
         .paginationNav table tr{
            border:none;
        }
         .paginationNav table{
            width:50%;
        }

 .paginationNav .loadingExcel {
    background-color: var(--b2Red);
    width:200px;
    margin-left:120px;
}

.replicatedStatsTbl {
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    height:46.5vh;
}
.replicatedStatsTbl table{
    height:100%;
    margin-bottom:0px;
}

.replicatedStats {
    width: 100%;
    align-content: center;
    margin-left: 15%;
    margin-right: 15%;
}

    .replicatedStats ul li {
        display: inline-block;
        padding-left: 40px;
        padding-right: 40px;
        font-size: 25px;
        text-align: center;
        border-width: thin;
        border-left: 1px dashed #19B041;
    }
        .replicatedStats ul li:first-child {
            border-left: none;
        }

.navImgBrand {
    margin-left: 10px;
}
    .navImgBrand a {
        margin-left: 10px;
    }
    .navImgBrand span {
        margin-left: 10px;
    }

.loginPage {
    width: 36.2%;
    height: 40%;
    margin-left: 32.1%;
    margin-top: 10px;
    background-color: var(--b2White);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    margin-bottom: 11%;
    overflow: hidden;
}
.loginMsg {
    text-align:center;
}
.companybrandLoginLogo {
  /*  background-color: #1c2657;*/
    margin-left: 43.2%;
    margin-top: 5%;
    margin-bottom:3%;
}
    .loginPage .maintbl  {

        width: 100.05%;
        overflow-y:hidden;
    }
        .loginPage .maintbl .maintblBorder {
            width: 100%;
            border: 1px solid #cccccc;

        }
            .loginPage .maintbl .maintblBorder:first-child {
                background-color: var(--b2Blue);/* #61cbe8; */
            }
            .loginPage .maintbl .maintblBorder td {
                padding: 10px 0 10px 10px;
                padding-left: 40px;
            }

    .loginPage .maintblBorder table tr,td{
        border:none;
    }
    .loginPage .inputFlds {
        width: 410px;
        padding: 5px;
        margin: 5px 0;
        display: inline-block;
        border: 1px solid grey;
        border-radius: 4px;
        /*     box-sizing: border-box;*/
    }
        .loginPage .inputFlds:focus {
            background-color: var(--b2Blue); /* #61cbe8;*/
        }

    .loginPage .loginbtn {
        background-color: var(--b2Blue);
        border: none;
        color: white;
        padding: 8px 12px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
        width:200px;
    }
        .loginPage .loginbtn:hover {
            background-color: var(--b2NavyBlue); /* #61cbe8;*/
        }

    .loginPage input[type=number]::-webkit-inner-spin-button, .loginPage input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .loginPage #_compId{
        width:100px;
    }
    /* bid items */
    .tblFilter {
        height: 28%;
        position: fixed;
        width: 100%;
        border: thin solid var(--b2DarkBlue);
        margin-bottom: .5%;
        padding: 5px;
    } 

.tblFilter table {
    width: 100%;
    border: none;
    padding-top: 1%;
  
}


.b2Btn {
    background-color: var(--b2Blue);
    border: none;
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    width: 200px;
}
 .b2Btn:hover {
    background-color: var(--b2NavyBlue); /* #61cbe8;*/
}
 .b2inputFlds {
    width: 250px;
    padding: 5px;
    margin: 5px 10px;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 4px;
    /*     box-sizing: border-box;*/
}

.b2inputFlds:focus {
    background-color: var(--b2Blue); /* #61cbe8;*/
}

.b2inputFldsUsr {
    width: 250px;
    padding: 5px;
    margin: 0px 10px;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 4px;
}


    .passwordChange {
        background-color: var(--b2White);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
        height: 45vh;
        padding: 20px;
        width: 35%;
    }

.passwordChange table{
    border:none;
    background-color:var(--b2White);
    height:100%;
    
}
.passwordChange table tr,td{
    border:0;
}
.passwordChange tr td label{
    padding-left:10px;
}

    .passwordChange .changePasswordReq {
        font-size: 13px;
        color: var(--b2Red);
        padding-left: 10px;
    }

    .passwordChange button {
        background-color: var(--b2Blue);
        border: none;
        color: white;
        padding: 8px 12px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
        width: 200px;
        margin-left:10px;
    }
        .passwordChange button:hover {
            background-color: var(--b2NavyBlue);
        }

    .passwordChange .cxlbtn {
        background-color: var(--b2Blue);
        border: none;
        color: white;
        padding: 8px 12px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
        width: 120px;
        margin-left: 10px;
    }

    .centerPage{
        text-align:center;
        margin-top:19%;
    }

.b2Checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}