@charset "utf-8";
/* CSS Document */
.sprite {
    background: url(../images/sprite.png) no-repeat;
}

.wrapper {
    width: 1184px;
    margin: auto;
}

/*START CSS FOR HEADER LEFT SECTION*/
header .headerPart {
    /*height:99px;*/
    border-bottom: #dee0d1 1px solid;
    width: 100%;
    display: table;
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f1f1f0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%, #f1f1f0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f1f1f0', GradientType=0 ); /* IE6-9 */
}

    header .headerPart .sectionLeft {
        position: relative;
    }

        header .headerPart .sectionLeft .PortalDesciption {
            float: left;
            border-right: #bdbdbd 1px solid;
            margin: 20px 0 0 0;
            padding: 0 20px 15px 0;
        }

        header .headerPart .sectionLeft .portalName {
            display: block;
            font-size: 32px;
        }

        header .headerPart .sectionLeft .date {
            display: block;
            color: #9e9e9e;
            font-size: 12px;
        }

        header .headerPart .sectionLeft .welcomeNote {
            margin: 20px 0 0 20px;
            color: #434343;
            font-size: 14px;
            display: block;
        }

            header .headerPart .sectionLeft .welcomeNote a {
                width: 70px;
                margin-left: 5px;
            }


    /*START CSS FOR HEADER FILTER*/
    header .headerPart .sectionRight {
        float: left;
    }

        header .headerPart .sectionRight .headerFilter {
            float: left;
            margin: 5px 0 0 20px;
        }

            header .headerPart .sectionRight .headerFilter .formVerticalRow {
                width: 150px;
                float: left;
                clear: none;
            }

                header .headerPart .sectionRight .headerFilter .formVerticalRow label {
                    font-size: 13px;
                    float: left;
                    margin: 5px 5px 0 0;
                }

                header .headerPart .sectionRight .headerFilter .formVerticalRow select {
                    width: 90px;
                }

    header .headerPart .logo {
        margin-top: 5px;
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }


/*START CSS FOR NAVIGATION*/
header > nav {
    height: 50px;
    background: #12295d; /* Old browsers */
    background: -moz-linear-gradient(top, #12295d 0%, #071538 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #12295d), color-stop(100%, #071538)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #12295d 0%, #071538 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #12295d 0%, #071538 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #12295d 0%, #071538 100%); /* IE10+ */
    background: linear-gradient(to bottom, #12295d 0%, #071538 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12295d', endColorstr='#071538', GradientType=0 ); /* IE6-9 */
}

    header > nav .wrapper > ul > li {
        float: left;
        margin: 12px 10px 0 0;
        position: relative;
    }

    header > nav > .wrapper > ul > li > a {
        display: inline-block;
        padding: 9px 8px;
        /*background:red;*/
        color: #fff;
        font-size: 18px;
        -webkit-border-top-left-radius: 7px;
        -webkit-border-top-right-radius: 7px;
        -moz-border-radius-topleft: 7px;
        -moz-border-radius-topright: 7px;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    header > nav > .wrapper > ul > li:hover > a {
        background: #fff;
        color: #092150;
        text-decoration: none;
    }

    header > nav > .wrapper > ul > li > a.selected {
        background: #fff;
        color: #092150;
        text-decoration: none;
    }

    header > nav > .wrapper > ul > li > ul {
        position: absolute;
        margin: 0;
        padding: 0;
        line-height: none;
        left: 0;
        top: 0;
        display: none;
    }

    header > nav > .wrapper > ul > li:hover ul {
        position: absolute;
        margin: 0;
        padding: 0;
        line-height: none;
        min-width: 200px;
        left: 0;
        top: 35px;
        display: block;
        background: #fff;
        z-index: 20;
        border-bottom: #12295d 2px solid;
        -webkit-border-top-right-radius: 7px;
        -moz-border-radius-topright: 7px;
        border-top-right-radius: 7px;
        overflow: hidden;
    }

        header > nav > .wrapper > ul > li:hover ul li {
            padding: 5px 22px;
        }

            header > nav > .wrapper > ul > li:hover ul li:hover {
                background: #f1f1f0;
            }

            header > nav > .wrapper > ul > li:hover ul li a {
                text-decoration: none;
            }


/*summar grid*/
.summaryGrid {
    margin: 20px 0 20px 0;
}

#GridView1Wrapper {
    border: #bdbcbd 1px solid;
}

footer {
    position: fixed;
    bottom: 0;
    height: 20px;
    width: 100%;
    font-size: 10px;
    line-height: 20px;
    border-top: #bcbcbc 1px solid;
    border-bottom: #bcbcbc 1px solid;
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f1f1f0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%, #f1f1f0 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%, #f1f1f0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f1f1f0', GradientType=0 ); /* IE6-9 */
}

.loginBox {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border: #bdbdbd 1px solid;
    width: 310px;
    height: 210px;
    padding: 15px;
    background: #fff;
    margin: auto;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}


/*CSS FOR LEGENDS*/
.legend {
    margin: 0;
    padding: 0;
    line-height: none;
}

    .legend li {
        clear: both;
        margin: 0 0 5px 0;
        float: left;
    }

        .legend li span.color {
            width: 12px;
            height: 12px;
            display: inline-block;
            float: left;
            margin: 2px 0 0 0;
        }

        .legend li span.colorDescription {
            float: left;
            margin: 0 0 0 10px;
            font-size: 11px;
        }

/*CSS FOR POPUP*/
.overlay {
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: #000;
    opacity: 0.4;
    filter: alpha(opacity = 40);
}

#popup {
    width: 386px;
    height: 210px;
    position: fixed;
    background-color: #ffffff;
    border: #092150 1px solid;
    /* To align popup window at the center of screen*/
    /*top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -150px;*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 9999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
}

    #popup .popHeader {
        background: #12295d; /* Old browsers */
        background: -moz-linear-gradient(top, #12295d 0%, #071538 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #12295d), color-stop(100%, #071538)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #12295d 0%, #071538 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #12295d 0%, #071538 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #12295d 0%, #071538 100%); /* IE10+ */
        background: linear-gradient(to bottom, #12295d 0%, #071538 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12295d', endColorstr='#071538', GradientType=0 ); /* IE6-9 */
        color: #fff;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
    }

        #popup .popHeader .popHeading {
            display: inline-block;
            float: left;
        }

        #popup .popHeader .iconClose {
            display: inline-block;
            float: right;
            width: 18px;
            height: 18px;
            background: url(../images/iconClose.png) no-repeat 0 0;
        }

            #popup .popHeader .iconClose:hover {
                background-position: right 0;
            }

    #popup .popupContent {
        clear: both;
        padding: 5px 10px;
        height: 120px;
        overflow-y: auto;
    }

    #popup .popFooter {
        background: #dbdbdb;
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
        border-top: #aaaaaa 1px solid;
        text-align: right;
    }

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}


/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}


#divInvalidValuePopup {
    width: 386px;
    height: 210px;
    position: fixed;
    background-color: #ffffff;
    border: #092150 1px solid;
    /* To align popup window at the center of screen*/
    /*top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -150px;*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 9999999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
}

    #divInvalidValuePopup .popHeader {
        background: #12295d; /* Old browsers */
        background: -moz-linear-gradient(top, #12295d 0%, #071538 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #12295d), color-stop(100%, #071538)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #12295d 0%, #071538 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #12295d 0%, #071538 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #12295d 0%, #071538 100%); /* IE10+ */
        background: linear-gradient(to bottom, #12295d 0%, #071538 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12295d', endColorstr='#071538', GradientType=0 ); /* IE6-9 */
        color: #fff;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
    }

        #divInvalidValuePopup .popHeader .popHeading {
            display: inline-block;
            float: left;
        }

        #divInvalidValuePopup .popHeader .iconClose {
            display: inline-block;
            float: right;
            width: 18px;
            height: 18px;
            background: url(../images/iconClose.png) no-repeat 0 0;
        }

            #divInvalidValuePopup .popHeader .iconClose:hover {
                background-position: right 0;
            }

    #divInvalidValuePopup .popupContent {
        clear: both;
        padding: 5px 10px;
        height: 120px;
        overflow-y: auto;
    }

    #divInvalidValuePopup .popFooter {
        background: #dbdbdb;
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
        border-top: #aaaaaa 1px solid;
        text-align: right;
    }

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}


/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

.mandatory {
    color: red;
    /*font-weight: bold;*/
}

.bold {
    font-weight: bold;
}

.errorMessage {
    color: red;
    font-size: small;
}

.loadingWindow {
    position: absolute;
    background: #000 url(../Images/loading_image.GIF) center center no-repeat;
    z-index: 100000;
    left: 0;
    top: 0;
    opacity: 0.8;
    width: 100%;
    height: 100%;
}

