/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.2.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* styles.css */
@import url("https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap");

#print-area {
  border: 0.5px solid #8e8e8e;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 10px;
}

body {
  font-family: "Outfit", sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

.element-wrapper {
  margin-bottom: 10px;
}

.selected-output {
  margin-bottom: 10px;
  margin-top: 25px;
  font-weight: 500 !important;
  font-size: 20px;
}

.selected-output:nth-of-type(5) {
  border-bottom: none !important;
}

.selected-output:nth-of-type(1) {
  margin-top: 10px !important;
}

.izberi {
  padding-right: 30px;
  cursor: pointer !important;
  outline: none;
  font-size: 20px;
}

button {
  font-weight: 400 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  border: none;
  border-radius: 16px !important;
  outline: none !important;
  margin: 10px 0;
  padding: 8px 24px !important;
  cursor: pointer;
}

button:hover {
  box-shadow: none;
}

.black-btn {
  color: #fff;
  background-color: #000;
  padding: 8px 24px !important;
  height: 50px;
}

.black-btn:hover,
.black-btn:focus,
.black-btn:active {
  color: #fff;
  background-color: #000;
}

.white-btn {
  padding: 0 !important;
  border: none;
}

.white-btn:hover,
.white-btn:focus,
.white-btn:active {
  color: #000;
  background-color: transparent;
  padding: 0 !important;
  border: none;
  box-shadow: none;
}

.white-btn img {
  border-radius: 100%;
  width: 40px;
  height: 40px;
}

.white-btn img:hover {
  box-shadow: none;
}

.outline-btn {
  border: 0.5px solid #8e8e8e;
  color: #010101;
}

.outline-btn:hover,
.outline-btn:focus,
.outline-btn:active {
  color: #010101;
  background-color: transparent;
}

#shraniSpremembeBtn,
#submitBtn {
  right: 20px !important;
}

.red-btn {
  position: absolute;
  right: 0;
  color: #fff;
  background-color: #146ef5;
  border: none;
}

.red-btn:hover,
.red-btn:focus,
.red-btn:active {
  color: #fff;
  background-color: #146ef5;
}

.submit {
  margin-top: 30px;
}

.status-publish.hentry
  > div
  > div
  > div
  > div
  > div.wrapper
  > div.popup-window-wrapper {
  justify-content: flex-start;
}

#openPopup {
  margin-right: 10px;
}

.popup-window-wrapper,
.btn-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn-wrapper-1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn-wrapper-1 * {
  margin-right: 10px;
}

.highlight {
  font-family: Outfit;
  text-transform: uppercase;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  color: var(--Color-Primary---Black, #0f0f0f);
}

form {
  border: 0.5px solid #8e8e8e;
  border-radius: 20px;
  padding: 20px;
}

.black-title {
  color: #010101;
  text-transform: uppercase;
  font-size: 20px;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: none;
  border-radius: 5px;
  padding: 15px;
}

.selected-output {
  background-color: #fff;
  border: none;
  border-radius: 5px;
}

.form-wrapper {
  border: 0.5px solid #8e8e8e;
  border-radius: 20px;
  padding: 15px;
}


/* Print styles */
@media screen {
  .small-text {
    display: none;
  }
}

@media print {
  .small-text {
    font-style: italic;
    display: block;
    font-size: 9pt !important;
    font-family: "Outfit" !important;
  }

  .highlight,
  .selected-output {
    font-size: 12pt !important;
    font-family: "Outfit" !important;
  }

  #print-area,
  #print-area * {
    font-size: 12pt !important;
    font-family: "Outfit" !important;
  }

  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

}

/* Reset default styles */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 5px;
  padding: 0;
  padding-right: 30px;
  background: #fff;
  cursor: pointer;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  padding: 0;
}

#cena-wrapper {
  margin-bottom: 0;
}

/* Add custom styles for dropdown arrow */
select::-ms-expand {
  display: none;
}

