body{
       font-family: 'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;
       xxfont-family: 'Times new Roman',sans-serif;
        
        xxfont: normal 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
        
       margin:0;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Bold"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format("truetype");
    font-weight: 600;
}

table{
        border-collapse:collapse;
}

 
.cli_list_tab
{
  background: #ccccff;
}

.cli_list_head
{
 font: normal 90% "Arial";
}

.cli_list_data
{
 font: normal 70% "Arial";
}
        
.button_bar
{
      border: 1px solid #efefff;
}

table.button_bar
{
border: 1px solid #efefff;
}

td.button_bar
{
border: none;
font-size: 12px;
}

.hidden
{
 display:none !important;
}

th.docheadsmall
{
 font-size: 14px;
}


table.trans_list
{
border: 1px solid #444444;
}

td.trans_list
{
border: 1px solid #444444;
font-size: 12px;
}

th.trans_list
{
border: 1px solid #444444;
font-size: 14px;
}



table.search_bar
{
border: 1px solid #efefff;
}

td.search_bar
{
border: 1px solid #efefff;
font-size: 10px;
}

th.search_bar
{
border: 1px solid #efefff;
font-size: 12px;
}



table.trans_print
{
border: 1px solid #444444;
}

td.trans_print
{
border: 1px solid #444444;
font-size: 12px;
}

th.trans_print
{
border: 1px solid #444444;
font-size: 14px;
}


input.inv_form
{
 font-size: 10px;
}

.st_test
{
  font-size: 12px;
 }


.st_max
{
  font-size: 12px;
}

.st_zad
{
  font-size: 10px;
  font-weight: bold;
}

.st_kat
{
  font-size: 12px;
}

.st_testh
{
  font-size: 12px;
  font-weight: 900;
 }


.st_maxh
{
  font-size: 12px;
  font-weight: 900;
}

.st_zadh
{
  font-size: 10px;
  font-weight: 900;
}

.st_kath
{
  font-size: 12px;
  font-weight: 900;
}


.noborder, .noborder td, noborder th
{
   border: none !important;
}

.main_frame
{
    position: fixed;
    width: 640;
    height: 480;
    
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    padding: 10;
    border: solid 1px #ffffff;
    border-radius: 10px;
}
 
.welcome
{
   width: 100%;
}

.welcome th
{
   font-size:24px;
}


.question
{
  width:100%;
}
.question th
{
   font-size:20px;
}

.button
{
   padding: 8 15 8 15;
   
   background-color: #5555ff;
  border: solid 1px #ffffff;
   color: #ffffff;
   cursor: pointer;
   font-size: 1.2em;
   
}

.button:hover
{
 border: solid 1px #222255; 
  background-color: #3333ff;
}

/*  NEW  */

.content-root
{
    height: 100%;
    min-width: 320px;
}

.page-container 
{
    height: 100%;
}

#content-root, body, html {
    overflow-y: hidden;
}

.top-view-container {
    position: fixed;
    background: #eee;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    float: left;
    overflow: hidden;
}

.top-view-content {
    width: 100%;
    height: calc(100% - 20px);
    __margin-top: 20px;
    overflow-y: auto;
}

.page-background 
{
    background-color: #E8F2F4;
}

#form-container, .form-content, .form-content-container {
    height: 100%;
    width: 100%;
}

.form-content, .form-content-container {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}


.main-form 
{
    width: 100%;
    outline: transparent solid 1px;
}

.main-form-page-padding {
    padding-left: calc(50% - 425px);
}

.main-form-theme-shadow 
{
    box-shadow: 0 0 11px rgba(0,0,0,.12);
}

