/*
 * Style sheet for the CSS2 specification
 * $Id: standard.css,v 1.00 2002/05/11 12:12:12 
 * This sheet will be linked to all that call for it.
 * Any changes here affect all those pages
 */
/*
 * use this sheet for pages with grey background 
 */
/* ----------------------------*/
/* ======   F O N T S   =====  */
/* --------------------------- */
/*verdana, helvetica, arial, sans-serif*/

@font-face {
  font-family: "MainText";
  src: local(verdana), local(helvetica), local(arial), local(sans-serif);
}
/* serif */
@font-face {
  font-family: "Cormorant";
  src: url("fonts/Cormorant-VariableFont_wght.ttf") format('truetype');
}
/* serif */
@font-face {
  font-family: "Inria";
  src: url("fonts/InriaSerif-Regular.ttf") format('truetype');
}
/* serif */
@font-face {
  font-family: "LibreBaskerville";
  src: url("fonts/LibreBaskerville-Regular.ttf") format('truetype');
}
/* serif */
@font-face {
  font-family: "NotoSerif";
  src: url("fonts/NotoSerif-VariableFont_wdth,wght.ttf") format('truetype');
}
/* serif */
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-Regular.ttf") format('truetype');
}
/* serif */
@font-face {
  font-family: "Tinos";
  src: url("fonts/Tinos-Regular.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "Arsenal";
  src: url("fonts/Arsenal-Regular.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Regular.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-Regular.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/BarlowSemiCondensed-Regular.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "Lexend Exa";
  src: url("fonts/Lexend-VariableFont_wght.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "LibreFranklin";
  src: url("fonts/LibreFranklin-VariableFont_wght.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "NotoSans";
  src: url("fonts/NotoSans-VariableFont_wdth,wght.ttf") format('truetype');
  font-stretch: expanded;
}
/* sans */
@font-face {
  font-family: "NotoSansDisplay";
  src: url("fonts/NotoSansDisplay-VariableFont_wdth,wght.ttf") format('truetype');
  font-stretch: expanded;
}
/* sans */
@font-face {
  font-family: "NunitoSans";
  src: url("fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "OpenSans";
  src: url("fonts/OpenSans-VariableFont_wdth,wght.ttf") format('truetype');
}
/* fancy */
@font-face {
  font-family: "Comic Neue";
  src: url("fonts/ComicNeue-Regular.ttf") format('truetype');
}
/* handwriting */
@font-face {
  font-family: "Fuzzy Bubbles";
  src: url("fonts/FuzzyBubbles-Regular.ttf") format('truetype');
}
/* sans */
@font-face {
  font-family: "Hubballi";
  src: url("fonts/Hubballi-Regular.ttf") format('truetype');
}
/* handwriting */
@font-face {
  font-family: "ShantellSans";
  src: url("fonts/ShantellSans-VariableFont_BNCE,INFM,SPAC,wght.ttf") format('truetype');
  font-stretch: expanded;
}
/* fancy */
@font-face {
  font-family: "Swanky";
  src: url("fonts/SwankyandMooMoo-Regular.ttf") format('truetype');
}
/* momo light */
@font-face {
  font-family: "NotoSansMono";
  src: url("fonts/NotoSansMono-VariableFont_wdth,wght.ttf") format('truetype');
}
/* momo light */
@font-face {
  font-family: "Sono";
  src: url("fonts/Sono-VariableFont_MONO,wght.ttf") format('truetype');
}
/* serif fancy */
@font-face {
  font-family: "Eagle Lake";
  src: url("fonts/EagleLake-Regular.ttf") format('truetype');
}
/* serif fancy */
@font-face {
  font-family: "Fondamento";
  src: url("fonts/Fondamento-Regular.ttf") format('truetype');
}
/*all caps*/
@font-face {
  font-family: "Girassol";
  src: url("fonts/Girassol-Regular.ttf") format('truetype');
}

/* ------------------------- */
/* ======   B O D Y   ====== */
/* ------------------------- */
/* >>>>> font size of 100% was good for 800x600 screen. With 1024x768 screen 120% works better.
	>>>>> The rest of style sheet is relative to body font size. */ 
/* set the defaults for the whole document */

:root {
  --white: #ffffff; /* var(--white) */
  --offwhite: #fff0ff; /* var(--offwhite) */
  --vltgray: #f8f8f8; /* var(--vltgray2) */   
  --ltgray: #f0f0f0; /* var(--ltgray) */
  --gray: #d0d0d0;   /* var(--gray) */
  --mdgray: #a0a0a0; /* var(--mdgray) */
  --dkgray: #808080;   /* var(--dkgray) */
  --vdkgray: #303030;   /* var(--vdkgray) */
  --black: #000000;   /* var(--black) */
  --vltmaroon: #ffc6ec; /* var(--vltmaroon) */    
  --ltmaroon: #ffa0d0; /* var(--ltmaroon) */
  --maroon: #902070; /* var(--maroon) */
  --dkmaroon: #602050; /* var(--dkmaroon) */
  --vltpink: #fff8fa; /* var(--vltpink) */  
  --ltpink: #ffe8f8; /* var(--ltpink) */
  --pink: #ffe0f0; /* var(--pink) */  
  /*
  #textFramePropsName #f8a8e8
  #zoomPopup #602050
  */
/* zztop */  
  --UIFontSize: 16px;
  --UIHelpFontScale: 1em;
  --UIHandleSize: 32px; /*max(32px, 1em);  clamp(32px 1em 1em);*/
  /* Values are arbitrary */
  --UIPanelTop: 64px;
  --UIMaxPanelHeight: 80vh;
  --UIMaxPanelBodyHeight: 60vh;
  --UIMaxPanelContentHeight: 40vh;
  
  /* not used */
  --UIHeadingHeight: 32px;
  --UIButtonsHeight: 46px;
  
/* geditg */
   /* Ghost outlines */
  --go-width: 2px;
  --go-color: #808080;
  --go-style: dashed;
}
/* zzhtml */
html {
  font-size: var(--UIFontSize); /*16px;*/
  box-sizing: border-box;  
  overscroll-behavior: none;
}

*, *:before, *:after {
   box-sizing: inherit;
}

body {
   background-color: var(--gray);
	color: var(--maroon); 
	margin: 0em;
	/*font-size: 100%;
	font-style: normal;*/
	text-align: left;
	/*padding: 0.2em;*/
	/*font-family: verdana, helvetica, arial, sans-serif;*/
	font-family: MainText;
	/*max-width: 50%; inconsistent */
	/*user-select: none;*/
}

.bottom-border {
   border-bottom: 0.5em solid var(--maroon);   
}

/* -------------------------------------------- */
/* =====  T O O L B A R  and  M E N U S   ===== */
/* ------------------------------------------- */
/*
#toolbarSpace {
   
   width: 100%;
}
*/
/* Try to fix bug in Firefox v132 */
#fixedContainer{
  position: fixed;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  border: 8px solid orange;
  background-color: #00ffff;
  z-index: 10000;
}

#toolbarContainer {
   top: 0;
   left: 0;   
   position: fixed;
   width: 100%;
   height: auto;

   /*min-height: 2rem;*/       
   /*margin-bottom: 0.3vw;*/
   background-color: var(--ltgray);
   /*border-bottom: 2px solid var(--mdgray);*/
   /*border-bottom: 2px solid red;*/
   padding: 2px;
   /*font-size: 16px; no effect*/
   z-index: 1000;
   /* This is causing problems */
   /*user-select: none;*/   
}
  
#tbbToggleMenuContainer {
   /*position: absolute;*/
   position: fixed;
   top: 0;
   left: 0;
   /*width: 3em;
   height: 3em;*/
   /*height: auto;*/
   padding: 0.25vmin;
   background-color: var(--ltgray);
   /*float: left;*/
   /*display: inline-block;*/
   display: block;
   z-index: 2000; /* Always on top */
}

#tbbToggleMenu {
   /*width: 100%;
   height: 100%;*/
   background-image: url('icons/mainMenu.png');
   background-size: cover;
}

/* ----------------------------------- */
/* zztool  zzdhe */
#dhEditorToolbar {
   /*position: relative;*/
   /*position: absolute;*/
   position: fixed;
   top: 0;
   width: calc(100% - 3em); /*??? replace with var*/
   /*font-size: 0.75em;*/
   font-size: 0.8em;
   /*font-size: var(--UIFontSize);*/
   margin-left: 0vw;
   /*float: left;*/
   z-index: 1100;
   background-color: var(--ltgray);
   border: 4px solid var(--mdgray);
   /*border: 4px solid red;*/
   /*min-height: 24px;*/
   user-select: none;   
}

.btnGroup {
   float: left;
   display: inline-block;
   /*border: 0.1em solid var(--vltgray);*/
   /*border: 2px solid blue;*/
}

