:root {
    --title-bg: white;
    --background: white;
    --txt-bg: white;
    --txt-bg-hl: whitesmoke; /* Highlight background for text*/
    --txt-color: black;
    --lbl-color: black;
    --brd-color: silver;
    --menu-txt: black;
    --menu-txt-hover: black;
    --menu-bg: white;
    --menu-bg-hover: whitesmoke;
    /*Grid Styles Variables*/
    --grd-bg: white;
    --grd-toolbar-bg: transparent;
    --grd-title-clr: black;
    --grd-redit-cell: white; /* Row Edit/Delete Button cells */
    --grd-colhead-gridlines: #e4e4e4; /*column header border*/
    --grd-gridlines: #ececec; /*Grid lines color*/
    --grd-rh-backcolor: whitesmoke; /*row header*/
    --grd-ch-backcolor: whitesmoke; /*colums header*/
    --grd-ch-backcolor-hover: white; /*colums header*/
    --grd-ch-clr: black;
    --grd-titlediv-bk: whitesmoke;
    --grd-titlediv-brd-b: silver;
    --grd-title-clr: black;
    --grd-cell-clr: black;
    --grd-row-selection: #e2dfdf;
    --childview-border: #E6E6E6;
    --grd-shadow: silver;
    --profile-icon: #4d4d4d;
    --app-title: black;
    --frm-title-bg: #e4e4e4; /*Form screen group title*/
    --frm-title-clr: black; /*Form screen group title color*/
    --tab-bg-active: white;
    --tab-active-btm-brd: 2px solid #077ad3;
    --login-div-border: #426078;
    --login-div-shadow: silver;
    --toolbar-brd: silver;
    --button-brd-hover: gray;
    --theme-iconclr: gray;
    --theme-icon-hover-clr: black;
    --lst-boxitem-bgd: linear-gradient(to bottom, #f2f2f2, #e0e0e0, #d9d9d9);
    --button-brd: 1px solid #e7e5e5;
    --button-active-brd: 1px solid #A7A4A4;
}

/**********************************************************************/
/***                 Dark/Black Theme                        **********/
/**********************************************************************/
.dark-theme {
    --background: #42414D;
    --title-bg: #42414D;
    --txt-color: white;
    --txt-bg: #3f3e3e;
    --txt-bg-hl: #5b5a6b;
    --fg-textbox: white;
    --lbl-color: white;
    --brd-color: #545364;
    --menu-txt: white;
    --menu-txt-hover: white;
    --menu-bg: #42414D;
    --menu-bg-hover: #545364;
    --tab-bg-active: #545364;
    --tab-clr-active: white;
    /*var(--menu-bg-hover)#545364*/
    /*Grid*/
    --grd-bg: #545364;
    --grd-toolbar-bg: #7a7891; /*Grid Tool bar background*/
    --grd-title-clr: white;
    --grd-colhead-gridlines: #86849e; /*column header border*/
    --grd-gridlines: #7c7b93; /*Grid lines color*/
    --grd-redit-cell: #7a7891; /* Row Edit/Delete Button cells */
    --grd-rh-backcolor: #484755; /*row header*/
    --grd-ch-backcolor: #484755; /*colums header*/
    --grd-ch-backcolor-hover: #545364; /*colums header*/
    --grd-ch-clr: white;
    --grd-titlediv-bk: #575668;
    --grd-titlediv-brd-b: #42414D;
    --grd-title-clr: white;
    --grd-cell-clr: white;
    --grd-row-selection: #3a3945;
    --childview-border: #42414D;
    --grd-shadow: #27262f;
    --profile-icon: #f3f3f3;
    --app-title: white;
    --frm-title-bg: #575668; /*Form screen group title eg: Parameter screen group header*/
    --frm-title-clr: white;
    --login-div-border: white;
    --login-div-shadow: #27262f;
    --toolbar-brd: silver;
    --button-brd-hover: white;
    --lst-boxitem-bgd: linear-gradient(to bottom, #727272, #303030, #262626);
    --button-brd: 1px solid #8c8c8c;
    --button-active-brd: 1px solid #eeeeee;
    --theme-iconclr: lightgray;
    --theme-icon-hover-clr: white;
}

    .dark-theme .AppTitle {
        color: white;
    }

    .dark-theme button, .dark-theme label {
        background-color: var(--background);
        color: var(--lbl-color);
    }

    .dark-theme input, .dark-theme textarea{
        background-color: #29282f !important;
        color: white;
    }

    .dark-theme select {
        background-color: #484747;
        color: white;
        border: 1px solid silver;
    }


.ui-button:active {
    border: 1px solid black;
    color: black;
    background-color: white;
}



/**********************************************************************/
/**********************************************************************/

html {
    background-color: var(--background);
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background);
    border: solid 0 #e2e2e2;
    color: #333;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: Arial;
    overflow: hidden;
    background-size: cover;
    margin:0;
}




button {
    font-size: 12px;
    font-family: Arial;
}

input, select, textarea {
    font-size: 12px;
    font-family: Arial;
    background: var(--background) !important;
    color: var(--txt-color);
    border: 0;
    border-bottom: 1px solid #ccc;
}

#frmLogin {
    background-color: var(--background);
    opacity: 0.85;
    border-radius: 10px;
}




