/*--------- Body organization: Top, Center, Bottom -----------*/

#ID_TopBanner {
    min-height: 36px; 
    height: 36px; 
    padding-top: 5px;
    padding-left: 5px;
    /* Not using 'overflow:hidden because it causes problems on iPad Mini */
    /*overflow: hidden;*/ /*Clip anything that overflows */
	position: -webkit-sticky;
    position: sticky; /* Keep it pinned to the top */
    top: 0px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 9;
}

/* 2019.09.26: On iPhones allow the top banner to grow to show the promo button */
@media only screen and (max-width: 600px) {
	#ID_TopBanner { 
		height: unset;
	}
}

#ID_CenterAuthorized {
	display: flex; /* Note: app will set "display:none" when not authorized */
	height: calc(100% - 70px);
}

.CL_CenterContent {
	/*height: calc(100% - 120px); */ /* margin:40px, padding:10px, border:10px, top:30px, bottom:20px */
    /* margin-top: 20px; */
    /*margin-bottom: 20px; */
    padding-left: 20px;
    padding-right: 20px;
    /*padding-bottom: 10px; */
}

@media only screen and (max-width: 600px) {
	.CL_CenterContent { 
		height: unset;
	}
}

#ID_CenterNotAuthorized { 
	display: flex; /* Note: app will set "display:none" when authorized */
	flex-direction: column;
}

#ID_CenterNotAuthorized p {
	padding-bottom: 16px;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
}

#ID_BottomBanner {
    height: 20px; 
    clear: both;
    padding-left: 5px;
    padding-top: 5px;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 600px) {
	#ID_BottomBanner { 
		height: auto; 
	    text-align: center;
	}
}

#ID_FloatingComponents {
}

/*--------- Top Organization: LogoArea, AuthArea -----------*/

@media only screen and (max-width: 600px) {
	#ID_AuthArea { 
		xx-display: none;
	}
	
	#ID_AuthBannerBtnI { xx-display: none; }
}


#ID_AuthArea {
	float: right;
}

#ID_LogoArea {
	float: left;
}

#ID_LogoArea a {
	text-decoration: unset;
}

#ID_LogoArea a:hover {
	text-decoration: underline;
}


.CL_LogoSVG {
	height: 32px;
}


@media only screen and (max-width: 400px) {
	#ID_LogoSVGLong  { display: none; }
	#ID_LogoSVGShort { display: none; }
	#ID_LogoSVGOnly  { display: block; }
}

@media only screen and (min-width: 401px) and (max-width: 650px) {
	#ID_LogoSVGLong  { display: none; }
	#ID_LogoSVGShort { display: block; }
	#ID_LogoSVGOnly  { display: none; }
}

@media only screen and (min-width: 651px) {
	#ID_LogoSVGLong  { display: block; }
	#ID_LogoSVGShort { display: none; }
	#ID_LogoSVGOnly  { display: none; }
}


.CL_LogoText {
	font-family: 'Libre Baskerville', serif;
	font-size: 24px;
	color: blue;
}

/*
@media only screen and (max-width: 600px) {
	#ID_LogoTextLong { display: none; }
	#ID_LogoTextShort { display: block; }
}

@media only screen and (min-width: 601px) {
	#ID_LogoTextLong { display: block; }
	#ID_LogoTextShort { display: none; }
}
*/

.CL_LogoText {
	display: none;
}

#ID_TopMenu {
    float: right;
    margin-top: 5px;
    margin-right: 20px;
}

.CL_MenuLink {
	font-size: 12px;
	text-decoration: unset;
    padding: 0px 5px;
}

.CL_MenuLink:hover {
	color: blue;
} 

.CL_NavMenu {
	list-style: none;
    margin: 0;
    padding-left: 0;
}

.CL_NavMenu li {
	display: inline-block;
    background: white;
    background: rgba(255,255,255,0.1);
}

.CL_NavMenuIcon {
	display: none;
}


@media only screen and (max-width: 600px) {
	#ID_TopMenu { /* Until I can figure out how to handle the 'Get Started' button on the iPhone */
		position: unset;
    	left: unset;
    } 
	/* .CL_NavMenuIcon { display: block; } */
	/*
	.CL_NavMenu {
		position: fixed;
    	right: 20px;
	    top: 36px;	
	    border: 1px solid;
	    display: none;
    }
    
    .CL_NavMenuIcon:hover + .CL_NavMenu,
    .CL_NavMenu:hover,
    .CL_NavMenu li:hover {
	    display: block;
    }
    
	.CL_NavMenu li { 
		display: block; 
		padding: 5px;
    }
    */
}

@media only screen and (max-width: 300px) {
	#ID_TopMenu {
		float: unset;
    }
}

#ID_CenterNotAuthorized h1 {
    text-align: center;
	font-family: 'Quicksand', san-serif;
}

@media only screen and (max-width: 600px) {
	#ID_CenterNotAuthorized h1 { font-size: 18px; }
}

.CL_LogoTextBackground {
	font-size: 24px;
	font-weight: bold;
    position: absolute;
    top: 5px;
    left: 5px;
}

#ID_UnsupportedMessageArea {
    background: yellow;
    width: 100%;
    text-align: center;
}

#ID_UnsupportedMessageArea > span {
	color: red;
	font-size: 12px;
	font-weight: bold;
}

#ID_UseAnotherBrowserMessageArea {
	height:50px;
    background: yellow;
    width: 100%;
    text-align: center;
}

#ID_UseAnotherBrowserMessageArea > span {
	font-size: 18px;
	font-weight: bold;
}


/* Don't show the "unsupported browser" message on the phone */
@media only screen and (max-width: 600px) {
	#ID_UnsupportedMessageArea {     
		display: none;
	}
}


/*--------- About page, Privacy Policy page, Terms and Conditions page -----------*/

.CL_InfoContent  {
	font-size: 14px;
	height: auto;
	max-width: 750px;
	margin: auto;
	padding: 20px;
}

.CL_InfoContent p {
    font-family: 'Quattrocento';
}


/*--------- Center Organization -----------*/

#ID_HeaderInfo {
	background: #000080;
    /*padding: 110px; */
    padding: 5vmin 10vmin;
    margin: 0 -20px;
    color: white;
    text-align: center;
    box-sizing: border-box; /* So that padding does not affect size */
    height: 400px;

	background-image: url("./gifsimgs/banner.jpg");
	background-position-x: center;
}

@media only screen and (max-width: 600px) {
	#ID_HeaderInfo {
		height: 200px;
		padding: 40px;
    }
}


#ID_HeaderInfo p {
	font-family: 'Quicksand', san-serif;
	padding: 0;
}

.CL_HeaderLargeText {
    font-size: 48px;
    font-size: calc(36px + 2vw);
    font-weight: bold;
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

.CL_HeaderSmallText {
	font-size: 30px;
    font-size: calc(24px + 1vw);
    font-weight: bold;
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

@media only screen and (max-width: 850px) {
	.CL_HeaderLargeText { font-size: 36px; font-size: calc(30px + 2vw); }
	.CL_HeaderSmallText { font-size: 18px; font-size: calc(14px + 1vw); }
}

@media only screen and (max-width: 600px) {
	.CL_HeaderLargeText { font-size: 18px; }
	.CL_HeaderSmallText { font-size: 12px; }
}

.CL_LandingSectionHeader {
	position: relative;
}

.CL_LandingSectionTrailer {
	height: 5px;
	border: 1px solid darkgray;
}

#ID_CompanyLogosDiv {
    text-align: center;
    padding: 20px	
}

#ID_CompanyLogos p {
    font-weight: bold;
}

#ID_CompanyLogos {
	display: flex;
	flex-flow: wrap;
	align-items: center;
	justify-content: space-around;
}

@media only screen and (max-width: 600px) {
	#ID_CompanyLogos {
		max-height: 80px;
		overflow-x: scroll;
    }
}
.CL_CompanyLogo {
	max-width: 100px;
	margin: 10px 10px;
}