.dhEditorToolbarButtonContainer {
  display: inline-block;
  float: left;
  background-color: var(--gray); 
  /*padding: 0.25em;*/
  border: 0.12em solid var(--dkgray); 
  /*border : 0.5rem solid var(--gray); */
  /*border : 2px solid green; */
}

.dhEditorToolbarButton {
  /*display: inline-block;
  float: left;
  width: 2.0em;
  height: 2.0em;*/
  width: calc(var(--UIFontSize) * 1.75);/*2.5em;*/
  height: calc(var(--UIFontSize) * 1.75); /*2.5em;*/
  /*margin: 0.2em;*/
  /*padding: 0.5em;*/
  background-size: cover;
  /*background-color : var(--ltgray); */
  background-color : var(--white); 
  border : 0.25em solid var(--white); /* it's there, just cannot really see it. */
  user-select: none;
  background-size: cover;
}

/* toolbar button images */
#dhetbbUndo {background-image: url('scripts/icons/undo_gray_64.png')}
#dhetbbCut {background-image: url('scripts/icons/cut.png')}
#dhetbbCopy {background-image: url('scripts/icons/copy.png')}
#dhetbbPaste {background-image: url('scripts/icons/paste.png')}
#dhetbbFontWeight {background-image: url('scripts/icons/bold.png')}
#dhetbbFontStyle {background-image: url('scripts/icons/italic.png')}
#dhetbbUnderline {background-image: url('scripts/icons/underline.png')}
#dhetbbLtrSpacing {background-image: url('scripts/icons/letterspacing_64.png')}
.newStyleLeft {
   background-image: url('scripts/icons/newstyle-left_64.png');
   background-size: cover;
}
.newStyleRight {
   background-image: url('scripts/icons/newstyle-right_64.png');
   background-size: cover;
}
.newStyleDefault {
   background-image: url('scripts/icons/newstyle-default_64.png');
   background-size: cover;
}
#dhetbbJustifyLeft {background-image: url('scripts/icons/left.png')}
#dhetbbJustifyCenter {background-image: url('scripts/icons/center.png')}
#dhetbbJustifyRight {background-image: url('scripts/icons/right.png')}
#dhetbbJustifyFull {background-image: url('scripts/icons/justify.png')}
#dhetbbLineHeight {background-image: url('scripts/icons/lineheight_64.png')}
#dhetbbMarginTop {background-image: url('scripts/icons/firstline_64.png')}
#dhetbbFontColor {background-image: url('scripts/icons/forecolor.png')}
#dhetbbBackColor {background-image: url('scripts/icons/bgcolor.png')}
#dhetbbInsertImage {background-image: url('scripts/icons/image.png')}
#dhetbbCreateLink {background-image: url('scripts/icons/links_72.png')}

/* ----------------------------------- */

.dhEditorToolbarSelectBoxContainer {
  display: inline-block;
  float: left;
  background-color: var(--ltgray); 
  margin-right: 0.lrem; /*0.5rem;*/
  /*padding: 0.12em;*/
  border: 1px solid var(--black);
  user-select: none;   
}

/* zzsb */
/*
.dhEditorToolbarSelectBoxContainer 
.dhEditorToolbarSelectBox {
*/

.dhEditorToolbarSelectBoxContainer 
.dhSelectBox {
   position: relative;
   display: grid;
   /*grid-template-columns: 3fr auto;*/
   grid-template-columns: 1fr auto;
   gap: 0.2em;
   
   padding: 1px; 
   /*padding: 0.5em 0.2em;*/
   /*align-items:center;*/	   
   background-color: var(--vdkgray);
   /*background-color : var(--white); */
   color: var(--maroon);
   /*color: var(--vdkgray);*/
   border: 1px solid var(--ltgray); 
   /*border: 2px solid red;*/
   border-radius: 0.2rem;
   /*font-size: 1rem;*/
   font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   text-align: center; /*center;left*/
   /*font-family: verdana, helvetica, arial, sans-serif;*/
   letter-spacing: 0;   
   user-select: none;
}
   
#dhetbbFontSize .dhSelectBox {
   min-width: 6.5em;
}

#dhetbbFontFamily .dhSelectBox {
   /*min-width: 8.5em;*/
   width: 8.5em;
   max-width: 8.5em;
}

.dhEditorToolbarSelectBoxContainer 
.dhSelectBoxSelectedText {
   /*display: inline-block;*/
   /*float: left;*/
   max-width: 6.5em;
   background-color: var(--white);
   padding: 0.2em 0.1em;
   user-select: none;
   pointer-events: none;
}

.dhEditorToolbarSelectBoxContainer 
.dhSelectBoxOptionsList {
   border: 0.2em solid var(--maroon);
   background-color: var(--white);
   position:absolute;
   top: 2em;
   left: 0;
   width: 100%;
   height: 300px;
   overflow-y: auto;
   cursor: pointer;
   user-select: none;
   display: none;
}   

/*textAlign:'left', overflowX:'hidden', overflowY:'scroll', cursor:'pointer',*/
/* ----------------------------------- */
/* Keep for editor 1 */
#myNicPanel {
   position: relative;
   top: 0;
   width: calc(100% - 3em); /*??? replace with var*/
   /*font-size: 0.75em;*/
   font-size: 0.8em;
   /*font-size: var(--UIFontSize);*/
   margin-left: 0vw;
   /*float: left;*/
   z-index: 1000;
   display: block;
}

.nicEdit-button {
   width: calc(var(--UIFontSize) * 2.5);/*2.25em;*/
   height: calc(var(--UIFontSize) * 2.5); /*2.25em;*/
}

nicEdit-selectBox {
   font-size: 0.75em;
}

.nicEdit-selectTxt {
   height: 1.5em;
   width: 6.5em;
   font-size: 0.75em;
}

.nicEdit-selectItem {
   padding: 0.5em 0.2em;
}

/* ----------------------------------- */  

#mainMenu {
   position: fixed;
   top: 3rem;
   left: 0;
   padding: 0.2vmin;
   background-color: var(--ltgray);
   z-index: 1000;
   display: none;
   user-select: none;   
}

.toolbarButton {
   width: calc(var(--UIFontSize) * 2.25);/*2.5em;*/
   height: calc(var(--UIFontSize) * 2.25); /*2.5em;*/
   background-size: cover;
   display: block;
}

#tbbLayers {
   background-image: url('icons/layers.png');
   background-size: cover;
}

#tbbFile {
   background-image: url('icons/file.png');
   background-size: cover;
}

#tbbTools {
   background-image: url('icons/tools.png');
   background-size: cover;
}

#tbbZoom {
   background-image: url('icons/zoom_256.png');
   background-size: cover;
}

#tbbFullScreen {
   background-image: url('icons/fullscreen-maroon-icon-256.png');
   background-size: cover;
}

#tbbLog {
   background-image: url('icons/log.png');
   background-size: cover;
   display: none;
}

#tbbEditHelp {
   background-image: url('icons/help.png');
   background-size: cover;
   display: none;
}
/* zzwidget */
#tbbSelector {
   background-image: url('icons/tbbselector_256.png');
   background-size: cover;
   display: block;
}


/* ==== SUBMENU ==== */

/* menuLayers menuFile menuTools */
.submenu {
    position: fixed;
	top: 0.2vw; /* recalculated in positionPanels() */
	/*left: 2.5em;*/
	/*min-width:10vw;*/
    max-height: var(--UIMaxPanelHeight); /* Calculated in positionPanels() */ 
	margin-left: 0.2vmin;
	margin-top: 0.2vmin;
	
	/*border: min(0.25rem, 1vmin) solid var(--maroon);*/
	border: 0.25rem solid var(--maroon);
    background-color: var(--white);
   
	color: var(--maroon);
	font-size: 80%;
	font-style: normal;
	text-align: left;
	/*font-family: verdana, helvetica, arial, sans-serif;*/
	font-weight: 600;
	letter-spacing: 0.1em;
	
	overflow-y: auto;
	display:none;
    user-select: none;   
	z-index: 1200;
}

.submenu div {
   white-space: nowrap;
   padding: 0.75em 2em 0.75em 0.5em;
   border-bottom: 0.2em solid var(--maroon);
}

.submenu div.selected {
   background-color: var(--pink);   
}   

.submenu div.unselected {
   background-color: var(--white);   
} 

.submenu div:hover {
   outline: 0.3em solid var(--maroon);
   background-color: var(--vltmaroon);
}

#mbOpenTFManager,
#mbTextFrameToFront,
#mbDeselectTextFrame {
   border-bottom: 0.5em solid var(--maroon);
}
  
/*####  M E D I A  <800 ####*/
/*  
@media screen and (max-width: 799px) {
           
}
*/
/*####  M E D I A  > 800 ####*/
/*
@media screen and (min-width: 800px) {
              
}
*/

