
/*#droppableContainer, #droppableContainer th,  #droppableContainer td, #droppableContainer span, #droppableContainer div , #droppableContainer label
        {
        	font:normal 0.8em   calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
        	
        }
        */

/* Added by AniruddhaJ Start  */

/*For Calendar control start*/

*, .mainContentTable td, .mainContentTable th {
    box-sizing: border-box;
}

.Save {
    background: url(images/save.png) no-repeat 8px 50%;
    background-size: 20px;
    width: 100px !important;
    height: 30px;
    border-collapse: collapse;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 20px;
    padding-left: 10px;
}

.DashboardSetup {
    background: url('images/setting.png') no-repeat 8px 50%;
    background-size: 18px;
    width: 150px !important;
    height: 30px;
    border-collapse: collapse;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 20px;
    padding-left: 20px;
}

#ctl00_MainContent_ddlLayout, #ctl00_MainContent_txtLayout {
    border-collapse: collapse;
    border-style: none;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 20px;
    padding: 8px 12px 8px 12px !important;
    background-position-x: 96%;
    background-position-y: center;
}

.WeekendDayStyle span {
    padding: 5px !important;
    font: normal 14px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
}

.autocompleteTextBox {
    width: 135px !important;
    margin-left: 4px;
}

.loaderNEW {
    position: absolute;
    top: 14%;
    left: 29%;
    z-index: 9999;
}

.loader {
    position: absolute;
    z-index: 9999;
    left: 31%;
    top: 6%;
}

.opacity {
    opacity: 0.5;
}

.lblError {
    text-align: left !important;
    /*position: absolute;
    top: 71px;
    left: 12px;*/ 
}


.ui-menu .ui-menu-item:hover, .ui-menu .ui-state-focus {
    background-image: none !important;
    /*background-color: #F7F7F7 !important;
    border: solid 1px #000 !important;*/
}

.ui-menu, .ui-selectmenu-menu, .ui-selectmenu-open {
    height: 120px;
    max-height: 260px !important;
    overflow-y: auto;
}

.TodayDayStyle span {
    padding: 5px;
    font: normal 14px calibri,Verdana, Helvetica, sans-serif, Montserrat;
}

.DayStyle span {
    padding: 5px;
    font: normal 14px calibri,Verdana, Helvetica, sans-serif, Montserrat;
}

/*End*/
/* From .aspx Side Start */

.AsChart {
    height: 100%;
    background-color: #7eaab5;
    border-radius: 5px;
    box-sizing: border-box;
}

.chartvalPercentage {
    float: right;
}

.maindiv {
    height: 7px;
    width: 440px;
    /*background-color: #f2f2f2;*/
    border-radius: 5px;
}


.tblcontrol td, .tblcontrol th {
    width: auto;
}

.tblcontrol {
    /*border: 1px solid #f7f7f7; 
    box-shadow: 2px 2px #dddddd;*/
    border-collapse: separate !important;
    margin-top: 7px;
    width: 97%;
    margin-left: 19px;
    font: normal 10px calibri,Verdana, Helvetica, sans-serif, Montserrat !important; 
    border-radius: 12px !important;
    padding: 5px;
}

    .tblcontrol th {
        font: normal 11px/15px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
        font-weight: normal !important;
        line-height: 15px !important;
        /*background-color: #f7f7f7;
        color: #0099cc !important;*/
        padding: 0px;
        text-align: center;
        height: 38px;
        border-bottom: solid 1px #DDD;
    }

    .tblcontrol td {
        /*color: #666666;*/
        padding: 8px;
        padding-top: 16px !important;
        padding-bottom: 1px !important;
        box-sizing: border-box;
        font: normal 12px calibri,Verdana, Helvetica, sans-serif, Montserrat;
    }



    .tblcontrol > *:first-child:not(thead) td:first-child {
        text-align: left !important;
        width: 170px;
    }

    .tblcontrol > *:first-child:not(thead) td:last-child {
        font-weight: bold !important;
        text-align: right !important;
    }

.footerRow td {
    font: bold 12px bold 12px calibri,Verdana, Helvetica, sans-serif, Montserrat, Roboto Light, Verdana, Helvetica, sans-serif !important;
    text-align: left !important;
}

.ui-selectmenu-button span.ui-icon {
    /*top: auto !important;*/
}

#ctl00_MainContent_ddlProduct-button {
    width: 200px !important;
}

.Themeddl {
    margin-left: 10px;
}

.parentDisable {
    opacity: 0.3;
    z-index: 500;
}

.ActiveFilter {
    /*background-color: orange !important;*/
}

#ctl00_MainContent_dataPointGrid td {
    padding: 13px;
}


/*End*/
.buttonsContainer {
    float: right;
}

