.code-wrapper {
display: flex;
gap: 10px;
background-color: #f5f5f5;
border: 1px solid #f3f3f3;
position: relative;
line-height: 1.1em;
}
.snippet-content pre{
background-color: #f5f5f5;
border: 1px solid #f3f3f3;
}
.code-wrapper .lang {
position: absolute;
right: 0;
font-size: 12px;
margin-right: 10px;
color: #d1d1d1;
text-shadow: 1px 1px 1px #fff;
}
code, kbd, pre, samp, .code-line-numbers span{
font-family: var(--code-font);
font-size:0.88em!important;
}
.code-wrapper .code-line-numbers {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #ffffff;
color: #bbbbbb;
line-height: 1.645em;
font-size: 0.7em;
}
.code-wrapper .code-line-numbers span{
display: inline-flex;
width:30px;
align-items: center;
justify-content: center;
}
.hljs-comment,
.hljs-quote,
.hljs-variable {
color: #009688;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #1487e2;
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #a31515;
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: #2b91af;
}
.hljs-doctag {
color: #808080;
}
.hljs-attr {
color: #f00;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #00b0e8;
}:root { 
--primary-font : "Quicksand", sans-serif;
--title-font : "Quicksand", sans-serif;
--code-font: "Inconsolata", monospace;
--safe-font: "Quicksand", sans-serif;
--icon-font : "icomoon";
--primary-color : #055160;
--primary-link-color: #007e97;
--text-color:#606060;
--strong-text-color:#444444;
--dark-title: var(--strong-text-color);
--white-color:#ffffff;
--text-gray:#999;
--text-gray-light:#b1b1b1;
--link-color: #e20044;
--border-color: #ebebeb;
--text-2xl : 1.2em;
--text-xl : 1.1em;
--title-4xl :1.8em;
--title-3xl :1.5em;
--title-2xl :1.4em;
--title-xl :1.3em;
--title-lg :1.2em;
--line-height-big: 1.7em;
--line-height-normal: 1.5em;
--line-height-small: 1.3em;
--text-normal : 1em;
--text-small-1: 0.9em;
--text-small: 0.8em;
--text-smaller: 0.7em;
--text-weight:400;
--text-bold:700;
--body-color: #f7f7f7;
--nav-text-color : var(--white-color);
--nav-text-disabled :#ff7373;
--border-style : 1px solid var(--border-color);
--box-shadow : 1px 2px 4px 1px #00000005;
--margin-10:10px;
--margin-20:20px;
--margin-30:30px;
--margin-40:40px;
}
body {
color: var(--text-color);
font-family: var(--primary-font);
font-size: var(--text-2xl);
font-weight: var(--text-weight);
}
h1,h2,h3,h4{
color:var(--dark-title); 
font-family: var(--title-font);
font-weight: var(--text-bold);
}
strong{
font-family: var(--primary-font); 
font-weight: var(--text-bold);
}
a{
color: var(--primary-link-color);
text-decoration: none;
}
a:hover{
text-decoration: underline; 
}
.normal-title{
font-family: var(--title-font);
}
h1{
font-size: var(--title-2xl);
}
h2{
font-size: var(--title-xl);
}
h3{
font-size: var(--title-lg);
}
h4{
font-size: var(--title-lg);
}
.small-font{
font-size: var(--text-small);
}
.text-black{
color:var(--strong-text-color);
}
.text-black a{
color:var(--strong-text-color);
text-decoration: none;
}
.text-black a:hover{
text-decoration: underline;
}
.text-gray{
color:var(--text-gray);
}
.text-gray a{
color:var(--text-gray);
text-decoration: none;
}
.text-gray a:hover{
text-decoration: underline;
}
.content-item-list a{
color:var(--strong-text-color);
text-decoration: none;   
}
.sidebar-items a{
color:var(--primary-color);
text-decoration: none;
}
.sidebar-items a{
color:var(--primary-color);
text-decoration: none;
} .btn, button{
font-family: var(--safe-font);
}
.card-header{
font-weight: var(--text-bold);
}
.navbar-toggler{
color: white;
border: 1px solid #ddd;
}
.navbar-toggler:focus{
box-shadow:none;
}
.button{
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size:var(--text-normal);
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-width: var(--bs-border-width);
--bs-btn-border-color: transparent;
--bs-btn-border-radius: var(--bs-border-radius);
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--text-normal);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.button-primary{
--bs-btn-color: var(--white-color);
--bs-btn-bg: #0d6efd;
--bs-btn-border-color: #0d6efd;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: var(--white-color);
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a53be;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--white-color);
--bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd;
}
.page-link{
color:var(--strong-text-color);
font-family: var(--safe-font);
}
.active>.page-link, .page-link.active{
background-color: var(--primary-color);
border-color: var(--primary-color);
} .navbar {
padding:10px 0;
}
.navbar-wrapper{
background-color:var(--primary-color);
margin-bottom:var(--margin-20);
color: var(--white-color);
}
.navbar-brand {
color:var(--white-color);
}
.navbar-brand:focus, .navbar-brand:hover {
color:var(--white-color);
}
#menu-top-navigation > li > a.nav-link, nav.navbar div div ul.navbar-nav li a.nav-link{
font-weight: var(--text-bold);
}
.dropdown-menu .nav-link {
padding: 5px 0;
}
.nav-link {
color:var(--white-color);
font-family: var(--title-font);
font-size: var(--text-small);
}
.nav-link:focus, .nav-link:hover {
color:var(--white-color);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color:var(--white-color);
}
.navbar-nav .dropdown-menu{
color: var(--text-color);
min-width: 240px;
}
.navbar-nav .dropdown-menu .nav-link {
color: var(--text-color);
}
.navbar-nav .dropdown-menu {
padding: var(--margin-20);
}
.navbar-nav .dropdown-menu #loginform p {
display: flex;
flex-direction: column;
}
.navbar-nav .dropdown-menu #loginform p input[type=text], .navbar-nav .dropdown-menu #loginform p input[type=password]{
display: block;
padding: .375rem .75rem;
font-size: var(--text-normal);
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.nav-tabs .nav-link{
color: var(--text-gray);
}
ul.user-menu{
padding:0;
margin: 0;
list-style: none;
}
ul.user-menu li.dropdown ul.dropdown-menu li.menu-item {
padding: 0 var(--margin-20);
border-bottom: var(--border-style);
}
ul.user-menu li.dropdown ul.dropdown-menu li.menu-item:last-child {
border-bottom: none;
}
ul.user-menu li.dropdown ul.dropdown-menu li.menu-item .nav-link{
color: var(--text-color)!important;
} .card {
--bs-card-border-color: var(--border-color);
box-shadow: var(--box-shadow);
} .content-item-list, .content-wrp, .post-content{
padding:  var(--margin-40);
border: var(--border-style);
border-radius: 10px;
box-shadow: var(--box-shadow);
overflow: hidden;
}
.content-item-list{
margin-bottom: var(--margin-20);
}
img.post-thumb, img.size-full {
height: auto;
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
width: 100%;
}
.content-btn-wrp a{
font-family: var(--safe-font);
}
.post-author-info {
font-size: var(--text-small);
padding: 10px 0;
} .single-post .nav-tabs  li a{
margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
border: var(--bs-nav-tabs-border-width) solid transparent;
}
.single-post .nav-tabs li a{
color: var(--text-gray);
font-size: var(--text-small-1);
}
.single-post .nav-tabs a, .single-post .nav-tabs li.active a{
color: var(--bs-nav-tabs-link-active-color);
background-color: var(--bs-nav-tabs-link-active-bg);
border-color: var(--bs-nav-tabs-link-active-border-color);
}
.single-post .nav-tabs a{
display: block;
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
font-size: var(--bs-nav-link-font-size);
font-weight: var(--bs-nav-link-font-weight);
color: var(--bs-nav-link-color);
text-decoration: none;
background: 0 0;
border: 0;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
} .normal-text{
font-size: var(--text-small);
line-height: var(--line-height-normal);   
}
.icon-google:before {
color: #f44242;
}
.social-links {
margin-top:  var(--margin-10);
}
.social-links a{
background-color:#f5f5f5;
padding:5px;
}
.social-links a span{
font-size:20px;
}
.social-links a:hover{
background-color:#ececec;
}
ul.recent-posts li, ul.related-posts li, ul.comments-lists li {
list-style-type: circle;
margin-bottom: 10px;
}
.sidebar-items{
font-family: var(--safe-font);
font-size: var(--text-small);
line-height: var(--line-height-normal);
}
.sidebar-items ol {
list-style: none;
counter-reset: item;
list-style-position: outside;
margin: 0;
position: relative;
}
.sidebar-items ol > li{ 
counter-increment: item; 
margin-bottom: 15px; 
} 
.sidebar-items ol > li:before {
font-family: var(--code-font);
content: counter(item);
background: var(--primary-color);
color: white;
text-align: center;
position: absolute;
left: 0;
font-size: 0.7rem;
margin-left: -5px;
height: 25px;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
ul.comments-lists{
list-style: none;
margin: 0;
position: relative;
}
ul.comments-lists > li{
list-style: none;  
}
ul.comments-lists > li:before {
list-style: none;
font-family: var(--icon-font);
content: "\e912";
position: absolute;
left: 0;
font-size: 20px;
}
.sidebar-items ul.nav-tabs li .nav-link{
font-size: var(--text-small-1);
font-family: var(--safe-font);
} .author-name, .comment-author{
font-family: var(--title-font);
font-weight: var(--text-bold);
}
.author-avatar{
border-radius: 50px;
overflow: hidden;
border: 1px solid #ddd;
float: right;
}
.post-info, .post-info a{
font-size: var(--text-small-1);
color:var(--text-gray);
font-family: var(--safe-font);
margin-top: 5px;
} .comment-form-style{
padding:0;
margin:0;
list-style: none;
}
.post-comment-item{
overflow:hidden;
}
ul.page-comments {
list-style: none;
padding: 0;
margin: 0;
}
ul.page-comments > li,  ul#the-comments-list > li,  ul#the-comments-list > li > ul > li{
list-style: none;
padding: 20px;
border-bottom: var(--border-style);
font-size: var(--text-small-1);
line-height: 1.6;
}
ul#respond li{
list-style: none;
padding: 10px; 
font-size: var(--text-small-1);
position: relative;
font-family: var(--safe-font);
}
.empty-comments li.card-title, .page-comments li.card-title{
margin:0!important;
padding: 15px 20px;
}
.card-footer:last-child {
border-top:none;
}
ul.page-comments li a{
color: var(--text-color);
text-decoration: none;
font-family: var(--safe-font);
}
ul.page-comments li a:hover{
text-decoration: underline;
}
ul.page-comments li .comment-date, ul.page-comments li .comment-date a{
font-size: var(--text-small-1); 
color: var(--text-gray-light);
}
ul.page-comments li.even {
background-color: #fdfdfd;
}
ul.page-comments li .avatar{
border-radius: 100%;
}
.comment-content .reply{
font-size: var(--text-small-1); 
color: var(--text-gray-light);
font-family: var(--safe-font);
}
ul.comment-form-style li:last-child{
border-bottom: none;
}
.comment .comment-respond{
margin-top: var(--margin-10);
border:var(--border-style);
}
.comments-load-btn-wrp {
padding: 0!important;
font-family: var(--title-font);
border-bottom: var(--border-style);
}
.comments-load-btn-wrp .load-more-comment-btn{
font-weight: var(--text-bold);
font-size: var(--text-small);
padding:10px;
border:none;
outline:none;
background-color: transparent;
}
.comments-load-btn-wrp:hover{
background-color: #f9f9f9;
}
.highlight-comment {
background-color: #ffffcc;
animation: fadeOutHighlight 10s ease-out forwards;
}
@keyframes fadeOutHighlight {
0% { background-color: #ffffcc; }
100% { background-color: transparent; }
}
#the-comments-list li.comment ul.children li:last-child{
border-bottom: none;
}
button#cancel-cmt-reply {
display:none;
border: none;
background: transparent;
font-size: larger;
color: var(--text-gray);
position: absolute;
right: 0;
margin-top: -10px;
margin-right: -10px;
cursor: pointer;
}
button#cancel-cmt-reply:hover{
color: var(--strong-text-color);
} .footer-wrap h1, .footer-wrap h2, .footer-wrap h3, .footer-wrap h4{
color: var(--white-color);
}
.footer-wrap{
background-color: var(--primary-color);
color: var(--white-color);
line-height: var(--line-height-small) ;
}
.footer-wrap a{
color: var(--white-color);
text-decoration: none;
}
.footer-wrap a:hover{
text-decoration:underline;
}
.theme-tag-cloud a{
display:inline-block;
margin-right:5px;
} .dw-items .dw_desc{
font-family: var(--safe-font);
}
@media screen and (max-width: 640px) {
ul.comment-form-style li{
padding: 0;
}
.code-wrapper .code-line-numbers{
display: none;
}
.navbar-nav .dropdown-menu {
text-align: center;
padding: var(--margin-10) var(--margin-20);
}
.content-item-list, .content-wrp, .post-content{
padding:  15px;
}
.sidebar-items{
padding:  0;
}
.content-item-list, .content-wrp, .post-content{
border: none;
box-shadow: none;
}
.card{
border:none;
}
.row>*{
padding-right:0;
padding-left:0;
}
ul.page-comments .card-title{
font-size:var(--text-small)!important;
}
.post-author-info {
font-size: var(--text-small);
padding: 10px 0;
color: var(--text-gray);
}
.post-author-info a{
color: var(--text-gray);
}
.post-updated-date{
display:none;
}
.footer-wrap ul li.widget{
padding: 0 var(--margin-20);
}
}
@media screen and (max-width: 992px) {
#menu-top-navigation > li > a.nav-link, nav.navbar div div ul.navbar-nav li a.nav-link{
font-size: var(--text-2xl);
font-weight: 400;
padding:5px 0;
}
ul#menu-top-navigation,  ul.navbar-nav{
margin-bottom: 0!important;
}
#navbarNavDropdown{
border: 1px solid #ddd;
margin-top: 10px;
} 
.dropdown-menu{
--bs-dropdown-border-radius: 0;
}
.sidebar-items .author-avatar img {
height: 30px;
width: 30px;
position: absolute;
border-radius: 100%;
right: 0;
margin-right: 15px;
}
}