// uvoz liteness-icons
@use "/resources/fonts/liteness-icons/style.css";
// WARNING: brez tega ne delajo @extend klici slogov liteness-icons

// SCSS variables
@use "variables" as *;

// Fonts - za stranke, ki fontov ne morejo dobiti iz Google fonts
@use "/resources/fonts/bauhaus-std/bauhaus-std.css";
// Firma Kids
// Herbal Whisper (pobran in Google fonts in dodani šumniki)
@use "/resources/fonts/galdeano/galdeano.css";
// WARNING: pazi, da Galdeano ne uvoziš tudi iz Google Fonts, ker tam nima vseh šumnikov
// Pozejdon turizem
@use "/resources/fonts/trajan-pro/stylesheet.css";

// Material icons from google fonts
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 200, 'opsz' 48;
}

/* vse fonte naložimo neposredno iz Google fonts, da se nam ne kompajlirajo v minimiran fajl (razen, če fonta ni tam) */
@import url("#{'https://fonts.googleapis.com/css2'
    + '?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800'
    + '&family=Commissioner:wght@100;200;300;400;500;600;700;800;900'
    + '&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700'
    + '&family=Dosis:wght@200;300;400;500;600;700;800'
    + '&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700'
    + '&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900'
    + '&family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000'
    + '&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000'
    + '&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700'
    + '&family=Pattaya&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900'
    + '&family=Rum+Raisin&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900'
    + '&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900'
    + '&family=Rosario:ital,wght@0,300..700;1,300..700'
    + '&family=Winky+Sans:ital,wght@0,300..900;1,300..900'
    + '&family=Eczar:wght@400..800'
    + '&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900'
    + '&family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900'
    + '&family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900'
    + '&family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900'
    + '&family=Reddit+Sans+Condensed:wght@200..900'
    + '&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900'
    + '&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900'
    + ''
    + '&display=swap'}");

// region .......... DEFINICIJA CSS SPREMENLJIVK; lahko jih pa uporabljamo tudi v ostalih .scss datoteka; lahko jih povozimo v ostalih scss datotekah ali pa v head_style.blade.php
:root {
  --mnm-page-max-width-px: unset;
  --mnm-font-size: unset;
  --mnm-line-height: unset;
  --mnm-padding-unit-px: unset;
  --mnm-radius-base-px: unset;
  --mnm-color-background: unset;
  --mnm-color-text: unset;
  --mnm-color-headings: unset;
  --mnm-color-links: unset;
  --mnm-color-borders: unset;
  --mnm-padding-factor: 1.0;
  --mnm-data-input-border-radius: 4px;
}

.mnm-title-tooltip {
  background: #ffffff;
  border: 1px solid #767676;
  border-radius: 2px;
  box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.32);
  color: #1f1f1f;
  font-size: 0.82rem;
  left: 0;
  line-height: 1.25;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.25rem 0.45rem;
  pointer-events: none;
  position: fixed;
  top: 0;
  white-space: pre-line;
  width: max-content;
  z-index: 10000;
}

.mnm-title-tooltip[hidden] {
  display: none;
}
// endregion .......... DEFINICIJA SPREMENLJIVK

// region .......... DEFAULT SLOGI DOLOČENIH ELEMENTOV

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box; // s tem določimo, da širina elementa vključuje tudi črte
}
body {
  margin: 0 !important;
  min-width: var(--mnm-page-min-width-px); // to je absolutno najmanjša širina, ki jo še dopuščamo; če ima telefon samo 320px, bodo morali scrollati oz. se bo naredil zoom
  box-sizing: border-box; // s tem določimo, da širina elementa vključuje tudi črte
}

html, body, button, input, textarea, select, option, .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before, .vue-dropzone,
.v-select, .vs__selected, .vs__search, .dp--main, .dp--input, .mnm-data-input-container > .mce-content-body,  {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 15px; // na spletu se to povozi s spremenljivko --mnm-font-size
  line-height: 1.6; // na spletu se to povozi s spremenljivko --line-height
  color: black;
  overflow-wrap: anywhere; // s tem dovolimo deljenje besed, ki bi sicer zavzemale več kot je razpoložljive širine elementa (npr. linki so taki)
}
:focus-visible:not(.vs__search):not(.dp--input) {
  box-shadow: 0 0 10px 3px #77777766 !important;
  outline: none;
  outline-offset: unset;
}
button {
  cursor: pointer;
}
pre {
  margin: 0;
  white-space: pre-wrap;
}
a {
  color: #444444;
  opacity: 1;
  text-decoration: none;

  &:hover {
    opacity: 0.8;
  }
  &:active {
    background-color: #77777733 !important;
  }
}

h1, h2, h3, h4, h5, h6, .mnm-web-page-header_sticky, {
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  // font-family: 'Fira Sans Condensed', Helvetica, Arial, sans-serif;
  // font-family: 'Reddit Sans Condensed', Helvetica, Arial, sans-serif;
  // font-family: 'Fira Sans Extra Condensed', Helvetica, Arial, sans-serif;
  // font-family: 'Encode Sans Condensed', Helvetica, Arial, sans-serif;
  // font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
  font-weight: 300;
  break-after: avoid; // da nam, če je besedilo v več stolpcih, naslov ne ostane na koncu stolpca
  //&:first-child, &:last-child {
  //  margin-top: 0; // to zato, ker nočemo dodatnih razmikov v elementu, če pa se naslov pojavi med besedilom, pa seveda ja
  //  margin-bottom: 0; // to zato, ker nočemo dodatnih razmikov v elementu, če pa se naslov pojavi med besedilom, pa seveda ja
  //}
  a {
    color: inherit;
    text-decoration: none;
  }
}
h1 {
  font-size: 3.50em;
  @media #{$mobile} { font-size: 2.80em; }
}
h2 {
  font-size: 2.90em; // = h1 / 1,2
  @media #{$mobile} { font-size: 2.30em; }
}
h3 {
  font-size: 2.40em;
  @media #{$mobile} { font-size: 1.90em; }
}
h4 {
  font-size: 2.00em;
  @media #{$mobile} { font-size: 1.60em; }
}
h5 {
  font-size: 1.70em;
  @media #{$mobile} { font-size: 1.40em; }
}
h6 {
  font-size: 1.40em;
  @media #{$mobile} { font-size: 1.20em; }
}
p {
  margin: 0;
  padding: 0;
}
figure {
  margin: 0;
}
ul {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 2em;
}
ol {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 1.8em;
  li::marker {
    font-variant-numeric: proportional-nums;
  }
}
option {
  padding: 0;
}
strong {
  font-weight: 600;
}

// odstranimo spin button za inpute tipa number
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  text-align: right;
  -moz-appearance: textfield;
}

table {
  border-spacing: 0;
  &:not(.mnm-product-variant-matrix) {
    font-size: 92%;
  }
}
td, th {
  padding: 0.3em 1em 0.3em 0.0em;
}
th {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}


// endregion

// region .......... OVERRIDE CLASSOV KOMPONENT

