/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --white-color: #fff;
  --blue-color: #4070f4;
  --grey-color: #2F4F4F;
  --grey-color-light: #aaa;
}
body {
  background-color: #FFFFFF; /* ozadje vsebine */
  transition: all 0.5s ease;
}
body.dark {
  background-color: #333;
}
body.dark {
  --white-color: #333;
  --blue-color: #fff;
  --grey-color: #f2f2f2;
  --grey-color-light: #aaa;
}
/* navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
/*   background-color: var(--white-color); */
  background-color: #d7eff0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  z-index: 1000;
  box-shadow: 0 0 2px var(--grey-color-light);
}
.logo_item {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-color);
}
.navbar img {
  width: 83px;
  height: 50px;
  border-radius: 0%;
}
.search_bar {
  height: 50px; /* Povečanje višine */
  max-width: 1000px; /* Povečanje širine */
  width: 100%; /* Ohranja odzivnost */
  position: relative;
}

.search_bar select {
  height: 100%;
  width: 100%;
  border-radius: 50px;
  font-size: 26px;
  font-weight: bold;
  outline: none;
/*   background-color: var(--white-color); */
  background-color: #d7eff0;
  color: var(--grey-color);
  border: 0px solid var(--grey-color-light);
  padding: 0 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center; /* Cetriranje besedila vodoravno */
  line-height: 60px; /* Cetriranje besedila navpično */
  cursor: pointer; /* Dodano za prikaz kazalca nad celotnim oknom */
}

.search_bar select option {
  font-size: 14px; /* Manjša velikost pisave za možnosti v spustnem seznamu */
  font-weight: normal;
}

.search_bar select:focus {
  text-align-last: center; /* Cetriranje izbranega besedila */
  font-size: 14px; /* Ohranitev večje velikosti pisave, ko je možnost izbrana */
  font-weight: normal;
}

.navbar_content {
  display: flex;
  align-items: center;
  column-gap: 25px;
}
.navbar_content i {
  cursor: pointer;
  font-size: 20px;
  color: var(--grey-color);
}
.navbar_content .profile {
  width: 42px; /* Nastavi širino slike */
  height: 42px; /* Nastavi višino slike, naj bo enaka širini za popoln krog */
  vertical-align: middle; /* Poravnava ikone na sredino vrstice */
  border-radius: 50%; /* Nastavi popolnoma okroglo obrobo */
  border: 2px solid var(--grey-color-light); /* Nastavi barvo obrobe, če je želena */
  object-fit: cover; /* Prilagodi sliko tako, da zapolni krog, ne da bi jo raztegnili */
}

.icon-link {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--white-color);
    border: 2px solid var(--grey-color-light); /* Nastavi barvo obrobe, če je želena */
    vertical-align: middle;
}

.icon-img-project {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.75) translateX(-13%) translateY(-13%); /* Zmanjša velikost slike in jo premakne navzgor */
    transform-origin: left center; /* Poravna sliko na sredino kroga, tako vodoravno kot navpično */
}

.icon-img-home {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.75) translateX(-18%) translateY(-13%); /* Zmanjša velikost slike in jo premakne navzgor */
    transform-origin: left center; /* Poravna sliko na sredino kroga, tako vodoravno kot navpično */
    cursor: pointer;
}


.icon-link {
    margin-right: 0px; /* Dodajte nekaj prostora med ikonami */
}

.verticalLine {
    border-left: 1px solid var(--grey-color-light);
    height: 24px; /* Nastavite višino črte, da se ujema z višino ikon */
    margin-left: 10px; /* Premakne črto bolj levo */
    margin-right: 10px; /* Prostor med črto in ikono na desni strani */
}


/* sidebar */
.sidebar {
/*   background-color: var(--white-color); */
  background-color: #f0f9fa;
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  padding: 80px 5px;
  z-index: 100;
  overflow-y: scroll;
  box-shadow: 0 0 1px var(--grey-color-light);
  transition: all 0.5s ease;
}