/* ------------------------------- */
/* ======   D I A L O G S   ====== */
/* ------------------------------- */
/* zzdlg */
/*#linkFormContainer,
#imgFormContainer,
#dhDialogConfirm,
#dhAlertBox*/
.dhDialogContainer {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   /*padding: 1em;*/
   background-color: rgba(128, 128, 128, 0.5);
   user-select: none;
   display: none;
   z-index: 9999;
}

.dhDialogBody {
   position:relative;
   top: var(--UIPanelTop);
   /*left: 0;*/
   /*width: 100%;*/
   /* Will be at least 280px */
   /* Will be at most 600px */
   width: max(280px, min(98vw, 600px));
   /*margin-left: max(2vw, (98vw - 600px) / 2);*/
   left: calc((100vw - min(98vw, 600px)) / 2); 
   /*width: max(280px, min(90vw, 600px));
   margin-left: max(2vw, (90vw - 600px) / 2);*/
   /*min-height: 200px;*/
   display: grid;
   grid-template-rows: auto max-content;
   gap: 0.25em;
   align-items: center;
   padding: 0.25em 1em;
   font-size: 1.0em;
   background-color: var(--vltgray);;
   border: 0.5em solid var(--maroon);
   border-radius: 1.2em;
   user-select: none;
}

#saveDialogBody {
   grid-template-rows: auto max-content max-content;
}

/*
#linkDialogBody {
   font-size: 1em;
   border-radius: 1em;
   padding: 1em;
}
*/

.dhDialogMessage,
.dhDialogForm {
   font-size: 1.0em;
   padding: 0.25em;
   user-select: none;
}

.dhDialogForm > div {
   font-size: 1.0em;
   padding: 0.25em;
}

/* #linkFormHref,#linkFormText,#linkFormId,#imgFormFilePath,*/
.dhDialogFormInput {
   width: 100%;
   min-width: 8em;
   min-height: 1.5em;
   text-align: left;
   overflow-wrap: break-word;
   border: 2px solid var(--maroon);
   padding: 0.25em 0em;
   user-select: text;
}

.dhDialogButtons {
   /*position:absolute;
   bottom: 0;*/
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 0.5em;
   background-color:transparent; /*var(--ltmaroon); */
   /*border-top: 0.25em solid var(--maroon);  */
   user-select: none;
}

.dhAlertButton {
   font-weight: 600;
   text-align: center;
   background-color: var(--ltpink);
   max-width: 30%;
   padding: 0.25em;
   border: 0.25em solid var(--maroon);
   border-radius: 0.5em;
   cursor: pointer;
}

.dhDialogButton {
   font-weight: 600;
   background-color: var(--ltpink);
   padding: 0.25em;
   border: 0.25em solid var(--maroon);
   border-radius: 0.5em;
   cursor: pointer;
}

/* zzimgform */
#imgFormNatWidth,
#imgFormNatHeight {
   display: inline-block;
   /*
   min-width: 20vw;
   text-align: left;
   border: 2px solid var(--maroon);
   */
}

#imgFormScale:first-child {
  margin-bottom: 0.5em;
}
/*
#hrFormContainer {
   background-color: transparent;
}
/
/*cursor: pointer;*/

/* ====  R A D I O   B U T T O N   ==== */
.dhRadioButton {
  width: 1.2em;
  height: 1.2em;
  line-height: 0.6em;
  font-weight: 800;
  border: 4px solid var(--maroon);
  border-radius: 0.2em;
  background-color: #ffffff;
  margin-right: 1em;
}

.dhrbSelected {
  background-color: #b0b0ff;
}

/* ------------------------------------------- */
/* ======  P A N E L S   G E N E R I C  ====== */
/* ------------------------------------------- */

/* zzpanels */
/* backgroundsPanel TFManager colorPickerPanel colorEditor*/
/* screenshotPanel htmlPanel helpPanei editPanel */
/* newProjectPanel openProjectPanel */
/* toolbarPropsPanel workspacePropsPanel */
/* zzpopup */
div.popup {
	/*position: absolute;
	top: 64px;*/
	position: fixed;
	top: var(--UIPanelTop);
	/*min-height:280px;*/
	/*max-height: var(--UIMaxPanelHeight);  Calculated in positionPanels() */
	width: max(280px, min(98vw, 600px));
	/*margin-left: max(2vw, (98vw - 600px) / 2);*/
    left: calc((100vw - min(98vw, 600px)) / 2); 
	color: var(--maroon);
	font-size: 16px;
	font-style: normal;
	text-align: center;
	/*font-family: verdana, helvetica, arial, sans-serif;*/
	font-size: 1em;
	font-weight: normal;
	letter-spacing: 0.1em;
	
	/*border: max(0.75em, 3vmin) solid var(--maroon);*/
	border: 0.75em solid var(--maroon);
    border-radius: 0.2em;
    background-color: var(--white);	
   
	display:none;
	z-index: 1100;
}

/* ------- Panel Headings ------- */

.panelHeading,
.panelHeading1,
.panelHeading2,
.panelHeading3,
.panelHeading4,
.panelHeading5 {
   display: grid;
   /*grid-template-columns: auto max-content;*/
   /*grid-template-rows: 2.5em;*/
   background-color: var(--maroon);
   gap: 0.5em;
   padding: 0;
   /*justify-items: stretch;*/
   align-items: center;
   /*border-bottom: max(0.5em, 3vmin) solid var(--maroon);*/
   border-bottom: 0.5em solid var(--maroon);
   user-select: none;
}

.panelHeading {   
   grid-template-columns: auto max-content;
}
.panelHeading1 {   
   grid-template-columns: max-content auto max-content;
}
.panelHeading2 {   
   grid-template-columns: max-content max-content auto max-content;
}
.panelHeading3 {   
   grid-template-columns: max-content max-content max-content auto max-content;
}
.panelHeading4 {   
   grid-template-columns: max-content max-content max-content max-content auto max-content;
}
.panelHeading5 {   
   grid-template-columns: max-content max-content max-content max-content max-content auto max-content;
}

.panelHeading > div,
.panelHeading1 > div,
.panelHeading2 > div,
.panelHeading3 > div,
.panelHeading4 > div,
.panelHeading5 > div {
   color: var(--maroon);
   background-color: var(--white);
   height: 1.75em;
   line-height: 1.75em;
   padding: 0.1em;
   font-size: 1em;
   font-weight: 600;
   letter-spacing: 0.1em;
   /*word-wrap: break-word;*/
   /*align-self: center;*/
   overflow: hidden;
   white-space: nowrap;
   text-overflow: "-";
   user-select: none;
}

/* ------- Panel Buttons ------- */

.headingButtonSave,
.headingButtonClose,
.headingButtonC,
.headingButtonE,
.headingButtonH,
.headingButtonL,
.headingButtonP,
.headingButtonS,
.headingButtonHome,
.headingButtonSelect,
.headingButtonMinus,
.headingButtonPlus {   
   background-image: url('icons/plus.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-color: var(--white);
   border-radius: 0.25em;
   width: 1.75em;
   height: 1.75em;
   cursor: pointer;
   user-select: none;
   display: block;
}

.headingButtonSave {   
   background-image: url('icons/save.png');
}
.headingButtonClose {   
   background-image: url('icons/close.png');
}
.headingButtonC {   
   background-image: url('icons/color.png');
}
.headingButtonE {   
   background-image: url('icons/editor.png');
}
.headingButtonH {   
   background-image: url('icons/help3.png');
}
.headingButtonL {   
   background-image: url('icons/L.png');
}
.headingButtonP {   
   background-image: url('icons/palette.png');
}
.headingButtonS {   
   background-image: url('icons/save.png');
}
.headingButtonHome {   
   background-image: url('icons/home-maroon_72.png');
}
.headingButtonSelect {   
   background-image: url('icons/select-maroon_64.png');
}
.headingButtonMinus {   
   background-image: url('icons/minus.png');
}
.headingButtonPlus {   
   background-image: url('icons/plus.png');
}

/* ------- Panel Body ------- */

.popupPanelBody {
   font-size: 100%;
   background-color: var(--ltpink); 
}

.popupPanelBody > div {
   padding: 0.25em 0;
}
/* zzbtn */
.panelButton {
   color: var(--maroon);
   background-color: var(--ltgray);
   border: 0.15em solid var(--maroon);
   border-radius: 0.2em;
   padding: 0.25em 0.5em;
   font-size: 1.0em;
   font-weight: 500;
   letter-spacing: 0.1em;   
   margin-top: 0.2em;   
}

/* ------- Other ------- */

.draggable {
   touch-action: none;
   user-select: none;
}

/* ======  B A C K G R O U N D   P A N E L  (grid)  ====== */
/* zzbgd zztmp */
#templatesPanel,
#backgroundsPanel {
   width: max(280px, min(96vw, 800px));
   /*margin-left: max(2vw, (96vw - 800px) / 2);*/
   left: calc((100vw - min(96vw, 800px)) / 2); 
   /*margin-left: 4vw;*/
   
   /*border-width: 0.75em;
   border-radius: 0.2rem;*/
}
/*
#gridTemplatesContainer {
   min-height: 100px;
}
*/
#gridTemplatesContainer,
#gridThumbnailsContainer {
   /*height: calc(var(--UIMaxPanelHeight) - (var(--UIHeadingHeight) * 2)); */
   height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;   
}   

