html {
    height: 100%;
}
/* Move down content because we have a fixed navbar that is 50px tall */
body {
    /*padding-top: 4.5%;*/
    /*padding-bottom: 20px;*/
    overflow: hidden;
    height: 100%;
    width: 100%;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    background-color: white; /*#461e57*/
}
/* Turn off scrollbar when body element has the loading class */
    body.loading {
        overflow: hidden;
    }
    /* Make spinner image visible when body element has the loading class */
    body.loading .overlay {
        display: block;
    }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
}

.modal-header {
    background-color: #692685;
    color: white;
    padding: 0.5rem !important;
}

div, ul, li, label, span {
    caret-color: transparent;
}

.Editor-editor {
    caret-color: auto !important;
}

.splModal .modal-title {
    padding-left: 25px;
}

.splModal .modal-header {
    border-radius: 0;
    border-top-left-radius: 3.75rem;
}

/*.splModal .modal-header,*/
.splModal .modal-body, .splModal .modal-footer {
    /*background-color: #291233 !important;*/
    /*background-color: #ecd4fa !important;*/
    background-color: #fff !important;
    border: 0;
}

.splModal1 .modal-header, .splModal1 .modal-body, .splModal1 .modal-footer {
    background-color: #692685 !important;
}

.splModal .modal-footer {
    border-radius: 0;
    border-bottom-right-radius: 2rem; /*3.75rem;*/
    padding-right: 50px;
}

    .overlay {
        display: none;
        position: fixed;
        width: 100%;
        height: 170%;
        top: 0;
        left: 0;
        z-index: 9999999999;
        overflow: hidden;
        /*background: rgba(255,255,255,0.8) url("loading.gif") center no-repeat;*/
    }

.overlayInner {
    position: fixed;
    top: 45%;
    left: 50%;
    font-size: 20px;
    color: goldenrod;
}
    .overlayInner .spinner-border {
        width: 3.5rem;
        height: 3.5rem;
    }

    .overlay .spinner-border {
        width: 3.5rem;
        height: 3.5rem;
    }

.plsWait {
    /*background-color: white !important;*/
    background-color: transparent !important;
    margin-left: -35px !important;
}

.login .overlayInner {
    top: 82%;
    left: 78%;
}

.masterWithoutMenu .overlayInner {
    top: 45%;
    left: 50%;
}

.loginMob .overlayInner {
    top: 50% !important;
    left: 45% !important;
}

.overlayInnerMob {
    top: 50% !important;
    left: 45% !important;
}

    /* Wrapping element */
    /* Set some basic padding to keep content from hitting the edges */
    .body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.PNLACInfo h4, .PNLSystem h4, .PNLCommercial h4, .PNLRegional h4, .PNLVATTax h4 {
    margin-bottom: 1.5rem;
}

.PNLACInfo .row, .PNLSystem .row, .PNLCommercial .row, .PNLRegional .row, .tab-pane .row, .PNLNewUsr .row, .PNLVATTax .row {
    margin-bottom: 8px;
}

#PNLHdLogin {
    background-color: #461e57;
    font-weight: normal;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    font-size: 21px;
    color: white;
    z-index: 5;
    /*top: 0%;
    left: 0%;
    position: absolute;*/
    height: 4%;
    width: 100%;
    text-align: center;
    padding-top: 5px;
    padding-right: 15px;
    margin-left: -15px;
}

#PNLHdMob, #PNLHdMobLogin {
    background-color: #461e57;
    font-weight: normal;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    font-size: xx-small;
    /*font-weight: bold;
    font-size: 12px;*/
    color: white;
    z-index: 5;
    /*top: 0%;
    left: 0%;
    position: absolute;*/
    height: 50px;
    min-height: 50px !important;
    width: 100%;
    text-align: left;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 0;
    margin-left: 0;
}

#PNLHdMobLogin {
    padding-top: 10px;
}

#PNLHd {
    background-color: #461e57;
    font-weight: normal;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    font-size: 21px;
    /*font-weight: bold;
    font-size: 12px;*/
    color: white;
    z-index: 5;
    /*top: 0%;
    left: 0%;
    position: absolute;*/
    height: 6%;
    max-height: 74px;
    width: 100%;
    text-align: right;
    padding-top: 5px;
    padding-right: 0;
    margin-left: -2px;
}

.fnzLoginLogoMob {
    z-index: 5;
    min-height: 50%;
    max-height: 50%;
    width: 50%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.fnzLoginLogo {
    z-index: 5;
    /*height: 45px;
    max-height: 45px;
    width: 85%;*/
    min-height: 65%;
    max-height: 65%;
    width: 82%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.fnzLogo {
    /*z-index: 30;
    top: 0%;
    left: 1%;
    position: absolute;*/
    z-index: 5;
    /*height: 48px;
    max-height: 48px;
    width: 80%;
    margin-top: 6%;
    margin-left: 6px;
    /*width: 85%;
    margin-bottom: 8%;*/
    /*min-height: 65%;
    max-height: 65%;
    width: 82%;*/
    min-height: 64%;
    max-height: 64%;
    width: 66.5%;
    margin-top: 5%;
    margin-bottom: 3%;
    position: relative;
}

#LabAHNPrd {
    font-weight: normal;
    font-size: x-large;
    /*top: 41%;
    left: 1%;
    position: absolute;
    height: 59%;*/
    width: 51%;
    margin-top: 0px;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    font-style: italic;
    color: white;
}

.LabCoNmMob {
    font-size: 15px !important;
}

#LabCoNm {
    font-weight: normal;
    font-size: 18px;
    /*font-weight: bold;
    font-size: 18px;*/
    /*top: 3%;
    left: 10%;
    position: absolute;
    height: 50%;*/
    width: 90%;
    margin-top: 5px;
    text-align: center;
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
    color: white;
}

#LabCurrTime, #LabYear {
    font-weight: normal;
    font-size: small;
    /*top: 51%;
    left: 10%;
    position: absolute;
    height: 40%;*/
    width: 90%;
    margin-top: 5px;
    text-align: center;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    color: white;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    width: 100%;
}

.PNLACInfo input, .PNLACInfo select, .PNLACInfo input, .PNLSystem input, .PNLCommercial input, .PNLCommercial select, .PNLVATTax input, .PNLVATTax select, .PNLRegional input, .PNLRegional select, .tab-pane input, .select2-selection {
    width: 70%;
    /*font-family: Verdana;*/
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 5px;
    color: black !important;
    caret-color: black !important;
}

.PNLACInfo h4, .PNLSystem h4, .PNLCommercial h4, .PNLVATTax h4 {
    color: white;
    margin-bottom: 1rem;
    background-color: #996fb0;
    padding: 10px 0;
}

.PNLACInfo input, .PNLACInfo select, .PNLCommercial input, .PNLCommercial select, .PNLVATTax input, .PNLVATTax select, .PNLRegional input, .PNLRegional select {
    width: 60%;
    height: 35px;
    margin-bottom: 5px;
    caret-color: black !important;
}

    .PNLACInfo input[type="checkbox"], .PNLSystem input[type="checkbox"], .PNLCommercial input[type="checkbox"], .PNLVATTax input[type="checkbox"], .PNLRegional input[type="checkbox"] {
        margin-bottom: 5px;
    }

.progress-bar-success {
    /*.progress-bar-variant(@progress-bar-success-bg);*/
    background-color: #5cb85c;
}

.progress-bar-info {
    /*.progress-bar-variant(@progress-bar-info-bg);*/
    background-color: #5bc0de;
}

.progress-bar-danger {
    /*.progress-bar-variant(@progress-bar-danger-bg);*/
    background-color: #f0ad4e;
}

.progress-bar-golden {
    background-color: #CC9900;
}

