/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('public/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('public/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('public/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('public/open-sans-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
    font: normal 14px/1.4 "Open Sans", sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-y: scroll;
    color: #000;
}
.ql-font-openSans    {font-family: 'Open Sans', sans-serif;}

html,
body {
    height: 100%;
    min-height: 100%;
}
body { margin: 0; }



/*  
    color-names english
            norm (button,select ...)
            gray
            green
            blue
            red
            yellow
            
    stärken l_   light
            m_   middle
            h_   heavy
            d_   dark

    was     bc_  background
            cl_  color (Text)
            a_   active (diferent colors at hover, focus, active or disabled)

*/

textarea {font: normal 14px/1.4 "Open+Sans", sans-serif}

.fos{font-family: "Open Sans", sans-serif;}

.fs10             {font-size: 10px;}
.fs24             {font-size: 24px;}
.fs18             {font-size: 18px;}

.ar               {text-align: right;}
.al               {text-align: left;}
.ac               {text-align: center;}

.fr               {float: right;}
.fl               {float: left;}
.cr               {clear: right;}
.cl               {clear: left;}

.bw               {border-style: solid; border-width: 2px; border-color: white;}

.w40              {width: 40px;}
.w60              {width: 60px;}
.w80              {width: 80px;}
.w100             {width: 100px;}
.w120             {width: 120px;}
.w100             {width: 100px;}
.w150             {width: 146px;}
.w180             {width: 180px;}
.w200             {width: 200px;}
.w220             {width: 220px;}
.w300             {width: 300px;}
.w320             {width: 320px;}
.w500             {width: 500px;}

.w_flex           {width: calc(70% + 90px);}


.h10              {height: 10px;}
.h24              {height: 24px;}
.h32              {height: 32px;}
.h48              {height: 48px;}
.h300             {height: 300px;}

.hm100            {min-height: 100px;}
.hm200            {min-height: 200px;}
.hm300            {min-height: 300px;}

.m1               {margin: 1px;}
.m2               {margin: 2px;}
.m3               {margin: 3px;}
.m5               {margin: 5px;}
.m10              {margin: 10px;}
.m20              {margin: 20px;}

.ml30              {margin-left: 30px;}
.ml200             {margin-left: 200px;}
.mr30              {margin-right: 30px;}
.mt60             {margin-top: 60px;}
.mt100            {margin-top: 100px;}

.p1               {padding: 1px;}
.p2               {padding: 2px;}
.p3               {padding: 3px;}
.p5               {padding: 5px;}
.p10              {padding: 10px;}

.lh1              {line-height: 1;}    
.lh13             {line-height: 1.3;}    
.lh15             {line-height: 1.5;}    
.lh17             {line-height: 1.7;}    
.lh19             {line-height: 1.9;}    

.zid              {z-index: -1;}
.ziu              {z-index: +1;}

.block            {display: block;}
.il               {display: inline-block;}
.flex             {display: flex;}
.top              {vertical-align: top;}

.vis              {visibility: visible;}
.hid              {visibility: hidden;}

.hidover          {white-space: nowrap; overflow: hidden; text-overflow: clip;}

.cp               {cursor: pointer;}

.bc_white         {background-color: white;}

.bc_lt            {background-color: hsl(240,100%,98%);}
.bc_norm          {background-color: hsl(240,100%,95%);}
.bc_d_norm        {background-color: hsl(240,100%,90%);}
.a_norm           {background-color: hsl(240,100%,95%);}
.a_norm:hover,
.a_norm:focus     {background-color: hsl(240,100%,90%); cursor: pointer;}
.a_norm:active    {background-color: hsl(240,100%,50%); color: white; cursor: pointer;}
.a_norm:disabled  {color: hsl(240,30%,80%); cursor: not-allowed;}

.bc_blue          {background-color: hsl(240,100%,90%);}
.a_blue           {background-color: hsl(240,100%,90%);}
.a_blue:hover,
.a_blue:focus     {background-color: hsl(240,100%,80%); cursor: pointer;}
.a_blue:active    {background-color: hsl(240,100%,40%); color: white; cursor: pointer;}
.a_blue:disabled  {color: hsl(240,30%,70%); cursor: not-allowed;}

.bc_yel           {background-color: hsl(50,100%,80%);}
.a_yel            {background-color: hsl(50,100%,80%);}
.a_yel:hover,
.a_yel:focus      {background-color: hsl(50,100%,60%); cursor: pointer;}
.a_yel:active     {background-color: hsl(50,100%,40%); color: white; cursor: pointer;}
.a_yel:disabled   {color: hsl(50,40%,30%); cursor: not-allowed;}

.bc_green         {background-color: hsl(120,100%,90%);}
.a_green          {background-color: hsl(120,100%,90%);}
.a_green:hover,
.a_green:focus    {background-color: hsl(120,100%,80%); cursor: pointer;}
.a_green:active   {background-color: hsl(120,100%,40%); color: white; cursor: pointer;}
.a_green:disabled {color: hsl(120,30%,70%); cursor: not-allowed;}
.bc_d_green       {background-color: hsl(120,80%,75%);}
.bc_red           {background-color: hsl(360,100%,90%);}
.bc_d_red         {background-color: hsl(360,100%,70%);}
.bc_orange        {background-color: hsl(25,100%,70%);}
.bc_white         {background-color: white;}

.cl_h_red         {color: hsl(360,100%,45%);}

c.bg_red            {background: hsl(360,100%,90%);}
c.fg_red            {color: hsl(360,100%,45%);}
c.bg_green          {background: hsl(120,100%,90%);}
c.fg_green          {color: hsl(120,100%,30%);}

.br5               {border-radius: 5px;}

input:disabled+label {
  color: #bbb;
}

div.head {
    height: 24px;
    background-color: hsl(240,100%,95%);
    font-size: 16px;
}

div.main {
    height: 24px;
    font-size: 14px;
}

div.column {
    width: 300px;
    line-height: 24px;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
}

div.smal {
    width: calc(70% + 90px);
    font-size: 9px;
}

input[type=radio]   {transform:scale(1.4);}
input[type=checkbox]{transform:scale(1.4);}

.txbox{
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  padding: 2px;
  border: 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 3px 1px hsla(240,100%,5%,.5);
}

.tx180 {
  height: 26px;
  width: 176px;
  font-size: 14px;
  text-indent: 3px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  display: inline-block;
  border: 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 3px 1px hsla(240,100%,5%,.5);
}

.tx280 {
  height: 26px;
  width: 275px;
  font-size: 14px;
  text-indent: 5px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  display: inline-block;
  border: 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 3px 1px hsla(240,100%,5%,.5);
}

.tx360 {
  height: 26px;
  width: 356px;
  font-size: 14px;
  text-indent: 5px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  display: inline-block;
  border: 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 3px 1px hsla(240,100%,5%,.5);
}

.but {
  height: 28px;
  font-size: 14px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  display: inline-block;
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}
.drop {
  height: 28px;
  font-size: 14px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  right: 99px;
  top: 16px;
  display: block;
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}
.i_but {
  height: 28px;
  width: 28px;
  font-size: 14px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  bottom: 20px;
  left: -14px;
  display: block;
  border: none;
  border-radius: 14px;
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}
.p_but {
  height: 28px;
  width: 28px;
  font-size: 14px;
  line-height: 1.9;
  text-decoration: none;
  position: relative;
  bottom: -35px;
  left: -14px;
  display: block;
  border: none;
  border-radius: 14px;
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}

.menu     {text-align: left;
           text-indent: 5px;
           width: 180px;}
.menu280  {text-align: left;
           text-indent: 5px;
           width: 279px;}
.menu320  {text-align: left;
           text-indent: 5px;
           width: 320px;}
.normal   {text-align: center;
           width: 90px;}
.smal     {text-align: center;
           width: 60px;}

.ti0      {text-indent: 0px;}

option    {text-indent: 0px;}

.dropdown {
  cursor: none;
}
//  position: relative;
//  display: inline-block;

.drop-but {
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.msg {
  position: fixed; 
  top: 30%;
  left: calc((70% - 200px)/2);
  width: calc(30% + 170px);
  padding: 16px;
  font-size: 14px;
  background-color: white;
  border-radius: 4px;
  border: 2px solid hsl(240,100%,40%);
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
  display: none;
}


#msg_close {
  margin-left: 15px;
  color: hsl(240,100%,40%);
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.toolbar {
  padding: 5px;
  font-size: 14px;
  text-align: center;
  vertical-align: top;
  background-color: white;
  border-radius: 4px;
  border: 2px solid hsl(240,100%,40%);
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}

.table {
  width: calc(70% + 90px);
  line-height: 2.5;
}
.tab_flex {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 50%;
  min-width: 300px;
}
.tab {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 300px;
}
.tab1 {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 300px;
}
.tab2 { 
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 300px;
}

.d_hr {border-bottom: 1px solid hsl(240,30%,70%);}

hr {
  height: 1px;
  border: none;
  background-color: hsl(240,30%,70%);
}

tr.line { 
  border-bottom: 1px solid hsl(240,30%,70%);
}
td {
  padding: 3px;
}
table, th, td {
  margin: 3px;
}

p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}