@charset "utf-8";

/* CSS Document */

.seo_pyramid_field {

  display: inline-block;

  width: 100%;

}

.seo_pyramid_field input {

  width: 100%;

  margin-bottom: 5px;

  border: 1px solid #e2e4e7;

}

.seo_pyramid_field > span {

  display: block;

  width: 100%;

  color: darkgreen;

  font-size: 14px;

  line-height: 25px;

  transition: all 1s;

}

.seo_pyramid_field em {

  font-size: 12px;

  color: darkgray;

}

.seo_pyramid_field span.count {

  display: inline-block;

  width: auto;

}

#seo_pyramid .warning {

  width: auto;

  display: inline-block;

  display: none;

  transition: all 1s;

}

#seo_pyramid .overLimit, #seo_pyramid .overLimit * {

  color: red !important;

  transition: all 1s;

}

#seo_pyramid .overLimit .warning {

  display: inline-block;

  transition: all 1s;

}

.seo_pyramid_field label {

  width: 100%;

  display: block;

  font-size: 16px;

  font-weight: 550;

  margin-bottom: 5px;

  height: 25px;

  line-height: 25px;

}

.seo_pyramid_field label .material-icons {

  float: left;

  margin-right: 5px;

  font-size: 16px;

  height: 25px;

  line-height: 25px;

}

.dashicons {

  float: left;

  width: 25px;

  height: 25px;

  /* border: 1px solid; */

  line-height: 25px;

  border-radius: 50%;

  margin-right: 5px;

  transition: all 1s;

}

.dashicons-yes, .dashicons-no {

  transition: all 1s;

}

#seo_pyramid_robots, #seo_pyramid_canonical {

  width: 200px;

}

#seo_pyramid {

  background: #f3f4f5;

  overflow: hidden;

}

.seo_pyramid_field {

  display: inline-block;

  width: 98%;

  border: 1px solid #e2e4e7;

  padding: 15px;

  background: #fff;

  border-radius: 10px;

}

.meta-box-sortables select {

  max-width: 100%;

  border: 1px solid #e2e4e7;

}

.seo-pyramid-header {

  font-size: 18px;

  font-weight: bold;

  letter-spacing: .5px;

}

.postbox-header {
	padding-top: 50px ;
}

/* Page/Post Nav */

.seo_pyramid_preview_nav {/* width: 100%; */text-align: left;height: auto;line-height: 35px;font-size: 16px;float: left;margin-left: -20px;}

.seo_pyramid_preview_nav .dashicons {

  margin-right: 5px;

  height: 35px;

  line-height: 28px;

  cursor: pointer;

  float: left;

  color: #007cba;

  transition: all 1s;

  opacity: .8;

  font-size: 17px;

}

.seo_pyramid_preview_nav a {

  text-decoration: none;

}

.seo-pyramid-work-nav li {

  display: inline-block;

  height: 25px;

  line-height: 25px;

  margin-left: 20px;

  color: #007cba;

  cursor: pointer;

  outline: .7em;

}

.seo_pyramid_preview_nav .material-icons {

  font-size: 17px;

}

/* Preview Snippet styling starts here */

.seo_pyramid_preview_snippet {

  position: absolute;

  width: 100%;

  height: auto;

  background: #fff;

  z-index: 99;

  /*  top: -60%;*/

  margin: 0 auto;

  border-radius: 10px;

  border: 1px solid #e2e4e7;

  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/

  padding: 25px;

  display: none;

  transition: all 1s;

}

.seo_pyramid_preview_snippet.show_seo_ps {

  display: block;

  transition: all 1s;

}

#seo_pyramid.show_seo_ps {

  padding-top: 25px;

  top: 0 !important;

}

.seo_pyramid_preview_snippet ul li:nth-of-type(1) {

  font-size: 14px;

  line-height: 0;

  color: #3C4043;

  font-family: 'Roboto', arial, sans-serif;

}

.seo_pyramid_preview_snippet ul li:nth-of-type(2) {

  padding-top: 1px;

  font-size: 20px;

  line-height: 1.3;

  color: #1a0dab;

  font-style: normal;

  font-family: 'Roboto', arial, sans-serif;

}

#google.seo_pyramid_preview_snippet ul li:nth-of-type(2) {

  margin-bottom: 0;

}

.seo_pyramid_preview_snippet ul li:nth-of-type(3) {

  line-height: 1.57;

  word-wrap: break-word;

  color: #545454;

  font-family: 'Roboto', arial, sans-serif;

  font-size: 14px;

}
/*
 * Shared audit Close control.
 */
.close_seo_pyramid_preview,
.update_seo_pyramid_preview {
		position: absolute;
		top: 16px;
		right: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 50%;
		background: rgba(255,255,255,.92);
		color: #d63638;
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
		cursor: pointer;
		opacity: .8;
		box-shadow: 0 2px 8px rgba(0,0,0,.08);
		transition:
		background .2s ease,
		color .2s ease,
		transform .15s ease,
		box-shadow .2s ease,
		opacity .2s ease;
		z-index: 50;
		line-height: 36px!important;
		text-align: center;
		}

/*
 * Hover state.
 */
.close_seo_pyramid_preview:hover,
.update_seo_pyramid_preview:hover {

	background: #d63638;

	color: #fff;

	opacity: 1;

	transform: scale(1.08);

	box-shadow: 0 6px 18px rgba(0,0,0,.15);

}

/*
 * Active state.
 */
.close_seo_pyramid_preview:active,
.update_seo_pyramid_preview:active {

	transform: scale(.94);

}

.update_seo_pyramid_preview {

  display: none !important;

}

.close_seo_pyramid_preview:hover, .update_seo_pyramid_preview:hover {

  opacity: 1;

  transition: all 1s;

}

.material-icons.update_seo_pyramid_preview {

  top: 80px;

  color: green;

  line-height: 26px !important;

  text-align: center !important;

}

#seo_pyramid.show_seo_ps::after {

  content: "";

  background: #fff;

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  opacity: .9;

}

.seo_pyramid_preview_snippet li.url::after {

  content: "arrow_drop_down";

  position: relative;

  margin-left: 0px;

  font-family: "Material Icons";

  font-size: 18px !important;

  top: 5px;

}

/*
 * SEO Pyramid 2.0 search-engine preview tabs.
 */
#seo_pyramid .serp-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: auto;
	margin: 20px 0 0;
	position: static;
}

/*
 * Style each search-engine tab.
 */
#seo_pyramid .serp-switch .serp-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px solid #dcdcde;
	border-radius: 18px;
	background: #f6f7f7;
	color: #50575e;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

/*
 * Normalize the search-engine icons.
 */
#seo_pyramid .serp-switch .serp-tab img {
	width: 18px;
	height: 18px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

/*
 * Highlight hover and keyboard focus.
 */
#seo_pyramid .serp-switch .serp-tab:hover,
#seo_pyramid .serp-switch .serp-tab:focus-visible {
	background: #ffffff;
	border-color: #2271b1;
	color: #135e96;
	outline: none;
	box-shadow: 0 0 0 1px #2271b1;
}

/*
 * Highlight the active search-engine preview.
 */
#seo_pyramid .serp-switch .serp-tab.currSerp {
	background: #ffffff;
	border-color: #2271b1;
	color: #135e96;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/*
 * Show the active icon at full opacity.
 */