#loadingsection {
    visibility: visible;
    background-color: white;
    position: absolute;
    border-radius: 10px;
    z-index: 10000;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    top: 0;
    left: 0;
}

.loadingsection-animation {
    background-image: url(MainImages/loading.GIF);
    left: 45%;
    right: 50%;
    top: 45%;
    bottom: 50%;
    width: 50px;
    height: 20px;
    position: absolute;
}



/*  ----------------------------------------------------------
    Index page (main page)
    ----------------------------------------------------------*/




.pv-window-menu a {
    text-decoration: none;
}



.pv-main-name-left {
    height: 45px;
    margin-top: 8px;
}

#childpage_container {
    overflow: hidden;
    border: 1px solid var(--childview-border);
    background-color: transparent;
}



.pv-tab-active {
    border-width: 1px;
    border: 1px solid silver;
    border-bottom: 0px;
    height: 20px;
    background-color: var(--tab-bg-active);
    color: var(--tab-clr-active);
    border-radius: 5px 5px 0px 0px;
    border-bottom: var(--tab-active-btm-brd);
}

.pv-tab-inactive {
    border: 1px solid whitesmoke;
    border-bottom: 0px;
    height: 20px;
    background-color: whitesmoke;
}
/******************* LOGIN ***********/









.login_errormessage {
    color: red;
    border: 1px dotted orange;
    float: right;
    background-color: whitesmoke;
    max-width: 450px;
    font-size: 16px;
}

.pv_required-input {
    border-bottom: 2px solid red !important;
    background-color: #fedede;
}







.pv-close-window {
    float: right;
    border-radius: 0px;
    background-image: url(MainImages/close.png);
    width: 23px;
    height: 23px;
    border: 0;
}
/*BEGIN ::Custt Report layout : Abin*/
#divCLButtons {
    float: right;
}

    #divCLButtons button {
        height: 22px;
        width: 22px;
        background-repeat: no-repeat;
        border: none;
        background-position: center;
        background-color: transparent;
    }

        #divCLButtons button:hover {
            border: 1px outset gray;
            outline: none;
        }

        #divCLButtons button:focus {
            outline: none;
        }

        #divCLButtons button:active {
            border: 1px outset gray;
            border-top: 2px outset black;
            border-left: 2px outset black;
        }

.pv-custlayourepo-pdf {
    background-image: url(MainImages/file_pdf.png);
}

.pv-custlayourepo-psp {
    background-image: url(MainImages/pagesetup.ico);
}

.pv-custlayourepo-pnt {
    background-image: url(MainImages/printpreview.ico);
}
/*END :: Custt Report layout*/
/*******************  BEGIN :: CHART  *********************/
.pv-chart-toolbar {
    float: right;
    height: 20px;
}

    .pv-chart-toolbar button {
        height: 22px;
        width: 22px;
        background-repeat: no-repeat;
        border: 0;
        background-color: transparent;
        background-position: center center;
    }

.pv-chart-btn-zoomin {
    background-image: url(MainImages/ZoomInN.gif);
}

.pv-chart-btn-zoomout {
    background-image: url(MainImages/ZoomOutN.gif);
}

