/*
Theme Name: Lokerpro
Theme URI: https://demo.pojoksoft.com/lokerpro
Author: Pojoksoft
Author URI: https://www.pojoksoft.com
Description: Great wordpress theme for job vacancy present by pojoksoft.
Version: 3.2.2
Requires at least: 5.6
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lokerpro
Tags: two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, microformats, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce

Lokerpro is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize.css
# Sidr.css
# Elements
# Forms
# Navigation
	## Menuss
	## Other Navigation
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css
--------------------------------------------------------------*/
img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:2px solid #ecf0f1;margin:0 5px;padding:20px}table{border-collapse:collapse;border-spacing:0}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

/* Sidr.css - mobile menu | MIT License | https://github.com/artberri/sidr */
.sidr{display:block;position:fixed;top:0;padding-top: 50px;height:100%;z-index:1;width:80%;z-index:999999;overflow-x:hidden;overflow-y:auto}
.sidr .sidr-inner{padding:0 0 0}
.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}
.sidr.sidr-right{left:auto;right:-100%}
.sidr.sidr-left{left:-100%;right:auto}
.sidr{font-size:13px;background:#fff;color:#222}
.sidr ul{display:block;margin:0 0 0;padding:0;}
.sidr ul li{position:relative;display:block;margin:0;line-height:38px;}
.sidr ul li.active,
.sidr ul li.sidr-class-active,
.sidr ul li:hover{border-top:0;line-height:38px}
.sidr ul li.active>a,
.sidr ul li.sidr-class-active>a,
.sidr ul li:hover>a{background-color: rgba(0,0,0,0.1);}
.sidr ul li a{padding:0 10px;display:block;text-decoration:none;color:#222}
.sidr ul li ul{border-bottom:0;margin:0}
.sidr ul li ul li{line-height:38px;font-size:13px}
.sidr ul li ul li.active,
.sidr ul li ul li.sidr-class-active,
.sidr ul li ul li:hover{border-top:0;line-height:38px}
.sidr ul li ul li a{padding-left:30px}
.sidr form{margin:0 15px}
.sidr label{font-size:13px}
.sidr input[type=search],
.sidr input[type=text]{width:100%;color:#222222;border: 1px solid #dddddd !important;font-size:13px;line-height: 13px;background-color: #ffffff;padding:15px 10px;box-sizing:border-box;margin:10px 0 10px;border:0;background:rgba(0,0,0,.1);color:rgba(256,256,256,.6);display:block;clear:both;}
.sidr .sub-toggle {position:absolute;right:0;top:0;cursor:pointer;border-left:1px solid #dddddd;width:40px;text-align:center;}
.sidr .sub-toggle .pjs-icon-up:after,
.sidr .sub-toggle .pjs-icon-down:after {
	display: inline-block;
	position: relative;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: -5px;
	top: auto;
	bottom: auto;
	vertical-align: middle;
	content: ' ';
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: #222222;
	-webkit-transform-origin: 66% 66%;
	-ms-transform-origin: 66% 66%;
	transform-origin: 66% 66%;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	height: 6px;
	width: 6px;
}
.sidr .sub-toggle .pjs-icon-up:after {
	transform: rotate(225deg);
}
.sidr .sub-toggle:hover {color:red;background:rgba(255,255,255,0.5);}
.sidr-class-site-description,
.sidr ul.sidr-class-sub-menu {display:none;}
.sidr ul.sidr-class-sub-menu.active {display:block;}
a#sidr-id-close-topnavmenu-button {color: #222222;position: absolute;right: 15px;top: 8px;z-index:99999;font-size: 28px;}
.sidr-class-logo-wrap {padding: 0 15px;background-color: #f8f8f8;max-height: 50px;line-height: 50px;position: absolute;top: 0;width:100%;display:block;}
.sidr-class-logo-wrap img {max-height: 40px;}
.sidr-class-pjs-menulogo-btn,
.sidr-class-pjs-search-btn {display: none !important;}

/* Support menu icons plugin */
.sidr-class-menu-item i._mi,
.sidr-class-menu-item img._mi {
	display:inline-block;
	vertical-align:middle
}
.sidr-class-menu-item i._mi {
	width:auto;
	height:auto;
	margin-top:-.265em;
	font-size:20px;
	line-height:1
}
.sidr-class-menu-item i._before {margin-right:.25em}
.sidr-class-menu-item i._after {margin-left:.25em}
.sidr-class-menu-item img._before {margin-right:.5em}
.sidr-class-menu-item img._after {margin-left:.5em}
.sidr-class-menu-item ._svg {width:1em}
.sidr-class-menu-item i.elusive {margin-top:-.3em}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	font-size: 10px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font-family: sans-serif;
	line-height: 1.5;
	margin: 0 auto;
	background-color: #f8f8f8; /* Fallback for when there is no custom background color defined. */
}
input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
figure {
	margin: 0;
}
img {
	vertical-align: middle;
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}
hr {
	margin-top: 23px;
	margin-bottom: 23px;
	border: 0;
	border-top: 1px solid #ffffff;
}
[role="button"] {
	cursor: pointer;
}
mark,
.mark {
	background-color: #fcf8e3;
	padding: .2em;
}
a {
	color: #2980b9;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
a:hover,
a:focus,
a:active {
	color: #3498db;
	text-decoration: none;
}
a:focus {
	outline-offset: -2px;
}
del {
	color: #bdc3c7
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: sans-serif;
	line-height: 1.1;
	color: inherit;
	margin-top: 0;
	margin-bottom: 10px;
}
h1 {
	font-size: 22px;
}
h2 {
	font-size: 20px;
}
h3 {
	font-size: 19px;
}
h4 {
	font-size: 18px;
}
h5 {
	font-size: 17px;
}
h6 {
	font-size: 16px;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
	font-weight: normal;
	line-height: 1;
	font-size: 75%;
}
p {
	margin: 0 0 15px;
}
.item-article p {
	margin: 0 0 0 !important;
}
small {
	font-size: 85%;
}
blockquote {
	border-color: #ecf0f1;
	font-style: italic;
}
table {
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 20px;
	width: 100%;
	border: 1px solid rgba(0,0,0,0.2);
}
caption {
	padding-top: 8px;
	padding-bottom: 8px;
	color: #a7a7a7;
	text-align: left;
}
caption,
th,
td {
	text-align: left;
}
th {
	text-align: left;
	font-weight: bold;
	text-transform: uppercase;
}
td {
	border-top: 1px solid rgba(0,0,0,0.2);
	padding: 6px 12px;
}
fieldset {
	margin: 0 0 20px;
}
ul,
ol {
	margin-top: 0;
	margin-bottom: 11.5px;
}
ul ul,
ol ul,
ul ol,
ol ol {
	margin-bottom: 0;
}
.list-unstyled {
	padding-left: 0;
	list-style: none;
}
.list-inline {
	padding-left: 0;
	list-style: none;
	margin-left: -5px;
}
.list-inline > li {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
}
dl {
	margin-top: 0;
	margin-bottom: 23px;
}
dt,
dd {
	line-height: 1.7;
}
dt {
	font-weight: bold;
}
dd {
	margin-left: 0;
}
@media (min-width: 768px) {
	.dl-horizontal dt {
		float: left;
		width: 160px;
		clear: left;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dl-horizontal dd {
		margin-left: 180px;
	}
}
abbr[title],
abbr[data-original-title] {
	cursor: help;
}
blockquote {
	padding: 11.5px 23px;
	margin: 0 0 23px;
	border-left: 5px solid #ecf0f1;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
	margin-bottom: 0 !important;
}
address {
	margin-bottom: 23px;
	font-style: normal;
	line-height: 1.7;
}
code,
kbd,
pre,
samp {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
	padding: 2px 4px;
	font-size: 90%;
	color: #34495e;
	background-color: #f8f8f8;
	border-radius: 4px;
}
kbd {
	padding: 2px 4px;
	font-size: 90%;
	color: #ffffff;
	background-color: #34495e;
}
kbd kbd {
	padding: 0;
	font-size: 100%;
	font-weight: bold;
	-webkit-box-shadow: none;
	box-shadow: none;
}
pre {
	display: block;
	padding: 11px;
	margin: 0 0 11.5px;
	font-size: 13px;
	line-height: 1.7;
	word-break: break-all;
	word-wrap: break-word;
	color: #fff;
	background-color: #2c3e50;
}
pre code {
	padding: 0;
	font-size: inherit;
	color: inherit;
	white-space: pre-wrap;
	background-color: transparent;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.text-justify {
	text-align: justify;
}
.text-nowrap {
	white-space: nowrap;
}

.pjs-list-table {
	width: 100%;
	display: table;
}
.pjs-table-row {
	display: table-row;
}
.pjs-table-cell {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
}
.pjs-embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: 20px;
}


.pjs-embed-responsive .pjs-embed-responsive-item,
.pjs-embed-responsive iframe,
.pjs-embed-responsive embed,
.pjs-embed-responsive object,
.pjs-embed-responsive video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	border: 0;
}
.pjs-embed-responsive-16by9 {
	padding-bottom: 56.25%;
}
.pjs-embed-responsive-4by3 {
	padding-bottom: 75%;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.pull-right {
	float: right !important;
}
.sidr-class-pull-right {
	float: center !important;
}
.pull-left {
	float: left !important;
	margin-right: 8px
}
.hidden,
.hide {
	display: none !important;
}
.show {
	display: block !important;
}
.invisible {
	visibility: hidden;
}
.affix {
	position: fixed;
}
.pjs-headwrapper {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.site-header {
	position: relative;
}
.site-header-mobile {
  z-index: 9999;
  margin: 0 auto;
  top: 0;
  display: block;
  position: sticky;
  position: -webkit-sticky;
}
.top-header {
	position: relative;
	z-index: 9999;
	box-shadow: 0px 6px 5px -2px rgba(214,222,228,0.8);
}
.wp-dark-mode-active .top-header {box-shadow: 0px 0px 10px rgba(0,0,0,.8);}
@media (max-width: 1200px) {
	.site-header {
		box-shadow: 0px 6px 5px -2px rgba(214,222,228,0.8);
		z-index: 9999;
	}
	.wp-dark-mode-active .site-header {box-shadow: 0px 0px 10px rgba(0,0,0,.8);}
}
#site-container {
	position: relative;
	margin: 0 auto;
	max-width: 1106px;
}
.pjs-content {
	margin-top: 20px;
}
.pjs-logo {
	float: left;
}
.pjs-logo img {
	/* Ukuran TETAP: logo selalu tampil pada tinggi ini berapa pun
	   ukuran file aslinya, jadi logo besar tidak lagi "membengkakkan"
	   header. Lebar mengikuti rasio (width:auto) supaya tidak gepeng,
	   dan max-width:100% mencegah melebar di layar sempit.
	   Tinggi diatur lewat variabel --pjs-logo-height di bawah supaya
	   mudah diganti di satu tempat (termasuk per-breakpoint). */
	height: var(--pjs-logo-height, 50px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}
:root {
	--pjs-logo-height: 50px;
}
@media (max-width: 1024px) {
	:root {
		--pjs-logo-height: 40px;
	}
}
.pjs-table-cell.pjs-logo {
	width: 50%;
}
.site-title {
	line-height: 1.1;
	color: inherit;
	margin-bottom: 0;
	font-size: 20px;
}
.site-description {
	font-size: 12px;
	line-height: 14px;
}
@media (max-width:1200px){

    .pjs-table-cell.pjs-search-wrap{
        margin-top:0;
        width:auto;
        display:flex;
        align-items:center;
    }


	.pjs-table-cell.pjs-logo {
		width:60%;
		display: inline-block;
	}
	.pjs-search {
		width:100% !important;
		max-width:100% !important;
		display: block;
	}

	/* Dibatasi ke .pjs-headwrapper supaya aturan ini HANYA berlaku
	   untuk baris logo/search/menu di header - class .pjs-list-table
	   dan .pjs-table-row ini juga dipakai ulang di setiap item listing
	   post (thumbnail + judul), yang seharusnya sama sekali tidak
	   terpengaruh oleh flex/justify-content di sini. */
	.pjs-headwrapper .pjs-list-table .pjs-table-row{
	    display:flex;
	    align-items:center;
	    justify-content:space-between;
	    flex-wrap:nowrap;
	}

	.pjs-table-cell.pjs-logo{
	    flex:1;
	}

	.pjs-table-cell.onlymobile-menu{
	    width:auto;
	    flex:0 0 auto;
	}

	.pjs-table-cell.pjs-search-wrap{
	    width:auto;
	    flex:0 0 auto;
	}
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
a.button,
button.button,
input.button,
a.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 0 none;
	cursor: pointer;
	display: inline-block;
	outline: 0;
	overflow: visible;
	margin: 0;
	padding: 9px 15px;
	text-decoration: none;
	vertical-align: top;
	width: auto;
	vertical-align: middle;
	background-color: inherit;
	white-space: normal;
	height: auto;
	-webkit-appearance: none;
	-o-background-clip: padding-box;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	-webkit-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	color: #fff;
	-webkit-border-radius:8px;
	border-radius:8px;
}
a.button:hover,
button.button:hover,
input.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:active,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	text-decoration: none;
	opacity: .85;
	color: #fff;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
	background-color: inherit;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0,0,0,0.2);
	outline: 0;
	margin: 0;
	padding: 7px 14px;
	text-align: left;
	font-size: inherit;
	vertical-align: middle;
	font-family: inherit;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-o-background-clip: padding-box;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	-webkit-appearance: none;
	-webkit-border-radius:8px;
	border-radius:8px;
}
input[type="text"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="number"][disabled],
input[type="tel"][disabled],
input[type="range"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="week"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="color"][disabled]
select[disabled],
textarea[disabled]{
	background-color: rgba(0,0,0,0.055);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
	border-color: rgba(0,0,0,0.3);
}
button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
a.button_disabled {
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	color: #888;
	cursor: default;
}
textarea,
select[size],
select[multiple] {
	height: auto;
}
select[size="0"],
select[size="1"] {
	height: 1.8em;
}
select {
	max-width: 100%;
}
textarea {
	min-height: 40px;
	overflow: auto;
	resize: vertical;
	width: 100%;
}
optgroup {
	color: black;
	font-style: normal;
	font-weight: normal;
	font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
}
optgroup::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 10px;
	padding-right: 10px;
}
@media (min-width: 768px) {
	.container {
		max-width: 750px;
	}
	
}
@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.container {
		/* Tetap 1080px seperti semula sampai layar cukup lebar (2160px),
		   lalu melebar mengikuti lebar layar (50vw) secara halus dan
		   otomatis - berhenti tumbuh di 1900px supaya baris teks tidak
		   jadi kepanjangan/tidak enak dibaca di layar sangat besar. */
		max-width: clamp(1080px, 50vw, 1900px);
	}
}

.container-fluid {
	margin-right: auto;
	margin-left: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.row {
	margin-left: -10px;
	margin-right: -10px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-3-footer, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .grid-container .pjs-infeed-banner {
	position: relative;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
}
@media (min-width: 1200px) {
	.col-md-12 {
		flex: 0 0 auto;width: 100%;
	}
	.col-md-11 {
		flex: 0 0 auto;width: 91.66666667%;
	}
	.col-md-10 {
		flex: 0 0 auto;width: 83.33333333%;
	}
	.col-md-9 {
		flex: 0 0 auto;width: 75%;
	}
	.col-md-8 {
		flex: 0 0 auto;width: 66.66666667%;
	}
	.col-md-7 {
		flex: 0 0 auto;width: 58.33333333%;
	}
	.col-md-6 {
		flex: 0 0 auto;width: 50%;
	}
	.col-md-5 {
		flex: 0 0 auto;width: 41.66666667%;
	}
	.col-md-4 {
		flex: 0 0 auto;width: 33.33333333%;
	}
	.col-md-8 .grid-container .pjs-infeed-banner,
	.col-md-3, .col-md-3-footer {
		flex: 0 0 auto;width: 25%;
	}
	.col-md-12 .grid-container .pjs-infeed-banner,
	.col-md-2 {
		flex: 0 0 auto;width: 16.66666667%;
	}
	.col-md-1 {
		flex: 0 0 auto;width: 8.33333333%;
	}
}
/* Sticky Header */
.pjs-sticky .top-header.pos-stickymenu {
	z-index: 9999;
	margin: 0 auto;
	top: 0;
	display: block;
	position: sticky;
	position: -webkit-sticky;
}

.pjs-no-sticky .pos-stickymenu{
	position: relative !important;
	top: auto !important;
}
.pjs-sticky.admin-bar .top-header.pos-stickymenu {
	top: 32px;
}
@media (max-width:782px) {
	.pjs-sticky.admin-bar .top-header.pos-stickymenu {
		top: 46px;
	}
}

@media screen and (max-width:600px) {
	.pjs-sticky.admin-bar .top-header.pos-stickymenu {
		top: 0;
	}
}
.pjs-featured-image {
	margin-bottom: 30px;
}
.pjs-slider {
	margin-bottom: 20px;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.sticky-menu .pjs-menuwrap {
	-webkit-box-shadow: 0px 6px 5px -2px rgba(0,0,0,0.1);
	box-shadow: 0px 6px 5px -2px rgba(0,0,0,0.1);
}
.pjs-secondmenuwrap {
	border-bottom: 1px solid #ffffff;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.pjs-mainmenu {
	margin: 0;
	padding: 0;
	line-height: 30px;
}
.pjs-secondmenu {
	margin: 0;
	padding: 0;
}
.pjs-mainmenu ul {
	list-style:none;
}
/* ul#primary-menu */
#primary-menu,
#primary-menu .sub-menu,
#primary-menu .children {
	margin: 0 auto;
	padding: 0;
	z-index: 9999;
}
#primary-menu > li,
#primary-menu .sub-menu li,
#primary-menu .children li {
	display: block;
	float: left;
	position: relative;
}
#primary-menu > li > a {
	position: relative;
	display: block;
	padding: 6px 12px;
	text-decoration: none !important;
	font-size: 13px;
	text-transform: uppercase;
}
.pjs-mainmenu #primary-menu > li:first-child > a {
	background-color: rgba(0,0,0,0.05);
}
.pjs-secondmenu #primary-menu > li > a {
	padding: 0 0;
	margin-right: 20px;
	line-height: 25px;
	font-weight: 500;
	text-transform: inherit;
}
#primary-menu > li.menu-border > a span {
	border: 2px solid #fff;
	line-height: 20px;
	padding: 10px 15px;
	margin-top: 18px;
	margin-bottom: 18px;
}
#primary-menu > li.pjs-menu-cart > a sup {
	margin-left: 5px;
}
#primary-menu > li.page_item_has_children > a:after,
#primary-menu > li.menu-item-has-children > a:after,
#primary-menu .sub-menu > li.page_item_has_children > a:after,
#primary-menu .sub-menu > li.menu-item-has-children > a:after,
#primary-menu .children > li.page_item_has_children > a:after,
#primary-menu .children > li.menu-item-has-children > a:after {
	display: inline-block;
	position: relative;
	margin-left: 6px;
	margin-right: 3px;
	margin-top: -5px;
	top: auto;
	bottom: auto;
	vertical-align: middle;
	content: ' ';
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: currentColor;
	-webkit-transform-origin: 66% 66%;
	-ms-transform-origin: 66% 66%;
	transform-origin: 66% 66%;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	height: 6px;
	width: 6px;
}
#primary-menu > li.page_item_has_children:hover > a:after,
#primary-menu > li.menu-item-has-children:hover > a:after {
	transform: rotate(225deg);
	border-color: #FF5722;
}
#primary-menu .sub-menu > li.page_item_has_children > a:after,
#primary-menu .sub-menu > li.menu-item-has-children > a:after,
#primary-menu .children > li.page_item_has_children > a:after,
#primary-menu .children > li.menu-item-has-children > a:after {
	transform: rotate(-45deg);
	height: 6px;
	width: 6px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 5px;
	top: auto;
	bottom: auto;
	float: right;
}
#primary-menu .sub-menu > li.page_item_has_children:hover > a:after,
#primary-menu .sub-menu > li.menu-item-has-children:hover > a:after,
#primary-menu .children > li.page_item_has_children:hover > a:after,
#primary-menu .children > li.menu-item-has-children:hover > a:after {
	transform: rotate(135deg);
}
#primary-menu .sub-menu,
#primary-menu .children {
	left: 0;
	padding: 0;
	position: absolute;
	top: 120%;
	width: 200px;
	z-index: 999;
	opacity: 0;
	display: none;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 4px -2px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 4px -2px rgba(0,0,0,0.3);
}

