.wf-form-form {
    width: 100%;
    position:relative;
}

.wf-standard-form .wf-label {
    width: 100%!important;
    float: none !important;
    margin-bottom: 5px;
}

.wf-standard-form .wf-input {
    width: 100%!important;
    float: none !important;
}
.wf-form {
    margin: auto;
    padding: 0px;
    list-style-type: none;
    position:relative;
}

.wf-form fieldset {
    background: white;
    border: 0 none;
    border-radius: 5px;
    padding: 50px 50px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.wf-form input:not([type="button"]):not([type="submit"]):not(.wf-tag-input input), .wf-form select .wf-form textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	box-sizing: border-box;
	color: #2C3E50;
	font-size: 13px;
}

.wf-form fieldset:not(:first-of-type){
    display:none;
}

.wf-form .fieldset-condition-inactive {
    display:none!important;
}

.wf-form .conditions {
    text-align: center;
    margin: 20px 0px;
}

.wf-form .condition {
    box-sizing: border-box;
    border-color: #ccc;
    border-radius: 99em;
    color: black;
    outline: none;
}
.wf-form .condition:hover,
.wf-form .condition:focus {
    background-color: white;;
    color: black;
}

.wf-form .condition-active,
.wf-form .condition-active:hover,
.wf-form .condition-active:focus,
.wf-form .condition:active {
    background-color: black;
    color: white;
}

.wf-form .invalid {
    border-color: red!important;
    border-style: solid!important;
    border-width: 2px!important;
}

.wf-progressbar {
    display: flex;
    text-align: center;
    margin: auto;
    margin-bottom: 5px;
    overflow: hidden;
    counter-reset:step;
    padding: 0;
}
.wf-progressbar li {
    flex: 1;
	list-style-type: none;
	color: white;
	text-transform: uppercase;
    font-weight: bold;
	font-size: 12px;
    text-align: center;
	float: left;
	position: relative;
}
.wf-progressbar li:before {
	content: counter(step);
	counter-increment: step;
    text-align:center;
    font-weight: bold;
	width: 30px;
	line-height: 30px;
	display: block;
	font-size: 14px;
	color: #333;
	background: white;
	border-radius: 50%;
	margin: 0 auto 5px auto;
    z-index: 2;
}
/*progressbar connectors*/
.wf-progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 14px;
    z-index: -1;
}
.wf-progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.wf-progressbar li.active:before,  .wf-progressbar li.active:after{
	background: black;
	color: white;
}

.wf-progressbar-container h3:not(.last-active) {
     display:none;
 }
 .wf-progressbar-container h3 {
     text-align: center;
 }

.action-buttons {
    text-align: center;
}

.wf-label {
    width: 100%;
}

.wf-input input,
.wf-input {
    width: 100%;
}

.wf-product-submit-class,
.wf-event-submit-class,
.wf-post-submit-class,
.wf-place-submit-class,
.wf-stream-submit-class {
    max-width: 200px !important;
    background-color: #e91e90 !important;
    color: #fff !important;
    border: 2px solid #e91e90 !important;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}
.wf-product-submit-class:hover,
.wf-event-submit-class:hover,
.wf-post-submit-class:hover,
.wf-place-submit-class:hover,
.wf-stream-submit-class:hover {
    background-color: #d4177f !important;
    border-color: #d4177f !important;
}
#wf-product-submit-draft,
#wf-event-submit-draft,
#wf-post-submit-draft,
#wf-place-submit-draft,
#wf-stream-submit-draft {
    max-width: 200px !important;
    background-color: transparent !important;
    color: #e91e90 !important;
    border: 2px solid #e91e90 !important;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}
#wf-product-submit-draft:hover,
#wf-event-submit-draft:hover,
#wf-post-submit-draft:hover,
#wf-place-submit-draft:hover,
#wf-stream-submit-draft:hover {
    background-color: #e91e90 !important;
    color: #fff !important;
}

.wf-field {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 1px;
    box-sizing: border-box;
}
.wf-label {
    float: left;
    min-height: 1px;
}
.wf-label label {
    font-size: 15px;
    font-weight: bold;
}
.wf-label label span {
    color: red;
}
.wf-input {
    float:left;
    position: relative;
    box-sizing: border-box;
}

.wf-input span {
    font-size: 12px;
    font-style: italic;
    margin: 2px 0px 5px;
    display: block;
}
.wf-field:after {
    clear: both;
    content: "";
    display:table;
}
.img-container {
    position:relative;
    text-align: center;
    cursor: pointer;
}

.wf-image-gallery-container {
    display:flex;
    flex-flow: row wrap;
}

.wf-image-upload-gallery-img > span {
    margin-right: 10px;
}

}

.wf-multi-file-container::-webkit-scrollbar {
    display: none;
}

.wf-multi-file-uploader {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.wf-multi-file-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: flex-end;
    padding-bottom: 17px;
    margin: 0 auto;
}

/* Ensure maximum width in context of .media sections */
.media-wf_product_form .wf-multi-file-uploader,
.media-wf_product_form .wf-multi-file-container {
    width: 100% !important;
    max-width: 100% !important;
}
.wf-multi-file-uploader-img {
    width: 150px;
    height: 150px;
    margin-right: 10px;
}
.wf-multi-file-uploader-img:first-child {
    width: 200px;
    height: 200px;
}

