body,
html {
	background-color: black;
	color:white;
	
	 overflow-x: hidden;
}




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

  }
  
  .close{
  font-size: 30px;
  }
  .modal{      
 position:fixed;
  max-height:1000px;
    }
    .modal-sm .modal-body, .modal-md .modal-body{  
     color:#000;
      overflow: auto;  
      background-color:#c0c0c0; 
    }
  .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: #000000;
    height:auto;
       text-align: center; 
        color:#fff;
  }   	
	.modal .modal-lg{	
	min-width:1250px; 	
}
	
 .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:white; 	 /*
	padding-bottom:70px; !!!Height of the footer+10px
}
.container h2, h3, h4, h5, p, th, i, td{ */

min-height:800px;	

	text-align: center; 
	margin-top:135px;	
	
	}
	
	
/* Hide scrollbar for Chrome, Safari and Opera */
.container-fluid .row::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge */
.container-fluid, .row {
    -ms-overflow-style: none;
}
	

#menu a, #addcredit a, #addcreditCard a {
	 color:#fff;
	   font-size: 20px; 	
	   		
}


/* Keep select list functionality but Hide its scrollbar for Chrome, Safari and Opera */
#amount_selected::-webkit-scrollbar {
  display: none;
  border: none;
 
}

/*  Keep select list functionality but Hide its scrollbar for IE and Edge */
#amount_selected {
  -ms-overflow-style: none;
  border: none;
  
}

#amount_selected option{
   background-color:black;
}


 /* let button group with 1 button scroll
 upper buttons row for products category */
 
 #category_buttons {
  display:inline-block;
        overflow-x:scroll;
         overflow-y: hidden;
   white-space:nowrap;
 background-color:black; 
 scroll-behavior: smooth;
 overflow: -moz-scrollbars-none;
 -webkit-overflow-scrolling: touch;
 -webkit-scrollbar-width: 0 !important ;
-ms-overflow-style: none; 

 }
 
 
  #my_category_buttons {
  display:inline-block;
        overflow-x:scroll;
         overflow-y: hidden;
   white-space:nowrap;
 background-color:black; 
 scroll-behavior: smooth;
 overflow: -moz-scrollbars-none;
 -webkit-overflow-scrolling: touch;
 -webkit-scrollbar-width: 0 !important ;
-ms-overflow-style: none; 

 }
 
  #my_category_buttons> .btn-group{  
  min-width:50%;
   max-width:100%
    
    }
    
    
   #brand_buttons {
  display:inline-block;
        overflow-x:scroll;
         overflow-y: hidden;
   white-space:nowrap;
 background-color:black; 
 scroll-behavior: smooth;
 overflow: -moz-scrollbars-none;
 -webkit-overflow-scrolling: touch;
 -webkit-scrollbar-width: 0 !important ;
-ms-overflow-style: none; 

 }
 
  #brand_buttons> .btn-group{  
  min-width:14.28%;
   max-width:100%
    
    }   
    
    
    
    
 
 .fixed-bottom {
  display:inline-block;
        overflow-x:scroll;
       /*  overflow-y: hidden;*/
   white-space:nowrap;
 background-color:black; 
 scroll-behavior: smooth;
 -webkit-overflow-scrolling: touch;
 -webkit-scrollbar-width: 0 !important ;
-ms-overflow-style: none; 
 }
 
.btn-group{  
  min-width:33.33%;
   max-width:100%
    
    }

	/*main menu items*/
.flex-column .nav-link {
	height:60px;
}


.d-flex input, .d-flex textarea, .d-flex select, ul, .d-flex ul a {
	
	background-color:black; 
	color:white;
}




/* COOKIE POLICY HTML*/
#gdpr-cookie-message {
 background-color:Gray;
 padding-bottom:50px;
 padding-left:5px;
 padding-right:5px;
 color:black ;
 
 position: absolute;

 
}

#gdpr-cookie-message a {
color:LightGray;
}

#gdpr-cookie-message a:hover {
color:white;
}

#gdpr-cookie-message h4 {

}

#gdpr-cookie-message p:last-child {

}

#gdpr-cookie-accept {
background-color:black; 
color:white;
}

#gdpr-cookie-advanced {
background-color:DeepGray; 
color:black;
}

#gdpr-cookie-message button {

}

#gdpr-cookie-message button:hover {
  /* your css here */
}




#product_img{
	background: url(/assets/img_coffee/hotDrinks-256.png)  no-repeat fixed center  ;	
	height:100%; width:100%;

}