#gridTemplates {   
   display: grid;
   /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr;*/
   /*grid-template-columns: repeat( auto-fit, minmax(max(72px, 16vw), 1fr) );*/
   grid-template-columns: repeat( auto-fit, minmax(min(96px, 45vw), 1fr) );
   /*grid-template-columns: repeat( auto-fit, minmax(96px, 45%));*/  /* 128px */
   /*grid-template-columns: fit-content(1fr) fit-content(1fr) fit-content(1fr) fit-content(1fr);*/
   /*grid-template-columns: auto auto auto auto;
   grid-template-rows: 10vw:*/
   background-color: var(--maroon);
   margin: 0.3em; /*1.25vw;*/
   /*margin-top: 0.3vw;*/
   padding: 0.5em; /*2vw;*/
   gap: 0.5em; /*2vw;*/
   justify-content: center;
   justify-items: center;
   /*align-items: center;*/
   align-items: stretch;
   user-select: none;
}

#gridTemplates > div { 
  width: 100%; /* 100% */
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--white);

  /*padding: clamp(8px, 0.2em, 16px);*/
  border: clamp(4px, 0.2em, 16px) solid white;
  /*font-size: 30px;*/
  text-align: center;

  user-select: none;
}

#gridThumbnails {   
   display: grid;
   /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr;*/
   /*grid-template-columns: repeat( auto-fit, minmax(max(72px, 16vw), 1fr) );*/
   grid-template-columns: repeat( auto-fit, minmax(min(96px, 16vw), 1fr) );
   /*grid-template-columns: fit-content(1fr) fit-content(1fr) fit-content(1fr) fit-content(1fr);*/
   /*grid-template-columns: auto auto auto auto;
   grid-template-rows: 10vw:*/
   background-color: var(--maroon);
   margin: 0.3em; /*1.25vw;*/
   /*margin-top: 0.3vw;*/
   padding: 0.5em; /*2vw;*/
   gap: 0.5em; /*2vw;*/
   /*align-items: center;*/
   align-items: stretch;
   user-select: none;
}

/*.gridThumbnails-container div {
.gridThumbnails > div {   

   overflow: hidden;
}
*/
  
#gridThumbnails > div {   
  background-color: var(--white);
  /*background-color: red;*/
  /*width: 20vw;*/
  /*height:16vw;  aiming for 20vw height. Seems I have to include padding.*/
  /*height: 100%;*/
  /*padding: min(0.25em, 8px);*/
  
  /*padding: clamp(8px, 0.2em, 16px);*/
  border: clamp(8px, 0.2em, 16px) solid white;
  /*font-size: 30px;*/
  text-align: center;
  overflow: hidden;
  user-select: none;
}

.thumbnail {  
  width: 100%;
  object-fit: contain;
  user-select: none;
}

.zthumbnail {
   width: 100%;
   /*height: 100%;
   object-fit: contain;*/
   user-select: none;
}

/* ======   T E X T F R A M E S    M A N A G E R   ====== */

/* zztfm */
#textFramesManager {
   /* Need margin-left at 0 for dragging */
   /*margin-left: 0;*/
   /*top: 0;
   left: 0;*/
   /*left: max(2vw, (90vw - 600px) / 2);*/
   /*min-height:0px;
   background-color: var(--ltpink);
   
   z-index: 1200;*/
}

#TFManagerBody {
   position:relative;
   user-select: none;
}

#TFMButtons {
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 0.5em;
   background-color: var(--ltmaroon);   
   border-bottom: 0.2em solid var(--maroon);
   user-select: none;
}

#TFMButtons > div {
   width: 2.0em;
   height: 2.0em;   
   display: block;   
   font-weight: 600;
   /*background-color: var(--ltgray);*/
   padding: 0.25em;
   border: 0.25em solid var(--maroon);
   border-radius: 0.5em;
   cursor: pointer;
   user-select: none;
}

.tfmBtnNormal {
   background-color: var(--ltgray);
}

.tfmBtnPressed {
   background-color: var(--mdgray);
}

#btnAddTextFrame {
   background-image: url('icons/plus.png');
   background-repeat: no-repeat;
   background-size: cover;
}

#btnDeleteTextFrame {
   background-image: url('icons/minus.png');
   background-repeat: no-repeat;
   background-size: cover;
}

#btnTFMoveUp {
   background-image: url('icons/up.png');
   background-repeat: no-repeat;
   background-size: cover;
}

#btnTFMoveDown {
   background-image: url('icons/down.png');
   background-repeat: no-repeat;
   background-size: cover;
}

#btnUndeleteTextFrame {
   background-image: url('icons/hidden_maroon_64.png');
   background-repeat: no-repeat;
   background-size: cover;
}

/* ====== LIST ====== */

#TFManagerList {
   min-height: 64px;
   max-height: var(--UIMaxPanelContentHeight);
   overflow-y: auto; 
   user-select: none;
}

.tfmItem {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.5em;
   background-color: var(--white);
   border-bottom: 0.2em solid var(--maroon);  
   user-select: none;
}

.tfmItemActive {
   color: var(--maroon); 
   background-color: var(--white);
   font-weight:normal;   
}

.tfmItemDisabled {
   color: var(--mdgray);
   background-color: var(--ltgray);
   font-weight:normal;   
} 

.tfmItemSelected {
   color: var(--maroon);
   background-color: var(--pink); /*#d8d8d8;*/   
   font-weight: bold;
}   

.tfmItemUnselected {
   color: var(--maroon);
   background-color: var(--white);   
   font-weight:normal;
}

.tfmItemName {
   flex-grow: 2;
   text-align: left;
   text-overflow: ellipsis;
   padding: 0.5em 0.25em;

}

.tfmItemBtns {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.tfmItemBtnLock {
   background-image: url('icons/unlocked_64.png');
   background-repeat: no-repeat;
   background-size: cover;
   width: 2em;
   height: 2em;
   /*padding: 0.15em;*/
   color: #000000; /*var(--vdkgray);*/
   background-color: var(--ltgray);
   border: 4px solid var(--vdkgray);
   border-radius: 0.25em;
   margin-right: 0.2em;
   user-select: none;
   /*display: inline-block;*/
}

.tfmItemBtnState {
   background-image: url('icons/visible_64.png');
   background-repeat: no-repeat;
   background-size: cover;
   width: 2em;
   height: 2em;
   /*padding: 0.15em;*/
   color: #000000; /*var(--vdkgray);*/
   background-color: var(--ltgray);
   border: 4px solid var(--vdkgray);
   border-radius: 0.25em;
   user-select: none;
   /*display: inline-block;*/
}

.tfmBtnVisibility {
   background-image: url('icons/visible_64.png');
   background-repeat: no-repeat;
   background-size: cover;
   width: 2em;
   height: 2em;
   /*padding: 0.15em;*/
   color: #000000; /*var(--vdkgray);*/
   background-color: var(--ltgray);
   border: 4px solid var(--vdkgray);
   border-radius: 0.25em;
   user-select: none;
   /*display: inline-block;*/
}

/* ====  C O L O R   P I C K E R   P A N E L  (grid)  ==== */

/* zzcp */
#colorPickerPanel {
   user-select: none;   
   z-index: 1200;
   user-select: none;
}

#zcolorPickerDisplay {
   display: grid;
   grid-template-columns: max-content auto max-content auto;
   align-items: center;
   text-align: left;
}

#colorPickerDisplay {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   text-align: center;
   border-bottom: 0.2em solid var(--maroon); 
}

.flex-text {
   flex-grow: 0;
   flex-shrink: 1;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.flex-color {
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 0;
   /*margin: 0 0.2em;*/
}

.flex-space {
   flex-grow: 1;
   flex-shrink: 0;
   min-width: 0;
}

#cpSelectedColor, #cpCurrentColor {
   /*width: 4em;*/
   width: min(16vw, 4em);
   height: 2.0em;
   margin: 0.25em;
   border: 0.25em solid var(--maroon);
}