.progress-bar.active {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.PNLACInfo .input-group-prepend, .PNLSystem .input-group-prepend, .PNLCommercial .input-group-prepend, .PNLVATTax .input-group-prepend, .PNLRegional .input-group-prepend {
    min-width: 200px;
    max-width: 200px;
}

form {
    height: 100%;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/
.ui-autocomplete {
    z-index: 99999999999999;
    max-height: 200px !important;
    min-width: max-content !important;
    overflow: hidden auto !important;
    background-color: #e7d0f5;
    /*overflow-y: auto !important;
    overflow-x: hidden !important;*/
}

#ifrMasters .ui-autocomplete {
    max-height: 400px !important;
}

.ui-menu{
    font-size: 1rem;
}
    .ui-menu .ui-menu-item-wrapper {
        width: 100% !important;
    }

.completionList {
    border: solid 1px #444444;
    margin: 0px;
    padding: 2px;
    height: 100px;
    overflow: auto;
    background-color: #FFFFFF;
}

.completionListItem {
    padding: 2px;
}
.completionListItemHighlighted {
    padding: 2px;
    background-color: #ffc0c0;
}


.container {
    height: 100%;
    align-content: center;
}
.card2 {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 10px;
    min-height: 248px;
    margin: 5% 1%;
    background: linear-gradient(to right, #be84e3, #8f07e6) !important;
}
.card1 {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 10px;
    float: left;
    min-height: 210px;
    max-height: 210px;
    width: 31%;
    margin: 1% 1%;
    background: #fff !important;
}

    .card1:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    .card1 .last {
        width: 32%;
    }

#dvCharts .card1 {
    min-height: 200px !important;
    max-height: 300px !important;
}

.homeMob .card1 {
    min-height: 100% !important;
    max-height: 100% !important;
}

/*.homeMob .legendDiv {
    height: 5px !important;
    width: 5px !important;
}*/


.dvMgmtInfo .card1 {
    /*min-height: 250px !important;
    max-height: 250px !important;*/
    /*min-height: 195px !important;
    max-height: 195px !important;*/
    /*min-height: 49.5% !important;
    max-height: 49.5% !important;*/
    width: 31.3% !important;
}
.quickInfoCard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 10px;
    float: left;
    width: 48%;
    margin: 1% 1%;
    background: #fff !important;
}

    .quickInfoCard:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

.display-inline-block {
    display: inline-block;
}

.vAlignTop {
    vertical-align: top;
}

.legendDiv {
    height: 15px;
    width: 15px;
}

.bgGoldenRod {
    background-color: goldenrod;
}

.bgPurple {
    background-color: #8042a6;
}

.prjCard {
    float: left;
    height: 254px;
    max-height: 254px;
    width: 47%;
    margin: 1%;
    background-color: #dfd3e6 !important;
    color: #692685;
}

.card1PieChartDiv {
    padding: 10% 0 0 4%;
    color: #8042a6;
    font-weight: normal;
    font-size: 15px;
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
}

    .card1PieChartDiv div {
        display: inline-block;
        color: #8042a6;
    }
        .card1PieChartDiv div.caption {
            width: 73px;
        }
        .card1PieChartDiv div.vals {
            width: 99px;
            text-align: right;
        }
        .card1PieChartDiv div.total {
            font-weight: bold;
        }

.homeMob .card1PieChartDiv {
    font-size: 20px;
}

.dashcard-title {
    font-size: 15px;
    font-weight: bold;
    color: #8042a6;
    text-align: center;
    padding-top: 1%;
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
}

.homeMob .dashcard-title {
    font-size: 20px;
}

.widthAuto {
    width: auto !important;
}

#PNLLoginMob .card {
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    background-color: #461e57 !important;
    border-radius: 0;
    border-top-left-radius: 3.75rem !important;
    border-bottom-right-radius: 1.75rem !important;
}

#PNLLogin .card, #pnlSelectCo .card, #loginOTPModalCenter .card {
    /*height: 330px;*/
    margin-top: auto;
    margin-bottom: auto;
    /*width: 450px;*/
    /*width: 380px;*/
    width: 100%;
    background-color: #291233 !important; /*#ba84d9 !important; */
    border-radius: 0;
    border-top-left-radius: 3.75rem !important;
    border-bottom-right-radius: 1.75rem !important;
}

#PNLLogin .card-header, #pnlSelectCo .card-header, #loginOTPModalCenter .card-header, #PNLLoginMob .card-header {
    padding: 1.75rem 2.75rem 0;
}

.card-header {
    /*padding: 1.75rem 2.75rem 0;*/
    padding: 1rem .75rem;
}

.card-header h3 {
    color: white;
    font-size: 1.5rem;
}

.tab-content > .tab-pane, .tab-content > .tab-pane > .row > .dataTables_wrapper {
    height: 100%;
}
/*, .tab-content > .tab-pane > .row*/
.form-group {
    /*margin: 0 10px 8px;*/
    margin-bottom: 3px !important;
    margin-left: 8px !important;
}

.pnlVrHeadTransAC .form-group, .pnlVrBody .form-group {
    margin-bottom: 4px;
}

#tblSup td, #tblCust td{
    font-weight: bold;
}

#tbl, #tbl tr:hover, #tbl td:hover {
    color: black;
}

.table {
    margin-bottom: 0;
    overflow: auto;
    /*color: white;*/
    /*font-family: Verdana;*/
    font-family: sans-serif !important;
}

    .table td, .table th {
        padding: .2rem;
        vertical-align: middle;
    }

        .table tr:hover, .table td:hover {
            /*color: white;*/
        }

    .table th, .table tfoot td {
        background-color: #996fb0;
        border-style: none;
        color: white;
        /*font-size: 15px;*/
        font-size: 0.8rem;
        font-weight: normal;
        /*font-size: small;*/
        min-height: 7%;
        padding: 5px;
    }
    .table tfoot input {
        color: inherit;
        border-width: 0;
        font-weight: inherit;
        background-color: inherit;
    }

        .table tfoot input.disabled {
            color: #461e57 !important;
        }
        /*.table td span {
        color: white;
    }*/

        .saveBtn{
        width: 150px !important;
        height: 50px !important;
    }

.btnDarkgoldenrod {
    color: white !important;
    background-color: darkgoldenrod !important;
}

.input-group-text {
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
    /*font-size: 15px;*/
    font-size: 0.8rem;
    font-weight: normal;
    padding: .375rem .75rem;
    line-height: 0.5;
}

.input-group-prepend span {
    width: 45px;
    background-color: #996fb0;
    color: white;
    border: 0 !important;
    max-height: 35px;
}

.rptMob .input-group-prepend span {
    min-width: 65px;
}

/*.mainMenu {
    color: springgreen !important;
}*/
.subMenu {
    color: #461e57 !important;
    font-weight: bold;
}
    .subMenu hover {
        color: #461e57 !important
    }
/*.btn {
    padding: 0.675rem .75rem;
}*/
.disabled, .select2-container--disabled {
    /*color: maroon;*/
    background-color: #E8E8E8; /*rgba(239, 239, 239, 0.3);*/
}
    .disabled:hover, .select2-container--disabled:hover {
        cursor: not-allowed;
    }

.width100pct {
    width: 100% !important;
}

.colorWhite {
    color: white !important;
}

input:focus {
    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
    caret-color: black !important;
}

.remember {
    color: white;
}

    .remember input {
        width: 20px;
        height: 20px;
        margin-left: 15px;
        margin-right: 5px;
    }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 0.7;
}
#tblIStat .splRow, #tblBS .splRow {
    background-color: #692685 !important;
    /*font-weight: bold;*/
}

    #tblIStat .splRow td, #tblBS .splRow td {
        /*color: white !important;*/
        color: black !important;
    }

#tblIStat td:last-child {
    padding-right: 25px;
}
.dt-buttons {
    text-align: right;
    padding-bottom: 10px;
}
.dt-button{
    width: 150px;
}

/*.loginMob {
    font-size: 2rem;
}*/
    /*.login .form-control {
        height: 40px;
        font-size: 16px;
    }*/
.login_btn {
    background-color: #549BF5;
    color: white;
    width: 150px;
    font-size: 1.2rem;
    line-height: 1;
}

    .login_btn:hover {
        /*color: black;
        background-color: white;*/
    }

/*.navbar {
    height: 5.74%;
}*/
.sideBar {
    /*max-width: 17% !important;
    min-width: 17% !important;*/
    padding-left: 1% !important;
}

.helpsideBar {
    max-width: 30% !important;
    min-width: 30% !important;
    padding-left: 1% !important;
    position: static !important;
}

.mainWindow {
    /*max-width: 83% !important;
    min-width: 83% !important;*/
    padding-left: 0 !important;
}
.navbar-header {
    width: 100%;
}
.navbar-fixed-top {
    /*top: 0;
    left: 0;
    position: fixed;*/
    border-width: 0 0 1px;
    width: 100%;
    z-index: 1;
}

.bgBlack {
    background-color: black;
}

.logo {
    height: 100%;
    width: 15%;
    float: left;
}

img {
    height: 100%;
    width: 100%;
}

.topHeaderLabels {
    background-color: black;
    font-weight: bold;
    font-size:x-large;
    color: white;
}
.topHeaderButtons {
    z-index: 1;
    border-radius: 70%;
    width: 30%;
    height: 70%;
    margin-top: 3%;
    border: none;
    color: White;
    font-weight: bold;
    font-size: medium;
    float: left;
}
.chineseGold {
    background-color: #CC9900;
}

.pigmentGreen {
    background-color: #009933;
    margin-right: 1%;
}

.border0 {
    border: 0;
}

.margin0 {
    margin: 0 !important;
}

