.inputTextField,
.inputTextFieldAuto {
background:rgba(255,255,255,1);
border-radius:4px !important;
border:rgba(106,137,227,1) solid 1px;
color:rgba(0,0,0,1);
min-width:25%;
padding:10px;
width:450px;
}

.inputTextFieldAuto {
min-width: auto;
width: 100%;
}

i.material-symbols,
i.material-symbols-outline {
direction: ltr;
display: inline-block;
font-family: 'Material Symbols';
font-size: 24px;
font-style: normal !important;
font-weight: 400;
letter-spacing: normal;
line-height: 1;
overflow-wrap: normal;
text-transform: none;
white-space: nowrap;
}

i.material-symbols {
font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;
}

i.material-symbols-outline {
font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
}

.nasheditor {
/* start of vars */
/* light theme */
--main-bg-color-day:rgba(242, 242, 242, 1);
--button-bg-color-day:rgba(242, 242, 242, 1);
--textbox-bg-color-day:rgba(242, 242, 242, 1);
--status-bg-color-day:rgba(242, 242, 242, 1);
--button-icon-color-day:rgba(242, 242, 242, 1);
--textbox-txt-color-day:rgba(84, 84, 84, 1);
--status-txt-color-day:rgba(84, 84, 84, 1);
--toolbar-bxshw-color-day:rgba(0, 0, 0, .05);
/* base theme */
--main-codebox-bg-color:rgba(0, 0, 0, 1);
--main-codebox-text-color:rgba(255, 255, 255, 1);
--main-highlght-color:rgba(146, 40, 40, 0);
--main-bxshw-color:rgba(0, 0, 0, .05);
--main-brd-radius:4px;
--toolbar-fnt-size:1.6em;
--main-fnt-size:0.975em;
--dd-fnt-size:0.715em;
--toolbar-bg-color:rgba(106, 137, 227, 1);
--button-icon-color-hover:rgba(255,200,0,1);
--button-bg-color-hover:rgb(80, 103, 172);
--button-brd-color:rgba(204, 204, 204, 1);
--colorpicker-color1:#000000;
--colorpicker-color2:#4286F5;
--colorpicker-color3:#D44245;
--colorpicker-color4:#F27198;
--colorpicker-color5:#EB9E5A;
--colorpicker-color6:#FCCB05;
--colorpicker-color7:#5FC59D;
--colorpicker-color8:#FFFFFF;
--colorpicker-color9:#67B150;
--colorpicker-color10:#63D1D2;
--colorpicker-color11:#7FACE3;
--colorpicker-color12:#4D7ADF;
--colorpicker-color13:#B093E7;
--colorpicker-color14:#A9A9A9;
/* end of vars */
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: var(--main-brd-radius);
box-shadow: 0 1px 1px var(--main-bxshw-color);
direction: ltr;
font-size: var(--main-fnt-size);
line-height: 1.42857143;
margin:0 auto;
max-width: 90vw;
outline: none;
overflow: hidden;
padding: 0;
pointer-events: all;
position: relative;
unicode-bidi: isolate;
z-index: 100;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: var(--main-highlght-color);
}

.day-nasheditor {
background-color: var(--main-bg-color-day);
}

.nasheditor-toolbar {
background-color: var(--toolbar-bg-color);
display: flex;
height: 23px;
justify-content: center;
overflow: hidden;
padding: 5px;
position: relative;
}

.day-nasheditor-toolbar {
box-shadow: 0 1px 1px var(--toolbar-bxshw-color-day);
}

.nasheditor-textbox {
border:0;
hyphens: auto;
line-break: loose;
line-height: inherit;
min-height: 150px;
overflow: auto;
outline: none;
padding: 10px;
resize: none;
transition: all 0.1s ease-in;
width: 100%;
word-break: break-word;
-webkit-user-modify: read-write;
}

.day-nasheditor-textbox {
background-color: var(--main-codebox-text-color);
color: var(--main-codebox-bg-color);
}

.day-nasheditor-warning {
background-color: rgba(248, 100, 102, 0.5);
border-radius: 50%;
display: block;
height: 0px;
overflow: hidden;
pointer-events: none;
position: absolute;
right: -5px;
bottom:-30px;
width: 0px;
transition: background-color 5s ease-in;
z-index: 160;
}

.nasheditor-status {
align-items: center;
display: flex;
font-size: 6px;
justify-content: center;
overflow: hidden;
padding: 0 2px;
position: relative;
}

.day-nasheditor-status {
background-color: var(--status-bg-color-day);
color: var(--status-txt-color-day);
}

.nasheditor-status .status1,
.nasheditor-status .status2,
.nasheditor-status .status3 {
width: calc(100% / 3);
text-align: left;
}

.nasheditor-status .status2 {
color: rgba(255,0,0,1);
opacity: 0;
text-align: center;
}

.nasheditor-status .status3 {
text-align: right;
}

.day-nasheditor-textbox pre {
background-color: var(--textbox-bg-color-day);
border: 1px solid var(--textbox-txt-color-day);
border-radius: 4px;
color: var(--textbox-txt-color-day);
display: block;
font-size: 13px;
line-height: 1.42857143;
margin: 0 0 10px;
overflow: auto;
padding: 9.5px;
word-break: break-all;
word-wrap: break-word;
}

