@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');

.divCommandBox {
	display: block; 
	position: fixed;
	top: 100px;
	left: 100px;
	min-height: 100px;
	width: 250px;
	padding: 10px;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
	background-color: white;
	}

.divBigContainer {
	display: flex;
	}
.divTimelineContainer {
	flex: 2;
	overflow-y: auto;
	}
.divMetadataContainer {
	flex: 1;
	padding: 20px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: fit-content;
	font-size: 16px;
	background-color: #fff;
	}
.divStoryContainer {
	display: none;
	flex: 2;
	width: 650px;
	font-size: 18px;
	line-height: 150%;
	}


.divDraftViewer {
	border: 1px solid silver;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.3s ease;
	}
.divDraftViewer:hover {
	box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);
	}

.divDraftViewer .divDraftTopline {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 15px;
	gap: 10px;
	justify-content: space-between;
	padding-bottom: 10px;
	}
.divDraftViewer .divAvatar img {
	height: 46px;
	width: 46px;
	
	object-fit: cover; /* crop it to a circle */
	border-radius: 50%;
	opacity: 0.85;
	}
.divDraftViewer .divWhenPosted {
	color: #45455f;
	display: block;
	flex: 0 0 auto;
	font-size: 15px;
	height: 40px;
	line-height: 22px;
	order: 2;
	}
.divDraftViewer .divAccountInfo {
	align-items: center;
	display: flex;
	font-size: 15px;
	gap: 10px;
	line-height: 22px;
	max-width: 100%;
	overflow: hidden;
	}
.divDraftViewer .divWhoPosted {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	}
.divDraftViewer .divWhoLine {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

.divDraftContent {
	display: flex;
	flex-direction: row;
	position: relative;
	width: 580px; /* 5/24/25 by DW */
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 15px;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	
	font-size: 15px;
	line-height: 22px;
	}
.divDraftContent .divAvatarContainer {
	flex-shrink: 0;
	margin-left: 5px;
	margin-right: 10px;
	}
.divDraftContent .divTextContainer {
	flex: 1;
	border: var(--debugging-border);
	margin-right: 15px;
	}
.divDraftContent .divTitle {
	font-size: 14px; /* 4/2/25 by DW */
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	}
.divDraftContent .divTitle {
	font-size: 14px; /* 4/2/25 by DW */
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	}
.divDraftContent .divAuthorLine .spAuthor {
	font-size: 14px; /* 4/2/25 by DW */
	font-weight: bold;
	}
.divDraftContent .divAuthorLine .spAuthor a {
	color: inherit;
	cursor: pointer;
	}
.divDraftContent .divAuthorLine .spWhen {
	font-size: 14px; /* 4/2/25 by DW */
	font-style: italic;
	margin-left: .3em;
	}
.divDraftContent .divAuthorLine .spWhen:hover { /* 6/17/25 by DW */
	text-decoration: underline;
	}

.divDraftContent .divAuthorLine .spIcons {
	float: right;
	font-size: 14px; 
	margin-top: 2px;
	margin-right: 2px;
	}
.divDraftContent .divAuthorLine .spIcons i {
	margin-left: 15px;
	opacity: 0.7;
	}
.divDraftContent .divBody {
	font-family: "Ubuntu";
	font-size: 14px;
	line-height: 140%;
	
	max-height: 100px;
	
	overflow: hidden;
	}
.divDraftContent .divBody h3 { /* 5/14/25 by DW */
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-block-start: 5px;
	line-height: 150%;
	}
.divDraftContent .divBody blockquote p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
	}
.divDraftContent .divBody.showFullBody {
	max-height: none;
	}
.divDraftContent .divBody.overflows::after {
	content: '';
	position: absolute;
	bottom: 1; /* don't overwrite the border */
	left: 0;
	width: 100%;
	height: 45px; /* Height of the fade effect */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
	pointer-events: none; /* Allows clicks to pass through to the text beneath */
	transition: opacity 0.3s ease;
	}

.divDraftContent .divBody li { /* 6/8/25 by DW */
	margin-bottom: 5px;
	}

.divDraftContent .divRenderedOutline {
	margin-top: 5px;
	}
.divDraftContent .divRenderedOutline .divTitledItem,  .divDraftContent .divRenderedOutline .divSingularItem  { /* 6/5/25 by DW */
	font-size: 14px;
	line-height: 140%;
	}
.divDraftContent .divRenderedOutline .divTitle a {
	color: inherit;
	}

.divTimelineOutsideModal {
	width: 650px; 
	margin-top: 25px;
	}
.divTimelineTable .divRow {
	display: flex;
	width: 100%;
	font-size: 14px;
	margin-bottom: 10px;
	}
.divTimelineTable .divRow.hasCursor {
	background-color: aliceblue;
	}
.divTimelineTable .hovering {
	border: 1px solid darkgray;
	cursor: pointer;
	}