.main-form-content {
    padding-top: 50px;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


.main-form-form-title
{
    padding: 10px;
    color: #ffffff;
}

.main-form-title-container 
{
    position: relative;
    white-space: pre-wrap;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
.main-form-background 
{
    background-color: #008272;
}


.main-form-body {
    padding: 20px 30px 70px;
    background: #FFF;
    opacity: .97;
}

.main-form-page-padding
{
    max-width: 850px;
}



.login_frame
{
    position: fixed;
    min-width: 320;
    min-height: 200;
    width:30%;
    
    left: 50%;
    top: 20px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
     

    border: solid 2px #aaaaaa;
    background-color: #ffffff;
}

.login_title
{
    width: 100%;
    background-color: #008272;
    padding: 10 0 10 0;
    color: #ffffff;     
    text-align: center;
    font-weight: bold;
    
}

.login_error
{
    color: #ff0000;
    font-size: 12px;
        
}

.login_method_btn
{
    height: 40px; 
    border: 1px solid #000000;
    margin: 5 0 5 0;
    padding: 2;
    cursor: pointer;
    
}

.login_method_btn:hover
{
   border: 1px solid #0000ff;
}

.login_method_icon
{
  height: 35px;
  vertical-align:middle;
}


/* TOP BAR */
.top_bar_containter
{
  width:100%;
  height: 30px;
  text-align:center;
}

.system_logo_containter
{
  height:30px; 
  float:left; 
  display: inline-block;
}

.system_logo
{
  height:30px; 
}


.user_initial
{
   font-size: 14px;
   font-weight: 500;
   background-color: #008272;
   color: #ffffff;
   border: solid 1px #ffffff;
   border-radius: 50%;
   width: 24px;
   text-align: center;
   line-height: 24px;
   display: inline-block;
   padding: 1px;  
   
}

.user_initial_containter
{
  height:30px; 
  float:right; 
  display: inline-block;

}



.system_info_containter
{
  height:30px; 
  display: inline-block;
  
}

.system_info
{
  height: 30px;
  display: inline-block;
  padding: 5 10 0 10;
  border-left: 1px solid #eeeeee;
  line-height: 100%;
  vertical-align: middle;
}


.memo_containter
{
   width:100%;
   border: 1px solid #000000;
   text-align:center;
}

.memo_item
{
   width: 100px;
   height: 100px;
   background-color: #aaaaaa;
   color: #000000;
   font-size: 20px;
   margin: 10px;
   display: inline-block;
   vertical-align: middle;
   line-height:100px;
   cursor:pointer;
   border: 1px solid #000000;
}

.memo_item:hover
{
   border: 1px solid #ffffff;
}

.memo_item_selected
{
   background-color: #aaaaff;
}

.memo_item_failed
{
    background-color: #ffaaaa;
}

.memo_item_completed
{
    background-color: #aaffaa;
}

.memo_result_container
{
  width:100%;
  font-size:1.5em;
}

.memo_result_container
{
   color: #005500;
}

.memo_answers_container
{
  width:100%;
  font-size:1.5em;
  border-bottom: 1px solid #000000;
}

.memo_answer_item
{
   min-width: 100px;
   height: 25px;
   background-color: #aaffaa;
   color: #000000;
   font-size: 25px;
   margin: 2 5 2 5;
   padding: 0 5 0 5;
   display: inline-block;
   vertical-align: middle;
   line-height:20px;
   border: 1px solid #000000;
   cursor: cell;
}



/*MATCH*/
.match_containter
{
   width:100%;
   border: 1px solid #000000;
   text-align:center;
}

.match_col_container
{
  display: inline-block;
  border: 1px dotted #dddddd;
  margin: 0 20 0 20;
}

.match_item
{
   min-width: 100px;
   height: 30px;
   background-color: #aaaaaa;
   color: #000000;
   font-size: 20px;
   margin: 10px;
   display: block;
   vertical-align: middle;
   line-height:30px;
   cursor:pointer;
   border: 1px solid #000000;
   
}

.match_item:hover
{
   border: 1px solid #ffffff;
}

.match_item_selected
{
   background-color: #aaaaff;
}

.match_item_failed
{
    background-color: #ffaaaa;
}

.match_item_completed
{
    background-color: #aaffaa;
}

.match_result_container
{
  width:100%;
  font-size:1.5em;
}

.match_result_container
{
   color: #005500;
}




.alert {
                      
                     -webkit-animation: ALERTBOX-BLINK 1s infinite;  /* Safari 4+ */
                     -moz-animation: ALERTBOX-BLINK 1s infinite;  /* Fx 5+ */
                     -o-animation: ALERTBOX-BLINK 1s infinite;  /* Opera 12+ */
                      animation: ALERTBOX-BLINK 1s infinite;  /* IE 10+, Fx 29+ */
                    }
          
                @-webkit-keyframes ALERTBOX-BLINK {
                      0%, 49% {
                        color: #000000;
                      }
                      50%, 100% {
                       color: #FF0000;
                      }
                    } 
                    
.ans_bad
{
     display: inline-block;
     background-color: #ff0000;
     min-width: 30px;
}

.ans_good
{
     display: inline-block;
     background-color: #00ff00;
     min-width: 30px;
}

.res_gans
{
   font-style: italic;
   background-color: #ffff00;
   
}

.res_score
{
   font-size: 14px;
   font-weight: 500;
   border: solid 1px #ff0000;
   border-radius: 50%;
   color: #ff0000;
   width: 16px;
   text-align: center;
   line-height: 16px;
   display: inline-block;
   padding: 1px; 
}


.progress_bar
{
  width: 100%
  border: 1px solid #000000;
  height: 15px;              
}

.progress        {
                      width:0%;
                      background-color: #000000;
                      color: #ffffff;
                      text-align:center;
                      height:15px;
                      }

.qicodivs
{
 display: inline-block; 
 height:40px; 
 vertical-align:top;
}

.info_initial
{
  font-size: 14px;
   font-weight: 500;
   background-color: #008272;
   color: #ffffff;
   border: solid 1px #ffffff;
   border-radius: 50%;
   width: 24px;
   text-align: center;
   line-height: 24px;
   display: inline-block;
   padding: 1px;  
   
}

@media only screen and (max-width: 400px) 
{       /* SMALL PHONES  */
    
}

@media only screen and (min-width: 800px) 
{       /* DESKTOP  */

  .login_frame
  {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    
  }  

}