/*
Theme Name: BrowserHow Neve Child
Theme URI: https://browserhow.com
Template: neve
Author: SolvyOne Digital
Author URI: https://solvy.one
Description: This is the child theme for BrowserHow.
Version: 1.0.0.1647497818
Updated: 2022-03-17 11:46:58
*/

.comments-title {
	margin-top: 40px;
    margin-bottom: 30px;
	font-size: 1.3em;
	line-height: 1.2em;
	font-weight: 600;
}
#comments .comment-reply-title {
	margin-bottom: 30px;
	margin-top: 40px;
}
#comments textarea, #comments input {
	border-radius: 10px;
}
.comment-content {
		flex-grow: 1;
	}
.nv-comment-content p{
	margin: 0px;
	margin-bottom: 15px;
}
.comment-respond {
	border-radius: 10px;
}
.comment-form {
	border-radius: 10px;
    padding: 20px;
    background: var(--nv-light-bg);
}
span.comment-notes {
	margin-bottom: 0px;
	font-size:0.9em;
}
.avatar {
	float: left; 
	margin: 5px 20px 10px 0; 
	min-width: 96px; 
	min-height: 96px; 
	border-radius: 10px;
	border: 1px solid var(--nv-light-bg);
	background-color: #fff;
	padding: 2px;
}
.nv-author-biography {
	display: block;
	background: var(--nv-light-bg);
	padding: 20px;
	font-size: 90%;
	border-radius: 10px;
}
.entry-content p{
	margin-bottom:0;
	margin: 30px 0;
}
.entry-content li{
	margin: 30px 0;
	position: relative;
}

.entry-content h2, .entry-content h3{
	margin: 30px 0;
}

.entry-meta-date {
	font-size: 80%;
}
.updated-byline {
	font-size: 80%;
}

.updated-byline a {
	text-decoration: underline;
}

.nv-single-post-wrap>div:first-child {
    margin-top: 20px;
	margin-bottom: 20px;
}

.nv-comment-header .vcard a {
	font-size:80%;
}

.nv-comment-content {
	display: block;
	background: var(--nv-light-bg);
  	padding: 10px;
  	font-size: 90%;
	border-radius: 10px;
	margin-left: -10px;
}
.nv-comment-header {
	margin-bottom: 10px;
}
.nv-meta-list {
    margin-bottom: 20px;
    font-size: 12.5px;
	color: var(--nv-c-1);
}
.updated {
		color: var(--nv-text-color);
}
@media (min-width: 960px){
	.nv-sidebar-wrap.nv-right {
    padding-left: 20px;
	}
	.col {
		margin: 0;
	}
}
@media (max-width: 560px){
	/**** contact form 7 ***/
		.wpcf7 input[type="text"],
		.wpcf7 input[type="email"],
		.wpcf7 textarea
		{
			width: 100%;
		}

/***********/

}
.nv-index-posts {
    margin-top: 30px;
}
.nv-sidebar-wrap {
	padding: 20px 15px;
	flex-grow: 0;
}
.nv-page-title-wrap {
    margin-top: 30px;
}

.icon-align { 
	width: 24px;
	height: 24px;
    margin: auto 10px auto 0px;
    border-radius: 2px;
}
.th-wrap img, .img-wrap img, .border-radius-10{
	border-radius: 10px;
}

.code{
	background:var(--nv-light-bg);padding:4px 3px;color: var(--nv-text-color);font-family:monospace; line-height: 14px; border-radius: 3px;
}