#seo_pyramid .serp-switch .serp-tab.currSerp img {
	opacity: 1;
}

/*
 * SEO Pyramid 2.0 SERP preview card.
 
#seo_pyramid .seo_pyramid_preview_snippet {
	width: 600px;
	max-width: calc(100% - 40px);
	padding: 24px;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	left: calc(50% - 275px);
}
*/
/*
 * Use a cleaner generic heading above the card.
 */
#seo_pyramid .seo_pyramid_preview_snippet.show_seo_ps::before {
	content: "SERP Preview";
	background: #ffffff;
	border-radius: 8px;
	font-weight: 600;
}

/*
 * Improve spacing inside the search-result preview.
 */
#seo_pyramid .seo_pyramid_preview_ul {
	margin: 0;
	padding: 0;
}

/*
 * Improve the visible URL.
 */
#seo_pyramid .seo_pyramid_preview_ul li.url {
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: #4d5156;
}

/*
 * Improve the preview title.
 */
#seo_pyramid .seo_pyramid_preview_ul li.title {
	margin-bottom: 5px;
	padding-top: 0;
	font-size: 20px;
	line-height: 1.3;
}

/*
 * Improve the preview description.
 */
#seo_pyramid .seo_pyramid_preview_ul li:nth-of-type(3) {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #4d5156;
}

/* Explanation blob CSS starts here */

#seo_pyramid .explainer {

  display: none;

}

#seo_pyramid .answer i {

  float: left;

  height: 35px;

  line-height: 35px;

}

#seo_pyramid .answer {

  width: 250px;

  display: inline-block;

  height: 35px;

  line-height: 35px;

  cursor: pointer;

}

.seo_pyramid_preview_snippet.answerOn.show_seo_ps ul {

  display: none;

}

#seo_pyramid .explainer strong {

  width: 100%;

  display: block;

  font-size: 18px;

  margin-bottom: 5px;

  height: 25px;

  line-height: 25px;

}

#seo_pyramid .explainer.charLength strong:not(:first-of-type) {

  font-size: 16px !important;

  margin: 10px 0 20px 0 !important;

}

#seo_pyramid .explainer.charLength strong:last-of-type {

  margin-bottom: 0 !important;

}

#seo_pyramid .explainer a {

  whidth: 100%;

  display: block;

  margin-top: 5px;

}

#seo_pyramid_settings_form {

  width: 95%;

  background: #fff;

  padding: 25px;

  margin: 0 auto;

  margin-top: 0px;

  margin-top: 25px;

  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);

 /* border: 1px solid #ccd0d4;*/

  /*border-radius: 10px;*/

}

#seo_pyramid_settings_form h2:not(.seo_pyramid_settings_title) {

  font-size: 17px;

}

#seo_pyramid_settings_form h2:not(.seo_pyramid_settings_title):after {

  content: "style";

  font-family: "Material Icons";

  float: left;

  margin-right: 10px;

  font-size: 22px;

  margin-left: -10px;

}

#seo_pyramid_settings_form.share h2:not(.seo_pyramid_settings_title):after {

  content: "\f237" !important;

  font-family: "Dashicons" !important;

}

#seo_pyramid_settings_form.share h2:last-of-type:not(.seo_pyramid_settings_title)::after {

   content: "𝕏" !important; /* Replaces \f301 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; /* Bypasses Dashicons */
    font-weight: normal !important;

}

#seo_pyramid_settings_form.sm h2:not(.seo_pyramid_settings_title):last-of-type:after {

  content: "account_tree";

  font-family: "Material Icons";

}

#seo_pyramid_settings_form.jld h2:not(.seo_pyramid_settings_title):after {

  content: "storage" !important;

  font-family: "Material Icons";

}

#seo_pyramid_settings_form.jld h2:last-of-type:not(.seo_pyramid_settings_title)::after {

  content: "\f465" !important;

  font-family: "Dashicons" !important;

}

#seo_pyramid_settings_form.rp h2:not(.seo_pyramid_settings_title):after {

  content: "bar_chart" !important;

  font-family: "Material Icons";

}

#seo_pyramid_settings_form h2:not(.seo_pyramid_settings_title):last-of-type:after {

  content: "search";

  font-family: "Material Icons";

}

#seo_pyramid_settings_form h2:not(.seo_pyramid_settings_title) {

  padding: 10px;

  font-weight: normal;

  /* border-bottom: 1px solid #eee; */

  color: #535050;

}

#seo_pyramid_settings_form h2.seo_pyramid_settings_title:before {

  content: "";

  float: left;

  width: 50px;

  height: 50px;

  background-image: url("https://ps.w.org/seo-pyramid/assets/icon-256x256.jpg?rev=2205117");

  background-position: cover;

  background-size: 100%;

  margin: -15px 10px 0 0;

}

h2.seo_pyramid_settings_title:atfer {

  display: none !important;

}

.seo_pyramid_field .dashicons.dashicons-admin-links {

  color: black;

}

#seo_pyramid_settings_form .dashicons.dashicons-clipboard {

  font-size: 16px !important;

  color: black !important;

}

/* Setting options select slider CSS */

#seo_pyramid_settings_form .switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}

#seo_pyramid_settings_form .switch input {

  opacity: 0;

  width: 0;

  height: 0;

}

#seo_pyramid_settings_form .slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}

#seo_pyramid_settings_form .slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}

#seo_pyramid_settings_form input:checked + .slider {

  background-color: #2196F3;

}

#seo_pyramid_settings_form input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}

#seo_pyramid_settings_form input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}

/* Rounded sliders */

#seo_pyramid_settings_form .slider.round {

  border-radius: 34px;

}

#seo_pyramid_settings_form .slider.round:before {

  border-radius: 50%;

}

h2.seo_pyramid_settings_title {

  position: relative;

  width: 100%;

  text-align: left;

  height: 45px;

  font-size: 24px;

  font-weight: bold;

}

.seo_pyramid_starter_link i {

  float: left;

}

.seo_pyramid_starter_link {

  float: left;

  width: auto;

  color: darkgreen;

  font-size: 17px;

}

.seo_pyramid_preview.no_preview {

  display: none;

}

.seo_pyramid_preview {

  float: right;

}

/* Action response */

/*.wp-core-ui .notice.is-dismissible {

  margin-top: 25px;

}*/

/* Explainer CSS starts here */

#seo_pyramid_settings_form .material-icons.what_is_this {

  margin-top: 10px !important;

  width: 25px;

  height: 25px;

  background: #c9cbd8;

  line-height: 25px;

  text-align: center;

  border-radius: 50%;

  font-size: 17px;

  opacity: .5;

  cursor: pointer;

  transition: all 1s;

  position: relative;

}

#seo_pyramid_settings_form .material-icons.what_is_this:hover {

  transition: all 1s;

  opacity: 1;

}

.seo_pyramid_learn {

  position: absolute;

  left: 30px;

  top: -5px;

  right: 50%;

  background: #e4e5ec;

  color: #075a9b;

  padding: 5px;

  border-radius: 5px;

  font-size: 14px;

  transition: all .8s;

  width: 200px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  display: none;

}

