/****************
  When click on sidebar toggler and also for tablet
  *****************/

@media (min-width: 768px) {
	.mini-sidebar .sidebar-nav #sidebarnav li {
		position: relative;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li>ul {
		position: absolute;
		left: 60px;
		top: 45px;
		width: 200px;
		z-index: 1001;
		background: #f2f6f8;
		display: none;
		padding-left: 1px;
	}
	.mini-sidebar .sidebar-nav {
		padding: 5px;
	}
	.mini-sidebar.fix-sidebar .left-sidebar {
		position: absolute;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul {
		height: auto !important;
		overflow: auto;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul,
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul.collapse {
		display: block;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li>a.has-arrow:after {
		display: none;
	}
	.mini-sidebar .left-sidebar {
		width: 60px;
	}
	.mini-sidebar .user-profile {
		padding-bottom: 15px;
		width: 60px;
		margin-bottom: 7px;
	}
	.mini-sidebar .user-profile .profile-img {
		padding: 15px 0 0 0;
		margin: 0px 0 0 6px;
	}
	.mini-sidebar .user-profile .profile-img:before {
		top: 15px;
	}
	.mini-sidebar .scroll-sidebar {
		padding-bottom: 0px;
		position: absolute;
	}
	.mini-sidebar .hide-menu,
	.mini-sidebar .nav-small-cap,
	.mini-sidebar .sidebar-footer,
	.mini-sidebar .user-profile .profile-text {
		display: none;
	}
	.mini-sidebar .nav-devider {
		width: 50px;
	}
	.mini-sidebar .sidebar-nav {
		background: transparent;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li>a {
		padding: 9px 15px;
		width: 50px;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
		width: 260px;
		background: #428bca;
		color: #ffffff;
		border-color: #00719e;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a i {
		color: #ffffff;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a .hide-menu {
		display: inline;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li.active>a {
		border-color: transparent;
	}
	.mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active {
		border-color: #00719e;
	}
}

@media (max-width: 767px) {
/*	.dataTables_length {
		clear: both;
	}*/
	.mini-sidebar .left-sidebar {
		position: fixed;
	}
	.mini-sidebar .left-sidebar,
	.mini-sidebar .sidebar-footer {
		left: -260px;
	}
	.mini-sidebar.show-sidebar .left-sidebar,
	.mini-sidebar.show-sidebar .sidebar-footer {
		left: 0px;
	}
}

@media (min-width: 1600px) {
	.col-xlg-1,
	.col-xlg-10,
	.col-xlg-11,
	.col-xlg-12,
	.col-xlg-2,
	.col-xlg-3,
	.col-xlg-4,
	.col-xlg-5,
	.col-xlg-6,
	.col-xlg-7,
	.col-xlg-8,
	.col-xlg-9 {
		float: left;
	}
	.col-xlg-12 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.col-xlg-11 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 91.66666667%;
		-ms-flex: 0 0 91.66666667%;
		flex: 0 0 91.66666667%;
		max-width: 91.66666667%;
	}
	.col-xlg-10 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 83.33333333%;
		-ms-flex: 0 0 83.33333333%;
		flex: 0 0 83.33333333%;
		max-width: 83.33333333%;
	}
	.col-xlg-9 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 75%;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-xlg-8 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 66.66666667%;
		-ms-flex: 0 0 66.66666667%;
		flex: 0 0 66.66666667%;
		max-width: 66.66666667%;
	}
	.col-xlg-7 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 58.33333333%;
		-ms-flex: 0 0 58.33333333%;
		flex: 0 0 58.33333333%;
		max-width: 58.33333333%;
	}
	.col-xlg-6 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 50%;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-xlg-5 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 41.66666667%;
		-ms-flex: 0 0 41.66666667%;
		flex: 0 0 41.66666667%;
		max-width: 41.66666667%;
	}
	.col-xlg-4 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 33.33333333%;
		-ms-flex: 0 0 33.33333333%;
		flex: 0 0 33.33333333%;
		max-width: 33.33333333%;
	}
	.col-xlg-3 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-xlg-2 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 16.66666667%;
		-ms-flex: 0 0 16.66666667%;
		flex: 0 0 16.66666667%;
		max-width: 16.66666667%;
	}
	.col-xlg-1 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 8.33333333%;
		-ms-flex: 0 0 8.33333333%;
		flex: 0 0 8.33333333%;
		max-width: 8.33333333%;
	}
	.col-xlg-pull-12 {
		right: 100%;
	}
	.col-xlg-pull-11 {
		right: 91.66666667%;
	}
	.col-xlg-pull-10 {
		right: 83.33333333%;
	}
	.col-xlg-pull-9 {
		right: 75%;
	}
	.col-xlg-pull-8 {
		right: 66.66666667%;
	}
	.col-xlg-pull-7 {
		right: 58.33333333%;
	}
	.col-xlg-pull-6 {
		right: 50%;
	}
	.col-xlg-pull-5 {
		right: 41.66666667%;
	}
	.col-xlg-pull-4 {
		right: 33.33333333%;
	}
	.col-xlg-pull-3 {
		right: 25%;
	}
	.col-xlg-pull-2 {
		right: 16.66666667%;
	}
	.col-xlg-pull-1 {
		right: 8.33333333%;
	}
	.col-xlg-pull-0 {
		right: auto;
	}
	.col-xlg-push-12 {
		left: 100%;
	}
	.col-xlg-push-11 {
		left: 91.66666667%;
	}
	.col-xlg-push-10 {
		left: 83.33333333%;
	}
	.col-xlg-push-9 {
		left: 75%;
	}
	.col-xlg-push-8 {
		left: 66.66666667%;
	}
	.col-xlg-push-7 {
		left: 58.33333333%;
	}
	.col-xlg-push-6 {
		left: 50%;
	}
	.col-xlg-push-5 {
		left: 41.66666667%;
	}
	.col-xlg-push-4 {
		left: 33.33333333%;
	}
	.col-xlg-push-3 {
		left: 25%;
	}
	.col-xlg-push-2 {
		left: 16.66666667%;
	}
	.col-xlg-push-1 {
		left: 8.33333333%;
	}
	.col-xlg-push-0 {
		left: auto;
	}
	.offset-xlg-12 {
		margin-left: 100%;
	}
	.offset-xlg-11 {
		margin-left: 91.66666667%;
	}
	.offset-xlg-10 {
		margin-left: 83.33333333%;
	}
	.offset-xlg-9 {
		margin-left: 75%;
	}
	.offset-xlg-8 {
		margin-left: 66.66666667%;
	}
	.offset-xlg-7 {
		margin-left: 58.33333333%;
	}
	.offset-xlg-6 {
		margin-left: 50%;
	}
	.offset-xlg-5 {
		margin-left: 41.66666667%;
	}
	.offset-xlg-4 {
		margin-left: 33.33333333%;
	}
	.offset-xlg-3 {
		margin-left: 25%;
	}
	.offset-xlg-2 {
		margin-left: 16.66666667%;
	}
	.offset-xlg-1 {
		margin-left: 8.33333333%;
	}
	.offset-xlg-0 {
		margin-left: 0;
	}
}