.marginBottom0 {
    margin-bottom: 0 !important;
}

.padding0 {
    padding: 0 !important;
}

.paddingTopBottom0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.paddingLeft0 {
    padding-left: 0 !important;
}

.paddingRight0 {
    padding-right: 0 !important;
}

.paddingBottom0 {
    padding-bottom: 0 !important;
}

.paddingLeftRight0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.clsTitle {
    background-color: #996fb0;
    font-weight: bold;
    font-size: 1rem; /*12px;*/
    /*color: white;*/
    color: black;
    margin: 0;
    width: 105%;
    /*width: 102.3%;*/
    /*text-align: center;*/
}

.modal-open .modal {
    /*z-index: 9999999;*/
    /*z-index: 9999999001;*/
    z-index: 2147483640;
    overflow-y: hidden !important;
}

    .modal-open .modal #msgModalCenter {
        /*z-index: 9999999;*/
        z-index: 2147483647;
    }

.clsLabTitle {
    /*background-color: black;
      font-style: italic;
    */
    font-weight: normal;
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
    font-size: 18px;
    /*color: #FFFFCC;*/
    margin-top: 0px;
}

.clCloseButton {
    z-index: 1;
    border-radius: 0%;
    background-color: #996fb0;
    border-style: none;
    /*color: White;*/
    color: transparent;
    font-weight: normal;
    font-size: x-large;
}

.mainMenu, .subMenu, .SubSubMenu {
    font-size: 15px !important;
}

.pnlBtn {
    background-color: white; /*#CC9900;*/
    font-weight: bold;
    font-size: 1rem; /*12px;*/
    color: white;
    z-index: 5;
    height: 50px;
    margin-left: 75px; /*50px;*/ /*1%;*/
}

.transPgPnlBtn {
    margin-left: 18px;
}

#dvMain {
    /*max-height: 650px;
    min-height: 650px;*/
    /*max-height: 87% !important;
    min-height: 87% !important;*/
}

.btnPanel {
    z-index: 1;
    border-radius: 0px;
    /*background-color: #692685;
        background-color: purple !important;
    */
    color: white;
    background-color: darkgoldenrod !important;
    border-style: none;
    font-weight: 200;
    /*font-size: 1.1rem;*/
    font-size: 0.8rem;
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
    height: 80%;
    /*min-width: 13%;
    max-width: 13.4%;
    margin: 0.4%;*/
    min-width: 14%;
    max-width: 14.4%;
    margin: 0.4% 0;
    line-height: 1.1;
    white-space: normal;
    padding: 0 12px !important;
}

.qInfoBtnPnl .btnPanel {
    min-width: 10.2% !important;
    max-width: 10.2% !important;
    margin: 0.4% 0.25% !important;
}

.itSettings .btnPanel {
    min-width: 15.8% !important;
    max-width: 15.8% !important;
}

.rptTBBtnPnl .btnPanel {
    min-width: 11.5% !important;
    max-width: 12% !important;
}

.btnBgColor, pnlVrHead .btnBgColor, PNLACInfo .btnBgColor {
    background-color: #692685 !important; /*#BD8E00;*/
    color: white !important;
}

.linkBtnColor {
    color: #692685 !important;
}

    .downloadIcon {
        text-align: center;
    }

/*#dv {
    font-weight: bold;
    font-size: 1.4rem;
    color: #996fb0;
}

    #dv .form-group {
        width: auto;
        margin: 10px 60px;
    }*/

.pnlVrHead, .pnlVrHeadTransAC {
    background-color: white; /*#666666;*/
    font-weight: bold;
    font-size: 1.4rem; /*12px;*/
    color: #996fb0;
    z-index: 50;
    width: 87%;
    /*padding: 0 30px;*/
}

    .pnlVrHead .form-group, .pnlVrHeadTransAC .form-group {
        width: auto;
    }

    .pnlVrHead .input-group-prepend, #dv .input-group-prepend, #dvLeaveSlabs .input-group-prepend, #dvAddMst .input-group-prepend {
        min-width: 200px !important;
        max-width: 200px !important;
    }

    .pnlVrHead h4 {
        background-color: #692685 !important;
    }

#dv .otherSettings .input-group-prepend {
    min-width: 250px !important;
    max-width: 250px !important;
}

#step-4 .input-group-prepend {
    min-width: 225px !important;
    max-width: 225px !important;
}

.pnlVrHeadTransAC .input-group-prepend, #rptFilters .input-group-prepend, #rptPgSetting .input-group-prepend {
    min-width: 115px !important;
    max-width: 115px; /*210px;*/
    padding: 0 !important;
}

#dv input, #dvAddMst input {
    /*font-family: "Arial";*/
    font-family: sans-serif !important;
    caret-color: black !important;
    height: 27px !important;
}
.pnlVrBody {
    background-color: white; /*#666666;*/
    font-weight: bold;
    /*font-size: 1rem;*/ /*12px;*/
    font-size: 0.9rem;
    z-index: 50;
    /*margin-right: 5px;*/
    width: 100%;
    margin-left: 40px; /*20240816*/
}

    .pnlVrBody table .form-control {
        border: 0;
    }

.pnl {
    background-color: #666666;
    font-weight: bold;
    font-size: 1rem; /*12px;*/
    color: white;
    z-index: 50;
    height: 66%;
    width: 53%;
    margin: auto;
}

.toggle {
    border-color: transparent !important;
    background-color: transparent !important;
    margin-left: 3px;
}

.toggle-group {
    /*left: 10px !important;*/
}

    .toggle-group .btn-primary, .toggle-group .btn-primary:hover, .toggle-group .btn-primary:active {
        background: #692685 !important;
        color: #fff !important;
    }

    .toggle-handle {
        background-color: white !important;
    }

.whiteBg {
    height: 38px !important;
}

.whiteBg .toggle-handle {
    background-color: dimgray !important;
}

.toggle-on {
    /*background-color: #e7d0f5 !important;
    color: black !important;*/
    /*padding: 5px 0;*/
    padding: 8px 12px 5px 0 !important;
    border-color: #e7d0f5 !important;
}

.whiteBg .toggle-on {
    background-color: #692685 !important;
    color: white !important;
    padding: 5px 0;
    border-color: #692685 !important;
}

.toggle-off {
    background-color: gray !important;
    color: white !important;
    /*padding: 5px 0;*/
    padding: 8px 0 5px 12px !important;
}

.whiteBg .toggle-off {
    background-color: gray !important;
    color: white !important;
    padding: 5px 0;
}

.pnl .row {
    margin-top: 10px;
}
.pnlVrHeadTransAC .form-control, .pnlVrBody .form-control {
    /*height: 27px !important;*/
    height: 22px !important;
}
.pnlVrBody .form-control {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.ArialNarrowFont {
    /*font-size: 1.2rem;*/
    font-family: "Arial";
}

.form-control {
    color: #461e57 !important;
    /*font-size: inherit;*/
    font-size: 14px; /*0.9rem;*/ /*1rem;*/
    /*font-weight: bold;*/
    /*padding: .075rem .75rem;*/
    padding: 0 .75rem;
    height: 35px !important; /*calc(1.5em + .2rem + 2px);*/
    /*font-family: "Arial";*/
    font-family: sans-serif;
    caret-color: black;
}
    .form-control:disabled, .form-control[readonly] {
        /*color: maroon;*/
        /*border-color: gray;*/
        border-color: #ced4da;
        background-color: #E8E8E8; /*rgba(239, 239, 239, 0.3);*/
    }

/*.loginMob .form-control, .loginMob .input-group-text {
    font-size: 2rem;
}
    .loginMob .form-control{
        height: 60px;
    }

.loginMob .input-group-text {
    padding: .6rem 1rem;

}

.loginMob .input-group-prepend span {
    width: 80px;
}*/

.pnlHeader {
    background-color: #666666;
    font-weight: bold;
    font-size: large;
    color: #FFFFCC;
    height: 10%;
    width: 99%;
    font-family: Candara;
    font-style: italic;
    margin: 5px;
}

.pNLFoot {
    padding-top: 10px;
    padding-left: 10px;
    display: none;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

.bgEbonyClay {
    background-color: #692685 !important;
}




::-webkit-scrollbar {
    width: 0.7vw;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: silver;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #6d75e8;
    }


.sideBar::-webkit-scrollbar-track {
    background-color: #3C5CBF !important;
}


.sideBar::-webkit-scrollbar-thumb {
    background-color: #fff;
}

.sidemenuMob {
    overflow: auto;
}

.sidemenu {
    overflow: hidden;
    /*max-height: 610px;
    min-height: 610px;*/
    max-height: 77vh;
    min-height: 77vh;
}
    .sidemenu:hover {
        overflow: auto;
    }

.nav-side-menu {
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
    font-size: 13px !important; /*12px;*/
    font-weight: 200;
    /*position: fixed;
    top: 2%;
    left: 0;*/
    width: 96.5%;
    color: #e1ffff;
}

.height10Pct {
    height: 10% !important;
}

.height90Pct {
    height: 90% !important;
}

.height100Pct {
    height: 100% !important;
}

.modal-header .close {
    padding: 0 !important;
    margin: -0.5rem 0 -1rem auto !important;
    font-size: 2.5rem !important;
    font-weight: normal;
    color: white;
}

#mastersModalCenter .modal-dialog, #helpModalCenter .modal-dialog, #trnTFTModalCenter .modal-dialog, #helpModalCenter .modal-dialog {
    max-width: 95%;
    max-height: 95%;
    height: 95%;
}
    #mastersModalCenter .modal-dialog .modal-content, #helpModalCenter .modal-dialog .modal-content, #trnTFTModalCenter .modal-dialog .modal-content {
        height: 100%;
    }