.cardContainer {
    height: 57%;
    width: 41%;
    float: right;
    padding: 10px;
    margin-top: 8%;
    margin-right: 6%;
}

    .cardContainer div {
        font: bold 15px calibri,Verdana, Helvetica, sans-serif, Montserrat;
        /*color: #888888;*/
        padding: 10px;
        text-align: center;
        width: 100%;
    }

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

.TotalRevenueAmt {
    font-size: 28px !important;
}

.dataDivCss {
    height: 100%;
    width: 100%;
    padding-top: 9px;
}

.panelHeading {
    float: right;
}

    .panelHeading .title {
        float: left;
    }

.saveSeqButton {
    /*width: 57px !important;
    height: 26px !important;
    display: inline;*/
}

.saveLayout {
    cursor: pointer;
    float: left;
    margin-top: 3px;
}

.FilterYearddl {
    width: 70px !important;
}

.ProductDropdown {
    color: #0099cc !important;
}

.errormsg {
    /*color: #fff !important;*/
    font: 11px normal calibri,Verdana, Helvetica, sans-serif, Montserrat;
    border: none !important;
}

.GridTable th {
    white-space: nowrap !important;
}

.FilterSettings {
    width: 22px;
    height: 22px;
    display: inline;
    padding-top: 4px;
    cursor: pointer;
    padding-left: 8px;
    float: right;
}

.SelectedFilter {
    float: left;
    padding-right: 4px;
    padding-top: 5px;
}

.filterDropdown {
    width: 135px !important;
    margin-left: 4px !important;
}

.ui-button.ui-selectmenu-button {
    margin-left: 2px !important;
}

.PanelFilter {
    width: 310px;
    margin-left: 5px;
    position: absolute;
    z-index: 9;
    height: 175px;
    /*background-color: #f7f7f7;*/
    padding: 5px;
    border-radius: 4px;
    /*border: none 1px #dddddd;*/ /*updated by Shekhar as per Milind Sir @10-Jun-2020*/
    display: none;
}

.GridItem td {
    /*text-align: center !important;*/
}




.HeaderTable td {
    padding-left: 11px;
}

.filterSettingsMaster {
}

#ctl00_MainContent_Themeddl {
    width: 88px !important;
}


.popupdiv {
    height: 250px;
    width: 318px;
    position: absolute;
    z-index: 999;
    /*background-color: #f7f7f7;*/
}
/*.popupdivtbl th,  td {
padding:10px;

}*/
/*.tblcontrol {
border:1px solid #dddddd;
border-collapse:collapse;

}

.tblcontrol th , td {
border:1px solid #dddddd;
border-collapse:collapse;
text-align:center;


}*/
#ctl00_MainContent_tempUpdatePanelForChart img {
    padding: 15px;
    padding-top: 50px;
}

.gridpanel {
    position: absolute;
    top: 36%;
    left: 47%;
   /*background-color: #f7f7f7;
    border: solid 1px #dddddd;*/
    height: auto;  
    cursor: move;
    z-index: 999;
    border-radius: 6px !important;
}

.gridPanelTitleClass {
    font: normal 15px verdna;
    /*color: #0099cc;*/
}

.btnCancelDPDetails {
    float: right;
    border: none;
    cursor: pointer;    
    font-size: 14px;
    /*color: #0099cc;
    background-color: transparent;*/
}

.DPDetailsHeading {
    width: 100% !important;
    min-width: 98% !important;
    font: normal 12px/14px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    line-height: 14px;
    padding: 10px;
    margin: 0px !important;
    border-radius: 5px;
    border-top: none;
    box-sizing: border-box;

    /*border-bottom: solid 1px #dddddd;  
    background-color: #FAFAFA;
    color: #0099cc !important;*/
}

.TDDraggable {
    min-width: 250px;
    max-width: 350px;
    vertical-align: top;
    /*border-right: solid 1px #ddd;*/
}

.Hiddenbtn {
}

.btnSubmitdDate {
    width: 62px;
    float: left;
}

.btnCancel {
    width: 62px;
    float: right;
}

.datePickerTD {
    /*padding-left:6px !important;*/
}

.bodyDivForDashboard {
}

.datepicker {
    width: 135px !important;
}

.divCon {
    min-width: 1900px !important;
    display: block;
    float: left;
}

.PanelChart img {
    /*margin-left: 49px;
	margin-top: 18px;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
    position: relative;
}


.zoomedPanelClosebtn {
    float: right;
    font-size: 18px !important;
    padding: 10px;
   /* border: none;
    background-color: #ffffff;*/
    cursor: pointer;
    margin: 4px;
    margin-bottom: 8px;
    margin-right: 8px;
    color: #999;
}

/*.zoomChartDiv
{
	position: absolute;
	z-index: 9999999;
	top: 11%;
	left: 10%;
	height: 82%;
	width: 82%;
	background-color: #ffffff;
	border: solid 1px #dddddd;
	border-radius: 6px !important;
	box-shadow: 3px 3px #f7f7f7;
}*/

