:root {
  --space: 2rem;
  --space-xs: calc(var(--space) / 3);
  --space-sm: calc(var(--space) / 2);
  --space-md: calc(var(--space) * 2);
}
.sidebar-nav{
    max-width: 280px;
    --offset: var(--space);
    position: sticky;
    top: var(--offset);
}
.sidebar-nav ul{background:rgb(237 237 237);border:1px solid #d1d1d2;padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.sidebar-nav ul li{
  position: relative;
  display: block;
  float: none;
}
.sidebar-nav ul li a{position: relative; display: block;color:#333;padding:12px; border-bottom: 1px solid #d1d1d1; border-radius: 0; font-size: 16px;}
.sidebar-nav ul li.active a{color:#fff; background-color: #347ab6;}
.sidebar-nav ul li a:hover{background:#347ab6;color:#fff !important;}
.navigation .right-arrow{
  color: #fff;
  background-color: #337ab7;
  border-color:#337ab7;
  border-top-right-radius: 0;
  border-bottom-right-radius:0;
  padding-right: 6px !important;
}
.right-arrow:hover{
  background-color: #2a669b;
  border-color: #2a669b;
}
.right-arrow:hover::before{
  border-left: 14px solid #2a669b;
}
.right-arrow::before{right: 1px;
  position: absolute;
  width: 0;
  height: 0;
  content: " ";
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 14px solid #337ab7;
  top: 0;
}
.navigation .left-arrow{
  color: #fff;
  background-color: #337ab7;
  border-color:#337ab7;
  border-top-left-radius: 0;
  border-bottom-left-radius:0;
  padding-left: 6px !important;
  position: relative;
}
.left-arrow:hover{
background-color: #2a669b;
border-color: #2a669b;
}
.left-arrow:hover::after{
  border-right: 14px solid #2a669b;
}
.left-arrow::after{left: -15px;
  position: absolute;
  width: 0;
  height: 0;
  content: " ";
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-right: 14px solid #337ab7;
  top: 0;
}
img{max-width:100% !important;width:auto !important}
#post  h1 {color: #467ABD;margin: 30px 0;font-weight: 500;font-size: 30px !important;}
#post .entry h2 {font-size: 30px !important;}
#post .entry p {margin-bottom: 25px !important;}
#post .entry > h1{ margin-top:0px}
#post .entry h3 {font-size: 24px !important;}
.entry > ul{margin-left:-10px;}
.entry ul li {padding: 2px 0 !important;line-height: 1.5 !important;}
.entry > ul > li::marker {  color: #3F76B8;}
#post{margin-bottom:30px;padding-right: 50px;}
#post .entry{padding: 20px 0px;margin-bottom: 10px;  }
#post .entry p,#post p {font-size: 18px;}
#post .entry ul {padding-left: 25px;margin-top: 10px;}
#post .entry figure {
  text-align: left;
}
.blog-section{font-size: 18px !important;}
.toc{
  background-color: rgba(224, 244, 255, 0.6) !important
}
.toc #TableOfContents ul{
  margin-left:-40px !important;
  list-style-type: none !important;
}
.toc #TableOfContents ul li a{
  background-color: transparent !important;
  color:#333 !important;
  text-decoration: underline !important;
  border-bottom:0px !important;
  display: block;
  padding:5px 15px !important;
  font-size: 18px !important;
}
.toc #TableOfContents ul li > ul{
  display: none;
}
.toc #TableOfContents ul li a:hover{
  color:#555 !important;
}
.toc #TableOfContents ul li:hover::before{
  background-color: transparent !important;
  border: 0 !important;
  content: "";
}
@media only screen and (max-width: 1520px)
{
  .sidebar-nav .nav-pills li a {
      font-size: 16px !important;
  }
  #post{
    padding-right:0px !important
  }
}
@media only screen and (max-width: 1300px){
  .toc #TableOfContents ul li a{
    font-size: 13px !important;
  }
}
@media only screen and (max-width: 768px){
  .sidebar-nav .nav-pills li.active::before , .sidebar-nav .nav-pills li:hover::before{
    right: 0px  !important;
    position: absolute;
    width: 0;
    height: 0;
    content: " ";
    border: 0px !important
  }
  .sidebar-nav .nav-pills {
    margin-bottom:  20px;
  }
  .entry{
    text-align:  left !important;
  }
  .sidebar-nav{
    max-width:100%;
    --offset: var(--space);
    position: relative;
    top:0;
  }
  .blog-header{background:#07172B;margin-bottom:30px; padding:30px 0px;}#post img{max-width:300px;text-align: center; }
  .blog-header h1{margin-top:0px; margin-bottom:0;text-align: center;}
  #post h1 {font-size: 24px !important;}
  #post .entry h2{
    font-size: 24px !important;
  } 
  #post .entry h3{
    font-size: 20px !important;
  }
  #post .entry h4{
    font-size: 16px !important;
  }  
  .blog-section p,.related-posts p,#post .entry p,.blog-section{font-size:14px !important}
}