body.isMobile  {padding-top: 66.01px;font-size: 15px;}

.isMobile .nav-link.active{color:#039897!important;}
.isMobile .navbar-header .logo {
    width: 100%;
    position: absolute;
    margin-left: auto;
    left: auto;
    right: auto;
    top: -5px;
}

.isMobile.isLandscape.site-menubar-hide .navbar-header .logo.hidden-sm-up, .isMobile.isLandscape.site-menubar-open .navbar-header .logo.hidden-sm-up{display:block!important;}
.isMobile.isLandscape .navbar-header .logo img{ width:10%;}

/****************Waterfall Grid *************************/


.isMobile .page-header.hidden-sm-down.removeHeaderMb{display: none!important;}

        .isMobile .waterfall-grid .grid-box{
            max-height: 180px;
            min-height: 110px;
            border-radius: 0!important;
         }

        .isMobile .waterfall-grid .grid-box{
            max-height: 180px;
            min-height: 110px;
            border-radius: 0!important;
        }
        .isMobile .waterfall-grid .card-block{padding:1rem;}
        .isMobile .waterfall-grid .card-title{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-bottom: .5rem;
            margin-bottom: .458rem;
        }
		.isMobile .waterfall-grid .readMore{
               float:right;margin-top:0px;margin-bottom: 5px; }

        .isMobile .waterfall-news img{border-radius: 0;}
            .isMobile .waterfall-news .img-holder{background-color: black; border-radius: 0; position:relative;min-width: inherit;}
            .isMobile .waterfall-news .img-holder img{position:absolute;left:0;}
            .isMobile .waterfall-news .grid-box{
                min-height: 100px;
                max-height: 200px;
            }
            .isMobile .waterfall-news .row{ min-height: inherit; }
            .isMobile .waterfall-news .multiline_dotdot_container{height: 75px;}
            .isMobile .waterfall-news .readMore{
               float:right;
               color:#02bbb9;
               font-weight: bolder;
               position: relative;
               top: -5px;
			   margin-top:0px;
            }
            .isMobile .waterfall-news-sm-radious{border-radius: 1rem 0rem 0rem 1rem!important;}

        .isMobile .waterfall-announcement .card-block{margin: 15px;padding: 1.5rem 1rem;}
            .isMobile .waterfall-announcement .card-title{
                background:
                 linear-gradient(
                   to right,
                   #4dbd37 9%,
                   #4dbd37 10%,
                   transparent 10%,
                   transparent ) bottom no-repeat;
               background-size:100% 3px, 100% 3px ;
                }
             .isMobile .waterfall-announcement .multiline_dotdot_container{height: 75px;}
        .isMobile .waterfall-maintenance .multiline_dotdot_container{height: 75px;}

        .isMobile .waterfall-visitor .visitor-total{text-align: left;}
            .isMobile .waterfall-visitor .visitor-total .visitor-no{font-size: 1rem; } 
            .isMobile .waterfall-visitor .time-display{
                    position: relative;
                    top: 0;
                    right: 0;
                    text-align: right;
                }
             .isMobile .waterfall-visitor .time-display .checkin-time{font-size: 1rem;}
             .isMobile .waterfall-visitor .time-display .time-unit{font-size: 1rem;color:white; }
             .isMobile .waterfall-visitor .container-ticker{height: 120px;}


/***************LOGIN ************************/

        @media (orientation: portrait) {
            .login-bg.isMobile {padding-top:20%}
        }

        @media (orientation: landscape) {
            .login-bg.isMobile {padding-top:3%}
        }
     
        .user-mobile {
             display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
             /* height: 100vh;*/;
            display:none;
        }
            
            .user-mobile .login-loader{margin-top:40%; z-index: 7;}
            .user-mobile form {
                top:15%;
                left:5%;
                position: absolute;
                background: #fff;
                width: 90%;/*310px;*/
                /*height: 470px;*/
                min-height: 450px;
                border-radius: 5px;
                padding: 30px 20px 0 20px;
                box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
                box-sizing: border-box;

        }

        .user-mobile .pane{
                top:15%;
                left:5%;/*8%;*/
                position: absolute;
                background: white;
                width: 90%;/*310px;*/
                height: 470px;
                border-radius: 5px;
                padding: 30px 20px 0 20px;
                box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
                box-sizing: border-box;

        }
            .user-mobile .forms_title {
                margin-bottom: 45px;
                font-size: 1.5rem;
                font-weight: 500;
                line-height: 1em;
                text-transform: uppercase;
                color: #02bbb9;
                letter-spacing: 0.1rem;
            }
            .user-mobile .signIn input,
            .user-mobile .forgotPass .w100 {
                width: 100%;
            }
            .user-mobile .signIn{
                z-index: 2;

            }
            .user-mobile .forgotPass {
                z-index: 1;
                /*transform: perspective(100px) translate3d(100px, 0px, -30px);*/
                /*transform: perspective(0px) translate3d(5px, 20px, -10px);*/
                transform:perspective(90px) translate3d(0px, 90px, -20px);
                 opacity: 0.5;
            }
            .user-mobile .active-dx{
                animation-name: foregrounding-dx;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                /*animation-delay: 0.3s;*/
            }
            .user-mobile .active-sx{
                animation-name: foregrounding-sx;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                
            }
            .user-mobile .inactive-dx{
                animation-name: overshadowing-dx;
                
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
            }
            .user-mobile .inactive-sx{
                animation-name: overshadowing-sx;
                
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
            }

        @keyframes overshadowing-dx {
            0%{
                z-index:2;
                /*transform: perspective(100px) translate3d(0px, 0px, 0px);*/
                 transform: perspective(90px) translate3d(0px, -180px, 0px);
                opacity: 1;
                box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
            }
            100%{
                z-index: 1;
               /* transform: perspective(100px) translate3d(100px, 0px, -30px);*/
              /*  transform: perspective(0px) translate3d(5px, 20px, -10px);*/
                  transform:perspective(90px) translate3d(0px, 90px, -20px);
                opacity: 0.8;
                box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
            }
        }

        @keyframes overshadowing-sx {
            0%{
                z-index:2;
               /* transform: perspective(100px) translate3d(0px, 0px, 0px);*/
                 transform: perspective(90px) translate3d(0px, -180px, 0px);
                opacity: 1;
                box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
            }
            100%{
                z-index: 1;
               /* transform: perspective(100px) translate3d(-100px, 0px, -30px);*/
                /*transform: perspective(0px) translate3d(5px, 20px, -10px);*/
                      transform:perspective(90px) translate3d(0px, 90px, -20px);
                opacity: 0.8;
                box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
            }
        }

        @keyframes foregrounding-dx {
            0%{
                z-index:1;
               /* transform: perspective(100px) translate3d(100px, 0px, -30px);*/
                /* transform: perspective(0px) translate3d(5px, 20px, -10px);*/
                      transform:perspective(90px) translate3d(0px, 90px, -20px);
                opacity: 0.5;
            }
            50%{
                z-index:2;
                 opacity: 0.5;
               /* transform: perspective(100px) translate3d(400px, 0px, -30px);*/
                 transform: perspective(90px) translate3d(0px, 600px, -20px);
            }
            100%{
                z-index:2;
                /*transform: perspective(100px) translate3d(0px, 0px, 0px);*/
                 transform: perspective(90px) translate3d(0px, 0px, 0px);
                opacity: 1;
            }
        }

        @keyframes foregrounding-sx {
            0%{
                z-index:1;
               /* transform: perspective(100px) translate3d(-100px, 0px, -30px);*/
                transform:perspective(90px) translate3d(0px, 90px, -20px);
                opacity: 0.5;
            }
            50%{
                z-index:2;
                 opacity: 0.5;
                /*transform: perspective(100px) translate3d(-400px, 0px, -30px);*/
                transform:perspective(90px) translate3d(0px, 600px, -20px);
            }
            100%{
                z-index:2;
               /* transform: perspective(100px) translate3d(0px, 0px, 0px);*/
                 transform: perspective(90px) translate3d(0px, 0px, 0px);
                opacity: 1;
            }
        }

         .isMobile .flip-card{top:0px;/*-350px;*/}
            .isMobile .flip-card.flip  .flip-card-inner{ transform: rotateY(180deg);}
            .isMobile .flip-card-back {transform: rotateY(180deg); z-index: 10 ; background: white;}
            .isMobile .flip-card-back .avatar{
                width:100px;
                margin-top:100px;
            }

@media (max-width: 767.98px){
/*@media (min-width: 576px) { */
        :root{ 
             --lh: 1.47rem;
        }

        body{
            padding-top:66.01px;
            font-size: 15px;
        }
    
        .login-top-gap{height:10%;}

        .page-content {padding: 20px 10px;}
        .page-header {padding: 20px 20px;}

        .form-display .panel{padding:2rem 2rem;}
        .input-daterange .col-md-6:first-child, .form-display .row .col-md-6:first-child{padding-right:0px;}  
            .input-daterange .col-md-6:nth-child(2), .form-display .row .col-md-6::nth-child(2){padding-left:0px;}  

        .time-range .col-md-6{padding:0}

        .panel{background: transparent;box-shadow: unset; margin:0 10px;}

        .read-only {margin: 1rem 0;}

        .site-navbar{background: #2d2c2c;}
        .navbar-fixed-bottom, .navbar-fixed-top{z-index: 10;}
        .navbar{min-height: auto;}
        .navbar-header .logo{
                width: 100%;
                position: absolute;
                margin-left: auto;
                left: auto;
                right: auto;
                top: -5px;
        }
            .navbar-header .logo img{ width:20%;}

        .navbar-toggler{
            height: auto;
            padding: .8rem .5rem;
        }
            .navbar-toggler.unfolded{float:right;}
            .navbar-toggler.unfolded + button{margin-right: -100px;}
            .navbar-toggler.hided{float:left;}
            .navbar-toggler.hided + button{margin-right: 10px;}

       .lang-option.toggle-opt{color:white!important;margin-right: 10px;}
        .timeline-1side .vtl{padding: 10px 0px 10px 50px;}
            .timeline-1side .vtl div.ewrap {margin-left: 0rem;}
            .timeline-1side .vtl div.ewrap::after{width:40px; height:40px; left: -55px;}
            .timeline-1side .vtl div .icon{top: 35px;left: -41px;font-size: 1.5rem;}
            .timeline-1side .vtl div .icon.lnr-star, .timeline-1side .vtl div .icon.ti-hummer{left: -45px;}
            .timeline-1side .vtl div .icon.md-block { left: -43px;}
            .timeline-1side .vtl div .icon.md-search {top: 35px;}
            .timeline-1side .vtl div .icon.md-account-o { left: -42px;}
            .timeline-1side .vtl div .icon.ti-eye {left: -45px;}
            .timeline-1side .vtl div .icon.ti-pencil-alt {left: -45px;}

        .icon-file{width:30px;}
        .list-display .icon-fmt{font-size: 2em;}
        .list-display .logo{min-width: 50px;}
        .list-display .file-broken{width:26px;}
    
        .nav-link.active:hover{border-image: linear-gradient(to right, #02bab8 0%, #e43988 50%, #48c052 100% );border-image-slice: 1;border-left:0px;border-right:0px;border-top:0px;}
        .nav-tabs>li>a::after{background:transparent;}
     

        /*.waterfall-grid img{border-radius: 0rem;}*/
       /* .waterfall-grid .grid-box{
            max-height: 180px;
            min-height: 110px;
            border-radius: 0!important;
        }
            .waterfall-grid .card-block{padding:1rem;}
            .waterfall-grid .card-title{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-bottom: .5rem;
                margin-bottom: .458rem;
            }

        .waterfall-news img{border-radius: 0;}
            .waterfall-news .img-holder{background-color: black; border-radius: 0; position:relative;min-width: inherit;}
            .waterfall-news .img-holder img{
                position:absolute;
               left:0;;
            }
            .waterfall-news .grid-box{
                min-height: 100px;
                max-height: 200px;
            }
            .waterfall-news .row{
                min-height: inherit;
            }
            .waterfall-news .multiline_dotdot_container{height: 75px;}
            .waterfall-news .readMore{
               float:right;
               color:#02bbb9;
               font-weight: bolder;
               position: relative;
               top: -5px;
            }
            .waterfall-news-sm-radious{border-radius: 1rem 0rem 0rem 1rem!important;}

            .waterfall-announcement .card-block{
                margin: 15px;
            }
            .waterfall-announcement .card-title{
                background:
                 linear-gradient(
                   to right,
                   #4dbd37 9%,
                   #4dbd37 10%,
                   transparent 10%,
                   transparent ) bottom no-repeat;
               background-size:100% 3px, 100% 3px ;
                }
            .waterfall-announcement .multiline_dotdot_container{height: 75px;}
            .waterfall-maintenance .multiline_dotdot_container{height: 75px;}

            .waterfall-visitor .visitor-total{
                text-align: left;
                }
                    .waterfall-visitor .visitor-total .visitor-no{
                        font-size: 1rem;
                    } 
            .waterfall-visitor .time-display{
                    position: relative;
                    top: 0;
                    right: 0;
                    text-align: right;
                }
                .waterfall-visitor .time-display .checkin-time{
                    font-size: 1rem;
                }
                .waterfall-visitor .time-display .time-unit{
                    font-size: 1rem;
                    color:white;
                }
                .waterfall-visitor .container-ticker{
                height: 120px;
                }*/
            

       

        .building-list .img-holder{padding:10px;}   
            .building-list .col-4{
                -ms-flex: 0 0 33.3333333333%;
                flex: 0 0 33.3333333333%;
                max-width: 33.3333333333%;
            }
            .building-list .col-8{
                -ms-flex: 0 0 66.6666666667%;
                flex: 0 0 66.6666666667%;
                max-width: 66.6666666667%;
            } 

        .file-upload-image{ max-width: 100px; max-height: 75px;}
            .square .file-upload-image {
              max-height: 150px;
              max-width: 200px;
              margin: auto;
        }    
        .drag-text{height: 75px;}
            .long .drag-text{height: 152px;}
        .long .file-upload-image {max-height: 151px; max-width: 151px;}
        .icon-lg-option i {margin:5px;}
        .modal-body .avatar{width:50px;}

        #news .list-lg-display .card-title{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;   
        }

        /*Loader*/
        .page-loader{height: 80vh; vertical-align: middle; margin-top: 200px;}
        .page-no-record{margin-top: 150px;}
        .section-no-record{margin-top: 100px;}
        .tab-no-record{margin-top: 50px;}

}/*End Media Queary*/

@media (max-width: 767.98px) and (orientation: landscape) {
   /* .login-top-gap{height:5%;}*/
}

.login-bg .isMobile{
    
}