@charset "utf-8";

/* Main layout ---------------------------------------------------------------*/

* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

body, html {
		height: 100%;
		overflow: hidden;
}

header {
		position: fixed;
		top: 0;
		width: 100%;
		height: 50px;
		background-color: #333;
		color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px 0 10px;
		z-index: 1;
}

#menuToggle {
	display: none;
}				

main {
		display: flex;
		height: calc(100% - 50px); /* full height minus header */
		margin-top: 50px; /* height of the header */
}

.left-column {
		width: 250px;
		height: 100%;
		background-color: #f4f4f4;
		overflow-y: auto;
		padding:10px 0 0 0;
		position:relative;
}

.right-column {
		flex: 1;
		background-color: #fff;
		padding: 20px;
		overflow-y: auto;
}


.nav-item {
	display:block;
	padding:6px 10px 6px 10px;
	text-decoration:none; 
	color:#333;
}

.nav-item:hover:not(.nav-disabled, .nav-active:hover) {
	background: #CCC;
	color: #0a58ca;
	text-decoration:none;
}

.nav-active, .nav-active:hover {
	background: #0a58ca;
	color: #FFF !important;
	text-decoration:none;
}

.nav-disabled, .nav-disabled:hover {
	color:#999 !important;
	cursor:not-allowed;
}


@media (max-width: 992px) {
		#menuToggle {
				display: inline-block;
		}
		#logoutBtn {
			display: none;
		}
		.left-column {
				display: none;
		}
}
/* ------------------------------------------------------------- */




/* Misc */
.pointer { cursor:pointer; }
.date-picker { cursor:pointer; width:150px; background:#FFF !important; }

/* Common layout */
.details-block { margin-top:40px; margin-bottom:60px; }
.details-block h2 { border-bottom:2px solid #999; margin-bottom:15px; }
@media (min-width: 768px) { 
	.details-block .col-form-label, .details-block .col-label { width:200px; text-align:right; padding-right:30px; }	 
}

/* Form stuff */
.edit-form { max-width:992px; }
.edit-form-buttons { margin-top:40px; padding-top:20px; margin-bottom:100px; border-top:#CCC 2px solid; }
.form-control:read-only { background:white; }
.form-control:disabled { background:#e9ecef; }
.ck-editor__editable { min-height: 300px; }
.keyword-search { width: 100%; }
@media (min-width: 768px) {
	.keyword-search { width: 200px; }
}

/* Images */
.thumb { background-position:center; background-repeat:no-repeat; background-size:cover; }
.thumb-100 { width:100px; }
.thumb-150 { width:150px; }
.thumb-200 { width:200px; }