.zoomChartDiv {
    position: fixed;
    z-index: 9999999;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    min-height: 80vh;
    min-width: 80vw;
    border-radius: 6px !important;
    /*border: solid 1px #dddddd;
    background-color: #ffffff;
    box-shadow: 3px 3px #f7f7f7;*/
    transform: translate(-50%, -50%);
}

    .zoomChartDiv div, .zoomChartDiv div img {
        padding: 5px !important;
    }

    .zoomChartDiv:not(:blank), .zoomChartDiv:not(:empty) {
        background-image: none !important;
    }

    .zoomChartDiv:empty, .zoomChartDiv:blank {
        background-image: url("../App_Resources/ajax-loader2.gif") !important;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 20px;
        background-position: top left;
    }

.GridPanelClosebtn {
    float: right;
    font-size: 18px !important;
    padding: 10px;
   
    cursor: pointer;
    margin: 4px;
    margin-bottom: 8px;
    margin-right: 8px;
    /*color: #999; 
    border: none;
    background-color: #ffffff;*/
}

.ViewGridDetailsPanel {
    position: absolute;
    z-index: 9999999;
    top: 20%;
    left: 10%;
    height: auto;
    width: 82%;
    /*background-color: #ffffff;
    border: solid 1px #dddddd;
    border-radius: 6px !important;
    box-shadow: 3px 3px #f7f7f7;*/
    padding-bottom: 15px;
}

.resizeBtn {
    float: right;
    background-image: url(images/maximise.png);
    height: 22px;
    width: 22px;
    background-repeat: no-repeat;
    border: none;
    background-color: inherit;
    margin-left: 5px !important;
    cursor: pointer;
    background-size: 70%;
    transform: translate(2px, -10%);
    display: block;
    background-position: center;
}


/*End*/
.mainContainer {
    width: 100%;
    /*color: #333333;*/
}

    .mainContainer div {
        /*float: left  !important;*/
    }

.leftContainer {
    width: 250px;
    /*color: #333333;
    background-color: #F7F7F750;*/
}

.rightContainer {
    width: 80%;
    /*color: #333333;
    background-color: #F7F7F750;*/
}

.panelDragable {    
    padding: 0px 0px;
    margin: 8px !important;   
    border-radius: 15px;
    float: left !important; 
    /*border: none 1px transparent;
    background-color: rgba(255, 255, 255,0.5);
    box-shadow: 1px 1px 5px 1px #99999950;*/
}
 
/*.panelDragable {    
    background-image: url("../App_Resources/frame1.png");
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
}*/
.hidden {
    display: none !important;
    height: 0px !important;
    width: 0px !important;
}

.wrap {
    white-space: pre-wrap !important;
}

.displayNone {
    display: none;
}


.widthP {
    /*width:32.5% !important;  old value  Changed by: Pranav D*/
    /*width:1000px !important;*/
    /* Changed  By AniruddhaJ
                    */
    /*   width:777px !important;
                   */
    /*max-width:664px !important; Changed by: Pranav D*/
}


.widthL {
    /*width:65.3% !important; old value  Changed by: Pranav D*/
    /* width: 997px !important;*/
    /*        width: 777px !important;
                  */
    /*      min-width: 664px !important;
            */
    /*padding-left: 4px;
                padding-right: 4px;*/
}

/* Changed by AniruddhaJ

 .widthP  .panelHeading
 {
	max-width:1100px !important;
 }
 */
.panelHeading {
    width: 100% !important;
    min-width: 98% !important;
    font: normal 12px calibri, calibri,Verdana, Helvetica, sans-serif, Montserrat line-height;
    padding: 5px 5px;
    margin: 0px !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    float: left;
    line-height: 45px;
    display: block; /*18-Jun-2021Shekhar*/
    vertical-align: middle;
    box-sizing: border-box;
    /*color: #0099cc !important;
    background-color: #f5f5f5;
    border-bottom: none 1px #dddddd;*/
}

    .panelHeading div {
        /*float: left !important; By AniruddhaJ */
    }

    .panelHeading .closeButton {
        width: 5% !important;
    } 

.PanelFilter table, .PanelFilter select, .PanelFilter input, .PanelFilter label, .PanelFilter span {
    float: left;
}

.PanelFilter select, .PanelFilter input, .PanelFilter span {
    float: left;
    /*line-height: 22px;
            margin-left: 2px;*/
    /*margin-top: 5px;
            margin-top: 10px;*/
}

.PanelFilter input {
    /*margin-top: 5px;*/
}

.PanelFilter label, .PanelFilter span {
    font: normal 11px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    float: left;
    line-height: 22px;
    margin-top: 0px;
}

.PanelFilter label {
    white-space: nowrap;
}

.PanelFilter span {
    /*color: #333333 !important;*/
    /*padding-top:5px  !important;*/
}

.PanelFilter table td {
    border-collapse: collapse;
    padding: 4px;
    white-space: nowrap;
    word-break: keep-all;
}