.CL_Products {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.CL_ProductDiv {
	margin: 10px;
	/*display: flex;*/
	position: relative;
}

.CL_ProductDiv div {
	padding: 10px;
	margin: 10px;
	background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 10px;
    position: absolute;
}

.CL_ProductDiv img {
	height: 300px;
	border-radius: 10px;
}


.CL_ProductHeader {
	font-size: 24px;
	display: block;
	margin-bottom: 10px;
}

.CL_ProductText {
	font-size: 18px;
}

@media only screen and (max-width: 600px) {
	.CL_ProductDiv img { height: 200px;	}
	.CL_ProductHeader { font-size: 18px; }
	.CL_ProductText { display: none; }
}

/*---------_ CTA _-----------*/
/* http://buttonoptimizer.com/ */
 
.CL_CTA {
	box-sizing: content-box;
    border-radius: 8px;
    width: 100px;
    padding: 8px;
    position: absolute;
    margin-top: 16px;
    text-align: center;
    font-family: 'Quicksand', san-serif;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;

    color: #111111;
    text-shadow: #ffffff 1px 1px 1px;
    
    border: 1px solid #a9a9ae;
    
	background: #4c5cb5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f2f9), to(#cbd2f7));
	background: -webkit-linear-gradient(top, #f1f2f9, #cbd2f7);
	background: -moz-linear-gradient(top, #f1f2f9, #cbd2f7);
	background: -ms-linear-gradient(top, #f1f2f9, #cbd2f7);
	background: -o-linear-gradient(top, #f1f2f9, #cbd2f7);

}

.CL_CTA:hover {
	background-color: #ddddee;
	background: -webkit-linear-gradient(top, #cbd2f7, #f1f2f9);
	background: -moz-linear-gradient(top, #cbd2f7, #f1f2f9);
	background: -ms-linear-gradient(top, #cbd2f7, #f1f2f9);
	background: -o-linear-gradient(top, #cbd2f7, #f1f2f9);
}

.CL_CTA:active {
    background: #a9a9ae;
    background: -webkit-gradient(linear, left top, left bottom, from(#a9a9ae), to(#cbd3f7));
    background: -moz-linear-gradient(top, #a9a9ae, #cbd3f7);
    background: linear-gradient(to bottom, #a9a9ae, #cbd3f7);
}

.CL_CTA:disabled {
	color: darkgray
}

@media only screen and (max-width: 800px) {
	.CL_CTA { width: 60px; font-size: 12px; }
}

/* Don't show CTA on phones */
@media only screen and (max-width: 600px) {
	.CL_CTA {
		xx-display: none; 
		position: relative;
		margin-left: auto;
		margin-right: auto;	 
	}
}


/*--------_ workflow _----------- */
.CL_Workflows {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.CL_WorkflowDiv {
	margin: 10px;
	position: relative;
}

.CL_WorkflowDiv div {
	/*padding: 10px;*/
	/*margin: 10px;*/
	max-width: 300px;
}

.CL_WorkflowDiv img {
	max-height: 300px;
    width: auto;
    margin-top: 5px;
    border: 1px solid darkgray;
}


.CL_WorkflowHeader {
	font-size: 18px;
	display: block;
	text-decoration: underline;
}

.CL_WorkflowText {
	font-size: 14px;
	display: block;
}

@media only screen and (max-width: 600px) {
	.CL_WorkflowDiv img { height: 200px; }
	.CL_WorkflowHeader { font-size: 14px; }
	.CL_WorkflowText { display: 12px; }
}

/*--------_ --- _----------- */

.CL_ToolbarContainer {
	display: flex;
    position: absolute;
    background: rgba(192, 255, 255, 0.2);
    /*z-index: 3;*/
    border-radius: 5px;
}

.CL_ToolbarItem {
	margin: 1px;
	display: block;
	height: 24px;
	width: 24px;
	border-radius: 3px;
	border: 1px solid lightblue;
}

.CL_ToolbarItem-selected {
	background: rgba(0, 0, 255, 0.25);
    margin: 0px;
    border: 2px solid #00f;
}

.CL_ToolbarItem-sketch {
}

.CL_ToolbarItem:hover {
	 background: rgba(192, 255, 255, 0.4);
}

.CL_ToolbarItem:active {
	background-color: #eef;
}

#ID_GeneralToolbarDiv {
	top: 43px;
	right: 5px;
}

#ID_TableAndControls {
	height: 100%;
	width: 100%;
}

#ID_CanvasLayoutGrid {
	display: flex; 
	float: left; 
	height: 100%; 
	width: calc(100% - 400px);
}

@media only screen and (max-width: 600px) {
	#ID_CanvasLayoutGrid {
		display: none;
	}
}

#ID_EditCanvas {
	cursor: grab;
}

#ID_EditCanvasDiv {
	position: relative;
	flex-grow:1; 
	height:100%; 
	padding-left:2px;
}

#ID_SymmetryOptions {
	border: 1px solid #eeeeee;
    /* margin: 2px; */
    padding: 2px;
}

@media only screen and (max-width: 600px) {
	#ID_MobileNotReady {
    	padding: 10px;
    	margin: 0px -10px;
		background-color: #E8EBFF;
	    border-radius: 9px;
        text-align: center;
	}

	#ID_SmallMobileDiv {
		background-color: #E8EBFF;
        text-align: center;
	}
}

@media only screen and (min-width: 601px) {
	#ID_MobileNotReady { display: none; }
	#ID_SmallMobileDiv { display: none; }
}

#ID_RightPanelButtonContainer {
}

@media only screen and (max-width: 600px) {
	#ID_RightPanelButtonContainer {
		display: none;
	}
}


/*--------- Bottom Organization -----------*/

@media only screen and (max-width: 600px) {
	#ID_Pricing {
		display: none;
	}
	#ID_FreeToolsLink {
		display: none;
	}
}

.CL_SiteLink {
	font-size: 16px;
	font-weight: bold;
}

.CL_LinkSpan {
	text-decoration: underline;
    padding: 0px 10px;
    cursor: pointer;
}

#ID_SiteLink {
}

/*--------_ Social Media icons _----------- */
.CL_SocialMedia {
	display: inline-block;
	margin-left: 50px;
}

.CL_SocialMedia-link {
    margin-right: 6px;
    margin-left: 6px;
}

.CL_SocialMedia-icon {
	max-height: 16px;
}

#ID_SocialMediaMobile {
    text-align: center;
    padding: 20px;
}

#ID_TagLine { 
	font-size: 14px;
    vertical-align: top;
	font-weight: bold;
	padding-left: 20px;
	padding-right: 20px;
}

#ID_Version {
	float: right;
	font-size: 12px;
	padding-right: 20px;
}

@media only screen and (max-width: 600px) {
	#ID_TagLine { 
		font-size: 12px;
		font-weight: unset;
		padding: 0 5px;
	}
	
	#ID_Version {
		font-size: 10px;
		padding-right: 10px;
		float: unset;
		display: block;

	}

	.CL_SocialMedia {
		display: block;
		margin-left: 0px;
	}


	.CL_SocialMedia-icon { max-height: 32px; }
}

@media only screen and (min-width: 601px) {
	.CL_SocialMedia-top { display: none; }	
}


/*--------- Message Banner -----------*/
.message-banner {
	position:absolute;
	top: 50px;
	left: 140px;
	border-radius: 20px;
	padding: 20px;
	background-color: #B2BDFF;
	background-color: rgba(178, 189, 255, 0.5);
	width: 50%;
	animation: KEY-message-banner-fadein 0.25s;
}

.message-banner-small {
	width: 20%;
	padding: 10px;
}

.message-banner-bottom {
	top: unset;
	bottom: 50px;
}

.message-banner-fadeout {
	animation: KEY-message-banner-fadeout 0.5s;
}

@keyframes KEY-message-banner-fadein {
 from { opacity: 0.0 }
 to { opacity: 1.0 }
}

@keyframes KEY-message-banner-fadeout {
 from { opacity: 1.0 }
 to { opacity: 0.0 }
}