.keyboard-button{background:var(--nv-light-bg);padding:2px 5px; color: var(--nv-text-color);border-style: outset; border-width: 1px 3px 3px 1px; border-radius: 5px; font-size: 0.9em;
}
.command-button{font-size: 0.9em;font-family: arial;background: var(--nv-light-bg);padding: 0px 6px;color:var(--nv-text-color);border:var(--nv-c-1) 1.5px solid;border-radius: 3px; font-weight:bold; display: inline-block; line-height: 20px;
}
.download-button{
	display:block;
	text-align:center;
	margin-bottom:30px;
}
.download-button a {background-color:var(--nv-light-bg); border:1px solid var(--nv-secondary-accent); color: var(--nv-secondary-accent); padding:8px 0px;font-weight:bold;width:100%;max-width:280px;text-align:center;text-decoration:none;display:inline-block;font-size:1em;margin:5px 0;border-radius:10px;}

.download-button a:hover, {border-bottom:none;background-color: var(--nv-secondary-accent);color:var(--nv-light-bg);border:1px solid var(--nv-secondary-accent);}

.note-box{
	display: flex;
    background: var(--nv-light-bg);
    padding: 12px 5px;
    margin: 2em auto;
    font-size: 90%;
	color: var(--nv-text-color);
	border-left:5px solid #46b6f6;
	border-radius: 5px;
}

.alert-box{
	display: flex;
    background: var(--nv-light-bg);
    padding: 12px 5px;
    margin: 2em auto;
    font-size: 90%;
	color: var(--nv-text-color);
	border-left:5px solid #f23535;
	border-radius: 5px;
}

.tip-box{
	display: flex;
    background: var(--nv-light-bg);
    padding: 12px 5px;
    margin: 2em auto;
    font-size: 90%;
	color: var(--nv-text-color);
	border-left:5px solid #f7b33e;
	border-radius: 5px;
}
.related-links{
    display: flex;
    background: var(--nv-light-bg);
    padding: 12px 5px;
    border-left:5px solid #58368a;
    margin: 2em auto;
    font-size: 90%;
	border-radius: 5px;
}
.tab-item-thumbnail img {
	width: 80px;
	height: 80px;
	float: left;
	margin: 0 0.75em 0 0;
}
.tab-item-title a {
	color: var(--nv-text-color);
}
.alx-tabs-container ul li {
    width: 300px;
		font-size:80%;
    padding: 10px 0px;
}

.author-name a{
	color:  var(--nv-text-color);
}

article.nv-non-grid-article a {
    color: var(--nv-text-color);
}
.entry-summary {border-left:4px solid var(--nv-c-1); line-height: 1.8em;padding-left: 10px; text-align: left;font-size:95%}

.entry-summary h2 {
	font-size: 1.2em;
	margin-bottom: 15px;
}

#ez-toc-container li, #ez-toc-container ul, #ez-toc-container ul li, .ez-toc-widget-container, .ez-toc-widget-container li{background:0 0;list-style:none;line-height:2em;overflow:hidden;z-index:1;}

/* --------------------------------------------------------------------------
   Table of contents (server-rendered; replaces easy-table-of-contents)
   --------------------------------------------------------------------------
   The markup comes from a mu-plugin that reuses ez-toc's class names, so the
   structure above still applies - but the plugin's stylesheet is gone, and the
   design went with it. All that was left was ez-toc's reset, whose
   `line-height: 2em` gives ~39px rows for a 13px link. This gives the TOC a
   real surface and pulls the row pitch back.

   Colours use Neve's variables, matching how the rest of this file is written,
   so the TOC follows the theme's accent rather than hard-coding a tone.
   -------------------------------------------------------------------------- */
/* Neve styles the container through `div#ez-toc-container` (1,0,1), which outranks
   a plain `#ez-toc-container` (1,0,0) - the panel silently kept Neve's values and
   measured 0px radius and 0px padding. `body div#…` (1,0,2) sits above it. This is
   the same reason wpaq's block opens with that prefix. */