/* dialog timeline 6/19/25 by DW */
	.divTimelineDialog {
		}
	.divTimelineDialog .modal {
		width: 600px;
		height: 90vh !important; /* Makes the modal take up 90% of viewport height */
		top: 5vh !important;     /* Positions it 5% from the top of the viewport */
		overflow: hidden !important;
		}
	.divTimelineDialog .tooltip {
		z-index: 1060 !important; /* Higher than modal's 1050 */
		}
	.divTimelineDialog .modal-header {
		display: flex;
		justify-content: space-between;
		}
	.divTimelineDialog .modal-header .close {
		font-size: 16px;
		opacity: 0.7;
		margin-top: 3px;
		margin-right: 16px;
		}
	.divTimelineDialog .modal-header .close:hover {
		font-weight: bold;
		opacity: 1;
		}
	.divTimelineDialog .modal-body {
		max-height: calc(90vh - 100px) !important; /* 90vh minus header (60px) and footer (40px) */
		overflow-y: auto !important;
		}
	.divTimelineDialog .modal-body .divTimelineTable {
		visibility: hidden;
		}
	.divTimelineDialog .modal-footer {
		text-align: left;
		font-family: "Ubuntu";
		font-size: 14px;
		border: 1px dotted lavender;
		}
	.divTimelineDialog .divPrompt {
		font-weight: bold;
		font-size: 16px;
		opacity: 0.7;
		}
	
	.divMyConfirmDialog .modal {
		width: 650px;
		left: 48.3%;
		z-index: 1051;
		}
	.divMyConfirmDialog .modal-body {
		display: flex;
		align-items: flex-start;
		height: 4em;
		}
	.divMyConfirmDialog img {
		height: 42px;
		width: 42px;
		margin-right: 10px;
		flex-shrink: 0;
		}
	.divMyConfirmDialog .divPrompt {
		margin-top: 10px;
		flex: 1;
		}
	.divMyConfirmDialog .btn {
		width: 80px;
		margin-left: 5px;
		}
	.divMyConfirmDialogModalOverlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 1050;
		}

/* storymode 6/19/25 by DW */
	.divDraftContent.divStoryMode {
		width: 95%;
		}
	.divDraftContent.divStoryMode .divTitle {
		font-family: "Oswald";
		font-size: 42px;
		letter-spacing: -3px;
		margin-bottom: 10px;
		line-height: 110%;
		}
	.divDraftContent.divStoryMode .spAuthor {
		}
	
	.divDraftContent.divStoryMode .divBody,
	.divDraftContent.divStoryMode .divRenderedOutline .divSingularItem,
	.divDraftContent.divStoryMode .divBodytext ul, 
	.divDraftContent.divStoryMode .divBodytext {
		font-family: "Ubuntu";
		font-size: 18px;
		line-height: 140%;
		}
	
	.divDraftContent.divStoryMode .divBodytext li {
		line-height: 150%;
		margin-bottom: 0.6em;
		}
	.divDraftContent.divStoryMode .divBody {
		margin-top: 20px;
		margin-bottom: 30px;
		}
	
	.divDraftContent .divOgMetadata { /* not displayed unless in story mode */
		display: none;
		}
	.divDraftContent.divStoryMode .divOgMetadata { 
		display: block;
		margin-top: 25px;
		padding: 10px;
		padding-left: 15px;
		padding-right: 15px;
		font-size: 14px;
		line-height: 120%;
		border: 1px dashed silver;
		}
	.divDraftContent.divStoryMode .divOgTitle { 
		font-weight: bold;
		margin-bottom: 5px;
		}
	.divDraftContent.divStoryMode .divOgTitle a { 
		color: inherit;
		cursor: pointer;
		}
	.divDraftContent.divStoryMode .divOgDescription { 
		min-height: 0.5em;
		}
	.divDraftContent.divStoryMode .divOgMetadata img { 
		width: 100%;
		height: auto;
		opacity: 0.8;
		margin-top: 5px;
		}
	
	.divStoryContainer .divBackButton {
		margin-bottom: 15px;
		}

/* changing from flex to table-cell -- 7/6/25 by DW */
	
	
	.divBigContainer {
		display: table-row;
		width: 850px; 
		flex: none;
		}
	.divTimelineContainer {
		display: table-cell;
		width: 650px; 
		flex: none;
		overflow-y: visible;
		}
	.divTimelineOutsideModal {
		margin-top: 0;
		}
	.divSettingsContainer {
		display: table-cell;
		vertical-align: top;
		width: 250px;
		text-align: right;
		padding-top: 10px;
		padding-right: 10px;
		}
	
	.divDraftViewer {
		display: table;
		flex: none;
		}
	.divDraftContent {
		display: table-row;
		flex: none;
		}
	.divDraftContent .divAvatarContainer {
		display: table-cell;
		width: 56px;
		vertical-align: top;
		flex: none;
		}
	.divDraftContent .divAvatarContainer .divAvatar {
		margin-top: 8px;
		margin-left: 8px;
		}
	.divDraftContent .divTextContainer {
		display: table-cell;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 15px;
		padding-bottom: 15px;
		vertical-align: top;
		flex: none;
		}
	.divTimelineTable .divRow {
		display: block;
		flex: none;
		}
	.divStoryContainer {
		flex: none;
		width: 650px;
		}
/* 7/13/25 by DW */
	.divDraftViewer.hasCursor {
		background-color: aliceblue;
		}
	.divTimelineTable .divDraftViewer {
		margin-bottom: 10px;
		}
	.divTimelineContainer {
		display: block;
		width: 600px; 
		float: right;
		flex: none;
		overflow-y: visible;
		}
	.divStoryContainer {
		width: 600px;
		float: right;
		}