@import url('https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/css/job_portal_variables.css');@import url('https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/css/job_portal_variables.css');@import url('https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/css/job_portal_variables.css');

/*FILESTART   */

/* 10Web Booster optimized this CSS file */

img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */


/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/mp3-music-player-by-sonaar/public/css/sonaar-music-public.css */
@charset "UTF-8";
/*!
 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-brands-400.eot');
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-brands-400.eot?#iefix') format("embedded-opentype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-brands-400.woff2') format("woff2"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-brands-400.woff') format("woff"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-brands-400.ttf') format("truetype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-brands-400.svg#fontawesome') format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }

/*!
 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-solid-900.eot');
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-solid-900.eot?#iefix') format("embedded-opentype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-solid-900.woff2') format("woff2"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-solid-900.woff') format("woff"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-solid-900.ttf') format("truetype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-solid-900.svg#fontawesome') format("svg"); }

.fa,
.fas, .icons-selector .fa,
.icons-selector .fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

/*!
 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-regular-400.eot');
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-regular-400.eot?#iefix') format("embedded-opentype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-regular-400.woff2') format("woff2"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-regular-400.woff') format("woff"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-regular-400.ttf') format("truetype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../webfonts/fa-regular-400.svg#fontawesome') format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

/*!
 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }

.fa-border {
  border: solid 0.08em #eee;
  border-radius: .1em;
  padding: .2em .25em .15em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
  margin-left: .3em; }

.fa-spin {
  animation: fa-spin 2s infinite linear; }

.fa-pulse {
  animation: fa-spin 1s infinite steps(8); }

@keyframes fa-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg); }

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg); }

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg); }

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1); }

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1); }

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(-1, -1); }

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
  filter: none; }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%; }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: #fff; }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
  content: "\f26e"; }

.fa-accessible-icon:before {
  content: "\f368"; }

.fa-accusoft:before {
  content: "\f369"; }

.fa-acquisitions-incorporated:before {
  content: "\f6af"; }

.fa-ad:before {
  content: "\f641"; }

.fa-address-book:before {
  content: "\f2b9"; }

.fa-address-card:before {
  content: "\f2bb"; }

.fa-adjust:before {
  content: "\f042"; }

.fa-adn:before {
  content: "\f170"; }

.fa-adversal:before {
  content: "\f36a"; }

.fa-affiliatetheme:before {
  content: "\f36b"; }

.fa-air-freshener:before {
  content: "\f5d0"; }

.fa-airbnb:before {
  content: "\f834"; }

.fa-algolia:before {
  content: "\f36c"; }

.fa-align-center:before {
  content: "\f037"; }

.fa-align-justify:before {
  content: "\f039"; }

.fa-align-left:before {
  content: "\f036"; }

.fa-align-right:before {
  content: "\f038"; }

.fa-alipay:before {
  content: "\f642"; }

.fa-allergies:before {
  content: "\f461"; }

.fa-amazon:before {
  content: "\f270"; }

.fa-amazon-pay:before {
  content: "\f42c"; }

.fa-ambulance:before {
  content: "\f0f9"; }

.fa-american-sign-language-interpreting:before {
  content: "\f2a3"; }

.fa-amilia:before {
  content: "\f36d"; }

.fa-anchor:before {
  content: "\f13d"; }

.fa-android:before {
  content: "\f17b"; }

.fa-angellist:before {
  content: "\f209"; }

.fa-angle-double-down:before {
  content: "\f103"; }

.fa-angle-double-left:before {
  content: "\f100"; }

.fa-angle-double-right:before {
  content: "\f101"; }

.fa-angle-double-up:before {
  content: "\f102"; }

.fa-angle-down:before {
  content: "\f107"; }

.fa-angle-left:before {
  content: "\f104"; }

.fa-angle-right:before {
  content: "\f105"; }

.fa-angle-up:before {
  content: "\f106"; }

.fa-angry:before {
  content: "\f556"; }

.fa-angrycreative:before {
  content: "\f36e"; }

.fa-angular:before {
  content: "\f420"; }

.fa-ankh:before {
  content: "\f644"; }

.fa-app-store:before {
  content: "\f36f"; }

.fa-app-store-ios:before {
  content: "\f370"; }

.fa-apper:before {
  content: "\f371"; }

.fa-apple:before {
  content: "\f179"; }

.fa-apple-alt:before {
  content: "\f5d1"; }

.fa-apple-pay:before {
  content: "\f415"; }

.fa-archive:before {
  content: "\f187"; }

.fa-archway:before {
  content: "\f557"; }

.fa-arrow-alt-circle-down:before {
  content: "\f358"; }

.fa-arrow-alt-circle-left:before {
  content: "\f359"; }

.fa-arrow-alt-circle-right:before {
  content: "\f35a"; }

.fa-arrow-alt-circle-up:before {
  content: "\f35b"; }

.fa-arrow-circle-down:before {
  content: "\f0ab"; }

.fa-arrow-circle-left:before {
  content: "\f0a8"; }

.fa-arrow-circle-right:before {
  content: "\f0a9"; }

.fa-arrow-circle-up:before {
  content: "\f0aa"; }

.fa-arrow-down:before {
  content: "\f063"; }

.fa-arrow-left:before {
  content: "\f060"; }

.fa-arrow-right:before {
  content: "\f061"; }

.fa-arrow-up:before {
  content: "\f062"; }

.fa-arrows-alt:before {
  content: "\f0b2"; }

.fa-arrows-alt-h:before {
  content: "\f337"; }

.fa-arrows-alt-v:before {
  content: "\f338"; }

.fa-artstation:before {
  content: "\f77a"; }

.fa-assistive-listening-systems:before {
  content: "\f2a2"; }

.fa-asterisk:before {
  content: "\f069"; }

.fa-asymmetrik:before {
  content: "\f372"; }

.fa-at:before {
  content: "\f1fa"; }

.fa-atlas:before {
  content: "\f558"; }

.fa-atlassian:before {
  content: "\f77b"; }

.fa-atom:before {
  content: "\f5d2"; }

.fa-audible:before {
  content: "\f373"; }

.fa-audio-description:before {
  content: "\f29e"; }

.fa-autoprefixer:before {
  content: "\f41c"; }

.fa-avianex:before {
  content: "\f374"; }

.fa-aviato:before {
  content: "\f421"; }

.fa-award:before {
  content: "\f559"; }

.fa-aws:before {
  content: "\f375"; }

.fa-baby:before {
  content: "\f77c"; }

.fa-baby-carriage:before {
  content: "\f77d"; }

.fa-backspace:before {
  content: "\f55a"; }

.fa-backward:before {
  content: "\f04a"; }

.fa-bacon:before {
  content: "\f7e5"; }

.fa-bacteria:before {
  content: "\e059"; }

.fa-bacterium:before {
  content: "\e05a"; }

.fa-bahai:before {
  content: "\f666"; }

.fa-balance-scale:before {
  content: "\f24e"; }

.fa-balance-scale-left:before {
  content: "\f515"; }

.fa-balance-scale-right:before {
  content: "\f516"; }

.fa-ban:before {
  content: "\f05e"; }

.fa-band-aid:before {
  content: "\f462"; }

.fa-bandcamp:before {
  content: "\f2d5"; }

.fa-barcode:before {
  content: "\f02a"; }

.fa-bars:before {
  content: "\f0c9"; }

.fa-baseball-ball:before {
  content: "\f433"; }

.fa-basketball-ball:before {
  content: "\f434"; }

.fa-bath:before {
  content: "\f2cd"; }

.fa-battery-empty:before {
  content: "\f244"; }

.fa-battery-full:before {
  content: "\f240"; }

.fa-battery-half:before {
  content: "\f242"; }

.fa-battery-quarter:before {
  content: "\f243"; }

.fa-battery-three-quarters:before {
  content: "\f241"; }

.fa-battle-net:before {
  content: "\f835"; }

.fa-bed:before {
  content: "\f236"; }

.fa-beer:before {
  content: "\f0fc"; }

.fa-behance:before {
  content: "\f1b4"; }

.fa-behance-square:before {
  content: "\f1b5"; }

.fa-bell:before {
  content: "\f0f3"; }

.fa-bell-slash:before {
  content: "\f1f6"; }

.fa-bezier-curve:before {
  content: "\f55b"; }

.fa-bible:before {
  content: "\f647"; }

.fa-bicycle:before {
  content: "\f206"; }

.fa-biking:before {
  content: "\f84a"; }

.fa-bimobject:before {
  content: "\f378"; }

.fa-binoculars:before {
  content: "\f1e5"; }

.fa-biohazard:before {
  content: "\f780"; }

.fa-birthday-cake:before {
  content: "\f1fd"; }

.fa-bitbucket:before {
  content: "\f171"; }

.fa-bitcoin:before {
  content: "\f379"; }

.fa-bity:before {
  content: "\f37a"; }

.fa-black-tie:before {
  content: "\f27e"; }

.fa-blackberry:before {
  content: "\f37b"; }

.fa-blender:before {
  content: "\f517"; }

.fa-blender-phone:before {
  content: "\f6b6"; }

.fa-blind:before {
  content: "\f29d"; }

.fa-blog:before {
  content: "\f781"; }

.fa-blogger:before {
  content: "\f37c"; }

.fa-blogger-b:before {
  content: "\f37d"; }

.fa-bluetooth:before {
  content: "\f293"; }

.fa-bluetooth-b:before {
  content: "\f294"; }

.fa-bold:before {
  content: "\f032"; }

.fa-bolt:before {
  content: "\f0e7"; }

.fa-bomb:before {
  content: "\f1e2"; }

.fa-bone:before {
  content: "\f5d7"; }

.fa-bong:before {
  content: "\f55c"; }

.fa-book:before {
  content: "\f02d"; }

.fa-book-dead:before {
  content: "\f6b7"; }

.fa-book-medical:before {
  content: "\f7e6"; }

.fa-book-open:before {
  content: "\f518"; }

.fa-book-reader:before {
  content: "\f5da"; }

.fa-bookmark:before {
  content: "\f02e"; }

.fa-bootstrap:before {
  content: "\f836"; }

.fa-border-all:before {
  content: "\f84c"; }

.fa-border-none:before {
  content: "\f850"; }

.fa-border-style:before {
  content: "\f853"; }

.fa-bowling-ball:before {
  content: "\f436"; }

.fa-box:before {
  content: "\f466"; }

.fa-box-open:before {
  content: "\f49e"; }

.fa-box-tissue:before {
  content: "\e05b"; }

.fa-boxes:before {
  content: "\f468"; }

.fa-braille:before {
  content: "\f2a1"; }

.fa-brain:before {
  content: "\f5dc"; }

.fa-bread-slice:before {
  content: "\f7ec"; }

.fa-briefcase:before {
  content: "\f0b1"; }

.fa-briefcase-medical:before {
  content: "\f469"; }

.fa-broadcast-tower:before {
  content: "\f519"; }

.fa-broom:before {
  content: "\f51a"; }

.fa-brush:before {
  content: "\f55d"; }

.fa-btc:before {
  content: "\f15a"; }

.fa-buffer:before {
  content: "\f837"; }

.fa-bug:before {
  content: "\f188"; }

.fa-building:before {
  content: "\f1ad"; }

.fa-bullhorn:before {
  content: "\f0a1"; }

.fa-bullseye:before {
  content: "\f140"; }

.fa-burn:before {
  content: "\f46a"; }

.fa-buromobelexperte:before {
  content: "\f37f"; }

.fa-bus:before {
  content: "\f207"; }

.fa-bus-alt:before {
  content: "\f55e"; }

.fa-business-time:before {
  content: "\f64a"; }

.fa-buy-n-large:before {
  content: "\f8a6"; }

.fa-buysellads:before {
  content: "\f20d"; }

.fa-calculator:before {
  content: "\f1ec"; }

.fa-calendar:before {
  content: "\f133"; }

.fa-calendar-alt:before {
  content: "\f073"; }

.fa-calendar-check:before {
  content: "\f274"; }

.fa-calendar-day:before {
  content: "\f783"; }

.fa-calendar-minus:before {
  content: "\f272"; }

.fa-calendar-plus:before {
  content: "\f271"; }

.fa-calendar-times:before {
  content: "\f273"; }

.fa-calendar-week:before {
  content: "\f784"; }

.fa-camera:before {
  content: "\f030"; }

.fa-camera-retro:before {
  content: "\f083"; }

.fa-campground:before {
  content: "\f6bb"; }

.fa-canadian-maple-leaf:before {
  content: "\f785"; }

.fa-candy-cane:before {
  content: "\f786"; }

.fa-cannabis:before {
  content: "\f55f"; }

.fa-capsules:before {
  content: "\f46b"; }

.fa-car:before {
  content: "\f1b9"; }

.fa-car-alt:before {
  content: "\f5de"; }

.fa-car-battery:before {
  content: "\f5df"; }

.fa-car-crash:before {
  content: "\f5e1"; }

.fa-car-side:before {
  content: "\f5e4"; }

.fa-caravan:before {
  content: "\f8ff"; }

.fa-caret-down:before {
  content: "\f0d7"; }

.fa-caret-left:before {
  content: "\f0d9"; }

.fa-caret-right:before {
  content: "\f0da"; }

.fa-caret-square-down:before {
  content: "\f150"; }

.fa-caret-square-left:before {
  content: "\f191"; }

.fa-caret-square-right:before {
  content: "\f152"; }

.fa-caret-square-up:before {
  content: "\f151"; }

.fa-caret-up:before {
  content: "\f0d8"; }

.fa-carrot:before {
  content: "\f787"; }

.fa-cart-arrow-down:before {
  content: "\f218"; }

.fa-cart-plus:before {
  content: "\f217"; }

.fa-cash-register:before {
  content: "\f788"; }

.fa-cat:before {
  content: "\f6be"; }

.fa-cc-amazon-pay:before {
  content: "\f42d"; }

.fa-cc-amex:before {
  content: "\f1f3"; }

.fa-cc-apple-pay:before {
  content: "\f416"; }

.fa-cc-diners-club:before {
  content: "\f24c"; }

.fa-cc-discover:before {
  content: "\f1f2"; }

.fa-cc-jcb:before {
  content: "\f24b"; }

.fa-cc-mastercard:before {
  content: "\f1f1"; }

.fa-cc-paypal:before {
  content: "\f1f4"; }

.fa-cc-stripe:before {
  content: "\f1f5"; }

.fa-cc-visa:before {
  content: "\f1f0"; }

.fa-centercode:before {
  content: "\f380"; }

.fa-centos:before {
  content: "\f789"; }

.fa-certificate:before {
  content: "\f0a3"; }

.fa-chair:before {
  content: "\f6c0"; }

.fa-chalkboard:before {
  content: "\f51b"; }

.fa-chalkboard-teacher:before {
  content: "\f51c"; }

.fa-charging-station:before {
  content: "\f5e7"; }

.fa-chart-area:before {
  content: "\f1fe"; }

.fa-chart-bar:before {
  content: "\f080"; }

.fa-chart-line:before {
  content: "\f201"; }

.fa-chart-pie:before {
  content: "\f200"; }

.fa-check:before {
  content: "\f00c"; }

.fa-check-circle:before {
  content: "\f058"; }

.fa-check-double:before {
  content: "\f560"; }

.fa-check-square:before {
  content: "\f14a"; }

.fa-cheese:before {
  content: "\f7ef"; }

.fa-chess:before {
  content: "\f439"; }

.fa-chess-bishop:before {
  content: "\f43a"; }

.fa-chess-board:before {
  content: "\f43c"; }

.fa-chess-king:before {
  content: "\f43f"; }

.fa-chess-knight:before {
  content: "\f441"; }

.fa-chess-pawn:before {
  content: "\f443"; }

.fa-chess-queen:before {
  content: "\f445"; }

.fa-chess-rook:before {
  content: "\f447"; }

.fa-chevron-circle-down:before {
  content: "\f13a"; }

.fa-chevron-circle-left:before {
  content: "\f137"; }

.fa-chevron-circle-right:before {
  content: "\f138"; }

.fa-chevron-circle-up:before {
  content: "\f139"; }

.fa-chevron-down:before {
  content: "\f078"; }

.fa-chevron-left:before {
  content: "\f053"; }

.fa-chevron-right:before {
  content: "\f054"; }

.fa-chevron-up:before {
  content: "\f077"; }

.fa-child:before {
  content: "\f1ae"; }

.fa-chrome:before {
  content: "\f268"; }

.fa-chromecast:before {
  content: "\f838"; }

.fa-church:before {
  content: "\f51d"; }

.fa-circle:before {
  content: "\f111"; }

.fa-circle-notch:before {
  content: "\f1ce"; }

.fa-city:before {
  content: "\f64f"; }

.fa-clinic-medical:before {
  content: "\f7f2"; }

.fa-clipboard:before {
  content: "\f328"; }

.fa-clipboard-check:before {
  content: "\f46c"; }

.fa-clipboard-list:before {
  content: "\f46d"; }

.fa-clock:before {
  content: "\f017"; }

.fa-clone:before {
  content: "\f24d"; }

.fa-closed-captioning:before {
  content: "\f20a"; }

.fa-cloud:before {
  content: "\f0c2"; }

.fa-cloud-download-alt:before {
  content: "\f381"; }

.fa-cloud-meatball:before {
  content: "\f73b"; }

.fa-cloud-moon:before {
  content: "\f6c3"; }

.fa-cloud-moon-rain:before {
  content: "\f73c"; }

.fa-cloud-rain:before {
  content: "\f73d"; }

.fa-cloud-showers-heavy:before {
  content: "\f740"; }

.fa-cloud-sun:before {
  content: "\f6c4"; }

.fa-cloud-sun-rain:before {
  content: "\f743"; }

.fa-cloud-upload-alt:before {
  content: "\f382"; }

.fa-cloudflare:before {
  content: "\e07d"; }

.fa-cloudscale:before {
  content: "\f383"; }

.fa-cloudsmith:before {
  content: "\f384"; }

.fa-cloudversify:before {
  content: "\f385"; }

.fa-cocktail:before {
  content: "\f561"; }

.fa-code:before {
  content: "\f121"; }

.fa-code-branch:before {
  content: "\f126"; }

.fa-codepen:before {
  content: "\f1cb"; }

.fa-codiepie:before {
  content: "\f284"; }

.fa-coffee:before {
  content: "\f0f4"; }

.fa-cog:before {
  content: "\f013"; }

.fa-cogs:before {
  content: "\f085"; }

.fa-coins:before {
  content: "\f51e"; }

.fa-columns:before {
  content: "\f0db"; }

.fa-comment:before {
  content: "\f075"; }

.fa-comment-alt:before {
  content: "\f27a"; }

.fa-comment-dollar:before {
  content: "\f651"; }

.fa-comment-dots:before {
  content: "\f4ad"; }

.fa-comment-medical:before {
  content: "\f7f5"; }

.fa-comment-slash:before {
  content: "\f4b3"; }

.fa-comments:before {
  content: "\f086"; }

.fa-comments-dollar:before {
  content: "\f653"; }

.fa-compact-disc:before {
  content: "\f51f"; }

.fa-compass:before {
  content: "\f14e"; }

.fa-compress:before {
  content: "\f066"; }

.fa-compress-alt:before {
  content: "\f422"; }

.fa-compress-arrows-alt:before {
  content: "\f78c"; }

.fa-concierge-bell:before {
  content: "\f562"; }

.fa-confluence:before {
  content: "\f78d"; }

.fa-connectdevelop:before {
  content: "\f20e"; }

.fa-contao:before {
  content: "\f26d"; }

.fa-cookie:before {
  content: "\f563"; }

.fa-cookie-bite:before {
  content: "\f564"; }

.fa-copy:before {
  content: "\f0c5"; }

.fa-copyright:before {
  content: "\f1f9"; }

.fa-cotton-bureau:before {
  content: "\f89e"; }

.fa-couch:before {
  content: "\f4b8"; }

.fa-cpanel:before {
  content: "\f388"; }

.fa-creative-commons:before {
  content: "\f25e"; }

.fa-creative-commons-by:before {
  content: "\f4e7"; }

.fa-creative-commons-nc:before {
  content: "\f4e8"; }

.fa-creative-commons-nc-eu:before {
  content: "\f4e9"; }

.fa-creative-commons-nc-jp:before {
  content: "\f4ea"; }

.fa-creative-commons-nd:before {
  content: "\f4eb"; }

.fa-creative-commons-pd:before {
  content: "\f4ec"; }

.fa-creative-commons-pd-alt:before {
  content: "\f4ed"; }

.fa-creative-commons-remix:before {
  content: "\f4ee"; }

.fa-creative-commons-sa:before {
  content: "\f4ef"; }

.fa-creative-commons-sampling:before {
  content: "\f4f0"; }

.fa-creative-commons-sampling-plus:before {
  content: "\f4f1"; }

.fa-creative-commons-share:before {
  content: "\f4f2"; }

.fa-creative-commons-zero:before {
  content: "\f4f3"; }

.fa-credit-card:before {
  content: "\f09d"; }

.fa-critical-role:before {
  content: "\f6c9"; }

.fa-crop:before {
  content: "\f125"; }

.fa-crop-alt:before {
  content: "\f565"; }

.fa-cross:before {
  content: "\f654"; }

.fa-crosshairs:before {
  content: "\f05b"; }

.fa-crow:before {
  content: "\f520"; }

.fa-crown:before {
  content: "\f521"; }

.fa-crutch:before {
  content: "\f7f7"; }

.fa-css3:before {
  content: "\f13c"; }

.fa-css3-alt:before {
  content: "\f38b"; }

.fa-cube:before {
  content: "\f1b2"; }

.fa-cubes:before {
  content: "\f1b3"; }

.fa-cut:before {
  content: "\f0c4"; }

.fa-cuttlefish:before {
  content: "\f38c"; }

.fa-d-and-d:before {
  content: "\f38d"; }

.fa-d-and-d-beyond:before {
  content: "\f6ca"; }

.fa-dailymotion:before {
  content: "\e052"; }

.fa-dashcube:before {
  content: "\f210"; }

.fa-database:before {
  content: "\f1c0"; }

.fa-deaf:before {
  content: "\f2a4"; }

.fa-deezer:before {
  content: "\e077"; }

.fa-delicious:before {
  content: "\f1a5"; }

.fa-democrat:before {
  content: "\f747"; }

.fa-deploydog:before {
  content: "\f38e"; }

.fa-deskpro:before {
  content: "\f38f"; }

.fa-desktop:before {
  content: "\f108"; }

.fa-dev:before {
  content: "\f6cc"; }

.fa-deviantart:before {
  content: "\f1bd"; }

.fa-dharmachakra:before {
  content: "\f655"; }

.fa-dhl:before {
  content: "\f790"; }

.fa-diagnoses:before {
  content: "\f470"; }

.fa-diaspora:before {
  content: "\f791"; }

.fa-dice:before {
  content: "\f522"; }

.fa-dice-d20:before {
  content: "\f6cf"; }

.fa-dice-d6:before {
  content: "\f6d1"; }

.fa-dice-five:before {
  content: "\f523"; }

.fa-dice-four:before {
  content: "\f524"; }

.fa-dice-one:before {
  content: "\f525"; }

.fa-dice-six:before {
  content: "\f526"; }

.fa-dice-three:before {
  content: "\f527"; }

.fa-dice-two:before {
  content: "\f528"; }

.fa-digg:before {
  content: "\f1a6"; }

.fa-digital-ocean:before {
  content: "\f391"; }

.fa-digital-tachograph:before {
  content: "\f566"; }

.fa-directions:before {
  content: "\f5eb"; }

.fa-discord:before {
  content: "\f392"; }

.fa-discourse:before {
  content: "\f393"; }

.fa-disease:before {
  content: "\f7fa"; }

.fa-divide:before {
  content: "\f529"; }

.fa-dizzy:before {
  content: "\f567"; }

.fa-dna:before {
  content: "\f471"; }

.fa-dochub:before {
  content: "\f394"; }

.fa-docker:before {
  content: "\f395"; }

.fa-dog:before {
  content: "\f6d3"; }

.fa-dollar-sign:before {
  content: "\f155"; }

.fa-dolly:before {
  content: "\f472"; }

.fa-dolly-flatbed:before {
  content: "\f474"; }

.fa-donate:before {
  content: "\f4b9"; }

.fa-door-closed:before {
  content: "\f52a"; }

.fa-door-open:before {
  content: "\f52b"; }

.fa-dot-circle:before {
  content: "\f192"; }

.fa-dove:before {
  content: "\f4ba"; }

.fa-download:before {
  content: "\f019"; }

.fa-draft2digital:before {
  content: "\f396"; }

.fa-drafting-compass:before {
  content: "\f568"; }

.fa-dragon:before {
  content: "\f6d5"; }

.fa-draw-polygon:before {
  content: "\f5ee"; }

.fa-dribbble:before {
  content: "\f17d"; }

.fa-dribbble-square:before {
  content: "\f397"; }

.fa-dropbox:before {
  content: "\f16b"; }

.fa-drum:before {
  content: "\f569"; }

.fa-drum-steelpan:before {
  content: "\f56a"; }

.fa-drumstick-bite:before {
  content: "\f6d7"; }

.fa-drupal:before {
  content: "\f1a9"; }

.fa-dumbbell:before {
  content: "\f44b"; }

.fa-dumpster:before {
  content: "\f793"; }

.fa-dumpster-fire:before {
  content: "\f794"; }

.fa-dungeon:before {
  content: "\f6d9"; }

.fa-dyalog:before {
  content: "\f399"; }

.fa-earlybirds:before {
  content: "\f39a"; }

.fa-ebay:before {
  content: "\f4f4"; }

.fa-edge:before {
  content: "\f282"; }

.fa-edge-legacy:before {
  content: "\e078"; }

.fa-edit:before {
  content: "\f044"; }

.fa-egg:before {
  content: "\f7fb"; }

.fa-eject:before {
  content: "\f052"; }

.fa-elementor:before {
  content: "\f430"; }

.fa-ellipsis-h:before {
  content: "\f141"; }

.fa-ellipsis-v:before {
  content: "\f142"; }

.fa-ello:before {
  content: "\f5f1"; }

.fa-ember:before {
  content: "\f423"; }

.fa-empire:before {
  content: "\f1d1"; }

.fa-envelope:before {
  content: "\f0e0"; }

.fa-envelope-open:before {
  content: "\f2b6"; }

.fa-envelope-open-text:before {
  content: "\f658"; }

.fa-envelope-square:before {
  content: "\f199"; }

.fa-envira:before {
  content: "\f299"; }

.fa-equals:before {
  content: "\f52c"; }

.fa-eraser:before {
  content: "\f12d"; }

.fa-erlang:before {
  content: "\f39d"; }

.fa-ethereum:before {
  content: "\f42e"; }

.fa-ethernet:before {
  content: "\f796"; }

.fa-etsy:before {
  content: "\f2d7"; }

.fa-euro-sign:before {
  content: "\f153"; }

.fa-evernote:before {
  content: "\f839"; }

.fa-exchange-alt:before {
  content: "\f362"; }

.fa-exclamation:before {
  content: "\f12a"; }

.fa-exclamation-circle:before {
  content: "\f06a"; }

.fa-exclamation-triangle:before {
  content: "\f071"; }

.fa-expand:before {
  content: "\f065"; }

.fa-expand-alt:before {
  content: "\f424"; }

.fa-expand-arrows-alt:before {
  content: "\f31e"; }

.fa-expeditedssl:before {
  content: "\f23e"; }

.fa-external-link-alt:before {
  content: "\f35d"; }

.fa-external-link-square-alt:before {
  content: "\f360"; }

.fa-eye:before {
  content: "\f06e"; }

.fa-eye-dropper:before {
  content: "\f1fb"; }

.fa-eye-slash:before {
  content: "\f070"; }

.fa-facebook:before {
  content: "\f09a"; }

.fa-facebook-f:before {
  content: "\f39e"; }

.fa-facebook-messenger:before {
  content: "\f39f"; }

.fa-facebook-square:before {
  content: "\f082"; }

.fa-fan:before {
  content: "\f863"; }

.fa-fantasy-flight-games:before {
  content: "\f6dc"; }

.fa-fast-backward:before {
  content: "\f049"; }

.fa-fast-forward:before {
  content: "\f050"; }

.fa-faucet:before {
  content: "\e005"; }

.fa-fax:before {
  content: "\f1ac"; }

.fa-feather:before {
  content: "\f52d"; }

.fa-feather-alt:before {
  content: "\f56b"; }

.fa-fedex:before {
  content: "\f797"; }

.fa-fedora:before {
  content: "\f798"; }

.fa-female:before {
  content: "\f182"; }

.fa-fighter-jet:before {
  content: "\f0fb"; }

.fa-figma:before {
  content: "\f799"; }

.fa-file:before {
  content: "\f15b"; }

.fa-file-alt:before {
  content: "\f15c"; }

.fa-file-archive:before {
  content: "\f1c6"; }

.fa-file-audio:before {
  content: "\f1c7"; }

.fa-file-code:before {
  content: "\f1c9"; }

.fa-file-contract:before {
  content: "\f56c"; }

.fa-file-csv:before {
  content: "\f6dd"; }

.fa-file-download:before {
  content: "\f56d"; }

.fa-file-excel:before {
  content: "\f1c3"; }

.fa-file-export:before {
  content: "\f56e"; }

.fa-file-image:before {
  content: "\f1c5"; }

.fa-file-import:before {
  content: "\f56f"; }

.fa-file-invoice:before {
  content: "\f570"; }

.fa-file-invoice-dollar:before {
  content: "\f571"; }

.fa-file-medical:before {
  content: "\f477"; }

.fa-file-medical-alt:before {
  content: "\f478"; }

.fa-file-pdf:before {
  content: "\f1c1"; }

.fa-file-powerpoint:before {
  content: "\f1c4"; }

.fa-file-prescription:before {
  content: "\f572"; }

.fa-file-signature:before {
  content: "\f573"; }

.fa-file-upload:before {
  content: "\f574"; }

.fa-file-video:before {
  content: "\f1c8"; }

.fa-file-word:before {
  content: "\f1c2"; }

.fa-fill:before {
  content: "\f575"; }

.fa-fill-drip:before {
  content: "\f576"; }

.fa-film:before {
  content: "\f008"; }

.fa-filter:before {
  content: "\f0b0"; }

.fa-fingerprint:before {
  content: "\f577"; }

.fa-fire:before {
  content: "\f06d"; }

.fa-fire-alt:before {
  content: "\f7e4"; }

.fa-fire-extinguisher:before {
  content: "\f134"; }

.fa-firefox:before {
  content: "\f269"; }

.fa-firefox-browser:before {
  content: "\e007"; }

.fa-first-aid:before {
  content: "\f479"; }

.fa-first-order:before {
  content: "\f2b0"; }

.fa-first-order-alt:before {
  content: "\f50a"; }

.fa-firstdraft:before {
  content: "\f3a1"; }

.fa-fish:before {
  content: "\f578"; }

.fa-fist-raised:before {
  content: "\f6de"; }

.fa-flag:before {
  content: "\f024"; }

.fa-flag-checkered:before {
  content: "\f11e"; }

.fa-flag-usa:before {
  content: "\f74d"; }

.fa-flask:before {
  content: "\f0c3"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-flipboard:before {
  content: "\f44d"; }

.fa-flushed:before {
  content: "\f579"; }

.fa-fly:before {
  content: "\f417"; }

.fa-folder:before {
  content: "\f07b"; }

.fa-folder-minus:before {
  content: "\f65d"; }

.fa-folder-open:before {
  content: "\f07c"; }

.fa-folder-plus:before {
  content: "\f65e"; }

.fa-font:before {
  content: "\f031"; }

.fa-font-awesome:before {
  content: "\f2b4"; }

.fa-font-awesome-alt:before {
  content: "\f35c"; }

.fa-font-awesome-flag:before {
  content: "\f425"; }

.fa-font-awesome-logo-full:before {
  content: "\f4e6"; }

.fa-fonticons:before {
  content: "\f280"; }

.fa-fonticons-fi:before {
  content: "\f3a2"; }

.fa-football-ball:before {
  content: "\f44e"; }

.fa-fort-awesome:before {
  content: "\f286"; }

.fa-fort-awesome-alt:before {
  content: "\f3a3"; }

.fa-forumbee:before {
  content: "\f211"; }

.fa-forward:before {
  content: "\f04e"; }

.fa-foursquare:before {
  content: "\f180"; }

.fa-free-code-camp:before {
  content: "\f2c5"; }

.fa-freebsd:before {
  content: "\f3a4"; }

.fa-frog:before {
  content: "\f52e"; }

.fa-frown:before {
  content: "\f119"; }

.fa-frown-open:before {
  content: "\f57a"; }

.fa-fulcrum:before {
  content: "\f50b"; }

.fa-funnel-dollar:before {
  content: "\f662"; }

.fa-futbol:before {
  content: "\f1e3"; }

.fa-galactic-republic:before {
  content: "\f50c"; }

.fa-galactic-senate:before {
  content: "\f50d"; }

.fa-gamepad:before {
  content: "\f11b"; }

.fa-gas-pump:before {
  content: "\f52f"; }

.fa-gavel:before {
  content: "\f0e3"; }

.fa-gem:before {
  content: "\f3a5"; }

.fa-genderless:before {
  content: "\f22d"; }

.fa-get-pocket:before {
  content: "\f265"; }

.fa-gg:before {
  content: "\f260"; }

.fa-gg-circle:before {
  content: "\f261"; }

.fa-ghost:before {
  content: "\f6e2"; }

.fa-gift:before {
  content: "\f06b"; }

.fa-gifts:before {
  content: "\f79c"; }

.fa-git:before {
  content: "\f1d3"; }

.fa-git-alt:before {
  content: "\f841"; }

.fa-git-square:before {
  content: "\f1d2"; }

.fa-github:before {
  content: "\f09b"; }

.fa-github-alt:before {
  content: "\f113"; }

.fa-github-square:before {
  content: "\f092"; }

.fa-gitkraken:before {
  content: "\f3a6"; }

.fa-gitlab:before {
  content: "\f296"; }

.fa-gitter:before {
  content: "\f426"; }

.fa-glass-cheers:before {
  content: "\f79f"; }

.fa-glass-martini:before {
  content: "\f000"; }

.fa-glass-martini-alt:before {
  content: "\f57b"; }

.fa-glass-whiskey:before {
  content: "\f7a0"; }

.fa-glasses:before {
  content: "\f530"; }

.fa-glide:before {
  content: "\f2a5"; }

.fa-glide-g:before {
  content: "\f2a6"; }

.fa-globe:before {
  content: "\f0ac"; }

.fa-globe-africa:before {
  content: "\f57c"; }

.fa-globe-americas:before {
  content: "\f57d"; }

.fa-globe-asia:before {
  content: "\f57e"; }

.fa-globe-europe:before {
  content: "\f7a2"; }

.fa-gofore:before {
  content: "\f3a7"; }

.fa-golf-ball:before {
  content: "\f450"; }

.fa-goodreads:before {
  content: "\f3a8"; }

.fa-goodreads-g:before {
  content: "\f3a9"; }

.fa-google:before {
  content: "\f1a0"; }

.fa-google-drive:before {
  content: "\f3aa"; }

.fa-google-pay:before {
  content: "\e079"; }

.fa-google-play:before {
  content: "\f3ab"; }

.fa-google-plus:before {
  content: "\f2b3"; }

.fa-google-plus-g:before {
  content: "\f0d5"; }

.fa-google-plus-square:before {
  content: "\f0d4"; }

.fa-google-wallet:before {
  content: "\f1ee"; }

.fa-gopuram:before {
  content: "\f664"; }

.fa-graduation-cap:before {
  content: "\f19d"; }

.fa-gratipay:before {
  content: "\f184"; }

.fa-grav:before {
  content: "\f2d6"; }

.fa-greater-than:before {
  content: "\f531"; }

.fa-greater-than-equal:before {
  content: "\f532"; }

.fa-grimace:before {
  content: "\f57f"; }

.fa-grin:before {
  content: "\f580"; }

.fa-grin-alt:before {
  content: "\f581"; }

.fa-grin-beam:before {
  content: "\f582"; }

.fa-grin-beam-sweat:before {
  content: "\f583"; }

.fa-grin-hearts:before {
  content: "\f584"; }

.fa-grin-squint:before {
  content: "\f585"; }

.fa-grin-squint-tears:before {
  content: "\f586"; }

.fa-grin-stars:before {
  content: "\f587"; }

.fa-grin-tears:before {
  content: "\f588"; }

.fa-grin-tongue:before {
  content: "\f589"; }

.fa-grin-tongue-squint:before {
  content: "\f58a"; }

.fa-grin-tongue-wink:before {
  content: "\f58b"; }

.fa-grin-wink:before {
  content: "\f58c"; }

.fa-grip-horizontal:before {
  content: "\f58d"; }

.fa-grip-lines:before {
  content: "\f7a4"; }

.fa-grip-lines-vertical:before {
  content: "\f7a5"; }

.fa-grip-vertical:before {
  content: "\f58e"; }

.fa-gripfire:before {
  content: "\f3ac"; }

.fa-grunt:before {
  content: "\f3ad"; }

.fa-guilded:before {
  content: "\e07e"; }

.fa-guitar:before {
  content: "\f7a6"; }

.fa-gulp:before {
  content: "\f3ae"; }

.fa-h-square:before {
  content: "\f0fd"; }

.fa-hacker-news:before {
  content: "\f1d4"; }

.fa-hacker-news-square:before {
  content: "\f3af"; }

.fa-hackerrank:before {
  content: "\f5f7"; }

.fa-hamburger:before {
  content: "\f805"; }

.fa-hammer:before {
  content: "\f6e3"; }

.fa-hamsa:before {
  content: "\f665"; }

.fa-hand-holding:before {
  content: "\f4bd"; }

.fa-hand-holding-heart:before {
  content: "\f4be"; }

.fa-hand-holding-medical:before {
  content: "\e05c"; }

.fa-hand-holding-usd:before {
  content: "\f4c0"; }

.fa-hand-holding-water:before {
  content: "\f4c1"; }

.fa-hand-lizard:before {
  content: "\f258"; }

.fa-hand-middle-finger:before {
  content: "\f806"; }

.fa-hand-paper:before {
  content: "\f256"; }

.fa-hand-peace:before {
  content: "\f25b"; }

.fa-hand-point-down:before {
  content: "\f0a7"; }

.fa-hand-point-left:before {
  content: "\f0a5"; }

.fa-hand-point-right:before {
  content: "\f0a4"; }

.fa-hand-point-up:before {
  content: "\f0a6"; }

.fa-hand-pointer:before {
  content: "\f25a"; }

.fa-hand-rock:before {
  content: "\f255"; }

.fa-hand-scissors:before {
  content: "\f257"; }

.fa-hand-sparkles:before {
  content: "\e05d"; }

.fa-hand-spock:before {
  content: "\f259"; }

.fa-hands:before {
  content: "\f4c2"; }

.fa-hands-helping:before {
  content: "\f4c4"; }

.fa-hands-wash:before {
  content: "\e05e"; }

.fa-handshake:before {
  content: "\f2b5"; }

.fa-handshake-alt-slash:before {
  content: "\e05f"; }

.fa-handshake-slash:before {
  content: "\e060"; }

.fa-hanukiah:before {
  content: "\f6e6"; }

.fa-hard-hat:before {
  content: "\f807"; }

.fa-hashtag:before {
  content: "\f292"; }

.fa-hat-cowboy:before {
  content: "\f8c0"; }

.fa-hat-cowboy-side:before {
  content: "\f8c1"; }

.fa-hat-wizard:before {
  content: "\f6e8"; }

.fa-hdd:before {
  content: "\f0a0"; }

.fa-head-side-cough:before {
  content: "\e061"; }

.fa-head-side-cough-slash:before {
  content: "\e062"; }

.fa-head-side-mask:before {
  content: "\e063"; }

.fa-head-side-virus:before {
  content: "\e064"; }

.fa-heading:before {
  content: "\f1dc"; }

.fa-headphones:before {
  content: "\f025"; }

.fa-headphones-alt:before {
  content: "\f58f"; }

.fa-headset:before {
  content: "\f590"; }

.fa-heart:before {
  content: "\f004"; }

.fa-heart-broken:before {
  content: "\f7a9"; }

.fa-heartbeat:before {
  content: "\f21e"; }

.fa-helicopter:before {
  content: "\f533"; }

.fa-highlighter:before {
  content: "\f591"; }

.fa-hiking:before {
  content: "\f6ec"; }

.fa-hippo:before {
  content: "\f6ed"; }

.fa-hips:before {
  content: "\f452"; }

.fa-hire-a-helper:before {
  content: "\f3b0"; }

.fa-history:before {
  content: "\f1da"; }

.fa-hive:before {
  content: "\e07f"; }

.fa-hockey-puck:before {
  content: "\f453"; }

.fa-holly-berry:before {
  content: "\f7aa"; }

.fa-home:before {
  content: "\f015"; }

.fa-hooli:before {
  content: "\f427"; }

.fa-hornbill:before {
  content: "\f592"; }

.fa-horse:before {
  content: "\f6f0"; }

.fa-horse-head:before {
  content: "\f7ab"; }

.fa-hospital:before {
  content: "\f0f8"; }

.fa-hospital-alt:before {
  content: "\f47d"; }

.fa-hospital-symbol:before {
  content: "\f47e"; }

.fa-hospital-user:before {
  content: "\f80d"; }

.fa-hot-tub:before {
  content: "\f593"; }

.fa-hotdog:before {
  content: "\f80f"; }

.fa-hotel:before {
  content: "\f594"; }

.fa-hotjar:before {
  content: "\f3b1"; }

.fa-hourglass:before {
  content: "\f254"; }

.fa-hourglass-end:before {
  content: "\f253"; }

.fa-hourglass-half:before {
  content: "\f252"; }

.fa-hourglass-start:before {
  content: "\f251"; }

.fa-house-damage:before {
  content: "\f6f1"; }

.fa-house-user:before {
  content: "\e065"; }

.fa-houzz:before {
  content: "\f27c"; }

.fa-hryvnia:before {
  content: "\f6f2"; }

.fa-html5:before {
  content: "\f13b"; }

.fa-hubspot:before {
  content: "\f3b2"; }

.fa-i-cursor:before {
  content: "\f246"; }

.fa-ice-cream:before {
  content: "\f810"; }

.fa-icicles:before {
  content: "\f7ad"; }

.fa-icons:before {
  content: "\f86d"; }

.fa-id-badge:before {
  content: "\f2c1"; }

.fa-id-card:before {
  content: "\f2c2"; }

.fa-id-card-alt:before {
  content: "\f47f"; }

.fa-ideal:before {
  content: "\e013"; }

.fa-igloo:before {
  content: "\f7ae"; }

.fa-image:before {
  content: "\f03e"; }

.fa-images:before {
  content: "\f302"; }

.fa-imdb:before {
  content: "\f2d8"; }

.fa-inbox:before {
  content: "\f01c"; }

.fa-indent:before {
  content: "\f03c"; }

.fa-industry:before {
  content: "\f275"; }

.fa-infinity:before {
  content: "\f534"; }

.fa-info:before {
  content: "\f129"; }

.fa-info-circle:before {
  content: "\f05a"; }

.fa-innosoft:before {
  content: "\e080"; }

.fa-instagram:before {
  content: "\f16d"; }

.fa-instagram-square:before {
  content: "\e055"; }

.fa-instalod:before {
  content: "\e081"; }

.fa-intercom:before {
  content: "\f7af"; }

.fa-internet-explorer:before {
  content: "\f26b"; }

.fa-invision:before {
  content: "\f7b0"; }

.fa-ioxhost:before {
  content: "\f208"; }

.fa-italic:before {
  content: "\f033"; }

.fa-itch-io:before {
  content: "\f83a"; }

.fa-itunes:before {
  content: "\f3b4"; }

.fa-itunes-note:before {
  content: "\f3b5"; }

.fa-java:before {
  content: "\f4e4"; }

.fa-jedi:before {
  content: "\f669"; }

.fa-jedi-order:before {
  content: "\f50e"; }

.fa-jenkins:before {
  content: "\f3b6"; }

.fa-jira:before {
  content: "\f7b1"; }

.fa-joget:before {
  content: "\f3b7"; }

.fa-joint:before {
  content: "\f595"; }

.fa-joomla:before {
  content: "\f1aa"; }

.fa-journal-whills:before {
  content: "\f66a"; }

.fa-js:before {
  content: "\f3b8"; }

.fa-js-square:before {
  content: "\f3b9"; }

.fa-jsfiddle:before {
  content: "\f1cc"; }

.fa-kaaba:before {
  content: "\f66b"; }

.fa-kaggle:before {
  content: "\f5fa"; }

.fa-key:before {
  content: "\f084"; }

.fa-keybase:before {
  content: "\f4f5"; }

.fa-keyboard:before {
  content: "\f11c"; }

.fa-keycdn:before {
  content: "\f3ba"; }

.fa-khanda:before {
  content: "\f66d"; }

.fa-kickstarter:before {
  content: "\f3bb"; }

.fa-kickstarter-k:before {
  content: "\f3bc"; }

.fa-kiss:before {
  content: "\f596"; }

.fa-kiss-beam:before {
  content: "\f597"; }

.fa-kiss-wink-heart:before {
  content: "\f598"; }

.fa-kiwi-bird:before {
  content: "\f535"; }

.fa-korvue:before {
  content: "\f42f"; }

.fa-landmark:before {
  content: "\f66f"; }

.fa-language:before {
  content: "\f1ab"; }

.fa-laptop:before {
  content: "\f109"; }

.fa-laptop-code:before {
  content: "\f5fc"; }

.fa-laptop-house:before {
  content: "\e066"; }

.fa-laptop-medical:before {
  content: "\f812"; }

.fa-laravel:before {
  content: "\f3bd"; }

.fa-lastfm:before {
  content: "\f202"; }

.fa-lastfm-square:before {
  content: "\f203"; }

.fa-laugh:before {
  content: "\f599"; }

.fa-laugh-beam:before {
  content: "\f59a"; }

.fa-laugh-squint:before {
  content: "\f59b"; }

.fa-laugh-wink:before {
  content: "\f59c"; }

.fa-layer-group:before {
  content: "\f5fd"; }

.fa-leaf:before {
  content: "\f06c"; }

.fa-leanpub:before {
  content: "\f212"; }

.fa-lemon:before {
  content: "\f094"; }

.fa-less:before {
  content: "\f41d"; }

.fa-less-than:before {
  content: "\f536"; }

.fa-less-than-equal:before {
  content: "\f537"; }

.fa-level-down-alt:before {
  content: "\f3be"; }

.fa-level-up-alt:before {
  content: "\f3bf"; }

.fa-life-ring:before {
  content: "\f1cd"; }

.fa-lightbulb:before {
  content: "\f0eb"; }

.fa-line:before {
  content: "\f3c0"; }

.fa-link:before {
  content: "\f0c1"; }

.fa-linkedin:before {
  content: "\f08c"; }

.fa-linkedin-in:before {
  content: "\f0e1"; }

.fa-linode:before {
  content: "\f2b8"; }

.fa-linux:before {
  content: "\f17c"; }

.fa-lira-sign:before {
  content: "\f195"; }

.fa-list:before {
  content: "\f03a"; }

.fa-list-alt:before {
  content: "\f022"; }

.fa-list-ol:before {
  content: "\f0cb"; }

.fa-list-ul:before {
  content: "\f0ca"; }

.fa-location-arrow:before {
  content: "\f124"; }

.fa-lock:before {
  content: "\f023"; }

.fa-lock-open:before {
  content: "\f3c1"; }

.fa-long-arrow-alt-down:before {
  content: "\f309"; }

.fa-long-arrow-alt-left:before {
  content: "\f30a"; }

.fa-long-arrow-alt-right:before {
  content: "\f30b"; }

.fa-long-arrow-alt-up:before {
  content: "\f30c"; }

.fa-low-vision:before {
  content: "\f2a8"; }

.fa-luggage-cart:before {
  content: "\f59d"; }

.fa-lungs:before {
  content: "\f604"; }

.fa-lungs-virus:before {
  content: "\e067"; }

.fa-lyft:before {
  content: "\f3c3"; }

.fa-magento:before {
  content: "\f3c4"; }

.fa-magic:before {
  content: "\f0d0"; }

.fa-magnet:before {
  content: "\f076"; }

.fa-mail-bulk:before {
  content: "\f674"; }

.fa-mailchimp:before {
  content: "\f59e"; }

.fa-male:before {
  content: "\f183"; }

.fa-mandalorian:before {
  content: "\f50f"; }

.fa-map:before {
  content: "\f279"; }

.fa-map-marked:before {
  content: "\f59f"; }

.fa-map-marked-alt:before {
  content: "\f5a0"; }

.fa-map-marker:before {
  content: "\f041"; }

.fa-map-marker-alt:before {
  content: "\f3c5"; }

.fa-map-pin:before {
  content: "\f276"; }

.fa-map-signs:before {
  content: "\f277"; }

.fa-markdown:before {
  content: "\f60f"; }

.fa-marker:before {
  content: "\f5a1"; }

.fa-mars:before {
  content: "\f222"; }

.fa-mars-double:before {
  content: "\f227"; }

.fa-mars-stroke:before {
  content: "\f229"; }

.fa-mars-stroke-h:before {
  content: "\f22b"; }

.fa-mars-stroke-v:before {
  content: "\f22a"; }

.fa-mask:before {
  content: "\f6fa"; }

.fa-mastodon:before {
  content: "\f4f6"; }

.fa-maxcdn:before {
  content: "\f136"; }

.fa-mdb:before {
  content: "\f8ca"; }

.fa-medal:before {
  content: "\f5a2"; }

.fa-medapps:before {
  content: "\f3c6"; }

.fa-medium:before {
  content: "\f23a"; }

.fa-medium-m:before {
  content: "\f3c7"; }

.fa-medkit:before {
  content: "\f0fa"; }

.fa-medrt:before {
  content: "\f3c8"; }

.fa-meetup:before {
  content: "\f2e0"; }

.fa-megaport:before {
  content: "\f5a3"; }

.fa-meh:before {
  content: "\f11a"; }

.fa-meh-blank:before {
  content: "\f5a4"; }

.fa-meh-rolling-eyes:before {
  content: "\f5a5"; }

.fa-memory:before {
  content: "\f538"; }

.fa-mendeley:before {
  content: "\f7b3"; }

.fa-menorah:before {
  content: "\f676"; }

.fa-mercury:before {
  content: "\f223"; }

.fa-meteor:before {
  content: "\f753"; }

.fa-microblog:before {
  content: "\e01a"; }

.fa-microchip:before {
  content: "\f2db"; }

.fa-microphone:before {
  content: "\f130"; }

.fa-microphone-alt:before {
  content: "\f3c9"; }

.fa-microphone-alt-slash:before {
  content: "\f539"; }

.fa-microphone-slash:before {
  content: "\f131"; }

.fa-microscope:before {
  content: "\f610"; }

.fa-microsoft:before {
  content: "\f3ca"; }

.fa-minus:before {
  content: "\f068"; }

.fa-minus-circle:before {
  content: "\f056"; }

.fa-minus-square:before {
  content: "\f146"; }

.fa-mitten:before {
  content: "\f7b5"; }

.fa-mix:before {
  content: "\f3cb"; }

.fa-mixcloud:before {
  content: "\f289"; }

.fa-mixer:before {
  content: "\e056"; }

.fa-mizuni:before {
  content: "\f3cc"; }

.fa-mobile:before {
  content: "\f10b"; }

.fa-mobile-alt:before {
  content: "\f3cd"; }

.fa-modx:before {
  content: "\f285"; }

.fa-monero:before {
  content: "\f3d0"; }

.fa-money-bill:before {
  content: "\f0d6"; }

.fa-money-bill-alt:before {
  content: "\f3d1"; }

.fa-money-bill-wave:before {
  content: "\f53a"; }

.fa-money-bill-wave-alt:before {
  content: "\f53b"; }

.fa-money-check:before {
  content: "\f53c"; }

.fa-money-check-alt:before {
  content: "\f53d"; }

.fa-monument:before {
  content: "\f5a6"; }

.fa-moon:before {
  content: "\f186"; }

.fa-mortar-pestle:before {
  content: "\f5a7"; }

.fa-mosque:before {
  content: "\f678"; }

.fa-motorcycle:before {
  content: "\f21c"; }

.fa-mountain:before {
  content: "\f6fc"; }

.fa-mouse:before {
  content: "\f8cc"; }

.fa-mouse-pointer:before {
  content: "\f245"; }

.fa-mug-hot:before {
  content: "\f7b6"; }

.fa-music:before {
  content: "\f001"; }

.fa-napster:before {
  content: "\f3d2"; }

.fa-neos:before {
  content: "\f612"; }

.fa-network-wired:before {
  content: "\f6ff"; }

.fa-neuter:before {
  content: "\f22c"; }

.fa-newspaper:before {
  content: "\f1ea"; }

.fa-nimblr:before {
  content: "\f5a8"; }

.fa-node:before {
  content: "\f419"; }

.fa-node-js:before {
  content: "\f3d3"; }

.fa-not-equal:before {
  content: "\f53e"; }

.fa-notes-medical:before {
  content: "\f481"; }

.fa-npm:before {
  content: "\f3d4"; }

.fa-ns8:before {
  content: "\f3d5"; }

.fa-nutritionix:before {
  content: "\f3d6"; }

.fa-object-group:before {
  content: "\f247"; }

.fa-object-ungroup:before {
  content: "\f248"; }

.fa-octopus-deploy:before {
  content: "\e082"; }

.fa-odnoklassniki:before {
  content: "\f263"; }

.fa-odnoklassniki-square:before {
  content: "\f264"; }

.fa-oil-can:before {
  content: "\f613"; }

.fa-old-republic:before {
  content: "\f510"; }

.fa-om:before {
  content: "\f679"; }

.fa-opencart:before {
  content: "\f23d"; }

.fa-openid:before {
  content: "\f19b"; }

.fa-opera:before {
  content: "\f26a"; }

.fa-optin-monster:before {
  content: "\f23c"; }

.fa-orcid:before {
  content: "\f8d2"; }

.fa-osi:before {
  content: "\f41a"; }

.fa-otter:before {
  content: "\f700"; }

.fa-outdent:before {
  content: "\f03b"; }

.fa-page4:before {
  content: "\f3d7"; }

.fa-pagelines:before {
  content: "\f18c"; }

.fa-pager:before {
  content: "\f815"; }

.fa-paint-brush:before {
  content: "\f1fc"; }

.fa-paint-roller:before {
  content: "\f5aa"; }

.fa-palette:before {
  content: "\f53f"; }

.fa-palfed:before {
  content: "\f3d8"; }

.fa-pallet:before {
  content: "\f482"; }

.fa-paper-plane:before {
  content: "\f1d8"; }

.fa-paperclip:before {
  content: "\f0c6"; }

.fa-parachute-box:before {
  content: "\f4cd"; }

.fa-paragraph:before {
  content: "\f1dd"; }

.fa-parking:before {
  content: "\f540"; }

.fa-passport:before {
  content: "\f5ab"; }

.fa-pastafarianism:before {
  content: "\f67b"; }

.fa-paste:before {
  content: "\f0ea"; }

.fa-patreon:before {
  content: "\f3d9"; }

.fa-pause:before {
  content: "\f04c"; }

.fa-pause-circle:before {
  content: "\f28b"; }

.fa-paw:before {
  content: "\f1b0"; }

.fa-paypal:before {
  content: "\f1ed"; }

.fa-peace:before {
  content: "\f67c"; }

.fa-pen:before {
  content: "\f304"; }

.fa-pen-alt:before {
  content: "\f305"; }

.fa-pen-fancy:before {
  content: "\f5ac"; }

.fa-pen-nib:before {
  content: "\f5ad"; }

.fa-pen-square:before {
  content: "\f14b"; }

.fa-pencil-alt:before {
  content: "\f303"; }

.fa-pencil-ruler:before {
  content: "\f5ae"; }

.fa-penny-arcade:before {
  content: "\f704"; }

.fa-people-arrows:before {
  content: "\e068"; }

.fa-people-carry:before {
  content: "\f4ce"; }

.fa-pepper-hot:before {
  content: "\f816"; }

.fa-perbyte:before {
  content: "\e083"; }

.fa-percent:before {
  content: "\f295"; }

.fa-percentage:before {
  content: "\f541"; }

.fa-periscope:before {
  content: "\f3da"; }

.fa-person-booth:before {
  content: "\f756"; }

.fa-phabricator:before {
  content: "\f3db"; }

.fa-phoenix-framework:before {
  content: "\f3dc"; }

.fa-phoenix-squadron:before {
  content: "\f511"; }

.fa-phone:before {
  content: "\f095"; }

.fa-phone-alt:before {
  content: "\f879"; }

.fa-phone-slash:before {
  content: "\f3dd"; }

.fa-phone-square:before {
  content: "\f098"; }

.fa-phone-square-alt:before {
  content: "\f87b"; }

.fa-phone-volume:before {
  content: "\f2a0"; }

.fa-photo-video:before {
  content: "\f87c"; }

.fa-php:before {
  content: "\f457"; }

.fa-pied-piper:before {
  content: "\f2ae"; }

.fa-pied-piper-alt:before {
  content: "\f1a8"; }

.fa-pied-piper-hat:before {
  content: "\f4e5"; }

.fa-pied-piper-pp:before {
  content: "\f1a7"; }

.fa-pied-piper-square:before {
  content: "\e01e"; }

.fa-piggy-bank:before {
  content: "\f4d3"; }

.fa-pills:before {
  content: "\f484"; }

.fa-pinterest:before {
  content: "\f0d2"; }

.fa-pinterest-p:before {
  content: "\f231"; }

.fa-pinterest-square:before {
  content: "\f0d3"; }

.fa-pizza-slice:before {
  content: "\f818"; }

.fa-place-of-worship:before {
  content: "\f67f"; }

.fa-plane:before {
  content: "\f072"; }

.fa-plane-arrival:before {
  content: "\f5af"; }

.fa-plane-departure:before {
  content: "\f5b0"; }

.fa-plane-slash:before {
  content: "\e069"; }

.fa-play:before {
  content: "\f04b"; }

.fa-play-circle:before {
  content: "\f144"; }

.fa-playstation:before {
  content: "\f3df"; }

.fa-plug:before {
  content: "\f1e6"; }

.fa-plus:before {
  content: "\f067"; }

.fa-plus-circle:before {
  content: "\f055"; }

.fa-plus-square:before {
  content: "\f0fe"; }

.fa-podcast:before {
  content: "\f2ce"; }

.fa-poll:before {
  content: "\f681"; }

.fa-poll-h:before {
  content: "\f682"; }

.fa-poo:before {
  content: "\f2fe"; }

.fa-poo-storm:before {
  content: "\f75a"; }

.fa-poop:before {
  content: "\f619"; }

.fa-portrait:before {
  content: "\f3e0"; }

.fa-pound-sign:before {
  content: "\f154"; }

.fa-power-off:before {
  content: "\f011"; }

.fa-pray:before {
  content: "\f683"; }

.fa-praying-hands:before {
  content: "\f684"; }

.fa-prescription:before {
  content: "\f5b1"; }

.fa-prescription-bottle:before {
  content: "\f485"; }

.fa-prescription-bottle-alt:before {
  content: "\f486"; }

.fa-print:before {
  content: "\f02f"; }

.fa-procedures:before {
  content: "\f487"; }

.fa-product-hunt:before {
  content: "\f288"; }

.fa-project-diagram:before {
  content: "\f542"; }

.fa-pump-medical:before {
  content: "\e06a"; }

.fa-pump-soap:before {
  content: "\e06b"; }

.fa-pushed:before {
  content: "\f3e1"; }

.fa-puzzle-piece:before {
  content: "\f12e"; }

.fa-python:before {
  content: "\f3e2"; }

.fa-qq:before {
  content: "\f1d6"; }

.fa-qrcode:before {
  content: "\f029"; }

.fa-question:before {
  content: "\f128"; }

.fa-question-circle:before {
  content: "\f059"; }

.fa-quidditch:before {
  content: "\f458"; }

.fa-quinscape:before {
  content: "\f459"; }

.fa-quora:before {
  content: "\f2c4"; }

.fa-quote-left:before {
  content: "\f10d"; }

.fa-quote-right:before {
  content: "\f10e"; }

.fa-quran:before {
  content: "\f687"; }

.fa-r-project:before {
  content: "\f4f7"; }

.fa-radiation:before {
  content: "\f7b9"; }

.fa-radiation-alt:before {
  content: "\f7ba"; }

.fa-rainbow:before {
  content: "\f75b"; }

.fa-random:before {
  content: "\f074"; }

.fa-raspberry-pi:before {
  content: "\f7bb"; }

.fa-ravelry:before {
  content: "\f2d9"; }

.fa-react:before {
  content: "\f41b"; }

.fa-reacteurope:before {
  content: "\f75d"; }

.fa-readme:before {
  content: "\f4d5"; }

.fa-rebel:before {
  content: "\f1d0"; }

.fa-receipt:before {
  content: "\f543"; }

.fa-record-vinyl:before {
  content: "\f8d9"; }

.fa-recycle:before {
  content: "\f1b8"; }

.fa-red-river:before {
  content: "\f3e3"; }

.fa-reddit:before {
  content: "\f1a1"; }

.fa-reddit-alien:before {
  content: "\f281"; }

.fa-reddit-square:before {
  content: "\f1a2"; }

.fa-redhat:before {
  content: "\f7bc"; }

.fa-redo:before {
  content: "\f01e"; }

.fa-redo-alt:before {
  content: "\f2f9"; }

.fa-registered:before {
  content: "\f25d"; }

.fa-remove-format:before {
  content: "\f87d"; }

.fa-renren:before {
  content: "\f18b"; }

.fa-reply:before {
  content: "\f3e5"; }

.fa-reply-all:before {
  content: "\f122"; }

.fa-replyd:before {
  content: "\f3e6"; }

.fa-republican:before {
  content: "\f75e"; }

.fa-researchgate:before {
  content: "\f4f8"; }

.fa-resolving:before {
  content: "\f3e7"; }

.fa-restroom:before {
  content: "\f7bd"; }

.fa-retweet:before {
  content: "\f079"; }

.fa-rev:before {
  content: "\f5b2"; }

.fa-ribbon:before {
  content: "\f4d6"; }

.fa-ring:before {
  content: "\f70b"; }

.fa-road:before {
  content: "\f018"; }

.fa-robot:before {
  content: "\f544"; }

.fa-rocket:before {
  content: "\f135"; }

.fa-rocketchat:before {
  content: "\f3e8"; }

.fa-rockrms:before {
  content: "\f3e9"; }

.fa-route:before {
  content: "\f4d7"; }

.fa-rss:before {
  content: "\f09e"; }

.fa-rss-square:before {
  content: "\f143"; }

.fa-ruble-sign:before {
  content: "\f158"; }

.fa-ruler:before {
  content: "\f545"; }

.fa-ruler-combined:before {
  content: "\f546"; }

.fa-ruler-horizontal:before {
  content: "\f547"; }

.fa-ruler-vertical:before {
  content: "\f548"; }

.fa-running:before {
  content: "\f70c"; }

.fa-rupee-sign:before {
  content: "\f156"; }

.fa-rust:before {
  content: "\e07a"; }

.fa-sad-cry:before {
  content: "\f5b3"; }

.fa-sad-tear:before {
  content: "\f5b4"; }

.fa-safari:before {
  content: "\f267"; }

.fa-salesforce:before {
  content: "\f83b"; }

.fa-sass:before {
  content: "\f41e"; }

.fa-satellite:before {
  content: "\f7bf"; }

.fa-satellite-dish:before {
  content: "\f7c0"; }

.fa-save:before {
  content: "\f0c7"; }

.fa-schlix:before {
  content: "\f3ea"; }

.fa-school:before {
  content: "\f549"; }

.fa-screwdriver:before {
  content: "\f54a"; }

.fa-scribd:before {
  content: "\f28a"; }

.fa-scroll:before {
  content: "\f70e"; }

.fa-sd-card:before {
  content: "\f7c2"; }

.fa-search:before {
  content: "\f002"; }

.fa-search-dollar:before {
  content: "\f688"; }

.fa-search-location:before {
  content: "\f689"; }

.fa-search-minus:before {
  content: "\f010"; }

.fa-search-plus:before {
  content: "\f00e"; }

.fa-searchengin:before {
  content: "\f3eb"; }

.fa-seedling:before {
  content: "\f4d8"; }

.fa-sellcast:before {
  content: "\f2da"; }

.fa-sellsy:before {
  content: "\f213"; }

.fa-server:before {
  content: "\f233"; }

.fa-servicestack:before {
  content: "\f3ec"; }

.fa-shapes:before {
  content: "\f61f"; }

.fa-share:before {
  content: "\f064"; }

.fa-share-alt:before {
  content: "\f1e0"; }

.fa-share-alt-square:before {
  content: "\f1e1"; }

.fa-share-square:before {
  content: "\f14d"; }

.fa-shekel-sign:before {
  content: "\f20b"; }

.fa-shield-alt:before {
  content: "\f3ed"; }

.fa-shield-virus:before {
  content: "\e06c"; }

.fa-ship:before {
  content: "\f21a"; }

.fa-shipping-fast:before {
  content: "\f48b"; }

.fa-shirtsinbulk:before {
  content: "\f214"; }

.fa-shoe-prints:before {
  content: "\f54b"; }

.fa-shopify:before {
  content: "\e057"; }

.fa-shopping-bag:before {
  content: "\f290"; }

.fa-shopping-basket:before {
  content: "\f291"; }

.fa-shopping-cart:before {
  content: "\f07a"; }

.fa-shopware:before {
  content: "\f5b5"; }

.fa-shower:before {
  content: "\f2cc"; }

.fa-shuttle-van:before {
  content: "\f5b6"; }

.fa-sign:before {
  content: "\f4d9"; }

.fa-sign-in-alt:before {
  content: "\f2f6"; }

.fa-sign-language:before {
  content: "\f2a7"; }

.fa-sign-out-alt:before {
  content: "\f2f5"; }

.fa-signal:before {
  content: "\f012"; }

.fa-signature:before {
  content: "\f5b7"; }

.fa-sim-card:before {
  content: "\f7c4"; }

.fa-simplybuilt:before {
  content: "\f215"; }

.fa-sink:before {
  content: "\e06d"; }

.fa-sistrix:before {
  content: "\f3ee"; }

.fa-sitemap:before {
  content: "\f0e8"; }

.fa-sith:before {
  content: "\f512"; }

.fa-skating:before {
  content: "\f7c5"; }

.fa-sketch:before {
  content: "\f7c6"; }

.fa-skiing:before {
  content: "\f7c9"; }

.fa-skiing-nordic:before {
  content: "\f7ca"; }

.fa-skull:before {
  content: "\f54c"; }

.fa-skull-crossbones:before {
  content: "\f714"; }

.fa-skyatlas:before {
  content: "\f216"; }

.fa-skype:before {
  content: "\f17e"; }

.fa-slack:before {
  content: "\f198"; }

.fa-slack-hash:before {
  content: "\f3ef"; }

.fa-slash:before {
  content: "\f715"; }

.fa-sleigh:before {
  content: "\f7cc"; }

.fa-sliders-h:before {
  content: "\f1de"; }

.fa-slideshare:before {
  content: "\f1e7"; }

.fa-smile:before {
  content: "\f118"; }

.fa-smile-beam:before {
  content: "\f5b8"; }

.fa-smile-wink:before {
  content: "\f4da"; }

.fa-smog:before {
  content: "\f75f"; }

.fa-smoking:before {
  content: "\f48d"; }

.fa-smoking-ban:before {
  content: "\f54d"; }

.fa-sms:before {
  content: "\f7cd"; }

.fa-snapchat:before {
  content: "\f2ab"; }

.fa-snapchat-ghost:before {
  content: "\f2ac"; }

.fa-snapchat-square:before {
  content: "\f2ad"; }

.fa-snowboarding:before {
  content: "\f7ce"; }

.fa-snowflake:before {
  content: "\f2dc"; }

.fa-snowman:before {
  content: "\f7d0"; }

.fa-snowplow:before {
  content: "\f7d2"; }

.fa-soap:before {
  content: "\e06e"; }

.fa-socks:before {
  content: "\f696"; }

.fa-solar-panel:before {
  content: "\f5ba"; }

.fa-sort:before {
  content: "\f0dc"; }

.fa-sort-alpha-down:before {
  content: "\f15d"; }

.fa-sort-alpha-down-alt:before {
  content: "\f881"; }

.fa-sort-alpha-up:before {
  content: "\f15e"; }

.fa-sort-alpha-up-alt:before {
  content: "\f882"; }

.fa-sort-amount-down:before {
  content: "\f160"; }

.fa-sort-amount-down-alt:before {
  content: "\f884"; }

.fa-sort-amount-up:before {
  content: "\f161"; }

.fa-sort-amount-up-alt:before {
  content: "\f885"; }

.fa-sort-down:before {
  content: "\f0dd"; }

.fa-sort-numeric-down:before {
  content: "\f162"; }

.fa-sort-numeric-down-alt:before {
  content: "\f886"; }

.fa-sort-numeric-up:before {
  content: "\f163"; }

.fa-sort-numeric-up-alt:before {
  content: "\f887"; }

.fa-sort-up:before {
  content: "\f0de"; }

.fa-soundcloud:before {
  content: "\f1be"; }

.fa-sourcetree:before {
  content: "\f7d3"; }

.fa-spa:before {
  content: "\f5bb"; }

.fa-space-shuttle:before {
  content: "\f197"; }

.fa-speakap:before {
  content: "\f3f3"; }

.fa-speaker-deck:before {
  content: "\f83c"; }

.fa-spell-check:before {
  content: "\f891"; }

.fa-spider:before {
  content: "\f717"; }

.fa-spinner:before {
  content: "\f110"; }

.fa-splotch:before {
  content: "\f5bc"; }

.fa-spotify:before {
  content: "\f1bc"; }

.fa-spray-can:before {
  content: "\f5bd"; }

.fa-square:before {
  content: "\f0c8"; }

.fa-square-full:before {
  content: "\f45c"; }

.fa-square-root-alt:before {
  content: "\f698"; }

.fa-squarespace:before {
  content: "\f5be"; }

.fa-stack-exchange:before {
  content: "\f18d"; }

.fa-stack-overflow:before {
  content: "\f16c"; }

.fa-stackpath:before {
  content: "\f842"; }

.fa-stamp:before {
  content: "\f5bf"; }

.fa-star:before {
  content: "\f005"; }

.fa-star-and-crescent:before {
  content: "\f699"; }

.fa-star-half:before {
  content: "\f089"; }

.fa-star-half-alt:before {
  content: "\f5c0"; }

.fa-star-of-david:before {
  content: "\f69a"; }

.fa-star-of-life:before {
  content: "\f621"; }

.fa-staylinked:before {
  content: "\f3f5"; }

.fa-steam:before {
  content: "\f1b6"; }

.fa-steam-square:before {
  content: "\f1b7"; }

.fa-steam-symbol:before {
  content: "\f3f6"; }

.fa-step-backward:before {
  content: "\f048"; }

.fa-step-forward:before {
  content: "\f051"; }

.fa-stethoscope:before {
  content: "\f0f1"; }

.fa-sticker-mule:before {
  content: "\f3f7"; }

.fa-sticky-note:before {
  content: "\f249"; }

.fa-stop:before {
  content: "\f04d"; }

.fa-stop-circle:before {
  content: "\f28d"; }

.fa-stopwatch:before {
  content: "\f2f2"; }

.fa-stopwatch-20:before {
  content: "\e06f"; }

.fa-store:before {
  content: "\f54e"; }

.fa-store-alt:before {
  content: "\f54f"; }

.fa-store-alt-slash:before {
  content: "\e070"; }

.fa-store-slash:before {
  content: "\e071"; }

.fa-strava:before {
  content: "\f428"; }

.fa-stream:before {
  content: "\f550"; }

.fa-street-view:before {
  content: "\f21d"; }

.fa-strikethrough:before {
  content: "\f0cc"; }

.fa-stripe:before {
  content: "\f429"; }

.fa-stripe-s:before {
  content: "\f42a"; }

.fa-stroopwafel:before {
  content: "\f551"; }

.fa-studiovinari:before {
  content: "\f3f8"; }

.fa-stumbleupon:before {
  content: "\f1a4"; }

.fa-stumbleupon-circle:before {
  content: "\f1a3"; }

.fa-subscript:before {
  content: "\f12c"; }

.fa-subway:before {
  content: "\f239"; }

.fa-suitcase:before {
  content: "\f0f2"; }

.fa-suitcase-rolling:before {
  content: "\f5c1"; }

.fa-sun:before {
  content: "\f185"; }

.fa-superpowers:before {
  content: "\f2dd"; }

.fa-superscript:before {
  content: "\f12b"; }

.fa-supple:before {
  content: "\f3f9"; }

.fa-surprise:before {
  content: "\f5c2"; }

.fa-suse:before {
  content: "\f7d6"; }

.fa-swatchbook:before {
  content: "\f5c3"; }

.fa-swift:before {
  content: "\f8e1"; }

.fa-swimmer:before {
  content: "\f5c4"; }

.fa-swimming-pool:before {
  content: "\f5c5"; }

.fa-symfony:before {
  content: "\f83d"; }

.fa-synagogue:before {
  content: "\f69b"; }

.fa-sync:before {
  content: "\f021"; }

.fa-sync-alt:before {
  content: "\f2f1"; }

.fa-syringe:before {
  content: "\f48e"; }

.fa-table:before {
  content: "\f0ce"; }

.fa-table-tennis:before {
  content: "\f45d"; }

.fa-tablet:before {
  content: "\f10a"; }

.fa-tablet-alt:before {
  content: "\f3fa"; }

.fa-tablets:before {
  content: "\f490"; }

.fa-tachometer-alt:before {
  content: "\f3fd"; }

.fa-tag:before {
  content: "\f02b"; }

.fa-tags:before {
  content: "\f02c"; }

.fa-tape:before {
  content: "\f4db"; }

.fa-tasks:before {
  content: "\f0ae"; }

.fa-taxi:before {
  content: "\f1ba"; }

.fa-teamspeak:before {
  content: "\f4f9"; }

.fa-teeth:before {
  content: "\f62e"; }

.fa-teeth-open:before {
  content: "\f62f"; }

.fa-telegram:before {
  content: "\f2c6"; }

.fa-telegram-plane:before {
  content: "\f3fe"; }

.fa-temperature-high:before {
  content: "\f769"; }

.fa-temperature-low:before {
  content: "\f76b"; }

.fa-tencent-weibo:before {
  content: "\f1d5"; }

.fa-tenge:before {
  content: "\f7d7"; }

.fa-terminal:before {
  content: "\f120"; }

.fa-text-height:before {
  content: "\f034"; }

.fa-text-width:before {
  content: "\f035"; }

.fa-th:before {
  content: "\f00a"; }

.fa-th-large:before {
  content: "\f009"; }

.fa-th-list:before {
  content: "\f00b"; }

.fa-the-red-yeti:before {
  content: "\f69d"; }

.fa-theater-masks:before {
  content: "\f630"; }

.fa-themeco:before {
  content: "\f5c6"; }

.fa-themeisle:before {
  content: "\f2b2"; }

.fa-thermometer:before {
  content: "\f491"; }

.fa-thermometer-empty:before {
  content: "\f2cb"; }

.fa-thermometer-full:before {
  content: "\f2c7"; }

.fa-thermometer-half:before {
  content: "\f2c9"; }

.fa-thermometer-quarter:before {
  content: "\f2ca"; }

.fa-thermometer-three-quarters:before {
  content: "\f2c8"; }

.fa-think-peaks:before {
  content: "\f731"; }

.fa-thumbs-down:before {
  content: "\f165"; }

.fa-thumbs-up:before {
  content: "\f164"; }

.fa-thumbtack:before {
  content: "\f08d"; }

.fa-ticket-alt:before {
  content: "\f3ff"; }

.fa-tiktok:before {
  content: "\e07b"; }

.fa-times:before {
  content: "\f00d"; }

.fa-times-circle:before {
  content: "\f057"; }

.fa-tint:before {
  content: "\f043"; }

.fa-tint-slash:before {
  content: "\f5c7"; }

.fa-tired:before {
  content: "\f5c8"; }

.fa-toggle-off:before {
  content: "\f204"; }

.fa-toggle-on:before {
  content: "\f205"; }

.fa-toilet:before {
  content: "\f7d8"; }

.fa-toilet-paper:before {
  content: "\f71e"; }

.fa-toilet-paper-slash:before {
  content: "\e072"; }

.fa-toolbox:before {
  content: "\f552"; }

.fa-tools:before {
  content: "\f7d9"; }

.fa-tooth:before {
  content: "\f5c9"; }

.fa-torah:before {
  content: "\f6a0"; }

.fa-torii-gate:before {
  content: "\f6a1"; }

.fa-tractor:before {
  content: "\f722"; }

.fa-trade-federation:before {
  content: "\f513"; }

.fa-trademark:before {
  content: "\f25c"; }

.fa-traffic-light:before {
  content: "\f637"; }

.fa-trailer:before {
  content: "\e041"; }

.fa-train:before {
  content: "\f238"; }

.fa-tram:before {
  content: "\f7da"; }

.fa-transgender:before {
  content: "\f224"; }

.fa-transgender-alt:before {
  content: "\f225"; }

.fa-trash:before {
  content: "\f1f8"; }

.fa-trash-alt:before {
  content: "\f2ed"; }

.fa-trash-restore:before {
  content: "\f829"; }

.fa-trash-restore-alt:before {
  content: "\f82a"; }

.fa-tree:before {
  content: "\f1bb"; }

.fa-trello:before {
  content: "\f181"; }

.fa-trophy:before {
  content: "\f091"; }

.fa-truck:before {
  content: "\f0d1"; }

.fa-truck-loading:before {
  content: "\f4de"; }

.fa-truck-monster:before {
  content: "\f63b"; }

.fa-truck-moving:before {
  content: "\f4df"; }

.fa-truck-pickup:before {
  content: "\f63c"; }

.fa-tshirt:before {
  content: "\f553"; }

.fa-tty:before {
  content: "\f1e4"; }

.fa-tumblr:before {
  content: "\f173"; }

.fa-tumblr-square:before {
  content: "\f174"; }

.fa-tv:before {
  content: "\f26c"; }

.fa-twitch:before {
  content: "\f1e8"; }

.fa-twitter:before {
  content: "\f099"; }

.fa-twitter-square:before {
  content: "\f081"; }

.fa-typo3:before {
  content: "\f42b"; }

.fa-uber:before {
  content: "\f402"; }

.fa-ubuntu:before {
  content: "\f7df"; }

.fa-uikit:before {
  content: "\f403"; }

.fa-umbraco:before {
  content: "\f8e8"; }

.fa-umbrella:before {
  content: "\f0e9"; }

.fa-umbrella-beach:before {
  content: "\f5ca"; }

.fa-uncharted:before {
  content: "\e084"; }

.fa-underline:before {
  content: "\f0cd"; }

.fa-undo:before {
  content: "\f0e2"; }

.fa-undo-alt:before {
  content: "\f2ea"; }

.fa-uniregistry:before {
  content: "\f404"; }

.fa-unity:before {
  content: "\e049"; }

.fa-universal-access:before {
  content: "\f29a"; }

.fa-university:before {
  content: "\f19c"; }

.fa-unlink:before {
  content: "\f127"; }

.fa-unlock:before {
  content: "\f09c"; }

.fa-unlock-alt:before {
  content: "\f13e"; }

.fa-unsplash:before {
  content: "\e07c"; }

.fa-untappd:before {
  content: "\f405"; }

.fa-upload:before {
  content: "\f093"; }

.fa-ups:before {
  content: "\f7e0"; }

.fa-usb:before {
  content: "\f287"; }

.fa-user:before {
  content: "\f007"; }

.fa-user-alt:before {
  content: "\f406"; }

.fa-user-alt-slash:before {
  content: "\f4fa"; }

.fa-user-astronaut:before {
  content: "\f4fb"; }

.fa-user-check:before {
  content: "\f4fc"; }

.fa-user-circle:before {
  content: "\f2bd"; }

.fa-user-clock:before {
  content: "\f4fd"; }

.fa-user-cog:before {
  content: "\f4fe"; }

.fa-user-edit:before {
  content: "\f4ff"; }

.fa-user-friends:before {
  content: "\f500"; }

.fa-user-graduate:before {
  content: "\f501"; }

.fa-user-injured:before {
  content: "\f728"; }

.fa-user-lock:before {
  content: "\f502"; }

.fa-user-md:before {
  content: "\f0f0"; }

.fa-user-minus:before {
  content: "\f503"; }

.fa-user-ninja:before {
  content: "\f504"; }

.fa-user-nurse:before {
  content: "\f82f"; }

.fa-user-plus:before {
  content: "\f234"; }

.fa-user-secret:before {
  content: "\f21b"; }

.fa-user-shield:before {
  content: "\f505"; }

.fa-user-slash:before {
  content: "\f506"; }

.fa-user-tag:before {
  content: "\f507"; }

.fa-user-tie:before {
  content: "\f508"; }

.fa-user-times:before {
  content: "\f235"; }

.fa-users:before {
  content: "\f0c0"; }

.fa-users-cog:before {
  content: "\f509"; }

.fa-users-slash:before {
  content: "\e073"; }

.fa-usps:before {
  content: "\f7e1"; }

.fa-ussunnah:before {
  content: "\f407"; }

.fa-utensil-spoon:before {
  content: "\f2e5"; }

.fa-utensils:before {
  content: "\f2e7"; }

.fa-vaadin:before {
  content: "\f408"; }

.fa-vector-square:before {
  content: "\f5cb"; }

.fa-venus:before {
  content: "\f221"; }

.fa-venus-double:before {
  content: "\f226"; }

.fa-venus-mars:before {
  content: "\f228"; }

.fa-vest:before {
  content: "\e085"; }

.fa-vest-patches:before {
  content: "\e086"; }

.fa-viacoin:before {
  content: "\f237"; }

.fa-viadeo:before {
  content: "\f2a9"; }

.fa-viadeo-square:before {
  content: "\f2aa"; }

.fa-vial:before {
  content: "\f492"; }

.fa-vials:before {
  content: "\f493"; }

.fa-viber:before {
  content: "\f409"; }

.fa-video:before {
  content: "\f03d"; }

.fa-video-slash:before {
  content: "\f4e2"; }

.fa-vihara:before {
  content: "\f6a7"; }

.fa-vimeo:before {
  content: "\f40a"; }

.fa-vimeo-square:before {
  content: "\f194"; }

.fa-vimeo-v:before {
  content: "\f27d"; }

.fa-vine:before {
  content: "\f1ca"; }

.fa-virus:before {
  content: "\e074"; }

.fa-virus-slash:before {
  content: "\e075"; }

.fa-viruses:before {
  content: "\e076"; }

.fa-vk:before {
  content: "\f189"; }

.fa-vnv:before {
  content: "\f40b"; }

.fa-voicemail:before {
  content: "\f897"; }

.fa-volleyball-ball:before {
  content: "\f45f"; }

.fa-volume-down:before {
  content: "\f027"; }

.fa-volume-mute:before {
  content: "\f6a9"; }

.fa-volume-off:before {
  content: "\f026"; }

.fa-volume-up:before {
  content: "\f028"; }

.fa-vote-yea:before {
  content: "\f772"; }

.fa-vr-cardboard:before {
  content: "\f729"; }

.fa-vuejs:before {
  content: "\f41f"; }

.fa-walking:before {
  content: "\f554"; }

.fa-wallet:before {
  content: "\f555"; }

.fa-warehouse:before {
  content: "\f494"; }

.fa-watchman-monitoring:before {
  content: "\e087"; }

.fa-water:before {
  content: "\f773"; }

.fa-wave-square:before {
  content: "\f83e"; }

.fa-waze:before {
  content: "\f83f"; }

.fa-weebly:before {
  content: "\f5cc"; }

.fa-weibo:before {
  content: "\f18a"; }

.fa-weight:before {
  content: "\f496"; }

.fa-weight-hanging:before {
  content: "\f5cd"; }

.fa-weixin:before {
  content: "\f1d7"; }

.fa-whatsapp:before {
  content: "\f232"; }

.fa-whatsapp-square:before {
  content: "\f40c"; }

.fa-wheelchair:before {
  content: "\f193"; }

.fa-whmcs:before {
  content: "\f40d"; }

.fa-wifi:before {
  content: "\f1eb"; }

.fa-wikipedia-w:before {
  content: "\f266"; }

.fa-wind:before {
  content: "\f72e"; }

.fa-window-close:before {
  content: "\f410"; }

.fa-window-maximize:before {
  content: "\f2d0"; }

.fa-window-minimize:before {
  content: "\f2d1"; }

.fa-window-restore:before {
  content: "\f2d2"; }

.fa-windows:before {
  content: "\f17a"; }

.fa-wine-bottle:before {
  content: "\f72f"; }

.fa-wine-glass:before {
  content: "\f4e3"; }

.fa-wine-glass-alt:before {
  content: "\f5ce"; }

.fa-wix:before {
  content: "\f5cf"; }

.fa-wizards-of-the-coast:before {
  content: "\f730"; }

.fa-wodu:before {
  content: "\e088"; }

.fa-wolf-pack-battalion:before {
  content: "\f514"; }

.fa-won-sign:before {
  content: "\f159"; }

.fa-wordpress:before {
  content: "\f19a"; }

.fa-wordpress-simple:before {
  content: "\f411"; }

.fa-wpbeginner:before {
  content: "\f297"; }

.fa-wpexplorer:before {
  content: "\f2de"; }

.fa-wpforms:before {
  content: "\f298"; }

.fa-wpressr:before {
  content: "\f3e4"; }

.fa-wrench:before {
  content: "\f0ad"; }

.fa-x-ray:before {
  content: "\f497"; }

.fa-xbox:before {
  content: "\f412"; }

.fa-xing:before {
  content: "\f168"; }

.fa-xing-square:before {
  content: "\f169"; }

.fa-y-combinator:before {
  content: "\f23b"; }

.fa-yahoo:before {
  content: "\f19e"; }

.fa-yammer:before {
  content: "\f840"; }

.fa-yandex:before {
  content: "\f413"; }

.fa-yandex-international:before {
  content: "\f414"; }

.fa-yarn:before {
  content: "\f7e3"; }

.fa-yelp:before {
  content: "\f1e9"; }

.fa-yen-sign:before {
  content: "\f157"; }

.fa-yin-yang:before {
  content: "\f6ad"; }

.fa-yoast:before {
  content: "\f2b1"; }

.fa-youtube:before {
  content: "\f167"; }

.fa-youtube-square:before {
  content: "\f431"; }

.fa-zhihu:before {
  content: "\f63f"; }

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.single-album .sr-container,
.single-album #comments,
.single-sr_playlist .sr-container,
.single-sr_playlist #comments,
.sr_taxonomy-show .sr-container,
.sr_taxonomy-show #comments {
  max-width: 1000px;
  margin: auto; }

.single-album .iron-audioplayer,
.single-sr_playlist .iron-audioplayer {
  margin: auto;
  margin-top: 70px;
  margin-bottom: 30px;
  width: 100%; }

.iron_widget_radio:not(.srp_inline) {
  width: 100% !important; }

.iron_widget_radio.srp_inline {
  display: inline-block; }

article div.iron-audioplayer a:not(.tracklist-item-title),
.iron-audioplayer li {
  text-decoration: none !important;
  box-shadow: none;
  border: none; }

article div.iron-audioplayer a:not(.tracklist-item-title):hover {
  text-decoration: none !important;
  box-shadow: none;
  border: none; }

article div.iron-audioplayer ul li,
article div.iron-audioplayer ol li {
  border: none; }

.woocommerce .iron-audioplayer .album-player {
  padding: 0px; }

.iron-audioplayer {
  transition: 0.2s ease;
  justify-content: center;
  align-items: stretch;
  flex-flow: row wrap;
  box-sizing: border-box; }
  .iron-audioplayer ul li::before {
    display: none; }
  .iron-audioplayer.srp-hide-track-time .tracklist-item-time {
    display: none; }
  .iron-audioplayer .playlist,
  .iron-audioplayer .srp_note {
    box-sizing: border-box; }
  .vc_col-sm-6 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-sm-4 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-sm-2 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-sm-3 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-md-6 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-md-4 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-md-2 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-md-3 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-lg-6 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-lg-4 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-lg-2 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .vc_col-lg-3 .iron-audioplayer .vc_col-md-6 {
    width: 100%; }
  .iron-audioplayer .sr_it-playlist-title {
    font-size: 2em;
    margin: 0px; }
  .iron-audioplayer .sr-playlist-item:hover {
    -webkit-transform: scale(var(--srp-trackhover-scale)) translateX(var(--srp-trackhover-translateX, 0)) translateY(var(--srp-trackhover-translateY, 0));
    transform: scale(var(--srp-trackhover-scale)) translateX(var(--srp-trackhover-translateX, 0)) translateY(var(--srp-trackhover-translateY, 0));
    z-index: 2; }
  .iron-audioplayer .sr-playlist-item[data-relatedtrack="1"], .iron-audioplayer .sr-playlist-item[data-relatedtrack="true"] {
    display: none !important; }
  .iron-audioplayer .album {
    max-width: 450px; }
    @media (max-width: 600px) {
      .iron-audioplayer .album {
        max-width: 100%; } }
    .iron-audioplayer .album .album-art {
      cursor: pointer;
      max-width: 450px;
      margin: 0px auto;
      background-size: cover; }
      .iron-audioplayer .album .album-art img {
        display: block;
        width: 100%; }
      @media (max-width: 600px) {
        .iron-audioplayer .album .album-art {
          max-width: 100%; } }
  .iron-audioplayer .srp_miniplayer_metas {
    text-align: center; }
  .iron-audioplayer .player {
    width: 100%;
    position: relative;
    font-size: 12px; }
    .iron-audioplayer .player.hide .currentTime,
    .iron-audioplayer .player.hide .wave,
    .iron-audioplayer .player.hide .totalTime {
      opacity: 0 !important; }
    .iron-audioplayer .player .sr_progressbar {
      display: flex;
      column-gap: 10px;
      align-items: center;
      white-space: nowrap;
      font-variant-numeric: tabular-nums; }
    .iron-audioplayer .player.sr_player__inline {
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex; }
      .iron-audioplayer .player.sr_player__inline .sr_progressbar {
        margin-left: 10px;
        order: 2;
        flex-grow: 1;
        width: 75px; }
        .iron-audioplayer .player.sr_player__inline .sr_progressbar .currentTime {
          margin-right: 5px; }
        .iron-audioplayer .player.sr_player__inline .sr_progressbar .totalTime {
          margin-left: 5px; }
        @media screen and (max-width: 480px) {
          .iron-audioplayer .player.sr_player__inline .sr_progressbar {
            margin-left: 0px; } }
        .iron-audioplayer .player.sr_player__inline .sr_progressbar .wave {
          margin: 10px 0; }
      .iron-audioplayer .player.sr_player__inline .control {
        width: initial;
        column-gap: 12px; }
        .iron-audioplayer .player.sr_player__inline .control .previous {
          margin-right: 4px !important; }
    .iron-audioplayer .player .progressLoading {
      background: rgba(0, 0, 0, 0.25);
      width: 0%;
      height: 1px;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
      width: calc(100% - 200px);
      position: absolute;
      opacity: 0;
      left: 120px;
      top: 35px;
      transition: opacity 3000ms ease; }
    .iron-audioplayer .player .totalTime {
      opacity: 0.6; }
    .iron-audioplayer .player .currentTime {
      opacity: 0.6; }
    .iron-audioplayer .player .reveal.wave {
      opacity: 1;
      transition: all 3800ms ease-in; }
    .iron-audioplayer .player .wave {
      opacity: 0;
      width: 100%;
      flex-grow: 1;
      transition: 0ms; }
  .iron-audioplayer .control {
    z-index: 1;
    align-items: center;
    display: flex;
    column-gap: 22px;
    font-size: initial;
    line-height: initial; }
    .iron-audioplayer .control .play {
      opacity: 1 !important;
      cursor: pointer;
      background: unset; }
    .iron-audioplayer .control .previous {
      opacity: 1 !important;
      width: 16px;
      height: 21.3px;
      cursor: pointer; }
    .iron-audioplayer .control .next {
      right: 3px;
      opacity: 1 !important;
      width: 16px;
      height: 21.3px;
      cursor: pointer; }
    .iron-audioplayer .control .sricon-shuffle, .iron-audioplayer .control .sricon-volume, .iron-audioplayer .control .sricon-back, .iron-audioplayer .control .sricon-forward, .iron-audioplayer .control .srp_repeat {
      font-size: 18px;
      line-height: 1; }
    .iron-audioplayer .control [class*="sricon-"]:before {
      margin-left: 0;
      margin-right: 0; }
    .iron-audioplayer .control .song-store-list-container {
      flex-wrap: wrap;
      row-gap: 5px; }
  @media (min-width: 768px) {
    .iron-audioplayer .srp_show_ctr_hover .control {
      opacity: 0;
      transition: opacity .15s ease-in-out, transform .15s ease-in-out;
      transform: translateY(15%); }
    .iron-audioplayer .srp_show_ctr_hover .album-art {
      position: relative; }
      .iron-audioplayer .srp_show_ctr_hover .album-art:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        background: #6666667a;
        opacity: 0;
        transition: opacity .15s ease-in-out; }
    .iron-audioplayer .srp_show_ctr_hover:hover .album-art:before {
      opacity: 1; }
    .iron-audioplayer .srp_show_ctr_hover:hover .control {
      opacity: 1;
      transform: unset; }
    .iron-audioplayer.audio-playing .srp_show_ctr_hover .control {
      opacity: 1;
      transform: unset; } }
  .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_main_control {
    display: flex;
    justify-content: space-between; }
    .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_main_control .control {
      flex-wrap: wrap;
      row-gap: 10px; }
  .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .playlist .srp_tracklist {
    margin: 25px 0; }
  @media (min-width: 768px) {
    .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .sr_player__inline .srp_main_control {
      grid-template-columns: 0fr auto auto; } }
  .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px; }
    @media (min-width: 768px) {
      .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control {
        grid-template-columns: 1fr 1fr 1fr; } }
    @media screen and (max-width: 767px) {
      .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control.srp_oneColumn {
        grid-template-columns: 1fr; }
        .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control.srp_oneColumn .control {
          justify-content: center !important; } }
    .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control .control {
      margin: initial;
      width: 100%; }
    .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control .control:first-child {
      justify-content: flex-start; }
      @media (min-width: 768px) {
        .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .srp_main_control .control:first-child {
          grid-column-start: 2;
          justify-content: center; } }
  .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .player:not(.sr_player__inline) .sr_progressbar {
    justify-content: center; }
  .iron-audioplayer .player:not(.sr_player__inline) .control:last-child {
    justify-content: flex-end; }
  .iron-audioplayer.show-playlist .playlist {
    display: block; }
  .iron-audioplayer .playlist {
    display: none;
    position: relative;
    width: 450px;
    min-width: 0;
    max-width: 100%;
    overflow: visible; }
    .iron-audioplayer .playlist .srp_track_description {
      margin-top: 6px; }
    .iron-audioplayer .playlist a.button {
      opacity: 1;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 11px;
      padding: 1px 6px;
      margin: 0;
      border-radius: 3px; }
    .iron-audioplayer .playlist .srp_tracklist {
      position: relative; }
    .iron-audioplayer .playlist ul {
      margin: 0px;
      min-width: 0;
      padding: 0 0; }
    .iron-audioplayer .playlist .sr-playlist-item-flex {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      column-gap: 12px; }
    .iron-audioplayer .playlist li {
      transition: all 150ms;
      list-style: none;
      position: relative;
      clear: both;
      padding: 8px 0; }
      .iron-audioplayer .playlist li .button {
        float: right;
        width: auto;
        display: table-cell; }
      .iron-audioplayer .playlist li .sr_track_cover {
        width: 45px;
        min-width: 45px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; }
        .iron-audioplayer .playlist li .sr_track_cover img {
          width: 100%; }
        .iron-audioplayer .playlist li .sr_track_cover .srp_play {
          position: absolute; }
    .iron-audioplayer .playlist .current {
      background-size: 10px 13px;
      -webkit-transform: scale(var(--srp-trackactive-scale)) translateX(var(--srp-trackactive-translateX, 0)) translateY(var(--srp-trackactive-translateY, 0));
      transform: scale(var(--srp-trackactive-scale)) translateX(var(--srp-trackactive-translateX, 0)) translateY(var(--srp-trackactive-translateY, 0));
      z-index: 3; }
    @media (max-width: 991px) {
      .iron-audioplayer .playlist {
        padding-left: 0px; } }
    .iron-audioplayer .playlist .audio-track {
      display: flex;
      flex: 1 1 auto;
      cursor: pointer;
      font-size: 16px;
      position: relative;
      align-items: center;
      z-index: 30;
      min-width: 0; }
    .iron-audioplayer .playlist .track-number {
      font-size: 16px;
      height: 100%;
      padding-left: 20px;
      white-space: nowrap;
      align-items: center; }
      .iron-audioplayer .playlist .track-number .number {
        padding-right: 10px; }
    .iron-audioplayer .playlist .store-list {
      flex: 0 0 0px;
      display: flex;
      justify-content: flex-end;
      z-index: 50;
      position: relative; }
      .iron-audioplayer .playlist .store-list .song-store-list-menu {
        width: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row-reverse;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        position: relative;
        font-size: 16px; }
        .iron-audioplayer .playlist .store-list .song-store-list-menu .fa-ellipsis-v {
          pointer-events: none;
          position: relative;
          z-index: 20;
          font-size: 16px; }
        .iron-audioplayer .playlist .store-list .song-store-list-menu .song-store-list-container {
          background: #fff;
          height: auto;
          opacity: 0;
          position: absolute;
          right: 10px;
          padding: 0 5px;
          z-index: 40;
          padding: 3px;
          pointer-events: none; }
          .iron-audioplayer .playlist .store-list .song-store-list-menu .song-store-list-container.srp_cta_ready {
            pointer-events: initial; }
          .iron-audioplayer .playlist .store-list .song-store-list-menu .song-store-list-container:after {
            content: "";
            width: 15px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(100%); }
          .sr_track_inline_cta_bt__yes .iron-audioplayer .playlist .store-list .song-store-list-menu .song-store-list-container {
            pointer-events: initial;
            z-index: 40;
            transition: opacity 0.5s; }
            .sr_track_inline_cta_bt__yes .iron-audioplayer .playlist .store-list .song-store-list-menu .song-store-list-container:after {
              display: none; }
        .iron-audioplayer .playlist .store-list .song-store-list-menu:hover .fa-ellipsis-v {
          z-index: 50; }
      .iron-audioplayer .playlist .store-list a.song-store:focus {
        outline: unset; }
      .iron-audioplayer .playlist .store-list .song-store {
        display: flex;
        align-items: center;
        text-align: center;
        text-align: center; }
        .iron-audioplayer .playlist .store-list .song-store .fab,
        .iron-audioplayer .playlist .store-list .song-store .fas {
          font-size: 16px;
          width: auto; }
  .iron-audioplayer .song-store-list-container {
    display: flex;
    align-items: center; }
    .iron-audioplayer .song-store-list-container .song-store {
      white-space: nowrap; }
      .iron-audioplayer .song-store-list-container .song-store[href=""] {
        pointer-events: none; }
  .iron-audioplayer .song-store-list-container, .iron-audioplayer .playlist .store-list {
    column-gap: 10px; }
  .iron-audioplayer .sr_store_wc_round_bt {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 3px;
    font-size: 11px;
    line-height: 1em;
    font-weight: 400;
    text-transform: uppercase;
    padding: 4px 5px;
    border-radius: 4px; }
    .iron-audioplayer .sr_store_wc_round_bt .fab,
    .iron-audioplayer .sr_store_wc_round_bt .fas, .iron-audioplayer .sr_store_wc_round_bt i {
      font-size: inherit !important; }
    .iron-audioplayer .sr_store_wc_round_bt:hover {
      filter: brightness(0.75);
      transition: 200ms ease; }
  .iron-audioplayer .album-store {
    position: relative;
    z-index: 2;
    width: 100%; }
    .iron-audioplayer .album-store i {
      margin-right: 2px; }
  .iron-audioplayer .album-player {
    padding: 22px;
    flex: 0 1 900px;
    margin-top: 0px; }
    @media only screen and (max-width: 991px) {
      .iron-audioplayer .album-player {
        padding: 16px; } }
  .iron-audioplayer:not(.show-playlist) .buttons-block {
    text-align: center; }
  .iron-audioplayer:not(.show-playlist) .ctnButton-block li {
    float: none;
    display: inline-block; }
  @media (max-width: 767px) {
    .iron-audioplayer:not(.srp_tracklist_grid) .srp_tracklist-item-date {
      position: absolute;
      left: 0;
      bottom: 0;
      transform: translateY(100%);
      line-height: 1;
      margin-left: 0 !important;
      padding-left: 20px;
      height: initial !important; }
    .iron-audioplayer:not(.srp_tracklist_grid) .sr-playlist-item[data-show-date="1"] .audio-track {
      margin-bottom: 12px; } }
  @media (min-width: 768px) {
    .iron-audioplayer .sr-playlist-item[data-show-date="1"] .audio-track {
      margin-bottom: 0 !important; } }
  .iron-audioplayer .tracklist-item-time,
  .iron-audioplayer .srp_tracklist-item-date {
    white-space: nowrap;
    font-size: 12px;
    margin-left: 10px;
    height: 100%;
    right: 5px; }
  .iron-audioplayer li[data-tracktime=""] .tracklist-item-time {
    display: none; }
  .iron-audioplayer li {
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: -1000px 0; }
  100% {
    background-position: 1000px 0; } }
  .iron-audioplayer.srp_tracklist_grid .srp_shimmer_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%; }
  .iron-audioplayer.srp_tracklist_grid .srp_shimmer_card {
    background: transparent;
    margin: 5px;
    flex-direction: column; }
  .iron-audioplayer.srp_tracklist_grid .srp_shimmer_row_el {
    background: var(--srp-global-tracklist-color);
    background-image: linear-gradient(89deg, var(--srp-global-tracklist-color) 0%, #edeef1 50%, var(--srp-global-tracklist-color) 100%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 5px; }
  .iron-audioplayer .srp_shimmer_container {
    width: 100%;
    padding: 15px; }
  .iron-audioplayer .srp_shimmer_row {
    display: flex;
    justify-content: flex-start;
    column-gap: 10px;
    align-items: center;
    flex-wrap: wrap; }
  .iron-audioplayer .srp_shimmer_row_el {
    display: block;
    height: 20px;
    opacity: 0.03;
    background: var(--srp-global-tracklist-color);
    background-image: linear-gradient(89deg, var(--srp-global-tracklist-color) 0%, #edeef1 50%, var(--srp-global-tracklist-color) 100%);
    background-size: 1000px 100%;
    animation: shimmer 2.2s infinite;
    margin: 5px 0;
    border-radius: 4px; }
  .iron-audioplayer .srp_shimmer_row_grid {
    display: flex;
    column-gap: 15px; }

.srp_hide_progressbar .sr_progressbar .wave {
  display: none; }

.srp_hide_progressbar[data-playertemplate="skin_float_tracklist"] .srp_main_control {
  margin-top: 18px; }

.srp_hide_progressbar[data-playertemplate="skin_boxed_tracklist"] .srp_control_box {
  margin-bottom: 12px; }

.sr_track_inline_cta_bt__yes .iron-audioplayer .playlist .store-list .song-store-list-menu .song-store-list-container {
  opacity: 1;
  right: 0px;
  background: none;
  position: relative;
  padding: 0px; }

.sr_track_inline_cta_bt__yes .iron-audioplayer .playlist .store-list .song-store-list-menu .fa-ellipsis-v {
  position: absolute;
  opacity: 0; }

.iron-audioplayer .sr_waveform_simplebar .player .wave {
  transform: scaleY(1); }

.sr_waveform_simplebar .sonaar_fake_wave {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 30px !important; }
  .sr_waveform_simplebar .sonaar_fake_wave .sonaar_wave_base {
    border-radius: 10px;
    height: 6px; }
  .sr_waveform_simplebar .sonaar_fake_wave .sonaar_wave_cut {
    border-radius: 10px;
    height: 6px; }

.sonaar_fake_wave {
  height: 70px;
  position: relative;
  display: flex;
  align-items: center; }
  .sonaar_fake_wave .sr_canvas_container {
    overflow: hidden; }
    .sonaar_fake_wave .sr_canvas_container svg {
      display: none; }
  .sonaar_fake_wave .sonaar_wave_base,
  .sonaar_fake_wave .sonaar_wave_cut {
    display: inherit;
    position: absolute;
    overflow: hidden; }
    .sonaar_fake_wave .sonaar_wave_base svg,
    .sonaar_fake_wave .sonaar_wave_cut svg {
      position: absolute;
      width: 100vw;
      top: 5px;
      left: 1px;
      max-width: initial; }
  .sonaar_fake_wave .sonaar_wave_base {
    width: 100%; }
  .sonaar_fake_wave .sonaar_wave_cut {
    width: 0;
    transition-duration: 0.5s; }
    .sonaar_fake_wave .sonaar_wave_cut rect {
      fill: #949494; }

.buttons-block {
  margin: 0px auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%; }
  .buttons-block .ctnButton-block {
    padding: 22px 0px; }
  .buttons-block .store-list li {
    margin: 5px 0px; }
  .buttons-block .available-now {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 5px; }
  .buttons-block ul.store-list {
    margin: 0px;
    padding-inline-start: 0px; }
  .buttons-block .store-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: inherit;
    justify-content: inherit;
    column-gap: 10px; }
    .buttons-block .store-list li {
      list-style: none; }
      .buttons-block .store-list li .button {
        color: inherit;
        font-size: inherit;
        border: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px 10px;
        border-radius: 3px;
        font-weight: 700; }
        .wp-core-ui .buttons-block .store-list li .button {
          background-color: inherit; }
    .buttons-block .store-list .fab {
      font-size: 13px;
      width: 17px;
      text-align: left;
      margin-right: 2px; }

.iron-audioplayer:not(.audio-playing) .sonaar-Artwort-box .control .play .sricon-play {
  margin-right: 0px; }

.iron-audioplayer:not(.audio-playing) .control .play .sricon-play {
  margin-left: 4px;
  margin-right: -4px; }

.iron-audioplayer .sr-playlist-item:not(.current) .sr_track_cover .srp_play .sricon-play {
  margin-left: 4px; }

.sr_waveform_mediaElement .player canvas {
  /*image-rendering: -moz-crisp-edges;
      image-rendering: -webkit-crisp-edges;
      image-rendering: pixelated;
      image-rendering: crisp-edges;*/ }

.iron-audioplayer canvas,
#sonaar-player .player canvas {
  max-width: initial !important; }

.iron-audioplayer .playlist .current path {
  opacity: 1; }

.iron-audioplayer .playlist .current rect {
  opacity: 0; }

.iron-audioplayer.audio-playing .playlist .current path {
  opacity: 0; }

.iron-audioplayer.audio-playing .playlist .current rect {
  opacity: 1; }

.iron-audioplayer.audio-playing .playlist .current .audio-track {
  font-weight: 700; }

.iron-audioplayer .sonaar_fake_wave {
  margin-top: 20px;
  margin-bottom: 20px;
  height: initial; }

.pjax.single-album .iron-audioplayer .control,
.pjax.single-album .iron-audioplayer .player {
  display: none; }

[data-audiopath=""] .audio-track {
  cursor: default; }

/*.iron-audioplayer{
	max-width: 1000px;
	margin: 0 auto;
	@media (max-width: 1440px){
		max-width:840px;
	}
}*/
.elementor-widget-music-player:not(.sr_playlist_below_artwork_auto) .iron-audioplayer .sonaar-Artwort-box {
  width: fit-content !important;
  width: -moz-fit-content !important; }

.elementor-widget-music-player.sr_playlist_below_artwork_auto .iron-audioplayer .sonaar-grid {
  align-items: center; }

.iron-audioplayer.audioplayer-size {
  max-width: 100%; }

.iron-audioplayer.show-playlist .playlist {
  max-width: 100%; }
  @media only screen and (max-width: 991px) {
    .iron-audioplayer.show-playlist .playlist {
      display: inline-block; } }

@media only screen and (max-width: 991px) {
  .iron-audioplayer .album-art {
    display: inline-block; } }

.iron-audioplayer.sr_player_on_artwork .sonaar-Artwort-box {
  display: flex;
  align-items: center;
  justify-content: center; }

.iron-audioplayer .sonaar-Artwort-box {
  position: relative;
  max-width: 100%;
  height: 100%;
  display: flex;
  width: fit-content;
  width: -moz-fit-content !important;
  justify-content: center; }
  .iron-audioplayer .sonaar-Artwort-box .control {
    position: absolute; }

.iron-audioplayer .sonaar-Artwort-box .control .play, .iron-audioplayer .sr_track_cover .srp_play, .iron-audioplayer .srp_swiper-control .srp_play {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 4px solid #fff; }
  .iron-audioplayer .sonaar-Artwort-box .control .play .sricon-play, .iron-audioplayer .sr_track_cover .srp_play .sricon-play, .iron-audioplayer .srp_swiper-control .srp_play .sricon-play {
    font-size: 25px; }
    .iron-audioplayer .sonaar-Artwort-box .control .play .sricon-play:before, .iron-audioplayer .sr_track_cover .srp_play .sricon-play:before, .iron-audioplayer .srp_swiper-control .srp_play .sricon-play:before {
      margin-left: 0;
      margin-right: 0; }

.iron-audioplayer .sr_track_cover .srp_play .sricon-play, .iron-audioplayer .srp_swiper-control .srp_play .sricon-play {
  color: #fff; }

.iron-audioplayer .srp-play-circle {
  width: 68px;
  height: 68px;
  border: 6px solid #000;
  border-radius: 50px; }

.iron-audioplayer .sricon-play {
  color: #000; }

.iron-audioplayer .sr_speedRate {
  font-size: 12px;
  line-height: 12px; }
  .iron-audioplayer .sr_speedRate div {
    background: unset;
    color: inherit;
    border: 2px solid #000;
    border-radius: 4px; }

.product.type-product .sonaar-grid {
  justify-content: center;
  grid-template-columns: auto !important;
  display: initial !important; }

.available-now {
  text-align: left; }

.ctnButton-block {
  display: flex;
  flex-direction: column;
  align-items: inherit; }

.elementor-widget-music-player .iron-audioplayer .sonaar-grid .album {
  padding: 0px; }

.iron-audioplayer .playlist .tracklist-item-title {
  width: -moz-available;
  /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;
  /* Mozilla-based browsers will ignore this. */
  width: fill-available;
  justify-content: space-between;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  flex: 1 1 auto; }

a.tracklist-item-title:hover {
  text-decoration: underline; }

.sonaar-no-artwork .sonaar-grid {
  grid-template-columns: auto auto;
  justify-content: center;
  width: 100%; }

.sonaar-no-artwork .sonaar-Artwort-box {
  display: none !important; }

.sr_playlist_below_artwork_auto .sonaar-grid {
  grid-row-gap: 15px; }

.single-album .sonaar-grid {
  padding: 30px; }
  @media only screen and (max-width: 991px) {
    .single-album .sonaar-grid {
      padding: 10px; } }

.sonaar-grid {
  justify-content: center;
  display: flex;
  grid-column-gap: 15px;
  grid-template-columns: auto 50%; }
  @media only screen and (max-width: 991px) {
    .sonaar-grid {
      flex-direction: column;
      align-items: center; } }

#playlist-list-id {
  display: none; }

.select2-container {
  max-width: 100%; }

.edit-post-sidebar input[type="search"]:focus {
  border: none;
  box-shadow: none; }

.sonaar_audioplayer_block_cover.sr_playlist_below_artwork_auto .iron-audioplayer .sonaar-grid {
  flex-direction: column;
  align-items: center; }

.sonaar_audioplayer_block_cover.sr_player_title_hide .sr_it-playlist-title,
.sonaar_audioplayer_block_cover.sr_player_track_num_hide .track-number .number,
.sonaar_audioplayer_block_cover.sr_player_time_hide .tracklist-item-time,
.sonaar_audioplayer_block_cover.sr_play_pause_bt_hide .sricon-play {
  display: none; }

.sonaar_audioplayer_block_cover.sr_player_subtitle_hide .srp_subtitle {
  display: none !important; }

.sonaar_audioplayer_block_cover.sr_play_pause_bt_hide .track-number {
  padding-left: 0 !important; }

.sonaar_audioplayer_block_cover.sr_player_track_num_hide .track-number {
  padding-right: 0; }

.iron-audioplayer[data-speedrate="1"] .sr_speedRate {
  opacity: 0.5; }

@media (max-width: 991px) {
  .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .playlist {
    margin-top: 20px; } }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"]:not(.srp_tracklist_grid) .playlist {
  padding: 20px; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .playlist {
  width: 100%; }
  @media (max-width: 767px) {
    .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .playlist {
      padding: 5px; } }
  .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .playlist ul {
    margin: 0; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .album-title {
  margin-bottom: 0px; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr-playlist-item {
  padding: 20px; }
  @media (max-width: 768px) {
    .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr-playlist-item {
      padding: 10px; } }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .control {
  column-gap: 15px; }

.album-player .srp_trackartist {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  text-transform: inherit !important; }

.iron-audioplayer .srp_player_boxed .album-player {
  padding: initial; }

@media (min-width: 768px) {
  .iron-audioplayer:not(.sonaar-no-artwork) .srp_player_grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 20px; } }

.iron_widget_radio:not(.srp_player_button) .srp_player_boxed .srp-play-button-label-container:not(.srp-elementor-animation):hover {
  transform: scale(108%); }

.srp_player_boxed {
  background: #4c4c4c;
  position: relative;
  padding: 22px; }
  @media (max-width: 767px) {
    .srp_player_boxed {
      padding: 10px; } }
  @media (min-width: 768px) {
    .srp_player_boxed .album-art {
      width: 160px; } }
  @media (max-width: 767px) {
    .srp_player_boxed .album-art {
      max-width: 100% !important; } }
  .srp_player_boxed .track-title,
  .srp_player_boxed .album-title {
    font-size: 28px;
    line-height: 1; }
  .srp_player_boxed .srp_miniplayer_metas {
    text-align: left; }
  .srp_player_boxed .srp_track_cta .song-store-list-container {
    /*
      a{
        color: inherit;
        background: #000;
        font-weight: 600;
        font-size: 12px;
        border-radius: 10px;
        padding: 3px 7px;
        
        &+a{
          margin-left: 5px;
        }
        i{
          font-size: inherit !important;
          margin-right: 5px;
        }
      }
      */ }
  .srp_player_boxed .sonaar-Artwort-box {
    margin-bottom: 0px;
    height: auto; }
    @media (max-width: 767px) {
      .srp_player_boxed .sonaar-Artwort-box {
        min-width: 100% !important; } }
  .srp_player_boxed .srp-play-button {
    max-width: 100%;
    cursor: pointer;
    position: relative; }
    .srp_player_boxed .srp-play-button svg {
      display: block; }
    .srp_player_boxed .srp-play-button.sricon-play {
      display: flex;
      align-items: center;
      width: fit-content; }
  .srp_player_boxed .srp-play-button-label,
  .srp_player_boxed .srp-pause-button-label {
    width: max-content; }
  .srp_player_boxed .srp-play-button-label-container {
    text-align: center;
    transition: 150ms;
    padding: 7px 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    border-radius: 25px; }
    .srp_player_boxed .srp-play-button-label-container .srp-pause-button-label {
      display: none; }
  .srp_player_boxed .srp-play-icon {
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px; }
    .srp_player_boxed .srp-play-icon rect {
      display: none; }
  .audio-playing .srp_player_boxed .srp-play-button-label {
    display: none; }
  .audio-playing .srp_player_boxed .srp-pause-button-label {
    display: block; }
  .audio-playing .srp_player_boxed .srp-play-icon {
    left: 50%; }
    .audio-playing .srp_player_boxed .srp-play-icon rect {
      display: initial; }
    .audio-playing .srp_player_boxed .srp-play-icon path {
      display: none; }
  .srp_player_boxed .control {
    margin: 0;
    margin-top: 5px; }
    .srp_player_boxed .control .previous,
    .srp_player_boxed .control .play,
    .srp_player_boxed .control .next {
      display: none; }
  .srp_player_boxed .sonaar_fake_wave {
    margin-top: 0;
    margin-bottom: 0; }
  .srp_player_boxed .srp_main_control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px; }
    .srp_player_boxed .srp_main_control .song-store {
      color: inherit; }
  .srp_player_boxed .srp_noteButton {
    justify-content: flex-start;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: opacity 0.3s; }
    .srp_player_boxed .srp_noteButton.srp_hide {
      opacity: 0;
      pointer-events: none; }
  .srp_player_boxed .album-player .buttons-block {
    margin: 0px; }
    .srp_player_boxed .album-player .buttons-block .store-list li {
      margin: 0px; }
  .srp_player_boxed .album-player .ctnButton-block {
    padding: 0px;
    margin-top: 15px; }
    .srp_player_boxed .album-player .ctnButton-block .available-now {
      line-height: initial;
      padding-bottom: 0px; }

.audio-playing .srp_player_boxed .srp-play-button .sricon-play:before, .audio-playing .sr-playlist-item.current .sricon-play:before, .audio-playing .srp_main_control .sricon-play:before, .audio-playing .sonaar-Artwort-box .sricon-play:before, .audio-playing .swiper-slide.srp_current .sricon-play:before {
  content: '\e81c'; }

.srp_noteButton i {
  cursor: pointer; }
  .srp_noteButton i.sricon-close-circle {
    font-size: 22px;
    line-height: 1em; }

.srp_audio_trigger .sricon-play {
  left: 0;
  top: 50%;
  position: absolute;
  transform: translateY(-50%); }
  .srp_audio_trigger .sricon-play:before {
    font-size: 12px;
    line-height: 1;
    display: block;
    margin: 0; }

.srp_main_control .sricon-play:before {
  font-size: 32px;
  margin: 0; }

.srp-play-button .sricon-play {
  display: flex;
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  font-size: 19px;
  line-height: 1; }
  .srp-play-button .sricon-play:before {
    margin: 0; }
  .audio-playing .srp-play-button .sricon-play {
    left: 50%; }

.iron-audioplayer .srp_player_meta {
  font-size: 11px;
  margin-top: 3px;
  text-transform: uppercase;
  display: flex;
  column-gap: 12px;
  align-items: baseline;
  flex-wrap: wrap; }
  .iron-audioplayer .srp_player_meta div {
    display: inline-block; }
  .iron-audioplayer .srp_player_meta .srp_playlist_duration:before {
    content: "\f017";
    font-family: Font Awesome\ 5 Free, Font Awesome\ 5 Brands, Fontello;
    font-weight: 400;
    padding-right: 5px; }

.srp_control_box {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding-top: 8px; }

.srp_wave_box {
  width: 100%; }

.srp_podcast_rss_description {
  margin-top: 20px; }
  .srp_podcast_rss_description p {
    margin: 0px; }

.srp_hide_player .album-player,
.srp_hide_player .srp_player_boxed {
  display: none !important; }

.srp_player_button.iron_widget_radio.srp_inline {
  margin-bottom: 10px;
  margin-right: 10px; }

.srp_player_button .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr-playlist-item,
.srp_player_button .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .playlist {
  padding: 20px 20px 20px 0; }

.srp_player_button div.srp_player_boxed {
  padding: 0;
  background: unset; }

.srp_player_button .srp_hide_progressbar .srp_control_box {
  width: fit-content; }

.srp_player_button .srp_hide_progressbar .player {
  display: none; }

.srp_player_button .srp_hide_progressbar:not(.srp_has_metadata) .srp_control_box {
  display: block;
  width: fit-content; }

.srp_player_button .srp_control_box {
  padding-top: 0;
  margin-bottom: 0 !important; }

.srp_player_button .srp-play-button {
  width: fit-content; }

.srp_player_button .srp_main_control {
  display: none !important; }

.srp_hide_tracknumber .track-number {
  padding-right: 0; }
  .srp_hide_tracknumber .track-number .number {
    display: none; }

.srp_artwork_fullbackground_yes.iron-audioplayer .album-player {
  position: relative; }

.srp_artwork_fullbackground_yes .srp-artworkbg, .srp_artwork_fullbackground_yes .srp-artworkbg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }

.srp_artwork_fullbackground_yes .srp_player_boxed, .srp_artwork_fullbackground_yes .playlist, .srp_artwork_fullbackground_yes .sr-playlist-item {
  background: unset; }

.srp_artwork_fullbackground_yes.iron-audioplayer .album-player, .srp_artwork_fullbackground_yes.iron-audioplayer .srp_player_boxed {
  background: unset !important; }

.srp_artwork_fullbackground_yes.iron-audioplayer[data-adaptive-colors="1"] .srp_player_boxed, .srp_artwork_fullbackground_yes .iron-audioplayer[data-adaptive-colors="1"] .playlist, .srp_artwork_fullbackground_yes .iron-audioplayer[data-adaptive-colors="1"] .sr-playlist-item {
  background: unset !important; }

.srp_artwork_fullbackground_yes.iron-audioplayer .srp_player_boxed, .srp_artwork_fullbackground_yes.iron-audioplayer .album-player, .srp_artwork_fullbackground_yes.iron-audioplayer .playlist, .srp_artwork_fullbackground_yes.iron-audioplayer .sonaar-Artwort-box {
  z-index: 2; }

.srp_artwork_fullbackground_yes.iron-audioplayer .srp-artworkbg-gradient {
  z-index: 1; }

.srp_artwork_fullbackground_yes.iron-audioplayer .srp-artworkbg {
  z-index: 0; }

.srp_artwork_fullbackground_yes .srp-fade-in {
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }

.srp_artwork_fullbackground_yes .srp-fade-out {
  animation: fadeOutAnimation ease 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }

@keyframes fadeInAnimation {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeOutAnimation {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@font-face {
  font-family: "sricons";
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../../public/webfonts/sricons/font/sricons.eot?5.6');
  src: url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../../public/webfonts/sricons/font/sricons.eot?5.6#iefix') format("embedded-opentype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../../public/webfonts/sricons/font/sricons.woff2?5.6') format("woff2"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../../public/webfonts/sricons/font/sricons.woff?5.6') format("woff"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../../public/webfonts/sricons/font/sricons.ttf?5.6') format("truetype"), url('https://corelinktenders.co.uk/wp-content/plugins/mp3-music-player-by-sonaar/public/css/../../public/webfonts/sricons/font/sricons.svg?5.6#sricons') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="sricon-"]:before,
[class*=" sricon-"]:before {
  font-family: "sricons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

[class^="sricon-spinner"]:before,
[class*=" sricon-spinner"]:before {
  animation: sricon-spinner-animation 0.8s infinite cubic-bezier(0.2, 0.34, 1, 0.99);
  display: inline-block; }

.srp_noteButton {
  font-size: 18px; }
  .srp_noteButton .sricon-spinner-wrap {
    font-size: 1.2em; }

.sr_progressbar {
  direction: ltr; }

.sricon-spinner-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 21px;
  transform: scale(0);
  transform-origin: center center;
  transition: transform .3s; }
  .sricon-spinner-wrap.sricon-spinner-wrap-ready {
    width: 100%;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important; }

.srp_hidden {
  display: none !important; }

.song-store i {
  display: flex; }

@keyframes sricon-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.sricon-amazonmusic:before {
  content: '\e800'; }

/* '' */
.sricon-apple-podcasts:before {
  content: '\e801'; }

/* '' */
.sricon-castbox:before {
  content: '\e802'; }

/* '' */
.sricon-castro:before {
  content: '\e803'; }

/* '' */
.sricon-deezer:before {
  content: '\e804'; }

/* '' */
.sricon-google-podcast:before {
  content: '\e805'; }

/* '' */
.sricon-iheartradio:before {
  content: '\e806'; }

/* '' */
.sricon-overcast:before {
  content: '\e807'; }

/* '' */
.sricon-pandora:before {
  content: '\e808'; }

/* '' */
.sricon-playerfm:before {
  content: '\e809'; }

/* '' */
.sricon-pocketcasts:before {
  content: '\e80a'; }

/* '' */
.sricon-podcastaddict:before {
  content: '\e80b'; }

/* '' */
.sricon-podcastindex:before {
  content: '\e80c'; }

/* '' */
.sricon-podchaser:before {
  content: '\e80d'; }

/* '' */
.sricon-rss-feed:before {
  content: '\e80e'; }

/* '' */
.sricon-spotify:before {
  content: '\e80f'; }

/* '' */
.sricon-stitcher:before {
  content: '\e810'; }

/* '' */
.sricon-tunein:before {
  content: '\e811'; }

/* '' */
.sricon-Sonaar-symbol:before {
  content: '\e812'; }

/* '' */
.sricon-info:before {
  content: '\e813'; }

/* '' */
.sricon-close-circle:before {
  content: '\e828'; }

/* '' */
.sricon-svg-video:before {
  content: '\e816'; }

/* '' */
.sricon-cash2:before {
  content: '\e818'; }

/* '' */
.sricon-layers:before {
  content: '\e81b'; }

/* '' */
.sricon-radio2:before {
  content: '\e820'; }

/* '' */
.sricon-micro:before {
  content: '\e821'; }

/* '' */
.sricon-cash:before {
  content: '\e822'; }

/* '' */
.sricon-dj:before {
  content: '\e823'; }

/* '' */
.sricon-musiccreation:before {
  content: '\e825'; }

/* '' */
.sricon-nocash:before {
  content: '\e827'; }

/* '' */
.sricon-download:before {
  content: '\e81f'; }

/* '' */
.sricon-15s:before {
  content: '\e814'; }

/* '' */
.sricon-30s:before {
  content: '\e815'; }

/* '' */
.sricon-filedownload:before {
  content: '\e817'; }

/* '' */
.sricon-audiostream:before {
  content: '\e824'; }

/* '' */
.sricon-play:before {
  content: '\e81a'; }

/* '' */
.sricon-pause:before {
  content: '\e81c'; }

/* '' */
.sricon-spinner:before {
  content: '\e97b'; }

/* '' */
.sricon-shuffle:before {
  content: '\e83d'; }

/* '' */
.sricon-shuffle-a:before {
  content: '\e83d'; }

/* '' */
.sricon-volume:before {
  content: '\e82e'; }

/* '' */
.sricon-mute:before {
  content: '\e826'; }

/* '' */
.sricon-forward:before {
  content: '\e829'; }

/* '' */
.sricon-back:before {
  content: '\e82a'; }

/* '' */
.sricon-list:before {
  content: '\e833'; }

.sricon-bookmark_add:before {
  content: '\e863'; }

/* '' */
.sricon-bookmark_remove:before {
  content: '\e864'; }

/* '' */
.sricon-minus:before {
  content: '\e865'; }

/* '' */
.sricon-plus:before {
  content: '\e866'; }

/* '' */
.sricon-star_add:before {
  content: '\e867'; }

/* '' */
.sricon-star_remove:before {
  content: '\e868'; }

/* '' */
.sricon-heart-fill:before {
  content: '\e869'; }

/* '' */
.sricon-heart:before {
  content: '\e86a'; }

/* '' */
.sricon-down-arrow:before {
  content: '\e835'; }

/* '' */
.sricon-up-arrow:before {
  content: '\e83a'; }

/* '' */
.sricon-share:before {
  content: '\e836'; }

/* '' */
.sricon-3-dots-h:before {
  content: '\e837'; }

/* '' */
.sricon-close:before {
  content: '\e838'; }

/* '' */
.sricon-3-dots-v:before {
  content: '\e839'; }

/* '' */
.sricon-x-twitter:before {
  content: '\e87b'; }

/* '' */
/* '' */
/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute; }

#sonaar-player .ps__rail-y {
  position: absolute; }

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */ }

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent; }

.iron-audioplayer .playlist .srp_tracklist .ps--active-y {
  padding-right: 15px; }

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6; }

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9; }

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px; }

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px; }

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important; } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important; } }


/*FILESTART   */

/* 10Web Booster optimized this CSS file */

:root {--srp-global-tracklist-color: #000000;}#sonaar-player .player, #sonaar-player .player .volume .slider-container, #sonaar-player .close.btn_playlist:before, #sonaar-player .close.btn_playlist:after{border-color:;}#sonaar-player .player .volume .slider-container:before{border-top-color:;}#sonaar-player .playlist button.play, #sonaar-player .close.btn-player, #sonaar-player .mobileProgress, #sonaar-player .ui-slider-handle, .ui-slider-range{background-color:;}#sonaar-player .playlist .tracklist li.active, #sonaar-player .playlist .tracklist li.active span, #sonaar-player .playlist .title, .srmp3_singning p[begin]:not(.srmp3_lyrics_read ~ p){color:;}#sonaar-player .player .timing, #sonaar-player .album-title, #sonaar-player .playlist .tracklist li, #sonaar-player .playlist .tracklist li a, #sonaar-player .player .store .track-store li a, #sonaar-player .track-store li, #sonaar-player .sonaar-extend-button, #sonaar-player .sr_skip_number{color:;}#sonaar-player .player .store .track-store li .sr_store_round_bt, #sonaar-player .ui-slider-handle, #sonaar-player .ui-slider-range{background-color:;}#sonaar-player .control, #sonaar-player .sricon-volume {color:;}#sonaar-player div.sr_speedRate div{background:;}div#sonaar-player, #sonaar-player .player, #sonaar-player .player .volume .slider-container, #sonaar-player.sr-float div.playlist, #sonaar-player.sr-float .close.btn-player, #sonaar-player.sr-float .player.sr-show_controls_hover .playerNowPlaying, .srp_extendedPlayer{background-color:;}@media only screen and (max-width: 1025px){#sonaar-player .store{background-color:;}}#sonaar-player .player .volume .slider-container:after{border-top-color:;}#sonaar-player .playlist button.play, #sonaar-player .player .store .track-store li .sr_store_round_bt{color:;}#sonaar-player .close.btn-player rect{fill:;}#sonaar-player .close.btn-player.enable:after, #sonaar-player .close.btn-player.enable:before{border-color:!important;}#sonaar-player.sr-float .close.btn-player.enable:after, #sonaar-player.sr-float .close.btn-player.enable:before{border-color:!important;}#sonaar-player div.sr_speedRate div{color:;}#sonaar-player .mobilePanel, #sonaar-player .player .player-row:before{background-color:;}#sonaar-player .player div.mobilePanel{border-color:;}#sonaar-player .mobileProgressing, #sonaar-player .progressDot{background-color:;}div#sonaar-modal .sr_popup-content, .iron-audioplayer .srp_note{background-color:;}.sr_close svg{fill:;}.iron-audioplayer .srp_player_boxed, .single-album .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .album-player{background:rgba(226, 226, 226, 1);}.iron_widget_radio:not(.srp_player_button) .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .playlist, .single-album .iron-audioplayer[data-playertemplate="skin_float_tracklist"] .sonaar-grid{background:;}.iron-audioplayer .srp-play-button-label-container{color:;}.iron-audioplayer .playlist .current .audio-track, .playlist .current .track-number{color:rgba(0, 0, 0, 1);}.iron-audioplayer .playlist a.song-store:not(.sr_store_wc_round_bt){color:;}.iron-audioplayer  .playlist .song-store-list-menu .fa-ellipsis-v{color:#BBBBBB;}.iron-audioplayer  .playlist .audio-track path, .iron-audioplayer  .playlist .sricon-play{color:rgba(0, 0, 0, 1);}.iron-audioplayer .control .sricon-play, .srp-play-button .sricon-play, .srp_pagination .active{color:rgba(127, 127, 127, 1);}.iron-audioplayer .srp-play-circle{border-color:rgba(127, 127, 127, 1);}.iron-audioplayer .control, .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr_progressbar, .srp_player_boxed .srp_noteButton{color:rgba(127, 127, 127, 1);}.iron-audioplayer .sr_speedRate div{border-color:rgba(127, 127, 127, 1);}.iron-audioplayer .srp-play-button-label-container, .iron-audioplayer .ui-slider-handle, .iron-audioplayer .ui-slider-range{background:rgba(127, 127, 127, 1);}.iron-audioplayer.sr_player_on_artwork .sonaar-Artwort-box .control [class*="sricon-"]{color:#f1f1f1;}.iron-audioplayer.sr_player_on_artwork .sonaar-Artwort-box .control .play{border-color:#f1f1f1;}.iron-audioplayer .song-store.sr_store_wc_round_bt{color:;}.iron-audioplayer .song-store.sr_store_wc_round_bt{background-color:;} @media screen and (max-width: 540px){ #sonaar-player .playlist .tracklist span.track-title, #sonaar-player .playlist .tracklist span.track-artist, #sonaar-player .playlist .tracklist span.track-album{ padding-left: 35px; } }.srp-modal-variation-list .srp-modal-variant-selector {background-color:;}.srp-modal-variation-list .srp-modal-variant-selector:hover, .srp-modal-variation-list .srp-modal-variant-selector.srp_selected {background-color:;}#sonaar-modal .srp_button {background-color:;}#sonaar-modal .srp_button {color:;}:root {
			--srp-global-sticky_player_featured_color: ;
			--srp-global-sticky_player_waveform_progress_color: ;
			--srp-global-sticky_player_waveform_background_color: ;
			--srp-global-sticky_player_labelsandbuttons: ;
			--srp-global-sticky_player_background: ;
			--srp-global-music_player_wc_bt_color: ;
			--srp-global-music_player_wc_bt_bgcolor: ;
			--srp-global-modal-btn-txt-color: ;
			--srp-global-modal-btn-bg-color: ;
			--srp-global-modal-form-input-bg-color: ;
			--srp-global-modal-form-input-border-color: ;
			--srp-global-modal-form-input-color: ;
			
		  }.iron-audioplayer .sonaar_fake_wave .sonaar_wave_cut rect{fill:rgba(116, 1, 223, 1);}#sonaar-player .sonaar_fake_wave .sonaar_wave_base rect{fill:;}#sonaar-player .mobileProgress{background-color:;}#sonaar-player .sonaar_fake_wave .sonaar_wave_cut rect{fill:;}
/*# sourceURL=sonaar-music-inline-css */


/*FILESTART   */

/* 10Web Booster optimized this CSS file */


	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */


/*FILESTART   */

/* 10Web Booster optimized this CSS file */

/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */


/*FILESTART   */

/* 10Web Booster optimized this CSS file */

:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */


/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/sonaar-music-pro/public/css/sonaar-music-pro-public.css */
@charset "UTF-8";
:root {
  --srp-global-cta-mobile: 142px;
  --srp-global-cta-desktop: 200px;
  --srp-global-column-title-width: 500px;
  --srp-extendedPlayer-height: 100vh; }

@keyframes showElement {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes hideElement {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@media only screen and (min-width: 1026px) {
  #sonaar-player:not(.sr-float) .player .store {
    box-sizing: border-box; }
    #sonaar-player:not(.sr-float) .player .store .track-store {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      height: 100%; }
      #sonaar-player:not(.sr-float) .player .store .track-store li {
        height: 100%;
        min-width: 74px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        top: 0; }
        #sonaar-player:not(.sr-float) .player .store .track-store li a {
          height: auto;
          max-height: 100%;
          display: block;
          font-size: 10px;
          text-decoration: none;
          text-transform: uppercase;
          text-align: center;
          overflow: hidden;
          padding-left: 10px;
          padding-right: 10px; }
          #sonaar-player:not(.sr-float) .player .store .track-store li a:hover {
            transition: 200ms;
            filter: brightness(0.75); }
          #sonaar-player:not(.sr-float) .player .store .track-store li a i {
            pointer-events: none;
            display: block;
            font-size: 20px;
            line-height: 1.5em; }
        #sonaar-player:not(.sr-float) .player .store .track-store li .sr_store_round_bt {
          border-radius: 4px;
          padding: 4px 6px;
          margin: 0px 10px;
          display: flex;
          align-items: center;
          justify-content: center; }
          #sonaar-player:not(.sr-float) .player .store .track-store li .sr_store_round_bt i.fas {
            display: inline-block;
            margin-right: 5px;
            font-size: 12px; } }

@media only screen and (max-width: 426px) {
  #sonaar-player .playlist .tracklist .track-store {
    display: none !important; } }

@media only screen and (max-width: 540px) {
  #sonaar-player .playlist button.play, #sonaar-player .player .player-row .sr_skipBackward,
  #sonaar-player .player .player-row .sr_skipForward,
  #sonaar-player .player .player-row .sr_speedRate,
  #sonaar-player .player .player-row .shuffle {
    display: none !important; } }

@media only screen and (min-width: 425px) and (max-width: 1025px) {
  #sonaar-player .playlist .tracklist .track-store {
    display: none !important; } }

#sonaar-player {
  position: fixed;
  bottom: -90px;
  color: #fff;
  background-color: #000;
  width: 100%;
  z-index: 8010; }
  #sonaar-player .mejs-container {
    display: none !important; }
  #sonaar-player,
  #sonaar-player .player {
    height: 90px; }
    @media only screen and (max-width: 540px) {
      #sonaar-player,
      #sonaar-player .player {
        height: 56px; }
        #sonaar-player div.player,
        #sonaar-player .player div.player {
          border-width: 0; } }
  #sonaar-player.sr_hide {
    display: none; }
  #sonaar-player:not(.sr_hide):not([v-cloak]) {
    display: block !important; }
  @media only screen and (max-width: 1025px) {
    #sonaar-player .store {
      display: none; } }
  #sonaar-player.enable {
    transition: all 0.03s ease; }
    #sonaar-player.enable .btn-player {
      top: 0px !important; }
      #sonaar-player.enable .btn-player .audioBar {
        display: none !important; }
    @media only screen and (max-width: 1025px) {
      #sonaar-player.enable .store {
        position: absolute;
        top: 0px;
        right: 0px;
        transform: translateY(-100%);
        width: auto !important;
        min-width: 150px;
        border-radius: 3px;
        z-index: 10000;
        display: none; }
        #sonaar-player.enable .store .track-store {
          font-size: 14px;
          list-style: none;
          margin: 0;
          padding: 0; }
          #sonaar-player.enable .store .track-store li {
            border: none;
            display: block;
            padding: 7px; }
            #sonaar-player.enable .store .track-store li a {
              text-decoration: none;
              display: block;
              text-align: center;
              color: inherit !important;
              background-color: inherit !important; }
              #sonaar-player.enable .store .track-store li a .fa {
                display: inline-block;
                padding-right: 10px;
                font-size: 1.4em; }
              #sonaar-player.enable .store .track-store li a i {
                margin-right: 6px; }
            #sonaar-player.enable .store .track-store li + li {
              border-top: 1px solid rgba(138, 138, 138, 0.25); }
        #sonaar-player.enable .store.opened {
          display: block;
          animation: showElement 0.25s ease-in-out both; }
        #sonaar-player.enable .store:not(.opened) {
          animation: hideElement 0.25s ease-in-out both; } }
  #sonaar-player.show-list {
    height: 100%;
    z-index: 9999; }
  #sonaar-player .sricon-close, #sonaar-player .close {
    pointer-events: all;
    right: 50px;
    top: 45px;
    position: absolute;
    cursor: pointer; }
    #sonaar-player .sricon-close.btn_playlist, #sonaar-player .close.btn_playlist {
      font-size: 32px; }
      #sonaar-player .sricon-close.btn_playlist:after, #sonaar-player .sricon-close.btn_playlist:before, #sonaar-player .close.btn_playlist:after, #sonaar-player .close.btn_playlist:before {
        margin-left: 14px; }
    @media only screen and (max-width: 860px) {
      #sonaar-player .sricon-close, #sonaar-player .close {
        font-size: 18px;
        top: 15px;
        right: 22px;
        z-index: 9999; }
        #sonaar-player .sricon-close.btn_playlist, #sonaar-player .close.btn_playlist {
          font-size: 18px; } }
    #sonaar-player .sricon-close.btn-player, #sonaar-player .close.btn-player {
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 0;
      top: -10px;
      transform: translateY(-100%);
      width: 24px;
      height: 24px; }
      @media only screen and (max-width: 860px) {
        #sonaar-player .sricon-close.btn-player, #sonaar-player .close.btn-player {
          top: -3px; } }
      #sonaar-player .sricon-close.btn-player .audioBar, #sonaar-player .close.btn-player .audioBar {
        display: block;
        width: 16px;
        height: 16px;
        transform: rotate(180deg);
        position: absolute;
        top: 4px;
        left: 4px; }
  #sonaar-player .playerNowPlaying {
    width: 342px;
    display: flex;
    align-items: center; }
    #sonaar-player .playerNowPlaying .album-art {
      height: calc(100% - 16px);
      max-width: 125px;
      transition: all 0.5s ease;
      margin-left: 8px;
      position: relative; }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playerNowPlaying .album-art {
          height: 100%;
          margin-left: 0px;
          max-width: 90px; } }
      #sonaar-player .playerNowPlaying .album-art .loading-icon {
        color: #fff;
        position: absolute;
        width: 100%;
        top: 20px;
        opacity: 0;
        transition: opacity 0.75s ease;
        z-index: 1; }
      #sonaar-player .playerNowPlaying .album-art.loading-enable.loading .loading-icon {
        opacity: 0.8; }
      #sonaar-player .playerNowPlaying .album-art img:not(.hover) {
        max-width: 100%;
        max-height: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%); }
      #sonaar-player .playerNowPlaying .album-art img.hover {
        opacity: 0;
        position: absolute;
        top: 0;
        width: 200px;
        max-width: unset;
        height: auto;
        transition: all 0.5s ease;
        transform: translate3d(0, 200px, 0);
        z-index: 100; }
      @media only screen and (min-width: 540px) {
        #sonaar-player .playerNowPlaying .album-art:hover img.hover {
          opacity: 1;
          transform: translateY(-100%) translate3d(0, 0, 0); } }
    #sonaar-player .playerNowPlaying.no-image .metadata {
      margin-left: 10px;
      margin-right: 0px;
      width: inherit; }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playerNowPlaying.no-image .metadata {
          margin-right: 10px; } }
    #sonaar-player .playerNowPlaying .metadata {
      position: relative;
      letter-spacing: 1px;
      width: 245px;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      margin: 0 0 0 20px;
      line-height: 1.65em; }
      #sonaar-player .playerNowPlaying .metadata .track-name,
      #sonaar-player .playerNowPlaying .metadata .track-artist,
      #sonaar-player .playerNowPlaying .metadata .track-album {
        float: left;
        clear: left; }
        #sonaar-player .playerNowPlaying .metadata .track-name.scrolling,
        #sonaar-player .playerNowPlaying .metadata .track-artist.scrolling,
        #sonaar-player .playerNowPlaying .metadata .track-album.scrolling {
          transition: transform 5s linear; }
        #sonaar-player .playerNowPlaying .metadata .track-name .duplicate,
        #sonaar-player .playerNowPlaying .metadata .track-artist .duplicate,
        #sonaar-player .playerNowPlaying .metadata .track-album .duplicate {
          padding-left: 10px; }
      #sonaar-player .playerNowPlaying .metadata .metadata-inner {
        position: relative;
        top: 50%;
        transform: translateY(-50%); }
        #sonaar-player .playerNowPlaying .metadata .metadata-inner:after {
          content: "";
          clear: both;
          display: table; }
      #sonaar-player .playerNowPlaying .metadata .track-artist,
      #sonaar-player .playerNowPlaying .metadata .track-album {
        font-size: 0.7em;
        line-height: 1em; }
      @media only screen and (max-width: 860px) {
        #sonaar-player .playerNowPlaying .metadata {
          font-size: 14px; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playerNowPlaying .metadata {
          font-size: 12px;
          width: calc(100% - 50px);
          margin: 0 10px;
          max-width: 300px; } }
    @media only screen and (max-width: 860px) {
      #sonaar-player .playerNowPlaying {
        width: auto;
        flex: 1; } }
  @media only screen and (max-width: 860px) and (min-width: 541px) {
    #sonaar-player .no-list .playerNowPlaying .metadata {
      width: calc(100% - 215px); } }
  #sonaar-player .playlist {
    font-size: 18px;
    box-sizing: border-box;
    height: calc(100vh - 90px);
    position: absolute;
    width: 100%; }
    #sonaar-player .playlist .scroll {
      height: calc(100vh - 320px);
      width: 100%;
      top: 100px;
      position: absolute;
      display: flex;
      overflow-y: hidden; }
    #sonaar-player .playlist .container {
      min-height: 0;
      width: 100%;
      max-width: 1144px;
      height: auto;
      align-self: center;
      margin: auto;
      padding: 0 20px;
      background-color: transparent; }
      #sonaar-player .playlist .container .boxed {
        height: auto;
        width: 100%; }
    #sonaar-player .playlist .title {
      margin-bottom: 20px;
      display: block;
      text-align: center;
      font-size: 54px;
      line-height: 1.265em; }
      @media only screen and (max-width: 860px) {
        #sonaar-player .playlist .title {
          box-sizing: border-box;
          font-size: 18px;
          text-transform: uppercase;
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          margin: 0;
          padding: 20px; } }
    #sonaar-player .playlist button.play {
      padding: 12px 34px;
      border-radius: 50px;
      border: none;
      font-family: Tahoma, sans-serif;
      font-size: 14px;
      text-transform: uppercase;
      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
      margin: 0 auto 50px auto;
      outline: none;
      cursor: pointer; }
    #sonaar-player .playlist .tracklist {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: table;
      width: 100%; }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist {
          display: block; } }
      #sonaar-player .playlist .tracklist li {
        filter: brightness(70%);
        font-weight: inherit;
        display: table-row;
        line-height: 2.4em;
        cursor: pointer; }
        #sonaar-player .playlist .tracklist li.active {
          filter: brightness(100%);
          font-weight: 700; }
        @media only screen and (max-width: 860px) {
          #sonaar-player .playlist .tracklist li {
            font-size: 15px; } }
        @media only screen and (max-width: 540px) {
          #sonaar-player .playlist .tracklist li {
            display: block;
            line-height: 1.265em;
            margin-bottom: 1.265em;
            position: relative; } }
      #sonaar-player .playlist .tracklist span {
        display: table-cell; }
        #sonaar-player .playlist .tracklist span .content {
          background-color: unset;
          margin: 0; }
          @media only screen and (min-width: 540px) {
            #sonaar-player .playlist .tracklist span .content {
              line-height: 1.3em;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis; } }
        @media only screen and (max-width: 540px) {
          #sonaar-player .playlist .tracklist span {
            display: inline-block; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist .track-status {
          font-size: 12px;
          font-weight: 300; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist .srp_track_control {
          position: absolute; } }
      #sonaar-player .playlist .tracklist .sricon-play {
        font-size: 15px;
        padding-right: 7px; }
        @media only screen and (max-width: 540px) {
          #sonaar-player .playlist .tracklist .sricon-play {
            font-size: 12px;
            padding-right: 0; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist .track-lenght {
          font-size: 12px;
          font-weight: 300;
          position: absolute;
          right: 0px;
          top: 0; } }
      #sonaar-player .playlist .tracklist .track-store {
        display: flex;
        justify-content: start;
        column-gap: 15px; }
        #sonaar-player .playlist .tracklist .track-store a {
          text-decoration: none;
          font-size: 20px; }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist .track-title {
          display: block;
          width: 100%;
          padding-left: 20px; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist .track-artist,
        #sonaar-player .playlist .tracklist .track-album {
          font-size: 12px;
          font-weight: 300;
          padding-left: 20px; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .playlist .tracklist .track-artist + .track-album {
          padding-left: 10px; } }
  #sonaar-player.audio-playing .playlist .tracklist li.active .sricon-play:before {
    content: '\e81c'; }
  #sonaar-player.srp_mobile .playlist {
    z-index: 15555;
    background: inherit;
    height: 100%; }
    #sonaar-player.srp_mobile .playlist .container {
      align-self: normal;
      margin: 0; }
    #sonaar-player.srp_mobile .playlist .sricon-close.close {
      position: fixed;
      left: 22px;
      top: 18px; }
  #sonaar-player.srp_mobile .scroll {
    top: 64px;
    height: calc(100% - 64px); }
  #sonaar-player.srp_mobile .player .control {
    padding: 0; }
  #sonaar-player .player {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
    border-width: 4px;
    border-style: solid;
    border-left: none;
    border-bottom: none;
    border-right: none; }
    #sonaar-player .player .player-row {
      display: flex;
      height: 100%; }
      #sonaar-player .player .player-row .sr_skipBackward,
      #sonaar-player .player .player-row .sr_skipForward {
        font-size: 25px; }
      @media only screen and (max-width: 540px) {
        #sonaar-player .player .player-row:before {
          content: "";
          width: 100%;
          height: calc(100% - 5px);
          display: block;
          position: absolute;
          bottom: 0;
          z-index: 55; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .player .player-row .playerNowPlaying,
        #sonaar-player .player .player-row .control,
        #sonaar-player .player .player-row .sonaar-extend-button {
          z-index: 60; } }
    #sonaar-player .player .control--item.list:hover, #sonaar-player .player .control--item.previous:hover, #sonaar-player .player .control--item.play:hover, #sonaar-player .player .control--item.next:hover, #sonaar-player .player .control--item.shuffle:hover,
    #sonaar-player .player .control--item.volume .sricon-volume:hover:before {
      filter: brightness(0.75);
      transition: 300ms; }
    #sonaar-player .player .mobilePanel {
      position: absolute;
      top: 0px;
      width: 100%;
      transform: translateY(calc(-100% + 4px));
      z-index: 50;
      border-bottom: 4px solid; }
      #sonaar-player .player .mobilePanel .sonaar-extend-button {
        position: absolute;
        top: 0;
        right: 0; }
    #sonaar-player .player .control {
      padding: 0 15px;
      margin: 0;
      list-style: none;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      column-gap: 22px; }
      #sonaar-player .player .control .control--item {
        position: relative;
        text-align: center;
        height: 100%;
        cursor: pointer;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center; }
        #sonaar-player .player .control .control--item.play {
          background: unset; }
      @media only screen and (max-width: 860px) {
        #sonaar-player .player .control {
          margin-right: 20px; } }
      @media only screen and (max-width: 767px) {
        #sonaar-player .player .control {
          margin-right: 15px; } }
      @media only screen and (max-width: 540px) {
        #sonaar-player .player .control {
          min-width: 40px;
          margin-right: 0; } }
    @media only screen and (max-width: 860px) {
      #sonaar-player .player .sr_progressbar_sticky {
        display: none !important; } }
  #sonaar-player .sr_progressbar_sticky {
    width: auto;
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0 5px; }
    #sonaar-player .sr_progressbar_sticky .timing {
      font-variant-numeric: tabular-nums;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      line-height: 1em; }
    #sonaar-player .sr_progressbar_sticky .sr-progress {
      width: calc(100% - 200px);
      position: absolute;
      height: 90px;
      left: 75px;
      bottom: 0; }
      #sonaar-player .sr_progressbar_sticky .sr-progress .sr-wavebar {
        position: absolute;
        height: 1px;
        left: 0;
        top: 50%; }
      #sonaar-player .sr_progressbar_sticky .sr-progress .progress_totalTime {
        width: 100%; }
      #sonaar-player .sr_progressbar_sticky .sr-progress .progress_currentTime {
        height: 3px;
        top: calc(50% - 1px); }
      #sonaar-player .sr_progressbar_sticky .sr-progress .skip {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
    #sonaar-player .sr_progressbar_sticky #sPlayer {
      display: flex;
      align-items: center;
      height: 100%;
      opacity: 0;
      transition: all 3000ms ease;
      overflow: hidden;
      width: calc(100% - 100px);
      max-height: calc(100% - 6px);
      left: 47px; }
      #sonaar-player .sr_progressbar_sticky #sPlayer.sr_hide {
        opacity: 0; }
      #sonaar-player .sr_progressbar_sticky #sPlayer.reveal {
        opacity: 1; }
  #sonaar-player .progressLoading {
    background: rgba(255, 255, 255, 0.25);
    width: 0%;
    height: 1px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    width: calc(100% - 562px);
    position: absolute;
    left: 552px;
    top: 45px;
    transition: opacity 3000ms ease; }
  #sonaar-player .wave {
    position: absolute;
    left: 30px; }
    #sonaar-player .wave wave {
      transition: width 400ms;
      width: 100%;
      position: absolute;
      overflow-x: hidden !important; }
  #sonaar-player.sr-float {
    bottom: -56px; }
    @media only screen and (min-width: 541px) {
      #sonaar-player.sr-float .player .mobilePanel {
        border-width: 0;
        transform: unset;
        top: 3px; } }
    @media only screen and (max-width: 540px) {
      #sonaar-player.sr-float .player .mobilePanel {
        transform: translateY(calc(-100% + 5px));
        border-width: 5px; } }
    #sonaar-player.sr-float .close.btn-player rect {
      fill: #fff; }
    #sonaar-player.sr-float .control .control--item.list.sricon-list {
      font-size: 18px; }
    #sonaar-player.sr-float .control .sricon-back, #sonaar-player.sr-float .control .sricon-forward, #sonaar-player.sr-float .control .sricon-play {
      font-size: 17px; }
  #sonaar-player .shuffle {
    width: 20px; }
  #sonaar-player.hide-track-lenght .playlist .tracklist .track-lenght {
    display: none; }
  #sonaar-player.hide-track-category .playlist .tracklist .track-album {
    display: none; }
  #sonaar-player .sonaar-extend-button {
    height: 100%;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    margin-right: 5px;
    cursor: pointer; }
    @media only screen and (min-width: 1026px) {
      #sonaar-player .sonaar-extend-button {
        display: none; } }
    #sonaar-player .sonaar-extend-button i {
      position: relative;
      display: block; }
  #sonaar-player .mobileProgress {
    width: 100%;
    position: absolute;
    top: -6px;
    z-index: 10;
    cursor: pointer; }
    #sonaar-player .mobileProgress .skip {
      position: absolute;
      width: 100%;
      height: 390%;
      top: -130%;
      z-index: 10; }
    @media only screen and (min-width: 861px) {
      #sonaar-player .mobileProgress {
        display: none; } }
  #sonaar-player .mobileProgressing {
    height: 6px;
    position: relative; }
    #sonaar-player .mobileProgressing:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; }
  #sonaar-player .progressDot {
    height: 10px;
    width: 10px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: none; }
    body:not(.continuousPlayer-enable) #sonaar-player .progressDot {
      opacity: 0; }
  #sonaar-player.sr-float:not(.show-list),
  #sonaar-player.sr-float .player {
    height: 50px; }
  #sonaar-player.sr-float:not(.sr_hide):not([v-cloak]) {
    display: flex !important;
    left: unset; }
  #sonaar-player.sr-float {
    background-color: unset;
    /* .store .track-store li{
      @media only screen and (min-width: 1026px){
        a{
          font-size: 8px;
          i{
            font-size: 12px;
          }
        }
      }
    }*/ }
    #sonaar-player.sr-float:not(.srp_ext_opened) {
      pointer-events: none; }
    #sonaar-player.sr-float.sr-pos--left {
      justify-content: flex-start; }
    #sonaar-player.sr-float.sr-pos--center {
      justify-content: center; }
    #sonaar-player.sr-float.sr-pos--right {
      justify-content: flex-end; }
    #sonaar-player.sr-float.audio-playing .player:hover .mobileProgress {
      display: block;
      opacity: 1; }
    @media only screen and (max-width: 861px) {
      #sonaar-player.sr-float.audio-playing .player.audio-playing .mobileProgress {
        display: block;
        opacity: 1; } }
    #sonaar-player.sr-float .player {
      pointer-events: all;
      margin: 20px;
      left: unset;
      border-radius: 10px;
      width: auto;
      border-width: 0px; }
      #sonaar-player.sr-float .player .control .control--item {
        margin: 0 1px; }
      @media only screen and (min-width: 861px) {
        #sonaar-player.sr-float .player.sr-show_controls_hover {
          transition: 800ms width;
          width: 342px; }
          #sonaar-player.sr-float .player.sr-show_controls_hover:hover {
            width: 100%; }
            #sonaar-player.sr-float .player.sr-show_controls_hover:hover .playerNowPlaying {
              width: 270px; }
          #sonaar-player.sr-float .player.sr-show_controls_hover .player-row {
            display: flex;
            justify-content: flex-end; }
          #sonaar-player.sr-float .player.sr-show_controls_hover .playerNowPlaying {
            position: absolute;
            width: 300px;
            height: 100%;
            left: 0;
            transition: 800ms width;
            z-index: 2; } }
      @media only screen and (max-width: 861px) {
        #sonaar-player.sr-float .player.sr-show_controls_hover {
          width: calc(100% - 20px) !important;
          transform: unset !important; } }
      #sonaar-player.sr-float .player:hover .close.btn-player {
        opacity: 1; }
      #sonaar-player.sr-float .player .mobileProgress {
        transition: 400ms;
        top: unset;
        bottom: -8px;
        width: 100%;
        left: 0px; }
      #sonaar-player.sr-float .player .mobileProgressing {
        height: 3px; }
    #sonaar-player.sr-float .sr_progressbar_sticky {
      display: none; }
    #sonaar-player.sr-float .playlist {
      pointer-events: all;
      height: 100%; }
    #sonaar-player.sr-float .album-art img:last-child {
      border-radius: 10px 0px 0px 10px; }
    #sonaar-player.sr-float .playerNowPlaying .metadata {
      margin: 0 10px; }
      #sonaar-player.sr-float .playerNowPlaying .metadata .track-album {
        display: none; }
    #sonaar-player.sr-float .playerNowPlaying .album-art {
      margin-left: 0;
      height: 100%; }
    @media only screen and (min-width: 1026px) {
      #sonaar-player.sr-float .sonaar-extend-button {
        display: flex; } }
    #sonaar-player.sr-float.enable .store {
      position: absolute;
      top: -1px;
      right: 70px;
      transform: translateY(-100%);
      width: auto !important;
      min-width: 150px;
      border-radius: 3px;
      z-index: 10000;
      display: none; }
      @media only screen and (max-width: 861px) {
        #sonaar-player.sr-float.enable .store {
          right: 10px; } }
      #sonaar-player.sr-float.enable .store .track-store {
        font-size: 14px;
        list-style: none;
        margin: 0;
        padding: 0; }
        #sonaar-player.sr-float.enable .store .track-store li {
          border: none;
          display: block;
          padding: 7px; }
          #sonaar-player.sr-float.enable .store .track-store li a {
            text-decoration: none;
            display: block;
            text-align: right;
            color: inherit !important;
            background-color: inherit !important; }
            #sonaar-player.sr-float.enable .store .track-store li a .fa {
              display: inline-block;
              padding-right: 10px;
              font-size: 1.4em; }
            #sonaar-player.sr-float.enable .store .track-store li a i {
              margin-right: 6px; }
          #sonaar-player.sr-float.enable .store .track-store li + li {
            border-top: 1px solid rgba(138, 138, 138, 0.25); }
      #sonaar-player.sr-float.enable .store.opened {
        display: block;
        animation: showElement 0.25s ease-in-out both; }
      #sonaar-player.sr-float.enable .store:not(.opened) {
        animation: hideElement 0.25s ease-in-out both; }
    @media only screen and (max-width: 861px) {
      #sonaar-player.sr-float .player {
        width: calc(100% - 20px);
        max-width: unset;
        margin: 10px; }
        #sonaar-player.sr-float .player .close.btn-player.enable {
          opacity: 1; }
        #sonaar-player.sr-float .player .mobileProgress {
          opacity: 0;
          bottom: 0px; } }
    @media only screen and (min-width: 861px) {
      #sonaar-player.sr-float .mobileProgress {
        display: block;
        opacity: 0; } }
    @media only screen and (max-width: 540px) {
      #sonaar-player.sr-float .player .control {
        min-width: 42px; } }
    #sonaar-player.sr-float:not(.enable) .player {
      transition-delay: 350ms;
      width: 100% !important;
      max-width: 100%;
      margin: 0px;
      top: 0px !important;
      left: 0px !important; }
    #sonaar-player.sr-float .close.btn-player {
      right: 0px;
      top: 0px; }
      #sonaar-player.sr-float .close.btn-player.enable {
        transition: 400ms;
        opacity: 0;
        width: 17px;
        height: 15px; }
        #sonaar-player.sr-float .close.btn-player.enable:before, #sonaar-player.sr-float .close.btn-player.enable:after {
          height: 7px;
          top: 5px; }
        #sonaar-player.sr-float .close.btn-player.enable:before {
          left: 10px; }
        #sonaar-player.sr-float .close.btn-player.enable:after {
          left: 6px; }
  #sonaar-player.sr-fullwidth .sonaar_wave_base,
  #sonaar-player.sr-fullwidth .sonaar_wave_cut {
    height: 40px; }
  #sonaar-player.sr-mini_fullwidth:not(.show-list),
  #sonaar-player.sr-mini_fullwidth .player {
    height: 42px; }
  #sonaar-player.sr-mini_fullwidth {
    bottom: -48px; }
    #sonaar-player.sr-mini_fullwidth .player {
      border-width: 2px; }
      #sonaar-player.sr-mini_fullwidth .player .control .control--item {
        margin: 0 1px; }
    #sonaar-player.sr-mini_fullwidth .mobileProgress {
      top: -3px; }
    #sonaar-player.sr-mini_fullwidth .mobileProgressing {
      height: 3px; }
    #sonaar-player.sr-mini_fullwidth .playerNowPlaying .metadata {
      margin: 0 10px; }
      #sonaar-player.sr-mini_fullwidth .playerNowPlaying .metadata .track-album {
        display: none; }
    #sonaar-player.sr-mini_fullwidth .playerNowPlaying .album-art {
      margin-left: 0;
      height: 100%; }
    @media only screen and (min-width: 1026px) {
      #sonaar-player.sr-mini_fullwidth .store .track-store li a {
        font-size: 8px; }
        #sonaar-player.sr-mini_fullwidth .store .track-store li a i {
          font-size: 12px; } }
    @media only screen and (max-width: 540px) {
      #sonaar-player.sr-mini_fullwidth .player .control {
        min-width: 42px; } }
    #sonaar-player.sr-mini_fullwidth .close.btn-player.enable {
      width: 17px;
      height: 19px; }
      #sonaar-player.sr-mini_fullwidth .close.btn-player.enable:before, #sonaar-player.sr-mini_fullwidth .close.btn-player.enable:after {
        height: 7px;
        top: 5px; }
      #sonaar-player.sr-mini_fullwidth .close.btn-player.enable:before {
        left: 10px; }
      #sonaar-player.sr-mini_fullwidth .close.btn-player.enable:after {
        left: 6px; }
    #sonaar-player.sr-mini_fullwidth .sonaar_wave_base,
    #sonaar-player.sr-mini_fullwidth .sonaar_wave_cut {
      height: 27px; }
    #sonaar-player.sr-mini_fullwidth .control .control--item.list.sricon-list {
      font-size: 18px; }
    #sonaar-player.sr-mini_fullwidth .control .sricon-back, #sonaar-player.sr-mini_fullwidth .control .sricon-forward, #sonaar-player.sr-mini_fullwidth .control .sricon-play {
      font-size: 17px; }
  #sonaar-player .sr_speedRate div {
    color: #000;
    background: #fff; }

.sr_skip_number {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  position: absolute; }

.sr_skipBackward,
.sr_skipForward {
  font-size: 22px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center; }

.sr_speedRate {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  cursor: pointer; }
  .sr_speedRate div {
    color: #fff;
    background: #000;
    padding: 3px;
    text-align: center;
    border-radius: 3px;
    user-select: none; }

#sonaar-player .sr_speedRate:not(.active) div {
  opacity: 0.5; }

#sonaar-player [class*="sricon-"]::before {
  margin-left: 0;
  margin-right: 0; }

#sonaar-player.audio-playing .control .sricon-play:before {
  content: '\e81c'; }

#sonaar-player .control .sricon-back, #sonaar-player .control .sricon-forward, #sonaar-player .control .sricon-shuffle, #sonaar-player .control .srp_repeat {
  font-size: 19px; }

#sonaar-player .control .sricon-play {
  font-size: 26px; }

#sonaar-player .control .control--item.list.sricon-list {
  font-size: 20px; }
  #sonaar-player .control .control--item.list.sricon-list::before {
    width: 30px; }

#sonaar-player .sricon-volume {
  font-size: 22px; }

#sonaar-player.srp_mobile > .srp_spectrum_container {
  display: none !important; }

#sonaar-player .player .control .control--item.sricon-shuffle:not(.active), #sonaar-player .sricon-shuffle:not(.active) {
  opacity: 0.4; }

.sricon-volume.active:before, .iron-audioplayer[data-mute="true"] .sricon-volume:before {
  content: '\e826'; }

#sonaar-player div.volume {
  padding: 0 20px; }
  @media only screen and (max-width: 860px) {
    #sonaar-player div.volume {
      display: none; } }

#sonaar-player .volume,
.iron-audioplayer .volume {
  display: flex;
  align-items: center; }
  #sonaar-player .volume .slider-container,
  .iron-audioplayer .volume .slider-container {
    position: absolute;
    width: 30px;
    height: 100px;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -100%);
    background: #fff;
    z-index: 200;
    border: 1px solid #bbb;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    border-radius: 1px;
    display: none; }
    #sonaar-player .volume .slider-container .slide,
    .iron-audioplayer .volume .slider-container .slide {
      width: 100%;
      height: 70px;
      position: absolute;
      top: 20px;
      cursor: pointer; }
      #sonaar-player .volume .slider-container .slide:before,
      .iron-audioplayer .volume .slider-container .slide:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        left: 50%;
        top: -5px;
        opacity: 0.5; }
    #sonaar-player .volume .slider-container .ui-slider-range,
    .iron-audioplayer .volume .slider-container .ui-slider-range {
      position: absolute;
      width: 2px;
      height: 60%;
      bottom: 0;
      left: calc(50% - 1px); }
    #sonaar-player .volume .slider-container .ui-slider-handle,
    .iron-audioplayer .volume .slider-container .ui-slider-handle {
      width: 7px;
      height: 7px;
      border-radius: 100%;
      position: absolute;
      left: calc(50% - 3px);
      cursor: pointer; }
    #sonaar-player .volume .slider-container .trigger,
    .iron-audioplayer .volume .slider-container .trigger {
      height: calc(100% - 20px);
      width: 100%;
      top: 10px;
      position: absolute; }
  #sonaar-player .volume .slider-container:before,
  .iron-audioplayer .volume .slider-container:before {
    width: 0;
    height: 0;
    border: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #bbb;
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translate(-50%); }
  #sonaar-player .volume .slider-container:after,
  .iron-audioplayer .volume .slider-container:after {
    width: 0;
    height: 0;
    border: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%); }
  #sonaar-player .volume .sricon-volume,
  .iron-audioplayer .volume .sricon-volume {
    display: initial;
    width: 22px;
    max-height: calc(90% - 12px);
    cursor: pointer;
    position: relative;
    line-height: 0; }
    #sonaar-player .volume .sricon-volume:hover .slider-container,
    .iron-audioplayer .volume .sricon-volume:hover .slider-container {
      display: block; }

.iron-audioplayer .sr-cf-heading {
  position: relative;
  align-items: center;
  column-gap: 10px;
  display: flex;
  overflow: hidden;
  width: auto;
  padding-bottom: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff21; }
  .iron-audioplayer .sr-cf-heading.srmp3-heading--hide {
    display: none !important; }
  .iron-audioplayer .sr-cf-heading .srp_sort.asc::after {
    content: "\002B06";
    font-size: 10px;
    padding-left: 3px; }
  .iron-audioplayer .sr-cf-heading .srp_sort.desc::after {
    content: "\002B07";
    font-size: 10px;
    padding-left: 3px; }
  .iron-audioplayer .sr-cf-heading .sr-playlist-heading-child {
    pointer-events: auto;
    cursor: pointer;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    white-space: nowrap;
    font-size: 11px;
    width: 100%; }

.iron-audioplayer.srp_has_customfields.srp_tracklist_grid .srp_tracklist_waveform_enabled .tracklist-item-title {
  flex: 1; }

.iron-audioplayer.srp_has_customfields .tracklist-item-title {
  flex: 1; }

.iron-audioplayer.srp_has_customfields .srp_tracklist_waveform_enabled .tracklist-item-title {
  flex: 0 0 250px; }

.iron-audioplayer.srp_has_customfields .srp_tracklist_waveform_enabled .audio-track {
  overflow: hidden;
  flex: 1 1 fit-content; }

.iron-audioplayer.srp_has_customfields .srp_tracklist_waveform_enabled .sr-playlist-cf-container {
  flex: 0 1 fit-content; }

.iron-audioplayer.srp_has_customfields .sr-playlist-item {
  overflow-x: hidden; }

.iron-audioplayer.srp_has_customfields .srp_audio_trigger .audio-track {
  width: 10%; }

.iron-audioplayer.srp_has_customfields .sr-playlist-cf-container {
  align-items: center;
  font-size: 11px;
  flex: 1;
  display: flex;
  overflow: hidden;
  justify-content: space-evenly;
  column-gap: 10px;
  font-size: 0.8em; }
  .iron-audioplayer.srp_has_customfields .sr-playlist-cf-container .sr-playlist-cf-child {
    justify-content: left;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
    align-items: center; }
    .iron-audioplayer.srp_has_customfields .sr-playlist-cf-container .sr-playlist-cf-child img {
      margin-right: 5px;
      max-height: 20px; }
    .iron-audioplayer.srp_has_customfields .sr-playlist-cf-container .sr-playlist-cf-child i {
      margin-right: 5px; }

.iron-audioplayer.srp_has_customfields .audio-track {
  flex: 0 1 var(--srp-global-column-title-width); }

.iron-audioplayer.srp_has_customfields .sr-playlist-cf-container {
  flex: 0 1 calc(100% - var(--srp-global-column-title-width)); }

.iron-audioplayer.srp_has_customfields:not(.srp_tracklist_grid) .sr-playlist-item:not(.srp_extended) .song-store-list-menu {
  max-width: var(--srp-global-cta-desktop); }

.iron-audioplayer.srp_has_customfields .sr-playlist-item.srp_extended .song-store-list-menu {
  max-width: 999px; }

.iron-audioplayer.srp_has_customfields .sr-playlist-item .store-list {
  flex: 0 0 var(--srp-global-cta-desktop);
  align-items: center; }

.iron-audioplayer.srp_has_customfields:not(.srp_tracklist_grid) .playlist .store-list .song-store-list-menu {
  justify-content: flex-start !important;
  width: var(--srp-global-cta-desktop);
  overflow: hidden;
  position: absolute !important;
  right: 0; }

.iron-audioplayer.srp_has_customfields .srp_list:not(.srp_contentLoading) .song-store-list-menu {
  transition: 0.2s ease; }

.iron-audioplayer.srp_has_customfields.playlist_has_no_ctas .store-list {
  display: none; }

.iron-audioplayer.srp_has_customfields.srp_responsive .sr-playlist-item .store-list {
  flex: 0 0 var(--srp-global-cta-mobile); }

.iron-audioplayer.srp_has_customfields.srp_responsive .playlist .store-list .song-store-list-menu {
  width: var(--srp-global-cta-mobile); }

.iron-audioplayer.srp_has_customfields .store-list .srp_ellipsis {
  font-size: 14px;
  transition: 0.15s;
  top: 50%;
  transform: scale(1) translateY(-50%); }

.iron-audioplayer.srp_has_customfields .srp_extended .srp_ellipsis {
  opacity: 0;
  transform: scale(0) translateY(-50%); }

.iron-audioplayer.srp_has_customfields .srp_extendable .srp_ellipsis {
  padding: 5px;
  z-index: 55; }

.iron-audioplayer.srp_has_customfields .sr-playlist-item:not(.srp_extendable) .srp_ellipsis {
  display: none; }

.iron-audioplayer .srp_search_main {
  padding-bottom: 20px; }

.iron-audioplayer .playlist ul.srp_pagination {
  height: auto !important; }

.iron-audioplayer .playlist ul .ps__rail-y {
  height: 0px !important; }

.iron-audioplayer:not(.srp_has_customfields) .playlist.srp_tracklist_waveform_enabled .tracklist-item-title {
  flex: 0 1 350px; }

.iron-audioplayer .ui-slider-handle,
.iron-audioplayer .ui-slider-range {
  background: #000; }

.iron-audioplayer .sr_skip_number {
  font-size: 8px;
  line-height: 11px; }

.iron-audioplayer .sr-playlist-item[data-post-url]:not([data-post-url=""]) .sr_track_cover {
  cursor: pointer; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr_shuffle {
  display: flex; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr_speedRate {
  font-size: 8px;
  line-height: 9px;
  font-weight: 600; }
  .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr_speedRate div {
    border-width: 1.5px; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr_mute,
.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr_unmute {
  width: 18px; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_wave_box.srp_progressbar_inline {
  display: flex;
  flex-wrap: wrap; }
  .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_wave_box.srp_progressbar_inline .player {
    margin-right: 15px;
    flex-grow: 1;
    width: unset; }
    .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_wave_box.srp_progressbar_inline .player .sr_progressbar {
      width: auto; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_show_prevnext_bt .next, .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_show_prevnext_bt .previous {
  display: block !important; }

.iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .srp_control_left .srp_progressbar_inline {
  flex-direction: row-reverse; }

.iron-audioplayer.audio-playing .srp_player_boxed .sricon-play:before {
  content: '\e81c'; }

.iron-audioplayer.srp_favorites_loading .srp-fav-bt {
  opacity: 0.3; }

.iron-audioplayer .srp-fav-bt {
  transition: opacity 0.2s; }

.sr_mute {
  display: none; }

.iron-audioplayer[data-mute="true"] .sr_unmute {
  display: none; }

.iron-audioplayer[data-mute="true"] .sr_mute {
  display: initial; }

.sr_shuffle {
  cursor: pointer; }

.iron-audioplayer:not([data-shuffle="true"]) .control .sricon-shuffle {
  opacity: 0.4; }

.continuousPlayer-enable #srmp3_lyricsplaying_container {
  transition: 200ms;
  bottom: 90px; }
  @media only screen and (max-width: 540px) {
    .continuousPlayer-enable #srmp3_lyricsplaying_container {
      bottom: 62px; } }

@media only screen and (max-width: 768px) {
  .srp_sticky_ext_opened.continuousPlayer-enable #srmp3_lyricsplaying_container {
    bottom: 0px;
    z-index: 10100; }
  .srp_sticky_ext_opened.continuousPlayer-enable #srmp3_lyrics_container {
    z-index: 10050; } }

#srmp3_lyricsplaying_container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
  width: 100%;
  bottom: 0px;
  position: fixed;
  z-index: 8000; }

.srmp3_lyrics tt {
  font-family: inherit; }

.srmp3_lyrics p[begin] {
  margin-bottom: 1em; }
  @media only screen and (max-width: 540px) {
    .srmp3_lyrics p[begin] {
      margin-bottom: 0.7em; } }

.srmp3_lyrics p[begin] {
  transition: color 1s ease; }

.srmp3_lyrics_container {
  pointer-events: none;
  padding: 4px 10px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-color: #000;
  font-style: italic;
  font-size: 21px; }

.srmp3_lyrics_container:before,
.srmp3_lyrics_container:after {
  content: '♪';
  margin: 0px 8px; }

#srmp3_lyrics_container {
  position: fixed;
  color: #575757;
  background-color: #000;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 100px;
  text-align: left;
  z-index: 7999; }
  #srmp3_lyrics_container .srmp3_lyrics {
    font-size: 48px;
    font-weight: 700;
    line-height: 1em;
    height: calc(100vh - 320px);
    top: 100px;
    margin-top: 20px;
    overflow-y: hidden; }
    #srmp3_lyrics_container .srmp3_lyrics .ps__rail-y {
      height: 0px !important; }
    @media only screen and (max-width: 540px) {
      #srmp3_lyrics_container .srmp3_lyrics {
        font-size: 24px;
        line-height: 1em;
        height: calc(100vh - 150px); } }
  #srmp3_lyrics_container .srmp3_lyrics_title {
    color: #fff;
    font-size: 24px; }
    @media only screen and (max-width: 540px) {
      #srmp3_lyrics_container .srmp3_lyrics_title {
        font-size: 18px; } }
  #srmp3_lyrics_container .srmp3_lyrics_album {
    color: #a7a7a7;
    font-size: 18px; }
  @media only screen and (max-width: 540px) {
    #srmp3_lyrics_container {
      padding: 30px;
      bottom: 50px; } }
  #srmp3_lyrics_container .sricon-close-circle {
    position: absolute;
    top: 50px;
    right: 50px;
    font-size: 48px;
    line-height: 1;
    cursor: pointer; }
    @media only screen and (max-width: 767px) {
      #srmp3_lyrics_container .sricon-close-circle {
        top: 25px;
        right: 25px; } }
  @media only screen and (max-width: 767px) {
    #srmp3_lyrics_container .srmp3_lyrics_album,
    #srmp3_lyrics_container .srmp3_lyrics_title {
      padding-right: 25px; } }

.srp_player_boxed .srp_note {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 100%;
  max-height: calc(100% - 20px);
  width: calc(100% - 20px);
  overflow-y: auto; }
  .srp_player_boxed .srp_note h1 {
    width: calc(100% - 35px); }

.srp_note {
  position: relative;
  background: #fff;
  color: #000;
  width: 100%;
  z-index: 25;
  padding: 25px;
  border-radius: 4px; }
  .sr-playlist-item .srp_note {
    margin-top: 10px; }
  .srp_note ul {
    margin: inherit !important;
    padding: 15px !important;
    height: initial !important;
    overflow-y: visible !important;
    overflow-x: visible !important; }
    .srp_note ul li {
      list-style: disc !important;
      padding: initial !important; }
  .srp_note .sr_close {
    top: 20px;
    right: 20px; }
    .sr-playlist-item .srp_note .sr_close {
      display: none; }

.srp_note_title,
.srp-modal-title {
  font-size: 1.7em;
  line-height: 1.2;
  font-weight: inherit;
  color: inherit;
  margin-bottom: 1rem; }

.srp-modal-subtitle {
  font-size: 1.2em;
  line-height: 1.2;
  font-weight: inherit;
  color: inherit;
  margin-bottom: 1rem; }

.srp-modal-product-desc {
  margin-bottom: 1rem; }

@media only screen and (max-width: 450px) {
  #sonaar-player[data-ui-items="1"] .playerNowPlaying {
    width: calc(100% - 50px); }
  #sonaar-player[data-ui-items="2"] .playerNowPlaying {
    width: calc(100% - 100px); }
  #sonaar-player[data-ui-items="3"] .playerNowPlaying {
    width: calc(100% - 150px); }
  #sonaar-player[data-ui-items="4"] .playerNowPlaying {
    width: calc(100% - 200px); }
  #sonaar-player .playerNowPlaying {
    width: calc(100% - 75px); }
  #sonaar-player[data-ui-items="1"] .playerNowPlaying.no-image {
    width: calc(100% - 45px); }
  #sonaar-player[data-ui-items="2"] .playerNowPlaying.no-image {
    width: calc(100% - 75px); }
  #sonaar-player[data-ui-items="3"] .playerNowPlaying.no-image, #sonaar-player[data-ui-items="4"] .playerNowPlaying.no-image {
    width: calc(100% - 115px); }
  #sonaar-player .playerNowPlaying.no-image {
    width: 100%; }
  #sonaar-player .playerNowPlaying.no-image .metadata {
    width: 100%; } }

.sonaar-player-slidefade-enter-active {
  transition: 800ms all ease; }

.sonaar-player-slidefade-leave-active {
  transition: all 0.4s ease; }

.sonaar-player-slidefade-enter {
  transform: scale(0.8);
  opacity: 0; }

.sonaar-player-slidefade-leave-to {
  opacity: 0; }

@media only screen and (max-width: 1025px) {
  .sonaar-player-storefade-enter-active {
    transition: all 0.03s ease; } }

@media only screen and (max-width: 1025px) {
  .sonaar-player-storefade-leave-active {
    transition: all 0.03s ease; } }

@media only screen and (max-width: 1025px) {
  .sonaar-player-storefade-enter {
    transform: translateY(70px); } }

@media only screen and (max-width: 1025px) {
  .sonaar-player-storefade-leave-to {
    transform: translateY(70px); } }

.woocommerce-page.single-product .iron-audioplayer .srp_tracklist {
  margin: 0px; }

@media (max-width: 991px) {
  .woocommerce-page.single-product .iron-audioplayer .playlist {
    margin-top: 0px; } }

.woocommerce-LoopProduct-link .tracklist-item-time {
  display: none; }

.woocommerce-LoopProduct-link .iron-audioplayer .player .wave {
  margin: 0px 0px; }

.woocommerce-LoopProduct-link .iron-audioplayer .sonaar-Artwort-box {
  margin-bottom: initial; }

.woocommerce ul.products li.product a .album-art img {
  margin: 0px; }

.woocommerce .iron-audioplayer .playlist .audio-track {
  text-align: left; }

.woocommerce ul.products li.product.srmp3-product.srmp3-product__hideimage a img.attachment-woocommerce_thumbnail, .woocommerce ul.products li.product.srmp3-product.srmp3-product__hideimage a img.woocommerce-placeholder {
  display: none; }

@media only screen and (min-width: 540px) {
  #pusher-wrap.sonaar-list-active {
    -webkit-animation: blur 0.5s linear forwards;
    -moz-animation: blur 0.5s linear forwards;
    -ms-animation: blur 0.5s linear forwards;
    -o-animation: blur 0.5s linear forwards;
    animation: blur 0.5s linear forwards; } }

@-webkit-keyframes blur {
  from {
    -webkit-filter: blur(0);
    filter: blur(0); }
  to {
    -webkit-filter: blur(20px);
    filter: blur(20px); } }

@-moz-keyframes blur {
  from {
    -webkit-filter: blur(0);
    filter: blur(0); }
  to {
    -moz-filter: blur(20px);
    filter: blur(20px); } }

@keyframes blur {
  from {
    -webkit-filter: blur(0);
    filter: blur(0); }
  to {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    filter: blur(20px); } }

/*
 * Container style
 */
.srp_tracklist .ps,
.srmp3_lyrics.ps {
  height: 250px;
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto; }

.srp-modal-medium-size {
  max-width: 100%;
  width: 800px; }

.srp-modal-variant-file {
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 700; }

.srp-license-preview-modal .srp_variant_terms {
  margin-top: 35px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.srp_variant_terms .view-license-button {
  width: 100%; }

.srp-modal-share {
  max-width: 100%;
  width: 600px; }
  .srp-modal-share .srp-share-title {
    margin: 0 28px 0 0;
    padding: 0;
    font-size: 21px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .srp-modal-share .srp-share-trackinfo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 15px;
    margin: 12px 0 24px; }
    .srp-modal-share .srp-share-trackinfo-container .srp-share-tracktitle {
      font-size: 18px;
      font-weight: 600;
      overflow: hidden; }
    .srp-modal-share .srp-share-trackinfo-container .srp-share-img {
      display: flex;
      flex-shrink: 0;
      width: 72px;
      height: 72px;
      border-radius: 3px; }
  .srp-modal-share .srp-modal-sticky-player-container {
    display: flex;
    column-gap: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center; }
    .srp-modal-share .srp-modal-sticky-player-container input#stickyPlayerCheckbox, .srp-modal-share .srp-modal-sticky-player-container input#stickyPlayerTimeCheckbox {
      width: 15px;
      height: 15px; }
    .srp-modal-share .srp-modal-sticky-player-container .srp-modal-sticky-player-label {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .8px; }
    .srp-modal-share .srp-modal-sticky-player-container #stickyPlayerCurrentTime {
      height: 30px;
      font-size: 14px;
      width: 85px;
      padding: 10px; }
  .srp-modal-share .srp-modal-linkurl-container .srp-modal-linkurl-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px; }
  .srp-modal-share .srp-modal-linkurl-container .srp-modal-linkurl-input-container {
    padding: 0 5px 0 12px;
    overflow: hidden;
    border: unset;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    border-radius: 5px;
    background-color: #dfdfdf;
    margin: 5px 0; }
    .srp-modal-share .srp-modal-linkurl-container .srp-modal-linkurl-input-container i {
      margin-left: 0;
      margin-right: -5px;
      font-size: 18px;
      color: #9b9b9b; }
    .srp-modal-share .srp-modal-linkurl-container .srp-modal-linkurl-input-container input {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 14px;
      width: 100%;
      height: 100%;
      padding: 0 15px;
      font-size: 13px;
      font-weight: 500;
      background-color: transparent;
      border-radius: 5px;
      box-shadow: none;
      border: none; }
      .srp-modal-share .srp-modal-linkurl-container .srp-modal-linkurl-input-container input:focus-visible {
        outline: unset; }
    .srp-modal-share .srp-modal-linkurl-container .srp-modal-linkurl-input-container button {
      color: inherit;
      background: transparent;
      box-sizing: border-box;
      position: relative;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      outline: none;
      border: none;
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      white-space: nowrap;
      text-decoration: none;
      vertical-align: baseline;
      text-align: center;
      margin: 0;
      line-height: 36px;
      padding: 0 16px;
      border-radius: 4px;
      overflow: visible; }
  .srp-modal-share .srp-modal-socialshare-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 24px;
    column-gap: 25px;
    row-gap: 20px; }
    .srp-modal-share .srp-modal-socialshare-container a {
      text-decoration: none;
      color: var(--srp-global-modal-btn-bg-color);
      font-size: 42px; }
    .srp-modal-share .srp-modal-socialshare-container a.srp-share-mobile-more i {
      font-size: 26px; }
    .srp-modal-share .srp-modal-socialshare-container a.srp-share-mobile-more {
      display: flex;
      height: 42px;
      align-items: center; }
    .srp-modal-share .srp-modal-socialshare-container .sricon {
      -webkit-font-smoothing: antialiased;
      display: flex;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1; }
      .srp-modal-share .srp-modal-socialshare-container .sricon:before {
        margin-right: 0px;
        margin-left: 0px; }

.srp_popup_no_image .srp-modal-product-variation-trackinfo-container {
  flex-direction: column-reverse; }

/* Woocommerce Variantion Modal*/
.srp-modal-product-variation {
  /*max-width: 100%;
  width: 800px;*/ }
  .srp-modal-product-variation .srp-modal-product-variation-trackinfo-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 15px;
    margin: 12px 0 24px; }
    .srp-modal-product-variation .srp-modal-product-variation-trackinfo-container .srp-modal-image {
      display: flex;
      flex-shrink: 0;
      width: 72px;
      height: 72px;
      border-radius: 3px; }
  .srp-modal-product-variation .srp-modal-title {
    font-weight: 700; }
  .srp-modal-product-variation .srp-modal-variant-name {
    font-weight: 500; }
  .srp-modal-product-variation .srp-modal-subtitle {
    font-size: 11px;
    text-transform: uppercase; }
  .srp-modal-product-variation .srp-modal-variant-desc {
    font-size: 11px;
    text-transform: uppercase;
    margin-top: 10px; }

.srp-modal-variation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 20px 0 50px; }

.srp-modal-variant-selector {
  background-color: #0202022b;
  border: 1px solid #fff0;
  border-radius: 8px;
  padding: 10px 10px;
  max-width: calc(33% - 7px);
  min-width: 170px;
  width: 100%;
  cursor: pointer; }
  .srp-modal-variant-selector:hover, .srp-modal-variant-selector.srp_selected {
    background-color: #02020261; }
  @media only screen and (max-width: 860px) {
    .srp-modal-variant-selector {
      max-width: initial; } }

.srp-modal-variant-main {
  display: flex;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 20px; }
  @media only screen and (max-width: 860px) {
    .srp-modal-variant-main {
      justify-content: flex-start; } }

.srp-modal-variant-main,
.srp_variant_terms {
  border-top: 1px solid rgba(255, 255, 255, 0.08); }

.srp_term_title {
  font-weight: bold;
  margin: 10px 0; }

.srp_variant_terms_container.srp_variant_terms--column {
  display: flex;
  flex-wrap: wrap;
  column-gap: 15px; }
  .srp_variant_terms_container.srp_variant_terms--column .srp_variant_terms {
    max-width: 300px;
    min-width: 150px;
    flex: 1; }
  .srp_variant_terms_container.srp_variant_terms--column .srp_term_meta {
    width: 100%; }

.srp_term_meta_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }

.srp_term_meta {
  display: flex;
  align-items: center;
  width: calc(100% / 3);
  height: 60px;
  font-size: 0.9rem; }
  .srp_term_meta:before {
    font-size: 22px; }
  @media only screen and (max-width: 860px) {
    .srp_term_meta {
      width: 50%; } }
  .srp_term_meta i[class*=" fa-"] {
    font-family: 'Font Awesome 5 Free';
    font-style: unset; }

.srp_term_meta_label {
  padding: 0 5px;
  font-size: 0.8em;
  text-transform: uppercase; }

.srp-modal-variant-price {
  flex-grow: 1;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1; }

.srp-modal-custom-link a {
  text-decoration: unset;
  font-size: 16px;
  font-weight: 600;
  color: var(--srp-global-modal-btn-bg-color); }
  .srp-modal-custom-link a:hover {
    color: var(--srp-global-modal-btn-bg-color);
    filter: brightness(0.5); }

.srp-modal-custom-link i {
  margin-right: 5px; }

.srp-modal-variation-details:not(.srp_selected) {
  display: none; }

.srp-modal-variation-details .srp-modal-variant-price {
  font-size: 1.8em; }

.srp_reg_price {
  text-decoration: line-through;
  opacity: 0.7; }

.srmp3_button_launcher_style-round .srmp3_sonaar_ts_shortcode.srmp3_sonaar_ts_shortcode_button {
  width: 200px;
  height: 200px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center; }

.srmp3_sonaar_ts_shortcode.sricon-play::before {
  vertical-align: middle;
  font-size: 0.75em;
  text-decoration: none;
  margin: 0em 0.2em 0.22em 0em;
  /* margin-bottom: 0.2em!important;
      margin-right: 0.2em;*/ }

.srmp3_sonaar_ts_shortcode.srmp3_sonaar_ts_shortcode_button {
  background-color: #000;
  border-radius: 4px;
  padding: 5px 15px;
  color: #fff;
  text-decoration: none !important;
  width: fit-content; }
  .srmp3_sonaar_ts_shortcode.srmp3_sonaar_ts_shortcode_button.srmp3_sonaar_ts--block {
    display: block; }

.srp_button {
  color: inherit;
  text-decoration: inherit;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 4px;
  background-color: #0170b9; }
  .srp_button:hover {
    filter: brightness(0.7); }
  .srp_button .fas.fa-cart-plus {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; }
  .srp_button i {
    padding-right: 10px; }
  .srp_button.added:after {
    font-family: WooCommerce;
    content: "\e017";
    margin-left: 0.53em;
    vertical-align: bottom; }

#sonaar-player .tracklist .wc-forward {
  font-size: 0.8em !important; }

#sonaar-player .player-row .wc-forward {
  position: absolute;
  color: #000 !important;
  display: block;
  background: #fff;
  padding: 10px;
  border: 1px #000 solid;
  top: -42px; }

.woocommerce .iron-audioplayer .sr-playlist-item .wc-forward {
  padding-top: 0px; }

.srmp3_sonaar_ts_shortcode.sricon-play.audio-playing:before {
  content: '\e81c'; }

.srmp3_sonaar_ts_shortcode.audio-playing .srp_ts_content {
  display: none; }

.srmp3_sonaar_ts_shortcode:not(.audio-playing) .srp_ts_content_pause {
  display: none; }

/*
.sr_track_inline_cta_bt__no .srp_has_customfields .store-list{
  flex: initial !important; 
}
*/
.srp_hidden.sr-playlist-cf-child, .srp_hidden.srp_sort {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  position: absolute; }

.srp_filter_error {
  color: red;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px; }

.srp-filters-container {
  display: flex;
  justify-content: start;
  column-gap: 12px;
  width: 100%;
  row-gap: 12px;
  flex-wrap: wrap;
  align-items: start; }
  .srp-filters-container input.multiselect__input {
    color: inherit;
    margin: 0px;
    border: none;
    padding: inherit;
    transition: unset; }
  .srp-filters-container .srp-filters-widget {
    font-size: 16px;
    width: 200px; }
  .srp-filters-container .multiselect {
    color: inherit; }
    .srp-filters-container .multiselect .multiselect__select {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 15px; }
      .srp-filters-container .multiselect .multiselect__select:before {
        position: static;
        margin-top: 0;
        -webkit-transition: -webkit-transform 0.2s ease;
        transition: -webkit-transform 0.2s ease;
        transition: transform 0.2s ease;
        transition: transform 0.2s ease, -webkit-transform 0.2s ease;
        -webkit-transform: rotateZ(270deg);
        transform: rotateZ(270deg); }
    .srp-filters-container .multiselect.multiselect--active .multiselect__select {
      -webkit-transform: unset;
      transform: unset; }
      .srp-filters-container .multiselect.multiselect--active .multiselect__select:before {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg); }
  .srp-filters-container .multiselect__placeholder {
    color: inherit;
    margin-bottom: initial;
    padding-top: initial; }
  .srp-filters-container .multiselect--active {
    z-index: 2; }
  .srp-filters-container .srp-filters-widget .multiselect--active .multiselect__placeholder {
    display: inline-block; }
  .srp-filters-container .multiselect__single {
    margin-bottom: 0px; }
  .srp-filters-container .multiselect__single, .srp-filters-container .multiselect__multiple {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .srp-filters-container .multiselect__input, .srp-filters-container .multiselect__single {
    background: unset; }
  .srp-filters-container .multiselect__tags {
    display: flex;
    align-items: center;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    color: #000;
    background-color: #fff; }
  .srp-filters-container .multiselect__content-wrapper {
    position: absolute;
    margin-top: -1px;
    width: inherit;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    background: #000; }
    .srp-filters-container .multiselect__content-wrapper ul.multiselect__content {
      color: inherit;
      width: inherit; }
    .srp-filters-container .multiselect__content-wrapper li.multiselect__element {
      color: inherit; }
      .srp-filters-container .multiselect__content-wrapper li.multiselect__element:not(:nth-last-child(3)) {
        border-bottom: 1px solid #ffffff29; }
  .srp-filters-container .multiselect__option {
    display: flex;
    min-height: initial;
    padding: 12px 5px; }
    .srp-filters-container .multiselect__option span {
      overflow: hidden;
      text-overflow: ellipsis; }
  .srp-filters-container .multiselect__option, .srp-filters-container .multiselect__tags, .srp-filters-container .multiselect, .srp-filters-container .multiselect__input, .srp-filters-container .multiselect__single {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit; }
  .srp-filters-container .multiselect__option--selected {
    font-weight: inherit;
    color: inherit;
    background: unset; }
    .srp-filters-container .multiselect__option--selected.multiselect__option--highlight {
      color: inherit;
      background: unset; }
      .srp-filters-container .multiselect__option--selected.multiselect__option--highlight:after {
        color: inherit;
        background: unset; }
  .srp-filters-container .multiselect__option:after {
    font-size: inherit; }
  .srp-filters-container .multiselect__option--selected::after {
    content: "✓" !important;
    margin-left: 20px;
    color: inherit; }
  .srp-filters-container .multiselect__option:hover {
    background: #cccccc2b;
    border-radius: 6px;
    color: inherit; }
  .srp-filters-container .multiselect__option--highlight {
    background: unset;
    color: inherit; }

.srp_range_wrapper {
  width: 100%;
  display: flex;
  column-gap: 10px;
  flex-wrap: wrap; }
  .srp_range_wrapper .srp_range_container {
    width: 200px;
    flex-grow: 1;
    margin-bottom: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    /* process style */ }
    .srp_range_wrapper .srp_range_container .srp_range_header {
      margin-bottom: 10px;
      display: flex;
      font-size: 14px;
      flex-wrap: wrap;
      column-gap: 10px;
      justify-content: space-between;
      align-items: center; }
    .srp_range_wrapper .srp_range_container .vue-slider-process {
      background-color: var(--e-global-color-primary, #000);
      border-radius: 15px; }
    .srp_range_wrapper .srp_range_container .srp_range_buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 3px;
      row-gap: 3px; }
      .srp_range_wrapper .srp_range_container .srp_range_buttons .srp_filter_button {
        font-size: 11px;
        padding: 5px 10px;
        color: #fff;
        background-color: var(--e-global-color-primary, #000);
        border: unset; }
        .srp_range_wrapper .srp_range_container .srp_range_buttons .srp_filter_button:focus {
          opacity: 0.8;
          outline: unset; }
        .srp_range_wrapper .srp_range_container .srp_range_buttons .srp_filter_button:hover {
          color: #fff;
          padding: 5px 10px;
          background-color: var(--e-global-color-primary, #000); }
  .srp_range_wrapper .vue-slider {
    margin-bottom: 30px;
    z-index: 1; }
  .srp_range_wrapper .vue-slider-mark {
    z-index: 4; }
  .srp_range_wrapper .vue-slider-mark:first-child .vue-slider-mark-step, .srp_range_wrapper .vue-slider-mark:last-child .vue-slider-mark-step {
    display: none; }
  .srp_range_wrapper .vue-slider-mark-step {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.16); }
  .srp_range_wrapper .vue-slider-mark-label {
    font-size: 14px;
    white-space: nowrap; }
  .srp_range_wrapper .vue-slider-dot-handle {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32); }
  .srp_range_wrapper .vue-slider-dot-handle-focus {
    box-shadow: 0px 0px 1px 2px var(--e-global-color-primary, #00000050); }
  .srp_range_wrapper .vue-slider-dot-tooltip-inner {
    font-size: 14px;
    white-space: nowrap;
    padding: 2px 5px;
    min-width: 20px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    border-color: var(--e-global-color-primary, #000);
    background-color: var(--e-global-color-primary, #000);
    box-sizing: content-box; }
  .srp_range_wrapper .vue-slider-dot-tooltip-inner::after {
    content: "";
    position: absolute; }
  .srp_range_wrapper .vue-slider-dot-tooltip-inner-top::after {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-top-color: inherit; }
  .srp_range_wrapper .vue-slider-dot-tooltip-wrapper {
    opacity: 0;
    transition: all 0.3s; }
  .srp_range_wrapper .vue-slider-dot-tooltip-wrapper-show {
    opacity: 1; }
  .srp_range_wrapper .vue-slider-dot-tooltip-inner {
    -webkit-transition: opacity 0.2s linear, -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: opacity 0.2s linear, -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s linear;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s linear, -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .srp_range_wrapper .vue-slider-dot-tooltip-show .vue-slider-dot-tooltip-inner {
    opacity: 1; }
  .srp_range_wrapper .vue-slider-dot-tooltip-show .vue-slider-dot-tooltip-inner-top {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  .srp_range_wrapper .vue-slider-dot-tooltip-inner-top {
    -webkit-transform: translateY(50%) scale(0.01) rotate(0deg);
    transform: translateY(50%) scale(0.01) rotate(0deg); }
  .srp_range_wrapper .vue-slider-dot-tooltip-inner-top .vue-slider-dot-tooltip-text {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  .srp_range_wrapper .vue-slider-mark-label {
    font-size: 9px; }

.srp_chips {
  margin-top: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  justify-content: start;
  display: flex;
  column-gap: 3px;
  row-gap: 3px; }
  .srp_chips .srp_chip {
    display: flex;
    align-items: center;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
    height: fit-content;
    font-size: 12px;
    margin: 2px;
    border-radius: 20px;
    padding: 3px 8px 3px 15px;
    text-transform: capitalize;
    transition: all .2s ease-out,opacity .2s ease-out; }
    .srp_chips .srp_chip:first-child {
      margin-left: 0px; }
    .srp_chips .srp_chip:hover {
      background-color: #fff;
      color: #000;
      border-color: #000; }
    .srp_chips .srp_chip .sricon-close-circle {
      font-size: 18px;
      margin-left: 5px; }

.srp_filter_container {
  /* Define the initial state and transition for the list items */
  /* Initially, tags are visible */ }
  .srp_filter_container .srp_filter_button_label {
    display: flex; }
  .srp_filter_container .srp_filter_buttons_list {
    margin: 0;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: left;
    column-gap: 6px;
    row-gap: 6px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px; }
    .srp_filter_container .srp_filter_buttons_list li {
      white-space: nowrap;
      list-style: none;
      position: relative;
      clear: both; }
      .srp_filter_container .srp_filter_buttons_list li .srp_filter_button {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-user-select: none;
        transition: all 300ms;
        border: solid 1px #c5c5c5;
        color: #c5c5c5;
        background-color: #000;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
        cursor: pointer; }
        .srp_filter_container .srp_filter_buttons_list li .srp_filter_button:hover:not(.srp_filter_button--active) {
          color: #fff; }
        .srp_filter_container .srp_filter_buttons_list li .srp_filter_button.srp_filter_button--active {
          background-color: #fff;
          color: #000; }
  .srp_filter_container .list-enter-active, .srp_filter_container .list-leave-active {
    transition: opacity 0.5s, transform 0.5s; }
  .srp_filter_container .list-enter, .srp_filter_container .list-leave-to {
    opacity: 0;
    transform: translateY(-1em); }
  .srp_filter_container li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.5s, transform 1.5s; }
    .srp_filter_container li.hidden-tag {
      opacity: 0;
      transform: translateY(1em); }

.srp-filter-more-link {
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 15px; }

.srp_pagination_container {
  transition: all 250ms;
  font-size: 16px;
  -webkit-user-select: none;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: auto;
  grid-gap: 10px;
  margin-top: 20px;
  margin-bottom: 15px;
  color: #fff; }
  .srp_pagination_container .srp_pagination_arrows {
    transition: all 250ms;
    font-size: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    pointer-events: all;
    -webkit-user-select: none;
    /* Safari */
    color: inherit;
    background-color: rgba(0, 0, 0, 0);
    min-width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px 5px;
    border-radius: 999px; }
    .srp_pagination_container .srp_pagination_arrows:hover {
      border: 2px solid white;
      color: inherit; }
  .srp_pagination_container .srp_pagination {
    display: flex;
    justify-content: center;
    grid-gap: 10px;
    height: auto !important; }
    .srp_pagination_container .srp_pagination .disabled {
      pointer-events: none; }
    .srp_pagination_container .srp_pagination .active span {
      pointer-events: none;
      background-color: #fff;
      color: #000; }
    .srp_pagination_container .srp_pagination span {
      transition: all 250ms;
      color: inherit;
      background-color: rgba(0, 0, 0, 0);
      min-width: 30px;
      height: 30px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding: 5px 5px;
      border-radius: 999px; }
      .srp_pagination_container .srp_pagination span:hover {
        color: inherit; }

.srp_notfound {
  display: none;
  margin: 10px; }
  .srp_notfound .srp_notfound--title {
    font-weight: bold;
    font-size: 21px; }
  .srp_notfound .srp_notfound--subtitle {
    font-size: 16px;
    opacity: 0.6; }

[style*="visibility: hidden;"] .srp_search_main .srp_search_container, [style*="visibility: hidden;"] .srp_filter_container {
  visibility: hidden !important;
  opacity: 0 !important; }

.srp_search_main {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 5px; }
  .srp_search_main .srp_search_container {
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
    min-height: 40px;
    flex-grow: 1; }
    .srp_search_main .srp_search_container .srp_search {
      font-family: inherit;
      font-size: 14px;
      padding-left: 45px !important;
      color: #fff;
      border-radius: 4px;
      background: #000;
      border: none;
      border-width: 1px;
      outline: none;
      max-width: 100%;
      width: 100%;
      min-height: 40px;
      padding: 15px; }
      .srp_search_main .srp_search_container .srp_search::placeholder {
        color: inherit;
        opacity: 0.5; }
    .srp_search_main .srp_search_container .srp_reset_search {
      position: relative;
      width: 0;
      right: 35px;
      pointer-events: all;
      cursor: pointer; }
    .srp_search_main .srp_search_container .fa-search {
      position: relative;
      left: 20px;
      width: 0;
      font-size: 14px;
      color: #828282; }

.srp_pagination li:not(.active) .page {
  cursor: pointer; }

/*TRACKLIST GRID*/
.srp_tracklist_grid .srp_tracklist > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; }

.srp_tracklist_grid[data-col="6"] .srp_tracklist > ul {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

.srp_tracklist_grid[data-col="5"] .srp_tracklist > ul {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.srp_tracklist_grid[data-col="4"] .srp_tracklist > ul {
  grid-template-columns: 1fr 1fr 1fr 1fr; }

.srp_tracklist_grid[data-col="3"] .srp_tracklist > ul {
  grid-template-columns: 1fr 1fr 1fr; }

.srp_tracklist_grid[data-col="2"] .srp_tracklist > ul {
  grid-template-columns: 1fr 1fr; }

.srp_tracklist_grid[data-col="1"] .srp_tracklist > ul {
  grid-template-columns: 1fr; }

@media only screen and (max-width: 768px) {
  .srp_tracklist_grid[data-col-tablet="6"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-tablet="5"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-tablet="4"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-tablet="3"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-tablet="2"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr; }
  .srp_tracklist_grid[data-col-tablet="1"] .srp_tracklist > ul {
    grid-template-columns: 1fr; } }

@media only screen and (max-width: 767px) {
  .srp_tracklist_grid[data-col-mobile="6"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-mobile="5"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-mobile="4"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-mobile="3"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr 1fr; }
  .srp_tracklist_grid[data-col-mobile="2"] .srp_tracklist > ul {
    grid-template-columns: 1fr 1fr; }
  .srp_tracklist_grid[data-col-mobile="1"] .srp_tracklist > ul {
    grid-template-columns: 1fr; } }

.srp_tracklist_grid .sr-playlist-item-flex {
  flex-direction: column;
  gap: 10px;
  align-items: flex-start !important;
  justify-content: flex-start !important; }
  .srp_tracklist_grid .sr-playlist-item-flex .audio-track {
    width: 100%;
    flex: none; }
  .srp_tracklist_grid .sr-playlist-item-flex .store-list {
    width: 100%;
    flex: none !important;
    margin-top: auto; }
    .srp_tracklist_grid .sr-playlist-item-flex .store-list .song-store-list-menu {
      justify-content: inherit;
      width: 100% !important; }
    .srp_tracklist_grid .sr-playlist-item-flex .store-list .song-store-list-container {
      width: inherit;
      flex-wrap: wrap;
      gap: 6px; }
    .srp_tracklist_grid .sr-playlist-item-flex .store-list .sr_store_wc_round_bt {
      width: 100%;
      padding: 10px; }
  .srp_tracklist_grid .sr-playlist-item-flex .sr-playlist-cf-container {
    width: 100%;
    flex: none;
    justify-content: flex-start;
    column-gap: 15px;
    flex-wrap: wrap; }
  .srp_tracklist_grid .sr-playlist-item-flex .sr-playlist-cf-child {
    flex: none !important;
    width: auto  !important; }
  .srp_tracklist_grid .sr-playlist-item-flex .srp_noteButton {
    margin-left: 15px; }
    .srp_tracklist_grid .sr-playlist-item-flex .srp_noteButton i:before {
      margin: 0; }
    .srp_tracklist_grid .sr-playlist-item-flex .srp_noteButton .sricon-info {
      margin-left: 4px; }
  .srp_tracklist_grid .sr-playlist-item-flex .sricon-spinner-wrap {
    width: 20px !important;
    margin-top: -5px;
    margin-left: 2px; }

.srp_tracklist_grid .sr_track_cover {
  margin-left: -20px;
  margin-top: -20px;
  width: calc(100% + 40px) !important;
  max-width: unset; }

.srp_tracklist_grid .sr-cf-heading {
  display: none !important; }

.srp_tracklist_grid[data-playertemplate="skin_boxed_tracklist"] .srp_player_boxed + .playlist {
  padding-top: 20px; }

.srp_tracklist_grid .sr-playlist-item {
  overflow: hidden; }

.srp_tracklist_grid .srp_note_title {
  font-size: 1.2em; }

.srp_tracklist_grid .srp_tracklist-item-date {
  height: initial;
  margin-left: 0;
  padding-left: 0 !important; }

.srp_tracklist_grid .sr-playlist-item .srp_track_description {
  margin-top: 0; }

.srp_tracklist_grid .srp_note {
  padding: 5px; }

.srp_tracklist_grid .srp_list.ps .sr-playlist-item {
  height: max-content; }

.srp_tracklist_play_cover:not(.srp_tracklist_grid) .sr_track_cover .srp_play {
  transform: scale(0.5); }

.srp_tracklist_play_cover .sr_track_cover {
  position: relative; }
  .srp_tracklist_play_cover .sr_track_cover:after {
    content: "";
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0; }
  .srp_tracklist_play_cover .sr_track_cover .srp_play {
    cursor: pointer;
    z-index: 1; }

.srp_tracklist_play_cover .track-number {
  padding-left: 0px !important; }
  .srp_tracklist_play_cover .track-number .sricon-play {
    display: none; }

@media only screen and (min-width: 768px) {
  .srp_tracklist_play_cover.srp_tracklist_play_cover_hover .sr_track_cover:after, .srp_tracklist_play_cover.srp_tracklist_play_cover_hover .sr_track_cover .srp_play {
    transition: 0.15s ease; }
  .srp_tracklist_play_cover.srp_tracklist_play_cover_hover .sr-playlist-item:not(:hover):not(.current) .sr_track_cover:after, .srp_tracklist_play_cover.srp_tracklist_play_cover_hover .sr-playlist-item:not(:hover):not(.current) .sr_track_cover .srp_play {
    opacity: 0; }
  .srp_tracklist_play_cover.srp_tracklist_play_cover_hover .sr-playlist-item:not(:hover):not(.current) .sr_track_cover .srp_play {
    transform: translateY(30%); } }

.srp_tracklist-item-date + .srp_tracklist-item-date {
  display: none; }

.elementor-widget-music-player .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"].srp_tracklist_grid img.sr_track_cover {
  max-width: unset !important; }

.sr_tracklenght_tooltip {
  opacity: 0;
  transform: translateY(20px) scale(0.5);
  transition: transform 0.2s ease;
  z-index: 9999;
  text-align: center;
  width: 60px;
  position: absolute;
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 2px;
  font-size: 11px; }

.sr_tracklenght_tooltip_vertical {
  display: none;
  z-index: 9999;
  position: absolute;
  width: 1px;
  background-color: black;
  pointer-events: none; }

.iron-audioplayer {
  position: relative; }
  .iron-audioplayer .srp_player_boxed .srp_progressbar_inline .control {
    margin-top: 0px; }
  .iron-audioplayer .srp_player_boxed .player .srp_spectrum_container {
    display: flex;
    justify-content: flex-start; }
  .iron-audioplayer .srp_spectrum_container, .iron-audioplayer .srp_spectrum {
    transition: 0.3s ease;
    max-height: 1000px; }
  .iron-audioplayer .playlist .srp_spectrum_container, .iron-audioplayer .playlist .srp_spectrum {
    max-height: 500px; }
  .iron-audioplayer .srp_spectrum_container {
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none; }
  .iron-audioplayer .srp_spectrum {
    position: absolute;
    z-index: 1; }
  .iron-audioplayer .sr-playlist-item .srp_spectrum {
    z-index: -1; }
  .iron-audioplayer .song-store.add_to_cart_button.ajax_add_to_cart * {
    pointer-events: none; }
  .iron-audioplayer.srp_tracklist_grid .srp_soundwave_wrapper {
    flex: unset;
    width: 100%; }
  .iron-audioplayer .srp_soundwave_wrapper {
    flex: 0 1 100%;
    width: 100%; }

.srp_spectrum_container.srp_hidden, .srp_hidden .srp_spectrum {
  opacity: 0;
  max-height: 0 !important; }

#sonaar-player .srp_spectrum_container {
  position: absolute;
  z-index: 10000;
  pointer-events: none; }

.srp_tracklist_hide_artist .srp_trackartist {
  display: none; }

.swiper-box-navigation {
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column; }
  .swiper-box-navigation[data-v-align="top"] {
    flex-direction: column-reverse; }
  .swiper-box-navigation[data-v-align="center"] .srp_swiper-navigation {
    position: absolute;
    transform: translateY(-50%); }

.srp_swiper-nav-v-pos-center .swiper-box-navigation {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%; }

.srp_swiper-wrap {
  position: relative;
  padding: 0 0 15px 0;
  display: flex;
  flex-direction: column; }

.srp_swiper {
  color: #fff;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  max-width: 100%; }
  .srp_swiper.swiper {
    overflow: visible;
    overflow-x: clip; }
  .srp_swiper .swiper-pagination-bullet {
    background: #0000006c;
    opacity: 1; }
    .srp_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background: #000000; }
  .srp_swiper .swiper-slide {
    min-width: 1px;
    overflow: visible;
    cursor: grab; }
    .srp_swiper .swiper-slide:active {
      cursor: grabbing; }
    .srp_swiper .swiper-slide .store-list {
      align-items: inherit;
      justify-content: inherit;
      text-shadow: none;
      position: relative;
      margin-top: 6px; }
      .srp_swiper .swiper-slide .store-list .song-store-list-menu {
        align-items: inherit;
        justify-content: inherit; }
      .srp_swiper .swiper-slide .store-list .fa-ellipsis-v {
        display: none; }
      .srp_swiper .swiper-slide .store-list .song-store-list-container {
        display: flex;
        align-items: inherit;
        justify-content: inherit;
        flex-wrap: wrap;
        row-gap: 4px; }
  .srp_swiper .srp_trackartist {
    display: inline-block !important; }
  .srp_swiper .srp_index {
    display: none; }

.srp_swiper-control {
  position: absolute;
  z-index: 50; }
  .srp_swiper-control .srp_play {
    cursor: pointer; }
    .srp_swiper-control .srp_play .sricon-play {
      margin-left: 4px; }

.audio-playing .swiper-slide.srp_current .sricon-play {
  margin-left: 0; }

.srp_swiper-titles {
  display: flex;
  flex-direction: column;
  padding: 5%;
  z-index: 1;
  transition: opacity 0.3s ease; }

.srp_swiper-album-art {
  background: no-repeat 50%;
  background-size: cover;
  width: 100%;
  height: 380px;
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden; }
  .srp_swiper-album-art .srp_swiper-titles {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; }
  .srp_swiper-album-art img {
    width: 100%;
    height: auto; }
  .srp_swiper-album-art:after {
    transition: 0.3s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.srp_slider_play_cover_hover .swiper-slide .srp_swiper-control .srp_play {
  opacity: 0;
  scale: 1.15;
  transform: translate(0, 10px);
  transition: 0.15s ease; }

.srp_slider_play_cover_hover .swiper-slide:hover .srp_swiper-control .srp_play {
  opacity: 1;
  scale: 1;
  transform: translate(0, 0); }

.srp_swiper-title {
  font-size: 1.3rem;
  text-align: inherit; }

.srp_swiper-track-title {
  text-align: inherit; }

.srp_swiper-album-art .srp_swiper_overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.srp_swiper-album-art .srp_swiper_overlay::before {
  transition: opacity 0.2s;
  content: "";
  opacity: 1;
  width: 100%;
  height: 100%;
  position: absolute; }

.srp_swiper-album-art .srp_swiper_overlay::after {
  transition: opacity 0.2s;
  content: "";
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute; }

.srp_swiper-album-art:hover .srp_swiper_overlay::after {
  opacity: 1; }

.srp_swiper-album-art:hover .srp_swiper_overlay::before {
  opacity: 0; }

/*
/////////////////// WHEN SLIDE IS HOVER MODE ///////////////////
*/
.srp_slider_content_on_hover .srp_swiper-track-title, .srp_slider_content_on_hover .srp_swiper-title, .srp_slider_content_on_hover .store-list, .srp_slider_content_on_hover .srp_swiper-track-artist {
  opacity: 0; }

.srp_slider_content_on_hover .swiper-slide:hover .srp_swiper-title, .srp_slider_content_on_hover .swiper-slide:hover .srp_swiper-track-title, .srp_slider_content_on_hover .swiper-slide:hover .store-list, .srp_slider_content_on_hover .swiper-slide:hover .srp_swiper-track-artist {
  opacity: 1;
  transform: translate(0, 0); }

.srp_slider_content_on_hover .srp_swiper-track-title {
  transform: translate(0, 20px);
  transition: 0.4s ease;
  transition-delay: .1s; }

.srp_slider_content_on_hover .srp_swiper-track-artist {
  transform: translate(0, 30px);
  transition: 0.4s ease;
  transition-delay: .15s; }

.srp_slider_content_on_hover .srp_swiper-title {
  transform: translate(0, 30px);
  transition: 0.4s ease;
  transition-delay: .12s; }

.srp_slider_content_on_hover .store-list {
  transform: translate(0, 40px);
  transition: 0.5s ease;
  transition-delay: .1s; }

/*
/////////////////// WHEN SLIDE IS ACTIVE IN COVERFLOW MODE ///////////////////
*/
.srp_slider_content_on_active .swiper-slide:not(.swiper-slide-active) .srp_swiper-control, .srp_slider_content_on_active .swiper-slide:not(.swiper-slide-active) .srp_swiper-titles {
  opacity: 0; }

.srp_slider_content_on_active:not(.srp_slider_content_on_hover) .srp_swiper-track-title, .srp_slider_content_on_active:not(.srp_slider_content_on_hover) .srp_swiper-title, .srp_slider_content_on_active:not(.srp_slider_content_on_hover) .srp_swiper-track-artist, .srp_slider_content_on_active:not(.srp_slider_content_on_hover) .store-list {
  opacity: 0; }

.srp_slider_content_on_active:not(.srp_slider_content_on_hover) .swiper-slide-active .srp_swiper-title, .srp_slider_content_on_active:not(.srp_slider_content_on_hover) .swiper-slide-active .srp_swiper-track-title, .srp_slider_content_on_active:not(.srp_slider_content_on_hover) .swiper-slide-active .srp_swiper-track-artist, .srp_slider_content_on_active:not(.srp_slider_content_on_hover) .swiper-slide-active .store-list {
  opacity: 1;
  transform: translate(0, 0); }

.srp_slider_content_on_active:not(.srp_slider_content_on_hover) .srp_swiper-track-title {
  transform: translate(0, 20px);
  transition: 0.8s ease;
  transition-delay: .1s; }

.srp_slider_content_on_active:not(.srp_slider_content_on_hover) .srp_swiper-track-artist {
  transform: translate(0, 30px);
  transition: 0.8s ease;
  transition-delay: .12s; }

.srp_slider_content_on_active:not(.srp_slider_content_on_hover) .srp_swiper-title {
  transform: translate(0, 40px);
  transition: 0.8s ease;
  transition-delay: .18s; }

.srp_slider_content_on_active:not(.srp_slider_content_on_hover) .store-list {
  transform: translate(0, 30px);
  transition: 0.8s ease;
  transition-delay: .2s; }

.srp_swiper .srp_swiper-navigation {
  position: absolute;
  transform: translateY(-50%);
  left: 0; }

.srp_swiper-navigation {
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 8px;
  z-index: 100; }
  .srp_swiper-navigation .srp_swiper-button-prev, .srp_swiper-navigation .srp_swiper-button-next {
    position: static;
    margin-top: 0;
    transform: initial; }

.srp_swiper-button-prev,
.srp_swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  font-size: 44px;
  overflow: hidden;
  color: #fff; }
  .srp_swiper-button-prev.srp_arrow_round,
  .srp_swiper-button-next.srp_arrow_round {
    font-size: 24px !important;
    width: calc(var(--swiper-navigation-size) + 20px);
    height: calc(var(--swiper-navigation-size) + 20px);
    border-radius: 65px;
    border: #fff solid; }
  .srp_swiper-button-prev.swiper-button-disabled,
  .srp_swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default; }

div.srp_swiper-button-prev:after,
div.srp_swiper-button-next:after {
  font-family: swiper-icons;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  font-size: inherit; }

.srp_swiper-button-prev,
.swiper-rtl .srp_swiper-button-next {
  left: 10px;
  right: auto; }

.srp_swiper-button-prev:after,
.swiper-rtl .srp_swiper-button-next:after {
  content: 'prev'; }

.srp_swiper-button-next,
.swiper-rtl .srp_swiper-button-prev {
  right: 10px;
  left: auto; }

.srp_swiper-button-next:after,
.swiper-rtl .srp_swiper-button-prev:after {
  content: 'next'; }

.srp_swiper-wrap .swiper-box-pagination {
  position: relative;
  height: 6px;
  margin-top: 10px; }
  .srp_swiper-wrap .swiper-box-pagination .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .srp_swiper-wrap .swiper-box-pagination .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    bottom: 0; }
  .srp_swiper-wrap .swiper-box-pagination .swiper-pagination-bullet {
    opacity: 1; }

.srp_swiper-track-artist {
  text-transform: capitalize; }

.srp-fav-notfound {
  color: initial;
  display: flex;
  align-items: center;
  column-gap: 10px; }
  .srp-fav-notfound i {
    font-size: 12px; }

.sr_store_force_dl_bt {
  cursor: pointer; }

a.song-store.srp-fav-bt i, a.song-store.sr_store_force_share_bt i, a.song-store.sr_store_force_dl_bt i, a.song-store.sr_store_force_pl_bt i {
  font-size: 16px; }

.srp-fav-removeall-wrapper {
  display: flex;
  justify-content: flex-start; }
  .srp-fav-removeall-wrapper .srp-fav-removeall-bt {
    transition: all 0.3s ease;
    width: auto;
    cursor: pointer;
    padding: 5px 20px;
    margin-bottom: 10px;
    background-color: var(--srp-global-music_player_wc_bt_bgcolor);
    color: var(--srp-global-music_player_wc_bt_color);
    display: inline-block;
    border-radius: 4px;
    font-size: 12px; }

.srp-fav-notification {
  opacity: 0;
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  padding: 10px 50px;
  background-color: var(--srp-global-modal-btn-bg-color);
  color: var(--srp-global-modal-btn-txt-color);
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  z-index: 10001;
  font-size: 16px; }

/*----------Sticky Extended Player----------*/
.srp_extendedPlayer {
  transition: padding 0.1s ease; }

.srp_no_artwork .srp_extendedPlayer_container .srp_extendedPlayer {
  overflow-y: unset;
  padding-top: var(--srp-extendedPlayer-height);
  background: unset !important;
  min-height: unset; }

.srp_no_artwork .srp_extendedPlayer_container .srp_ext_primary {
  min-height: unset; }

.srp_extendedPlayer_scrolling_box {
  height: 100%;
  display: flex;
  overflow-y: scroll; }

.srp_extendedPlayer_container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 300ms ease, opacity 150ms ease; }
  #sonaar-player .srp_extendedPlayer_container .close {
    border-color: #ffffff; }
    #sonaar-player .srp_extendedPlayer_container .close:before, #sonaar-player .srp_extendedPlayer_container .close:after {
      border-color: inherit; }
  .srp_extendedPlayer_container.srp_opened {
    transform: translateY(0%);
    opacity: 1; }
  .srp_extendedPlayer_container .srp-fav-bt {
    font-size: 28px;
    color: var(--srp-global-sticky_player_waveform_progress_color, #fff); }
  #sonaar-player .srp_extendedPlayer_container .sr_progressbar_sticky {
    flex-direction: column-reverse !important;
    gap: 10px; }
    #sonaar-player .srp_extendedPlayer_container .sr_progressbar_sticky .wave {
      position: static;
      height: 70px !important;
      width: 100% !important; }
  .srp_extendedPlayer_container .srp_ext_primary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding-top: 15px;
    padding-bottom: 45px;
    padding-left: 25px;
    padding-right: 25px;
    background: var(--srp-global-sticky_player_background); }
  .srp_extendedPlayer_container .srp_ext_secondary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 15px;
    gap: 15px;
    padding-left: 25px;
    padding-right: 25px;
    background: var(--srp-global-sticky_player_background); }
  .srp_extendedPlayer_container .srp_ext_overlay_panel {
    padding: 15px 25px; }
  .srp_extendedPlayer_container .srp_extendedPlayer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box; }
    .srp_extendedPlayer_container .srp_extendedPlayer.srp_opened_cta {
      transition: filter 0.3s ease;
      filter: brightness(0.5); }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      margin-top: 15px;
      gap: 20px; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_collapse_btn {
      font-size: 24px;
      line-height: 1; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ellipsis_btn {
      font-size: 20px;
      line-height: 1;
      margin-right: -10px; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_artwork {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-flow: row;
      overflow: hidden; }
      .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_artwork img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_track {
      column-gap: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; }
    .srp_extendedPlayer_container .srp_extendedPlayer .control {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin: 10px 0; }
      .srp_extendedPlayer_container .srp_extendedPlayer .control.srp_ctrl_advanced {
        gap: 15px; }
      .srp_extendedPlayer_container .srp_extendedPlayer .control .sricon-play:before {
        font-size: 38px; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_track_info {
      margin: 15px 0; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_track_title {
      font-size: 18px;
      line-height: 1.3; }
    .srp_extendedPlayer_container .srp_extendedPlayer .sr_progressbar_sticky {
      width: auto;
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      margin: 0 5px; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta {
      display: flex;
      justify-content: space-between;
      column-gap: 5px;
      min-height: 30px;
      align-items: center; }
      .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta .srp_ext_cta_addtocart, .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta .srp_ext_cta_buynow {
        background-color: var(--srp-global-sticky_player_labelsandbuttons, #FFF);
        /* font-size: 12px; */
        padding: 5px 10px;
        border-radius: 6px;
        color: var(--srp-global-sticky_player_background, #000); }
        .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta .srp_ext_cta_addtocart span, .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta .srp_ext_cta_buynow span {
          font-size: 14px;
          font-weight: 500; }
      .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta a {
        color: inherit;
        background-color: unset;
        display: flex;
        column-gap: 12px;
        align-items: center;
        text-decoration: none;
        font-size: 18px;
        font-weight: 400; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta_left, .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta_right {
      align-items: center;
      display: flex;
      gap: 10px; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta_left {
      font-size: 18px; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_featured_cta_center {
      flex: 0.9;
      height: 175%; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_control {
      display: flex;
      justify-content: space-between;
      align-content: center; }
      .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_control .shuffle, .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_control .srp_repeat {
        font-size: 18px; }
      .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_control .control--item {
        display: flex;
        align-items: center;
        justify-content: flex-end; }
      .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_control .srp_control_right {
        column-gap: 8px; }
    #sonaar-player .srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_control .sr_speedRate {
      margin: 0; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_control_right, .srp_extendedPlayer_container .srp_extendedPlayer .srp_control_left {
      display: flex;
      flex: 1; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_control_left {
      justify-content: flex-start; }
    .srp_extendedPlayer_container .srp_extendedPlayer .srp_control_right {
      justify-content: flex-end; }
    .srp_extendedPlayer_container .srp_extendedPlayer .play {
      display: flex; }
    .srp_extendedPlayer_container .srp_extendedPlayer .list {
      width: 28px; }
  .srp_extendedPlayer_container .srp_ext_overlay_panel_outside {
    position: absolute;
    height: 100%;
    width: 100%; }
  .srp_extendedPlayer_container .srp_ext_overlay_panel {
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    padding-bottom: 70px;
    height: fit-content;
    width: 100%;
    background: var(--srp-global-sticky_player_background);
    transform: translateY(100%);
    transition: 0.4s ease; }
    .srp_extendedPlayer_container .srp_ext_overlay_panel.srp_opened {
      visibility: visible;
      transform: translateY(0%); }
    .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      margin-top: 20px; }
      .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta .srp_ext_track_info_wrapper {
        display: flex;
        column-gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ffffff20; }
        .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta .srp_ext_track_info_wrapper .srp_track_title {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          width: 65vw;
          font-size: 18px; }
        .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta .srp_ext_track_info_wrapper .srp_artist {
          font-size: 14px; }
      .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta img {
        max-height: 65px; }
      .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta > span a {
        color: inherit;
        background-color: unset;
        display: flex;
        column-gap: 12px;
        align-items: center;
        text-decoration: none;
        font-size: 18px;
        font-weight: 400; }
        .srp_extendedPlayer_container .srp_ext_overlay_panel .srp_ext_cta > span a > i {
          text-align: center;
          width: 30px; }
  .srp_extendedPlayer_container .srp_ext_content {
    display: flex;
    flex-direction: column;
    row-gap: 10px; }
  .srp_extendedPlayer_container .srp_ext_section {
    word-wrap: break-word;
    font-size: 16px;
    font-weight: 400;
    background: var(--srp-global-sticky_player_background);
    padding: 15px;
    border-radius: 10px;
    filter: brightness(1.2); }
    .srp_extendedPlayer_container .srp_ext_section:first-child {
      margin-top: -28px; }

.srp_repeat {
  cursor: pointer; }
  .srp_repeat[data-repeat-status="null"]:before {
    opacity: 0.4; }
  .srp_repeat[data-repeat-status="track"]:before {
    content: '\e83c'; }
  .srp_repeat:before {
    content: '\e83b'; }

#sonaar-player .player .control .srp_repeat.srp_disabled {
  pointer-events: none;
  opacity: 0.4; }

body.srp_sticky_ext_opened {
  overflow-y: hidden; }

#make-offer-btn {
  float: unset;
  padding: 10px 20px;
  pointer-events: auto;
  cursor: pointer; }

.single-product .srp-make-offer-btn-wrapper {
  margin-bottom: 10px;
  clear: both; }

.single-product .single_variation_wrap .srp-make-offer-btn-wrapper {
  margin-top: 5px; }

body.sr_popup-open {
  overflow-y: hidden; }

#sonaar-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  transition: opacity .15s linear;
  /* Firefox < 16 */
  /* Safari, Chrome and Opera > 12.1 */
  /* Internet Explorer */
  /* Opera < 12.1 */ }
  #sonaar-modal h1, #sonaar-modal h2, #sonaar-modal h3, #sonaar-modal h4, #sonaar-modal h5, #sonaar-modal h6 {
    line-height: 1;
    font-weight: 500; }
  #sonaar-modal.has-bg-image {
    color: #fff; }
    #sonaar-modal.has-bg-image h1, #sonaar-modal.has-bg-image h2, #sonaar-modal.has-bg-image h3, #sonaar-modal.has-bg-image h4, #sonaar-modal.has-bg-image h5, #sonaar-modal.has-bg-image h6, #sonaar-modal.has-bg-image p, #sonaar-modal.has-bg-image label, #sonaar-modal.has-bg-image span, #sonaar-modal.has-bg-image a, #sonaar-modal.has-bg-image button {
      color: #fff; }
    #sonaar-modal.has-bg-image .sr_popup-content {
      border: unset;
      background-color: #000; }
      #sonaar-modal.has-bg-image .sr_popup-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(50px) brightness(0.7);
        opacity: 1;
        background-color: black; }
      #sonaar-modal.has-bg-image .sr_popup-content .srp-popup-form {
        width: 530px; }
  #sonaar-modal .sr_popup-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px); }
  .sr_popup-open #sonaar-modal {
    overflow-x: hidden;
    overflow-y: auto; }
  #sonaar-modal.sr_show {
    display: flex !important;
    align-items: center;
    min-height: 100%;
    height: auto; }
    #sonaar-modal.sr_show .sr_popup-dialog {
      -webkit-transform: none;
      transform: none; }
  #sonaar-modal .sr_popup-dialog {
    position: relative;
    width: auto;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0px auto; }
    @media (min-width: 576px) {
      #sonaar-modal .sr_popup-dialog {
        max-width: calc(100vw - 150px);
        max-height: calc(100vh - 150px);
        margin: 75px auto; } }
  #sonaar-modal .sr_popup-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: .3rem;
    outline: 0;
    -webkit-animation: srmp3fadein 350ms;
    -moz-animation: srmp3fadein 350ms;
    -ms-animation: srmp3fadein 350ms;
    -o-animation: srmp3fadein 350ms;
    animation: srmp3fadein 350ms; }
    #sonaar-modal .sr_popup-content #srp-make-offer-error {
      color: red;
      font-weight: 500;
      font-size: 16px; }
    #sonaar-modal .sr_popup-content p {
      margin-bottom: initial;
      margin-top: initial; }
    @media (max-width: 576px) {
      #sonaar-modal .sr_popup-content {
        margin-bottom: 50px; } }
    #sonaar-modal .sr_popup-content .srp-popup-form--confirm h1, #sonaar-modal .sr_popup-content .srp-popup-form--confirm h2, #sonaar-modal .sr_popup-content .srp-popup-form--confirm h3, #sonaar-modal .sr_popup-content .srp-popup-form--confirm h4, #sonaar-modal .sr_popup-content .srp-popup-form--confirm h5, #sonaar-modal .sr_popup-content .srp-popup-form--confirm h6 {
      font-size: 36px;
      line-height: 0.9;
      margin-bottom: 10px; }
    #sonaar-modal .sr_popup-content .srp-popup-form--confirm .srp_button {
      margin-top: 15px; }
    #sonaar-modal .sr_popup-content .srp-popup-form {
      width: 430px;
      max-width: 100%;
      /* Override autofill styles for Chrome/Edge/Opera */ }
      #sonaar-modal .sr_popup-content .srp-popup-form label {
        font-size: 14px; }
      #sonaar-modal .sr_popup-content .srp-popup-form select {
        font-weight: 600; }
      #sonaar-modal .sr_popup-content .srp-popup-form input, #sonaar-modal .sr_popup-content .srp-popup-form textarea, #sonaar-modal .sr_popup-content .srp-popup-form select {
        outline: none;
        transition: all .3s ease-in-out;
        padding: 0 5px 0 12px;
        overflow: hidden;
        border: unset;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 44px;
        border-radius: 5px;
        margin: 5px 0;
        background-color: var(--srp-global-modal-form-input-bg-color) !important;
        color: var(--srp-global-modal-form-input-color) !important;
        border: 1px solid var(--srp-global-modal-form-input-border-color); }
        #sonaar-modal .sr_popup-content .srp-popup-form input:focus, #sonaar-modal .sr_popup-content .srp-popup-form input:active, #sonaar-modal .sr_popup-content .srp-popup-form textarea:focus, #sonaar-modal .sr_popup-content .srp-popup-form textarea:active, #sonaar-modal .sr_popup-content .srp-popup-form select:focus, #sonaar-modal .sr_popup-content .srp-popup-form select:active {
          border-color: var(--srp-global-modal-btn-bg-color) !important; }
      #sonaar-modal .sr_popup-content .srp-popup-form textarea {
        padding: 10px;
        min-height: 125px;
        overflow: auto; }
      #sonaar-modal .sr_popup-content .srp-popup-form input:-webkit-autofill,
      #sonaar-modal .sr_popup-content .srp-popup-form textarea:-webkit-autofill,
      #sonaar-modal .sr_popup-content .srp-popup-form select:-webkit-autofill {
        -webkit-text-fill-color: var(--srp-global-modal-form-input-color) !important;
        background-color: var(--srp-global-modal-form-input-bg-color) !important;
        color: var(--srp-global-modal-form-input-color) !important;
        transition: background-color 5000s ease-in-out 0s; }
      #sonaar-modal .sr_popup-content .srp-popup-form input:-moz-autofill,
      #sonaar-modal .sr_popup-content .srp-popup-form textarea:-moz-autofill,
      #sonaar-modal .sr_popup-content .srp-popup-form select:-moz-autofill {
        background-color: var(--srp-global-modal-form-input-bg-color) !important;
        color: var(--srp-global-modal-form-input-color) !important; }
      #sonaar-modal .sr_popup-content .srp-popup-form button {
        border-radius: 4px;
        background-color: var(--srp-global-modal-btn-bg-color);
        color: var(--srp-global-modal-btn-txt-color);
        margin-top: 10px;
        width: 100%; }
        #sonaar-modal .sr_popup-content .srp-popup-form button:hover {
          filter: brightness(1.2); }
    #sonaar-modal .sr_popup-content .srp-popup-heading {
      display: flex;
      gap: 15px;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: solid 1px var(--srp-global-modal-form-input-border-color); }
    #sonaar-modal .sr_popup-content .srp-popup-title {
      font-size: 42px;
      line-height: 0.9;
      margin: 0 auto; }
    #sonaar-modal .sr_popup-content .srp-popup-desc {
      margin-top: 5px;
      font-size: 14px;
      opacity: 0.8; }
    #sonaar-modal .sr_popup-content .srp-popup-image {
      min-width: 80px;
      width: 80px; }
      #sonaar-modal .sr_popup-content .srp-popup-image img {
        border-radius: 3px;
        max-width: 100%; }
  #sonaar-modal .srp_popup_no_image .srp-make-offer-heading {
    flex-direction: column-reverse; }
  #sonaar-modal .srp-popup-form--makeoffer .srp-popup-title {
    font-size: 36px; }
  #sonaar-modal .srp-popup-form--makeoffer .srp-make-offer-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 18px;
    margin-top: 15px;
    border-top: solid 1px var(--srp-global-modal-form-input-border-color);
    padding-top: 15px;
    margin-bottom: 20px; }
    #sonaar-modal .srp-popup-form--makeoffer .srp-make-offer-heading .srp-make-offer-product-title {
      font-size: 21px;
      line-height: 1.2;
      margin-bottom: 6px;
      font-weight: 500; }
    #sonaar-modal .srp-popup-form--makeoffer .srp-make-offer-heading .srp-make-offer-image {
      max-width: 70px; }
      #sonaar-modal .srp-popup-form--makeoffer .srp-make-offer-heading .srp-make-offer-image img {
        border-radius: 4px; }
  #sonaar-modal .srp-popup-form--makeoffer .srp-make-offer-description {
    font-size: 14px; }

@keyframes srmp3fadein {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@-moz-keyframes srmp3fadein {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@-webkit-keyframes srmp3fadein {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@-ms-keyframes srmp3fadein {
  #sonaar-modal from {
    opacity: 0;
    transform: scale(0.9); }
  #sonaar-modal to {
    opacity: 1;
    transform: scale(1); } }

@-o-keyframes srmp3fadein {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }
  #sonaar-modal .sr_popup-body {
    z-index: 2;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 2.5rem; }

.sr_popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  transition: opacity .15s linear;
  pointer-events: none; }
  .sr_popup-backdrop.sr_show {
    opacity: .75;
    pointer-events: initial; }

.sr-store-popup {
  cursor: pointer; }

.sr_close {
  background: transparent;
  height: 32px;
  width: 32px;
  padding: 0;
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 50;
  font-size: 1px;
  cursor: pointer; }
  .sr_close svg {
    height: 100%; }


/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/wp-job-portal/includes/css/jobseekercp.css */



/*--wjportal-cp-guest-banner--*/

/* --- 1. Main Banner Container Styling --- */
        .wjportal-cp-guest-banner-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 25px 25px;
            width: 100%;
            background-color:var(--wpjp-primary-color);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            gap: 20px;
        }

        /* --- 2. Left Icon Area --- */
        .wjportal-cp-guest-banner-left {
            /* Ensures the icon area doesn't shrink and aligns center */
            display: flex;
            align-items: center;
        }

        .wjportal-cp-guest-banner-left-icon-wrap {
            /* Container for the icon visual styling */
            width: 50px;
            height: 50px;
            position: relative;
            background-color:#fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Lock Icon (Inserted via SVG Data URI) */
        .wjportal-cp-guest-banner-left-icon-wrap::before {
            content: "";
            display: block;
            width: 28px;
            height: 28px;
            /* SVG for a simple lock icon (white stroke) */
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="11" width="18" height="11" rx="2" ry="2"%3E%3C/rect%3E%3Cpath d="M7 11V7a5 5 0 0 1 10 0v4"%3E%3C/path%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-size: contain;
            /* Ensures the icon is vertically and horizontally centered in the 50x50 area */
        }

        /* --- 3. Middle Content (Text) --- */
        .wjportal-cp-guest-banner-middle {
            flex-grow: 1; /* Allows text to take up available space */
            color: #fff;
            line-height: 1.3;
        }

        .wjportal-cp-guest-banner-middle-top {
            font-size: var(--wpjp-sub-heading);
            font-weight: 600;
            padding-bottom: 5px;
        }

        .wjportal-cp-guest-banner-middle-bottom {
            font-size:var(--wpjp-body-font-size);
            opacity: 0.85;
        }

        /* --- 4. Right Button Area --- */
        .wjportal-cp-guest-banner-right {
            display: flex;
            gap: 10px; /* Space between the two buttons */
            align-items: center;
            flex-shrink: 0;
        }

        .wjportal-cp-guest-banner-right a {
            /* General button styling */
            font-size: var(--wpjp-body-font-size);
            text-decoration: none;
            padding: 10px 18px;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s ease-in-out;
            text-align: center;
            min-width: 80px;
            display: inline-block;
        }

        /* Login Button (White Background, Blue Border) */
        .wjportal-cp-guest-banner-login-link {
            background-color: #fff;
            color: #1f5795;
            border: 1px solid #fff; /* Match background for seamless look */
        }
        .wjportal-cp-guest-banner-login-link:hover {
            background-color:var(--wpjp-secondary-color);
            color: #fff;
            border-color: var(--wpjp-secondary-color);
        }

        /* Register Button (Solid Blue Background, Blue Border) */
        .wjportal-cp-guest-banner-register-link {
            background-color:var(--wpjp-secondary-color);
            color: #fff;
            border: 1px solid #fff;
        }
        .wjportal-cp-guest-banner-register-link:hover {
            background-color:#fff;
            border-color:var(--wpjp-secondary-color);
            color: var(--wpjp-secondary-color);
        }

        /* --- Responsive Adjustments (Optional but recommended) --- */
       

/* ==============================================
 * RESPONSIVE MEDIA QUERIES
 * ==============================================
 */

/* 1. Large Desktop / Laptops (Max Width 1280px) */
@media (max-width: 1280px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 20px 20px; /* Slight reduction in padding */
        gap: 15px; /* Slight reduction in internal spacing */
    }
}

/* 2. Mid-size Laptops / Large Tablets (Max Width 1080px) */
@media (max-width: 1080px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 18px 18px;
        gap: 12px;
    }
}

/* 3. Tablets (Max Width 767px) - Horizontal Layout is still maintained, but compressed */
@media (max-width: 767px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 15px 15px;
    }
    
    .wjportal-cp-guest-banner-right a {
        padding: 8px 14px; /* Slightly smaller buttons */
    }
}

/* 4. Small Tablets / Large Phones (Max Width 650px) - STACKED LAYOUT STARTS HERE */
@media (max-width: 650px) {
    .wjportal-cp-guest-banner-wrap {
        flex-direction: column;
        padding: 20px;
        text-align: center;
        gap: 15px;
    }
    
    .wjportal-cp-guest-banner-left {
        order: 1; /* Icon on top */
        margin-bottom: 5px;
    }

    .wjportal-cp-guest-banner-middle {
        order: 2; /* Text in middle */
        text-align: center;
        flex-grow: 0;
    }

    .wjportal-cp-guest-banner-right {
        order: 3; /* Buttons on bottom */
        width: 100%;
        justify-content: space-around;
        margin-top: 10px;
    }
    
    .wjportal-cp-guest-banner-right a {
        flex: 1; /* Make buttons equally wide for mobile */
        max-width: 48%; /* Ensure a small gap between buttons */
    }
}

/* 5. Mobile Phones (Max Width 480px) - Refinements for smaller screens */
@media (max-width: 480px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 15px;
    }
    
    /* Shrink the icon wrapper slightly */
    .wjportal-cp-guest-banner-left-icon-wrap {
        width: 40px;
        height: 40px;
    }
    .wjportal-cp-guest-banner-left-icon-wrap::before {
        width: 24px;
        height: 24px;
    }

    /* Smaller button padding for ultra-small screens */
    .wjportal-cp-guest-banner-right a {
        padding: 10px 10px;
        font-size: smaller; /* Rely on variable for size, or use a specific px value if variable is too large */
        min-width: unset;
    }
}
/* * --- ATTRACTIVE CSS DESIGN START ---
 * Color Palette: Deep Purple (Primary) and Gold Accent (Highlight) 
 * Typography: Modern System Font Stack
 */

/* --- Global & Base Styles --- */
#wjportal-job-cp-wrp {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

a {
    text-decoration: none;
    color: var(--wpjp-primary-color); /* Primary link color */
    transition: color 0.3s, opacity 0.3s;
}

a:hover {
    color: var(--wpjp-secondary-color);
}

/* --- Top Section: User Profile & Quick Actions --- */
.wjportal-cp-top {
    width: 100%;
    border: 1px solid var(--wpjp-border-color);
    padding:20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 5px solid var(--wpjp-primary-color);
    background: linear-gradient(to bottom, var(--wpjp-primary-color), var(--wpjp-secondary-color));
}

.wjportal-cp-user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.wjportal-user-logo {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color); /* Gold ring accent */
    box-shadow: 0 0 0 2px var(--wpjp-border-color);
    flex-shrink: 0;
    background-color: white;
    padding: 5px;
}

.wjportal-user-logo-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.wjportal-user-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.wjportal-user-tagline {
    font-size: var(--wpjp-body-font-size);
    color: #fff; 
    margin-top: 2px;
    font-weight: 500;
}

.wjportal-cp-user-action {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Action Buttons with SVG Icons via Data URI --- */
a.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-resume,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-search-job,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile{
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}
a.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-resume:hover,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-search-job:hover,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile:hover{
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);

}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile:hover{
    background-color: #ffffff;
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
}

/* 1. Make the links align icon and text nicely */
.wjportal-cp-user-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em; /* Creates space between the icon and the text */
}

/* 2. Common styles for all icons */
.wjportal-cp-user-act-btn::before {
    content: "";
    display: inline-block;
    width: 1em;  /* Adjust icon size as needed */
    height: 1em;

    /* --- This is your icon color! --- */
    /* Change this one color to update all icons. */
    background-color: currentColor; /* Example: A standard blue */

    /* Standard mask properties for all icons */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* 3. Specific icon for "Add Resume" (File-plus icon) */
.wjportal-cp-user-act-profile-add-resume::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

/* 4. Specific icon for "Search Job" (Magnifying glass icon) */
.wjportal-cp-user-act-profile-search-job::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* 5. Specific icon for "Edit Profile" (Pencil icon) */
.wjportal-cp-user-act-profile-edit-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E");
}

/* --- Stats Boxes Section (Key Metrics) --- */
/* --- Main Container --- */
.wjportal-cp-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 10px; /* Space between boxes */
    width: 100%;
    margin-top: 30px;
    text-align: center;
    border-top: 1px dotted #ffffff80;
    padding-top: 25px;
}
   

/* --- Individual Box Styling --- */
.wjportal-cp-box {
    overflow: hidden; /* Ensures content respects the border radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
}

.wjportal-cp-box:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* --- Top Section of the Box --- */
.wjportal-cp-box-top {
    padding: 10px 25px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 0;
}

/* Hide the original IMG tag */
.wjportal-cp-box-top img {
    display: none;
}



/* --- Number and Title --- */
.wjportal-cp-box-num {
    font-size: 35px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    order: 2;
    width: 100%;
}

.wjportal-cp-box-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 60px;
    font-weight: 600;
    order: 1;
    text-align: center;
    width: 100%;
}

/* --- Bottom Link Section --- */

.wjportal-cp-box-btm a {
    display: flex;
    padding: 10px 20px;
    text-decoration: none;
    color: #555555;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    justify-content: center;
    align-items: center;
}
.wjportal-cp-box-btm.clearfix{
    background-color: var(--wpjp-background-color);
    border-top: 1px solid var(--wpjp-border-color);
}
/* Color link text on hover */
.wjportal-cp-box-btm a:hover .wjportal-cp-box-text {
    color:var(--wpjp-primary-color);
}

/* Remove Font Awesome icon */
.wjportal-cp-box-btm i.fa {
    display: none;
}

/* Add CSS Arrow */
.wjportal-cp-box-btm a::after {
    content: '→';
    font-size: 18px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.wjportal-cp-box-btm a:hover::after {
    transform: translateX(4px); /* Animate arrow on hover */
    color: var(--wpjp-primary-color);
}

/* Styling for specific box accent colors */
#wjportal-job-cp-wrp .wjportal-cp-box.box1 { border-top: 4px solid #3498db; }
#wjportal-job-cp-wrp .wjportal-cp-box.box2 { border-top: 4px solid #30cd72; }
#wjportal-job-cp-wrp .wjportal-cp-box.box3 { border-top: 4px solid #f5a623; }
#wjportal-job-cp-wrp .wjportal-cp-box.box4 { border-top: 4px solid #bd10e0; }

/* Hide the original IMG tag */
.wjportal-cp-box-top img {
    display: none;
}

/* Common style for the new SVG icon */
.wjportal-cp-box-top::before {
    content: ''; /* The icon will be set below */
    position: absolute;
    width: 48px;
    height: 48px;
    top: 10%;
    right: 43%;
}

/* Specific SVG icons for each box */
/* Icon 1: My Resumes (Document) */
.wjportal-cp-box.box1 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%234A90E2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"%3E%3C/path%3E%3Cpolyline points="14 2 14 8 20 8"%3E%3C/polyline%3E%3Cline x1="16" y1="13" x2="8" y2="13"%3E%3C/line%3E%3Cline x1="16" y1="17" x2="8" y2="17"%3E%3C/line%3E%3Cpolyline points="10 9 9 9 8 9"%3E%3C/polyline%3E%3C/svg%3E');

}

/* Icon 2: Applied Jobs (Clipboard Check) */
.wjportal-cp-box.box2 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%2350E3C2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"%3E%3C/path%3E%3Crect x="8" y="2" width="8" height="4" rx="1" ry="1"%3E%3C/rect%3E%3Cpolyline points="9 14 12 17 15 11"%3E%3C/polyline%3E%3C/svg%3E');
}

/* Icon 3: Newest Job (Bell) */
.wjportal-cp-box.box3 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23F5A623" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"%3E%3C/path%3E%3Cpath d="M13.73 21a2 2 0 0 1-3.46 0"%3E%3C/path%3E%3C/svg%3E');
}

/* Icon 4: Shortlisted Jobs (Star) */
.wjportal-cp-box.box4 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23BD10E0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"%3E%3C/polygon%3E%3C/svg%3E');
}

/* --- Mid Banner Section --- */
.wjportal-cp-mid-full-banner {
    display: inline-flex; /* Aligns icon and text */
    align-items: center; /* Vertically centers icon and text */
    gap: 0.6em; /* Space between icon and text */
    width: 100%;
    background-color: #e0f2fe;
    color: #0284c7;
    padding: 15px 25px;
    border-radius: 8px;
    font-weight: bold;
    justify-content: center;
    border: 1px solid #bde6fa;
}

.wjportal-cp-mid-full-banner::before {
    content: "";
    display: inline-block;
    flex-shrink: 0; /* Prevents icon from shrinking */

    /* Set icon size (1em matches the text size) */
    width: 1.1em;
    height: 1.1em;

    /* This is the icon's color. 'currentColor' makes it match the text. */
    background-color: currentColor;

    /* --- The SVG "Eye" Icon --- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-4 0V4H2v10h2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-4 0V4H2v10h2z'/%3E%3C/svg%3E");
    /* Ensure the icon scales correctly */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
/* --- Layout: Left Sidebar and Right Content --- */
.wjportal-cp-left {
    flex: 0 0 280px; 
    border-radius: 10px;
    height: max-content;
    position: sticky;
    top: 4.5rem;
    padding: 0;
    overflow: hidden;
    min-height: 800px;
}

.wjportal-cp-right {
    flex: 1; 
    min-width: 550px;
}

/* --- Sidebar Short Links --- */
/* --- Left Column: Short Links --- */
#wjportal-job-cp-wrp .wjportal-cp-sec-title,
.wjportal-my-invoices-sec-tit-txt {
    font-size:var(--wpjp-sub-heading);
    color: var(--text-secondary);
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-job-cp-wrp #wpjobportal-center .wjportal-cp-sec-title{
    margin-bottom: 20px;
}
h3.wjportal-section-title{
    font-size:var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    padding: 15px 0 15px 0;
    padding-left: 0;
    margin: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-job-cp-wrp .wjportal-jobs-list.wpjobportal-list-item-is-featured{
    border: 1px solid #ffb63b;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}

#wjportal-job-cp-wrp .wjportal-cp-short-links-wrp {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 10px 24px;
    text-align: center;
    margin-bottom: 20px;
}
.wjportal-cp-short-links-wrp .wjportal-cp-sec-title{
    display: none;
}
#wjportal-job-cp-wrp .wjportal-cp-short-links-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#wjportal-job-cp-wrp .wjportal-list-anchor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;

}

#wjportal-job-cp-wrp .wjportal-list-anchor:hover {
    background-color: var(--wpjp-background-color);
    color: var(--wpjp-primary-color);
    filter: none;
    border-radius: 8px;
}

#wjportal-job-cp-wrp .wjportal-list-anchor img {
    width: 24px;
    height: 24px;
    filter: grayscale(1) opacity(0.6);
}
#wjportal-job-cp-wrp .wjportal-list-anchor:hover img{
    filter: unset;
}

#wjportal-job-cp-wrp .app-status {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9em;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--bg-body);
    flex-shrink: 0;
}
/* --- Main Job Card Container --- */
/* --- 1. Root Variables (for easy theme changes) --- */
/* --- 1. Root Variables (Scoped to the parent ID) --- */


/* --- 2. Main Card Container --- */
#wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    margin-bottom: 10px;
    /* Use flex to stack and space the 3 sections */
    display: flex;
    gap: 1.25rem; /* This creates space between the 3 sections */
    transition: all 0.3s ease-in-out;
}
#wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data:hover{
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

#wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data .wjportal-resume-logo{
    width: 100px;
    height: 100px;
}
#wjportal-job-cp-wrp.wjportal-resume-status-dashboard-left-data {
    width: 20%;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.wjportal-resume-status-dashboard-right-data {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 0;
    flex-grow: 1;
    overflow: hidden;
}

#wjportal-job-cp-wrp .wjportal-resume-data a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


#wjportal-job-cp-wrp .wjportal-resume-name {
    display: block;
    font-size:var(--wpjp-body-font-size);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.3;
    padding: 10px 0;
}

#wjportal-job-cp-wrp .wjportal-resume-title {
    display: block;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    line-height: 1.3;
}

/* --- 4. Progress Bar Section --- */
#wjportal-job-cp-wrp .wjportal-progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#wjportal-job-cp-wrp .wjportal-progress-bar-title {
    color: var(--wpjp-secondary-color);
    font-weight: 500;
    font-size: 15px;
}

#wjportal-job-cp-wrp .wjportal-progress-bar-percentage {
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    font-size: 15px;
}
#wjportal-job-cp-wrp .wjportal-progress-bar-container{
    padding-top: 10px;
    margin-bottom: 5px;
}
#wjportal-job-cp-wrp .wjportal-progress-complete-resume-wrap {
    margin-bottom: 10px;
    width: 100%;
}
#wjportal-job-cp-wrp .wjportal-progress-bar-wrapper {
    width: 100%;
    height: 20px;
    background-color: #e9ecef; /* The 'track' color */
    border-radius: 4px;
    overflow: hidden; /* Important for the fill's border-radius */
}

#wjportal-job-cp-wrp .wjportal-progress-bar-fill {
    height: 100%;
    background-color: var(--wpjp-primary-color); /* The 'fill' color */
    border-radius: 4px;
    transition: width 0.4s ease-in-out;

}

/* --- 5. Button Section --- */
#wjportal-job-cp-wrp .wjportal-progress-complete-resume-wrap a {
    display: flex;  
    text-align: center;
    background-color: #fff;
    color: var(--wpjp-primary-color);
    border:1px solid var(--wpjp-primary-color);
    padding: 5px;
    border-radius: 6px;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    transition: background-color 0.2s;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
}

#wjportal-job-cp-wrp .wjportal-progress-complete-resume-wrap a:hover {
    background-color: var(--wpjp-secondary-color); /* Darker shade of primary color */
    color: #fff;
}
.wjportal-progress-complete-resume-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centers the icon + text */
    gap: 0.5em; /* This creates space between the icon and text */
}
.wjportal-progress-complete-resume-wrap a::before {
    content: "";
    display: inline-block;
    
    /* Set size (1em matches the text size) */
    width: 0.9em;
    height: 0.9em;

    /* This makes the icon white (matching the text color) */
    background-color: currentColor;

    /* --- The SVG "Pencil/Edit" Icon --- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V12h2.293l6.5-6.5-.707-.707zM5 13l-1.5-1.5L2 13.5l1.5 1.5L5 13z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V12h2.293l6.5-6.5-.707-.707zM5 13l-1.5-1.5L2 13.5l1.5 1.5L5 13z'/%3E%3C/svg%3E");

    /* Standard mask properties */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}


#wjportal-job-cp-wrp .wjportal-cp-graph-wrp.wjportal-cp-sect-wrp #wpjobportal-center {
    border:none;
    box-shadow: none;
    padding: 0;

}
#wjportal-job-cp-wrp div#wpjobportal-center {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
#wjportal-job-cp-wrp div#wpjobportal-center #wjportal-job-cp-wrp div#wpjobportal-center{
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#wjportal-job-cp-wrp .wjportal-jobs-list {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--wjportal-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden; /* Clips the featured bar */
}
#wjportal-job-cp-wrp .wjportal-jobs-list{
    border:1px solid var(--wpjp-border-color);
}   

/* --- Featured Item (Yellow Bar) --- */
#wjportal-job-cp-wrp .wpjobportal-list-item-is-featured::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--wjportal-featured-color);
}

/* --- Top Section: Logo + Main Content --- */
#wjportal-job-cp-wrp .wjportal-jobs-list-top-wrp {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    /* Extra left padding to account for the yellow bar */
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
}
#wjportal-job-cp-wrp .wjportal-jobs-data{
    gap:0;
}
/* --- Logo Box --- */
#wjportal-job-cp-wrp .wjportal-jobs-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wjportal-job-cp-wrp .wjportal-jobs-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Use 'contain' to prevent distortion */
}

/* --- Main Content Wrapper (Hiding extra parts) --- */
#wjportal-job-cp-wrp .wjportal-jobs-cnt-wrp {
    flex: 1; /* Takes up remaining space */
    min-width: 0; /* Prevents text overflow */
}

/* HIDE elements not in the image */
#wjportal-job-cp-wrp .wjportal-jobs-right-wrp,
#wjportal-job-cp-wrp .wjportal-jobs-bottom-full-wrp,
#wjportal-job-cp-wrp .wjportal-featured-tag-wrp {
    display: none;
}

/* --- Middle Column: Title, Company, Location --- */
#wjportal-job-cp-wrp .wjportal-jobs-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 10px;
}

#wjportal-job-cp-wrp .wjportal-job-title {
    display: block;
    font-weight: 600;
    line-height: 1.4;
}

#wjportal-job-cp-wrp .wjportal-job-title a {
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
    text-decoration: none;
    font-weight: 700;

}
#wjportal-job-cp-wrp .wjportal-job-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

/* --- Company & Location Line Styling --- */
#wjportal-job-cp-wrp .wjportal-companyname {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    text-decoration: none;
}
#wjportal-job-cp-wrp .wjportal-companyname:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}


#wjportal-job-cp-wrp
    .wjportal-jobs-middle-wrp
    > .wjportal-jobs-data:nth-of-type(3) {
    /* This targets the div holding category/location */
    line-height: 1.5;
}

/* Hide the "Computer/IT" span */
#wjportal-job-cp-wrp .wjportal-jobs-data-text:first-of-type {
    display: none;
}
#wjportal-job-cp-wrp .wjportal-jobs-data-text::before{
    display: none;
}

/* Style the Location span and add the pipe "|" */
#wjportal-job-cp-wrp .wjportal-jobs-data-text:last-of-type {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}
#wjportal-job-cp-wrp .wjportal-jobs-list-resume-data:not(:last-of-type){
    margin-bottom: 0;
}
#wjportal-job-cp-wrp .wjportal-jobs-list-resume-wrp{
    padding: 0;
}
#wjportal-job-cp-wrp .wjportal-jobs-data-text:last-of-type::before {
    content: "|";
    margin: 0 0.5em;
    color: var(--wjportal-text-light);
}


/* View All Button */
#wjportal-job-cp-wrp .wjportal-cp-view-btn-wrp,
.wjportal-my-invoices-sec-action-wrp {
    text-align: center;
    margin-top: 30px;
    display: block;
}
#wjportal-job-cp-wrp div#job-applied-resume-wrapper {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
#wjportal-job-cp-wrp .wjportal-cp-view-btn {
    background-color: var(--wpjp-secondary-color); /* Use dark text color for contrast */
    color: white;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.3s;
    width: 100%;
}

#wjportal-job-cp-wrp .wjportal-cp-view-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: white;
}

/* --- Invoices Table Section --- */
#wjportal-job-cp-wrp .wjportal-my-invoices-wrapper {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
.wjportal-table-wrp {
    min-width: 600px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-table-wrp thead tr {
    background-color: #f0e6ff; /* Custom light header background based on primary color */
}

.wjportal-table-wrp th {
    color: var(--wpjp-primary-color);
}

.wjportal-table-w50 {
    width: 45%; 
}

.wjportal-my-invoices-list-payment-method-type {
    background-color: var(--wpjp-primary-color);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
}

.wjportal-paypal {
    /* Using a darker primary color derivative for Paypal to keep the theme */
    background-color: #4b1c97; 
}

.wjportal-list-act-btn-view-all {
    background-color: var(--wpjp-primary-color);
    padding: 8px 20px;
    border-radius: 4px;
}

.wjportal-list-act-btn-view-all:hover {
    background-color: var(--wpjp-highlight-color);
    color: var(--wpjp-secondary-color);
}
.wjportal-my-invoices-sec-act-btn.wjportal-list-act-btn-view-all{
    background-color: var(--wpjp-secondary-color);
    color: white;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.3s;
}
.wjportal-my-invoices-sec-act-btn.wjportal-list-act-btn-view-all:hover{
    background-color: var(--wpjp-primary-color);
    color: white;
}
/* --- Icon for the Guest Banner --- */
.wjportal-cp-guest-banner-left-icon-wrap {
    /* Define the container's width/height to properly contain the icon */
    width: 50px;
    height: 50px;
    padding: 5px;
    /* You might want to add background, border-radius, etc., here for a stylistic container */
}

.wjportal-cp-guest-banner-left-icon-wrap::before {
    content: "";
    display: block; /* Important for the background to show */
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    
    /* SVG: Simple User Icon (Placeholder/Guest) */
    /* The SVG uses a light blue stroke: #4A90E2 */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="11" width="18" height="11" rx="2" ry="2"%3E%3C/rect%3E%3Cpath d="M7 11V7a5 5 0 0 1 10 0v4"%3E%3C/path%3E%3C/svg%3E');
}
/* ------------------------------------------- */
/* --- Responsive Design Media Queries --- */
/* ------------------------------------------- */

/* 1. Large Laptops / Desktops (Max Width 1280px) */
@media (max-width: 1280px) {
    /* Font scaling for slightly smaller screens */
    :root {
        --wpjp-main-heading: 2.0em;
        --wpjp-second-sub-heading: 1.5em;
        --wpjp-sub-heading: 1.15em;
        --wpjp-body-font-size: 0.95em;
    }
}

/* 2. Tablets / Small Laptops (Max Width 1080px) - Main Layout Break */
@media (max-width: 1080px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.8em;
        --wpjp-second-sub-heading: 1.4em;
        --wpjp-sub-heading: 1.1em;
        --wpjp-body-font-size: 0.95em;
    }

    /* Stack the main dashboard container (Left/Right columns) */
    #wjportal-job-cp-wrp {
        flex-direction: column;
        gap: 20px;
    }

    /* Sidebar (Left) and Content (Right) take full width */
    .wjportal-cp-left,
    .wjportal-cp-right {
        flex: 1 1 100%;
        min-width: 100%;
        min-height: auto;
        position: static; /* Remove sticky positioning on smaller screens */
        top: auto;

    }

    .wjportal-cp-left {
        /* Make sidebar area less dominant when it's at the top */
        min-height: auto;
        margin-bottom: 20px;
    }
    
    .wjportal-cp-right {
        /* Remove inner padding that might look bad when stacking */
        padding: 0;
        width: 100%;
    }
    
    .wjportal-cp-boxes {
        /* Change from 4 columns to 3 columns on medium screens */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3. Smaller Tablets / Large Phones (Max Width 767px) */
@media (max-width: 767px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.6em;
        --wpjp-second-sub-heading: 1.3em;
        --wpjp-sub-heading: 1.0em;
        --wpjp-body-font-size: 0.9em;
    }
    
    /* Stats Boxes change to 2 columns */
    .wjportal-cp-boxes {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 20px;
    }

    /* Top User Profile Adjustments: Stack user info and actions */
    .wjportal-cp-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    
    .wjportal-cp-user {
        /* Remove 100% width from inner user wrapper that was constraining it */
        width: auto;
        margin-bottom: 20px;
    }

    .wjportal-cp-user-action {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
    }
    
    /* Resume/Job Card adjustments */
    #wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    #wjportal-job-cp-wrp .wjportal-resume-data {
        /* Ensure resume details take full width */
        width: 100%;
    }
    
    #wjportal-job-cp-wrp .wjportal-progress-bar-container{ width:100%; }
    /* Invoice Table Responsiveness (stacking rows) */
    .wjportal-table-wrp {
        min-width: unset; /* Allow table to shrink */
        border: none;
    }

    .wjportal-table-wrp thead {
        display: none;
    }

    .wjportal-table-wrp tbody,
    .wjportal-table-wrp tr {
        display: block;
    }

    .wjportal-table-wrp tbody tr {
        margin-bottom: 15px;
        border: 1px solid var(--wpjp-border-color);
        border-radius: 4px;
    }

    .wjportal-table-wrp td {
        display: block;
        text-align: right;
        border-bottom: 1px dotted var(--wpjp-border-color);
        position: relative;
        padding: 10px 15px;
    }

    .wjportal-table-wrp td::before {
        /* Add column header label */
        content: attr(data-th); 
        font-weight: bold;
        float: left;
        color: var(--wpjp-primary-color);
    }
    
    .wjportal-table-w50 {
        width: 100%; 
    }
}

/* 4. Large Mobile Phones (Max Width 650px) */
@media (max-width: 650px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.5em;
        --wpjp-second-sub-heading: 1.2em;
        --wpjp-sub-heading: 1.0em;
        --wpjp-body-font-size: 0.9em;
    }
    
    /* Simplify button wrapping in top section */
    .wjportal-cp-user-act-btn {
        width: 100%;
        justify-content: center;
    }
    .wjportal-cp-user-action {
        gap: 8px;
    }

    /* Reduce dashboard item padding */
    #wjportal-job-cp-wrp div#wpjobportal-center, #wjportal-job-cp-wrp div#job-applied-resume-wrapper {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    
}


/* 5. Small Mobile Phones (Max Width 480px) */
@media (max-width: 480px) {
    /* Final font scaling for smallest screens */
    :root {
        --wpjp-main-heading: 1.4em;
        --wpjp-second-sub-heading: 1.1em;
        --wpjp-sub-heading: 0.95em;
        --wpjp-body-font-size: 0.85em;
    }

    /* Stats Boxes collapse to a single column */
    .wjportal-cp-boxes {
        grid-template-columns: 1fr; /* 1 column */
        margin-top: 10px;
        padding-top: 10px;
        gap: 15px;
    }
   #wjportal-job-cp-wrp .wjportal-cp-box-top::before{
        top: 11px;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
    }
    .wjportal-applied-job-resume-status {
        top: 88% !important;
    right: 0rem !important;
}
    /* Shrink the user logo */
    .wjportal-user-logo {
        width: 80px;
        height: 80px;
    }
    
    /* Adjust padding on the list items */
    #wjportal-job-cp-wrp .wjportal-jobs-list-top-wrp {
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    /* Ensure action buttons are always full width if they stack */
    .wjportal-cp-user-act-btn {
        padding: 8px 12px;
    }
    
    /* Adjust short links padding */
    #wjportal-job-cp-wrp .wjportal-cp-short-links-wrp {
        padding: 10px 15px;
    }
    
    .wjportal-cp-box-num {
        font-size: 30px;
    }
    .wjportal-cp-box-tit {
        margin-top: 50px;
    }
}



/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/wp-job-portal/includes/css/employercp.css */



#wjportal-emp-cp-wrp{
   display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
a {
    text-decoration: none;
    color: var(--wpjp-primary-color); /* Primary link color */
    transition: color 0.3s, opacity 0.3s;
}

a:hover {
    color: var(--wpjp-secondary-color);
}
#wjportal-emp-cp-wrp .wjportal-cp-top{
 width: 100%;
    border: 1px solid var(--wpjp-border-color);
    padding:20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 5px solid var(--wpjp-primary-color);
    background: linear-gradient(to bottom, var(--wpjp-primary-color), var(--wpjp-secondary-color));
}
.wjportal-cp-user{
   display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
.wjportal-user-logo {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color); /* Gold ring accent */
    box-shadow: 0 0 0 2px var(--wpjp-border-color);
    flex-shrink: 0;
    background-color: white;
    padding: 5px;
}

.wjportal-user-logo-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.wjportal-user-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.wjportal-user-tagline {
    font-size: var(--wpjp-body-font-size);
    color: #fff; 
    margin-top: 2px;
    font-weight: 500;
}

.wjportal-cp-user-action {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Action Buttons with SVG Icons via Data URI --- */
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-job,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-my-companies,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile{
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-job:hover,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-my-companies:hover,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile:hover{
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);

}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile:hover{
    background-color: #ffffff;
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
}

/* 1. Make the links align icon and text nicely */
.wjportal-cp-user-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em; /* Creates space between the icon and the text */
}

/* 2. Common styles for all icons */
.wjportal-cp-user-act-btn::before {
    content: "";
    display: inline-block;
    width: 1em;  /* Adjust icon size as needed */
    height: 1em;

    /* --- This is your icon color! --- */
    /* Change this one color to update all icons. */
    background-color: currentColor; /* Example: A standard blue */

    /* Standard mask properties for all icons */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* 3. Specific icon for "Add job" (File-plus icon) */
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-job::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

/* 4. Specific icon for "My Companies"  */
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-my-companies::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}
/* 5. Specific icon for "Edit Profile" (Pencil icon) */
.wjportal-cp-user-act-profile-edit-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E");
}

/* --- Stats Boxes Section (Key Metrics) --- */
/* --- all files in jobseekercp.css --- */

/* Styling for specific box accent colors */
#wjportal-emp-cp-wrp .wjportal-cp-box.box1 { border-top: 4px solid #3498db; }
#wjportal-emp-cp-wrp .wjportal-cp-box.box2 { border-top: 4px solid #30cd72; }
#wjportal-emp-cp-wrp .wjportal-cp-box.box3 { border-top: 4px solid #f5a623; }
#wjportal-emp-cp-wrp .wjportal-cp-box.box4 { border-top: 4px solid #bd10e0; }

/* Specific SVG icons for each box */
/* Icon 1: Posted jobs (Document) */
#wjportal-emp-cp-wrp .wjportal-cp-box.box1 .wjportal-cp-box-top::before {
   content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%234A90E2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="2" y="7" width="20" height="14" rx="2" ry="2"%3E%3C/rect%3E%3Cpath d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"%3E%3C/path%3E%3C/svg%3E');
}

/* Icon 2: Applied Resume (Clipboard Check) */
#wjportal-emp-cp-wrp .wjportal-cp-box.box2 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%2330cd72" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"%3E%3C/path%3E%3Cpolyline points="14 2 14 8 20 8"%3E%3C/polyline%3E%3Cpolyline points="9 15 11 17 15 13"%3E%3C/polyline%3E%3C/svg%3E');
}

/* Icon 3: My Companies (Bell) */
#wjportal-emp-cp-wrp .wjportal-cp-box.box3 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23f5a623" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 22V10h-4v12M18 22V8h-4M10 22V14h-4v8M22 22H2"%3E%3C/path%3E%3C/svg%3E');
}

/* Icon 4: Resume Save search (Star) */
#wjportal-emp-cp-wrp .wjportal-cp-box.box4 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23bd10e0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z"%3E%3C/path%3E%3C/svg%3E');
}

/* --- Layout: Left Sidebar and Right Content --- */
.wjportal-cp-left {
    flex: 0 0 280px; 
    border-radius: 10px;
    height: max-content;
    position: sticky;
    top: 4.5rem;
    padding: 0;
    overflow: hidden;
    min-height: 800px;
}

.wjportal-cp-right {
    flex: 1; 
    min-width: 550px;
}

/* --wpjp-- Sidebar Short Links --wpjp-- */
/* --wpjp-- Left Column: Short Links --wpjp-- */
#wjportal-emp-cp-wrp .wjportal-cp-sec-title,
.wjportal-my-invoices-sec-tit-txt {
    font-size:var(--wpjp-sub-heading);
    color: var(--wpjp-text-secondary);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-emp-cp-wrp #wpjobportal-center .wjportal-cp-sec-title{
    margin-bottom: 20px;
}
#wjportal-emp-cp-wrp h3.wjportal-section-title{
    font-size:var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    padding: 15px 0 15px 0;
    padding-left: 0;
    margin: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-emp-cp-wrp .wjportal-jobs-list.wpjobportal-list-item-is-featured{
    border: 1px solid #ffb63b;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}
/* --wpjp-- Layout: Left Sidebar and Right Content --wpjp-- */


.wjportal-cp-right {
    flex: 1; 
    min-width: 550px;
}

/* --- Sidebar Short Links --- */
/* --- Left Column: Short Links --- */
#wjportal-emp-cp-wrp  .wjportal-cp-sec-title,
.wjportal-my-invoices-sec-tit-txt {
    font-size:var(--wpjp-sub-heading);
    color: var(--wpjp-text-secondary);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-emp-cp-wrp  #wpjobportal-center .wjportal-cp-sec-title{
    margin-bottom: 20px;
}
h3.wjportal-section-title{
    font-size:var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    padding: 15px 0 15px 0;
    padding-left: 0;
    margin: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-emp-cp-wrp  .wjportal-jobs-list.wpjobportal-list-item-is-featured{
    border: 1px solid #ffb63b;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}

#wjportal-emp-cp-wrp  .wjportal-cp-short-links-wrp {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 10px 24px;
    text-align: center;
    margin-bottom: 20px;
}
/*#wjportal-emp-cp-wrp  .wjportal-cp-sec-title{
    display: none;
}*/
#wjportal-emp-cp-wrp  .wjportal-cp-short-links-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#wjportal-emp-cp-wrp  .wjportal-list-anchor {
    display: flex;
    align-items:flex-start;
    gap: 12px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    color: var(--wpjp-wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;

}

#wjportal-emp-cp-wrp  .wjportal-list-anchor:hover {
    background-color: var(--wpjp-background-color);
    color: var(--wpjp-primary-color);
    filter: none;
    border-radius: 8px;
}

#wjportal-emp-cp-wrp  .wjportal-list-anchor img {
    width: 24px;
    height: 24px;
    filter: grayscale(1) opacity(0.6);
}
#wjportal-emp-cp-wrp  .wjportal-list-anchor:hover img{
    filter: unset;
}
#wjportal-emp-cp-wrp span.wjportal-cp-link-text {
    text-align: left;
}
#wjportal-emp-cp-wrp  .app-status {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9em;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--wpjp-bg-body);
    flex-shrink: 0;
}
.wjportal-cp-graph-wrp.wjportal-cp-sect-wrp,
.wjportal-cp-sect-wrp.wjportal-applied-resume-wrp{
   width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
 #wjportal-emp-cp-wrp .wjportal-cp-right .wjportal-resume-list-wrp .wjportal-resume-app-title{
  background-color: var(--wpjp-background-color);
  border: 1px solid var(--wpjp-border-color);
  padding: 13px 5px;
  color: var(--wpjp-secondary-color);
  font-size: var(--wpjp-body-font-size);
  font-weight: 600;
  margin: 15px 0;

}
 #wjportal-emp-cp-wrp .wjportal-resume-list-top-wrp .wjportal-resume-logo{
  flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
 }
  #wjportal-emp-cp-wrp .wjportal-resume-list-top-wrp span.wjportal-resume-name {
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
    text-decoration: none;
    font-weight: 700;
}
 #wjportal-emp-cp-wrp .wjportal-resume-list-top-wrp .wjportal-resume-listing-skills-data-text,
  #wjportal-emp-cp-wrp .wjportal-resume-list-top-wrp .wjportal-resume-right-wrp,
  #wjportal-emp-cp-wrp .wjportal-resume-list  .wjportal-resume-list-btm-wrp{
  display: none;
 }
#wjportal-emp-cp-wrp .wjportal-resume-list-top-wrp .wjportal-resume-middle-wrp{
  width: 100%;
}

/* ------------------------------------------- */
/* --- Responsive Design Media Queries --- */
/* ------------------------------------------- */

/* 1. Large Laptops / Desktops (Max Width 1280px) */
@media (max-width: 1280px) {
    /* Font scaling for slightly smaller screens */
    :root {
        --wpjp-main-heading: 2.0em;
        --wpjp-second-sub-heading: 1.5em;
        --wpjp-sub-heading: 1.15em;
        --wpjp-body-font-size: 0.95em;
    }
}

/* 2. Tablets / Small Laptops (Max Width 1080px) - Main Layout Break */
@media (max-width: 1080px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.8em;
        --wpjp-second-sub-heading: 1.4em;
        --wpjp-sub-heading: 1.1em;
        --wpjp-body-font-size: 0.95em;
    }

    /* Stack the main dashboard container (Left/Right columns) */
    #wjportal-emp-cp-wrp {
        flex-direction: column;
        gap: 20px;
    }

    /* Sidebar (Left) and Content (Right) take full width */
    .wjportal-cp-left,
    .wjportal-cp-right {
        flex: 1 1 100%;
        min-width: 100%;
        min-height: auto;
        position: static; /* Remove sticky positioning on smaller screens */
        top: auto;
        
    }

    .wjportal-cp-left {
        /* Make sidebar area less dominant when it's at the top */
        min-height: auto;
        margin-bottom: 20px;
    }
    
    .wjportal-cp-right {
        /* Remove inner padding that might look bad when stacking */
        padding: 0;
        width: 100%;
    }
    
    .wjportal-cp-boxes {
        /* Change from 4 columns to 3 columns on medium screens */
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }
}

/* 3. Smaller Tablets / Large Phones (Max Width 767px) */
@media (max-width: 767px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.6em;
        --wpjp-second-sub-heading: 1.3em;
        --wpjp-sub-heading: 1.0em;
        --wpjp-body-font-size: 0.9em;
    }
    
    /* Stats Boxes change to 2 columns */
    .wjportal-cp-boxes {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 20px;
    }

    /* Top User Profile Adjustments: Stack user info and actions */
    .wjportal-cp-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    
    .wjportal-cp-user {
        /* Remove 100% width from inner user wrapper that was constraining it */
        width: auto;
        margin-bottom: 20px;
    }

    .wjportal-cp-user-action {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
    }
    
    /* Resume/Job Card adjustments */
    #wjportal-emp-cp-wrp .wjportal-resume-status-dashboard-data {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    #wjportal-emp-cp-wrp .wjportal-resume-data {
        /* Ensure resume details take full width */
        width: 100%;
    }
    
    #wjportal-emp-cp-wrp .wjportal-progress-bar-container{ width:100%; }
    /* Invoice Table Responsiveness (stacking rows) */
    .wjportal-table-wrp {
        min-width: unset; /* Allow table to shrink */
        border: none;
    }

    .wjportal-table-wrp thead {
        display: none;
    }

    .wjportal-table-wrp tbody,
    .wjportal-table-wrp tr {
        display: block;
    }

    .wjportal-table-wrp tbody tr {
        margin-bottom: 15px;
        border: 1px solid var(--wpjp-border-color);
        border-radius: 4px;
    }

    .wjportal-table-wrp td {
        display: block;
        text-align: right;
        border-bottom: 1px dotted var(--wpjp-border-color);
        position: relative;
        padding: 10px 15px;
    }

    .wjportal-table-wrp td::before {
        /* Add column header label */
        content: attr(data-th); 
        font-weight: bold;
        float: left;
        color: var(--wpjp-primary-color);
    }
    
    .wjportal-table-w50 {
        width: 100%; 
    }
}

/* 4. Large Mobile Phones (Max Width 650px) */
@media (max-width: 650px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.5em;
        --wpjp-second-sub-heading: 1.2em;
        --wpjp-sub-heading: 1.0em;
        --wpjp-body-font-size: 0.9em;
    }
    
    /* Simplify button wrapping in top section */
    .wjportal-cp-user-act-btn {
        width: 100%;
        justify-content: center;
    }
    .wjportal-cp-user-action {
        gap: 8px;
    }

    /* Reduce dashboard item padding */
    #wjportal-emp-cp-wrp div#wpjobportal-center {
        padding: 15px;
        margin-bottom: 20px;
    }
    
}


/* 5. Small Mobile Phones (Max Width 480px) */
@media (max-width: 480px) {
    /* Final font scaling for smallest screens */
    :root {
        --wpjp-main-heading: 1.4em;
        --wpjp-second-sub-heading: 1.1em;
        --wpjp-sub-heading: 0.95em;
        --wpjp-body-font-size: 0.85em;
    }
    .wjportal-cp-user{
        justify-content: center;
    }
    .wjportal-jobseeker-cp-data-top-middle-wrap{
        text-align: center;
    }
    /* Stats Boxes collapse to a single column */
    .wjportal-cp-boxes {
        grid-template-columns: 1fr; /* 1 column */
        margin-top: 10px;
        padding-top: 10px;
        gap: 15px;
    }
   #wjportal-emp-cp-wrp .wjportal-cp-box-top::before{
        top: 11px;
        right: 0px;
        left: 0;
        margin: auto;
        text-align: center;
    }
    .wjportal-applied-job-resume-status {
        top: 88% !important;
    right: 0rem !important;
}
    /* Shrink the user logo */
    .wjportal-user-logo {
        width: 80px;
        height: 80px;
    }
    
    /* Adjust padding on the list items */
    #wjportal-emp-cp-wrp .wjportal-jobs-list-top-wrp {
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    /* Ensure action buttons are always full width if they stack */
    .wjportal-cp-user-act-btn {
        padding: 8px 12px;
    }
    
    /* Adjust short links padding */
    #wjportal-emp-cp-wrp .wjportal-cp-short-links-wrp {
        padding: 10px 15px;
    }
    
    .wjportal-cp-box-num {
        font-size: 30px;
    }
    .wjportal-cp-box-tit {
        margin-top: 50px;
    }
}


/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/wp-job-portal/includes/css/style.css */
/*----------------------------------------------
            WP Job Portal New CSS 
------------------------------------------------*/
/* ---
  Modern CSS for WP Job Portal
--- */

/* ----------------------------------------- */
/* == 1. Global Styles & Variables         == */
/* ----------------------------------------- */


/* new start*/
.wjportal-main-up-wrapper {
    width: 100%;
    max-width: 1350px !important;
    margin: 0 auto !important;
    overflow: hidden;
    color: var(--wpjp-body-font-color);
}
.wjportal-main-up-wrapper{
    box-sizing: border-box;
}
.wjportal-main-up-wrapper * {
    box-sizing: border-box;
    text-wrap: wrap;
}
.wjportal-main-up-wrapper div.wjportal-cp-content-mainwrp{display: flex;width:100%;gap: 30px;}
.wjportal-main-up-wrapper .wjportal-cp-right{min-width: unset;max-width:100%;width: calc(100% - 310px);flex: 1 1 auto;}
.wjportal-main-up-wrapper .wjportal-cp-graph *{max-width: 100% !important;}

/* new end*/
.wjportal-main-up-wrapper a,
.wjportal-main-up-wrapper .wjportal-main-wrapper a:focus {
    text-decoration: unset;

}


/* ----------------------------------------- */
/* == 1. Top Header       == */
/* ----------------------------------------- */


.wjportal-page-header {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

div.wjportal-breadcrumbs-wrp {
    width: 100%;
    margin-top: 10px;
    display: flex;
    gap: 2px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-breadcrumbs-wrp div.wjportal-breadcrumbs-links a.wjportal-breadcrumbs-link {
    color: var(--wpjp-primary-color);
}

.wjportal-breadcrumbs-links.wjportal-breadcrumbs-firstlinks {
    color: var(--wpjp-primary-color);
}

.wjportal-breadcrumbs-links.wjportal-breadcrumbs-lastlink {
    color: var(--wpjp-body-font-color);
}

.wjportal-page-heading {
    font-size: var(--wpjp-main-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    position: relative;
    width: 100%;
}

/* Main Header Container */
.wjportal-page-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Left Side: Title and Breadcrumbs --- */

.wjportal-page-header-cnt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.wjportal-breadcrumbs-links {
    display: inline-block;
}

.wjportal-breadcrumbs-link {
    color: #007bff;
    /* Standard link blue */
    text-decoration: none;
    transition: color 0.3s ease;
}

.wjportal-breadcrumbs-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wjportal-breadcrumbs-links:not(:first-child)::before {
    content: '/';
    margin: 0 8px;
    color: #adb5bd;
}

/* --- Right Side: Actions --- */

.wjportal-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between filter and button */
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
}

div.wjportal-header-actions div.wjportal-act-btn-wrp {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Filter/Sort Dropdown Styling */

.wjportal-filter-wrp {
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper #sorting {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 12px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    outline: none;
}

.wjportal-filter select#sorting {
    height: auto !important;
}

.wjportal-filter-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-right: 5px;
    transition: background-color 0.3s ease;
    border-left: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper #sortingimage {
    width: 16px;
    height: 16px;
}

/* "Add New Job" Button Styling */
.wjportal-act-btn {
    background-color: var(--wpjp-primary-color);
    /* Primary action color */
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.wjportal-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-act-btn i {
    font-size: var(--wpjp-body-font-size);
}

/* ----------------------------------------- */
/* == 5. Modern Search Filter Styles       == */
/* ----------------------------------------- */

/* Main wrapper for the entire filter section */
.wjportal-filter-search-main-wrp {
    background-color: var(--wpjp-card-background);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    margin-bottom: 2rem;
}

.wjportal-main-up-wrapper form#job_form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Flex container for the form fields and buttons */
.wjportal-filter-search-wrp {
    display: flex;
    align-items: center;
    /* Vertically align items */
    gap: 1rem;
    /* Space between fields */
    width: 100%;
}

/* Wrapper for each input field, allows them to grow */
.wjportal-filter-search-field-wrp {
    flex: 1 1 auto;
    /* Allows input fields to take available space */
    position: relative;
    width: calc(100% / 2 - 100px - 1rem);
    background-color: white;

}

.wjportal-filter-search-input-field {
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px !important;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 55px !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal input[type="text"] {
    color: var(--wpjp-body-font-color);
    border: unset;
    height: 100% !important;
    min-width: fit-content;
}

.wpjobportal-input-list-wpjobportal:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li {
    list-style-type: none;
    margin-bottom: 0;
}

.wjportal-filter-search-input-field:focus {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    outline: none;
}

.wjportal-main-up-wrapper p,
.wjportal-main-up-wrapper ul,
.wjportal-main-up-wrapper ol {
    background: #fff;
}

/* Wrapper for the search and reset buttons */
.wjportal-filter-search-btn-wrp {
    display: flex;
    gap: 0.5rem;
}

/* Base styles for both buttons */
.wjportal-filter-search-wrp .wjportal-filter-search-btn,
.wjportal-filter-search-wrp .wjportal-filter-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    min-height: 55px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: var(--wpjp-body-font-size);
    /* Adjust icon size */
}

/* Primary search button */
.wjportal-filter-search-wrp .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-filter-search-wrp .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    text-decoration: none !important;
    color: #fff;
}

/* Secondary reset button */
.wjportal-filter-search-wrp .wjportal-filter-reset-btn {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-secondary-color);
}

.wjportal-filter-search-wrp .wjportal-filter-reset-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none !important;
}

.wjportal-main-up-wrapper input[type="text"],
.wjportal-main-up-wrapper input[type="email"],
.wjportal-main-up-wrapper input[type="url"],
.wjportal-main-up-wrapper input[type="password"],
.wjportal-main-up-wrapper input[type="search"],
.wjportal-main-up-wrapper input[type="number"],
.wjportal-main-up-wrapper input[type="tel"],
.wjportal-main-up-wrapper input[type="range"],
.wjportal-main-up-wrapper input[type="date"],
.wjportal-main-up-wrapper input[type="month"],
.wjportal-main-up-wrapper input[type="week"],
.wjportal-main-up-wrapper input[type="time"],
.wjportal-main-up-wrapper input[type="datetime"],
.wjportal-main-up-wrapper input[type="datetime-local"],
.wjportal-main-up-wrapper input[type="color"],
.wjportal-main-up-wrapper textarea,
.wjportal-main-up-wrapper select {
    border-radius: 8px !important;
    height: 55px !important;
    color: var(--wpjp-body-font-color) !important;
    border-color: var(--wpjp-border-color) !important;
    background-color: white !important;
    width:100%;
}

/* ----------------------------------------- */
/* == Responsive for Search Filter         == */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .wjportal-filter-search-wrp {
        flex-direction: column;
        /* Stack fields vertically */
        align-items: stretch;
        /* Make items full-width */
    }

    .wjportal-form-wrp.wjportal-search-job-aiform .wjportal-filter-search-btn-wrp {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .wjportal-filter-search-btn-wrp {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .wjportal-resume-detail-left-wrapper .wjportal-resume-left-section {
        position: relative;
    }
    .wjportal-filter-search-btn-wrp button{min-width: 60px;}
}

/* ----------------------------------------- */
/* == AI Modern Search Filter Styles       == */
/* 
/* ----------------------------------------- */

/* --- Main Container --- */
.wjportal-filter-aisearch-main-wrp {
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    width: 100%;
}

/* --- Main Flex Layout (Logo + Content) --- */
.wjportal-filter-ai-searchfrm-wrp {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 10px;
    padding-bottom: 30px;
    padding-top: 20px;
    align-items: flex-start;
}

/* --- AI Logo Styling --- */
.wjportal-ai-searchfrm-logo-wrp {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--wpjp-primary-color) 0%, var(--wpjp-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Show and style the original image */
.wjportal-ai-searchfrm-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    /* Makes the PNG icon white */
}

/* --- Content Wrapper (Title, Input, Button) --- */
.wjportal-aifilter-search-wrp {
    display: flex;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-aifilter-search-wrp .wjportal-filter-ai-searchfrm-title {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.4;
    /* Trendy gradient text */
    background: var(--wpjp-secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    padding-top: 10px;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-field-wrp {
    position: relative;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field {
    width: 100%;
    height: 55px;
    padding: 12px 16px 12px 48px;
    /* Add left padding for an icon */
    font-size: 16px;
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;

}

.wjportal-form-wrp.wjportal-search-job-aiform .wjportal-aifilter-search-wrp .wjportal-filter-search-input-field {
    text-align: center;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

/* Add a search icon inside the input field */
.wjportal-aifilter-search-wrp .wjportal-filter-search-field-wrp::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--wpjp-body-font-color);
    opacity: 0.5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    transition: opacity 0.2s ease;
}

.wjportal-filter-search-main-wrp.wjportal-filter-aisearch-main-wrp {
    margin-bottom: 40px;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field:focus+.wjportal-filter-search-field-wrp::before {
    opacity: 0.8;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn-wrp {
    align-self: flex-end;
    /* Pushes button to the right */
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 48, 48, 0.2);
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);

}

.wjportal-form-wrp.wjportal-search-job-aiform {
    display: flex;
    width: 100%;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
}

span.wjportal-filter-ai-searchfrm-discription {
    width: 100%;
}

.wjportal-main-up-wrapper input#aijobsearch {
    padding-left: 40px;
}

/* Hide original button image */
.wjportal-aifilter-search-wrp .wjportal-filter-search-field-icon {
    display: none;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .wjportal-filter-ai-searchfrm-wrp {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .wjportal-aifilter-search-wrp {
        align-items: center;
        justify-content: center;
    }

    .wjportal-aifilter-search-wrp .wjportal-filter-search-btn-wrp {
        align-self: stretch;
    }

    .wjportal-aifilter-search-wrp .wjportal-filter-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------- */
/* == AI Job Search Page            == */
/* ----------------------------------------- */

/* --- Main Form Container --- */
.wjportal-form-wrp.wjportal-search-job-aiform {
    /* Glassmorphism Effect */
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);

    border-radius: 24px;
    padding: 2.5rem;
    /* Increased padding */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    width: 100%;
}

/* --- Main Flex Layout (Column Direction) --- */
.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-wrp {
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    align-items: center;
    /* Center everything horizontally */
    text-align: center;
    gap: 1.5rem;
    /* Space between elements */
}

/* --- AI Logo Styling --- */
.wjportal-search-job-aiform .wjportal-ai-searchfrm-logo-wrp {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--wpjp-primary-color) 0%, var(--wpjp-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Show and style the original image */
.wjportal-search-job-aiform .wjportal-ai-searchfrm-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    /* Makes the PNG icon white */
}

/* --- Content Wrapper (Title, Input, Button) --- */
.wjportal-search-job-aiform .wjportal-aifilter-search-wrp {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-title {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.4;
}

.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-discription {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin: 0 auto;
    /* Center the description text */
    line-height: 1.6;
}

.wjportal-search-job-aiform .wjportal-filter-search-field-wrp {
    position: relative;
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-elegant-addon-filter-search-input-field {
    width: 100%;
    height: 55px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    text-align: center;
    color: var(--wpjp-body-font-color);
    background-color: white;
    border: 1px solid rgba(233, 236, 239, 0.8);
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wjportal-search-job-aiform .wjportal-elegant-addon-filter-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

.wjportal-search-job-aiform .wjportal-filter-search-btn-wrp {
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-filter-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 15px;
    /* Slightly taller button */
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 48, 48, 0.2);
}

.wjportal-search-job-aiform .wjportal-filter-search-btn::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.wjportal-search-job-aiform .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);

}

/* Hide original button image */
.wjportal-search-job-aiform .wjportal-filter-search-field-icon {
    display: none;
}

/* ----------------------------------------- */
/* == 2. Job List Page Styles              == */
/* ----------------------------------------- */

.wjportal-filter-search-main-wrp {
    display: flex;
    width: 100%;
    padding: 15px 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
}

/* Main job item card */
.wjportal-jobs-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-jobs-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Flex container for the top section (logo + main content) */
.wjportal-jobs-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
}

/* Company Logo */
.wjportal-jobs-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-jobs-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* Container for all job info */
.wjportal-jobs-cnt-wrp {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 0;
    flex-grow: 1;
}

/* Middle content: title, company, location */
.wjportal-jobs-middle-wrp {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-bottom: 8px;
}

span.wjportal-job-title {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.wjportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wjportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline !important;
}

.wjportal-companyname {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wjportal-custom-field {
    padding-bottom: 5px;
}

span.wjportal-shortlist-job-comment-tit {
    font-size: var(--wpjp-body-font-size);
}

/*.wjportal-jobs-list-wrapper.wjportal-my-jobs-wrp .wjportal-jobs-middle-wrp{gap:10px;}*/
.wjportal-jobs-list-wrapper.wjportal-my-jobs-wrp a.wjportal-companyname {
    padding-top: 10px;
}

.wjportal-main-wrapper.wjportal-clearfix a.wjportal-companyname {
    padding: 5px 0;
}

.wjportal-jobs-data-text:not(:last-child)::after {
    content: "•";
    margin: 0 0.5rem;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-custom-field-tit {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-custom-field-val {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

/* Right content: job type, salary, date */
.wjportal-jobs-right-wrp {
    width: 30%;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-cp-cnt .wjportal-jobs-middle-wrp {
    width: 100%;
}

.wjportal-cp-cnt .wjportal-jobs-right-wrp {
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

.wjportal-job-type {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5em;
    /* Space between icon and text */
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

/* --- The CSS Clock Icon --- */
.wjportal-job-type::before {

    /* The clock shape created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");

}

.wjportal-jobs-salary {
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    font-size: 18px;

}

span.wjportal-salary-type {
    font-weight: 400;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-shortlist-job-comments {
    flex-basis: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

span.wjportal-shortlist-job-comment-val {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-jobs-list-wrapper.wjportal-shortlisted-jobs-wrp .wjportal-container-small {
    padding: 10px;
    margin-top: 0 !important;
}

/* Bottom controls bar */
.wjportal-jobs-list-btm-wrp {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

/* This uses flexbox to perfectly align the icon and the text */
.wjportal-newest-jobs-date {
    display: inline-flex;
    /* Keeps the element inline while enabling flex alignment */
    align-items: center;
    /* Vertically centers the icon with the text */
    gap: 0.5rem;
    /* The space between the icon and the text */
    width: 40%;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    padding-left: 10px;
}

/* --- The CSS Clock Icon --- */
.wjportal-newest-jobs-date::before {
    content: '';
    display: block;
    width: 1em;
    /* Icon size will scale with the font size */
    height: 1em;

    /* The icon will automatically match the text color */
    background-color: currentColor;

    /* The clock shape is created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

a.wjportal-jobs-act-btn-apply {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-jobs-act-btn-apply:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* --- Shared Styles for ALL Buttons --- */
.wjportal-jobs-act-btn,
.wjportal-jobs-act-btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* --- Base Icon Style for ALL Buttons --- */

a.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied {
    background: #fafafa;
    color: #a09e9e;
}

a.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied:hover {
    background: var(--wpjp-secondary-color);
}

/* --- Secondary Button Style (Short List, Tell a friend) --- */
.wjportal-jobs-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
}

.wjportal-jobs-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: white;
}

.wjportal-popup-field.wjportal-popup-field-job-title {
    font-weight: 700;
}

.wjportal-popup-field-email-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    padding: 10px 0;
}

/* --- Primary Button Style (Apply Now) --- */
.wjportal-jobs-act-btn-apply {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}


/* ----------------------------------------- */
/* == 8. Action Bar with Star Rating       == */
/* ----------------------------------------- */

/* Main flex container for the bottom action bar */
.wjportal-jobs-action-wrp {
    display: flex;
    justify-content: space-between;
    /* Pushes items to the edges */
    align-items: center;
    gap: 1rem;
}

/* Re-styling the action buttons to match the image */
.wjportal-jobs-list-btm-wrp .wjportal-jobs-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */

    /* Sizing and Shape */
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;

    /* Re-ordering with Flexbox */
    order: 2;
    /* Puts buttons after the stars */
}

/* Hover effect for the buttons */
.wjportal-jobs-list-btm-wrp .wjportal-jobs-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

.wjportal-jobs-act-btn.wjportal-jobs-act-btn-ai-suggested-resumes {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

/* Base style for icons added via CSS */

/* Featured tag icon */
span.wjportal-featured-tag-icon-wrp span.wjportal-featured-tag-icon {
    color: #fff;
    background: var(--wpjp-primary-color);
    display: inline-block;
    position: absolute;
    top: -64px;
    left: -28px;
    z-index: 1;
    transform: rotate(45deg);
    height: 126px;
    width: 76px;
}

span.wjportal-featured-tag-icon-wrp span.wjportal-featured-tag-icon i {
    position: absolute;
    bottom: 42px;
    right: 7px;
    font-size: 25px;
}

span.wjportal-featured-tag-icon-wrp span.wjportal-featured-hover-wrp {
    background: #e83030;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

span.wjportal-item-act-status.wjportal-waiting {
    background-color: #f28d19;
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

span.wjportal-item-act-status.wjportal-rejected {
    background-color: #bb0906;
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

/* --- Popup Backdrop --- */
.wjportal-main-up-wrapper #payment-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    /* Use secondary color for backdrop */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.quickviewfullwidth.tell-a-friend-captcha-wrapper .wjportal-form-value input {
    background-color: var(--background-color);
}

/* --- Payment Methods Layout --- */
.wjportal-payemt-methods-wrp {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* Allows items to stack on small screens */
}

/* --- Individual Payment Method Styling --- */
.wjportal-payemt-method-item {
    display: block;
    padding: 1rem;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.wjportal-payemt-method-item:hover {
    transform: translateY(-5px);
    border-color: var(--wpjp-primary-color, #e83030);
    box-shadow: var(--wpjp-card-hover-shadow, 0 6px 20px rgba(0, 0, 0, 0.12));
}

.wjportal-payemt-method-item:hover img {
    /* Bring the logo to full color on hover */
    filter: grayscale(0%);
    opacity: 1;
}

.wjportal-payemt-method-item img {
    display: block;
    max-height: 80px;
    /* Controls the logo size */
    width: auto;
}

/* --- Stripe Button Specifics --- */
/* This makes the clickable area of the Stripe form fill the container */
.wjportal-payemt-method-stripe form {
    display: flex;
}

.wjportal-payemt-method-stripe .stripe-button-el {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Makes the default Stripe button invisible */
    cursor: pointer;
}

.wjportal-payemt-method-stripe .stripe-button-el span {
    display: none !important;
    /* Hide the default "Stripe" text */
    height: auto;
}

/* Hide the duplicate Stripe image that is outside the form */
.wjportal-payemt-method-stripe img {
    max-height: 115px;
}

.wjportal-main-up-wrapper button#proceedPaymentBtn {
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-primary-color);
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-main-up-wrapper button#proceedPaymentBtn:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;

}

a.wjportal-payment-act-btn {
    background-color: var(--wpjp-card-background);
    color: #1b50ef;
    border: 1px solid #1b50ef;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-payment-act-btn:hover {
    background-color: #1b50ef;
    color: #fff !important;
}

.wjportal-jobs-list-wrapper.wjportal-applied-jobs-wrp a.wjportal-payment-act-btn {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}


/* Style for the primary "Make Payment" button */
.wjportal-payment-act-btn {
    /* Button Appearance */
    background-color: var(--wpjp-primary-color);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;

    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between icon and text */

    /* Effects */
    transition: background-color 0.3s ease;
}

.wjportal-payment-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none;
}



/* ----------------------------------------- */
/* == 10. Job Data Icons (Category & Location) == */
/* ----------------------------------------- */
/* Make the parent a flex container to handle spacing */
.wjportal-jobs-data {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on smaller screens */
    align-items: center;
    gap: 0.5rem 1rem;
    /* Row and column gap */
    font-weight: 500;
}

/* Prepare the text span to hold an icon */
.wjportal-jobs-data-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);

}

/* The ::before pseudo-element creates the icon */
.wjportal-jobs-data-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    
}

.wjportal-companyinfo-data::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the map pin icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

.wjportal-companyinfo a.wjportal-companyinfo-link::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the email icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3e%3cpolyline points='22,6 12,13 2,6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3e%3cpolyline points='22,6 12,13 2,6'/%3e%3c/svg%3e");
}

/* Base styles for the icons */
.wjportal-jobs-data-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Use the light text color for the icons to match */
    -webkit-mask-size: cover;
    mask-size: cover;
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-body-font-color) !important;
}

/* Icon for the first span (Category) */
.wjportal-jobs-data .wjportal-jobs-data-text.wjportal-jobs-data-icon-class-category::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
}

.wjportal-jobs-data .wjportal-jobs-data-text.wjportal-jobs-data-icon-class-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");

}


/* Container for the star rating */
.wjportal-shortlist-stars {
    order: 1;
    /* Puts the stars first */
    /*border: 1px solid var(--wpjp-border-color);
  border-radius: 6px;
  padding: 6px 10px;
*/
    margin-right: auto;

}

div.wjportal-jobs-list-btm-wrp div.wjportal-jobs-action-wrp {
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
}

/* ----------------------------------------- */
/* == Job Details              == */
/* ----------------------------------------- */

.wjportal-jobdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wjportal-company-job-viewjob-wrp {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wjportal-view-job-title-wrp {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag .wjportal-job-company-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b !important;
}

.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-tit,
.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-val {
    color: var(--wpjp-secondary-color);
}

.wjportal-company-job-viewjob-leftwrp {
    flex-wrap: wrap;
    display: flex;
    flex: 2;
    min-width: 320px;
    gap: 30px;
}

.wjportal-job-data-map-wrp {
    width: 100%;
}

.wjportal-job-company-wrp {
    float: left;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    background-color: var(--wpjp-card-background);
    position: relative;
    overflow: hidden;
}

.wjportal-job-company-logo {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d4d4d5;
}

img.wjportal-job-company-logo-image {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt {
    float: left;
    width: calc(100% - 150px);
    padding: 0 0 0 20px;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info {
    padding-bottom: 10px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info a.wjportal-job-company-name {
    display: inline-block;
    font-size: var(--wpjp-body-font-size);
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info {
    padding-bottom: 10px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-tit {
    margin-right: 3px;
    display: inline-block;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-val {
    display: inline-block;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-detail-about-job-title,
div.wjportal-jobdetail-wrapper div.wjportal-job-sec-title,
.wjportal-tags-sec-title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wpjp-primary-color);
}

.wjportal-main-up-wrapper .wjportal-view-job-page-job-apply-form-wraper {
    width: 100%;
}

a.wjportal-login-to-apply-btn {
    display: inline-flex;
    /* Allows for easy alignment of text and icon */
    align-items: center;
    /* Vertically centers the icon and text */
    gap: 0.6em;
    /* Adds space between the icon and text */
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease,

}

.wjportal-form-wrp.wpjobportal-quickapply-form .wjportal-login-to-apply-btn::before {
    content: '';
    /* This is required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes the icon color the same as the text color (white) */

    /* The SVG login icon (arrow pointing into a door) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v-2h8V5h-8V3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v-2h8V5h-8V3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-apply-as-visitor-btn {
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color) !important;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    width: 100%;
    justify-content: center;
}

.wjportal-job-apply-or-visitor span {
    font-weight: 700;
    font-size: var(--wpjp-body-font-size);
}

a.wjportal-apply-as-visitor-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

a.wjportal-jobs-act-btn.wjportal-job-act-btn-shortlist {
    font-weight: 500;
}

.wjportal-form-wrp.wpjobportal-quickapply-form .wjportal-form.has-validation-callback .wjportal-form-btn-wrp {
    padding: 0;
    margin: 0;
    border-top: 0px;
    font-size: var(--wpjp-body-font-size);
    width: 100%;
}

a.wjportal-login-to-apply-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
}

a.wjportal-login-to-apply-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-job-apply-or-visitor {
    text-align: center;
    padding: 12px 0;
}

.wjportal-company-job-viewjob-leftwrp .wjportal-job-data .wjportal-job-data-tit,
.wjportal-company-job-viewjob-leftwrp .wjportal-custom-field .wjportal-custom-field-tit {
    color: var(--wpjp-secondary-color);
    font-weight: 500;

}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-job-data {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-custom-field {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border-bottom: 1px solid var(--wpjp-border-color);

}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-custom-field:nth-child(even) {
    margin-right: 10px;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-map {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-data-tags-wrp {
    width: 100%;
}

.wjportal-form.has-validation-callback {
    /*padding-top: 80px*/
}

/* --- Popup Overlay and Container --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background-color: var(--wpjp-card-background);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* --- Popup Header --- */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.popup-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wpjp-secondary-color);
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: var(--wpjp-primary-color);
}

/* --- Provided HTML Styling --- */
.wjportal-job-apply-price-msg {
    background-color: #eaf6ec;
    color: #2f6f42;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 2rem;
    border: 1px solid #2f6f42;
}

.wjportal-job-apply-price-msg strong {
    font-weight: 700;
}

.wjportal-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wjportal-form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
}

.wjportal-job-apply-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Custom Radio Button Styling --- */
.wpjobportal-form-radio-field input[type="radio"] {
    display: none;
    /* Hide the default radio button */
}

.wpjobportal-form-radio-field label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;

    font-size: 16px;
    font-weight: 500;
}

.wpjobportal-form-radio-field label img {
    height: 24px;
    width: auto;
    margin-right: 12px;
}

.wpjobportal-form-radio-field label:hover {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.1);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label {
    border-color: var(--wpjp-primary-color);


}

.jssection_hide {
    display: none;
}

.wjportal-resume-section-undo {
    display: none;
}

/* --- Popup Overlay and Container --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* 1. Container Styling & Layout */
.wpjobportal-form-radio-field {
    /* Use flex to align the hidden input and the label horizontally */
    display: inline-flex;
    align-items: center;
    position: relative;
    /* Essential for positioning the checkmark later */
    cursor: pointer;
}

/* 2. Visually Hide the Default Checkbox */
/* We use the specific attribute selector to ensure we only target the checkbox */
.wpjobportal-form-radio-field input[type="checkbox"] {
    /* Standard method to hide an element but keep it accessible/tabbable */
    position: absolute;
    opacity: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* 3. Style the Checkbox Label Text */
.wpjobportal-form-radio-field label {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    display: flex;
    /* Helps align the text with the pseudo-element */
    align-items: center;
    cursor: pointer;
}

/* 4. Create the Custom Square Box (The UNCHECKED State) */
.wpjobportal-form-radio-field label::before {
    content: '';
    display: block;
    /* Change from inline-block for better control */
    min-width: 20px;
    /* Size of the box */
    height: 20px;
    border: 2px solid #555;
    /* Dark grey border */
    border-radius: 4px;
    /* Slightly rounded corners for a checkbox */
    background-color: #fff;
    margin-right: 10px;
    /* Space between the box and the text */
    transition: all 0.2s ease;
}

/* 5. Style the Checked State: Background/Border */
.wpjobportal-form-radio-field input[type="checkbox"]:checked+label::before {
    background-color: var(--wpjp-primary-color);
    /* Blue background when checked */
    border-color: var(--wpjp-primary-color);
}

/* 6. Style the Checked State: The Checkmark (✓) */
.wpjobportal-form-radio-field input[type="checkbox"]:checked+label::after {
    content: '\2713';
    /* Unicode for a checkmark (✓) */
    position: absolute;
    /* Calculate position based on the label::before size (20px wide) */
    left: 5px;
    /* Adjust to center the checkmark inside the 20px box */
    top: 47%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    /* Ensure no extra line-height pushes the position */
    color: #fff;
    /* White checkmark */
    font-weight: bold;
    background-color: unset;

}

/* Style the help text for completeness */
.wjportal-form-help-txt {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    padding-left: 5px;
    /* Indent slightly */
    width: 100%;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background-color: var(--wpjp-card-background);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* --- Popup Header --- */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.popup-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wpjp-secondary-color);
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: var(--wpjp-primary-color);
}



.wjportal-job-apply-price-msg strong {
    font-weight: 700;
}

.wjportal-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wjportal-form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
}

.wjportal-job-apply-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Custom Radio Button Styling --- */
.wpjobportal-form-radio-field input[type="radio"] {
    display: none;
    /* Hide the default radio button */
}

.wpjobportal-form-radio-field label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.wpjobportal-form-radio-field label img {
    height: 24px;
    width: auto;
    margin-right: 12px;
}

.wpjobportal-form-radio-field label:hover {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.1);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label {
    border-color: var(--wpjp-primary-color);

}

/* --- Trigger Button (for demo) --- */
#open-popup-btn {
    background-color: var(--wpjp-secondary-color);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease;
}

#open-popup-btn:hover {
    box-shadow: var(--wpjp-card-hover-shadow);
    transform: translateY(-3px);
}

.wjportal-company-job-viewjob-rightwrp {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    height: max-content;
    position: sticky;
    top: 2.5rem;
}

.wjportal-jobinfo-wrp {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem 2rem;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: var(--background-color);
}

.wjportal-jobinfo {
    display: flex;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobtype {
    display: inline-block;
    padding: 6px 15px;
    vertical-align: middle;
    color: #fff;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobinfo-data {
    align-items: center;
    display: flex;
    color: var(--wpjp-secondary-color);
    gap: 15px;
    vertical-align: middle;
    font-weight: 500;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);

}

/* --- Icon for Salary --- */
.wjportal-jobinfo-right-data-salary .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
}

/* --- Icon for Category --- */
.wjportal-jobinfo-right-data-category .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>');
}

/* --- Icon for Created Date --- */
.wjportal-jobinfo-right-data-created .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

/* --- Icon for Closing Date --- */
.wjportal-jobinfo-right-data-close-date .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

/* --- Icon for Location --- */
.wjportal-jobinfo-right-data-location .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}

/* --- Icon for Views --- */
.wjportal-jobinfo-right-data-views .wjportal-jobinfo-data-view::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-jobinfo-right-data-workplace-type .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>');
}


.wjportal-jobinfo-highlight {
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    font-size: var(--font-size);
    background-color: #ffeeec;
    border-color: #f29d99;
}

/* --- Step 1: Hide the old PNG image icons --- */
.wjportal-jobinfo-data img {
    display: none !important;

}


/* --- Main Container --- */
/* This lays out all the info blocks in a flexible, wrapping row */
.wjportal-jobinfo-wrp,
.wjportal-jobinfo.wjportal-jobinfo-right-data-location {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    /* Vertical and horizontal spacing */
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
}

/* --- General Styling for Each Info Block --- */
/* Targets all spans like "salary", "category", etc. */
.wjportal-jobinfo-data,
.wjportal-jobinfo-data-view {
    display: flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
}

/* --- Hide Old PNG Images --- */
/* We target the specific images within each block and hide them */
.wjportal-jobinfo-wrp img {
    display: none;
}

/* --- Other Cosmetic Styles --- */
/* Style for the "Full-Time" badge */
.wjportal-jobtype {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    color: white;
    font-weight: 500;
}

/* Style for highlighted info, like the closing date */
.wjportal-jobinfo-highlight .wjportal-jobinfo-data {
    color: #c0392b;
    /* A subtle red to draw attention */
    font-weight: 500;
}

a.wpjobportal_tags_a.wjportal-tags-item {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 5px;
}

div#wpjobportal_jstags {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-tags-item::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    /* Adds space between icon and text */
    vertical-align: middle;
    /* Aligns icon with the text */

    /* This makes the icon color match the text color */
    background-color: currentColor;

    /* Use the SVG shape as a mask */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* SVG icon for a "tag" */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>');
}

a.wpjobportal_tags_a.wjportal-tags-item:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-job-company-btn-wrp {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    gap: 10px;
    background-color: var(--wpjp-card-background);
}

a.wjportal-job-act-btn {
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px;
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

a.wjportal-job-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-job-detail-about-company-wrap {
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-detail-about-company-title {
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-job-detail-about-company-description {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    font-weight: normal;
}

a.wjportal-company-view-all-jobs-btn,
.wjportal-company-view-company-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    margin-top: 20px;
}

.wjportal-company-btn-wrp-viewjobs {
    width: 100%;
}

.wjportal-job-detail-about-company-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to stack on smaller screens */

}

/* --- Base Button & Icon Style --- */
/* This is a shared style for both buttons */
.wjportal-company-btn-wrp a {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);


}

/* Base style for the icon's pseudo-element */
.wjportal-company-btn-wrp a::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Icon size */
    height: 20px;
    /* Icon size */
    background-color: currentColor;
    /* Colors the SVG icon */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Primary Button: "View All Jobs" --- */
.wjportal-company-view-all-jobs-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    background-color: var(--wpjp-primary-color);
    /* Uses your variable with a fallback */
    color: #ffffff;
    border-color: var(--wpjp-primary-color);
}

.wjportal-company-view-all-jobs-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Secondary Button: "View Company" --- */
.wjportal-company-view-company-btn {
    background-color: transparent;
    color: var(--wpjp-primary-color);
    border-color: var(--wpjp-primary-color);

}

.wjportal-company-view-company-btn:hover {
    background-color: var(--wpjp-primary-color, );
    color: #ffffff;
}

.wjportal-main-up-wrapper .wjportal-form-wrp.wpjobportal-quickapply-form {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    background-color: #fffdf7;
}

.wjportal-company-job-viewjob-rightwrp .wjportal-job-company-btn-wrp a.wjportal-job-act-btn-tell,
a.wjportal-job-act-btn-short {
    display: inline-flex;
    align-items: center;
    padding: 10px 10px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    gap: 10px;
}

a.wjportal-job-act-btn-tell:hover,
a.wjportal-job-act-btn-short:hover {
    background-color: var(--wpjp-secondary-color) !important;
    color: #fff !important;
}

.wjportal-jobinfo-data.wjportal-job-close-date {
    color: #b72e2e;
}

/* --- Icon for Views Count --- */

/* First, hide the old PNG image */
.wjportal-jobinfo-data-view img {
    display: none;
}

/* Optional: Improve alignment */
.wjportal-jobinfo-data-view {
    display: inline-flex;
    align-items: center;
    color: var(--wpjp-secondary-color);
    font-weight: 500;
}

/* ----------------------------------------- */
/* == Applied Job List Page Styles              == */
/* ----------------------------------------- */

.wjportal-jobs-list-wrapper.wjportal-applied-jobs-wrp {
    width: 100%;
}

/* --- Popup Backdrop --- */
#no-folder-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* --- Popup Card --- */
.wjportal-applied-job-actions-popup {
    background: var(--wpjp-card-background);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    width: 100%;
    max-width: 400px;
    padding: 3rem 2rem;
    position: relative;
    box-sizing: border-box;
    text-align: center;
}

/* --- CSS-Only Close Icon --- */
#close-section {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-color: var(--wpjp-body-font-color);
    border-radius: 50%;
    font-size: 0;
    /* Hides broken image alt text */
    transition: all 0.2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}


#close-section:hover {
    background-color: var(--wpjp-primary-color);
    transform: rotate(90deg);
}

/* --- Message Content Styling --- */
.wjportal-applied-job-actions-popup-norec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Space between text and button */
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

/* --- "Add Folder" Button Styling --- */
.wjportal-applied-job-actions-popup-norec-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wjportal-applied-job-actions-popup-norec-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}


/* --- Popup Backdrop --- */
#add-note-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* --- Popup Card --- */
.wjportal-applied-job-actions-popup {

    background: var(--wpjp-card-background);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    width: calc(100% - 80px);
    max-width: 100%;
    margin: 0 40px;
    padding: 2.5rem;
    position: relative;
    box-sizing: border-box;
}

/* --- CSS-Only Close Icon --- */
#close-section {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-color: var(--wpjp-body-font-color);
    border-radius: 50%;
    font-size: 0;
    /* Hides broken image alt text */
    transition: all 0.2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#close-section:hover {
    background-color: var(--wpjp-primary-color);
    transform: rotate(90deg);
}


/* --- Form Content Styling --- */
.wjportal-applied-job-actions-wrp {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wjportal-applied-job-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wjportal-main-up-wrapper #comments-label {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-body-font-color);
}

/* --- Textarea Styling --- */
.wjportal-main-up-wrapper textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px 16px;
    font-size: 1rem;

    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
    transition: all 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Save Button --- */
.wjportal-job-applied-actions-btn-wrp {
    display: flex;
    justify-content: flex-end;
}

.wjportal-job-applied-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wjportal-job-applied-actions-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* Add a "save" icon to the button */
.wjportal-job-applied-actions-btn::before {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
}

.wjportal-applied-job-actions-row #comments {
    margin: 0px;
    padding: 0;
}

.wjportal-applied-job-actions-wrp.wjportal-note-actions-wrp .wjportal-applied-job-actions-row #comments {
    padding: 10px;
}

.wjportal-applied-job-actions-row label {
    font-size: var(--wpjp-body-font-size);
    text-align: justify;
    font-weight: 500;
}

/* --- Main Notification Wrapper --- */
/* This can be used for positioning, e.g., position: fixed; bottom: 20px; right: 20px; */
.wjportal-visitor-msg-btn-wrp {
    width: clamp(300px, 90%, 450px);
    /* Responsive width */
}

/* --- Notification Bar (#notification-ok) --- */
#notification-ok {
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    /* Space between message and button */
    width: 100%;
    /* Appearance */
    background-color: #f0fdf4;
    /* Light green for success */
    color: #166534;
    /* Dark green text for readability */
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #4ade80;
    /* Green border */

    /* Effects */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide the original images */
#notification-ok img {
    display: none;
}

/* --- Message Label (#popup_message) --- */
#popup_message {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between icon and text */
    font-weight: 500;
    font-size: 16px;
}

/* --- SVG Icon for the Message --- */
#popup_message::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    /* Inherits the dark green color */

    /* SVG checkmark-in-circle icon */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Close Button --- */
.applynow-closebutton {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 4px;

    /* Layout & Sizing */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;

    /* Appearance & Effects */
    color: #166534;
    /* Match text color */
    font-size: 0;
    /* Hides the "Close" text */
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.applynow-closebutton:hover {
    background-color: rgba(22, 101, 52, 0.1);
    /* Subtle hover effect */
}

/* --- SVG Icon for the Close Button --- */
.applynow-closebutton::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;

    /* SVG 'X' icon */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Animation for the notification appearing --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------------------- */
/* == 6. Resume/Cover Letter Info Styles (V3) == */
/* ----------------------------------------- */

/* Main container for the resume info */
.wjportal-jobs-list-resume-wrp {
    position: relative;
    /* Establishes a positioning context for the status tag */
    padding: 1rem;
    /* Add padding on the right to prevent text from overlapping the positioned tag */

    width: 100%;
}

span.wjportal-item-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

div#job-applied-resume:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Container for each title/value pair */
.wjportal-jobs-list-resume-data {
    display: block;
    /* Make the divs stack vertically */
}

/* Add space between the "Resume Title" and "Cover Letter Title" sections */
.wjportal-jobs-list-resume-data:not(:last-of-type) {
    margin-bottom: 0.75rem;
}

/* Style for the title (e.g., "Resume Title:") */
.wjportal-jobs-list-resume-tit {
    font-weight: 600;
    color: var(--wpjp-body-font-color);
    margin-right: 0.5rem;
    font-size: var(--wpjp-body-font-size);
}

/* Style for the value (the resume name/link) */
.wjportal-jobs-list-resume-val a {
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobs-list-resume-val {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-jobs-list-resume-val a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* Status tag styling */
.wjportal-applied-job-resume-status {
    /* Positioning to place it on the right */
    position: absolute;
    top: 50%;
    right: 1rem;
    /* Aligns with the parent's padding */
    transform: translateY(-50%);
    /* Ensures perfect vertical centering */

    /* Visual styling to match the image */
    padding: 8px 18px;
    border-radius: 6px;
    /* Less rounded than a pill */
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* Green color for the "Inbox" status */
.wjportal-applied-job-resume-status.wjportal-inbox {
    background-color: #28a745;
    /* Green color from image */
}

/* You can add other status colors like this */
.wjportal-applied-job-resume-status.wjportal-rejected {
    background-color: #dc1b18;
    /* Red for rejected */
}

span.wjportal-applied-job-resume-status.statustags.wjportal-shortlist {
    background-color: #85a94a;
}

span.wjportal-applied-job-resume-status.statustags.wjportal-spam {
    background-color: #e69108;
}

.wjportal-applied-job-resume-status.statustags.wjportal-hired {
    background-color: #35811e;
}

.wjportal-applied-job-resume-status.wjportal-primary {
    background-color: var(--wpjp-primary-color);
    /* Blue */
}


/* ----------------------------------------- */
/* == 12. Resume Action Buttons with Icons == */
/* ----------------------------------------- */

/* Wrapper for the action buttons */
.wjportal-resume-action-wrp {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to wrap on smaller screens */
    align-items: center;
    gap: 0.75rem;
    justify-content: end;
}

/* Base style for all action buttons */
.wjportal-resume-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Styling for the secondary action links */
.wjportal-resume-act-btn.action-links {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-act-btn.action-links:hover {
    background-color: var(--wpjp-secondary-color);
    /* A very light gray */
    border-color: #ced4da;
    color: #fff;
}

/* Styling for the primary "View Profile" button */
.wjportal-resume-act-btn[title="view"] {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid transparent;
}

.wjportal-resume-act-btn[title="view"]:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}


.wjportal-view-job-count {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-job-listing-description-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    margin-bottom: 5px;

}

span.wjportal-job-listing-description-val p {
    font-size: var(--wpjp-body-font-size) !important;
    font-weight: normal;
    border: none;
}

.wjportal-custom-field-wrp {
    font-weight: normal;
    width: 100%;
    margin-top: -6px;
}

/* ----------------------------------------- */
/* == 2. Resume List Page Styles              == */
/* ----------------------------------------- */

.wjportal-save-search-form-wrp {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn {
    color: #fff !important;
}

.wjportal-error-msg-actions-wrp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wjportal-error-msg-txt {
    text-align: center;
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: bold;
    width: 100%;
    margin-bottom: 15px;
}

.wjportal-resume-listing-skills-data-text {
    margin-bottom: 10px;
    width: 100%;
}

/*.wjportal-error-msg-actions-wrp:hover {
background-color: var(--wpjp-secondary-color);
    color: #fff!important; }*/

div.wjportal-job-applied-resume-list div#job-applied-resume {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: visible;
    position: relative;
    width: 100%;
}

div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-middle-wrp {
    width: 70%;
}

div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-right-wrp {
    width: 30%;
    flex-direction: column;
    align-items: flex-end;
}

.wjportal-resume-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    position: relative;
    width: 100%;
}

.wjportal-resume-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
    border-radius: 10px;
}

.wjportal-resume-logo {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: static;
    border-radius: 6px;
}

.wjportal-resume-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 80%;
    margin-bottom: 8px;
}

.wjportal-resume-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
}

span.wjportal-resume-job-type {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
    color: white;
}

/* The CSS code for the icon */
.wjportal-resume-job-type::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-register-btn {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-register-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

span.wjportal-resume-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none !important;
}

span.wjportal-resume-name:hover {
    text-decoration: underline !important;
}

span.wjportal-resume-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-resume-data-text {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and title */

}

.wjportal-resume-right-wrp {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: flex-start;
}

span.wjportal-resume-status-heading {
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
}

.wjportal-resume-listing-bottom-full-wrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-resume-cnt-wrp {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 70%;
}

.wjportal-resume-list-btm-wrp {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-resume-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-featured-tag-icon-wrp .featurednew-onhover.wjportal-featured-hover-wrp {
    background: #e83030;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

.wjportal-resume-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

a.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

a.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

/* Style for the data title (e.g., "City:") */
.wjportal-resume-data-title {
    display: none;
}

/* Style for the data value */
.wjportal-resume-data-value {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Base style for the icons */
.wjportal-resume-data-text::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    /* Prevents icon from shrinking */
    width: 18px;
    height: 18px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color */
    -webkit-mask-size: cover;
    mask-size: cover;
}


/* --- Individual Icons (Based on Order) --- */

/* Icon for the 1st item (City) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-lcoation::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

/* Icon for the 2nd item (Desired Salary) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-salary::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='1' x2='12' y2='23'/%3e%3cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='1' x2='12' y2='23'/%3e%3cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3e%3c/svg%3e");
}

/* Icon for the 3rd item (Experience) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-exprience::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3e%3cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3e%3cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3e%3c/svg%3e");
}

/* Icon for the 4th item (Category) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-category::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
}

a.wjportal-resume-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-resume-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

div.wjportal-job-applied-resume div.wjportal-section-heading {
    width: 100%;
    margin-bottom: 25px;
    font-size: var(--wpjp-second-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-applied-job-adv-search-field {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
}

input#btnsubmit-search {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
}

input#btnsubmit-search:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-main-up-wrapper input#reset {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-secondary-color);
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
}

.wjportal-main-up-wrapper input#reset:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-applied-job-adv-search-action-wrp {
    text-align: center;
}

div#wpjobportal_appliedresume_tab_search {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color) !important;
    border: 1px solid var(--wpjp-border-color);
    padding: 30px;
    border-radius: 8px;
}

/* --- Dropdown Container --- */
.wjportal-resume-act-actions-dropdown {
    position: relative;
    display: flex;
    order: 5;
}

/* --- Dropdown Toggle Button --- */
.wjportal-resume-act-actions-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-family: inherit;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wjportal-resume-act-actions-dropdown-toggle span {
    transition: transform 0.2s ease-in-out;
}

.wjportal-resume-act-actions-dropdown-toggle:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* --- Dropdown Menu (Initially Hidden) --- */
.wjportal-resume-act-actions-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    position: absolute;
    right: 0;
    /* Align to the right of the button */
    top:auto;
    bottom: calc(100% + 6px);
    /* Position it right below the button */
    min-width: 220px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 10;
    overflow: hidden;
    padding: 6px;
}

/* Show the menu when the container is focused */
.wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-menu,
.wjportal-resume-act-actions-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
}

div#job-applied-resume-wrapper.wjportal-job-applied-resume {
    position: relative;
    z-index: 10;
}

.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-toggle span {
    transform: rotate(180deg);
}

.wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-toggle span {
    transform: rotate(180deg);
}

/* --- Styling for links inside the dropdown --- */
.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links svg {
    color: #6b7280;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.wjportal-visitor-msg-btn-wrp input {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-visitor-msg-btn-wrp input:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-spam.action-links {
    order: 1;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-not-spam.action-links {
    order: 2;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-rejected.action-links {
    order: 3;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-hired.action-links {
    order: 4;
}

button.wjportal-resume-act-actions-dropdown-toggle {
    order: 5;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-view-profile {
    order: 6;
}


/* ----------------------------------------- */
/* == 15. Tabbed Navigation Actions        == */
/* ----------------------------------------- */

/* Main container for the tab list */
.wjportal-job-applied-resume-actions {
    margin: 50px 0 40px 0;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-job-applied-resume-actions ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Allows tabs to wrap on smaller screens */
    list-style: none;
    margin: 0 0 1.5rem 0;
    /* Adds space below the tabs */
    padding: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* Individual list item */
.wjportal-job-applied-resume-actions li {
    margin: 0;
    padding: 0;
}

/* ----------------------------------------- */
/* ==  Resume Details              == */
/* ----------------------------------------- */

/* --- Main Layout --- */
.wjportal-resume-detail-wrapper {
    display: flex;
    flex-direction: column;
    /* Stack columns on small screens by default */
    gap: 24px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-detail-left-wrapper {
    flex: 0 0 320px;
    /* Fixed width for left column on larger screens */
    position: sticky;
    /* Sticky left column */
    top: 4.5rem;
    /* Adjust as needed for header height */
    align-self: flex-start;
    /* Prevent stretching */
    overflow: hidden;
    border-radius: 8px;

}

.wjportal-resume-detail-wrapper.wjportal-view-page-featured-flag .wjportal-personal-data {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b;
}

.wjportal-resume-detail-wrapper .wjportal-resume-right-wrapper {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Left Column Card --- */
.wjportal-resume-detail-wrapper .wjportal-resume-left-section {
    background-color: var(--wpjp-card-background);
    text-align: center;


}

.wjportal-resume-detail-wrapper .wjportal-resume-image img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

.wjportal-resume-detail-wrapper .wjportal-personal-data {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
    display: inline-block;
}

.wjportal-resume-detail-wrapper .wjportal-resume-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    margin-bottom: 10px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-info {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center info items */
    gap: 8px;
    font-size: calc(var(--wpjp-body-font-size) - 1px);
    /* Slightly smaller text */
    color: var(--wpjp-secondary-color);
    margin-bottom: 8px;
    word-break: break-all;
    /* Prevent long emails/numbers from overflowing */
    background-color: var(--wpjp-card-background);
}

/* --- Hide existing images --- */
.wjportal-resume-detail-wrapper .wjportal-resume-info-salary img,
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell img,
.wjportal-resume-detail-wrapper .wjportal-resume-info-email-address img {
    display: none;
}

/* --- Common Icon Styles using ::before --- */

.wjportal-resume-detail-wrapper .wjportal-resume-info-salary::before,
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell::before {
    content: '';
    display: inline-block;
    width: 1em;
    /* Icon size */
    height: 1em;
    /* Icon size */
    flex-shrink: 0;
    /* Prevent icon shrinking */

    /* Icon color and opacity */
    background-color: currentColor;
    /* Inherits text color */
    opacity: 0.7;
    /* Match previous icons */

    /* Mask properties */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Add the icon using ::before */
.wjportal-resume-detail-wrapper .wjportal-resume-info-email-address::before {
    content: '';
    display: inline-block;
    width: 1em;
    /* Match the size of other icons */
    height: 1em;
    /* Match the size of other icons */
    flex-shrink: 0;
    /* Prevent icon from shrinking */

    /* Color the icon using the current text color */
    background-color: currentColor;
    opacity: 0.7;
    /* Match the opacity of other icons */

    /* Email/Mail SVG Icon */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'%3E%3C/path%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* --- Specific Icons --- */
/* Salary Icon (Dollar Sign) */
.wjportal-resume-detail-wrapper .wjportal-resume-info-salary::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
}

/* Cell/Phone Icon */
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14z'%3E%3C/path%3E%3C/svg%3E");
}

/* Icons for left column info */
.wjportal-resume-detail-wrapper .wjportal-resume-info img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}


/* --- Left Column Action Buttons --- */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-wrp {
    align-self: flex-start;
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    text-align: center;
    padding: 2rem 1.2rem;
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    transition: all 0.3s ease;
    cursor: pointer;
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-card-background);
    border-color: var(--wpjp-secondary-color);
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* Add Icons to Action Buttons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Specific Icons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9a1 1 0 11-2 0 1 1 0 012 0zm-3 5.5a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4z'%3E%3C/path%3E%3C/svg%3E");
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'%3E%3C/path%3E%3C/svg%3E");
    /* Using download icon for export */
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-print-resume::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'%3E%3C/path%3E%3C/svg%3E");
}

.wjportal-resume-detail-wrapper .wjportal-resume-download-all-btn::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 12l-5 5-5-5h3V4h4v8z'%3E%3C/path%3E%3Cpath d='M19 18H5v-2h14v2z'%3E%3C/path%3E%3C/svg%3E");
    /* Simpler download icon */
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-send-message-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');

}

/* --- Right Column Content --- */
.wjportal-resume-section-records-wrap {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
}

.wjportal-resume-detail-wrapper .wjportal-resume-section-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wpjp-primary-color);
    margin-bottom: 16px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-inner-sec-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 20px;
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    padding: 10px;
    border-radius: 5px;
    padding-left: 2rem;
}

.wjportal-resume-detail-wrapper .resume-map {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

/* Add top border to distinguish inner sections like Languages */
.wjportal-resume-detail-wrapper .wjportal-resume-right-wrapper .wjportal-resume-section-wrapper+.wjportal-resume-section-wrapper[data-section="languages"] {
    border-top: 1px dashed var(--wpjp-border-color);
    border-radius: 0;
    box-shadow: none;
    padding: 15px 20px;
    margin-bottom: 0;
}

.wjportal-resume-detail-wrapper .wjportal-resume-inner-sec-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Wrap dates if needed */
    gap: 10px;
}

.wjportal-resume-detail-wrapper .wpjp-resume-employer-dates {
    font-size: 14px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    background-color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-detail-wrapper .wjportal-resume-section-wrapper.-resumedetail-sec-data {
    padding: 0 !important;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-row {
    gap: 16px;
    margin-bottom: 16px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-row:last-child {
    margin-bottom: 0;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    line-height: 1.6;
    display: flex;
    width: 100%;
    padding: 15px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data-title {
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 4px;
    display: flex;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data-value {
    word-break: break-word;
    /* Prevent overflow */
}

/* File Attachments */
.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value a.file {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value a.file:hover {
    background-color: var(--wpjp-primary-color);
    border-color: var(--wpjp-primary-color);
    color: white;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachment-filename {
    font-weight: 500;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachment-file-download {
    width: 16px;
    height: 16px;

}

/* Map Section */
.wjportal-resume-detail-wrapper .resume-map .row-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    cursor: pointer;
}

.wjportal-resume-detail-wrapper .resume-map .row-title img {
    width: 25px;
    height: 25px;
    order: 2;
    background: aliceblue;
}

.wjportal-resume-detail-wrapper .resume-map .map {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color);
}

/* --- Responsive Layout --- */
@media (min-width: 992px) {
    .wjportal-resume-detail-wrapper {
        flex-direction: row;
        /* Side-by-side columns on large screens */
        align-items: flex-start;
        /* Align columns to the top */
    }

    .wjportal-resume-detail-wrapper .wjportal-resume-sec-row:not(.wjportal-resume-row-full-width):not(.wjportal-resume-attachments-wrp) {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 991px) {

    /* Un-stick the left column when it's stacked */
    .wjportal-resume-detail-wrapper .wjportal-resume-detail-left-wrapper {
        position: static;
        flex-basis: auto;
        /* Allow it to take full width */
    }
}


/* ----------------------------------------- */
/* ==  Resume Details---              == */
/* ----------------------------------------- */



.wjportal-custom-field.wjportal-resume-sec-data {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

.wjportal-custom-field-tit.wjportal-resume-sec-data-title {
    float: left;
    font-weight: 500;
}

.wjportal-custom-field-val.wjportal-resume-sec-data-value {
    float: left;
    margin-left: 8px;
    /*width: calc(100% - 20% - 8px);*/
    width: calc(100% - 32% - 10px);
}

.wjportal-resume-info {
    float: left;
    margin: 5px 15px 5px 0;
    font-size: var(--wpjp-body-font-size);
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 1rem 1rem;
    border-radius: 5px;
    font-weight: 500;
}

.wjportal-resume-adv-act-wrp {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.wjportal-resume-detail-wrapper a.wjportal-resume-adv-act-btn {
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    /*padding: 12px 40px;*/
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    flex-wrap: wrap;
    justify-content: center;
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn {
    order: 1;
}

a.wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf {
    order: 2;
}

a.wjportal-resume-adv-act-btn.wjportal-list-act-btn-print-resume {
    order: 3;
}

a.wjportal-resume-adv-act-btn {
    order: 4;
}

a.wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == Folders         == */
/* ----------------------------------------- */

.wjportal-folder-list {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wjportal-folder-cnt-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    flex-wrap: wrap;
}

.wjportal-folder-middle-wrp {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 75%;
}

.wjportal-folder-title {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-folder-data {
    display: flex;
    align-items: center;
    gap: 2em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 5px 0;
}

.wjportal-folder-info-data {
    padding-bottom: 5px;
}

/* Container for "Resumes" and Date */
.wjportal-folder-data:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

}

.wjportal-folder-info-tit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Icons for Resume Count and Date */
.wjportal-folder-info-tit::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Resume Icon */
.wjportal-folder-info-data:nth-child(1) .wjportal-folder-info-tit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
}

/* Date Icon */
.wjportal-folder-info-data:nth-child(2) .wjportal-folder-info-tit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

span.wjportal-folder-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

.wjportal-folder-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}


input.wjportal-form-wrp.wjportal-resume-form-btn-primary.wjportal-form-btn.wjportal-form-save-btn {
    font-size: var(--wpjp-body-font-size);
    background-color: var(--wpjp-primary-color);
    border: 1px solid var(--wpjp-primary-color);
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: unset;

    transition: unset;

}

input.wjportal-form-wrp.wjportal-resume-form-btn-primary.wjportal-form-btn.wjportal-form-save-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-folder-list-btm-wrp {
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    background-color: var(--background-color);
    width: 100%;
}

/* --- Action Buttons --- */
.wjportal-folder-action-wrp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: end;
}

.wjportal-folder-act-btn {
    font-weight: 500;
    border: 1px solid var(--wpjp-border-color);
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);

}

.wjportal-folder-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* Base style for all button icons */

a.wjportal-folder-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

/* Special styling for "Resume" button (primary action) */
.wjportal-folder-act-resume-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-folder-act-resume-btn:hover,
.wjportal-folder-act-btn.wjportal-folder-act-resume-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-folder-act-btn.wjportal-folder-act-resume-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == View Folders         == */
/* ----------------------------------------- */

.wjportal-folderdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-folder-data-wrp {
    width: 100%;
}

span.wjportal-folder-data-tit {
    display: none;
}

.wjportal-folder-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    width: 100%;
}

.wjportal-folder-desc p {
    width: 100%;
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
}

/* ----------------------------------------- */
/* ==  Departments             == */
/* ----------------------------------------- */

/* --- Main Card Layout --- */
.wjportal-department-list {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Modern rounded corners */
    box-shadow: var(--wpjp-card-shadow);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    /* Ensures child elements respect the border radius */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wjportal-department-list:hover {
    box-shadow: var(--wpjp-card-hover-shadow);
    transform: translateY(-5px);
    /* Subtle lift effect on hover */
}

/* --- Top Content Section --- */
.wjportal-department-cnt-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;

    flex-wrap: wrap;
}

.wjportal-department-middle-wrp {
    flex-grow: 1;
    /* Allows this section to take up available space */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 75%;
}

.wjportal-department-right-wrp {}

.wjportal-department-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

/* --- Typography and Content Styling --- */
.wjportal-department-title {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    /* Using the dark color for the title */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-department-data {
    display: grid;
}

.wjportal-department-data:last-child {
    margin-bottom: 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-data {
    display: inline-block;
    /* Aligns company and date side-by-side */
    margin-right: 1rem;
    font-size: var(--wpjp-body-font-size);
    color: #6c757d;
    padding: 3px 0;
}

/* Optional: To ensure perfect vertical alignment */
.wjportal-department-info-tit {
    display: inline-flex;
    align-items: center;

}

span.wjportal-department-info-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-tit {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-tit::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;

    /* The icon's color will match the text color above */
    background-color: currentColor;

    /* -- Calendar Icon SVG Mask -- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");

    /* Mask properties */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}



a.wjportal-companyname {
    color: var(--wpjp-primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;

}

.wjportal-companyname:hover {
    color: var(--wpjp-secondary-color);
}

.wjportal-department-desc p {
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
    line-height: 1.6;
    margin: 0;

    /* Modern line-clamping to truncate long text */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Shows a maximum of 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Status Badge --- */
.wjportal-department-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

/* --- Bottom Action Bar --- */
.wjportal-department-list-btm-wrp {
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    background-color: var(--background-color);
}

.wjportal-department-action-wrp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between buttons */
    flex-wrap: wrap;
    justify-content: end;
}

.wjportal-department-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-department-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-department-act-btn.wjportal-list-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-department-act-btn.wjportal-list-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == View Departments Detail            == */
/* ----------------------------------------- */

.wjportal-departmentdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-department-data-wrp {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding-top: 5px;
}

.wjportal-department-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;

}

span.wjportal-department-data-tit {
    display: none;
}

.wjportal-department-data:last-child {
    margin-bottom: 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 3px 0;
}

.wjportal-departmentdetail-wrapper .wjportal-department-desc p {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;

}

/* ----------------------------------------- */
/* == Cover Letter Button         == */
/* ----------------------------------------- */

span.wjportal-no-coverletter-btn {
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    border: 1px solid var(--wpjp-border-color);
    background-color: var(--wpjp-card-background);
}


/* Main style for the "View Cover Letter" button */
.wjportal-coverletter-act-btn {
    /* Button Appearance */
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--wpjp-border-color);
    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    margin-top: 5px;

}

.wjportal-coverletter-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

/* The ::before pseudo-element creates the icon */
.wjportal-coverletter-act-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    /* Icon color will be white */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for a document/file icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
}

/* Styling for each tab link */
.wjportal-job-applied-resume-actions li a {
    display: block;
    padding: 10px 15px;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    /* Overlaps the container's border for a seamless look */
    transition: color 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--wpjp-border-color);
    background: #fafafa;
    border-radius: 6px 6px 0 0;
}

/* Hover state for inactive tabs */
.wjportal-job-applied-resume-actions li a:not(.selected):hover {
    color: var(--wpjp-body-font-color);
}

.wjportal-job-applied-resume-actions li a:hover {
    color: #fff !important;
    background-color: var(--wpjp-secondary-color);
}

/* Active tab styling */
.wjportal-job-applied-resume-actions li a.selected {
    color: var(--wpjp-primary-color);
    font-weight: 600;
    border-bottom-color: var(--wpjp-primary-color);
}

/* Styling for the "Export All" button */
.wjportal-export-all-btn {
    /* Pushes the button to the far right */
    margin-left: auto;
    /* Button appearance */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px 6px 0 0;
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.wjportal-export-all-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-export-all-btn svg {
    width: 1em;
    height: 1em;
}

.wjportal-coverletter-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

/* ----------------------------------------- */
/* == Responsive for Tabs                  == */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .wjportal-job-applied-resume-actions ul {
        flex-direction: column;
        /* Stack tabs vertically */
        align-items: stretch;
        /* Make tabs full-width */
        border-bottom: none;
    }

    .wjportal-job-applied-resume-actions li {
        width: 100%;
        border-bottom: 1px solid var(--wpjp-border-color);
    }

    .wjportal-job-applied-resume-actions li a {
        border-bottom: none;
        /* Remove bottom border indicator */
        margin-bottom: 0;
    }

    .wjportal-job-applied-resume-actions li a.selected {
        background-color: #f0f5fc;
        /* Light blue background for active mobile tab */
    }

    .wjportal-export-all-btn {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: center;
    }
}

/* --- Popup Overlay / Backdrop --- */
/* This creates the dark, semi-transparent background behind the popup */
.wjportal-main-up-wrapper #popup-main-outer.sendmessage {
    position: fixed;
    /* Cover the entire screen */
    backdrop-filter: blur(4px);
    /* Modern blur effect */
    display: flex;
    /* Center the popup vertically and horizontally */
    align-items: center;
    justify-content: center;
}

.wjportal-main-up-wrapper #popup-main-outer.sendmessage #popup-main {
    width: 100%;
}

/* --- Form Fields & Inputs --- */
.wjportal-popup-contentarea .wjportal-popup-field-wrp {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

*/ div#wjportal-listpopup .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-popup-cnt {
    height: 50% !important;
}

.wjportal-form-wrp.wjportal-search-job-form .wjportal-form-row {
    width: 100%;
}

/* Style for the text input box */
.wjportal-popup-field .inputbox {
    width: 100%;
    padding: 12px 15px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wjportal-popup-field .inputbox::placeholder {
    color: #a0a0a0;
}

/* Highlight effect when the input is focused */
.wjportal-popup-field .inputbox:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.15);
}

/* --- Rich Text Editor Styling --- */
/* Basic styling to make the WordPress editor fit the design */
#wp-jobseekermessage-wrap {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight the whole editor when it's in focus */
#wp-jobseekermessage-wrap:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.15);
}

#wp-jobseekermessage-editor-container {
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper .wjportal-filter-search-field-wrp ul.wpjobportal-input-list-wpjobportal,
.wjportal-main-up-wrapper .wjportal-form-value ul.wpjobportal-input-list-wpjobportal {
    margin: 0;
    width: 100%;
    overflow-x: auto;
    position: relative;
    display: flex;
    padding: 0;
    height: 55px !important;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: inherit !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li {
    display: flex;
    align-items: center;
    min-width: fit-content;
    margin: 3px;
    background-color: transparent;
}

li.wpjobportal-input-token-wpjobportal span {
    font-size: var(--wpjp-body-font-size);
}

div.wpjobportal-input-dropdown-wpjobportal {
    font-family: inherit !important;
    color: var(--wpjp-body-font-color) !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li p {
    margin: 0;
    background-color: transparent;
}


/* --- Hover Effect --- */
/* Simply change the background color to change the icon color */
#wjportal-popup-close-btn:hover {
    background-color: var(--wpjp-primary-color);
    border-radius: 50%;
}

/* ----------------------------------------- */
/* == 2. Company List Page Styles              == */
/* ----------------------------------------- */

.wjportal-company-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-company-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

.wjportal-company-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 10px;
    width: 100%;
}

.wjportal-company-list-wrapper.wjportal-my-company-wrp {
    width: 100%;
}

.wjportal-jobs-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-company-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-company-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.wjportal-company-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

span.wjportal-company-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.wjportal-company-title a:hover {
    text-decoration: underline !important;
}

.wjportal-company-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
    width: 100%;
    font-size: var(--wpjp-body-font-size);

}

span.wjportal-company-data-value {
    color: var(---wpjp-body-font-color);
}

.wjportal-company-listing-data-description {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

.wjportal-company-list-btm-wrp {
    justify-content: flex-end;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-company-action-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

a.wjportal-company-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    padding: 10px 15px;

}

a.wjportal-company-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

.wjportal-company-act-btn.wjportal-company-list-view-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

.wjportal-company-act-btn.wjportal-company-list-view-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}


.wjportal-payment-action-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    gap: 1rem;
}

span.wjportal-company-data-title {
    display: none;
}

.wjportal-company-data-wrp .wjportal-company-data .wjportal-company-data-tit {
    /*    color: var(--wpjp-secondary-color);*/
    font-weight: 500;
}

/* --- Company Data Item Base Styles --- */
.wjportal-company-data-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-company-data-text.wjportal-company-data-text-created span.wjportal-company-data-title,
.wjportal-company-data-text.wjportal-company-data-location span.wjportal-company-data-title,
.wjportal-company-data-text.wjportal-company-data-status span.wjportal-company-data-title {
    display: none;
}

/* --- Common Icon Styles using ::before --- */
.wjportal-company-data-text-created::before,
.wjportal-company-data-status::before,
.wjportal-company-data-location::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-color: currentColor;
    /* Inherits text color */
    opacity: 0.7;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* --- Specific Icons --- */

/* Created Icon (Calendar/Clock) */
.wjportal-company-data-text-created::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'%3E%3C/path%3E%3Cpath d='M13 7h-2v6l5.25 3.15.75-1.23-4-2.42V7z'%3E%3C/path%3E%3C/svg%3E");
    /* Clock Icon */
}

/* Status Icon (Check Circle for Approved, could add others for different statuses) */
.wjportal-company-data-status::before {
    /* Default Icon (e.g., Info) */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM11 11h2v6h-2zm0-4h2v2h-2z'%3E%3C/path%3E%3C/svg%3E");
    /* Info Icon */
}


/* Location Icon (Map Pin) */
.wjportal-company-data-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

/* --- Optional: Align Title and Value Vertically --- */
/* This helps if the value wraps to multiple lines */
.wjportal-company-data-text .wjportal-company-data-title,
.wjportal-company-data-text .wjportal-company-data-value {
    display: inline-block;
    /* Or block depending on desired wrap behavior */
    vertical-align: top;
    /* Align to the top */
}

.wjportal-company-data-text .wjportal-company-data-title {
    font-weight: 600;
    /* Make title bold */
    color: var(--wpjp-secondary-color);
    /* Darker title */
    margin-right: 4px;
    /* Small space after title */
}

.wjportal-company-act-btn {
    /* Layout & Alignment */
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */

    /* Appearance */
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #ced4da;

    /* Effects */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* --- Button Container --- */
.wjportal-company-action-wrp {
    display: flex;
    gap: 0.75rem;
    /* Adds space between buttons */
}

/* --- General Button Styling --- */
.wjportal-company-act-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    color: #333;
    background-color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wjportal-company-act-btn:hover {
    background-color: #f5f5f5;
}



/* ----------------------------------------- */
/* --- Main Success Message Container --- */
/* ----------------------------------------- */

/* --- Main Alert Styling --- */
.wjportal-main-up-wrapper .frontend.updated {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    font-size: var(--wpjp-body-font-size);
    color: #2e7d32;
    background-color: #e8f5e9;

    border-radius: 8px;
    border-left: 5px solid #4caf50;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    width: 100%;

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

.wjportal-main-up-wrapper .frontend.updated p {
    background-color: transparent;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .frontend.updated::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Checkmark-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Paragraph Styling --- */
.wjportal-main-up-wrapper .frontend.updated p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* --- Animation Keyframes --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------- */
/* --- Apply to job message  --- */
/* ----------------------------------------- */
/* --- Job Apply Message Styling --- */

/* Main wrapper for the message box */
.job-detail-jobapply-message-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    background-color: #FFFBEB;
    border: 1px solid #FEF3C7;

}

/* The message part with icon and text */
.job-detail-jobapply-message-msg {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #92400E;
    font-weight: 500;
}

.job-detail-jobapply-message-msg img {
    width: 24px;
    height: 24px;
}

/* --- Link/Button Styling with Icon --- */

/* The "Add Resume" link styled as a button */
.job-detail-jobapply-message-link {
    display: inline-flex;
    /* Use flexbox for easy icon alignment */
    align-items: center;
    /* Vertically center icon and text */
    gap: 0.5em;
    /* Space between icon and text */
    padding: 0.6rem 1.2rem;
    background-color: #D97706;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.job-detail-jobapply-message-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* This adds the icon BEFORE the text */
.job-detail-jobapply-message-link::before {
    content: '';
    /* Required for pseudo-elements */
    display: block;
    width: 1.1em;
    /* Icon size relative to font size */
    height: 1.1em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* ---------------------------------------- */
/* --- Main Errors Message Container --- */
/* ----------------------------------------- */
/* --- Modern Message Design --- */
.wjportal-visitor-msg {
    /* Layout & Box Model */
    display: inline-flex;
    /* Aligns icon and text nicely */
    align-items: center;
    gap: 10px;
    /* Space between the icon and the text */
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #facc15;
    /* Warning color border */
    width: 100%;
    /* Colors & Typography */
    background-color: #fffbeb;
    /* Light yellow background for warning */
    color: #854d0e;
    /* Darker yellow/brown text for readability */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;

    /* Effects */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    animation: slideDownFade 0.4s ease-out;
}

/* --- SVG Icon Implementation --- */
/* Creates a virtual element before the text to hold our icon */
.wjportal-visitor-msg::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking if text wraps */
    width: 20px;
    height: 20px;

    /* The icon's color is inherited from the text color (#854d0e) */
    background-color: currentColor;

    /* The SVG shape is applied as a mask */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
}

/* --- Animation for appearing --- */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* --- Main Errors Message Container --- */
/* ----------------------------------------- */


/* --- Main Error Alert Styling --- */
.wjportal-main-up-wrapper .frontend.error {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    width: 100%;
    color: #c62828;
    /* Dark red text/icon color */
    background-color: #ffdfe2;
    /* Light red background */

    border-radius: 8px;
    border-left: 5px solid #d32f2f;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .frontend.error::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Error X-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Paragraph Styling --- */
.wjportal-main-up-wrapper .frontend.error p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
}

/* --- Animation Keyframes (can be reused) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* --- Main Info Message --- */
/* ----------------------------------------- */
/* --- Main Info Alert Styling --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    margin-bottom: 20px;
    color: #0d47a1;
    /* Dark blue text/icon color */
    background-color: #e3f2fd;
    /* Light blue background */

    border-radius: 8px;
    border-left: 5px solid #1976d2;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    font-size: 16px;
    font-weight: 500;

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Hide the old PNG image --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message img {
    display: none;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Info "i"-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Animation Keyframes (can be reused) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* == Company Detail           == */
/* ----------------------------------------- */

.wjportal-companyinfo-wrp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
    width: 100%;
    padding-top: 10px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-companydetail-wrapper.wjportal-view-page-featured-flag .wjportal-company-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b !important;
}

.wjportal-company-wrp {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 24px;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: white;
    overflow: hidden;
    position: relative;
}

.wjportal-companyinfo-middle-wrap {
    display: flex;
    flex-direction: column;
    width: 55%;
    margin-bottom: 8px;
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.wjportal-companyinfo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-main-up-wrapper span.wjportal-companyinfo-data{
    font-size: var(--wpjp-body-font-size);
}
.wjportal-companydetail-wrapper.wjportal-view-page-featured-flag .wjportal-companyinfo {
    color: var(--wpjp-secondary-color);
}

.wjportal-companyinfo img {
    display: none;
}

.wjportal-company-data-wrp {
    width: 100%;
    display: flex;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 24px;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: white;
}

.wjportal-company-sec-title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wpjp-primary-color);
}

.wjportal-companyinfo-link,
.wjportal-companyinfo-data {
    align-items: center;
    display: flex;
    gap: 10px;
}

a.wjportal-companyinfo-link {
    color: var(--wpjp-primary-color);
}

a.wjportal-companyinfo-link:hover {
    color: var(--wpjp-secondary-color);
}

/*
.wjportal-companyinfo-right-wrap{
 text-align: right;
    width: 25%;
}*/
/* --- Base Button Style --- */
.wjportal-show-contact-det-btn,
.wjportal-main-up-wrapper input#jsre_featured_button {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 10px;
    /* Space between icon and text */

    /* Appearance */
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Hover Effect --- */
.wjportal-show-contact-det-btn:hover,
.wjportal-main-up-wrapper input#jsre_featured_button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}


/* --- Icon Implementation --- */
.wjportal-show-contact-det-btn::before,
.wjportal-main-up-wrapper input#jsre_featured_button::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Icon size */
    height: 20px;
    /* Icon size */

    /* This uses the button's text color to color the SVG icon */
    background-color: currentColor;

    /* The SVG icon shape is applied as a mask */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-companydetail-wrapper .wjportal-company-data,
.wjportal-company-data-wrp .wjportal-custom-field {
    float: left;
    width: calc(100% / 2 - 20px);
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wjportal-company-desc {
    display: flex;
    width: 100%;
}

.wjportal-company-data-wrp .wjportal-custom-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    width: 100%;
}

.wjportal-company-data-wrp .wjportal-company-data {
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    width: 100%;
}

.wjportal-companyinfo-social-links-wrapper {
    font-size: 25px;
}

a.wjportal-companyinfo-social-link {
    display: inline-flex;
    align-items: center;
    padding: 15px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
}

a.wjportal-companyinfo-social-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-company-btn-wrp {
    display: flex;
    width: 100%;
    justify-content: center;
}

.wjportal-company-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-popup-wrp.wjportal-packages-popup .wjportal-pkg-item.wjportal-pkg-selected {
    border: 1px solid var(--wpjp-primary-color) !important;
}

/* ----------------------------------------- */
/* ==Login Form Design          == */
/* ----------------------------------------- */

/* --- This is the key part --- */
/* We style each <p> tag as a form row */
.wjportal-main-up-wrapper #loginform-custom p {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
    width: 100%;
}

.wjportal-main-up-wrapper #loginform-custom p:last-child {
    border-bottom: none;
}

/* Style the labels */
.wjportal-main-up-wrapper #loginform-custom label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-main-up-wrapper #loginform-custom p .login-remember {
    width: 100%;
    align-items: flex-start;
    display: grid;
    grid-template-columns: 200px 1fr;
}

/* Add the purple asterisk like in the image */
.wjportal-main-up-wrapper #loginform-custom .login-username label::after,
.wjportal-main-up-wrapper #loginform-custom .login-password label::after {
    content: ' *';
    color: #6742f5;
    font-weight: 600;
}

/* Style the input fields */
.wjportal-main-up-wrapper #loginform-custom .input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
    /* Light gray from image */
    font-size: var(--wpjp-body-font-size);
    box-sizing: border-box;
    /* Important for padding */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wjportal-main-up-wrapper #loginform-custom .input:focus {
    outline: none;
    border-color: #6742f5;
    box-shadow: 0 0 0 3px rgba(103, 66, 245, 0.1);
}

/* --- Handle the special rows --- */

/* "Keep me login" row */
.wjportal-main-up-wrapper #loginform-custom .login-remember {
    /* Override the grid to be a single column */
    grid-template-columns: 1fr;
    background-color: #fdfdfd;
    margin-bottom: 0;
    border-bottom: unset;
    margin-top: 0;
}

.wjportal-main-up-wrapper #loginform-custom .login-remember label {
    display: flex;
    align-items: center;
    font-size: var(--wpjp-body-font-size);
    font-weight: 400;
    color: var(--wpjp-body-font-color);
    cursor: pointer;
    margin-top: 0;
    padding-top: 0;
}

.wjportal-main-up-wrapper #loginform-custom .login-remember input {
    margin-right: 0.5rem;
    width: 16px;
    height: 16px;
}

/* "Login" button row */
.wjportal-main-up-wrapper #loginform-custom .login-submit {
    /* Override grid to be single column */
    grid-template-columns: 1fr;
    padding: 1.5rem 2rem;
    border-bottom: unset;

}

a.wjportal-form-add-comp {
    border: 1px solid var(--wpjp-border-color);
    padding: 5px 20px;
    border-radius: 5px;
    background-color: var(--wpjp-background-color);
    color: var(--wpjp-secondary-color);
}

a.wjportal-form-add-comp :hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-error-messages-wrp {
    width: 100%;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #6742f5;
    /* Modern purple/blue */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit:hover {
    background-color: #5a38d1;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit:active {
    transform: scale(0.99);
}

/* "Lost your password?" link */
#loginform-custom .wjportal-form-lost-password {
    display: block;
    /* Make it a block element */
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    text-decoration: none;
    border-bottom: none;
    /* Remove duplicate border */
    transition: color 0.2s ease;
}

#loginform-custom .wjportal-form-lost-password:hover {
    text-decoration: underline;
    color: #5a38d1;
}

/* --- Responsive behavior for mobile --- */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #loginform-custom p {
        /* Stack label and input on top of each other */
        grid-template-columns: 1fr;
        gap: 0.75rem;
        /* Smaller gap */
        padding: 1.25rem 1.5rem;
    }

    .wjportal-main-up-wrapper #loginform-custom label {
        /* Ensure label isn't centered */
        text-align: left;
    }
}





/* ----------------------------------------- */
/* == Form Design          == */
/* ----------------------------------------- */
div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section img.wjportal-resume-section-delete {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section div.wjportal-resume-section-undo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 99999;
    display: none;
    background: #fff;
    opacity: 0.8;
}

.jsundo.wjportal-resume-section-undo img {
    vertical-align: middle;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section div.wjportal-resume-section-undo img.wjportal-resume-section-undo-image {
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.section_wrapper.form.wjportal-resume-section.jssection_wrapper.jssection_skills_0 .wjportal-form-row {
    border-bottom: 0;
}

/* --- Form Row Layout (Grid-based) --- */
.wjportal-form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
    width: 100%;
}

.wjportal-form-title {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
    margin-left: 4px;
    font-weight: bold;
}

/* --- Unified Input Styling --- */
.wjportal-main-up-wrapper .wjportal-form-input-field,
.wjportal-main-up-wrapper .wjportal-form-select-field,
.wjportal-main-up-wrapper .wjportal-form-textarea-field,
.wpjobportal-input-list-wpjobportal .wjportal-main-up-wrapper .chosen-container-multi .chosen-choices {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 55px;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color) !important;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 55px !important;
    display: flex;
    align-items: center;
    border: 1px solid;
    flex-wrap: wrap;
    padding: 10px;
}

.wjportal-form-value .chosen-container-multi .chosen-choices li.search-choice {
    width: fit-content;
}

.wjportal-form-value .chosen-container-multi .chosen-choices input {
    height: 25px !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices li.search-field input[type=text] {
    font-family: inherit !important;
    color: var(--wpjp-body-font-color) !important;
}

/* Focus State for all inputs */
.wjportal-form-input-field:focus,
.wjportal-form-select-field:focus,
.wjportal-form-textarea-field:focus,
.wjportal-main-up-wrapper .chosen-container-multi .chosen-choices:focus,
.wpjobportal-input-list-wpjobportal:focus-within {
    outline: none;
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

.wjportal-form-value .chosen-container .chosen-results li,
.wjportal-form-value .chosen-container-multi .chosen-choices li.search-choice {
    line-height: inherit !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container .chosen-results li.active-result {
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color) !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container .chosen-results li.active-result:hover {
    color: #fff !important;
}

.wjportal-form-value .chosen-container .chosen-results li.highlighted {
    color: #fff !important;
}

.wjportal-form-value .chosen-container-multi .chosen-drop .result-selected {
    font-size: var(--wpjp-body-font-size) !important;

}

/* Select field custom arrow */
.wjportal-main-up-wrapper .wjportal-form-select-field,
.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23656575'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 1.5em;
    padding-right: 40px;
}

.wjportal-form-inner-fields {
    margin: 10px 0;
}

.wjportal-main-up-wrapper .wjportal-form-inner-fields .anchor.map-link.wjportal-form-map-link {
    margin-top: 10px;
}

/* --- Specific Field Group Styling --- */
.wjportal-form-5-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* .wjportal-form-inner-fields {
     margin-top: 20px;
} */
.wjportal-main-up-wrapper .wjportal-form-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: var(--background-color);
}

/* Rich Text Editor & Map */
.wjportal-main-up-wrapper #wp-description-wrap,
.wjportal-main-up-wrapper .wjportal-form-map {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#wp-description-wrap:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Custom Radio Buttons --- */
.wjportal-form-email-field-wrp {
    padding: 0 26px 30px 10px;
}

.wpjobportal-form-radio-field input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.wpjobportal-form-radio-field label {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-weight: 500;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-form-radio-field label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
    margin-left: 10px;
}

.wpjobportal-form-radio-field label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--wpjp-primary-color);
    transition: transform 0.2s ease;
    margin-left: 10px;
}

.wjportal-main-up-wrapper label#forselected_payment_method {
    background: #fff;
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label::before {
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label::after {
    transform: translateY(-50%) scale(1);
}

.wjportal-form-email-field-txt {
    font-size: 15px;
    color: var(--wpjp-body-font-color);
    padding-left: 5px;
    padding-top: 10px;
}

a.resume_submits.cancel.wjportal-form-wrp.wjportal-resume-form.wjportal-form-btn.wjportal-form-cancel-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
}

a.resume_submits.cancel.wjportal-form-wrp.wjportal-resume-form.wjportal-form-btn.wjportal-form-cancel-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #ffffff !important;
}

.wpjobportal-terms-and-conditions-wrap,
.wpjobportal-terms-and-conditions-wrap .js-col-md-12.js-form-value {
    border-radius: 8px !important;
    height: 55px !important;
    color: var(--wpjp-body-font-color) !important;
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: var(--background-color);
}

.wpjp-resume-section-button .wpjobportal-terms-and-conditions-wrap .js-col-md-12.js-form-value {
    margin-bottom: 0px;

    height: unset;
    color: var(--wpjp-body-font-color) !important;
    border: 0px;
    padding: 0px;
    padding-left: 0;
}

/* --- Info/Link Icon Styling --- */
.wpjobportal-terms-and-conditions-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.wpjobportal-terms-and-conditions-wrap a:hover {
    background-color: var(--wpjp-primary-color);
    color: white;
    border-color: var(--wpjp-primary-color);
    transform: scale(1.1);
}

/* --- Hide the default checkbox and the old image --- */
.wpjobportal-terms-and-conditions-wrap img {
    display: none;
}

/* The "i" info icon */
.wpjobportal-terms-and-conditions-wrap a::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;
    /* Inherits color from parent 'a' tag */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
}

.wjportal-form-wrp.wjportal-job-alert-form .wjportal-form-row.wjportal-form-captcha {
    border-bottom: none;
    margin-bottom: 0;
}

span.wpjobportal-form-chkbox-field label {
    margin: 0;
}

.wjportal-main-up-wrapper span.wpjobportal-form-chkbox-field {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
}

.wjportal-main-up-wrapper div#input-text-joblink {
    width: 100%;
    display: none;
}

.wpjobportal-terms-and-conditions-wrap .wpjobportal-form-chkbox-field {
    border: unset;
    width: unset;
    padding-left: 0;
}

.wpjobportal-terms-and-conditions-wrap .wpjobportal-form-chkbox-field label {
    margin-bottom: unset;
}

.checkbox-field.wpjp-form-value.wjportal-searchable-wrp span.wpjobportal-form-chkbox-field {
    padding-top: 5px !important;
    padding: 0px;
    border: 0px;
}

/* --- Save Button --- */
.wjportal-form-btn-wrp {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding-top: 1.5rem;
    font-size: var(--wpjp-body-font-size);
    border-top: 1px solid var(--wpjp-secondary-color);

}

.wjportal-main-up-wrapper .wjportal-form-btn,
.wjportal-main-up-wrapper .button.wjportal-form-btn.wjportal-save-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-primary-color);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    line-height: inherit;
}

.wjportal-main-up-wrapper .wjportal-form-btn:hover,
.wjportal-main-up-wrapper .button.wjportal-form-btn.wjportal-save-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none;
}

/* --- Input Button Styling with Background Icon --- */

/*.wjportal-form-wrp.wjportal-search-job-form .wjportal-form-btn.wjportal-save-btn {
   padding-left: 40px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center; 
    background-size: 18px 18px; 
}*/

/* --- Base Container for the Error State --- */
.wjportal-form-value.has-error {
    position: relative;

}

/* --- Styling the Input Field in an Error State --- */
.has-error .wjportal-form-input-field.error {
    /* Use the CSS variable for the border instead of inline styles */
    border-color: var(--error-color);

    /* Make space on the right for the icon */
    padding-right: 40px;
}

/* --- Styling the Focus State for the Error Field --- */
/* This ensures the red border and a red shadow appear when the user clicks to fix the error */
.has-error .wjportal-form-input-field.error:focus {
    outline: none;
    border-color: var(--error-color);
    box-shadow: var(--error-focus-shadow);
}

/* --- Adding the Icon INSIDE the Input Field --- */
/* This uses a pseudo-element on the container to place an icon */
.wjportal-main-up-wrapper .has-error::after {
    content: '';
    position: absolute;
    /* Position it vertically centered and on the right */
    top: 14px;
    /* Adjust this value to perfectly center the icon */
    right: 12px;
    width: 20px;
    height: 20px;

    /* Set the icon color */
    background-color: var(--error-color);

    /* Use a CSS mask for the icon shape (a modern warning symbol) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;

    /* This prevents the icon from blocking clicks on the input */
    pointer-events: none;
}

.wjportal-main-up-wrapper .wp-editor-wrap,
.wjportal-main-up-wrapper .wjportal-form-upload {
    width: 100%;
}

/* Card Styling (Kept as is) */
.wjportal-main-up-wrapper .card-container {
    max-width: 600px;
    width: 100%;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.wjportal-main-up-wrapper h3 {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 600;
    /* semibold */
    margin-bottom: 1rem;
    color: #1f2937;
    /* gray-800 */
}

/* Group Container (Kept as is) */
.wjportal-main-up-wrapper .wjportal-form-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    /* 3 units of gap */
}
div.wjportal-add-job-form .wjportal-form-value{
    overflow: hidden;
}

.wjportal-main-up-wrapper input[type="checkbox"] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.wjportal-main-up-wrapper label#foruf_checkbox1 {
    font-weight: 500;
}

.wjportal-main-up-wrapper input[type=file] {
    padding: 14px 12px;
    border-radius: 0px;
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: 500;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #171822;
    background: #fff;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #e5e5e5;
    display: block;
    width: 100%;
    border-radius: 8px;
}

.wjportal-main-up-wrapper div#js_cust_file_ext {
    color: var(--wpjp-body-font-color);
    width: 100%;
}


/* =============================================
        === Modern Alert Box Design                 ===
        =============================================
        */

.wjportal-packages-wrp {
    width: 100%;
}

/* --- Main Alert Container (#autohidealert) --- */
.wjportal-main-up-wrapper .alert.alert-danger {
    /* Layout & Spacing */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Space between icon and text */
    padding: 1rem 1.5rem;
    position: relative;
    /* For positioning the close button */

    /* Appearance */
    background-color: #fef2f2;
    /* Light red background */
    color: #991b1b;
    /* Dark red for text */
    border: 1px solid #fca5a5;
    /* Softer red for the border */
    border-left: 5px solid #e53e3e;
    /* Strong accent line */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Typography */
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;

    /* Animation */
    animation: slideInFade 0.5s ease-out forwards;
}

/* --- Hide the original, broken image --- */
.wjportal-main-up-wrapper .alert-danger img {
    display: none;
}

/* --- Add a new SVG icon using a pseudo-element --- */
.wjportal-main-up-wrapper .alert-danger::before {
    content: '';
    flex-shrink: 0;
    /* Prevents icon from shrinking */
    width: 24px;
    height: 24px;

    /* The icon color will match the text color */
    background-color: currentColor;

    /* SVG "warning/error" icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Close Button Styling --- */
.wjportal-main-up-wrapper .alert-danger .close {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 0;

    /* Positioning */
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;

    /* Appearance & Interaction */
    color: #991b1b;
    /* Dark red for text */
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wjportal-main-up-wrapper .alert-danger .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Replace the '×' with a cleaner SVG icon --- */
.wjportal-main-up-wrapper .alert-danger .close span {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;

    /* SVG 'X' icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* --- Animation for the alert appearing --- */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Styling the Error Message Text --- */
.wjportal-main-up-wrapper .help-block.form-error {
    color: var(--error-color);
    font-size: 14px;
    font-weight: 500;
    margin-top: 0.5rem;

    /* Align the text with a prepended icon */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e53e3e;
    padding: 5px;
    border-radius: 5px;
    background: #fff6f6;
}

/* --- Main Uploader Dropzone --- */
.wjportal-main-up-wrapper .wjportal-form-upload {
    background-color: var(--background-color);
    border: 2px dashed var(--wpjp-border-color);
    border-radius: 12px;
    padding: 2rem;

    /* Center content using flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

/* Hover state for the dropzone */
.wjportal-main-up-wrapper .wjportal-form-upload:hover {
    border-color: var(--wpjp-primary-color);
    background-color: #fff;
}

.wjportal-main-up-wrapper a.file,
span.wjportal-form-upload-btn-wrp-txt {
    justify-items: center;
    border: 1px solid var(--wpjp-border-color);
    padding: 5px;
    background: white;
    border-radius: 5px;
    color: black;
    font-size: 17px;
    margin: 5px;
    display: inline-block;
    width: 100%;
}

span.wpjobportal-form-chkbox-field label {
    font-size: var(--wpjp-body-font-size);
    margin-left: 10px;
    margin-right: 10px;
}

/* --- CSS Upload Icon --- */
/* This adds a cloud icon before the button container */
 .wjportal-form-upload .wjportal-form-upload-btn-wrp::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background-color: var(--wpjp-body-font-color);
    transition: background-color 0.2s ease-in-out;

    /* The SVG icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
}

.wjportal-form-upload:hover .wjportal-form-upload-btn-wrp::before {
    background-color: var(--wpjp-primary-color);
    width: 48px;
    height: 48px;
}

/* --- Custom "Upload Image" Button --- */
.wjportal-form-upload-btn {
    position: relative;
    /* Crucial for positioning the hidden file input */
    display: inline-block;
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    /* Hides the parts of the input that might stick out */
    transition: all 0.2s ease;
}

.wjportal-form-upload-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* The actual file input, hidden but functional */
.wjportal-form-upload-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Makes it invisible */
    cursor: pointer;
}

/* --- Help Text Styling --- */
.wjportal-form-help-txt {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 0.5rem;
}

/* --- Image Preview Styling --- */
.wjportal-form-image-wrp {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--wpjp-card-shadow);
    border: 2px solid #fff;
}

.wjportal-form-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the area without distortion */
}

/* --- CSS-only Delete Icon (replaces broken img) --- */
#wjportal-form-delete-image {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: rgba(29, 35, 39, 0.7);
    /* Use secondary color with transparency */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0;
    /* Hides broken image alt text */

    /* The 'X' icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#wjportal-form-delete-image:hover {
    background-color: var(--wpjp-primary-color);
    transform: scale(1.1) rotate(90deg);
}

.wjportal-main-up-wrapper div#jsresume_sectionid1,
.wjportal-main-up-wrapper div#jsresume_sectionid2,
.wjportal-main-up-wrapper div#jsresume_sectionid3,
.wjportal-main-up-wrapper div#jsresume_sectionid4,
.wjportal-main-up-wrapper div#jsresume_sectionid5,
.wjportal-main-up-wrapper div#jsresume_sectionid6,
.wjportal-main-up-wrapper div#jsresume_sectionid7,
.wjportal-main-up-wrapper div#jsresume_sectionid8,
.wjportal-main-up-wrapper div#jsresume_sectionid9,
.wjportal-main-up-wrapper div#jsresume_sectionid10,
.wjportal-job-sec-heading {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
    margin-bottom: 40px;
    padding: 15px 10px 15px 5px;
    border-bottom: 3px dotted var(--wpjp-primary-color);
}

.wjportal-main-up-wrapper .wjportal-form-title label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-resume-section-wrp .form-control {
    letter-spacing: 0;
    font-size: 15px;
    height: 55px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 2px;
    transition: all 0.4s ease-in-out 0s;
    color: #171822;
}

.wjportal-main-up-wrapper .checkbox-field.wpjp-form-value.wjportal-searchable-wrp {
    padding-top: 12px;
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px !important;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 55px !important;
}

/* --- Section Title --- */

.wjportal-resume-section-head {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 20px;
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    padding: 10px;
    border-radius: 5px;
    padding-left: 2rem;
}

.wjportal-resume-section-undo {
    margin-left: auto;
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 15px;
    border-radius: 6px;
}

a.anchor.map-link.wjportal-form-map-link {
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
}

a.anchor.map-link.wjportal-form-map-link:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;

}

.wpjp-add-new-section-link.wjportal-resume-add-new-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    padding: 10px 15px;
    border-radius: 6px;
    background-color: var(--wpjp-card-background) #ffffff;
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    margin-bottom: 20px;
}

.wpjp-add-new-section-link.wjportal-resume-add-new-section-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

label.wjportal-input-box-switch {
    padding-top: 12px;
}

/* --- Form Field Grid Layout --- */
.wjportal-popup-field-wrp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 1.25rem;
}

/* --- Input & Textarea Styling --- */
.wjportal-popup-field input[type="text"],
.wjportal-popup-field textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    height: 55px;
}

.wjportal-popup-field input[type="text"]::placeholder,
.wjportal-popup-field textarea::placeholder {
    color: #999;
}

div.wjportal-form-row div.wjportal-form-value input[type="text"]::placeholder {
    color: var(--wpjp-body-font-color) !important;
    font-size: var(--wpjp-body-font-size) !important;

}

.wjportal-popup-field input[type="text"]:focus,
.wjportal-popup-field textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

.wjportal-popup-field input[disabled] {
    background-color: #f1f1f1;
    color: #888;
    cursor: not-allowed;
}

/* Make the message textarea span both columns */
.wjportal-popup-fullwidth {
    grid-column: 1 / -1;
    text-align: left;
}

.wjportal-popup-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- Send Button --- */
.wjportal-visitor-msg-btn-wrp {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    width: 100%;
}

.wjportal-visitor-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;

}

.wjportal-visitor-msg-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* --- Main Pagination Container --- */
.wjportal-pagination-wrp {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    /* Space between each pagination item */
    padding: 2rem 0;
}

/* --- Base Style for All Pagination Items (Links and Current) --- */
.wjportal-main-up-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    /* Create uniform, rounded squares */
    padding: 20px;
    border-radius: 12px;

    /* Effects */
    transition: all 0.2s ease-in-out;
}

/* --- Style for Clickable Page Numbers (not the current one) --- */
.wjportal-main-up-wrapper a.page-numbers {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
}

/* --- Hover Effect for Clickable Pages --- */
.wjportal-main-up-wrapper a.page-numbers:hover {

    border-color: var(--wpjp-secondary-color);
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* --- Style for the Current/Active Page --- */
.wjportal-main-up-wrapper .page-numbers.current {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--wpjp-card-shadow);
    cursor: default;
}

/* Add an Arrow Icon to the "Next" button */
.wjportal-main-up-wrapper .next.page-numbers::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.4em;
    background-color: currentColor;
    /* The icon color will match the text */

    /* The Arrow Shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Main Form Wrapper --- */
.wjportal-save-search-form-wrp {

    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
    max-width: 600px;
    margin: 2rem auto;
    /* Centers the component */
}

/* --- Form Layout --- */
/* Uses flexbox for a responsive, single-line layout */
.wjportal-save-search-form {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to stack on small screens */
    align-items: center;
    gap: 0.75rem;
    position: relative;
    /* Needed for the error icon positioning */
}

/* --- Form Label --- */
.wjportal-save-search-label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
    flex-shrink: 0;
    /* Prevents the label from shrinking */
}

/* --- Input Field --- */
.wjportal-save-search-input-field {
    flex-grow: 1;
    /* Allows the input to take up available space */
    width: auto;
    padding: 12px 16px;
    font-size: 1rem;
    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wjportal-save-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Error State Styling --- */
/* IMPORTANT: Remove the inline style="border-color: red;" from your HTML for this to work */
.has-error .wjportal-save-search-input-field.error {
    border-color: var(--error-color);
    padding-right: 40px;
    /* Make space for the icon */
}

.has-error .wjportal-save-search-input-field.error:focus {
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.25);
    /* Error focus glow */
}



/* --- Save Button --- */
.wjportal-save-search-btn {
    background-color: var(--wpjp-primary-color);
    border-color: 1px solid var(--wpjp-primary-color);
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px
}

.wjportal-save-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: 1px solid var(--wpjp-secondary-color);
    color: #ffffff !important;
}

.wjportal-coverletter-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

.wjportal-coverletter-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-coverletter-cnt-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-coverletter-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.wjportal-coverletter-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

span.wjportal-coverletter-info-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


.wjportal-coverletter-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 75%;
    margin-bottom: 8px;
}

.wjportal-coverletter-right-wrp {
    width: 25%;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
}

.wjportal-coverletter-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.wjportal-coverletter-list-btm-wrp {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-coverletterdetail-wrapper {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-coverletter-action-wrp {
    display: flex;
    font-size: var(--wpjp-body-font-size);
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wjportal-coverletter-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
}

span.wjportal-coverletter-data-tit {
    display: none;
}

.wjportal-coverletter-data {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);

}

.wjportal-coverletterdetail-wrapper .wjportal-coverletter-data {
    padding: 10px 0;
}

.wjportal-coverletter-data-wrp {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

a.wjportal-coverletter-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;

}

a.wjportal-coverletter-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* 1. Primary "View" Button */
.wjportal-coverletter-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* --- The CSS Clock Icon --- */
.wjportal-coverletter-info-tit::before {
    content: '';
    display: block;
    width: 1.1em;
    /* Icon size will scale with the font size */
    height: 1.1em;

    /* The icon will automatically match the text color */
    background-color: currentColor;

    /* The clock shape is created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Main Grid Container --- */
.wjportal-by-type-wrp {
    display: grid;
    /* Creates a responsive grid that fits as many 250px columns as possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

/* These wrappers are not needed for the grid, so we reset them */
.wjportal-type-row-wrapper,
.wjportal-type-wrapper {
    width: 100% !important;
    /* Override inline styles */

}

.wjportal-type-wrapper {
    margin-bottom: 15px;
}

/* --- The Link Card Styling --- */
.wjportal-type-wrapper a {
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    /* Appearance & Glassmorphism */
    background: linear-gradient(135deg, var(--wpjp-card-background));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Important for the glow effect */

    /* Effects */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Interactive Glow Effect on Hover --- */
.wjportal-type-wrapper a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* The glow is a radial gradient that follows the mouse */
    transition: opacity 0.3s ease;
}

.wjportal-type-wrapper a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--wpjp-primary-color);
}

.wjportal-type-wrapper a:hover::before {
    opacity: 1;
}

/* --- Title and Number Styling --- */
.wjportal-type-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    z-index: 1;
    /* Keep text above the glow */
}

.wjportal-type-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wpjp-primary-color);
    background-color: var(--background-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/*.wjportal-type-wrapper:hover{
    border:1px solid var(--wpjp-primary-color);
}*/

/* --- Arrow Icon on Hover --- */
.wjportal-type-wrapper a::after {
    content: '→';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    font-size: 3rem;
    color: var(--wpjp-primary-color);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.wjportal-type-wrapper a:hover .wjportal-type-num {
    opacity: 0;
    transform: scale(0.8);
}

.wjportal-type-wrapper a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/*jave need to add */
/*<script>
document.querySelectorAll('.wjportal-type-wrapper a').forEach(card => {
    card.addEventListener('mousemove', e => {
        const rect = card.getBoundingClientRect();
        card.style.setProperty('--x', e.clientX - rect.left + 'px');
        card.style.setProperty('--y', e.clientY - rect.top + 'px');
    });
});
</script>*/

/*--------------jobs by category-------------------------
---------------------------------------
-------------------------
---------------*/

div#wpjobportal-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-by-category-wrp {
    font-size: var(--wpjp-body-font-size);
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--wpjp-card-background), #fdfdfd);
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div#wpjobportal-wrapper .wjportal-by-category-wrp:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--wpjp-primary-color);
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory .wjportal-by-category-wrp:hover {
    border: 1px solid var(--wpjp-primary-color);
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory .wjportal-by-category-wrp {
    padding: 10px;

}

div#wpjobportal-wrapper .wjportal-by-category-wrp {
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div#wpjobportal-wrapper .wjportal-by-category-wrp a:hover::before {
    opacity: 1;
}

div#wpjobportal-wrapper .wjportal-by-category-wrp a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(232, 48, 48, 0.15), transparent 40%);*/
    opacity: 0;
    transition: opacity 0.3s ease;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-sub-catagory {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    /* Add some padding to the main container */
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-job-by-catg-popup .wjportal-by-sub-catagory {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-category-wrp {
    width: 47% !important;
    padding: 8px;
    /* Adds spacing between the items */
    box-sizing: border-box;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-sub-catagory .wjportal-by-category-wrp {
    margin: 10px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-popup-navigation {
    margin-top: 20px;
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory {
    margin-top: 15px;
    position: absolute;
    top: 84%;
    left: 0px;
    right: 0px;
    padding: 10px;
    height: auto;
    z-index: 9999;
    display: block;
    width: auto;
    box-shadow: 0 0 8px #c9c9c9;
    /*background-color: var(--background-color);*/
    background-color: #fff;
    z-index: 2147483647;
    border-radius: 8px;
}

div#wpjobportal-wrapper a.wjportal-by-category-item-btn {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    justify-content: center;
    width: 100%;
}

div#wpjobportal-wrapper a.wjportal-by-category-item-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

div#wpjobportal-wrapper span.wjportal-by-category-item-number {
    font-size: var(--wpjp-body-font-size);
    font-weight: 700;
    color: var(--wpjp-primary-color);
    background-color: var(--background-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-left: auto;
}

div#wpjobportal-wrapper .wjportal-by-category-item {
    display: flex;


}

div#wpjobportal-wrapper span.wjportal-by-category-item-title {
    display: flex;
    align-items: center;
    color: var(--wpjp-secondary-color);
    font-weight: 500;

}

.wjportal-error-msg-image-wrp {
    text-align: center;
}
.wjportal-error-msg-image-wrp img{
    margin: auto;
    max-width: 100%;
}
.wjportal-error-messages-wrp {
    text-align: center;
}

div#wpjobportal-wrapper .wjportal-error-messages-wrp {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

div#wpjobportal-wrapper .wjportal-error-msg-image-wrp {
    width: 100%;
    justify-items: center;
    display: grid;
}


/* Card Container */
.wjportal-popup-contentarea {
    background-color: white;
    border-radius: 1rem;
    padding: 1.5rem;
}

/* Header */
.wjportal-popup-contentarea h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    /* Dark Gray 800 */
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    /* Light Gray 200 */
}

/* Responsive Flexbox Layout (REPLACES GRID) */
.wjportal-by-sub-catagory {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto the next line */
    gap: 1rem;
    /* Spacing between items */
}

/* Category Wrapper (Default to full width on mobile) */
.wjportal-by-category-wrp {
    width: 100%;
}

/* Tablet/Desktop breakpoint */
@media (min-width: 640px) {
    .wjportal-popup-contentarea {
        /*padding: 2rem;*/
    }

    /* Calculate width for two columns, accounting for the 1rem gap */
    .wjportal-by-category-wrp {
        width: calc(50% - 0.5rem);
    }
}

/* Category Item Link Styling */
.wjportal-by-category-wrp a {
    display: block;
    text-decoration: none;
    background-color: #f3f4f6;
    /* Light Gray 100 */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem;
    transition: all 0.2s ease-in-out;
    height: 100%;
    /* Ensures card fills wrapper height for consistency */
}

/* Category Item Hover Effect */
.wjportal-by-category-wrp a:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);

}

/* Category Item Content Layout */
.wjportal-by-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Title and Number Styling */
.wjportal-by-category-item-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: #374151;
    /* Dark Gray 700 */
    transition: color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 80%;
}

.wjportal-by-category-wrp a:hover .wjportal-by-category-item-title {
    color: var(--wpjp-primary-color);
    /* Primary Color (Emerald) */
}

.wjportal-by-category-item-number {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #6b7280;
    /* Gray 500 */
    background-color: #e5e7eb;
    /* Light Gray 200 */
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.wjportal-by-category-wrp a:hover .wjportal-by-category-item-number {}

/* Navigation Footer */
.wjportal-popup-navigation {
    display: flex;
    border-top: 1px solid #e5e7eb;
    /* Light Gray 200 */
    padding-top: 1rem;
    margin-top: 1.5rem;
    list-style: none;
    padding-left: 0;
}

.wjportal-popup-navigation li {
    cursor: pointer;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #6b7280;
    padding: 10px;
    background-color: #f3f4f6;
    border-radius: 4px;
    transition: all 0.15s;
}

.wjportal-popup-navigation li:hover {
    color: var(--wpjp-primary-color);
    /* Primary Color (Emerald) */

}


/*--------------Resume save search -------------------------
---------------------------------------
-------------------------
---------------*/
/* --- New Card Design --- */

/* Main card container */
.wjportal-save-search-list {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    background-color: var(--wpjp-card-background);

    box-shadow: var(--wpjp-card-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    /* Ensures child elements respect the border-radius */
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-save-search-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Wrapper for the main content (title and date) */
.wjportal-save-search-content {
    padding: 24px;
}

.wjportal-save-search-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    padding: 24px 10px 0px 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-save-search-created {
    margin-bottom: 15px;
}

.wjportal-save-search-created-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 10px 10px 0px 24px;
}

.wjportal-save-search-created-text::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;

    /* The icon's color will match the text color above */
    background-color: currentColor;

    /* -- Calendar Icon SVG Mask -- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");

    /* Mask properties */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Footer area for action buttons */
.wjportal-save-search-action-wrp {
    display: flex;
    justify-content: flex-end;
    /* Aligns buttons to the right */
    gap: 12px;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

/* Base button styles */
.wjportal-save-search-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
    border: 1px solid var(--wpjp-border-color);
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-save-search-act-btn-remove {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-save-search-act-btn-remove.wjportal-list-act-btn-delete:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

a.wjportal-save-search-act-btn.wjportal-list-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-save-search-act-btn,
.wjportal-save-search-act-btn-remove {
    color: var(--wpjp-secondary-color);
    display: inline-flex;
    /* Aligns icon and text horizontally */
    align-items: center;
    /* Aligns them vertically in the middle */
    gap: 0.5em;
    /* Creates a small space between the icon and text */
    text-decoration: none;

}


/*===========================================================
--------------  Messages  ----------
=============================================================*/

/* --- Single Column (100% Width) Message List Design --- */

/* Main container for the cards */
.wjportal-messages-list-wrapper {
    display: flex;
    /* Changed from grid to flex */
    flex-direction: column;
    /* Stacks items vertically */
    gap: 20px;
    /* Space between cards */
}

/* Individual message card styling */
.wjportal-messages-list {
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);

    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* No width property needed; as a flex item, it will default to 100% width */
}

/* A subtle lift effect on hover to provide feedback */
.wjportal-messages-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Top section of the card (Name) */
.wjportal-msg-list-top {
    padding-bottom: 15px;
    padding: 20PX;

}

.wjportal-msg-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

/* Bottom section (Info and Action Button) */
.wjportal-msg-list-btm {
    gap: 15px;
    flex-wrap: wrap;
    display: flex;
    border-radius: 0 0 10px 10px;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    justify-content: end;
}

/* Styling for the "Resume: Sample Resume 3" text */
.wjportal-msg-info-data {
    font-size: var(--wpjp-body-font-size);
}

.wjportal-msg-info-data-tit {
    color: var(--wpjp-secondary-color);
}

.wjportal-msg-info-data-val a {
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.wjportal-msg-info-data-val a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* The main action button */
.wjportal-msg-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}


/* Darken button slightly on hover */
.wjportal-msg-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-msg-act-btn {
    /* Button Layout & Spacing */
    display: inline-flex;
    /* Aligns icon and text nicely */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    padding: 10px 20px;

    /* Button Appearance */
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Smooth Transition for Hover */
    transition: all 0.3s ease;
}

/* --- Trendy Message Display Design --- */

/* The main container for the message content */
.wjportal-send-message {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Consistent soft corners */
    box-shadow: var(--wpjp-card-shadow);
    padding: 25px 30px;
    /* Generous padding for a clean look */
    margin: 25px 0;
    /* Adds space above and below the component */
}

/* The subject line of the message */
.wjportal-send-msg-subject {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    /* Make the subject stand out */
    color: var(--wpjp-secondary-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
    /* A subtle line to cleanly separate the subject from the body */
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* The main body/text of the message */
.wjportal-send-msg-text {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    line-height: 1.7;
    /* Increased line height is crucial for readable paragraphs */
}

/* It's good practice to remove default margins from paragraphs within components */
.wjportal-send-msg-text p {
    margin: 0;
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
    line-height: 1.7;
    /* Increased line height is crucial for readable paragraphs */
}

/* --- Trendy Message History / Chat Design --- */

/* Main wrapper for the entire message history component */
.wjportal-message-history-wrp {
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Creates vertical space between title and messages */
}

/* The main title "Message History" */
.wjportal-msg-history-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* A single message row (avatar + bubble) */
.wjportal-msg-history {
    display: flex;
    align-items: flex-end;
    /* Aligns avatar with the bottom of the bubble */
    gap: 15px;
    /* Space between avatar and message bubble */
    max-width: 85%;
    /* Prevents a message from taking the full screen width */
}

/* --- Sent Message Styling (Aligned Right) --- */
.wjportal-msg-history.mesend {
    align-self: flex-end;
    /* Aligns the entire row to the right */
    flex-direction: row-reverse;
    /* Puts the avatar on the right */
}

.mesend .wjportal-msg-history-cnt {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    /* Custom border-radius for a chat bubble effect */
    border-radius: 18px 18px 5px 18px;
}

/* Change color of meta-data for better contrast on the dark background */
.mesend .wjportal-msg-history-name,
.mesend .wjportal-msg-history-created {
    color: var(--wpjp-secondary-color);
    opacity: 0.9;
}

/* --- Received Message Styling (Example) ---
You can create another class like "mereceived" for messages from the other person.
This would align them to the left with a different color.

.wjportal-msg-history.mereceived {
    align-self: flex-start;
}
.mereceived .wjportal-msg-history-cnt {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    border-radius: 18px 18px 18px 5px;
}
*/

/* The user's avatar image */
.wjportal-msg-history-image img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--wpjp-border-color);

}

/* The message bubble content */
.wjportal-msg-history-cnt {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Space between the header and the text */
}

/* Top part of the bubble (name and date) */
.wjportal-msg-history-top {
    display: flex;
    align-items: center;
    /* Vertically aligns all items */
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 15px;
    /* Adds space between items */
    /* REMOVED: justify-content: space-between; */
}

/* The sender's name */
.wjportal-msg-history-name {
    font-weight: 600;
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-body-font-color);
}

/* The creation date */
.wjportal-msg-history-created {
    font-size: 13px;
    color: #6c757d;
    /* Muted color for secondary info */
    white-space: nowrap;
    margin-left: auto;
    /* ADDED: This is the magic property! */
}

/* --- Status Badge Styling --- */

/* Base style for all status badges */
.wjportal-msg-history-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style for the "rejected" status */
.wjportal-msg-history-status.rejected {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
}

/* Style for a potential "approved" status */
.wjportal-msg-history-status.approved {
    background-color: #28a745;
    color: #ffffff;
}

/* Style for a potential "pending" status */
.wjportal-msg-history-status.pending {
    background-color: #eeba1f;
    color: #fff;
}

/* The actual message text */
.wjportal-msg-history-text {
    font-size: var(--wpjp-body-font-size);
    line-height: 1.6;
    word-break: break-word;
    /* Ensures long text doesn't break the layout */
    color: var(--wpjp-body-font-color);
}

.wjportal-msg-history-cnt.message-other,
.wjportal-msg-history-cnt.message-admin {
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    /* Custom border-radius for a chat bubble effect */
    border-radius: 18px 18px 5px 18px;

}

.wjportal-msg-history-text p {
    margin: 0;
    background: transparent;
}


.wjportal-msg-history-image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

/*===========================================================
--------------  Special Cases  ----------
=============================================================*/

.wpjobportal-list-item-status-rejected {
    border-left: 5px solid #bb0906 !important;
}

.wpjobportal-list-item-status-pending {
    border-left: 5px solid #ffa500 !important;
}

.wpjobportal-list-item-status-approved {
    border-left: 5px solid #008000 !important;
}

.wpjobportal-list-item-status-no-payment {
    border-left: 5px solid #ffa500 !important;
}

.wpjobportal-list-item-is-featured {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}

.wjportal-resume-list.wpjobportal-list-item-is-featured .wjportal-resume-list-top-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    position: relative;
    overflow: hidden;
}

.wjportal-resume-list.wpjobportal-list-item-status-no-payment .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #ffa500;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-rejected .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #bb0906;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-approved .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #008000;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-pending .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #ffa500;
    opacity: 0.3;
}

/*===========================================================
--------------  Credits Pack ----------
=============================================================*/
.wjportal-packages-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: auto;
    /*background: var(--background-color);*/
    padding: 50px;
    border-radius: 8px;
}

/* 1. Main Wrapper Styling (ID updated to stripe-wrap) */
.wjportal-main-up-wrapper #stripe-wrap {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 0;
}

/* 2. Content Area and Checkbox */
.wjportal-payemt-method-desc-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.wjportal-payemt-method-desc-data label {
    display: flex;
    /* Use flex for better alignment */
    align-items: center;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    cursor: pointer;
}

.wjportal-main-up-wrapper #recurringstripe {
    /* Basic styling for the checkbox */
    margin-right: 10px;
    transform: scale(1.1);
}

/* 3. Description Text Styling */
.wjportal-payemt-method-desc-txt {
    display: block;
    /* Ensures the span takes up full width */
    font-size: 13px;
    color: #777777;
    line-height: 1.5;
    padding-left: 2px;
    /* Slight indent to align with text */
}

/* 4. Form and Button Styling */
.wjportal-main-up-wrapper #stripe-form {
    display: block;
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.wjportal-main-up-wrapper div#stripe-wrap form#stripe-form button.stripe-button-el {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 17px !important;
    margin-top: 15px;
    background-color: #0070ba;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wjportal-main-up-wrapper .stripe-button-el span {
    height: unset;
    font-size: 17px !important;
}

.wjportal-main-up-wrapper .stripe-button-el span {
    background-image: none !important;
    background-color: unset !important;
    box-shadow: unset !important;
}

.wjportal-main-up-wrapper .stripe-button-el:hover,
.wjportal-main-up-wrapper button.stripe-button-el:hover,
.wjportal-main-up-wrapper .stripe-button-el span:hover {
    background: #0f67d6 !important;
}

.wjportal-main-up-wrapper .stripe-button-el {
    width: 100%;
}

/* Targeting the Stripe generated button element */
.wjportal-main-up-wrapper .stripe-button-el {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    background-color: #5469D4;
    /* Stripe purple/blue color */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
    /* Fix vertical alignment */
}

.wjportal-main-up-wrapper .stripe-button-el:hover {
    background-color: #4355a6;
    /* Darker shade on hover */
}

/* 5. Mobile Responsiveness */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #stripe-wrap {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }

    .wjportal-main-up-wrapper .stripe-button-el {
        font-size: 16px;
        padding: 10px 0;
    }
}

/* 1. Main Wrapper Styling */
.wjportal-main-up-wrapper #paypal-wrap {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Reset the inline style from the provided HTML */
    margin: 0;
}

/* 2. Content Area and Checkbox */
.wjportal-payemt-method-desc-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.wjportal-payemt-method-desc-data label {
    display: flex;
    /* Use flex for better alignment */
    align-items: center;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    cursor: pointer;
}

.wjportal-main-up-wrapper #recurringpaypal {
    /* Basic styling for the checkbox */
    margin-right: 10px;
    transform: scale(1.1);
}

/* 3. Description Text Styling */
.wjportal-payemt-method-desc-txt {
    display: block;
    /* Ensures the span takes up full width */
    font-size: 13px;
    color: #777777;
    line-height: 1.5;
    padding-left: 2px;
    /* Slight indent to align with text */
}

/* 4. Button Styling */
.wjportal-payemt-method-desc-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    margin-top: 15px;
    background-color: #0070ba;
    /* PayPal Blue */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wjportal-payemt-method-desc-btn:hover {
    background-color: #005ea6;
    /* Darker blue on hover */
    color: #fff;
}

/* 5. Mobile Responsiveness (optional, but good practice) */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #paypal-wrap {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }

    .wjportal-payemt-method-desc-btn {
        font-size: 16px;
        padding: 10px 0;
    }
}

/*
 * 3. THE PACKAGE CARD ITSELF
*/
.wjportal-pkg-list-item {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Important for the badge */
    width: 100%;
    border-top: 5px solid;

}

.wjportal-pkg-list-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/*
 * 3.1. FEATURED CARD "MOST POPULAR" BADGE
*/
.wjportal-pkg-list-item.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--primary-gradient);
    color: white;
    padding: 8px 40px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/*
 * 4. CARD HEADER (Top Section)
*/
.wjportal-pkg-list-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background-color: var(--background-color);
    border-bottom: 3px dotted var(--wpjp-primary-color);
}

.wjportal-pkg-list-item-title-txt {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    margin-bottom: 5px;
}

span.wjportal-pkg-list-item-disc {
    border: 1px solid;
    padding: 5px 30px;
    border-radius: 6px;
    background: black;
    color: #fff;
    font-weight: 500;
}

.wjportal-pkg-list-item-crt-date {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 10px;
}

.wjportal-pkg-list-item-price-txt {
    font-size: 32px;
    font-weight: 700;
    color: var(--wpjp-primary-color);
}

span.wjportal-pkg-list-item-price-discount {
    text-decoration: line-through;
    padding-right: 10px;
    font-size: 17px;
    color: #808080;
}

.wjportal-pkg-list-item-price-txt span {
    font-size: 16px;
    font-weight: 500;
    color: var(--wpjp-secondary-color);
}

/*
 * 5. CARD BODY (Middle Section) with ICONS
*/
.wjportal-pkg-list-item-mid {
    padding: 20px 30px;
    flex-grow: 1;
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-pkg-list-item-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Creates two equal-width columns */
    gap: 20px;
    /* Space between grid items */
    background-color: var(--wpjp-card-background);
    border-radius: 10px;
    margin: 20px auto;
}

.wjportal-pkg-list-item-btm {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    gap: 15px;
    padding: 30px;
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-packages-list .wjportal-pkg-list-item-act-btn {
    color: rgb(255, 255, 255);
    text-align: center;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    width: 100%;
    background: var(--wpjp-primary-color);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
}


.wjportal-packages-list .wjportal-pkg-list-item-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: white;
}

.wjportal-pkg-list-item-exp-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    text-align: center;
    border: 1px solid #a66e2d;
    background: antiquewhite;
    color: #a66e2d;
    padding: 5px;
    border-radius: 5px;
    width: 30%;
    margin: auto;
}

/* 2. GRID ITEM STYLING 
   Each row is now a self-contained item within the grid.
*/
.wjportal-pkg-list-item-row {
    display: flex;
    align-items: center;
    /* Vertically aligns the icon and text */
    padding: 12px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    transition: all 0.3s ease;
}

.wjportal-pkg-list-item-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--wpjp-card-shadow);
    border-color: var(--wpjp-primary-color);
}


/* 3. ICON STYLING (using ::before)
   This adds an icon to the start of each row without changing the HTML.
*/
.wjportal-pkg-list-item-row::before {
    content: '';
    display: inline-block;
    width: 18px;
    /* Icon size */
    height: 18px;
    margin-right: 12px;
    /* Space between icon and text */
    background-color: var(--wpjp-primary-color);
    /* Icon color */

    /* Generic checkmark icon using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* 4. TEXT STYLING */
.wjportal-pkg-list-item-row-tit {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    white-space: nowrap;
    /* Prevents long titles from wrapping awkwardly */
}

.wjportal-pkg-list-item-row-val {
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    font-size: var(--wpjp-body-font-size);
    margin-left: auto;
    /* Pushes the value to the far right */
    padding-left: 10px;
    /* Ensures space between title and value */
}

/** 6. CARD FOOTER (Bottom Section)*/
.wjportal-pkg-list-item-btm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-pkg-list-item-action-wrp {
    display: flex;
    align-items: center;
    width: 100%;
}



/*==========================================================================
===========Login from =========================
==================================*/

.wjportal-main-up-wrapper p.login-username,
.wjportal-main-up-wrapper p.login-password {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
}

.wjportal-main-up-wrapper .login-username label,
.wjportal-main-up-wrapper p.login-password label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-sec-heading {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--wpjp-secondary-color);
}

a.wjportal-form-lost-password {
    display: block;
    text-align: center;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: color 0.3s;

}

.wjportal-form-reg-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    margin-top: 15px;
    text-align: center;
}

/* Create the icon using a ::before pseudo-element */
.wjportal-form-reg-btn::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG "person add" icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-form-reg-btn {
    justify-content: center;
}

.wjportal-main-up-wrapper input#rememberme {
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-reg-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-main-up-wrapper form#loginform-custom p.login-submit {
    border-top: 1px solid black;
    padding-top: 20px;
    margin-bottom: 0;
}

.wjportal-main-up-wrapper form#loginform-custom input#wp-submit {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px 28px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.wjportal-main-up-wrapper form#loginform-custom input#wp-submit:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/*==========================================================================
===========My Invoices =========================
==================================*/

/* --- Main Table Wrapper & Layout --- */
.wjportal-table-wrp {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    overflow: hidden;
    table-layout: fixed;
    /* ADD THIS LINE: Ensures the table respects the column widths */
}

/* --- Column Widths --- */
/* This section sets the width for each specific column */
#wjportal-table th:nth-child(1),
#wjportal-table td:nth-child(1) {
    width: 40%;
    /* Description column */
}

#wjportal-table th:nth-child(2),
#wjportal-table td:nth-child(2) {
    width: 15%;
    /* Amount column */
}

#wjportal-table th:nth-child(3),
#wjportal-table td:nth-child(3) {
    width: 10%;
    /* Payment Method column */
}

#wjportal-table th:nth-child(4),
#wjportal-table td:nth-child(4) {
    width: 10%;
    /* Created column */
}

#wjportal-table th:nth-child(5),
#wjportal-table td:nth-child(5) {
    width: 15%;
    /* Created column */
}

#wjportal-table th:nth-child(6),
#wjportal-table td:nth-child(6) {
    width: 10%;
    /* Created column */
}

/* --- Table Header Styling --- */
#wjportal-table thead th {
    background-color: var(--background-color);
    padding: 1rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--wpjp-border-color);
}

/* --- Table Body & Row Styling --- */
#wjportal-table tbody tr {
    border-bottom: 1px solid var(--wpjp-border-color);
    transition: background-color 0.2s ease;
}

#wjportal-table tbody tr:last-of-type {
    border-bottom: none;
}

#wjportal-table tbody tr:hover {
    background-color: var(--background-color);
}

/* --- Table Cell Styling --- */
#wjportal-table td {
    padding: 1rem 1.5rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    vertical-align: middle;
    /* Helps prevent long text from breaking the layout */

}

.wjportal-my-invoices-list-wrapper table td>a {
    padding: 1rem 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    vertical-align: middle;
    box-shadow: unset;
}

.wjportal-my-invoices-list-wrapper table td>a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}


/* --- Special Badge for Payment Method --- */
.wjportal-my-invoices-list-payment-method-type {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}

.wjportal-paypal {
    background-color: #e3f2fd;
    color: #1565c0;
}


/*==========================================================================
===========popup =========================
==================================*/

/* A nice highlight color when user selects text */
.wjportal-main-up-wrapper ::selection {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* --- Popup Container --- */
.wjportal-popup-cnt {
    background-color: var(--wpjp-card-background);
    border-radius: 20px;
    /* Softer, more modern corners */
    padding: 32px;
    width: 100%;

    position: relative;

    /* NEW: A more pronounced, layered shadow for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);

    /* NEW: A subtle gradient border at the top for a premium feel */
    border-top: 4px solid transparent;
    border-image: linear-gradient(to right, var(--wpjp-primary-color), var(--wpjp-secondary-color)) 1;

    /* NEW: A more dynamic entry animation */
    animation: slideInFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* --- Close Button --- */
#wjportal-popup-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
    background-color: var(--wpjp-secondary-color);
    border-radius: 50%;
}

#wjportal-popup-close-btn:hover {
    opacity: 1;
    transform: scale(1.1) rotate(90deg);
    /* NEW: Added scale effect */
}

/* --- Popup Header --- */
.wjportal-popup-title {
    /*text-align: center;*/
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    /* Bolder for more impact */
}

.wjportal-popup-title2 {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    /* Bolder for more impact */
    color: var(--wpjp-secondary-color);
    position: relative;
    display: inline-block;
    /* Required for the ::after element */
}

/* NEW: A stylish gradient underline accent */
.wjportal-popup-title2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--wpjp-primary-color), var(--wpjp-secondary-color));
    border-radius: 2px;
}

/* --- Form Fields & Labels --- */
.wjportal-popup-field {
    margin-bottom: 20px;
}

.wjportal-popup-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-popup-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Softer radius */
    font-size: var(--wpjp-body-font-size);
    background-color: var(--background-color);
    transition: all 0.3s ease;
    resize: vertical;
    box-sizing: border-box;
}

/* NEW: A more prominent "glow" effect on focus */
.wjportal-popup-field textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

/* --- Star Rating --- */
.wjportal-container-small {
    display: flex;
    justify-content: center;
    /*margin-bottom: 24px;*/
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 10px 5px 10px;
    border-radius: 8px;
    background: var(--wpjp-card-background);
}

/* --- Save Button --- */
a.wjportal-visitor-msg-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    /* Adds a small space between the icon and text */
    /* NEW: Attractive gradient background */
    background-image: linear-gradient(45deg, var(--wpjp-primary-color) 0%, var(--wpjp-primary-color-light) 100%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
    justify-content: center;
}

/* This creates the icon before the text */
div#wjportal-listpopup .wjportal-visitor-msg-btn::before {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18h14v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V18h6v-1.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18h14v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V18h6v-1.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* --- NEW Animation Keyframes --- */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Popup Overlay === */
#wjportal-popup-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to bottom, rgba(var(--wpjp-primary-color), 0.41), rgba(var(--wpjp-secondary-color), 0.84));*/
    /*background: rgba(0, 0, 0, 0.55);*/
    z-index: 999998;
    display: none;
}

#wjportal-popup-background::before {
    content: '';
    /* Pseudo-elements must have a content property */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--wpjp-primary-color), var(--wpjp-secondary-color));
    z-index: -1;
    border-radius: 8px;
    opacity: 0.85;
    /* Control the transparency of the entire gradient here */
}

/* === Popup Wrapper === */
.wjportal-popup-wrp {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    display: none;
    overflow: hidden;
    width: 50%;
}


/* === Payment Methods Layout === */
.wjportal-payemt-methods-wrp {
    display: flex;
    justify-content: center;
    /* Center the payment cards */
    gap: 20px;
    /* Space between cards */
    flex-wrap: wrap;
    /* Allow cards to stack on smaller screens */
    padding: 20px 0;
}

/* === Payment Item === */
.wjportal-payemt-method-item {
    position: relative;
    /* Crucial for positioning the Stripe button later */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: 20px;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 12px;
    background-color: var(--wpjp-card-background, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}

/* === Payment Logos === */
.wjportal-payemt-method-item img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
    /* NEW: Grayscale effect for a clean, uniform look */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}


.wjportal-payemt-method-item img:hover {
    transform: scale(1.05);

}

/* === Stripe Method === */
.wjportal-payemt-method-stripe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Normalize Stripe Button Layout */
.wjportal-payemt-method-stripe form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}


.wjportal-main-up-wrapper .stripe-button-el:hover,
.wjportal-main-up-wrapper button.stripe-button-el:hover {
    background: #0f67d6 !important;
}

/* Ensure the Stripe inner span displays properly */
.wjportal-main-up-wrapper .stripe-button-el>span,
.wjportal-main-up-wrapper button.stripe-button-el>span {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === Proceed Button === */
.wjportal-payment-act-btn {
    background: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;

}

.wjportal-payment-act-btn:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

/* === Responsive Adjustments === */
@media (max-width: 480px) {
    .wjportal-popup-wrp {
        width: 90%;
        padding: 0;
    }

    .wjportal-payemt-methods-wrp {
        flex-direction: column;
        gap: 15px;
    }

    .wjportal-payemt-method-item img {
        width: 120px;
    }
}

/* --- Responsive Design for Mobile --- */
@media (max-width: 768px) {

    /* Reset column widths for mobile */
    #wjportal-table th,
    #wjportal-table td {
        width: 100% !important;
        /* The !important ensures it overrides the desktop widths */
    }

    /* Hide the original table header */
    #wjportal-table thead {
        display: none;
    }

    /* Make rows and cells stack vertically */
    #wjportal-table tr {
        display: block;
        margin-bottom: 3rem;
        border-bottom: 2px solid var(--wpjp-border-color);
        padding: 15px;
    }

    #wjportal-table tr:last-of-type {
        margin-bottom: 0;
    }

    #wjportal-table td {
        display: block;
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px dotted var(--wpjp-border-color);
    }

    #wjportal-table td:last-child {
        border-bottom: none;
    }

    /* Use the data-th attribute to create labels */
    #wjportal-table td::before {
        content: attr(data-th);
        float: left;
        font-weight: 600;
        color: var(--wpjp-secondary-color);
    }
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .wjportal-popup-field-wrp {
        grid-template-columns: 1fr;
        /* Stack to a single column */
    }
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .wjportal-form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .wjportal-form-title {
        text-align: left;
        padding-top: 0;
    }

    .wjportal-form-btn-wrp {
        justify-content: center;
        font-size: var(--wpjp-body-font-size);
    }

    .wjportal-form-btn {
        width: 100%;
        justify-content: center;
    }

    div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt {
        width: 100%;
        padding-left: 0;
    }
    .wjportal-filter-search-field-wrp{width:100%;}
    .wjportal-jobs-right-wrp{
        text-align: start;
    }
}

/* ----------------------------------------- */
/* == Responsive          == */
/* ----------------------------------------- */

@media (max-width: 480px) {
    .wjportal-company-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-resume-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-newest-jobs-date {
        margin-bottom: 15px;
    }

    .wjportal-jobs-list-btm-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-right-wrp {
        align-items: flex-start;
        width: 100%;
    }

    .wjportal-packages-list {
        padding: 5px;
    }

    .wjportal-department-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-department-desc-wrap {
        padding-top: 10px;
    }
    .wjportal-form-btn-wrp{flex-wrap: wrap;}
    div#wpjobportal-wrapper{padding:0;}
    .wjportal-newest-jobs-date{width:100%;}
    div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-middle-wrp{
        width:55%;
        flex: 1 1 auto;
    }
    div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-right-wrp{
        width:45%;
        flex: 1 1 auto;

    }
    .wjportal-company-job-viewjob-leftwrp{
        min-width: unset;
    }
}

@media (max-width: 650px) {
    .wjportal-jobs-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-job-listing-description-wrap {
        width: 100%;
    }

    .wjportal-jobs-right-wrp {
        gap: 5px;
    }

    .wjportal-coverletter-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-coverletter-middle-wrp {
        width: 100%;
    }

    .wjportal-coverletter-right-wrp {
        width: 100%;
        align-items: flex-start;
    }

    .wjportal-coverletter-action-wrp {
        justify-content: end;
    }

    .wjportal-company-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-pkg-list-item-top {
        flex-wrap: wrap;
    }

    .wjportal-pkg-list-item-exp-date {
        width: 100%;
    }

    .wjportal-department-middle-wrp {
        width: 100%;
    }

    .wjportal-pkg-list-item-row-tit {
        white-space: unset;
    }

    .wjportal-by-categories-row-wrp {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.wjportal-by-categories-row-wrp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
}

@media (max-width: 768px) {

    .wjportal-jobs-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-right-wrp {
        align-items: flex-start;
        width: 100%
    }

    div.wjportal-page-header div.wjportal-header-actions div.wjportal-filter-wrp {
        display: flex !important;
    }

    div.wjportal-page-header div.wjportal-header-actions {
        margin-top: 20px;
    }

    .wjportal-jobs-middle-wrp {
        width: 100%;
    }

    .wjportal-resume-right-wrp {
        width: 100%;
        justify-content: start;
    }

    .wjportal-resume-middle-wrp {
        width: 100%;
    }

    .wjportal-resume-data {
        width: 100%;
    }

    .wjportal-applied-job-resume-status {
        position: static;
        transform: none;
        display: inline-block;
    }

    .wjportal-applied-job-resume-status {
        margin-bottom: 10px;
    }

    span.wjportal-resume-job-type {
        margin-bottom: 10px;
    }

    .wjportal-pkg-list-item-row {
        width: 100%;
    }

    .wjportal-department-desc-wrap {
        padding-top: 10px;
    }

    .wjportal-companydetail-wrapper .wjportal-company-data,
    .wjportal-company-data-wrp .wjportal-custom-field {
        width: 100%;
    }

    .wjportal-companyinfo-wrp {
        width: 100%;
    }

    .wjportal-companyinfo-middle-wrap {
        width: 100%;
    }


    .wjportal-filter-search-field-wrp { width:100% ;}
    .wjportal-filter-search-btn-wrp {
        display: flex;
        justify-content: center;
    }

}

@media (max-width: 1080px) {
    .wjportal-pkg-list-item-data {
        grid-template-columns: repeat(1, 1fr);
    }

    .wjportal-by-categories-row-wrp {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        width: 100%;
    }

    .wjportal-by-category-wrp {
        width: 100% !important;
    }
}

/* ----------------------------------------- */
/* == Responsive for this Section          == */
/* ----------------------------------------- */
@media (max-width: 576px) {
    .wjportal-jobs-list-resume-wrp {
        padding-right: 1rem;
        /* Reset right padding */
    }

}

/* featured styling all listing  */
.wpjobportal-list-item-is-featured {
    border: 1px solid #ffb63b;
}

.wpjobportal-list-item-is-featured .wjportal-jobs-logo,
.wpjobportal-list-item-is-featured .wjportal-company-logo,
.wpjobportal-list-item-is-featured .wjportal-resume-logo {
    border: 1px solid #ffb63b;
    width: 155px;
    height: 155px;
    padding: 10px;
}

.wpjobportal-list-item-is-featured .wjportal-resume-data-value,
.wpjobportal-list-item-is-featured .wjportal-jobs-data-text,
.wpjobportal-list-item-is-featured .wjportal-company-data-text-created span.wjportal-company-data-value,
.wpjobportal-list-item-is-featured .wjportal-company-data-location span.wjportal-company-data-value,
.wpjobportal-list-item-is-featured .wjportal-company-data-status span.wjportal-company-data-value {
    color: var(--wpjp-secondary-color);
}

/*==========================================
icons =================================
=========================================*/


.wjportal-resume-action-wrp a::before,
.wjportal-job-type::before,
.wjportal-newest-jobs-date::before,
.wjportal-jobs-act-btn::before,
.wjportal-jobs-act-btn-apply::before,
.wjportal-payment-act-btn::before,
.wjportal-jobs-data-text::before,
.wjportal-companyinfo-data::before,
.wjportal-companyinfo a.wjportal-companyinfo-link::before,
a.wjportal-apply-as-visitor-btn::before,
.wjportal-jobinfo-data::before,
.wjportal-jobinfo-data-view::before,
.wjportal-jobinfo-right-data-location .wjportal-jobinfo-data::before,
.wjportal-tags-item::before,
.wjportal-job-act-btn::before,
.wjportal-job-act-btn-tell::before,
.wjportal-job-act-btn-short::before,
.wjportal-company-btn-wrp a::before,
.wjportal-company-view-all-jobs-btn::before,
.wjportal-company-view-company-btn::before,
.wjportal-applied-job-actions-popup-norec-link::before,
.wjportal-job-applied-actions-btn::before,
.wjportal-main-up-wrapper #popup_message::before,
.wjportal-main-up-wrapper .applynow-closebutton::before,
.wjportal-resume-action-wrp a::before,
.wjportal-resume-job-type::before,
.wjportal-resume-data-text::before,
.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs::before,
a.wjportal-resume-act-btn-view::before,
.wjportal-folder-act-btn::before,
.wjportal-department-info-tit::before,
.wjportal-department-act-btn::before,
.wjportal-coverletter-act-btn::before,
.wjportal-company-act-btn::before,
.wjportal-main-up-wrapper .frontend.updated::before,
.wjportal-visitor-msg::before,
.wjportal-main-up-wrapper .frontend.error::before,
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message::before,
.wjportal-show-contact-det-btn::before,
.wpjobportal-terms-and-conditions-wrap a::before,
.wjportal-main-up-wrapper .alert-danger::before,
.wjportal-coverletter-act-btn::before,
.wjportal-coverletter-act-btn-view::before,
.wjportal-coverletter-info-tit::before,
.wjportal-save-search-created-text::before,
.wjportal-save-search-act-btn::before,
.wjportal-save-search-act-btn-remove::before,
.wjportal-msg-act-btn::before,
.wjportal-pkg-list-item.featured::before,
.wjportal-pkg-list-item-row::before {
    content: '';
    display: inline-block;
    align-items: center;
    width: 1em;
    height: 1em;
    gap: 0.8rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-error-msg-act-btn-back-btn ::before {
    /* User/Profile Icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
}

a.wjportal-payment-act-btn::before,
.wjportal-list-act-btn-proceed-payment::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
}

.wjportal-list-act-btn-delete::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

a.wjportal-list-act-btn-edit::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}

.wjportal-list-act-btn-mark-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-list-act-btn-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-company-btn-wrp a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.wjportal-company-view-all-jobs-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-view::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.wjportal-list-act-btn-already-applied::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied:before,
.wjportal-list-act-btn-apply::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-copy-job::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
}

.wjportal-list-act-btn-tell-a-friend::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.wjportal-resume-act-btn-ai-suggested-jobs::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
}

.wjportal-jobs-act-btn-ai-suggested-resumes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
}


.wjportal-jobs-act-btn-delete-shortlist::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

div#wjportal-listpopup a.wjportal-visitor-msg-btn.wpjobportal-save-shortlist-popup-button::before,
.wjportal-job-act-btn-shortlist::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-applied-resumes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
}

.wjportal-list-act-btn-mark-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-list-act-btn-add-note::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>');
}

.wjportal-list-act-btn-info-details::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.wjportal-list-act-btn-mark-spam::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.wjportal-list-act-btn-mark-not-spam::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.wjportal-list-act-btn-mark-hired::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>');
}

.wjportal-list-act-btn-mark-rejected::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
}

.wjportal-list-act-btn-pdf-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
}

.wjportal-list-act-btn-print-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>');
}

.wjportal-list-act-btn-view-message::before,
.wjportal-msg-act-btn::before,
.wjportal-resume-act-btn.wjportal-resume-act-action-links.wjportal-list-act-btn-tell-a-friend.action-links::before,
.wjportal-list-act-btn-send-message-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.wjportal-list-act-btn-folder-view-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.wjportal-list-act-btn-copy-to-folder::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
}

.wjportal-list-act-btn-export-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
}

.wjportal-list-act-btn-folder-delete-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.wjportal-list-act-btn-view-profile::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-list-act-btn-change-package::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-select-package {}

.wjportal-list-act-btn-pdf::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
}

.wjportal-list-act-btn-add {}

.wjportal-list-act-btn-unsub-job-alert {}

.wjportal-list-act-btn-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-company-job-viewjob-rightwrp .wjportal-job-detail-about-company-wrap .wjportal-company-btn-wrp a.wjportal-company-view-all-jobs-btn::before,
.wjportal-companydetail-wrapper .wjportal-company-act-btn::before,
.wjportal-company-view-all-jobs-btn::before,
.wjportal-company-view-company-btn::before,
.wjportal-list-act-btn-view-all::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-list-act-btn-make-payment::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
}

.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
}

a.wjportal-apply-as-visitor-btn::before,
.wjportal-job-act-btn::before,
.wjportal-jobs-act-btn-apply:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

a.wjportal-apply-as-visitor-btn::before {}

.wjportal-error-msg-act-btn::before {}

.wjportal-list-act-btn-buy-now {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
}

.wjportal-list-act-btn-buy-now::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG shopping cart icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-act-btn.wjportal-unsubscribed-btn-wrp.wjportal-list-act-btn-unsub-job-alert {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
}

.wjportal-list-act-btn-unsub-job-alert::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG "notifications off" (bell with a slash) icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM2.1 2.1L.69 3.51 3 5.83V11c0 .32.04.63.1.94L1.6 13.43c-.15.27-.16.6.01.88.17.28.48.45.8.45h2.61l1.82 1.82c-.37.05-.74.08-1.13.08-1.93 0-3.6-1.03-4.55-2.64l-1.5-2.61c0 .02 0 .03-.01.05l-1.49-1.49L2.1 2.1zM20 12.94c.06-.31.1-.62.1-.94V11c0-2.89-1.86-5.4-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S12.5.67 12.5 4v.68c-.5.14-.98.34-1.43.57l1.5 1.5c.16-.05.32-.08.49-.11h.01c2.48 0 4.5 2.02 4.5 4.5v.91l2.02 2.02.53-.29c.17-.28.16-.6-.01-.88l-1.54-2.43z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM2.1 2.1L.69 3.51 3 5.83V11c0 .32.04.63.1.94L1.6 13.43c-.15.27-.16.6.01.88.17.28.48.45.8.45h2.61l1.82 1.82c-.37.05-.74.08-1.13.08-1.93 0-3.6-1.03-4.55-2.64l-1.5-2.61c0 .02 0 .03-.01.05l-1.49-1.49L2.1 2.1zM20 12.94c.06-.31.1-.62.1-.94V11c0-2.89-1.86-5.4-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S12.5.67 12.5 4v.68c-.5.14-.98.34-1.43.57l1.5 1.5c.16-.05.32-.08.49-.11h.01c2.48 0 4.5 2.02 4.5 4.5v.91l2.02 2.02.53-.29c.17-.28.16-.6-.01-.88l-1.54-2.43z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

div#wpjobportal-wrapper.wjportal-by-categories-main-wrp.wjportal-job-by-categories-wrp {
    display: flex;
    flex-wrap: wrap;
}

div#wpjobportal-wrapper.wjportal-by-categories-main-wrp.wjportal-job-by-categories-wrp .wjportal-by-categories-row-wrp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
}

.wjportal-form-roles .wjportal-form-text {
    padding-top: 12px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-btn-back-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-btn-back-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-secondary-color);
}

.wjportal-main-up-wrapper a,
.wjportal-main-up-wrapper .wjportal-main-wrapper a:focus {
    text-decoration: unset;
}

.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus):first-letter,
.wp-block-button.is-style-outline,
a {
    color: #e98d26;
}


.wjportal-pkg-list-item.wpjobportal-packages-list-item-status-expired .wjportal-pkg-list-item-act-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    /* Adds space between the icon and text */

}

.wjportal-pkg-list-item.wpjobportal-packages-list-item-status-expired .wjportal-pkg-list-item-act-btn::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}


/* --- NEW: Linear Progress Bar for Profile Status --- */
.wjportal-progress-bar-container {
    width: 100%;
    padding: 10px 0px;
}

.wjportal-progress-bar-container .wjportal-progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wjportal-progress-bar-container .wjportal-progress-bar-title {
    font-size: var(--font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
}

.wjportal-progress-bar-container .wjportal-progress-bar-percentage {
    font-size: var(--font-size);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-progress-bar-container .wjportal-progress-bar-wrapper {
    width: 100%;
    background-color: #eeeff1;
    border-radius: 5px;
    height: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wjportal-progress-bar-container .wjportal-progress-bar-fill {
    opacity: 0.3;
    height: 100%;
    border-radius: 6px;
    /*background-color: #cbc8ea;*/
    background-color: var(--wpjp-primary-color);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    transition: width 0.6s ease;
    animation: progress-bar-stripes 1s linear infinite;
}

/* * Packages Wrapper
     * This will hold the package items using Flexbox
    */
.wjportal-packages-popup .wjportal-packages-wrp {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap to next line */
    margin: 0 -10px;
    /* Negative margin to counteract padding on items */
}

/* * Individual Package Item (Card)
*/
.wjportal-packages-popup .wjportal-pkg-item {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    margin: 10px;
    /* Space between cards */
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    /* Flex properties for column layout */
    flex-grow: 1;
    /* Allow items to grow */
    flex-shrink: 1;
    /* Allow items to shrink */
    flex-basis: 300px;
    /* Base width - 2 cards will fit in 800px */

    display: flex;
    flex-direction: column;
    /* Stack top and bottom sections */
    transition: box-shadow 0.2s, transform 0.2s;
}

.wjportal-packages-popup .wjportal-pkg-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.wjportal-packages-popup .wjportal-pkg-item-top {
    padding: 15px 20px;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wjportal-packages-popup .wjportal-pkg-item-title {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    /* A primary blue color */
}

.wjportal-packages-popup .wjportal-pkg-item-btm {
    padding: 20px;
    flex-grow: 1;
    /* Makes bottom section fill available space */
    display: flex;
    flex-direction: column;
}

.wjportal-packages-popup .wjportal-pkg-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.95rem;
    /* 15px */
}

.wjportal-packages-popup .wjportal-pkg-item-tit {
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-packages-popup .wjportal-pkg-item-val {
    color: var(--wpjp-body-font-color);
    text-align: right;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-packages-popup .wjportal-pkg-item-btn-row {
    margin-top: auto;
    /* Pushes the button to the bottom */
    padding-top: 15px;
}

/* "Select Package" Button (Link) */
.wjportal-packages-popup .wjportal-pkg-item-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    transition: background-color 0.2s;
}

.wjportal-packages-popup .wjportal-pkg-item-btn:hover {
    background-color: var(--wpjp-secondary-color);
}

/* Highlighted/Selected Package */
.wjportal-packages-popup .wjportal-pkg-item.selected {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Message area */
.wjportal-packages-popup .wjportal-popup-msgs {
    margin-top: 15px;
    font-size: var(--wpjp-body-font-size);
    color: #28a745;
    /* Success color */

}

/* Bottom "Add To Featured" button area */
.wjportal-packages-popup .wjportal-visitor-msg-btn-wrp {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* "Add To Featured" Button */
.wjportal-packages-popup .wjportal-visitor-msg-btn {
    /* Green color */
    /*background-color: #28a745;*/
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wjportal-packages-popup .wjportal-visitor-msg-btn:hover {
    background-color: #218838;
}

/* Help Text */
.wjportal-packages-popup .wjportal-pkg-help-txt {
    font-size: var(--wpjp-body-font-size);
    color: #d9534f;
    /* A subtle error/warning color */
    background-color: #fdf7f7;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
}

/* --- Company list Widget Styles --- */

/* NEW: This is the main wrapper for the *list* of widgets */
.wpjobportal-companies-widget-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* This creates the space *between* the company rows */
}

/* This is the main card container for EACH widget row */
.wpjobportal-companies-list-row {
    width: 100%;
    /* max-width: 700px; */
    /* No longer needed, as wrapper handles width */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;
    box-sizing: border-box;
    /* Ensures padding is included in width */

    /* We use CSS Grid for a robust layout.
      It creates two columns: one for the logo, one for the content.
      The content column itself has two rows: title and details.
    */
    display: grid;
    grid-template-columns: auto 1fr;
    /* logo | content */
    grid-template-rows: auto auto;
    /* title | details */
    grid-template-areas:
        "logo title"
        "logo details";
    /* 1rem row-gap, 1.5rem column-gap */
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-companies-list-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Logo column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
    grid-area: logo;
    /* Assigns this div to the 'logo' area */
}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-logo img {
    display: block;
    min-width: 100px;
    /* Fixed width */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 15px;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
}

/* Title row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
}

/* Details row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
    /* Aligns details to the top of its cell */
    display: flex;
    gap: 12px;
    padding-top: 0.5rem;
    width: 53%;
    justify-content: flex-end;
}

.wpjobportal-companies-list-row .wpjobportal-company-field {
    justify-content: flex-start;
}

.wpjobportal-companies-list-row .wpjobportal-company-field {
    font-size: var(--wpjp-body-font-size);
    color: #495057;
}

.wpjobportal-companies-list-row .wpjobportal-company-field-label {
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    margin-right: 0.25rem;
}

/* --- Responsive behavior for mobile --- */
@media (max-width: 600px) {
    .wpjobportal-companies-list-row .wpjobportal-companies-list-row {
        /* Change to a single column layout on mobile.
          Logo goes on top, then title, then details.
        */
        grid-template-columns: 1fr;
        /* Full width */
        grid-template-areas:
            "logo"
            "title"
            "details";
        gap: 1rem;
        padding: 1.25rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
        justify-self: start;
        /* Align logo to the left */
    }

    .wpjobportal-companies-list-row.wpjobportal-companies-list-col-title {
        align-self: start;
        /* Reset alignment */
    }

    .wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
        padding-top: 0;
        /* Remove extra padding */
    }
}


/* --- Company grid Widget Styles --- */

/* This creates the responsive grid */
/* --- New Widget Styles --- */

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .elementor-widget-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* This creates the responsive grid */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-companies-grid-wrapper {
    display: grid;
    /* Creates a responsive grid:
       - On large screens: 3 columns
       - On medium screens: 2 columns
       - On small screens: 1 column
       - minmax(300px, 1fr) ensures cards are at least 300px wide
    */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* This is the main card for each company */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 2rem 1.5rem;
    margin-bottom: 15px;
    /* Use flex to align content vertically and center it */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Company Logo */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-logo img {
    display: block;
    border-radius: 10%;
    /* Make it circular */
    border: 2px solid #f0f0f0;
    object-fit: contain;
    /* Prevents image stretching */
    margin-bottom: 1.25rem;
    padding: 10px;
}

/* Company Title */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title {
    margin-bottom: 0.75rem;
    /* Ensure title doesn't take up extra space */
    flex-grow: 0;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

/* Company Details (Location, Posted) */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);

    /* This makes the details section grow to fill space,
       pushing the button to the bottom */
    flex-grow: 1;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-field {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* In case value is long */
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-field-label {
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    margin-right: 0.35rem;
}

/* "View Company" Button */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-grid-view-company-button {
    border: 1px solid var(--wpjp-border-color);
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    /* Light purple */
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    /* Make button full width of card padding */
    max-width: 250px;
    box-sizing: border-box;

    /* This ensures the button is at the bottom */
    flex-grow: 0;
    margin-top: auto;
    /* Pushes button to bottom */

}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-grid-view-company-button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #ffffff;
}


/* ========================================================================================================
---------------- job List Widget Styles --- 
=============================================================================================*/

/* Wrapper for the whole widget */
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list {
    width: 100%;
}

/* The main list item card */
.wpjobportal-layout-list .wpjobportal-job-box {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 24px */
    background-color: white;
    border-radius: 10px;
    /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 10px;
    /* 24px */
    width: 100%;
    box-sizing: border-box;
    /* Ensures padding doesn't break width */
    border: 1px solid var(--wpjp-border-color);

}

.wpjobportal-layout-list .wpjobportal-job-box.wpjobportal-floatbox {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-list .wpjobportal-job-box.wpjobportal-floatbox:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Logo container */
.wpjobportal-layout-list .wpjobportal-job-logo {
    flex-shrink: 0;
    /* Prevents logo from shrinking */
}

.wpjobportal-layout-list .wpjobportal-job-logo img {
    border-radius: 0.5rem;
    /* 8px */
    object-fit: contain;
    border: 1px solid #e5e7eb;
    /* Light border */
    display: block;
    padding: 10px;
}

/*.wpjobportal-layout-list .wpjobportal-job-widget-detail-field-data.wpjobportal-job-apply_before {
    color: #a11616;
}*/

/* Main details section (grows to fill space) */
.wpjobportal-layout-list .wpjobportal-job-details {
    flex-grow: 1;
    min-width: 0;
    /* Fix for flexbox overflow */
}

.wpjobportal-layout-list .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    margin-bottom: 0.25rem;
    /* 4px */
}

.wpjobportal-layout-list .wpjobportal-job-title a {
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}

.wpjobportal-layout-list .wpjobportal-job-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

.wpjobportal-layout-list .wpjobportal-job-company {
    font-size: var(--wpjp-body-font-color);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    margin-bottom: 5px;
    /* 12px */
}

.wpjobportal-layout-list .wpjobportal-job-company a {
    text-decoration: none;
}

.wpjobportal-layout-list .wpjobportal-job-company a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);

}

/* Wrapper for the metadata items */
.wpjobportal-layout-list .wpjobportal-job-meta-row {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 10px;
    
}

/* Individual metadata item */
.wpjobportal-layout-list .wpjobportal-job-widget-detail-field-data {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    /*font-size: var(--wpjp-body-font-size);*/
    font-size: 13px;
    /* 14px */
    color: var(--wpjp-body-font-color);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
    background-color:#f3f4f6;
}

.wpjobportal-job-company .wpjobportal-job-company-posted-date{
    color: var(--wpjp-body-font-color);
}


/* Responsive adjustments */
@media (max-width: 640px) {
    .wpjobportal-job-box {
        flex-direction: column;
        /* Stack logo on top */
        align-items: center;
        /* Center-align content */
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .wpjobportal-job-details {
        text-align: center;
        /* Center text */
    }

    .wpjobportal-job-meta-row {
        justify-content: center;
        /* Center meta items */
        gap: 0.5rem 1rem;
    }
}


/*===================================================================================================
========================job grid widget=======================================================
==================================================================================*/

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-row {
    background-color: white;
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 2rem 1.5rem;
    /* Vertical and horizontal padding */
    text-align: center;
    /* Center everything inside */
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid var(--wpjp-border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}



.wpjobportal-layout-grid.wpjobportal-cols-1 .company-logo {
    display: inline-block;
    /* Allows centering with text-align on parent */
    margin-bottom: 1.5rem;
    /* Space below the logo */
    padding: 0.75rem;
    /* Padding inside the logo container */
    border-radius: 0.5rem;
    /* Rounded corners for the container */
    background-color: #f9fafb;
    /* Very light gray background */
    border: 1px solid #e5e7eb;
    /* Light border */
    justify-content: center;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-logo {
    display: flex;
    justify-content: center;

}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-logo img {
    border-radius: 0.5rem;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    display: block;
    padding: 10px;
}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: var(--wpjp-secondary-color);
    /* Darker gray */
    margin-bottom: 0.5rem;
    text-decoration: none;
    display: block;
    /* Ensures it takes full width and centers */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title :hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: var(--wpjp-secondary-color);
    /* Darker gray */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-company a {
    font-size: var(--wpjp-body-font-size);
    /* 16px */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    /* Medium gray */
    margin-bottom: 1.5rem;
    /* Space below company name */
    text-decoration: none;
    display: block;
    /* Ensures it takes full width and centers */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}

/* Container for all detail fields */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-meta-col {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    /* Divider line */
    display: flex;
    /* Use flexbox for vertical stacking */
    flex-direction: column;
    /* Stack items vertically */
    gap: 0.75rem;
    /* Space between each detail item */
}

/* Individual detail field */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    /* Makes content and icon align horizontally */
    align-items: center;
    justify-content: center;
    /* Center the content of each item */
    gap: 0.5rem;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    /* About 15px */
    color: var(--wpjp-body-font-color);
    /* Medium gray */
    line-height: 1.5;
    width: 100%;
    /* Ensures it takes full width */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data svg {
    width: 1rem;
    /* 16px */
    height: 1rem;
    /* 16px */
    color: #9ca3af;
    /* Icon color */
    flex-shrink: 0;
    /* Prevents icon from shrinking */
}

/* Specific styling for job type tag */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wjportal-job-type {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    padding: 5px;
    /* 2px 10px */
    border-radius: 9999px;
    color: white;
    background-color: #b557b5;
    /* From original inline style */
    display: inline-block;
    /* Allows padding and background */
    margin-left: 0.25rem;
    /* Small space after "Job Type:" */
    width: 50%;
}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-apply_before svg {
    color: #d9480f;
}

/* Small adjustment for the Job Type line to prevent wrapping if possible */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-job_type {
    white-space: nowrap;
    /* Tries to keep "Job Type: Part-Time" on one line */

}

/*===================================================================================================
========================job Card widget=======================================================
==================================================================================*/

.wpjobportal-layout-card.wpjobportal-cols-1 {
    width: 100%;
    margin: 0 auto;
    gap: 1.5rem;
}

/* This is the main card for each job */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;

    gap: 1.25rem;
    align-items: start;
    /* Align logo and text block to the top */

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Job Logo */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-logo img {
    display: block;
    border-radius: 8px;
    /* Rounded square logo */
    border: 1px solid #eee;
    object-fit: contain;
    padding: 10px;
}

/* Container for all text content */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Small gap between title and company */
}

/* Job Title */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-title a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

/* Company Name */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-company a {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}

/* Container for all the meta fields */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-meta-col {
    display: flex;
    gap: 5px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Individual meta field (e.g., Salary, Location) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    /*font-size: var(--wpjp-body-font-size);*/
    font-size: 13px;
    /* 14px */
    color: var(--wpjp-body-font-color);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
    background-color:#f3f4f6;
}

/* Add icons to the meta fields */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    width: 16px;
    text-align: center;
    color: #8a94a6;
}


/* Style for the "Part-Time" tag */
.wpjobportal-layout-card.wpjobportal-cols-1 .wjportal-job-type {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}


/*===================================================================================================
========================Resume Card widget=======================================================
==================================================================================*/


/* 1. Main Widget Container */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    max-width: 480px;
    /* Constrain widget width */
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 15px;
    box-sizing: border-box;
}

/* 2. Individual Resume Row Separator */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    border-bottom: none;
    /* Remove border from the last item */
    margin-bottom: 0;
}

/* 3. Resume Box (Flexbox for Alignment) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    padding: 5px 0;
}

/* 4. Resume Photo */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    /* Prevent photo from shrinking */
    border-radius: 10px;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    /* Blue ring for emphasis */
    padding: 5px;
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-details {
    flex-grow: 1;
    /* Take up remaining space */
}

/* 6. Name and Title */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* 16px */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    /* Dark text */
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    /* Slightly smaller title */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    /* Medium gray */
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    width: 100%;
}

/* 7. Meta Information */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* 12px for meta data */
    color: var(--wpjp-body-font-color);
    /* Light gray text */
    display: flex;
    flex-wrap: wrap;
    /* Allows meta fields to wrap on very small screens */
    gap: 5px 10px;
    /* Vertical and horizontal gap between meta items */
}

.wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
}

/* Highlight specific meta data if desired (e.g., Category) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-category {
    color: var(--wpjp-body-font-color);
    /* Blue for category */

}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-posted {
    font-style: italic;
}

/* 8. View All Button */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 10px);
    /* 100% minus the widget padding */
    margin: 15px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Light gray background */
    color: #fff;
    /* Dark gray text */

}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/*===================================================================================================
========================Resume box widget=======================================================
==================================================================================*/

/* 1. Main Widget Container */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    max-width: 480px;
    /* Constrain widget width */
    width: 100%;
    background-color: #F3F4F6;
    /* Light background for the overall widget */
    border-radius: 12px;
    padding: 10px;
    /* Reduced overall padding since inner boxes will have it */
    box-sizing: border-box;
}


/* 2. Individual Resume Row Separator - Used for vertical spacing between boxes */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-row {
    padding: 10px 0;
    /* Vertical margin between boxes */
    border-bottom: none;
    /* No separator line */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (New "Box Style" Container) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    flex-direction: column;
    /* Stack photo and details vertically */
    align-items: center;
    /* Center content horizontally */
    background: #ffffff;
    padding: 20px;
    /* Internal padding for the box */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Light shadow for box depth */
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Resume Photo */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    margin-bottom: 15px;
    /* Space below the photo */
    border-radius: 10px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    padding: 5px;
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-details {
    width: 100%;
    /* Ensure details section uses full width */
    text-align: center;
    /* Center name and title */
}

/* 6. Name and Title */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name {
    margin-bottom: 5px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* 18px - slightly larger name */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW CENTER ALIGNED) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* 14px - slightly larger meta data for readability */
    color: var(--wpjp-body-font-color);
    display: flex;
    flex-direction: column;
    /* STACKED FIELDS */
    width: 100%;
    gap: 4px;
    /* Small space between stacked fields */
    text-align: center;
    /* CENTER ALIGNED TEXT */
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
    margin-top: 10px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    width: 100%;
    /* Ensure each field takes full width */
    padding: 2px 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-category {

    color: var(--wpjp-body-font-color);
    /* Use a green color for category highlight */
}


/* 8. View All Button */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 10px);
    margin: 20px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Primary blue button */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}

/*===================================================================================================
========================Resume List widget=======================================================
==================================================================================*/

/* 1. Main Widget Container */
.wpjobportal-layout-list .wpjobportal-resume-widget-multi-style-wrapper {
    width: 100%;
    background-color: #F3F4F6;
    /* Light background for the overall widget */
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}


/* 2. Individual Resume Row Separator - Used for vertical spacing between boxes */
.wpjobportal-layout-list .wpjobportal-resume-row {
    padding: 10px 0;
    /* Vertical margin between boxes */
    border-bottom: none;
    /* No separator line */

}


.wpjobportal-layout-list .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (List Item Card) */
.wpjobportal-layout-list .wpjobportal-resume-box {
    display: flex;
    flex-direction: row;
    /* Horizontal List Layout */
    align-items: flex-start;
    /* Center content vertically in the row */
    background: #ffffff;
    padding: 15px;
    /* Slightly less internal padding */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-list .wpjobportal-resume-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Resume Photo */
.wpjobportal-layout-list .wpjobportal-resume-photo {
    flex-shrink: 0;
}

.wpjobportal-layout-list .wpjobportal-resume-photo img {
    padding: 5px;
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    /* Adjusted border width */
    box-shadow: none;
    /* Removed shadow on image */
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-list .wpjobportal-resume-details {
    flex-grow: 1;
    text-align: left;
    /* Left align text */
    color: var(--wpjp-body-font-color);

}

/* 6. Name and Title */
.wpjobportal-layout-list .wpjobportal-resume-name {
    margin-bottom: 2px;
}

.wpjobportal-layout-list .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* Slightly smaller name for list view */
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpjobportal-layout-list .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-list .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    /* Smaller title */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    /* Reduced vertical spacing */
}

.wpjobportal-layout-list .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-resume-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-top: 0.75rem;
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW LEFT ALIGNED) */
.wpjobportal-layout-list .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* Smaller meta font for list */
    color: var(--wpjp-body-font-color);
    display: flex;
    flex-direction: column;
    /* Keep fields stacked for full-width info display */
    width: 100%;
    gap: 2px;
    /* Reduced space between stacked fields */
    text-align: left;
    /* LEFT ALIGNED TEXT */
    border-top: none;
    /* Removed separator dash line */
    padding-top: 0;
    margin-top: 5px;
    /* Small top margin */
}

.wpjobportal-layout-list .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    padding: 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-list .wpjobportal-resume-category {
    color: var(--wpjp-body-font-color);
    /* Use a green color for category highlight */
}

/* 8. View All Button */
.wpjobportal-layout-list .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 10px);
    margin: 20px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Primary blue button */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.wpjobportal-layout-list .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);

}


/*===================================================================================================
======================== Resume seach Widget =======================================================
==================================================================================*/

/* 1. Main Widget Container Styling (Card Effect) */
#wpjobportal_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* 2. Form Title */
.wjportal-search-mod.wjportal-form-mod h2 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    color: #1f2937;
    /* Dark gray text */
    margin-bottom: 24px;
    text-align: center;
}

/* 3. General Form Row Layout (Stacked - mobile first) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form {
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    /* Space between rows */
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Override the inline width: 100% is fine, but need to ensure it stacks */
    width: 100% /* !important*/;
    margin-bottom: 0;
    gap: 10px;
}


/* 4. Labels */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-tit {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    /* Medium gray text */
    margin-bottom: 4px;
}

/* Style the hidden/dummy title div in the button row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row .wjportal-form-tit {
    display: none;
}

/* 5. Inputs and Selects */
.wjportal-search-mod.wjportal-form-mod.wjportal-search-mod.wjportal-form-mod .wjportal-form-val {
    width: 100%;
}

.wjportal-search-mod.wjportal-form-mod .inputbox {
    box-sizing: border-box;
    /* Important for padding/border not breaking width */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

.wjportal-search-mod.wjportal-form-mod .inputbox:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 6. Buttons and Button Row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
}


.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn,
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    /* For the <a> tag button */
    box-sizing: border-box;
}

/* Primary Button (Search Resume) */
.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    /* Blue */
    color: #ffffff;
    border: none;

}

.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    /* Darker blue */

}

/* Secondary Button (Advance Search) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    background-color: #f3f4f6;
    /* Light gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn:hover {
    background-color: #e5e7eb;
    /* Darker light gray */
    color: #1f2937;
}

/* Styling for nested options for better visual hierarchy */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option {
    color: #1f2937;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="56"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="57"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="58"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="59"] {
    padding-left: 10px;
    background-color: #fefefe;
}

/*===================================================================================================
======================== Resume seach Widget =======================================================
==================================================================================*/

/* 1. Main Widget Container Styling (Card Effect) */
#wpjobportal_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* 2. Form Title */
.wjportal-search-mod.wjportal-form-mod h2 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    color: #1f2937;
    /* Dark gray text */
    margin-bottom: 24px;
    text-align: center;
}

/* 3. General Form Row Layout (Stacked - mobile first) */

.wjportal-search-mod.wjportal-form-mod .wjportal-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Override the inline width: 100% is fine, but need to ensure it stacks */
    width: 100% /* !important */;
    margin-bottom: 0;
    gap: 10px;
}


/* 4. Labels */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-tit {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    /* Medium gray text */
    margin-bottom: 4px;
}

/* Style the hidden/dummy title div in the button row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row .wjportal-form-tit {
    display: none;
}

/* 5. Inputs and Selects */
.wjportal-search-mod.wjportal-form-mod.wjportal-search-mod.wjportal-form-mod .wjportal-form-val {
    width: 100%;
}

.wjportal-search-mod.wjportal-form-mod .inputbox {
    box-sizing: border-box;
    /* Important for padding/border not breaking width */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

.wjportal-search-mod.wjportal-form-mod .inputbox:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 6. Buttons and Button Row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
}


.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn,
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    /* For the <a> tag button */
    box-sizing: border-box;
}

/* Primary Button (Search Resume) */
.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    /* Blue */
    color: #ffffff;
    border: none;

}

.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    /* Darker blue */

}

/* Secondary Button (Advance Search) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    background-color: #f3f4f6;
    /* Light gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn:hover {
    background-color: #e5e7eb;
    /* Darker light gray */
    color: #1f2937;
}

/* Styling for nested options for better visual hierarchy */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option {
    color: #1f2937;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="56"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="57"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="58"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="59"] {
    padding-left: 10px;
    background-color: #fefefe;
}

/* job by category / type widget =======================================*/
/* job by category / type widget - Flexbox Conversion */

div.wjportal-job-by-mod {
    display: inline-block;
    width: 100%;
}

div.wjportal-job-by-mod div.wjportal-job-by {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item {
    display: flex;
    padding: 10px 5px;
    justify-content: flex-start;

}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt {
    display: block;
    padding: 1.5rem;
    /* p-6 */
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);

}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt span.wjportal-job-by-item-num {
    text-align: right;
}


/* job Stats / stats =======================================*/
div#wpjobportals_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

div#wpjobportals-mod-heading {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    padding: 0 0 10px 0;
}

div#wpjobportals-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wpjobportals-value.wjportal-stats-data {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.wpjobportals-value.wjportal-stats-data:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);
}

.wjportal-job-by-loc-item {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.wjportal-job-by-loc-item:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);
}

a.wjportal-job-by-loc-item-cnt {
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

a.wjportal-job-by-loc-item-cnt:hover {
    color: var(--wpjp-primary-color);

}


/*======= Add Shees ===============*/

.wjportal-form-row.visible.js-form-custm-flds-wrp {
    display: none;
}

.wjportal-company-desc {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
}

div#job-applied-resume-wrapper.wjportal-job-applied-resume {
    position: relative;
    z-index: 9999 !important;
    width: 100%;
}

/* Show the menu when the container is focused */
/*.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-menu, .wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
}*/
div.wjportal-elegant-addon-main-up-wrapper div.wjportal-applied-job-adv-search-wrp div.wjportal-applied-job-adv-search-action-wrp {
    justify-content: center;
}

.wjportal-main-up-wrapper .wjportal-form-map {width: 600px;max-width: 100%;}
.wjportal-job-applied-actions-btn-wrp input#send,
.wjportal-main-up-wrapper input.wjportal-visitor-msg-btn,
.wjportal-main-up-wrapper .wjportal-form-btn-wrp input#save, .wjportal-main-up-wrapper input#save-comments {background-color: var(--wpjp-primary-color);color: #fff;border: 1px solid var(--wpjp-primary-color);border-radius: 8px;padding: 10px 15px;font-size: var(--wpjp-body-font-size);font-weight: 600;cursor: pointer;transition: all 0.2s ease;display:inline-flex;align-items: center;gap: 8px;text-transform: none;line-height: inherit;}

.wjportal-job-applied-actions-btn-wrp input#send:hover,
.wjportal-main-up-wrapper input.wjportal-visitor-msg-btn:hover,
.wjportal-main-up-wrapper .wjportal-form-btn-wrp input#save:hover, .wjportal-main-up-wrapper input#save-comments:hover {background-color: var(--wpjp-secondary-color);border: 1px solid var(--wpjp-secondary-color);color: #fff;text-decoration: none;}
.wjportal-featured-tag-icon-wrp .featurednew-onhover.wjportal-featured-hover-wrp{margin-left: 10px;}

@media (max-width: 1750px) {
    .wjportal-main-up-wrapper {
        max-width: 1250px !important;
    }
}

@media (max-width: 1550px) {
    .wjportal-main-up-wrapper {
        max-width: 1200px !important;
    }
}

@media (max-width: 1280px) {
    .wjportal-main-up-wrapper {
        max-width: 1080px !important;
    }
}
@media (max-width: 1080px) {
    div.wjportal-cp-content-mainwrp{
        flex-wrap: wrap;
    }
}



/* job widget css  */
/* job widget css  */
/* job widget css  */
/* job widget css  */
.wjportal-form-horizontal .wjportal-form-row {
    display: inline-block;
    vertical-align: top;
}
.wjportal-form-responsive {
    display: flex;
    flex-wrap: wrap;
}
.wjportal-form-btn-row {
    text-align: center;
}
.wjportal-form-btn i {
    font-size: 16px;
}
div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row button {float: left;padding: 7px;text-align: center;width: calc(50% - 3px);}
div.wjportal-search-mod form.wjportal-form div.wjportal-form-row div.wjportal-form-val{
    padding-right: 5px;
}


div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row .wjportal-form-tit{
    margin-bottom: 7px;
}

/* new job listing widget  */
.wpjobportal-job-widget-multi-style-wrapper {
    display: inline-block;
    width: 100%;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-1 .wpjobportal-job-box { width: 100%; }
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-2 .wpjobportal-job-box { width: calc(50% - 20px); margin: 10px;padding: 15px 0;}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-3 .wpjobportal-job-box { width: calc(33.3% - 20px); margin: 10px;padding: 15px 0;}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-4 .wpjobportal-job-box { width: calc(25% - 20px); margin: 10px;padding: 10px 0;}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-box { padding-bottom: 0px;background: #fff;padding: 20px;border-radius: 18px;}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box{
    padding-bottom: 0px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a{
    text-decoration: none;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-row {
    float: left;
    width: 100%;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
    float: left;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-box {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-box {
    width: 100%;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title{
    margin: 0px 20px 10px;
    padding: 10px 0;
    font-size: 22px;
}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-company{
    margin-bottom: 7px;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-details{
    width: 100%;
    text-align: center;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-details .wpjobportal-job-meta-col{
    font-size: 14px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo{
    width: 100%;
    text-align: center;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo a,
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo a img{
    display: inline-block;
}



.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-logo {
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-logo img {
    display: block;
    border-radius: 4px;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-logo a {
    padding: 7px;
    display: inline-block;
    overflow: hidden;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-logo img {
    display: inline-block;
    height: 90px;
    width: 90px;
    max-width: 100%;
    border-radius: 8px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-logo a {
    display: inline-block;
    overflow: hidden;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-logo img {
    padding: 10px;
    display: inline-block;
    border: 1px solid var(--wpjp-border-color);    
    max-width: 100%;
    border-radius: 10px;
}



.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-logo a {
    display: inline-block;
    overflow: hidden;
    background: transparent;
}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-logo a img {
    display: inline-block;
    min-height: 90px;
    max-width: 100%;
}

.wpjobportal-company-box .wpjobportal-company-logo a {
    padding: 5px;
    display: inline-block;
    overflow: hidden;
    margin-top: 10px;
}

.wpjobportal-company-box .wpjobportal-company-logo a img {
    display: inline-block;
    height: 90px;
    width: 90px;
    max-width: 100%;
}





.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo a {
    padding: 7px;
    display: inline-block;
    overflow: hidden;
}

/* view all jobs button  */
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-all-jb-button{
    display: inline-block;
    width: calc(100% - 20px) ;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin:15px 10px 10px;
}


/* view job button  */ 
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-jb-button{
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}

/* view company button  */ 
.wpjobportal-company-box .wpjobportal-company-grid-view-company-button{
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo img {
    display: inline-block;
    
    max-width: 100%;
}


.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details {
    overflow: hidden;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title {
    font-size: 18px;
    font-weight: bold;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-title {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-company{
    font-size: 14px;
    font-weight: 500;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-location,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-job_type,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-job_category,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-salary,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-careerlevel,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-stoppublishing,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-apply_before,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-posted {
    margin-top: 4px;
}


.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-job_type .wjportal-job-type{
    color:#fff !important;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 3px;
    width: auto;
}


.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-job_type .wjportal-job-type{
    color:#fff !important;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 3px;
    width: auto;
}


/*
.wpjobportal-layout-card .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data {
    padding:5px 10px;
    margin-bottom: 10px;
    margin-top: 0px;
    float: left;
    border:1px solid #ddd;
    margin-right: 4px;
}

*/
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-company{
margin-bottom: 10px;
}

.wpjobportal-layout-grid .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data:last-of-type {
    /* Your styles here */
    padding: 10px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.wpjobportal-company-box .wpjobportal-company-details .wpjobportal-company-field:last-of-type {
    /* Your styles here */
    padding: 10px;
    margin-bottom: 0px;
    margin-top: 10px;
}


/*.wpjobportal-layout-card .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data:last-of-type {
    margin-bottom: 10px;
}
*/

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: 14px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-col > div {
    margin-top: 4px;
    font-size: 14px;
    padding: 4px 0;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row i,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-col i {
    min-width: 16px;
}


/* resume widget wordpress  */
/* Resume widget - matching job widget styling */
.wpjobportal-resume-widget-multi-style-wrapper {
    display: inline-block;
    width: 100%;
}

/* Column layouts */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-1 .wpjobportal-resume-box { width: 100%; }
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-2 .wpjobportal-resume-box { width: calc(50% - 20px); margin: 10px; padding: 15px 0;}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-3 .wpjobportal-resume-box { width: calc(33.3% - 20px); margin: 10px; padding: 15px 0;}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-4 .wpjobportal-resume-box { width: calc(25% - 20px); margin: 10px; padding: 10px 0;}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-box { 
    padding-bottom: 0px;
}


.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-row {
    float: left;
    width: 100%;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
    float: left;
    padding: 10px;
    box-sizing: border-box;
}

/* Card layout */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-box {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* List layout */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-box {
    width: 100%;
    align-items: center;
}

/* Grid layout adjustments */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-name {
    margin: 0px 20px 0px;
    padding: 5px 0;
    font-size: 22px;
}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-title {
    margin-bottom: 10px;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-details {
    width: 100%;
    text-align: center;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-meta-col {
    font-size: 14px;
    border-top: 1px solid var(--wpjp-border-color);
    padding-top: 10px;
    margin-bottom: 10px;
}

/* Photo styling */

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-photo {
    display: flex;
}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo {
    width: 100%;
    text-align: center;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-photo img {
    display: block;
    border-radius: 4px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a{
    text-decoration: none;
}

/* Layout-specific photo styles */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-photo a {
    display: inline-block;
    overflow: hidden;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-photo img {
    display: inline-block;
    max-width: 100%;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-photo a {
    padding: 7px;
    display: inline-block;
    overflow: hidden;
    margin-left: 15px;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-photo img {
    display: inline-block;
    max-width: 100%;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo a {
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 10px;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo img {
    display: inline-block;
    max-width: 100%;
    border-radius: 10px;
    justify-content: center;
}

/* Details section */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-details {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
}
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-details .wpjobportal-resume-details-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name {
    font-size: 18px;
    font-weight: bold;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-name {
    font-size: 20px;
    margin-bottom: 5px;
    
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-name {
    font-size: 22px;
    font-weight: bold;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-title {
    font-size: 16px;
    font-weight: 500;
}

/* Meta information */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-location,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-experience,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-education,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-salary {
    
}

/* Meta row styling */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
    font-size: 14px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-col > div {
    margin-top: 4px;
    font-size: 14px;
    padding: 4px 0;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row i,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-col i {
    min-width: 16px;
}

/* View buttons */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 15px 10px 10px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: var(--wpjp-secondary-color);
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-radius: 12px;
    transition: all 0.2s;
}

/* Card layout adjustments */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-title {
    margin-bottom: 10px;
}



.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-widget-entity-view-button-wrap{
    padding: 0 15px;
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.wpjobportal-layout-grid  .wpjobportal-job-box{
    overflow: hidden;
}



.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-meta-col .wpjobportal-resume-widget-detail-field-data:last-of-type {
    margin-bottom: 10px;
}

/* company widget  */
/* Main wrapper */
.wpjobportal-companies-widget-wrapper {
    display: inline-block;
    width: 100% ;
}

/* Module heading */
.wpjobportal-companies-widget-wrapper .wjportal-mod-heading {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0073aa;
}

/* Grid layout columns */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box { width: 100%; }
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-2 .wpjobportal-company-box { width: calc(50% - 20px); margin: 10px ;}
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-3 .wpjobportal-company-box { width: calc(33.3% - 20px); margin: 10px;}
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-4 .wpjobportal-company-box { width: calc(25% - 20px); margin: 10px;}

/* Company box - shared styles */
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
.wpjobportal-companies-list-row {
    float: left;
    background: #fff;
    margin-bottom: 15px;
    padding: 15px 0 0 ;
    box-sizing: border-box;
/*    transition: all 0.3s ease;*/
}

/* Grid layout specific styles */
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box {
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-logo {
    margin-bottom: 10px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-logo img {
    display: inline-block;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title {
    margin-bottom: 10px;
    padding: 10px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title a {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-details {
    margin-top: 10px;
    font-size: 15px;
}

/* List layout specific styles */


.wpjobportal-companies-list-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px;
  flex-wrap:wrap;
}

.wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
    flex: 0 0 auto;
}

.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-logo img {
    display: block;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-title {
    flex: 1 1 auto;
}



.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-title a {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-category,
.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-location,
.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-posted {
    flex: 1 0 0;
    padding-right: 15px;
    font-size: 14px;
}
/*
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-company-field.wpjobportal-company-posted{
    margin-top: -10px;
}*/

/* Field styles - shared between layouts */


.wpjobportal-companies-list-row .wpjobportal-company-field{
    font-size: 14px;
    margin: 0;
}

.wpjobportal-company-field {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}



/* Icons */
.wpjobportal-company-field i {
    min-width: 16px;
}

.wpjobportal-companies-list-copmany-detail-wrap{
    display: flex;
    gap: 40px;
}

/* Hover effects */
.wpjobportal-companies-widget-company-row{
    display: inline-block;
    width: 100%;
}

div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row.wpjobportal-search-btn-full-width button {width: 100%;}

#wpjobportal-input-city{
    background: none !important;
    border: none !important;
}

/* widget carosel  */
.wpjobportal-slick-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    position: relative; /* Add this */
}

.wpjobportal-slick-nav-wrapper .slick-prev,
.wpjobportal-slick-nav-wrapper .slick-next {
    position: static;
    transform: none; /* Remove any transforms */
    width: auto; /* Allow buttons to size naturally */
    height: auto; /* Allow buttons to size naturally */
}

.wpjobportal-slick-nav-wrapper .slick-dots {
    display: flex !important;
    align-items: center; /* Vertically center dots */
    gap: 10px; /* Replace margin with gap for consistent spacing */
    padding: 0;
    margin: 0; /* Remove default margins */
    list-style: none;
    height: 100%; /* Take full height of wrapper */
}

.wpjobportal-slick-nav-wrapper .slick-dots li {
    margin: 0; /* Remove individual margins */
    display: flex;
    align-items: center;
}

.wpjobportal-slick-nav-wrapper .slick-dots button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    text-indent: -9999px; /* Hide text */
    overflow: hidden;
    padding: 0; /* Remove padding */
}
/* Responsive styles */
@media screen and (max-width: 768px) {
    .wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
    .wpjobportal-companies-list-header,
    .wpjobportal-companies-list-row {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .wpjobportal-companies-list-header {
        display: none;
    }

    .wpjobportal-companies-list-row {
        flex-wrap: wrap;
        padding: 15px;
    }

    .wpjobportal-companies-list-col-logo {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        padding-right: 0;
    }

    .wpjobportal-companies-list-col-title,
    .wpjobportal-companies-list-col-category,
    .wpjobportal-companies-list-col-location,
    .wpjobportal-companies-list-col-posted {
        flex: 1 0 100%;
        padding: 5px 0;
    }

    .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
        width: 100% !important;
        margin: 10px 0;
    }

    .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
        width: 100% !important;
        margin: 10px 0;
    }
}

/* color css from old   */
/* color css from old   */

/* --- Resume Widget Styles --- */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-box {
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title a:hover {
    color: var(--wpjp-primary-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row {
    color: var(--wpjp-body-font-color);
}


/* --- Job Widget Styles --- */
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-box {
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    border: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-box {
    border: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a {
    color: var(--wpjp-body-font-color);
    text-decoration: none;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a:hover {
    color: var(--wpjp-primary-color);
}

/* Grid Specific CSS */
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title a {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title a:hover {
    color: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-company a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row {
    color: var(--wpjp-body-font-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    background: var(--wpjp-card-background);
}


/* --- Companies Widget Styles --- */
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
.wpjobportal-companies-list-row {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-companies-list-col-title a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-company-field {
    color: var(--wpjp-body-font-color);
}


/* --- Footer Specific Styles --- */
#footer .wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-box {
    border-left-color: var(--wpjp-primary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row {
    color: var(--wpjp-body-font-color);
}


#footer .wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-box {
    border-left-color: var(--wpjp-primary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a:hover {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row {
    color: var(--wpjp-body-font-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    background: var(--wpjp-background-color);
}

#footer .wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
.wpjobportal-companies-list-row {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

#footer .wpjobportal-companies-grid-wrapper .wpjobportal-company-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-companies-grid-wrapper .wpjobportal-company-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-company-field {
    color: var(--wpjp-body-font-color);
}


/* --- Buttons & Forms --- */
div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row button {
    background: var(--wpjp-primary-color);
    color: #fff;
}

div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row button:hover {
    background: var(--wpjp-secondary-color);
}


/* --- Slick Slider --- */
.wpjobportal-slick-nav-wrapper .slick-next {
    background: var(--wpjp-primary-color);
    color: #fff;
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-slick-nav-wrapper .slick-next:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}
.wpjobportal-slick-nav-wrapper .slick-next:focus {
    background: var(--wpjp-primary-color);
    color: #fff;
    border-color: var(--wpjp-primary-color);
}


.wpjobportal-slick-nav-wrapper .slick-prev {
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}

.wpjobportal-slick-nav-wrapper .slick-prev:focus {
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}

.wpjobportal-slick-nav-wrapper .slick-prev:hover {
    background: var(--wpjp-primary-color);
    color: #fff;
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-slick-nav-wrapper .slick-dots .slick-active button {
    background: var(--wpjp-primary-color);
    color: #fff;
}


/* --- Job Logos & Action Buttons --- */
/*.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-logo a {
    border: 2px solid var(--wpjp-primary-color);
    color: #fff;
    background: var(--wpjp-card-background);
}*/

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-all-jb-button {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-all-jb-button:hover {
    background: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-jb-button {
    background: var(--wpjp-primary-color);
    color: #fff;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-jb-button:hover {
    background: var(--wpjp-secondary-color);
}


/* --- Company Buttons --- */
.wpjobportal-company-box .wpjobportal-company-grid-view-company-button {
    background: var(--wpjp-primary-color);
    color: #fff;
}

.wpjobportal-company-box .wpjobportal-company-grid-view-company-button:hover {
    background: var(--wpjp-secondary-color);
}

/*.wpjobportal-companies-grid-wrapper .wpjobportal-company-box {
    border-top: 4px solid var(--wpjp-primary-color);
}
*/

/* --- Meta Data & Layout Tweaks --- */
.wpjobportal-layout-grid .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data:last-of-type {
    background: var(--wpjp-background-color);
    border: 1px solid var(--wpjp-border-color);
    border-left: none;
    border-right: none;
}

.wpjobportal-company-box .wpjobportal-company-details .wpjobportal-company-field:last-of-type {
    background: var(--wpjp-background-color);
    border: 1px solid var(--wpjp-border-color);
    border-left: none;
    border-right: none;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title {
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    border-top: 4px solid var(--wpjp-primary-color);
}


/* --- Resume Grid/Card Specifics --- */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box:hover {
    transform: translateY(-6px); 
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01); 
       
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-box {
    border: 1px solid var(--wpjp-border-color);
    border-top: 4px solid var(--wpjp-primary-color);
}
.wpjobportal-companies-list-col-logo a {
    background: var(--wpjp-card-background);
}

.wpjobportal-company-box .wpjobportal-company-logo a {
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-card-background);
}



.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-photo a {
    border: 2px solid var(--wpjp-primary-color);
}

/* --- Resume Action Buttons --- */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-all-button {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-all-button:hover {
    background: var(--wpjp-primary-color);
}


.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-button:hover {
    background: var(--wpjp-primary-color);
}
.wpjobportal-carousel .wpjobportal-job-view-all-jb-button{
    display: none !important;
}
.wpjobportal-carousel .wpjobportal-resume-view-all-button{
    display: none !important;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card  {

}

.wjportal-popup-cnt{
    box-sizing: border-box;
}
.ui-datepicker{
    z-index: 1001 !important;
}
.wjportal-form-row.visible.js-form-custm-flds-wrp{
    display: none;
}
.wjportal-search-job-form .wjportal-form-row.visible.js-form-custm-flds-wrp{
    display: grid;
}
.wpjobportal-terms-and-conditions-wrap .wjportal-main-up-wrapper span.wpjobportal-form-chkbox-field{
    border:none;
}


.wjportal-popup-wrp .alert{padding: 8px 10px;width: 100%;background: #f7f7f7}
.wjportal-popup-wrp .alert img{margin-bottom: -5px}
.wjportal-popup-wrp .alert button{display: none;}
.wjportal-popup-wrp .alert.alert-danger{border: 1px solid red;}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right{
    display: flex;
    width: 25%;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: right;
    gap: 5px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-widget-detail-field-data .wpjobportal-job-widget-detail-field-data-value{
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-widget-detail-field-data.wpjobportal-job-job_type .wpjobportal-job-widget-detail-field-data-value{
color: #fff;
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-salary{
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-location{
    font-size: 0.9rem;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button-wrap{
    display: flex;
    width: 100%;
    justify-content: right;
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button{
    display: flex;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-radius: 6px;
    margin-top: 5px;
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button svg{
    width: 22px;
    height: auto;
    margin-left: 5px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button:hover{
    background: var(--wpjp-primary-color);
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title .wpjobportal-job-widget-no-of-hits{
    padding: 5px;
    border:1px solid var(--wpjp-border-color);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    font-size: 13px;
    margin-right: 15px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title .wpjobportal-job-widget-no-of-hits svg{
    display: flex;
    width: 14px;
    height: auto;


}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details-right{
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid var(--wpjp-border-color);
    padding-top: 10px;
    margin-top: 10px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button-wrap{
    width: 100%;
    border-top: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button-wrap .wpjobportal-job-details-right-view-button{
    width: 100%;
    padding: 8px 15px;
    justify-content: center;
    margin-top: 10px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details .wpjobportal-job-meta-col{
    display: flex;
    flex-direction: row;
    gap: 5px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    flex-wrap: wrap;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data{
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    /*font-size: var(--wpjp-body-font-size);*/
    font-size: 13px;
    /* 14px */
    color: var(--wpjp-body-font-color);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
    background-color:#f3f4f6;
}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-details-right .wpjobportal-job-details-right-location-salary-wrap{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
}
.wpjobportal-companies-widget-wrapper .wpjobportal-company-field{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.wpjobportal-companies-list-copmany-detailview-link-wrap{
    display: flex;
}

.wpjobportal-companies-list-copmany-detailview-link-wrap .wpjobportal-companies-list-copmany-detailview-link{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: var(--wpjp-secondary-color);
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-radius: 12px;
    transition: all 0.2s;
}
.wpjobportal-companies-list-copmany-detailview-link-wrap .wpjobportal-companies-list-copmany-detailview-link:hover{
    background: var(--wpjp-primary-color);
}

.wpjobportal-companies-list-copmany-noofjobs-wrap{
    background: #F0FDF4;
    color: #15803D;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
}

.wpjobportal-companies-list-copmany-noofjobs-wrap span.noofjobsdot{
    width: 6px;
    height: 6px;
    background: #15803D;
    border-radius: 50%;
    display: block;
}

.wpjobportal-companies-list-copmany-detailview-link-wrap .wpjobportal-companies-list-copmany-detailview-link svg{
    height: 14px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-companies-list-copmany-detailview-link-wrap{
    width: 100%;
    margin-top: 15px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box  .wpjobportal-companies-list-copmany-detail-wrap{
    flex-wrap: wrap;
    gap:0;
}



.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
    text-align: left;
    width: 100%;
    display: flex;
}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-primary-color);
    /* Same purple as login button */
    text-decoration: underline;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-companies-list-col-logo{ 
    display: flex;
    margin-top: 30px;
    z-index: 999;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box{
    padding: 15px;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-company-box-top-decoration{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background:#000 ;
    height: 100px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-company-field{
    margin-right: 10px;
}
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-companies-list-copmany-noofjobs-wrap{
    position: absolute;
    top: 33px;
    right: 33px;
    z-index: 999;

}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-grid-wrapper .wpjobportal-company-box  .wpjobportal-companies-list-col-logo a{
    border-radius: 10px;
}


/* Specific gradients for variety - Unique light pastel for each company */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(1) .wpjobportal-company-box:nth-child(1) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F4F6FF 0%, #DEE4FB 100%);}
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(1) .wpjobportal-company-box:nth-child(2) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FFF6F7 0%, #FFF0E3 100%);}
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(1) .wpjobportal-company-box:nth-child(3) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F5FEF8 0%, #CCFADD 100%);}

/* UPDATED: Airbnb - Soft Red */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(2) .wpjobportal-company-box:nth-child(1) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FFF8F8 0%, #FAD6E5 100%); } 

/* UPDATED: Microsoft - Soft Sky Blue */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(2) .wpjobportal-company-box:nth-child(2) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F6FBFF 0%, #F5DAF9 100%);}

.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(2) .wpjobportal-company-box:nth-child(3) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F3FEFF 0%, #CBFCFF 100%);}
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(3) .wpjobportal-company-box:nth-child(1) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FEF7FF 0%, #A6E6C6 100%);}

/* UPDATED: Slack - Soft Purple */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(3) .wpjobportal-company-box:nth-child(2) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FCF9FF 0%, #E2FDB8 100%); } 

.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(3) .wpjobportal-company-box:nth-child(3) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FEEFEF 0%, #FFB3B3 100%);}


.wpjobportal-companies-widget-wrapper .wpjobportal-companies-grid-wrapper .wpjobportal-company-box:hover {
    transform: translateY(-6px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01); 
            
}

/* Resume widget new style  */


.wpjobportal-layout-list .wpjobportal-resume-widget-detail-field-data{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-widget-entity-view-button-wrap{
    display: flex;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-widget-entity-view-button-wrap svg{
    height: 15px;
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box .wpjobportal-resume-details{
    width: 100%;
    justify-content: center;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-meta-col{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo{
    justify-content: center;
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-title a{
    color: var(--wpjp-body-font-color);
    text-decoration: none;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-meta-col .wpjobportal-resume-widget-detail-field-data{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.wjportal-main-up-wrapper .wpjobportal-terms-and-conditions-wrap span.wpjobportal-form-chkbox-field{
    border:none;
}

.wjportal-main-up-wrapper .js-col-md-12.js-form-wrapper.wpjobportal-terms-and-conditions-wrap{
    border:none;
}


.wjportal-main-up-wrapper .wjportal-form-upload .wjportal-form-upload-btn-wrp{
    position:relative;
}

.wjportal-main-up-wrapper .wjportal-form-upload .wjportal-form-upload-btn-wrp input[type=file]{
     position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: inline-block !important;
    cursor: pointer;
    opacity: 0;
    width: 240px;
    height: 60px;
    margin: auto;
}

/* --- WP Job Portal: Workplace Type Badges --- */

.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
    margin-left: 8px;
    margin-bottom: 10px;
}

.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* Remote Variant */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-remote {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}

/* Hybrid Variant */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-hybrid {
    background-color: #faf5ff;
    color: #a855f7;
    border-color: #a855f7;
}

/* On-site Variant */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-onsite {
    background-color: #fffbeb;
    color: #d97706;
    border-color: #d97706;
}


/* Remote Variant */
.wjportal-view-job-page-wrapper  .wpjp-badge-remote {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}

/* Hybrid Variant */
.wjportal-view-job-page-wrapper  .wpjp-badge-hybrid {
    background-color: #faf5ff;
    color: #a855f7;
    border-color: #a855f7;
}

/* On-site Variant */
.wjportal-view-job-page-wrapper  .wpjp-badge-onsite {
    background-color: #fffbeb;
    color: #d97706;
    border-color: #d97706;
}



/* Hover State */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-mode:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
       WP Job Portal - Badges & Tags (Highly Specific)
       ========================================================================== */
     .wjportal-jobs-list .wjportal-job-title.wpjp-job-title-flex {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

     .wjportal-jobs-list .wpjp-badge-new {
        background-color: var(--wpjp-success-color, #28a745);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        padding: 5px 8px;
        border-radius: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }

     .wjportal-jobs-list .wpjp-badge-urgent-flag {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--wpjp-danger-color, #dc3545);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        padding: 4px 14px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
        display: flex;
        align-items: center;
        z-index: 10;
    }

     .wjportal-jobs-list .wpjp-badge-urgent-flag svg {
        margin-right: 4px;
    }

    /* --- Clickable Job Tags (main.php) --- */
     .wpjp-job-tags-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
        width: 100%;
    }

     .wpjp-clickable-tag {
        font-size: 14px;
        padding: 1px 2px;
        /*border-radius: 4px;*/
        /*background: #eff6ff;*/
        color: var(--wpjp-primary-color, #3baeda);
        /*border: 1px solid var(--wpjp-primary-color, #e9ecef);*/
        border-bottom: 1px solid var(--wpjp-primary-color, #e9ecef);
        text-decoration: none !important;
        font-weight: 600;
        transition: all 0.2s;
    }

    .wpjp-clickable-tag:hover {
        background-color: var(--wpjp-primary-color, #3baeda);
        color: #ffffff;
    }


    .wjportal-job-company-wrp{
        position: relative;
    }

    .wjportal-job-company-wrp .wpjp-badge-urgent-flag {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--wpjp-danger-color, #dc3545);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        padding: 4px 14px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
        display: flex;
        align-items: center;
        z-index: 10;
    }

     .wjportal-job-company-wrp .wpjp-badge-urgent-flag svg {
        margin-right: 4px;
    }

    .wjportal-view-job-title-wrp .wpjp-badge-new {
        background-color: var(--wpjp-success-color, #28a745);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        padding: 5px 8px;
        border-radius: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }

    #wpjp-min-display{
        text-align: right;
    }

/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/wp-job-portal/includes/css/wpjobportalrating.css */
ul.wjportal-stars-small {height:22px;width:110px;padding:0!important;margin:0!important;}
ul.wjportal-stars li, 
ul.wjportal-stars-small li {background-position:0!important;padding:0!important;margin:0!important;}
ul.wjportal-stars-small, 
ul.wjportal-stars-small li a:hover, 
ul.wjportal-stars-small li.current-rating {background-image:url('https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/css/../images/star_small.png')!important;background-color:transparent!important;background-repeat:repeat-x!important;background-position:left -1000px;}
ul.wjportal-stars,
ul.wjportal-stars-small {background-position:left top;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0pt;overflow:hidden;padding:0pt;position:relative;}
ul.wjportal-stars li a, 
ul.wjportal-stars li.current-rating,
ul.wjportal-stars-small li a, 
ul.wjportal-stars-small li.current-rating {border:medium none;cursor:pointer;left:0pt;outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;overflow:hidden;position:absolute;text-indent: 1000px;top:0pt;}
ul.wjportal-stars-small li a, 
ul.wjportal-stars-small li.current-rating {height:22px;line-height:22px;transition: none;background-color: transparent !important;}
ul.wjportal-stars li a:hover,
ul.wjportal-stars-small li a:hover {background-position:left bottom!important;}
li a.one-star {width:20%;padding:0;margin:0;z-index:6;}
li a.two-stars {width:40%;padding:0;margin:0;z-index:5;}
li a.three-stars {width:60%;padding:0;margin:0;z-index:4;}
li a.four-stars {width:80%;padding:0;margin:0;z-index:3;}
li a.five-stars {width:100%;padding:0;margin:0;z-index:1;}

/* for admin */
ul.wpjobportal-stars-small {height:22px;width:110px;padding:0!important;margin:0!important;}
ul.wpjobportal-stars li, 
ul.wpjobportal-stars-small li {background-position:0!important;padding:0!important;margin:0!important;}
ul.wpjobportal-stars-small, 
ul.wpjobportal-stars-small li a:hover, 
ul.wpjobportal-stars-small li.current-rating {background-image:url('https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/css/../images/star_small.png')!important;background-color:transparent!important;background-repeat:repeat-x!important;background-position:left -1000px;}
ul.wpjobportal-stars,
ul.wpjobportal-stars-small {background-position:left top;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0pt;overflow:hidden;padding:0pt;position:relative;}
ul.wpjobportal-stars li a, 
ul.wpjobportal-stars li.current-rating,
ul.wpjobportal-stars-small li a, 
ul.wpjobportal-stars-small li.current-rating {border:medium none;cursor:pointer;left:0pt;outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;overflow:hidden;position:absolute;text-indent: 1000px;top:0pt;}
ul.wpjobportal-stars-small li a, 
ul.wpjobportal-stars-small li.current-rating {height:22px;line-height:22px;transition: none;}
ul.wpjobportal-stars li a:hover,
ul.wpjobportal-stars-small li a:hover {background-position:left bottom!important;}









/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen.min.css */
/* Chosen v1.4.2 | (c) 2011-2015 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md */
.chosen-container{width:100% !important;position:relative;display:inline-block;vertical-align:middle;font-size:13px;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.chosen-container *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.chosen-container .chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;width:100%;border:1px solid #aaa;border-top:0;background:#fff;box-shadow:0 4px 5px rgba(0,0,0,.15)}
.chosen-container.chosen-with-drop .chosen-drop{left:0}
.chosen-container a{cursor:pointer}
.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name{margin-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:#999}
.chosen-container .search-choice .group-name:after,
.chosen-container .chosen-single .group-name:after{content:":";padding-left:2px;vertical-align:top}
.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;padding:0 0 0 8px;height:25px;border:1px solid #aaa;border-radius:5px;background-color:#fff;background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#fff),color-stop(50%,#f6f6f6),color-stop(52%,#eee),color-stop(100%,#f4f4f4));background:-webkit-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:-moz-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:-o-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background-clip:padding-box;box-shadow:0 0 3px #fff inset,0 1px 1px rgba(0,0,0,.1);color:#444;text-decoration:none;white-space:nowrap;line-height:24px}
.chosen-container-single .chosen-default{color:#999}
.chosen-container-single .chosen-single span{display:block;overflow:hidden;margin-right:26px;text-overflow:ellipsis;white-space:nowrap}
.chosen-container-single .chosen-single-with-deselect span{margin-right:38px}
.chosen-container-single .chosen-single abbr{position:absolute;top:6px;right:26px;display:block;width:12px;height:12px;background:url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) -42px 1px no-repeat;font-size:1px}
.chosen-container-single .chosen-single abbr:hover{background-position:-42px -10px}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover{background-position:-42px -10px}
.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;width:18px;height:100%}
.chosen-container-single .chosen-single div b{display:block;width:100%;height:100%;background:url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) no-repeat 0 2px}
.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;padding:3px 4px;white-space:nowrap}
.chosen-container-single .chosen-search input[type=text]{margin:1px 0;padding:4px 20px 4px 5px;width:100%;height:auto;outline:0;border:1px solid #aaa;background:#fff url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) no-repeat 100% -20px;background:url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) no-repeat 100% -20px;font-size:1em;font-family:sans-serif;line-height:normal;border-radius:0}
.chosen-container-single .chosen-drop{margin-top:-1px;border-radius:0 0 4px 4px;background-clip:padding-box}
.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}
.chosen-container .chosen-results{color:#444;position:relative;overflow-x:hidden;overflow-y:auto;margin:0 4px 4px 0;padding:0 0 0 4px;max-height:240px;-webkit-overflow-scrolling:touch}
.chosen-container .chosen-results li{display:none;margin:0;padding:5px 6px;list-style:none;line-height:15px;word-wrap:break-word;-webkit-touch-callout:none}
.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}
.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}
.chosen-container .chosen-results li.highlighted{background-color:#3875d7;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#3875d7),color-stop(90%,#2a62bc));background-image:-webkit-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:-moz-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:-o-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:linear-gradient(#3875d7 20%,#2a62bc 90%);color:#fff}
.chosen-container .chosen-results li.no-results{color:#777;display:list-item;background:#f4f4f4}
.chosen-container .chosen-results li.group-result{display:list-item;font-weight:700;cursor:default}
.chosen-container .chosen-results li.group-option{padding-left:15px}
.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}
.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;margin:0;padding:0 5px;width:100%;height:auto!important;height:1%;border:1px solid #aaa;background-color:#fff;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(1%,#eee),color-stop(15%,#fff));background-image:-webkit-linear-gradient(#eee 1%,#fff 15%);background-image:-moz-linear-gradient(#eee 1%,#fff 15%);background-image:-o-linear-gradient(#eee 1%,#fff 15%);background-image:linear-gradient(#eee 1%,#fff 15%);cursor:text}
.chosen-container-multi .chosen-choices li{float:left;list-style:none}
.chosen-container-multi .chosen-choices li.search-field{margin:0;padding:0;white-space:nowrap}
.chosen-container-multi .chosen-choices li.search-field input[type=text]{margin:1px 0;padding:0;height:25px;outline:0;border:0!important;background:transparent!important;box-shadow:none;color:#999;font-size:100%;font-family:sans-serif;line-height:normal;border-radius:0}
.chosen-container-multi .chosen-choices li.search-choice{position:relative;margin:3px 5px 3px 0;padding:3px 20px 3px 5px;border:1px solid #aaa;max-width:100%;border-radius:3px;background-color:#eee;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-o-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-size:100% 19px;background-repeat:repeat-x;background-clip:padding-box;box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);color:#333;line-height:13px;cursor:default}
.chosen-container-multi .chosen-choices li.search-choice span{word-wrap:break-word}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:4px;right:3px;display:block;width:12px;height:12px;background:url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) -42px 1px no-repeat;font-size:1px}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover{background-position:-42px -10px}
.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-o-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);color:#666}
.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close{background-position:-42px -10px}
.chosen-container-multi .chosen-results{margin:0;padding:0}
.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}
.chosen-container-active .chosen-single{border:1px solid #5897fb;box-shadow:0 0 5px rgba(0,0,0,.3)}
.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #aaa;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#eee),color-stop(80%,#fff));background-image:-webkit-linear-gradient(#eee 20%,#fff 80%);background-image:-moz-linear-gradient(#eee 20%,#fff 80%);background-image:-o-linear-gradient(#eee 20%,#fff 80%);background-image:linear-gradient(#eee 20%,#fff 80%);box-shadow:0 1px 0 #fff inset}
.chosen-container-active.chosen-with-drop .chosen-single div{border-left:0;background:transparent}
.chosen-container-active.chosen-with-drop .chosen-single div b{background-position:-18px 2px}
.chosen-container-active .chosen-choices{border:1px solid #5897fb;box-shadow:0 0 5px rgba(0,0,0,.3)}
.chosen-container-active .chosen-choices li.search-field input[type=text]{color:#222!important}
.chosen-disabled{opacity:.5!important;cursor:default}
.chosen-disabled .chosen-single{cursor:default}
.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}
.chosen-rtl{text-align:right}
.chosen-rtl .chosen-single{overflow:visible;padding:0 8px 0 0}
.chosen-rtl .chosen-single span{margin-right:0;margin-left:26px;direction:rtl}
.chosen-rtl .chosen-single-with-deselect span{margin-left:38px}
.chosen-rtl .chosen-single div{right:auto;left:3px}
.chosen-rtl .chosen-single abbr{right:auto;left:26px}
.chosen-rtl .chosen-choices li{float:right}
.chosen-rtl .chosen-choices li.search-field input[type=text]{direction:rtl}
.chosen-rtl .chosen-choices li.search-choice{margin:3px 5px 3px 0;padding:3px 5px 3px 19px}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close{right:auto;left:4px}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,.chosen-rtl .chosen-drop{left:9999px}
.chosen-rtl.chosen-container-single .chosen-results{margin:0 0 4px 4px;padding:0 4px 0 0}
.chosen-rtl .chosen-results li.group-option{padding-right:15px;padding-left:0}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div{border-right:0}
.chosen-rtl .chosen-search input[type=text]{padding:4px 5px 4px 20px;background:#fff url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) no-repeat -30px -20px;background:url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite.png) no-repeat -30px -20px;direction:rtl}
.chosen-rtl.chosen-container-single .chosen-single div b{background-position:6px 2px}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b{background-position:-12px 2px}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:144dpi),
only screen and (min-resolution:1.5dppx){
    .chosen-rtl .chosen-search input[type=text],
    .chosen-container-single .chosen-single abbr,
    .chosen-container-single .chosen-single div b,
    .chosen-container-single .chosen-search input[type=text],
    .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
    .chosen-container .chosen-results-scroll-down span,
    .chosen-container .chosen-results-scroll-up span{background-image:url(https://corelinktenders.co.uk/wp-content/plugins/wp-job-portal/includes/js/chosen/chosen-sprite2x.png)!important;background-size:52px 37px!important;background-repeat:no-repeat!important}
}

/*FILESTART  /home/wplive/web/wp-live/wp-content/plugins/ai-engine/themes/chatgpt.css */
@charset "UTF-8";
/*
  CHATGPT THEME — SPACING, INPUT, AND SAFE-AREA DOCS

  Overview
  - ChatGPT-like styling with inline submit (no in-field absolute button on desktop).
  - Balanced spacing that feels comfortable while preserving maximum content area.

  Spacing Strategy
  - Bottom spacing is owned by the input/footer, not the shell (prevents double padding
    and tiny lingering gaps when browser toolbars hide/show). The shell applies only top/side safe areas.
  - When no footer is present, we add a consistent baseline under the input for both desktop and mobile
    via a shared mixin (symmetrical with top spacing on desktop).

  Submit Button Strategy
  - Inline button; center alignment handled by flex. No absolute positioning required here.
  - Hover effects keep the button in place (no translation adjustments needed).

  Safe Areas & Viewport
  - Use dvh (100dvh) in common fullscreen contexts; avoid hard height locks that fight the keyboard.
  - Safe-area bottom is applied only where needed (e.g., footer or input in no-footer cases).

  Important
  - Keep this documentation updated as we refine spacing, dvh, and safe-area behavior.
*/
@keyframes mwai-cursor-blink {
  0%, 49.9% {
    background: var(--mwai-terminal-active-color);
    color: var(--mwai-backgroundPrimaryColor);
  }
  50%, 100% {
    background: transparent;
    color: var(--mwai-terminal-active-color);
  }
}
.mwai-context-menu-portal .mwai-context-menu {
  background: var(--mwai-backgroundHeaderColor);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--mwai-borderRadius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  color: var(--mwai-fontColor);
}
.mwai-context-menu-portal .mwai-context-menu .mwai-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.mwai-context-menu-portal .mwai-context-menu .mwai-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.mwai-context-menu-portal .mwai-context-menu .mwai-menu-item.mwai-danger {
  color: #dc3545;
}
.mwai-context-menu-portal .mwai-context-menu .mwai-menu-item.mwai-danger:hover {
  background-color: rgba(220, 53, 69, 0.1);
}
.mwai-context-menu-portal .mwai-context-menu .mwai-menu-item svg {
  flex-shrink: 0;
}

.mwai-chunks {
  padding: 8px;
  background: rgba(0, 0, 0, 0.03);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.mwai-chunks.mwai-chunks-collapsed .mwai-chunks-header {
  margin-bottom: 0 !important;
}
.mwai-chunks .mwai-chunks-header {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  color: #6b7280;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mwai-chunks .mwai-chunks-header .mwai-chunks-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mwai-chunks .mwai-chunks-header .mwai-chunks-status {
  margin-left: 4px;
  font-weight: 500;
}
.mwai-chunks .mwai-chunks-header .mwai-chunks-toggle {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 2px;
  width: 30px;
  height: 20px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: 4px;
}
.mwai-chunks .mwai-chunks-header .mwai-chunks-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}
.mwai-chunks .mwai-chunk {
  margin-bottom: 4px;
  padding: 6px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}
.mwai-chunks .mwai-chunk .mwai-chunk-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-time {
  color: #9ca3af;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-type {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  color: white;
}
.mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-data {
  flex: 1;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-expand {
  color: #9ca3af;
  transition: transform 0.2s ease;
}
.mwai-chunks .mwai-chunk .mwai-chunk-details {
  margin-top: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 3px;
  overflow-x: auto;
}
.mwai-chunks .mwai-chunk .mwai-chunk-details pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #4b5563;
}

/*
  CHATGPT THEME — SPACING, INPUT, AND SAFE-AREA DOCS

  Overview
  - ChatGPT-like styling with inline submit (no in-field absolute button on desktop).
  - Balanced spacing that feels comfortable while preserving maximum content area.

  Spacing Strategy
  - Bottom spacing is owned by the input/footer, not the shell (prevents double padding
    and tiny lingering gaps when browser toolbars hide/show). The shell applies only top/side safe areas.
  - When no footer is present, we add a consistent baseline under the input for both desktop and mobile
    via a shared mixin (symmetrical with top spacing on desktop).

  Submit Button Strategy
  - Inline button; center alignment handled by flex. No absolute positioning required here.
  - Hover effects keep the button in place (no translation adjustments needed).

  Safe Areas & Viewport
  - Use dvh (100dvh) in common fullscreen contexts; avoid hard height locks that fight the keyboard.
  - Safe-area bottom is applied only where needed (e.g., footer or input in no-footer cases).

  Important
  - Keep this documentation updated as we refine spacing, dvh, and safe-area behavior.
*/
@keyframes mwaiIconTextZoomIn {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes mwaiIconTextSlideIn {
  0% {
    transform: translateY(28px);
    opacity: 0;
  }
  70% {
    transform: translateY(-3px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mwaiIconTextSlideUp {
  0% {
    transform: translateY(24px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mwaiIconTextFadeOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mwaiIconTextFadeTransform {
  0% {
    transform: translateY(8px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.mwai-chatgpt-theme {
  font-family: var(--mwai-fontFamily, inherit);
  --mwai-spacing: 15px;
  --mwai-fontSize: 15px;
  --mwai-lineHeight: 1.5;
  --mwai-borderRadius: 10px;
  --mwai-borderColor: #4f4f4f32;
  --mwai-width: 460px;
  --mwai-maxHeight: 40vh;
  --mwai-iconTextColor: white;
  --mwai-iconTextBackgroundColor: #212121;
  --mwai-fontColor: #ECECEC;
  --mwai-backgroundPrimaryColor: #2f2f2f;
  --mwai-backgroundHeaderColor: #212121;
  --mwai-bubbleColor: #212121;
  --mwai-iconSize: 60px;
  --mwai-accentColor: #0d7df2;
  --mwai-headerColor: #ECECEC;
  --mwai-conversationsBackgroundColor: #171717;
  --mwai-conversationsTextColor: #ECECEC;
  --mwai-backgroundSecondaryColor: #212121;
  --mwai-errorBackgroundColor: #6d2f2a;
  --mwai-errorTextColor: #FFFFFF;
}
.mwai-chatgpt-theme * {
  box-sizing: border-box;
}
.mwai-chatgpt-theme .mwai-body {
  background: var(--mwai-backgroundSecondaryColor);
  color: var(--mwai-fontColor);
  font-size: var(--mwai-fontSize);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--mwai-borderRadius);
  position: relative;
}
.mwai-chatgpt-theme .mwai-drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(33, 33, 33, 0.95);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mwai-borderRadius);
  pointer-events: none;
}
.mwai-chatgpt-theme .mwai-drag-overlay .mwai-drag-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
}
.mwai-chatgpt-theme .mwai-drag-overlay .mwai-drag-overlay-icons {
  display: flex;
  gap: 8px;
  color: var(--mwai-accentColor);
}
.mwai-chatgpt-theme .mwai-drag-overlay .mwai-drag-overlay-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--mwai-fontColor);
}
.mwai-chatgpt-theme .mwai-drag-overlay .mwai-drag-overlay-subtitle {
  font-size: 12px;
  color: var(--mwai-fontColor);
  opacity: 0.7;
  text-align: center;
}
.mwai-chatgpt-theme .mwai-drag-overlay.mwai-blocked .mwai-drag-overlay-icons {
  color: #ef4444;
}
.mwai-chatgpt-theme .mwai-drag-overlay.mwai-blocked .mwai-drag-overlay-title {
  color: #ef4444;
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-name {
  color: var(--mwai-headerColor);
  font-size: var(--mwai-fontSize);
}
.mwai-chatgpt-theme .mwai-shortcuts {
  display: flex;
  justify-content: center;
  margin: var(--mwai-spacing);
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut {
  margin-right: calc(var(--mwai-spacing) / 2);
  display: flex;
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut.mwai-success {
  color: #4caf50;
  border: 1px solid #4caf50;
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut.mwai-danger {
  color: #f44336;
  border: 1px solid #f44336;
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut.mwai-warning {
  color: #ff9800;
  border: 1px solid #ff9800;
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut.mwai-info {
  color: #2196f3;
  border: 1px solid #2196f3;
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut .mwai-icon {
  margin-right: 5px;
}
.mwai-chatgpt-theme .mwai-shortcuts .mwai-shortcut .mwai-icon img {
  max-height: 16px;
  width: auto;
}
.mwai-chatgpt-theme .mwai-blocks {
  display: flex;
  flex-direction: column;
  padding: var(--mwai-spacing);
}
.mwai-chatgpt-theme .mwai-blocks .mwai-block p:first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme .mwai-blocks button {
  cursor: pointer;
}
.mwai-chatgpt-theme .mwai-conversation {
  overflow: auto;
  flex: 1 1 auto;
  max-height: var(--mwai-maxHeight);
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.05);
}
.mwai-chatgpt-theme .mwai-conversation::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.mwai-chatgpt-theme .mwai-conversation::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.mwai-chatgpt-theme .mwai-conversation::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  transition: background 0.2s ease;
}
.mwai-chatgpt-theme .mwai-conversation::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.mwai-chatgpt-theme .mwai-conversation::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.3);
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line {
  line-height: 1.5;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line.mwai-terminal-user .mwai-terminal-prompt {
  opacity: 0.95;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line.mwai-terminal-user .mwai-terminal-text {
  opacity: 0.98;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line.mwai-terminal-system {
  opacity: 0.75;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line .mwai-terminal-prompt {
  color: var(--mwai-headerColor);
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line .mwai-terminal-text {
  flex: 1;
  opacity: 0.92;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line .mwai-terminal-text .mwai-image {
  max-width: 100%;
  height: auto;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line .mwai-terminal-text pre {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px;
  border-radius: 4px;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line .mwai-terminal-text code {
  font-family: inherit;
}
.mwai-chatgpt-theme .mwai-conversation.mwai-terminal .mwai-terminal-line .mwai-terminal-typed {
  white-space: pre-wrap;
}
.mwai-chatgpt-theme .mwai-reply {
  display: flex;
  padding: var(--mwai-spacing);
  position: relative;
  line-height: var(--mwai-lineHeight);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}
.mwai-chatgpt-theme .mwai-reply.mwai-fade-out {
  opacity: 0;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user {
  display: block;
  background: transparent;
  text-align: right;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-name {
  display: none;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
  max-width: 70%;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images .mwai-user-image {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: var(--mwai-borderRadius);
  object-fit: contain;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) .mwai-user-image {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--mwai-borderRadius);
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) .mwai-user-image:nth-child(1) {
  border-top-left-radius: var(--mwai-borderRadius);
  border-top-right-radius: 4px;
  border-bottom-left-radius: var(--mwai-borderRadius);
  border-bottom-right-radius: 4px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) .mwai-user-image:nth-child(2) {
  border-top-left-radius: 4px;
  border-top-right-radius: var(--mwai-borderRadius);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text {
  display: inline-block;
  text-align: left;
  max-width: 70%;
  background: var(--mwai-accentColor);
  padding: 10px 16px;
  border-radius: 20px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai {
  align-items: flex-start;
  background: transparent;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai:has(.mwai-name-text) {
  flex-direction: column;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-name .mwai-name-text {
  display: block;
  font-size: 0.75em;
  font-weight: 600;
  opacity: 0.6;
  margin-bottom: 4px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text {
  max-width: 100%;
}
.mwai-chatgpt-theme .mwai-reply.mwai-error {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-reply .mwai-name {
  color: var(--mwai-fontColor);
  margin-right: 5px;
}
.mwai-chatgpt-theme .mwai-reply .mwai-name .mwai-name-text {
  opacity: 0.5;
  white-space: nowrap;
}
.mwai-chatgpt-theme .mwai-reply .mwai-name .mwai-avatar {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
}
.mwai-chatgpt-theme .mwai-reply .mwai-name .mwai-avatar img {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.mwai-chatgpt-theme .mwai-reply .mwai-name .mwai-avatar.mwai-svg img {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  filter: brightness(0) invert(1);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text {
  flex: auto;
  font-size: var(--mwai-fontSize);
  line-height: var(--mwai-lineHeight);
  color: var(--mwai-fontColor);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text .mwai-image {
  display: block;
  max-width: 250px;
  height: auto;
  margin: 0 0 10px 0;
  border-radius: var(--mwai-borderRadius);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text .mwai-filename {
  display: flex;
  text-decoration: none;
  border: 1px solid var(--mwai-backgroundPrimaryColor);
  border-radius: var(--mwai-borderRadius);
  padding: 5px 10px;
  margin-bottom: 10px;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text * {
  font-size: var(--mwai-fontSize);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text > span > *:first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text > span > *:last-child {
  margin-bottom: 0;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text a {
  color: #2196f3;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h1, .mwai-chatgpt-theme .mwai-reply .mwai-text h2, .mwai-chatgpt-theme .mwai-reply .mwai-text h3, .mwai-chatgpt-theme .mwai-reply .mwai-text h4, .mwai-chatgpt-theme .mwai-reply .mwai-text h5, .mwai-chatgpt-theme .mwai-reply .mwai-text h6 {
  color: var(--mwai-fontColor);
  margin: 0px;
  line-height: 1.2;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h1 {
  font-size: 150%;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h2 {
  font-size: 130%;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h3 {
  font-size: 115%;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h4 {
  font-size: 105%;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h5 {
  font-size: 100%;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text h6 {
  font-size: 95%;
  font-weight: bold;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text p code {
  background: var(--mwai-backgroundSecondaryColor);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 90%;
  font-family: system-ui;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text pre {
  color: var(--mwai-fontColor);
  border-radius: var(--mwai-borderRadius);
  padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
  break-after: auto;
  white-space: pre-wrap;
  font-size: 95%;
  max-width: 100%;
  width: 100%;
  font-family: system-ui;
  background: hsl(0 0% 0% / 30%);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text pre code {
  padding: 0 !important;
  font-family: system-ui;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text ul, .mwai-chatgpt-theme .mwai-reply .mwai-text ol {
  padding: 0;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text ul {
  list-style: disc;
  margin: 0 0 0 15px;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text ol {
  list-style: decimal;
  margin: 0 0 0 15px;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text table {
  width: 100%;
  border: 2px solid var(--mwai-backgroundSecondaryColor);
  border-collapse: collapse;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text thead {
  background: var(--mwai-backgroundSecondaryColor);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text tr, .mwai-chatgpt-theme .mwai-reply .mwai-text td {
  padding: 2px 5px;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text td {
  border: 2px solid var(--mwai-backgroundSecondaryColor);
}
.mwai-chatgpt-theme .mwai-reply .mwai-text .mwai-typewriter {
  display: inline-block;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text .mwai-typewriter > :first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme .mwai-reply .mwai-text > *:last-child {
  margin-bottom: 0;
}
.mwai-chatgpt-theme .mwai-reply.mwai-system {
  background: var(--mwai-errorBackgroundColor);
  color: var(--mwai-errorFontColor);
}
.mwai-chatgpt-theme .mwai-reply.mwai-system .mwai-name {
  display: none;
}
.mwai-chatgpt-theme .mwai-reply.mwai-error {
  border-top: 1px dashed #ff5656;
  border-bottom: 1px dashed #ff5656;
}
.mwai-chatgpt-theme .mwai-input {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 6px 5px 4px !important;
  margin: var(--mwai-spacing);
  background: var(--mwai-backgroundPrimaryColor);
  border: 1px solid var(--mwai-borderColor);
  border-radius: 26px;
  position: relative;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text {
  flex: auto;
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--mwai-borderRadius);
  background: transparent;
  border: none;
  padding: 0;
  align-items: flex-end;
  gap: 4px;
  border-radius: 0;
  overflow: visible;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text.mwai-blocked {
  background: var(--mwai-errorBackgroundColor);
  border-radius: 16px;
  padding: 4px 8px;
  margin: -4px -8px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text.mwai-dragging {
  filter: brightness(1.2);
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text textarea {
  background: transparent;
  color: var(--mwai-fontColor);
  flex: auto;
  border: none;
  font-size: var(--mwai-fontSize);
  resize: none;
  font-family: inherit;
  margin: 0;
  overflow: hidden;
  min-height: inherit;
  padding: 6px 4px;
  margin: 0 !important;
  line-height: 1.4;
  min-height: unset;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text textarea:focus {
  outline: none;
  box-shadow: none;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text textarea:focus {
  outline: none;
  box-shadow: none;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text textarea::placeholder {
  color: var(--mwai-fontColor);
  opacity: 0.5;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone svg {
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.3s ease-out;
  cursor: pointer;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone[active=true] svg {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone[disabled] svg {
  opacity: 0;
  cursor: not-allowed;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone svg {
  color: var(--mwai-fontColor);
  opacity: 0.7;
  width: 18px;
  height: 18px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone:hover {
  background: rgba(255, 255, 255, 0.1);
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-microphone:hover svg {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide) {
  background: url(https://corelinktenders.co.uk/wp-content/plugins/ai-engine/themes/icons/dark-icons.svg);
  background-size: 500%;
  background-position: 0px -96px;
  width: 32px;
  height: 32px;
  z-index: 100;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-idle-add {
  background-position: -32px -96px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-image-add {
  background-position: -32px 0px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-image-up {
  background-position: -64px 0px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-image-del {
  background-position: -96px 0px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-image-ok {
  background-position: -128px 0px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-document-add {
  background-position: -32px -64px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-document-up {
  background-position: -64px -64px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-document-del {
  background-position: -96px -64px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide).mwai-document-ok {
  background-position: -128px -64px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload-icon:not(.mwai-lucide) .mwai-file-upload-progress {
  position: absolute;
  font-size: 8px;
  width: 21px;
  top: 24px;
  left: 23px;
  overflow: hidden;
  text-align: center;
  font-weight: bold;
  color: white;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload {
  flex-shrink: 0;
  order: -1;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload svg {
  color: var(--mwai-fontColor);
  opacity: 0.7;
  width: 18px;
  height: 18px;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload:hover {
  background: rgba(255, 255, 255, 0.1);
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload:hover svg {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file {
  background: var(--mwai-accentColor);
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file svg {
  color: white;
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file .mwai-icon-check {
  display: block;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file .mwai-icon-x {
  display: none;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload:hover .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file {
  background: #c53030;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload:hover .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file .mwai-icon-check {
  display: none;
}
.mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload:hover .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload.mwai-has-file .mwai-icon-x {
  display: block;
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit svg {
  width: 18px;
  height: 18px;
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-has-content {
  background: var(--mwai-accentColor);
  color: white;
  cursor: pointer;
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-has-content:hover {
  filter: brightness(1.15);
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy {
  width: auto;
  min-width: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  cursor: wait;
  gap: 6px;
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy .mwai-timer {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit:disabled:not(.mwai-has-content) {
  cursor: not-allowed;
}
.mwai-chatgpt-theme .mwai-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--mwai-spacing) 0 var(--mwai-spacing);
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview {
  background: var(--mwai-backgroundPrimaryColor);
  border: 1px solid var(--mwai-borderColor);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-thumbnail {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mwai-fontColor);
  opacity: 0.7;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-info {
  flex: 1;
  min-width: 0;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-info .mwai-file-name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-info .mwai-file-size {
  font-size: 10px;
  opacity: 0.6;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-remove {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mwai-fontColor);
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-remove:hover {
  opacity: 1;
  color: #ef4444;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-remove svg {
  width: 16px;
  height: 16px;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-progress .mwai-file-progress-bar {
  height: 100%;
  background: var(--mwai-accentColor);
  transition: width 0.2s ease;
}
.mwai-chatgpt-theme .mwai-compliance {
  opacity: 0.5;
  /* Remove negative margin that pushed footer/content up when input is none */
  margin-top: 0;
  padding: calc(var(--mwai-spacing) / 1.5) var(--mwai-spacing);
  font-size: smaller;
  color: var(--mwai-fontColor);
  text-align: left;
}
.mwai-chatgpt-theme .mwai-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}
.mwai-chatgpt-theme .mwai-gallery img {
  width: 100%;
}
.mwai-chatgpt-theme button {
  color: var(--mwai-fontColor);
  background: var(--mwai-backgroundSecondaryColor);
  border: 1px solid var(--mwai-borderColor);
  padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
  min-width: 70px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--mwai-fontSize) * 0.9);
  position: relative;
}
.mwai-chatgpt-theme button .mwai-timer {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 11px;
}
.mwai-chatgpt-theme button:hover {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme button[disabled] {
  cursor: not-allowed;
}
.mwai-chatgpt-theme button[disabled] span {
  opacity: 0.5;
}
.mwai-chatgpt-theme button[disabled].mwai-busy span {
  display: none;
}
.mwai-chatgpt-theme button[disabled].mwai-busy:before {
  content: "";
  width: 18px;
  height: 18px;
  margin: auto;
  border: 3px solid transparent;
  border-top-color: var(--mwai-fontColor);
  border-radius: 50%;
  animation: mwai-button-spinner 1s ease infinite;
}
.mwai-chatgpt-theme.mwai-form-container {
  padding: var(--mwai-spacing);
  font-size: var(--mwai-fontSize);
  color: var(--mwai-fontColor);
  background: var(--mwai-backgroundSecondaryColor);
  border-radius: var(--mwai-borderRadius);
}
.mwai-chatgpt-theme.mwai-form-container fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.mwai-chatgpt-theme.mwai-form-container fieldset input[type=text], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=email], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=tel], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=url], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=password], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=number], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=date], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=datetime], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=datetime-local], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=month], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=search], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=time], .mwai-chatgpt-theme.mwai-form-container fieldset input[type=week], .mwai-chatgpt-theme.mwai-form-container fieldset select, .mwai-chatgpt-theme.mwai-form-container fieldset textarea {
  padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
  border: 0;
  width: 100%;
  border-radius: var(--mwai-borderRadius);
  font-size: var(--mwai-fontSize);
  background: var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
}
.mwai-chatgpt-theme.mwai-form-container fieldset select {
  padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
  border: 0;
  width: 100%;
  border-radius: var(--mwai-borderRadius);
  font-size: var(--mwai-fontSize);
  background: var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
}
.mwai-chatgpt-theme.mwai-form-container fieldset textarea {
  padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
  border: 0;
  width: 100%;
  border-radius: var(--mwai-borderRadius);
  font-family: inherit;
  font-size: var(--mwai-fontSize);
  background: var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
}
.mwai-chatgpt-theme.mwai-form-container fieldset input[disabled], .mwai-chatgpt-theme.mwai-form-container fieldset select[disabled], .mwai-chatgpt-theme.mwai-form-container fieldset textarea[disabled] {
  opacity: 0.25;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-submit button, .mwai-chatgpt-theme.mwai-form-container .mwai-form-reset button {
  height: 45px;
  background: none;
  width: 100%;
  color: var(--mwai-fontColor);
  font-size: var(--mwai-fontSize);
  background-color: var(--mwai-backgroundSecondaryColor);
  border: 1px solid var(--mwai-backgroundPrimaryColor);
  border-radius: var(--mwai-borderRadius);
  cursor: pointer;
  transition: all 0.2s ease-out;
  position: relative;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-submit button:hover, .mwai-chatgpt-theme.mwai-form-container .mwai-form-reset button:hover {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-submit button[disabled] span, .mwai-chatgpt-theme.mwai-form-container .mwai-form-reset button[disabled] span {
  opacity: 0.25;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-submit button[disabled]:hover, .mwai-chatgpt-theme.mwai-form-container .mwai-form-reset button[disabled]:hover {
  background: none;
  cursor: not-allowed;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-submit.mwai-loading button span, .mwai-chatgpt-theme.mwai-form-container .mwai-form-reset.mwai-loading button span {
  opacity: 0;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-submit.mwai-loading button::after, .mwai-chatgpt-theme.mwai-form-container .mwai-form-reset.mwai-loading button::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid transparent;
  border-top-color: var(--mwai-fontColor);
  border-radius: 50%;
  animation: mwai-button-spinner 1s ease infinite;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output {
  font-size: var(--mwai-fontSize);
  position: relative;
  margin-top: var(--mwai-spacing);
  padding: var(--mwai-spacing);
  border: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output.mwai-error {
  background: var(--mwai-errorBackgroundColor);
  color: var(--mwai-errorFontColor);
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output > *:first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output > *:last-child {
  margin-bottom: 0;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output img {
  max-width: 33%;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output div > *:first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output div > *:last-child {
  margin-bottom: 0;
}
.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container.mwai-has-content {
  display: block;
}
.mwai-chatgpt-theme.mwai-form-container .wp-block-columns {
  margin: 0;
}
.mwai-chatgpt-theme .mwai-chunks {
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunks-header {
  color: #9ca3af;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-time {
  color: #6b7280;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-data {
  color: #e5e7eb;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-expand {
  color: #6b7280;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-details {
  background: rgba(0, 0, 0, 0.2);
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-details pre {
  color: #d1d5db;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window {
  filter: none;
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-window-box {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15));
  opacity: 0;
  transform: scale(0.5);
  transform-origin: bottom right;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-fullscreen .mwai-window-box {
  width: 100%;
  height: 100%;
}
@media (min-width: 761px) {
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-opening .mwai-header {
    display: flex !important;
  }
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-opening .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-opening .mwai-body {
  display: flex !important;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-opening .mwai-window-box {
  opacity: 1;
  transform: scale(0.92);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-open .mwai-window-box {
  opacity: 1;
  transform: scale(1);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-closing .mwai-window-box {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1), transform 180ms cubic-bezier(0.4, 0, 1, 1);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-closing.mwai-open .mwai-trigger .mwai-icon-container {
  transform: scale(1);
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-bottom-right .mwai-window-box {
  transform-origin: calc(100% - 32px) calc(100% - 32px);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-bottom-left .mwai-window-box {
  transform-origin: 32px calc(100% - 32px);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-top-right .mwai-window-box {
  transform-origin: calc(100% - 32px) 32px;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-top-left .mwai-window-box {
  transform-origin: 32px 32px;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-center-open .mwai-window-box {
  transform-origin: center center;
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-open .mwai-window-box {
    transform-origin: center center !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-header {
    display: none !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-trigger {
    position: fixed !important;
    z-index: 9999 !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-bottom-right .mwai-trigger {
    bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-bottom-left .mwai-trigger {
    bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-top-right .mwai-trigger {
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-top-left .mwai-trigger {
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-open:not(.mwai-closing) .mwai-trigger {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-trigger .mwai-icon-container {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-trigger .mwai-icon-container .mwai-icon {
  transition: transform 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-trigger .mwai-icon-container:hover .mwai-icon {
  transform: scale(1.1);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window .mwai-trigger .mwai-icon-container:active .mwai-icon {
  transform: scale(0.9);
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-opening .mwai-trigger .mwai-icon-container {
  transform: scale(0.8);
  opacity: 0.3;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-open:not(.mwai-opening) .mwai-trigger {
  display: none;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window.mwai-center-open.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text-container {
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
  will-change: transform, opacity;
  transform: none;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger.mwai-bottom-right .mwai-icon-text {
  transform-origin: right bottom;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger.mwai-bottom-left .mwai-icon-text {
  transform-origin: left bottom;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger.mwai-top-right .mwai-icon-text {
  transform-origin: right top;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger.mwai-top-left .mwai-icon-text {
  transform-origin: left top;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger.mwai-center-open .mwai-icon-text {
  transform-origin: center center;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
  animation: mwaiIconTextZoomIn 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms 1 both;
}
.mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger:hover .mwai-icon-text {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
    animation: none !important;
    transform: none !important;
  }
  .mwai-chatgpt-theme.mwai-animation-zoom.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text-container {
    opacity: 1 !important;
    transition: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window {
  filter: none;
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-window-box {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 -5px 20px rgba(0, 0, 0, 0.15));
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 250ms ease-out, transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-fullscreen .mwai-window-box {
  width: 100%;
  height: 100%;
}
@media (min-width: 761px) {
  .mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-opening .mwai-header {
    display: flex !important;
  }
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-opening .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-opening .mwai-body {
  display: flex !important;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-opening .mwai-window-box {
  opacity: 0.5;
  transform: translateY(20px);
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-open .mwai-window-box {
  opacity: 1;
  transform: translateY(0);
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-closing .mwai-window-box {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-trigger .mwai-icon-container {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-trigger .mwai-icon-container .mwai-icon {
  transition: transform 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-trigger .mwai-icon-container:hover .mwai-icon {
  transform: scale(1.1);
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window .mwai-trigger .mwai-icon-container:active .mwai-icon {
  transform: scale(0.9);
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-opening .mwai-trigger .mwai-icon-container {
  opacity: 0;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-center-open.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-window-dragging.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window.mwai-open:not(.mwai-opening) .mwai-trigger {
  display: none;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text-container {
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
  will-change: transform, opacity;
  transform: none;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
  animation: mwaiIconTextSlideUp 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms 1 both;
  backface-visibility: hidden;
}
.mwai-chatgpt-theme.mwai-animation-slide.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger:hover .mwai-icon-text {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .mwai-chatgpt-theme.mwai-animation-slide.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
    animation: none !important;
    transform: none !important;
  }
  .mwai-chatgpt-theme.mwai-animation-slide.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text-container {
    opacity: 1 !important;
    transition: none !important;
  }
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-window-box {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15));
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: center bottom;
  will-change: opacity, transform;
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-fullscreen .mwai-window-box {
  width: 100%;
  height: 100%;
}
@media (min-width: 761px) {
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-header {
    display: flex !important;
  }
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-body {
  display: flex !important;
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-header {
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-window-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-open .mwai-header, .mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-open .mwai-body {
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-open .mwai-window-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-closing .mwai-window-box {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 160ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-window-box {
    transition: opacity 120ms linear !important;
    transform: none !important;
  }
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-window-box, .mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-open .mwai-window-box {
    opacity: 1;
  }
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-closing .mwai-window-box {
    opacity: 0;
  }
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-header {
    display: none !important;
  }
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-trigger .mwai-icon-container {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-trigger .mwai-icon-container .mwai-icon {
  transition: transform 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-trigger .mwai-icon-container:hover .mwai-icon {
  transform: scale(1.1);
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window .mwai-trigger .mwai-icon-container:active .mwai-icon {
  transform: scale(0.9);
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-opening .mwai-trigger .mwai-icon-container {
  opacity: 0;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-center-open.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-window-dragging.mwai-closing .mwai-trigger {
  display: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window.mwai-open:not(.mwai-opening) .mwai-trigger {
  display: none;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text-container {
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
  will-change: transform, opacity;
  transform: none;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
  animation: mwaiIconTextFadeOpacity 180ms ease-out 0ms 1 both, mwaiIconTextFadeTransform 220ms cubic-bezier(0.2, 0, 0, 1) 0ms 1 both;
}
.mwai-chatgpt-theme.mwai-animation-fade.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger:hover .mwai-icon-text {
  transform: scale(1.01);
}
@media (prefers-reduced-motion: reduce) {
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text {
    animation: none !important;
    transform: none !important;
  }
  .mwai-chatgpt-theme.mwai-animation-fade.mwai-window:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) .mwai-trigger .mwai-icon-text-container {
    opacity: 1 !important;
    transition: none !important;
  }
}
.mwai-chatgpt-theme:not(.mwai-animation-zoom):not(.mwai-animation-slide):not(.mwai-animation-fade).mwai-window .mwai-window-box {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}
.mwai-chatgpt-theme:not(.mwai-animation-zoom):not(.mwai-animation-slide):not(.mwai-animation-fade).mwai-window .mwai-trigger .mwai-icon-text-container {
  opacity: 1 !important;
  transition: none !important;
}
.mwai-chatgpt-theme:not(.mwai-animation-zoom):not(.mwai-animation-slide):not(.mwai-animation-fade).mwai-window .mwai-trigger .mwai-icon-text {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.mwai-chatgpt-theme:not(.mwai-animation-zoom):not(.mwai-animation-slide):not(.mwai-animation-fade).mwai-window.mwai-fullscreen .mwai-window-box {
  width: 100%;
  height: 100%;
}

.mwai-chatgpt-theme .mwai-footer {
  display: flex;
  align-items: center;
  background: var(--mwai-backgroundAiColor, var(--mwai-backgroundSecondaryColor));
  border-top: 1px solid var(--mwai-backgroundPrimaryColor);
  padding: 6px var(--mwai-spacing);
}
.mwai-chatgpt-theme .mwai-footer:empty {
  display: none;
}
.mwai-chatgpt-theme .mwai-footer:not(:has(.mwai-tools)):has(.mwai-compliance:empty) {
  display: none;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: calc(var(--mwai-spacing) / 2);
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload {
  display: inline-block;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 16px;
  height: 16px;
  color: var(--mwai-fontColor);
  opacity: 0.75;
  margin: 0;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide:hover {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide svg {
  width: 16px;
  height: 16px;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide .mwai-upload-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--mwai-backgroundHeaderColor);
  color: #fff;
  border: 2px solid var(--mwai-backgroundAiColor, var(--mwai-backgroundSecondaryColor));
  font-size: 8px;
  font-family: system-ui;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide .mwai-upload-count::after {
  content: attr(data-count);
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools .mwai-file-upload-icon.mwai-lucide.mwai-hover .mwai-upload-count::after {
  content: "-";
}
.mwai-chatgpt-theme .mwai-footer .mwai-compliance {
  opacity: 0.5;
  font-size: 11px;
  line-height: 11px;
  color: var(--mwai-fontColor);
  flex: 1;
  text-align: left;
  padding: calc(var(--mwai-spacing) / 2) 0;
  margin: 0;
}
.mwai-chatgpt-theme .mwai-footer .mwai-tools + .mwai-compliance {
  text-align: right;
}
.mwai-chatgpt-theme .mwai-body:not(:has(~ .mwai-footer)):not(:has(+ .mwai-footer)) .mwai-input, .mwai-chatgpt-theme .mwai-body:last-child .mwai-input {
  padding-bottom: var(--mwai-spacing);
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme .mwai-body:not(:has(~ .mwai-footer)):not(:has(+ .mwai-footer)) .mwai-input, .mwai-chatgpt-theme .mwai-body:last-child .mwai-input {
    padding-bottom: var(--mwai-spacing);
  }
}

.mwai-chatgpt-theme .mwai-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--mwai-spacing);
  background: var(--mwai-backgroundSecondaryColor);
  border-top: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-files::-webkit-scrollbar {
  width: 6px;
}
.mwai-chatgpt-theme .mwai-files::-webkit-scrollbar-track {
  background: var(--mwai-backgroundPrimaryColor);
  border-radius: 3px;
}
.mwai-chatgpt-theme .mwai-files::-webkit-scrollbar-thumb {
  background: var(--mwai-backgroundHeaderColor);
  border-radius: 3px;
}
.mwai-chatgpt-theme .mwai-files::-webkit-scrollbar-thumb:hover {
  background: var(--mwai-primaryColor);
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview {
  position: relative;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-thumbnail {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--mwai-backgroundHeaderColor);
  display: block;
  flex-shrink: 0;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mwai-backgroundSecondaryColor);
  border-radius: 4px;
  color: var(--mwai-fontColor);
  opacity: 0.6;
  flex-shrink: 0;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-icon svg {
  width: 18px;
  height: 18px;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-name {
  font-size: calc(var(--mwai-fontSize) * 0.85);
  color: var(--mwai-fontColor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-size {
  font-size: calc(var(--mwai-fontSize) * 0.7);
  color: var(--mwai-fontColor);
  opacity: 0.5;
  line-height: 1;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mwai-backgroundHeaderColor);
  border-radius: 0 0 calc(var(--mwai-borderRadius) / 2) calc(var(--mwai-borderRadius) / 2);
  overflow: hidden;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-progress .mwai-file-progress-bar {
  height: 100%;
  background: var(--mwai-primaryColor);
  transition: width 0.3s ease;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  color: var(--mwai-fontColor);
  padding: 4px;
  border: none;
  line-height: 0;
  min-width: inherit;
  margin-left: auto;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-remove:hover {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-files .mwai-file-preview .mwai-file-remove svg {
  width: 20px;
  height: 20px;
}
.mwai-chatgpt-theme .mwai-files:empty {
  display: none;
}
.mwai-chatgpt-theme .mwai-file-upload-icon {
  margin-bottom: -3px;
}
.mwai-chatgpt-theme .mwai-terminal {
  --mwai-terminal-active-color: var(--mwai-fontColor);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
  padding: var(--mwai-spacing);
  height: 100%;
  overflow-y: auto;
  cursor: text;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: calc(var(--mwai-spacing) * 1.25);
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}
.mwai-chatgpt-theme .mwai-terminal:focus {
  outline: none;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-line {
  display: flex;
  align-items: flex-start;
  margin: calc(var(--mwai-spacing) / 2) 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-line.mwai-terminal-user {
  color: var(--mwai-fontColor);
  opacity: 0.35;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-line.mwai-terminal-user-typing {
  color: var(--mwai-terminal-active-color);
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-line.mwai-terminal-user-typing .mwai-terminal-prompt {
  color: var(--mwai-terminal-active-color);
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-line.mwai-terminal-assistant {
  color: var(--mwai-fontColor);
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-line.mwai-terminal-system {
  color: #608b4e;
  font-style: italic;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-prompt {
  color: var(--mwai-terminal-active-color);
  margin-left: -4px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  height: 1.5em;
  line-height: 1.2;
  flex-shrink: 0;
  align-self: flex-start;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-prompt svg {
  display: block;
  width: 1.4em;
  height: 1.4em;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-text {
  color: inherit;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-input-wrapper {
  flex: 1;
  display: inline;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-typed {
  color: var(--mwai-terminal-active-color);
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-cursor {
  display: inline-block;
  min-width: 8px;
  height: 1.35em;
  color: var(--mwai-terminal-active-color);
  background: var(--mwai-terminal-active-color);
  opacity: 0.35;
  vertical-align: text-bottom;
  line-height: inherit;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-cursor.mwai-terminal-cursor-active {
  opacity: 1;
  color: var(--mwai-backgroundPrimaryColor);
  animation: mwai-cursor-blink 1s infinite;
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-cursor.mwai-terminal-cursor-typing {
  opacity: 1;
  color: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-terminal .mwai-terminal-cursor.mwai-terminal-cursor-inactive {
  opacity: 0.35;
}
.mwai-chatgpt-theme .mwai-terminal::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.mwai-chatgpt-theme .mwai-terminal::-webkit-scrollbar-track {
  background: transparent;
}
.mwai-chatgpt-theme .mwai-terminal::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}
.mwai-chatgpt-theme .mwai-terminal::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.5);
}
.mwai-chatgpt-theme .mwai-terminal + .mwai-compliance {
  margin-top: 0;
}
.mwai-chatgpt-theme.mwai-transition, .mwai-chatgpt-theme .mwai-transition {
  opacity: 0;
  transition: opacity 350ms ease-in-out;
}
.mwai-chatgpt-theme.mwai-transition-visible, .mwai-chatgpt-theme .mwai-transition-visible {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-text {
  overflow-wrap: anywhere;
}
.mwai-chatgpt-theme .mwai-text img, .mwai-chatgpt-theme .mwai-text svg {
  max-width: 100%;
}
.mwai-chatgpt-theme .mwai-text div p:first-child {
  margin-top: 0;
}
.mwai-chatgpt-theme .mwai-text div p:last-child {
  margin-bottom: 0;
}
.mwai-chatgpt-theme .mwai-trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  transition: all 0.2s ease-out;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: end;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container .mwai-icon-text {
  background: var(--mwai-iconTextBackgroundColor);
  color: var(--mwai-iconTextColor);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  max-width: 200px;
  font-size: 13px;
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 8px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container .mwai-icon-text-close {
  --mwai-icon-close-size: 28px;
  color: var(--mwai-iconTextColor);
  background: var(--mwai-iconTextBackgroundColor);
  font-size: 13px;
  line-height: 1;
  width: var(--mwai-icon-close-size);
  height: var(--mwai-icon-close-size);
  min-width: var(--mwai-icon-close-size);
  min-height: var(--mwai-icon-close-size);
  border-radius: 50%;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(40%, -40%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container:hover {
  cursor: pointer;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container:hover .mwai-icon-text-close {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(40%, -40%) scale(1);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container:hover .mwai-icon-text-close:hover {
  filter: brightness(1.1);
  transform: translate(40%, -40%) scale(1.06);
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme .mwai-trigger .mwai-icon-text-container .mwai-icon-text-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(40%, -40%) scale(1);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
  }
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-container {
  position: relative;
  z-index: 1;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-container .mwai-icon {
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.15));
  transition: all 0.2s ease-out;
}
.mwai-chatgpt-theme .mwai-trigger .mwai-icon-container .mwai-icon:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.mwai-chatgpt-theme.mwai-window {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: var(--mwai-width);
  z-index: 9999;
}
.mwai-chatgpt-theme.mwai-window .mwai-window-box {
  position: relative;
  z-index: 1;
}
.mwai-chatgpt-theme.mwai-window .mwai-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 15px;
  border-radius: var(--mwai-borderRadius) var(--mwai-borderRadius) 0 0;
  background: var(--mwai-backgroundHeaderColor);
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button {
  justify-content: center;
  height: 32px;
  width: 32px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button:before {
  transition: all 0.2s ease-out;
  content: " ";
  cursor: pointer;
  position: absolute;
  height: 13px;
  width: 13px;
  border: 1.2px solid var(--mwai-headerColor);
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button:hover:before {
  width: 16px;
  height: 16px;
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button {
  justify-content: center;
  height: 32px;
  width: 32px;
  cursor: pointer;
  border-radius: var(--mwai-borderRadius);
  margin-left: -10px;
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button:before {
  transition: all 0.2s ease-out;
  transform: translate(16px, 5px) rotate(45deg);
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button:after {
  transition: all 0.2s ease-out;
  transform: translate(16px, 5px) rotate(-45deg);
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button:before, .mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button:after {
  content: " ";
  cursor: pointer;
  position: absolute;
  height: 22px;
  width: 1.2px;
  background-color: var(--mwai-headerColor);
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button:hover:before {
  opacity: 1;
  transform: translate(16px, 5px) rotate(135deg);
}
.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-buttons .mwai-close-button:hover:after {
  opacity: 1;
  transform: translate(16px, 5px) rotate(45deg);
}
.mwai-chatgpt-theme.mwai-window.mwai-opening, .mwai-chatgpt-theme.mwai-window.mwai-closing {
  cursor: default !important;
}
.mwai-chatgpt-theme.mwai-window.mwai-opening .mwai-header, .mwai-chatgpt-theme.mwai-window.mwai-closing .mwai-header {
  cursor: default !important;
}
.mwai-chatgpt-theme.mwai-window .mwai-body {
  display: none;
  opacity: 0;
  max-height: var(--mwai-maxHeight);
  border-radius: 0 0 var(--mwai-borderRadius) var(--mwai-borderRadius);
}
.mwai-chatgpt-theme.mwai-window.mwai-bottom-left {
  bottom: 30px;
  right: inherit;
  left: 30px;
}
.mwai-chatgpt-theme.mwai-window.mwai-bottom-left .mwai-trigger {
  right: inherit;
  left: 0;
}
.mwai-chatgpt-theme.mwai-window.mwai-top-right {
  top: 30px;
  bottom: inherit;
  right: 30px;
}
.mwai-chatgpt-theme.mwai-window.mwai-top-right .mwai-trigger {
  top: 0;
  bottom: inherit;
}
.mwai-chatgpt-theme.mwai-window.mwai-top-left {
  top: 30px;
  bottom: inherit;
  right: inherit;
  left: 30px;
}
.mwai-chatgpt-theme.mwai-window.mwai-top-left .mwai-trigger {
  top: 0;
  bottom: inherit;
  right: inherit;
  left: 0;
}
.mwai-chatgpt-theme.mwai-window.mwai-center-open.mwai-open {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-window.mwai-center-open.mwai-open {
    width: calc(100% - 40px);
    max-width: var(--mwai-width);
  }
}
.mwai-chatgpt-theme.mwai-window.mwai-top-left .mwai-trigger, .mwai-chatgpt-theme.mwai-window.mwai-bottom-left .mwai-trigger {
  align-items: flex-start;
}
.mwai-chatgpt-theme.mwai-window.mwai-top-right .mwai-trigger, .mwai-chatgpt-theme.mwai-window.mwai-top-left .mwai-trigger {
  flex-direction: column-reverse;
}
.mwai-chatgpt-theme.mwai-window.mwai-top-right .mwai-trigger .mwai-icon-text, .mwai-chatgpt-theme.mwai-window.mwai-top-left .mwai-trigger .mwai-icon-text {
  margin-bottom: 0;
  margin-top: 15px;
}
.mwai-chatgpt-theme.mwai-window.mwai-fullscreen .mwai-header .mwai-buttons {
  margin-bottom: 0px;
}
.mwai-chatgpt-theme.mwai-window.mwai-fullscreen .mwai-header .mwai-buttons .mwai-resize-button:before {
  width: 16px;
  height: 16px;
}
.mwai-chatgpt-theme.mwai-window.mwai-fullscreen .mwai-header .mwai-buttons .mwai-resize-button:hover:before {
  width: 13px;
  height: 13px;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) {
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  z-index: 999999;
  background-color: var(--mwai-backgroundSecondaryColor);
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-header {
  border-radius: 0;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body {
  flex: 1;
  min-height: 0;
  max-height: inherit;
  border-radius: 0;
  display: flex !important;
  flex-direction: column !important;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body .mwai-conversation {
  flex: 0 1 auto !important;
  max-height: none;
  overflow-y: auto;
  min-height: 0;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body .mwai-fullscreen-spacer {
  flex: 1 1 auto !important;
  min-height: 0;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body .mwai-input {
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body .mwai-footer {
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body .mwai-files {
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-window-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-header {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen:not(.mwai-window) .mwai-body {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open {
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  z-index: 999999;
  background-color: var(--mwai-backgroundSecondaryColor);
  transform: none !important;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-header {
  border-radius: 0;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body {
  flex: 1;
  min-height: 0;
  max-height: inherit;
  border-radius: 0;
  display: flex !important;
  flex-direction: column !important;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body .mwai-conversation {
  flex: 0 1 auto !important;
  max-height: none;
  overflow-y: auto;
  min-height: 0;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body .mwai-fullscreen-spacer {
  flex: 1 1 auto !important;
  min-height: 0;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body .mwai-input {
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body .mwai-footer {
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body .mwai-files {
  flex: 0 0 auto;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-window-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mwai-chatgpt-theme.mwai-fullscreen.mwai-window.mwai-open .mwai-body {
  flex: 1 1 auto;
  min-height: 0;
}
.mwai-chatgpt-theme.mwai-window.mwai-open .mwai-header {
  display: flex;
}
.mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body {
  display: flex;
  transition: opacity 200ms ease-in-out 0s;
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-window.mwai-open .mwai-trigger {
  display: none;
}
.mwai-chatgpt-theme .mwai-body > .mwai-error {
  margin: var(--mwai-spacing);
  color: white;
  background: rgba(180, 55, 55, 0.55);
  padding: var(--mwai-spacing);
  border-radius: var(--mwai-borderRadius);
}
.mwai-chatgpt-theme .mwai-body > .mwai-error:hover {
  cursor: pointer;
  background: rgba(180, 44, 44, 0.85);
}
.mwai-chatgpt-theme .mwai-reply.mwai-error .mwai-text {
  color: #ff5656;
}
.mwai-chatgpt-theme .mwai-reply.mwai-error .mwai-text a {
  color: #ff5656;
  text-decoration: underline;
}
.mwai-chatgpt-theme .mwai-reply.mwai-error .mwai-reply-actions .mwai-action-button {
  fill: var(--mwai-fontColor);
  padding: 3px 5px;
  width: 24px;
  height: 24px;
  background: var(--mwai-backgroundPrimaryColor);
  cursor: pointer;
  border-radius: 5px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-error .mwai-reply-actions .mwai-action-button:hover {
  filter: brightness(1.2);
}
.mwai-chatgpt-theme .mwai-reply-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.mwai-chatgpt-theme .mwai-reply:hover .mwai-reply-actions {
  opacity: 1 !important;
}
.mwai-chatgpt-theme .mwai-form-output-container:hover .mwai-reply-actions {
  opacity: 1 !important;
}
.mwai-chatgpt-theme .mwai-form-output-container:hover .mwai-reply-actions.mwai-hidden {
  opacity: 1 !important;
}
.mwai-chatgpt-theme.mwai-bubble .mwai-trigger .mwai-icon-container {
  background: var(--mwai-bubbleColor);
  width: var(--mwai-iconSize, 60px);
  height: var(--mwai-iconSize, 60px);
  border-radius: 100%;
  transition: all 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mwai-chatgpt-theme.mwai-bubble .mwai-trigger .mwai-icon-container .mwai-icon {
  max-width: 50%;
  max-height: 50%;
  filter: none;
}
.mwai-chatgpt-theme.mwai-bubble .mwai-trigger .mwai-icon-container .mwai-icon:hover {
  transform: none;
}
.mwai-chatgpt-theme.mwai-bubble .mwai-trigger .mwai-icon-container .mwai-emoji {
  font-size: calc(var(--mwai-iconSize, 60px) / 2);
}
.mwai-chatgpt-theme.mwai-bubble .mwai-trigger .mwai-icon-container:hover {
  cursor: pointer;
  filter: brightness(1.1);
}
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-window.mwai-open {
    position: fixed;
    top: var(--mwai-vv-offset-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mwai-vv-offset-bottom, 0) !important;
    width: 100%;
    min-height: 100%;
    min-height: 100vh;
    min-height: var(--mwai-vv-height, 100dvh);
    height: var(--mwai-vv-height, 100dvh);
    max-height: var(--mwai-vv-height, 100dvh);
    max-width: 100%;
    margin: 0;
    z-index: 999999;
    background-color: var(--mwai-backgroundPrimaryColor, var(--mwai-backgroundSecondaryColor));
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding-top: env(safe-area-inset-top, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    box-sizing: border-box;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-window-box {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    min-height: 0;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-header {
    display: none !important;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0 !important;
    overflow: hidden;
    background: var(--mwai-backgroundPrimaryColor, var(--mwai-backgroundSecondaryColor));
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body .mwai-conversation {
    flex: 1;
    overflow-y: auto;
    max-height: none;
    min-height: 0;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body .mwai-input {
    flex-shrink: 0;
    position: relative;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body .mwai-footer {
    flex-shrink: 0;
    position: relative;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body .mwai-body:last-child .mwai-input {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    min-height: 50px;
    background: var(--mwai-backgroundHeaderColor);
    border-bottom: 1px solid var(--mwai-lineColor);
    padding: 0 15px;
    padding-top: env(safe-area-inset-top, 0);
    padding-left: calc(15px + env(safe-area-inset-left, 0));
    padding-right: calc(15px + env(safe-area-inset-right, 0));
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    flex-shrink: 0;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header .mwai-mobile-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mwai-headerColor);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header .mwai-mobile-header-close {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header .mwai-mobile-header-close:hover, .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header .mwai-mobile-header-close:active {
    background-color: var(--mwai-backgroundSecondaryColor);
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header .mwai-mobile-header-close svg {
    width: 20px;
    height: 20px;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-mobile-header .mwai-mobile-header-close svg path {
    stroke: var(--mwai-headerColor);
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open.mwai-center-open {
    top: var(--mwai-vv-offset-top, 0) !important;
    left: 0 !important;
    transform: none !important;
    right: 0 !important;
    bottom: var(--mwai-vv-offset-bottom, 0) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--mwai-vv-height, 100dvh) !important;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input {
    flex-direction: column;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input button:not(.mwai-input-submit) {
    font-size: 16px;
    margin-left: 0;
    width: 100%;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input .mwai-input-text {
    width: 100%;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input .mwai-input-text input, .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input .mwai-input-text textarea {
    font-size: 16px;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body {
    display: flex;
    transition: opacity 200ms ease-in-out 0s;
    opacity: 1;
    flex: 1;
    min-height: 0;
    max-height: inherit;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-body .mwai-conversation {
    flex: 1;
    max-height: none;
    min-height: 0;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-resize-button {
    display: none !important;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-trigger {
    display: none;
  }
}
@keyframes mwai-button-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
.mwai-chatgpt-theme button:not(.mwai-busy):before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.mwai-chatgpt-theme .admin-bar .mwai-fullscreen:not(.mwai-window),
.mwai-chatgpt-theme .admin-bar .mwai-fullscreen.mwai-window.mwai-open {
  top: 32px;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line {
  display: flex;
  align-items: flex-start;
  color: var(--mwai-terminal-active-color, var(--mwai-fontColor));
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-prompt {
  color: var(--mwai-terminal-active-color, currentColor);
  margin-left: -4px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  height: 1.5em;
  line-height: 1.2;
  flex-shrink: 0;
  align-self: flex-start;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-prompt svg {
  display: block;
  width: 1.4em;
  height: 1.4em;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-input-wrapper {
  flex: 1;
  display: inline;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-typed {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-cursor {
  display: inline-block;
  min-width: 8px;
  height: 1.35em;
  color: currentColor;
  background: currentColor;
  opacity: 0.35;
  vertical-align: text-bottom;
  line-height: inherit;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-cursor.mwai-terminal-cursor-active {
  opacity: 1;
  color: var(--mwai-backgroundPrimaryColor, #1a1a2e);
  animation: mwai-cursor-blink 1s infinite;
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-cursor.mwai-terminal-cursor-typing {
  opacity: 1;
  color: var(--mwai-backgroundPrimaryColor, #1a1a2e);
}
.mwai-chatgpt-theme .mwai-input .mwai-terminal-line .mwai-terminal-cursor.mwai-terminal-cursor-inactive {
  opacity: 0.35;
}
.mwai-chatgpt-theme pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
.mwai-chatgpt-theme code.hljs {
  padding: 3px 5px;
}
.mwai-chatgpt-theme .hljs {
  color: #fff;
}
.mwai-chatgpt-theme .hljs-subst {
  color: #fff;
}
.mwai-chatgpt-theme .hljs-comment {
  color: #999;
}
.mwai-chatgpt-theme .hljs-attr, .mwai-chatgpt-theme .hljs-doctag, .mwai-chatgpt-theme .hljs-keyword, .mwai-chatgpt-theme .hljs-meta .hljs-keyword, .mwai-chatgpt-theme .hljs-section, .mwai-chatgpt-theme .hljs-selector-tag {
  color: #88aece;
}
.mwai-chatgpt-theme .hljs-attribute {
  color: #c59bc1;
}
.mwai-chatgpt-theme .hljs-name, .mwai-chatgpt-theme .hljs-number, .mwai-chatgpt-theme .hljs-quote, .mwai-chatgpt-theme .hljs-selector-id, .mwai-chatgpt-theme .hljs-template-tag, .mwai-chatgpt-theme .hljs-type {
  color: #f08d49;
}
.mwai-chatgpt-theme .hljs-selector-class {
  color: #88aece;
}
.mwai-chatgpt-theme .hljs-link, .mwai-chatgpt-theme .hljs-regexp, .mwai-chatgpt-theme .hljs-selector-attr, .mwai-chatgpt-theme .hljs-string, .mwai-chatgpt-theme .hljs-symbol, .mwai-chatgpt-theme .hljs-template-variable, .mwai-chatgpt-theme .hljs-variable {
  color: #b5bd68;
}
.mwai-chatgpt-theme .hljs-meta, .mwai-chatgpt-theme .hljs-selector-pseudo {
  color: #88aece;
}
.mwai-chatgpt-theme .hljs-built_in, .mwai-chatgpt-theme .hljs-literal, .mwai-chatgpt-theme .hljs-title {
  color: #f08d49;
}
.mwai-chatgpt-theme .hljs-bullet, .mwai-chatgpt-theme .hljs-code {
  color: #ccc;
}
.mwai-chatgpt-theme .hljs-meta .hljs-string {
  color: #b5bd68;
}
.mwai-chatgpt-theme .hljs-deletion {
  color: #de7176;
}
.mwai-chatgpt-theme .hljs-addition {
  color: #76c490;
}
.mwai-chatgpt-theme .hljs-emphasis {
  font-style: italic;
}
.mwai-chatgpt-theme .hljs-strong {
  font-weight: 700;
}
.mwai-chatgpt-theme .mwai-reply-actions {
  position: absolute;
  border-radius: 5px;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  padding: 2px 2px;
  z-index: 100;
  background: var(--mwai-backgroundPrimaryColor);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  z-index: 100;
}
.mwai-chatgpt-theme .mwai-reply-actions .mwai-copy-button,
.mwai-chatgpt-theme .mwai-reply-actions .mwai-download-button,
.mwai-chatgpt-theme .mwai-reply-actions .mwai-pdf-button {
  fill: var(--mwai-fontColor);
  padding: 3px 5px;
  width: 24px;
  height: 24px;
  background: var(--mwai-backgroundPrimaryColor);
  cursor: pointer;
  border-radius: 5px;
}
.mwai-chatgpt-theme .mwai-reply-actions .mwai-copy-button:hover,
.mwai-chatgpt-theme .mwai-reply-actions .mwai-download-button:hover,
.mwai-chatgpt-theme .mwai-reply-actions .mwai-pdf-button:hover {
  filter: brightness(1.2);
}
.mwai-chatgpt-theme .mwai-reply-actions.mwai-hidden {
  opacity: 0;
}
.mwai-chatgpt-theme .mwai-realtime {
  padding: var(--mwai-spacing);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-visualizer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-visualizer hr {
  width: 100px;
  margin-right: var(--mwai-spacing);
  margin-left: var(--mwai-spacing);
  border: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-visualizer .mwai-animation {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--mwai-spacing);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls > * + * {
  margin-left: 10px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls button {
  border-radius: 100%;
  width: 50px;
  height: 50px;
  margin: 5px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mwai-fontColor);
  border: 2px solid var(--mwai-backgroundPrimaryColor);
  background: none;
  cursor: pointer;
  transition: all 0.2s ease-out;
  min-width: inherit;
  max-width: inherit;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls button:hover:not(:disabled) {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: none;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls button.mwai-active {
  border: 2px solid var(--mwai-fontColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode {
  flex-direction: column;
  gap: 8px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode .mwai-push-to-talk {
  border-radius: calc(var(--mwai-borderRadius) * 0.8);
  width: auto;
  min-width: 120px;
  padding: 12px 24px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--mwai-fontColor);
  border: 2px solid var(--mwai-backgroundPrimaryColor);
  background: none;
  cursor: pointer;
  transition: all 0.2s ease-out;
  font-family: inherit;
  font-size: var(--mwai-fontSize);
  line-height: 1.2;
  font-weight: 500;
  height: auto;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode .mwai-push-to-talk:hover:not(:disabled) {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode .mwai-push-to-talk:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: none;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode .mwai-push-to-talk.mwai-active {
  border: 2px solid var(--mwai-fontColor);
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode .mwai-push-to-talk svg {
  width: 18px;
  height: 18px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-controls.mwai-hold-to-talk-mode .mwai-talk-hint {
  font-size: 12px;
  color: var(--mwai-fontColor);
  opacity: 0.6;
  text-align: center;
  margin: 0;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-last-transcript {
  margin: var(--mwai-spacing);
  margin-top: 0;
  border: 2px solid var(--mwai-backgroundPrimaryColor);
  padding: calc(var(--mwai-spacing) / 2);
  padding-right: calc(var(--mwai-spacing) / 2 + 10px);
  border-radius: var(--mwai-borderRadius);
  font-size: 80%;
  text-align: center;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--mwai-backgroundHeaderColor) transparent;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-last-transcript::-webkit-scrollbar {
  width: 6px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-last-transcript::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-last-transcript::-webkit-scrollbar-thumb {
  background: var(--mwai-backgroundHeaderColor);
  border-radius: 10px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-last-transcript::-webkit-scrollbar-thumb:hover {
  background: var(--mwai-primaryColor);
}
.mwai-chatgpt-theme .mwai-realtime .mwai-statistics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 10px;
  font-size: 14px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-statistics div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-statistics label {
  font-size: 11px;
  opacity: 0.5;
  text-transform: uppercase;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-options {
  margin-top: var(--mwai-spacing);
  display: flex;
  align-items: center;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-options .mwai-option {
  cursor: pointer;
  opacity: 0.5;
  margin-right: 2px;
}
.mwai-chatgpt-theme .mwai-realtime .mwai-options .mwai-option.mwai-active {
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-discussions {
  border-radius: var(--mwai-borderRadius);
  background: var(--mwai-backgroundHeaderColor);
  overflow: hidden;
}
.mwai-chatgpt-theme.mwai-discussions * {
  box-sizing: border-box;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion {
  display: flex;
  position: relative;
  padding-left: calc(var(--mwai-spacing) / 2);
  padding-right: calc(var(--mwai-spacing) / 2);
  padding-bottom: calc(var(--mwai-spacing) / 2);
  color: var(--mwai-conversationsTextColor);
  opacity: 0.65;
  align-items: center;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-content {
  flex: 1;
  padding: 5px 10px;
  overflow: hidden;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mwai-fontSize);
  margin-bottom: 4px;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-info {
  display: flex;
  gap: 12px;
  font-size: calc(var(--mwai-fontSize) * 0.85);
  opacity: 0.7;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-info .mwai-info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-info .mwai-info-item svg {
  opacity: 0.6;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-actions {
  position: absolute;
  top: 50%;
  right: calc(var(--mwai-spacing) / 2);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  z-index: 100;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion .mwai-discussion-actions .mwai-menu-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mwai-conversationsTextColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion.mwai-active {
  cursor: pointer;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion.mwai-active .mwai-discussion-content {
  background: var(--mwai-backgroundPrimaryColor);
  border-radius: var(--mwai-borderRadius);
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion:hover {
  cursor: pointer;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion:hover .mwai-discussion-content {
  background: var(--mwai-backgroundPrimaryColor);
  border-radius: var(--mwai-borderRadius);
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion:hover .mwai-discussion-actions {
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion:has(.mwai-context-menu) .mwai-discussion-actions {
  opacity: 1;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussion:first-child {
  margin-top: calc(var(--mwai-spacing) / 2);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header {
  color: var(--mwai-headerColor);
  padding: var(--mwai-spacing);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header button {
  background: var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
  border: none;
  padding: 8px 16px;
  border-radius: var(--mwai-borderRadius);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header button:hover:not(:disabled) {
  background: var(--mwai-iconTextBackgroundColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header .mwai-refresh-btn {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-body {
  background: var(--mwai-conversationsBackgroundColor);
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  z-index: 1;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mwai-conversationsBackgroundColor);
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-spinner {
  animation: spin 1s linear infinite;
  color: var(--mwai-fontColor);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination {
  background: var(--mwai-backgroundHeaderColor);
  padding: var(--mwai-spacing);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination button {
  background: var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
  border: none;
  padding: 8px 12px;
  border-radius: var(--mwai-borderRadius);
  cursor: pointer;
  transition: all 0.2s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination button:hover:not(:disabled) {
  background: var(--mwai-iconTextBackgroundColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination span {
  color: var(--mwai-headerColor);
  font-size: var(--mwai-fontSize);
  font-weight: 500;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination .mwai-page-indicator {
  color: var(--mwai-headerColor);
  font-size: calc(var(--mwai-fontSize) * 0.85);
  font-weight: 400;
  opacity: 0.8;
}
.mwai-chatgpt-theme .mwai-files {
  padding: var(--mwai-spacing) var(--mwai-spacing) 0 var(--mwai-spacing);
  border: none;
}
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-reply-actions {
  display: none;
}
.mwai-chatgpt-theme .mwai-conversation > .mwai-reply.mwai-ai:first-child .mwai-reply-actions {
  display: none;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai {
  align-items: flex-start;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-name .mwai-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  background: transparent;
  border-radius: 0;
  margin-top: -2px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-name .mwai-avatar img {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai > div:has(> .mwai-text) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions {
  position: static;
  background: transparent;
  box-shadow: none;
  padding: 5px 0 0 0;
  margin-left: -7px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions.mwai-hidden {
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-copy-button,
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-download-button,
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-pdf-button {
  background: transparent;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 0.15s ease;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-copy-button svg,
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-download-button svg,
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-pdf-button svg {
  width: 18px;
  height: 18px;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-copy-button:hover,
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-download-button:hover,
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-pdf-button:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-reply-actions .mwai-pdf-button svg {
  width: 22px;
  height: 22px;
}
.mwai-chatgpt-theme .mwai-chunks {
  background: rgba(255, 255, 255, 0.05);
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunks-header {
  color: #9ca3af;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunks-header .mwai-chunks-toggle {
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunks-header .mwai-chunks-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk {
  background: rgba(255, 255, 255, 0.08);
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-time {
  color: #e5e7eb;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-data {
  color: #e5e7eb;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-header .mwai-chunk-expand {
  color: #e5e7eb;
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-details {
  background: rgba(0, 0, 0, 0.2);
}
.mwai-chatgpt-theme .mwai-chunks .mwai-chunk .mwai-chunk-details pre {
  color: #d1d5db;
}

@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input {
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
  }
  .mwai-chatgpt-theme .mwai-input {
    margin: 10px var(--mwai-spacing);
  }
  .mwai-chatgpt-theme .mwai-files {
    padding: 0 var(--mwai-spacing) 0 var(--mwai-spacing);
  }
  .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images {
    max-width: 90%;
  }
  .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-user-images:has(.mwai-user-image:nth-child(2)) .mwai-user-image {
    width: 120px;
    height: 120px;
  }
  .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text {
    max-width: 90%;
  }
  .mwai-chatgpt-theme .mwai-name {
    margin-right: 0;
    max-width: inherit;
  }
}

.mwai-chatgpt-theme.mwai-discussions .mwai-header {
  background: var(--mwai-backgroundSecondaryColor);
  color: var(--mwai-fontColor);
  border-bottom: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header button {
  background: var(--mwai-backgroundSecondaryColor);
  color: var(--mwai-fontColor);
  border: 1px solid var(--mwai-borderColor);
  padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  font-size: calc(var(--mwai-fontSize) * 0.9);
  margin-left: 0;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header button:hover:not(:disabled) {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-header button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination {
  background: var(--mwai-backgroundSecondaryColor);
  border-top: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination button {
  background: var(--mwai-backgroundSecondaryColor);
  color: var(--mwai-fontColor);
  border: 1px solid var(--mwai-borderColor);
  padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  font-size: calc(var(--mwai-fontSize) * 0.9);
  margin-left: 0;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination button:hover:not(:disabled) {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-footer,
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-pagination {
  background: var(--mwai-backgroundSecondaryColor);
  border-top: 1px solid var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-footer .mwai-new-chat-button,
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-pagination .mwai-new-chat-button {
  width: 100%;
  background: var(--mwai-backgroundSecondaryColor);
  color: var(--mwai-fontColor);
  border: 1px solid var(--mwai-borderColor);
  padding: calc(var(--mwai-spacing) / 2) var(--mwai-spacing);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  font-size: calc(var(--mwai-fontSize) * 0.9);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-footer .mwai-new-chat-button:hover,
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-pagination .mwai-new-chat-button:hover {
  background: var(--mwai-backgroundPrimaryColor);
}
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-footer .mwai-new-chat-button:disabled,
.mwai-chatgpt-theme.mwai-discussions .mwai-discussions-pagination .mwai-new-chat-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mwai-context-menu-portal.mwai-chatgpt-theme .mwai-context-menu {
  background: var(--mwai-backgroundSecondaryColor);
  border: 1px solid var(--mwai-backgroundPrimaryColor);
  color: var(--mwai-fontColor);
}
.mwai-context-menu-portal.mwai-chatgpt-theme .mwai-context-menu .mwai-menu-item:hover {
  background-color: var(--mwai-backgroundPrimaryColor);
}
.mwai-context-menu-portal.mwai-chatgpt-theme .mwai-context-menu .mwai-menu-item.mwai-danger {
  color: var(--mwai-errorTextColor);
}
.mwai-context-menu-portal.mwai-chatgpt-theme .mwai-context-menu .mwai-menu-item.mwai-danger:hover {
  background-color: var(--mwai-errorBackgroundColor);
}


/*FILESTART   */

/* 10Web Booster optimized this CSS file */

              @keyframes float-composition {
                0% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-24px) rotate(1deg); }
                100% { transform: translateY(0px) rotate(0deg); }
              }