.hidden {
  display: none;
}

.visuallyhidden {
  opacity: 0;
}
           /* .popupdiv div{ width:100px !important;}*/
            .billPreparedkey{background:#00FF00 url('Images/completed.png'); color:#000; text-align:left !important;}
            .activityFinishkey{background:#808080 url('Images/completed.png'); text-align:left !important;}
            .materialIssuedkey{background:#99CC00 url('Images/completed.png'); text-align:left !important;}
            .activityStartkey{background:#FFFF00 url('Images/completed.png'); text-align:left !important;}
            .GRNkey-completed{background:#FFCC00 url('Images/completed.png'); text-align:left !important;}
            .POkey{background:#FF6600 url('Images/completed.png'); text-align:left !important;}
            
            .billPreparedkey-completed{background:#00FF00; text-align:center !important;} /* .RA Bill */
            .activityFinishkey-completed{background:#808080; text-align:center !important;} /* .Task Done */
            .materialIssuedkey-completed{background:#99CC00; text-align:center !important;} /* .Issue Slip Done */
            .activityStartkey{background:#FFFF00; text-align:center !important;} /* .Task Start */
            .GRNkey-completed{background:#FFCC00; text-align:center !important;} /* .GRN */
            .POkey-completed{background:#FF6600; text-align:center !important;} /* .Issue Done */
            
           
            
            .layout-paddingpopup{ /*padding:8px;*/ border:none !important;}
            .layout-paddingpopup div{ padding:5px;}
            
             .Row{display: table-row;}
            .Cell{display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; }
            .projectheaderalign{ padding:4px 10px; font-size:14px;}
            
            /*.addheaderclassoverflow{ overflow:scroll !important;}*/
            .close {margin-top: -24px! important;}
            .project{          color: #1d1d1d;
    font-weight: normal;
    padding: 8px;
    background: #f5f5f5;
    border: none;
    padding: 12px 18px 12px 15px !important;}
            .projectWrapper
            {
                min-width: 98%;
                overflow-x: auto;
                margin: 16px;
                border: 1px solid #ccc;
                }
            .project:hover, .block:hover
            {
                font-weight:bold;
                cursor:pointer;
                transition:1s;                
                }
            .blockWrapper
            {
                background: #ecebeb;
                }
            .block
            {
             
              
                border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    background: #fff;
    padding: 10px 10px 10px 30px;
                }
                .block:hover{ color:#18aacc; font-weight:normal;}
                .activeBlock{ background:#0eb6dd; font-weight:bold; color:#fff;}
                .activeBlock{ color:#fff !important; font-weight:bold !important;}
            .buildingBox
            {
                height: 0px;
                /* width: 99%; */
                max-height: 38rem;
                border: 1px solid #ccc;
                
                position: absolute;
                /* right: 16; */
                top: 25px;
                
            }
            .buildingcontainer
            {
                /*overflow-x:auto;*/
                }
                 .buildingWrapper 
            {
                overflow-x:auto;
                }
            .building
            {
                /*margin: 5px 0px;*/
                display: table;
                /*padding: 2px 0px;*/
               /* border: 1px solid #0385a3;*/
                background:#b4cbda2b;
               
            }
            .buildingTitle
            {
                border-bottom: 1px solid #ccc;
                font-weight:bold;
                padding-top:8px;
                padding-bottom:8px;
                }
            .floor-box
            {
                    max-height: auto;
                   /* overflow:scroll;*/
                    
                    margin-top: 2px
                }
                .floorName
                {
                    width:84px; position:relative; background:#fff; 
                    padding:2px; color:#333; margin: 0px 2px 0px 0px;
                    }
                   .floorNameheading{padding-top: 22px !important;border: 1px solid #18AACC;margin: 1px 2px;width: 83px;background: #18AACC;height: 50px;font-size: 11px;padding: 5px;position:relative;font-weight: bold;}
    .allpaddingzero{ padding:0px;}
            .floor
            {
                width: 100%;
                /*padding: 1px;*/
                /*border: 1px solid #ccc;*/
                margin-bottom: 1px;
                background: #fff;
                display: -webkit-inline-box;                
            }
            .popupOverflow{ overflow:auto; max-height:270px;}
          .flat{border: 1px solid #bdbdbd;/*margin: 2px;*/width: 83px;height: 20px;font-size: 11px;font-weight: bold; margin: 1px 2px;}
                .popupflat{ border: 1px solid #ccc;
                margin: 2px;
                width: 87px;
                height: 28px;
               
                padding:8px;
                font-size: 11px;
                font-weight: bold; text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;  }
               .flatheading{/* border-right: 1px solid #ccc;*/margin: 1px 2px;width: 83px;background:#18AACC;height: 50px;font-size: 11px;padding:5px;font-weight: bold;color:#fff;display: flex;justify-content: left;align-items: center;}

               .projectWrapper .layout-row {
    display: flex;
    flex-direction: row;
}
            .flatHead
            {
               border: 1px solid rgba(0,0,0,0.87);
                margin: 2px;
                width: 95px;
                height: 40px;
                font-size: 14px;
                font-weight: bold; }
              .flat:hover
            {
                
                opacity:0.8;
                font-weight: bold;
                transition:0.2s; 
               /* background: #18AACC;  
                border:none;*/
                z-index:99;  
                cursor:pointer;       
                }        
                
            .estimated
            {
                border-color:#E96D09;
                overflow:hidden;
                }
            .Po
            {
                border-color:#ff00b1;
                }
            .GRN
            {
               border-color:#4F0090 ;
                }
            .Issue
            {
                border-color:#26B4AC;
                }
            .consumption
            {
                border-color:#7FD759;
                }
            .overflow
            {
                overflow:auto;
                }
            .disp-webkit-box
            {
                display: -webkit-box;
            }
            .flatDetails
            {
                
                max-height: 15rem;
                min-width: 1010px;
                border: 1px solid #ccc;
                z-index: 999;
                background:#fff;
                display:none;
                overflow:auto;
                }
                .flatDetails1
            {
                
                max-height: 500px;
                min-width: 1010px;
                border: 1px solid #ccc;
                z-index: 999;
                background:#fff;
                display:none;
                overflow:auto;
                }
            .border-bottom
            {
                border-bottom:1px solid #ccc;
                }
            .mask
            {
                position:fixed;
                width:100%;
                height:0px;
                left:0px;
                max-height:100%;
                    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
               
                background: #615f5fa6;
                z-index:99;
                }
            .height100
            {
                height:100% !important;
                display:flex;
                
                }
                
                /*transition: 2s;*/
            .disp-flex-imp
            {
                display:flex !important;
                }
    .disp-none
    {
        display:none;
        }
        .cmd-ohy-auto{ overflow:unset !important;}
        .headerLockheader{ overflow-x:auto !important;}
        </style>


        <style>
/*************** SCROLLBAR BASE CSS ***************/
 
.scroll-wrapper {
    overflow: hidden !important;
    position: relative;
}
 
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
 
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}
 
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
 
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
 
.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
 
 
 
/*************** SCROLLBAR MAC OS X ***************/
 
.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}
 
.scrollbar-macosx > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    margin:10px;
}
 
.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
.scrollbar-macosx > .scroll-element .scroll-bar {
    background-color: #6C6E71;
    display: block;
 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
 
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}
 
 
.scrollbar-macosx > .scroll-element.scroll-x {
    bottom: 0px;
    height: 0px;
    left: 0;
    min-width: 100%;
    overflow: visible;
    width: 100%;
}
 
.scrollbar-macosx > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0px;
    top: 0;
    width: 0px;
}
 
/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
 
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
 
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
 
/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }

 #bgDiv
        {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            overflow: hidden;
            padding: 0;
            margin: 0;
            background-color: Black;
            filter: alpha(opacity=25);
            opacity: 0.5;
            z-index: 999;
        }
        #Progress
        {
            top: 45%;
            left: 40%;
            text-align: center;
            position: fixed;
            background-color: transparent;
            width: 300px;
            z-index: 9999;
        }
        
        .colorheading{padding:10px 10px 0px 10px; border-radius: 3px;
    font-size: 13px;
    background-color: #daeffd;
    color: #2b6a94;
    border: solid thin #c9e4f6;
    margin: 10px 0px;}

.fl{float:left;}

.mr5{margin-right:5px;}

.colorheading .card p{ font-size:14px; float:left; padding-top:0px; margin-left:4px;}

.colordiv{ height:20px; width:20px; border-radius:4px;}

.colorbg{ background:#000;}

.colorbg1{ background:#18AACC;}

.colorbg2{ background:#0485A3;}

.colorbg3{ background:#005b71;}
  .close {color: #18AACC;}

  .projectWrapper .layout-row {
    display: flex;
  flex-direction: row;
}
#ActivityMask
{
    margin-top: 60px !important;
    position:relative;
}
    #ActivityMask .cmd-padding.pa {
        padding:10px;
    }
    #ActivityMask .close {position: absolute;
    right: 26px;
    opacity: 1;
    }
    .popupOverflow .layout-row {
    display: flex;
  flex-direction: row;
}

#ActivityMask .flatDetails1 {
    flex-direction: column;
}
#ActivityMask .flatheading {
    width: 110px;
}

#ActivityMask .popupflat {
     width: 110px;
}