body div#ez-toc-container {
  background-color: var(--nv-light-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 1rem 1.125rem;
  margin: 0 0 1.75rem;
}
#ez-toc-container .ez-toc-title-container p.ez-toc-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nv-text-color);
  opacity: 0.65;
  margin: 0;
}
#ez-toc-container ul.ez-toc-list {
  margin: 0.625rem 0 0;
  padding: 0;
}
#ez-toc-container ul.ez-toc-list ul {
  margin: 0.125rem 0 0.125rem 1rem;
  padding: 0;
}
/* Beats the `line-height: 2em` in the reset above; same id specificity but this
   one is later in the file and sets it on the item rather than the list. */
#ez-toc-container ul.ez-toc-list li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}
/* display:block matters. On an inline element vertical padding paints but does
   not change the line box, so the row height would stay governed by the font
   rather than by the padding below. */
#ez-toc-container ul.ez-toc-list a.ez-toc-link {
  display: block;
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--nv-primary-accent);
  text-decoration: none;
}
#ez-toc-container ul.ez-toc-list a.ez-toc-link:hover {
  text-decoration: underline;
}
#ez-toc-container ul.ez-toc-list ul a.ez-toc-link {
  font-size: 0.8125rem;
}
/* Deep links would otherwise land underneath the fixed header. */
.ez-toc-section {
  scroll-margin-top: 6rem;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/***********/
table {
	font-size: 100%;
}
td, th { 
	padding: 20px 10px;
}
.disclosure {font-size: 12px;line-height: 20px;display: block;border: 1px solid var(--nv-light-bg);padding: 5px; border-radius: 5px;}
.widget-title {
	text-align: center;
}

.disclosure a {
	text-decoration: underline;
}

.rank-math-list-item{
	padding: 0 0.8em;
    margin: 1.5em 0;
    border-left: 5px solid var(--nv-primary-accent);
	border-radius: 10px;
}
.rank-math-list-item h3{
	font-size: 120%;
	margin-bottom: 1em;
}
.rank-math-answer p {
	margin-bottom: 0px;
}
/***********/
.sticky-footer {
    text-align: center;
    margin: 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
    background-color: #00000008;
    border-top: 2px solid #b2b2b224;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
	overflow: visible;
}
.sticky-header {
    text-align: center;
    margin: 0;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    background-color: #00000008;
    border-bottom: 2px solid #b2b2b224;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
	overflow: visible;
}
.sticky-close-bottom {
    cursor: pointer;
    color: #000;
    border: 1px solid #000;
    background: #fff;
    line-height: 14px;
    display: inline-block;
    font-size: 12px;
    font-family: arial,sans-serif;
    padding: 0px 3px;
    position: absolute;
    top: 2px;
    right: 2px;
}

.sticky-close-left {
    cursor: pointer;
    color: #000;
    border: 1.5px solid #000;
    background: #fff;
    line-height: 14px;
    display: inline-block;
    font-size: 12px;
    font-family: arial,sans-serif;
    padding: 0px 3px;
    position: absolute;
    top: -20px;
    left: 0px;
}

.sticky-close-right {
    cursor: pointer;
    color: #000;
    border: 1.5px solid #000;
    background: #fff;
    line-height: 14px;
    display: inline-block;
    font-size: 12px;
    font-family: arial,sans-serif;
    padding: 0px 3px;
    position: absolute;
    top: -20px;
    right: 0px;
}


/* @media (min-width: 1530px) { */
	.sticky-sidebar-left{
		position: fixed;
		margin: 0;
		flex-wrap: wrap;
		left: 15px;
		top: 60px;
		z-index: 99999;
		display: flex;
		overflow: visible;
		opacity: 1;
		transition: left 750ms ease 0s;
	}
	.sticky-sidebar-right{
		position: fixed;
		margin: 0;
		flex-wrap: wrap;
		right: 15px;
		top: 60px;
		z-index: 99999;
		display: flex;
		overflow: visible;
		opacity: 1;
		transition: right 750ms ease 0s;
	}
/* } */

.sticky-footer .fuse-slot {
    transform: translate3d(0,0,0);
}

.sticky-header .fuse-slot {
    transform: translate3d(0,0,0);
}
.footer-ad {
	padding: 30px 0;
}
.ads-label {
	margin: auto;
}
.ads-label::before {
	content: 'Advertisements';
	font-size: 8px;
    letter-spacing: 1px;
    clear: both;
    font-weight: 400;
	text-transform: uppercase;
	color: var(--nv-c-1);
	margin: auto;
    text-align: center;
    padding-bottom: 10px;
}
/* Intro paragraph carrying the post's manual excerpt, shown above the table of
   contents. Deliberately carries no typography of its own: an earlier version set a
   font size, colour and opacity, which made it disagree with the Customizer's body
   styles instead of following them. Only the spacing is set here. */
.nv-content-wrap .oc-amp-intro {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* The content row's top gap. Neve sets a 60px top margin on .entry-content and a
   60px top padding on the sidebar, which with the intro's own margin put 64px of
   nothing between the byline and the first words and left the sidebar's first block
   below the article's. Both columns are pulled to the same line here, for every
   single post rather than only those carrying an intro.

   The two need different properties: .entry-content carries a 60px margin, so that
   one is a margin; .nv-sidebar-wrap carries a 60px padding on a box that already
   sits higher, so its 22px is padding. Setting a margin on the sidebar as well would
   place it 22px below the article instead of level with it. */
.single-post .nv-content-wrap.entry-content {
  margin-top: 22px;
}
.single-post .nv-sidebar-wrap {
  padding-top: 22px;
}

/* The lead line sits above the TOC panel now, so it is an ordinary paragraph: it
   inherits the theme's typography and only needs spacing. Carrying its own font size
   and colour would put it back in conflict with the Customizer's styles. */
.nv-content-wrap .ez-toc-lead {
  margin: 0 0 0.75rem;
}

/* Comment form controls on narrow phones. The textarea and inputs measure 300px
   inside a 315px column at a 320px viewport, so they pushed 15px past the right
   edge and the page scrolled sideways. Sizing them to the column removes the
   overflow at any width without affecting larger screens. */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Screen-reader-only labels: clipped by design, but the clip must not create the
   appearance of overflowing text. */
.screen-reader-text,
.wp-block-social-link-label.screen-reader-text {
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
}

/* Narrow phones (320px class). Two separate problems measured on the live pages:

   1. The comment form controls are a fixed 300px and begin 35px from the left, so on
      a 320px viewport they end 15px past the right edge and the page scrolls
      sideways. Sized to the column instead of a fixed width. #commentform is used as
      the prefix because a bare .comment-form selector lost to the theme's own rule -
      an earlier attempt at this changed nothing.
   2. The author box is geometrically correct (it keeps its 15px inset at every width)
      but its 30px inner padding leaves only 230px of text at 320px, which reads as
      text running into the edge. Padding reduced only at this size. */
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  /* Padding restored. It was zeroed only to stop the fixed 300px controls overflowing
     a 305px column; those are width:100% with border-box now, so padding no longer
     pushes them past the edge and the form text no longer sits against it. */
  #commentform,
  .comment-respond .comment-form {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nv-author-biography.nv-is-boxed {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* The comment controls are a fixed 300px from the theme. A plain width:100% on
   #commentform textarea did not win - measured still 300px wide at both 360 and 320 -
   so the earlier 320px overflow "fix" was really just the zeroed padding making 300px
   fit. Now that padding is back, the fixed width overflows again. This states the width
   with enough weight to actually apply, scoped to the comment form only. */
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Break the circular width. The controls were width:100% of a shrink-to-fit parent,
   and that parent's width came from the textarea's cols="45" attribute (~300px) - so
   100% could never resolve smaller than 300px and the form overflowed a 320px viewport
   by 11px. Giving the form and its field wrappers a definite width breaks the cycle.
   The earlier padding change was masking this, not fixing it. */
#commentform,
#commentform p,
#commentform .comment-form-comment,
#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url,
#commentform .comment-form-url {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}