body,table 
     {
        //margin:1;
        //font-family: Helvetica, arial, times;        
        font-size: 12px;
        font-family: 'Kufam', cursive, arial;
        //height: 100%;
        //font-size:12px;
        //margin:0px auto auto auto;
        //color:#000;
      }

textarea { border: 2px dotted;
           font-family: 'Kufam', cursive, arial;
         }
  
/* -- additional --- */
.button,button 
       {
          cursor: pointer;
  	      border-radius: 3px;
	      -moz-border-radius: 3px;
	      -webkit-border-radius: 3px;
          background-color: #c4ffdf;
          color: green;
          padding: 2px;
          border: groove;
          font-family: inherit;
        }
.button:hover { background-color: #4CAF50; /* Green */
                color: white; }
                
.button:active { background: #71bb3b; color: #fff;}

.buttonO {
	cursor: pointer;
	padding: 4px 10px 4px 10px;
	color: black;
	background-color: #ffa92d;
	border: 1px solid #4d7549;
	border-radius: 5px;
	font-size: inherit;
}
.buttonBlue {
	cursor: pointer;
	padding: 2px;
	color: white;
	background-color: #55aaff;
	border: 1px solid #3e8391;
	border-radius: 5px;
	font-size: inherit;
}

.buttonGreen {
	cursor: pointer;
	padding: 2px;
	color: blue;
	background-color: #c4ffd5;
	border: 1px solid #3e8391;
	border-radius: 5px;
	font-size: inherit;
}

.name { background-color: #E1E1E1; 
        text-align: right; 
        border-radius: 3px;
        font-size: inherit;   
        padding: 5px;
        font-weight: bold; 
      }
      
.name_hdr 
      { background-color: #3e8391; 
        text-align: right; 
        font-size: inherit;
        border-radius: 3px;
        color: #fff;
      }      

th { background-color: #bfd6ea; color: #686868; font-weight: bold; border-radius: 3px; margin-left: 1px; }

input { font-family: arial; padding: 2px; color: #5b5b5b; border: 1px solid #dcdcdc;
-moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px;}

.dotted { border-bottom: 1px dotted; }
.blue { background-color:#b5dcff; }

fieldset { border-radius: 6px }

.pgHdr { font-size: 15px; 
         font-weight: 700;
         color: #848484;
         text-shadow: 2px 2px 4px #9ec3ff; }

#mnuButton 
{
  //border-top-left-radius: 50px;
  //border-bottom-right-radius: 50px;
  color: white;
  background: #9ec3ff;
  margin-bottom: 1em;
  transition: all 2s;
  padding: 3px;
  border-radius: 5px;
}

#mnuButton:hover
{
  //border-top-left-radius: 50px;
  //border-bottom-right-radius: 50px;
  background: green;
  transition: .5s;
  border-radius: 5px;
}

select {padding: 3px;color: #5b5b5b;border: 1px solid #dcdcdc; -moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px;}
select:focus{-moz-box-shadow: 0px 0px 5px #dcdcdc;-webkit-box-shadow: 0px 0px 5px #dcdcdc; background:#feffdc;text-shadow: 1px 0px #fff;}

.select-wrapper {
	position: relative;	
}

.select-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	position: absolute;
  	top: 12px;
  	right: 20px;
  	color: #434B67;
  	pointer-events: none;
}

select::-ms-expand {
  display: none;
}

.fixed-div 
      { position: fixed;
        top: 1em;
        right: 1em; 
        border-radius: 5px; 
        color: blue;
        font-weight: bold;
      }   

.fixed-div2
      { position: fixed;
        top: 3em;
        right: 1em; 
        color: white;
      }
      
.msbtn    { width: 82px; height: 25px; background: #9ec3ff; color: #444444;
            -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
            font-size: 11px;
            font-family: arial; }

.msbtn2   { background: #c4ffdf; color: green; 
            font-weight: bold;
            -moz-border-radius: 20px;
            border-radius: 20px; 
            width: 82px; height: 25px;
            font-family: arial;
            font-size: 11px;
          }              

.counter {
              color: white; font-size: 10px;
              background: red;
              -webkit-border-radius: 80px;
              border-radius: 80px;
              position: absolute; top: -12px; left: 50px;
              z-index: 1;
              padding: 2px;
            }              

.header {
    background: #c2eaff; color: blue; text-align: right; width: 150px; height: 20px; float: right; border-top-left-radius: 30px;
        }
.header h4 { margin-top: 2px; margin-right: 5px; }   

.pnlIdle { background: #c4ffdf; color: green; border: 1px dotted; width: 55px; height: 20px; display: inline-block; padding: 3px;  transform: skew(-15deg); margin: 15px; box-shadow: 5px -2px teal; text-align: center; font-size: 11px }
.pnlIdle span { background: #c2eaff; color: blue; position: fixed; left: 15px; top: -8px; border-radius: 10px; width: 60px; font-weight: bold; padding: 1px; text-align: center; ; font-size: 11px  }
.pnlIdle h5 { margin-top: 10px; }
.h5 { display: inline-block; font-size: 14px; border: 5px dotted; border-radius: 10px; color: white; padding: 1px; width: 10px; text-align: center; margin-top: 8px  } 
#emotionList { border: none; background: silver; border-radius: 5px; width: auto; display:inline; /*margin: 1px;*/ padding: 3px; } 
.pnlActive { display: block }
.pnlInactive { display: none }

.pnlIdle span:nth-of-type(2) { border-radius: 10px; height: 15px; border-color: 1px solid; position: relative; left: 30px; top: 4px; background: white; padding: 2; display: inline }

 h3,h5,h6 { color: #5b5b5b; }
 #emotion { background-color: #99ceff; width: 150px; border: 1px dotted; padding: 7px; border-radius: 10px; }
 #emotion2 { background-color: #99ceff; border: 1px dotted; }
 .slider { padding: 5px; color: black; background: grey; font-size: 13px; font-weight: bold }
 #pattern td { border: 1px blue dotted; border-radius: 10px}
 .nxtBtn  { width: 82px; height: 32px; 
            /*background: #9ec3ff; */
            background: green;
            color: white;
            -moz-border-radius: 40px;
            -webkit-border-radius: 40px;
            border-radius: 40px; } 
  .nxtBtn2 { width: 82px; height: 32px; 
            /*background: #9ec3ff; */
            background: #5555ff;
            color: white;
            -moz-border-radius: 40px;
            -webkit-border-radius: 40px;
            border-radius: 40px; }  
            
.slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
    display: block;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}


#popupNoteId 
{
  font-family: 'arial';
  font-weight: bold;
  width: 250px;
  color: #29810e;
  max-height: 250; 
  overflow-y: scroll; 
  display: none; 
  position: fixed; left: 25px; top: 30px; 
  z-index: 0; 
  background: #d2ffce;
  padding: 2px;
  border: 3px dotted gold;
}

#emotionListId { max-width: 150px; overflow-wrap: normal } 

  .startBtn { background: orange;
              -moz-border-radius: 40px;
              -webkit-border-radius: 40px;
              border-radius: 40px;
              width: 90px;
              color: white;
              padding: 15px;              
              font-size: 12pt;
              font-family: Arial;
            }
  .frmHdr   { font-family: 'Tangerine', serif;
              font-size: 48px;
              text-shadow: 4px 4px 4px #aaa; }          
  .addrFrm  { width: 30px; text-align: right; display: table-cell; }  
  
  
  .panelActive { transition: 2s;
                 height: auto;
                 //left: 0;
                 display: 'block';
               }
  .panelHidden { transition: 3s;
                 height: 0px;
                 //left: 0;
                 display: hidden;
               }
            
    .divHdr {
              //opacity: 0;
              //line-height: 0px;
              background: silver; border-radius: 8px; height: 22px; text-align: left; font-size: 12px;
              color: white; margin-left: 1px; vertical-align: middle; padding: 4px; font-weight: bold;
              width: 110px;
           }  
           
    .divContent 
           {
              display: block;
              //transition-delay: 1s;
              //opacity: 1;
              //height: auto;
              //transition: display 1.5s ease-out 1s;
              animation-name: example;
              animation-duration: 2s;
              //animation-delay: 0.5s;
           }

   @keyframes example 
           {
             from {opacity: 0;}
             to {opacity: 1;}
           }

           
   .divContent-nml 
           {
             display: none;
             //height: 0;
             opacity: 0;
             //transition-delay: 1s;
           }   


span.tip {
    position: relative;
}

span.tip span {
    display: none;
    position: absolute;
    top: 25px;
    left: -20px;
    width: 125px;
    padding: 5px;
    z-index: 100;
    background: #000;
    color: #fff;
    -moz-border-radius: 5px; /* this works only in camino/firefox */
    -webkit-border-radius: 5px; /* this is just for Safari */
}
span.tip span:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
  
    left:40px;    
    top:-5px;
}

span:hover.tip {
    font-size: 99%; /* this is just for IE */
}

span:hover.tip span {
    display: block;
}

header {
  position: relative;
  height: 30px;
  background-image: linear-gradient(#ff9d2f, #ff6126);
}

svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10vw;
  /* set height to pixels if you want angle to change with screen width */
}

pre { white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */ }