/**
 * OFFICE
 * styly.css
 * Soubor s CSS styly
 *
 * @package zaklad
 *
 * @author Josef Šmíd <josef@skit.cz>
 * @copyright (c) 2007-2024 Josef Šmíd
 * @version 0.1.1
 */

/*
  základní zelená: #13b067
  základní modrá: #008bf6
  základní červená: #df4456

  světlá zelená: #c9edde
  světlá modrá: #9bd4fe
  světlá červená: #fce7ee

*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic&subset=latin,latin-ext);

* { outline: none; -moz-outline-style: none; margin: 0; padding: 0; }

html { margin: 0; padding: 0; }

body
{
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 0;
  font-family: Roboto,sans-serif;
}

p, li { font-size: 100%; line-height: 150%; font-weight: 400; }
p.napoveda, span.napoveda { font-size: 80%; margin: 0; padding: 0 5px 0 5px; font-style: italic; }

ul { margin-left: 20px; }

h1 { font-size: 180%; font-weight: 300; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.fleft { float: left; }
.fright { float: right; }

div.mezera { width: 100%; clear: both; }
div.clear:after
{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

button, input[type="button"], input[type="submit"] { transition: all 0.3s ease; background-position: center center; border: 2px solid #9bd4fe; color: #9bd4fe; font-weight: 400; background-color: transparent; padding: 3px 8px; border-radius: 4px; cursor: pointer; }
button:focus, button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:focus, input[type="submit"]:hover { border-color: #008bf6; color: #008bf6; }
button.loading, input[type="button"].loading, input[type="submit"].loading { border-color: #c0c0c0; color: transparent; background: transparent url( './../images/loading.gif' ) center center no-repeat; background-size: auto 80%; }

input[type="text"], select { transition: all 0.3s ease; padding: 3px 8px; border: 1px solid #c0c0c0; border-radius: 4px; }
select { box-sizing:content-box; }

label { clear: both; cursor: pointer; }
label:not(.streight):after { content:"\a"; white-space: pre; }

.flexi, .datepicker.flexi, .datetimepicker.flexi { width: calc( 96% - 2px ); }

input.in, textarea, select.in
{
  box-sizing: content-box;
  font-family: Roboto,sans-serif;
  font-size: 100%;
  border-radius: 5px;
  border: solid #c7c7c7 1px;
  margin: 0;
  padding: 8px;
}
/*select.in { padding-top: 3px; padding-bottom: 3px; }*/
input.in.flexi, select.in.flexi, textarea.in.flexi
{
  padding-left: 2%; padding-right: 2%;
}
select.in option
{
  border: none;
  padding: 7px 0 2px 5px;
}