/*hide the scrollbar  (Chrome, Safari, newer versions of Opera):
.element::-webkit-scrollbar { width: 0 !important }*/
/*hide the scrollbar-moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }*/
/*hide the scrollbar-ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }*/

  /*Datepicker  starts here*/
.ui-datepicker {
	background-color: #000000;
	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;
	z-index: 10000 !important;
}
.ui-datepicker a,
.ui-datepicker a:hover {
	text-decoration: none;
}
.ui-datepicker a:hover,
.ui-datepicker td:hover a {
	color: #AFEEEE;
	-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;
	
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: bold;
	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: "<<";
}
.ui-datepicker .ui-datepicker-next:before {
	content: ">>";
}
.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;
}  

 /*Datepicker  ends here*/

/* CSS for RANGE SLIDER*/
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  background:  transparent;
  outline: none;
  opacity: 0.6;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
 background: black;
  cursor: pointer;
}


.slider.topping, label[required=required] {
	 width: 170px;
     -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.slider.topping {margin-left:-50%;}
label[required=required] {margin-left:-10%; text-align: right;}


/*ingredients sliders*/
#sugar_range::-webkit-slider-runnable-track {	background-color: white;}

#sugar_range::-moz-range-track {   background-color: white;}
  
#newsugar_range::-webkit-slider-runnable-track {	background-color: white;}

#newsugar_range::-moz-range-track {   background-color: white;}  
  
#milk_range::-webkit-slider-runnable-track {	background-color: white;}

#milk_range::-moz-range-track {   background-color: white;}
	
#cocoa_range::-webkit-slider-runnable-track {	background-color: #773c3c;}            /*  #c28585; #9b4d4d;   #613030;   */

#cocoa_range::-moz-range-track {   background-color:  #773c3c;}
	
#cream_range::-webkit-slider-runnable-track {	background-color: #dfdfdf;}            /*  #c28585; #9b4d4d;   #613030;   */

#cream_range::-moz-range-track {   background-color:  #dfdfdf;}	
	
#vanilla_range::-webkit-slider-runnable-track {	background-color: #ffffb3;}            /*  #c28585; #9b4d4d;   #613030;   */

#vanilla_range::-moz-range-track {   background-color:  #ffffb3;}	
	
#choco_range::-webkit-slider-runnable-track {	background-color: #9b4d4d;}            /*  #c28585; #9b4d4d;   #613030;   */

#choco_range::-moz-range-track {   background-color:  #9b4d4d;}

#ness_range::-webkit-slider-runnable-track {	background-color: #ba7474;}   /*  #d8afaf; #ba7474; #964b4b;*/

#ness_range::-moz-range-track {   background-color: #ba7474;}

#caramel_range::-webkit-slider-runnable-track {	background-color:  #df7500;}  /*  #ffb15b;    #df7500;  #9f5400;*/

#caramel_range::-moz-range-track {   background-color: #df7500;}

/*cofeee checkbox -BASIC BS4
.custom-switch .custom-control-label::before{

 border-color:black;
 box-shadow: none;
  outline: 0;
 color:black; 

    
}

.custom-switch .custom-control-input:checked~.custom-control-label::before{
  background-color:#ab5454;
   border-color:black;
   box-shadow: none;
    -webkit-box-shadow: none;
    outline: 0;   
  
}*/

/*Anazing CSS from https://proto.io/freebies/onoff/  :*/


/*SUGAR TYPE CHECKBOX*/
.sugarcheck {
    position: relative; width: 100%;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.sugar-checkbox {
	display:none;
}

.sugarcheck input + label {
	display: inline-block;	
	width: 42px;
	height: 42px;
	cursor: pointer;		
}


.sugarcheck input + .sugarcheck-labelEn {
	
	background-image: url(/assets/img_coffee/sugarEn_42w.png);
}

.sugarcheck input[type="checkbox"]:checked + .sugarcheck-labelEn {
	background-image: url(/assets/img_coffee/sugarEn_42b.png)
}


.sugarcheck input + .sugarcheck-labelBg {

	background-image: url(/assets/img_coffee/sugarBg_42w.png);
}

.sugarcheck input[type="checkbox"]:checked + .sugarcheck-labelBg {
	background-image: url(/assets/img_coffee/sugarBg_42b.png)
}


/*MILK TYPE CHECKBOX*/
.milkcheck {
    position: relative; width: 100%;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.milk-checkbox {
	display:none;
}

.milkcheck input + label {
	display: inline-block;	
	width: 64px;
	height: 56px;
	cursor: pointer;	
}


.milkcheck input + .milkcheck-labelEn {
	background-image: url(/assets/img_coffee/milkEnH-64x56.png);
}


.milkcheck input[type="checkbox"]:checked + .milkcheck-labelEn {
	background-image: url(/assets/img_coffee/milkEnC-64x56.png)
}


.milkcheck input + .milkcheck-labelBg {
	background-image: url(/assets/img_coffee/milkBgH-64x56.png);
}


.milkcheck input[type="checkbox"]:checked + .milkcheck-labelBg {
	background-image: url(/assets/img_coffee/milkBgC-64x56.png)
}






/*SUGAR TYPE SWITCH - ALTERNATIVE CHECKBOX FOR THIS SITE OLD STYLE*/
.sugarswitch {
    position: relative; width: 100px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.sugarswitch-checkbox {
    display: none;
}
.sugarswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #0D0404; border-radius: 20px;
}
.sugarswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.sugarswitch-inner:before, .sugarswitch-inner:after {
    display: block; float: left; width: 50%; height: 29px; padding: 0; line-height: 29px;
    font-size: 17px; color: white; font-family: Trebuchet, Arial, sans-serif; 
    box-sizing: border-box;
}
.sugarswitch-inner:before {
  /*content: "Brown";*/  
    padding-left: 10px;
    background-color: #a85924; color: #FFFFFF;
      text-align: left;
}

#sugarswitch-innerEN:before {content: "Brown"; }	
#sugarswitch-innerBG:before {content: "Кафява"; }

.sugarswitch-inner:after {
    /*content: "White";*/
    padding-right: 12px;
    background-color: #f7f7f7; color: #0A0101;		
    text-align: right;
}

#sugarswitch-innerEN:after {content: "White";}		
#sugarswitch-innerBG:after {content: "Бяла";}

.sugarswitch-switch {
    display: block; width: 22px; margin: 5.5px;
    background: #0A0909;
    position: absolute; top: 0; bottom: 0;
    right: 65px;
    border: 2px solid #0D0404; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.sugarswitch-checkbox:checked + .sugarswitch-label .sugarswitch-inner {
    margin-left: 0;
}
.sugarswitch-checkbox:checked + .sugarswitch-label .sugarswitch-switch {
    right: 0px; 
}
/* end old sugar style*/


/* MILK COLD/HOT SWITCH- ALTERNATIVE CHECKBOX FOR THIS SITE OLD STYLE*/

.milkswitch{
    position: relative; width: 105px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.milkswitch-checkbox {
    display: none;
}
.milkswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #0D0404; border-radius: 20px;
}
.milkswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.milkswitch-inner:before, .milkswitch-inner:after {
    display: block; float: left; width: 50%; height: 29px; padding: 0; line-height: 29px;
    font-size: 17px; color: white; font-family: Trebuchet, Arial, sans-serif; 
    box-sizing: border-box;
}
.milkswitch-inner:before {
    /*content: "Cold";*/
    
    background-color: #ceffff; color: #004e9b;
      text-align: left;
}

#milkswitch-innerEN:before {content: "Cold"; padding-left: 10px;}	
#milkswitch-innerBG:before {content: "Студено"; padding-left: 7px;}

.milkswitch-inner:after {
   /* content: "Hot";*/
    padding-right: 12px;
    background-color: #f7f7f7; color: #6c006c;
    text-align: right;
}

#milkswitch-innerEN:after {content: "Hot";}		
#milkswitch-innerBG:after {content: "Топло";}

.milkswitch-switch {
    display: block; width: 22px; margin: 5.5px;
    background: #0A0909;
    position: absolute; top: 0; bottom: 0;
    right: 70px;
    border: 2px solid #0D0404; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.milkswitch-checkbox:checked + .milkswitch-label .milkswitch-inner {
    margin-left: 0;
}
.milkswitch-checkbox:checked + .milkswitch-label .milkswitch-switch {
    right: 0px; 
}

/* end old milk style*/




/*MILK AND COFFEE TYPE RADIO BUTTONS*/

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

.radio-group {
  color: black;
  background: white;	
  border: solid 3px gray;
  display: inline-block;
  margin: 5px;
  border-radius: 5px;
  overflow: hidden;
}

#radio-group-milk, #radio-group-coffee{
		max-height:57%; 
}

#radio-group-milkBg, #radio-group-milkEn{
		max-height:70%;
}


label + input[type=radio] + label {
  border-left: solid 4px gray;
 
}

/*FOR MILK RADIO BUTTONS ONLY*/
#mlabel1, #mlabel2, #mlabel3, #mlabel4 {
  display: inline-block;
  cursor: pointer;  
  padding: 1px 2px;
  font-weight: bold;
}

