* {
   margin: 0;
   padding: 0;
   min-width: 0;
   box-sizing: border-box;
   //font-family: 'Open Sans', sans-serif;
   font-family: 'Roboto', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
   height: 100vh;
   background-color: #FFFFFF;
   //background-image: url('images/bg_img5.jpg');
   background-size: cover;
   background-position: center;
}
body.dark {
   background-color: #000000;
}

.mainPage
{
   height: calc(100vh - 32pt);
   overflow-y: scroll;
   //color: #3b3e40;
   color: #2F3031;
}

.mainPage.dark {
   color: #BBBBBB;
}

.mainPageCardPicture {
   display:inline-block;
   background-color: rgba(150,150,150,0.2);
   border:1px solid #CCCCCC;
   border-radius: 3pt;
   padding: 0pt;
   margin:2pt;
   text-align: center;
   font-size: 0.7rem;
   font-weight: bold;
}
.mainPageCardPicture IMG {
   padding-left: 5pt;
   padding-right: 5pt;
   height:94pt;
}

.mainPageCard {
   flex: 0 0 30%;
   max-width:30%;
   display:block;
   border:1px solid #CCCCCC;
   border-radius: 3pt;
   padding: 9pt;
   margin:5pt;
   text-align: center;
}

.mainPageCardBigPicture {
   flex: 0 0 40%;
   max-width:40%;
}

.mainPageCardBigText {
   padding:16pt;
   padding-top:5pt;
   padding-bottom:5pt;
   flex: 0 0 60%;
   max-width:60%;
}

@media(max-width:850px) {
   .mainPageCardBigPicture, .mainPageCardBigText, .mainPageCard {
      flex: none;
      max-width:100%;
      padding-left:5pt;
      padding-right:5pt;
      width:98%;
   }
}

.pageContentContainer
{
   margin: 0 auto;
   max-width:500pt;
   display: block;
   align-items: center;
   justify-content: center;
   text-align: justify;
   padding:8pt;
   padding-top:4pt;
   padding-left:2pt;
   padding-right:4pt;
   //overflow-y: scroll;
   //background: rgba(0,0,0, 0.16);
   //background-filter: blur(100px);
   //border-radius: 6pt;
  //zoom: 0.8; 
  //-moz-transform: scale(0.8); 
  //-moz-transform-origin: 0 0;
}

.pageContent {
   margin: 0 auto;
   max-width:500pt;
   display: block;
   align-items: center;
   justify-content: center;
   text-align: justify;
   //overflow-y: scroll;
   padding:10pt;
   padding-top:5pt;
   padding-bottom:0pt;
   line-height:140%;
}

.pageContentTop {
   padding: 0;
   margin: 0;
   padding-left:10pt;
   padding-bottom:12pt;
   overflow:hidden;
}

.pageContentTop a {
   color: #2F3031;
}

.pageContentTop a.dark {
   color: #eeeeee;
}


.pageContent a {
   color: #2F3031;
}
.pageContent a.dark {
   color: #eeeeee;
   font-weight:bold;
}

p {
   padding-top:2pt;
   padding-bottom:8pt;
   line-height:140%;
}

input, textarea {
   color:#2F3031;
   background-color:rgba(240,240,240,0.4);
}

input.dark, textarea.dark {
   color:#eeeeee;
   //background-color:rgba(250,250,250,0.2);
}

.buttonSubmit {
   background-color: rgba(250,250,250,0.4);
   padding: 0.22rem 0.7rem;
   border: none;
   outline: none;
   border-radius: 10pt;
   text-decoration: none;
   font-size: 0.8rem;
   font-weight: bold;
   cursor: pointer;
   justify-content: center;
   text-align: center;
   transition: scale 0.2 ease;
}


.buttonSubmit.dark {
}

.buttonSubmit:hover {
   scale: 1.05;
   background-color: rgba(250,250,250,0.8);
}

.buttonSubmit:active {
   scale: 0.95;
}

.bullet {
  display: inline-block;
  background-color:rgba(50,50,50,0.2);
  border: 1px solid #AAAAAA;
  border-radius: 6pt;
  padding: 1pt;
  padding-left:5pt;
  padding-right:5pt;
  margin-right:7pt;
  margin-top:10pt;
  margin-bottom:2pt;
  font-weight:bold;
}
.bullet.dark {
  background-color:rgba(250,250,250,0.2);
}

.toolTipBox
{
   background-color:rgba(0,0,0,0.1);
   border: 1px solid #CCCCCC;
   border-radius:6pt;
   padding:7pt;
   margin-top:8pt;
   margin-bottom:8pt;
}

.toolTipBox.dark
{
   background-color:rgba(255,255,255,0.2);
   border: 1px solid #222222;
}

hr {
   margin-top:10pt;
   margin-bottom:15pt;
}

hr.dark {
   color:#555555;
}


.pictureContainer
{
   vertical-align:top;
   display:inline-block;
   margin:0pt;
   padding:0pt;
   padding-top:5pt; padding-bottom:5pt;
}

.pictureFrameSimple
{
   margin:0pt; padding:0pt; box-shadow: 0pt 0pt 3pt #444444;
   border-radius:3pt;
}

.popupImgContainer {
   zIndex:2001; z-index:2001; cursor:zoom-out; justify-content: center;
   background-color: #EEEEEE;
}

.popupImgContainer.dark {
   zIndex:2001; z-index:2001; cursor:zoom-out; justify-content: center;
   background-color:#222222;
}

.pictureLegend {
   padding-top:-2pt; padding-left:10pt; border-bottom:1px solid #222222; margin-bottom:7pt
}

.pictureLegend.dark {
   padding-top:-2pt; padding-left:10pt; border-bottom:1px solid #DDDDDD; margin-bottom:7pt
}


TABLE.tableComp TD
{
  padding: 5pt;
}

IMG.tableComp, TABLE.tableComp IMG
{
  display:inline;
  height:12pt;
  vertical-align:middle;
  padding-right:3pt;
}

::-webkit-scrollbar {
  width: 8pt;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(50,50,50,0.3); 
  border-radius: 4pt;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(50,50,50, 0.5); 
}


/* Track */
::-webkit-scrollbar-track {
  opacity:0.1;
  box-shadow: inset 0 0 4px #DDDDDD; 
  border-radius: 4pt;
}
 
::-webkit-scrollbar-track:hover {
  opacity:0.7;
  box-shadow: inset 0 0 4px #ffffff; 
  border-radius: 4pt;
}

.pageContent.dark::-webkit-scrollbar-track {
  opacity:0.1;
  box-shadow: inset 0 0 4px grey;
  border-radius: 4pt;
}

.pageContent.dark::-webkit-scrollbar-track:hover {
  opacity:0.4;
  box-shadow: inset 0 0 4px #444444;
  border-radius: 4pt;
}