@import "icons.css";
:root {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}
html {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

* {  box-sizing: border-box; }

body {
	overflow:hidden; 
	width:100%; 
	height:100%; 
	background-color: GhostWhite;
	font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
}

input, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    padding: 0.5rem;
    margin: 0;
    color: inherit;
    vertical-align: middle;
}

label {display:block;}

input[type=checkbox] + label, input[type=radio] + label { 
	display: inline;
	margin-left: .2em;
}
label input[type=radio] { margin-right: .2em; }

sub {font-size: .7rem;}

h5 {
	font-size: 1.1rem;
    color: indigo;
    line-height: 1rem;
    margin: 0;
    padding-top: 0.1rem;
    text-align: center;
    text-shadow: 1px 1px white;
}

hr {   
	border-color: lavender;
    margin: 0.2em 0;
}

.w-full {
    width: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.h-full {
    height: 100vh;
}

.flex-col {
	display: flex;
    flex-direction: column;
}
.flex-row {
	display: flex;
    flex-direction: row;
}
.flex {
    display: flex;
}

.flex-center {
	align-items: center;
}
.flex-grow {
    flex-grow: 1;
}
.flex-grow.grow-2 {
    flex-grow: 2;
}
.flex-grow.grow-3 {
    flex-grow: 3;
}
.flex-grow.grow-4 {
    flex-grow: 4;
}
.flex-grow.grow-5 {
    flex-grow: 5;
}

.flex-basis.flex-basis-10 {
    flex-basis: 10%;
}
.flex-basis.flex-basis-90 {
    flex-basis: 90%;
}
.flex-basis.flex-basis-15 {
    flex-basis: 15%;
}
.flex-basis.flex-basis-85 {
    flex-basis: 85%;
}

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}

.bold {
	font-weight: bold;
}
.wide {
	letter-spacing: .05em;
}

.noshrink {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
}

.pos-relative { position: relative;}

.underline {text-decoration: underline;}

.divider {
    line-height: 1rem;
    padding-bottom: 0.2em;
}
.divider span.custom-icon {
	font-size: 1.1rem;
	text-shadow: 1px 1px white;
}