input[name="milk_type"]:checked + label{
  color: white;
  background: DimGray;
 display: inline-block;
}


/*FOR COFFEE STRENTH RADIO BUTTONS ONLY*/

#cfelabel1, #cfelabel2, #cfelabel3 {
  display: inline-block;
  cursor: pointer;  
  padding: 2px 10px;
  font-weight: bold;
}

#cfelabel1{ background: #B87660; }
#cfelabel2{ background: #8d3618; }
#cfelabel3{ background: #682711; }

input[name="coffee_range"]:checked + label{ color: white; display: inline-block;}
input[id="coffee_option1"]:checked + label{ opacity:70%;}
input[id="coffee_option2"]:checked + label{ opacity:40%;}
input[id="coffee_option3"]:checked + label{ opacity:60%;}



/*Language Radio Buttons*/

#lang_header{font-family:verdana;}
#radios-lang{
  position:relative;
  
  margin:0 auto;
}

.label_lang{
	
  /*float:left;   if */
  width:12%; padding-top:7px; /* TO ADD ONE LANGUAGE MORE --> width:12%; */
  margin:0 2.3%;
  background:#3f1f1f;
  color:white;
  border-radius:50%;
  cursor:pointer;
 
}

input[name="lang_choice"]:checked + label{
	
-webkit-animation: spin1 1s  linear;
-moz-animation: spin1 1s  linear;
-o-animation: spin1 1s  linear;
-ms-animation: spin1 1s  linear;
animation: spin1 1s  linear;
animation-delay: 1s;    
 border-left: solid 4px #633030;	
 border-right: solid 4px #633030;	
background:black;  color:rgba(255,255,255,.7);

}