#primary-menu > li.col-2 > .sub-menu {width: 350px;}
#primary-menu > li.col-3 > .sub-menu {width: 450px;}
#primary-menu > li.col-4 > .sub-menu {width: 600px;}
#primary-menu > li.col-2 > .sub-menu > li {width: 50%;float: left;display: inline;}
#primary-menu > li.col-3 > .sub-menu > li {width: 33.33%;float: left;display: inline;}
#primary-menu > li.col-4 > .sub-menu > li {width: 25%;float: left;display: inline;}
#primary-menu li.col-2 > .sub-menu,
#primary-menu li.col-3 > .sub-menu,
#primary-menu li.col-4 > .sub-menu {
	padding: 10px;
}
#primary-menu .sub-menu:after,
#primary-menu .children:after {
	bottom: 80%;
	left: 40px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
	opacity: 0;
	display: none;
}
#primary-menu .sub-menu ul,
#primary-menu .children ul {
	left: 200px !important;
	top: 0 !important;
}
#primary-menu .sub-menu ul:after,
#primary-menu .children ul:after {
	border-width: 0;
	margin-left: 0;
}
#primary-menu .sub-menu a,
#primary-menu .children a {
	display: block;
	line-height: 18px;
	font-size: 12px;
	letter-spacing: 0;
	padding: 6px 12px !important;
	text-align: left;
	text-transform: none !important;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
#primary-menu .sub-menu.current_page_item:after,
#primary-menu .sub-menu li,
#primary-menu .children.current_page_item:after,
#primary-menu .children li {
	float: none;
}
/* Focused for accessibility */
#primary-menu li > .sub-menu.focused,
#primary-menu li:hover > .sub-menu,
#primary-menu li > .children.focused,
#primary-menu li:hover > .children {
	opacity: 1;
	top: 100%;
	display: block;
	animation: anim .5s ease-in-out;
}
#primary-menu li > .sub-menu.focused:after,
#primary-menu li:hover > .sub-menu:after,
#primary-menu li > .children.focused:after,
#primary-menu li:hover > .children:after {
	opacity: 1;
	bottom: 100%;
	display: block;
	animation: anim .5s ease-in-out;
}
@keyframes anim {
	0% {
		display: none;
		transform: translateY(20%);
	}
	1% {
		display: block;
		opacity: 0;
		transform: translateY(20%);

	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

@media (max-width: 767px) {
	.pjs-secondmenuwrap {
		text-align: center;
	}
	.pjs-secondmenu {
		margin-bottom: 10px;
	}
	.pjs-secondmenu #primary-menu > li {
		display: inline-block;
		float: none;
	}
	.pjs-social-icon ul.pull-right {
		float: none !important;
		text-align: center;

	}
	.sidr-class-pjs-social-icon ul.sidr-class-pull-right {
		float: center !important;
		text-align: center;
	}
	.sidr-class-followustxt{
		float: center !important;
		text-align: center;
		padding-top: 40px;	
		padding-bottom: 15px;	
	}

}

/* Tablet (e.g. iPad) widths: keep the footer menu links left-aligned
   but center the "follow us" social icons row, since side-by-side
   float layout looks unbalanced at this width. */
@media (min-width: 768px) and (max-width: 1024px) {
	.pjs-social-icon {
		float: none;
		width: 100%;
		clear: both;
	}
	.pjs-social-icon ul.pull-right {
		float: none !important;
		text-align: center;
	}
	.pjs-social-icon ul.pull-right > li {
		display: inline-block;
		float: none;
	}
}
/* Responsive Menu */
.followustxt{
    display:none;
}
.followus{
    display:none !important;
}
.onlymobile-menu{
    display:none !important;
}

.close-topnavmenu-wrap{
    display:none;
}

#pjs-responsive-menu{
    display:none;
    vertical-align:middle;
}
@media (max-width: 1200px) {
    .onlymobile-menu{
        display:flex !important;
        align-items:center;
        justify-content:flex-end;
        width:40%;
        gap:0px;
    }

    .onlydesktop-content,
    .pjs-mainmenu{
        display:none;
    }

	#pjs-responsive-menu{
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    position:relative;
	    font-size:30px !important;
	    line-height:30px !important;
	    height:30px !important;
	}
	.onlydesktop-content,
	.pjs-mainmenu {
		display: none;
	}
	.pjs-header-tools{
	    justify-content:flex-end;
	    gap:8px;
	}

	.pjs-search{
	    flex:1;
	    max-width:none;
	}

	.pjs-theme-mode{
	    order:2;
	}

	#pjs-responsive-menu{
	    order:3;
	}
}
/* ======================================================
   Header Tools
====================================================== */

.pjs-header-tools{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    width:100%;
}

.pjs-theme-mode{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

#pjs-theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

html[data-theme="light"] #pjs-theme-toggle{
    color:#222 !important;
}

html[data-theme="light"] #pjs-theme-icon,
html[data-theme="light"] #pjs-theme-icon *{
    color:#222 !important;
    fill:#222 !important;
    stroke:#222 !important;
}

html[data-theme="light"] #pjs-theme-icon{
    color:#222 !important;
}

html[data-theme="light"] #pjs-theme-icon svg{
    stroke:#222 !important;
    fill:none !important;
}
#pjs-theme-toggle svg{
    width:18px;
    height:18px;
}
/*
 * Top Search
 */
.pjs-search{
    flex:1;
    min-width:0;
}
.desktop-theme{
    flex:0 0 auto;
}
.pjs-search input[type="text"] {
	width: 100%;
	padding: 0 10px;
	font-size: 12px;
	height: 32px;
	line-height: 32px;
	border: 1px solid rgba(0,0,0,0.2);
	color: #111;
}
.pjs-search form{
	position: relative;
	background-color: #ffffff;
	-webkit-border-radius:8px;
	border-radius:8px;
}
.pjs-search-submit {
	position: absolute;
	top: 1px;
	right: 1px;
	padding: 6px 6px;
	font-size: 16px;
	line-height: 12px;
	height: 30px;
	background-color: transparent;
	color: inherit !important;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
/*--------------------------------------------------------------
## Other Navigation
--------------------------------------------------------------*/
.pjs-social-icon {
	margin: 0;
	padding: 0;
}
.pjs-social-icon ul {
	margin: 0 auto;
	padding: 0;
	list-style:none;
	z-index: 9999;
}
.pjs-social-icon ul > li {
	display: inline-block;
	position: relative;
	margin-left:5px;
}
.pjs-social-icon ul > li > a {
	position: relative;
	display: block;
	text-decoration: none !important;
	font-size: 13px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	border: 1px solid #222;
	text-align: center;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	padding-top: 1.2px;
}

	.sidr-class-pjs-social-icon ul.sidr-class-pull-right {
		float: center !important;
		text-align: center;
	}
	.sidr-class-followustxt{
		float: center !important;
		margin-left:  10px;
		text-align: center;
		padding-top: 40px;		
	}

.sidr-class-pjs-social-icon {
	margin: 0;
	padding: 0;
}
.sidr-class-pjs-social-icon ul {
	margin: 0 auto;
	padding: 0;
	list-style:none;
	z-index: 9999;
}
.sidr-class-pjs-social-icon ul > li {
	display: inline-block;
	position: relative;
	margin-left:5px;
}
.sidr-class-pjs-social-icon ul > li > a {
	position: relative;
	display: block;
	text-decoration: none !important;
	font-size: 13px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;

}
.site-main .comment-navigation {
	margin: 0 0 1.5em;
}
.site-main .posts-navigation,
.site-main .post-navigation {
	overflow: hidden;
	padding: 10px 0 0;
	margin: 1.5em 0 0;
	border-top: 2px dashed #ecf0f1;
}
.post-navigation .nav-previous span,
.post-navigation .nav-next span {
	color: #aaa;
	display: block;
}
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 48%;
}
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 48%;
}

/*--------------------------------------------------------------
## Pagination
--------------------------------------------------------------*/
ul.page-numbers {
	list-style: none !important;
	padding-left: 0;
	text-align: center;
	font-size: 12px;
}
ul.page-numbers li {
	display: inline-block;
	margin: 0 2px;
}
ul.page-numbers li span.current,
ul.page-numbers li a {
	padding: 6px 12px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
ul.page-numbers li a:hover,
ul.page-numbers li span.page-numbers {
	background-color: #292d33;
	color: #fff;
}
ul.page-numbers li span.page-numbers.dots {
	background-color: transparent !important;
	color: inherit !important;
}
.page-links {
	margin-bottom: 20px;
	font-size: 13px;
}
.page-links .page-link-number {
	font-size: 13px;
	margin: 10px 2px 0 0;
	padding: 6px 12px;
	display: inline-block;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.page-links .current > .page-link-number,
.page-links > .page-link-number {
	color: #fff;
}
.page-links .page-text {
	display: none !important;
}
.page-links a .page-link-number {
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	background-color: transparent;
}
.page-links a .page-link-number:hover{
	background-color: #292d33;
	color: #fff;
}
.pjs-hidden{
	display: none;
}
ul.page-numbers li svg {
	vertical-align: -0.125em;
}
ul.page-numbers li a.next,
ul.page-numbers li a.prev {
	padding: 6px 6px;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #efefef;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignnone {
	margin: 0 auto 20px auto;
}
.aligncenter,
div.aligncenter {
	display: block;
	margin: 0 auto 5px auto;
}
.alignright {
	float: right;
	margin: 0 0 20px 20px;
}
.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}
a img.alignright {
	float: right;
	margin: 0 0 20px 20px;
}
a img.alignnone {
	margin: 0 20px 20px 0;
}
a img.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}
a img.aligncenter,
p.img-center img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 20px;
}
.widget-home .widget,
.sidebar-layout .widget {
	background-color: #ffffff;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(214,222,228,.8);
	-webkit-box-shadow: 0px 0px 10px rgba(214,222,228,.8);
}