.day-nasheditor-textbox blockquote {
background: var(--textbox-bg-color-day);
border-left: 5px solid rgb(248, 100, 102, 1);
margin: 10px;
padding: 10px;
}

.day-nasheditor-textbox h1,
.day-nasheditor-textbox h2,
.day-nasheditor-textbox h3,
.day-nasheditor-textbox h4,
.day-nasheditor-textbox h5,
.day-nasheditor-textbox h6 {
margin:10px 0;
}

.nasheditor-button,
.nasheditor-button:hover {
appearance: button;
border-color: var(--button-brd-color);
border-radius: 3px;
cursor: pointer;
line-height: 1.3185;
margin: 0 3px 0 0;
overflow: hidden;
position: relative;
text-align: center;
touch-action: manipulation;
user-select: none;
width: 20px;
white-space: nowrap;
}

.nasheditor-button.hasCaret {
width: 35px;
}

.day-nasheditor-button {
background-color: var(--button-bg-color-day);
color: var(--textbox-txt-color-day);
}

.day-nasheditor-button:hover {
color: var(--button-icon-color-hover);
}

.nasheditor-button.remSpace {
margin: 0;
}

.nasheditor-button.rndLeft {
border-radius: 3px 0 0 3px;
}

.nasheditor-button.rndRight {
border-radius: 0 3px 3px 0;
}

.nasheditor-button.rndNone {
border-radius: 0;
}

.nasheditor-button:hover {
background-color: var(--button-bg-color-hover);
transition: background-color 0.1s ease-in;
}

[class^=nasheditor-icon]:before {
display: inline-block;
font-family:'Material Symbols';
font-size: var(--toolbar-fnt-size);
font-style: normal;
pointer-events: none;
text-decoration: inherit;
text-rendering: auto;
text-transform: none;
vertical-align: middle;
}

.nasheditor-icon-style:before {
content: "sunny";
}

.nasheditor-icon-caret:before {
content: "arrow_drop_down";
font-size: 9px;
}

.nasheditor-icon-bold:before {
content: "format_bold";
}

.nasheditor-icon-underline:before {
content: "format_underlined";
}

.nasheditor-icon-strike:before {
content: "format_strikethrough";
}

.nasheditor-icon-italic:before {
content: "format_italic";
}

.nasheditor-icon-eraser:before {
content: "block";
}

.nasheditor-icon-color:before {
content: "format_color_text";
}

.nasheditor-icon-link:before {
content: "link";
}

.nasheditor-icon-picture:before {
content: "image";
}

.nasheditor-icon-fullscreen:before {
content: "fullscreen";
}

.nasheditor-icon-codeview:before {
content: "code";
}

.nasheditor-icon-chatgpt:before {
content: "smart_toy";
}

#ddStyleDay,
#nashColorboxDay,
#nashLinkboxDay,
#nashPictureboxDay {
background: var(--textbox-bg-color-day);
bottom: 9px;
box-sizing: border-box;
color: var(--textbox-txt-color-day);
flex-flow: row wrap;
font-size: var(--main-fnt-size);
gap: 4px;
height: inherit;
justify-content: center;
margin: 0;
outline: none;
overflow: auto;
padding: 10px;
pointer-events: all;
position: absolute;
top: 30px;
transition: all 0.1s ease-in;
unicode-bidi: isolate;
width: 100%;
z-index: 250;
-webkit-text-size-adjust: 100%;
}

#nashColorboxDay .bgndColorPicker,
#nashColorboxDay .textColorPicker,
#ddStyleDay .ddStyleSetter,
#nashLinkboxDay .linkboxSetter,
#nashPictureboxDay .pictureboxSetter {
background-color: var(--textbox-bg-color-day);
border: 1px solid var(--textbox-txt-color-day);
border-radius: 4px;
box-sizing: border-box;
display: inline-block;
height: inherit;
text-align: center;
overflow: hidden;
width: calc(50% - 2px);
}

#ddStyleDay .ddStyleSetter,
#nashLinkboxDay .linkboxSetter,
#nashPictureboxDay .pictureboxSetter {
width: 100%;
}

.ddStyleSetter {
align-items: center;
display: flex !important;
flex-flow: row wrap;
gap: 4px;
justify-content: center;
}

[class^=ddrow] {
align-items: center;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 4px;
cursor: pointer;
display: inline-block;
justify-content: center;
margin-top: 3px;
padding:10px;
text-decoration: inherit;
text-rendering: auto;
text-transform: none;
transition: all 0.1s ease-in;
}

[class^=ddrow]:hover {
background-color: var(--button-bg-color-hover);
color: var(--button-icon-color-hover);
}

#nashColorboxDay .bgndColorHeader,
#nashColorboxDay .textColorHeader,
#nashLinkboxDay .LinkboxHeader,
#nashPictureboxDay .PictureboxHeader {
margin: 5px;
text-align: center;
}