input.in:focus, textarea:focus, select:focus { background: #f5f7fa; border-color: #000; }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: 0px 0px 4px rgb(0, 0, 0); outline: 0; }
input[type=checkbox]:checked, input[type=radio]:checked { box-shadow: 0px 0px 4px rgb(120, 172, 50); outline: 0; }


a { color: #23a0fb; }
a.focus, a:hover { color: #27b756; }

#hlavni
{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

#titulek { background-color: #fff; height: 50px; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; border-bottom: 1px solid #f0f0f0; }

#logo { float: left; width: 150px; font-size: 80%; }
#logo img { height: 30px; padding: 10px 10px 10px 20px; float: left; }
#logo p { float: left; width: 90px; padding-top: 10px; line-height: 120%; }

#uzivatel { float: right; text-align: right; padding: 7px 20px 0 0; }
#uzivatel p { line-height: 120%; }
#uzivatel span { font-size: 80%; }

#levy_sloupec
{

  background-color: #666;
  color: #fff;
  width: 150px;
  position: fixed;
  top: 50px;
  min-height: 100%;
}

#obsah
{
  width: calc( 100% - 270px );
  padding: 80px 60px 60px 210px;
}
#obsah.login { width: 100%; padding-left: 0px; padding-right: 0; }

#navigace { padding-bottom: 30px; }
.navigace_prava { margin: 0 auto; text-align: center; }
.navigace_prava h1 { margin: 0; }

#menu { padding-top: 30px; text-align: center; }
#menu ul { margin: 0; }
#menu li { padding: 10px 0;}
#menu a { color: #fff; }

.box { background-color: #fff; box-shadow: 2px 2px 8px 0 #c0c0c0; border-radius: 4px; padding: 30px; }
.chart {}
.chart_inside { width: calc( 100% - 60px ); }
.chart_half { width: calc( 50% - 15px ); }
.chart_half_inside { width: calc( 50% - 75px ); }

#report_filters { width: calc( 100% - 60px ); padding-top: 15px; padding-bottom: 10px; margin-bottom: 30px; font-size: 90%; }
  #report_filters div { display: inline-block; vertical-align: middle; margin: 0 10px; padding-bottom: 5px; }
  #report_filters input[type="text"], #report_filters select { width: 90px; }
  #report_filters input[type="text"].datepicker { width: 65px; }

#charts_top { width: calc( 100% - 60px ); margin-bottom: 30px; }
  #charts_top div { display: inline-block; vertical-align: middle; width: calc( 25% - 64px ); border-right: 1px solid #c0c0c0; text-align: center; padding: 0 30px; }
  #charts_top div:last-child { border-right: none; }
  #charts_top h2 { font-size: 100%; font-weight: 400; }
  #charts_top p { transition: all 0.2s ease; }
  #charts_top p.number { font-size: 180%; font-weight: 700; padding-top: 15px; padding-bottom: 15px; }
  #charts_top p.compare { display: inline-block; min-width: 40px; font-size: 80%; font-weight: 700; padding: 5px; border-radius: 15px; background-color: #9bd4fe; color: #008bf6; }
    #charts_top p.compare.plus { background-color: #c9edde; color: #13b067; }
    #charts_top p.compare.minus { background-color: #fce7ee; color: #df4456; }

#charts_top .loading, #charts_left .loading, #charts_right .loading { background: transparent url( './../images/loading.gif' ) center center no-repeat; }
#charts_top .loading p, #charts_left .loading p, #charts_right .loading p { color: transparent; background-color: transparent; }

#chart_sended_granularity, #charts_left, #charts_right { margin-bottom: 30px; }

#login { width: calc( 25% - 60px ); margin: 0 auto; }

#login_title { width: 100%; }
  #login_title img { height: 50px; padding: 10px; float: left; }
  #login_title p { float: left; width: 120px; padding-top: 10px; line-height: 160%; }

#login_form { padding: 20px 10px }
  #login_form label { display: block; width: 100%; font-weight: 300; }
  #login_form table { width: 100%; border-spacing: 0; }
  #login_form table td { padding-bottom: 10px; }
  #login_form input { width: calc( 100% - 22px ); padding: 10px; }
  #login_form input[type="text"], #login_form input[type="password"] { border: 1px solid #c0c0c0; border-radius: 4px; }
  #login_form input[type="submit"] { margin-top: 10px; width: 100%; font-weight: 400; font-size: 100%; }


#popup_menu { display: none; }
#div_cekejte { display: none; }
.navigace_leva { display: none; }


table.form
{
  border: none;
  margin: 5px auto 5px auto;
  width: 100%;
  color: #000;

}
  table.form th
  {
    padding: 5px;
  }

  table.form td { padding: 10px 0; }
  table.form td+td { padding-left: 20px; }

  table.form td.rozpis_sazba, table.form td.rozpis_zaklad, table.form td.rozpis_dph { padding-top: 0; padding-bottom: 0; }

  table.form p { padding-bottom: 5px; }

table.form td.width10pct { width: 10%; }
table.form td.width15pct { width: 15%; }
table.form td.width20pct { width: 20%; }
table.form td.width25pct { width: 25%; }
table.form td.width50pct { width: 50%; }
table.form td.width60pct { width: 60%; }
table.form td.lpad20px { padding-left: 20px; }
table.form td.vbottom { vertical-align: bottom; }


div.bootstrap-growl { }
div.bootstrap-growl p { padding: 0; }
div.bootstrap-growl a.close { float: right; text-decoration: none; color: #909090; display: block; width: 20px; height: 20px; font-size: 120%; }
div.bootstrap-growl.alert { margin: 0 0px 5px 0px; padding: 7px 25px 7px 50px; font-size: 95%; border-radius: 5px; line-height: 140%; text-align: left; }
div.bootstrap-growl.alert.alert-danger {  color: #8d0028; background: #ffcccc url('./../images/ebox.png') no-repeat 8px 8px; border: 1px solid #ea0e4c; }
div.bootstrap-growl.alert.alert-danger a { color: #8d0028; }
div.bootstrap-growl.alert.alert-warning {  color: #7f6a1f; background: #FFF0B3 url('./../images/ibox.png') no-repeat 8px 8px; border: 1px solid #E8D897; }
div.bootstrap-growl.alert.alert-warning a { color: #7f6a1f; }
div.bootstrap-growl.alert.alert-success {  color: #304a0d; background: #f8ffef url('./../images/obox.png') no-repeat 8px 8px; border: 1px solid #7daf39; }
div.bootstrap-growl.alert.alert-success a { color: #304a0d; }
div.bootstrap-growl.alert.alert-general { background: #fff url('./../images/gbox.png') no-repeat 8px 8px; background-size: 21px 20px; border: 1px solid #929dab; }
/*div.bootstrap-growl.alert.alert-general a { color: #304a0d; }*/

div.bootstrap-growl .levy { float: left; }
div.bootstrap-growl .pravy { float: right; }


@media screen and ( max-width: 1300px )
{
  #login { width: calc( 35% - 60px ); }

  .chart_half { width: 100%; }
}

@media screen and ( max-width: 1000px )
{
  #login { width: calc( 50% - 60px ); }

  #levy_sloupec { width: 100px; }

  #obsah { padding-left: 130px; padding-right: 30px; width: calc( 100% - 160px ); }

  .chart_half_inside { width: calc( 100% - 60px ); }
  .chart_half_inside:first-child { margin-bottom: 30px; }
}

@media screen and ( max-width: 600px )
{
  #login { width: calc( 80% - 60px ); }

  #obsah { padding-left: 110px; padding-right: 10px; width: calc( 100% - 120px ); }

  #charts_top div { width: calc( 50% - 64px ); margin-bottom: 30px; }
  #charts_top div:nth-child(even) { border-right: none; }
}