/*--------- Element Highlight -----------*/
.element-highlight {
	outline: 12px solid rgba(0, 0, 255, 0.5);
	animation: KEY-element-highlight-fadein 0.8s;
}

.element-highlight-fadeout {
	animation: KEY-element-highlight-fadeout 0.8s;
}

@keyframes KEY-element-highlight-fadein {
 from { outline: 0px solid rgba(0, 0, 255, 0.0); }
 50%   { outline: 18px solid rgba(0, 0, 255, 0.5); }
 to   { outline: 12px solid rgba(0, 0, 255, 0.5); }
}


@keyframes KEY-element-highlight-fadeout {
 from { outline: 12px solid rgba(0, 0, 255, 0.5); }
 50%   { outline: 18px solid rgba(0, 0, 255, 0.5); }
 to   { outline: 12px solid rgba(0, 0, 255, 0.0); }
}

#ID_TileCanvasHolder {
	width: 350px;
	height: 350px;
}

#ID_TileCanvasAndToolbars {
	position: relative;
	width: 100%;
	height: 100%;
}
#ID_TileCanvas {
	width: 100%;
	height: 100%;
	border: 1px solid lightgrey; 
}

#ID_EditorToolbarDiv {
	top: 5px;
	right: 5px;
}

#ID_ImageToolbarDiv {
    z-index: 5;
    top: 5px;
    right: 5px;
}


/*--------- Line Info-----------*/

#ID_LineInfoContainer { 
	/* Allow scrolling of the line info table */
	max-height: 200px;
    overflow-y: auto;
}

#ID_LineInfoContainer > table {
	border-collapse: collapse;
	font-size: 10px;
	table-layout: fixed;
}

#ID_LineInfoContainer > table tr {
	line-height: 15px;
}

#ID_LineInfoContainer > table tr:focus{
    outline: none;
}
.CL_LineInfoTable-MouseOver {
	background-color: rgba(0, 0, 255, 0.25);
}

#ID_LineInfoContainer > table th, td {
  border-bottom: 1px solid #ddd;
}

/* Columns */
.CL_LineInfoTable_Column {
}

.CL_LineInfoTable_Column-Space {
	width: 20px;
}

.CL_LineInfoTable_Column-Radio {
	width: 20px;
}

.CL_LineInfoTable_Column-RightNum {
	width: 20px;
}

.CL_LineInfoTable_Column-RightDec {
	width: 20px;
}

.CL_LineInfoTable_Column-MultiVal {
	width: 20px;
}

.CL_LineInfoTable_Column-Selected {
	width: 20px;
}

.CL_LineInfoTable_Column-Color {
	width: 20px;
}

.CL_LineInfoTable_Column-BitField {
	width: 30px;
}

/* Heading */
.CL_LineInfoTable_Heading {
	cursor: default;
}

.CL_LineInfoTable_Heading-Space {
}

.CL_LineInfoTable_Heading-Radio {
	text-align: center;
}

.CL_LineInfoTable_Heading-RightNum {
	text-align: right;
}

.CL_LineInfoTable_Heading-RightDec {
	text-align: right;
}

.CL_LineInfoTable_Heading-MultiVal {
	text-align: center;
}

.CL_LineInfoTable_Heading-Selected {
	text-align: center;
}

.CL_LineInfoTable_Heading-Color {
	
}

.CL_LineInfoTable_Heading-BitField {
	text-align: center;
	font-size: 15px;
}

/* Cells */
.CL_LineInfoTable_Cell {
	padding: 0;
	cursor: default;
}

.CL_LineInfoTable_Cell-Space {
}

.CL_LineInfoTable_Cell-Radio {
	text-align: center;
	font-size: 16px;
}

.CL_LineInfoTable_Cell-RightNum {
	text-align: right;
}

.CL_LineInfoTable_Cell-RightDec {
	text-align: right;
}

.CL_LineInfoTable_Cell-MultiVal {
	text-align: center;
	font-size: 16px;
}

.CL_LineInfoTable_Cell-Selected {
	text-align: center;
	font-size: 16px;
}

.CL_LineInfoTable_Cell-Color {
}

.CL_LineInfoTable_Cell-BitField {
	text-align: center;
}

/* Input field */
.CL_LineInfoTable_Input {
	width: 80px;
}

/*--------- >> to be organized << -----------*/

.CL_IntroSection {
	display:flex;
	flex-flow: wrap;
}

.CL_IntroContainer {
	display: flex;
	align-items: center; /* So gifs aren't scaled weird */
    margin: 10px;
    /*border: 1px solid #f0f0ff;*/
    padding: 10px;
}

.CL_IntroContainer h3 {
	font-size: 16px;
    margin-bottom: 0;
	text-decoration: underline;
}


@media only screen and (max-width: 600px) {
	.CL_IntroContainer { 
		flex-direction: column;
	}
}

.CL_IntroHorzLine {
    display: block;
    height: 1px;
    border: 0;
	border-top: 2px solid #f0f0ff;
	margin: 5px;
}

.CL_IntroTextDiv {
	display:flex;
	margin: 5px;
	padding: 5px;
    min-width: 170px;
    font-size: 18px;
}


.CL_IntroTextDiv div {
	margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
}

@media only screen and (max-width: 1100px) {
	.CL_IntroTextDiv { 
		width: unset;
		flex-flow: column;
	}

	.CL_IntroTextDiv div {
		padding: unset;
		border: unset;
		margin: unset;
	}
}

@media only screen and (max-width: 800px) {
	.CL_IntroTextDiv { 
		font-size: 12px;
	}
}

@media only screen and (max-width: 600px) {
	.CL_IntroTextDiv { 
		font-size: 12px;
		width: unset;
		flex-flow: column;
	}
	
	.CL_IntroContainer h3 {
		text-decoration: unset;
	    margin-top: 0;
	}
}

@media only screen and (max-width: 600px) {
	.CL_IntroText-more{ display: none; }
}

.CL_IntroGif {
	max-width: 400px;
	border: 1px solid darkgray;
}

@media only screen and (max-width: 600px) {
	/* For small screens */
	.CL_IntroGif { 
		max-width: 100%;
	}
}

#ID_SiteName {
	/*font-size: 36px;*/
}

/* The Close Button */
.CL_XCloseButton {
	position: relative;	/* Keep the button above any...  */
    z-index: 1;			/* ...other items in the div */
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
	cursor: pointer;
}

.CL_XCloseButton:hover,
.CL_XCloseButton:focus {
    color: black;
    text-decoration: none;
}


/*--------- Examples -----------*/
.CL_Examples {
	flex-grow: 1;
	overflow: auto;
}

.CL_Examples div {
	display: inline-block;
	padding: 12px;
	margin: 6px;
	width: 200px;
	text-align: center;
	vertical-align: middle;
	height: 200px;
}

.CL_Examples a {
	font-size: 16px;
}

.CL_Examples anull {
	xxvertical-align: middle;
}

.CL_Examples span {
	display: block;
}

.CL_Examples img {
	height: auto;
	max-height: 180px; /* 20 pixels less than div, room for description */
    max-width: 100%;
    margin-top: 8px;
	border-radius: 8px;
}

/*--------- Organizer (left panel) -----------*/

#ID_LeftPanelArea {
	height: 100%; /* Added to fix iOS problem */
}

#ID_OrgExpanderButton {
	float: left;
	margin-top: 8px;
	margin-left: 2px;
	margin-right: 7px;
	padding: 0px;
	width: 10px;
	border: none;
}

#ID_OrgExpanderButtonImg {
}

#ID_WorkbookTabAreaL {
	margin-left: 10px; /* Space for expander button */
}

#ID_OrganizerHider {
	height: 100%;
}

#ID_OrganizerDisplayArea {
	border: 1px solid lightgray;
    height: calc(100% - 32px);
}

.CL_OrganizerTabArea {
    display: none;
    flex-direction: column;	
    padding: 0px 10px; 
	width: 100px; 
	height: 100%; 
}