.seo_pyramid_learn::after {

  content: "arrow_left";

  font-family: Material Icons;

  font-size: 36px;

  position: absolute;

  left: -20px;

  color: #e4e5ec;

}

/* Setting page navigation */

#seo_pyramid_nav {

  display: inline-block;

  text-align: right;

  width: auto;

  float: right;

  margin-top: -1px;

}

#seo_pyramid_nav li {

  display: inline-block;

  font-size: 16px;

  background: #eee;

  margin: 0 !important;

  box-sizing: border-box;

  border: 1px solid #ccc;

  border-bottom: transparent;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  transition: all .3s;

}

#seo_pyramid_nav .active {

  background: white;

  border-bottom: 1px solid white;

  box-shadow: none;

  transition: all .3s;

}

#seo_pyramid_nav li a {

  display: inline-block;

  text-decoration: none !important;

  color: black;

  font-weight: normal;

  width: auto;

  padding: 10px 15px !important;

  text-align: center !important;

}

#seo_pyramid_nav li a:focus {

  text-decoration: none;

  box-shadow: none;

}

#submit {

  font-size: 16px;

}

/* Notice CSS */

.seo_pyramid_notice {

  text-align: left;

  height: auto;

  padding: 15px;

  border: 1px solid #ccc;

  width: 50%;

}

.seo_pyramid_notice a {

  display: block;

  margin-top: 5px;

}

.seo_pyramid_notice .dashicons.dashicons-external {

  font-size: 16px;

  line-height: 18px;

  margin-left: -2px;

  width: 15px;

  text-decoration: none;

}

.seo_pyramid_enabler {

  color: #007cba;

  font-size: 14px;

}

/* Image upload code */

.image-preview-wrapper {

  width: auto;

  position: absolute;

  right: -45%;

  top: -20px;

  background: #2196f3;

  padding: 10px;

  height: 50px;

  display: none;

  transition: all .5s;

  border-radius: 5px;

}

.image-preview-wrapper.notEmpty {

  width: auto;

  background: #2196f3;

  padding: 10px;

  height: 50px;

  float: right;

  position: relative;

  margin-top: -30px;

  margin-right: 40px;

  display: none;

  transition: all .5s;

  border-radius: 5px;

}

.image-preview-wrapper.notEmpty {

  transition: all .5s;

  display: block;

}



p.help-text {

    color: #0073aa;

}



.image-preview-wrapper:before {

  content: "arrow_left";

  font-family: "Material Icons";

  position: absolute;

  font-size: 60px;

  z-index: 0;

  color: #2196f3 !important;

  width: 25px;

  height: 25px;

  left: -30px;

  top: -5px;

}

.image-preview-wrapper img {

  width: auto !important;

  height: 100%;

}

.call-to-action {

  display: inline-block;

  height: 25px;

  line-height: 35px;

  cursor: pointer;

}

.call-to-action i {

  float: left;

  line-height: 35px;

  margin-right: 5px

}

img[src*="seo-pyramid-logo-icon.jpg"] {

  border-radius: 50%;

  padding: 0 !important;

  ;

  margin-top: 10px;

}

.seo_pyramid_preview_snippet.show_seo_ps::before {

  position: absolute;

  width: 100%;

  text-align: center;

  content: "Google SERP Preview";

  top: -60px !important;

  top: relative;

  left: 0;

  font-size: 16px !important;

  font-weight: 400;

  box-sizing: border-box;

  border: 1px solid #ddd;

  color: black;

  border-radius: 5px;

  display: none;

  height: 45px;

  line-height: 45px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}

.seo_pyramid_preview_snippet.show-serp-header:before {

  display: block;

}

#seo_pyramid .meta-analysis {

  position: realtive;

  width: 100%;

  text-align: center;

  content: "SERP Preview";

  left: 0;

  font-size: 16px !important;

  font-weight: 400;

  padding: 10px !important;

  box-sizing: border-box;

  border: 1px solid #ddd;

  color: black;

  border-radius: 5px;

}

#seo_pyramid .material-icons.close_seo_pyramid_preview::before, #seo_pyramid .material-icons.update_seo_pyramid_preview::before {

  content: attr(action);

  font-family: initial;

  top: 22px;

  left: -5px;

  position: absolute;

  font-size: 11px;

  text-transform: uppercase;

}

#seo_pyramid .material-icons.update_seo_pyramid_preview::before {

  content: attr(action);

}

/* Analysis snippet CSS starts here */

/*
 * Shared audit analysis panel.
 */
#seo_pyramid .analysis {
	position: relative;
	width: 100%;
	text-align: left;
	padding: 14px 0 0;
	z-index: 9;
	margin: 0;
	display: none;
	box-sizing: border-box;
}

#seo_pyramid .analysis ul {

  background: #eee;

}

#seo_pyramid .analysis li {

  height: 30px;

  line-height: 30px;

  cursor: pointer;

  overflow: hidden;

  transition: all .5s;

  position: relative;

  /*background: #dedede;*/

  background: #edeff0;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  border: 1px solid #ccc;

}

#seo_pyramid .analysis li::after {

  content: "keyboard_arrow_down";

  position: absolute;

  right: 0;

  margin-right: 5px;

  font-family: Material Icons;

  font-size: 18px;

  height: 30px;

  line-height: 35px;

  transition: all .5s;

  top: 0;

  color: black !important;

}

#seo_pyramid .analysis li::before {

  content: "check";

  position: relative;

  float: left;

  font-family: Material Icons;

  font-size: 18px;

  height: 26px;

  width: 30px;

  text-align: center;

  line-height: 26px;

  transition: all .5s;

  color: green;

  background: #fff;

  margin: 5px;

  margin-right: 10px;

}

#seo_pyramid .analysis li.bad::before {

  content: "\f534";

  font-family: dashicons;

  color: red;

}

#seo_pyramid .analysis li span {

  display: block;

  line-height: 22px;

  background: #fff;

  padding: 10px;

}

#seo_pyramid .analysis li span strong {

  color: darkgreen;

  font-weight: bold;

}

#seo_pyramid .analysis li.bad span strong {

  color: red;

  font-weight: bold;

}

#seo_pyramid .analysis li.half:after {

  color: darkOrange;

}

#seo_pyramid .analysis ul li.expand {

  height: auto;

  transition: all .5s;

  padding-bottom: 5px;

}

#seo_pyramid .analysis ul li.expand:after {

  content: "keyboard_arrow_up";

}

#seo_pyramid .seo-pramid-page-title {

  display: inline;

}

#seo_pyramid .good strong {

  font-weight: bold;

  color: green;

}

#seo_pyramid .bad strong {

  font-weight: bold;

  color: red;

}

/* Loader CSS */

#seo_pyramid .loader-container {

  width: 500px;

  height: 300px;

  margin: 0 auto;

  position: relative;

  z-index: 999999999999999999999999999999999999999999999999999999;

  display: none;

  text-align: center;

}

#seo_pyramid .block {

  position: relative;

  box-sizing: border-box;

  margin: 0 10px 10px 0;

  width: 16px;

  height: 16px;

  background: #FFF;

  font-size: 16px;

  line-height: 16px;

  color: red;

  border-radius: 50%;

  display: inline-block;

}

#seo_pyramid .block:nth-child(4n+1) {

  animation: wave 2s ease .0s infinite;

}