.pv-chart-btn-gridlines {
    background-image: url(MainImages/SHOWGRIDLINES.gif);
}

.pv-chart-btn-legend {
    background-image: url(MainImages/SHOWLEGENDS.gif);
}

.pv-chart-btn-refresh {
    background-image: url(MainImages/refresh.gif);
}
/*******************  END :: CHART*************************/


.ui-dialog, .ui-dialog, .ui-widget, .ui-widget-content, .ui-resizable {
    background: white !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.pv-scm-noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.pv-btn-bg-dropdown {
    background-image: url("MainImages/DropDown_white.gif");
}

.pv-btn-bg-delete {
    background-image: url("MainImages/DELETE.gif");
}

.pv-btn-bg-savefilter {
    background-image: url("MainImages/SaveFilter.gif");
}

.pv-button {
    background-color: white;
    border: 1px solid silver;
    border-radius: 3px;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

    .pv-button:hover {
        border: 1px solid var(--button-brd-hover);
    }

.pv-desabled-no-border {
    border: 0;
    background-color: white;
}

.pv-inputtext {
    border: 0;
    border-bottom: 1px solid silver;
}

    .pv-inputtext:disabled {
        border: 0;
        background-color: white;
        border-bottom: 1px solid whitesmoke;
    }

.combo-dropdownbutton {
    background-image: url("../content/MainImages/DropDown_white.gif");
    background-repeat: no-repeat;
    border: 1px solid silver;
    width: 20px;
}

.combo-grid-popupbutton {
    background-image: url("../content/MainImages/gridpopup.png");
    background-repeat: no-repeat;
    border: 0px solid silver;
    width: 17px;
}



.pv-dashboard {
}

    .pv-dashboard table {
        border-collapse: collapse;
    }

    .pv-dashboard div {
        background-color: whitesmoke;
    }



.pv-rotate {
    animation: 4s rotateRight infinite linear;
}

@keyframes rotateRight {
    0% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    100% {
        transform: rotate(360deg);
    }
}

#paper {
    border: 1px solid red;
}

/********** Gantt Control ************************************
 **********************************************************/
.pv-btn-gnt-searchBackward {
    background-image: url("MainImages/SearchLeft.png");
}

.pv-btn-gnt-SearchRight {
    background-image: url("MainImages/SearchRight.png");
}

.pv-btn-ZoomIn {
    background-image: url("MainImages/ZoomIn.png");
}

.pv-btn-ZoomOut {
    background-image: url("MainImages/ZoomOut.png");
}

.pv-btn-gnt-timeln_moveLeft {
    background-image: url("MainImages/LeftArrow.png");
}

.pv-btn-gnt-timeln_moveRight {
    background-image: url("MainImages/RightArrow.png");
}

.pv-btn-gnt-pred {
    background-image: url("MainImages/Predecessor.png");
}

.pv-btn-gnt-Hidepred {
    background-image: url("MainImages/NotPredecessor.png");
}

.pv-btn-gnt-fullscreen {
    background-image: url("MainImages/fullscreen.png");
}

.pv-btn-gnt-exitfullscreen {
    background-image: url("MainImages/exitfullscreen.png");
}

/***********************************************************************************/
/*PV Color Picker*/

#PCSC_PRV {
    height: 60px;
    width: 60px;
    border: 1px solid black;
    border-radius: 5px;
    background: red;
}

.PVCPB {
    width: 20px;
    height: 20px;
    display: table-cell;
}

.PVSCP_SELECT option {
    height: 20px;
}

.PVSColorPicker {
    width: 100px;
}

#PVCP_RED .ui-slider-range {
    background: #ef2929;
}

#PVCP_RED .ui-slider-handle {
    border-color: #ef2929;
}

#PVCP_GREEN .ui-slider-range {
    background: #8ae234;
}

#PVCP_GREEN .ui-slider-handle {
    border-color: #8ae234;
}

#PVCP_BLUE .ui-slider-range {
    background: #729fcf;
}

#PVCP_BLUE .ui-slider-handle {
    border-color: #729fcf;
}
/***********************************************************************************/


.custom-combobox {
    position: relative;
}

