body,
html {
background:  no-repeat fixed center ;	
background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.1) 100%), url(http://nariad.sstoyanov.eu/assets/img_depo/driverSofia.JPG), url(http://nariad.sstoyanov.eu/assets/img_depo/Grafik.jpg);		
height:100%; width:100%;
position:relative;
}
   /*
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;
}

.form-group{
	opacity: 1;			
}

.navbar {
    background-color:#80bfff;
    border-color: #ffffff;      
    }
    
.navbar-header .navbar-brand,  .container-fluid .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: #80bfff;
      /*background-color: #D4AF37; /*#fff5cc;*/
      color:#fff;
      text-align: center;           
      font-size: 15px; 
       
   /*   font-family:Quintessential, cursive;
       font: 400 40px/1 'Great Vibes', Helvetica, sans-serif;
     font-family:  'Great Vibes', Helvetica, sans-serif;*/
  }
  
  .close{
  font-size: 30px;
  }
  .modal{      
 position:fixed;
  max-height:1000px;
    }
    .modal-sm .modal-body, .modal-md .modal-body{  
     color:#000;
      overflow: auto;  
      background-color:#eedb99; 
    }
  .modal-lg .modal-body{  
  /* let it scroll */
  overflow: auto;     
   background-color:#c3c3c3;   
     	font-size: 10px; 
    color:#000;
    min-height:500px;
    }
    /*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;
  	bottom:0;
  
    }
      
  .modal-footer {
   background-color: #80bfff;
    height:60px;
       text-align: center; 
        
  }   	
	.modal .modal-lg{	
	min-width:1250px; 	
}
	
 .modal .modal-sm, .modal .modal-md{
       font-size: 15px;   
       	min-width:200px; 	
    }
.modal-header-wc{
   background-color: #ff0000;
   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:#ff0000;
      text-align: center;  
  }     
     .modal-header-ok{
   background-color: #009900;
   color:#fff;
   text-align: center;   
      font-size: 20px;  
    }
  .modal-footer-ok{
      background-color:#009900;
      text-align: center;  
  }     	
	  .modal-header-wd{
   background-color: #cca300;
   color:#fff;
   text-align: center;   
      font-size: 20px; 
    }
  .modal-footer-wd{
      background-color:#cca300;
      text-align: center;  
  }     
  
  .modal-header-driver{
   background-color: #404040;
   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-driver{
      background-color: #404040;  
  }     
   
   .modal-header-shifts{
   background-color: #996633;
   color:#fff;
   text-align: center;      
      font-size: 20px; 

    }
    
   .modal-footer-shifts{
      background-color: #996633;  
  } 
    
    .modal-header-shiftNew{
   background-color: #009900;
   color:#fff;
   text-align: center;      
      font-size: 20px;       
    }
    .modal-footer-shiftNew{
      background-color: #009900; 
       text-align: center; 
  }
  
  .panel-default{
	 background: none;
	 padding: 3px;
}
  .panel-body-main{
 border-style: ridge; 
 padding: 5px;
  }
 
 .panel-body-second{
 padding: 5px;
/* border-style: groove; */
  }
  
 .panel-body-third{
 padding: 5px;
 border-color: gray;
border-style: double ;
  } 
  
 
.container{	color:#80bfff; 	padding:10px;	
	padding-bottom:70px; /* !!!Height of the footer+10px */
}
.container h2, h3, h4, p{
	text-align: center; 
	}

  /*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: 'Glyphicons Halflings';
	-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: "\e079";
}
.ui-datepicker .ui-datepicker-next:before {
	content: "\e080";
}
.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:60px; 
	padding: 10px 0px; 
	background-color:#003380; 
	color: white;
}
a.email-address {
      color:white;    
}

/* 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;
}