.hide {
    display: none;
}

th {
    text-align: center !important;
}


input {
    text-align: left;
}

.summaryGrid {
    overflow: hidden;
    overflow-x: auto;
}

.firstColumnOfGrid {
    background-color: #f5f7df;
}

.GridviewScrollHeader TH {
    word-space: normal !important;
}

.dpcHeader {
    text-align: center;
    background-color: darkgrey;
    color: black;
    font-size: larger;
}

.summaryGrid table tr td input[type="text"] {
    background-color: lightyellow;
    color: #000000;
    max-width: 150px;
}

.summaryGrid table tr td input[data-type="numeric"] {
    text-align: right;
}

.summaryGrid table tr td input[data-type="decimal"] {
    text-align: right !important;
}

.summaryGrid table tr td {
    text-align: right;
}

.summaryGrid table tr th {
    /*max-width: 195px;*/
    text-align: center;
    white-space: normal;
    vertical-align: middle;
}

.GridviewScrollItem input[type='text'] {
    padding: 0 2px 0 0;
}

.GridviewScrollItem input[type="text"] {
    width: 85px !important;
}

.GridviewScrollItem input[data-type="numeric"] {
    width: 55px !important;
}

.GridviewScrollItem input[data-type="decimal"] {
    width: 55px !important;
}

#tblDPCInput input[data-type="decimal"] {
    width: 55px !important;
}

.GridviewScrollItem input[data-type="datetime"] {
    width: 100px !important;
}

.GridviewScrollItem label {
    padding: 0 2px 0 0;
}

.hightLightHeader {
    background-color: black !important;
    color: white !important;
}

.hightlight-mandatory-field-border {
    border: black 1px solid !important;
}

input[type="text"] {
    width: 165px;
}

.popupContent td {
    font-size: 12px;
}

.dateTimeBox {
    background-image: url("../images/calender.jpg");
    background-position: 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

select {
    height: 23px;
}

#tblDPCInput input[type="text"] {
    width: 55px !important;
}

#tblDPCInput td label {
    margin-right: 8px;
}

.sbpTextBoxCSS {
    width: 80px !important;
    margin-left: 15px;
}

.beatPlanLabel {
    margin-left: 33px;
}

.beatPlanText {
    width: 54px !important;
    /*margin-left:5px;*/
}

.plnCmplncChkBox {
    margin-left: 35px;
}

.alignCenterTd {
    text-align: center;
}


.popup {
    width: 386px;
    height: 210px;
    position: fixed;
    background-color: #ffffff;
    border: #092150 1px solid;
    /* To align popup window at the center of screen*/
    /*top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -150px;*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 9999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
}

    .popup .popHeader {
        background: #12295d; /* Old browsers */
        background: -moz-linear-gradient(top, #12295d 0%, #071538 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #12295d), color-stop(100%, #071538)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #12295d 0%, #071538 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #12295d 0%, #071538 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #12295d 0%, #071538 100%); /* IE10+ */
        background: linear-gradient(to bottom, #12295d 0%, #071538 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12295d', endColorstr='#071538', GradientType=0 ); /* IE6-9 */
        color: #fff;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
    }

        .popup .popHeader .popHeading {
            display: inline-block;
            float: left;
        }

        .popup .popHeader .iconClose {
            display: inline-block;
            float: right;
            width: 18px;
            height: 18px;
            background: url(../images/iconClose.png) no-repeat 0 0;
        }

            .popup .popHeader .iconClose:hover {
                background-position: right 0;
            }

    .popup .popupContent {
        clear: both;
        padding: 5px 10px;
        height: 120px;
        overflow-y: auto;
    }

    .popup .popFooter {
        background: #dbdbdb;
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
        border-top: #aaaaaa 1px solid;
        text-align: right;
    }

    .popup .popFooterMiddle {
        left: 0;
        width: calc(100% - 20px);
        display: inline-block;
        padding: 5px 10px;
        text-align: right;
    }

#customersTable td {
    text-align: center;
}

.borderTdRight {
    border-right: solid 2px grey;
}

#planningCompliance td {
    text-align: center;
}

.hightLight-blue {
    background-color: aliceblue;
    padding-right: 10px;
}

.salesBeatCb {
    text-align: center !important;
}

.salesBeatPopUp .popupContent {
    /*height:214px !important;*/
}

#salesPersonTable input[type="text"] {
    max-width: 195px !important;
    width: 195px !important;
}