.sidebar.close {
  padding: 60px 0;
  width: 80px;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.menu_content {
  position: relative;
}
.menu_title {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 15px;
  border-bottom: 1px solid var(--grey-color-light);

}
.sidebar.close .menu_title {
  padding: 6px 30px;
}
.menu_title::before {
  color: var(--grey-color);
  white-space: nowrap;
}
.menu_dahsboard::before {
  content: "Višinski pomiki";
}
.menu_dahsboard-1::before {
  content: "3D monitoring";
}
.menu_editor::before {
  content: "Pomiki v predoru";
}
.menu_setting::before {
  content: "Neizvršene konvergence";
}
.sidebar.close .menu_title::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 18px;
  border-radius: 12px;
  background: var(--grey-color-light);
}
.menu_items {
  padding: 0;
  list-style: none;
}
.navlink {
  font-size: 15px;
}
.navlink_icon {
  position: relative;
  font-size: 18px;
  min-width: 40px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}
.navlink_icon::before {
  content: "";
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  left: -20px;
}
.navlink_icon:hover {
  background: var(--blue-color);
}
.sidebar .nav_link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2px 6px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--grey-color);
  white-space: nowrap;
}
.sidebar.close .navlink {
  display: none;
}
.nav_link:hover {
  color: var(--white-color);
  color: var(--white-color);
  background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
  background: var(--white-color);
}
.submenu_item {
  cursor: pointer;
}
.submenu {
  display: none;
}
.submenu_item .arrow-left {
  position: absolute;
  right: 10px;
  display: inline-block;
  margin-right: auto;
}
.submenu .sublink {
    padding: 4px 15px 5px 52px; /* Prilagodite zgornji in spodnji padding na 5px */
    line-height: 0.5; /* Nastavite višino vrstice za boljši nadzor nad vertikalnim razmikom */
    font-size: 15px; /* Prilagodite velikost pisave, če je potrebno */
}

.submenu .sublink:hover {
    background-color: var(--blue-color);
    color: var(--white-color);
}
.submenu {
    padding: 0;
    margin: 0;
}

.sidebar.close .submenu {
  display: none;
}
.show_submenu ~ .submenu {
  display: block;
}
.show_submenu .arrow-left {
  transform: rotate(90deg);
}
.submenu .sublink {
  padding: 15px 15px 15px 52px;
}
.bottom_content {
  position: fixed;
  bottom: 60px;
  left: 0;
  width: 260px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.bottom {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  justify-content: space-around;
  padding: 18px 0;
  text-align: center;
  width: 100%;
  color: var(--grey-color);
  border-top: 1px solid var(--grey-color-light);
  background-color: var(--white-color);
}
.bottom i {
  font-size: 18px;
}
.bottom span {
  font-size: 18px;
}
.sidebar.close .bottom_content {
  width: 50px;
  left: 15px;
}
.sidebar.close .bottom span {
  display: none;
}
.sidebar.hoverable .collapse_sidebar {
  display: none;
}
#sidebarOpen {
  display: none;
}
@media screen and (max-width: 768px) {
  #sidebarOpen {
    font-size: 16px;
    display: block;
    margin-right: 10px;
    cursor: pointer;
    color: var(--grey-color);
  }
  .sidebar.close {
    left: -100%;
  }
  .sidebar.close .bottom_content {
    left: -100%;
  }
}

.profile-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--white-color);
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 10px;
    z-index: 1;
}

.dropdown-menu a {
    color: var(--grey-color);
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

.dropdown-menu a:hover {
    background-color: var(--grey-color-light);
    border-radius: 5px;
}

.navlink_icon-img {
    width: 20px; /* Prilagodite velikost slike */
    height: 20px; /* Prilagodite velikost slike */
    object-fit: contain; /* Ohranite razmerje stranic slike */
    vertical-align: middle; /* Poravnajte sliko vertikalno na sredino */
}

/* Prilagoditev celotnega podmenija */
.menu_items.submenu {
    padding-left: 25px; /* Premakne celoten podmeni bolj levo */
    margin: 0; /* Odstrani dodatne zunanje razmike */
}

/* Prilagoditev posameznih povezav v podmeniju */
.menu_items.submenu .nav_link.sublink {
    padding: 6px 10px; /* Zmanjša notranje razmake zgoraj, spodaj, levo in desno */
    margin: 3px 0; /* Zmanjša vertikalni razmik med povezavami */
}

/* Prilagoditev ikone v podmeniju */
.menu_items.submenu .navlink_icon {
    min-width: 20px; /* Zmanjša minimalno širino ikone za premik bolj levo */
    margin-right: 8px; /* Zmanjša razmik med ikono in besedilom */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Prilagoditev velikosti slik ikon */
.menu_items.submenu .navlink_icon-img {
    width: 16px; /* Nastavi širino ikone */
    height: 16px; /* Nastavi višino ikone */
}





/* Prijavna stran */
.login-body {
  background-color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  background-color: var(--white-color);
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.login-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--blue-color); /* Uporabite barvo iz glavne strani */
  font-weight: 600;
}


.login-container label {
  display: block;
  margin-bottom: 5px;
  color: var(--grey-color);
  font-weight: 500;
}

.login-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid var(--grey-color-light);
  font-size: 16px;
  color: var(--grey-color);
}

.login-container button {
  width: 100%;
  padding: 10px;
  background-color: var(--grey-color);
  color: var(--white-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
}

.login-container button:hover {
  background-color: var(--grey-color);
}

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

.login-logo {
  width: 100px;  /* Nastavite širino logotipa */
  height: auto;  /* Samodejno prilagajanje višine glede na razmerje */
  margin-bottom: 10px;  /* Dodajte razmik med logotipom in napisom "Login" */
}

.login-container h2 {
  color: var(--blue-color);
  font-weight: 600;
}

.flash-messages {
  list-style-type: none;
  padding: 0;
  margin-top: 10px; /* Prostor med gumbom in opozorilom */
}

.flash-messages li {
  background-color: #ffcccc; /* Svetlo rdeča za opozorila */
  color: #cc0000; /* Temno rdeča za besedilo opozorila */
  padding: 10px;
  border-radius: 5px;
  margin-top: 5px;
  text-align: center;
  font-weight: 500;
}

.flash-messages li.success {
  background-color: #ccffcc; /* Svetlo zelena za uspešna sporočila */
  color: #006600; /* Temno zelena za besedilo uspeha */
}

.form-group-inline {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-group-inline input[type="checkbox"] {
    margin: 0;
    margin-left: -150px; /* Premik checkboxa bolj levo */
    margin-top: -1px; /* Dvig checkboxa */
    vertical-align: middle; /* Vertikalna poravnava na sredino */
    position: relative; /* Omogoča uporabo 'top' lastnosti */
    top: -2px; /* Dvig checkboxa za dodatno prilagoditev */
}

.form-group-inline label {
    margin-left: 0px; /* Odmik oznake od checkboxa */
    vertical-align: middle; /* Vertikalna poravnava na sredino */
    line-height: 1; /* Doda stabilnost višini besedila */
}

.dropdown-menu {
    width: 300px; /* Nastavite širino po vaši želji */
}

.dropdown-menu p {
    margin: 0;
    padding: 10px 20px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

.dropdown-divider {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0; /* Dodajte nekaj prostora nad in pod črto */
}


.content-wrapper {
    margin-left: 260px; /* Prilagodite širino sidebar-a */
    margin-top: 80px; /* Prilagodite višino navbar-a */
    padding: 20px;

}

.dashboard table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard table th,
.dashboard table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.dashboard table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.main-content {
    padding: 20px;
    margin-top: 70px; /* Prilagodite glede na višino vaše navbar */
    margin-left: 260px; /* Prilagodite glede na širino vaše sidebar */
}

.main-content-add {
    width: 50%;
    padding: 20px;
    margin-top: 70px; /* Prilagodite glede na višino vaše navbar */
    margin-left: 260px; /* Prilagodite glede na širino vaše sidebar */
}


.work-orders-table th, .work-orders-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.work-orders-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.work-orders-table tr:nth-child(even) {
    background-color: #f9f9f9;
}


h2 {
    color: var(--grey-color);
    font-weight: 600; /* Prilagoditev teže pisave glede na stil ostalega besedila */
    font-size: 18px; /* Prilagodite velikost pisave po potrebi */
    margin-bottom: 20px; /* Prostor pod naslovom */
    margin-top: 20px; /* Dodajte odmik od zgornjega roba */
}

/* Za tabelo work-orders */
.work-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed;
}

/* Za vse celice v tabeli */
.work-orders-table td{
    color: var(--grey-color);
    font-weight: 400;
    font-size: 14px;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* Spodnja črta za ločitev vrstic */
}

/* Nastavitve za stolpce z naslovi */
.work-orders-table th {
    font-weight: 600;
    background-color: #f1f1f1;
    border-bottom: 2px solid var(--grey-color-light);
}



/* Nastavitve za širine stolpcev */
.work-orders-table th:nth-child(1),
.work-orders-table td:nth-child(1) {
    width: 9%; /* Nastavi relativno širino za prvi stolpec 'Delovni nalog' */

}

.work-orders-table th:nth-child(2),
.work-orders-table td:nth-child(2) {
    width: 33%; /* Nastavi širino za stolpec 'Opis' kot najširši */
    word-wrap: break-word; /* Razbije dolge besede v več vrstic */
}

.work-orders-table th:nth-child(3),
.work-orders-table th:nth-child(4),
.work-orders-table th:nth-child(5),
.work-orders-table th:nth-child(6) {
    width: 8%; /* Nastavi širine za stolpce modulov 1-3 */
    text-align: center; /* Poravnava besedila na sredino */
}

.work-orders-table th:nth-child(7),
.work-orders-table td:nth-child(7) {
    width: 12%; /* Nastavi širino za stolpec 'Ustvarjeno' */
}

.work-orders-table th:nth-child(8),
.work-orders-table td:nth-child(8) {
    width: 7%; /* Nastavi širino za stolpec z gumbi */
}



.work-order-description {
    width: 100%;
    font-size: 14px;
    border: none;
    background-color: transparent;
    color: var(--grey-color);
    resize: none; /* Prepreči spreminjanje velikosti */
    overflow: hidden; /* Skrij drsnike */
    min-height: 15px; /* Nastavite minimalno višino */
    line-height: 20px; /* Uporabi enako vrednost kot min-height za vertikalno poravnavo */
    padding: -10 10px; /* Dodajte levo in desno padding za nekaj prostora */
    box-sizing: border-box; /* Da padding ne vpliva na širino elementa */
    vertical-align: middle;
}

/* Pokaži obrobo, ko je polje v fokusu */
.work-order-description:focus {
    border: 1px solid var(--grey-color-light);
    background-color: var(--white-color);
    outline: none; /* Odstrani privzeto obrobo brskalnika */
    line-height: normal; /* Prilagodi višino vrstice, ko je v fokusu */
    padding: 10px 10px; /* Dodaj padding za boljšo izkušnjo pri vnosu besedila */
}








.action-icon {
    width: 22px;  /* Nastavi širino ikone */
    height: 22px; /* Nastavi višino ikone */
    vertical-align: middle; /* Poravna ikono na sredino glede na gumb */
}

.add-new-work-order {
    display: flex;
    justify-content: flex-end; /* Poravna gumb na desno stran */
    margin-bottom: 0px; /* Dodaj nekaj prostora pod gumbom */
}

.action-btn-add {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: var(--grey-color);
    font-weight: bold;
}

.action-icon-add {
    width: 22px;  /* Nastavi širino ikone */
    height: 22px; /* Nastavi višino ikone */
    vertical-align: middle; /* Poravna ikono na sredino glede na gumb */
    margin-right: 10px; /* Dodaj nekaj prostora med ikono in besedilom */
}

.search-and-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-container input {
    width: 300px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--grey-color-light);
    font-size: 14px;
    color: var(--grey-color);
}


.add-new-work-order {
    margin-left: 20px; /* Dodaj malo prostora med iskalnikom in gumbom za dodajanje */
}

#siteNameSearch {
    width: 300px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--grey-color-light);
    font-size: 14px;
    color: var(--grey-color);
}