.CL_OrganizerContent {
	overflow-y: scroll; 
	overflow-x: hidden; 
	height: calc(100% - 12px);
}

#ID_WorkbookDiv {
	height: 100%; 
}

#ID_ProjectDiv {
	height: 100%;
}

.CL_OrganizerButton {
	margin: 2px 3px;
	padding: 2px 5px;
	font-size: 9px;
	width: 80px;
}

.CL_OrganizerInfo {
	font-size: 9px;
	width: 100%;
    display: inline-block;
    font-style: italic;
}

.CL_OrganizerText {
	font-size: 9px;
	width: 100%;
    display: inline-block;
}

/*--------- Billing Portal Dialog -----------*/
#ID_PortalBackground {
    display: none;
    position: fixed; 
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	background-color: rgba(0,0,0,0.4);
	align-items: center;
    font-family: 'Quicksand';
}

#ID_PortalDiv {
	position: relative;
    max-width: 600px;
    width: 50%;
    height: 200px;    
    border-radius: 8px;
    border: 10px solid #B2BDFF;
	margin: auto;
    padding: 30px;
	background: #fdfdfd;
	-moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

#ID_PortalDiv button,
#ID_PortalDiv a {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 14px;
	font-weight:bold;
    font-family: 'Quicksand';
}

.CL_PortalError {
	color: red;
}

.CL_PortalLink {
	position: relative;
	color: black;
}

.CL_PortalLinkGray {
	color: gray;
}


/*--------- Promo Dialog -----------*/
#ID_PromoBackground {
    display: none;
    position: fixed; 
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	background-color: rgba(0,0,0,0.4);
	align-items: center;
}

#ID_PromoDiv {
	position: relative;
    max-width: 800px;
    width: 50%;
    height: 300px;    
    border-radius: 8px;
    border: 10px solid #B2BDFF;
	margin: auto;
    padding: 30px;
	background: #fdfdfd;
	-moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

.CL_PromoText {
	display: block;
	font-size: 18px;
	margin-top: 20px;
}


#ID_PromoImg {
    display: block;
    max-height: 80px;
    max-width: 90%;
    margin: 0 auto; /* center horizontally */
}

#ID_PromoWelcome {
	font-family: 'Quicksand', san-serif;
	font-size: 24px;
    font-weight: bold;
    color: blue;
}

@media only screen and (max-width: 600px) {
	#ID_PromoWelcome { font-size: 14px; }
	.CL_PromoText { font-size: 12px; }
}

#ID_PromoSignIn {
	position: relative;
	float: right;
    margin-top: 20px;
}

#ID_PromoAccept {
	position: relative;
	float: right;
    margin-top: 20px;
}

#ID_PromoPending {
	position: relative;
    margin-top: 5px;
    float: right;
    margin-right: 20px;
    cursor: pointer;
    border: 1px solid #c0c0ff;
    border-radius: 6px;
    padding: 3px 20px;
}

#ID_PromoPending:hover {
    border: 1px solid rgb(128, 128, 128);
    background: #B2BDFF;
    color: white;
}

@media only screen and (max-width: 600px) {
	#ID_PromoPending { 
		float: unset;
		margin-top: 40px;
		margin-bottom: 10px;
	}
}

#ID_PromoPendingCode {
    display: inline-block;
    font-size: 14px;
}

#ID_PromoPendingClear {
    box-sizing: border-box;
    display: inline-block;
	position: absolute;
    margin: 0;
    right: 5px;
    padding: 0;
    font-size: 20px;
    top: -3px;
    color: lightgray;
    height: 10px;
    width: 10px;
	color: #B2BDFF;
}

#ID_PromoPendingClear:hover {
	color: black;
}



/*--------- Subscription Options -----------*/
#ID_SubscriptionInfoBackground {
    display: none;
    position: fixed; 
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	background-color: rgba(0,0,0,0.4);
	align-items: center;
}

#ID_SubscriptionInfoDiv {
	position: relative;
    max-width: 1200px;
    border-radius: 8px;
	margin: auto;
    padding: 30px;
    width: 80%;
	background: #f0f0fd;
	-moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

#ID_HideSubscriptionInfo {
}

#ID_FreeSignup {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid lightgray;
}

#ID_UpgradeOptionsText {
}

.CL_LowerPrices {
	color: red;
}

.CL_LowerPrices::before, .CL_LowerPrices::after {
	/*display: inline-block; */
	content: "\2605"; /* Star */
	padding-left:5px;
	padding-right: 5px;
    /* transform: translateY(-5px); */
}

.CL_SubHeader {
    font-size: 1.25em;
    font-weight: bold;
    color: black;
    font-style: italic;
}

#ID_FreeMessage {
	font-size: 1.5em;
	font-weight: bold;
    text-align: center;
}

.CL_FreeWord {
    border-radius: 5px;
    color: white;
    background: blue;
    padding: 10px;
    display: inline-block;
}

.CL_FreeDesc {
	display: flex;
	justify-content: space-evenly;
    font-size: 1em;
    font-weight: bold;
    color: black;
}

.CL_FreeDesc p {
	border-radius: 5px;
    border: 2px solid #ccf;
    /*background: #eee;*/
    margin: 5px;
    padding: 15px;
    text-align: center;
    box-shadow: inset 1px 3px 5px 1px #ccc;
}

#ID_SubscriptionList {
	display: flex;
	width: 100%; 
	padding-top: 10px;
}

.CL_SubscriptionItem {
    flex-grow: 1;
	flex-basis: 0;
    padding: 20px;
	font-size: 12px;
	position: relative;
}

.CL_SubscribedItem {
	outline-color: rgb(128, 128, 255);
    outline-style: dotted;
    outline-width: 5px;
    outline-style: dotted;
    outline-offset: -8px;	
}

.CL_SubscribedPendingCancel {
    outline-color: red;
}

.CL_SubscriptionYourPlan {
	top: -25px;
    left: 0px;
    position: absolute;
    width: 100%;	
    display: block;
	font-size: 20px;
	text-align: center;
    color: blue;
}

.CL_PendingCancel {
    color: red;
}


.CL_SubscriptionCancels {
	bottom: -25px;
    left: 0px;
    position: absolute;
    width: 100%;	
    display: block;
	font-size: 20px;
	text-align: center;
    color: red;
}


.CL_SubLeftBorderLine {
	border-left: 1px solid #cccccc;
}

.CL_SubName {
	display: block;
	font-size: 16px;
	padding: 5px 10px;
	margin: 5px;
	color: white;
	background-color: #00F;
	text-align: center;
	border-radius: 3px;
}

.CL_SubGrayBackground {
	background-color: #888;
}

.CL_SubGrayText {
	color: #888;
}


.CL_SubPrice {
	display: block;
	font-size: 12px;
	padding: 5px;
    margin: 10px 0px;
    text-align: center;
}

.CL_SubFeatures { /* ul */
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

 
.CL_SubFeatures li {
	font-weight: 200;
	font-size: 14px;
	padding-bottom: 5px;
    padding-top: 5px;
    line-height: 1.25;  border-bottom: 1px solid #ccc;
}
 
.CL_SubFeatures li:last-child {
  border: none;
}

.CL_BuyButton {
	display: block;
	font-size: 16px;
	padding: 5px 20px;
	color: white;
	background-color: #8080ff;
	margin: 10px auto;
	border-radius: 8px;
	border: unset;
}

.CL_BuyButton:hover {
	background-color: #4040c0;
}

.CL_BuyButton:active {
	color: black;
}

.CL_BuyButton:disabled {
	background-color: #d0d0ff;
    color: #f0f0f0;
}


.CL_SubSignUpOrIn {
	display: block;
	font-size: 20px;
	padding: 5px 20px;
	margin: 10px auto;
	text-align: center;
	border-radius: 8px;
	background-color: blue;
	font-weight: bold;
    color: white;
}

.CL_SubSignUpOrIn-notused {
	display: none;
}

.CL_SubSignUpOrIn:hover {
	background-color: #0000cc;
}

.CL_SubSignUpOrIn:active {
	background-color: #4040c0;
	color: white;
}

.CL_SubInfoNotAuth {
}

#ID_SubFreeInfo {
	font-size: 1.25em;
    margin: 20px;
    border: 1px solid #c0c0ff;
    padding: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 900px) {
	.CL_SubName 		{ font-size: 16px; }
	.CL_SubPrice 		{ font-size: 12px; }
	.CL_SubFeatures li	{ font-size: 10px; }
	.CL_BuyButton 		{ font-size: 12px; }
	.CL_SubSignUpOrIn	{ font-size: 12px; }
	#ID_SubFreeInfo 	{ font-size: 10px; }
	.CL_SubscriptionItem { padding: 8px; }
	.CL_FreeDesc p      { font-size: 10px; padding:5px; }
	.CL_SubHeader      { font-size: 12px; }
}