#seo_pyramid .block:nth-child(4n+2) {

  animation: wave 2s ease .2s infinite;

}

#seo_pyramid .block:nth-child(4n+3) {

  animation: wave 2s ease .4s infinite;

}

#seo_pyramid .block:nth-child(4n+4) {

  animation: wave 2s ease .6s infinite;

  margin-right: 0;

}

@keyframes wave {

  0% {

    top: 0;

    opacity: 1;

  }

  50% {

    top: 30px;

    opacity: .2;

  }

  100% {

    top: 0;

    opacity: 1;

  }

}

/* Yandex SERP Styling */

#seo_pyramid #yandex {

  color: #333;

  font-size: 13px !important;

  line-height: 17px;

  font-family: Arial, Helvetica, sans-serif;

}

#seo_pyramid #yandex .url {

  color: #070;

  font-size: 14px !important;

  line-height: 17px;

  font-family: Arial, Helvetica, sans-serif !important;

  font-weight: bold !important;

}

#seo_pyramid #yandex .url:before {

  content: url("../../img/yandex-lock.png");

  position: relative;

  float: left;

  height: 17px;

  line-height: 28px;

  margin-right: 3px;

}

#seo_pyramid #yandex ul li:nth-of-type(3) {

  font-size: 13px !important;

}

#seo_pyramid #yandex .title {

  font-weight: 400;

  font-size: 18px !important;

  color: #1a0dab;

  font-family: Arial, Helvetica, sans-serif;

}

#seo_pyramid .serpFavicon {

  float: left;

  width: 18px;

  height: 18px;

  vertical-align: top;

  margin-top: 2px;

  margin-right: 5px;

  display: none;

}

#seo_pyramid #yandex .serpFavicon {

  display: block;

}

#seo_pyramid #yandex.seo_pyramid_preview_snippet.show_seo_ps::before {

  content: "Yandex SERP Preview";

}

#seo_pyramid #yandex li:not(:first-of-type) {

  padding-left: 23px;

  box-sizing: border-box;

  transition: all .5s;

}

#seo_pyramid #google li, #bing li {

  transition: all .5s;

}

/* Bing SERP COde Starts here */

#seo_pyramid #bing .title {

  color: #001ba0;

  font-size: 20px !important;

  line-height: 1.2em;

  font-family: 'Segoe UI', Arial, Helvetica, Sans-Serif;

}

#seo_pyramid #bing.seo_pyramid_preview_snippet.show_seo_ps::before {

  content: "Bing SERP Preview";

}

#seo_pyramid #bing .url {

  padding-bottom: 1px;

  font-size: 14px;

  text-overflow: ellipsis;

  overflow: hidden;

  white-space: nowrap;

  color: #006d21;

  font-family: Arial, Helvetica, Sans-Serif;

  line-height: 10px !important;

  margin-top: -4px;

}

#seo_pyramid #bing li:last-of-type {

  font: 13px/normal Arial, Helvetica, Sans-Serif !important;

  color: #666;

}

#seo_pyramid .loader-alternate {

  display: none !important;

}

#seo_pyramid .seo-pyramid-imgwalt {

  display: inline-block;

  width: 100%;

  margin-top: 25px

}

#seo_pyramid .seo-pyramid-imgwalt > a {

  float: left;

  width: 50px !important;

  ;

  height: 50px !important;

  vertical-align: top;

  overflow: hidden;

  margin-right: 15px

}

#seo_pyramid .seo-pyramid-imgwalt > a img {

  width: 50px !important;

  height: auto !important;

}

#seo_pyramid .seo-pyramid-imgwalt h5 {

  display: inline-block;

  width: 100%;

  font-size: 14px;

  margin: 0 0 15px 0;

  border-bottom: 1px solid #eee;

  padding-bottom: 5px;

}

#seo_pyramid .seo-pyramid-sitename {

  display: inline-block;

}

#seo_pyramid .answerOn .serp-switch {

  display: none;

}

.material-icons.chart {

  color: #333;

  border-radius: 50%;

  width: 30px;

  height: 30px;

  line-height: 30px;

  margin: auto;

  margin-left: auto;

  text-align: center;

  opacity: .5;

  cursor: pointer;

}

.material-icons.chart.all-good, .material-icons.all-good {

  color: #f5f9f5;

  background: green;

  opacity: .7;

}

.material-icons.not-good {

  color: #f5f9f5;

  background: red;

  opacity: .7;

}

.seo_pyramid_run .grader::after {

  content: "thumb_up_alt";

  font-family: Material Icons;

  float: right;

  width: 40px;

}

.seo_pyramid_run.all-good, .seo_pyramid_run.not-good, .seo_pyramid_run.really-bad {

  color: darkGreen;

  font-size: 17px;

  font-weight: bold;

  letter-spacing: 1px;

}

.seo_pyramid_run.not-good .grader::after {

  content: "warningt";

}

.seo_pyramid_run.really-bad .grader::after {

  content: "thumb_down_alt";

}

.seo_pyramid_run.not-good {

  color: darkRed;

}

.seo_pyramid_run.really-bad {

  color: red;

}

.run:hover {

  position: relative;

}

.seo_pyramid_run {

  position: relative;

  width: 100px;

  cursor: pointer;

  transition: all .7s;

}

.seo_pyramid_run[aria-label]:hover:after {

  content: attr(aria-label);

  padding: 4px 8px;

  position: absolute;

  top: -5px;

  right: 111%;

  white-space: nowrap;

  z-index: 20px;

  background: #4ba44b;

  color: white;

  border-radius: 5px;

  font-size: 14px;

  line-height: 24px;

  cursor: pointer;

  transition: all .7s;

  font-weight: normal !important;

}

.seo_pyramid_run[aria-label]:hover:before {

  content: 'arrow_right';

  font-family: "Material Icons";

  position: absolute;

  color: black;

  z-index: 99999;

  font-size: 36px;

  right: 89%;

  top: 7%;

  box-shadow: 5px 5px 29px 9px rgba(0, 0, 0, 0.10);

  transition: all .7s;

  font-weight: normal !important;

}

.seo_pyramid_run[aria-label].not-good:hover:before {

  color: darkred;

  transition: all .7s;

}

.seo_pyramid_run[aria-label].all-good:hover:before {

  color: #4ba44b;

  transition: all .7s;

}

.seo_pyramid_run[aria-label].really-bad:hover:before {

  color: red;

  transition: all .7s;

}

.seo_pyramid_run[aria-label].not-good:hover:after {

  background: darkRed;

  transition: all .7s;

}

.seo_pyramid_run[aria-label].really-bad:hover:after {

  background: red;

  transition: all .7s;

}

.seo-pyramid-check {

  color: #aaa !important;

  float: left;

}

.seo-pyramid-check.notEmpty {

  color: darkGreen !important;

}

.half strong {

  color: #f78b07;

}

/* Redirect field styling */

#seo_pyramid_redirect {

  width: 200px !important;

  float: left;

  margin-right: 10px;

}





input#seo_pyramid_redirect_date {

    width: 150px;

    text-align: right;

    position: relative;

	border-top-left-radius: 0;

	border-bottom-left-radius: 0;

	margin-right: 10px;

}



input#date-label {

border-right: 1px solid #e2e4e7;

padding-right: 25px;

background: #f3f4f5;

