@media only screen and (max-width: 992px) {
	.main-logo {
		/*width: 100%;*/
		display: inline-block;
		text-align: center;
	}

	.img-logo {
		display: inline-block;
		text-align: center;
	}

	.navbar .navbar-toggle {
		margin-top: 0px;
	}

	.client-inst-name {
		margin-bottom: 0px;
		font-size: 15px;
	}

	.page-header {
		margin-top: 95px;
	}

	.table-responsive {
		overflow: auto !important;
	}

	/*.table-hover {
		display: block;
		overflow-x: auto;
		width: 100%;
	}*/

	.resptable {
		display: block;
		overflow-x: auto;
		width: 100%;
	}

	.block-header {
		clear: both;
		padding-top: 15px;
	}

	.page-header > a.btn {
		margin-top: 5px;
	}

	.header h4 {
		clear: both;
		padding-top: 15px;
	}

	.form-cleditor {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.navbar .navbar-nav .open .dropdown-menu {
		left: 70px;
	}

	.bar-wrapper {
		display: inline-block;
		width: 10%;
	}
	.navbar-toggle-wrapper {
		display: inline-block;
		width: 5%;
		float:right;
	}
	.dropdown-menu.open {
		right: auto !important;
		left: 0px !important;
	}
	.res-col-60 {
		width: 60% !important;
	}
	.res-col-40 {
		width: 40% !important;
	}

}

/* Prevent observation form content from overflowing on mobile */
.card .body {
	overflow-x: hidden;
}

@media only screen and (max-width: 992px) {
	/* Neutralize nested .row negative margins inside observation form items */
	.boxResponse {
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
	}

	.boxResponse > .col-md-7,
	.boxResponse > .col-md-5,
	.boxResponse > .col-md-4,
	.boxResponse > .col-md-3 {
		padding-left: 0;
		padding-right: 0;
	}

	.boxResponse .row {
		margin-left: 0;
		margin-right: 0;
	}

	.boxResponse .form-line,
	.boxResponse .col-md-12,
	.boxResponse .col-md-6,
	.boxResponse .col-md-7,
	.boxResponse .col-md-4 {
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
		max-width: 100%;
	}

	.boxResponse p,
	.boxResponse span,
	.boxResponse div,
	.boxResponse td,
	.boxResponse li {
		max-width: 100%;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.boxResponse img {
		max-width: 100%;
		height: auto;
	}

	.boxResponse table {
		max-width: 100%;
		table-layout: fixed;
		word-wrap: break-word;
	}

	/* Teacher dropdown responsive fix */
	.bootstrap-select .dropdown-menu {
		max-width: 100vw;
	}

	.bootstrap-select .dropdown-menu li a span.text {
		white-space: normal;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.bootstrap-select .filter-option {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

	.Maxwidth {
		max-width: inherit !important;
	}

	.DropDownTopmargin .dropup .dropdown-menu {
		/*top:0!important;*/
	}

	/*.table-hover {
	padding-bottom:60px;
}*/

	.nav > li > a {
		padding: 10px 14px !important;
	}

	.survey-name {
		line-height: 1.5;
	}

	.more-new:not(.remove-more) {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	input[type="date"] {
		position: relative;
		/*padding: 10px;*/
	}

		input[type="date"]::-webkit-calendar-picker-indicator {
			color: transparent;
			background: none;
			z-index: 1;
		}

		input[type="date"]:before {
			color: transparent;
			background: none;
			display: block;
			font-family: 'FontAwesome';
			content: '\f073';
			/*This is the calendar icon in FontAwesome */
			width: 15px;
			height: 20px;
			position: absolute;
			top: 0px;
			right: 6px;
			color: #444;
		}


	.dashboard-lesson-plan-listview {
		display: block;
		flex-direction: row;
	}

	span.dropdown-close-button {
		border: 1px solid #F44336;
		width: 18px;
		height: 18px;
		display: inline-block;
		margin: auto;
		text-align: center;
		line-height: 18px;
		background-color: #F44336;
		color: #fff;
		position: relative;
		cursor: pointer
	}

		span.dropdown-close-button:hover {
			opacity: 0.8;
		}

	.dropdown-close-button-header {
		display: flex;
		align-items: center;
		position: relative;
	}

	span.dropdown-close-button-wraper {
		position: absolute;
		right: 10px;
	}

@media only screen and (max-width: 1300px) {
	.table-responsive {
		overflow: auto !important;
	}
}
	@media only screen and (max-width: 992px) {
		.Des_Heading {
			display: none;
		}

		.mob_Heading {
			display: block;
		}
	}

	@media screen and (max-width: 991px) and (min-width: 480px) {
		.navbar-header.main-header-app {
			width: 85%;
		}

		.main-logo {
			width: 15%;
		}

		.site-ref {
			width: 68%;
			padding-left: 0px;
		}

			.site-ref > .navbar-brand.client-inst-name {
				margin-left: 0px;
				margin-right: 0px;
				width: 100%;
			}

		.res-col-60 {
			width: 60% !important;
		}

		.res-col-40 {
			width: 40% !important;
		}

		.menu-user-dashboard {
			vertical-align: top;
		}

		.menu-user-dashboard {
			margin-right: 1rem;
		}

		.nav > li > a {
			padding: 8px 10px !important;
		}
	}

	@media screen and (max-width: 1169px) and (min-width: 992px) {
		.bar-wrapper {
			display: inline-block;
			width: 5%;
		}

		.navbar-header.main-header-app {
			width: 86%;
		}

		.menu-user-dashboard {
			margin-right: 1rem;
		}

		.main-logo {
			/*width: 5%;*/
		}

		.site-ref {
			width: 80%;
			padding-left: 0px;
		}

			.site-ref > .navbar-brand.client-inst-name {
				margin-left: 0px;
				margin-right: 0px;
				width: 100%;
			}
	}


	@media only screen and (max-width: 1649px) and (min-width: 1200px) {
		.site-ref {
			width: 90%;
		}
	}

	@media only screen and (max-width: 1199px) and (min-width: 992px) {
		.site-ref {
			width: calc(100% - 130px);
		}

		.menu-user-dashboard {
			vertical-align: top;
		}
	}
@media only screen and (max-width: 991px) {
	.client-inst-name {
		margin-bottom: 4px;
	}
}
@media only screen and (max-width: 767px) {

	.navbar-header.main-header-app {
		width: 100%;
		margin:0;
	}
}
@media only screen and (max-width: 580px) {
	.menu-user-dashboard {
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	.site-ref {
		width: 85%;
	}
	.menu-user-logo-wrapper {
		display: block;
		margin: 0 auto;
		text-align: center;
	}
		.menu-user-logo-wrapper + .site-ref {
			width: 96%;
			margin: 0 auto;
		}
			.menu-user-logo-wrapper + .site-ref > .navbar-brand.client-inst-name{
				text-align:center;
			}
}

/* Account/Other page layouts - login-box and button stacks */
@media only screen and (max-width: 767px) {
	.login-page .login-box,
	.other-page .login-box {
		max-width: 100%;
		padding: 0 16px;
	}

	.other-page .card .col-md-3.pull-right,
	.login-page .card .col-md-3.pull-right {
		width: 100% !important;
		float: none !important;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	.other-page .card .col-md-3.pull-right a,
	.login-page .card .col-md-3.pull-right a {
		flex: 1 1 auto;
		min-width: 120px;
		text-align: center;
	}

	.other-page .navbar-collapse .nav,
	.other-page .navbar-collapse .navbar-nav {
		display: block;
	}

	.other-page .navbar-collapse .nav li,
	.other-page .navbar-collapse .navbar-nav li {
		display: block;
		text-align: center;
		margin-bottom: 8px;
	}

	.other-page .navbar-collapse .pull-right {
		float: none !important;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}
}

@media only screen and (max-width: 480px) {
	.login-box {
		margin: 0 8px;
	}

	.other-page .card .col-md-3.pull-right a,
	.login-page .card .col-md-3.pull-right a {
		width: 100%;
	}
}