.PanelChart {
    width: 98%;
    height: auto !important;
    font: normal 12px/30px 11px/12px calibri,Verdana, Helvetica, sans-serif, Montserrat line-height:30px !important;
    overflow-x: hidden;
    overflow-y: hidden;
}

.TOP5CCY {
    width: 328px !important;
    height: 280px !important;
}

.PanelChartHeader {
    font: normal 11px/12px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    line-height: 12px !important;
    height: 2px;
    width: 100%;
    white-space: nowrap;
    /*color: #000000;*/
    text-align: center;
    float: left;
    margin-top: 10px;
    visibility: hidden;
}
/* <alert Prompter> */


.EventCal_Grid td {
    /*background-color: #FFFFFF;*/
}

.EventCal_Grid select {
    /*background-color: #F7F7F7 !important;*/
    float: right;
}

.EventCal_Grid table tr td a:link {
    text-align: right !important;
    width: auto;
}

select, HtmlSelect {
    /*border: 1px solid #ddd !important; */
    border-collapse: collapse;
}

.EventCal_Grid td div td {
    white-space: nowrap;
    padding: 0px !important;
    margin: 0px !important;
}

.EventCal_Grid td div {
    /*border: solid 1px #F7F7F7;*/
    height: 85px !important;
    width: 120px !important;
    overflow: hidden !important;
}

.EventCal_Grid .eventList {
    padding: 0px !important;
    margin: 0px !important;
    border-collapse: collapse;
    /*border: none 0px #444444;*/
    line-height: normal;
}

.eventList td {
    line-height: 14px;
    padding: 0px !important;
    margin: 0px !important;
    /*font-size: 11px !important;*/
}

.EventCal_Grid td div table, .EventCal_Grid td div table td {
    /*border: none 0px #444444 !important;*/
    float: left;
}

    .EventCal_Grid td div table td {
        height: 12px !important;
    }

.TodayDayStyle, .TodayDayStyle a:link {
    line-height: 12px !important;
}

.OtherMonthDayStyle {
    /*background-color: #FFFFFF;
    color: #F7F7F7 !important;*/
}

.EventCal_Grid .TitleStyle, .EventCal_Grid .TitleStyle td {
    font: normal 11px/28px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    line-height: 28px !important; 
    padding: 0px;
    text-align: center;
    border-collapse: collapse;  
    /*background-color: #FFFFFF !important;
    color: #0099cc !important;
    border: 0px solid #dddddd;
    border-bottom: solid 1px #0099cc !important;*/
}

.TitleStyle a:link {
   /* color: #0764c1 !important;
    font: normal 11px !important;*/
    text-decoration: none !important;
}

.TitleStyle a:hover {
     /*color: #0764c1 !important;
   font: normal 11px !important;*/
}

.TitleStyle td {
    text-align: center;
}

.DayHeaderStyle, .DayHeaderStyle th {
    
    font: normal 11px/22px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    line-height: 22px !important;
    height: 22px;
    /*border: solid 1px #dddddd;
    border-bottom: solid 1px #dddddd !important;
    background-color: #ffffff !important;
    color: #0099cc !important;*/
}

.readMore, .readMore a:link, .readMore a:visited, .readMore a:hover {
    /*color: #00CCFF !important;*/
    cursor: pointer;
    text-decoration: none;
}

.EventCal_Grid {
    margin-left: 3px !important;    
    border-radius: 5px;
    /*background-color: #FFFFFF;
    border: 1px solid #dddddd !important;*/
}

    .EventCal_Grid, .EventCal_Grid td table {
        border-collapse: collapse !important;
        border-spacing: 0px !important;
        /*border: solid 1px #dddddd;
        background-color: #FFFFFF !important;*/
        width: 100% !important;
    }

        .EventCal_Grid td {
        }

            .EventCal_Grid td, .EventCal_Grid td table td {
                border-collapse: collapse !important;
                border-spacing: 0px !important;
                /*background-color: #FFFFFF !important;*/
            }

        .EventCal_Grid .DayStyle, .EventCal_Grid .WeekendDayStyle, .EventCal_Grid .TodayDayStyle, .EventCal_Grid .OtherMonthDayStyle, .EventCal_Grid .SelectedDayStyle {
            height: 28px !important;
            /*border: solid 1px #ddd;
            background-color: #FFF !important;*/
            text-decoration: none !important;
        }

        .EventCal_Grid .DayStyle, .EventCal_Grid .OtherMonthDayStyle, .EventCal_Grid td .TodayDayStyle, .EventCal_Grid .TodayDayStyle, .EventCal_Grid td .DayStyle span, .EventCal_Grid td .DayStyle a {
            /*font: normal 11px   calibri,Verdana, Helvetica, sans-serif, Montserrat !important;*/
            /*color: #666666 !important;*/
        }

        .EventCal_Grid .WeekendDayStyle, .EventCal_Grid .WeekendDayStyle a:link, .EventCal_Grid .WeekendDayStyle a:hover, .EventCal_Grid .WeekendDayStyle a:visited {
            padding-right: 2px !important;
            /*color: #AA0000 !important;*/
            text-decoration: none !important;
        }

         