table.dataTable {
    /*font-family: Arial;*/
    font-family: sans-serif !important;
    /*white-space: nowrap;
    overflow: hidden;
    table-layout: fixed;*/
}
    table .dataTable tbody td, table.dataTable thead td {
        /*color: #692685;*/
        color: #461e57;
    }
    table.dataTable thead th, table.dataTable tbody td, table.dataTable tfoot th, table.dataTable tfoot td {
        /*font-size: 15px !important;
        line-height: 1;*/
        font-size: 16px !important;
        font-weight: normal !important;
        line-height: 1.3;
    }
    table.dataTable thead th {
        background-color: #692685;
        color: white !important;
        border-right: 1px solid;
        /*font-size: 1rem;*/
    }

    table.dataTable tfoot th, table.dataTable tfoot td {
        background-color: #d7c8e0;
        color: #461e57 !important;
    }
    table.dataTable tbody td, table.dataTable thead td {
        /*font-size: 1.1rem;*/
        font-weight: normal;
    }
    table.dataTable tbody td {
        /*text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;*/
    }
    table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
        /*padding: 8px 10px !important;*/
        padding: 2px 10px !important;
    }

    table.dataTable tbody th, table.dataTable tbody td {
        padding: 5px 10px !important;
    }

    .mstTbl table.dataTable tbody th, .mstTbl table.dataTable tbody td {
        padding: 4px 10px !important;
    }

#divBS table.dataTable tbody th, #divBS table.dataTable tbody td {
    /*padding: 6px 10px !important;*/
    padding: 4px 10px !important;
}
    #tblBillRef thead th, #tblBillRef thead td {
        text-align: center !important;
    }

#divBS table.dataTable tbody td h5{
    margin-top: 4px;
}
    .tblMnthSummery.dataTable thead th, .tblMnthSummery.dataTable tbody td, .tblMnthSummery.dataTable tfoot th, #tblTrnsDetails.dataTable thead th, #tblTrnsDetails.dataTable tbody td, #tblTrnsDetails.dataTable tfoot th {
    font-size: 13px !important;
    /*font-weight: bold;*/
    color: #461e57;
    line-height: 1.4 !important; /*line-height: 1.2 !important;*/
}

    .tblRpt tbody td, .tblRpt thead th, .tblRpt tfoot th {
        /*font-size: 0.9rem !important;
    line-height: 1;*/
    }

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #f9f5fa !important;
}

table.dataTable.stripe tbody tr:hover, .theadTrhover:hover {
    background-color: #e7d0f5 !important;
}

table.dataTable.stripe tbody tr:hover {
    cursor: pointer;
}

    table.dataTable thead tr th:nth-child(2), tr td:nth-child(2), table.dataTable tfoot tr td:nth-child(2) {
        padding-left: 20px !important;
    }

table.dataTable thead tr th:last-child, tr td:last-child, table.dataTable tfoot tr td:last-child {
    padding-right: 20px !important;
}

#dvGv1 table.dataTable thead th, table.dataTable tbody td, table.dataTable tfoot th, table.dataTable tfoot td {
    /*font-size: 14px !important;*/
    font-size: 11px !important;
}
.modal-dialog {
    max-width: 100% !important;
}

.modal-content {
    margin: auto;
}

/*.modal-content, .modal-dialog table.dataTable tbody td {
    background-color: #1a0324 !important;
    color: white !important;
}*/

.badge-notify {
    background: red;
    position: relative;
    top: -10px;
    left: 5px;
    padding: 0 2px;
    /*font-size: 150%;*/
    border-radius: 10px;
    z-index: 999;
    font-weight: bold;
}
.nav-side-menu .brand {
    background-color: #23282e;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 14px;
}

.nav-side-menu .toggle-btn, .hideZeroValRows {
    display: none;
}
.showZeroValRows {
    display: table-row;
}

    .nav-side-menu ul, .nav-side-menu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        line-height: 33px;
        cursor: pointer;
    }

        .nav-side-menu ul :not(collapsed) .downarrow:before, .nav-side-menu li :not(collapsed) .downarrow:before {
            font-family: FontAwesome;
            content: "\f078";
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
            /*position: absolute;
            right: 10%;*/
        }

        .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before {
            font-family: FontAwesome;
            content: "\f054";
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }

        .nav-side-menu ul .active, .nav-side-menu li .active {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
        }

        .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active {
            color: #d19b3d;
        }

            .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a {
                color: #d19b3d;
            }

        .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li {
            background-color: #996fb0;
            border: none;
            line-height: 28px;
            border-bottom: 1px solid #23282e;
            margin-left: 0px;
        }

            .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover {
                background-color: #e7d0f5;
                color: black !important;
            }

                .nav-side-menu ul .sub-menu li:hover a, .nav-side-menu li .sub-menu li:hover a, .nav-side-menu ul .sub-menu li a:hover, .nav-side-menu li .sub-menu li a:hover {
                    color: #461e57 !important;
                }
            
            .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before {
                font-family: FontAwesome;
                content: "\f105";
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: middle;
            }

.nav-side-menu li {
    padding-left: 0px;
    /*border-left: 3px solid #692685 !important;
    border-bottom: 1px solid #692685 !important;*/
        }

        .nav-side-menu li a {
            text-decoration: none;
            color: #fff;
        }

            .nav-side-menu li a i {
                padding-left: 10px;
                width: 20px;
                padding-right: 20px;
            }

                .nav-side-menu li:hover {
                    border-left: 3px solid #d19b3d;
                    background-color: #4f5b69;
                    color: white !important;
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    -o-transition: all 1s ease;
                    /*-ms-transition: all 1s ease;*/
                    transition: all 1s ease;
                }

                    .nav-side-menu li:hover a {
                        color: white !important;
                    }
                .nav-side-menu li a:hover {
                    color: white !important
                }


.SubSubMenu {
    color: #d4b8e3 !important;
    padding-left: 15px;
}

.btnCloseMenu {
    color: white !important;
    opacity: 0.8 !important;
    position: absolute;
    right: 10%;
}
.checkbox {
    padding-left: 20px;
}

    .checkbox label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
    }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0;
            margin-left: -30px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 0;
            top: 0;
            margin-left: -25px;
            padding-left: 3px;
            padding-top: 2px;
            font-size: large;
            color: #555555;
        }

    .checkbox input[type="checkbox"] {
        opacity: 0;
        z-index: 1;
    }

        .checkbox input[type="checkbox"]:checked + label::after {
            font-family: "FontAwesome";
            content: "\f00c";
        }

.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff;
}

@media (max-width: 767px) {
    .nav-side-menu {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
    }

        .nav-side-menu .toggle-btn {
            display: block;
            cursor: pointer;
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 10 !important;
            padding: 3px;
            background-color: #ffffff;
            color: #000;
            width: 40px;
            text-align: center;
        }

    .brand {
        text-align: left !important;
        font-size: 22px;
        padding-left: 20px;
        line-height: 50px !important;
    }
}

.ui-accordion {
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
    max-height: 780px;
    overflow: auto;
}
    .ui-accordion .ui-accordion-header {
        /*font-family: Verdana !important;*/
        font-family: sans-serif !important;
        background: none;
        background-color: white;
        /*border: 0;*/
        color: #461e57;
        font-weight: normal;
        font-size: 14px;
    }

        .ui-accordion .ui-accordion-header .ui-state-active, .ui-autocomplete .ui-widget-header .ui-state-focus {
            background-color: white !important;
            color: #461e57 !important;
            font-weight: normal;
        }

    .ui-accordion .ui-widget-content {
        /*font-family: Verdana !important;*/
        font-family: sans-serif !important;
        background: none;
        /*border: 0;*/
        color: #461e57;
        font-weight: normal;
        font-size: 18px;
    }

.innerH3 {
    background-color: #461e57 !important;
    color: white !important;
    /*background-color: white !important;
    color: dimgray !important;*/
}

    .innerH3 .ui-widget-header .ui-state-active {
        background-color: #faf3c7 !important;
        color: dimgray !important;
    }

.ui-accordion .ui-accordion-content {
    padding: .1em 2.2em !important;
}

div.ui-accordion-content {
    /*overflow: auto !important;
    max-height: 650px;
    /*min-height: 350px;*/
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon, .ui-accordion-header-icon .ui-icon .ui-icon-triangle-1-s {
    display: none;
}

/*.ui-accordion.ui-accordion-header.fa-plus-square::before {
    color: #461e57 !important;
    background-color: white !important;
}*/

.fa-plus-square:before, .fa-minus-square:before {
    font-family: 'FontAwesome';
    /*color: white !important;
    border-color: white !important;
    background-color: #461e57 !important;*/
}
/*.ui-accordion-header.ui-state-hover,
.ui-accordion-header.ui-widget-content .ui-state-hover,
.ui-accordion-header.ui-widget-header .ui-state-hover {
    background: none;
    background-color: #faf3c7 !important;
    color: black;
}*/
.ui-autocomplete .ui-widget-content {
    font-size: 1rem;
    font-family: sans-serif;
    background: none;
    background-color: #faf3c7;
}
    .ui-autocomplete .ui-state-hover,
    .ui-autocomplete .ui-widget-content .ui-state-hover,
    .ui-autocomplete .ui-state-focus,
    .ui-autocomplete .ui-widget-content .ui-state-focus {
        background: none;
        background-color: #549BF5 !important;
        color: white;
        min-width: max-content !important;
    }

.ui-autocomplete .ui-state-active {
    font-size: 1rem;
    background-color: #461e57 !important;
    color: white !important;
    min-width: max-content !important;
}

.accordion-list {
    padding: 0 100px 60px 100px;
}
    .accordion-list ul {
        padding: 0;
        list-style: none;
    }
    .accordion-list li + li {
        margin-top: 15px;
    }
    .accordion-list li {
        padding: 20px;
        background: #fefefe;
        box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);
        border-radius: 4px;
    }
    .accordion-list a.collapsed {
        color: #343a40;
    }
    .accordion-list a {
        display: block;
        position: relative;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        padding-right: 30px;
        outline: none;
        cursor: pointer;
    }
    .accordion-list i {
        font-size: 24px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .accordion-list p {
        margin-bottom: 0;
        padding: 10px 0 0 0;
    }
    .accordion-list .icon-show {
        display: none;
    }
    .accordion-list a.collapsed {
        color: #343a40;
    }
        .accordion-list a.collapsed:hover {
            color: #009961;
        }
        .accordion-list a.collapsed .icon-show {
            display: inline-block;
        }
        .accordion-list a.collapsed .icon-close {
            display: none;
        }

@media (max-width: 767px) {
    .nav-side-menu .menu-list .menu-content {
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        height: 100%;
    }

    .navbar-collapse.collapsing {
        height: 100%;
        left: -75%;
        transition: height 0s ease;
    }

    .navbar-collapse.show {
        height: 100%;
        left: 0;
        transition: left 400ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 400ms ease-in;
    }

    .nav-side-menu {
        font-size: 18px !important;
        line-height: 2 !important;
        padding-left: 10px !important;
    }
    }
@media (min-width: 767px) {
    .nav-side-menu .menu-list .menu-content {
        display: block;
    }
}
.sw-theme-arrows > .nav .nav-link.done, .sw-theme-arrows > .nav .nav-link.inactive {
    background: none;
    background-color: lightblue !important;
    border-color: lightblue !important;
}

    .sw-theme-arrows > ul.step-anchor > li.done > a:after, .sw-theme-arrows > ul.step-anchor > li.inactive > a:after, .sw-theme-arrows > .nav .nav-link.done::after {
        border-left-color: lightblue !important;
    }

.sw-theme-arrows .step-content {
    background-color: #dfd3e6 !important;
}

.sw-theme-arrows > .nav .nav-link.active {
    background: none;
    background-color: #692685 !important;
    border-color: #692685 !important;
}

    .sw-theme-arrows > .nav .nav-link.active::after {
        border-left-color: #692685 !important;
    }

.sw-theme-arrows .toolbar > .btn, .sw-btn-prev, .sw-btn-next {
    background-color: #692685 !important;
    border-color: #692685 !important;
}

.dataTables_wrapper {
    width: 100% !important;
}

.modalMob .dataTables_wrapper {
    overflow: auto;
}

.modalMob table.dataTable thead th, .modalMob table.dataTable tfoot th {
    font-weight: normal;
}

/*#tblRightA_wrapper, #tblTrnsRights_wrapper, #tblMstRights_wrapper, #tblRptRights_wrapper {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}*/

.sw-theme-arrows > ul.step-anchor > li.done > a, .sw-theme-arrows > ul.step-anchor > li.inactive > a {
    background: none;
    background-color: gray !important;
    border-color: gray !important;
}

.sw-theme-arrows > ul.step-anchor > li.active > a {
    background: none !important;
    background-color: #461e57 !important;
    border-color: #461e57 !important;
}

    .sw-theme-arrows > ul.step-anchor > li.active > a:after {
        /*background-color: #461e57 !important;*/
        border-left-color: #461e57 !important;
    }

/*.modal-header .close {
    color: white;
    opacity: unset;
}*/

.mandatory {
    color: white !important;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
}

.snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 999999999999;
    font-size: 17px;
    background-color: #e7d0f5;
    color: black;
    left: 54%;
    top: 60px;
}

    .snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

#snackbar {
    left: 54%;
    top: 60px;
}

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 60px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 60px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 60px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 60px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

#snackbarMaster {
    left: 50%;
    top: 0;
}

    #snackbarMaster.show {
        visibility: visible;
        /*-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
    }

.select2-dropdown{
    z-index: 9999999999;
}

.select2-selection__rendered {
    text-align: left !important;
    font-weight: normal !important;
}

.select2-results__options, .select2-container--default .select2-results__option--selected {
    background-color: #e7d0f5;
    color: black;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #692685;
    color: white;
}

.select2-container--default .select2-selection--single {
    height: 100% !important;
    width: 100%;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    white-space: normal !important;
}

#select2-selComID-container {
    font-weight: bold;
    /*font-size: 1.4rem;*/
    /*font-size: 1.2rem;*/
}

#select2-selComID-container, #select2-selDivision-container, #selComID, #selDivision {
    background-color: #461e57 !important;
    color: white !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--multiple {
    width: 97%;
    height: 100% !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #e7d0f5;
        color: black;
    }

.mstHeader {
    /*max-width: 81% !important;
    min-width: 81% !important;*/
    text-align: left;
    max-width: 78% !important;
    flex: 0 0 78% !important;
    /*margin-top: -5px;*/
}

.mstbgAmericanPurple {
    text-align: left;
    /*max-width: 302px !important;*/
    max-width: 20% !important;
    flex: 0 0 20% !important;
    color: white !important;
    background-color: #692685 !important;
}

.bgAmericanPurple {
    /*max-width: 300px !important;*/
    max-width: 19.8% !important;
    flex: 0 0 19.8% !important;
    color: white !important;
    background-color: #692685 !important;
    margin-left: -15px;
}

.homeMob .dashcard {
    min-height: 800px !important;
    max-height: 800px !important;
}

.dashcard {
    /*/background: #dfd3e6 !important;
    color: #8042a6;*/
    padding: 10px;
    min-height: 210px;
    max-height: 210px;

    border-radius: 10px;
    border: none;
    position: relative;
    /*margin-bottom: 30px;*/
    box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}

    .dashcard h5, .card1 h5 {
        font-size: 15px;
        color: #8042a6;
    }

        .dashcard h5.total, .card1 h5.total {
            font-weight: bold;
        }

        .dashcard h5.total1, .card1 h5.total1 {
            font-weight: bold;
            color: #d694f2;
        }

.homeMob .dashcard h5, .card1 h5 {
    font-size: 15px;
}

    .dashcard h6 {
        color: #8042a6;
        font-size: 13px;
        line-height: 1.3;
    }

        .dashcard h6.total {
            font-weight: bold;
        }

.dvMgmtInfo .dashcard {
    min-height: 250px !important;
    max-height: 250px !important;
    box-shadow: none !important;
}

.card6 {
    min-height: 85px !important;
    max-height: 85px !important;
}

