/* 6/23/25 by DW */
	.cardTextArea {
		font-size: 22px;
		width: <%canvasWidth%>px; 
		line-height: 120%;
		height: 3em;
		margin: 0;
		margin-bottom: 5px;
		border: 1px solid silver;
		}
	.cardCanvas {
		width: <%canvasWidth%>px;
		height: <%canvasHeight%>px;
		border: 1px solid gainsboro;
		background-color: white;
		}
	.formForSidebar {
		position: relative;
		width: 200px;
		margin: 15px 0;
		padding: 35px 19px 14px;
		background-color: white;
		border: 1px solid  silver;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		margin-left: 5%;
		margin-right: 5%;
		text-align: center;
		}
	.formForSidebar input {
		height: 28px;
		font-size: 16px;
		}
	
	.divCardOptions {
		display: table-cell;
		width: 300px;
		vertical-align: top;
		}
	.divText {
		display: table-cell;
		font-size: 16px;
		line-height: 140%;
		vertical-align: top;
		}
	
	
	.tweetThisGroup:after {
		content: "Tweet this instead...";
		}
	.formForSidebar:after {
		position: absolute;
		top: -1px;
		left: -1px;
		padding: 3px 7px;
		font-size: 12px;
		font-weight: bold;
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		color: #9da0a4;
		-webkit-border-radius: 4px 0 4px 0;
		-moz-border-radius: 4px 0 4px 0;
		border-radius: 4px 0 4px 0;
		}
	.alignmentGroup:after {
		content: "Alignment";
		}
	.lineHeightGroup:after {
		content: "Line height";
		}
	.spacingGroup:after {
		content: "Line spacing";
		}
	.shadowBlurGroup:after {
		content: "Shadow blur";
		}
	.shadowOffsetGroup:after {
		content: "Shadow offset X, Y";
		}
	.colorPickerGroup:after {
		content: "Text, shadow, fill colors";
		}
	.fontSizeGroup:after {
		content: "Font size";
		}
	.opacityGroup:after {
		content: "Opacity";
		}
	
	.tweetInsteadText {
		font-size: 15px;
		width: 100%; 
		line-height: 120%;
		height: 5em;
		margin: 0;
		margin-bottom: 5px;
		border: 1px solid silver;
		}
	.divTweetInstead {
		margin-top: 0;
		width: 95%; 
		margin-left: auto;
		margin-right: auto;
		}
	
	
	
	
	.colorPickerGroup { /* xxx */
		text-align: center;
		}
	div.colorPicker-picker {
		display: inline-block;
		}
	.divPickers {
		text-align: center;
		}
	.spSidebarColorPicker { /* xxx */
		display: inline-block;
		width: 35px;
		margin-right: 15px;
		}
	
	
	
	
	
	
	.divToggleContainer {
		cursor: pointer; 
		font-size: 16px;
		color: #777777;
		margin-top: 10px;
		}
	.divToggleContainer a {
		text-decoration: none;
		color: #777777;
		}
	.divToggleContainer i {
		font-size: 20px;
		width: .6em;
		}
	label.right {
		text-align:right;
		float:left;
		width:7em;
		margin-right:.8em;
		font-weight: bold;
		font-size:1em;
		}
	label.right:after {
		content:": ";
		}
	.storyEnclosure {
		height: 50px;
		}
	.tleInputItem {
		font-size: 18px !important;
		padding: 2px !important; 
		height: 28px !important; 
		width: 450px !important; 
		}
	
	.divCardOptions td {
		vertical-align: top;
		}
	.divCardOptions {
		margin-bottom: 25px;
		}
	
	
	
	.divSizeBox {
		display: inline-flex;
		align-items: center;
		}
	.divSizeBoxReadout {
		font-family: sans-serif;
		font-size: 16px;
		margin-right: 4px;
		min-width: 1.1em;
		text-align: right;
		}
	.divArrows {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1;
		gap: 0;
		}
	.divArrows i {
		cursor: pointer;
		font-size: 12px;
		padding: 0;
		margin: -3px 0;
		line-height: 1;
		}
	.divSizeBoxLabel {
		font-size: 16px;
		margin-right: 3px;
		}
	
/* 7/17/25 by DW -- sliders */
	.divSlider {
		width: 250px;
		-webkit-appearance: none;
		background: transparent;
		}
	.divSlider::-webkit-slider-runnable-track {
		background: darkgray;
		height: 8px;
		border-radius: 4px;
		}
	.divSlider::-webkit-slider-thumb {
		-webkit-appearance: none;
		background: cornflowerblue;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin-top: -6px;
		}