@media only screen and (max-width: 600px) {
	.CL_SubName 		{ font-size: 12px; }
	.CL_SubFeatures li	{ font-size: 9px; }
	.CL_SubscriptionItem { padding: 4px; }
}



/*--------- Blocked Dialog -----------*/
#ID_BlockedBackground {
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255,0.9);
    align-items: center;
    animation-name: KEY_DialogAnimateFadeIn;
    animation-duration: 0.2s;
}


#ID_BlockedDismiss {
	xx-position: absolute;
	xx-bottom: 20px;
}

#ID_BlockedShowPlans {
	position: absolute;
	bottom: 20px;
	right : 20px;
}

#ID_BlockedDialog {
	position: relative;
    background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 0 5em black;
	margin: auto;
    padding: 30px;
	width: 300px;
	height: 250px;
}

.CL_Blocked {
	outline-offset: -3px;
}

.CL_BlockedFeature {
	color: #c0c0c0;
}

.CL_SubscriptionStr {
	color: #0000ff;
	font-weight: 900;
}


#ID_SubscriptionProgress {
	display: none;
	position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
}


/**/

#ID_PaymentBackground {
	z-index: 10;
	display: none;
	position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);

    animation-name: KEY_DialogAnimateFadeIn;
    animation-duration: 0.2s;
}

#ID_PaymentDialog {
	position: relative;
    background-color: #f0f0fd;
	border-radius: 8px;
	box-shadow: 0 0 3em black;
	margin: auto;
    padding: 30px;
	width: 80%;
	max-width: 700px;
	height: 550px;
}

#ID_PaymentTitle {
	display: block;
	font-size: 30px;
}

#ID_PaymentStatus {
	margin: 10px 2px;
    display: block;
    font-size: 16px;
}

/*--------- Project List -----------*/
#ID_ProjectListBackground {
    display: none;
    position: fixed; 
    z-index: 9; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255,0.9);
    align-items: center;
    overflow: auto; /* Enable scroll if needed */
}

#ID_ProjectListDiv {
	position: relative;
	xx-border: 1px solid blue;
	border-radius: 8px;
	box-shadow: 0 0 3em blue;
	margin: auto;
    padding: 30px;
    width: 80%;
    height: 80%;
}

#ID_ProjectList {
	border: 1px solid #c0c0ff;
	height: calc(100% - 80px);
	overflow-y: scroll;
}

#ID_HideProjectList {
	position: absolute;
	bottom: 20px;
}

.CL_ProjectItemContainer {
	overflow: hidden; /* For long titles, clip contents to container */
	padding: 20px;
    margin: 20px;
	border: 1px solid blue;
	border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 80px;
	font-size: 12px;
}

.CL_ProjectItemContainer:hover {
    margin: 18px;
	border: 3px solid blue;
	cursor: pointer;
}

.CL_ProjectItemInfo {
    display: block;
}

/* Rendered design image (img) */
.CL_ProjectItemImage {
	width: 40px;
	height: 40px;
}

/*--------- Select Design Type -----------*/
#ID_SelectDesignTypeBackground {
    display: none;
    position: fixed; 
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255,0.9);
    align-items: center;
    overflow: auto; /* Enable scroll if needed */
}

#ID_SelectDesignTypeDiv {
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 3em blue;
	margin: auto;
    padding: 30px;
    xxwidth: 600px;
    height: 400px;
	background: whitesmoke;
}

#ID_ProjectList {
	border: 1px solid #c0c0ff;
	height: calc(100% - 80px);
	overflow-y: scroll;
}

#ID_HideSelectDesignType {
	/*position: absolute;*/
	/*bottom: 20px;*/
}

.CL_NewDesignOptionsDiv {
	display: flex;
	align-items: center;
	justify-items: center;
	justify-content: space-around;
}

#ID_SelectDesignTypeDiv p {
	font-size: 24px;
	font-weight: bold;
}

.CL_NewDesignTypeDiv {
	border: 3px solid blue;
	border-radius: 10px;
	margin: 20px;
	padding: 40px 20px 30px 20px;
	background: white;
    position: relative;
    box-shadow: -2px -2px 1em grey;
}

.CL_NewDesignTypeDiv:hover {
	background: #f0f0ff;
	box-shadow: 1em 1em 2em #101010;
}

.CL_NewDesignTypeDiv:active {
    background: #eef;
    background: rgba(0, 0, 255, 0.1);
}

.CL_NewDesignTypeDiv img {
	width:200px;
	display:block;
}

.CL_NewDesignTypeDiv button {
	margin-top: 20px;
	width:100%;
}

.CL_NewDesignLabel {
	/*position:relative;*/
	display:block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	/*width: 100%;*/
}

/*--------- Design Export -----------*/
#ID_DesignExportBackground {
    display: none;
    position: fixed; 
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255,0.9);
    align-items: center;
    overflow: auto; /* Enable scroll if needed */
}

#ID_DesignExportDiv {
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 3em blue;
	margin: auto;
    padding: 30px;
	width: 80%;
    height: 80%;
	background: whitesmoke;
}

.DesignExportTabLabel {
	font-size: 16px;
    padding: 0 10px;
    height:24px;
	border-top: 1px solid lightgrey;
	border-left: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
    display: inline-block;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	position:relative;
	user-select: none;
}


.DesignExportTabLabel:hover {
	color: #00f; 
	cursor: pointer;
}

.DesignExportTabRadio:checked + label {
	background: #c0c0ff; 
	color: #fff;
}

.DesignExportTabRadio {
    position: absolute;
    right: 9999px;
}

#ID_DesignExportTabs {
    height: calc(100% - 50px);
}

#ID_DesignExportTabArea {
	position: relative;
	border: 1px solid lightgray;
    height: calc(100% - 30px);
	overflow-y: auto;
}

#ID_ZazzleImageRenders {
    overflow-y: auto;
    max-height: calc(100% - 150px);
    border: 1px solid #cccccc;
}

.CL_DesignExportTab {
    display: none;
    flex-direction: column;	
    padding: 0px 10px; 
	height: 100%; 
	border: 1px solid lightgray;
    overflow-y: auto;
}

.CL_DesignExport_ImageHolder {
	position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
	margin: 3px;
    padding: 5px;
    border: 1px solid lightgray;
    width: 120px;
    height: 160px;
}

.CL_DesignExport_ImageHolder:hover {
	border: 1px solid gray;
	box-shadow: 2px 2px 3px #888888;
}

.CL_DesignExport_Image {
	width: 120px;
	height: 120px;
}

.CL_DesignExport_Animation {
    border: 1px solid lightgray;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 120px;
}

.CL_DesignExport_Warning {
	position: absolute;
	left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
}

.CL_DesignExport_Warning:hover {
	left: 8px;
	top: 8px;
	border: 2px solid orange;
	border-radius: 12px;
}

.CL_DesignExport_AR {
	position: absolute;
	right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
}

.CL_DesignExport_AR:hover {
	right: 8px;
	top: 8px;
	border: 2px solid #888;
	border-radius: 12px;
}

#ID_ResizeImageOptions {
	display: none;
	border: 1px solid lightgray;
	margin: 5px;
	padding: 5px;
}

/*--------- Floating panels: Status, Info -----------*/