.wp-dark-mode-active .widget-home .widget,
.wp-dark-mode-active .sidebar-layout .widget{box-shadow: 0px 0px 10px rgba(0,0,0,.8);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);}

/* Clearing fix element */
ol.comment-list li .comment-meta:before,
ol.comment-list li .comment-meta:after,
.widget:before,
.widget:after {
	content: "";
	display: table;
}
ol.comment-list li .comment-meta:after,
.widget:after {
	clear: both;
}
.page-title,
.widget-title {
	margin: 0 0 10px 0;
	font-size: 16px;
}
.page-title:after,
.widget-title:after {
	content: "";
	display: block;
	width: 100%;
	max-width: 70px;
	border-top: 2px solid #ddd;
	margin-top: 10px;
}
/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}
.widget ul {
	margin-top:-5px;
	margin-bottom:-5px;
	padding-left:0;
	list-style:none;
}
.widget ul.sub-menu,
.widget ul.children {
	margin-top:5px;
	padding-left:20px;
}
.widget li {
	padding:7px 0;
}

/* Search widget */
.widget_search input[type="search"]{
	width:100%;
	display:block;
}
.widget_search input[type="submit"]{
	display: none;
}

/* Tag Cloud */
.tagcloud .tagtitle {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
}
.tagcloud a {
	border: 1px solid #2c3e50;
	display: inline-block;
	outline: 0;
	overflow: visible;
	margin: 0 5px 10px 0;
	padding: 5px 10px 5px;
	text-decoration: none;
	vertical-align: top;
	width: auto;
	font: inherit;
	vertical-align: middle;
	font-size: 13px !important;
	font-weight: 700;
	background-color: inherit;
	-webkit-appearance: none;
	-o-background-clip: padding-box;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	-webkit-border-radius:8px;
	border-radius:8px;
}
.tagcloud a:hover,
.tagcloud a:active,
.tagcloud a:focus {
	color: #fff;
}
.lokerpro-title-wrap {
	max-width: 0;
}
.limit-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.limit-title-related {
    white-space: nowrap;
    overflow: hidden;
	width: 570px;
    text-overflow: ellipsis;
}

/* RSS widget */
.widget_rss a img {
	display: none;
}
.widget_rss li .rsswidget {
	display: block;
}
.widget_rss li .rss-date {
	font-size: 13px;
	color: #bbb;
	margin-bottom: 20px;
}

/* calendar widget */
#wp-calendar {
	width: 100%;
}
#wp-calendar caption {
	text-align: right;
	margin-top: 0;
	margin-bottom: 0;
}
#wp-calendar thead th {
	text-align: center;
	padding: 8px;
	background: rgba(0,0,0,0.05);
	border: 1px solid rgba(0,0,0,0.05);
}
#wp-calendar tbody td {
	background: rgba(0,0,0,0.025);
	border: 1px solid rgba(0,0,0,0.05);
	text-align: center;
	padding: 8px;
}
#wp-calendar tbody td:hover {
	background: rgba(0,0,0,0.05);
}
#wp-calendar tbody .pad {
	background: none;
}
#wp-calendar tfoot #next {
	text-align: right;
}
#wp-calendar tfoot #prev {
	padding-top: 10px;
}
@media (max-width: 480px) {
	#wp-calendar thead th,
	#wp-calendar tbody td {
		padding: 0;
	}
}

/* All Widget */
.lokerpro-form-widget .intro-text {font-size: 14px;}
.lokerpro-form-widget .spam-text {font-size: 12px;font-style: italic;text-align: center;}
.lokerpro-form-widget form input {margin-right: 10px;margin-bottom: 10px;}
.lokerpro-form-widget.force-100 form input {width: 100%;margin-right: 0;}
.lokerpro-form-widget form input[type="submit"] {background-color: #2c3e50;border-color: #2c3e50;color: #ffffff;}
.lokerpro-form-widget form input[type="submit"]:hover {opacity: 0.9;}
@media (max-width:767px) {
	.lokerpro-form-widget form input {width: 100%;margin-bottom: 10px;margin-right: 0;}
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
#primary {
	margin-bottom: 20px;
}
.content-area {
	background-color: #ffffff;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(214,222,228,.8);
	-webkit-box-shadow: 0px 0px 10px rgba(214,222,228,.8);
}
.wp-dark-mode-active .content-area {box-shadow: 0px 0px 10px rgba(0,0,0,.8);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);}
.taxonomy-description {
	position:relative;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	margin-bottom: 20px;
	padding-bottom: 15px;
}
.taxonomy-description p:last-child {
	margin-bottom: 0 !important;
}
.has-post-thumbnail.pjs-smallthumb .content-thumbnail {
	width: 47px;
}
.has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail, .has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail-blog{
	float: left;
	position: relative;
	margin-bottom: 0;
	max-width: 200px;
}
.has-post-thumbnail.pjs-smallthumb-blogs .item-article {
	position: relative;
	margin-left: 220px;
}
.pjs-archivepage .entry-content p {
	font-size: 13px;
	line-height: 16px;
}
.item-article .entry-content {
	margin-top: 5px;
}
@media (max-width: 480px) {
	.has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail, .has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail-blog {
		max-width: 100px;
	}
	.has-post-thumbnail.pjs-smallthumb-blogs .item-article {
		margin-left: 120px;
	}
}
@media (max-width: 320px) {
	.has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail, .has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail-blog {
		float: none !important;
		max-width: 100%;
	}
	.has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail img, .has-post-thumbnail.pjs-smallthumb-blogs .content-thumbnail-blog img {
		width: 100%;
		margin-bottom: 20px;
	}
	.has-post-thumbnail.pjs-smallthumb-blogs .item-article {
		margin-left: 0 !important;
	}
}
.has-post-thumbnail.pjs-smallthumb .item-article {
	position: relative;
	margin-left: 130px !important; /* disamakan dengan .header-title supaya judul & snippet rata kiri */
}
.item-article .entry-header {
	margin-bottom: 5px;
}
.pjs-disablethumbnail-singlesoft .has-post-thumbnail .title-wrap,
.pjs-disable-thumbnail .has-post-thumbnail.pjs-smallthumb-blogs .item-article,
.pjs-disable-thumbnail .has-post-thumbnail.pjs-smallthumb .item-article {
	margin-left: 0;
}
.pjs-box-content {
	position: relative;
	min-height:  40px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.pjs-infeed-banner .pjs-box-content{
	border-width: 0 0 1px;
	border-color: rgba(0,0,0,0.2);
	border-style: solid;
	text-align: center;
}
.pjs-archivepage.pjs-box-content {
	border-bottom: 1px solid rgba(0,0,0,0.2);
	min-height: 95px; /* disamakan dengan rule di bawah - lihat catatan di sana */
	margin-bottom: 5px;
}
.pjs-archivepage.pjs-box-content:last-child {
	border-bottom: 0 !important;
}
.pjs-box-content.pjs-single .entry-header {
	position: relative;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
.pjs-box-content.pjs-single {
	padding-bottom: 0 !important;
}
@media (max-width: 767px) {
	.pjs-box-content.pjs-single .entry-header figure {
		max-width: ;
	}
	.pjs-box-content.pjs-single .entry-header h1.entry-title {
		font-size: 18px;
		line-height: 20px;
	}
	.has-post-thumbnail .title-wrap {
		margin-left: 55px !important;
	}
}
@media (max-width: 600px) {
	a.in-single-download {
		width: 100% !important;
		display: block !important;
		text-align: center !important;
		margin-bottom: 5px;
	}
}
.pjs-box-content.pjs-single .entry-header span.byline,
.pjs-box-content.pjs-single .entry-header span.posted-on,
.pjs-box-content.pjs-single .entry-header span.pjs-view {
	margin-top: 20px;
	color: #aaa;
}
.pjs-box-content.pjs-single .entry-header span.byline {
	margin-right: 20px;
}
.pjs-box-content.pjs-single .entry-header span.pjs-view {
	margin-left: 20px;
}
.kbd-sticky {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 6px;
	color: #ffffff;
}
.entry-meta {
	font-size: 13px;
	line-height: 16px;
	color: #666666;
}
.entry-meta a {
	color: #666666;
}
.pjs-app-meta {
	margin-right: 20px;
}
div.header-title {
	margin-left: 130px !important;
}
div.header-title-related {
	margin-left: 70px;
}
div.related-post {
    margin-left: 50px;
}
div.post-title, h2.post-title {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	margin-bottom: 0 !important;
}
.content-thumbnail img {
		top:  0px;
    width: 120px;
    max-height: 90px;
    float: left;
    object-fit: cover;
    position: absolute;
}

/* ==========================================================
   Homepage Thumbnail Visibility
========================================================== */

/* Hide Everywhere */
.thumbnail-hide-all .content-thumbnail{
	display:none;
}

.thumbnail-hide-all .header-title{
	margin-left:0;
}

.thumbnail-hide-all .item-article{
	margin-left:0 !important;
}


/* Desktop Only */
@media (min-width:1201px){

	.thumbnail-hide-desktop .content-thumbnail{
		display:none;
	}

	.thumbnail-hide-desktop .header-title{
		margin-left:0;
	}

	.thumbnail-hide-desktop .item-article{
		margin-left:0 !important;
	}

}
/* Sembunyikan tombol search mobile di desktop */
#pjs-mobile-search-button{
    display:none !important;
}

/* Mobile Only */
@media (max-width:1200px){

	#pjs-mobile-search-button{
	    display:flex !important;
	}
    /* Follow Us tetap disembunyikan di lebar ini karena baris
       search/mode/hamburger (.onlymobile-menu) sudah tampil di sini -
       kalau dipaksa flex juga, dia numpuk/mengambang di atas konten
       lain sebab wrapper desktop-nya (.pjs-mainmenu) ikut disembunyikan. */
    .followus{
        display:none !important;
    }
	.thumbnail-hide-mobile .content-thumbnail{
		display:none;
	}

	.thumbnail-hide-mobile .header-title{
		margin-left:0;
	}

	.thumbnail-hide-mobile .item-article{
		margin-left:0 !important;
	}

}

.has-post-thumbnail.pjs-smallthumb .content-thumbnail, .has-post-thumbnail.pjs-smallthumb .content-thumbnail-blog  {
    width: 0;
}

/* Baris thumbnail + judul di listing (homepage/arsip) dibuat flexbox
   supaya judul bisa rata atas ATAU center sesuai kondisi di bawah.

   - Excerpt Length > 0 (ada snippet): baris DIBIARKAN setinggi judul
     saja (tidak dipaksa 67.5px) - judul rata atas, snippet langsung
     nempel di bawahnya seperti semula. Gambar (position:absolute,
     lebar cuma 120px) boleh "menyambung" secara vertikal ke bagian
     atas snippet karena secara horizontal tidak akan tabrakan -
     teks snippet baru mulai di margin-left 130px, jadi aman.
   - Excerpt Length = 0 (`.item-article` tidak ikut dirender oleh
     PHP sama sekali): di sinilah baru baris & kolom thumbnail
     dipaksa setinggi gambar (67.5px) - supaya gambar tidak meluber
     ke artikel BERIKUTNYA (karena tidak ada elemen lain yang
     menahan tinggi artikel) - dan judul di-center vertikal
     terhadap gambar. */
.has-post-thumbnail.pjs-smallthumb .pjs-list-table .pjs-table-row {
	display: flex;
	align-items: flex-start;
}

.has-post-thumbnail.pjs-smallthumb:not( :has( .item-article ) ) .content-thumbnail {
	min-height: 67.5px;
}

.has-post-thumbnail.pjs-smallthumb:not( :has( .item-article ) ) .pjs-list-table .pjs-table-row {
	align-items: center;
	min-height: 67.5px;
}

/* Kalau gambarnya di-hide (class .pjs-no-thumbnail dari Customizer,
   atau class pembungkus thumbnail-hide-*) ATAU elemen .content-thumbnail
   memang tidak pernah dirender sama sekali (mis. widget "Related
   posts" - class has-post-thumbnail-nya ada tapi markup gambarnya
   di-comment di template-nya), reservasi 67.5px di atas tidak
   diperlukan - baris cukup setinggi judulnya saja supaya jarak
   antar-artikel tetap rapat 5px. */
.has-post-thumbnail.pjs-smallthumb.pjs-no-thumbnail .pjs-list-table .pjs-table-row,
.has-post-thumbnail.pjs-smallthumb:not( :has( .content-thumbnail ) ) .pjs-list-table .pjs-table-row,
.thumbnail-hide-all .has-post-thumbnail.pjs-smallthumb .pjs-list-table .pjs-table-row {
	min-height: 0;
}

@media (min-width:1201px){
	.thumbnail-hide-desktop .has-post-thumbnail.pjs-smallthumb .pjs-list-table .pjs-table-row {
		min-height: 0;
	}
}

@media (max-width:1200px){
	.thumbnail-hide-mobile .has-post-thumbnail.pjs-smallthumb .pjs-list-table .pjs-table-row {
		min-height: 0;
	}
}

.item-article .entry-content {
    margin-top: 5px;
}
.has-post-thumbnail.pjs-smallthumb .item-article {
    position: relative;
    margin-left: 130px !important; /* disamakan dengan .header-title supaya judul & snippet rata kiri */
}

.has-post-thumbnail.pjs-smallthumb.pjs-no-thumbnail .item-article{
	position: relative;
	margin-left:0 !important;
}

.has-post-thumbnail.pjs-smallthumb.pjs-no-thumbnail .header-title{
	margin-left:0 !important;
}

.download-title h1 {
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 0 !important;
}
.download-title h1 svg {
	font-size: 24px;
	vertical-align: -0.25em;
	margin-right: 5px;
}
h1.entry-title {
	font-size: 24px;
	line-height: 28px;
	margin-bottom: 5px !important;
}
.has-post-thumbnail .title-wrap {
	margin-left: 105px;
}
.entry-content,
.pjs-box-content p {
	word-wrap: break-word;
}
.entry-content:before,
.entry-content:after {
	content: " ";
	display: table;
}
.entry-content:after {
	clear: both;
}