.custom-combobox-input {
    border: 0 !important;
    border-bottom: 1px solid silver !important;
    border-radius: 0 !important;
    height: 17px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 10px !important;
}

.custom-combobox-toggle {
    position: absolute !important;
    bottom: 0px !important;
    right: 0px !important;
    font-size: 20px;
    color: var(--txt-color);
    cursor: default;
}



.pv-vertical-center {
    min-height: 100%; /* Fallback for vh unit */
    min-height: 100vh; /* You might also want to use
                        'height' property instead.

                        Note that for percentage values of
                        'height' or 'min-height' properties,
                        the 'height' of the parent element
                        should be specified explicitly.

                        In this case the parent of '.vertical-center'
                        is the <body> element */
    /* Make it a flex container */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Align the bootstrap's container vertically */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
    width: 100%;
    /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.

     Therefore, we should use the following declarations to get it centered again */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}








@keyframes example {
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }
}

.pvComboBox {
    position: relative;
    display: inline-block;
    height: 20px;
}

    .pvComboBox > input {
        box-sizing: border-box;
        padding-right: 20px;
        border-bottom: 1px solid silver;
        width: 100%;
    }

    .pvComboBox > .pvComboDropdown {
        width: 20px;
        position: absolute;
        right: 0;
        top: -5px;
        border: 0;
        height: 20px;
        background-color: transparent !important;
    }

.pvxComboDropDownPopup {
    position: absolute;
    background-color: white;
    border: 1px solid silver;
    z-index: 99999;
    max-height: 100px;
    overflow-y: auto;
}

    .pvxComboDropDownPopup ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .pvxComboDropDownPopup ul li {
            padding: 3px;
            border: 1px solid transparent;
        }

            .pvxComboDropDownPopup ul li:hover {
                background-color: silver;
                border: 1px solid gray;
            }

            .pvxComboDropDownPopup ul li.selectedItem {
                background-color: silver;
                border: 1px solid gray;
            }



.pvxListBox {
    overflow: hidden;
    position: relative;
    border: 1px solid silver;
}

    .pvxListBox .pvxListBoxDataView {
        background: var(--background) !important;
        color: var(--txt-color);
    }

    .pvxListBox .pvxListBoxRow {
        display: table-row;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        border-bottom: 1px solid silver;
    }

    .pvxListBox .pvxListBoxCell {
        display: table-cell;
        white-space: nowrap;
    }
    /*.pvxListBox .cellContent{
        border-bottom:1px solid silver;
    }*/
    .pvxListBox input[type=checkbox] {
        position: relative;
        top: 2px;
    }

    .pvxListBox .scrollbox {
        width: 30px;
        position: absolute;
        right: 0;
        top: 45px;
    }

    .pvxListBox .pvxListBoxSearchBox > input {
        margin: 3px;
        border: 1px solid silver;
    }



.pv-autofiltercontextmenu select {
    display: block;
    margin-top: 3px;
    margin-bottom: 3px;
    width: 100%;
    box-sizing: border-box;
}

.pv-autofiltercontextmenu input.searchbox {
    display: block;
    margin-top: 3px;
    width: 100%;
    box-sizing: border-box;
}

/*  Error.html    */
.errorscreen-html {
    height: 100%;
}

.errorscreen-body {
    height: 100%;
}

.errorscreen-maindiv {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.errorscreen-maindiv .errorscreen-title {
        font-size: 30px;
}
.ui-dialog, .ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable, .ui-dialog-title, h3 {
    background: var(--background) !important;
    color: var(--txt-color);
}
    .ui-widget-content a:not(.pv-treeview-selectednode) {
        background-color: var(--background) !important;
        color: var(--txt-color);
    }
    .ui-widget-content .ui-state-default {
        background: var(--lst-boxitem-bgd);
        color: var(--txt-color);
        border: var(--button-brd);
    }
    .ui-widget-content .ui-state-active {
        border: var(--button-active-brd);
        background: var(--background);
        color: var(--txt-color);
    }
    .ui-widget-content .ui-state-hover {
        border: var(--button-brd-hover);
    }
    .arrowDownIcon {
        font-size: small;
        padding-top: 2px;
        font-weight: bold;
        pointer-events: none;
    }