* {
  box-sizing: border-box;
}

body {background-color: #2c2e3e; color: #000; font-family: 'Poppins', sans-serif; font-size: 13px; margin: 0 auto; padding: 0;}
img {max-width: 100%; height: auto;}
h1,h2,h3,h4,h5,h6,p,a {margin: 0; text-decoration:none;}

/* ZAKLADNE PRAVIDLA */
.left {float: left;}
.right {float: right;}
.middle {margin: 0 auto; padding: 0;}
.center {text-align: center;}
.clear {clear: both;}
.padding {padding: 10px;}
.row {margin-right: -10px; margin-left: -10px; margin-top: 10px;}

.col-0 {display:none;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


#logo {margin: 0 auto; padding: 0; display: block; padding: 20px 0px 5px 0px;}
#lavy-panel {color: #fff; float: left; padding: 0 15px;}
#pravy-panel {float: left; background: #f7f7f7; min-height: 100vh;}
#lavy-panel > h1 {margin: 20px 0px 10px 0px; font-size: 20px; font-weight: 100; text-align: center;}

#lave-menu {width: 100%; z-index: 1; top: 0; left: 0; background-color: #2c2e3e; overflow-x: hidden;}
#lave-menu ul{text-align: left; padding: 0; margin: 5px 0px 0px 0px;}
#lave-menu ul li {padding: 5px 5px; font-size: 13px; display: block; min-height: 30px;}
#lave-menu ul li a {color: #c8c9ce; display: block; text-decoration: none; font-weight: 400; font-size: 14px; text-transform: initial}
#lave-menu ul li a:hover{color: #fff;}
#lave-menu ul li a.current {color: #fff;}
#lave-menu .current > .nazov {color: #fff; text-decoration: underline;}
.obrazok_lave_menu {float: left !important; margin-right: 10px; font-size: 16px; vertical-align: middle; display: contents;}
.pocet_uloh {background: #eaeaea; background-color: rgb(234, 234, 234);color: #444;font-size: 0.8rem;line-height: 20px;min-height: 20px;min-width: 20px;vertical-align: middle;text-align: center;display: inline-block;padding: 0px 2px;border-radius: .75rem;}
.lave-menu-sekcia {color: #c8c9ce; font-size: .83rem; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; padding-top: 15px;}
.sipky {float: right !important;}
#lavy-panel > .oddelovac-menu {border-bottom: 1px solid #4e4e52; padding-top: 2px;}
.red {color: red !important;}

.nazov_stranky {display: inline-block; padding: 5px 0px 15px 5px;}
.nazov_stranky h3{font-size: 20px; font-weight: 100; letter-spacing: .5px;}

button#vytvorit-udalost{
    background-color: #32415a;
    color: #fff;
    padding: 12px 0px;
    border: 2px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 100;
}
button#vytvorit-udalost:hover{
    background: #3c485d;
}


button:hover {opacity: 0.8; cursor: pointer;}
#p_udalost_text {border-bottom: 1px solid #d7d7e4; padding-bottom: 2px; text-transform: uppercase; margin-bottom: 5px;}
.button_vytvorit_udalost {margin-top: 10px; letter-spacing: 0.3px; text-transform: uppercase; padding: 5px 10px;font-size: 15px;font-weight: 400;font-family: Poppins;}
.button_vytvorit_udalost i {font-size: 20px; vertical-align: middle;}
.button_poziar {color: #fff; background-color: #5eba5e; border: 1px solid #799c95; border-radius: 3px;}
.button_technicka_pomoc {color: #fff; background-color: orange; border: 1px solid #e38f8f; border-radius: 3px;}
.button_zdravotna_pomoc {color: #fff; background-color: #f4516c; border: 1px solid #5f6b68; border-radius: 3px;}
.button_dopravna_nehoda {color: #fff; background-color: #716aca; border: 1px solid #5f6b68; border-radius: 3px;}
.button_unik_nl {color: #fff; background-color: #36a3f7; border: 1px solid #7a8d89; border-radius: 3px;}
.button_male_pismo {font-size: 12px;}


.table_button {letter-spacing: 0.3px; text-transform: uppercase; padding: 5px 10px;font-size: 15px;font-weight: 400;font-family: Poppins;}
.table_button i {font-size: 20px; vertical-align: middle;}

.form_button {width: auto !important; padding: 10px 20px; margin-top: 10px; float: right; background-color: #337ab7; color: #fff; border: 1px solid #e38f8f; border-radius: 3px; text-transform: uppercase;}
.udalost_button {width: 100%; padding: 15px 0px; margin-bottom: 12px; background-color: #337ab7; color: #fff; border: 1px solid #e38f8f; border-radius: 3px; text-transform: uppercase;}
.ulozeny_datum_udalosti {color: inherit; background-color: #00ff00 !important; border: 1px solid #6bd8c2 !important;}
/***** OBSAH *****/
#top-lista {background: blue;width: 100%; min-height: 50px;}
#menu {overflow: hidden; background-color: #efefef; border-bottom: 1px solid #D9DEE4;}
#menu ul{padding: 0; margin: 0px; overflow: hidden;}
#menu ul > #lave {float: right;}
#menu ul li a {padding: 10px 15px; color: #337ab7; display: inline-block; font-size: 14px; text-decoration: none;}
#menu ul li a span{font-weight: bold;}
#menu ul li#odhlasit:hover {border-right: none; border-left: 1px solid #ccc;}
#menu ul li#odhlasit a {color: #f00;}
#menu ul li:first-child {margin: 0px 0px 0px 10px;}
#menu ul li:last-child {border-right: none; margin: 0px 10px 0px 0px;}
#menu ul li {float: left;display: inline-block; padding: 5px 0px; vertical-align: middle; cursor: pointer;}
#menu ul li:hover {background: #ede1e1;border-right: 1px solid #ccc;border-left: 1px solid #ccc;}
#menu ul li#current {background: #ede1e1;border-right: 1px solid #ccc;border-left: 1px solid #ccc;}
#menu ul li#search{margin: 0px 0px 0px 10px;}
#menu ul li a span:hover{text-decoration: underline;}
#menu i {font-size: 25px; vertical-align: middle; margin: -5px 0px !important;}

#menu ul li#userinfo {border-right: 1px solid #ccc; border-left: 1px solid #ccc;}
#menu .userinfo {padding: 6px; width: 100%; float: left;}
#menu .userinfo {cursor: pointer;}
#menu .userinfo img {vertical-align: middle; width: 30px; height: 30px; border: 1px solid #ccc;}
#menu .userinfo p {color: #515356; display: inline-block; font-size: 12px;}

#stred {overflow: hidden; margin: 0; padding: 0px 20px 10px;}
#stred_udalost {overflow: hidden; margin: 0; padding: 0px 15px 10px 15px;}
.panel {
    width: 100%;
    display: inline-block;
    background: #fff;
    border: 1px solid #E6E9ED;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding-bottom: 10px;
}

/***** TABULKA *****/
table {
    border-spacing: 0;
    border-collapse: collapse;
    display:table;
}
.okraj {border: 1px solid #f4f5f8;}
.tabulka {
    width: 100%;
    max-width: 100%;
    margin: 10px 0px 0px 0px;
}
.tabulka tr{
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.tabulka thead {display:table-header-group;}
.tabulka tbody {display:table-row-group;}
.tabulka td {display:table-cell; border: 1px solid #f4f5f8;}
.tabulka td, .tabulka th {padding: 5px;}
.tabulka th {border: 1px solid #f4f5f8; letter-spacing: 0.3px; text-transform: uppercase; font-size: 15px; font-weight: 100;}
#trhover:hover{background-color: #f4f5f8; cursor: pointer;}

.table_miesto_udalosti {line-height: 15px;}
.table_miesto_udalosti>.miesto {font-size: 14px; font-weight: 100;}
.table_miesto_udalosti>.adresa {font-size: 12px;}

#menu_udalost {overflow: hidden; background-color: #efefef; border-bottom: 1px solid #D9DEE4;}
#menu_udalost ul{padding: 0; margin: 0px; overflow: hidden;}
#menu_udalost ul > #lave {float: right;}
#menu_udalost ul li a {padding: 0px 5px; color: #337ab7; display: inline-block; font-size: 12px; text-decoration: none;}
#menu_udalost ul li a span{font-weight: bold;}
#menu_udalost ul li#odhlasit:hover {border-right: none;}
#menu_udalost ul li#odhlasit a {color: #f00;}
#menu_udalost ul li#odhlasit {border-left: 1px solid #ccc;}
#menu_udalost ul li {float: left;display: inline-block; padding: 5px 2px 2px 2px; vertical-align: middle; cursor: pointer; border-right: 1px solid #ccc;}
#menu_udalost ul li:hover {background: #ede1e1;}
#menu_udalost ul li.current {background: #ede1e1;}
#menu_udalost ul li#search{margin: 0px 0px 0px 10px;}
#menu_udalost ul li a span:hover{text-decoration: underline;}
#menu_udalost i {font-size: 25px; vertical-align: middle; display: block; text-align: center; padding-bottom: 2px;}

/* FORM */
.form_nadpis {border-bottom: 2px solid #337ab7; margin-bottom: 8px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px;}

.form-control {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 20px;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
        border-top-color: rgb(206, 212, 218);
        border-right-color: rgb(206, 212, 218);
        border-bottom-color: rgb(206, 212, 218);
        border-left-color: rgb(206, 212, 218);
    border-radius: .25rem;
    -webkit-transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;

}

/* PRIHLASENIE */
#prihlasenie {background-image: url('../images/prihlasenie_bg.jpg'); min-height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
#prihlasenie_div {margin: 0 auto; padding: 0;}
.prihlasenie_okno {padding-top: 100px;}
.prihlasenie_okno h1 {text-align: center; text-transform: uppercase; font-weight: 100; letter-spacing: .5px; padding-bottom: 20px;}
.prihlasenie_riadok {padding-bottom: 10px;}
input.prihlasenie {background: #f7f6f9;}
.prihlasenie_label {line-height: 0px !important; padding-right: 0px !important;}


@media (max-width: 600px){
  /* mobiles  */
  #logo {margin: 0 auto; padding: 0; display: block; padding: 10px 0px 5px 0px;}
  #lavy-panel {padding: 0 5px;}
  #lavy-panel > h1 {margin: 10px 0px 10px 0px; font-size: 12px;}
  .lave-menu-sekcia {font-size: 12px; font-weight: 100;}
  #lave-menu ul li {padding: 4px 0px; min-height: 10px;}
  #lave-menu ul li a {font-size: 11px;}
  .obrazok_lave_menu {display: none;}
  .pocet_uloh {background: none;color: #c8c9ce;font-size: 10px;line-height: normal;padding: 0px; text-align: right;min-height: 0px;min-width: 0px;}
  .hide-m {display: none !important;}
  
  button#vytvorit-udalost{font-size: 12px;font-weight: 100;}
  .button_vytvorit_udalost {padding: 8px 10px; margin-top: 12px;}
  
  #menu ul li {padding: 2px 0px;}
  #menu .userinfo {padding: 1px 3px 1px 5px;}
  #menu ul li a {padding: 5px 10px;}
  
  .tabulka {margin: 5px 0px 0px 0px;}
  
  .table_button {width: 100%; padding: 10px 10px;}
  .table_button i {font-size: 20px; display: block;}
  
  
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-3_5 {width: 30%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-8_5 {width: 70%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
}
@media (min-width: 600px) and (max-width: 1024px){
  /* tablet: */
  #logo {margin: 0 auto; padding: 0; display: block; padding: 10px 0px 5px 0px;}
  #lavy-panel {padding: 0 5px;}
  #lavy-panel > h1 {margin: 10px 0px 10px 0px; font-size: 14px;}
  .lave-menu-sekcia {font-size: 12px; font-weight: 100;}
  #lave-menu ul li {padding: 4px 0px; min-height: 10px;}
  #lave-menu ul li a {font-size: 12px;}
  .obrazok_lave_menu {font-size: 12px;}
  .pocet_uloh {background: none;color: #c8c9ce;font-size: 10px;line-height: normal;padding: 0px; text-align: right;min-height: 0px;min-width: 0px;}
  .hide-t {display: none !important;}
  
  button#vytvorit-udalost{font-size: 12px;font-weight: 100;}
  .button_vytvorit_udalost {padding: 10px 10px; margin-top: 10px;}
  #menu ul li {padding: 2px 0px;}
  #menu .userinfo {padding: 1px 3px 1px 5px;}
  #menu ul li a {padding: 5px 10px;}
  
  .table_button {width: 100%; padding: 10px 10px;}
  .table_button i {font-size: 20px; display: block;}
  
  
  form label {line-height: 40px; padding-right: 10px; text-align: right;}
  form p.riadok {margin-bottom: 5px;}
  
  .col-t-1 {width: 8.33%;}
  .col-t-2 {width: 16.66%;}
  .col-t-3 {width: 25%;}
  .col-t-4 {width: 33.33%;}
  .col-t-5 {width: 41.66%;}
  .col-t-6 {width: 50%;}
  .col-t-7 {width: 58.33%;}
  .col-t-8 {width: 66.66%;}
  .col-t-9 {width: 75%;}
  .col-t-10 {width: 83.33%;}
  .col-t-11 {width: 91.66%;}
  .col-t-12 {width: 100%;}
}
/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}*/

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: -10px !important;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #efefef;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.container:nth-child(odd) {left: 50%;}
.container:nth-child(even) {left: 0;}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.container:nth-child(even) {
  left: 0;
}

/* Place the container to the right */
.container:nth-child(odd) {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.container:nth-child(even)::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #efefef;
}

/* Add arrows to the right container (pointing left) */
.container:nth-child(odd)::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #efefef transparent transparent;
}

/* Fix the circle for containers on the right side */
.container:nth-child(odd)::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 10px 15px 10px 15px;
  background-color: #efefef;
  position: relative;
  border-radius: 6px;
}

.content h1 {text-transform: uppercase; font-size: 17px; font-weight: 500;}
.content p {font-weight: 100;}
span.technika_udalosti {font-weight: 500 !important;}

@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 32px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container:nth-child(even)::before, .container:nth-child(odd)::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #efefef transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .container:nth-child(even)::after, .container:nth-child(odd)::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .container:nth-child(odd) {
  left: 0%;
  }
}