#ID_FloatingPanels {
	position:relative;
}

.CL_FloatingPanel {
    border: 1px solid lightblue;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.8);
    display: block;
}

.CL_FloatingPanel:hover {
    border: 1px solid blue;
}

.CL_FloatingPanel:active {
    background: #eef;
    background: rgba(0, 0, 255, 0.1);
}

.CL_FloatingPanelInfo {
	padding: 5px;
}

.CL_FloatingPanelBottomLeft {
    position: absolute;
	bottom: 10px;
    left: 5px;
}

.CL_FloatingPanelBottomRight {
    position: absolute;
	bottom: 10px;
    right: 5px;
}

.CL_FloatingPanelTopRight {
    position: absolute;
	top: 35px;
    right: 5px;
}

.CL_FloatingPanelTopLeft {
    position: absolute;
	top: 35px;
    left: 5px;
}

.CL_TextHover {
}

.CL_TextHover:hover {
	background: #c0c0ff; 
}

/*--------- ... -----------*/
canvas {
    border: 1px solid lightgray;
    display: block;
    box-sizing: border-box;
}

.ControlLabel {
	display: inline-block;
	width: 80px;
	font-size: 10px;
}

.ControlLabel-narrow {
	width: unset;
}

.ControlLabel-long {
	width: 180px;
}

.ControlLabel-Checkbox {
	width: 56px;
}

.ControlMenu {
	margin: 3px;
}

.ControlInput {
    max-width: 100px;
    min-width: 50px;
	margin: 3px; 
	margin-left: 7px;
}

.ControlInput-small {
    max-width: 30px;
    margin-right: 5px;
}

.ControlInput-narrow {
	min-width: 30px;
	max-width: 60px;
}

.ControlVerticalCenter {
	display: flex;
	align-items: center;
}

.ControlFileLabel {
	font-size: 12px;
    display: inline-block;
    cursor: pointer;

	padding: 3px 7px;
	margin: 7px;
	border: 2px solid;
	border-radius: 3px;
	border-color: #e0e0ff;
	background-color: #f0f0ff;
}

.ControlFileLabel:hover {
    background-color: red;
}


.ControlFileInput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;

}

.ControlLabelUnits {
	font-size: 10px;
}

.ControlText {
	font-size: 10px;
}

.ControlLargeText {
	font-size: 12px;
}

.ControlWorkbookCommonEdit {
	outline: 2px solid #6495ED;
}

.RangeControl {
	vertical-align: middle;
}


#ID_RightPanelArea input[type="checkbox"] ~label {
	/*font-size: 9px;*/
}

#ID_DownloadsRemaining {
}

.TabAreaInfo {
	font-size: 9px;
	border-bottom: 1px solid lightgrey;
	width: 100%;
    display: inline-block;
}

.TabAreaNote {
	font-size: 9px;
	xx-border-left: 1px solid lightgrey;
	width: 100%;
    display: inline-block;
    font-style: italic;
}

.TabAreaBoldNote {
	font-size: 9px;
	width: 100%;
    display: inline-block;
    font-weight: bold;
    text-decoration: underline;
}

.TabAreaRadio {
	font-size: 10px;
    vertical-align: text-top;
}

.TabAreaCheckbox {
	font-size: 12px;
    vertical-align: text-top;
}


.TabAreaExpander {
	font-size: 9px;
	xx-width: 60px;
    display: inline-block;
}

.TabAreaExpander:hover {
	background: #c0c0ff; 
	color: #00f; 
	cursor: pointer;
}

.TabAreaExpandable {
	xx-border-left: 1px solid lightgrey;
}



.TabAreaFileBox {
	border:solid lightgray 1px; 
	margin-bottom: 5px;
	padding: 5px;
}

.TabHorzLine {
    display: block;
    height: 1px;
    border: 0;
	border-top: 1px solid lightgrey;
    xxmargin: 1em 0;
    xxpadding: 0;
}

.TabLabel {
	font-size: 9px;
	border-top: 1px solid lightgrey;
	border-left: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
    width: 28px;
    height:24px;
    display: inline-block;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	position:relative;
}

.CL_TabLabelHighlight {
	border-top: 1px dotted red;
	border-left: 1px dotted red;
	border-right: 1px dotted red;
}

.TabLabelImg {
	padding-left: 2px;
	padding-top: 0px;
    vertical-align: text-top;
}

.TabLabel:hover {
	color: #00f; 
	cursor: pointer;
}

.TabLabelTooltip {
	font-size: 9px;
    padding: 4px;
    xxbackground-color: #f0f0f0;
    border-radius:5px;
    color:black;
    box-shadow:1px 1px 3px gray;
    display: none;
    z-index: 9;
}

.TabLabel:hover  .TabLabelTooltip {
	display: inline-block;
    position: absolute;
    top: -22px;
    left: -2px;
}


.TabRadio:checked + label {
	background: #c0c0ff; 
	color: #fff;
}

.TabRadio {
    position: absolute;
    right: 100%;
}

#ID_TabDisplayArea {
	margin-left: 10px;
    margin-right: 10px;
    height: calc(100% - 30px);
    overflow-y: scroll;
}


#ID_FrameTabAreaR:checked      ~ #ID_TabDisplayArea #ID_FrameTabArea,
#ID_TilingTabAreaR:checked     ~ #ID_TabDisplayArea #ID_TilingTabArea,
#ID_ImageTabAreaR:checked      ~ #ID_TabDisplayArea #ID_ImageTabArea,
#ID_SketchTabAreaR:checked     ~ #ID_TabDisplayArea #ID_SketchTabArea,
#ID_LinesTabAreaR:checked      ~ #ID_TabDisplayArea #ID_LinesTabArea,
#ID_DrillHolesTabAreaR:checked ~ #ID_TabDisplayArea #ID_DrillHolesTabArea,
#ID_UnitsTabAreaR:checked      ~ #ID_TabDisplayArea #ID_UnitsTabArea,
#ID_FileTabAreaR:checked       ~ #ID_TabDisplayArea #ID_FileTabArea,
#ID_GalleryAreaR:checked       ~ #ID_TabDisplayArea #ID_GalleryArea,
#ID_DiagsTabAreaR:checked      ~ #ID_TabDisplayArea #ID_DiagsTabArea
{
     display: block;
}

#ID_WorkbookTabAreaR:checked    ~ #ID_OrganizerDisplayArea #ID_WorkbookDiv,
#ID_ProjectTabAreaR:checked     ~ #ID_OrganizerDisplayArea #ID_ProjectDiv,
#ID_StatusTabAreaR:checked      ~ #ID_OrganizerDisplayArea #ID_StatusDiv
{
     display: flex;
}

#ID_Zazzle_TabAreaR:checked       ~ #ID_DesignExportTabArea #ID_DesignExport_Zazzle,
#ID_Generic_TabAreaR:checked      ~ #ID_DesignExportTabArea #ID_DesignExport_Generic
{
     display: block;
}



   
.TabRadio:checked + section {
    xx-display: block;
}


.TabArea {
	padding:10px; 
	border:solid lightgrey 1px;
    display: none;
}



#ID_Export_HelpfulInfo {
}

.CL_Export_TipsLabel {
	display:block;
	font-size: 12px;
	padding: 3px;
    display: inline-block;
	user-select: none;
	margin: 1px;
	margin-top: 6px;
}

.CL_Export_TipsLabel:hover {
	color: #00f; 
	cursor: pointer;
    background-color: #e0e0ff;
}

.CL_Export_TipsLabel:active {
    background-color: #c0c0ff;
}

.CL_Export_TipsLabel::after
{
	content:"";
	display:inline-block;
	width:10px;
}

.CL_Export_TipsCheckbox:checked + .CL_Export_TipsLabel::after
{
	content:"x";
	text-align: right;
	bottom: 5px;
    position: relative;
}


.CL_Export_TipsContents {
	padding-left: 10px; 	
	height:0;
	transition: height 0.25s;
	overflow: hidden;
}

#ID_Export_01_c:checked    ~ #ID_Export_HelpInfoPanels #ID_Export_01,
#ID_Export_02_c:checked    ~ #ID_Export_HelpInfoPanels #ID_Export_02,
#ID_Export_03_c:checked    ~ #ID_Export_HelpInfoPanels #ID_Export_03,
#ID_Export_04_c:checked    ~ #ID_Export_HelpInfoPanels #ID_Export_04,
#ID_Export_05_c:checked    ~ #ID_Export_HelpInfoPanels #ID_Export_05
{
	height: 175px;
	overflow-y: auto;
	padding-bottom: 10px; 
	border-top: 1px solid lightgrey;
}

.CL_Export_TipsContents p {
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	margin-bottom: 6px;
}

.CL_Export_TipsCheckbox {
	position:absolute;
	left:-999px;
	top:-999px;
}

.CL_Export_TipsCheckbox:checked + .CL_Export_TipsLabel
{
    background-color: #eeeeee;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 1px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

.CL_Export_TipsCheckbox:checked + .CL_Export_TipsContents
{
    display: block;
}

.CL_Export_TipsSpan {
	font-size: 12px;
	padding: 3px;
}

.CL_Export_TipsHeading {
	display:block;
	margin-top: 5px;
	margin-bottom: 3px;
	font-weight: 900;
    text-decoration: underline;
}

.CL_Export_ShowMeButton::before {
	content: "Show me '";	
}

.CL_Export_ShowMeButton::after {
	content: "'";	
}

#ID_Export_HelpInfoPanels p {
	font-size: 10pt;
}


@media only screen and (max-width: 600px) {
	.TabRadio {
		display: none;
	}

	.TabLabel {
		display: none;
	}
	
	#ID_ToolbarDiv {
		display: none;
	}
}


.CollapsingContainer {
	border-bottom: 1px solid lightgrey;
}

.CollapsingLabel {
	font-size: 10px;
	border-left: 1px solid lightgrey;
	padding-left: 2px; 
	width: calc(100% - 9px);
    display: inline-block;
	user-select: none;
    transition: 0.2s;
}

.CollapsingLabel:hover {
	color: #00f; 
	cursor: pointer;
    background-color: #e0e0ff;
    border-radius: 4px;
}

.CollapsingLabel:active {
    background-color: #c0c0ff;
}
.CollapsingContents {
	padding-left: 10px; 
	padding-bottom: 10px; 
	border-left: 1px solid lightgrey;
	display:none;
}

.CollapsingContents p {
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	margin-bottom: 6px;
}

.CollapsingCheckbox {
	position:absolute;
	left:-999px;
	top:-999px;
}

.CollapsingCheckbox:checked ~ .CollapsingContents {
	display:block;
}

.CL_EditHelp h1 {
	font-size: 12px;
	color:blue;
	margin-bottom: 3px;
	margin-top: 0;
}

.CL_EditHelp p {
	font-size: 11px;
	margin-bottom: 3px;
}

.CL_HelpKey {
	font-size: 12px;
    width: 20px;
    display: inline-block;
    text-align: center;
    font-weight: bolder;
    font-family: sans-serif;
}

}

.EditOptionCheckboxDiv {
}

.EditOptionCheckbox {
}

.EditOptionCheckboxLabel {
    font-size:10px;
    min-width: 130px;
    xxdisplay:inline-block;
    position:relative;
}

.EditOptionCheckboxTip {
	font-size: 9px;
    padding: 4px;
    border-radius:5px;
    color:black;
    display: none;
}

.EditOptionCheckboxLabel:hover  .EditOptionCheckboxTip {
	display: inline-block;
    position: absolute;
    z-index: 10;
    top: -11px;
    left: -41px;
    width: 10px;
    font-size: 10pt;
    text-align: center;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#ID_WorkbookControlsToggle {
	position: absolute; 
	top: -9999px; 
	left: -9999px;
}

#ID_WorkbookControlsToggle:checked ~ #ID_WorkbookControls {
   display: block;
}

#ID_WorkbookControls {
   display: none;
}

/* Container for one workbook item (div) */
.WorkbookItemContainer {
	width: 80px;
	height: 80px;
    position: relative;
    padding: 1px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
}

/* Rendered design image (img) */
.WorkbookItemImage {
    max-width: 100%;
    max-height: 90%;
}

.WorkbookItemImage:hover { 
	border: 1px solid darkgray;
    cursor: default;
}

.WorkbookItemImage:active { 
	margin: 2px;
	border: 2px solid darkgray;
    cursor: default;
}

.WorkbookItemCurrent {
	border: 1px dotted red;
}

.WorkbookItemCurrent:hover {
	border: 1px solid red;
}

.WorkbookItemCurrent:active { 
	margin: 2px;
	border: 2px solid red;
    cursor: default;
}

/* Same as 'WorkbookItemCurrent', but a different name to distinguish in the DOM */
.ProjectItemCurrent {
	border: 1px dotted red;
}

.ProjectItemCurrent:hover {
	border: 1px solid red;
}

.ProjectItemCurrent:active { 
	margin: 2px;
	border: 2px solid red;
    cursor: default;
}

/* 2019.10.13: Added */
.WorkbookItemLoadFailure {
	font-size: 8pt;
    cursor: default;
    user-select: none;
}

.WorkbookItemLoadFailure:hover {
	background-color: #f9f9f9;
}

/* Action to show the popup menu item */
.WorkbookItemContainer:hover .WorkbookItemPopup {
    display: block;
}

/* Container to position the popup menu and content (div)  */
.WorkbookItemPopupContainer {
    position: absolute;
    top: 4px;
    left: 2px;
    display: block;
}

/* Dropdown Button */
.WorkbookItemPopup {
    padding: 2px;
    display: none;
}

.WorkbookItemPopup:hover, .WorkbookItemPopup:focus {
    background-color: #808080;
}

/* Popup menu content, hidden by Default (div) */
.WorkbookItemMenuList {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 50px;
    font-size:9px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Popup menu links */
.WorkbookItemMenuList a {
    color: black;
    text-decoration: none;
    display: block;
    cursor:pointer;
    text-align: left;
}

.WorkbookItemMenuList a:hover {
	background-color: #f1f1f1;
}


.GalleryControl {
	font-size: 9px;
}

.GalleryItemContainer {
	width: 90px;
	height: 90px;
    display: inline-flex;
    padding: 3px;
	border-radius: 5px;
	margin: 3px;
	border: 1px solid darkgray;

    align-items: center;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
}

.GalleryItemContainer:hover { 
	border: 3px solid darkgray;
	margin: 1px;
    cursor: default;
}

.GalleryItemContainer:active { 
    xxbackground-color: darkgray;
    xxcursor: default;
}

@media only screen and (max-width: 600px) {
	.GalleryItemContainer { 
		width: 125px;
		height: 125px;
	}
}

.GalleryItemContainer-SingleColumn { 
	width: 260px;
	height: 260px;
}

.GalleryItem {
    max-width: 100%;
    max-height: 100%;
}

#ID_GalleryLabel {
    cursor: default;
}

#ID_GalleryContent {
	overflow-y:auto;
	/*max-height:600px; 2019.10.01: Not sure this is needed */
}

/* Allow the entire page to scroll on iPhones */
/* This should allow Safari to minimize the address bar and remove the navbar */
/* 2019.10.01: This is not needed since we are not setting max-height, above
@media only screen and (max-device-width : 600px) {
	#ID_GalleryContent {
		max-height: unset;
	}
}
*/

#ID_EditCanvasHolder {
    width:100%;
    height:100%;
}

#ID_EditCanvasAndToolbars {
	position: relative;
    width:100%;
    height:100%;
}

#ID_EditCanvas {
    width:100%;
    height:100%;
}

.CL_Miniviewer {
	border: unset;
	width: 100px;
	height: 100px;
}

#ID_CanvasToolbarDiv {
	top: 5px;
	left: 5px;
}

#ID_SketchToolbarDiv {
	top: 5px;
	right: 5px;
}