.action-btn-add {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: var(--grey-color);
    font-weight: bold;
}

.action-icon-add {
    width: 22px;  /* Nastavi širino ikone */
    height: 22px; /* Nastavi višino ikone */
    vertical-align: middle; /* Poravna ikono na sredino glede na gumb */
    margin-right: 10px; /* Dodaj nekaj prostora med ikono in besedilom */
}


/* Stil za obrazec za dodajanje delovnega naloga */
.work-order-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Razmik med polji obrazca */
    background-color: #f9f9f9; /* Svetla ozadje za obrazec */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.work-order-form .form-group {
    display: flex;
    flex-direction: column;
}

/* Slogi za premik okenc za obkljukat */
.work-order-form .form-group-checkbox {
    display: flex;
    align-items: center; /* Poravnava checkboxa na sredino glede na oznako */
}

.work-order-form .form-group-checkbox input[type="checkbox"] {
    margin-left: 20px; /* Premakne checkbox bolj levo */
    transform: translateY(-2px); /* Premakne checkbox nekoliko višje */
}


/* Skrij dejanski checkbox */
.checkbox-module {
    display: none;
}

/* Začetni status križca (za False) */
.checkbox-module + label::before {
    content: "\2716"; /* Unicode za križec */
    color: red;
    font-size: 16px;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}