.wf-file-upload-dropzone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-style: dashed;
    border-width: 3px;
    background: transparent;
    color: white;
}
.wf-file-upload-dropzone i {
    font-size: 2.5em;
    opacity: 0.5;
}
.wf-file-upload-dropzone span {
    font-size: 0.85em;
}
.wf-file-upload-dropzone .wf-upload-max-size {
    font-size: 0.7em;
    opacity: 0.5;
}
.wf-multi-file-uploader-btn {
    display:flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 150px!important;
    height: 150px!important;
    border-style: dashed;
    border-width: 3px;
    position: relative;
    overflow: hidden;
}
.wf-upload-plus {
    font-size: 48px !important;
    font-weight: 300;
    line-height: 1;
    color: white !important;
    opacity: 0.5;
}
.wf-multi-file-uploader-btn > .fa-times {
    color: red;
    position:absolute;
    z-index: 1;
    right: 5px;
    top:2px;
}

.wf-multi-file-uploader-btn > img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
}

.wf-uploader-btn-main {
    width: 200px!important;
    height: 200px!important;
}

.wf-summary-sections {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wf-summary-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
}
.wf-summary-label {
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 6px;
}
.wf-summary-value {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.submit-summary img {
    max-width: 100px;
}

.wf-card-summary-container {
    display: flex;
    flex-flow: row wrap;
}

.wf-card-summary-container > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.loading {
    border: 4px solid rgba(0, 0, 0, .1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s ease infinite !important;
    display: none;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
  
.wf-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: transparent;
}
.wf-delete-icon {
    color: red;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.fa-trash:hover {
    color: red;
}
.img-container:hover .wf-overlay {
    opacity: 0.4;
    background-color: transparent;
}
.img-container:hover img {
    opacity: 0.4;
}
.wf-radio {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
}
.wf-radio label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
}
.wf-radio input[type=radio] {
    margin: 0;
}
.wf-checkbox-block {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    max-width: 100%;
    word-break: break-word;
}
.wf-checkbox-block input[type=checkbox] {
    margin: 0;
}
input[type=url],
select,
input[type=datetime-local] {
    width: 100%;
    padding: 8px 16px;
    height: 44px;
    border: 1px solid #666;
    border-radius: 3px;
    background-color: white;
}

#wf-osm-marker-loading {
    position: absolute;
    z-index: 401;
    right: 10px;
    bottom: 50px;
}

.modal {
    display:none;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    position:   fixed;
    z-index:    10;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background-color: rgba( 255, 255, 255, .6 );
    font-size: 1.5em;
}
.wf-file-too-big {
    margin-left: 5px;
}
.wf-country-dropdown {
    width: 97%;
    background-color: white;
    height: 40px;
    border: 1px solid #ddd;
    color: #666;
    padding: 0px;
    padding-left: 12px;
}

.wf-tag-input {
    cursor: text;
    border: 1px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
    margin: 0px 0px 10px;
    display:flex;
    flex-flow: row wrap;
}

.wf-tag-input > input {
	padding: 15px;
	border-radius: 3px;
	box-sizing: border-box;
	color: #2C3E50;
	font-size: 13px;
    border: none;
    width: 0;
}

.wf-tag-container {
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    cursor: default;
}
.wf-tag-container > div > i {
    align-self: flex-start;
    margin-left: 3px;
    color: red;
    cursor: pointer;
}
.wf-tag-container > div > label {
    margin-top: 5px;
    color: white!important;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}

.wf-tag-container > div {
    display: flex;
    align-items: flex-end;
    margin-left: 5px;
    padding: 5px;
    border: 1px solid #ccc;
	border-radius: 3px;
    background: #18191A;
}

.wf-autocomplete-cards {
    display:flex;
    flex-flow: row wrap;
    margin-bottom: 10px;
    line-height: 1.5;
}

.wf-autocomplete-input li {
    background-color: white;
    border-style: solid;
}

.wf-autocomplete-input td {
    padding-left: 0px!important;
    padding-top: 0px!important;
}
.ui-autocomplete {
    z-index: 100!important;
}
.wf-user-card {
    display: flex;
    align-items: center;
    margin-left: 0px!important;
    background-color: white;
    color: #555555;
    width: 250px;
    height: 60px;
    margin:5px;
}
.wf-user-card .wf-user-card-info {
    width:auto;
    text-align:right;
    padding-top:3px;
    margin-right: 5px;
    font-weight: bold;
    font-size: 15px;
}

.wf-user-card > img {
    border-radius: 50%;
    height: 100%;
    margin-right: 5px;
}

.wf-user-card .wf-user-card-close {
    width:10px;
    height:10px;
    float:right;
    right:-12px;
    top:-5px;
    cursor:pointer;
    font-size:15px;
}

.wf-form h1,
.wf-form h2,
.wf-form h3,
.wf-form h4,
.wf-form h5,
.wf-form h6 {
    font-weight: bold;
}
.wf-forms {
}
.ui-menu {
        list-style:none;
        padding: 0;
        margin: 0;
        display:block;
        width:227px;
        background-color: white;
        border-style: solid;
        border-color: #ddd;
        border-width: 1px;
        cursor: pointer;
        font-size: 14px;
}
.ui-menu-item {
    padding: 10px;
}
.wf-edit-table {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 0px;
}

.wf-edit-table tr {
    border-radius:5px;
}

.wf-edit-table i {
    padding-left: 20px;
}

.wf-edit-table td {
    border-style: none;
}
.wf-edit-table tr:first-child td:first-child {
    border-top-left-radius: 5px;
}
.wf-edit-table tr:first-child td:last-child {
    border-top-right-radius: 5px;
}
.wf-edit-table tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
.wf-edit-table tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}
.wf-edit-table tr td {
    min-height: 100px!important;
    vertical-align: middle;
    text-align: center;
}