.updated:not(.published) {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
}
.page-content,
.entry-summary {
	margin: 0 0 0;
}

/* Breadcrumbs */
.breadcrumbs {padding: 10px 20px;background-color: rgba(0,0,0,0.05);margin: -20px -20px 20px -20px;font-size: 12px;}
.breadcrumbs .separator{padding-left: 3px;padding-right: 3px;}
.breadcrumbs .separator svg {vertical-align: -0.25em;}

/* Author box */
.pjs-authorbox {word-wrap: break-word;padding:15px;background-color: rgba(0,0,0,0.05);padding: 20px;font-size: 12px;-webkit-border-radius: 8px;border-radius: 8px;margin-bottom: 20px;}
.pjs-ab-gravatar {float: left;margin-right: 10px;vertical-align: middle;}
.pjs-ab-gravatar img.avatar {-webkit-border-radius:50%;border-radius:50%;}
.pjs-ab-content {padding-left: 62px;vertical-align: middle;}
.pjs-ab-authorname {text-transform: capitalize;}
.pjs-ab-authorname span.uname {font-size: 16px;line-height: 18px;font-weight: 700;}
.pjs-ab-web {font-size: 13px;float: right;}
.pjs-ab-desc {font-size: 13px; color: #999999;}
.pjs-ab-desc p {margin-bottom: 5px !important;}
@media (max-width:767px) {
	.pjs-ab-gravatar {display: none;}
	.pjs-ab-content {padding-left: 0;}
}

/* Top Notification */
.pjs-topnotification {
	padding: 10px 15px;
	background-color: #ffffff;
	font-weight: 700;
	position: relative;
	/* Dipatok rendah supaya TIDAK PERNAH menutupi dropdown mode
	   gelap/terang - dropdown itu sekarang bisa "ikut" dipindah ke
	   dalam .top-header (menu sticky) saat discroll (lihat
	   sticky-menu-tools.js), dan .top-header sendiri sudah punya
	   z-index:9999 - jadi elemen ini perlu dipastikan tetap di bawah
	   itu secara eksplisit. */
	z-index: 1;
	border-radius: 0px 0px 8px 8px;
	-webkit-border-radius: 0px 0px 8px 8px;
	box-shadow: 0px 0px 10px rgba(214,222,228,.8);
	-webkit-box-shadow: 0px 0px 10px rgba(214,222,228,.8);
}
.wp-dark-mode-active .pjs-topnotification{box-shadow: 0px 0px 10px rgba(0,0,0,.8);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);}
.wrap-marquee {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	display: inline-flex;
	white-space: nowrap;
}
.pjs-topnotification a.pjs-recent-marquee {
	margin-right: 60px;
	display: inline-block;
}
.pjs-topnotification a.pjs-recent-marquee img {
	width: 20px;
	height: 20px;
}
.text-marquee {
	color: #ffffff;
	background-color: #000000;
	display: inline-block;
	position: relative;
	z-index: 1;
	padding: 5px 10px;
	border-radius: 6px;
}
.pjs-topnotification span.marquee {
	padding: 5px 10px;
	display: flex;
	flex-basis: 100%;
	padding-left: 100%;
	animation: marquee 35s linear infinite;
	-moz-animation: marquee 35s linear infinite;
	-webkit-animation: marquee 35s linear infinite;
}

.pjs-topnotification span.marquee:hover {
	animation-play-state: paused
}
@keyframes marquee {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-100%, 0);
	}
}


#div1 {
  display: inline-block;
  animation: marquee1 35s linear infinite;
}

#div2 {
  display: inline-block;
  animation: marquee2 35s linear infinite;
  animation-delay: 19s;
}

@keyframes marquee1 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

/* Software */
.pjs-button-download {
	float: left;
	margin-top: 15px;
}
.pjs-button-download .in-single-download {
	margin-right: 5px;
}
.pjs-button-download svg {
	font-size: 18px;
	vertical-align: -0.2em;
	margin-right: 5px;
}
.download-filesize {
	font-size: 12px !important;
}
.pjs-download-list,
.pjs-list-specs {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
	word-wrap: break-word;
}
.pjs-list-specs {
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius:8px;
	border-radius:8px;
	padding: 10px 15px;
}
.pjs-list-specs > li {
	display: block;
	padding: 5px 0;
	font-size: 12px;
	line-height: 16px;
	border-bottom: 1px dashed rgba(0,0,0,0.2);
}
.pjs-list-specs > li:last-child {
	border: none !important;
}
.pjs-list-specs span.list-title {
	font-weight: 700;
	width: 125px;
	display: inline-block;
}
.pjs-download-list > li {
	margin-bottom: 10px;
}
.pjs-download-list > li a{
	display: block;
	text-align: center;
}
.pjs-download-list > li a svg {
	font-size: 18px;
	vertical-align: -0.2em;
	margin-right: 5px;
}
.text-download {
	padding: 20px;
	color: #596275;
	border: 2px solid #9adaa9;
	background-color: #d1eed8;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	margin: 0 0 18px 0;
}
/* Bagian judul lowongan di teks "Apply to [Judul]." - hanya bagian
   link judulnya (bukan tulisan "Apply to"-nya) yang diminta jadi
   warna silver. */
.download-title h1 a {
	color: #000000;
}
.text-download span {
	margin-right: 15px;
}

.pjs-az-list {
	margin-bottom: 20px;
}
.pjs-az-list ul {
	margin-top:-5px;
	margin-bottom:-5px;
	padding-left:0;
	list-style:none;
}
.pjs-az-list li {
	padding:3px 0;
}
ul.page-numbers.az-list-paginate {
	display: block;
	margin-bottom: 20px;
}
ul.page-numbers.az-list-paginate li a {
	background-color: rgba(0,0,0,0.05);
}
.pjs-az-list .az-list-header {
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
.pjs-az-headtitle {
	font-size: 24px;
}
.pjs-az-headtitle span{
	font-size: 13px;
	color: #95a5a6;
}
.pjs-az-list .az-list-header h2 {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-title {
	margin-bottom: 20px;
	font-size:18px;
}
.comment-content a {
	word-wrap: break-word;
}
ol.comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	text-indent:0;
	position: relative;
}
ol.comment-list li .comment-meta {
	margin-bottom: 20px;
	position: relative;
}
ol.comment-list li .comment-meta:after {
	content: " ";
	bottom: -15px;
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
ol.comment-list li.comment {
	margin: 0 0 15px;
}
.comment-body {
	padding:10px;
}
.bypostauthor > .comment-body {
	border-left: 2px solid #ddd;
}
ol.comment-list li.comment ol.children li.comment {
	margin-left: 20px;
}
ol.comment-list li div.vcard cite.fn {
	font-style: normal;
}
ol.comment-list li div.vcard img.avatar {
	float: left;
	margin: 0 0.8em 0 0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
ol.comment-list li div.comment-author {
	font-size: 13px;
}
ol.comment-list li div.comment-metadata {
	font-size: 12px;
}
ol.comment-list li div.comment-metadata a {
	color: #aaa;
}
ol.comment-list li p {
	margin:0 0 1em;
}
ol.comment-list li ol {
	list-style:square;
	margin:0 0 1em 2em;
}
ol.comment-list li div.reply { font-size:12px; }
ol.comment-list li ol.children { list-style:none; margin:1em 0 0; padding-left:0; text-indent:0; }
ol.comment-list li.even {  }
ol.comment-list li.odd {  }
ol.comment-list li.pingback { padding:1em; }

@media (max-width: 767px) {
	ol.comment-list li.comment {
		margin: 0 0 5px;
	}
	ol.comment-list li.comment ol.children li.comment {
		margin-left: 5px;
	}
	ol.comment-list li.parent,
	ol.comment-list li ol.children li.depth-2,
	ol.comment-list li ol.children li.depth-3,
	ol.comment-list li ol.children li.depth-4 {
		border-left:none;
	}
}

/*--------------------------------------------------------------
### Comment Form
--------------------------------------------------------------*/
#respond {
	position:relative;
}
h3.comment-reply-title {margin: 0 0 10px 0;font-size: 16px;}
h3.comment-reply-title:after {content: "";display: block;width: 100%;max-width: 70px;border-top: 2px solid #ddd;margin-top: 10px;}
ol.comment-list li #respond {
	margin-top:20px;
}
ol.comment-list li #reply-title {
	font-size: 0;
	margin: 0!important;
	padding: 0;
	height: 0;
	border-top: 0;
}
#cancel-comment-reply-link {
	color: #999;
	display: block;
	position: absolute;
	bottom: 15px;
	right: 20px;
	vertical-align:middle;
	font-size: 14px;
}
#cancel-comment-reply-link:hover {
	color: #777;
}
#commentform p.comment-notes {
	color:#aaa;
	font-size: 12px;
}
#commentform input[type="email"],
#commentform input[type="text"],
#commentform textarea {
	max-width: 100%;
	width: 100%;
}
#commentform p.comment-form-author {
	width: 48%;
	float: left;
}
#commentform p.comment-form-email {
	width: 48%;
	float: right;
}
#commentform p.comment-form-comment,
#commentform p.comment-form-url {
	clear: both;
}
#commentform p.form-submit {
	margin-bottom: 0 !important;
}
@media (max-width: 767px) {
	#commentform p.comment-form-email,
	#commentform p.comment-form-author {
		width: 100%;
		float: none;
	}
}

