/*______________________________________________________________________________________________________*/
/*                                                                                                      */
/*                              media queries for common device breakpoints                             */
/*______________________________________________________________________________________________________*/
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */





    .LP-left {
        color: #313732;
        padding: 5px 15px;
        float: left;
        display: block;
        background-color: #fff;
        width: 100%;
        height: 50px;
        box-shadow: inset 0px -1px 0px #fff;
    }
    .LP-left h3{
            font-size: 30px !important;
            font-weight: 100;
    padding: 10px 50px;
        width: 70%;
    display: none;
    float: left;
    }
    .LP-left p{
            font-size: 15px;
    font-weight: 100;
    text-align: justify;
    float: left;
    line-height: 23px;
    display: none;
    }
    .LP-logo{
            margin-bottom: 0vh;
    }
    .LP-logo h5{
            font-size: 22px;
    font-weight: 100;
    float: left;
    display: block;
        padding: 8px 5px;
    }
    .medica-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 100%;
    height: 40px;
    float: left;
    display: block;
    background-image: url("images/Mcc-logo2.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    margin: 1vh 0 0 0;
    }
    .LP-hlogo{display: none;}
    .LP-right{overflow: auto;
        position: relative;
        padding:  0px;
        float: left;
        display: block;
        width: 100%;
    height: calc(100vh - 50px);
    background: rgb(138,168,176);
    background: -moz-linear-gradient(top,  rgba(138,168,176,1) 0%, rgba(222,222,222,1) 28%, rgba(222,222,222,1) 28%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8aa8b0', endColorstr='#ffffff',GradientType=0 );

    }
    .LP-right .title_lable{
        color: #777777;    
        font-size: 18px;
    font-weight: 100;
    }
    .top-left-btn{
        position: absolute;
        /*left: calc(30% + 15px);*/
        top: 15px;
        left: 15px;
    }
    /*.top-left-btn .dropdown-menu{
            right: 0;
    left: inherit;
    }*/
    .top-right-btn{
        position: absolute;
            right: 15px;
    top: 15px;
    }
    .top-right-btn h2{
        font-size: 15px !important;
    padding: 9px;
    /*width: 100%;*/
    font-weight: 100;
    display: none;
    float: left;
    color: #ffffff;
    /*text-shadow: 0px 1px 0px #fff;*/
    }
    .top-left-btn .i-arow:after{color: #313732; }
    .sign-in{
        width: 90%;
    display: block;
    margin: 0 auto;
    padding: 12vh 0;
    }
    .sign-in h3, .sign-up h3, .choose-facility h3{
        font-size: 22px !important;
    padding: 0;
    width: 100%;
    font-weight: normal;
    display: block;
    float: left;
    color: #313732;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in h3>span, .sign-up h3>span, .choose-facility h3>span{font-size: 18px;}
    .sign-in h2 , .sign-up h2{
        font-size: 14px !important;
    padding: 0;
    width: 100%;
    font-weight: 100;
    display: block;
    float: left;
    color: #808080;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in .form-group {
    margin-bottom: 10px !important;
    }
    .sign-in .row{
            float: left;
    width: 100%;
    padding-top: 30px;
    }
    .sign-up .row{
        float: left;
        width: 100%;
        margin-top: 30px;
        /*overflow: auto;
        max-height: 60vh;*/
        /*padding-right: 5px;*/
    }
    .forg-pass{
        float: right;
        font-size: 13px;
        color: #a5a5a5;
    }
    .LP-btn{
        float: left;
    width: 100%;
    padding-top: 20px;
    text-align: center;
    }
    .LP-btn .alert{
    padding: 0px;
    margin-bottom: 5px;
    font-size: 12px;
    color: red;
    }
    .top-left-btn button, .top-right-btn button{font-size: 14px; font-weight: normal;}
    .choose-facility{
         width: 90%;
    display: block;
    margin: 0 auto;
    padding: 7vh 0;
    }
    .choose-facility .row {
    float: left;
    width: 100%;
    padding-top: 30px;
    overflow: auto;
    max-height: calc(62vh - 0px);
    padding-right: 5px;
    }
    
    
    


    .facility-btn{margin-bottom: 40px;}
    .facility-btn:hover{cursor: pointer;}
    .facility-btn:hover span{color: #fff}
    .facility-btn i{
            width: 96px;
    height: 80px;
        display: block;
        margin: 0 auto;
        background-image: url("images/facility-btn.png");
        background-repeat: no-repeat;
    }
    .facility-btn span{
        font-size: 15px;
    text-align: center;
    color: #88989c;
    width: 100%;
    display: block;
        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    
    .facility-btn.active span{color: #313732; font-weight:700;}

    .facility-btn.regional-lab i{background-position: -192px 1px ;}
    .facility-btn.hospital i{background-position: 13px 1px ;}
    .facility-btn.primary-health-care i{background-position: -90px 1px ;}
    .facility-btn.building i{background-position:-295px 1px ;}
    .facility-btn.District i{background-position:-426px 1px ;}
    .facility-btn.GlobalUser i{background-position:-569px 1px;}

    .facility-btn.regional-lab:hover i{background-position: -192px -91px ;}
    .facility-btn.hospital:hover i{background-position: 13px -91px ;}
    .facility-btn.primary-health-care:hover i{background-position: -90px -91px ;}
    .facility-btn.building:hover i{background-position:-295px -91px ;}
    .facility-btn.District:hover i{background-position:-426px -91px ;}
    .facility-btn.GlobalUser:hover i{background-position:-569px -91px;}



    body.R-T-L .col-md-3{width: 100%;}


    body.R-T-L .LP-left{float: right; box-shadow: inset 0px -1px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: 15px; left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }



}
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */




    .LP-left {
        color: #313732;
        padding: 5px 15px;
        float: left;
        display: block;
        background-color: #fff;
        width: 100%;
        height: 50px;
        box-shadow: inset 0px -1px 0px #fff;
    }
	.LP-left h3{
	        font-size: 30px !important;
	        font-weight: 100;
	padding: 10px 50px;
	    width: 70%;
	display: none;
	float: left;
	}
	.LP-left p{
	        font-size: 15px;
	font-weight: 100;
	text-align: justify;
	float: left;
	line-height: 23px;
	display: none;
	}
	.LP-logo{
            margin-bottom: 0vh;
    }
    .LP-logo h5{
            font-size: 22px;
    font-weight: 100;
    float: left;
    display: block;
        padding: 8px 5px;
    }
    .medica-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 275px;
    height: 40px;
    float: left;
    display: block;
    background-image: url("images/Mcc-logo2.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    margin: 7px 0 0 0;
	}
    .LP-hlogo{display: none;}
	.LP-right{overflow: auto;
        position: relative;
        padding: 30px;
        float: left;
        display: block;
        width: 100%;
    height: calc(100vh - 50px);
    background: rgb(138,168,176);
	background: -moz-linear-gradient(top,  rgba(138,168,176,1) 0%, rgba(222,222,222,1) 28%, rgba(222,222,222,1) 28%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8aa8b0', endColorstr='#ffffff',GradientType=0 );

    }
    .LP-right .title_lable{
        color: #777777;    
        font-size: 18px;
    font-weight: 100;
    }
    .top-left-btn{
        position: absolute;
        /*left: calc(30% + 15px);*/
        top: 15px;
        left: 15px;
    }
    /*.top-left-btn .dropdown-menu{
    	    right: 0;
    left: inherit;
    }*/
    .top-right-btn{
        position: absolute;
            right: 15px;
    top: 15px;
    }
    .top-right-btn h2{
        font-size: 15px !important;
    padding: 9px;
    /*width: 100%;*/
    font-weight: 100;
    display: block;
    float: left;
    color: #ffffff;
    /*text-shadow: 0px 1px 0px #fff;*/
    }
    .top-left-btn .i-arow:after{color: #313732; }
    .sign-in{
        width: 90%;
    display: block;
    margin: 0 auto;
    padding: 12vh 0;
    }
    .sign-in h3, .sign-up h3, .choose-facility h3{
        font-size: 24px !important;
    padding: 0;
    width: 100%;
    font-weight: normal;
    display: block;
    float: left;
    color: #313732;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in h3>span, .sign-up h3>span, .choose-facility h3>span{font-size: 20px;}
    .sign-in h2 , .sign-up h2{
        font-size: 14px !important;
    padding: 0;
    width: 100%;
    font-weight: 100;
    display: block;
    float: left;
    color: #808080;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in .form-group {
    margin-bottom: 10px !important;
    }
    .sign-in .row{
            float: left;
    width: 100%;
    padding-top: 30px;
    }
    .sign-up .row{
        float: left;
        width: 100%;
        margin-top: 30px;
        /*overflow: auto;
        max-height: 60vh;*/
        /*padding-right: 5px;*/
    }
    .forg-pass{
        float: right;
    	font-size: 13px;
    	color: #a5a5a5;
    }
    .LP-btn{
        float: left;
    width: 100%;
    padding-top: 20px;
    text-align: center;
    }
    .LP-btn .alert{
	padding: 0px;
    margin-bottom: 5px;
    font-size: 12px;
    color: red;
	}
	.top-left-btn button, .top-right-btn button{font-size: 14px; font-weight: normal;}
	.choose-facility{
         width: 90%;
    display: block;
    margin: 0 auto;
    padding: 10vh 0;
    }
    .choose-facility .row {
    float: left;
    width: 100%;
    padding-top: 30px;
    overflow: auto;
    max-height: calc(60vh - 105px);
    padding-right: 5px;
	}
	
	
	


	.facility-btn{margin-bottom: 40px;}
    .facility-btn:hover{cursor: pointer;}
    .facility-btn:hover span{color: #fff}
    .facility-btn i{
            width: 96px;
    height: 80px;
        display: block;
        margin: 0 auto;
        background-image: url("images/facility-btn.png");
        background-repeat: no-repeat;
    }
    .facility-btn span{
        font-size: 15px;
    text-align: center;
    color: #88989c;
    width: 100%;
    display: block;
        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    
    .facility-btn.active span{color: #313732; font-weight:700;}

    .facility-btn.regional-lab i{background-position: -192px 1px ;}
    .facility-btn.hospital i{background-position: 13px 1px ;}
    .facility-btn.primary-health-care i{background-position: -90px 1px ;}
    .facility-btn.building i{background-position:-295px 1px ;}
    .facility-btn.District i{background-position:-426px 1px ;}
    .facility-btn.GlobalUser i{background-position:-569px 1px;}

    .facility-btn.regional-lab:hover i{background-position: -192px -91px ;}
    .facility-btn.hospital:hover i{background-position: 13px -91px ;}
    .facility-btn.primary-health-care:hover i{background-position: -90px -91px ;}
    .facility-btn.building:hover i{background-position:-295px -91px ;}
    .facility-btn.District:hover i{background-position:-426px -91px ;}
    .facility-btn.GlobalUser:hover i{background-position:-569px -91px;}



    body.R-T-L .col-md-3{width: 100%;}



    body.R-T-L .LP-left{float: right; box-shadow: inset 0px -1px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: 15px; left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }




}
@media (max-height: 400px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 



    .LP-left {
        padding: 2px 5px !important;
        height: 40px !important;
    }
    .medica-logo {
        width: 160px !important;
        height: 40px !important;
    }
    .LP-right{
            height: calc(100vh - 40px) !important;
    }
    .sign-in .row {
        padding-top: 10px !important;
    }
    .form-group input[type=text], .form-group input[type=password]{    height: 35px !important; }

    body .sign-in h3,body .sign-up h3,body .choose-facility h3 {
        font-size: 20px !important;
    }
    .LP-btn {
        padding-top: 10px !important;
    }
    .sign-in{padding: 0 !important;}

    body .top-right-btn h2{font-size: 12px !important;}

    .top-left-btn , .top-right-btn{top: 5px !important;}

    .LP-right{padding: 45px 0px 0 !important;}

    .choose-facility .row{max-height: calc(60vh - 45px) !important;}
    .choose-facility{padding: 6vh 0 !important;}




    body.R-T-L .col-md-3{width: 100%;}


    body.R-T-L .LP-left{float: right; box-shadow: inset 0px -1px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: 15px; left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }



}
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */


    .LP-left {
        color: #313732;
        padding: 23px 15px;
        float: left;
        display: block;
        background-color: #fff;
        width: 100%;
        height: 90px;
        box-shadow: inset 0px -1px 0px #fff;
    }
	.LP-left h3{
	        font-size: 30px !important;
	        font-weight: 100;
	padding: 10px 50px;
	    width: 70%;
	display: none;
	float: left;
	}
	.LP-left p{
	        font-size: 15px;
	font-weight: 100;
	text-align: justify;
	float: left;
	line-height: 23px;
	display: none;
	}
	.LP-logo{
            margin-bottom: 0vh;
    }
    .LP-logo h5{
            font-size: 22px;
    font-weight: 100;
    float: left;
    display: block;
        padding: 8px 5px;
    }
    .medica-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 380px;
    height: 40px;
    float: left;
    display: block;
    background-image: url("images/Mcc-logo2.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    margin: 6px 0 0 0;
	}
    .LP-hlogo{display: none;}
	.LP-right{overflow: auto;
        position: relative;
        padding: 30px;
        float: left;
        display: block;
        width: 100%;
    /*height: calc(100vh - 150px);*/
    height: calc(var(--vh, 1vh) * 100 - 90px);
    background: rgb(138,168,176);
	background: -moz-linear-gradient(top,  rgba(138,168,176,1) 0%, rgba(222,222,222,1) 28%, rgba(222,222,222,1) 28%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8aa8b0', endColorstr='#ffffff',GradientType=0 );

    }
    .LP-right .title_lable{
        color: #777777;    
        font-size: 17px;
    font-weight: 100;
    }
    .top-left-btn{
        position: absolute;
        /*left: calc(30% + 15px);*/
        top: 15px;
        left: 15px;
    }
    /*.top-left-btn .dropdown-menu{
    	    right: 0;
    left: inherit;
    }*/
    .top-right-btn{
        position: absolute;
            right: 15px;
    top: 15px;
    }
    .top-right-btn h2{
        font-size: 15px !important;
    padding: 9px;
    /*width: 100%;*/
    font-weight: 100;
    display: block;
    float: left;
    color: #ffffff;
    /*text-shadow: 0px 1px 0px #fff;*/
    }
    .top-left-btn .i-arow:after{color: #313732; }
    .sign-in{
        width: 65%;
    display: block;
    margin: 0 auto;
    padding: 10vh 0;
    }
    .sign-in h3, .sign-up h3, .choose-facility h3{
        font-size: 26px !important;
    padding: 0;
    width: 100%;
    font-weight: normal;
    display: block;
    float: left;
    color: #313732;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in h3>span, .sign-up h3>span, .choose-facility h3>span{font-size: 22px;}
    .sign-in h2 , .sign-up h2{
        font-size: 14px !important;
    padding: 0;
    width: 100%;
    font-weight: 100;
    display: block;
    float: left;
    color: #808080;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in .form-group {
    margin-bottom: 10px !important;
    }
    .sign-in .row{
            float: left;
    width: 100%;
    padding-top: 30px;
    }
    .sign-up .row{
        float: left;
        width: 100%;
        margin-top: 30px;
        /*overflow: auto;
        max-height: 60vh;*/
        /*padding-right: 5px;*/
    }
    .forg-pass{
        float: right;
    	font-size: 13px;
    	color: #a5a5a5;
    }
    .LP-btn{
        float: left;
    width: 100%;
    padding-top: 20px;
    text-align: center;
    }
    .LP-btn .alert{
	padding: 0px;
    margin-bottom: 5px;
    font-size: 12px;
    color: red;
	}
	.top-left-btn button, .top-right-btn button{font-size: 14px; font-weight: normal;}
	.choose-facility{
         width: 90%;
    display: block;
    margin: 0 auto;
    padding: 10vh 0;
    }
    .choose-facility .row {
    float: left;
    width: 100%;
    padding-top: 30px;
    overflow: auto;
    max-height: calc(60vh - 105px);
    padding-right: 5px;
	}
	
	
	


	.facility-btn{margin-bottom: 40px;}
    .facility-btn:hover{cursor: pointer;}
    .facility-btn:hover span{color: #fff}
    .facility-btn i{
            width: 96px;
    height: 80px;
        display: block;
        margin: 0 auto;
        background-image: url("images/facility-btn.png");
        background-repeat: no-repeat;
    }
    .facility-btn span{
        font-size: 15px;
    text-align: center;
    color: #88989c;
    width: 100%;
    display: block;
        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    
    .facility-btn.active span{color: #313732; font-weight:700;}

    .facility-btn.regional-lab i{background-position: -192px 1px ;}
    .facility-btn.hospital i{background-position: 13px 1px ;}
    .facility-btn.primary-health-care i{background-position: -90px 1px ;}
    .facility-btn.building i{background-position:-295px 1px ;}
    .facility-btn.District i{background-position:-426px 1px ;}
    .facility-btn.GlobalUser i{background-position:-569px 1px;}

    .facility-btn.regional-lab:hover i{background-position: -192px -91px ;}
    .facility-btn.hospital:hover i{background-position: 13px -91px ;}
    .facility-btn.primary-health-care:hover i{background-position: -90px -91px ;}
    .facility-btn.building:hover i{background-position:-295px -91px ;}
    .facility-btn.District:hover i{background-position:-426px -91px ;}
    .facility-btn.GlobalUser:hover i{background-position:-569px -91px;}


    body.R-T-L .col-md-3{width: 100%;}
    




    body.R-T-L .LP-left{float: right; box-shadow: inset 0px -1px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: 15px; left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }



}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ 


	.LP-left{
	    color: #ffffff;
	    padding: 30px;
	    float: left;
	    display: block;
	background-color: #313732;
	width: 30%;
	/*height: calc(100vh - 70px);*/
    height: calc(var(--vh, 1vh) * 100);
	box-shadow: inset -1px 0px 0px #fff;
    position: relative;
	}
	.LP-left h3{
	        font-size: 30px !important;
	        font-weight: 100;
	padding: 10px 0;
	    width: 100%;
	display: block;
	float: left;
	}
	.LP-left p{
	        font-size: 15px;
	font-weight: 100;
	text-align: justify;
	float: left;
	line-height: 23px;
	display: block;
	}
	.LP-logo{
            margin-bottom: 19vh;
    }
    .LP-logo h5{
            font-size: 22px;
    font-weight: 100;
    float: left;
    display: block;
        padding: 8px 5px;
    }
    .medica-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 100%;
    height: 20vh;
    float: left;
    display: block;
    background-image: url("images/Mcc-logo2.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    margin: 0;
	}
    .LP-hlogo{display: block;
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 2;
        width: 100%;
        padding: 30px
    }
.health-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 100%;
    height: 5vw;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 80%;
    margin: 0;
}
	.LP-right{overflow: auto;
        /*position: relative;*/
        padding: 30px;
        float: left;
        display: block;
        width: 70%;
    /*height: calc(100vh - 70px);*/
    height: calc(var(--vh, 1vh) * 100);
    background: rgb(138,168,176);
	background: -moz-linear-gradient(top,  rgba(138,168,176,1) 0%, rgba(222,222,222,1) 28%, rgba(222,222,222,1) 28%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(138,168,176,1) 0%,rgba(222,222,222,1) 28%,rgba(222,222,222,1) 28%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8aa8b0', endColorstr='#ffffff',GradientType=0 );

    }
    .LP-right .title_lable{
        color: #777777;    
        font-size: 16px;
    font-weight: 100;
    }
    .top-left-btn{
        position: fixed;
        left: calc(30% + 15px);
        top: 10px;
    }
    .top-right-btn{
        position: fixed;
            right: 15px;
    top: 10px;
    }
    .top-right-btn h2{
        font-size: 15px !important;
    padding: 9px;
    /*width: 100%;*/
    font-weight: 100;
    display: block;
    float: left;
    color: #ffffff;
    /*text-shadow: 0px 1px 0px #fff;*/
    }
    .top-left-btn .i-arow:after{color: #313732; }
    .sign-in{
        width: 80%;
    display: block;
    margin: 0 auto;
    padding: 12vh 0;
    }
    .sign-in h3, .sign-up h3, .choose-facility h3{
        font-size: 30px !important;
    padding: 0;
    width: 100%;
    font-weight: normal;
    display: block;
    float: left;
    color: #313732;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in h3>span, .sign-up h3>span, .choose-facility h3>span{font-size: 26px;}
    .sign-in h2 , .sign-up h2{
        font-size: 14px !important;
    padding: 0;
    width: 100%;
    font-weight: 100;
    display: block;
    float: left;
    color: #808080;
    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in .form-group {
    margin-bottom: 10px !important;
    }
    .sign-in .row{
            float: left;
    width: 100%;
    padding-top: 30px;
    }
    .sign-up .row{
        float: left;
        width: 100%;
        margin-top: 30px;
        /*overflow: auto;
        max-height: 60vh;*/
        /*padding-right: 5px;*/
    }
    .forg-pass{
        float: right;
    	font-size: 13px;
    	color: #a5a5a5;
    }
    .LP-btn{
        float: left;
    width: 100%;
    padding-top: 20px;
    text-align: center;
    }
    .LP-btn .alert{
	padding: 0px;
    margin-bottom: 5px;
    font-size: 12px;
    color: red;
	}
	.top-left-btn button, .top-right-btn button{font-size: 14px; font-weight: normal;}
	.choose-facility{
         width: 90%;
    display: block;
    margin: 0 auto;
    padding: 8vh 0;
    }
    .choose-facility .row {
    float: left;
    width: 100%;
    padding-top: 30px;
    overflow: auto;
    max-height: 55vh;
    padding-right: 5px;
	}
	
	
	


	.facility-btn{margin-bottom: 40px;}
    .facility-btn:hover{cursor: pointer;}
    .facility-btn:hover span{color: #313732}
    .facility-btn i{
            width: 96px;
    height: 80px;
        display: block;
        margin: 0 auto;
        background-image: url("images/facility-btn.png");
        background-repeat: no-repeat;
    }
    .facility-btn span{
        font-size: 17px;
    text-align: center;
    color: #88989c;
    width: 100%;
    display: block;
        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    
    .facility-btn.active span{color: #313732; font-weight:700;}

    .facility-btn.regional-lab i{background-position: -192px 1px ;}
    .facility-btn.hospital i{background-position: 13px 1px ;}
    .facility-btn.primary-health-care i{background-position: -90px 1px ;}
    .facility-btn.building i{background-position:-295px 1px ;}
    .facility-btn.District i{background-position:-426px 1px ;}
    .facility-btn.GlobalUser i{background-position:-569px 1px;}

    .facility-btn.regional-lab:hover i{background-position: -192px -91px ;}
    .facility-btn.hospital:hover i{background-position: 13px -91px ;}
    .facility-btn.primary-health-care:hover i{background-position: -90px -91px ;}
    .facility-btn.building:hover i{background-position:-295px -91px ;}
    .facility-btn.District:hover i{background-position:-426px -91px ;}
    .facility-btn.GlobalUser:hover i{background-position:-569px -91px;}






    body.R-T-L .col-md-3{width: 100%;}


    body.R-T-L .LP-left{float: right; box-shadow: inset 1px 0px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: calc(30% + 15px); left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }




}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 


.LP-wrapper{
        width: 100%;
    }
    .LP-left {
        color: #313732;
        padding: 30px;
        float: left;
        display: block;
        background-color: #fff;
        width: 30%;
        height: 100vh;
        box-shadow: inset -1px 0px 0px #fff;
        position: relative;
    }
    .LP-right {
        overflow: auto;
        /*position: relative;*/
        padding: 30px;
        float: left;
        display: block;
        width: 70%;
        height: 100vh;
        background: linear-gradient(0deg, rgba(57, 64, 84, 1), rgba(57, 64, 84, 1)), url(images/blacknwhite.jpg);
        background-size: cover;
        background-blend-mode: multiply;
    }
    .LP-logo{
            margin-bottom: 19vh;
    }

    .medica-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 100%;
    height: 10vh;
    float: left;
    display: block;
    background-image: url("images/Mcc-logo2.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    margin: 0;
}
.LP-hlogo{display: block;
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 2;
        width: 100%;
        padding: 30px
    }
.health-logo {
    /*width: 62px;
    height: 56px;
    float: left;
    display: block;
    background-image: url("../images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70px;
    margin: 0;*/
    width: 100%;
    height: 3.4vw;
    float: left;
    display: block;
    background-image: url("images/h-logo.svg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 60%;
    margin: 0;
}
    .LP-logo h5{
            font-size: 22px;
    font-weight: 100;
    float: left;
    display: block;
        padding: 8px 5px;
    }
    .LP-left h3{
            font-size: 30px !important;
            font-weight: 100;
    padding: 10px 0;
        width: 100%;
    display: block;
    float: left;
    }
    .LP-left p{
            font-size: 15px;
    font-weight: 100;
    text-align: justify;
    float: left;
    line-height: 23px;
    display: block;
    }
    .choose-facility{
         width: 70%;
    display: block;
    margin: 0 auto;
    padding: 10vh 0;
    }
    .sign-up{
        width: 70%;
    display: block;
    margin: 0 auto;
    padding: 10vh 0;
    }
    .sign-in{
        width: 70%;
    display: block;
    margin: 0 auto;
    padding: 20vh 0;
    }
    .sign-in h3, .sign-up h3, .choose-facility h3{
        font-size: 30px !important;
	    padding: 0;
	    width: 100%;
	    font-weight: normal;
	    display: block;
	    float: left;
	    color: #313732;
	    text-shadow: 0px 1px 0px #fff;
    }
    .sign-in h3>span, .sign-up h3>span, .choose-facility h3>span{font-size: 26px;}
    .sign-in h2 , .sign-up h2{
        font-size: 14px !important;
    padding: 0;
    width: 100%;
    font-weight: 100;
    display: block;
    float: left;
    color: #fff;
    /*text-shadow: 0px 1px 0px #fff;*/
    }
    .choose-facility .row{
        float: left;
    width: 100%;
    padding-top: 30px;
    overflow: auto;
        max-height: 60vh;
        padding-right: 5px;
    }
    .sign-in .row{
            float: left;
    width: 100%;
    padding-top: 30px;
    }
    .sign-up .row{
        float: left;
        width: 100%;
        margin-top: 30px;
        /*overflow: auto;
        max-height: 60vh;*/
        /*padding-right: 5px;*/
    }
    .LP-btn{
        float: left;
    width: 100%;
    padding-top: 20px;
    text-align: center;
    }
    .LP-right .title_lable{
        color: #fff;    
        font-size: 14px;
    font-weight: 100;
    }
    .sign-in .form-group {
    margin-bottom: 10px !important;
    }
    .top-left-btn{
        position: fixed;
        left: calc(30% + 15px);
        top: 10px;
    }
    .top-right-btn{
        position: fixed;
            right: 15px;
    top: 10px;
    }
    .top-right-btn h2{
        font-size: 13px !important;
    padding: 9px;
    /*width: 100%;*/
    font-weight: 100;
    display: block;
    float: left;
    color: #ffffff;
    /*text-shadow: 0px 1px 0px #fff;*/
    }
    .top-left-btn .i-arow:after{color: #313732; }
    .forg-pass{
            float: right;
    font-size: 11px;
    color: #a5a5a5;
    }
    .facility-btn{margin-bottom: 40px;}
    .facility-btn:hover{cursor: pointer;}
    .facility-btn:hover span{color: #fff}
    .facility-btn i{
            width: 96px;
    height: 80px;
        display: block;
        margin: 0 auto;
        background-image: url("images/facility-btn.png");
        background-repeat: no-repeat;
    }
    .facility-btn span{
        font-size: 14px;
    text-align: center;
    color: #fff;
    width: 100%;
    display: block;
        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    
    .facility-btn.active span{color: #313732; font-weight:700;}

    .facility-btn.regional-lab i{background-position: -192px 1px ;}
    .facility-btn.hospital i{background-position: 13px 1px ;}
    .facility-btn.primary-health-care i{background-position: -90px 1px ;}
    .facility-btn.building i{background-position:-295px 1px ;}
    .facility-btn.District i{background-position:-426px 1px ;}
    .facility-btn.GlobalUser i{background-position:-569px 1px;}

    .facility-btn.regional-lab:hover i{background-position: -192px -91px ;}
    .facility-btn.hospital:hover i{background-position: 13px -91px ;}
    .facility-btn.primary-health-care:hover i{background-position: -90px -91px ;}
    .facility-btn.building:hover i{background-position:-295px -91px ;}
    .facility-btn.District:hover i{background-position:-426px -91px ;}
    .facility-btn.GlobalUser:hover i{background-position:-569px -91px;}

    

    .LP-btn .alert{
    	padding: 0px;
        margin-bottom: 5px;
        font-size: 12px;
        color: red;
    }

     body.R-T-L .col-md-3{width: 25%;}





























    body.R-T-L .LP-left{float: right; box-shadow: inset 1px 0px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: calc(30% + 15px); left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }



}
@media (min-width:1220px) { /* hi-res laptops and desktops */ 

}
@media (min-width:1281px) { /* hi-res laptops and desktops */ 

}





	.lang_text{display: inline-block;}
	.fa.fa-arrow-circle-right, .fa.fa-arrow-circle-left{margin: 0 5px}
	.login-loader {
      height: 4px;
      width: 100%;
      position: relative;
      overflow: hidden;
      background-color: #b1c3c8;
    }
    .login-loader:before{
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 200px;
      height: 4px;
      background-color: #f26101;
      animation: loading 2s linear infinite;
    }

    @keyframes loading {
        from {left: -200px; width: 30%;}
        50% {width: 30%;}
        70% {width: 70%;}
        80% { left: 50%;}
        95% {left: 120%;}
        to {left: 100%;}
    }


/*
    body.R-T-L .LP-left{float: right; box-shadow: inset 1px 0px 0px #fff;}
    body.R-T-L .LP-right{float: right;}
    body.R-T-L .top-left-btn{right: calc(30% + 15px); left: inherit;}
    body.R-T-L .top-right-btn{left: 15px; right: inherit;}
    body.R-T-L .top-right-btn h2{float: right;}
    body.R-T-L .choose-facility .row{float: right; padding-left: 10px; padding-right: 0;}
    body.R-T-L .sign-in h3, body.R-T-L .sign-up h3, body.R-T-L .choose-facility h3{float: right;}
    body.R-T-L .LP-logo h5, body.R-T-L .medica-logo , body.R-T-L .LP-btn{float: right;}
    body.R-T-L .dropdown-menu{left: inherit; right: 0;}
    body.R-T-L .forg-pass{float: left;}
    body.R-T-L .LP-logo h5{font-family: 'Hind Madurai', sans-serif !important; }*/



#btnLogin {
    background-color: #f26101;
    border-color: #f26101;
}