// tinymce
.mce-content-body {
  overflow: auto; // dne 2025-01-20 se nam je iz neznanih razlogov višek teksta začel izpisovati izven data-input textarea z določeno višino namesto da bi se pojavil pomikalni trak
}
.tox-tinymce-inline {
  width: max-content !important;
}
.tox-silver-sink .tox-toolbar__overflow {
  z-index: 2 !important;
}
.tox-silver-sink .tox-tooltip {
  z-index: 1 !important;
}
.tox-toolbar__group {
  padding: 2px 0 2px 2px !important;
}
.tox-tbtn, .tox-split-button {
  margin: 2px 1px 2px 0 !important;
}
.tox-toolbar__overflow {
  padding: 0 !important;
}
.tox-toolbar__primary, .tox-toolbar {
  // justify-content: center !important;
  margin-left: 6px !important;
}
.tox-toolbar__overflow {
  padding: 0 4px !important;
}
.tox-tbtn:focus:not(.tox-tbtn:hover) {
  background-color: transparent !important; // če tega ne naredimo, se po odprtju toolbara prvi gumb označi, kot da je hover, pa ni
}
.tox-pop .tox-pop__dialog .tox-toolbar {
  // background-position: center top 38px !important;
  // background-image: repeating-linear-gradient(#e3e3e3 0 1px, transparent 1px 38px) !important;
  background-image: none; // črt v toolbaru nikakor ne uspemo spraviti na svoje mesto, zato jih kar ukinemo
}
.tox-editor-header {
  z-index: 1000 !important; // da se nam tiny toolbar napopa preko elementa, ki ga trenutno urejamo v EditDialogu (ker lahko hkrati urejamo tudi besedilo v njem)
}

// sweetalert
.swal2-backdrop-show {
  backdrop-filter: blur(5px);
}

// vue-select: glej https://vue-select.org/guide/css.html#available-css-variables-3-18
:root {
  --vs-dropdown-option-padding: 2px 4px;
}
.vs__selected-options {
  padding: 0;
}
.vs__spinner, .vs__spinner:after {
  width: 4.5em;
  height: 4.5em;
}
.vs--single.vs--open .vs__selected, .vs--single.vs--loading .vs__selected {
  position: relative;
  opacity: .2;
  max-width: 0;
  overflow-x: visible;
  white-space: nowrap;
}
.v-select.vs--open.vs--single.vs--searching .vs__selected {
  display: initial;
  opacity: 0;
}
.vs--single.vs--searching .vs__selected {
  display: initial;
}
.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
  display: none;
}

// vue-color
.vc-input__input {
  tab-index: -1;
}
.vc-sketch {
  display: flex;
  flex-direction: column;
  width: 250px !important;
}
.vc-sketch-presets {
  border-top: none !important;
  border-bottom: 1px solid #DDDDDD;
  padding-top: 0px !important;
  margin-bottom: 10px;
  white-space: normal;
  order: 1;
}
.vc-sketch-saturation-wrap {
  order: 2;
}
.vc-sketch-controls {
  order: 3;
}
.vc-sketch-field {
  order: 4;
}

// dropzone
.dz-default.dz-message button.dz-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.0em;
  gap: 1em;
  .icon-plus {
    font-size: 2.5em;
  }
}
.dz-success-mark, .dz-error-mark, .dz-remove, .dz-details, .dz-error-message {
  display: none; // teh elementov nikoli ne želimo videti v dropboxu, ker jih sami hendlamo
}
.dz-image > img {
  max-width: 90px;
  max-height: 90px;
}

