#headerCookieBar{
    padding:10px; 
    background-color:#333;
    color:#BBB;
    text-align:center;
}

#headerGrayBar{
    position: relative;
    height:30px; 
    background-color:#4c5258; 
    color:#FFF;
    font-size:13px;
}

#headerGrayBar a{
    color:#FFF;
    text-decoration:none;
}
#headerGrayBar a:hover {
    text-decoration:underline;
}
     
#headerRedBar{
    display: flex; 
    flex-direction: row; 
    justify-content:space-around; 
    align-items:center; 
    align-content:center; 
    height:35px; 
    background-color:#A41826; 
    color:#FFF; 
    font-size:13px;
}
#headerRedBar a {
    color: #FFF;
    text-decoration:none;
}
#headerRedBar a:hover {
    text-decoration:underline;
}

#containerHeaderLogoSearch{
    min-width:700px;
}

#containerHeaderLogoSearch h1.logo{
    height:40px;
    width:210px;
    background-image: url('/images/anglialive.png');
    background-position:left;
    background-repeat:no-repeat; 
    float:left;
}

#containerHeaderLogoSearch #containerSearchBasketPreview{
    height:40px;
    min-width:520px;
    width: calc(100vw - 265px);
    float:left; position:relative; 
    padding-top:5px;
    z-index:0;
}

#containerHeaderLogoSearch #siteSearch {
    float:left;    
}

#containerHeaderLogoSearch #siteSearch input {
    margin:0;
    padding:0;
    padding-left:10px;
    border:1px solid #4C5258;
    background-color:transparent;
    width: calc(100vw - 710px);
    min-width:100px;
    box-sizing: content-box;
    height:35px;
    line-height:35px;
    font-size:120%;
}

#containerHeaderLogoSearch #siteSearch input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #888;
}
#containerHeaderLogoSearch #siteSearch input::-moz-placeholder { /* Firefox 19+ */
  color: #888;
}
#containerHeaderLogoSearch #siteSearch input:-ms-input-placeholder { /* IE 10+ */
  color: #888;
}
#containerHeaderLogoSearch #siteSearch input:-moz-placeholder { /* Firefox 18- */
  color: #888;
}

#containerHeaderLogoSearch #siteSearch button {
    margin:0;
    padding:0;
    border:1px solid #A41826;            
    background-color:#A41826;
    width:55px;
    color:#FFF;
    cursor:pointer;
    position:relative; 
    box-sizing: content-box;
    height:35px;
    line-height:35px;
    font-size:120%;
}

#containerHeaderLogoSearch #siteSearch button:hover {
    background-color: #8A1C26;
}


#containerHeaderLogoSearch #containerLoginRegister{
    position:absolute; 
    right:200px; 
    width:150px; 
    font-size:12px;
}

#containerLoginRegister a{
    color:#212529;
    text-decoration:none;
}
#containerLoginRegister a:hover{
    color:#A41826;
}

#containerLoginRegister .tooltip{
    white-space:nowrap;
}

#containerHeaderLogoSearch #containerBasketPreview{
    position:absolute;
    right:0; 
    width:200px; 
    font-size:12px;
}

#containerBasketPreview a {
    color:#333;
}

#containerBasketPreview a:hover {
    color:#A41826;
}

#containerBasketPreview > a div{
    display:inline-block;
    float:left; 
    width:73px;
}


#containerBasketPreview #btnCheckout {
    display: inline-block;
    cursor:pointer;
    font-size:13px;
    color: #FFF;
    width: 80px;
    height:35px;
    padding-top:6px;
    text-align:center;
    border: 1px solid #A41826;
    border-radius: 2px;
    text-decoration:none;
    background-color: #A41826;
    color: #FFF;
}

#containerBasketPreview #btnCheckout:hover {
    background-color: #8A1C26;
    border:1px solid #8A1C26;
}