/* Related post */
div.lokerpro-related-post {margin-top: 20px;}
div.lokerpro-related-post h3.related-title {margin: 0 0 15px 0;font-size: 16px;}
div.lokerpro-related-post h3.related-title:after {content: "";display: block;width: 100%;max-width: 70px;border-top: 2px solid #ddd;margin-top: 10px;}

div.lokerpro-related-post img {
	top: 0px;
	width: 60px;
    float: left;
    object-fit: cover;
    position: absolute;
}


/* Social share */
a.lokerpro-sharebtn{color:#fff !important;margin-right:5px;font-size:12px;line-height: 12px;outline: 0;padding:6px 6px !important;-webkit-border-radius: 8px;border-radius: 8px;}
a.lokerpro-sharebtn svg {
	font-size: 16px;
	vertical-align: -0.2em;
	margin-right: 0;
}
a.lokerpro-twitter{background: #000;}
a.lokerpro-threads{background: #000;}
a.lokerpro-facebook{background: #3b5998;}
a.lokerpro-whatsapp{background: #25d366;}
a.lokerpro-telegram{background: #0088cc;}
a.lokerpro-email{background: #888888;}

@media (max-width: 600px) {
	/* Tombol Apply + 6 icon share dibuat flex agar rapi:
	   tombol Apply full-width di baris sendiri, lalu ke-6 icon
	   share berbagi 1 baris sama rata tepat di bawahnya. */
	.pjs-button-download {
		float: none;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		box-sizing: border-box;
	}
	.pjs-button-download .in-single-download {
		flex: 0 0 100%;
		width: 100% !important;
		display: block !important;
		text-align: center !important;
		margin: 0 0 2px 0 !important;
	}
	a.lokerpro-sharebtn {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		text-align: center !important;
		margin: 0 !important;
		padding: 8px 0 !important;
		box-sizing: border-box;
	}
	a.lokerpro-sharebtn svg {
		font-size: 18px;
	}
}

.lokerpro-fb-comments {margin: 0 -8px;}

/*--------------------------------------------------------------
# Infinite scroll & Jetpack plugin
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .page-numbers { /* Theme Footer (when set to scrolling) */
	display: none;
}
#infinite-handle {
	margin-top: 50px;
	display: block;
	bottom: 15px;
	position: relative;
	text-align: center;
	top: auto !important;
	width: 100%;
}
#infinite-handle span {
	background: none;
	border-radius: 2px;
	border-style: solid;
	border-color: #eee;
	color: #333;
	cursor: pointer;
	font-size: 13px;
	padding: 15px 20px;
}
@media (max-width: 800px) {
	#infinite-handle span {
		display: initial;
	}
}
.infinite-loader {
	width: 100%;
	text-align: center;
}
.infinite-loader .spinner {
	display: block;
	position: absolute !important;
	top: auto !important;
	bottom: 10px !important;
	left: 50% !important;
	margin-left: -12px;
}

a.read-more {text-decoration: underline;}


/* Widget module jetpack */
.widget_wpcom_social_media_icons_widget li a {
	margin-bottom: 0.5em;
}
.widget_wpcom_social_media_icons_widget li a {
	font-size: 24px;
}

/* Widget Contact Form jetpack */
.textwidget .contact-form input[type="text"],
.textwidget .contact-form input[type="email"],
.textwidget .contact-form textarea {
	width: 100% !important;
}

/* Border in title jetpack */
.pjs-theme div.sharedaddy h3.sd-title {
	font-size: 16px;
}
.pjs-theme div.sharedaddy h3.sd-title:before {
	border-top: 2px solid #ddd;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.gallery-caption,
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
	font-size: 12px;
	color: #aaa;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}
.wp-caption-text {
	text-align: right;
}
figcaption,
.gallery-caption,
.wp-caption {
	line-height: 1.4;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin: 0 -0.5% 1.5em -0.5%;
}
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-item img {
	width: 100%;
	max-width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
	padding: 0.5%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
	padding: 0.5%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
	padding: 0.5%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
	padding: 0.5%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
	padding: 0.5%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
	padding: 0.5%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
	padding: 0.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
	padding: 0.5%;
}
.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer-container {
	position: relative;
	margin: 0 auto 0 auto;
}
.site-footer {
	text-align: center;
	padding: 15px 0;
}

.pjs-ontop {
	position: fixed;
	bottom: 0;
	right: 10px;
	cursor: pointer;
	font-weight: 700;
	padding: 10px;
	font-size: 30px;
	opacity: .6;
	z-index: 9999999;
	color:  var(--ontopcolor);
}
.pjs-ontop:hover {
	opacity: .8;
}

/* Rating Plugin https://wordpress.org/plugins/rate-my-post/ */
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container {
    text-align: left;
	color: #888888;
	margin: 10px 0 20px 0;
}
.rmp-results-widget__avg-rating,
.rmp-results-widget__vote-count {
	font-size: 10px;
	color: #aaaaaa;
}
.lokerpro-votecount {
	font-size: 13px;
	line-height: 13px;
}
.rmp-rating-widget {
	border: 1px solid rgba(0,0,0,0.05);
	background-color: rgba(0,0,0,0.05);
	padding: 20px;
	margin: 0 auto;
	font-size: 12px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:none;
}
.rmp-rating-widget .rmp-icon--ratings {
	font-size: 1.8rem;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-heading.rmp-heading--title {
	margin: 0 0 5px 0;
	font-size: 16px;
	font-weight: 700;
	-webkit-border-radius:8px;
	border-radius:8px;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-heading.rmp-heading--title .small-text {
	font-size: 13px;
	color: #333333;
}
#left-rating {border-right: 4px solid #ffffff;}
@media (max-width: 992px) {
	#left-rating {border-right: 0px; border-bottom: 4px solid #ffffff;margin-bottom: 20px;padding-bottom: 20px;}
	.pjs-search{
      display:none;
  }
	.pjs-mobile-search-button{
	    display:inline-flex;
	    align-items:center;
	    justify-content:center;
	    width:44px;
	    height:44px;
	    border-radius:8px;
	    text-decoration:none;
	    font-size:22px;
	    margin-right:0px;
	}
}
.lokerpro-averagerating {
	font-size: 38px;
	line-height: 38px;
	font-weight: 700;
}
/* Rating Plugin https://id.wordpress.org/plugins/wp-postratings/ */
.lokerpro-postratings-results {
	font-size: 10px;
	color: #aaaaaa;
	margin-top: 5px;
}

/* Banner */
.lokerpro-center-ads {text-align: center;}
.lokerpro-center-right {text-align: right;}
@media (max-width: 1200px) {
	.lokerpro-topbanner {
		text-align: center;
		display: block !important;
		width: 100%;
		margin: 0 auto;
	}
}
.lokerpro-banner-secondpost,
.lokerpro-topbanner-aftermenu{margin-bottom: 20px;text-align: center;}
.lokerpro-footerbanner{text-align: center;margin-bottom: 20px;}
.pjs-banner-afterrelpost{margin-bottom: 20px;}
.lokerpro-banner-beforecontent.pull-left {margin-right: 20px;}
.lokerpro-banner-beforecontent.pull-right {margin-left: 20px;}
.lokerpro-banner-beforecontent,
.lokerpro-banner-insidecontent {margin-bottom: 20px;}
.lokerpro-banner-aftercontent {margin-bottom: 20px;}
.lokerpro-floatbanner-left {left: 50%;margin-left: -846px;position: fixed;overflow:hidden;width: 300px;top: calc( var( --pjs-site-sticky-top, 0px ) + 10px );z-index: 999;}
.lokerpro-floatbanner-right {right: 50%;margin-right: -846px;position: fixed;overflow:hidden;width: 300px;top: calc( var( --pjs-site-sticky-top, 0px ) + 10px );z-index: 999;}

/* ==========================================================
   Ultra-wide / 4K screens
   .container melebar otomatis lewat clamp() (lihat aturan
   .container di atas). Supaya iklan skyscraper ini selalu
   menempel pas di tepi container - di lebar layar berapa pun,
   termasuk yang lebih besar dari 4K - dan tidak lagi menutupi
   konten, posisinya dihitung dengan rumus yang SAMA PERSIS
   dengan clamp() itu, bukan angka tetap:
   setengah-lebar-container + jarak 6px + lebar iklan (300px).
   Ini menggantikan nilai -846px di atas (aturan ini otomatis
   menang karena datang belakangan di file & spesifisitasnya sama). */
.lokerpro-floatbanner-left {
	margin-left: calc(-306px - clamp(540px, 25vw, 950px));
}
.lokerpro-floatbanner-right {
	margin-right: calc(-306px - clamp(540px, 25vw, 950px));
}
.inner-float-left {float:right;}
.inner-float-right {float:left;}
.lokerpro-floatbanner-left img,
.lokerpro-floatbanner-right img {max-width: none !important;}
.lokerpro-floatbanner-footer {z-index: 999;position: fixed;text-align: center;bottom: 0;left: 50%;margin-left: -530px;width: 1060px;}
.inner-floatbanner-bottom { background: #efefef;}
.inner-float-left button {z-index:9;position: absolute; right: 0;font-size:14px;padding: 4px 8px;background: #efefef;border:none;color: #121212 !important;-webkit-border-radius: 0 !important; border-radius: 0 !important;}
.inner-float-right button {z-index:9;position: absolute; left: 0;font-size:12px;padding: 4px 8px;background: #efefef;border:none;color: #121212 !important;-webkit-border-radius: 0 !important; border-radius: 0 !important;}
.inner-floatbanner-bottom button {z-index:9;position: absolute;text-align: right;font-size:14px;padding: 4px 8px;background: #efefef;border:none;color: #121212 !important;-webkit-border-radius: 0 !important; border-radius: 0 !important;}
@media (max-width: 1200px) {
	.lokerpro-floatbanner {
		display: none;
	}
}

.lokerpro-list-table {border-bottom: 1px solid rgba(0,0,0,0.2);width: 100%;display: table;padding-top: 8px;padding-bottom: 8px;}
.lokerpro-table-row {display: table-row;}
.lokerpro-table-cell {display: table-cell;vertical-align: middle;height: 100%;}
.lokerpro-table-cell.pjs-thumbnail {width: 47px;}
.lokerpro-table-cell.pjs-thumbnail-headline {width: 105px;}
.lokerpro-list-table:last-child {border-bottom: none;}

div.lokerpro-image-gallery {
	overflow: auto;
	white-space: nowrap;
	margin-bottom: 20px;
}
div.lokerpro-image-gallery img {
	height: 220px;
	max-height: 220px;
	min-height: 220px;
	margin-right: 10px;
}

div.lokerpro-image-gallery a {
	cursor: zoom-in;
}

@media (min-width: 992px) {
	.pos-sticky{
		position: sticky;
		position: -webkit-sticky;
		top: 36px;
	}
	.pjs-no-sticky .pos-sticky{
		top: 25px;
	}
	.pjs-disable-sticky .pos-sticky{
		position: relative !important;
		top: auto !important;
	}
	.admin-bar .pos-sticky{top: 68px;}
	.admin-bar .pjs-disable-sticky .pos-sticky{top: auto !important;}
}

.menu-oren {
      background-color: #F96008 !important;
}

.post-views {display:  none;}


@media only screen and (max-width: 768px) {
 .pjs-menuwrap {
	display: none;
}
}


.overlay {
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(23,28,36,0.6);
z-index: 98;
margin: 0;
transition: all .25s ease;
}
.overlay.open{visibility:visible;opacity:1}



/* DISCLAIMER BOX */
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom: 10px;}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}


table { width: 100%; }
table td, table th { overflow-wrap: anywhere; }


/* Sebelumnya min-height di sini cuma 45px - lebih kecil dari tinggi
   thumbnail (max-height 67.5px, posisinya absolute). Akibatnya kalau
   admin set "Excerpt Length" jadi kecil/0 (jadi tidak ada teks
   snippet yang menambah tinggi artikel), kotak artikel menciut lebih
   pendek dari thumbnail-nya sendiri, dan thumbnail jadi meluber
   menutupi/berhimpit dengan artikel berikutnya. Dinaikkan supaya
   selalu cukup menampung thumbnail + jarak napas. margin-bottom
   dipatok 5px sebagai jarak antar-artikel yang tidak bergantung
   sama sekali pada ada/tidaknya excerpt - kondisi ekstrim (excerpt
   kosong) ataupun ada excerpt, jaraknya tetap 5px. */
.pjs-archivepage.pjs-box-content {

    min-height: 95px;
    margin-bottom: 5px;
}

/* Latest Update / listing artikel TANPA gambar: kalau thumbnail
   di-hide lewat Customizer > Thumbnail Display (artikel diberi
   class .pjs-no-thumbnail oleh content.php) ATAU post-nya memang
   tidak punya featured image (cell .content-thumbnail tidak
   dirender sama sekali), reservasi tinggi 95px di atas jadi cuma
   menyisakan ruang kosong besar - itulah asal "jarak antar artikel
   terlalu jauh". Di kedua kondisi itu min-height dilepas supaya
   tinggi artikel mengikuti isinya saja, sehingga jarak antar
   artikel tinggal margin-bottom 5px. */
.pjs-archivepage.pjs-box-content.pjs-no-thumbnail,
.pjs-archivepage.pjs-box-content:not( :has( .content-thumbnail ) ) {
	min-height: 0;
}

/* Mode "Hide Everywhere" / "Hide on Desktop only" / "Hide on Mobile
   only" dari setting Thumbnail Display memakai mekanisme berbeda:
   elemen gambar tetap dirender tapi disembunyikan (display:none)
   lewat class pembungkus thumbnail-hide-* - jadi tidak tertangkap
   selector di atas. Ditangani terpisah di sini, mengikuti breakpoint
   yang sama dengan aturan hide aslinya. */
.thumbnail-hide-all .pjs-archivepage.pjs-box-content {
	min-height: 0;
}

@media (min-width:1201px){
	.thumbnail-hide-desktop .pjs-archivepage.pjs-box-content {
		min-height: 0;
	}
}

@media (max-width:1200px){
	.thumbnail-hide-mobile .pjs-archivepage.pjs-box-content {
		min-height: 0;
	}
}

/* Kalau ada banner in-feed (.pjs-infeed-banner) di antara dua
   artikel, jarak 5px itu dibagi rata jadi 2.5px + 2.5px supaya
   banner benar-benar di tengah, bukan lebih dekat ke salah satu
   sisi. Sengaja TIDAK pakai selector :has() (butuh dukungan browser
   yang cukup baru) - dipakai margin negatif saja supaya jalan di
   semua browser tanpa syarat apa pun:
   - artikel sebelum banner tetap margin-bottom:5px seperti biasa
     (rule di atas, tidak diubah).
   - .pjs-infeed-banner "ditarik" naik 2.5px (margin-top negatif)
     supaya jarak dari artikel sebelumnya yang tadinya 5px jadi
     cuma kelihatan 2.5px, lalu diberi margin-bottom 2.5px sendiri
     untuk jarak ke artikel berikutnya.
   - margin bawaan pada kotak .pjs-box-content di DALAM banner
     dinolkan supaya tidak dobel dengan margin di wrapper luarnya. */
.pjs-infeed-banner {
	margin-top: -2.5px;
	margin-bottom: 2.5px;
}

.pjs-infeed-banner .pjs-box-content {
	margin-top: 0;
	margin-bottom: 0;
}

.header-title-related {
	position: absolute;
	top: 10%;
}



@media only screen and (max-width: 480px) {
	.content-thumbnail img {
		position: absolute;
		top: 0; /* disamakan dengan judul post supaya sejajar rata atas di mobile */
	}
.limit-title-related {
	  width: 260px;
}
}


/*--------------------------------------------------------------
# Custom css
--------------------------------------------------------------*/
.col-md-3,
.col-md-9 {
  width: 100%;
}


kbd {
	background-color: #e4f7c8;
	color: #000;
	font-weight: bold;
}



.pjs-mainmenu #primary-menu li.current-menu-item > a,  .pjs-mainmenu #primary-menu .current_page_item > a {
	color: #000;
}


/* @media (max-width: 700px) {.secondary{display:none !important;}}



/* TABLE PJS JOBS SPEC*/
.table-pjs {
  min-height: 0.01%;
  overflow-x: auto;
  border: 0px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: auto;
  font-size: 12px;
  line-height: 16px;
}
.table-pjs td {
  border: 0px;
  color: #333;
  padding: 5px;
  width: 1%;
}
.table-pjs td:last-child {
  width: 0;
}
.table-pjs th {
  font-weight: 700;
  text-transform: initial;
  color: #333;
  padding: 5px;
  width: 18%;
}
.table-pjs tr {
  border-bottom: 1px dashed;
  color: #44444433;
}
.table-pjs tr:last-child {
  border: none !important;
}
/* .table-pjs tr:nth-child(even) {
  background-color: #f2f2f2;
} */

div#histats_counter {
  visibility: hidden;
}


/* RELATED */
.related-item {
    flex: 1 1 0%;
}
.related-item .related-box {
    display: flex;
    flex: 1 1 0%;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 10px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #cbe5fe;
    color: #000000;
    margin: 10px;
}
.related-item .related-content {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
}
.related-item .related-label {
    -webkit-font-smoothing: antialiased;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.related-item .related-title h3 {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: Heebo, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.related-item .related-title h3 a {
    color: #000000;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
    text-align: left;
}
.related-item .related-image {
    margin-left: 16px;
    width: 80px;
    position: relative;
    border-radius: 6px;
    height: 80px;
    background: #eeeeee;
    overflow: hidden;
}
.related-item .related-image:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #dfdfdf;
    animation: shine 1s infinite;
}
.related-item .related-image:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}
.related-item .related-image a {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    outline: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
.related-item .related-image img {
 /*   z-index: 2; */
    display: block;
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
.related-item .related-author {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 6px;
}
.related-item .closing-date {
	margin-top: 6px;
    font-size: 12px;
}
.related-item .related-author img {
    margin-right: 6px;
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    border-color: #eeeeee;
    border-style: solid;
    border-width: 1px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 0.1rem;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 50%;
    background: #f6f8fc;
    position: relative;
    text-align: center;
}
.related-item .related-author-name {
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    font-weight: 400;
    word-break: break-all;
    white-space: normal;
    line-height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #767676;
}
.related-item .icon-verification {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 6px;
    width: 12px;
    max-width: 12px;
    height: 12px;
    background-image: url("../icon/verified-round.svg");
    background-size: 12px;
    background-repeat: no-repeat;
}
.related-item .dot {
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}
.related-item .timeago {
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-family: Heebo, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}
.related-author .dot:before {
    content: "\00B7";
    margin: 0 4px;
}

.box-content {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.infeed-banner .gmr-box-content{
	border-width: 0 0 1px;
	border-color: rgba(0,0,0,0.2);
	border-style: solid;
	text-align: center;
}


/* PARALLAX INSIDE BANNER */
.parallxads {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: 326px;
    position: relative;
    left: 0;
    right: 0;
    margin-bottom: 0;
    background: var(--prlbackg);
}

.parallxads-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(auto,auto,auto,auto);
}

.parallxads-box {
    height: auto;
    position: fixed;
    top: 118px;
    /* left/right:0 + margin:auto di sini cuma FALLBACK kalau
       JavaScript nonaktif (lihat js/parallax-ads-center.js) - kalau
       JS aktif, left/width akan ditimpa JS supaya kotak ini benar-benar
       center terhadap KOLOM KONTENnya sendiri, bukan cuma terhadap
       lebar browser secara keseluruhan (dua hal ini beda kalau ada
       sidebar/tab di kiri-kanan kolom konten, seperti tab "Informasi
       Lowongan Kerja" pada Desain 2). */
    left: 0;
    right: 0;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    margin: 0 auto;
    width: 100%;
    max-width: 664px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallxads-box > * {
    margin: 0 auto !important;
}

.parallxads:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    z-index: 1;
    background: var(--prlbackgbox);
    font-family: Heebo, sans-serif;
    content: var(--textparallax);
    padding-top:  2px;
}
.parallxads:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    z-index: 1;
    background: var(--prlbackgbox);
    font-family: Heebo, sans-serif;
    content: url("data:image/svg+xml;charset=UTF-8, <svg style='margin-right: 13px;fill: white;' width='10' height='10' viewBox='0 0 13 14'  xmlns='http://www.w3.org/2000/svg'><path class='nav-icon-path' d='M1.5 7.83341L6.5 12.8334L11.5 7.83341M1.5 1.16675L6.5 6.16675L11.5 1.16675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>") "\00a0" "\00a0" var(--textparallaxbawah) "\00a0" "\00a0" url("data:image/svg+xml;charset=UTF-8, <svg style='margin-right: 13px;fill: white;' width='10' height='10' viewBox='0 0 13 14'  xmlns='http://www.w3.org/2000/svg'><path d='M1.5 7.83341L6.5 12.8334L11.5 7.83341M1.5 1.16675L6.5 6.16675L11.5 1.16675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
    padding-top:  2px;
}
.nav-icon-path {
  fill: red;
}
.parallxads {margin-bottom:  10px;}
.sidebar-sticky .widget {
    background: #eee;
    padding: 10px;
    margin-bottom: 10px;
}


/************************
 SWITCH COLOR 
************************/
:root {
  --textparallax: "Advertisement";
  --textparallaxbawah: "Scroll to continue reading";
  --prlbackg:  #222;
  --prlbackgbox: #038383;
  --ontopcolor: #000;
  --button-color: #ffffff;
	--button-bgcolor: #3920c9;
 }


 /************************
 Custom CSS 
************************/
@media screen and (max-width: 1029px) {
	.parallxads-box {
	 	max-width: 880px;
	 }
}
@media screen and (max-width: 914px) {
	
	header #searchform {
		width: 45%;
	}

	.parallxads-box {
	 	max-width: 710px;
	 }

}
@media screen and (max-width: 540px) {
	.parallxads-box {
	 	max-width: 480px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}
@media screen and (max-width: 440px) {
	.parallxads-box {
	 	max-width: 370px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}
@media screen and (max-width: 420px) {
	.parallxads-box {
	 	max-width: 354px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}

@media screen and (max-width: 400px) {
	.parallxads-box {
	 	max-width: 330px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}
@media screen and (max-width: 384px) {
	.parallxads-box {
	 	max-width: 320px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}
@media screen and (max-width: 380px) {
	.parallxads-box {
	 	max-width: 315px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}

@media screen and (max-width: 360px) {
	.parallxads-box {
	 	max-width: 300px;
	 }
	.table-pjs th {
	  width: 38%;
	}
}

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

	.parallxads-box {
	 	max-width: 220px;
	 }
}


/* Infinitescroll
--------------------------------------------- */
.inf-pagination {
	text-align: center;
	display: none !important;
}

.view-more-button {
	display: block;
	font-size: 14px;
	display: block;
	background-color: #3920c9;
	color: #ffffff;
	line-height: 1.5;
	position: relative;
	margin: 0 auto;
}

.view-more-button[disabled] {
	display: none !important;
}

.page-load-status {
	display: none;
	text-align: center;
}

.pjs-loaderwrap {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
}

.pjs-ajax-loader {
	width: 30px;
	height: 30px;
	position: relative;
	transform: rotate(10deg);
	animation: gmrrotation 1s infinite;
}

.pjs-ajax-loader div {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 5px;
}

.pjs-ajax-loader .pjs-loader1 {
	left: 0;
	background-color: #5c6bc0;
	animation: gmrloader1 0.5s ease 0s infinite alternate;
}

.pjs-ajax-loader .pjs-loader2 {
	right: 0;
	background-color: #8bc34a;
	animation: gmrloader2 0.5s ease 0s infinite alternate;
}

.pjs-ajax-loader .pjs-loader3 {
	bottom: 0;
	background-color: #ffb74d;
	animation: gmrloader3 0.5s ease 0s infinite alternate;
}

.pjs-ajax-loader .pjs-loader4 {
	bottom: 0;
	right: 0;
	background-color: #f44336;
	animation: gmrloader4 0.5s ease 0s infinite alternate;
}

@keyframes gmrloader1 {
	from {
		transform: translate(0, 0);
	}
	to {
		transform: translate(20px, 20px);
	}
}

@keyframes gmrloader2 {
	from {
		transform: translate(0, 0);
	}
	to {
		transform: translate(-20px, 20px);
	}
}

@keyframes gmrloader3 {
	from {
		transform: translate(0, 0);
	}
	to {
		transform: translate(20px, -20px);
	}
}

@keyframes gmrloader4 {
	from {
		transform: translate(0, 0);
	}
	to {
		transform: translate(-20px, -20px);
	}
}

@keyframes gmrrotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


/* Pagination
--------------------------------------------- */
.comment-navigation,
.posts-navigation {
	margin: 0 0 20px;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links {
	display: flex;
	padding: 20px 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	flex-direction: row;
	flex-wrap: nowrap;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous {
	flex: 1 0 48%;
	word-wrap: break-word;
	max-width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next {
	text-align: end;
	flex: 1 0 48%;
	word-wrap: break-word;
	max-width: 50%;
}

.page-links {
	display: flex;
	margin: 20px -5px 0;
	flex-wrap: wrap;
	align-items: center;
}

.page-links > * {
	margin-left: 5px;
	margin-bottom: 5px;
}

.pagination {
	text-align: center;
	margin-bottom: 20px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: -5px;
}

.pagination .nav-links > * {
	margin-right: 5px;
	margin-bottom: 5px;
}

.pagination .nav-links > *:last-child {
	margin-right: 0;
}

.page-numbers {
	display: inline-flex;
	padding: 5px 10px;
	margin: 0;
	text-decoration: none;
	border-radius: 2px;
	min-width: 33px;
	font-size: 14px;
	line-height: 1.5;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee;
}

.page-numbers.dots {
	border: none;
	padding: 5px 0;
}

.page-numbers.current {
	background-color: #d9091b;
	color: #ffffff;
}

.post-page-numbers {
	display: inline-flex;
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 2px;
	min-width: 31px;
	font-size: 14px;
	line-height: 1.5;
	background-color: #eeeeee;
	align-items: center;
	color: #ffffff;
	justify-content: center;
}

.post-page-numbers.current {
	background-color: #d9091b;
	color: #ffffff;
}

a.post-page-numbers:hover,
a.page-numbers:hover {
	background-color: #d9091b;
	color: #ffffff;
}

.pjs-search-wrap{

	display:flex;

	align-items:center;

	justify-content:flex-end;

	gap:8px;

}

/* =====================================================
   Theme Mode Button
===================================================== */

.pjs-table-cell.pjs-search-wrap{

	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:8px;

}

.pjs-search{

	width:100%;
	max-width:255px;

}

/* =====================================================
   Header Tools
===================================================== */

.pjs-header-tools{

	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:8px;

}

.pjs-search{

	width:240px;
	max-width:240px;

}

.pjs-theme-mode{
    margin:0 !important;
    padding:0 !important;
}

#pjs-theme-toggle{
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

#pjs-theme-toggle:hover{

	background:#f4f6f8;

	border-color:#d5d5d5;

	transform:rotate(25deg);

	box-shadow:0 2px 8px rgba(0,0,0,.08);

}

#pjs-theme-toggle:active{

	transform:scale(.92);

}

#pjs-theme-icon{

	font-size:20px;
	line-height:1;

}

/* =====================================================
   Theme Menu
===================================================== */

.pjs-theme-menu{

	position:absolute;
	top:48px;
	right:0;

	width:250px;

	background:#fff;

	border:1px solid #e5e5e5;

	border-radius:16px;

	padding:6px 0;

	box-shadow:0 14px 40px rgba(0,0,0,.15);

	display:none;

	overflow:hidden;

	z-index:99999;

}

.pjs-theme-mode.open .pjs-theme-menu{

	display:block;

	opacity:1;

	visibility:visible;

	transform:translateY(0);

}

.pjs-theme-item{

	display:flex;

	align-items:center;

	height:52px;

	padding:0 18px;

	cursor:pointer;

	user-select:none;

	transition:background .18s ease;

}

.pjs-theme-item:hover{

	background:#f3f6fb;

}

.pjs-theme-item + .pjs-theme-item{

	border-top:1px solid #ececec;

}

.pjs-theme-item-icon{

	width:30px;
	height:30px;

	display:flex;
	align-items:center;
	justify-content:center;

	margin-right:12px;

	font-size:20px;

	line-height:1;

	flex-shrink:0;

}

.pjs-theme-item-text{

	flex:1;

	font-size:16px;

	font-weight:500;

	color:#333;

}

.pjs-theme-check{

	width:22px;

	text-align:right;

	font-size:16px;

	font-weight:700;

	color:#2563eb;

}

.pjs-theme-item.active .pjs-theme-check{

	content:"";

}

.pjs-theme-item.active .pjs-theme-check::before{

	content:"✓";

}

.pjs-theme-menu{

	opacity:0;

	visibility:hidden;

	transform:translateY(10px);

	transition:.20s;

}

.pjs-theme-mode{
	position:relative;
	z-index:999999;
}

#pjs-theme-toggle{
	position:relative;
	z-index:999999;
	pointer-events:auto;
}

html[data-theme="dark"]{

	color-scheme:dark;

}

html[data-theme="light"]{

	color-scheme:light;

}

html[data-theme="dark"] body{

	background:#121212;

	color:#e5e5e5;

	transition:background .25s,color .25s;

}

/* ==========================================================
   Mobile Layout : Sidebar di bawah Latest Update
========================================================== */

@media (max-width: 1199px){

    #primary{
        width:100%;
		    margin-bottom:0 !important;
		    padding-bottom:0 !important;
    }

    .sidebar{
        width:100%;
        max-width:100%;
        position:relative;
        top:auto !important;
        order:2;
        margin-top:20px;
    }

		#secondary-right{
		    margin-top:0 !important;
		    padding-top:0 !important;
		}

    #primary > .row{
        display:flex;
        flex-direction:column;
    		row-gap:0 !important;
    		gap:0 !important;
    }

    #primary > .row > .col-md-8{
        width:100%;
        order:1;
    }

    #primary > .row > .sidebar{
        width:100%;
        order:2;
    }

}

.mobile-search{
    display:none;
}

@media (max-width:992px){

    .mobile-search{
        display:block;
        width:100%;
        margin:15px 0 20px;
    }

		.mobile-search{
		    display:block;
		    width:100%;
		    margin:20px 0 25px;
		}

		.mobile-search form{
		    display:flex;
		    align-items:center;
		    gap:10px;
		}

		.mobile-search input[type="text"]{
		    flex:1;
		    height:48px;
		    padding:0 16px;
		    border-radius:10px;
		    border:1px solid #555;
		    background:#222;
		    color:#fff;
		    font-size:16px;
		}

		.mobile-search input[type="text"]::placeholder{
		    color:#aaa;
		}

		.mobile-search .pjs-search-submit{
		    width:48px;
		    height:48px;
		    border-radius:10px;
		    border:none;
		    background:#1d4f9c;
		    color:#fff;
		    display:flex;
		    align-items:center;
		    justify-content:center;
		    cursor:pointer;
		    flex-shrink:0;
		}

		.mobile-search .pjs-search-submit svg{
		    width:20px;
		    height:20px;
		}
}

/* ===============================
   Mobile Search Popup
================================ */

.pjs-mobile-search-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    color:#fff;
    text-decoration:none;
    flex-shrink:0;
}

.pjs-mobile-search-button svg{
    width:22px;
    height:22px;
}

.pjs-mobile-search-button:hover{
    color:#fff;
    text-decoration:none;
}

#pjs-mobile-search-popup{
    display:none;
    position:fixed;
    inset:0;
    z-index:999999;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

#pjs-mobile-search-popup button{
    width:56px;
    min-width:56px;
    height:56px;
    padding:0;
    border:none;
    border-radius:16px;
    background:#4CAF50;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
}

#pjs-mobile-search-popup button:hover{
    background:#43A047;
}

#pjs-mobile-search-popup button svg{
    width:22px;
    height:22px;
    color:#fff;
    display:block;
}

#pjs-mobile-search-popup.active{
    display:block;
}

.pjs-mobile-search-inner{
    width:100%;
    max-width:500px;
}

#pjs-mobile-search-close{
    position:absolute;
    top:18px;
    right:18px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#2b2b2b;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.2s;
}

#pjs-mobile-search-close:hover{
    background:#3b3b3b;
    transform:rotate(90deg);
}