.card5 {
    cursor: pointer;
    min-height: 100px;
    max-height: 100px;
    background-color: #fff;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}

    .card5 .card-statistic-3 .card-icon-large .fas, .card5 .card-statistic-3 .card-icon-large .far, .card5 .card-statistic-3 .card-icon-large .fab, .card5 .card-statistic-3 .card-icon-large .fal {
        font-size: 110px;
    }

    .card5 .card-statistic-3 .card-icon {
        text-align: center;
        line-height: 50px;
        margin-left: 15px;
        color: #000;
        position: absolute;
        right: 15px;
        top: 20px;
        opacity: 0.1;
    }

    .card5 h5 {
        font-size: 1rem;
    }

    .card5 h6 {
        font-size: 0.8rem;
    }

#cards .card5 {
    margin: 0;
}

.chart {
    /*max-height: 250px;
    min-height: 250px;*/
    max-height: 210px;
    min-height: 210px;
    margin-top: -35px;
}

.chartMob {
    padding-left: 10px;
    max-height: 220px;
    min-height: 220px;
    margin: -35px auto auto !important;
}

.prodChart {
    max-height: 290px;
    min-height: 290px;
    margin-top: -35px;
}

.prjchart {
    max-height: 250px;
    min-height: 200px;
}

.doughnutChrt {
    /*max-width: 280px;
    min-width: 230px; 
    max-height: 280px;
    min-height: 230px;*/
    max-width: 280px;
    min-width: 210px;
    max-height: 280px;
    min-height: 210px;
    /*margin-left: -70px;
    margin-top: -50px;*/
}

.doughnutChrtMob {
    max-width: 250px;
    min-width: 200px;
    max-height: 250px;
    min-height: 200px;
    padding-left: 10px;
    margin: -50px auto auto !important;
    /*margin-left: -70px;
    margin-top: -50px;*/
}

.l-bg-cherry {
    background: #fff; /*linear-gradient(to right, #be84e3, #8f07e6) !important;*/
    color: #8042a6;
}

.l-bg-blue-dark {
    background: #fff; /*linear-gradient(to right, #373b44, #4286f4) !important;*/
    color: #8042a6;
}

.l-bg-green-dark {
    background: #fff; /*linear-gradient(to right, #0a504a, #38ef7d) !important;*/
    color: #8042a6;
}

.l-bg-orange-dark {
    background: #fff; /*linear-gradient(to right, #a86008, #ffba56) !important;*/
    color: #8042a6;
}

.l-bg-cyan {
    background: #ceb4de; /*linear-gradient(135deg, #289cf5, #84c0ec) !important;*/
    color: #fff;
}

.l-bg-green {
    background: #ceb4de; /*linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;*/
    color: #fff;
}

.l-bg-orange {
    background: #ceb4de; /*linear-gradient(to right, #f9900e, #ffba56) !important;*/
    color: #fff;
}

.dashcard .dashcard-statistic-3 .dashcard-icon-large .fa, .dashcard .dashcard-statistic-3 .dashcard-icon-large .far, .dashcard .dashcard-statistic-3 .dashcard-icon-large .fab, .dashcard .dashcard-statistic-3 .dashcard-icon-large .fal {
    font-size: 110px;
}

.dashcard .dashcard-statistic-3 .dashcard-icon {
    text-align: center;
    line-height: 50px;
    margin-left: 15px;
    color: #000;
    position: absolute;
    right: 15px;
    top: 20px;
    opacity: 0.1;
}

.card {
    background-color: #461e57 !important;
    /*background-color: #dfd3e6 !important;*/
}


    .card h3, .card span {
        color: white; /*#461e57 !important;*/
    }

.btn {
    display: inline-block;
    background: #692685;
    color: #fff;
    border: none;
    text-transform: uppercase;
    /*padding: 0;10px 30px;*/
    font-size: 0.7rem;
    font-weight:bold;
    /*border-radius: 5px;*/
    box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    
    -webkit-moz-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

    .btn:hover {
        color: white;
        box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
        -webkit-moz-transform: translate(0px, -5px) scale(1.1);
        transform: translate(0px, -5px) scale(1.1);
    }

    .btn-label {
        position: relative;
        left: -12px;
        display: inline-block;
        padding: 12px 10px;
        background: rgba(0,0,0,0.15);
        border-radius: 3px 0 0 3px;
    }

.btnSave {
    padding: 10px 50px 10px 12px !important;
}

    .btnSave .btn-label {
        padding: 10px;
    }

.btn-labeled {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: left !important;
}

.autoWidth {
    width: auto;
}

#empInfo div {
    margin-bottom: 10px;
    font-size: 18px;
}

#ListCashBank h3, #ListCashBank h5 {
    /*font-family: Verdana !important;*/
    font-family: sans-serif !important;
}

.clsDocCaption {
    min-height: 7%;
    background-color: #996fb0;
    color: white;
    font-size: 0.9rem;
    padding: 5px;
    font-weight: normal;
    vertical-align: bottom;
    border: 1px solid #dee2e6;
    border-bottom-width: 2px;
}

#smartwizard input[type="search"] {
    color: white !important;
}

.dataTables_filter {
    margin-right: 20px;
}
/*.has-float-label{
    z-index: 99;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
    font-size: 75% !important;
    opacity: 1 !important;
    top: -.5em !important;
}

    .has-float-label label, .has-float-label > span {
        padding: 2px 2px;
        background-color: #996fb0;
        color: white;
        width: 90%;
    }

        .has-float-label label::after, .has-float-label > span::after {
            content: none;
        }*/


.tab-pane .dataTables_wrapper .dataTables_length, .tab-pane .dataTables_wrapper .dataTables_filter, .tab-pane .dataTables_wrapper .dataTables_info, .tab-pane .dataTables_wrapper .dataTables_processing, .tab-pane .dataTables_wrapper .dataTables_paginate {
    color: white;
    font-size: 15px;
}

.dtDMYWithDash {
    width: 120px;
    /*text-align: right;*/
}

.rpt .h2, h2 {
    font-size: 1.5rem;
}

.rpt .h4 {
    font-size: 1.3rem;
}

.rpt .ttl {
    color: white;
    font-size: 14px;
    font-weight: bold !important;
    background-color: #692685;
}

#prodNm {
    color: gold;
    /*margin-top: -30px;
    margin-left: 155px;*/
    margin-top: -18px;
    /*margin-left: 200px;*/
    margin-left: 165px;
    font-size: 12px;
    width: 100px;
    position: relative;
    z-index: 6;
}

.AddMstBtn {
    border-radius: 0;
}

.PNLLogin, #loginOTPModalCenter {
    /*left: 30%;
    top: 30%;
    width: 30%;*/
    /*left: 12%;
    top: 21%;
    width: 75%;*/
    width: 90%;
    position: absolute;
    border-top-left-radius: 1.75rem;
    border-bottom-right-radius: 1.75rem;
    margin: 12% 2% !important;
}

.PNLLogin {
    z-index: 20;
}

#loginOTPModalCenter {
    z-index: 10000;
}

.btnCtrlInHeader {
    margin-left: 20px;
    padding: .175rem .75rem !important;
}

.fw-normal{
    font-weight:normal !important;
}

.fw-bold {
    font-weight: bold !important;
}

.textAlignRight{
    text-align: right;
}

.ttl{

}

#tblBS .ttl, #tblBS td, #tblBSDet .ttl, #tblBSDet td, #tblIStat .ttl, #tblIStat td, #tblIStatDet .ttl, #tblIStatDet td, #tblCF .ttl, #tblCF td, #tblTB .ttl, #tblTB td {
    font-size: 16px !important;
    font-family: 'Microsoft Sans Serif' !important;
    color: #461e57;
}

#tblTB .ttl, #tblTB td {
    font-size: 15px !important;
}

#dvBalanceSheet h1, #dvBalanceSheet h2, #dvBalanceSheet h3, #dvBalanceSheet h4, #dvBalanceSheet h5, #dvBalanceSheet h6,
#dvIncomeStatement h1, #dvIncomeStatement h2, #dvIncomeStatement h3, #dvIncomeStatement h4, #dvIncomeStatement h5, #dvIncomeStatement h6 {
    font-size: inherit !important;
    font-weight: bold;
}

.dropdown-menu{
    width: auto;
    max-height: 500px;
    overflow: hidden auto;
}

    .dropdown-menu li {
        background-color: #e7d0f5;
        color: #461e57 !important;
    }
        .dropdown-menu li:hover, .dropdown-menu li:hover div {
            background-color: #461e57;
            color: white !important;
        }

        .dropdown-menu li a {
            text-decoration: none;
            color: #461e57 !important;
            position: relative;
        }

            .dropdown-menu li a:hover {
                background-color: #461e57;
                color: white!important;
            }

        .dropdown-menu li input, input[type="checkbox"] {
            height: 20px;
            width: 20px; 
            margin: 5px 10px;
        }

        .dropdown-menu li div {
            /*display: table-caption;*/
            min-width: 300px;
            display: block;
            position:absolute;
            top: -8px;
            left: 35px;
        }

            .dropdown-menu li div.dvPrjActivity {
                min-width: 810px !important;
            }

            .dropdown-menu li div.dvGRNType, .dropdown-menu li div.dvDOType {
                min-width: 810px !important;
            }

            .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
                color: white !important;
                background-image: none !important;
                background-color: #461e57 !important;
            }

        #ul_SecUnitNm li div {
    width: 80% !important;
}

