@import url(//fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap);
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)

*/

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

.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;}
.w120             {width: 120px;}
.w150             {width: 146px;}
.w180             {width: 180px;}
.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;}

.hm300            {min-height: 300px;}

.m3               {margin: 3px;}
.m5               {margin: 5px;}
.m10              {margin: 10px;}
.m20              {margin: 20px;}

.p2               {padding: 2px;}
.p3               {padding: 3px;}
.p5               {padding: 5px;}

.lh13             {line-height: 1.3;}    
.lh1              {line-height: 1;}    

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

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

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

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

.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%);}
.bc_d_green       {background-color: hsl(120,80%,75%);}
.bc_red           {background-color: hsl(360,100%,90%);}
.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%);}



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


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

div.main {
    width: calc(70% + 90px);
    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.9;
  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);
}

.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);
}

.menu     {text-align: left;
           text-indent: 2px;
           width: 180px;}
.normal   {text-align: center;
           width: 90px;}
.smal     {text-align: center;
           width: 60px;}


.dropdown {
  position: relative;
  display: inline-block;
  cursor: none;
}
.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;
  font-size: 14px;
  min-width: 180px;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 2px 2px 3px hsla(240,100%,5%,.5);
}
.dropdown-content a {
  color: black;
  text-decoration: none;
  text-indent: 6px;
  display: block;
  border-radius: 4px;
  cursor: pointer;
}
.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 {
  border-collapse: collapse;
}

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