/* EDIT */
#gridSwatchesContainer {
   position: relative;
   top: 0;
   left: 0;   
   min-height: 200px;
   max-height: var(--UIMaxPanelContentHeight);
   overflow-y: auto;  
} 

#gridSwatches {
   display: grid;
   /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
   grid-template-columns: auto auto auto auto auto auto;
   background-color: var(--maroon);
   padding: 0.2em;
   gap: 0.2em;
}

#gridSwatches > div {
   /*height: 32px;*/ 
   height: 2.5em; 
   border: 0.1em solid black;
}   

.contain {
   object-fit: contain;
}

.scale-down {
   object-fit: scale-down;
}

/* ====  C O L O R   E D I T O R  ==== */
/* ====  H R   E D I T O R  ==== */

/* zzce  zzhr  zzwidget*/
#colorEditorPanel,
#hrEditorPanel {
   /* Need margin-left at 0 for dragging */
   margin-left: 0;
   left: max(2vw, (90vw - 600px) / 2);
   min-height:64px;
   background-color: var(--ltpink);
   user-select: none;
   z-index: 1200;
}

#colorEditorTitle,
#hrEditorTitle {
   touch-action: none;
   user-select: none;
}

#colorEditorBody,
#hrEditorBody {
   display: grid;
   grid-template-columns: max-content auto max-content;
   align-content: center; 
   /*height: 1.75em;
   width: 1.75em;*/
   /*line-height: 1.5em;*/
   padding: 0.5em;
   gap: 0.5em;
}

.ceProp {
   border: 0.2em solid var(--maroon);
   background-color: var(--vltgray);
   /*height: 1.75em;
   width: 1.75em;*/
   line-height: 1.25em;
   padding: 0em 0.25em;
   font-size: 1em;
   /*font-weight: 600;*/
   user-select: none;
   
}
.rangeSlider90 input[type="range"]{
   width: 90%;
   height: 1.25em;
   line-height: 1.25em;
}

.ceValue {
   border: 0.2em solid var(--maroon);
   background-color: var(--vltgray);
   /*height: 1.25em;
   width: 4.0em;*/ 
   line-height: 1.25em;
   padding: 0em 0.25em;
   font-size: 1em;
   user-select: none;
}

/* ====   S C R E E N S H O T   ==== */
/* zzss */
#screenshotPanel {
   width: auto;
   height: auto;
   /*margin-left: auto;
   margin-right: auto;*/
   /*border: max(0.75em, 3.5vmin) solid var(--maroon);*/
   border: 0.75em solid var(--maroon);
   padding: 0px;
}

#screenshotPanelBody {
   min-height: 200px;
   max-height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;   
   padding: 0px;
   background-color: #ee50a0;
   top: 0;
   left: 0;
}

#screenshotPanelBody .canvas {
   min-width: 24vw;
   min-height: 24vw;
   padding: 0px;
   /*position: absolute;*/
   top: 0;
   left: 0   
}

#screenshotImage {
   padding: 0px;
   position: relative;
   top: 0;
   left: 0;
   object-fit: contain;
   z-index: 1200;
}

#screenshotPending {
   /*width: 24vw;
   height: 48vw;*/
   /*margin-left: auto;
   margin-right: auto;*/
   /*border: max(0.75em, 3.5vmin) solid var(--maroon);*/
   border: 0.75em solid var(--maroon);
   padding: 0px;
   display: none;
   z-index: 9999;
}

#screenshotPendingBody {
  /*width: 24vw;*/
  height: 80vmin;
}

.animated-gradient2 {
background: linear-gradient(200deg, #B0F2B4, #BAF2E9, #FF91FE);
background-size: 600% 600%;
animation: GradientAnimation 1s linear infinite;
}

@keyframes GradientAnimation {
0%{background-position: 0% 95%}
50%{background-position: 100% 5%}
100%{background-position:0% 95%}
}

.animated-gradient {
  background-image: linear-gradient(90deg,#71c66c,#ff8000,#db5779,#71c66c,#ff8000);
  background-size: 400% 100%;
  animation: AnimateBg 2s linear infinite;
}
@keyframes AnimateBg {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}


/* ====   H T M L  C O N T A I N E R   ==== */

/* zzhtml */
#htmlPanel {
   /* Uses .popup */
}

#htmlContent {
   /*position: relative;
   top: 0px;
   left: 0; */  
   min-height: 200px;
   max-height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;   
   text-align: left;
   font-size: 0.9em;
   font-weight: 500;
   letter-spacing: 0;

   border: none;
   padding: 1em;
   display: block;
   /*z-index: 1300;*/
}

/* ====   H E L P   P A N E L   ==== */

#helpPanel {
   /* Uses .popup */
   z-index: 2000;
}
/* zzhelp */
#helpContent {
   position: relative;
   display: block;
   /*display: flex;*/
   /*justify-content: start;*/
   top: 0;
   left: 0;
   /*width: 100%;*/
   height: var(--UIMaxPanelContentHeight);
   min-height: 200px;
   max-height: var(--UIMaxPanelBodyHeight);
   text-align: left;
   /*font-size: var(--UIHelpFontScale);*/
   font-size: 1em;
   /*font-weight: 500;*/
   /*letter-spacing: 0;*/
   overflow-y: auto;   
   border: none;
   padding: 0em;
   background-color: #f7f5ee;
}

.helpFile {
   width: 100%;
   /*font-size: var(--UIHelpFontScale);*/
   /*overflow-y: auto;*/
   overflow-wrap: break-word;  
   /*overflow: clip;
   overflowClipMargin: 0px;*/
}

.imgContainer {
   width: 100%;
   height: auto;
   /*border: 4px solid red;*/
   background-size: contain; /* try other properties here like cover, contain, etc */
   background-repeat: no-repeat;
}

.imgContainer > img {
  max-width: 100%;
  height: 100%;
}

/*
.helpFile > img {
  max-width: 100%;
  height: auto;
}
*/
/* zzedit */
#helpContentHTML {
   position:absolute;
   top: 0; 
   left: 0;
   width: 100%; 
   height: auto;
   font-size: var(--UIHelpFontScale);
   display: block;
   z-index: 9999;
}

/*
.iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
*/
/* iframe doesn't see this css */
#helpFrame {
   border: 0;
   margin: 0;
   padding: 0;
   text-align: left;
}

.helpDisplayHeading {
   font-size: 1.2em;
   font-weight: 700;
   text-align: left;
   padding-top: 0.5em;
}

.helpDisplayContent {
   position: relative;
   top: 0px;
   left: 0;
   /*margin: 0.5em 0;*/
   text-align: left;
   font-size: 1em;
   font-weight: 500;
   letter-spacing: 0;
   line-height: 1.5em;
   border: none;
   padding: 0.25em 0 0 0;
   display: block;
}

/* ====   E D I T   P A N E L   ====*/

#editPanel {
   /* Uses .popup */
   /*margin-left: 8vw;
   min-width: 80vw;*/
   z-index: 1100;
}

#editPanelFileName {
   font-size: 1.2em;
   font-weight: 500;
   border-bottom: 0.2em solid var(--maroon); 
}

/* zzhelp */
#editContent {
   position: relative;
   top: 0;
   left: 0;
   height: var(--UIMaxPanelContentHeight);
   min-height: 200px;
   max-height: var(--UIMaxPanelContentHeight);
   overflow-y: auto;   
   text-align: left;
   /*font-size: var(--UIFontSize);*/
   font-size: 1em;
   /*font-weight: 500;
   letter-spacing: 0;
   padding: 0.5em;*/
   border: none;
   /*display: block;*/
}
/* zzedit */
#editContentHTML {
  position:absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: auto;
  display: none;
  z-index: 9999;
}

#editContentText {
  position:absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  /*height: 200px;
  height: var(--UIMaxPanelContentHeight);
  overflow-y: auto; */  
  background-color: white;
  color: var(--maroon);
  padding-left: 1em;
  display: none;
  z-index: 9998;
}

/* ====   N E W   P R O J E C T   P O P U P   ====*/

#newProjectPanel{
   /*width:60vw;
   margin-left: 18vw;*/
	/*min-height:120px;*/
   letter-spacing: 0;
   /*border-width: 0.75em;
   border-radius: 0.2rem;*/
   background-color: var(--ltpink);
   /*box-sizing: border-box;*/
}
/*
#newProjectPanelBody {
   max-height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;
}
*/
/* ??? */
#newProjectPanel input {
   width: 80%;
   margin-left: 0%;
   margin-top: 0.15em;
   margin-bottom: 0.15em;
   border: 0.15em solid var(--maroon);
   border-radius: 0.2rem;
   padding: 0.1em;
   font-size: 1.0em;   
   /*font-weight: 550;*/
   color: var(--maroon);
   letter-spacing: 0.1em;
   background: var(--white);
   padding: 0.25em 0.5em;      
}

/* zzbtn */
#znewProjectPanel button {
   color: var(--maroon);
   background-color: var(--ltgray);
   border: 0.15em solid var(--maroon);
   border-radius: 0.2em;
   padding: 0.25em 0.5em;
   font-size: 1.0em; 
   letter-spacing: 0.1em;   
   margin-top: 0.2em;   
}

#dhsbWorkspaceSize {
   width: 80%;   
   margin-left: 10%;
}
/*
#dhsbWorkspaceSize.dhSelectBoxOptionsList {
   max-height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;
   z-index: 9999;
}
*/

/* ====  O P E N   P R O J E C T   P O P U P  ====*/

#openProjectPanel {
   min-height:120px;
   /*border-width: 0.75em;
   border-radius: 0.2rem;
   letter-spacing: 0;*/
   background-color: var(--ltpink);
}

#openProjectPanelBody {
   max-height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;
}

#openProjectPanel input[type="file"]::file-selector-button {
   /*font-size: 1.5em;*/
   font-size: calc(var(--UIFontSize) * 1);
   color: var(--maroon);
   letter-spacing: 0.1em;
   background-color: var(--ltgray);
   border: 2px solid var(--maroon);
   border-radius: 4px;
   padding: 0.25em 0.5em;
}

#openProjectPanelButtons {
   display: grid;
   grid-template-columns: auto max-content auto max-content auto; /*max-content max-content;*/
   gap: 0.5rem;
   padding: 0.5rem 0.5rem;
}
/* zzbtn */
#zopenProjectPanelButtons > button {
   color: var(--maroon);
   background-color: var(--ltgray);
   border: 2px solid var(--maroon);
   border-radius: 4px;
   letter-spacing: 0.1rem;
   font-size: 0.9em;
   font-weight: 600;
   padding: 0.5rem;
}

/* ====  T O O L B A R   P R O P S   P A N E L   ==== */

/* EDIT */
#toolbarPropsPanel {
   background-color: var(--ltpink);
   padding: 0px;
}

.toolbarPropsBody {
   min-height: 200px;
   max-height: var(--UIMaxPanelBodyHeight);   
   font-size: 1em;
   font-weight: 500;
   letter-spacing: 0;   
}

#dhsbToolbarSize {
   margin-left: 2%;
   width: 40%;
}

#dhsbHandleSize {
   margin-left: 2%;
   width: 40%;
}

/* ====  W O R K S P A C E   P R O P S   P A N E L  ==== */

/* zzwsprops */
#workspacePropsPanel {
   background-color: var(--ltpink);
   padding: 0px;
}

#workspacePropsProjectName {
   min-width: 20vw;
   text-align: left;
   border: 1px solid var(--maroon);
}

/* EDIT */
.workspacePropsBody {
   position: relative;
   top: 0;
   left: 0;   
   min-height: 200px;
   max-height: var(--UIMaxPanelBodyHeight);
   overflow-y: auto;   
   font-size: 1em;
   font-weight: 500;
   letter-spacing: 0;  
   padding: 0.25em 0; 
}

.propsItem {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
   padding: 0.25em 0.5em;
}

.propsItemCenter {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   padding: 0.25em 0.5em;
}

.propsItemSpaceAround {
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: nowrap;
   padding: 0.25em 0.5em;
}

.propsItemSpaceBetween {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
   padding: 0.25em 0.5em;
}


#dhsbWorkspacePropsDesignWidth,
#dhsbWorkspacePropsDesignHeight {
   margin-left: 0%;
   width: 30%;
}
/*
#dhsbWorkspacePropsDesignHeight .dhSelectBox {
   width: 30%;
}
*/

#inputWorkspacePropsFontSize {
   /*display: inline-block;
   width: 75%; 25vw;*/
}

#inputBackgroundImageAlpha {
   /*display: inline-block;
   width: 75%; 25vw;*/
}

#inputUseGhostOutlines {
   /*
   width: 2em;
   height: 2em;
   */
   width: var(--UIFontSize);
   height: var(--UIFontSize);
   
}

#inputGhostOutlinesWidth {
   /*display: inline-block;
   width: 75%; 25vw;*/
}
/* zzbtn */
#zbtnGhostOutlineColor {
   color: var(--maroon);
   background-color: var(--ltgray);
   border: 0.15em solid var(--maroon);
   border-radius: 0.2em;
   padding: 0.25em 0.5em;
   font-size: 1.0em;
   letter-spacing: 0.1em;   
   margin-top: 0.2em;   
}

#cbUseDevMode,
#cbUseSnapping,
#cbSaveAsDefault {
   width: var(--UIFontSize);
   height: var(--UIFontSize);
}

/* ==== T E X T   F R A M E   P R O P S  P A N E L  ==== */

/* zztfprops */
#textFramePropsSpace {
   position: fixed;
   top: 0;
   left: 0;
   display: none;   
   z-index: 1100;
}

#textFramePropsContainer {
   position: absolute;   
   top: 0.2vmin;
   left: 0.2vmin;
   width: 94vw;
   border: 0.3em solid var(--maroon);
      
   display: grid;
   grid-template-columns: auto max-content;
   justify-items: start; 
   /*align-items: top;*/
   /*padding: 0.20em;*/
   gap: 0 0.25em;
   background-color: var(--ltgray);
   
   color: var(--dkmaroon);
	/*font-size: 1em;*/
	font-style: normal;
	text-align: center; /*center;left*/
	font-weight: 500;
	letter-spacing: 0;
	user-select: none;
}
/*  
#textFramePropsContainer > div {
   background-color: var(--white);
}
*/

#textFramePropsPanel {
   display: flex;
   flex-wrap: wrap;   
   align-items: center;/**/
   /*padding-right: 0.25em;
   background-color: var(--ltmaroon);
   opacity: 1;
   background-color: var(--vltgray);*/
   user-select: none;
}
 
#textFramePropsName {
   /*display: inline-block;*/
   font-size: 1em;
   margin: 0;
   padding: 0 0.25em;
   background-color: var(--vltgray);
   user-select: none;
}

.tfprop {   
   /*display: inline-block;*/
   /*background-color: var(--ltpink);*/
   border: 0.15em solid var(--maroon);
   border-radius: 0.2em;
   margin: 0.2em;
   /*padding: 0.1em;*/
   align-items: center;
   font-size: 0.9em;
   padding: 0.12em;
   /*opacity: 1;*/
   user-select: none;
}

.tfpBtnNormal {
   background-color: var(--ltpink);
   font-weight: normal;
}

.tfpBtnPressed {
   background-color: var(--ltmaroon);
   font-weight: 600;
}

/* Only use in tfprops panel */
.btnCloseProps {
   background-image: url('icons/close.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-color: var(--white);
   border: 0.25em solid var(--maroon);
   border-radius: 0.25em;
   margin-right: 0.1em;
   width: 2em;
   height: 2em;   
   user-select: none;
   display: block;   
}
/* **** TEXT FRAME  INDIVIDUAL PROPERTIES **** */

.textFramePropertyPopup {
   /*position: absolute;*/
   position: fixed;
   visibility: hidden;
   top: 0;
   left: 1vw;
   /* Will be at least 280px wide */
   /* Will be at most 480px wide */
   width: max(280px, min(98vw, 480px));
   /*height: 2.5em;32px;*/
   background-color: var(--maroon); 
   font-size: 1em;
   text-align: center;
   user-select: none;
   z-index: 1200;      
}

/* outer grid */
.tfPropOuterGrid {
   width: 100%;/**/
   display: grid;
   grid-template-columns: auto max-content;
   
   padding: 0.25em;/**/
   gap: 0.25em;
   align-items: start;
   
   /*border: 6px solid var(--maroon);*/
   background-color: var(--maroon);
	color: var(--dkmaroon);
	text-align: center;
	/*z-index: 1200;*/
	        
}

.tfPropInnerGrid {
  width: 100%;
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: max-content max-content ;
  padding: 0.25em;/**/
  gap: 0.25em;
  /*justify-content: space-between;*/
  align-items: start;
  color: var(--dkmaroon);
  background-color: var(--pink);
  text-align: center;
  
}
/* May no longer need */
.tfpropDisplay {
   margin-right: 0.5em; /* */
   user-select: none;
}

.tfPropRange {
  grid-column-start: span 2;
  user-select: none;
}

.textFramePropertyPopup input[type="range"]{
   width: 90%;
} 

.propButtonClose {
   background-image: url('icons/close.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-color: var(--white);
   border-radius: 0.2em;
   width: 1.75em; /*max(1.0em, 28px);*/
   height: 1.75em; /*max(1.0em, 28px);*/  
   user-select: none; 
   display: block;
}

/* ################### */

.textFramePropertyGrid {
   /*width: 100%;*/
   display: grid;
   grid-template-columns: max-content auto;
   
   padding: 0.2em;
   gap: 0.2em;
   background-color: var(--pink);
	/*border: 0.25em solid var(--maroon);*/
	/*font-size: 1em;*/
   color: var(--dkmaroon);
   align-items: start;
   user-select: none;
}

.textFramePropertyGrid > div {
   padding: 0.1em 0;/**/
   /*background-color: var(--ltpink);*/
}

/* ################### */

/* ====  Z O O M   P A N E L  ==== */

#workspaceZoomPanel {
   position: fixed;
   top: 0;
   width: max(300px, min(90vw, 400px));
   visibility: hidden;
}

.zoomPopup {
   display: grid;
   grid-template-columns: auto max-content;
   
   padding: 0.25em;
   gap: 0.4em;
   align-items: center;
   background-color: var(--maroon);
	color: var(--dkmaroon);

   text-align: center;
   z-index: 1200;
}

.zoomGrid {
   display: grid;
   grid-template-columns: max-content auto;
   
   /*padding: 2px;*/
   gap: 0.25em;
   align-items: center;
   
   /*border: 6px solid var(--maroon);*/
   background-color: var(--pink);
	color: var(--dkmaroon);
	text-align: center;
	/*z-index: 1200;*/        
}

#dhsbWorkspaceZoomLevel {
   margin-left: 2%;
   width: 90%;
}
/*
#dhsbWorkspaceZoomLevel .dhSelectBox {
   width: 40%;
}
*/
#btnCloseWorkspaceZoomPanel {
   background-color: white;
}