#containerHeaderMsgs{
    font-size:13px;
    color:#A41826;
    display:block;
    width: 100vw;    
}
#containerHeaderMsgs #headerMsgs{
    margin-top:20px;
    overflow-y:auto;
    max-height:20vh;
    border:1px solid #ccc;
    display:none;
}
#containerHeaderMsgs #headerMsgsShow, #containerHeaderMsgs #headerMsgsHide{
    margin-top:10px;
    margin-left:auto; 
    margin-right:auto; 
    padding: 5px;
    text-align:center;
}
#containerHeaderMsgs #headerMsgsShow:after, #containerHeaderMsgs #headerMsgsHide:after{
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .5em solid;
    border-right: .5em solid transparent;
    border-bottom: 0;
    border-left: .5em solid transparent;
}
#containerHeaderMsgs #headerMsgsHide:after{
    border-top: 0;
    border-bottom: .5em solid;
}


#containerHeaderMsgs #headerMsgsShow{
    display:none;
}



.centerVerticaly{
    margin: 0;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}





/* --------------------------- FORM Elements --------------------------- */

/*Toggle Slider  
  Usage:

  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label><br><br>

  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
*/
.switch {
  position: relative;
  display: block;
  width: 35px;
  height: 20px;
  padding:0;
  margin:0;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid #FFF;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #A5D978;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*END Toggle Slider  

/* END --------------------------- FORM Elements --------------------------- END */


/* --------------------------- JQuery UI Auto Complete --------------------------- */
/* highlight results */
.ui-autocomplete b.ui-state-highlight{
    background:none;
    border:0;
    padding:0;
    font-weight:normal;
    color:#A41826 ;
    
}
.ui-autocomplete a.ui-state-active b.ui-state-highlight{
    font-weight:bold;
}
.ui-autocomplete a.ui-state-active{
    color:#333;
}

.ui-autocomplete .ui-menu-item .ui-state-focus {
    background:none;
    border:none;
    font-weight:normal;
}

.ui-widget-content {
    border: 1px solid #4c5258;
    /*9020 required so auto suggest result in front of containerHeaderMsgs. eg basket errors then do a search 18-7-19*/
    /*if jqgrid shows in front override specific grid with .ui-jqgrid {z-index: 100;} see orders.aspx for example*/
    z-index:9020;
}
.ui-widget-contentStuck {
    position:fixed;
}

.ui-autocomplete .ui-menu-item
{
    font-size:0.8em;
    color:#666;
    border-bottom: dotted 1px #CCC;
}
.ui-autocomplete .ui-menu-item:hover
{
    background:#F3F3F3;
    border-left: 1px solid #4c5258;
    border-right: 1px solid #4c5258;
}
.ui-autocomplete .ui-menu-item a:hover
{
    text-decoration:none;
}
.ui-autocomplete .ui-state-focus
{
	color: #A41826;
}
.ui-autocomplete span.ui-autocomplete-subheading
{
    color:#999;
}
.ui-autocomplete .ui-autocomplete-subheading .instock{
    color:#7BC637;
}
.ui-autocomplete .ui-autocomplete-subheading .duestock {
    color:#f89306;
}
 
/* loading - the AJAX indicator */
.ui-autocomplete-loading {
    background: white url('/css/themes/ui-anglia/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
/* END --------------------------- JQuery UI Auto Complete --------------------------- END */

@media (max-width:960px) {
    #containerHeaderLogoSearch h1.logo{
        width: 170px;
    }
    #containerHeaderLogoSearch #siteSearch input{
        width: calc(100vw - 650px);
    }
    #containerHeaderLogoSearch #containerSearchBasketPreview{
        width: calc(100vw - 220px);
    }
}


#CookieConsent {
    padding: 1.5em;
    color: #eee;
    background-color: #2a2a2a;
    font-size: 1.1em;
}

#CookieConsent div:first-child {
    font-size: 1.2em;
}

#CookieConsent div:nth-child(2) {
    margin-bottom: 0.75em;
}

#CookieConsent .btn-primary {
    color: #fff;
    background-color: #629E2C;
    border: 1px solid #629E2C;
}

#CookieConsent .btn-primary:hover {
    background-color: #4A8118;
    border: 1px solid #4A8118;
}

#CookieConsent .btn-secondary {
    color: #fff;
    background-color: #2a2a2a;
    border: 2px solid #629E2C;
}

#CookieConsent .btn-secondary:hover {
    background-color: #4A8118;
    border: 2px solid #4A8118;
}