.TodayDayStyle a:link, .TodayDayStyle a:hover, .TodayDayStyle a:visited, .TodayDayStyle {
    /*color: #ff6000 !important;*/
    text-decoration: none !important;
}


.EventCal_Grid td .SelectedDayStyle, .EventCal_Grid .SelectedDayStyle, .EventCal_Grid td .SelectedDayStyle span, .EventCal_Grid td .SelectedDayStyle a {
    /*color: #333333;
    background-color: #FFFFFF !important;*/
    text-decoration: none !important;
}


.DayStyle a:link, .DayStyle a:hover {
    text-decoration: none !important;
    padding: 0px;
}


.EventCal_Grid td .DayStyle span {
    float: right !important;
    height: auto;
    line-height: 14px !important;
    width: 30% !important;
}

.DayEventCount, .TodayDayStyle .DayEventCoun {
    line-height: 11px !important;
    text-decoration: none !important;
    /*color: #0099cc !important;
        background-color: #FFFFFF !important;*/
    font: normal 11px/12px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    padding: 0px !important;
    float: left !important;
    width: auto !important;
    
    text-align: center;
}


/* </alert Prompter> */


.hamburgerIcon > span {
    width: 18px;
    height: 2px;
    margin: 3px auto;
    clear: both;
    display: block;
}

#arrow.hamburgerIcon {
    background-image: none !important;
    height: 34px;
    width: 34px;
    padding: 7px;
    border-collapse: collapse;
    box-sizing: border-box;
    border-radius: 10px;
}

#draggableContainer {
    width: 98%;
    height: 100%;
    /* border: 1px solid #EBEBEB;*/
}

#mainDrag {
    float: left;
    /* width: 15% !important; */
    min-width: 250px !important;
    max-width: 300px;
}

div#mainDrag h3 {
    margin: 0px !important;
    padding: 0px !important;
}

#draggableContainer, #droppableContainer, #arrow {
    float: left;
}

#droppableContainer {
}


.innerDroppableContainer {
    height: 100%;
    min-height: 150vh;
    display: block;
    overflow: auto;
    /*color: #005682;
    background-color: inherit;*/
    min-width: 100vw;
    max-width: 1920px;
    padding-bottom: 5px;
    padding: 10px;
    /*height: 100%;
    min-height: 780px;
    display: block;
    overflow: auto;
    color: #005682;
    background-color: inherit;
    margin-left: 40px;
    min-width: 1850px;
    max-width: 1920px;
    padding-bottom: 5px;
    padding: 10px;*/
}


    /*.innerDroppableContainer .draggable {
        border-bottom: 1px solid #cccccc !important;
    }*/

.drop {
    width: 500px;
    height: 450px;
    /*border: 1px solid #333333;*/
}

    .drop h3 { 
        padding-left: 2px;
        padding-right: 2px;
        /*color: #1aa3ff;
        background-color: #e6e6e6;
        border-bottom: 1px solid #333333;*/
    }

    .drop p {
        border-bottom: 1px solid #333333;
        color: #000000;
    }

#chart1 {
    width: 500px;
    height: 250px;
}

#draggableContainer .draggable, #draggableContainer .draggable:disabled {
    /*width: 96%;*/
    z-index: 999;
    display: block;
    height: auto;
}

#draggableContainer .draggable {
    /*color: #0099cc;*/
    pointer-events: all;
    cursor: pointer;
    padding:0 5px;
}

    #draggableContainer .draggable:disabled, [disabled=disabled] {
        /*color: #888888 !important;*/
        pointer-events: none;
    }

#draggableContainer ul {
    list-style: none;
    list-style-position: inside;
    margin: 0px;
    padding: 0px;
    width: 99%;
    border-style: none;
}

#draggableContainer .ui-accordion-header-icon .ui-icon .ui-icon-triangle-1-s,
#draggableContainer .ui-state-active .ui-icon, #draggableContainer .ui-button:active .ui-icon {
    background-image: url("../FinIQJS/images/ui-icons_444444_256x240.png") !important;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

#draggableContainer h3, #draggableContainer h3:hover, h3.ui-accordion, h3 .ui-accordion-header {
    
    padding: 5px !important;
    margin: 2px !important;
    /*background-color: #FFFFFF !important;
    border: 0px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;*/
    visibility: hidden;
    display: none;
}

.ui-button:active, .ui-button:hover {
    /*background-color: #d4d4d4 !important;
    border: 0px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;*/
    padding: 5px !important;
    margin: 2px !important; 
    visibility: visible;
    display: inline-block;
}