label {
  color: var(--Color-Secondary---Gray---Dark, #8e8e8e);

  /* Text Small */
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
}

.element-wrapper:not(:last-of-type),
.selected-output:not(:last-of-type) {
  border-bottom: 0.5px dashed #8e8e8e;
  border-radius: 0;
}

/* Specific styles for selected options and placeholders */
select option {
  color: #000; /* Ensure option text color is black */
}

select:focus {
  color: #000; /* Ensure focused text color is black */
}

select option:checked {
  color: #000; /* Ensure checked option text color is black */
}

select option::placeholder {
  color: #000; /* Ensure placeholder text color is black */
}

/* Ensure the date picker input matches other inputs */
input[type="date"].flatpickr-input {
  -webkit-appearance: none; /* Override default styling on iOS */
  -moz-appearance: none; /* Override default styling on Firefox */
  appearance: none; /* Override default styling */
  border: none;
  border-radius: 5px;
  padding: 15px;
  background: #fff;
  color: #000;
  width: 100%; /* Make it full width like other fields */
  box-sizing: border-box; /* Ensure padding is included in the width */
  cursor: pointer;
}

/* Add specific styles for the Flatpickr input */
.flatpickr-input {
  color: #000; /* Ensure text color is black */
  background: #fff; /* Ensure background color matches other inputs */
  cursor: pointer;
  border-radius: 5px; /* Ensure border radius is consistent */
  border: none; /* Remove border */
}

/* Style the Flatpickr calendar to match your theme if needed */
.flatpickr-calendar {
  font-family: "Outfit", sans-serif;
}

/* Ensure that the Flatpickr input is styled correctly even in focus */
.flatpickr-input:focus {
  outline: none; /* Remove default outline */
  border: none;
}

/* Additional styling to make sure the container aligns properly */
.custom-select {
  position: relative;
  /*display: inline-block; */
  display: flex;
  width: 100%;
  direction: ltr; /* Set container direction back to left-to-right */
}

/* Sort icon WIP */
.custom-select button {
  background-color: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.custom-select img {
  width: 40px;
  height: 40px;
}

@media only screen and (max-width: 767px) {
  .popup-window.open {
    width: 80% !important;
  }

  .red-btn {
    margin-right: 10px;
  }
}

/**
* NOV STYLE ZA VSE 4 POPUPE: Dodajanje/urejanje dogodkov, dodajanje/urejanje vrst vstopnic
*/

/* DDODAJANJE VRST VSTOPNIC */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.popup-window {
  position: fixed;
  top: 0;
  right: -50%; /* Hidden initially */
  width: 33%;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.7);
  z-index: 20;
  padding: 73px 20px;
  box-sizing: border-box;
  transition: right 1s ease;
}

/* Open state of the popup */
.popup-window.open {
  right: 0; 
}

/* Style za nav menu item */
.elementor-nav-menu--layout-vertical > ul > li > .menu-add-popup,
.elementor-nav-menu--layout-vertical > ul > li > .popup-link {
  color: #fff !important;
  text-transform: uppercase;
  margin: 0 10px !important;
  padding: 0 !important;
  border-bottom: 1px solid transparent;
}

.elementor-nav-menu--layout-vertical > ul > li > .menu-add-popup:hover,
.elementor-nav-menu--layout-vertical > ul > li > .popup-link:hover {
  width: fit-content !important;
  border-bottom: 1px solid white !important;
}

.gumb-shrani {
  margin-right: 20px !important;
}

#izberi-vv {
  border-bottom: 0.5px dashed #8e8e8e;
  border-radius: 0;
  margin-bottom: 10px;
}

#open-dodajanje-d-btn {
  margin-right: 10px;
}

.gumb-izbrisi,
.gumb-izbrisi:hover,
.gumb-izbrisi:focus,
.gumb-izbrisi:active {
  color: #8e8e8e;
  line-height: 16px !important;
  font-weight: 300 !important;
  padding: 1px 0 !important;
  background-color: transparent;
  border-bottom: 1px solid #8e8e8e;
  border-radius: 0 !important;
  box-shadow: none;
  height: 22px;
  margin-bottom: 20px;
  margin-top: 8px;
}

.popup-field {
  padding: 0 !important;
  outline: none !important;
  background-color: transparent;
}

.popup-field:not(:last-of-type) {
  margin-bottom: 10px;
  border-bottom: 0.5px dashed #8e8e8e !important;
  border-radius: 0 !important;
}


/* SORTIRANJE */
.sortiranje {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.sortiranje li {
    margin: 5px 0;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    cursor: move;
}

.sortiranje li:hover {
    background-color: #bebebe;
}

.sort-button {
    color: #000;
}

.sort-button:hover {
    background-color: #146ef5;
}

.sort-button:focus {
    background-color: #bebebe;
}

.scrollable-container {
    max-height: 600px; /* Adjust this height as needed */
    overflow-y: auto; /* Adds vertical scrolling when content exceeds the container's height */
    border: 1px solid #ddd; /* Optional: Add a border for better visibility */
    padding: 10px; /* Optional: Padding for spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for aesthetics */
}

@media screen and (max-height: 790px) {
    .container {
      padding: 10px;
    }
  }