/* Ikon X untuk tombol tutup popup search mobile
   (sebelumnya span ini kosong tanpa CSS sama sekali) */
.pjs-icon-close{
    position:relative;
    display:block;
    width:14px;
    height:14px;
}

.pjs-icon-close::before,
.pjs-icon-close::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:14px;
    height:2px;
    background:currentColor;
    border-radius:2px;
}

.pjs-icon-close::before{
    transform:translate(-50%,-50%) rotate(45deg);
}

.pjs-icon-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}

.pjs-mobile-search-inner form{
    display:flex;
    gap:10px;
}

.pjs-mobile-search-inner input[type=text]{
    flex:1;
    height:50px;
    padding:0 16px;
    border-radius:8px;
    border:1px solid #444;
    background:#1b1b1b;
    color:#fff;
}

.pjs-mobile-search-inner button{
    width:50px;
    height:50px;
    border:none;
    border-radius:8px;
    background:#124187;
    color:#fff;
}

.pjs-mobile-search-button{
    display:none;
}

#pjs-mobile-search-popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:999999;
}

#pjs-mobile-search-popup.active{
    display:block;
}

.pjs-mobile-search-inner{
    width:90%;
    max-width:420px;
    margin:70px auto 0;
    padding:18px;
    border-radius:18px;
    background:#1b1b1b;
    border:1px solid #2d2d2d;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    animation:searchPopup .25s ease;
}

#pjs-mobile-search-popup form{
    display:flex;
    align-items:center;
    gap:12px;
}

#pjs-mobile-search-popup input[type="text"]{
    flex:1;
    height:52px;
    border:none;
    border-radius:14px;
    background:#262626;
    color:#fff;
    padding:0 18px;
    font-size:16px;
    outline:none;
    transition:.2s;
}

#pjs-mobile-search-popup input[type="text"]:focus{
    background:#303030;
    box-shadow:0 0 0 2px #4caf50;
}

#pjs-mobile-search-close{
    position:absolute;
    right:15px;
    top:12px;
    font-size:24px;
}

.pjs-mobile-search-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    color:#fff;
    text-decoration:none;
    margin-right:0px;
}

.pjs-mobile-search-button svg{
    width:22px;
    height:22px;
    display:block;
}

