html *, html {font-family: Tahoma,Verdana,Segoe,sans-serif;}
html {width:100%;}
div.wrapper {width:1300px; width:auto; min-width:500px; max-width:1300px;  margin:auto;  height:auto;  }
div.wrapper div  { margin:0 auto 0px auto ;   }
div.narrow {width:50%; margin:auto}

/*  form  */

form#formselect  {width:100%;  margin:0px auto 40px auto ; padding:0; border:0px solid brown; text-align:center }
form#formselect p  {margin:10px 50px ; }
form#formselect input[type=submit]
{width:300px; margin:0px auto ; font-size:17px; line-height:20px;  padding:10px 0;
text-align:center;cursor:pointer;  font-family: "Roboto Condensed", Tahoma, sans-serif;
background-color:#141677; color:#fff; border:3px outset #141677;}

form#formselect input[type=text] { text-align:center; width:30px; border:1px solid #1f64c1; font-size:23px; line-height:30px;height:30px; margin:5px auto;  }

form#formselect select {width:400px; margin:0px auto 0px auto; border:1px solid #1f64c1;font-size:17px;
line-height:20px; padding:5px}

fieldset {position:relative;border-color:#6f9ad6; border-style: solid; width:600px; margin:20px auto; padding:10px 10px
20px 10px;
height:auto; background-color:#d6e4f8}
fieldset legend  { text-align: left; background-color:#ffffff}

div.wrapper form div  {margin:0 auto; text-align:center;  }
div.wrapper form select {margin:auto}
div.wrapper form select,  select option  { width:400px; font-size:17px; line-height:20px; text-align:left;}


h1, h2, h3, h4   { text-align:center;  margin:0px auto; font-family: "Roboto Condensed", Tahoma, sans-serif; }
h1  { font-size:32px; line-height:40px; padding-top:30px; font-weight:400}
h2  { font-size:26px;height:30px; line-height:30px;margin:0px auto; padding:0px 0;}
h5  { margin:0px auto; padding:0px 0; font-size:17px; line-height:20px }
h4  { margin:20px auto; padding:20px 0; font-size:22px; line-height:30px }

h3 {width:70%;margin:auto; padding:20px  0; margin:20px auto ; font-size:23px; line-height:26px;
background-color:#0c582c; color:#fff}

div.notice {border:2px solid #fff; width:60%; font-size:20px; line-height:26px; margin:30px auto; text-align:center;}
p.performed {color:#0c582c; font-weight:800}



div.flexcontainer, #tehndata div.tehndata
{ border:0px solid brown ;  width:100%; display: flex;  flex-direction: row; height: auto; align-items: center;
flex-wrap: wrap; justify-content:space-between;  align-content: center;  margin:auto; }
 input#pin , input#pin:focus, input#pin:active, input#pin:hover {border:1px solid #1a87f6 ;outline: none; }

div.top  {width:85%; border:0px solid blue}
div.flexcontainer #auth {width:320px; border:0px solid green}
div.top #td1 {width:30%;border:0px solid brown }
div.top #td2 {width:40%;border:0px solid brown }
div.top #td3 {width:30%;border:0px solid brown }



/*  menu  */
#menu {width:85%; margin:10px auto 0 auto ; border:0px solid green}
#menu a {border:0px solid #1a87f6 ; display:block; text-align:center; background-color:#1b4092;
width:159px; margin:0 3px;
color:#ffffff; font-family: "Roboto Condensed", Tahoma, sans-serif;
 font-size:17px;line-height:26px; padding:5px 2px;  text-decoration:none;}

#tehndiv { width:85%; padding:0;  }
#tehndiv a { width:auto; padding:0; margin:0 }

#menu a:hover {background-color:#4587d5 }
#menu #tehn,   #menu #otl, #home, #tehndiv a {font-size:15px;line-height:20px; margin:0; padding:0;background-color:#ffffff;color:#1b4092; }
#home  {display:block; margin-left:50px}

#tehndiv { margin-top:10px }
#tehndiv a {text-decoration:none; border-bottom:1px solid #4587d5; margin:0 10px }

/*  auth  */
#auth {width:100%; margin:10px auto 0 auto ;background-color:#2a6507;   margin-right:0}
#auth  p, #auth a { color:#ffffff;margin:0; font-size:15px; line-height:17px; font-family: "Roboto Condensed", Tahoma,sans-serif;}
div.top table td { border:0px solid green}
#auth { border:0px solid brown ; width:100%; display: flex; flex-direction: row; height: auto; align-items: center;
flex-wrap: wrap; justify-content:space-between; align-content: start;  margin:auto; padding:10px 0;  }


.highcharts-figure, .highcharts-data-table table {    min-width: 360px;    max-width: 100%;    margin: 1em auto;}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 0px solid green;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {    font-weight: 600;    padding: 0.5em;}

.highcharts-data-table td,.highcharts-data-table th,.highcharts-data-table caption { padding: 0.5em;}

.highcharts-data-table thead tr,.highcharts-data-table tr:nth-child(even) {   background: #f8f8f8;}

.highcharts-data-table tr:hover {    background: #f1f7ff;}

h2, h2 a {margin:auto; text-align:center;  font-weight:800; font-size:26px;
line-height:30px; margin-top:0px;  margin-bottom:0px;
 font-family: "Roboto Condensed", Tahoma, sans-serif;
 border:0px solid green
 }



 #stationselect2,#stationselect3  {margin:auto; text-align:center; padding:0}
#stationselect3 {margin-top:30px; }


#container, #container-status, #container-osadki,  #container-diff,  #container-pl  { border:0px solid yellow;
width:100%; }

#retrieving { background-color:green; color:#ffffff;  font-weight:800; font-size:26px;
padding-top:10px;
padding-bottom:40px;
width:600px;
margin:50px auto; text-align:center;border:2px
solid green;  font-family: "Roboto Condensed", Tahoma, sans-serif; }
#retrieving *  {font-family: "Roboto Condensed", Tahoma, sans-serif; }
p.notice {margin:0; font-size:15px}
p.notice span {color:green}




table.line {margin:auto; width:70%}
table.line td {border:0px solid brown; padding:0 5px; vertical-align:middle}
table.line div.square {width:20px; height:20px; position:relative; top:5px}
table.line div, table.line  p {display:inline-block; border:0px solid yellow; font-size:12px;line-height:15px;}
table.line  p {margin-left:3px}

@media (orientation: landscape){
    #menu a#home {font-size:11px; line-height:15px}
}


/*  mobile  landscape   */


form#formselect select {width:150px; margin:0px auto 20px auto}
@media (pointer:none), (pointer:coarse) {

    #menu a {font-size:27px;line-height:26px; margin-top:10px;  }
    #menu a#prognoz, #menu a#vl  {border:2 solid red; width:45%}
    h2#title2 {margin:0px auto; }
}




div.timeset { width:500px;margin:0px auto; margin-top:10px;color:#ffffff; padding:15px 10px; cursor:pointer;
background-color:#1b4092;
text-decoration:underline;  font-family: "Roboto Condensed", Tahoma, sans-serif;font-size:20px; line-height:23px; }
#timeset { background-color:#98c5fb; margin:auto; width:350px; display:none}
#timeset caption {padding:20px 0 0 0}
#before { background-color:#6eaefb; }
#before p {  }



#formlogin * {text-align:center; font-family: "Roboto Condensed", Tahoma, sans-serif;}
#formlogin p {margin:0px auto; padding:0}
#formlogin {width:500px;margin:0px auto;}
#formlogin input { text-align:center; width:400px; border:1px solid #1f64c1; font-size:23px; line-height:30px;
height:30px; margin:5px auto; }
#formlogin div {margin-top:20px}
#formlogin input[type=submit]
{width:300px; margin:30px auto ; font-size:17px; line-height:40px; height:40px; padding:0px 0;
text-align:center;cursor:pointer;background-color:#141677; color:#fff; border:3px outset #141677;}

#tehndata { width:70%; margin:30px auto}
#tehndata div {margin:5px 0;  font-size:15px; line-height:23px; border-bottom:1px solid #27BBF5 }
#tehndata div.mestitle {  width:28%}
#tehndata div.mesvalue {  width:10%}
#tehndata div.mestime { width:55%}
#tehndata div.cor1 {background-color:#F7B386}

 h5 { margin:0px 0; text-align:left; font-family: "Roboto Condensed", Tahoma, sans-serif;}



#reperarea { border:0px outset #141677; width:500px; margin:auto; text-align:left }
#reperarea h5 {  margin:auto; text-align:center }

div.descr  { margin:0px auto; padding:20px 0;width:100% ;margin-top:50px; background-color:#6f9ad6; }
div.descr p  { margin:0px auto; width:80% ; color:#ffffff; border:0px solid green; font-weight:800}

#timeshownotice { text-align:center; width:700px; margin:auto; font-size:17px;line-height:29px;color:#fff;
 background-color:#f59314}

/*  portrait  */
@media (orientation: portrait) {

        #formlogin {width:90%;margin:0px auto; border:0px solid green;}
        #formlogin input { width:80%; border:1px solid green; height:140px}
        #formlogin * ,  #formlogin input {  font-size:90px;line-height:140px; }
        #formlogin p {  font-size:72px;line-height:80px; }

        #formlogin input[type=submit] {width:80%; margin:30px auto ; font-size:70px; line-height:140px; height:140px;}


       form#formselect {width:90%;margin:0px auto; border:0px solid green;}
        #formselect fieldset  {width:90%;margin:50px auto;  }
        #formselect fieldset legend {font-size:50px; line-height:55px; }


        #formselect div.timeset, #formselect div.timeset p
         { font-family: "Roboto Condensed", Tahoma, sans-serif;font-size:50px; line-height:63px; }
         #formselect div.timeset  { width:90%; padding:0px 0; margin-top:10px; text-align:center}
         #formselect div.timeset p { width:70%; margin:auto; text-align:center }

          #formselect div.timeset {width:90%; padding:50px 0; margin-top:20px;  border:0px solid green;}
          #formselect #timeset { background-color:#98c5fb; margin:auto; width:100%; display:none;  display: none; }
          #formselect #timeset td {  border:0px solid blue; padding:0}
          #formselect #timeset td input[type=text] {  color:#000000; font-size:60px; line-height:80px;height:auto; margin:5px auto;  }
          #formselect #timeset td, #formselect #timeset td input[type=text] {  width:60px;}
           #formselect #timeset td input[type=text] { padding:0 30px}

          #formselect #timeset td#year, #formselect #timeset td#year input {  width:150px;  border:0px solid green;}
          #formselect #timeset * { font-family: "Roboto Condensed", Tahoma, sans-serif; color:#ffffff; font-size:30px; line-height:55px;}
          #formselect #timeset caption { font-size:50px; line-height:55px;}
           #formselect #station  {margin-top:50px; margin-bottom:40px}

            #formselect #timeset {  margin:auto; width:100%;}
               h5 {font-size:50px; line-height:55px; ;  width:99%; padding:0px 0}

            /*  menu */
            #menu {width:90%; }

            div.wrapper  #menu a {width:49%;font-size:50px;line-height:55px;  margin:10px 0; padding:20px 0; border:2px solid #ffffff }
          a#home { display:block; font-size:40px; line-height:50px; width:99%; padding:0px 0; margin:20px 0}

            #tehndiv
            { border:0px solid brown ; width:100%; display: flex;flex-direction: row;height: auto; align-items: center;
            flex-wrap: wrap;  justify-content:space-between;  align-content: start;  margin:auto;}


            #tehndiv a {
            font-family: "Roboto Condensed", Tahoma, sans-serif; font-size:50px; line-height:65px;
            text-decoration:none; border-bottom:2px solid green;   }

         form#formselect #formsubmit {width:50%;font-size:60px;line-height:65px; margin:10px 0; margin:50px auto;
         text-align:center}


         p.notice {font-size:18px;line-height:22px; font-family: "Roboto Condensed", Tahoma, sans-serif;margin:20px 0;}
         h1 {font-size:70px; line-height:90px; ;  width:90%; margin:20px auto;  padding:20px 0;}
         h2  {font-size:50px; line-height:60px;    margin:30px auto;  padding:30px 0;}
         #stationselect2  {font-size:40px; line-height:50px; margin-top:20px}
         #formselect *  {font-size:30px; line-height:40px;}
         div.wrapper form select, div.wrapper form select option  { font-size:30px; line-height:40px; text-align:left;}
        form#formselect select {width:600px; margin:20px auto 70px auto; font-size:50px;
        line-height:60px; padding:10px}
        form#formselect input[type=text] {  font-size:50px; line-height:70px;height:70px; width:70px;
        margin:5px auto;  }
        form#formselect input[type=text]#year {width:270px; border:2px solid green}
        html p {font-size:40px; line-height:50px;}
        #retrieving {font-size:40px; line-height:50px;}
         #linkout { margin:90px auto ;}

        #linkout a {width:90%; margin:30px auto ; font-size:70px; line-height:90px; height:90px;text-align:center;cursor:pointer;background-color:#141677; color:#fff; padding:50px 50px; }
        #reperarea { width:90%; margin:auto; }

        div.flexcontainer   {width:95%; border:0px solid brown; }
        div.flexcontainer  table {width:100%;border:0px solid olive}
        div.flexcontainer  table tr td   {border:0px solid #f79c1a}
        div.top #td1 {width:100%;display: block}
        div.top #td2 {width:100%;display: block}
        div.top #td3 {width:100%;display: block}


   /*  top */
         div.top #auth, div.top #top { width:100%; display: block}
         div.top #top {margin:30px 0}
         #auth div  {  width:90% ; border:0px solid green}
         #auth p ,#auth a  {  font-size:40px;line-height:50px; }

         #retrieving, #retrieving * {  font-size:70px;line-height:80px; }
         #retrieving { padding:30px 30px 90px 30px}



         /*  tehn */
         #tehndata { width:90%; margin:30px auto}
         html #tehndata div.mestitle, #tehndata div.mesvalue, #tehndata div.mestime  { font-size:40px; line-height:40px; }

        #tehndata div.mestitle {  width:70%;}
        #tehndata div.mesvalue {  width:25%}
        #tehndata div.mestime { width:100%; margin-bottom:50px }

        #timeshownotice { font-size:40px; line-height:50px; padding:20px; width:90% }
        h3 { font-size:50px; line-height:55px; padding:0px; width:90% }
        div.narrow { width:90%; margin:30px auto}
        div.narrow div.flexvl * { font-size:40px; line-height:50px; padding:0px; }
         div.narrow h6 { font-size:60px; line-height:70px; padding:0px; }

}


 div.flexvl
{ border:0px solid brown ;
  width:100%; display: flex;  flex-direction: row;  height: auto;
   align-items: center;  flex-wrap: wrap;    align-content: start;  margin:auto;
 }

 div.flexvl div {width:46%; border:0px solid green ; padding:0; margin:5px 0}
 div.flexvl div h5  { margin-left:20px; background-color:#C3F7D3; padding:10px}
 div.flexvl div p  {  font-size:12px;line-height:14px;  padding:0; margin:0 }



 #prongresults {width:100%; margin:20px 0}
 #prongresults tr td {border:0px solid blue; background-color:#C3F7D3; padding:10px}