.zoomButtonClose {   
   background-image: url('icons/close.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-color: var(--white);
   width: 1.75em; /*max(1.0em, 28px);*/
   height: 1.75em; /*max(1.0em, 28px);*/   
   display: block;
}

/* ====   L O G    P A N E L    ==== */

#logPanel {
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 98vw;
	height: auto;
	
	box-sizing: border-box;   
	margin-left: 0;
	/*border: max(0.75em, 3vmin) solid var(--maroon);*/
	border: 0.75em solid var(--maroon);
   border-radius: 0.2em;
   
   background-color: var(--white);
	color: var(--maroon);
	font-size: 16px;
	font-style: normal;
	text-align: center;
	/*font-family: verdana, helvetica, arial, sans-serif;*/
	font-size: 1em;
	font-weight: normal;
	letter-spacing: 0.1em;
   	
	display:none;
	z-index: 10000;
}

.logPanelTitle {
   touch-action: none;
   user-select: none;
}

#logPanelBody {
   position: relative;
   /*top: 0px;
   left: 0px;
   bottom: 0px;*/   
   height: 40px;/**/
   /*max-height: var(--UIMaxPanelBodyHeight);*/
   /*min-height: 40px;*/
   text-align: left;
   font-size: 0.75em;
   font-weight: 500;
   letter-spacing: 0;
   white-space: pre-line; /*pre-wrap*/ 
   border: none;
   padding: 1em;
   overflow-y: auto;
   /*display: block;*/
   /*z-index: 1300;*/
}

/* ----------------------------------------- */
/* ====  S E L E C T O R   W I D G E T  ==== */
/* ----------------------------------------- */
/* zzwidget */
#selectorWidget{
   position: fixed;
   top: 300px;
   left: 64px;
   /*min-width: 120px;
   height: 64px;*/

   display: grid;
   grid-template-columns: max-content max-content max-content max-content max-content max-content;
   padding: 0.2em;
   gap: 0.2em;
   align-items: center;
   background-color: var(--gray);
   border: 4px solid black;
   user-select: none;

   z-index: 9999;
}

#selectorWidget > div {
   width: 1.75em;
   height:1.75em;
   user-select: none;
}

.arrowLeft,
.arrowRight,
.arrowUp,
.arrowDown,
.selectorModeMove,
.selectorModeExtend, 
.selectorModeNudge,
.selectorModeNudgeOne,
.grabber {   
   /*background-image: url('icons/esel_64.png');*/
   background-repeat: no-repeat;
   background-size: cover;
   background-color: var(--white);
   border-radius: 0.25em;
   /*width: 1.75em;
   height: 1.75em;   
   display: block;*/
   user-select: none;
}

.arrowLeft {   
   background-image: url('icons/arrow-l_64.png');
}
.arrowRight {   
   background-image: url('icons/arrow-r_64.png');
}
.arrowUp {   
   background-image: url('icons/arrow-u_64.png');
}
.arrowDown {   
   background-image: url('icons/arrow-d_64.png');
}
.selectorModeMove {   
   background-image: url('icons/msel_64.png');
}
.selectorModeExtend {   
   background-image: url('icons/esel_64.png');
}
.selectorModeNudge {   
   background-image: url('icons/tsel_64.png');
}
.selectorModeNudgeOne {   
   background-image: url('icons/tsel-1_64.png');
}
.grabber {   
   background-image: url('icons/grabber_64.png');
   touch-action: none;
   user-select: none;
}

/* ====  G R I D   G E N E R I C  ==== */

.grid-item-right {
   justify-self: end;
}

.grid-item-left {
   justify-self: start;
}

.grid-item-center {
   justify-self: center;
}
.grid-item-top {
   align-self: start;
}

/* ====   W O R K S P A C E   ==== */

/* Probably want to make workspace (and screenshot resizable, so easier to edit on large screen.
   Small is 50% width; Large is 100% width. 
   Widths and heights in viewport dimensions, Fonts in percentages.
    
   Items affected by resizing workspace:
   
      Workspace width
      Workspace margin-left
      TextFrame width
      TextFrame height
      TextFrame border width
      TextFrame padding
      TextFrame font size
   
      Maybe stuff in Background Panel grid
*/

/* zzws */
#toolbarSpace {
   width: 100%;
   background-color: var(--gray);
   z-index: 1;
}
#workspaceContainer {
   /*position:absolute;
   top: 0px;
   left: 0px;*/
   width:100%;
   /*height: auto;*/

   font-size: 16px;
   padding: 0px;
   /* Setting to none prevents selection outside workspace
      but messes with selection in form inputs. */
   user-select: none;
   overflow-y: auto; /* !!! IMPORTANT */
   z-index:1;
}

#workspace {
   position: relative;   
   /* scale 50% default */
   top: 0;
   width:48vw;
   margin-left: 0;
   /*margin: 0 auto;*/	
   height:64vw;
   background-color: rgb(255, 255, 255, 1);
   /*background-color: var(--white);*/
   user-select: none;
   font-size: 100%;	
   padding: 0px;
   display:block;
   z-index:2;
}
/* This does not allow selection of text 
#workspace a {
   pointer-events: none; 
}
/
#backgroundImage {
   position: absolute;
   top: 0px;
   left: 0px;
   border: 0;
   margin: 0;
   padding: 0;
   pointer-events: none;
   opacity: 1;
   z-index:2;
}

/* ======  T E X T   F R A M E S  ====== */

/* Cannot set textFrame width or margins here because it corrupts resizing. */
/* zztfr */
.textFrame {
   /*border: 4px dashed red;*/

   outline: none; /* remove default outline from div contentEditable */   
   box-sizing: border-box; /* !!!IMPORTANT for proper resizing !*/
   position: absolute;
   
   z-index: 100; /* 10-999 */
   /* !!! Don't know why, but need display:grid to work. */
   /*display:grid;*/ 
   display:block;  /*Now seems to be working with display:block */
   /*overflow: hidden;*/
}

/* Need a div so I can hide overflow and prevent scrolling in textFrameContentArea. */ 
.textFrameConstraint {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   border: none;
   outline: none;
   overflow: clip; /* IMPORTANT to prevent editable from scrolling */
}

/* .textFrameContentArea is direct child of .textFrame */
.textFrameContentArea {
   position:absolute;
   top: 0;
   left: 0;
   width: 100%;
   /* !!!IMPORTANT: Do NOT set height! */
   height: 100%;/*WHAT? I set height and it's now working.*/
   /*width: calc(100% - 1vw);calc(100% - 1vw); 100%;
   height: 100%;*/
   /*margin: 0.5em;*/
   border: 0 solid black;
   /*border-style: solid;*/
   border-radius: 0;

   /*ghost outline*/
   outline-style: var(--go-style, dashed);
   outline-width: var(--go-width);
   outline-color: var(--go-color);
   
   /*background-color: #ffe0f0;
   opacity: 0.5;*/
   /*font-size: 100%;*/
   letter-spacing: 0em;
   line-height: 1.6;
   padding: 1em;
   overflow-wrap: break-word;
   overflow: clip; /* !!!IMPORTANT to keep inside textFrame border! */
   overflow-clip-margin: 0px;
   /*text-overflow: clip;*/  /* no difference */
   box-sizing: border-box; /* !!!IMPORTANT for proper resizing ! */
   /*display: block;*/
   /*touch-action: none;*/
   /*user-select: text;*/
   background-image: none;
   background-repeat: no-repeat;
   background-size: contain;
   
   /*caret: red;*/
   user-select: text;
}