// spotlight https://github.com/nextapps-de/spotlight#custom-styling
#spotlight {
  /* main font styles, background */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.spotlight {
  cursor: zoom-in;
}
.spl-page {
  order: 1;
  border-bottom-right-radius: 0.5em;
  margin-right: auto;
}
.spl-zoom-out {
  order: 3;
  border-bottom-left-radius: 0.5em;
  @extend .icon-zoom-out-large;
  font-family: 'liteness-icons' !important;
  font-size: 1.4em;
  width: unset;
  height: unset;
  background-image: none;
}
.spl-zoom-in {
  order: 4;
  @extend .icon-zoom-in-large !optional;
  font-family: 'liteness-icons' !important;
  font-size: 1.4em;
  width: unset;
  height: unset;
  background-image: none;
}
.spl-autofit {
  order: 5;
  @extend .icon-maximize-2 !optional;
  font-family: 'liteness-icons' !important;
  font-size: 1.4em;
  width: unset;
  height: unset;
  background-image: none;
}
.spl-fullscreen {
  order: 6;
  @extend .icon-fullscreen !optional;
  font-family: 'liteness-icons' !important;
  font-size: 1.4em;
  width: unset;
  height: unset;
  background-image: none;
  &.on {
    @extend .icon-fullscreen-exit !optional;
    background-image: none;
  }
}
.spl-download {
  order: 7;
  @extend .icon-download !optional;
  font-family: 'liteness-icons' !important;
  font-size: 1.4em;
  width: unset;
  height: unset;
  background-image: none;
}
.spl-theme {
  order: 10;
}
.spl-play {
  order: 11;
}
.spl-close {
  order: 20;
  @extend .icon-close !optional;
  font-family: 'liteness-icons' !important;
  font-size: 1.4em;
  width: unset;
  height: unset;
  background-image: none;
}
.spl-prev {
  /* button page prev */
}
.spl-next {
  /* button page next */
}
.spl-spinner {
  /* preloading spinner */
}
.spl-spinner.spin {
  /* show spinner */
}
.spl-spinner.error {
  /* show loading error */
}
.spl-title {
  /* image title */
  //font-weight: lighter;
  font-size: 1em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.spl-description {
  /* image description */
  font-size: 0.85em;
  font-weight: lighter;
  margin-bottom: 1em;
}
.spl-button {
  /* button footer */
}
.spl-header {
  /* the header wrapping element */
  background-color: transparent;
  display: flex;
  justify-content: flex-end;
  div {
    display: flex;
    background-color: rgba(0, 0, 0, .45);
    color: #FFFFFF80;
    opacity: 1;
    padding: 1em;
    text-align: center;
    vertical-align: unset;
    justify-content: center;
    align-items: center;
    line-height: inherit;
  }
}
.spl-footer {
  /* the footer wrapping element */
  display: flex;
  flex-direction: column;
  right: unset;
  border-top-right-radius: 0.5em;
  padding: 0.7em 1.2em 0.3em 1em;
}
.spl-pane {
  [class^=icon-], [class*= icon-], .material-symbols-rounded {
    font-size: 5em;
  }
}
// endregion

// region .......... SPLOŠNI SLOGI, se lahko overridajo v posamičnih sekcijah in elementih

// poravnava levo, desno, na sredino
.align-left, .mnm-left, .left {
  display: flex;
  text-align: left;
  justify-content: flex-start;
  input, select {
    text-align: left;
  }
  .mnm-data-input-container {
    justify-content: flex-start;
  }
}
.align-center, .mnm-center, .center {
  display: flex;
  text-align: center;
  justify-content: center;
  input, select {
    text-align: center;
  }
  .mnm-data-input-container {
    justify-content: center;
  }
}
.align-right, .mnm-right, .right {
  display: flex;
  text-align: right;
  justify-content: flex-end;
  //&:not(input):not(select) {
  //  flex-grow: 1;
  //}
  .mnm-data-input-container {
    justify-content: flex-end;
  }
}
//input, select {
//  &.align-right, &.mnm-right, &.right {
//    text-align: right;
//  }
//}

// vertikatna poravnava na sredino
.mnm-middle {
  display: flex;
  align-items: center !important;
}
// vertikatna poravnava na sredino
.mnm-stretch {
  display: flex;
  align-self: stretch !important;
}

table {
  // ti classi znotraj tabele ne smejo imeti display: flex, ker to čisto podre tabelo
  .align-left, .mnm-left, .align-center, .mnm-center, .align-right, .mnm-right {
    display: table-cell;
  }
}

// tri stopnje opozoril oz. obvestil: warning (najmočnejša, praviloma rdeča), notice (praviloma oranžna) in info (najmanj pomembna, praviloma na beli podlagi)
.mnm-warning, .mnm-notice, .mnm-info, .mnm-success {
  display: inline-block !important; // WARNING: ne smemo uporabiti inline-flex, ker odstrani presledke okoli <i> in podobnih elementov znotraj besedila
  justify-content: flex-start;
  text-align: left;
  // display: flex !important;
  margin-top: calc(var(--mnm-padding-unit-px) * 0.25);
  padding: calc(var(--mnm-padding-unit-px) * 0.25);
  border-radius: 0.4em;
  border: 1px solid;
  &:before {
    // nastavitve ikone
    font-family: 'liteness-icons' !important;
    margin: -0.07em 0.5em -0.3em 0.15em; // WARNING: premajhen negativni top in bottom margin povzročita, da se besedilo v drugi vrstici ne izpiše pod ikono, česar ne želimo
    font-size: 1.2em;
    vertical-align: baseline;
    display: inline-block;
    float: left;
    height: 100%;
  }
}

.mnm-warning {
  background-color: var(--mnm-red);
  border-color: var(--mnm-white);
  color: var(--mnm-white);

  &:before {
    content: "\e011"; // prepisano iz liteness-icons/style.css, ker @extend za ucart-symbol-font ne deluje v Vite
  }

  h1, h2, h3, h4, h5, h6 {
    color: white !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
  }

  a {
    color: #CCCCCC;
    &:hover {
      color: #AAAAAA;
    }
  }
}
.mnm-notice {
  background-color: var(--mnm-orange);
  border-color: var(--mnm-white);
  color: var(--mnm-white);

  &:before {
    content: "\e010"; // prepisano iz liteness-icons/style.css, ker @extend za ucart-symbol-font ne deluje v Vite
  }
  h1, h2, h3, h4, h5, h6 {
    color: white !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
  }
}
.mnm-info {
  color: var(--mnm-green);
  border-color: var(--mnm-green);

  &:before {
    content: "\e909"; // prepisano iz liteness-icons/style.css, ker @extend za ucart-symbol-font ne deluje v Vite
  }
}
.mnm-success {
  color: var(--mnm-green);
  border-color: var(--mnm-green);

  &:before {
    content: "\ea7a"; // prepisano iz liteness-icons/style.css, ker @extend za ucart-symbol-font ne deluje v Vite
  }
}
.mnm-search {
  background-color: #ffffcc !important;
}

.mnm-help {
  font-size: 12px;
  font-weight: normal;
  > a:hover, > a:active, > a:focus {
    text-decoration: none;
  }
}
.mnm-me {
  // slog za obarvanje tistega uporabnika, ki je prijavljen
  color: #8c1d1d;
  font-weight: 600;
}
.mnm-disabled {
  // pointer-events: none;
  // background-color: var(--vs-state-disabled-bg, #77777726) !important;
  // color: (--vs-state-disabled-color, #44444480) !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

body:not(.mnm-editing) {
  .mnm-hidden {
    display: none !important;
    visibility: hidden !important;
  }
}
.swal2-html-container .mnm-hidden { display: block !important; visibility: initial !important;}

.mnm-flex { display: flex !important; }
.mnm-align-items-normal { align-items: normal !important; }
.mnm-align-items-flex-start { align-items: flex-start !important; }
.mnm-align-items-center { align-items: center !important; }
.mnm-align-items-flex-end { align-items: flex-end !important; }
.mnm-align-items-stretch { align-items: stretch !important; }
.mnm-align-content-normal { align-content: normal !important; }
.mnm-align-content-flex-start { align-content: flex-start !important; }
.mnm-align-content-center { align-content: center !important; }
.mnm-align-content-flex-end { align-content: flex-end !important; }
.mnm-align-content-stretch { align-content: stretch !important; }
.mnm-align-content-space-between { align-content: space-between !important; }
.mnm-align-content-space-evenly { align-content: space-evenly !important; }
.mnm-align-self-stretch { align-self: stretch !important; }
.mnm-justify-content-normal { justify-content: normal !important; }
.mnm-justify-content-flex-start { justify-content: flex-start !important; }
.mnm-justify-content-center { justify-content: center !important; }
.mnm-justify-content-flex-end { justify-content: flex-end !important; }
.mnm-justify-content-stretch { justify-content: stretch !important; }
.mnm-justify-content-space-between { justify-content: space-between !important; }
.mnm-justify-content-space-evenly { justify-content: space-evenly !important; }
.mnm-align-self-stretch { align-self: stretch !important; }
.mnm-space-between { justify-content: space-between !important; }
.mnm-direction-row { flex-direction: row !important; }
.mnm-direction-column { flex-direction: column !important; }
.mnm-can-grow { flex-grow: 1 !important; align-self: stretch !important; }
.mnm-spacer {
  // flex-grow: 0.0001 !important; align-self: stretch !important; // ta logika ne deluje, ker flex-grow: 0.0001 pomeni, da lahko element uporabi 0.1% razpoložljivega preostalega prostora
  flex-grow: 0; margin-right: auto; /* pushes everything after it to the right */
}
.mnm-no-grow { flex-grow: 0 !important; }
.mnm-can-shrink { flex-shrink: 1 !important; }
.mnm-no-shrink { flex-shrink: 0 !important; }
.mnm-no-margin { margin: 0 !important; }
.mnm-no-margin-left { margin-left: 0 !important; }
.mnm-no-margin-right { margin-right: 0 !important; }
.mnm-no-margin-top { margin-top: 0 !important; }
.mnm-no-margin-bottom { margin-bottom: 0 !important; }
.mnm-padding-xxs { padding: 0.1em !important; }
.mnm-padding-xs { padding: 0.2em !important; }
.mnm-padding-s { padding: 0.3em !important; }
.mnm-padding-m { padding: 0.5em !important; }
.mnm-padding-l { padding: 1em !important; }
.mnm-padding-xl { padding: 1.5em !important; }
.mnm-padding-xxl { padding: 2.5em !important; }
.mnm-no-padding { padding: 0 !important; }
.mnm-no-padding-left { padding-left: 0 !important; }
.mnm-no-padding-right { padding-right: 0 !important; }
.mnm-no-padding-top { padding-top: 0 !important; }
.mnm-no-padding-bottom { padding-bottom: 0 !important; }
.mnm-gap-xxs { gap: 0.1em !important; }
.mnm-gap-xs { gap: 0.2em !important; }
.mnm-gap-s { gap: 0.3em !important; }
.mnm-gap-m { gap: 0.5em !important; }
.mnm-gap-l { gap: 1em !important; }
.mnm-gap-xl { gap: 1.5em !important; }
.mnm-gap-xxl { gap: 2.5em !important; }
.mnm-no-gap { gap: 0 !important; }
.mnm-wrap { white-space: normal !important; flex-wrap: wrap !important;}
.mnm-nowrap { white-space: nowrap !important; flex-wrap: nowrap !important;}
.mnm-flex-nowrap { flex-wrap: nowrap !important;}
.mnm-bold { font-weight: bold !important; }
.mnm-semi-bold { font-weight: 600 !important; }
.mnm-strikethrough { text-decoration: line-through !important; }
.mnm-normal { font-weight: normal !important; }
.mnm-lighter { font-weight: lighter !important; }
.mnm-italic { font-style: italic !important; }
.mnm-font-m, .mnm-font-medium { font-size: 1.0em !important; }
.mnm-font-s, .mnm-font-small { font-size: 0.9em !important; }
.mnm-font-xs { font-size: 0.8em !important; }
.mnm-font-xxs { font-size: 0.7em !important; }
.mnm-font-xxxs { font-size: 0.6em !important; }
.mnm-font-l, .mnm-font-large { font-size: 1.2em !important; }
.mnm-font-xl { font-size: 1.5em !important; }
.mnm-font-xxl { font-size: 2.0em !important; }
.mnm-font-xxxl { font-size: 2.5em !important; }
.mnm-non-transparent { opacity: 1 !important; }
.mnm-border-thin { border-width: 1px !important; border-style: solid !important; padding: 0.6em 0.8em !important;}
.mnm-border-top-thin { border-top-width: 1px !important; border-top-style: solid !important;}
.mnm-border-bottom-thin { border-bottom-width: 1px !important; border-bottom-style: solid !important;}
.mnm-border-left-thin { border-left-width: 1px !important; border-left-style: solid !important;}
.mnm-border-right-thin { border-right-width: 1px !important; border-right-style: solid !important;}
.mnm-border-transparent { border-color: transparent !important; }
.mnm-no-border { border-width: 0 !important; }
.mnm-no-shadow { box-shadow: none !important; }
.mnm-rounded { border-radius: 4px !important; }
.mnm-position-relative { position: relative !important; }
.mnm-position-unset { position: unset !important; }
.mnm-rotate-180 { transform: rotate(180deg) !important; }

// skrivanje elementov na mobilnikih, tablicah ali desktopu; podpira tudi zaznavanje, ali je prikazan edit_sidebar
@mixin mnm-force-hidden {
  display: none !important;
  visibility: hidden !important;
}

body:not(.mnm-edit-sidebar) .mnm-hide-on-mobile { @media #{$mobile} { @include mnm-force-hidden}}
body.mnm-edit-sidebar .mnm-hide-on-mobile {
  @media #{$sidebar} { @media #{$mobile_beside_sidebar} { @include mnm-force-hidden }}
  @media #{$no_sidebar} { @media #{$mobile} { @include mnm-force-hidden }}
}

body:not(.mnm-edit-sidebar) .mnm-hide-on-tablet { @media #{$tablet} { @include mnm-force-hidden }}
body.mnm-edit-sidebar .mnm-hide-on-tablet {
  @media #{$sidebar} { @media #{$tablet_beside_sidebar} { @include mnm-force-hidden }}
  @media #{$no_sidebar} { @media #{$tablet} { @include mnm-force-hidden }}
}

body:not(.mnm-edit-sidebar) .mnm-hide-on-mobile_and_tablet { @media #{$mobile_and_tablet} { @include mnm-force-hidden }}
body.mnm-edit-sidebar .mnm-hide-on-mobile_and_tablet {
  @media #{$sidebar} { @media #{$mobile_and_tablet_beside_sidebar} { @include mnm-force-hidden }}
  @media #{$no_sidebar} { @media #{$mobile_and_tablet} { @include mnm-force-hidden }}
}

body:not(.mnm-edit-sidebar) .mnm-hide-on-desktop { @media #{$desktop} { @include mnm-force-hidden }}
body.mnm-edit-sidebar .mnm-hide-on-desktop {
  @media #{$sidebar} { @media #{$desktop_beside_sidebar} { @include mnm-force-hidden }}
  @media #{$no_sidebar} { @media #{$desktop} { @include mnm-force-hidden }}
}

body:not(.mnm-edit-sidebar) .mnm-hide-on-desktop_and_tablet { @media #{$desktop_and_tablet} { @include mnm-force-hidden }}
body.mnm-edit-sidebar .mnm-hide-on-desktop_and_tablet {
  @media #{$sidebar} { @media #{$desktop_and_tablet_beside_sidebar} { @include mnm-force-hidden }}
  @media #{$no_sidebar} { @media #{$desktop_and_tablet} { @include mnm-force-hidden }}
}

// @media #{$mobile} {
//   .mnm-hide-on-mobile { @include mnm-force-hidden }
// }
// @media #{$tablet} {
//   .mnm-hide-on-tablet { @include mnm-force-hidden }
// }
// @media #{$mobile_and_tablet} {
//   .mnm-hide-on-mobile_and_tablet { @include mnm-force-hidden }
// }
// @media #{$desktop} {
//   .mnm-hide-on-desktop { @include mnm-force-hidden }
// }
// @media #{$desktop_and_tablet} {
//   .mnm-hide-on-desktop_and_tablet { @include mnm-force-hidden }
// }

.mnm-flex-column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-x: visible; // to potrebujemo, da se lahko datetimepickerji prikažejo izven stolpca
  overflow-y: visible; // to potrebujemo, da se stolpci lahko scrollajo navpično, ampak nam ne pusti potem datetimepickerja prikazati izven stolpca, kar pa ni problem, če imamo dovolj visok stolpec
  min-width: 150px;
  flex-basis: auto;
  height: auto;
  gap: calc(var(--mnm-padding-unit-px) * 0.25);
  > h1, > h2, > h3, > h4, > h5, > h6 {
    padding: calc(var(--mnm-padding-unit-px) * 0.25);;
    margin: 0;
  }
}

.mnm-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%; // ne flex-basis, ker ima lahko parent flex-direction:column in je v tem primeru flex-basis po višini
  max-width: 100%; // da se nam ne razširi izven taba ali drugega starša zaradi svoje vsebine, ampak raje dobi scrollbar
  // align-items: baseline; // ne dela v redu, dva <data-input type="checkbox"> v isti vrsti se ne poravnata v isto vrsto
  gap: calc(var(--mnm-padding-unit-px) * 0.50);
  align-self: stretch;
  // align-self: flex-start;
  overflow-x: visible;
  overflow-y: visible;
}
.mnm-flex-row-separator-bottom:not(:last-child) {
  border-bottom: 1px solid var(--mnm-edit-text-color);
  padding-bottom: calc(var(--mnm-padding-unit-px) * 0.50);
}

.mnm-panel {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  overflow: visible;

  &.mnm-active {
    box-shadow: 0 0 4px #0044FFBB;
  }

  > .mnm-panel-header, > .mnm-panel-body, > .mnm-panel-footer {
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: calc(var(--mnm-padding-unit-px) * 0.4);
    gap: calc(var(--mnm-padding-unit-px) * 0.25);
  }

  > .mnm-panel-header.mnm-white, > .mnm-panel-body.mnm-white, > .mnm-panel-footer.mnm-white {
    border: 1px solid rgba(0, 0, 0, 0.15) !important; // !important imamo, da povozimo border iz mnm-white, ki je tudi !important
  }

  > .mnm-panel-header, > .mnm-panel-body:first-child { // header, ali pa body, če nimamo headerja
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  > .mnm-panel-footer, > .mnm-panel-body:last-child { // footer, ali pa body, če nimamo footerja
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .mnm-help {
    color: #555;
    flex-grow: 1;
    text-align: right;
    margin-left: 24px;
  }

  > .mnm-panel-header, > .mnm-panel-footer {
    display: flex;
    align-items: baseline;
    background-color: rgba(255, 255, 255, 0.50);
    padding: calc(var(--mnm-padding-unit-px) * 0.2) calc(var(--mnm-padding-unit-px) * 0.4);

    [class*=mnm-flex-row-] {
      // data elementi v headerju ali footerju naj nimajo še dodatnega paddinga ker potem header izgleda previsok
      margin-top: 0;
      margin-bottom: 0;
    }

    > h1, > h2, > h3, > h4 {
      margin: 0px;
      white-space: nowrap;
      font-weight: 600;
    }
    > h3 {
      font-size: 16px;
    }
    .form-group-sm {
      flex-grow: 1;
    }

  }

  > .mnm-panel-header {
    border-bottom: none;
    font-weight: 600;
  }
  > .mnm-panel-footer {
    border-top: none;
  }
  > .mnm-panel-body {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    max-height: inherit;
    padding: calc(var(--mnm-padding-unit-px) * 0.50);
    // overflow-y: auto; // CAUTION: ne smeš narediti overflow-y: auto, ker se koledar od <data-datetime> ne prikaže izven mnm-panel-body, kar pa se mora;
  }

  &.mnm-can-shrink {
    overflow-y: auto;
    flex-basis: 100%; // s tem zagotovimo, da so vsi paneli, ki imajo mnm-can-shrink, enako visoki
    flex-shrink: 1; // s tem pa zagotovimo, da se lahko poamnjšajo, ker se paneli sicer ne smejo pomanjšati
    min-height: 81px; // da se panel ne skrije čisto, če nima prostora

    > .mnm-panel-body {
      flex-shrink: 1;
      overflow-y: auto; // panel, ki se lahko oža, mora imeti overflow-y: auto, sicer se vsebina razlije preko; s tem žrtvujemo koledar od <data-datetime>,
      // ampak paneli, ki se lahko ožajo, ne bi smeli imeti v sebi polja <data-datetime>, ker niso namenjeni vnosu podatkov
    }
  }
  &.mnm-can-shrink.mnm-projects {
    min-height: 124px; // da vedno prikaže vsaj 2 vrstici
  }
  &.mnm-quick-action {
    .mnm-panel-header, .mnm-panel-body, .mnm-panel-footer {
      border-color: darkred;
    }
    .mnm-panel-header {
      background-color: darkred;
      color: white;
      font-weight: bold;
    }
  }
}

.mnm-cursor-auto { cursor: auto !important;}
.mnm-cursor-pointer { cursor: pointer !important; }
.mnm-cursor-disabled { cursor: not-allowed !important; }
.mnm-cursor-not-allowed { cursor: not-allowed !important; }

.mnm-sticky-horizontal {
  position: sticky !important;
  left: 0;
  z-index: auto;
}
.mnm-sticky-vertical {
  position: sticky !important;
  left: 0;
  z-index: auto;
}

.mnm-sortable {

}
.mnm-sortable-handle {
  cursor: move;
}

.mnm-plan-free {
  font-weight: bold;
  color: rgb(145, 147, 149);
}
.mnm-plan-web {
  font-weight: bold;
  color: rgb(41, 204, 122);
}
.mnm-plan-shop {
  font-weight: bold;
  color: rgb(69, 176, 229);
}
.mnm-plan-erp {
  font-weight: bold;
  color: rgb(229, 80, 130);
}

pre.mnm-timing {
  margin-top: 1em;
  font-size: 13px;
}

.mnm-blink {
  animation: mnm-blink calc(var(--mnm-blink-animation-duration) * 1ms);
}
@keyframes mnm-blink {
  0% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  6% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  8% { outline: 1px solid darkorange; box-shadow: 0 0 3px 2px red; }
  10% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  12% { outline: 1px solid darkorange; box-shadow: 0 0 3px 2px red; }
  14% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  16% { outline: 1px solid darkorange; box-shadow: 0 0 3px 2px red; }
  18% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  20% { outline: 1px solid darkorange; box-shadow: 0 0 3px 2px red; }
  22% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  24% { outline: 1px solid darkorange; box-shadow: 0 0 3px 2px red; }
  50% { outline: 1px solid darkorange; box-shadow: 0 0 3px 2px red; }
  99.99% { outline: 1px solid transparent; box-shadow: 0 0 10px 3px transparent; }
  100% { outline: unset; box-shadow: unset; }
  // 0% { background-color: transparent; }
  // 10% { background-color: transparent; }
  // 13% { background-color: darkorange; }
  // 16% { background-color: transparent; }
  // 19% { background-color: darkorange; }
  // 22% { background-color: transparent; }
  // 25% { background-color: darkorange; }
  // 28% { background-color: transparent; }
  // 31% { background-color: darkorange; }
  // 50% { background-color: darkorange; }
  // 100% { background-color: transparent; }
}

.mnm-not-applicable-to-siblings, .mnm-always-applies-to-siblings {
  display: none !important; // ti dve ikoni se lahko pojavita samo v EditDialog in EditInsertElementDialog
}

// endregion

// region .......... IKONE

[class^="icon-"], [class*=" icon-"], .material-symbols-rounded {
  display: inline-block; // sicer ne deluje transform: rotate()
  vertical-align: text-top;
  transition: transform $transition; // da se rotiranje izvede v animaciji, če ikono rotiramo
  font-size: 1.20em;
}

// endregion

// region .......... PLEASE WAIT OVERLAY (parent element mora biti position: relative, sicer dobiš overlay čez celoten zaslon)
.wait, .mnm-wait {
  // background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 100;
  &.mnm-wait-redirecting {
    z-index: 100000;
  }
  &.wait-top, &.mnm-wait-top {
    &:after {
      top: 2%; // da se krogec izpiše bolj na vrhu wait-diva
    }
  }
}
.wait:after, .mnm-wait:after {
  content: '';
  position: absolute;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
// endregion

// region .......... DIALOGS AND DIALOG OVERLAYS
.mnm-dialog-overlay, .mnm-edit-dialog-overlay, .mnm-edit-insert-element-dialog-overlay {
  // ozadje dialog boxov
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00000066;
  backdrop-filter: blur(5px);
  z-index: 50;
  order: 3;
}

.mnm-login-form {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: white;
  width: 480px;
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10vh;
  border-radius: 6px;
  box-shadow: 0 0px 12px rgba(127, 127, 127, 0.50);
}

// endregion .......... DIALOGS AND DIALOG OVERLAYS

// region .......... mnm-width MODEL

// mnm-width-0 do mnm-width-1000 so fiksne širine v px;
@for $i from 0 through 1000 {
  .mnm-width-#{$i} { width: #{$i}px !important; }
  .mnm-min-width-#{$i} { min-width: #{$i}px !important; }
  .mnm-max-width-#{$i} { max-width: #{$i}px !important; }
  //.mnm-flex-basis-#{$i} { flex-basis: #{$i}px !important; }
  // .mnm-height-#{$i} { height: #{$i}px !important; }
  // .mnm-min-height-#{$i} { min-height: #{$i}px /*!important*/ ; }
  // .mnm-max-height-#{$i} { max-height: #{$i}px !important; }
  .mnm-children-height-#{$i} {
    > * { height: #{$i}px; }
  }
}
// endregion .......... mnm-width MODEL

// region .......... DATA KOMPONENTE
.mnm-data-element-padding {
  padding: 0.12em 0.45em;
}

.mnm-data {
  display: flex;
  // flex-basis: 1%; // če to vključimo, so vsi elementi v vrstici enako široki, česar morda ne želimo (npr v EditDialogu.vue items_halign in items_valign)
  flex-grow: 1;
  flex-direction: column;
  max-width: 100%;
  // padding: 0.4em 0.6em 0.6em; // data- komponente nimajo paddinga, namesto tega moraš nastaviti gap v parentu
  gap: calc(var(--mnm-padding-unit-px) * 0.10);

  .mnm-data-label-holder {
    &:empty {
      display: none; // sicer se nam med praznim .mnm-data-label-holder in .mnm-data-input-holder izriše gap, pa ti ni jasno, zakaj
    }
  }

  .mnm-data-input-holder {
    position: relative; // da lahko vanj postavimo div.mnm-wait
    display: flex;
    flex-direction: row;
  }
  .mnm-data-input-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    max-width: 100%;
    // flex-wrap: wrap;
    // .mnm-data-checkbox_group-item:not(:last-child) label, > .mnm-data-item-label:not(:last-child) {
    //   margin-right: 1.5em;
    // }
  }
  .mnm-data-element {
    max-width: 100%;
  }

  &.mnm-data-width-set {
    > .mnm-data-input-holder {
      min-width: 0;

      > .mnm-data-input-container {
        min-width: 0;
        max-width: 100%;

        > .mnm-data-element:not([type=checkbox]):not([type=radio]),
        > .mnm-data-element-with-border,
        > .mnm-mce-div,
        > .mnm-data-element-icon {
          min-width: 0;
          max-width: 100%;
        }

        > select.mnm-data-element {
          width: 100%;
        }
      }
    }
  }

  &.mnm-data-integer, &.mnm-data-decimal, &.mnm-data-number, &.mnm-data-percent {
    input {
      text-align: right;
    }
  }

  &.mnm-data-select:not(.mnm-data-width-set) {
    flex-grow: 1;
    min-width: 0;
    .mnm-data-input-holder {
      contain: inline-size;
    }
    .mnm-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &.mnm-data-color {
    flex-grow: 0;
    .mnm-data-input-holder {
      width: 8.2em !important; // mora biti dovolj prostora za 9 znakov + še za ikono
      flex-grow: 0 !important;
    }
  }

  &.mnm-data-datetime {
    flex-basis: 11.9em;
    flex-grow: 0;
  }

  &.mnm-data-date {
    flex-basis: 7.7em;
    flex-grow: 0;
  }

  &.mnm-data-button, &.mnm-data-submit, &.mnm-data-reset {
    flex-basis: auto;
    flex-grow: 0;

    .mnm-data-input-container {
      opacity: 0.90;
      &:hover {
        opacity: 1;
      }
    }

    .mnm-data-button-label {
      white-space: nowrap;
    }

  }

  &.mnm-data-file {
    > .mnm-data-input-holder {
      > .mnm-data-input-container {
        > .mnm-data-element {
          display: flex;
          max-width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 1em;
          .mnm-data-file-item {
            display: flex;
            overflow: hidden;
            width: 320px;
            max-width: 100%;
            border: 1px solid #77777777;
            border-radius: 0.3em;
            padding: 0.5em;
            gap: 1em;
            background-color: #DDDDDD55;
            &.mnm-dropzone-sending { display: none; }
          }
          .mnm-data-file-thumbnail {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 90px;
            max-width: 90px;
            min-height: 90px;
            max-height: 90px;
            a {
              display: inline-block;
              max-width: 100%;
              max-height: 100%;
            }
            img {
              width: 90px;
              height: 90px;
              object-fit: contain;
            }
            &, & a, & a img, & img {
              cursor: zoom-in;
            }
            [class^=icon-], [class*= icon-], .material-symbols-rounded {
              font-size: 2.5em;
              opacity: 1 !important;
              transform: unset !important;
              visibility: visible !important;
            }
          }
          .mnm-data-file-info {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: 0.4em;
            justify-content: space-between;
            [class^=icon-], [class*= icon-], .material-symbols-rounded {
              font-size: 1em;
            }
          }
          .mnm-data-file-link-filename {
            display: flex;
            gap: 0.7em
          }
          .mnm-data-file-link {
            font-size: 120%;
            position: relative;
            top: -0.20em;
          }
          .mnm-data-file-filename {
            font-size: 92%;
            min-height: 3em;
            height: 3em;
            overflow: hidden;
            word-break: break-all;
            flex-grow: 1;
          }
          .mnm-data {
            padding: 0;
            .mnm-data-element, .mnm-data-element.mce-content-body:before /* placeholder v tinymce */
            {
              font-size: 90%;
            }
          }

        }
      }
    }
  }

  // @media #{$desktop_and_tablet} {
  &.mnm-data-one-line {
    flex-direction: row;
    flex-basis: auto;
    gap: calc(var(--mnm-padding-unit-px) * 0.00);
    // flex-grow: 0;
    > .mnm-data-label-holder {
      flex-basis: 0.1em;
      // flex-grow: 1; // tega ne smemo imeti; label se bo sam povečal na širino vsebine in nič več
      flex-wrap: nowrap;
      white-space: nowrap;
      justify-content: right;
      label:after {
        content: ': ';
      }
    }
    > .mnm-data-input-holder {
      flex-grow: 1;
    }
  }
  // }

  &.mnm-data-radio {
    .mnm-data-radio-text {
      // white-space: wrap;
    }
    .mnm-data-item-label {
      align-items: flex-start;
      white-space: wrap;
    }
  }
  &.mnm-data-radio, &.mnm-data-checkbox_group {
    .mnm-data-input-container {
      flex-direction: column;
      align-items: stretch;
    }
    &.mnm-data-horizontal {
      .mnm-data-input-container {
        flex-wrap: wrap;
        column-gap: 1.0em;
      }
    }
  }

  &.mnm-data-horizontal {
    .mnm-data-input-container {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  .mnm-data-label-holder {
    display: flex;
    align-items: baseline;
    // gap: calc(var(--mnm-padding-unit-px) * 0.10); // ni potrebe sploh
  }

  .mnm-data-checkbox-holder, .mnm-data-checkbox_group-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2em;
    label {
      // margin-top: 0.3em;
      padding-left: 0.4em;
      white-space: normal;
    }
  }

  .v-select {
    flex-grow: 1;
    border-radius: inherit;
    .vs__dropdown-toggle, .vs__dropdown-menu {
      // background-color: inherit !important;
      // color: inherit !important;
      .vs__selected-options, .vs__actions {
        color: inherit !important;
        //noinspection CssInvalidPropertyValue
        fill: inherit !important;
        .vs__selected, button, svg {
          color: inherit !important;
          //noinspection CssInvalidPropertyValue
          fill: inherit !important;
        }
      }
    }
  }
  button.mnm-data-element {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.12em 0.6em 0.15em 0.5em;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 0.4em;
    box-shadow: 0 0 4px 4px #77777711;
    gap: 0.4em;
    .mnm-data-icon {
      padding-top: 0.1em;
      // line-height: 1.299; // s tem izravnamo, da je velikost ikone v gumbih enaka kot velikost besedila, da so gumbi, ki imajo samo ikono, enako veliki kot tisti, ki imajo tudi besedilo
    }
  }
  &.mnm-data-no-main-label:not(.mnm-data-one-line) {
    button.mnm-data-element {
      padding: 0.3em 0.6em 0.4em;
      // .mnm-data-icon {
      //   padding-top: 0.15em;
      //   padding-bottom: 0.04em;
      // }
      .mnm-data-button-label {
        padding: 0.15em 0 0;
      }
    }
  }

  .mnm-data-input-div {
    display: flex;
    gap: 0.3em;
    flex-grow: 1;
    .mnm-data-minus, .mnm-data-plus {
      display: flex;
      justify-content: center;
      gap: 0;
      height: 2em;
      button.mnm-data-element {
        padding: 0.1em 0.2em 0.2em;
        &:not(:hover) {
          border: 1px solid transparent;
          background-color: transparent;
          box-shadow: none;
        }
      }
    }
  }

  input:not(.vs__search):not(.vc-input__input), textarea, select, .mnm-data-element-with-border, .vs__dropdown-toggle, .mnm-mce-div, .mce-content-body:before,
  .mnm-data-element-icon, .mnm-data-select2-option > div {
    @extend .mnm-data-element-padding;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not(.vs__search),
  select, .vs__dropdown-toggle, .vs__dropdown-option {
    min-height: 2em;
  }
  .vs__dropdown-option {
    padding: 0;
  }
  select {
    padding-left: 0.2em;
  }
  .dp--input_not_clearable {
    padding-inline-end: 0.25em !important;
  }
  .dp--input_icon {
    top: 55%;
    // color: var(--dp-icon-color);
    left: 0.34em;
    font-size: 0.85em;
  }
  .dp--clear-btn {
    top: 55%;
    // color: var(--dp-icon-color);
    right: 0.34em;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
  }
  input:not(.vs__search):not(.vc-input__input):not([type="checkbox"]):not([type="radio"]), textarea, select, .mnm-data-element-with-border, .vs__dropdown-toggle, .mnm-mce-div, .mnm-data-element-icon {
    flex-grow: 1;
  }
  input:not(.vs__search):not(.vc-input__input), textarea, select, .mnm-data-element-with-border, .vs__dropdown-toggle, .mnm-mce-div, .mnm-data-element-icon {
    border: 1px solid #66666688;
    background-color: white;
  }
  .mnm-data-input-container {
    border-radius: var(--mnm-data-input-border-radius);
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .mnm-data-element:not(button), .mnm-data-input-div, .vs__dropdown-toggle, .dp--main, .dp--main div, .dp--input-wrap, .dp--input {
      border-radius: inherit;
    }

    // > * {
    //   input:not(.vs__search):not(.vc-input__input), textarea, select, .mnm-data-element-with-border, .vs__dropdown-toggle, .mnm-mce-div, .mnm-data-element-icon {
    //     border-radius: var(--mnm-data-input-border-radius);
    //   }
    // }
    // > :not(:last-child) {
    //   input:not(.vs__search):not(.vc-input__input), textarea, select, .mnm-data-element-with-border, .vs__dropdown-toggle, .mnm-mce-div, .mnm-data-element-icon {
    //     border-top-right-radius: 0;
    //     border-bottom-right-radius: 0;
    //   }
    // }
  }
  input:not(.vs__search):not(.dp--input):not(.vc-input__input):not([type=checkbox]):not([type=radio]), textarea {
    width: 40px; // povoziti moramo širino, ki jo določi browser (vsak malo drugače); flex-grow: 1 will do the rest; to je hkrati tudi najmanjša možna širina
  }
  input[type=radio] {
    font-size: inherit;
    margin: 0.2em 0.3em 0 0;
    width: 1.2em;
    height: 1em;
    flex-shrink: 0;
  }
  input[type=checkbox] {
    font-size: inherit;
    margin: 0.25em 0 0 0;
    width: 1.25em;
    flex-shrink: 0;
    min-height: 1em; // da okvir ni premajhen
    min-width: 1em; // da okvir ni premajhen
    aspect-ratio: 1 / 1;
  }

  textarea {
    // height: 4em; // ustreza 3 vrsticam besedila
    resize: vertical;
    transition: height $transition; // če se višina textarea spreminja z vnosom podatkov, naj se to dela s transition, da je lažje videti, kaj se je zgodilo
  }
  .mnm-data-items {
    display: flex;
    flex-direction: column;
    row-gap: 0.1em;
    column-gap: 2em;
  }
  &.mnm-data-source-editing {
    .mnm-data-items {
      row-gap: 0.3em;
    }
  }
  &.mnm-data-horizontal:not(.mnm-data-source-editing) {
    .mnm-data-items {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
  .mnm-label, .mnm-help-icon, .mnm-label-icon, .mnm-data-item-label, .mnm-input-string {
    padding: 0.1em 0.3em 0.05em 0.00em;
    border: 1px solid transparent;
    // color: #000000AA;
  }
  .mnm-label, .mnm-data-item-label {
    // display: flex; // ne sme biti flex, ker če imamo znotraj labela span, se ta obnaša kot element in se poravnava ločeno od ostalega besedila
    white-space: nowrap;
    align-items: baseline;
    font-weight: 500;
  }
  .mnm-data-item-label {
    padding-top: 0.1em;
    font-weight: 400;
    display: flex;
    gap: 0.3em;
  }
  .mnm-data-item-label-usage {
    opacity: 0.5;
  }
  .mnm-data-item-label-background-color {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
  }
  .mnm-data-item-move-handle {
    cursor: grab;
    &:active {
      cursor: grabbing;
    }
  }
  .mnm-help-icon {
    cursor: pointer;
    font-size: 1em;
    position: relative;
    vertical-align: text-top;
    // top: 0.1em;
    color: #00000077;
    &:hover {
      color: #000000AA;
    }
  }
  .mnm-label-icon {
    font-size: 1.2em;
    position: relative;
    top: 0.1em;
  }

  .mnm-data-v-model-not-defined {
    background-color: red !important;
    color: white !important;
  }
  // input:invalid, select:invalid, textarea:invalid, .mnm-invalid,
  .mnm-data-input-holder:has(input:invalid, select:invalid, textarea:invalid, .mnm-invalid) {
    > .mnm-data-input-container {
      input.mnm-data-element:invalid, select.mnm-data-element:invalid, textarea.mnm-data-element:invalid, .mnm-data-element.mnm-invalid {
        outline: 1px solid red !important;
      }
    }
    > .mnm-data-element-icon {
      outline: 1px solid red !important;
    }
  }

  .mnm-data-element-icon {
    tab-index: -1;
    border-radius: 0 var(--mnm-data-input-border-radius) var(--mnm-data-input-border-radius) 0;
    border-left: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    width: 1.7em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555555;
    [class^=icon-], [class*=" icon-"], .material-symbols-rounded {
      font-size: 105%;
    }
    .icon-save {
      display: flex;
    }
    .mnm-data-color-picker {
      position: absolute;
      top: 120%; // da se pojavi malo pod input poljem, na katerega se nanaša
      left: -86px;
      z-index: 100;
      cursor: default; // njegov nadrejeni je ikona .mnm-data-element-icon, ki ima cursor: pointer in moramo to resetirati v pickerju samem
      &.mnm-data-color-preset-only {
        .vc-sketch-saturation-wrap, .vc-sketch-controls, .vc-sketch-field {
          display: none;
        }
        .vc-sketch-presets {
          padding-top: 0;
        }
      }
    }
  }

  .vs__search, .vs__search:focus {
    margin: 0;
    border: none;
    padding: 0;
    line-height: initial;
  }
  .vs--single .vs__selected {
    border: 0;
    padding: 0;
    margin: 0;
    line-height: initial;
  }
  .mnm-data-select2-option {
    display: flex;
    align-items: center;
    height: 100%;
    // justify-content: center;
    > div {
      height: 100%;
      align-items: center;
    }
  }

  .vs__actions {
    padding: 0;
  }
  .vs__open-indicator {
    margin-top: 0.1em;
    cursor: pointer;
  }

  &.mnm-data-icons {
    row-gap: 0.5em;
    > .mnm-data-input-holder {
      > .mnm-data-input-container {
        display: flex;
        flex-direction: row;
      }
    }
    .mnm-info {
      margin: 0;
    }
    .mnm-data-icons-items {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      overflow-y: auto;
      // margin: 8px -8px 12px;
      gap: calc(var(--mnm-padding-unit-px) * 0.22);
    }
    .mnm-data-icons-item {
      display: flex;
      flex-basis: 1%;
      flex-direction: column;
      align-items: center;
      line-height: 1;
      border: 1px solid #77777777;
      border-radius: 6px;
      cursor: pointer;
      padding: calc(var(--mnm-padding-unit-px) * 0.10) calc(var(--mnm-padding-unit-px) * 0.10);
      gap: calc(var(--mnm-padding-unit-px) * 0.15);
      .mnm-data-item-icon {
        font-size: 1.7em;
      }
      label.mnm-label {
        white-space: wrap;
        text-align: center;
        cursor: pointer;
      }
    }
    .mnm-data-icons-selected {
      border-color: var(--mnm-edit-text-color);
      // box-shadow: 0 0 0.10em 0.10em #CCCCCC;
      background-color: #77777777;
    }
    .mnm-data-item-icon {
      min-height: 1.0em;
      min-width: 1.0em;
    }
  }

  &.mnm-data-source-editing {
    .mnm-data-element-icon .mnm-data-color-picker {
      left: unset;
      right: -2em;
    }
  }

}

.mnm-tabs {
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  > .mnm-tab-names {
    display: flex;
    margin: calc(var(--mnm-padding-unit-px) * 0.25) 0 0 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    // overflow-x: auto;
    // overflow-y: hidden;
    flex-wrap: nowrap;
    > .mnm-tab-name {
      display: flex;
      flex-shrink: 1;
      white-space: nowrap;
      overflow-x: hidden;
      align-items: center;
      line-height: 1.3em;
      color: #333;
      font-weight: 600;
      padding: 8px 12px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-bottom: none;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      margin-right: calc(var(--mnm-padding-unit-px) * 0.25);
      gap: 0.5em;
      background-color: rgba(255, 255, 255, 0.4);
      box-shadow: 0 -6px 6px rgba(127, 127, 127, 0.18);
      word-wrap: normal;
      &:not(.mnm-tab-name-active) {
        box-shadow: 0 0px 6px rgba(127, 127, 127, 0.30);
      }
      &:not(.mnm-tab-name-active):hover {
        background-color: rgba(255, 255, 255, 0.6);
        color: #333;
        border-bottom: none;
      }
      [class^=icon-], [class*= icon-] {
        font-size: 1.2em;
      }
    }
    > .mnm-tab-name-active {
      color: black;
      border-bottom: none;
      background-color: rgba(255, 255, 255, 0.70);
      z-index: 10;
      top: 1px;
      flex-shrink: 0;
      position: relative; // da se prestavi 1 px nižje in s tem pokrije rob v tab bodyju
    }
  }
  > .mnm-panel-body {
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.80);
    box-shadow: 0 0px 12px rgba(127, 127, 127, 0.50);
    width: 100%;
    overflow-x: auto; /* Or 'hidden' if you want it clipped */
    min-width: 0;
  }
  .mnm-tab-content {
    display: flex;
    flex-direction: column; // če rabiš v katerem od mnm-tab-content flex-direction row, si ga nastavi samo tam, npr. takole: <tab name="Kontakti" style="flex-direction: row;">
    flex-grow: 1;
  }
  &.mnm-panel {
    align-self: stretch;
  }
}
// endregion