@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
} 



/*ADD SLIDER ANIMATION TO LANGUAGE RADIO
#lang_slider{
  position:absolute;
  left:0; top:0;
  width:9%; padding-bottom:4%; padding-top:7%;
  margin:0 2.3% 0 0;
  background:#ffffff;
  transition:transform 1s;
  border-radius:50%;
  animation-timing-function: ease-in-out;
  animation-duration:.5s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}
#lang_bg:checked  ~ #lang_slider{ animation-name: lang_bg; left:2%; opacity:0.5;}
#lang_de:checked  ~ #lang_slider{ animation-name: lang_de; left:16%; opacity:0.5;}
#lang_en:checked  ~ #lang_slider{ animation-name: lang_en; left:30%; opacity:0.5;}
#lang_fr:checked  ~ #lang_slider{ animation-name: lang_fr; left:43%; opacity:0.5;}
#lang_it:checked  ~ #lang_slider{ animation-name: lang_it; left:57%; opacity:0.5;}
#lang_es:checked  ~ #lang_slider{ animation-name: lang_es; left:70%; opacity:0.5;}
#lang_pt:checked  ~ #lang_slider{ animation-name: lang_pt; left:84%; opacity:0.5;}


@keyframes lang_bg{ 30%, 70% { transform:scale(0.5); } }
@keyframes lang_de{ 30%, 70% { transform:scale(0.5); } }
@keyframes lang_en{ 30%, 70% { transform:scale(0.5); } }
@keyframes lang_fr{ 30%, 70% { transform:scale(0.5); } }
@keyframes lang_it{ 30%, 70% { transform:scale(0.5); } }
@keyframes lang_es{ 30%, 70% { transform:scale(0.5); } }
@keyframes lang_pt{ 30%, 70% { transform:scale(0.5); } }*/















.form-control {cursor:pointer;}
	
/* inputs placeholder color  */
.form-control::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: DarkGray;
}

.form-control::-moz-placeholder,
textarea::-moz-placeholder {
  color: DarkGray;
}
.form-control:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: DarkGray;
}


 

footer {
	/*position:fixed; */
	bottom:0; 
	width:100%; height:10px; 
	padding: 10px 0px; 
	background-color:#ffffff; 
	color: white;
}
a.email-address {
      color:Grey;    
}






/*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: #666666 ;
	color: #800040;
	font-weight: bold;
}