#nashColorboxDay .bgndColorFooter,
#nashColorboxDay .textColorFooter,
#nashLinkboxDay .LinkboxFooter,
#nashPictureboxDay .PictureboxFooter {
border: 1px solid var(--button-brd-color);
border-radius: 4px;
cursor: pointer;
margin: 5px auto;
padding: 1px 5px;
text-align: center;
transition: all 0.1s ease-in;
width: fit-content;
}

#nashColorboxDay .bgndColorFooter:hover,
#nashColorboxDay .textColorFooter:hover,
#nashLinkboxDay .LinkboxFooter:hover,
#nashPictureboxDay .PictureboxFooter:hover {
background-color: var(--button-bg-color-hover);
color: var(--button-icon-color-hover);
}

#nashColorboxDay .bgndColorBody,
#nashColorboxDay .textColorBody,
#nashLinkboxDay .LinkboxBody,
#nashPictureboxDay .PictureboxBody {
align-items: center;
border-radius: 4px;
display: grid;
grid-template-columns: repeat(7, 1fr);
height: 50%;
margin: 0 auto;
outline: none;
pointer-events: all;
position: relative;
transition: all 0.1s ease-in;
width: calc(100% - 8px);
}

#nashLinkboxDay .LinkboxBody,
#nashPictureboxDay .PictureboxBody {
display: block;
}

#nashColorboxDay .bgndColorBody .bgndColorDot,
#nashColorboxDay .textColorBody .textColorDot {
background-color: var(--colorpicker-color1);
border: 1px solid #333;
border-radius: 50%;
cursor: pointer;
height: 1.2em;
place-self: center;
transition: all 0.1s ease-in;
width: 1.2em;
}

#nashColorboxDay .bgndColorBody .bgndColorDot:hover,
#nashColorboxDay .textColorBody .textColorDot:hover {
border: 1px solid var(--button-icon-color-hover);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color1"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color1"] {
background-color: var(--colorpicker-color1);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color2"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color2"] {
background-color: var(--colorpicker-color2);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color3"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color3"] {
background-color: var(--colorpicker-color3);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color4"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color4"] {
background-color: var(--colorpicker-color4);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color5"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color5"] {
background-color: var(--colorpicker-color5);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color6"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color6"] {
background-color: var(--colorpicker-color6);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color7"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color7"] {
background-color: var(--colorpicker-color7);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color8"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color8"] {
background-color: var(--colorpicker-color8);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color9"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color9"] {
background-color: var(--colorpicker-color9);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color10"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color10"] {
background-color: var(--colorpicker-color10);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color11"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color11"] {
background-color: var(--colorpicker-color11);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color12"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color12"] {
background-color: var(--colorpicker-color12);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color13"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color13"] {
background-color: var(--colorpicker-color13);
}

#nashColorboxDay .bgndColorBody .bgndColorDot[data-color="--colorpicker-color14"],
#nashColorboxDay .textColorBody .textColorDot[data-color="--colorpicker-color14"] {
background-color: var(--colorpicker-color14);
}

#nashLinkboxDay .LinkboxBody .LinkboxBodyText,
#nashLinkboxDay .LinkboxBody .LinkboxBodyURL,
#nashPictureboxDay .PictureboxBody .PictureboxBodyTooltip,
#nashPictureboxDay .PictureboxBody .PictureboxBodyURL {
border: 1px solid #333;
border-radius: 4px;
cursor: pointer;
height: 25px;
line-height: 25px;
margin-bottom:5px;
outline: none;
overflow: hidden;
padding:0 5px;
text-align: left;
transition: all 0.1s ease-in;
white-space: nowrap;
width: 100%;
}

.focusRing:focus {
outline: none;
}

.Text-LabelON:before,
.Text-LabelOFF:before,
.Tooltip-LabelON:before,
.Tooltip-LabelOFF:before,
.LinkURL-LabelON:before,
.LinkURL-LabelOFF:before,
.PictureURL-LabelON:before,
.PictureURL-LabelOFF:before {
content: "Tooltip";
display:block;
font-size: small;
font-style: italic;
opacity:0.5;
position:absolute;
}

.Text-LabelON:before,
.Text-LabelOFF:before {
content: "Text";
}

.LinkURL-LabelON:before,
.LinkURL-LabelOFF:before {
content: "Link URL";
}

.PictureURL-LabelON:before,
.PictureURL-LabelOFF:before {
content: "Picture URL";
}

.Text-LabelOFF:before,
.Tooltip-LabelOFF:before,
.LinkURL-LabelOFF:before,
.PictureURL-LabelOFF:before {
display:none;
}

#nashCodeboxDay {
background: var(--main-codebox-bg-color);
border:2px solid var(--toolbar-bg-color);
bottom: 9px;
color: var(--main-codebox-text-color);
direction: ltr;
font-size: var(--main-fnt-size);
height: inherit;
hyphens: auto;
line-height: inherit;
margin: 0;
outline: none;
overflow: auto;
padding: 10px;
pointer-events: all;
position: absolute;
top: 30px;
transition: all 0.1s ease-in;
unicode-bidi: isolate;
word-break: break-word;
width: 100%;
z-index: 150;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: var(--main-highlght-color);
-webkit-user-modify: read-write;
}