@keyframes searchPopup{
    from{
        opacity:0;
        transform:translateY(-20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.onlymobile-menu{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:0px;
}

#pjs-mobile-search-button,
.pjs-theme-mode,
#pjs-responsive-menu{
    position:static !important;
    margin:0 !important;
    transform:none !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
}

#pjs-theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
}

.pjs-theme-mode{
    display:flex;
    align-items:center;
    justify-content:center;
}

#pjs-theme-toggle{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

.onlymobile-menu > a,
.onlymobile-menu > .pjs-theme-mode{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

/* Popup Search */
#pjs-mobile-search-popup form{
    display:flex;
    align-items:center;
    gap:12px;
}

#pjs-mobile-search-popup input[type="text"]{
    flex:1;
    min-width:0;
}

#pjs-mobile-search-popup button{
    flex:0 0 56px !important;
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:56px !important;

    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:16px;
}

#pjs-mobile-search-popup button svg{
    width:22px;
    height:22px;
    display:block;
}

/* Mobile Search Icon */
.pjs-mobile-search-button svg{
    stroke: currentColor !important;
}

/* Light Mode */
html[data-theme="light"] .pjs-mobile-search-button{
    color:#222 !important;
}

/* Dark Mode */
html[data-theme="dark"] .pjs-mobile-search-button{
    color:#fff !important;
}

/* Auto Mode (default terang) */
html[data-theme="auto"] .pjs-mobile-search-button{
    color:#222 !important;
}

.pjs-header-tools{
    display:flex;
    align-items:center;
    gap:10px;
}

.pjs-search{
    flex:1;
}

.pjs-theme-mode{
    display:flex;
    align-items:center;
    justify-content:center;
}

#pjs-theme-toggle{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    cursor:pointer;
}

@media (max-width:768px){

    .pjs-table-cell.onlymobile-menu{
        display:flex;
        align-items:center;
        gap:0px;
    }

    /* Jangan sembunyikan seluruh wrapper, karena tombol
       mode terang/gelap ikut berada di dalamnya.
       Cukup sembunyikan form pencariannya saja
       (di mobile sudah ada ikon search terpisah / popup). */
    .pjs-table-cell.pjs-search-wrap{
        display:flex !important;
        width:auto !important;
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .pjs-search-wrap .pjs-search{
        display:none !important;
    }

    .pjs-search-wrap .pjs-header-tools{
        width:auto !important;
        gap:0 !important;
    }

    #pjs-theme-toggle{
        width:38px;
        height:38px;
    }

    /* Pastikan tombol mode tetap tampil di mobile */
    .desktop-theme{
        display:flex !important;
        align-items:center;
        justify-content:center;
    }
}

.onlymobile-search{
    display:none;
}

@media (max-width:1200px){
    .onlymobile-search{
        display:flex !important;
    }
}
/* ==========================================================
   Job Specs - Collapsible "Informasi Lowongan Kerja"
   - Diletakkan tepat di bawah galeri gambar (.lokerpro-image-gallery),
     sebelum isi deskripsi lowongan - lihat content-single.php
     (posisinya sudah benar dari struktur HTML-nya, jadi cukup diberi
     jarak di sini, tidak perlu trik flex order lagi).
   - Dibuat show/hide (accordion), default tertutup.
========================================================== */

.pjs-specs-col {
	margin: 20px 0;
}

.pjs-specs-toggle {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.pjs-specs-toggle-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	color: inherit;
	transition: background-color 0.2s ease;
}
.pjs-specs-toggle-btn:hover {
	background: rgba(0, 0, 0, 0.03);
}
.pjs-specs-toggle-btn:focus-visible {
	outline: 2px solid #2980b9;
	outline-offset: -2px;
}

.pjs-specs-toggle-icon {
	flex: 0 0 auto;
	transition: transform 0.25s ease;
	color: #2980b9;
}
.pjs-specs-toggle-btn[aria-expanded="true"] .pjs-specs-toggle-icon {
	transform: rotate(180deg);
}

.pjs-specs-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.pjs-specs-toggle .pjs-list-specs {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0;
	margin: 0;
}

html[data-theme="dark"] .pjs-specs-toggle {
	background: var(--pjs-card-bg);
	border-color: var(--pjs-border);
	box-shadow: none;
}
html[data-theme="dark"] .pjs-specs-toggle-btn {
	color: #e8e8e8;
}
html[data-theme="dark"] .pjs-specs-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .pjs-specs-toggle .pjs-list-specs {
	border-top-color: var(--pjs-border);
}

/* ==========================================================
   Job Specs - Desain 2: Tab Vertikal di Samping Deskripsi
   (Customizer > Meta Post > Job Info Layout Design)
========================================================== */

.pjs-desc-flex {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.pjs-desc-flex-content {
	flex: 1 1 0%;
	min-width: 0;
	margin-left: 14px;
}

/* display:contents supaya .pjs-specs-tab-btn dan .pjs-specs-sidebar-panel
   jadi flex item LANGSUNG dari .pjs-desc-flex (bukan lewat wrapper
   flex bersarang) - ini penting supaya flex-basis persentase pada
   panel (di bawah) dihitung relatif terhadap lebar baris yang benar,
   bukan relatif ke wrapper ini yang ukurannya sendiri auto/tak tentu.
   Sticky dipindah ke tab & panel-nya langsung karena display:contents
   tidak punya box sendiri untuk di-posisikan. */
.pjs-specs-sidebar {
	display: contents;
}
.pjs-specs-tab-btn {
	position: sticky;
	/* Dihitung JS (specs-toggle.js) supaya menempel PAS DI BAWAH
	   header/menu situs yang juga sticky, bukan ketiban/tertutup
	   olehnya. Fallback 0px kalau JS belum sempat jalan. */
	top: calc( var( --pjs-specs-sticky-top, 0px ) + 20px );
}

/* Tab tertutup: strip sempit dengan teks vertikal, dibaca dari
   bawah ke atas (writing-mode + rotate 180deg). */
.pjs-specs-tab-btn {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 40px;
	flex-shrink: 0;
	padding: 18px 10px;
	background: #f7f7f7;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: inherit;
	transition: background-color 0.2s ease;
}
.pjs-specs-tab-btn:hover {
	background: rgba(0, 0, 0, 0.04);
}
.pjs-specs-tab-btn:focus-visible {
	outline: 2px solid #2980b9;
	outline-offset: 2px;
}
/* Jaring pengaman: ada aturan umum di atas
   ("button:focus, button:active { color:#fff; }") yang spesifisitasnya
   sedikit lebih tinggi dari color:inherit di atas, jadi menang begitu
   tombol ini diklik (statusnya jadi "focus", bertahan sampai user klik
   elemen lain) - membuat teksnya jadi putih tak terlihat di atas latar
   terang. Berlaku juga untuk .pjs-specs-toggle-btn (Desain 1). */
.pjs-specs-tab-btn:focus,
.pjs-specs-tab-btn:active,
.pjs-specs-toggle-btn:focus,
.pjs-specs-toggle-btn:active {
	color: inherit;
}

.pjs-specs-tab-icon {
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform 0.25s ease;
	color: #2980b9;
}
.pjs-specs-tab-btn[aria-expanded="true"] .pjs-specs-tab-icon {
	transform: rotate(-90deg);
}

/* Panel yang meluas ke kanan tab saat dibuka - lebarnya dipatok
   proporsional (bukan pixel tetap) supaya kira-kira 25% dari lebar
   teks deskripsi (itemprop="description") di sebelahnya: karena
   .pjs-desc-flex-content diberi flex:1 (mengisi sisa ruang) dan
   panel ini diberi flex-basis 20% dari total baris, rasio panel
   terhadap deskripsi jadi 20:80 = 25%. */
.pjs-specs-sidebar-panel {
	flex: 0 0 0%;
	max-width: 0;
	overflow: hidden;
	transition: flex-basis 0.3s ease, max-width 0.3s ease;
	/* Sticky juga di panel-nya (bukan cuma tombol tab), supaya kotak
	   info ikut "menempel" pas discroll, tidak tertinggal di belakang
	   sementara tab-nya sudah nempel duluan. Dipatok dengan variabel
	   yang sama dengan tab (--pjs-specs-sticky-top) supaya keduanya
	   selalu sejajar & sama-sama tidak ketiban header. max-height ikut
	   dikurangi offset itu supaya scroll internalnya (overflow-y:auto
	   di bawah) pas dengan ruang yang BENAR-BENAR tersisa di layar. */
	position: sticky;
	top: calc( var( --pjs-specs-sticky-top, 0px ) + 20px );
	align-self: flex-start;
	max-height: calc( 100vh - var( --pjs-specs-sticky-top, 0px ) - 40px );
}
.pjs-specs-sidebar-panel.is-open {
	flex: 0 0 20%;
	max-width: 20%;
}

.pjs-specs-sidebar-panel-inner {
	/* PENTING: width harus dikurangi margin-left-nya (calc), bukan
	   100% polos - kalau tidak, kotak ini jadi lebih lebar dari
	   ruang yang dialokasikan induknya (.pjs-specs-sidebar-panel),
	   dan sisi kanannya (termasuk border kanan) kepotong oleh
	   overflow:hidden milik induk. Ini penyebab pasti border kanan
	   yang hilang sebelumnya. */
	width: calc(100% - 2px);
	box-sizing: border-box;
	margin-left: 2px;
	max-height: calc( 100vh - var( --pjs-specs-sticky-top, 0px ) - 40px );
	overflow-y: auto;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.pjs-specs-sidebar-panel-inner .pjs-list-specs {
	margin: 0;
	border: none;
	padding: 0;
}

/* Item info lowongan di Desain 2 ditumpuk ke bawah (label lalu
   nilai di baris berikutnya), bukan tabel 2 kolom berdampingan -
   supaya kelihatan ramping mengikuti panel yang sempit. */
.pjs-specs-sidebar-panel-inner .table-pjs {
	/* Tabel aslinya (.table-pjs) punya overflow-x:auto tanpa
	   overflow-y - karena aturan CSS, itu otomatis membuat overflow-y
	   juga jadi 'auto' (sumbu yang satu tidak boleh 'visible' kalau
	   yang lain tidak), sehingga muncul scrollbar vertikal yang tidak
	   diinginkan di sini (dan menutupi border kanan panel). Dipaksa
	   'visible' di kedua sumbu supaya tabel tumbuh natural mengikuti
	   isinya, tanpa scrollbar sendiri. */
	overflow: visible;
}
.pjs-specs-sidebar-panel-inner .table-pjs,
.pjs-specs-sidebar-panel-inner .table-pjs tbody,
.pjs-specs-sidebar-panel-inner .table-pjs tr,
.pjs-specs-sidebar-panel-inner .table-pjs th,
.pjs-specs-sidebar-panel-inner .table-pjs td {
	display: block;
	width: auto;
}
.pjs-specs-sidebar-panel-inner .table-pjs tr {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
.pjs-specs-sidebar-panel-inner .table-pjs tr:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.pjs-specs-sidebar-panel-inner .table-pjs th {
	font-size: 12px;
	margin: 0;
	padding: 0;
}
.pjs-specs-sidebar-panel-inner .table-pjs th::after {
	content: ":";
}
/* td pertama isinya cuma tanda ":" - sudah digantikan ::after di
   atas, jadi disembunyikan supaya tidak dobel/jadi baris kosong. */
.pjs-specs-sidebar-panel-inner .table-pjs td:nth-of-type(1) {
	display: none;
}
.pjs-specs-sidebar-panel-inner .table-pjs td:nth-of-type(2) {
	font-size: 13px;
	margin: 0;
	padding: 0;
}

@media (max-width: 700px) {
	/* Di layar sempit, panel yang melebar ke samping akan
	   mendorong/menyempitkan teks deskripsi terlalu jauh - jadi
	   panel dibuat melebar penuh ke bawah tab, bukan ke samping. */
	.pjs-desc-flex {
		flex-wrap: wrap;
	}
	.pjs-specs-tab-btn {
		position: static;
		writing-mode: horizontal-tb;
		transform: none;
		width: 100%;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	.pjs-specs-tab-icon {
		transform: rotate(0deg);
	}
	.pjs-specs-tab-btn[aria-expanded="true"] .pjs-specs-tab-icon {
		transform: rotate(180deg);
	}
	.pjs-specs-sidebar-panel {
		max-width: none !important;
		max-height: 0;
		overflow: hidden;
		width: 100%;
		transition: max-height 0.3s ease;
	}
	.pjs-specs-sidebar-panel-inner {
		width: 100%;
		margin-left: 0;
		margin-top: 8px;
		box-sizing: border-box;
	}
	.pjs-desc-flex-content {
		width: 100%;
		margin-left: 0;
	}
}

html[data-theme="dark"] .pjs-specs-tab-btn {
	background: var(--pjs-card-bg);
	border-color: var(--pjs-border);
	color: #e8e8e8;
}
html[data-theme="dark"] .pjs-specs-tab-btn:hover {
	background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .pjs-specs-tab-icon {
	color: var(--pjs-primary);
}
html[data-theme="dark"] .pjs-specs-sidebar-panel-inner {
	background: var(--pjs-card-bg);
	border-color: var(--pjs-border);
	box-shadow: none;
}

/* ==========================================================
   Logo Terpisah untuk Dark Mode
   (Customize > Header > Site Identity > Dark Mode Logo)
   Kedua logo dirender di HTML (lihat header.php); CSS ini yang
   menentukan mana yang tampil sesuai mode aktif. Kalau logo dark
   mode tidak diisi admin, .pjs-site-logo-dark tidak akan ada di
   HTML sama sekali, jadi logo terang otomatis tetap dipakai di
   dark mode juga (tidak ada logo yang hilang).
========================================================== */
/* PENTING soal kekhususan (specificity):
   ".pjs-logo img { display:block }" di atas bernilai (0,1,1). Aturan
   lama ".pjs-site-logo-dark { display:none }" hanya (0,1,0) sehingga
   KALAH - akibatnya logo dark IKUT tampil di mode terang dan muncul
   DUA logo sekaligus. Karena itu semua aturan tampil/sembunyi di sini
   ditulis sebagai ".pjs-logo .kelas" (0,2,0) agar selalu menang atas
   ".pjs-logo img", berapa pun kombinasi logo yang diunggah admin.

   Default (mode terang): tampilkan HANYA logo terang. */
.pjs-logo .pjs-site-logo-light {
	display: block;
}
.pjs-logo .pjs-site-logo-dark {
	display: none;
}
/* Mode gelap DAN benar-benar ADA logo khusus dark (wadah diberi
   .has-dark-logo di header.php): baru tukar - sembunyikan logo terang,
   tampilkan logo dark. Kalau logo dark tidak diunggah, img dark tidak
   dirender sama sekali, jadi logo terang tetap dipakai di kedua mode
   dan tidak ada logo yang hilang. */
html[data-theme="dark"] .pjs-logo .has-dark-logo .pjs-site-logo-light {
	display: none;
}
html[data-theme="dark"] .pjs-logo .has-dark-logo .pjs-site-logo-dark {
	display: block;
}
/* Menu samping mobile (sidr) meng-clone markup logo ini ke drawer-nya
   sendiri, tapi mengganti SEMUA nama class dengan prefix "sidr-class-"
   (untuk mencegah id/class bentrok) - jadi aturan di atas tidak lagi
   cocok di dalam drawer, dan kedua logo jadi tampil sekaligus.
   Disamakan lagi di sini khusus untuk versi yang sudah di-prefix itu. */
.sidr-class-pjs-site-logo-dark {
	display: none;
}
html[data-theme="dark"] .sidr-class-has-dark-logo .sidr-class-pjs-site-logo-light {
	display: none;
}
html[data-theme="dark"] .sidr-class-has-dark-logo .sidr-class-pjs-site-logo-dark {
	display: inline-block;
}

/* ==========================================================
   Search & Dark Mode Toggle pindah ke dalam menu sticky
   (lihat js/sticky-menu-tools.js)
========================================================== */

/* .container di dalam .top-header: slot tools "mengambang" (float)
   di kanan-atas - posisi yang sama dengan kondisi awal sebelum
   sticky - dan karena ditaruh SEBELUM <nav> di HTML (wajib untuk
   float bekerja benar), item menu (#primary-menu > li, yang sudah
   float:left secara alami) otomatis mengalir/wrap di sekelilingnya,
   bukan didorong ke baris paling bawah terpisah. */
.top-header.pos-stickymenu .pjs-menuwrap > .container {
	/* Clearfix supaya tinggi container ikut menyesuaikan konten yang
	   di-float - sengaja TIDAK pakai overflow:hidden, karena itu ikut
	   memotong dropdown child menu (position:absolute, perlu "keluar"
	   dari batas container ini). Teknik ::after ini menghasilkan efek
	   yang sama (tinggi container membungkus elemen float) tanpa
	   memotong konten yang melebihi batasnya. */
}
.top-header.pos-stickymenu .pjs-menuwrap > .container::after {
	content: "";
	display: table;
	clear: both;
}
.top-header.pos-stickymenu nav.pjs-mainmenu {
	display: block;
}

#pjs-sticky-tools-slot {
	float: right;
	display: flex;
	align-items: center;
	height: 34px;
	margin: 6px 0 6px 14px;
}
/* Kosong (belum "docked") = tidak makan tempat/float sama sekali. */
#pjs-sticky-tools-slot:empty {
	display: none;
	float: none;
	margin: 0;
	height: auto;
}

/* Item menu baris pertama disamakan tingginya (34px) dan diberi
   margin atas yang SAMA (6px) dengan slot tools di atas, lalu isinya
   di-center secara vertikal lewat flex - supaya kedua-duanya benar-benar
   sejajar di sumbu vertikal yang sama, bukan cuma sama-sama nempel di
   tepi atas container. */
.top-header.pos-stickymenu.pjs-tools-docked #primary-menu > li {
	height: 34px;
	margin: 6px 0;
	display: flex;
	align-items: center;
}
.top-header.pos-stickymenu.pjs-tools-docked #primary-menu > li > a {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	height: 100%;
}

/* Tools (search + toggle mode) perlu sedikit dirapikan ukurannya
   supaya pas duduk di baris menu yang lebih pendek/ramping. */
.top-header.pos-stickymenu.pjs-tools-docked #pjs-header-tools {
	display: flex;
	align-items: center;
	gap: 10px;
}
.top-header.pos-stickymenu.pjs-tools-docked .pjs-searchform input[type="text"] {
	height: 34px;
	padding: 0 12px;
}
.top-header.pos-stickymenu.pjs-tools-docked .pjs-search-submit {
	height: 34px;
}

