/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  font-family: 'Open Sans', sans-serif;
}


/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
h1 {
   font-weight: 100;	
}
h2 {
	font-weight: 700;
	color: #21456c;
	margin: 0;
}
h4 {
   font-weight: 700;	
}
/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

.navbar-fixed-top .navbar-collapse {
	max-height: unset !important;
	height: fit-content;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}


/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.sidebar div.panel {
	margin: 6px -12px;
}
.sidebar .panel-heading span {
    margin-top: -20px;
    font-size: 15px;
}
img.logo {
   max-width:250px; margin-top: -16px;	
}
.sidebar .clickable {
    cursor: pointer;
}
.sidebar .panel-heading {
   background-image: linear-gradient(#cbd9e9, #a1b9d3 50%, #83a0c0);
   background-image: linear-gradient(#eceae4, #f0efea 50%, #f5f4f1);
    background-image: linear-gradient(#f3f1ee, #edebe5 55%, #e3e0d9);
}
.sidebar .panel-heading h4 {
   color: #0c427d;
   padding-right: 6%;
}
.sidebar .panel-heading a:after, .sidebar a .panel-heading span:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    position: absolute;
    color: #beab97;
	margin-left: 5px;
	margin-top: 0;
}
.sidebar .panel-heading a.collapsed:after, .sidebar a.collapsed .panel-heading span:after {
    content:"\e080";
}

.sidebar .panel-heading {
	cursor: pointer;
	transition-duration: 0.2s;
}

.sidebar .panel-heading:hover {
	background-image: linear-gradient(#eeeeee, #edebf5 50%, #e5e5e5);
}

.sidebar .panel-heading:active {
	background-image: linear-gradient(#eceae4, #f0efea 50%, #f5f4f1);
}

.sidebar .panel div.grade {
   margin: 0 0 12px 0;	
}
.sidebar .panel .grade h5 {
   font-weight: 600;
   margin: 2px 0;	
}
.sidebar .panel .grade p {
  margin: 5px 0;
  font-size: 90%;
  line-height: 120%;
  padding: 1px 0;
}

/* top navbar */
.navbar-inverse {
   /*  background-image: linear-gradient(#6d94bf, #446e9b 50%, #3e648d); */
   background-image: linear-gradient(#e6e6e7, #d9d9da 50%, #d2cece);
    background-repeat: no-repeat;
    border: 1px solid #655;
    filter: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.13);
}
.navbar-nav li a:link, .navbar-nav li a:visited {
   /* color: #006be0; */
   color: #3d76b4;
}

.navbar.collapse {

}

.jumboCtr {
    padding: 10px;
}

.jumbotron {
	position: relative;
    background: #ccc url("jumbotron-bg.png") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    margin: 0 0 10px;

    transition: 0.2s ease-in-out;
    display: grid;
    grid-template-rows: 25% 75%;

/*	-moz-box-shadow: inset -4px -4px 8px #454545;
	-webkit-box-shadow: inset -4px -4px 8px #454545;
	box-shadow: inset -2px -2px 6px #454545aa, 
   		inset 2px 2px 6px #cacacaaa,
   		2px 2px 2px #111111;*/
}

.grade-containers {
	display: grid;
	grid-template-columns: auto auto;
}

.grade-containers div {
	width: 100%;
}

.jumbotron:hover {
/*	transform: scale(1.005);*/
	box-shadow:;
	box-shadow: inset -3px -3px 6px #333333aa, 
   		inset 3px 3px 6px #ddddddaa,
   		2px 2px 2px #111111;

}

/*.jumboCtr div.jumbotron {
   padding: 8px 5%;	
}*/
/*
.jumboCtr .jumbotron h2 {
	text-shadow: 2px 2px 2px #000;
}
*/

div.error_info {
   padding: 10px 25% 120px 0;	
}

.jumbotron p {
   font-size: 100%;	
}

.jumboCtr .jumbotron button {
   background: linear-gradient(#e6e6e7, #d9d9da 50%, #d2cece);
   border: 1px solid #555;
   margin-right: 5px;
   margin-bottom: 5px;
   min-width: 88px;
   transition: 0.2s ease-in-out !important;
}

.jumboCtr .jumbotron button, .jumboCtr .jumbotron button a:link, .jumboCtr .jumbotron button a:visited {
   color: #2e5987;	
   font-size: 80%;
   font-weight: 600;
}

.jumboCtr .jumbotron button:hover {
   background: linear-gradient(#fafafa, #d9d9da 50%, #cccccc);
}

.jumboCtr .jumbotron button:active {
   background: linear-gradient(#b0b0b0, #bdbdbd 50%, #e6e6e7);
}

button:focus {
	outline: none !important;
}

.jumboCtr .jumbotron div.thumb {
	width: 100%;
	display: flex;
	justify-content: center;
}

.jumboCtr .jumbotron .thumb img {
	width: 100%;
	max-width: 130px;
}

.jumboCtr .jumbotron div.thumb.wide {
/*	width: 40%;
	max-width: 245px;*/
}

.jumboCtr .jumbotron div.thumb.narrow {
/*	width: 25%;
	max-width: 222px;
	margin-top: -25px;
	min-height: 238px;
	padding: 2px;*/
}

.jumbo-lower-section {
	display: grid !important;
	grid-template-columns: 70% 30%
}

.jumbo-btn-container {
	width: 100%;
	padding-top: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;	
}

.jumbo-img-container {
	width: 100%;
}

.unselectable {
	pointer-events: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;

	/*
	 Introduced in IE 10.
	 See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
	*/
	-ms-user-select: none;
	user-select: none;
}

div.profile-container {
	display: grid;
	grid-template-columns: minmax(100px,500px) minmax(150px,400px) minmax(0px, 1fr);
	column-gap: 10px;
	row-gap: 25px;
}

div.profile-publications-containter {
	margin: 0 auto;
}

div.profile-information-container {
	background-color: #d9edf7;
	border-radius: 25px;
	padding: 25px;
	height: fit-content;
	color: #31708f;
	margin: 0 auto;
}

div.usrInfo {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 5px;
}

div.usrRole {
	text-align: right;
}

div#myModal.modal.dashboard-modal {
	display: flex !important;
	margin: auto;
	transform: translateY(100vh);
}

div#myModal.modal.fade.in.dashboard-modal {
	display: flex !important;
	margin: auto;
	transform: translateY(0vh);
}

.modal-scrollbar {
    margin-right: 5px;
    background: green;
}

video {
	width: 100%;
	max-width: 500px;
	margin: auto;
	pointer-events: none;
}

div.modal-content {
	margin: auto auto;
	width: 90%;
}

div.modal-body {
     padding: 10px 17px;	
	 overflow-y: auto;
	 max-height: 50vh;
}

.modal-body .modal-scrollbar {
   margin-right: 7px;
}
.modal-body h5 {
  font-weight: 600;	
  margin-bottom: 12px;
}

.modal-dialog {
	margin: auto !important;
}

div.fadeEffectBlue {
	background-image: linear-gradient(#b1c8e1, #d3e0ef 50%, #f4f6f9);
}
dt {
   margin: 14px 0 0 0;	
}
#testr div {
  background: #CCC;	
  border-right: 1px solid #FFC;
  border-bottom: 1px solid #FFC;
}


.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #dbf4fb;
  background-image: linear-gradient(#6d94bf, #446e9b 50%, #3e648d);
}

/*
 * Main content
 */

.main {
  padding: 20px;
}
.main .page-header {
  margin-top: 0;
}
tr:nth-child(even) {
background-color: #f0ebe7;
}

/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

p.footer_text {
	text-align: center;
	font-size: .8em;
	color: #2c3143;
	margin: 20px 0 50px 0;
}

#login_form_btns button.btn {
   background-image: linear-gradient(#cbd9e9, #a1b9d3 50%, #83a0c0);
   background-image: linear-gradient(#eceae4, #f0efea 50%, #f5f4f1);
    background-image: linear-gradient(#f3f1ee, #edebe5 55%, #e3e0d9);
}

@media (min-width: 1600px) {
	.grade-containers {
		grid-template-columns: auto auto auto;
	}
}

@media (max-width: 1260px) {
	.grade-containers {
		grid-template-columns: auto auto;
	}	
	.jumboCtr .jumbotron div.thumb.narrow {
		/*width: 33%;
		margin-top: -10px;
		max-width: 204px;
		min-height: 205px;*/
	}
}

@media (max-width: 1100px) {
	.jumboCtr .jumbotron div.thumb {
/*	   width: 32%;*/
	}
	.jumboCtr .jumbotron div.thumb.narrow {
		/*width: 34%;
		max-width: 212px;
		min-height: 186px;*/
	}
}
@media (max-width: 992px) {
	.grade-containers {
		grid-template-columns: auto;
	}
}

@media (max-width: 900px) {
	.navbar-brand {
		width: 150px;
	}
	img.logo {
		max-width: 150px;
		margin-top: -5px;
	}
}

@media (min-width: 768px) {
	.nav-hidden {
		display: none !important;
	}
	.jumbotron {
		padding: 25px !important;
	}

	.jumboCtr .jumbotron h2 {
		font-size: 26px;
/*		margin-bottom: 10px;*/
	}

	div.dashboard-modal {
		max-width: 70%;
	}
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f3f2f0;
    border-right: 1px solid #eee;
  }

  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media screen and (min-width: 400px) and (max-width: 768px) and (max-height: 768px) {
	.navbar-nav {
		columns: 2;
	}
}

@media (max-width: 768px) {
	.jumbo-btn-container {
		padding: 0px;
	}
  	.jumboCtr div.jumbotron {
		padding: 30px;
	}
	.jumboCtr .jumbotron p, .jumboCtr .jumbotron h2, .jumboCtr .jumbotron button {
	   margin: 2px;
	}
	.jumboCtr .jumbotron h2 {
		font-size: 20px;
/*		margin-bottom: 10px;*/
	}
	.jumboCtr .jumbotron div.thumb {
/*	   min-height: 178px;*/
	}
	.jumboCtr .jumbotron div.thumb.narrow {
		/*width: 30%;
		max-width: 199px;
		margin-top: -12px;*/
	}
	div.profile-container {
		display: grid;
		grid-template-columns: 1fr;
	}
	div.profile-information-container {
		order: -1;
	}
	img.logo {
	   max-width:211px; margin-top: -9px;	
	}
	div.error_info {
	   padding: 10px 12% 70px 0;	
	}
	div.usrInfo {
		grid-template-columns: 2fr 1fr;
	}
}

@media (max-width: 540px) {
	
	.jumboCtr div.jumbotron {
		padding: 20px;
	}
	.jumboCtr .jumbotron h2 {
		font-size: 23px;
	}
/*	div.modal-body {
		 min-height: 125px;
		 max-height: 145px;
	}*/
	.jumboCtr .jumbotron div.thumb {
/*	   min-height: 145px;*/
	}
	.jumboCtr .jumbotron div.thumb.narrow {
		/*width: 35%;
		max-width: 159px;
		margin-top: -4px;*/
	}
	div.error_info {
	   padding: 10px 4% 30px 0;	
	}
}

@media (max-height: 400px) {
	div.modal-content {
		width: 50%;
	}
	div.modal-header {
		padding: 5px 15px 5px;
	}
	div.modal-body {
		padding: 5px 17px 5px;
/*		max-height:45vh;*/
	}
	div.modal-footer {
		padding: 5px 15px 5px;
	}
}

@media (max-width: 380px) {
	.jumbotron {
		grid-template-rows: auto auto;
	}
	.jumbo-lower-section {
		grid-template-columns: 60% 40%;
	}
	.jumboCtr .jumbotron button {
		font-size: 70%;
	}
}