margin: 0 -8px 0 0;

padding: 0 20px;

display: inline-block;

width: 100px;

color: #000!important;

float: left;

}



/*select#seo_pyramid_redirect_switch, input#date-label {

margin-top: -5px;

}*/



/* Search engine status notice */

.seo-pyramid-notice {

  line-height: 35px !important;

  color: #f20b0b !important;

  text-align: left;

  border-left: 2px solid red;

  display: inline-table;

  float: left;

  padding-left: 10px;

  background: white;

  padding-right: 10px;

  font-size: 14px;

}

.seo-pyramid-notice .material-icons {

  float: left;

  width: 35px;

  text-align: left;

  height: 35px;

  line-height: 35px;

  font-size: 24px;

  margin-left: -50px;

  color: red;

}

.analysis em {

  /* font-weight: bold;*/

  background: #eee;

  padding: 5px;

  color: black;

}

/* Adjust preview close button on laptop */

@media only screen and (max-width: 1326px) {

  .close_seo_pyramid_preview {

    left: -70px;

  }

  .seo_pyramid_field {

    width: 96%;

  }

}

/* Report page CSS */

.seo-pyramid-table {

  background: #fff;

  border-collapse: collapse;

}

.seo-pyramid-table tr:nth-child(even) {

  background-color: #f2f2f2 !important;

}

.seo-pyramid-table td, .seo-pyramid-table th {

  padding: 30px 10px 20px 20px;

  border-right: 1px solid #C1C3D1 !important;

  border-left: 1px solid #C1C3D1;

  position: relative;

  font-size: 14px !important;

}

.seo-pyramid-table tr {

  border-top: 1px solid #C1C3D1;

  border-bottom: 1px solid #C1C3D1;

  border-right: 1px solid #C1C3D1;

}

.seo-pyramid-table td.good::after, .seo-pyramid-table td.bad::after {

  content: "";

  position: absolute;

  top: 5px;

  right: 5px;

  font-family: Dashicons;

  font-size: 20px;

}

.seo-pyramid-table td.good::after {

  content: "\f12a";

  color: green;

}

.seo-pyramid-table td.bad::after {

  content: "\f534";

  color: red;

}

.seo-pyramid-table td.good strong {

  color: green;

  font-weight: bold;

  font-size: 90%;

}

.seo-pyramid-table td.bad strong {

  color: red;

  font-weight: bold;

  font-size: 90%;

}

.rp .form-table > tbody > tr > th[scope="row"] {

  display: none !important;

}



.seo-pyramid-table th {

background: #ddd;

color: #555;

letter-spacing: .5px  

}



#seo_pyramid_settings_form.jld table:nth-of-type(2), #seo_pyramid_settings_form.jld h2:last-of-type:not(.seo_pyramid_settings_title)  {

display: none  

}



#seo_pyramid_settings_form:not(.rp) table, #seo_pyramid_settings_form:not(.rp) td, #seo_pyramid_settings_form:not(.rp) th {

  padding: 10px!important;

  border: 1px solid #eee;

}

/*
 * School-style Page SEO Score colors.
 */
.seo-pyramid-page-score {
	border-left: 6px solid;
	font-weight: 700;
}

.seo-pyramid-page-score.grade-a {
	background: #e7f6ea;
	border-left-color: #137333;
	color: #137333;
}

.seo-pyramid-page-score.grade-b {
	background: #edf7ee;
	border-left-color: #34a853;
	color: #237a3b;
}

.seo-pyramid-page-score.grade-c {
	background: #fff8df;
	border-left-color: #f9ab00;
	color: #8a5a00;
}

.seo-pyramid-page-score.grade-d {
	background: #fff0df;
	border-left-color: #e8710a;
	color: #a34700;
}

.seo-pyramid-page-score.grade-f {
	background: #fce8e6;
	border-left-color: #d93025;
	color: #b3261e;
}

/*
 * SEO Pyramid 2.0 analyzer result colors.
 * These selectors include #seo_pyramid so they override the legacy accordion styles.
 */
#seo_pyramid .analysis ul li.good {
	background-color: #f1fbf3;
	border-left: 5px solid #34a853;
}

#seo_pyramid .analysis ul li.half {
	background-color: #fff8e6;
	border-left: 5px solid #f9ab00;
}

#seo_pyramid .analysis ul li.okay {
	background-color: #eef5ff;
	border-left: 5px solid #4285f4;
}

#seo_pyramid .analysis ul li.bad {
	background-color: #fff1f0;
	border-left: 5px solid #d93025;
}

/*
 * Keep expanded analyzer explanations white and easy to read.
 */
#seo_pyramid .analysis ul li.good > span,
#seo_pyramid .analysis ul li.half > span,
#seo_pyramid .analysis ul li.okay > span,
#seo_pyramid .analysis ul li.bad > span {
	background-color: #ffffff;
	color: #3c434a;
}

/*
 * Match each analyzer icon to its result status.
 */
#seo_pyramid .analysis ul li.good::before {
	content: "check";
	font-family: "Material Icons";
	color: #137333;
}

#seo_pyramid .analysis ul li.half::before {
	content: "priority_high";
	font-family: "Material Icons";
	color: #b06000;
}

#seo_pyramid .analysis ul li.okay::before {
	content: "info";
	font-family: "Material Icons";
	color: #1967d2;
}

#seo_pyramid .analysis ul li.bad::before {
	content: "\f534";
	font-family: "Dashicons";
	color: #d93025;
}

/*
 * Color emphasized text inside expanded explanations consistently.
 */
#seo_pyramid .analysis ul li.good span strong {
	color: #137333;
}

#seo_pyramid .analysis ul li.half span strong {
	color: #b06000;
}

#seo_pyramid .analysis ul li.okay span strong {
	color: #1967d2;
}

#seo_pyramid .analysis ul li.bad span strong {
	color: #d93025;
}

/*
 * SEO Pyramid 2.0 Page SEO Score card.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score {
	height: auto;
	min-height: 150px;
	padding: 0;
	margin-bottom: 14px;
	border-width: 1px 1px 1px 7px;
	border-style: solid;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
}

/*
 * Remove the standard analyzer icon from the score card.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score::before {
	display: none;
}

/*
 * Keep the accordion arrow aligned in the score card.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score::after {
	top: 10px;
	right: 8px;
}

/*
 * SEO score summary.
 */
#seo_pyramid .seo-pyramid-score-summary {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label score"
		"grade score"
		"rating score";
	align-items: center;
	gap: 4px 20px;
	padding: 18px 45px 16px 20px;
	position: relative;
	overflow: hidden;
}
/*
 * Decorative score circle.
 */
#seo_pyramid .seo-pyramid-score-summary::after {
	content: "";
	position: absolute;
	top: -55px;
	right: -35px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.06;
	pointer-events: none;
	z-index: 0;
}

#seo_pyramid .grade-a {
	color: #0a7a3e;
}

#seo_pyramid .grade-b {
	color: #1565c0;
}

#seo_pyramid .grade-c {
	color: #6f2dbd;
}

#seo_pyramid .grade-d {
	color: #d97706;
}

#seo_pyramid .grade-f {
	color: #c62828;
}
/*
 * Keep content above decoration.
 */
#seo_pyramid .seo-pyramid-score-summary > * {
	position: relative;
	z-index: 1;
}
/*
 * Keep content above decoration.
 */
#seo_pyramid .seo-pyramid-score-summary > * {
	position: relative;
	z-index: 1;
}
/*
 * Style the score-card heading.
 */
#seo_pyramid .seo-pyramid-score-label {
	grid-area: label;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.85;
}

/*
 * Make the percentage the visual focus.
 */
#seo_pyramid .seo-pyramid-score-value {
	grid-area: score;
	font-size: 48px;
	font-weight: 750;
	line-height: 1;
	text-align: right;
}

#seo_pyramid .seo-pyramid-score-value small {
	font-size: 20px;
	font-weight: 600;
}

/*
 * Style the letter grade and rating.
 */
#seo_pyramid .seo-pyramid-score-grade {
	grid-area: grade;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

#seo_pyramid .seo-pyramid-score-rating {
	grid-area: rating;
	font-size: 15px;
	font-weight: 600;
}

/*
 * Animate the Page SEO Score details.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score
	> span.seo-pyramid-score-details {

	display: block;

	max-height: 0;

	opacity: 0;

	overflow: hidden;

	padding: 0 20px;

	background: #ffffff;

	color: #3c434a;

	border-top: 0;

	font-weight: 500;

	transition:
		max-height .35s ease,
		opacity .25s ease,
		padding .25s ease,
		border-color .25s ease;

}

/*
 * Expanded state.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score.expand
	> span.seo-pyramid-score-details {

	max-height: 120px;

	opacity: 1;

	padding: 12px 20px;

	border-top: 1px solid rgba(0,0,0,.08);

}

/*
 * Grade A score-card colors.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score.grade-a {
	background: #e7f6ea;
	border-color: #137333;
	color: #137333;
}

/*
 * Grade B score-card colors.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score.grade-b {
	background: #edf7ee;
	border-color: #34a853;
	color: #237a3b;
}

/*
 * Grade C score-card colors.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score.grade-c {
	background: #fff8df;
	border-color: #f9ab00;
	color: #8a5a00;
}

/*
 * Grade D score-card colors.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score.grade-d {
	background: #fff0df;
	border-color: #e8710a;
	color: #a34700;
}

/*
 * Grade F score-card colors.
 */
#seo_pyramid .analysis ul li.seo-pyramid-page-score.grade-f {
	background: #fce8e6;
	border-color: #d93025;
	color: #b3261e;
}

/*
 * Stack the score card cleanly on smaller screens.
 */
@media only screen and (max-width: 700px) {
	#seo_pyramid .seo-pyramid-score-summary {
		grid-template-columns: 1fr;
		grid-template-areas:
			"label"
			"score"
			"grade"
			"rating";
		text-align: center;
		padding-right: 20px;
	}

	#seo_pyramid .seo-pyramid-score-value {
		text-align: center;
		margin: 8px 0;
	}
}
/*
 * Shared SEO Pyramid 2.0 audit interface.
 */
#seo_pyramid .seo-pyramid-audit-interface {
	position: relative;
	width: min(760px, calc(100% - 40px));
	margin: 0 auto;
	box-sizing: border-box;
}

/*
 * Align the SERP preview and analysis report inside the shared audit wrapper.
 */
#seo_pyramid .seo-pyramid-audit-interface > .seo_pyramid_preview_snippet,
#seo_pyramid .seo-pyramid-audit-interface > .analysis {
	position: relative;
	left: auto;
	right: auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: 0;
	box-sizing: border-box;
}

/*
 * Keep the SERP card spacing controlled by the shared wrapper.
 */
#seo_pyramid .seo-pyramid-audit-interface > .seo_pyramid_preview_snippet {
	padding: 24px;
}

/*
 * Align the analysis report directly beneath the SERP card.
 */
#seo_pyramid .seo-pyramid-audit-interface > .analysis {
	padding-top: 14px;
}

/*
 * Shared SEO audit interface header.
 */
#seo_pyramid .seo-pyramid-audit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	margin-bottom: 14px;
	padding: 12px 16px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.seo_pyramid_preview_snippet.show_seo_ps.answerOn {
	position: fixed !important;

	top: 50% !important;
	left: 50% !important;
	right: auto !important;

	transform: translate(-50%, -50%);

	display: block;

	width: min(760px, calc(100vw - 40px)) !important;
	max-width: calc(100vw - 40px) !important;
	height: auto;
	max-height: calc(100vh - 40px);

	margin: 0 !important;
	padding: 24px;

	overflow-y: auto;
	overflow-x: hidden;

	box-sizing: border-box;
	z-index: 999999;
	


}

/*
 * Audit interface heading.
 */
#seo_pyramid .seo-pyramid-audit-title {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.4;
	color: #1d2327;
}

/*
 * Audit interface Close button.
 */
#seo_pyramid .seo-pyramid-audit-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 32px;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 5px;
	color: #b32d2e;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

/*
 * Close-button hover and keyboard focus.
 */
#seo_pyramid .seo-pyramid-audit-close:hover,
#seo_pyramid .seo-pyramid-audit-close:focus-visible {
	background: #fcf0f1;
	border-color: #d63638;
	color: #8a2424;
	outline: none;
}

/*
 * Normalize the Close-button icon.
 */
#seo_pyramid .seo-pyramid-audit-close .dashicons {
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 18px;
	line-height: 18px;
}

/*
 * SEO Pyramid toolbar actions.
 */
#seo_pyramid .seo-pyramid-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 22px;
}

/*
 * Secondary Features button.
 */
#seo_pyramid .seo-pyramid-toolbar-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #6f2dbd;
	border-radius: 5px;
	background: #ffffff;
	color: #6f2dbd;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease,
		transform .15s ease;
}

#seo_pyramid .seo-pyramid-toolbar-link:hover {
	background: #f4ecfb;
	color: #531d91;
	border-color: #531d91;
}

/*
 * Primary SEO Analysis button.
 */
#seo_pyramid .seo-pyramid-toolbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid #6f2dbd;
	border-radius: 5px;
	background: #6f2dbd;
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(111, 45, 189, .22);
	transition:
		background-color .2s ease,
		border-color .2s ease,
		transform .15s ease,
		box-shadow .2s ease;
}

#seo_pyramid .seo-pyramid-toolbar-button:hover {
	background: #531d91;
	border-color: #531d91;
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(111, 45, 189, .28);
	transform: translateY(-1px);
}

/*
 * Normalize toolbar icons.
 */
#seo_pyramid .seo-pyramid-toolbar .dashicons {
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 18px;
	line-height: 18px;
}

ul.seo-pyramid-work-nav.seo-pyramid-toolbar {
    height: auto;
    display: inline-flex;
}
/*
 * SEO Pyramid branded meta box title.
 */
.seo-pyramid-header {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

.seo-pyramid-header img {
	width: 50PX;
	height: 50PX;
	background: white;
	border-radius: 50%;
}

/*
 * Product-name styling.
 */
.seo-pyramid-product-name {
	font-size: 24px;
	font-weight: 800;
	color: #3c434a;
	line-height: 1;
}

/*
 * Version badge styling.
 */
.seo-pyramid-version {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 7px;
	border-radius: 12px;
	background: #f3e8ff;
	color: #6f2dbd;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2px;
}

/*
 * SEO Pyramid logo.
 */
.seo-pyramid-header-logo {
	display: block;
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 50%;
}

/*
 * Keep both toolbar actions visually balanced.
 */
#seo_pyramid .seo-pyramid-toolbar-link,
#seo_pyramid .seo-pyramid-toolbar-button {
	min-width: 140px;
	box-sizing: border-box;
}

/*
 * Add breathing room beneath the branded title.
 */
#seo_pyramid .seo-pyramid-toolbar {
	margin-top: 22px;
}

/*
 * Match each toolbar icon to its button.
 */
#seo_pyramid .seo-pyramid-toolbar-link .dashicons {
	color: #6f2dbd;
}

#seo_pyramid .seo-pyramid-toolbar-button .dashicons {
	color: #ffffff;
}

/*
 * Center the SEO grade inside its report-table cell.
 */
#seo_pyramid_settings_form .seo-pyramid-report-score-cell {
	padding: 18px 14px !important;
	text-align: center;
	vertical-align: middle;
}

/*
 * SEO Pyramid 2.0 report-card badge.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 112px;
	min-height: 112px;
	padding: 12px 12px 12px 18px;
	box-sizing: border-box;
	/* border: 1px solid; */
	/* border-radius: 14px; */
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
	overflow: hidden;
}

/*
 * Colored grade accent.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 100%;
	background: currentColor;
}

/*
 * Make the school grade the visual focus.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade-letter {
	font-size: 42px;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -1px;
}

/*
 * Numeric SEO percentage.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade-score {
	font-size: 19px;
	font-weight: 750;
	line-height: 1.15;
}

/*
 * Human-readable rating.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade-rating {
	max-width: 82px;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.15;
	text-align: center;
}

/*
 * Grade A report colors.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade.grade-a {
	border-color: #137333;
	background: #eef8f0;
	color: #137333;
}

/*
 * Grade B report colors.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade.grade-b {
	border-color: #34a853;
	background: #f2faf3;
	color: #237a3b;
}

/*
 * Grade C report colors.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade.grade-c {
	border-color: #f9ab00;
	background: #fffaf0;
	color: #8a5a00;
}

/*
 * Grade D report colors.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade.grade-d {
	border-color: #e8710a;
	background: #fff5eb;
	color: #a34700;
}

/*
 * Grade F report colors.
 */
#seo_pyramid_settings_form .seo-pyramid-report-grade.grade-f {
	border-color: #d93025;
	background: #fdf1ef;
	color: #b3261e;
}

/*
 * SEO Pyramid 2.0 Reports table container.
 */
#seo_pyramid_settings_form .seo-pyramid-report-table-wrap {
	width: 100%;
	margin-top: 20px;
	overflow-x: auto;
	background: #ffffff;
	border: 1px solid #dcdcde;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}

/*
 * Main Reports table.
 */
#seo_pyramid_settings_form .seo-pyramid-table {
	width: 100%;
	min-width: 1250px;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	table-layout: fixed;
}

/*
 * Modern table headings.
 */
#seo_pyramid_settings_form .seo-pyramid-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 16px 18px;
	background: #f6f3fb;
	color: #3c2a4d;
	border: 0;
	border-right: 1px solid #ddd6e5;
	border-bottom: 2px solid #7427c6;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.45px;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}

/*
 * Remove the final header divider.
 */
#seo_pyramid_settings_form .seo-pyramid-table thead th:last-child {
	border-right: 0;
	text-align: center;
}

/*
 * Report rows.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody tr {
	background: #ffffff;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

/*
 * Subtle alternating-row treatment.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody tr:nth-child(even) {
	background: #fafafa !important;
}

/*
 * Highlight the row being reviewed.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody tr:hover {
	background: #f8f3fd !important;
	box-shadow: inset 4px 0 0 #7427c6;
}

/*
 * Standard report cells.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody td,
#seo_pyramid_settings_form .seo-pyramid-table tbody th {
	position: relative;
	padding: 22px 18px;
	border: 0;
	border-right: 1px solid #e1e4e8 !important;
	border-bottom: 1px solid #dcdcde;
	color: #3c434a;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

/*
 * Remove the final vertical divider.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody td:last-child {
	border-right: 0 !important;
}

/*
 * Style the Page Name column.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody th[scope="row"] {
	background: rgba(116, 39, 198, 0.035);
	color: #2c173e;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Give each column a more useful width.
 */
#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(1) {
	width: 150px;
}

#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(2),
#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(3),
#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(4) {
	width: 190px;
}

#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(5),
#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(6) {
	width: 150px;
}

#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(7) {
	width: 180px;
}

#seo_pyramid_settings_form .seo-pyramid-table th:nth-child(8) {
	width: 145px;
}

/*
 * Keep the score column centered.
 */
#seo_pyramid_settings_form .seo-pyramid-table tbody td:last-child {
	text-align: center;
	vertical-align: middle;
}

/*
 * Make emphasized report values easier to scan.
 */
#seo_pyramid_settings_form .seo-pyramid-table strong {
	font-weight: 700;
}

/*
 * Good report emphasis.
 */
#seo_pyramid_settings_form .seo-pyramid-table td.good strong {
	color: #137333;
}

/*
 * Poor report emphasis.
 */
#seo_pyramid_settings_form .seo-pyramid-table td.bad strong {
	color: #d93025;
}

/*
 * Place result icons consistently.
 */
#seo_pyramid_settings_form .seo-pyramid-table td.good::after,
#seo_pyramid_settings_form .seo-pyramid-table td.bad::after {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	font-family: "Dashicons";
	font-size: 18px;
	line-height: 20px;
	text-align: center;
}

/*
 * Successful report icon.
 */
#seo_pyramid_settings_form .seo-pyramid-table td.good::after {
	content: "\f12a";
	color: #008a20;
}

/*
 * Failed report icon.
 */
#seo_pyramid_settings_form .seo-pyramid-table td.bad::after {
	content: "\f534";
	color: #d93025;
}

/*
 * Responsive table scrolling.
 */
@media only screen and (max-width: 1100px) {
	#seo_pyramid_settings_form .seo-pyramid-report-table-wrap {
		-webkit-overflow-scrolling: touch;
	}

	#seo_pyramid_settings_form .seo-pyramid-table {
		min-width: 1150px;
	}
}

/*
 * SEO Pyramid 2.0 Reports filters.
 */
#seo_pyramid_settings_form .seo-pyramid-report-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0;
	padding: 14px;
	background: #ffffff;
	border: 1px solid #dcdcde;
	box-sizing: border-box;
}

/*
 * Reports search field container.
 */
#seo_pyramid_settings_form .seo-pyramid-report-search-wrap {
	position: relative;
	flex: 1 1 260px;
	max-width: 380px;
}

/*
 * Reports search icon.
 */
#seo_pyramid_settings_form .seo-pyramid-report-search-wrap .dashicons {
	position: absolute;
	top: 50%;
	left: 11px;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	color: #646970;
	font-size: 18px;
	line-height: 18px;
	transform: translateY(-50%);
	pointer-events: none;
}

/*
 * Reports search input.
 */
#seo_pyramid_settings_form #seo-pyramid-report-search {
	width: 100%;
	min-height: 40px;
	padding: 6px 12px 6px 38px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #ffffff;
}

