:root { 

    --main-blue-light: #008ED0;
    --main-blue-dark: #002664;
    --main-gray-light: #EEEFF1;
    --main-gray-darklight: lightgray;
    --main-gray-dark: grey;
  
  }

  .blue-light { color: var(--main-blue-light); }
  .blue-dark { color: var(--main-blue-dark); }
  .gray-light { color: var(--main-gray-light); }
  .gray-darklight { color: var(--main-gray-darklight); }
  .gray-dark { color: var(--main-gray-dark); }

  .bg-blue-light { background-color: var(--main-blue-light); }
  .bg-blue-dark { background-color: var(--main-blue-dark); }
  .bg-gray-light { background-color: var(--main-gray-light); }
  .bg-gray-darklight { background-color: var(--main-gray-darklight); }
  .bg-gray-dark { background-color: var(--main-gray-dark); }

  .video-container{ width: 100%; position: relative;  }
  .video-container video{ position: absolute; z-index: 0; object-fit: cover; display: none; }
  /* Just styling the content of the div,the *magic* in the previous rules */
  .video-container .cont{ width: 100%; z-index:1; position: relative; }
  
  body { background: var(--main-blue-dark); font-family:'Montserrat',sans-serif; }
  a { color: var(--main-blue-light); }
  .container-fluid.header { padding:  0; }
  /*body:not(.hp) .header { background: var(--main-blue-dark) url('../images/nostalgie/bg-header-100perc.jpg') center top no-repeat; }*/
  .header { background: #0a0b0f url('../images/bg-header-100perc.jpg') center top no-repeat; overflow: hidden; }
  
  /*.fornavbar { background: rgba(0,38,100,0.8); }*/
  .fornavbar { background: rgba(255,255,255,0.1); }
  .navbar-collapse { }
  .navbar-nav .nav-link { color: var(--bs-white) !important; font-weight: 700; font-size: 150%; text-transform: uppercase; }
  .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--main-blue-light) !important; }
  
  .navbar-toggler { background: rgba(255,255,255,0.2); padding: 0; width: 50px; height: 50px; position: relative; }
  .navbar-toggler span { display: block; vertical-align: middle; width: 30px; height: 3px; position: absolute; background: var(--bs-white); text-decoration: none; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; transition: all 250ms ease; }
  .navbar-toggler span:first-child { top: 13px; left: 10px; }
  .navbar-toggler span:nth-child(2) { top: 23px; left: 10px; }
  .navbar-toggler span:last-child { top: 33px; left: 10px; }
  
  /*.navbar-toggler:not(.collapsed) span:first-child { top: 25px; left: 10px; transform: rotate(45deg); }
  .navbar-toggler:not(.collapsed) span:nth-child(2) { opacity: 0; }
  .navbar-toggler:not(.collapsed) span:last-child { top: 25px; left: 10px; transform: rotate(-45deg); }*/
  
  .flags { padding-left: 1rem; }
  .flags .active { background: var(--main-blue-light); }
  .flags a {  }
  .flags :hover { background: var(--main-blue-dark); }
  
  .breadcrumb { background: rgba(223, 223, 223, 0.8); }
  
  main { color: var(--main-blue-dark); background: var(--bs-light); }
  
  .bannerhp { padding: var(--padding); }
  .bannerhp>a { border: 1px solid rgba(255,255,255,0.25); color: var(--bs-light); text-transform: uppercase; text-decoration: none; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; transition: all 250ms ease; }
  .bannerhp>a:hover { background: rgba(255,255,255,0.25); }
  
  .openclosebox { background: var(--main-blue-dark); color: var(--bs-light); }
  .openclosebox2 { background: var(--main-gray-light); color: var(--main-blue-dark); }
  .nextActionbox { background: var(--main-gray-light); color: var(--main-blue-dark); border-bottom: 2px dotted lightgray;}
  .nextActionbox div a { text-decoration: none; color: var(--main-blue-dark);}
  .nextActionbox:last-child { border-bottom: none;}
  .nextActionboxDate { background-color: var(--main-gray-darklight); line-height: 1; }
  
  /* kalendar */
  .calend { width: 100%; text-align: center; }
  .calend td { border: 4px solid var(--bs-light); padding: 3px 0px; }
  .calend td.akce { background-color: var(--bs-green); color: var(--bs-white); }
  .calend td.active { background-color: var(--main-blue-dark); color: var(--bs-white); }
  .calend td:hover { background-color: var(--main-blue-light); color: var(--bs-white); }
  /**/
  
  .partners { background: var(--bs-gray-400); }
  
  .footer { background: var(--main-blue-dark); color: var(--bs-white); }
  .footer .border-bottom { border-bottom: 1px solid rgba(255,255,255,0.3) !important; } 
  .footer a { color: var(--bs-white) !important; border-bottom: 1px solid rgba(255,255,255,0.3); text-decoration: none; }
  .footer a:hover {  border-bottom: none; }
  .footer h5 { opacity: 0.6; }
  /*.footer .nav-link::before { content: ''; color: var(--bs-yellow); padding-right: 0.5rem; font-size: 80%; font-weight: 100; text-decoration: none;  }*/
  
  /* redefine BT */
  .display-7 { font-size: 1.8rem; }
  .display-8 { font-size: 1.4rem; }
  .font-weight-bold { font-weight: 700; }
  
  /* Rules for google icon sizes: */
  .material-icons.md-12 { font-size: 12px; line-height: 2;}
  .material-icons.md-18 { font-size: 18px; line-height: 1.5;}
  .material-icons.md-24 { font-size: 24px; } /* Default */
  .material-icons.md-36 { font-size: 36px; }
  .material-icons.md-48 { font-size: 48px; }
  
  /* Vozidla */
  .vozidla { text-align: center; }
  .vozidla h2 {color: var(--main-blue-light); } 
  .btn { border-radius: 3px; }
  .btn-outline-info { color: var(--main-blue-light); border: 1px solid var(--main-blue-light); padding: 0.8em 1.8em; }
  .btn-outline-info:hover { background-color: var(--main-blue-light); color: var(--bs-white); border: 1px solid var(--bs-white)}
  
  .card-body { background-color: var(--main-blue-dark); color: var(--bs-white); padding-bottom: 1.7em;}
  .btn-outline-light { padding: 0.5em 1.8em; }
  .btn-outline-light:hover { background-color: var(--main-blue-dark); color: var(--main-blue-light); border-color: var(--main-blue-light); }
  
  /* detail Vozidla */
  .exponT { border: var(--main-blue-light); }
  .exponT th { color: var(--bs-white); background-color: var(--main-blue-light); border-bottom:1px solid var(--bs-white);}
  /* .exponT td { color: var(--bs-white); background-color: var(--bs-gray-600); border-bottom:1px solid var(--bs-white) } */
  .exponT2 { border: var(--bs-white); }
  .exponT2 th { color: var(--bs-white); background-color: var(--main-blue-light); border-bottom:1px solid var(--bs-white);}
  .exponT2 td { color: var(--bs-white); background-color: var(--bs-gray-600); border-bottom:1px solid var(--bs-white); font-style: italic; }
  
  /* Objednat vlak */
  .form { background-color: var(--main-gray-light); }
  .form-select, .form-control { border-radius: 3px; padding-top: 0.7rem; padding-bottom: 0.7rem;}
  .form button.btn { background-color: var(--main-blue-dark); color: var(--bs-white); }
  .form button.btn:hover { background-color: var(--main-blue-light); color: var(--bs-white); }
  .formDown { background-color: var(--main-gray-light); border-top: 2px dotted lightgray; }
  
  /* Akce */
  .akce { background-color: var(--main-gray-light); border-bottom: 2px dotted lightgray; }
  .akce:last-child { border-bottom: none; }
  .akce h3 { color: var(--main-blue-light); }
  .akce .date { background-color: var(--main-gray-darklight); display: inline-grid;}
  .akce .date span { display: block; }
  .akce button { width: 195px; }
  .akce button.btn.eshop { background-color: var(--main-blue-dark); color: var(--bs-white); }
  .akce button.btn.eshop:hover { background-color: var(--main-blue-light); color: var(--bs-white); }

  .btn-lg, .btn-lg-dark { width: 195px; padding:.8rem 1.8rem; font-size:1rem; border-radius: 3px; }
  .btn-lg-dark { color: var(--bs-white); background-color: var(--main-blue-dark);}
  
  /* tabulka obecne */
  table  { border: 1px solid var(--main-blue-light); }
  table th { border: 1px solid var(--bs-white); color: var(--bs-white); background-color: var(--main-blue-light); padding: 10px; }
  t5able td { border: 1px solid var(--main-blue-light); padding: 10px; }

  /* datebpicker vymazu tyhle vlastnosti */
  .datepicker table  { border: none; }
  .datepicker table th { border: none; color: var(--bs-dark); background-color: transparent; padding: 8px; }
  .datepicker table td { border: none; padding: 8px; }
  
  /* detail Vozidla */
  .exponT { border: var(--main-blue-light); }
  .exponT th { color: var(--bs-white); background-color: var(--main-blue-light); border-bottom: 1px solid var(--bs-white); }
  .exponT img { height: 26px; }
  
  /* navigace seznam vozidel */
  .menuVozidla a { display: inline-block; border: 1px solid #008ED0; text-transform: uppercase; color: #008ED0; text-align: center; padding: 14px; text-decoration: none; border-radius: 3px; margin: 0.3rem 0.2rem; }
  .menuVozidla a:hover { background-color: #008ED0; color: var(--bs-white); transition: 0.2s ease-in-out; }
  
  /* vyhledavani */
  p.search { border-top: 1px solid var(--bs-gray-400); padding: 1em 0 0 0; margin-top: 1em; }
  p.search a { font-weight: 700; }
  
  /* responsive */
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
  
  .vozidla { text-align: left; }
  
  }
  
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {

   body.hp .header { background-image: unset; } /* skryje obrazek na pozadi */
  .video-container video { display: block; height: 100%; } /* zobrazi video */
  
  .flags a { background: transparent; }
  
  .navbar-collapse { display: flex; justify-content: center !important; }
  .navbar-nav .nav-link span { display: inline-block; border-left: 1px solid rgba(255,255,255,0.3);  padding: 0 0 0 1rem; }
  .navbar-nav .nav-item:first-child .nav-link span { border: none; }
  
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
  
  }
  
  @media (min-width: 1920px) {
  .video-container video { width: 100%; height: 100%; } /* lepsi fitnuti video pro velke obrazovky */
  }     


.Loader {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  .Loader:before {
    content: '';
    border: 12px solid #f3f3f3;
    /* Light grey */
    border-top: 12px solid #009fda;
    /* Blue */
    border-bottom: 12px solid #004e93;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    display: inline-block; }

.Loader--big:before {
  width: 150px;
  height: 150px; }

.Loader-progress {
  position: absolute;
  font-size: 35px;
  font-weight: bold;
  color: #009fda; }



@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }