/* 20.4.19 copied forward from sidebar example   */
/*  Start of sidebar css     */
/*
  DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Poppins', sans-serif;
/*     background: #fafafa;       */
}




p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;       /*    medium light shade of gray */
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}


.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}

/* ---------------------------------------------------
  SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  width: 100%;
}

#sidebar {
  width: 160px;		 /* was 250px    */
  position: fixed;
  top: 60px;		 /* was 0px    */
  left: 0;
  height: 100vh;
  z-index: 999;

/*   background: #7386D5;    */
/*     background-color:  #007bff;  Primary - blue want Light ivory  #F1F1F1; 	   */
/*     color: #fff;    white want #333333; darkslategray      */
  transition: all 0.3s;
}

#sidebar.active {
  margin-left: -160px; 		 /* was -250px    */
}

#sidebar .sidebar-header {
  padding: 0 20px;			 /*was 20px    */
/*     background: #6d7fcc;    */
/*  background-color: #007bff;  Primary - blue   want Light ivory #F1F1F1;   */

}

#sidebar ul.components {
  padding:  0;		 /* was 20px 0    */
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
/*   color: #fff;   white want black #000000 */
  padding: 0 10px;		 /* was 10px    */
}

#sidebar ul li a {
  padding: 0 10px;		 /* was 10px    */
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {

color:rgba(255,0,255,0.9);

/*   color: #7386D5;       dark lavender    */
/*      background: #fff;  /*  white    */
background:rgba(255,0,255,0.2);

}


#sidebar ul li.active>a,
a[aria-expanded="true"] {
/*   color: #fff;            */
 /*   background: #6d7fcc;	   */
/* 	background-color: #007bff;   Primary - blue  want Light ivory #F1F1F1  */

}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;      /* was 30px   */
 background: #6d7fcc;   /*      */
background-color: #007bff;  /*Primary - blue  want #F1F1F1; Light ivory   */

}

ul.CTAs {
  padding: 20px;		 /* was 20px    */
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}



/* ---------------------------------------------------
  CONTENT STYLE
----------------------------------------------------- */

#content {
  width: calc(100% - 160px); 		 /* was -250px    */
/*    padding: 40px;	   */
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}

#content.active {
  width: 100%;
}

/* ---------------------------------------------------
  MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
      margin-left: -250px;
/*         margin-top: 120px;       */

  }
  #sidebar.active {
      margin-left: 0;
  }
  #content {
      width: 100%;
  }
  #content.active {
      width: calc(100% - 160px);
  }
  #sidebarCollapse span {
      display: none;
  }

}

/* end of sidebar   */

/*    */
/* slider delay from the html example   */
.slideanim {visibility:hidden;}
.slide {
 animation-name: slide;
 -webkit-animation-name: slide;
 animation-duration: 0.25s;           /* set seconds of delay   */
 -webkit-animation-duration: 0.25s;
 visibility: visible;
}

@keyframes slide {
 0% {
   opacity: 0;
   transform: translateY(70%);
 }
 100% {
   opacity: 1;
   transform: translateY(0%);
 }
}
@-webkit-keyframes slide {
 0% {
   opacity: 0;
   -webkit-transform: translateY(70%);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0%);
 }
}

/* end of slider from html example   */


/* Coolmenu   */

.cool a{font:bold 11px Verdana;padding:2px;padding-left:4px;display:block;width:100%;color:black;text-decoration:none;border-bottom:1px solid black;}
.cool a:hover{background-color:black;color:white;}

/* End of Coolmenu   */

/* Panel    */
.panel {
   border: 1px solid 	#17a2b8;/* #f4511e   */
   border-radius:0 !important;
   transition: box-shadow 0.5s;
 }
 .panel:hover {
   box-shadow: 5px 0px 40px rgba(0,0,0, .2);
 }
 .panel-footer .btn:hover {
   border: 1px solid #17a2b8;	 /* #f4511e   */
   background-color: #fff !important;
   color: #17a2b8;	 /* #f4511e   */
 }
 .panel-heading {
   color: #fff !important;
   /*  background-color: #f4511e ;	   */
   background-color:#17a2b8 !important;	 /* Info - light blue   */
 padding: 25px;
   border-bottom: 1px solid transparent;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
 .panel-footer {
   background-color: white !important;
 }
 .panel-footer h3 {
   font-size: 32px;
 }
 .panel-footer h4 {
   color: #aaa;
   font-size: 14px;
 }
 .panel-footer .btn {
   margin: 15px 0;
  /*   background-color: #f4511e;	   */
 background-color:#17a2b8;	 /* Info - light blue     */
   color: #fff;
 }
/* End of Panel    */




.flex-container {
display: flex;
flex-direction: row;
justify-content: center;

flex-wrap: wrap;

 height: 100%;

/*
  justify-content: flex-start;
  align-items: center;
align-items: baseline;
   align-content: center;*/
}

/*  */
/*      */
/* flex-container used in the footer and multiple sections    */
.flex-container > div {
margin: 10px;
}

html {
scroll-behavior: smooth;
}

/* my Button    */

.btn-vgw1{color:#fff;background-color:rgba(255,0,255,0.7);border-color:rgba(255,0,255,0.7)}
/*   button and border same colour  */
.btn-vgw1:hover{color:#fff;background-color:rgba(255,0,255,0.8);border-color:rgba(255,0,255,0.9)}
/*  button darker border darker still  */
.btn-vgw1.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(255,0,255,0.5)}
/*  similar with opacity */
/*  .btn-vgw1.disabled,.btn-info:disabled{color:#fff;background-color:255,0,255,0.7;border-color:255,0,255,0.7}
same as button and border above  */
.btn-vgw1:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}
.btn-vgw1:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}
/*  these two not restyled  */
/*  btn-outline-info not used */

/* mouse over link */
a:hover {
  color: red;
}
/* unvisited link */
a:link {
  color: blue;
  text-decoration:underline;
}


/* 4.10.19 carried forward vgws to vgwalls */
a[href $='.pdf']{padding-left:32px;background:transparent url(images/pdf.gif) no-repeat center left;}
a[href $='.pdf']:hover{padding-left:32px;background:url(images/pdf.gif) no-repeat center left;background-color:#00445c;}
a[href*="hmrc"]{padding-left:43px;background:transparent url(images/hmrc.gif) no-repeat center left;}
a[href*="hmrc"]:hover{padding-left:43px;background:url(images/hmrc.gif) no-repeat center left;background-color:#00445c;}
a[href*="gov"]{padding-left:63px;background:transparent url(images/gov-uk.gif) no-repeat center left;}
a[href*="gov"]:hover{padding-left:63px;background:url(images/gov-uk.gif) no-repeat center left;background-color:#00445c;}
td.gov:hover{background-color:#00445c;color:#fff;}
.gov{}
a[href*="bis"]{padding-left:38px;background:transparent url(images/bis.gif) no-repeat center left;}
a[href*="bis"]:hover{padding-left:38px;background:url(images/bis.gif) no-repeat center left;background-color:#00445c;}
a[href*="sra.org"]{padding-left:39px;background:transparent url(images/sra.gif) no-repeat center left;}
a[href $='sra.org']:hover{padding-left:39px;background:url(images/sra.gif) no-repeat center left;background-color:#00445c;}
a[href $='.doc']{padding-left:53px;background:transparent url(images/msword.gif) no-repeat center left;}
a[href $='.doc']:hover{padding-left:53px;background:url(images/msword.gif) no-repeat center left;background-color:#00445c;}
a[href*="legislation"]{padding-left:62px;background:transparent url(images/legislation.gif) no-repeat center left;}
a[href*="hmrclegislation"]:hover{padding-left:62px;background:url(images/legislation.gif) no-repeat center left;background-color:#00445c;}


/* ------------------- 17.3.16 New Tax tables 4.10.19 carried forward vgws to vgwalls ------------------- */
#content div.block{overflow:hidden;border:1px;border-style:solid;border-color:#ffffff #ffffff #699 #699;background-color:#ffffff;}
 /* h1{margin:0;}     */

#content div p a{text-decoration:underline;}
#content div.block p{width:30%;display:block;float:left;text-align:left;background-color:#ffffff;border:1px;border-style:solid;border-color:#ffffff #699 #ffffff #ffffff;}
#content p.tax{text-align:right;padding-right:10px;}
#stickyheader div.block p{width:30%;display:block;float:left;text-align:left;background-color:#006699;color:#ffffff;border-style:solid;border-color:#ffffff #699 #ffffff #ffffff;margin-left:-1px;font-size:110%;}
#header{z-index:4;}
#stickyheader{z-index:3;}
#otherheader{z-index:3;}
#block{z-index:3;}
#coolmenu{z-index:4;}
#footer{z-index:4;}
#content div.block .tax{width:80px;}
#otherheader div.block .tax{background-color:#006699;color:#ffffff;float:left;}
#otherheader div.block p{background-color:#006699;color:#ffffff;float:left;}
#content #otherheader p{font-size:110%;}
@media all and (max-width:1024px){#otherheader div.block .tax{font-size:110%;}
#otherheader div.block p{font-size:110%;}
#coolmenu{z-index:4;}
#footer{z-index:6;}
#taxguidance{z-index:5;}
#header{z-index:10}
}
@media all and (max-width:480px){#otherheader div.block p{max-height:60px;}
}
#stickyheader div.block .tax{float:left;width:80px;border-style:solid;border-color:#ffffff #699 #ffffff #ffffff;}
#content div.block .taxcalc{margin-left:1.5em;margin-bottom:5px;color:#781351;background:#ffa20f;border:2px outset #d7b9c9;float:right;width:120px;}
#content div.block .taxcalc a{display:block;margin-left:-10px;}
#content div.block .taxnote{margin-left:4px;float:left;width:98.5%;border-color:#ffffff #ffffff #ffffff #ffffff;}
#content div.block .input{margin-left:4px;float:left;width:80px;white-space:nowrap;}
#stickyheader p{background-color:#fff;}
#content{float:left;}
@media all and (min-width:480px){#content div.block p{width:50%;}
#stickyheader div.block p{width:50%;z-index:2;}
}
@media all and (min-width:1024px){#content div.block p{width:60%;}
#content div.block .tax{width:120px;}
#stickyheader{max-width:1000px;margin:0 auto;position:relative;z-index:2;}
#stickyheader div.block p{width:60%;}
#stickyheader div.block .tax{width:120px;}
#content div.block .taxcalc{width:105px;}
}
#stickyheader{width:100%;background-color:#ffffff;padding-top:4em;background-image:url("images/vgwcowide.gif");background-repeat:no-repeat;}
#content div.otherheader p{background-color:#006699;color:#ffffff;width:auto;border:1px solid #ffffff;padding:10px;font-size:110%}
#content div.otherheader h2{background-color:#006699;color:#ffffff;width:auto;border:1px solid #ffffff;padding:10px;font-size:110%}
#content div.otherheader p:hover{background:#daffda;cursor:pointer;border:1px solid black;color:black;}
#content div.otherheader h2:hover{background:#daffda;cursor:pointer;border:1px solid black;color:black;}

 /* 17.3.16 -------------------- end of new tax tables layout---------- 23.8.17 .other header is important I am not clear where #otherheader is used
 in fact used once for national minimum wage ----------- */


 /* ------------------- 4.10.19 carried forward vgws to vgwalls ------------------- */
 .nodecp{list-style:none;}
 .nodec{list-style:none;/**/font-weight:bold;}
 .nodec1{list-style:none;/**/font-weight:bold;margin-left:5em;}
 .nodec2{list-style:none;/**/font-weight:bold;margin-left:10em;}
 .nodec4{list-style:none;/**/font-weight:bold;margin-left:20em;}


.skype{float:right;margin-right:30px; background:url(../images/skype.png) no-repeat}

.contact-map {background:url(../images/contact-map.jpg) no-repeat}
#contact-map {height: 120px; cursor: pointer; background:url(../images/contact-map.jpg) no-repeat}
#contact-sm {height: 120px; cursor: pointer; background:url(../images/contact-sm.jpg) no-repeat}



/*company services tariff*/
.pright{font-family:arial;color:#0000ff;padding-left:10px;padding-right:40px;text-align:right; margin:0 auto;}

/*general bullet points*/
li.indent{margin-left:5em;padding-right:20px;}
li.indent2{margin-left:10em;}
li.indent4{margin-left:20em;}


ul{margin:0 auto;}
.keep-close{margin:0 auto;}


  h1{padding-bottom:3px;}   /*  */