#ID_LogoCanvas {
    xxwidth:100%;
    xxheight:100%;
    height:60px; 
    width:60px;
}


#ID_ToolCanvas {
    width:100%;
    xxheight:100%;
    height:60px;
}

#ID_UndoCanvas {
    xxwidth:100%;
    height:100%;
    width:60px
}

#ID_RightPanelArea {
    width: 400px;
    float: left;
    height: calc(100% - 1px);
    border-bottom: 1px solid lightgray;
}

#ID_ImageCanvasDiv {
	position:relative;
	width: 350px;
    height: 350px;
    box-sizing: border-box;
}

#ID_ImageCanvas {
	position:absolute;
	z-index:1; /* In front of msg div to handle drop */
}

#ID_ProcessCanvas {
    position: absolute;
    pointer-events: none;
    z-index: 2;
	outline-offset: -6px;
    outline: 5px solid gray;
}

.CL_DragoverFeedback {
	border: 6px solid blue;
	border-radius: 30px;
}

#ID_NoImageMsgDiv {
	position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
	font-size: 16pt;
    font-weight: bold;
    text-align: center;
    z-index: 4;
    color: #888;
	pointer-events: none;
}

#ID_DragHandlerDiv {
	position:absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
  	box-sizing: border-box;
	pointer-events: none;
}

#ID_DragJSON {
	display: inline-block;
	border: 1px solid;
	border-radius: 4px;
    margin: 3px 0px;
    padding: 2px 5px;
	user-select:none;
	font-size: 12px;
	cursor:grab;
	background: #c0c0ff;
    user-select: none;
    font-size: 10px;
}

#ID_DragJSON:hover {
	border: 1px solid blue;
	background: #8697FE;
}

#ID_DragJSON:active {
	cursor:grabbing;
}

@media only screen and (max-width: 400px) {
	#ID_RightPanelArea {
		width: unset;
	}
}

#ID_ThumbnailPopup {
	margin: 0px; // 2018.01.23: This was 10px
	padding: 0px;
	background: #ffffff; 
	border: 2px solid  darkgray;
	position: absolute;
	z-index: 20;
	width: 170px;
	height: 170px;
	left: 100px;
	top: 100px;
}

#ID_ThumbnailInfo {
	font-size: 10px;
	margin: 0px;
	padding: 2px;
	background: #ffffff; 
	border: 2px solid  darkgray;
	position: absolute;
	z-index: 21;
	width: 170px;
	height: 20px;
	left: 100px;
	top: 100px;
}

#ID_ThumbnailPopup img {
	margin: 10px;
	width: 150px;
	height: 150px;
}

.CL_HideElement {
	display: none;
}

.CL_InvisibleElement {
	opacity: 0;
}

h1 {
	font-family: 'Quicksand', san-serif;
}

body {
    font-family: 'Quicksand';
    font-size: 14px;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	border: 0;
	overflow-x: hidden;  /* Disable scrollbars */
	overflow-y: auto;
	display: block;  /* No floating content on sides */
}

/* 2019.09.18: Changed to fix issue with vertical scroll bar appearing when the "Files" pane */
/* was fully expanded. Note that the body still has "auto" */
html {
	overflow-y: hidden;
}


@media only screen and (max-width: 600px) {
	html, body {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

/* Allow "momentum" scrolling on the iPad mini and other iPads */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {
	html, body {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

/* Allow the entire page to scroll on iPhones */
/* This should allow Safari to minimize the address bar and remove the navbar */
@media only screen and (max-device-width : 600px) {
	html, body {
		height: unset;
	}
}

.CL_Button {
	font-size: 10px;
	text-decoration: none;
	vertical-align: middle;
    text-align: center;

	padding: 2px 0px;
	margin: 3px 0px;
	border: 1px solid #c0c0ff;
	border-radius: 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;

	background: #4c5cb5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f2f9), to(#cbd2f7));
	background: -webkit-linear-gradient(top, #f1f2f9, #cbd2f7);
	background: -moz-linear-gradient(top, #f1f2f9, #cbd2f7);
	background: -ms-linear-gradient(top, #f1f2f9, #cbd2f7);
	background: -o-linear-gradient(top, #f1f2f9, #cbd2f7);
}

.CL_Button:hover {
	background-color: #ddddee;
	background: -webkit-linear-gradient(top, #cbd2f7, #f1f2f9);
	background: -moz-linear-gradient(top, #cbd2f7, #f1f2f9);
	background: -ms-linear-gradient(top, #cbd2f7, #f1f2f9);
	background: -o-linear-gradient(top, #cbd2f7, #f1f2f9);
}

.CL_Button:active {
	background: #cbd2f7;
	background: -webkit-linear-gradient(top, #dfe4ff, #7d8ad2);
	background: -moz-linear-gradient(top, #dfe4ff, #7d8ad2);
	background: -ms-linear-gradient(top, #dfe4ff, #7d8ad2);
	background: -o-linear-gradient(top, #dfe4ff, #7d8ad2);
}

.CL_Button_general {
	padding: 2px 7px;
	margin: 3px 5px;
}

.CL_Button_CTA {
	font-size: 14px;
}

.CL_Button_right_3col {
	width: calc(33% - 4px);
}

.CL_Button_right_2col {
	width: calc(50% - 6px);
}

.CL_Button_right_1col {
	width: calc(100% - 12px);
}

.CL_Button_disabled {
	background-color: #d0d0ff;
    color: #888;
}

.CL_Export_ShowMeButton {
	font-size: 9pt;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.CL_Export_Button {
	font-size: 9pt;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	padding-right: 5px;
}


xxbutton {
	padding: 3px 7px;
	margin: 7px;
	border: 2px solid;
	border-radius: 3px;
	border-color: #e0e0ff;
	background-color: #f0f0ff;
}

xxbutton:hover {
	background-color: #ddddee;
}

xxbutton:active {
	background-color: #ccccdd;
	color: white;
}


.underline {
  text-decoration: underline;
}

.CL_FadeIn {
    animation-name: KEY_DialogAnimateFadeIn;
    animation-duration: 0.2s;
}

@keyframes KEY_DialogAnimateFadeIn {
    from { opacity: 0.0 }
    to   { opacity: 1.0 }
}

.CL_FadeOut {
    animation-name: KEY_DialogAnimateFadeOut, KEY_DialogInvisible;
	animation-delay: 0s, 0.2s;
    animation-duration: 0.2s, 3s;
}

@keyframes KEY_DialogAnimateFadeOut {
    from { 	opacity: 1.0;
    		visibility: 1.0; }
    to   { 	opacity: 0.0;
    		visibility: 0.0; }
}

@keyframes KEY_DialogInvisible {
    from { 	opacity: 0.0;
    		visibility: 0.0; }
    to   { 	opacity: 0.0;
    		visibility: 0.0; }
}

/* Spinner */
@keyframes spinner {
	from {transform: rotate(0deg);}
	to   {transform: rotate(360deg);}
}
 
.spinner:before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	margin-left: -15px;
	border-radius: 50%;
    border: 5px solid rgba(0,0,255,0.25);
    border-top-color: rgba(0,0,255,0.5);
	animation: spinner 1s linear infinite;
}

/* Loading Design (or Project) Spinner (2019.10.13) */
@keyframes spinner-loading {
	from {transform: rotate(0deg);}
	to   {transform: rotate(360deg);}
}
 
.spinner-loading:before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	margin-left: -30px;
	border-radius: 50%;
    border: 10px solid rgba(0,0,255,0.25);
    border-top-color: rgba(0,0,255,0.5);
	animation: spinner 1s linear infinite;
}

.CL_HighlightNew::before {
	display: inline-block;
    color: #ff8888; /* Light red */
	content: "\2605"; /* Star */
    transform: translateY(-5px);
}

.CL_HighlightUpdated::before {
	display: inline-block;
	content: "\2605"; /* Star */
    transform: translateY(-5px);
}

.CL_BillingError {
	display: inline-block;
	color: red;
	margin-bottom: 6px;
}