@media (max-width: 575px) {
	.hidden-xs-down {
		display: none !important;
	}
}

@media (min-width: 576px) {
	.hidden-sm-up {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.hidden-sm-down {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.hidden-md-up {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.hidden-md-down {
		display: none !important;
	}
}

@media (min-width: 992px) {
	.hidden-lg-up {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	.hidden-lg-down {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.hidden-xl-up {
		display: none !important;
	}
}


/*
            Template Name: Material Pro Admin
            Author: Themedesigner
            Email: niravjoshi87@gmail.com
            File: scss
            */


/*==============================================================
             For Laptop & above all (1650px)
             ============================================================== */

@media (min-width: 1650px) {
	.widget-app-columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
	.campaign {
		height: 365px !important;
	}
}


/*==============================================================
             For Laptop & above all (1370px)
             ============================================================== */

@media (max-width: 1370px) {
	.widget-app-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}


/*-- ==============================================================
             Small Desktop & above all (1024px)
             ============================================================== */

@media (min-width: 1024px) {
	.page-wrapper {
		margin-left: 270px;
	}
	.footer {
		left: 270px;
	}
}

@media (max-width: 1023px) {
	.page-wrapper {
		margin-left: 60px;
		-webkit-transition: 0.2s ease-in;
		-o-transition: 0.2s ease-in;
		transition: 0.2s ease-in;
	}
	.footer {
		left: 60px;
	}
	.widget-app-columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.inbox-center a {
		width: 200px;
	}
}


/*-- ==============================================================
             Ipad & above all(768px)
             ============================================================== */

@media (min-width: 768px) {
	.navbar-header {
		width: 260px;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}
	.navbar-header .navbar-brand {
		padding-top: 0px !important;
	}
	.material-icon-list-demo .icons div {
		width: 33%;
		padding: 15px;
		display: inline-block;
		line-height: 40px;
	}
	.mini-sidebar .page-wrapper {
		margin-left: 60px;
	}
	.mini-sidebar .footer {
		left: 60px;
	}
	.flex-wrap {
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
		-webkit-flex-wrap: nowrap !important;
	}
}


/*-- ==============================================================
             Phone and below ipad(767px)
             ============================================================== */

@media (max-width: 767px) {
	/*Header*/
  #app .navbar-toggle {
	margin-top: 19px;
  border-color: transparent !important;
}
#app .navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}
#app .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #00608D;
}
  #app .navbar-header .navbar-brand {
		padding: 0 0 0 7px !important;
	}
#app .navbar-default .navbar-collapse{
	border-color: transparent;
}
 span .light-logo {
	width: 134px;
}
#app .navbar-default .navbar-collapse ul > li {
	border: 1px solid #00608D !important;
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	width: 49%;
	text-align: center;
}
.container-fluid {
	padding: 14px 27px 0px 13px !important;
}
#app .in-slide-content {
	font-family: 'Helvetica Neue', helvetica;
	font-size: 27px;
	margin: 49% 0;
	padding: 41px;
	width: 100%;
}
#app .panel-heading h3 {
  background: none !important;
	line-height: 1px;
	font-size: 21px;
}
#app .panel-default>.panel-heading {
    color: #00719e;
    background-color: transparent;
    border-color: #d3e0e9;
    float: inherit !important;
}
#app .panel {
    margin:40px 0 22px !important;
}
.login .login-sidebar .login-box {
	height: auto !importants;
}
#app .pos li{
  list-style-type: none !important;
}
#app .navbar-right {
	float: right !important;
	margin: 10px auto !important;
	width: 100%;
}
#app .mc-image{
  background-position: center;
}
  .topbar {
		position: fixed;
		width: 100%;
	}
	.topbar .top-navbar {
		padding-right: 15px;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-align-items: center;
	}
	.topbar .top-navbar .navbar-collapse {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
	}
	.topbar .top-navbar .navbar-nav {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}
	.t-changelog {
		display: none;
	}
	.topbar .top-navbar .navbar-nav>.nav-item.show {
		position: static;
	}
	.topbar .top-navbar .navbar-nav>.nav-item.show .dropdown-menu {
		width: 100%;
		margin-top: 0px;
	}
	.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
		padding-left: .50rem;
		padding-right: .50rem;
	}
	.topbar .top-navbar .navbar-nav .dropdown-menu {
		position: absolute;
	}
	.mega-dropdown .dropdown-menu {
		height: 480px;
		overflow: auto;
	}
	/*Sidebar and wrapper*/
	.mini-sidebar .page-wrapper {
		margin-left: 0px;
		padding-top: 70px;
	}
	.comment-text .comment-footer .action-icons {
		display: block;
		padding: 10px 0;
	}
	.vtabs .tabs-vertical {
		width: auto;
	}
	/*Footer*/
	.footer {
		left: 0px;
	}
	.material-icon-list-demo .icons div {
		width: 100%;
	}
	.error-page .footer {
		position: fixed;
		bottom: 0px;
		z-index: 10;
	}
	.error-box {
		position: relative;
		padding-bottom: 60px;
	}
	.error-body {
		padding-top: 10%;
	}
	.error-body h1 {
		font-size: 100px;
		font-weight: 600;
		line-height: 100px;
	}
	.login-register {
		position: relative;
		overflow: hidden;
	}
	.login-box {
		width: 90%;
	}
	.login-sidebar {
		padding: 10% 0;
	}
	.login-sidebar .login-box {
		position: relative;
	}
	/*This is for chat page*/
	.chat-main-box .chat-left-aside {
		left: -250px;
		position: absolute;
		-webkit-transition: 0.5s ease-in;
		-o-transition: 0.5s ease-in;
		transition: 0.5s ease-in;
		background: #ffffff;
	}
	.chat-main-box .chat-left-aside.open-pnl {
		left: 0px;
	}
	.chat-main-box .chat-left-aside .open-panel {
		display: block;
	}
	.chat-main-box .chat-right-aside {
		width: 100%;
	}
	/*Timeline*/
	ul.timeline:before {
		left: 40px;
	}
	ul.timeline>li>.timeline-panel {
		width: "calc(100% - 90px)";
		width: "calc(100% - 90px)";
		width: "calc(100% - 90px)";
	}
	ul.timeline>li>.timeline-badge {
		top: 16px;
		left: 15px;
		margin-left: 0;
	}
	ul.timeline>li>.timeline-panel {
		float: right;
	}
	ul.timeline>li>.timeline-panel:before {
		right: auto;
		left: -15px;
		border-right-width: 15px;
		border-left-width: 0;
	}
	ul.timeline>li>.timeline-panel:after {
		right: auto;
		left: -14px;
		border-right-width: 14px;
		border-left-width: 0;
	}
	/*Contact app page*/
	.left-aside {
		width: 100%;
		position: relative;
		border: 0px;
	}
	.right-aside {
		margin-left: 0px;
	}
	.flex-wrap {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		-webkit-flex-wrap: wrap !important;
	}
	.chat-list li .chat-content {
		width: calc(100% - 80px);
	}
}

@media (min-width: 576px) {
	.container {
		max-width: 100% !important;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 100 !important;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 100% !important;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 100% !important;
	}
}