/* Status kljukice (za True) */
.checkbox-module:checked + label::before {
    content: "\2714"; /* Unicode za kljukico */
    color: green;
}

/* Centriranje vsebine celice tabele za checkboxe */
.work-orders-table td.checkbox-cell {
    text-align: center; /* Poravna vsebino celice na sredino */
    vertical-align: middle; /* Poravna vsebino celice po višini na sredino */
}

/* Prilagoditev za ime in priimek uporabnika */
.work-orders-table td.user-name {
    text-align: left; /* Poravnava na levo */
    vertical-align: middle; /* Vertikalna poravnava na sredino */
}

/* Skrij dejanski checkbox */
.checkbox-module {
    display: none;
}

/* Začetni status križca (za False) */
.checkbox-module + label::before {
    content: "\2716"; /* Unicode za križec */
    color: red;
    font-size: 16px;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px; /* Poravna vsebino na sredino */
    vertical-align: middle;
    border-radius: 50%;
}

/* Status kljukice (za True) */
.checkbox-module:checked + label::before {
    content: "\2714"; /* Unicode za kljukico */
    color: green;
}





.work-order-form label {
    font-size: 16px;
    font-weight: 500;
    color: var(--grey-color);
    margin-bottom: 5px;
}

.work-order-form input[type="text"],
.work-order-form textarea {
    padding: 10px;
    font-size: 16px;
    border: 1px solid var(--grey-color-light);
    border-radius: 5px;
    color: var(--grey-color);
    background-color: #fff;
}

.work-order-form textarea {
    resize: vertical;
}

.work-order-form input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Povečaj checkbox */
}

.work-order-form .form-actions {
    display: flex;
    justify-content: flex-end; /* Poravnaj gumb za shranjevanje na desno */
    margin-top: 20px;
}

.generate-report-btn {
    display: flex;
    align-items: center;
    background-color: var(--blue-color); /* Uporabi glavno modro barvo za gumb */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}



.action-icon {
    width: 18px;
    height: 18px;
    object-fit: cover;
}


.action-btn {
    background-color: transparent;
    border: 1px solid var(--grey-color-light);
    padding: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.action-icon {
    width: 20px;  /* Nastavi širino ikone */
    height: 20px; /* Nastavi višino ikone */
    vertical-align: middle; /* Poravna ikono na sredino glede na gumb */
}


.permissions-table {
    width: 100%;
    max-width: 1000px; /* Maksimalna širina tabele */
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed;
    background-color: #f9f9f9; /* Svetla barva ozadja */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Rahlo senco za boljši izgled */
    border-radius: 10px; /* Rahlo zaobljeni robovi */
    overflow: hidden; /* Odstrani morebitne presežne robove */
}

.permissions-table th, .permissions-table td {
    padding: 5px 7px;
    border: 1px solid #ddd;
    text-align: center;
    color: var(--grey-color); /* Uporabi barvo teksta iz stila */
    font-size: 14px;
}

.permissions-table th {
    background-color: #f2f2f2;
    font-weight: 600;
    text-align: center;
    color: var(--grey-color); /* Tekst barva za header */
    line-height: 2.5;
    font-size: 16px;
}

.permissions-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Na vsako drugo vrstico se uporabi svetlejša barva */
}

.permissions-table tr:nth-child(odd) {
    background-color: #fff; /* Na vsako prvo vrstico se uporabi bela barva */
}

/* Stilizacija za select element */
.permission-select {
    height: 40px; /* Nastavi širino spustnega seznama */
    width: 60%;
    padding: 5px;
    border: 1px solid var(--grey-color-light);
    border-radius: 5px;
    background-color: white; /* Privzeta barva ozadja */
    color: var(--grey-color);
    font-size: 14px;
}

.permission-select[data-permission="0"] {
    background-color: red; /* Rdeče ozadje za 'Dostop onemogočen' */
    color: white;
}

.permission-select[data-permission="1"] {
    background-color: orange; /* Oranžno ozadje za 'Omogočeno gledanje' */
    color: white;
}

.permission-select[data-permission="2"] {
    background-color: green; /* Zeleno ozadje za 'Omogočeno urejanje' */
    color: white;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start; /* Postavi gumb na levo */
    padding-left: 40%; /* Prilagodite vrednost za premik gumba bolj v desno */
}