.wf-edit-table tr td:nth-child(1) {
    width: 15%;
}
.wf-edit-table tr td:nth-child(2) {
    text-align:left;
    word-break: break-word;
}

.wf-edit-table a {
    word-break: break-word;
}

.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 5px 0;
  border-radius: 6px;
  font-weight: 900;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: calc(100% + 10px);
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.wf-pagination-panel {
    background-color: white;
    border-radius: 5px;
}
.wf-pagination-btn {
    color: black;
    border-style: none;
}
.wf-pagination-btn:hover {
    color: grey;
    border-style: none;
    background-color: transparent;
}
.wf-pagination-btn:active {
    color: grey;
    border-style: none;
    background-color: transparent;
}
.wf-pagination-btn:focus {
    color: grey;
    border-style: none;
    background-color: transparent;
}
.wf-pagination-panel {
    display: flex;
    align-items: center;
    margin-left: auto;
    width: fit-content;
    float: right;
}
.wf-pagination-panel label {
    position: relative;
    bottom: 5px;
    font-size: 16px;
}

.wf-edit-no-element {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.wf-view-review-table {
    border-collapse: separate;
    border-spacing: 0 5px;
}
.wf-view-review-table tr,
.wf-view-review-table th,
.wf-view-review-table td,
.wf-view-review-table {
    border-style: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content div {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-size: 14px;
}

/* Change color of dropdown links on hover */
.dropdown-content div:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.wf-post-type-story-select tr,
.wf-post-type-story-select th,
.wf-post-type-story-select td,
.wf-post-type-story-select table {
    border-style: none;
    vertical-align: middle;
}

.wf-change-post-type-story {
    cursor: pointer;
}
.wf-place-desc > span {
    display: flex;
}
.wf-place-post-list,
#wf-visible-places {
    margin-top: 16px;
    display:grid;
    width:100%;
    grid-column-gap: 5%;
}
.wf-place-details {
    display:flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    border-radius: 3px;
    padding-bottom: 20px;
}

.wf-place-actions {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    margin-left: 5px;
}

.wf-place-action-buttons {
    display: flex;
    width: 90%;
}

.wf-place-action-buttons button {
    font-size: 18px;
    font-weight: bold;
    background-color: #18191A;
    margin-right: 10px;
    padding: 4px 16px;
    border: none;
    border-radius: 0px;
    color: white;
}
.wf-place-action-buttons button:hover {
    text-decoration: underline;
    background-color: #18191A;
    color: white;
    font-weight: bold;
    border-radius: 0px;
}
.wf-place-action-buttons button:active,
.wf-place-action-buttons button:focus {
    border: 2px solid transparent;
    background-color: #18191A;
    color: white;
    border-radius: 0px;
}

.wf-place-tabs {
    position: relative;
    z-index: 1;
    display:flex;
    align-items: flex-start;
    width: 90%;
}
.wf-place-tabs > .tab {
    position: sticky;
    margin-right: 5px;
}
.wf-place-tabs > .tab > button {
    position: relative;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-weight: bold;
    font-size: 18px;
}
.wf-place-tabs > .tab > button > i {
    width: 25px;
}
.wf-place-tabs > .tab label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white;
    font-size: 12px;
    z-index: 1;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
    animation: mypulse 2s infinite;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
.wf-place-details-tab {
    display:flex;
    align-items: flex-start;
}
.wf-place-heading {
    position:relative;
    z-index: 2;
    width: 100%;
    display:flex;
    margin-bottom: 20px;
    background-color: #18191A;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.wf-place-heading h1 {
    color: white;
    font-weight: bold;
    margin: 16px 0 16px;
}
.wf-place-heading > span {
    width: 90%;
    display: flex;
    align-items: flex-start;
    align-items: center;
    position: sticky;
}
.wf-place-icon-and-content {
    display:flex;
}
.wf-place-icon-and-content > i {
    margin-right: 10px;
}
.wf-place-post-item,
.wf-place-desc {
}
.wf-place-image-container {
    background-color: white;
    border-radius: 50%;
    position:relative;
    width:100%;
    padding-top: 100%;
    border: 1px solid black;
}
.wf-place-image-container img {
}
.wf-place-new::after {
    position:absolute;
    top: 0;
    right: 0;
    content: "NEW";
    background-color: red;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 2px 5px;
}
.wf-place-image {
    position:relative;
    width: 10%;
    overflow:hidden;
    margin: 3px 10px;
}
.wf-place-image:before {
    content: "";
    display:block;
    padding-top: 100%;
}
.wf-place-image-container > a > img,
.wf-place-image > img,
.wf-marker-popup-text img {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
}
.leaflet-popup-tip{
    box-shadow: none;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}
.wf-new-marker-popup,
.wf-new-marker-popup .leaflet-popup-content-wrapper,
.wf-place-marker-tooltip  {
    background-color: transparent;
    border: none;
}

.wf-place-marker-tooltip::before {
    border-top-color: #18191A;
}
.wf-place-marker-tooltip .leaflet-popup-tip,
.wf-new-marker-popup .leaflet-popup-tip {
    background-color: #18191A;
}
.wf-place-marker-tooltip .leaflet-popup-content,
.wf-new-marker-popup .leaflet-popup-content {
    margin: 0;
    background-color: transparent;
    border-radius: 10px;

}
.wf-new-marker-content {
    margin: 0px;
    background-color: transparent;
}
.wf-new-marker-text {
    padding: 10px 10px;
    margin: 0;
    color: #18191A99;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
    background-color: #18191A;
    color: white;
    border-bottom: 1px solid #18191A;
}

/* .wf-new-marker-text:after {
    margin-top: 10px;
    content: "";
    display: relative;
    width: 80%;
    border-bottom: 1px solid #18191A99;
} */

.wf-new-marker-circle {
    padding-top: 10px;
    display: flex;
    align-items: center;
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.wf-new-marker-choose {
    padding: 10px 0;
    text-align: center;
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.wf-new-marker-choose a {
    font-size: 16px;
    color: #18191A;
}

.wf-new-marker-circle > div {
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0px;
    text-align: center;
    font-weight: bold;
    flex-grow: 1;
    color: #18191A99;
}
.wf-marker-popup-content {
    background-color: white;
    border-radius: 10px;
}

.wf-marker-popup-text {
    display:flex;
    align-items: center;
    margin-bottom: 5px;
    background-color: #18191A;
    border-bottom: 1px solid #18191A;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.wf-marker-popup-text h6 {
    margin-left:10px;
    margin-bottom: 0.5rem;
    color: white;
    white-space: initial;
    text-align: center;
    width: 100%;

}
.wf-marker-popup-text > div:first-child {
    background-color: white;
    border-radius: 50%;
    position:relative;
    width: 50px;
    height: 50px;
    min-width: 50px;
}

.wf-selected-address {
    position: absolute;
    color: #18191A;
    font-weight: bold;
    z-index: 999;
    padding: 5px 5px;
}

.wf-place-post-item > h5,
.wf-place-post-item > div,
.wf-place-content > h5,
.wf-place-content > div {
    text-align: center;
}

.wf-place-count-labels {
    display: flex;
    align-items: flex-end;
    padding: 5px;
}
.wf-place-child-label > i {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    color: #18191A;
}
.wf-place-child-label > span {
    position:relative;
    top: 5px;
    right: -2px;
}

.wf-place-child-label > label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    position: relative;
    top: -14px;
    right: 12px;
    padding: 5px;
    animation: mypulse 2s infinite;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}

.wf-place-child-label {
    flex-grow: 1;
    display:flex;
    justify-content: center;
    padding: 8px 0px;
    font-weight: bold;
    font-size: 14px;
}

.wf-unread-posts {
    font-weight: bold;
}

.leaflet-marker-icon > div > label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    position: relative;
    top: -40px;
    right: -20px;
    padding: 5px;
    animation: mypulse 2s infinite;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}

.wf-place-pin > span {
    cursor: pointer;
    background-color: #18191A;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid white;
}
.wf-place-pin-large > span {
    cursor: pointer;
    background-color: #18191A;
    width: 3rem;
    height: 3rem;
    display: block;
    left: -1.5rem;
    top: -1.5rem;
    position: relative;
    border-radius: 3rem 3rem 0;
    transform: rotate(45deg);
    border: 1px solid white;
}

@-webkit-keyframes mypulse {
	0% {
		-webkit-transform: scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

    70% {
		-webkit-transform: scale(1.05);
		-webkit-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.0);
	}

	100% {
		-webkit-transform: scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}
@keyframes mypulse {
	0% {
		transform: scale(1);
		-moz-transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

    70% {
		transform: scale(1.05);
		-moz-transform: scale(1.05);
		box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
	}

	100% {
		transform: scale(1);
		-moz-transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}

.wf-place-pin > span > img,
.wf-place-pin-large > span > img {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: black;
    font-size: 1.5rem;
    border-radius: 50%;
    border: 1px solid #18191A;
}

.wf-popup-loading,
.wf-popup-checked,
.wf-place-pin label,
.wf-place-pin-large label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white!important;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    right: 2px;
    top: -16px;
    padding: 5px;
    animation: mypulse2 2s infinite;
    transform: rotate(-45deg) scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}

.wf-popup-loading,
.wf-popup-checked {
    animation: none!important;
    transform: rotate(0deg) scale(1)!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    display:none;
    right: -8px;
    top: -8px;
}

.wf-place-loading {
    animation: none!important;
    transform: rotate(-45deg) scale(1)!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
}
@-webkit-keyframes mypulse2 {
	0% {
        -webkit-transform: rotate(-45deg) scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

	70% {
        -webkit-transform: rotate(-45deg) scale(1.05);
		-webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.2);
	}

	100% {
        -webkit-transform: rotate(-45deg) scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}
@keyframes mypulse2 {
	0% {
        transform: rotate(-45deg) scale(1);
        -moz-box-transform: rotate(-45deg) scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

	70% {
        transform: rotate(-45deg) scale(1.05);
        -moz-box-transform: rotate(-45deg) scale(1.05);
		box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
	}

	100% {
        transform: rotate(-45deg) scale(1);
        -moz-box-transform: rotate(-45deg) scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}

.wf-place-pin-small label {
    font-size: 1rem;
}

.wf-place-pin-loading > span {
    cursor: pointer;
    background-color: #18191A;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF
}
.wf-place-pin-loading > span::after {
    cursor: pointer;
    display: table-cell;
    font-style: normal;
    font-variant: normal;
    font-size: 1rem;
    color: white;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position:relative;
    text-align:center;
    vertical-align:middle;
    animation: fa-spin 2s ease-in-out infinite;
}

.wf-place-pin-checked > span {
    cursor: pointer;
    background-color: #18191A;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF
}

.wf-place-pin-checked > span::after {
    cursor: pointer;
    display: table-cell;
    font-style: normal;
    font-variant: normal;
    font-size: 1rem;
    color: white;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
    content: "\f00c";
    transform: rotate(-45deg);
    width: 2rem;
    height: 2rem;
    position:relative;
    text-align:center;
    vertical-align:middle;
}

.wf-place-pin-small > span {
    cursor: pointer;
    background-color: #18191A;
    width: 20px;
    height: 20px;
    display: block;
    left: -10px;
    top: -10px;
    position: relative;
    border-radius: 20px 20px 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF;
}

.wf-place-pin-smaller > span {
    cursor: pointer;
    background-color: #18191A;
    width: 1.0rem;
    height: 1.0rem;
    display: block;
    left: -0.5rem;
    top: -0.5rem;
    position: relative;
    border-radius: 1rem 1rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF;
}

.wf-place-pin-new > span {
    visibility: hidden;
    cursor: pointer;
    background-color: #AAAAAA;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF;
}

.wf-map-filter-container {
    display:flex;
    margin-bottom: 10px;
}
.wf-map-filter-button {
    margin-right: 5px;
    min-width: 100px;
    height: 40px;
    background-color: white;
    border-radius: 20px;
    border-style: solid;
    border-color: #CCCCCC;
    border-width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.wf-map-filter-button-active {
    background-color: black;
    color: white;
}

#osm-map-select,
#osm-map {
    background-color: #18191A;
    z-index: 0;
}
.wf-image-with-modal {
    position: relative;
    z-index: 4;
}
.wf-image-with-modal > img {
  cursor: pointer;
  transition: 0.3s;
}

.wf-image-with-modal > img:hover {opacity: 0.7;}

/* The Modal (background) */
.img-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.img-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}


/* Add Animation */
.img-modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.img-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1!important;
  font-size: 40px!important;
  font-weight: bold;
  font-style: normal!important;
  font-family: Arial, sans-serif!important;
  line-height: 1!important;
  transition: 0.3s;
}

.img-modal-close:hover,
.img-modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .img-modal-content {
    width: 100%;
  }
}

@media (min-width: 600px) {
    .wf-place-post-list,
	#wf-visible-places {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
    .wf-place-post-list,
	#wf-visible-places {
		grid-template-columns: repeat( 4, 1fr );
	}
    .wf-new-marker-circle > div:hover {
        transform: scale(1.2);
        color: #18191A;
    }

    .wf-place-marker-tooltip  {
        min-width: 300px;
        max-width: 300px;
        border-radius: 10px;
        padding: 0px;
    }
}
@media only screen and (max-width: 600px) {

    .wf-place-marker-tooltip .leaflet-popup-content-wrapper{
        background-color: #18191A;
        border: none;
        border-radius: 10px;
    }
    .wf-place-marker-tooltip .leaflet-popup-tip {
        background-color: #18191A;
    }
    .wf-place-marker-tooltip .leaflet-popup-content {
        background-color: white;
        border-radius: 10px;
        margin: 0;
    }
    .wf-place-marker-tooltip  {
        border-radius: 10px;
    }
    .wf-place-details {
        flex-flow: column nowrap;
    }
    .wf-place-details > .wf-place-image {
        margin: 0px;
        width: 80%;
    }
  .wf-form,
  .wf-popup > div {
    width: 100%!important;
    max-width: 100%!important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .wf-form-form {
    width: 100%!important;
    max-width: 100%!important;
    padding: 0 6px !important;
    box-sizing: border-box;
  }

  /* Override any theme page container that constrains form width */
  body:has(.wf-form-form) > .sidebar,
  body:has(.wf-form-form) > div > .sidebar {
    display: none !important;
  }
  .default-page:has(.wf-form-form),
  .default-page-content:has(.wf-form-form),
  .entry-content:has(.wf-form-form),
  .site-main:has(.wf-form-form),
  .content-area:has(.wf-form-form),
  article:has(.wf-form-form) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .wf-form fieldset {
    padding: 5px 0;
  }

  .wf-form,
  .entry-content .wf-form {
    padding: 0 !important;
    margin: 0;
    padding-left: 0 !important;
  }

  .wf-field {
    padding: 5px 0;
  }

  .wf-progressbar {
      margin-bottom: 5px;
  }

  .wf-progressbar li:not(.last-active):before {
      content: "";
      width:10px;
      height:10px;
      position:relative;
      top: 10px;
  }

  .wf-label,
  .wf-standard-form .wf-label {
      width: 100%!important;
      float: none;
      margin-bottom: 5px;
  }
  .wf-input,
  .wf-standard-form .wf-input {
      width: 100%!important;
      float: none;
  }

  /* Mobile-friendly TinyMCE toolbar buttons */
  .mce-toolbar .mce-btn {
      min-width: 48px;
      min-height: 48px;
      border: 1px solid rgba(128, 128, 128, 0.3) !important;
      border-radius: 6px !important;
      margin: 2px !important;
  }
  .mce-toolbar .mce-btn button {
      min-width: 48px;
      min-height: 48px;
      padding: 10px !important;
  }
  .mce-toolbar .mce-btn .mce-ico {
      font-size: 20px;
  }
  .mce-toolbar .mce-btn-group {
      padding: 2px !important;
  }
  .mce-toolbar-grp .mce-flow-layout {
      overflow-x: auto;
  }

  .wf-edit-table i {
      padding-left:0px;
  }
  .wf-multi-file-container {
      width: 100%;
  }

  .wf-place-tabs {
      flex-flow: column nowrap;
      width: 100%;
      align-items: stretch;
  }
  .wf-place-tabs > .tab {
      z-index: 1;
      display: flex;
      margin-bottom: 20px;
  }
  .wf-place-tabs > .tab > button {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
  }
  .wf-place-tabs > .tab label {
      top: 5px;
      left: 20px;
  }
  .wf-place-tabs > .tabcontent {
      width: 100%;
  }
  .wf-place-tabs .tablinks > span {
      display:none;
  }
  .wf-place-heading {
      position: sticky;
      margin-bottom: 0px;
  }
  .wf-place-actions h1 {
      font-size: 15px!important;
  }
  .wf-place-image {
      width: 20%;
  }

  .wf-place-actions-dropdown {
      position: relative;
  }

  .wf-place-actions-dropdown > button:hover,
  .wf-place-actions-dropdown > button:active,
  .wf-place-actions-dropdown > button:focus,
  .wf-place-actions-dropdown > button {
      background-color: white!important;
      color: #18191A!important;
  }

  .wf-place-action-buttons {
      display: none;
      position: absolute;
      width: auto;
      right: 5px;
      background-color: #f1f1f1;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  .wf-place-action-button {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  .show {
      display:block;
  }
  #wf-osm-marker-loading {
        right: -3px;
        bottom: 50px;
    }

}
/* Style the tab */
.tab {
  float: left;
  background-color: white;
  height: 100%;
  top: 0;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 16px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  margin: 4px 0;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #18191A99;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #18191A;
  color: white;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 90%;
  height: 100%;
}


#comments {
    margin: 50px 0;
}

.wp-block-video {
    margin-top: 29px;
    margin-bottom: 29px;
}

fieldset.wf-fieldset {
    border: solid 1px #aaa;
}

/* ========== Dark Mode Support ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --wf-bg: #1a1a1a;
        --wf-bg-alt: #2d2d2d;
        --wf-text: #e0e0e0;
        --wf-border: #404040;
    }
}
body.dark-mode {
    --wf-bg: #1a1a1a;
    --wf-bg-alt: #2d2d2d;
    --wf-text: #e0e0e0;
    --wf-border: #404040;
}

@media (prefers-color-scheme: dark) {
    .wf-form fieldset,
    .wf-form .condition:hover,
    .wf-form .condition:focus,
    .wf-autocomplete-input li,
    .wf-pagination-panel,
    .wf-edit-no-element,
    .wf-place-image-container,
    .wf-marker-popup-content,
    .wf-marker-popup-text > div:first-child,
    .wf-country-dropdown,
    .tab {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }

    .wf-form .condition {
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    .wf-pagination-btn,
    .dropdown-content div,
    .tablinks {
        color: var(--wf-text, #e0e0e0) !important;
    }

    .wf-map-filter-button {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    /* WP Editor */
    .wp-editor-wrap,
    .wp-editor-container,
    .wp-editor-tools {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        border-color: var(--wf-border, #404040) !important;
    }
    .wp-editor-area {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .wp-switch-editor {
        background-color: var(--wf-bg, #1a1a1a) !important;
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    /* TinyMCE toolbar and all wrappers */
    .mce-tinymce,
    .mce-container,
    .mce-panel,
    .mce-stack-layout,
    .mce-stack-layout-item,
    .mce-edit-area,
    .mce-toolbar .mce-btn-group,
    .mce-container-body,
    .mce-menubar,
    .mce-toolbar-grp,
    .mce-flow-layout,
    .mce-statusbar {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        border-color: var(--wf-border, #404040) !important;
    }
    .mce-container-body button,
    .mce-widget button,
    .mce-btn button {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .mce-container-body button:hover,
    .mce-container-body button:active,
    .mce-btn:hover button {
        background-color: var(--wf-border, #404040) !important;
    }
    .mce-ico {
        color: var(--wf-text, #e0e0e0) !important;
    }

    /* Upload dropzone */
    .wf-file-upload-dropzone,
    .wf-multi-file-uploader-btn {
        border-color: var(--wf-border, #404040) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .img-container {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }

    /* Form inputs */
    .wf-form input:not([type="button"]):not([type="submit"]),
    .wf-form select,
    .wf-form textarea {
        background-color: var(--wf-bg, #1a1a1a) !important;
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    .wf-form label,
    .wf-label label,
    .wf-help,
    .wf-form p,
    .wf-form span,
    .wf-form .wf-field,
    .wf-form h1, .wf-form h2, .wf-form h3, .wf-form h4 {
        color: var(--wf-text, #e0e0e0) !important;
    }

    fieldset.wf-fieldset,
    .wf-form fieldset,
    .wf-form-form fieldset {
        border-color: var(--wf-border, #404040) !important;
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
    }

    /* Popup containers */
    .wf-popup [class*="popup-contents-"] {
        background-color: var(--wf-bg, #1a1a1a) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .wf-popup {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
}

body.dark-mode .wf-form fieldset,
body.dark-mode .wf-form .condition:hover,
body.dark-mode .wf-form .condition:focus,
body.dark-mode .wf-autocomplete-input li,
body.dark-mode .wf-pagination-panel,
body.dark-mode .wf-edit-no-element,
body.dark-mode .wf-place-image-container,
body.dark-mode .wf-marker-popup-content,
body.dark-mode .wf-marker-popup-text > div:first-child,
body.dark-mode .wf-country-dropdown,
body.dark-mode .tab {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-form .condition {
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wf-pagination-btn,
body.dark-mode .dropdown-content div,
body.dark-mode .tablinks {
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-map-filter-button {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wp-editor-wrap,
body.dark-mode .wp-editor-container,
body.dark-mode .wp-editor-tools {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wp-editor-area {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wp-switch-editor {
    background-color: var(--wf-bg, #1a1a1a) !important;
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .mce-tinymce,
body.dark-mode .mce-container,
body.dark-mode .mce-panel,
body.dark-mode .mce-stack-layout,
body.dark-mode .mce-stack-layout-item,
body.dark-mode .mce-edit-area,
body.dark-mode .mce-toolbar .mce-btn-group,
body.dark-mode .mce-container-body,
body.dark-mode .mce-menubar,
body.dark-mode .mce-toolbar-grp,
body.dark-mode .mce-flow-layout,
body.dark-mode .mce-statusbar {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .mce-container-body button,
body.dark-mode .mce-widget button,
body.dark-mode .mce-btn button {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .mce-container-body button:hover,
body.dark-mode .mce-container-body button:active,
body.dark-mode .mce-btn:hover button {
    background-color: var(--wf-border, #404040) !important;
}
body.dark-mode .mce-ico {
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-file-upload-dropzone,
body.dark-mode .wf-multi-file-uploader-btn {
    border-color: var(--wf-border, #404040) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .img-container {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-form input:not([type="button"]):not([type="submit"]),
body.dark-mode .wf-form select,
body.dark-mode .wf-form textarea {
    background-color: var(--wf-bg, #1a1a1a) !important;
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wf-form label,
body.dark-mode .wf-label label,
body.dark-mode .wf-help,
body.dark-mode .wf-form p,
body.dark-mode .wf-form span,
body.dark-mode .wf-form .wf-field,
body.dark-mode .wf-form h1,
body.dark-mode .wf-form h2,
body.dark-mode .wf-form h3,
body.dark-mode .wf-form h4 {
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode fieldset.wf-fieldset,
body.dark-mode .wf-form fieldset,
body.dark-mode .wf-form-form fieldset {
    border-color: var(--wf-border, #404040) !important;
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
}
body.dark-mode .wf-popup [class*="popup-contents-"] {
    background-color: var(--wf-bg, #1a1a1a) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-popup {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Edit form row injected after the clicked table row */
.wf-edit-form-row {
    background: transparent !important;
    box-shadow: none !important;
}
.wf-edit-form-row > td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}
.wf-edit-form-row:hover {
    background: transparent !important;
}

/* Edit popups: inline flow instead of fixed overlay */
#popup-wf_post_edit,
#popup-wf_product_edit,
#popup-wf_event_edit {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    z-index: auto !important;
    background-color: transparent !important;
}
.popup-contents-wf_post_edit,
.popup-contents-wf_product_edit,
.popup-contents-wf_event_edit {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 20px 10px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    background-color: inherit !important;
    border-radius: 0 !important;
}
#popup-wf_post_edit .wf-form,
#popup-wf_product_edit .wf-form,
#popup-wf_event_edit .wf-form {
    background: inherit !important;
}
#popup-wf_post_edit .wf-form fieldset,
#popup-wf_product_edit .wf-form fieldset,
#popup-wf_event_edit .wf-form fieldset {
    background: inherit !important;
    border-color: inherit !important;
}
#popup-wf_post_edit .wf-form fieldset legend,
#popup-wf_product_edit .wf-form fieldset legend,
#popup-wf_event_edit .wf-form fieldset legend {
    background: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}
#popup-wf_post_edit .wf-popup-end-filler,
#popup-wf_product_edit .wf-popup-end-filler,
#popup-wf_event_edit .wf-popup-end-filler {
    display: none !important;
}

/* Service fields builder */
#wm-service-fields-builder .wm-service-field-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#wm-service-fields-builder .wm-service-field-row input[type="text"] {
    flex: 1;
    min-width: 150px;
}
#wm-service-fields-builder .wm-service-field-row select {
    min-width: 100px;
}
#wm-service-fields-builder .wm-service-field-row label {
    white-space: nowrap;
    font-size: 0.9em;
}
#wm-service-fields-builder .wm-remove-service-field {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#wm-add-service-field {
    margin-top: 8px;
    cursor: pointer;
}

/* Category builder */
#wf-new-categories-builder {
    width: 100%;
}
.wf-new-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.wf-new-cat-inputs {
    flex: 1;
    display: flex;
    gap: 8px;
}
.wf-new-cat-inputs input[type="text"] {
    flex: 1;
}
.wf-new-cat-inputs select {
    flex: 1;
}
.wf-new-cat-remove {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
#wf-add-new-cat {
    margin-top: 4px;
    cursor: pointer;
}

/* Category tabs */
.wf-category-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 5px;
}
.wf-form .wf-category-tabs button.wf-cat-tab,
button.wf-cat-tab {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #ccc !important;
    border-bottom: 2px solid #ccc !important;
    background: #f0f0f0 !important;
    color: #888 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    outline: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    line-height: 1.4;
}
.wf-form .wf-category-tabs button.wf-cat-tab:first-child,
button.wf-cat-tab:first-child {
    border-right: 1px solid #ccc !important;
}
.wf-form .wf-category-tabs button.wf-cat-tab:last-child,
button.wf-cat-tab:last-child {
    border-left: 1px solid #ccc !important;
}
.wf-form .wf-category-tabs button.wf-cat-tab:hover,
button.wf-cat-tab:hover {
    background: #e4e4e4 !important;
    color: #555 !important;
}
.wf-form .wf-category-tabs button.wf-cat-tab.active,
button.wf-cat-tab.active {
    background: #fff !important;
    color: #333 !important;
    border-bottom-color: #fff !important;
    border-top-color: #999 !important;
    border-left-color: #999 !important;
    border-right-color: #999 !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .wf-form .wf-category-tabs button.wf-cat-tab,
    button.wf-cat-tab {
        background: #1a1a1a !important;
        color: #777 !important;
        border-color: #404040 !important;
    }
    .wf-form .wf-category-tabs button.wf-cat-tab:hover,
    button.wf-cat-tab:hover {
        background: #252525 !important;
        color: #bbb !important;
    }
    .wf-form .wf-category-tabs button.wf-cat-tab.active,
    button.wf-cat-tab.active {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-bottom-color: #2d2d2d !important;
        border-top-color: #555 !important;
        border-left-color: #555 !important;
        border-right-color: #555 !important;
    }
}
body.dark-mode .wf-form .wf-category-tabs button.wf-cat-tab,
body.dark-mode button.wf-cat-tab {
    background: #1a1a1a !important;
    color: #777 !important;
    border-color: #404040 !important;
}
body.dark-mode .wf-form .wf-category-tabs button.wf-cat-tab:hover,
body.dark-mode button.wf-cat-tab:hover {
    background: #252525 !important;
    color: #bbb !important;
}
body.dark-mode .wf-form .wf-category-tabs button.wf-cat-tab.active,
body.dark-mode button.wf-cat-tab.active {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-bottom-color: #2d2d2d !important;
    border-top-color: #555 !important;
    border-left-color: #555 !important;
    border-right-color: #555 !important;
}

/* Status label beneath title */
.wf-status-label {
    font-size: 0.75em;
    opacity: 0.6;
    letter-spacing: 0.02em;
}

/* Portrait mode — post overview table full width */
@media (orientation: portrait) {
    .wf_edit_posts_overview {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .wf-edit-table {
        width: 100% !important;
    }

    .wf-edit-table tr td:nth-child(1) {
        width: 44px;
    }

    .wf-edit-table tr td:nth-child(1) img {
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 6px;
    }

    /* Actions column — fixed width, right-aligned */
    .wf-edit-table tr td:last-child {
        width: 90px;
        text-align: right !important;
        white-space: nowrap;
    }

    .wf-edit-table tr td {
        min-height: 50px !important;
        padding: 4px !important;
    }
}

/* Both orientations — full width table with buttons on right */
.wf_edit_posts_overview,
.wf_edit_products_overview,
.wf_edit_events_overview {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.wf-edit-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

.wf-edit-table tr td:last-child {
    text-align: right !important;
    white-space: nowrap;
    padding-right: 0 !important;
}