#dvLvls .dropdown-menu {
    background-color: #e7d0f5 !important;
}

#dvLvls .dropdown-menu li {
    width: 300px;
    clear: both;
}

    #dvLvls .dropdown-menu li a {
        text-decoration: none;
        background-color: #e7d0f5 !important;
        color: #461e57 !important;
    }

        #dvLvls .dropdown-menu li a:hover, #dvLvls .dropdown-menu li a:hover div {
            background-color: #461e57 !important;
            color: white !important;
        }

    #dvLvls .dropdown-menu li input {
        float: left;
        margin: 10px 5px 10px 20px;
    }

    #dvLvls .dropdown-menu li div {
        width: 75%;
        float: left;
        padding: 10px 5px;
        background-color: #e7d0f5 !important;
        color: #461e57 !important;
    }

.jqte {
    width: 100%;
}


.progress {
    width: 85px;
    height: 85px !important;
    float: left;
    line-height: 150px;
    background: none;
    margin: 5px 45% 10px;
    box-shadow: none;
    position: relative;
    background-color: transparent !important; /*#461e57 !important;*/
}

    .progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 12px solid dimgray; /*#fff*/
        position: absolute;
        top: 0;
        left: 0
    }

    .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1
    }

    .progress .progress-left {
        left: 0
    }

    .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 12px;
        border-style: solid;
        position: absolute;
        top: 0
    }

    .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left
    }

    .progress .progress-right {
        right: 0
    }

        .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
            animation: loading-1 1.8s linear forwards
        }

    .progress .progress-value {
        width: 90%;
        height: 90%;
        border-radius: 50%;
        /*background: #000;*/
        font-size: 18px;
        color: #461e57 !important; /*#fff;*/
        line-height: 135px;
        text-align: center;
        position: absolute;
        top: -25%;
        left: 5%
    }

    .progress.blue .progress-bar {
        border-color: #049dff
    }

    .progress.blue .progress-left .progress-bar {
        animation: loading-2 1.5s linear forwards 1.8s
    }

    .progress.blue .progress-left .progress-bar {
        animation: none
    }

    .progress.yellow .progress-bar {
        border-color: #fdba04
    }

    .progress.yellow .progress-right .progress-bar {
        animation: loading-3 1.8s linear forwards
    }

    .progress.yellow .progress-left .progress-bar {
        animation: none
    }

    .progress.gold .progress-bar {
        border-color: goldenrod;
    }

    .progress.gold .progress-right .progress-bar {
        animation: loading-3 1.8s linear forwards
    }

    .progress.gold .progress-left .progress-bar {
        animation: none
    }



    .progress.orange .progress-bar {
        border-color: #ff5821;
    }

    .progress.orange .progress-right .progress-bar {
        animation: loading-3 1.8s linear forwards
    }

    .progress.orange .progress-left .progress-bar {
        animation: none
    }

input[type="text"]:focus, input[type="number"]:focus {
    background-color: khaki !important;
}

    input[type="text"]:focus.ddlItmNotFound, input[type="number"]:focus.ddlItmNotFound {
        /*background-color: indianred !important;*/
        background-color: #f87970 !important;
    }

.dvQuickInfo {
    /*min-height: 90% !important;
    max-height: 90% !important;*/
    min-height: 100% !important;
    max-height: 100% !important;
    /*overflow-x: hidden;
    overflow-y: auto;*/
    /*box-shadow: 0 2px 15px gray;*/
    width: 100%;
    display: inline-block;
    /*padding: 2%;*/
    margin-top: 10px;
}

.dvMgmtInfo {
    /*min-height: 85% !important;
    max-height: 85% !important;*/
    min-height: 83vh !important;
    max-height: 83vh !important;
    padding: 1% !important;
    box-shadow: 0 2px 15px gray;
    width: 96%;
    margin: auto 2%;
    overflow: hidden auto;
}

.dropdown-menu.show {
    transform: unset !important;
    top: 30px !important;
    /*left: 200px !important;*/
    left: 130px !important;
    padding: 0 !important;
    width: -webkit-fill-available !important;
}

.ulprjActivity.dropdown-menu.show {
    left: 214px !important;
    width: 75% !important
}

.ulGRNType.dropdown-menu.show {
    left: 200px !important;
    width: 75% !important
}

.ulDOType.dropdown-menu.show {
    left: 97px !important;
    width: 75% !important
}

#ul_ShowInPayrollSalComp.dropdown-menu.show {
    left: 34% !important;
    width: 66% !important;
    max-height: 120px !important;
}

#ul_SalComp.dropdown-menu.show {
    left: 34% !important;
    width: 66% !important;
    max-height: 85px !important;
}

.rptCurr {
    font-size: 14px !important;
}

#dvQuery div {
    margin-bottom: 10px;
}

.ms-options-wrap {
    min-width: 400px;
    max-width: 400px;
}

.act-tr-collapsed span, .act-tr-expanded span {
    font-size: 30px;
    font-weight: bold;
    color: goldenrod;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
    background: url("../Images/hero-bg.jpg") top center;
    background-size: cover;
    position: relative;
    margin-bottom: -90px;
    z-index: 99;
    transition: 0.3s;
}

    #hero:before {
        content: "";
        background: rgba(149, 72, 194, 0.9);
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }
    #hero .carousel-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    #hero h2 {
        color: #fff;
        margin-bottom: 30px;
        font-size: 48px;
        font-weight: 700;
    }

    #hero p {
        width: 80%;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
        margin: 0 auto 30px auto;
        color: #fff;
    }

    #hero .carousel-control-prev, #hero .carousel-control-next, #screenshot .carousel-control-prev, #screenshot .carousel-control-next {
        width: 10%;
    }

    #hero .carousel-control-next-icon, #hero .carousel-control-prev-icon, #screenshot .carousel-control-next-icon, #screenshot .carousel-control-prev-icon {
        background: none;
        color: white;
        font-size: 48px;
        line-height: 1;
        width: auto;
        height: auto;
    }
@media (min-width: 1024px) {
    #hero p {
        width: 60%;
    }

    #hero .carousel-control-prev, #hero .carousel-control-next {
        width: 5%;
    }
}

@media (max-width: 768px), (max-height: 700px) {
    #hero {
        height: 120vh;
        padding: 100px 0;
    }

        #hero h2 {
            font-size: 28px;
        }
}

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

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    z-index: 997;
    height: 70px;
    top: 60px;
}

    #header.header-scrolled {
        background: rgba(5, 87, 158, 0.9);
        top: 0;
    }

    #header .logo {
        font-size: 30px;
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

        #header .logo a {
            color: #fff;
        }

        #header .logo img {
            max-height: 50px;
        }

.header-inner-pages {
    background: rgba(5, 87, 158, 0.9) !important;
}

.topbar-inner-pages {
    background: rgba(6, 98, 178, 0.9) !important;
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
    height: 60px;
    padding: 0;
    font-size: 14px;
    transition: all 0.5s;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    z-index: 996;
}

    #topbar.topbar-scrolled {
        top: -60px;
    }

#secLogin {
    margin-top: -530px;
    z-index: 100;
    position: relative;
}

    #secLogin .dvLogin {
        background-color: #692685 !important;
        z-index: 5;
        margin-top: 125px;
        border-top-left-radius: 2.75rem !important;
        margin-left: -59px;
        border-bottom-right-radius: 2.75rem !important;
        margin-bottom: 25px;
        max-width: 32% !important;
        height: 525px;
    }