/*
 * Grade-filter button group.
 */
#seo_pyramid_settings_form .seo-pyramid-grade-filters {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Individual grade-filter buttons.
 */
#seo_pyramid_settings_form .seo-pyramid-grade-filter {
	min-width: 42px;
	min-height: 38px;
	padding: 6px 12px;
	border: 1px solid #7427c6;
	border-radius: 4px;
	background: #ffffff;
	color: #7427c6;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease;
}

/*
 * Active and hovered grade filters.
 */
#seo_pyramid_settings_form .seo-pyramid-grade-filter:hover,
#seo_pyramid_settings_form .seo-pyramid-grade-filter.active {
	background: #7427c6;
	color: #ffffff;
}

/*
 * Visible Reports page count.
 */
#seo_pyramid_settings_form .seo-pyramid-report-count {
	margin-left: auto;
	color: #646970;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/*
 * Stack report filters cleanly on smaller screens.
 */
@media only screen and (max-width: 782px) {
	#seo_pyramid_settings_form .seo-pyramid-report-filters {
		align-items: stretch;
	}

	#seo_pyramid_settings_form .seo-pyramid-report-search-wrap {
		flex-basis: 100%;
		max-width: none;
	}

	#seo_pyramid_settings_form .seo-pyramid-report-count {
		width: 100%;
		margin-left: 0;
	}
}

/*
==========================================================
 SEO Pyramid 2.0 Settings Forms
==========================================================
*/

/*
 * Settings section headings.
 */

#seo_pyramid_settings_form h2:not(.seo_pyramid_settings_title) {
color: red;
	margin: 28px 20px 14px;
    padding: 0 !important;
    background: transparent;
    border: 0;
    color: #2c173e;
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
#seo_pyramid_settings_form:not(.rp)
	h2:not(.seo_pyramid_settings_title) {
	margin: 24px 0 0;
	padding: 15px 18px !important;
	box-sizing: border-box;
	background: #f8f5fc;
	border: 1px solid #ddd6e5;
	border-bottom: 2px solid #7427c6;
	color: #2c173e;
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/*
 * Settings tables generated by the WordPress Settings API.
 */
#seo_pyramid_settings_form:not(.rp) .form-table {
	width: 100%;
	margin: 0 0 22px;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border: 1px solid #dcdcde!important;
	border-top: 0;
}

/*
 * Individual settings rows.
 */
#seo_pyramid_settings_form:not(.rp) .form-table tr {
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

/*
 * Alternating settings rows.
 */
#seo_pyramid_settings_form:not(.rp) .form-table tr:nth-child(even) {
	background: #fafafa;
}

/*
 * Settings-row hover state.
 */
#seo_pyramid_settings_form:not(.rp) .form-table tr:hover {
	background: #f8f3fd;
	box-shadow: inset 4px 0 0 #7427c6;
}

/*
 * Settings labels and values.
 */
#seo_pyramid_settings_form:not(.rp) .form-table th,
#seo_pyramid_settings_form:not(.rp) .form-table td {
	padding: 20px 18px !important;
	border: 0;
	border-bottom: 1px solid #e1e4e8;
	vertical-align: middle;
	box-sizing: border-box;
}

/*
 * Field-label column.
 */
#seo_pyramid_settings_form:not(.rp) .form-table th {
	width: 240px;
	background: rgba(116, 39, 198, 0.025);
	color: #2c173e;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Field-control column.
 */
#seo_pyramid_settings_form:not(.rp) .form-table td {
	color: #3c434a;
	font-size: 14px;
	line-height: 1.5;
}

/*
 * Remove the final row divider.
 */
#seo_pyramid_settings_form:not(.rp) .form-table tr:last-child th,
#seo_pyramid_settings_form:not(.rp) .form-table tr:last-child td {
	border-bottom: 0;
}

/*
 * Standardize text fields.
 */
#seo_pyramid_settings_form:not(.rp)
	.form-table input[type="text"],
#seo_pyramid_settings_form:not(.rp)
	.form-table input[type="url"],
#seo_pyramid_settings_form:not(.rp)
	.form-table select {
	width: min(100%, 520px);
	min-height: 40px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #ffffff;
	box-sizing: border-box;
}

/*
 * Field focus state.
 */
#seo_pyramid_settings_form:not(.rp)
	.form-table input:focus,
#seo_pyramid_settings_form:not(.rp)
	.form-table select:focus {
	border-color: #7427c6;
	box-shadow: 0 0 0 1px #7427c6;
	outline: none;
}

/*
 * Help text and education links.
 */
#seo_pyramid_settings_form:not(.rp) .help-text {
	margin: 7px 0 0;
	color: #646970;
	font-size: 12px;
}

#seo_pyramid_settings_form:not(.rp) .help-text a {
	color: #7427c6;
	text-decoration: none;
}

#seo_pyramid_settings_form:not(.rp) .help-text a:hover {
	color: #531d91;
	text-decoration: underline;
}

/*
 * Match the WordPress Save button to the SEO Pyramid brand.
 */
#seo_pyramid_settings_form:not(.rp) .button-primary {
	min-height: 40px;
	padding: 0 18px;
	border-color: #7427c6;
	background: #7427c6;
	box-shadow: 0 2px 6px rgba(116, 39, 198, 0.22);
	font-weight: 600;
}

#seo_pyramid_settings_form:not(.rp) .button-primary:hover,
#seo_pyramid_settings_form:not(.rp) .button-primary:focus {
	border-color: #531d91;
	background: #531d91;
}

/*
 * Responsive settings layout.
 */
@media only screen and (max-width: 782px) {
	#seo_pyramid_settings_form:not(.rp) .form-table th,
	#seo_pyramid_settings_form:not(.rp) .form-table td {
		display: block;
		width: 100%;
	}

	#seo_pyramid_settings_form:not(.rp) .form-table th {
		padding-bottom: 8px !important;
		border-bottom: 0;
	}

	#seo_pyramid_settings_form:not(.rp) .form-table td {
		padding-top: 8px !important;
	}
}

/*
 * Restore clean SEO Pyramid settings-section headings.
 */
#seo_pyramid_settings_form:not(.rp)
	h2:not(.seo_pyramid_settings_title) {
	margin: 28px 10px 14px;
	padding: 0 !important;
	background: transparent;
	border: 0;
	color: #2c173e;
	font-size: 17px !important;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/*
 * Preserve lowercase Material Icon ligatures.
 * Uppercasing "style" or "search" prevents the icons from rendering.
 */
#seo_pyramid_settings_form:not(.rp)
	h2:not(.seo_pyramid_settings_title)::after, #seo_pyramid_settings_form h2:after {
	text-transform: none;
	color: #7427c6;
	font-weight: normal;
}

/*
 * SEO Pyramid Posts List column header.
 */
.seo-pyramid-column-header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	white-space: nowrap;
}

.seo-pyramid-column-logo {
	width: 15px;
	height: 15px;
	display: block;
	flex-shrink: 0;
}


/*
 * SEO Pyramid admin bar logo.
 */
.seo-pyramid-admin-bar-logo {
	width: 20px;
	height: 20px;
	float: left;
	margin: 6px 5px 0 0;
	border-radius: 50%;
	object-fit: cover;
}