.action-btn-save {
    background-color: var(--blue-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Dodano za gladko prehajanje barv */
}

.action-btn-save:hover {
    background-color: #335cb3; /* Temnejša modra barva za hover stanje */
    color: white; /* Ohranite belo barvo besedila */
}



/* Stil za obrazec za urejanje uporabnika */
.user-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Razmik med polji obrazca */
    background-color: #f9f9f9; /* Svetlo ozadje za obrazec */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Rahla senca za boljši izgled */
    margin-top: 20px; /* Prostor nad obrazcem */
}

.user-form .form-group {
    display: flex;
    flex-direction: column;
}

.user-form label {
    font-size: 14px;
    font-weight: 500;
    color: var(--grey-color);
    margin-bottom: 5px;
}

.user-form input[type="text"],
.user-form input[type="email"],
.user-form .form-group input[type="password"],
.user-form select {
    padding: 10px;
    font-size: 14px;
    border: 1px solid var(--grey-color-light);
    border-radius: 5px;
    color: var(--grey-color);
    background-color: #fff;
}

.user-form input[type="checkbox"] {
    transform: scale(1.2); /* Povečaj checkbox */
    margin-left: -610px; /* Premakne checkbox bolj levo */
    transform: translateY(-23px); /* Premakne checkbox nekoliko višje */
}

.user-form .form-group-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.user-form .form-group-inline label {
    margin: 0;
}

.user-form .form-actions {
    display: flex;
    justify-content: flex-end; /* Poravnaj gumb za shranjevanje na desno */
    margin-top: 20px;
}

.user-form .action-btn-save {
    background-color: var(--blue-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Dodano za gladko */
}



.users-edit-table th, .users-edit-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.users-edit-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.users-edit-table tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* Za tabelo work-orders */
.users-edit-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed;
}

/* Za vse celice v tabeli */
.users-edit-table td{
    color: var(--grey-color);
    font-weight: 400;
    font-size: 14px;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* Spodnja črta za ločitev vrstic */
}

/* Nastavitve za stolpce z naslovi */
.users-edit-table th {
    font-weight: 600;
    background-color: #f1f1f1;
    border-bottom: 2px solid var(--grey-color-light);
}

/* Nastavitve za širine stolpcev */
.users-edit-table th:nth-child(1),
.users-edit-table td:nth-child(1) {
    width: 20%; /* Nastavi relativno širino za prvi stolpec 'Delovni nalog' */

}

.users-edit-table th:nth-child(2),
.users-edit-table td:nth-child(2) {
    width: 10%; /* Nastavi širino za stolpec 'Opis' kot najširši */
    word-wrap: break-word; /* Razbije dolge besede v več vrstic */
}

.users-edit-table th:nth-child(3),
.users-edit-table td:nth-child(3) {
    width: 15%; /* Nastavi širino za stolpec 'Opis' kot najširši */
    word-wrap: break-word; /* Razbije dolge besede v več vrstic */
}


.users-edit-table th:nth-child(4),
.users-edit-table td:nth-child(4) {
    width: 25%; /* Nastavi širino za stolpec 'Ustvarjeno' */
}

.users-edit-table th:nth-child(5),
.users-edit-table td:nth-child(5) {
    width: 7%; /* Nastavi širino za stolpec z gumbi */
    text-align: center; /* Poravnava besedila na sredino */
}

.users-edit-table th:nth-child(6),
.users-edit-table td:nth-child(6) {
    width: 7%; /* Nastavi širino za stolpec z gumbi */
    text-align: center; /* Poravnava besedila na sredino */
}

.users-edit-table th:nth-child(7),
.users-edit-table td:nth-child(7) {
    width: 4%; /* Nastavi širino za stolpec z gumbi */
}

.inactive-row {
    background-color: #FFFFFF; /* Svetlo roza barva za ozadje */
}

.inactive-row td {
    color: #DCDCDC !important; /* Svetlo siva barva za besedilo v celicah, z uporabo !important */
}

.inactive-row .action-btn img {
    opacity: 0.4; /* Zmanjšajte vidnost ikone */
}

.form-group-inline-user input[type="checkbox"] {
    margin-left: 20px; /* Premik checkboxa bolj levo */
    transform: scale(1.2); /* Povečaj checkbox */
    transform: translateY(0px); /* Premakne checkbox nekoliko višje */
}

.form-group-inline-active select {
    margin-left: 20px; /* Premik levo za 20px */
}