/* HAMBURGER STYLES ----- */
.sideBar {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

/* MENU CONTAINER ----- */
.sideBar {
    background: rgba(0,20,60,.9);
    height: 91.5%;
    left: -17%;
    position: fixed;
    top: 10%;
    /*width: 285px;*/
    /*width: 19.5% !important;*/
    width: 19.45% !important;
    z-index: 9999999999;
}

    .sideBar .container {
        padding: 0 1em;
    }

.burger_box {
    display: block;
    float: left;
    margin-left: 5px;
    margin-top: 25px;
    z-index: 10;
    position: relative;
}

    .burger_box a.menu-icon {
        display: inline-block;
        float: none;
        height: 35px;
        padding: 10px;
        opacity: .5;
        width: 35px;
        z-index: 100;
    }

        .burger_box a.menu-icon:hover,
        .burger_box a.menu-icon.opened {
            opacity: 1;
        }

        .burger_box a.menu-icon.opened {
            background: #692685 !important;
        }

    .burger_box .menu-icon_box {
        display: inline-block;
        height: 35px;
        position: relative;
        text-align: left;
        width: 35px;
    }

    .burger_box .menu-icon_line {
        background: #fff;
        border-radius: 2px;
        display: inline-block;
        height: 3px;
        position: absolute;
        width: 100%;
    }

    .burger_box .menu-icon_line--1 {
        top: 2px;
    }

    .burger_box .menu-icon_line--2 {
        top: 10px;
    }

    .burger_box .menu-icon_line--3 {
        top: 18px;
    }

    .burger_box .menu-icon_line--1 {
        transition: top 200ms 250ms, transform 200ms;
        -webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
    }

    .burger_box .menu-icon_line--2 {
        transition: opacity 0ms 300ms;
        -webkit-transition: opacity 0ms 300ms;
    }

    .burger_box .menu-icon_line--3 {
        transition: top 100ms 300ms, transform 200ms;
        -webkit-transition: top 100ms 300ms, -webkit-transform 200ms;
    }

    .burger_box .menu-icon.opened .menu-icon_box {
        transform: scale3d(0.9, 0.9, 0.9);
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
    }

    .burger_box .menu-icon.opened .menu-icon_line {
        top: 10px;
    }

    .burger_box .menu-icon.opened .menu-icon_line--1 {
        transform: rotate3d(0, 0, 1, 45deg);
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transition: top 100ms, transform 200ms 250ms;
        -webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
    }

    .burger_box .menu-icon.opened .menu-icon_line--2 {
        opacity: 0;
        transition: opacity 200ms;
        -webkit-transition: opacity 200ms;
    }

    .burger_box .menu-icon.opened .menu-icon_line--3 {
        transform: rotate3d(0, 0, 1, -45deg);
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transition: top 200ms, transform 200ms 250ms;
        -webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
    }

    .burger_box .lines {
        -moz-transition: background 0.2s ease 0.4s;
        -o-transition: background 0.2s ease 0.4s;
        -webkit-transition: background 0.2s ease;
        -webkit-transition-delay: 0.4s;
        transition: background 0.2s ease 0.4s;
        display: block;
        width: 100%;
        height: 2px;
        background: #aaa;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        width: 60%;
        margin: 0 20%;
        position: relative;
        background: #ffffff;
        top: 15px;
    }

        .burger_box .lines:before,
        .burger_box .lines:after {
            display: block;
            width: 100%;
            height: 2px;
            background: #aaa;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            position: absolute;
            left: 0;
            content: '';
            background: #ffffff;
            -moz-transition: -moz-transform 0.2s ease 0s, width 0.2s ease 0.2s, top 0.2s ease 0.4s;
            -o-transition: -o-transform 0.2s ease 0s, width 0.2s ease 0.2s, top 0.2s ease 0.4s;
            -webkit-transition: -webkit-transform 0.2s ease, width 0.2s ease, top 0.2s ease;
            -webkit-transition-delay: 0s, 0.2s, 0.4s;
            transition: transform 0.2s ease 0s, width 0.2s ease 0.2s, top 0.2s ease 0.4s;
            -moz-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        .burger_box .lines:before {
            top: -8px;
        }

        .burger_box .lines:after {
            top: 8px;
        }

    .burger_box .menu-icon.opened .lines {
        -moz-transition: background 0.2s ease 0s;
        -o-transition: background 0.2s ease 0s;
        -webkit-transition: background 0.2s ease;
        -webkit-transition-delay: 0s;
        transition: background 0.2s ease 0s;
    }

        .burger_box .menu-icon.opened .lines:before,
        .burger_box .menu-icon.opened .lines:after {
            -moz-transition: top 0.2s ease 0s, width 0.2s ease 0.2s, -moz-transform 0.2s ease 0.4s;
            -o-transition: top 0.2s ease 0s, width 0.2s ease 0.2s, -o-transform 0.2s ease 0.4s;
            -webkit-transition: top 0.2s ease, width 0.2s ease, -webkit-transform 0.2s ease;
            -webkit-transition-delay: 0s, 0.2s, 0.4s;
            transition: top 0.2s ease 0s, width 0.2s ease 0.2s, transform 0.2s ease 0.4s;
            top: 0;
            width: 50%;
        }

        .burger_box .menu-icon.opened .lines:before {
            -moz-transform: rotate3d(0, 0, 1, 45deg);
            -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
        }

        .burger_box .menu-icon.opened .lines:after {
            -moz-transform: rotate3d(0, 0, 1, -45deg);
            -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
        }

.tree td img {
    height: 20px;
    width: 20px;
}
.tree td div {
    height: 40px;
}
.tree td a {
    cursor: default;
}
.tree td a:hover {
    color: inherit;
    text-decoration: none;
}
.tree tr:has(.root) {
    display: none;
}
/*.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl+-*/


.loginBgImg {
    background: linear-gradient(0deg, rgba(149, 72, 194, 0.85), rgba(149, 72, 194, 0.85)), url('../Images/Syspics/SysiloLoginBack.jpg') center center;
    background-size: 115% 90%;
    background-repeat: no-repeat;
    background-position-x: -178px;
    background-position-y: -64px;
}

.loginOuterBox {
    background-color: #692685 !important;
    z-index: 5;
    margin-top: 125px;
    border-top-left-radius: 2.75rem !important;
    margin-left: -59px;
    border-bottom-right-radius: 2.75rem !important;
    margin-bottom: 25px;
    max-width: 32% !important;
}

.pnlNarr {
    background-color: #996fb0;    
}

.pnlNarrCtrl {
    padding: 6px 0;
    background-color: #996fb0;
    margin-left: 10px;
}

.clrGoldenRod {
    color: darkgoldenrod !important;
}

.costClr {
    color: #662a80 !important;
}

.lstQuotsForCompare{
    width: 98%;
}

    .lstQuotsForCompare div {
        width: 80%;
        float: left;
    }

    .lstQuotsForCompare .delete-btn {
        margin-top: 5px;
    }

.GnAClr {
    color: #a551c9 !important;
}

.btnMob {
    padding: 5px 15px !important;
}

.dashBrdInvData {
    /*font-family: Arial;*/
    font-family: sans-serif !important;
    font-size: 18px;
    line-height: 1.7;
    color: #692685;
}

.importDataGridHeader {
    background-color: #692685;
    color: white;
}

.ms-options-wrap > .ms-options > ul label{
    padding-left: 30px !important;
}

[class~=group] {
    position: relative;
    margin-bottom: 1.25pc;
    clear: both;
}

[class~=bar] {
    width: 100%;
    display: block;
    position: relative;
}

    [class~=highlight], [class~=bar]:before {
        position: absolute;
    }

    [class~=bar]:before {
        content: "";
        width: 0;
        height: 1.5pt;
        background: black;
        left: 50%;
        bottom: .010416667in;
        transition: .2s ease all;
        -moz-transition: .2s ease all;
        -webkit-transition: .2s ease all;
    }

    [class~=bar]:after {
        content: "";
        width: 0;
        height: 1.5pt;
        position: absolute;
        right: 50%;
        bottom: .010416667in;
        background: black;
        transition: .2s ease all;
        -moz-transition: .2s ease all;
        -webkit-transition: .2s ease all;
    }


[class~=highlight] {
    width: 1.041666667in;
    height: 60%;
    top: 25%;
    left: 0;
    opacity: .5;
    pointer-events: none;
}

#coFormationModalCenter .saveBtn {
    text-align: center !important;
}

#coFormationModalCenter label {
    position: absolute;
    pointer-events: none;
    left: .260416667in;
    top: 10px;
    background-color: transparent;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all;
}

#coFormationModalCenter input {
    width: 100%;
    background-color: transparent;
    padding-left: 5%;
    border-color: transparent;
    border-bottom-color: black;
}

    #coFormationModalCenter input:focus {
        outline: none;
    }

        #coFormationModalCenter input:focus ~ label, #coFormationModalCenter input:valid ~ label, #coFormationModalCenter label.disabled {
            top: -11.25pt;
            left: 0.4375pc !important;
        }

        #coFormationModalCenter input:focus ~ .highlight {
            -webkit-animation: inputHighlighter .3s ease;
            -moz-animation: inputHighlighter .3s ease;
            animation: inputHighlighter .3s ease;
        }

        #coFormationModalCenter input:focus ~ [class~=bar]:after, #coFormationModalCenter input:focus ~ [class~=bar]:before {
            width: 50%;
        }