/* Saat search + toggle "docked" masuk ke bar menu sticky, area/pembungkus
   tools TIDAK boleh membawa warna latar sendiri - biar hanya field search
   dan tombol toggle yang tampak, duduk mulus di atas warna bar menu.
   (Warna bar menu itu sendiri disamakan di css/theme-dark.css untuk mode
   gelap supaya tidak ada potongan warna berbeda "ikut masuk".) */
.top-header.pos-stickymenu.pjs-tools-docked #pjs-sticky-tools-slot,
.top-header.pos-stickymenu.pjs-tools-docked #pjs-header-tools,
.top-header.pos-stickymenu.pjs-tools-docked #pjs-header-tools .pjs-search-wrap,
.top-header.pos-stickymenu.pjs-tools-docked #pjs-header-tools .pjs-theme-mode {
	background: transparent !important;
	box-shadow: none !important;
	/* theme-dark.css memberi .pjs-theme-mode margin-top:-10px untuk baris
	   logo; di dalam bar menu sticky itu malah bikin tombol toggle naik
	   dan tidak sejajar. Netralkan supaya tetap di tengah baris menu. */
	margin-top: 0 !important;
}

/* ==========================================================
   Desktop Primary Menu - Single-line Carousel + Arrow Nav
   ----------------------------------------------------------
   Menu utama desktop dipaksa SATU BARIS. Kalau item melebihi
   lebar area, kelebihannya digeser ke samping (bukan turun ke
   baris berikutnya) dan muncul tombol panah kiri/kanan.
   Lihat js/desktop-menu-carousel.js untuk logikanya.
   Semua di-scope ke >=1201px (di bawah itu .pjs-mainmenu memang
   disembunyikan tema dan menu mobile yang dipakai).
   ========================================================== */
.pjs-mainmenu {
	/* Warna dasar bar menu, dipakai untuk gradasi "fade" di tepi.
	   Di-override untuk dark mode di css/theme-dark.css. */
	--pjs-cmenu-bg: #ffffff;
	/* Aksen (hijau brand) untuk hover/isyarat tombol panah. */
	--pjs-cmenu-accent: #8bc34a;
}

@media (min-width: 1201px) {

	/* --- Kontainer bar menu jadi flex: nav (kiri) + slot tools (kanan) ---
	   Slot tools kosong = disembunyikan (:empty), jadi saat belum sticky
	   nav memakai seluruh lebar. Saat sticky, tools masuk ke slot dan nav
	   otomatis menyusut - panah kanan (di tepi kanan nav) pun jatuh tepat
	   SEBELUM kotak search. */
	.top-header.pos-stickymenu .pjs-menuwrap > .container {
		display: flex;
		align-items: center;
	}
	/* Clearfix float lama tidak diperlukan lagi di mode flex, dan kalau
	   dibiarkan malah jadi item flex kosong yang menambah celah. */
	.top-header.pos-stickymenu .pjs-menuwrap > .container::after {
		content: none;
	}
	.top-header.pos-stickymenu .pjs-mainmenu {
		order: 1;
		flex: 1 1 auto;
		min-width: 0; /* WAJIB agar nav boleh menyusut & area menu bisa dipotong. */
	}
	.top-header.pos-stickymenu #pjs-sticky-tools-slot {
		order: 2;
		flex: 0 0 auto;
		float: none; /* Di mode flex, float diabaikan - dibersihkan biar rapi. */
	}

	/* --- Menu dipaksa satu baris --- */
	.pjs-mainmenu #primary-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		width: max-content;   /* Selebar isinya, biar bisa "meluber" utk digeser. */
		max-width: none;
		margin: 0;            /* Batalkan "margin:0 auto" bawaan supaya rata kiri, bukan tengah. */
		transform: translateX(0);
		transition: transform .38s cubic-bezier(.22,.61,.36,1);
		will-change: transform;
	}
	.pjs-mainmenu #primary-menu.pjs-cmenu-no-anim {
		transition: none !important;
	}
	.pjs-mainmenu #primary-menu > li {
		float: none;
		flex: 0 0 auto;
	}

	/* Fallback sebelum/atau tanpa JS: potong horizontal supaya menu tetap
	   satu baris dan tidak bikin halaman melebar. overflow-x:clip dipilih
	   (bukan hidden) karena boleh dipasangkan dgn overflow-y:visible,
	   sehingga dropdown yang membuka ke bawah TIDAK ikut terpotong. */
	.pjs-mainmenu {
		overflow-x: clip;
		overflow-y: visible;
	}
	/* Setelah JS aktif, pemotongan dipindah ke .pjs-menu-clip; .pjs-mainmenu
	   dibuat visible lagi supaya bayangan tombol panah tidak ikut terpotong. */
	.pjs-mainmenu.pjs-cmenu-ready {
		overflow: visible;
	}

	/* --- Wadah carousel + area terpotong --- */
	.pjs-menu-carousel {
		position: relative;
		display: block;
		width: 100%;
		min-width: 0;
	}
	.pjs-menu-clip {
		position: relative;
		overflow-x: clip;
		overflow-y: visible; /* Dropdown/sub-menu tetap bisa turun ke bawah. */
		width: 100%;
		min-width: 0;
	}

	/* --- Gradasi tepi (isyarat "masih ada item") --- */
	.pjs-menu-carousel::before,
	.pjs-menu-carousel::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 64px;
		pointer-events: none;
		opacity: 0;
		transition: opacity .25s ease;
		z-index: 2;
	}
	.pjs-menu-carousel::before {
		left: 0;
		background: linear-gradient(
			to right,
			var(--pjs-cmenu-bg) 22%,
			rgba(255, 255, 255, 0) 100%
		);
	}
	.pjs-menu-carousel::after {
		right: 0;
		background: linear-gradient(
			to left,
			var(--pjs-cmenu-bg) 22%,
			rgba(255, 255, 255, 0) 100%
		);
	}
	.pjs-menu-carousel.can-prev::before { opacity: 1; }
	.pjs-menu-carousel.can-next::after  { opacity: 1; }

	/* --- Tombol panah --- */
	.pjs-menu-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%) scale(.82);
		width: 34px;
		height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		border: 1px solid rgba(0, 0, 0, .08);
		border-radius: 50%;
		background: var(--pjs-cmenu-bg);
		color: #333;
		cursor: pointer;
		z-index: 3;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
		transition: opacity .25s ease, visibility .25s ease,
			transform .25s cubic-bezier(.34, 1.56, .64, 1),
			background .2s ease, color .2s ease, border-color .2s ease;
	}
	.pjs-menu-arrow--prev { left: 2px; }
	.pjs-menu-arrow--next { right: 2px; }

	.pjs-menu-carousel.can-prev .pjs-menu-arrow--prev,
	.pjs-menu-carousel.can-next .pjs-menu-arrow--next {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(-50%) scale(1);
	}

	.pjs-menu-arrow:hover {
		background: var(--pjs-cmenu-accent);
		border-color: var(--pjs-cmenu-accent);
		color: #fff;
		box-shadow: 0 6px 18px rgba(139, 195, 74, .45);
	}
	.pjs-menu-carousel.can-prev .pjs-menu-arrow--prev:hover,
	.pjs-menu-carousel.can-next .pjs-menu-arrow--next:hover {
		transform: translateY(-50%) scale(1.08);
	}
	.pjs-menu-arrow:active {
		transform: translateY(-50%) scale(.94);
	}
	.pjs-menu-arrow svg {
		display: block;
		transition: transform .2s ease;
	}
	.pjs-menu-arrow--next:hover svg { transform: translateX(2px); }
	.pjs-menu-arrow--prev:hover svg { transform: translateX(-2px); }

	/* --- Animasi isyarat: saat panah kanan MUNCUL, beri dorongan halus
	   beberapa kali supaya visitor sadar ini navigasi yang bisa diklik. --- */
	.pjs-menu-carousel.can-next .pjs-menu-arrow--next {
		animation: pjsMenuNudge 1.6s ease-in-out 3;
	}
	.pjs-menu-carousel.can-prev .pjs-menu-arrow--prev {
		animation: pjsMenuNudgeLeft 1.6s ease-in-out 3;
	}
	@keyframes pjsMenuNudge {
		0%, 60%, 100% { transform: translateY(-50%) scale(1); }
		30%           { transform: translateY(-50%) scale(1) translateX(4px); }
	}
	@keyframes pjsMenuNudgeLeft {
		0%, 60%, 100% { transform: translateY(-50%) scale(1); }
		30%           { transform: translateY(-50%) scale(1) translateX(-4px); }
	}

	/* Hormati preferensi "kurangi animasi". */
	@media (prefers-reduced-motion: reduce) {
		.pjs-mainmenu #primary-menu { transition: none; }
		.pjs-menu-arrow,
		.pjs-menu-carousel.can-next .pjs-menu-arrow--next,
		.pjs-menu-carousel.can-prev .pjs-menu-arrow--prev {
			animation: none !important;
			transition: opacity .2s ease, visibility .2s ease;
		}
	}
}

/* ==========================================================
   Perbaikan Overflow Iklan di Mobile
   -------------------------------------------------------
   Mencegah halaman "bisa digeser kiri-kanan" ketika iklan
   (AdSense atau banner lain) yang dipasang di slot iklan tema
   ini merender iframe/elemen yang lebih lebar dari layar.
   Semua wadah iklan dikunci agar tidak melebihi lebar layar
   dan kelebihannya dipotong. Pakai overflow-x: clip (bukan
   hidden) pada body supaya menu/tab sticky tetap berfungsi.
========================================================== */

/* 1. Elemen AdSense tidak boleh melebihi lebar layar. */
ins.adsbygoogle,
.adsbygoogle {
	max-width: 100% !important;
	overflow: hidden !important;
}

/* 2. Semua wadah iklan bawaan tema dikunci lebarnya. */
.lokerpro-topbanner-aftermenu,
.lokerpro-banner-beforecontent,
.lokerpro-banner-aftercontent,
.pjs-banner-afterrelpost,
.pjs-infeed-banner,
.pjs-infeed-banner .pjs-box-content,
.lokerpro-footerbanner,
.parallxads,
.parallxads-box {
	max-width: 100% !important;
	overflow: hidden;
}

/* iframe iklan di dalam wadah-wadah tersebut ikut dibatasi. */
.lokerpro-topbanner-aftermenu iframe,
.lokerpro-banner-beforecontent iframe,
.lokerpro-banner-aftercontent iframe,
.pjs-banner-afterrelpost iframe,
.pjs-infeed-banner iframe,
.lokerpro-footerbanner iframe,
.parallxads-box iframe {
	max-width: 100% !important;
}

/* 3. Jaring pengaman: cegah geser horizontal seluruh halaman di
   layar kecil. 'clip' dipilih (bukan 'hidden') agar tidak membuat
   scroll-container baru yang bisa mematikan position: sticky
   (menu sticky & tab "Informasi Lowongan Kerja"). */
@media (max-width: 1024px) {
	body {
		overflow-x: clip;
	}
}