.breadcrumbs {
  display:block;
  box-sizing: border-box;
  background-color: #EAEEF6;
 /* background: rgba(124,157,247,0.8);*/
  line-height:1.2em;
  width:100%;
  overflow:hidden;
  margin:0;
  padding:10px 15px;
  border-top:0px solid #dedede;
  border-bottom: 0.5px solid #dedede;
  font-size:80%;
  color:#191919;
  font-weight:500;
  text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
  white-space:nowrap;
  & a {
    display:inline-block;
    text-decoration:none;
    transition:all .3s ease-in-out;
    color: #111;
    font-weight:400;
    &:hover{
      color:#6019E3;
    }
  }
  & svg{
  width:20px;
  height:20px;
  vertical-align:-4px;
    & path{fill:#111}
  }
}
/*=== Post Title ===*/
.item-view .post-title {color:var(--color-primary-title);margin:15px 0px;line-height:1.7;font-weight:400;font-family: var(--font-ssp); display:block}
.item-view .post .post-timestamp .timestamp-link {
  left: 0;
  width: none;
  height: 20px;
  font-size: 0.9em;
  color: var(--main-font-color-link);
  position: relative;
  font-weight: bold;
  top: -15px;
  margin-left: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  }
      
  





.post-body > img {
  margin-left: 15px;
  width: calc(100% - 30px);
  }
.item-view .TagView {
 margin: 15px 0px;                       
display: none;
padding: 5px 7px;
 & svg {
   width: 25px;
   height: 25px;
   margin-right: 5px;
 }
  & a {
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 3px;
    z-index:3;
    position: relative;
    background: #D00AFF;
    }
}
/* H1 to H6 
------------------------------*/ 
.item-view .post-body > h1, 
.item-view .post-body > h2, 
.item-view .post-body > h3, 
.item-view .post-body > h4, 
.item-view .post-body > h5, 
.item-view .post-body > h6 {
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-family: var(--font-ssp);
  color: var(--color-primary-title);⁰
  } 
.item-view .post-body > h1 {
  font-size: 35px;
  line-height: 1.5;
  }

.item-view .post-body > h2 {
  font-size: 33px;
  line-height: 1.4;
  }
 .item-view .post-body > h3 {
  font-size: 31px;
  line-height: 1.3;
  }

.item-view .post-body > h4 {
  font-size: 29px;
  line-height: 1.2;
  }

.item-view .post-body > h5 {
  font-size: 26px;
  line-height: 1.1;
  }

.item-view .post-body > h6 {
  font-size: 24px;
  line-height: 1.0;
  }

/* H1 to H6 Tag Code 
----------------------------*/
.item-view .post-body > h1 code {
  background:#767eeb;
  color:#fff;
  box-sizing: border-box;
  padding: 4px 4px;
  border-radius: 5px;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.item-view .post-body > h2 code {
  background:#767eeb;
  color:#fff;
  box-sizing: border-box;
  padding: 3px 3px;
  border-radius: 5px;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.item-view .post-body > h3 code {
  box-sizing: border-box;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;    
  letter-spacing: -0.05rem; 
  opacity: 0.3;
  }
.item-view .post-body > h5 code {
  box-sizing: border-box;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;    
  letter-spacing: -0.05rem; 
  opacity: 0.3;
}
.size-custom ol li,
.size-custom ul li,
.size-custom p,
.item-view .post-body > ol li,
.item-view .post-body > ul li,
.item-view .post-body > p {
  font-size: 1.1em;
  font-weight: 400;	
  line-height: 1.7;
  color: #243757;  
  margin-top: 5px;
  margin-bottom: 20px;
  display: inline-block;
  & a {
    color: #434DED;
    &:focus {
      text-decoration: underline;
    }
  }
 /* font-size: 16px;
  color: #002233;
  margin-bottom: 30px;
  display: inline-block;
  font-family: var(--font-ssp);*/
}
.item-view .post-body > .all a[target=_blank]::after,
.post-body p a[target=_blank]::after{
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 3px;
  position: relative;
}
.all code,
.item-view .post-body ol.code li code,
.item-view .post-body ul.code li code,
.item-view .post-body p code {
  color: #202763;
  font-size: 14px;
  margin: 0px 2px;
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(111, 149, 252,0.3);
  
  box-sizing: border-box;
  font-family: 'Monospace', sans-serif;
}

/*=== Tag hr ===*/
.item-view .post-body > hr {
  width: 100%;
  border: 1px #aeaafe solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  } 

/*=== Tag Img ===*/
.item-view .post-body > img {
  max-width: 100%;
  border-radius: 5px;
  }
.content-code {
  height: 500px;
  width: 80%;
  margin: 5px auto;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  color: #6f6f6f;
  background: #767eeb;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #000000 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #000000 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
}





 




/* Code Copy
===°===°===°====°==°===°===°===*/
.frex-language {margin:10px 0px;padding:0px 15px;}
.frex-language pre code.language-css.css::before,
.frex-languag pre code.language-css.scss::before,
.frex-language pre code.language-css.sass::before,
.frex-language pre code.language-html::before,
.frex-language pre code.language-js::before {
  z-index: 5;
  color: #111;
  margin-left: 0px;
  margin-top: -40px;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
}
.frex-language pre code.language-css.css::before {
  content:"Css";
}
.frex-language pre code.language-css.scss::before {
  content:"Scss";
}
.frex-language pre code.language-css.sass::before {
  content:"Sass";
}
.frex-language pre code.language-html::before {
  content:"Html";
}
.frex-language pre code.language-js::before {
  content:"Js";
}
.frex-language .code-header{
  width: 100%;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  text-align:right;
  background: rgba(111, 149, 252,0.15);
  border:1px solid var(--bg-line-alt);
  font-family:Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  display: flex;
  align-items: center;
  justify-content: end;
}
 
.frex-language .code-header a{
  border-top-right-radius:5px;
  font-size:15px;
  display: flex;
  cursor:pointer;
  border-left:1px solid var(--bg-line-alt);
  box-sizing:border-box;
  padding: 5px 5px 5px 5px;
  & svg {
  width: 25px;
  height: 25px;
  margin:0;
  }
}
.frex-language .code-header button {
  border-top-right-radius:5px;
  font-size:15px;
  border: none;
  display: flex;
  cursor:pointer;
  border-left:1px solid var(--bg-line-alt);
  box-sizing:border-box;
  padding: 5px 5px 5px 5px;
  & svg {
  width: 25px;
  height: 25px;
  margin:0;
  }
}
.frex-language .code-header a:hover{
  background: rgba(227, 255, 250,0.7);
  transition:all 0.1s linear;
} 

.frex-language .language-css,
.frex-language .language-html,
.frex-language .language-js {
  user-select:none;
  -ms-user-select:none;
  -moz-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
}
.frex-language code[class*="language-"],
.frex-language pre[class*="language-"] {
  font-size: 0.9em;
  letter-spacing:.02rem;
  line-height:1.4;
  color:black;
  background:none;
  text-shadow:0 1px white;
  font-family:Consolas,Monaco,'Fredoka One',cursive;
  text-align:left;
  white-space:pre;
  word-spacing:normal;
  word-break:normal;
  word-wrap:normal;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens:none;
  hyphens:none;
  background: rgba(111, 149, 252,0.05);
} 
.frex-language pre[class*="language-"]::-moz-selection,
.frex-language pre[class*="language-"]::-moz-selection,
.frex-language code[class*="language-"]::-moz-selection,
.frex-language code[class*="language-"]::-moz-selection {
  text-shadow:none;
  background:#111;
} 
.frex-language pre[class*="language-"]::selection,
.frex-language pre[class*="language-"]::selection,
.frex-language code[class*="language-"]::selection,
.frex-language code[class*="language-"]::selection {
  text-shadow:none;
  background:#111;
}
@media print{code[class*="language-"],
             pre[class*="language-"] {
               text-shadow:none;
             }
            } 
.frex-language pre[class*="language-"]{
  padding:.70em;
  margin:0;
  overflow:auto;
  border:1px solid var(--bg-line-alt);
  border-top:0;
  box-sizing:border-box;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
} 
.frex-language :not(pre)>code[class*="language-"],
pre[class*="language-"]{
  background: rgba(227, 255, 250,0.7);
}
:not(pre)>code[class*="language-"]{
  padding:.1em;
  border-radius:.3em;
  white-space:normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata{color:slategray} 
.token.punctuation{color:#999}
.namespace{opacity:.7} 
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted{color:#905}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted{color:#690}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string{color:#9a6e3a}
.token.atrule,
.token.attr-value,
.token.keyword{color:#07a}
.token.function,
.token.class-name{color:#DD4A68} 
.token.regex,
.token.important,
.token.variable{color:#e90} 
.token.important,
.token.bold{font-weight:bold}
.token.italic{font-style:italic}
.token.entity{cursor:help}












/*== Lisensi ==*/
.Frasa-lisensi-Article {
  margin: 20px 0px;
  position: relative;
  padding: 5px 15px;
  & > p {
    color: #444;
    font-size: 13px;
    font-weight: 400px;
    line-height: 1.5;
    & > a {
      color: var(--color-primary-link);
      font-size: 13px;
      font-weight: 700;
      &:focus,&:hover{
        text-decoration: underline;
        }
      }
    }
  & > span {
    top: 20px;
    color: #444;
    font-size: 13px;
    font-weight: 500px;
    line-height: 1.5;
    position: relative;
    }
  }
 .item-view .TimerPage {
  margin-top: 30px;
  & .DateTime {
    font-size: 13px;
    }
  & p {
    font-size: 12px;
    }
  }