* { margin:0; padding:0; border:0; font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; }
html { height:100%; }
body { line-height:1.5em; font-size:18px; color: #333; background:#000; height:100%; overflow:hidden; }
div:focus { outline: none; }
textarea:focus { outline: none; }

a {  -webkit-transition: color .3s; transition: color .3s; }
a, a:link, a:visited, a:active { color:#ffd965; text-decoration: underline; }
a:hover { color: #ffefbc; }

input, select, textarea { padding: .5em .8em; margin: .5em 0; }

h1 { font-size: 1.6em;  }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }
h1, h2, h3, h4 { line-height: 1.5em; margin-bottom: .5em; color: #ffd965; }
.gabEditor h1, .gabEditor h2, .gabEditor h3, .gabEditor h4 { line-height: 1.2em; margin:1em 0; }
#textEditor h1, #textEditor h2, #textEditor h3, #textEditor h4 { color: #333; }
#textMarkings h1, #textMarkings h2, #textMarkings h3, #textMarkings h4 { color: #3330; }
p { margin-bottom: .5em; }
ul { margin-left:1em; }

.gabNav { height: 4em; background-color:#00607D; color:#f8f8f8; position: absolute; left: 0; right : 0; }
#gabBottomNav { bottom: 0; }
.gabToolCell { padding: .7em 1em; float: left; line-height: 1.2em; width: calc( 33% - 2em ); overflow: hidden; }
.gabContent { width: 800px; margin: 0 auto; height:100%; box-shadow: 0px 0 20px 10px rgba(0,0,0,0.05); }
.gabBurgerBar { background-color: #fff; width: 32px; height: 4px; margin: 0 auto 4px auto; border-radius: 2px; }
.gabFlex { display: flex; flex-wrap: nowrap; justify-content: space-evenly; }
.gabEditor { padding: .7em 1em; width:calc(100% - 2em); height:calc(100% - 3.9em); overflow: hidden auto; position: absolute; top: 2.5em; left: 0;}
#textEditor span { transition: opacity .3s; }
#aiResult { margin: 1em 0; line-height: 1.5em; background: white; border-radius: 3px; color: #333; padding: .7em 1em; max-height: 30em; overflow: hidden auto; }
.gabPopup { background:#444; color:#f8f8f8; padding: .7em 1.4em; border-radius: .5em; }
.gabLoginPopup { width: 300px; inset: 20% auto auto calc(50% - 176px); z-index: 9; position: absolute; border-radius: 0.5em; }
.gabCloseX {
   color:#fff8;
   font-size: 2em;
   cursor: pointer;
   position: absolute;
   inset: .2em .3em auto auto;
   user-select: none;
   -webkit-user-select: none;
}
.gabDontBreak {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: manual;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.gabShadow { box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.06); }
.gabButton {
  border-radius: 3px;
  border: 1px solid white;
  padding: .3em .6em;
  margin: 1em 0;
  cursor: pointer;
  background: #fff6;
  -webkit-transition: background .3s; transition: background .3s;
  user-select: none;
   -webkit-user-select: none;
  text-align:center;
}
.gabButton:hover { background: #fffa; }

.gabCtaButton { 
  border-radius: 3px;
  padding: .4em .8em;
  margin: .6em 0;
  cursor: pointer;
  user-select: none;
   -webkit-user-select: none;
  background:#ffd965;
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  -webkit-transition: background .3s; transition: background .3s;
}
.gabCtaButton:hover { background: #efdda4; }

.gabToolButton {
   width: 1.5em;
   float: left;
   padding: .5em;
   color: #888;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   text-align: center;
}
.gabMouseOverInfo {
   position:fixed;
   left:-1000px;
   top:-1000px;
   min-width:50px;
   max-width:200px;
   background-color:#444e;
   color:#f8f8f8;
   text-align:left;
   padding: .7em 1em;
   font-size:80%;
   border-radius: 3px;
   z-index:3;
}
.gabClickFeedback {
   position:fixed;
   left:-1000px;
   top:-1000px;
   color:#333;
   text-align: center;
   opacity: 100%;
   user-select: none;
   -webkit-user-select: none;
   z-index: 99999;
   background: white;
   padding: .5em;
   border-radius: 1em;
}
.gabClickFeedbackShowtime {
  -webkit-transition: opacity 1.5s; transition: opacity 1.5s;
   opacity: 0%;
}
.gabYellowBox { 
   background: #ffbf45;
  background: -moz-linear-gradient(40deg, #ffbf45 30%, #ffda95 100%);
  background: -webkit-linear-gradient(40deg, #ffbf45 30%, #ffda95 100%);
  background: linear-gradient(40deg, #ffbf45 30%, #ffda95 100%);
   padding: .7em .9em;
   border-radius: .5em;
   color: #444;
}
.gabYellowBox .gabGreenColor { color: #007d19; }
.gabToolCell .gabGreenColor { color: #82ff9b; }
.gabYellowBox .gabRedColor { color: #a32b2b; }
.gabToolCell .gabRedColor { color: #ff8282; }
.gabOnScreenBox { position: absolute; width: 250px; inset: auto 1.5em 1.5em auto; z-index:1; }
.gabOnScreenAiBox { position: absolute; inset: 0 1em auto 1em; z-index:2; }
.gabLeftSideBox { position: absolute; width: 250px; inset: 1.5em auto auto calc( 50% - 650px - 1.5em ); z-index:1; }
.gabRightSideBox { position: absolute; width: 250px; inset: 1.5em auto auto calc( 50% + 400px + 1.5em ); z-index:1; }
.gabHighlightColor { color: #ffd965; }
.gabMouseOverInfo b { color: #fea; }
.gabHalfBox { float:left; width:calc( 50% - 1em ); margin-right: 1em; }
.gabNarrowOnly { display: none !important; }
.gabBroadOnly { display: block !important; }

@media( max-width:1400px )
{ 
	/*.gabLeftSideBox { inset: auto 1.5em 1.5em auto; }
   .gabRightSideBox { inset: auto 1.5em 260px auto; }*/
	.gabLeftSideBox { display:none; }
   .gabRightSideBox { display:none; }
   .gabNarrowOnly { display: block !important; /*inset: auto 1.5em 1.5em auto; z-index:1;*/ }
   .gabBroadOnly { display: none !important; }
   .gabEditor { height: calc(100% - 9.5em); } /* SYNC WITH NEXT LINE */
   #gabBottomNav { height: 9.5em; } /* SYNC WITH BEFORE LINE */
   
   #premBtnEditor { bottom: 7em !important; }
   #werbTxt { padding-bottom: 11.6em !important; }
}
@media( max-width:800px )
{ 
	.gabContent { width:100%; }
   #werbPopup { display:none; }
}
@media( max-width:700px )
{ 
   .gabHalfBox { width:100%; }
   .gabHideOnMobile { display: none; }
}
@media( max-width:600px )
{ 
   #gabBottomNav { font-size:.7em; }
   .gabEditor { height: calc(100% - 6.6em); }
   
   #premBtnEditor { bottom: 4em !important; }
   #werbTxt { padding-bottom: 9.6em !important; font-size: .85em; }
}

@media( max-height:600px )
{
   .gabPopup { font-size: .85em; }
   .gabLoginPopup { top: -3em; }
   #werbTxt { display:none; }
   #premBtnEditor { display:none; }
}
@media( max-height:920px )
{ 
   #werbPopup { display:none; }
}


/* spinning wheel */
.gabLoader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #ffd965;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin: 1em 0 0 0;
  float:left;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}