/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../gab/OpenSans-VariableFont_wdth,wght.ttf');
}

* { margin:0; padding:0; border:0; font-family: "Open Sans", "Trebuchet MS", Arial; }
html {}
body { line-height:1.5em; font-size:18px; color: #444; background: #f1f1f1; }
div:focus { outline: none; }
textarea:focus { outline: none; }

a {  -webkit-transition: color .3s; transition: color .3s; }
a, a:link, a:visited, a:active { color:#479d3a; text-decoration: underline; }
a:hover { color: #336f2a; }

input, select, textarea { padding: .5em .8em; margin: .5em 0; border: 1px solid #b4b4b4; border-radius: 3px; }

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; letter-spacing: -.06em; }
p { margin-bottom: .5em; }
ul { margin-left:1em; }

.gabNav { min-height: 4em; background-color:#479d3a; color:#f8f8f8; }
.gabContent { width: 1500px; margin: 0 auto; } /* box-shadow: 0px 0 20px 10px rgba(0,0,0,0.05); */
.gabBurgerBar { background-color: #fff; width: 24px; height: 4px; margin: 0 auto 4px auto; border-radius: 2px; }
.gabFlex { display: flex; flex-wrap: wrap; justify-content: space-around; }
.gabFlexBox { padding: .5em 1em; }
.gabBrightBox { border-radius:.75em;  background: #fafafa; padding: 0 1em; overflow: auto; margin: 0 -1em; }
.gabEditor {
   padding: .7em 2.5em 2.5em 1em;
   width:100%;
   min-height: 360px;
   overflow: hidden;
   background: #fff;
   float:left; 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border: 1px solid #b4b4b4;
   scrollbar-width: thin;
}
.gabInEditorPopup {
   position: absolute;
   top: auto;
   padding: 0.3em 0.8em;
   border-radius: .5em;
   bottom: 4em;
   left: calc(50% - 125px);
   width: 220px;
   color: #fff;
   font-size: .85em;
   background: rgb(58, 120, 157);
}
.gabEditorBtn {
   position: absolute;
   top: 1em;
   right: 1em;
   color:#555;
   -webkit-transition: color .3s;
   transition: color .3s;
   user-select: none;
   cursor: pointer;
}
.gabEditorBtn:hover { color: #de7404; }
.gabBigIcon { text-align:center; font-size:3em; margin: .4em .2em .3em 0; }
.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;
}
.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 4px 2px rgba(0,0,0,0.03); }
.gabButton {
   border-radius: .5em;
   padding: .5em .8em;
   margin: 1em 0;
   cursor: pointer;
   background: #de7404;
   -webkit-transition: background .3s;
   transition: background .3s;
   user-select: none;
   color: #fff;
   float: left;
   font-weight: bold;
   font-size:1em;
}
.gabButton:hover { background: #ff8300; }
.gabOptionBox { margin: 1em 0 1em calc( 50% - 385px ); overflow: hidden auto; }
.gabBigSelect { padding: .8em; margin: .1em; border-radius: .5em; width: 170px; }
.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: #fff;
  text-align: center;
  opacity: 100%;
  user-select: none;
  z-index: 99999;
  background: #333;
  padding: .5em;
  border-radius: .5em;
}
.gabClickFeedbackShowtime {
  -webkit-transition: opacity 1.5s; transition: opacity 1.5s;
   opacity: 0%;
}
.gabContentPopup {
  position: fixed;
  top: 5em;
  right: 274px;
  right: calc( 50% - 150px - 1.2em );
  width: 300px;
  height: auto;
  padding: 1em 1.2em;
   background: url(./gfx/bg_pattern_wortliga.jpg);
  color: #fff;
  border-radius: 3px;
  z-index: 5;
  font-size: .9em;
}
/* has to be after gabContentPopup in classList */
.gabEndScreen { 
   right: calc( 50% - 500px - 1.2em );
   width: 1000px; top:5em;
}

.gabHighlightColor { color: #479d3a; }
.gabMouseOverInfo b { color: #fea; }

.gabHalfBox { float:left; width:50%; }
.gabThirdBox { width:calc(33.33% - 2em); float:left; margin: 0 1em 1em 1em; }
.gabTwoThirdBox { width:calc(66.66% - 2em); float:left; margin: 0 1em 1em 1em; }

.gabNarrowOnly { display: none !important; }
.gabWideOnly { display: block !important; }
.gabToolCaption { font-weight:bold; float:left; margin: .5em .5em 0 0; }

@media( max-width:1560px )
{ 
	.gabContent { width: Calc(100% - 2em); }
}
@media( max-width:900px )
{ 
   .gabHalfBox { width:100%; }
	.gabThirdBox { width:calc( 100% - 2em ); }
   .gabTwoThirdBox { width:calc( 100% - 2em ); }
   .gabNarrowOnly { display: block !important; /*inset: auto 1.5em 1.5em auto; z-index:1;*/ }
   .gabWideOnly { display: none !important; }
   .gabOptionBox { margin-left: 0; }
   .gabToolCaption { width: 110px; }
}
@media( max-width:1000px )
{ 
   .gabEndScreen { width:calc( 100% - 2.4em ); right:0; top:0; height: 100%; overflow: auto; }
}
@media( max-height:600px )
{ 
   .gabLoginPopup { top: -3em; }
}

/* spinning wheel */
.gabLoader {
   border: 8px solid #e4e4e4;
  border-radius: 50%;
  border-top: 8px solid #479d3a;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s 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); }
}