.textFrameContentArea p {
   line-height: 1.6;
}

.textFrameContentArea > div {
   width: 100%;
   text-justify: inter-word;
}
/
.textFrameContentArea hr {
   width: 100%;
   height: 2px;
   color: inherit;
}

/*
.textFrameContentArea img {
   width: 100%;
   height: auto;
}
*/
.imgInline {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

.imgTF {
  width: 100%; /* or any custom size */
  height: 100%; 
  object-fit: contain;
  object-position: left top;
}


/* handles are direct children of .textFrame
   They are scaled along with workspace, but then can become too small on small screen. 
   Need a minimum size. */
   
.textFrame .handle-top-left {
  position: absolute;
  top: calc(0px - (var(--UIHandleSize) * 0.75)); /*-0.5rem; -0.75vw;*/  
  left: calc(0px - (var(--UIHandleSize) * 0.75)); /*-0.5rem; -0.75vw;*/ 
  width: var(--UIHandleSize); /*1rem; 1.5vmax;*/
  height: var(--UIHandleSize); /*1rem; 1.5vmax;*/
  border: 2px solid black;
  border-radius: 3px;
  background-color: var(--white);
  opacity: 0.5;
  cursor: nwse-resize; /*resizer cursor*/
  touch-action: none;
  user-select: none;
}

.textFrame .handle-bottom-right {
  position: absolute;
  bottom: calc(0px - (var(--UIHandleSize) * 0.75));  
  right: calc(0px - (var(--UIHandleSize) * 0.75));
  width: var(--UIHandleSize); /*1rem; 1.5vmax;*/
  height: var(--UIHandleSize); /*1rem; 1.5vmax;*/
  border: 2px solid black;
  border-radius: 3px;
  background-color: var(--white);
  opacity: 0.5;
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
}

.textFrame .handle-top-right {
  position: absolute;
  top: calc(0px - (var(--UIHandleSize) * 0.75));  
  right: calc(0px - (var(--UIHandleSize) * 0.75));
  width: var(--UIHandleSize); /*1rem; 1.5vmax;*/
  height: var(--UIHandleSize); /*1rem; 1.5vmax;*/
  border: 2px solid black;
  border-radius: 3px;
  background-color: var(--white);
  opacity: 0.5;
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
}

/* ======  dh S E L E C T  B O X   ====== */
/* zzsb */
.dhSelectBoxContainer{
   /*width: 80%;   
   margin-left: 10%;*/
   margin-top: 0.15rem;
   margin-bottom: 0.15rem;    	
}

.dhSelectBox{
   position: relative;
   display: grid;
   grid-template-columns: 3fr auto;
   gap: 0.25em;
   min-width: 120px;
   
   padding: 0.15em; 
   /*align-items:center;*/	   
   background-color: var(--maroon);
   color: var(--maroon);
   border: 0px solid var(--maroon); /* This isn't doing anything */
   border-radius: 0.2rem;
   
   font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   text-align: center; /*center;left*/
   /*font-family: verdana, helvetica, arial, sans-serif;*/
   letter-spacing: 0;   

}   
   
.dhSelectBoxSelectedText {
   /*display: inline-block;*/
   /*float: left;*/
   background-color: var(--white);
   padding: 0.2em 0.1em;
   pointer-events: none;
}

.dhSelectBoxButton {
   /*display: inline-block;*/
   /*float: right;*/  
   background-image: url("icons/select-button2.png");
   background-repeat: no-repeat;
   background-size: cover; /*contain;*/   
   padding: 0;
   /*width: 1.2rem;
   height: 1.2rem;*/
   width: 1.5rem;
   height: 1.5rem;   
   background-color: var(--white);
   pointer-events: none; 
}
/* EDIT */
.dhSelectBoxOptionsList {
   border: 0.2em solid var(--maroon);
   background-color: var(--white);
   position:absolute;
   top: 2em;
   left: 0;
   width: 90%;
   overflow-y: auto;
   cursor: pointer;
   display: none;
}   

.dhSelectBoxOption {
   border-bottom: 0.1em solid var(--maroon);
   padding: 0.3em 0.1em;    	
}

/* DON'T NEED MUCH OF THIS. USED IN PREVIOUS APPS */

/* ============  O T H E R  ================== */

.topmargin10 {margin-top: 0.1em;}
.topmargin20 {margin-top: 0.2em;}
.topmargin30 {margin-top: 0.3em;}
.topmargin40 {margin-top: 0.4em;}
.topmargin50 {margin-top: 0.15m;}
.topmargin60 {margin-top: 0.6em;}
.topmargin70 {margin-top: 0.7em;}
.topmargin80 {margin-top: 0.8em;}
.topmargin90 {margin-top: 0.9em;}
.topmargin100 {margin-top: 1.0em;}

.mono {
   font-family: monospaced;
   text-indent: 2em;
   line-height: 1em;
   word-wrap: break-word;
}
/*
hr{
  color: var(--maroon);
  width: 100%;   
  height: 2px;
}
*/
/* ==========  T E X T  ============ */

/* text sizes are percentage of that defined in body */
.extrafine  {font-size: 7pt;}
.fine  {font-size: 8pt;}
.medium  {font-size: 9pt;}
.text40 {font-size: 40%;}
.text50 {font-size: 50%;} /*8px*/
.text60 {font-size: 60%;}
.text67 {font-size: 67%;} /*10px*/
.text70 {font-size: 70%;}
.text75 {font-size: 75%;} /*12px*/
.text80 {font-size: 80%;}
.text83 {font-size: 83%;} /*14px*/
.text90 {font-size: 90%;}
.text100 {font-size: 100%;} /*16px same as default*/
.text110 {font-size: 110%;}
.text112 {font-size: 112%;} /*18px*/
.text120 {font-size: 120%;}
.text125 {font-size: 125%;} /*20px*/
.text137 {font-size: 137%;} /*22px*/
.text140 {font-size: 140%;}
.text150 {font-size: 150%;} /*24px*/
.text160 {font-size: 160%;}
.text175 {font-size: 175%;} /*28px*/
.text180 {font-size: 180%;}
.text200 {font-size: 200%;} /*32px*/
.text225 {font-size: 225%;} /*36px*/
.text250 {font-size: 250%;} /*40px*/
.text300 {font-size: 300%;} /*48px*/
.text400 {font-size: 400%;} /*64px*/

/* these affect text- can be used in p,font,td,etc */
.left {text-align: left;}
.center {text-align: center;}
.right  {text-align: right;}
.justify{text-align: justify;}
.normal {font-weight: 500;}

.bold   {font-weight: 600;}
.italic	{font-style: italic;}
.black	{color:black;}
.red   	{color:red;}
.blue  	{color:blue;}
.green	{color:green;}
.grey	{color:#999999;}
.silver	{color:silver;}
.white	{color:white;}
.serif {font-family: Times New Roman, serif;}
.expand {letter-spacing: 0.15em;}
.xexpand{letter-spacing: 0.3em;}
.line120{line-height: 1.2em;}
.line150{line-height: 1.5em;}
.big	{font-size:150%; font-weight: bold;}

/* ============  B O X   M O D E L  ================== */

/*  content, padding, border, margin ; left, right, top, bottom */
/* The dimensions of the content area of a box -- the content width and content height -- depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. */
/* The background style of the various areas of a box are determined as follows:

Content area: The 'background' property of the generating element. 
Padding area: The 'background' property of the generating element. 
Border area: The border properties of the generating element. 
Margin area: Margins are always transparent. */
/* Background properties are not inherited, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'. */
/* 	
	border: width style color; 
	-OR-
	border-width:10px;
	border-style:outset;
	border-color: black;
*/

.outline {font-weight:550;}
.outline .heading {margin-left:1em; margin-top:1em; font-size:90%; font-weight:bold; text-align:left;}
.outline p {margin-top:0.25em; margin-left:4em; font-size:80%; text-indent:-4em; padding-left:4em; }
.outline span {font-size:85%;}
.outline .notes {font-size:70%; text-indent:1.5em; margin-top:1em; padding-left:0;}

.indent {margin-left:2em;}
.indent4 {margin-left:4em;}
.indent6 {margin-left:6em;}

/* these affect placement- can be used in p,div,table,etc */
/* next three lines do not seem to work */
.top	{vertical-align: top;}
.middle	{vertical-align: middle;}
.bottom	{vertical-align: bottom;}  

.padmedium {padding:0.5em;}
.padwide   {padding:1.0em;}