body,
html {
   width: 100%;
    height: 100%;
    background:  no-repeat center fixed ;	
background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.1) 100%), url(http://desiro.sstoyanov.eu/assets/img_depo/ALSTOM_black_full.jpg);		
  /*background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 100%),url(http://desiro.sstoyanov.eu/assets/img_depo/train_depo_smaller.jpg);*/
background-size: contain;
position:relative;

   -webkit-animation: myfirst 2s ; /* Chrome, Safari, Opera*/ 
    animation: myfirst 2s ;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes myfirst {
    from {opacity: 0.1;}
    to {opacity: 1;}
        
  }

  /* Standard syntax */
  @keyframes myfirst {
    from {opacity: 0.1;}
    to {opacity: 1;}        
  }



   /*
Other way For 2 overlapping images :
 body,
html {
background: no-repeat fixed center ; 
 background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.1) 100%), url(../imgrafik/Grafik.jpg);
 width:100%;  
 
}
body, html:after {

background: no-repeat fixed center ; 
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.1) 100%), url(../imgrafik/driverSofia.JPG);	
height:100%; width:100%;

}*/
.form-control {
	cursor:pointer;
}
.header{background-color:#c3c3c3;
text-align: center; 
right:0;
}
.header img{
height:40px;
}


.navbar {
    background-color:#b7dbff;
    border-color: #ffffff;      
    }
    
.navbar-header .navbar-brand, .navbar-text, #exitDB, #exit, #downloadDB {
	color:black;
}
/*

.navbar-right {
	margin-right:20px;
}

table, th, td {
    border: 1px solid black;
}	
table {
    border-spacing: 1px;
}*/

.modal-header{ 
      background-color: #000000;
      /*background-color: #D4AF37; /*#fff5cc;*/
      color:#fff;
      text-align: center;           
      font-size: 15px; 

  }
  
  .close{
  font-size: 40px;
  }
  
  
  .modal{      
 /*overflow-y: auto !important;*/
 position:fixed;
  max-height:1000px;
  overflow: auto;
    }
    
    .modal-sm .modal-body, .modal-md .modal-body{  
     color:#000;
      overflow: auto;  
      background-color:#c0c0c0; 
    }
  .modal-lg .modal-body{  
  /* let it scroll 
   overflow: scroll; 
  overflow: auto;   */ 
   background-color:#c3c3c3;   
     	font-size: 10px; 
    color:#000;
    min-height:500px;
     min-width:1000px; 
    }
    

    
    /*modal-guts - important div!!! We use it to set position of the status table inside the modal body so that to have
    horisontal scroll bar ever visible*/
    .modal-guts{
     position: absolute;    
       top: 0;
 	 left: 0;
  	width:100%;
  height:100%;
  
  overflow: auto;   
    overflow: scroll;
   overflow: inherit;
    }
      
  .modal-open {
  overflow-x:  scroll;
}    
   .modal-body-wrapper {
  overflow: scroll;
  height: 70vh;
  overflow: auto;  
}   
      
  .modal-footer {
   background-color: #000000;
    height:auto;
       text-align: center; 
        color:#fff;
  }   	
	.modal .modal-lg{	
	min-width:1300px; 	
}
	
 .modal .modal-sm, .modal .modal-md{
       font-size: 15px;   
       	min-width:200px; 	
    }
.modal-header-wc{
   background-color:  #800040;
   color:#fff;
   text-align: center;      
      font-size: 20px; 
       /*font: 400 10px/1 'Great Vibes', Helvetica, sans-serif;
     font-family:  'Great Vibes', Helvetica, sans-serif;*/
    }
.modal-footer-wc{
      background-color: #800040;
      color:#fff;
      text-align: center;  
  }     
     .modal-header-ok{
   background-color: #008080;
   color:#fff;
   text-align: center;   
      font-size: 20px;  
    }
  .modal-footer-ok{
      background-color:#008080;
      text-align: center;  
  }     	
	  .modal-header-wd{
   background-color: #804040;
   color:#fff;
   text-align: center;   
      font-size: 20px; 
    }
  .modal-footer-wd{
      background-color:#000000;
      text-align: center;  
  }  
      
 
.container-fluid{	
	color:#b7dbff; 	
min-height:700px;	
margin-top:70px;
	padding-bottom:20px; /* !!!Height of the footer+10px */
}
.container-fluid h2, h3, h4, p{
	text-align: center; 
	}



.btn-group{  
  min-width:33.33%;
   max-width:100%
    
    }


  /*Datepicker  starts here*/
.ui-datepicker {
	background-color: #fff;
	border: 1px solid #66AFE9;
	border-radius: 4px;
	box-shadow: 0 0 8px rgba(102,175,233,.6);
	display: none;
	margin-top: 4px;
	padding: 10px;
	width: 240px;
}
.ui-datepicker a,
.ui-datepicker a:hover {
	text-decoration: none;
}
.ui-datepicker a:hover,
.ui-datepicker td:hover a {
	color: #2A6496;
	-webkit-transition: color 0.1s ease-in-out;
	   -moz-transition: color 0.1s ease-in-out;
	     -o-transition: color 0.1s ease-in-out;
	        transition: color 0.1s ease-in-out;
}
.ui-datepicker .ui-datepicker-header {
	margin-bottom: 4px;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title {
	font-weight: 700;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: default;
	font-family: FontAwesome;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: normal;
	height: 20px;
	line-height: 1;
	margin-top: 2px;
	width: 30px;
}
.ui-datepicker .ui-datepicker-prev {
	float: left;
	text-align: left;
}
.ui-datepicker .ui-datepicker-next {	float: right;
	text-align: right;
}
.ui-datepicker .ui-datepicker-prev:before {
	content: "\f137";
}
.ui-datepicker .ui-datepicker-next:before {
	content: "\f138";
}
.ui-datepicker .ui-icon {
	display: none;
}
.ui-datepicker .ui-datepicker-calendar {
  table-layout: fixed;
	width: 100%;
}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
	text-align: center;
	padding: 4px 0;
}
.ui-datepicker .ui-datepicker-calendar td {
	border-radius: 4px;
	-webkit-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	   -moz-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	     -o-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	        transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
.ui-datepicker .ui-datepicker-calendar td:hover {
	background-color: #eee;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-calendar td a {
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-current-day {
	background-color: #4289cc;
}
.ui-datepicker .ui-datepicker-current-day a {
	color: #fff
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover {
	background-color: #fff;	cursor: default;
}  
button.ui-multiDatesPicker { display: none; }

 /*Datepicker  ends here*/

footer {
	position:fixed; 
	bottom:0; 
	width:100%; height:20px; 
	padding: 0px 0px; 
	background-color:#c3c3c3; 
	color: #676767;
}
a.email-address {
      color:#595959;    
}

/* inputs placeholder color  */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #f2f2f2;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #f2f2f2;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #f2f2f2;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #f2f2f2;
}

/*buttons and hover color 
#allShifts, #allShiftsH{
background:#996633; 
color:white;
}
#allShifts:hover, #allShiftsH:hover {
	background-color: #804000;
	color:white;
}

#allDrivers{
background:#404040; 
color:white;
}
#allDrivers:hover {
	background-color: #1a1a1a;
	color:white;
} */

.error{
	text-align: center;      
	background-color: yellow ;
	color: red;
	font-weight: bold;
}