.LiTitle, ul li .LinkName {
    padding: 10px 5px 10px 15px !important;
    width: inherit;
    height: auto;
    display: block;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: left;
}

.LiImage {
    width: 100%;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}


#draggableContainer {
    background-color: inherit;
}

.draggableClass {
    /*color: #005c99;
    border: 1px solid #333333;*/ 
    display: block;
    width: 200px;
    height: 200px;
}

.droppable {
    width: 500px;
}

.main {
    /*border: 1px solid #dddddd;*/
    float: left;
    margin: 2px;
    padding: 0px;
}

    .main h1 {
        padding-left: 2px;
        padding-right: 2px;
    }

    .main h1, .closeButton {
        height: 22px;
        font: normal 11px/22px calibri,Verdana, Helvetica, sans-serif, Montserrat;
        line-height: 22px;
        /*color: #0099cc;*/
        margin: 0px;
    }

.closeButton {
    width: 3%;
    margin-top: 2px;
    min-width: 20px;
    margin-left: 2px;
    float: left;
    margin-bottom: 0px;
    border: none !important;
    cursor: pointer;
    background-image: url("images/delete.png");
    background-color: transparent;
    background-repeat: no-repeat;
}

    .closeButton:hover {
        color: #81F7F3;
    }

.divFilter {
    min-width: 99vw;
    max-width: 100vw;
    /*border-bottom: solid 1px #ddd !important;*/
    height: 42px;
    text-align: right;
    padding: 0px;
    float: left;
    box-sizing: border-box;
    display: block;
    /*background-color:#ddd;*/
}

    .divFilter div {
        float: left;
        margin: 0px 5px;
    }


.count {
    display: none;
}

.uname, .uentity {
    display: none;
}

.highlight_container {
    background-color: Red;
}

.highlight {
    /*box-shadow: inset 0px 0px 10px 5px #fed700;*/
    border: solid 1px #0099cc80;
    border-collapse: collapse;
}

.bgRed {
    background-color: inherit !important;
    width: 250px !important;
    height: 100px !important;
    /*border: 1px solid #cccccc;*/
}

.ui-menu-item {
    padding: 5px !important;
}

.setScroll {
    width: 99% !important;
    /*font: normal 12px/30px   calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
        line-height:30px !important;*/
    font: normal 11px/12px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    margin-left: 2px;
    /*overflow-x:auto;*/
    overflow-y: auto;
    scrollbar-face-color: #D6D8E4;
    scrollbar-3dlight-color: #666666;
    scrollbar-shadow-color: #DDDDDD;
    scrollbar-highlight-color: #F7F7F7;
    scrollbar-darkshadow-color: #FF0000;
    scrollbar-track-color: #F7F7F7;
    scrollbar-arrow-color: #F7F7F7 !important;
}

.gridright td {
    text-align: right !important;
}

.GridTable {
    font: normal 10px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    border-collapse: collapse;
    /* border: 1px solid #dddddd;*/
    background-color: inherit !important;
    width: 100%;
    float: left;
}


    .GridTable tr {
        height: 30px !important;
    }

    .GridTable td {
        /*ont: normal 10px   calibri,Verdana, Helvetica, sans-serif, Montserrat !important;*/
        padding: 6px !important;
        text-align: center;
        height: 20px;
    }




    /*.GridTable tr:nth-child(even) {
        background-color: #FFF !important;
    }

    .GridTable tr:nth-child(odd) {
        background-color: #F9F9F9 !important;
    }*/

    .GridTable .GridTableFooterRow {
        bottom: 20px;
    }

    .GridTable .GridTableFooterCell {
        font: normal 12px calibri,Verdana, Helvetica, sans-serif, Montserrat;
        color: #333333 !important;
        padding: 2px;
        text-align: center;
        height: 20px;
        /*border: 1px solid #dddddd;
		border-top: solid 0px #dddddd !important;*/
    }

    .GridTable th {
        font: 600 12px/12px calibri,Verdana, Helvetica, sans-serif, Montserrat;
        /*background-color: #FFFFFF !important;
        color: #000000 !important;
            border: 1px none #dddddd !important;
            border-bottom: solid 1px #dddddd !important;*/
        padding: 0px !important;
        text-align: center;
        height: 22px; 
        box-sizing: border-box;
        letter-spacing: 1px;
    }


    .GridTable thead, .GridTable tbody {
        display: block;
    }

    .GridTable tbody {
        /*height:50px !important;  
        	overflow:scroll !important;*/ /*Comment added by Rohan K on 16-Feb-2016 for RHB webpack compatible with IE11*/
        background-color: inherit !important;
    }

/*Added by AniruddhaJ */
.summeryDiv {
    width: auto;
    float: left;
    margin-left: 22px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.4);
    background-color: #f7f7f7;
    padding: 18px;
    text-align: center;
}


    .summeryDiv table {
        width: auto;
    }


.lblfont {
    font: normal 20px calibri,Verdana, Helvetica, sans-serif, Montserrat;
}

.ValuePadding {
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
}

.tableCell_btnContainer {
}

.lblmain {
    padding: 15px;
    margin-left: 52px;
    color: #888888;
}

.DayFilterBtn {
    width: 65px;
    float: left;
    border: none;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}

    .DayFilterBtn:hover {
        background-color: #dddddd;
    }

.WeekFilterBtn:hover {
    background-color: #dddddd;
}

.WeekFilterBtn {
    width: 65px;
    float: left;
    margin-left: 18px;
    border: none;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}

.ViewMoreBtn {
    float: right;
    border: none;
    margin-top: 8px;
    color: #0099cc !important;
    cursor: pointer;
}


.summeryDiv table td img {
    text-align: center;
    width: auto;
    height: auto;
}


.summeryValue {
    font: normal 32px calibri,Verdana, Helvetica, sans-serif, Montserrat;
    color: #000000 !important;
}

.summeryDiv table td {
    text-align: center;
}

.iconsWidth {
    width: 44px !important;
}

.imgspan {
    float: left;
}

.summerytext {
    font: normal 16px calibri,Verdana, Helvetica, sans-serif, Montserrat;
    color: #0099cc !important;
}

.MainSummeryDiv {
    height: auto;
    width: auto;
}



.HeaderIcon {
    float: left;
    width: 18px;
    position: relative;
    display: block;
    vertical-align: middle;
    line-height: 25px;
    margin: 4px;
}

.GridTable_withCard {
    font: normal 10px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    width: 37%;
    float: left;
    
    border-radius: 12px !important;
    padding: 5px;
    margin-left: 19px;
    border-collapse: separate !important;
    /*background-color: #f7f7f7;
    box-shadow: 2px 2px #dddddd;
    border: 1px solid #f7f7f7;*/
}



    .GridTable_withCard > *:first-child:not(thead) td:first-child {
        text-align: left !important;
    }

    .GridTable_withCard > *:first-child:not(thead) td:last-child {
        font-weight: bold !important;
        text-align: right !important;
    }



    .GridTable_withCard td {
        /*background-color: #f7f7f7;
        color: #666666;*/
        padding: 10px !important;
        box-sizing: border-box;
        font: normal 12px calibri,Verdana, Helvetica, sans-serif, Montserrat;
    }

    .GridTable_withCard tr {
        height: 30px !important;
    }


    .GridTable_withCard .GridTableFooterRow {
        position: fixed !important;
        bottom: 20px;
    }

    .GridTable_withCard .GridTableFooterCell {
        font: bold 10px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
        /*background-color: #f7f7f7 !important;
        color: #0099cc !important;*/
        padding: 2px;
        text-align: center;
        height: 20px;
        /*border: 1px solid #dddddd;
            border-top: solid 0px #dddddd !important;*/
    }


    .GridTable_withCard th {
        font: normal 12px/15px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
        font-weight: normal !important;
        line-height: 15px !important;
        /*background-color: #f7f7f7;
        color: #0099cc !important;
            border-bottom: solid 1px #DDD;*/
        padding: 0px;
        text-align: center;
        height: 38px;
       
    }


    .GridTable_withCard thead, .GridTable_withCard tbody {
        display: block;
    }

    .GridTable_withCard tbody {
        /*background-color: #FFFFFF !important;*/
    }


/*End*/
.mainClass {
    visibility: hidden;
    position: absolute;
    z-index: 0;
    width: 700px;
    border: 1px solid #a6a6a6;
}

.UserLeft {
    width: 100px;
    float: left;
}

.top {
    height: 100px;
}

.userType {
}

.user {
    width: 50px;
    height: 50px;
    border-right: 1px solid #a6a6a6;
    border-top: 1px solid #a6a6a6;
    padding: 12px;
}

.scenarioTable {
    width: 200px;
    float: left;
}

.usertype {
    font: normal 12px/22px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
    color: #0099cc;
    float: left;
    display: none;
}

    .usertype span {
        font: normal 12px/32px calibri,Verdana, Helvetica, sans-serif, Montserrat !important;
        color: #000000 !important;
        float: left;
    }

span#ctl00_MainContent_lblInfo {
    text-align: left;
    /*position: absolute;
    top: 68px;*/
    /*left: 80%;*/
    color: #0099cc !important;
}

div:disabled, div[disabled="disabled"] {
    color: #888888 !important;
}

.panelHeading .title, .panelHeading .title1 {
    width: auto;
    height: 28px; 
    white-space: normal;
    overflow: hidden !important;
    padding: 5px;
    font: normal 14px calibri,Verdana, Helvetica, sans-serif, Montserrat;
    display: block;
    vertical-align: middle;
}


.GridTable th {
    white-space: normal !important;
}