.bottom {
    background-color: white;
    border: none;
	padding: 0; 
}
.border-indigo-1 {border: 1px solid Indigo;}
.border-lavender-5 {border: 5px solid lavender;}
.border-lavender-mid {border: 1px solid #b9b0dd;}

.box-shadow {box-shadow: 0 1px 10px 0px #9481bc;}

.box-shadow-right {box-shadow: -1px 4px 8px 0px #9481bccc;}

.box-shadow-top { box-shadow: 0px -4px 4px 0px #9481bc66;}

.z-index-1 {z-index: 1;}
.z-index-2 {z-index: 2;}
.z-index-3 {z-index: 3;}
.z-index-4 {z-index: 4;}
.z-index-5 {z-index: 5;}
.z-index-10 {z-index: 10;}

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

.overfow-hidden { overflow: hidden;}

.p-xl {padding: 1em}
.m-xl {margin: 1em}

.p-lg {padding: .7em}
.m-lg {margin: .7em}

.p-md {padding: .5em}
.m-md {margin: .5em}

.p-sm {padding: .3em}
.m-sm {margin: .3em}

.p-xs {padding: .1em}
.m-xs {margin: .1em}

.bg-white {background-color: white;}
.bg-lavender {background-color: lavender;}
.bg-ghostwhite{background-color: ghostwhite;}
.bg-whitesmoke {background-color: whitesmoke;}
.bg-gradient-white {background-image: linear-gradient(to bottom, white 70%, rgb(255,255,255,0.1))}
.bg-gradient-indigo, .tags, .no-close.ui-dialog .ui-widget-header {
	background-image: repeating-linear-gradient(145deg, indigo 2px, RebeccaPurple 4px, indigo 6px);
	background-color: indigo !important;
}

.bg-lavender-50 {
	background-image: linear-gradient(lavender, transparent 50%);
}

.text-indigo {color: indigo;}

.inner-shadow { box-shadow: inset -1px 1px 3px 0px #bab0dd;}

.display-none {display: none !important;}
.display-block {display: block !important;}

.overflow-break-word {
	overflow-wrap: break-word;
}

.h3 {
    color: indigo;
    padding: 0 0.3em;
    margin:.2em;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
}

.h3 span {
	display: inline-block;
    vertical-align: middle;
    padding-left: 1em;
}
.h3 .logo {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
.title {    
    padding: .2em 0;
    margin: 0;
    color: white;
    border: 2px solid indigo;
    text-shadow: 1px 1px black;
    font-size: 1.2rem;
    justify-content: center;
    align-items: center;
    padding-top: 0.2rem;
}

p > span {vertical-align: middle}

.panecontrol {
	pointer-events:none;
	top: -0.2em;
}
.panecontrol * {
	pointer-events: auto;
}

.main {
	background-color: ghostwhite;
	background-image: url('../image/napkin.jpg');
	margin-top: -2rem;
	min-height: 3rem;
}

.slidedown, .slideright {
    text-align: center;
    background-color: lavender;
    border: none;
    font-size: .8rem;
}

.slideright {
	min-width: 20em;
	max-width: 20%;
}

.slideright .tabs p {
	margin: 0;
    padding: 0.2em 0.3em 0;
    color: indigo;
    text-shadow: 1px 0 1px white;
    font-weight: bold;
    line-height: .9em;
}

.slideright .tabs {
    background-image: linear-gradient(to bottom, #d6d0ee,#d6d0ee00 7%);
}

.arrow {
	font-size: 1.4rem;
	margin: 0;
	color: indigo;
	font-weight: bold;
	padding: .2em;	
	padding-top: 0;
	background: white;
	border: 5px solid lavender;
	border-right: none;
	pointer-events: auto;
}

.arrow:hover {
	cursor: pointer;
	color: Plum;
} 
	
.arrow.down {
	border-top-left-radius: .5em; 
	border-bottom: none;
}

.arrow.down:not(.flat), .arrow.right:not(.flat) {
	position: absolute;
	z-index:3;
	right:0;
}
.arrow.down:not(.flat){
	bottom:0;
}

.arrow.right {
	position: absolute;
	right:0;
	border-bottom-left-radius: .5em; 
	border-top: none;
}

.arrow.flat {
	background: transparent;
    text-shadow: -1px -1px 0 lavender, -1px 1px 0 lavender;
    border: none;
}

.arrow.right.flat {
    margin-right: -0.2em;
}

.tag {
    border: 2px outset #ccc;
    background-color: ghostwhite;
    border-top-left-radius: 0.5rem;
    text-align: center;
    line-height: 1.2em;
    font-weight: bold;
}

.tag.vertical {
    border-right: none;
    border-bottom-left-radius: 0.5rem;
    margin: 0.5em 0 0 0.3em;    
    padding: 0.3em 0.2em 0.1em;
}

.tag.horizontal {
    border-bottom: none;    
    border-top-right-radius: 0.5rem;
    margin: .3em 0.3em 0;
    padding: .4em .5em;
}

.tag:not(.current) {
    background-color: #a0a0a0;
    opacity: .8;
    color: black;
    text-shadow: 0px 0px 3px white;
    border-color: lavender;
}

.tag.current {
    background-color: lavender;
    color: indigo;
    text-shadow: 1px 0 0 white;
}

.tag.current.horizontal {
	background-image: linear-gradient(white, #d6d0ee 70%);
}

.tag.current.vertical {
	background-image: linear-gradient(to right, white, lavender 70%);
}

.tag .key {	font-size: 1.3em;}


.tabs {
	padding: .5rem;
	padding-top: 0;
}


.tabs div > span:not(.custom-icon):not(.delimiter) {  padding: 0 1em 0 0; }

.tabs .underline:hover {
	color: MediumOrchid;
	cursor: pointer;
}

.tabs input[type=radio] + label {padding: 0 0.5em 0 0.2em}

.txtarea {
	font-family: monospace;
	margin: 0;
	margin-bottom: 0.5em;
    border: 1px solid lavender;
    resize: none;
    background-color: #ffffff99;
    text-align: left;
    font-size: .9em;
    white-space: pre-line;
    line-height: 1.1em;
    padding: 0.2em;
    overflow: auto;
}

.keyword {
	padding: 0 !important;
	color:#3366cc; 
}

.brace {
	padding: 0 !important;
	color: blue;
	font-weight: bold;
	font-size: 1.05em;
}
.comment {
	padding: 0 !important;
	color: green;
}

.delimiter {
    margin: 0 1em 0 .5em;
    border-right: 1px solid #999;
    height: 1.2em;
}

.catalog {
	font-size: 1.1rem;
    text-align: center;
}

.catalog input {
    margin: 0 0.5em;
    padding: 0;
    border: none;
    color: black;
    text-align: center;
    border-bottom: 2px solid transparent;
}

.catalog input:focus {
    border-bottom-color:  Indigo;
}

.catalog > span {
	padding: 0;
    border: 5px solid lavender;
    border-top: none;
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color:lavender;
    display: inline-block;
}

.taskbox { 
	height: 1.3em;  
	margin: 0 .5em;
}

.button {
    background-color: rgb(255,255,255, .3);
    border-radius: 0.5rem;
    margin-right: 0.2em;	
    border: 2px outset #ccc;
    white-space: nowrap;	
    padding: 0 0.1em 0.2em 0.4em; 
    color: white;  
}

.button.current {border: 2px solid orchid;}

.button.gray {
	background-color: #808080cc;
}

.button .help {
	padding: 0 0.4em 0 0.2em;
    font-weight: bold;
}

.image, .vector, .layout, .groupbox, .table {
	display: inline-block;
	/*vertical-align: middle;*/
	margin: 0;
	padding:0;
}

.button:hover {
	cursor: pointer;
	border: 2px solid orchid;
	opacity: .7;
}

.layout.horizontal {
	margin: 0 0.2em 0 -0.2em;
}

.custom-icon:before, .custom-icon:after {
	vertical-align: middle !important;	
}	

.custom-icon.image:before, .custom-icon.custom-icon.vector:before, .custom-icon.layout:before, .custom-icon.table:before,.custom-icon.new:before,.custom-icon.recycle:before  {
	margin: 0;
    padding-right: 0.1em;
	font-size: 1.8rem;
}
 
.custom-icon.layout:before, .custom-icon.groupbox:before, .custom-icon.table:before, .custom-icon.refresh:before, .custom-icon.image:before  {
	margin: 0 .2em 0 .4em;	
}
 
.custom-icon.clear:before, .custom-icon.refresh:before, .custom-icon.sample:before {
    font-size: 1.3em;
}
 
.custom-icon.groupbox:before {
    font-size: 1.4rem;
    margin-bottom: .3rem;
}
 
.custom-icon.table:before  {margin: 0 .2rem;}

.error {
	background-color: MistyRose !important;
	color: #cc0000 !important;	
	font-size: 1rem;
}
:focus-visible {
    outline: none;
}

.overlaygradient:before {
    content: "";
    position: absolute;
    bottom: 0;
    /* padding-bottom: 2em; */
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(to top, white, rgb(255,255,255, 0) 40%);
}

.options {
    display: inline-block;
    width: 0.7rem;
}
.options:hover {
	color: Plum;
}

.options:after {
    display: inline-block; 
    content: " ... ";
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-left: 0.2em;
    font-size: 1.7em;
    vertical-align: middle;
    pointer-events:none;
}

.dropdown-content {
    position: absolute;
    top: .2rem;
    min-width: 7.6rem;
    display: block;
    background-color: white;
    font-weight: normal;
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
    cursor: default;
    text-shadow: none;
    color: indigo;
    font-size: .9rem;
    margin-left: 0.2rem;
    text-align: left;
}

.dropdown-content:not(.help) {left:0}
.dropdown-content.help {right:0}

.clipboard-transfer {
	border: 1px solid plum !important;
	border-radius: .5em;
	z-index: 10;
}

/* Dialog custom style*/
.no-close.ui-dialog {
	background-color: lavender;
	padding:0;
}
.no-close.ui-dialog .ui-dialog-titlebar-close {
	display: none;
}
.no-close.ui-dialog .ui-widget-header {
	color: white;
}

.no-close.ui-dialog .ui-dialog-buttonpane {
	background-color: #ffffff80;
}

.no-close.ui-dialog .ui-dialog-content p {
	margin: 1em 1em 0.2em 1em;
	color: indigo;
}

.no-close.ui-dialog .ui-dialog-content input {
	font-size: .9em;
	border: none;
	border-bottom: 2px solid #999;
	background-color: white;
    width: 23em;
    padding: .5em;
    margin: .2em;
    margin-top: .5em;
    overflow: auto;
}
.no-close.ui-dialog .ui-dialog-content input:focus {border-bottom-color: indigo;}

.no-close.ui-dialog .ui-dialog-content span {
	font-family: monospace;
	color: indigo;
}
.no-close.ui-dialog button {
    color: indigo;
    border-color: #bbb0dd;
    background-color: lavender;
}
::placeholder {color:#808080;}

.mainside textarea.goTXarea {
    resize: none;
    outline: none;
    min-width: 6em !important;
    min-height: 5em !important;
    border: 1px solid #ccc !important;
    text-align: left !important;
    color: black;
}