::-webkit-scrollbar, .grid::-webkit-scrollbar {
    width: 10px !important;
    height: 14px;
    border-collapse: collapse;
}




/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

body {
    /*margin: 0;
    padding: 0; 
    font-family: "Avenir Next", "Avenir", sans-serif;*/
}

#menuToggle {
    display: block;
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }

        #menuToggle a:hover {
            color: tomato;
        }


    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    /*
 * Just a quick hamburger
 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

    /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

        /*
 * But let's hide the middle one.
 */
        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        /*
 * Ohyeah and the last one should go the other direction
 */
        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul {
    transform: none;
}



.s1, .s2, .s3, .s4 {
    display: inline-block;
    margin: 10% 5%;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    float: left;
    background-image: url(../App_Resources/snooker.png);
    background-size: cover;
    vertical-align: middle;
    pointer-events: all;
    cursor: pointer;
    opacity: 0.80;
    background-color: #FFFFFF !important;
}

.s1 {
    background-color: #ff8e8e;
}

.s2 {
    background-color: #5ae25a;
}

.s3 {
    background-color: #69cbff;
}

.s4 {
    background-color: #ffc107;
}

.panelDragable {
    position: relative;
}

    .panelDragable > .after {
        display: none; /*18-Jun-2021*/
        vertical-align: middle;
        text-align: center;
        background-color: #e7e7e7;
        width: 75px;
        height: 24px;
        border-bottom-right-radius: 15px;
        position: absolute;
        float: right;
        z-index: 1;
        bottom: 2px;
        right: 2px;
        padding: 0px;
    }

.after::before {
    content: "";
    display: none; /*18-Jun-2021*/
    background-color: transparent;
    width: 0px;
    height: 0px;
    border-right: 20px solid #e7e7e7;
    border-bottom: 0px solid transparent;
    border-top: 24px solid transparent;
    position: absolute;
    float: left;
    z-index: 1;
    top: 0px;
    left: -19px;
}


#mainDrag .txtsearchSH {
    float: left;
    /*border: none 1px transparent !important;
    border-bottom: solid 1px #ddd !important;*/
    min-height: 30px;
    width: 88%;
    min-width: 130px;
    border-collapse: collapse;
    cursor: pointer;
    vertical-align: middle;
}

.search_icon {
    background-image: url("../App_Resources/SearchMB.png");
    background-position-y: center;
    background-position-x: 98.5%;
    background-repeat: no-repeat;
    background-size: 18px;
    padding: 5px 24px 2px 2px !important;
}

#mainDrag > h3 .sort {
    display: block;
    width: 28px;
    height: 28px;
    float: right;
    border: none !important;
    cursor: pointer;
    background-color: inherit !important;
    background-image: url("images/sort.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    background-attachment: scroll;
    opacity: 0.5;
}

.rightText {
    text-align: right;
}

.leftText {
    text-align: left;
}

.centerText {
    text-align: center;
}

.btnLoad {
    background: url('images/refresh_v2.png') no-repeat 8px 50%;
    background-size: 15%;
    width: 120px !important;
    height: 32px;
    border-collapse: collapse;
    cursor: pointer;
    vertical-align: middle;
    border: solid 1px #ddd;
    border-radius: 20px;
    padding-left: 20px;
    line-height: 11px;
    box-shadow: 0px 2px 2px #ddd;
}

.AddNew {
    background: url('images/add.png') no-repeat 8px 50%;
    background-size: 15%;
    width: 120px !important;
    height: 32px;
    border-collapse: collapse;
    cursor: pointer;
    vertical-align: middle;
    border: solid 1px #ddd;
    border-radius: 20px;
    padding-left: 20px;
    line-height: 11px;
    box-shadow: 0px 2px 2px #ddd;
}

/*.DashboardMaster td {
 
}

.DashboardMaster td > span {
width:100% !important;
white-space:normal;
display:block;
}*/

a:link, a {
    text-decoration: none;
    cursor: pointer;
    color: #0284e0;
}

.loading_parent {
    position: fixed !important;
    top: 90px !important;
    left: 25px !important;
    height: 15px !important;
    opacity: 0.9;
    background-image: url(../App_Resources/Ajax_loader_White/loading_1.gif);
    background-repeat: no-repeat;
    padding-left: 15px;
    background-position: left center;
    background-size: contain;
    z-index: 9999;
}

.loading_img {
    display: none !important;
    vertical-align: middle !important;
    float: left !important;
    margin: 0px !important;
    width: auto !important;
    height: 20px !important;
    max-width: 137px !important;
}

.loading_span {
    display: block !important;
    vertical-align: middle;
    float: right !important;
    margin: 0px 5px !important;
    height: 20px !important;
}

table.Grid {
    display: block;
    min-width: max-content !important;
}

.buttonsContainer img, .buttonsContainer button {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0px;
    margin: 2px 2px !important;
    float: left;
    display: block !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}
