@charset "UTF-8";

/*

  PZS - Planinske poti - 1.6.0 20230328

*/

html,

body {

  width: 100%;

  height: 100%;

  padding: 0;

  margin: 0;

  background-color: rgba(0, 0, 0, 0.1);

  overflow: hidden;

}



.main-container {

  display: flex;

  height: 100%;

  flex-direction: row;

}



.main-container.port {

  flex-direction: column;

}



.map-container {

  flex-basis: 100%;

  touch-action: none;

  position: relative;

  height: 100vh;

}



.swal2-container * {

  font-family: Roboto, Arial, Helvetica, sans-serif;

}



.elevation {

  font-family: Roboto, Arial, Helvetica, sans-serif;

}



.kazipot-delete-steber,
.kazipot-edit-steber {

  cursor: pointer;

  padding: 4px;

  flex-shrink: 0;

}

.kazipot-delete-steber:hover,
.kazipot-edit-steber:hover {

  background-color: #f4f4f4;

  border-radius: 50%;

}



.sponzor-container {

  position: relative;

  display: flex;

}

.sponzor-container .sponzor-image-upload {

  height: 15px;

  /* width: 24px; */

  max-width: 0 !important;

  background-color: #eee;

  transition: 300ms ease-in-out all;

  flex-shrink: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #777;

  font-size: 14px;

  overflow: hidden;

  cursor: pointer;

}

.sponzor-container input {

  flex-grow: 1;

}

.sponzor-container:hover .sponzor-image-upload,
.sponzor-container:has(input:focus) .sponzor-image-upload,
.sponzor-container .sponzor-image-upload.fixed {

  max-width: 300px !important;

  margin-right: 8px;

}

.sponzor-container .sponzor-image-upload.fixed {

  justify-content: flex-start;

}

.sponzor-container .sponzor-image-upload.fixed .sponzor-image {

  height: 15px;

  /* width: 24px; */

  flex-grow: 1;

  flex-shrink: 0;

}



.obhodnica-logo-container {

  position: relative;

  margin-right: 0px;

  margin-left: 2px;

}

.obhodnica-logo-container .logo-hide {

  display: none;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.5);

}

.obhodnica-logo-container:hover .logo-hide {

  display: flex;

  cursor: pointer;

  font-size: 16px;

  color: white;

  justify-content: center;

  align-items: center;

}

.obhodnica-logo-container.deleted {

  opacity: 0.4;

}

.obhodnica-logo-container-kolo {

  position: relative;

  margin-bottom: 2px;

}

.obhodnica-logo-container-kolo .logo-hide {

  display: none;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.5);

}

.obhodnica-logo-container-kolo:hover .logo-hide {

  display: flex;

  cursor: pointer;

  font-size: 16px;

  color: white;

  justify-content: center;

  align-items: center;

}

.obhodnica-logo-container-kolo.deleted {

  opacity: 0.4;

}





.hidden {

  display: none !important;

}



.elevation-header {

  padding-top: 2px;

}



.map-separate-elevation {

  width: 100%;

  overflow: hidden;

}



.separate-elevation {

  width: 100%;

  overflow: hidden;

}



.navodila {

  background-color: orangered;

  color: black;

  border-radius: 8px;

  padding: 8px 12px;

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 8px 0 0 !important;

  font-weight: bold;

}

.navodila .fake-button {

  background-color: #3498DB;

  color: white;

  padding: 6px;

  font-size: 16px;

  width: 90px;

  border: none;

}



.bottomnav-container {

  font: 10pt Roboto, Arial, Helvetica, sans-serif;

  font-size: 16px;

  background-color: white;

  position: fixed;

  bottom: 10px;

  left: 10px;

  margin-top: 20px;

  margin-right: 500px;

  z-index: 20000;

  width: calc(100% - 485px);

  max-width: fit-content;

  min-height: 325px;

  display: none;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.9);

}

.bottomnav-container label {

  display: block;

}



.bottomnav-arrowcontainer {

  position: fixed;

  bottom: 0;

  left: 0;

  margin-right: 500px;

  width: calc(100% - 485px);

  height: 30px;

}



#stebri-bottom-container {

  font: 10pt Roboto, Arial, Helvetica, sans-serif;

  font-size: 16px;

  background-color: white;

  position: fixed;

  bottom: 0;

  left: 0;

  margin-right: 500px;

  width: calc(100% - 485px);

  max-width: fit-content;

  min-height: 150px;

  display: none;

  z-index: 20000;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  padding: 2rem;

}



.d-flex {

  display: flex;

}



.justify-content-between {

  justify-content: space-between;

}



.align-content-center {

  align-content: center;

}



.stebri-button {

  line-height: 1.1;

  background-color: #cfe6fb;

  padding: 5px;

  border: 1px solid #AAAAAA;

  margin: 10px;

}



.stebri-button:hover {

  background-color: #a1cdf7;

}



.b-container {

  display: inline-block;

  background-color: lightblue;

  border-radius: 15px;

  padding: 1rem 1rem;

  vertical-align: top;

  margin: 2px;

}



.bottom-close-strip {

  cursor: pointer;

  font-size: 24px;

}



.bottom-open-strip {

  margin-bottom: auto;

  align-self: center;

  cursor: pointer;

}



.cilji-wrapper {

  position: absolute;

  top: 36px;

  right: 0;

  left: 5px;

  bottom: 24px;

}



.cilji-table {

  width: 100%;

  table-layout: fixed;

}



.difficulty-cell {

  width: 24px;

  text-align: center;

}

.difficulty-cell .difficulty {

  height: 20px;

}



#pot-logos>* {

  width: auto !important;

  height: 20px;

  float: right;

}

#pot-logos>* img {

  height: 20px !important;

  width: auto !important;

}

#pot-logos-kolo>* {

  height: auto !important;

  width: 25px;

  float: left;

}

#pot-logos-kolo>* img {

  width: 25px !important;

  height: auto !important;

}

.obhodnica-logo {

  /*display: flex;

  justify-content: space-between;

  align-items: center;*/

  margin-bottom: 8px;

  max-width: 250px;

  font-size: 14px;

}

.obhodnica-logo img {

  height: 20px;

}

.obhodnica-logo .obhodnica-naziv {

  display: flex;

  gap: 8px;

  align-items: center;

}

.obhodnica-logo .obhodnica-naziv img {

  flex-shrink: 0;

}

.obhodnica-logo .obhodnica-actions {

  display: flex;

  justify-content: space-around;

}

.obhodnica-logo .obhodnica-actions>* {

  border: 1px solid #ccc;

  background-color: #F4F4F4;

}



.invisible {

  visibility: hidden;

}



.direction-cell {

  max-width: 280px;

  width: 300px;

}



.cilji-footer {

  position: absolute;

  bottom: 0;

  left: 2px;

  right: 2px;

  padding: 4px;

  display: flex;

  justify-content: space-between;

}

.cilji-footer>* {

  flex: 1;

  max-width: 49%;

}



#arrowid {

  /* font-family: Roboto, Arial, Helvetica, sans-serif; */

  font-family: 'Arial Narrow';

}

#arrowid.arrow-red input,
#arrowid.arrow-red .arrow-input {

  background-color: #db3b1b;

}

#arrowid.arrow-red input::placeholder,
#arrowid.arrow-red .arrow-input::placeholder {

  color: #fff;

}

#arrowid.arrow-red .arrow-left {

  border-right-color: #db3b1b;

}

#arrowid.arrow-red .arrow-right {

  border-left-color: #db3b1b;

}

#arrowid.arrow-red .arrowx {

  background-color: #db3b1b;

  color: #fff;

}

#arrowid.arrow-red .razdalja {

  display: none;

}

#arrowid.arrow-yellow input,
#arrowid.arrow-yellow .arrow-input {

  background-color: #fffe41;

  color: #000;

}

#arrowid.arrow-yellow input::placeholder,
#arrowid.arrow-yellow .arrow-input::placeholder {

  color: #000;

}

#arrowid.arrow-yellow .arrow-left {

  border-right-color: #fffe41;

}

#arrowid.arrow-yellow .arrow-right {

  border-left-color: #fffe41;

}

#arrowid.arrow-yellow .arrowx {

  background-color: #fffe41;

  color: #000;

}

#arrowid.arrow-yellow .razdalja {

  display: none;

}

#arrowid.arrow-blue input,
#arrowid.arrow-blue .arrow-input {

  background-color: #017dbf;

}

#arrowid.arrow-blue input::placeholder,
#arrowid.arrow-blue .arrow-input::placeholder {

  color: #fff;

}

#arrowid.arrow-blue .arrow-left {

  border-right-color: #017dbf;

}

#arrowid.arrow-blue .arrow-right {

  border-left-color: #017dbf;

}

#arrowid.arrow-blue .arrowx {

  background-color: #017dbf;

  color: #fff;

}

#arrowid.arrow-blue .min,
#arrowid.arrow-blue .cas {

  display: none;

}

#arrowid input {

  color: inherit;

}

#arrowid input::placeholder {

  opacity: 0.3;

}

#arrowid .ime {

  width: 274px;

  border: 0;

  /*text-align: right;*/

}

#arrowid .nv {

  position: absolute;

  margin-left: 10px;

  margin-top: 1px;

  font-size: 16px;

  vertical-align: bottom;

}

#arrowid .nadmorska {

  width: 275px;

  border: 0;

  text-align: left;

  margin-left: 15px;

  margin-top: 1px;

}

#arrowid .m {

  position: absolute;

  right: 0;

  top: 0;

  margin-top: 1px;

  font-size: 16px;

  vertical-align: bottom;

}

#arrowid .cas {

  height: 28px;

  width: 50px;

  font-size: 24px;

  border: 0;

  text-align: end;

}

#arrowid .min {

  height: 28px;

  width: 77px;

  font-size: 24px;

  border: 0;

  text-align: end;

}

#arrowid .razdalja {

  height: 28px;

  width: 130px;

  font-size: 24px;

  border: 0;

  text-align: end;

}

#arrowid .skrbnik {

  border: 0;

  /*height: 20px;

  margin-top: 8px;

  width: 300px;

  border: 0;

  transform: translate(-65%, 10%);*/

  text-align: right;

  max-width: 210px;

}

#arrowid .sponzor {

  border: 0;

  /*height: 20px;

  margin-top: 19px;

  width: 140px;

  border: 0;

  left: 0;

  transform: translate(0%, -40%);*/

}

#arrowid .tezavnost-input-container {

  position: absolute;

  top: 50%;

  left: 0%;

  transform: translate(0%, -50%);

  width: 35px;

  margin-left: 10px;

  height: 60%;

}

#arrowid .info-input-container {

  position: absolute;

  top: 50%;

  right: 0;

  transform: translate(-10%, -50%);

  width: 127px;

  height: 60%;

}

#arrowid .arrow-right {

  position: absolute;

  top: 0;

  right: -80px;

  width: 0;

  height: 0;

  border-top: 100px solid transparent;

  border-left-width: 80px;

  border-left-style: solid;

  border-bottom: 100px solid transparent;

}

#arrowid .arrow-left {

  position: absolute;

  top: 0;

  left: -80px;

  width: 0;

  height: 0;

  border-top: 100px solid transparent;

  border-right-width: 80px;

  border-right-style: solid;

  border-bottom: 100px solid transparent;

}



.down-arrow {

  width: 0;

  height: 0;

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-top: 15px solid #000;

  /* You can adjust the color here */

  margin: 15px auto;

  /* Adjust the margin as needed to position the arrow vertically */

}



.up-arrow {

  width: 0;

  height: 0;

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-bottom: 15px solid #000;

  /* You can adjust the color here */

  margin: 7px auto;

  /* Adjust the margin as needed to position the arrow vertically */

}



.center-div {

  display: flex;

  justify-content: center;

  align-items: center;

}



.sidenav-container {

  flex: 0 0 400px;

  background-color: transparent;

  caret-color: transparent;

}



.sidenav-container input:focus {

  caret-color: auto;

}



.sidenav-container.wide-help {

  flex: 0 0 400px;

}



.sidenav-container.port {

  flex: 0 0 250px;

}



.sidenav-container.shrinked {

  flex: 0 0 8px;

}



.sidenav-container.port.shrinked {

  flex: 0 0 11px;

}



.sidenav-container.port.search {

  flex: 0 0 56px;

}



.sidenav-envelope {

  position: relative;

  height: 100%;

  width: 100%;

  background-color: transparent;

}



.sidenav {

  display: flex;

  flex-direction: column;

  width: 100%;

  box-sizing: border-box;

  position: absolute;

  top: 0px;

  left: 0px;

  font: 10pt Roboto, Arial, Helvetica, sans-serif;

  vertical-align: top;

  height: 100%;

  line-height: 1;

  overflow: hidden;

  padding-right: 4px;

  padding-bottom: 6px;

  text-decoration: none;

  color: #4E4E4E;

  background-color: #F4F4F4;

  border-left: 1px solid #BBBBBB;

  border-top: 1px solid #BBBBBB;

  border-bottom: 1px solid #BBBBBB;

  border-radius: 4px;

  z-index: 17;

}



.sidenav.mobile {

  border-left: 2px solid #BBBBBB;

  border-top: 0px;

  border-bottom: 0px;

}



.sidenav.mobile.port {

  border-left: 0px;

  border-bottom: 0px;

  border-top: 2px solid #BBBBBB;

}



.sidenav-content {

  position: relative;

  flex-basis: 100%;

  padding-left: 8px;

  padding-right: 4px;

  overflow-y: auto;

  z-index: 20;

}



.sidenav-content-line {

  display: block;

  height: 0px;

  border: 0;

  border-top: 1px solid #AAAAAA;

  margin: 0;

  padding: 0;

}



.help .sidenav-content {

  margin-top: -6px;

}



.sidenav-content a {

  text-decoration: none;

  color: blue;

}



.sidenav-content a:hover {

  text-decoration: underline;

  color: blue;

}



.sidenav-content a:visited {

  text-decoration: none;

  color: blue;

}



.mobile .sidenav-content {

  padding-left: 10px;

  padding-right: 12px;

}



.sidenav-content.elevation {

  width: calc(100% - 12px);

  height: calc(100% - 20px);

  padding-top: 2px;

  padding-left: 8px;

  padding-right: 6px;

}



.sidenav-close-strip-back {

  box-sizing: border-box;

  position: absolute;

  left: -8px;

  top: calc(50% - 30px);

  width: 20px;

  height: 60px;

  color: black;

  border: 2px solid #BBBBBB;

  border-radius: 10px;

  background-color: white;

  z-index: 9;

}



.sidenav-close-strip-front {

  box-sizing: border-box;

  position: absolute;

  left: -6px;

  top: calc(50% - 28px);

  width: 14px;

  height: 56px;

  border-radius: 10px;

  background-color: #F4F4F4;

  z-index: 18;

}



.shrinked .sidenav-close-strip-front {

  background-color: #FFFFAA;

}



.sidenav-close-strip-back.for-shrink {

  left: -12px;

  width: 24px;

  background-color: #F4F4F4;

}



.shrinked .sidenav-close-strip-front.for-shrink {

  background-color: #FFFFAA;

  width: 10px;

}



.sidenav-close-strip-front.for-shrink {

  left: -10px;

  width: 18px;

  background-color: #F4F4F4;

  cursor: pointer;

}



.sidenav-close-strip-line {

  box-sizing: border-box;

  position: absolute;

  left: -1px;

  top: calc(50% - 20px);

  width: 2px;

  height: 40px;

  background-color: lightgrey;

  z-index: 19;

  pointer-events: none;

}



.sidenav-close-strip-arrow {

  box-sizing: border-box;

  position: absolute;

  left: -7px;

  top: calc(50% - 10px);

  color: #106DBA;

  transform: scaleY(2.8);

  z-index: 19;

  pointer-events: none;

  font-weight: bold;

}



.sidenav-close-strip-back.port {

  top: -7px;

  left: calc(50% - 30px);

  width: 60px;

  height: 20px;

}



.sidenav-close-strip-front.port {

  top: -5px;

  left: calc(50% - 28px);

  height: 16px;

  width: 56px;

  border-radius: 10px;

}



.sidenav-close-strip-line.port {

  box-sizing: border-box;

  position: absolute;

  top: 0px;

  left: calc(50% - 20px);

  height: 2px;

  width: 40px;

}



.sidenav-title-container {

  margin-left: 8px;

  margin-right: 2px;

  margin-bottom: 6px;

}



.mobile .sidenav-title-container {

  margin-top: -14px;

  margin-left: 0px;

}



.sidenav-title {

  font-size: 14pt;

  font-weight: bold;

  color: #0D5997;

  margin-top: 6px;

}



.sidenav-message {

  padding-left: 8px;

  padding-right: 8px;

  margin-bottom: 12px;

}



.sidenav-search {

  width: calc(100% - 10px);

  padding-left: 0px;

  padding-right: 8px;

  margin-left: 8px;

  margin-right: 2px;

  margin-bottom: 6px;

  border-radius: 2px;

}



.mobile .sidenav-search {

  width: calc(100% - 70px);

  margin-top: -30px;

  margin-left: 38px;

  margin-bottom: 4px;

  padding-right: 2px;

}



.sidenav-command-strip {

  width: calc(100% - 8px);

  padding: 4px 4px 4px 4px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



.mobile .sidenav-command-strip {

  padding-top: 6px;

}



.sidenav-command-strip-left {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

}



.sidenav-command-strip-right {

  display: flex;

  flex-direction: row;

  justify-content: flex-end;

}



.goback-button {

  font-size: 15px;

  color: #106DBA;

}



.goback-button:link {

  text-decoration: none;

}



.goback-button:visited {

  text-decoration: none;

}



.mobile .goback-button {

  font-size: 20px;

}



.goback-mobile {

  position: absolute;

  right: 10px;

  top: 8px;

  font-size: 22px;

  color: #106DBA;

  background-color: white;

  z-index: 50;

  padding-top: 2px;

  padding-left: 4px;

  padding-right: 4px;

  padding-bottom: 4px;

}



.height-toggle {

  font-size: 19px;

  color: #106DBA;

  margin-left: 10px;

  padding-top: 2px !important;

  padding-bottom: 2px !important;

}



.mobile .height-toggle {

  font-size: 23px;

}



.height-toggle:link {

  text-decoration: none;

}



.height-toggle:visited {

  text-decoration: none;

}



.gpx-download-button {

  font-size: 16px;

  color: #106DBA;

  margin-left: 4px;

}



.gpx-download-button:link {

  text-decoration: none;

}



.gpx-download-button:visited {

  text-decoration: none;

}



.gpx-download-icon {

  transform: scaleX(1.6);

  padding-left: 4px;

  padding-right: 1px;

  z-index: 19;

}



.mobile .gpx-download-icon {

  transform: scale(1.8, 1.1);

}



.gpx-download-gpx {

  position: absolute;

  top: 9px;

  left: 14px;

  font-family: Roboto, Arial, Helvetica, sans-serif;

  font-size: 10px;

  color: #F4F4F4;

  transform: scale(0.9, 1);

  pointer-events: none;

  z-index: 20;

}



.mobile .gpx-download-gpx {

  transform: scale(0.9, 1);

}



.close-button {

  font-size: 17px;

  color: #106DBA;

}



.close-button:link {

  text-decoration: none;

}



.close-button:visited {

  text-decoration: none;

}



.mobile .close-button {

  font-size: 23px;

}



.command-button {

  border: rgba(0, 0, 0, 0) 1px solid;

  padding: 4px 6px;

}



.command-button:hover {

  background-color: rgba(0, 0, 0, 0.1);

  cursor: default;

}



.command-button.active {

  background-color: rgba(0, 0, 0, 0.1);

}



.command-button.active:hover {

  border: rgba(0, 0, 0, 0.2) 1px solid;

  box-sizing: content-box;

}



.mobile .sidenav-command-strip-left .command-button {

  margin-right: 8px;

}



.mobile .command-button:hover {

  background-color: transparent;

}



.search-prompt-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 6px;

  margin-right: 4px;

}



.mobile .search-prompt-container {

  display: none;

}



.search-prompt {

  color: #747474;

  font-weight: bold;

}



.search-input-field {

  box-sizing: border-box;

  width: 100%;

  margin-bottom: 4px;

  padding: 4px;

  padding-right: 26px;

  border: 1px solid rgb(200, 200, 200);

  color: rgb(78, 78, 78);

  cursor: text;

}



.search-input-field:focus {

  border: 1px solid rgba(16, 109, 186, 0.7);

  outline: none;

}



.search-input-icon {

  display: block;

  position: absolute;

  right: 4px;

  top: 3px;

  font-size: 18px;

  color: #AAAAAA;

  cursor: pointer;

}



.search-input-icon.icon-passive {

  cursor: default;

}



.search-type {

  margin-top: 4px;

  margin-right: 8px;

}



.search-type.left {

  float: left;

}



.search-type.right {

  float: right;

}



.search-type-selection label {

  font-family: Roboto, Arial, Helvetica, sans-serif;

  font-size: 12px;

  line-height: 13px;

  margin-left: 2px;

  display: flex !important;

  padding-top: 2px;

  padding-bottom: 2px;

  padding-right: 4px;

  user-select: none;

}



.search-type-selection label:hover {

  background-color: rgba(0, 0, 0, 0.1);

}



.search-type-selection input[type=checkbox] {

  display: none !important;

}



.search-type-selection input[type=checkbox]+label:before {

  box-sizing: border-box;

  content: "";

  display: inline-block;

  width: 12px;

  height: 12px;

  padding: 0px;

  margin-right: 4px;

  margin-left: 4px;

  margin-top: 1px;

  background-clip: content-box;

  border: 2px solid #aaaaaa;

  border-radius: 10%;

  text-indent: 2px;

  background-color: white;

}



.search-type-selection input[type=checkbox]:checked+label:before {

  content: "âś”";

  font-size: 10px;

  color: white;

  background-color: #1470bb;

  border: 0px;

}



.help-control.shown>button {

  color: #106DBA;

  background-image: none;

  background-color: transparent;

  position: absolute;

  bottom: 6px;

  right: 6px;

  font: normal normal normal 0.9em/1 FontAwesome;

}



.help-control.shown>button:focus {

  color: #106DBA;

  background-image: none;

  background-color: transparent;

}



.help-control.shown>button:hover {

  color: #106DBA;

  background-image: none;

  background-color: rgba(0, 0, 0, 0.1) !important;

}



.help-control-body {

  box-sizing: border-box;

  border: 4px solid rgb(238, 238, 238);

  border-radius: 4px;

  padding: 8px;

  padding-bottom: 16px;

  background-color: white;

  font: 10pt Roboto, Arial, Helvetica, sans-serif;

  vertical-align: top;

  line-height: 1.5em;

  color: #4E4E4E;

}



.help-control-list-item {

  padding-left: 2px;

  margin-top: 2px;

  margin-bottom: 2px;

  border: rgba(0, 0, 0, 0) 1px solid;

}



.help-control-list-item:hover {

  cursor: pointer;

  background-color: rgba(0, 0, 0, 0.1);

  border: rgba(0, 0, 0, 0.15) 1px solid;

}



.help-control-list-item.active {

  background-color: rgba(0, 0, 0, 0.1);

}



.ol-touch .help-control-list-item:hover {

  border: rgba(0, 0, 0, 0) 1px solid;

}



.help-content.info-content-section {

  line-height: normal;

  padding-left: 10px;

  padding-right: 6px;

  padding-top: 8px;

}



.mobile .help-content.info-content-section {

  margin-left: 0px;

  margin-right: 0px;

}



.help-closebtn {

  margin-top: 4px;

  margin-right: 2px;

}



.help-title {

  font-size: 14pt;

  font-weight: bold;

  color: #0D5997;

  margin-top: -16px;

  margin-bottom: 10px;

  margin-right: 30px;

}



.help-subtitle {

  font-size: 11pt;

  font-weight: bold;

  color: #0D5997;

  margin-bottom: 6px;

}



.help-subsection {

  margin-left: 14px;

}



.help-subsection-title {

  margin-left: 6px;

  margin-bottom: 2px;

  color: #777777;

  font-weight: bold;

}



.help-content p {

  margin-top: 0px;

}



.help-legend {

  margin-bottom: 12px;

  width: calc(100% - 8px);

  border-collapse: collapse;

}



.help-legend-img {

  width: 5%;

  vertical-align: top;

}



.help-legend-img img {

  width: 75px;

}



.help-legend-img.for-edit img {

  width: 22px;

}



.help-legend-txt {

  width: 95%;

  padding-left: 6px;

}



.info-content-title {

  margin-top: 0px;

  margin-bottom: 5px;

  color: #747474;

  font-weight: bold;

}



.info-content-title.top-margin {

  margin-top: 12px;

}



.info-content-title.sort {

  margin-top: 12px;

  padding-bottom: 2px;

}



.sort-dropdown {

  float: right;

  overflow: visible;

  position: relative;

}



.sort-dropdown .sort-dropbtn {

  display: inline;

  color: white;

  background-color: lightgray;

  font: inherit;

  font-weight: 300;

  padding: 0px 4px 2px 4px;

  border-radius: 2px;

  cursor: default;

}



.sort-dropdown-content {

  position: absolute;

  top: -2px;

  right: 0px;

  padding: 4px 6px;

  font-weight: normal;

  white-space: nowrap;

  background-color: #f9f9f9;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  border-radius: 2px;

  z-index: 1;

}



.sort-dropdown-content>div {

  padding: 2px 4px;

  cursor: default;

}



.sort-dropdown-content>div:hover {

  background-color: #ddd;

}



.sort-arrow {

  float: right;

  margin-right: 4px;

  margin-top: 1px;

  color: darkgray;

}



.info-content-block {

  width: 100%;

  border-collapse: collapse;

  margin-top: 2px;

  margin-bottom: 4px;

}



.info-content-block.bottom-margin {

  margin-bottom: 10px;

}



.info-content-section {

  background-color: white;

  border-radius: 2px;

  border: 1px #AAAAAA solid;

  width: inherit;

  padding: 4px;

  padding-top: 8px;

  margin-top: 2px;

}



.info-content-section.message {

  background-color: #FFFFEA;

  padding-bottom: 8px;

}



.track-info-title {

  background-color: #CFE6FC;

  padding: 6px;

  padding-left: 8px;

  font-weight: bold;

  margin-top: 8px;

}



.track-info-title:hover {

  cursor: pointer;

}



.track-info-title.hover {

  cursor: pointer;

  background-color: #F9F7B0;

}



.track-info-title.mobile {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.track-info-title.hut {

  background-color: #EEEEDD;

}



.track-info-title.hut.hover {

  background-color: #F9F7B0;

}



.track-info-title.poi {

  background-color: #D6EFD7;

}



.track-info-title.poi.hover {

  background-color: #F9F7B0;

}



.track-info-title.track-list {

  margin-top: 0px;

  margin-bottom: 6px;

  padding-left: 1.8em;

  text-indent: -1.6em;

  display: block;

  white-space: normal;

  background-color: #E1EEFD;

  font-weight: normal;

}



.track-info-title.kazipot.red {

  background-color: rgba(219, 59, 27, 0.5);

}

.track-info-title.kazipot.blue {

  background-color: rgba(1, 125, 191, 0.5);

}

.track-info-title.kazipot.yellow {

  background-color: rgba(255, 254, 65, 0.5);

}



.track-info-title.track-list.hover {

  background-color: #F9F7B0;

}



.info-content-section .stage-name-divider {

  display: inline-block;

  margin-top: 6px;

}



.track-info-title .stage-track:hover {

  background-color: #F9F7B0;

}



.closed-section {

  background-color: #FFC8C8;

}



.closed-section-tooltip {

  background-color: #FF0000;

  color: white;

}



.track-info-subtitle {

  font-weight: bold;

  background-color: #F2F2F2;

  padding-top: 4px;

  padding-bottom: 4px;

}



.track-info-row-subtitle:hover td {

  cursor: pointer;

}



.track-info-row-subtitle.hover td {

  background-color: #F9F7B0;

  cursor: pointer;

}



.track-info-row-subtitle.mobile {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.track-info-row-subtitle.mobile.hover {

  background-color: #F9F7B0;

}



.track-info-content0 {

  vertical-align: top;

  line-height: 1.1;

  padding-left: 8px;

}



.track-info-content0 p:first-child {

  display: inline;

}



.track-info-content0 p:last-child {

  display: inline;

}



.track-info-content1 {

  padding-right: 6px;

  vertical-align: top;

  width: 10%;

  white-space: nowrap;

  line-height: 1.1;

  padding-left: 8px;

}



.track-info-content2 {

  vertical-align: bottom;

  line-height: 1.1;

  width: 99%;

}



.track-info-content-image {

  width: 100%;

  padding-top: 6px;

  padding-left: 8px;

  padding-right: 6px;

}



.track-info-content-image.small img {

  max-height: 50px;

  display: block;

  width: auto;

}



.track-info-image {

  width: 100%;

  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 26px 0 rgba(0, 0, 0, 0.19);

}



.track-info-image.for-slide:hover {

  cursor: pointer;

}



.track-diff-perc {

  padding-top: 1px;

  padding-bottom: 1px;

  padding-left: 2px;

  padding-right: 2px;

  line-height: 1.4;

  border-radius: 2px;

  color: white;

}



.track-diff-perc.diff1 {

  background-color: #00CC99;

}



.track-diff-perc.diff2 {

  background-color: #FF5B5B;

}



.track-diff-perc.diff3 {

  background-color: #676767;

}



.track-diff-perc.diff4 {

  background-color: #111111;

}



.track-tooltip-list {

  list-style: none;

  margin-top: 0px;

  margin-bottom: 0px;

  margin-left: -1.3em;

}



.track-tooltip-list ul li {

  margin-top: 0px;

  margin-bottom: 0px;

}



.track-tooltip-list li:before {

  content: "-";

  padding-right: 0.5em;

  margin-left: -0.8em;

}



.hut-info {

  border-collapse: collapse;

}



.hut-info td {

  border-collapse: collapse;

  border: 2px white solid;

  padding-top: 2px;

  padding-bottom: 2px;

}



.hut-info-title {

  white-space: nowrap;

  font-weight: bold;

  padding-bottom: 4px !important;

  padding-right: 16px;

}



.hut-info-link {

  text-align: center;

  padding-top: 6px !important;

}



.hut-info-link a {

  text-decoration: none;

}



.hut-info-content1 {

  width: 10px;

  white-space: nowrap;

  padding-left: 2px;

  padding-right: 4px;

  vertical-align: top;

  text-align: right;

  line-height: 1.1;

}



.hut-info-content2 {

  max-width: 140px;

  vertical-align: top;

  text-align: left;

  line-height: 1.1;

  background-color: #F0F0F0;

  padding-left: 4px;

  padding-right: 4px;

}



.hut-season {

  float: left;

  padding-left: 6px;

  padding-right: 6px;

  padding-bottom: 2px;

  padding-top: 1px;

  margin-right: 2px;

  margin-bottom: 2px;

  background-color: #E2FCE7;

  border-radius: 2px;

}



.ol-scale-line {

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  background: rgba(104, 140, 185, 0.8);

  position: relative;

  bottom: auto;

  left: auto;

  margin-bottom: 8px;

  margin-left: 10px;

}



.ol-zoom {

  top: auto;

  left: auto;

}



.full-screen-class button {

  font-family: FontAwesome;

}



.full-screen-class-false {

  font-family: FontAwesome;

}



.full-screen-class-true {

  font-family: FontAwesome;

}



.ol-attribution.ol-uncollapsible {

  white-space: nowrap;

  margin: 0 !important;

  max-width: none;

}



.ol-attribution.ol-uncollapsible a {

  text-decoration: none;

  color: #0078a8;

  font-weight: 400;

}



.ol-attribution.ol-uncollapsible a:hover {

  text-decoration: underline;

}



.ol-attribution>ul {

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  text-decoration: none;

  font-size: 11px;

  padding-top: 0px;

}



.ol-attribution.ol-control {

  padding-top: 1px;

  padding-bottom: 3px;

}



.layer-switcher {

  top: auto;

  right: auto;

}



.layer-switcher .panel {

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  font-size: 12px;

}



.layer-switcher ul {

  padding-left: 12px;

}



.layer-switcher.shown {

  bottom: auto;

}



.layer-switcher button {

  background-image: url("../img/layers.svg");

  background-color: rgba(0, 60, 136, 0.5);

  background-size: 1.1em 1.1em;

  background-position: 3px 3px;

  width: 1.375em;

  height: 1.375em;

}



.layer-switcher.shown button {

  font-size: 0.9em;

}



.layer-switcher button:hover {

  background-color: rgba(0, 60, 136, 0.7);

}



.layer-switcher li.group>label {

  font-weight: normal;

}



.layer-switcher-delimiter {

  border-bottom: 2px solid lightgray;

  margin-top: 6px;

  margin-bottom: 6px;

  width: 100%;

}



.layer-switcher-delimiter:hover {

  background-color: inherit !important;

}



.layer-switcher div ul li {

  text-align: left;

  max-width: 15em;

  width: 100%;

  cursor: default !important;

}



.layer-switcher div ul li label {

  width: 100%;

  text-align: left;

}



.layer-switcher div ul li input {

  color: #82C0FF;

}



.layer-switcher div ul li:hover {

  background-color: rgba(0, 0, 0, 0.1);

}



.layer-switcher li.group {

  display: table;

}



.layer-switcher li.group label,

layer-switcher li.group input {

  display: table-cell;

}



.layer-switcher input[type=radio] {

  all: initial;

}



.layer-switcher input[type=radio] {

  display: none !important;

}



.layer-switcher input[type=radio]+label:before {

  box-sizing: border-box;

  content: "";

  display: inline-block;

  width: 12px;

  height: 12px;

  padding: 1.5px;

  margin-right: 4px;

  margin-left: 4px;

  background-clip: content-box;

  border: 2px solid #aaaaaa;

  border-radius: 50%;

}



.layer-switcher input[type=radio]:checked+label:before {

  background-color: #1470bb;

  border: 2px solid #1470bb;

}



.layer-switcher input[type=checkbox] {

  all: initial;

}



.layer-switcher input[type=checkbox] {

  display: none !important;

}



.layer-switcher input[type=checkbox]+label:before {

  box-sizing: border-box;

  content: "";

  display: inline-block;

  width: 12px;

  height: 12px;

  padding: 0px;

  margin-right: 4px;

  margin-left: 4px;

  background-clip: content-box;

  border: 2px solid #aaaaaa;

  border-radius: 10%;

  text-indent: 2px;

}



.layer-switcher input[type=checkbox]:checked+label:before {

  content: "âś”";

  font-size: 10px;

  color: white;

  background-color: #1470bb;

  border: 0px;

}



.layer-switcher label {

  border-collapse: collapse;

  display: flex !important;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  font-size: 12px;

  line-height: 12px;

  margin-top: 4px;

  margin-bottom: 4px;

}



.ol-touch .layer-switcher label {

  margin-top: 6px;

  margin-bottom: 6px;

}



.track-select-color {

  display: inline;

  width: 12px;

  height: 10px;

  margin-top: 1px;

  margin-left: 2px;

  margin-right: 4px;

  border-radius: 2px;

  opacity: 0.8;

}



.layer-switcher-unselectable {

  color: gray !important;

}



.layer-switcher-unselectable::before {

  background-color: lightgray !important;

}



.locate-active-no-move {

  color: #FBBF0B !important;

}



.locate-active {

  animation: locate-animation 2s infinite;

}



@keyframes locate-animation {

  0% {

    color: #FBBF0B;

  }

  50% {

    color: yellow;

  }

  100% {

    color: #FBBF0B;

  }

}

.position-display,

.position-display-wide {

  position: relative;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  font-size: 11px;

  height: 28px;

  padding-top: 3px;

  padding-left: 6px;

  background-color: rgba(255, 255, 255, 0.9);

  border: 2px solid #BBBBBB;

}



.position-display:hover,

.position-display-wide:hover {

  background-color: rgba(255, 255, 255, 0.9);

}



.position-display-wide {

  padding-right: 24px;

}



.position-coords {

  margin-right: 6px;

}



.position-height {

  margin-right: 6px;

}



.position-copy,

.position-copy-big {

  position: absolute;

  top: 0;

  right: 0;

  width: 14px;

  padding: 2px;

  cursor: pointer;

}



.position-copy-big {

  width: 24px;

  padding-top: 5px;

}



.position-copy-animate {

  animation: position-copy-animation 0.5s;

}



@keyframes position-copy-animation {

  50% {

    transform: scale(1.3, 1.3);

  }

  100% {

    transform: scale(1, 1);

  }

}

.position-marker {

  margin: auto;

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  z-index: 1000;

  pointer-events: none;

  image-rendering: optimizeSpeed;

  image-rendering: -moz-crisp-edges;

  image-rendering: -o-crisp-edges;

  image-rendering: -webkit-optimize-contrast;

  image-rendering: pixelated;

  image-rendering: optimize-contrast;

}



.ol-control {

  position: relative;

  pointer-events: visiblePainted;

  pointer-events: auto;

}



.ol-control button:hover {

  cursor: pointer;

}



.ol-control button:focus {

  outline-style: none;

  box-shadow: none;

  border-color: transparent;

}



.ol-control button,

.ol-control button:focus {

  background-color: rgba(0, 60, 136, 0.65);

}



.ol-control button:hover {

  background-color: rgba(0, 60, 136, 0.9);

}



.ol-control button:disabled {

  background-color: rgba(0, 60, 136, 0.3);

  cursor: default;

}



.ol-control.ol-bar .ol-toggle.ol-active>button {

  background: rgba(60, 136, 0, 0.9);

}



.ol-control.shown {

  background-color: transparent;

}



.ol-touch .ol-control button {

  font-size: 1.4em;

}



.ol-control.ol-bar.ol-top.ol-left {

  top: 8em;

}



.layer-switcher.shown.activationModeClick>button {

  height: 1.25em;

  width: 1.25em;

  margin-top: 6px;

  margin-right: 6px;

  background-image: none;

  background-color: transparent;

  color: #106DBA;

}



.layer-switcher.shown.activationModeClick>button:focus {

  background-color: transparent;

}



.layer-switcher.shown.activationModeClick>button:hover {

  background-color: rgba(0, 0, 0, 0.1);

}



.ctrl-top,

.ctrl-bottom {

  position: absolute;

  pointer-events: none;

}



.ctrl-top {

  top: 0;

}



.ctrl-right {

  right: 0;

}



.ctrl-bottom {

  bottom: 0;

}



.ctrl-left {

  left: 0;

}



.ol-control {

  clear: both;

}



.ctrl-right .ol-control {

  float: right;

  margin-left: auto;

}



@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

  .ctrl-right .ol-control {

    margin-left: inherit;

  }

}

.ctrl-top .ol-control {

  margin-top: 8px;

}



.ctrl-bottom .ol-control {

  margin-bottom: 8px;

}



.ctrl-left .ol-control {

  margin-left: 10px;

}



.ctrl-right .ol-control {

  margin-right: 10px;

}



.flex-right {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: flex-end;

}



.flex-left-vert {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  justify-content: flex-start;

  align-items: flex-start;

}



.flex-left-horiz {

  display: flex;

  flex-direction: row-reverse;

  flex-wrap: wrap;

  justify-content: flex-start;

  align-items: flex-end;

}



.ctrl-bottom.ctrl-right {

  display: flex;

  align-items: flex-end;

  justify-content: flex-end;

  align-content: flex-start;

  flex-direction: column;

  flex-wrap: wrap-reverse;

  height: calc(100% - 160px);

}



@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

  .ctrl-right .ol-control {

    margin-left: inherit;

  }

}

.ctrl-attrib-offset {

  bottom: 15px;

}



.tooltip {

  font: 12px/14px Roboto, Arial, Helvetica, sans-serif;

  background: white;

  color: black;

  padding: 4px 8px;

  border-width: 1px;

  border-style: solid;

  border-radius: 4px;

  border-color: gray;

  box-shadow: 0 1px 3px 2px rgba(100, 100, 100, 0.3);

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  pointer-events: none;

  z-index: 20;

  max-width: 400px;

}



.tooltip-arrow,

.tooltip-arrow::before {

  position: absolute;

  width: 10px;

  height: 10px;

  z-index: -1;

  pointer-events: none;

}



.tooltip-arrow::before {

  content: "";

  transform: rotate(45deg);

  background: white;

  border-width: 1px;

  border-style: solid;

  border-color: gray;

}



.tooltip-arrow-bottom {

  left: 50%;

  bottom: -3.5px;

}



.tooltip-arrow-top {

  left: 50%;

  top: -3.5px;

}



.tooltip-close {

  position: absolute;

  top: 4px;

  right: 4px;

  padding: 2px;

  padding-top: 0px;

  font-size: 1.4em;

  color: #106DBA;

  cursor: pointer;

  pointer-events: auto;

}



.tooltip-close:hover {

  background-color: rgba(0, 0, 0, 0.1);

}



.mobile .tooltip-close {

  font-size: 1.8em;

}



.tooltip.popup {

  pointer-events: auto;

}



.pzs-logo {

  padding-top: 3px;

  padding-bottom: 0px;

  padding-left: 3px;

  padding-right: 3px;

  text-align: center;

  background-color: rgba(245, 245, 245, 0.9) !important;

  font: 14px/16px Roboto, Arial, Helvetica, sans-serif;

  border-radius: 2px;

}



.pzs-logo:hover {

  background-color: rgb(255, 255, 255) !important;

}



.pzs-logo a:link,

.pzs-logo a:visited {
  text-decoration: none;

  color: black;

}



.spp-logo {

  padding: 0px;

  text-align: center;

  background-color: rgba(255, 255, 255, 0.9) !important;

  font: 14px/16px Roboto, Arial, Helvetica, sans-serif;

  border-radius: 2px;

  width: 130px;

  overflow: hidden;

}



.spp-logo:hover {

  background-color: rgb(255, 255, 255) !important;

}



.spp-logo a:link,

.spp-logo a:visited {

  background-color: transparent;

  text-decoration: none;

  color: black;

}



.spp-logo img {

  width: 130px;

  margin-bottom: -4px;

}



.stkp-logo {

  padding: 2px 4px;

  text-align: center;

  font: 14px/16px Roboto, Arial, Helvetica, sans-serif;

  background-color: rgba(255, 255, 255, 0.98);

  border-radius: 5px;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}



.stkp-logo:hover {

  background-color: rgba(255, 255, 255, 0.98);

}



.stkp-logo a:link,

.stkp-logo a:visited {

  text-decoration: none;

  color: black;

}



.break-all {

  word-break: break-all;

}



.no-click {

  pointer-events: none;

}



.no-mouse {

  pointer-events: none;

}



.force-white-back {

  background-color: white !important;

}



.cursor-style-move {

  cursor: move !important;

}



.slideshow-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  display: none;

  justify-content: center;

  background-color: rgba(255, 255, 255, 0.7);

  font-family: Roboto, Arial, Helvetica, sans-serif;

  color: white;

  text-shadow: 1px 1px 0px #555555, 2px 2px 4px #000000, -1px -1px 3px #000000;

  z-index: 1000;

}



.slideshow-content {

  align-self: center;

}



.slideshow-close {

  position: absolute;

  top: 0px;

  font-size: 30px;

  line-height: 26px;

  padding-left: 3px;

  padding-right: 3px;

  font-weight: bold;

}



.slideshow-close:hover,

.slideshow-close:focus {

  text-decoration: none;

  cursor: pointer;

  background-color: rgba(0, 0, 0, 0.4);

}



.slideshow-slides {

  width: 85vw;

  height: 85vh;

  max-width: 1000px;

}



.slideshow-slides img {

  margin: auto;

  position: absolute;

  top: 0px;

  bottom: 0px;

  left: 0px;

  right: 0px;

  width: auto;

  max-width: 85%;

  max-height: 85%;

  box-sizing: border-box;

  border: 1px solid #888;

  -webkit-animation-name: slide-fade;

  -webkit-animation-duration: 1.5s;

  animation-name: slide-fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes slide-fade {

  from {

    opacity: 0.4;

  }

  to {

    opacity: 1;

  }

}

@keyframes slide-fade {

  from {

    opacity: 0.4;

  }

  to {

    opacity: 1;

  }

}

.slide-prev,

.slide-next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  padding: 8px;

  margin-top: -22px;

  font-weight: bold;

  font-size: 28px;

  background-color: rgba(0, 0, 0, 0.2);

  user-select: none;

}



.slide-prev {

  left: 30px;

  padding-left: 6px;

  border-radius: 3px 0 0 3px;

}



.slide-next {

  right: 30px;

  padding-left: 8px;

  padding-right: 6px;

  border-radius: 0 3px 3px 0;

}



.slide-prev:hover,

.slide-next:hover {

  background-color: rgba(0, 0, 0, 0.4);

}



.slide-number {

  position: absolute;

  font-size: 14px;

  padding: 4px 6px;

}



.keyb-key {

  display: inline;

  font-size: 0.9em;

}



.keyb-key span {

  display: inline;

  border: 1px solid #aaa;

  border-radius: 0.2em;

  box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);

  background-color: #f9f9f9;

  background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);

  color: #000;

  padding: 0.08em 0.2em;

}



.link:visited {

  color: blue;

}



.kazipot-button {

  line-height: 1.1;

  background-color: #cfe6fb;

  padding: 5px;

  border: 1px solid #AAAAAA;

}



.add-item-sidenav-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.kazipot-button-large {

  line-height: 1.3;

  font-size: 1.3em;

}



.kazipot-button:hover {

  background-color: #a1cdf7;

}



.kazipot-select {

  padding: 2px;

}



.sidenav-li-element {

  display: flex;

  justify-content: space-between;

  margin: 0.75rem 0;

  align-items: center;

}



.dodaj-steber-button-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-direction: row-reverse;

}



#fieldset-izberi-steber {

  min-width: 100px;

  border-width: 0;

}



#koti-tabela {

  border: 1px #d1d1d1 solid;

}



#koti-tabela td {

  border: 1px #d1d1d1 solid;

  color: #6b46f9;

  cursor: pointer;

}



.arrow-container {

  display: block;

  height: 200px;

  width: 530px;

  padding: 0 20px 0 80px;

}



.arrow-container-2input {

  display: none;

  position: fixed;

  bottom: 0;

  right: 0;

  height: 145px;

  width: 440px;

  padding: 0 80px 0 80px;

  margin-right: 420px;

}



.arrowx {

  position: relative;

  width: 460px;

  height: 200px;

  background-color: #db3b1b;

}



.arrowx::after {

  content: "";

  position: absolute;

  bottom: 0;

  right: 0;

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

}



.horizontal-container {

  position: absolute;

  /* transform: translate(-4%, 40%); */

  right: 15px;

  top: 10px;

}

.horizontal-container.flex {

  display: flex;

  justify-content: space-between;

  gap: 12px;

}

.horizontal-container.flex>* {

  margin: 0;

  width: 173px !important;

}



.vertical-container {

  position: absolute;

  left: 2px;

  top: 5px;



}

.vertical-container.flex {

  display: flex;



}

.vertical-container.flex>* {

  margin: 0;

  width: 30px !important;

}





.header-section {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 16px;

  gap: 16px;

}

.header-section p {

  margin: 8px 0;

}



.button-col {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 8px;

}

.button-col .kazipot-button {

  min-width: 120px;

}



.kazipot-button.with-icon {

  display: flex;

  gap: 8px;

  justify-content: space-between;

}



.track-info-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;

}



.color-picker {

  display: flex;

  gap: 4px;

  margin: 4px;

}

.color-picker .color-box {

  height: 20px;

  width: 20px;

  border-radius: 4px;

  cursor: pointer;

  opacity: 0.75;

}

.color-picker .color-box.active {

  border: 2px solid white;

  height: 16px;

  width: 16px;

  opacity: 1;

}

.color-picker .color-box.active[data-color=red] {

  outline: 2px solid #db3b1b;

}

.color-picker .color-box.active[data-color=blue] {

  outline: 2px solid #017dbf;

}

.color-picker .color-box.active[data-color=yellow] {

  outline: 2px solid #e0df4c;

}



.arrow-input-container {

  position: absolute;

  top: 50%;

  left: 234px;

  transform: translate(-80%, -50%);

  width: 235px;

  height: 60%;

}



.arrow-input {

  width: 100%;

  font-size: 16px;

  border: none;

  border-radius: 5px;

  outline: none;

  box-sizing: border-box;

  background: #db3b1b;

  color: white;

  /* ak mleft - 5px namesto 10px */

  margin-left: 5px;

  overflow: hidden;

  white-space: nowrap;

  height: unset !important;

}



/************************SMALL ARROW***********************************/

.arrow-container-small {

  display: block;

  height: 100px;

  width: 220px;

  padding: 0 40px 0 40px;

}



.arrow-container-2input-small {

  display: none;

  position: fixed;

  bottom: 0;

  right: 0;

  height: 72px;

  width: 220px;

  padding: 0 40px 0 40px;

  margin-right: 210px;

}



.arrow-small {

  position: relative;

  width: 210px;

  height: 100px;

  background-color: #db3b1b;

}



.arrow-small::after {

  content: "";

  position: absolute;

  bottom: 0;

  right: 0;

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

}



.info-input-container-small {

  position: absolute;

  top: 36%;

  right: 0;

  transform: translate(-10%, -50%);

  width: 60px;

  height: 70%;

  color: transparent !important;

}



.nadmorska-small {

  height: 6%;

  margin-bottom: 2px;

  background-color: transparent !important;

  width: 80px;

  font-size: 10px;

  color: #ffffff;

  border: 0;

  transform: translate(-25%, 0%);

  text-align: end;

}



.cas-small {

  height: 6%;

  background-color: transparent !important;

  width: 60px;

  font-size: 10px;

  border: 0;

  color: #ffffff;

}



.ime-small {

  height: 6%;

  margin-top: 4px;

  background-color: transparent !important;

  width: 70px;

  font-size: 10px;

  color: #ffffff;

  border: 0;

  transform: translate(-15%, 0%);

  text-align: end;

}



.sponzor-small {

  height: 6%;

  margin-top: 9px;

  background-color: transparent !important;

  width: 70px;

  color: #ffffff;

  font-size: 10px;

  border: 0;

  left: 0;

  transform: translate(5%, 0%);

}



.tezavnost-input-container-small {

  position: absolute;

  top: 50%;

  left: 0%;

  transform: translate(0%, -50%);

  width: 22px;

  height: 60%;

  color: transparent !important;

}



.difficulty-small {

  height: 6%;

  background-color: transparent !important;

  width: 22px;

}



.arrow-input-container-small {

  position: absolute;

  top: 50%;

  left: 117px;

  transform: translate(-80%, -50%);

  width: 117.5px;

  height: 70%;

}



.arrow-input-small {

  width: 100%;

  height: 6%;

  font-size: 10px;

  border: none;

  border-radius: 5px;

  outline: none;

  box-sizing: border-box;

  background: #db3b1b;

  color: white;

}



.arrow-right-small {

  position: absolute;

  top: 0;

  right: -40px;

  width: 0;

  height: 0;

  border-top: 50px solid transparent;

  border-left: 40px solid #db3b1b;

  border-bottom: 50px solid transparent;

}



.arrow-left-small {

  position: absolute;

  top: 0;

  left: -40px;

  width: 0;

  height: 0;

  border-top: 50px solid transparent;

  border-right: 40px solid #db3b1b;

  border-bottom: 50px solid transparent;

}



.dropbtn {

  background-color: #3498DB;

  color: white;

  padding: 6px;

  font-size: 16px;

  width: 90px;

  border: none;

  cursor: pointer;

}



.dropbtn:hover,

.dropbtn:focus {

  background-color: #2980B9;

}



.dropdown {

  position: relative;

  display: inline-block;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 160px;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  transform: translate(-70px, 0);

}



.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}



.dropdown a:hover {

  background-color: #ddd;

}



.textcolor {

  font-size: 14px;

}



.textcolor-cilj {

  font-weight: bold;

  font-size: 24px;

  height: 28px;

}



.show {

  display: block;

}



.difficulty-content {

  display: none;

}



@media print {

  .info-input::placeholder {

    color: transparent;

  }

}

.plus-minus-input-wrapper {

  position: relative;

  display: block;

}



.adjust-button {

  position: absolute;

  top: 0;

  width: 25px;
  /* Adjust as needed */

  height: 100%;

  border: 1px solid #ccc;

  background-color: #ddd;

  display: none;
  /* Hide initially */

  cursor: pointer;

}



.adjust-button.minus {

  left: 100%;

}



.adjust-button.plus {

  left: calc(100% + 25px);
  /* width of the minus button */

}

.adjust-button.osvezi {

  left: 25px;
  /* width of the minus button */

}



.plus-minus-input-wrapper:hover .adjust-button {

  display: inline-block;
  /* Show on hover */

}



/* Additional styling for the input and buttons */

.hover-input {

  padding: 5px 10px;

  border: 1px solid #ccc;

}



.adjust-button:hover {

  background-color: #f8f8f8;

  cursor: pointer;

}



.ol-ext-dialog .ol-closebox h2 {

  font-size: 1.5em;

}

.ol-ext-dialog .ol-closebox .ol-content {

  font-size: 1.5em;

}



/* izbrana sliÄŤica v spodnjem panelu */

.pe-thumb.selected {

  outline: 3px solid #2b6cb0;
  /* modri okvir */

  outline-offset: 2px;

  border-radius: 6px;

}

/*# sourceMappingURL=styles.css.map */



.pe-badge-new {

  position: absol ute;
  top: 4px;
  left: 4px;

  background: #ff2d55;
  color: #fff;
  font-size: 11px;

  padding: 2px 6px;
  border-radius: 10px;

}



/* izbrana kartica slike v spodnjem panelu */

.photo-card.selected {

  background: #ffffff !important;

  color: #111 !important;

  outline: 4px solid #1e90ff;
  /* prej 1–2px → zdaj debelejši */

  outline-offset: 2px;

  border-radius: 8px;

}



.pe-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 12px;

  padding: 10px 12px 14px;

  background: #fff;

}



.pe-card {

  position: relative;

  background: #fff;

  border: 1px solid #e6e6e6;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);

  cursor: pointer;

}



.pe-card img {

  display: block;

  width: 100%;

  height: 120px;

  object-fit: cover;

  background: #f5f5f5;

}



.pe-toolbar {

  position: absolute;

  top: 6px;

  left: 6px;

  right: 6px;

  display: flex;

  gap: 6px;

  justify-content: flex-end;

  pointer-events: none;
  /* gumbi odprejo pointer-events na samem gumbu */

}



.pe-btn {

  pointer-events: auto;

  background: rgba(255, 255, 255, .92);

  color: #111;

  border: 1px solid rgba(0, 0, 0, .08);

  border-radius: 8px;

  padding: 4px 6px;

  font-size: 12px;

  line-height: 1;

  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);

}

.pe-btn:hover {
  background: #fff;
}



/* modri okvir izbrane slike */

.pe-card.selected {

  outline: 5px solid #237cf0;

  outline-offset: 0;

}



/* znaÄŤke */

.pe-badge {

  position: absolute;

  top: 6px;
  left: 6px;

  background: #ffe066;

  color: #111;

  border-radius: 999px;

  font-size: 11px;

  padding: 2px 8px;

  border: 1px solid rgba(0, 0, 0, .08);

  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);

}



.photo-editor-panel {

  position: fixed;
  /* namesto absolute */

  z-index: 12000;
  /* višje od karte/overlays */

}



#btn-photo-editor.has-new {
  background: #0ea5e9;
  color: white;
}

.ski-tourer-header {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px 15px;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'Roboto', sans-serif;
}

.ski-tourer-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.ski-tourer-icon {
  height: 45px;
  width: auto;
}

.ski-tourer-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.app-header {
  width: 100%;
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  flex-shrink: 0;
}

.header-search-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 24px;
}

.header-search {
  padding: 7px 12px 7px 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 240px;
  background-color: #f0f0f0;
  font-size: 1.1em;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: #888;
  font-size: 1.1em;
}

.header-separator {
  width: 1px;
  height: 36px;
  background-color: #ddd;
  margin-right: 24px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo img {
  height: 42px;
  width: auto;
}

.header-logo .header-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  font-family: 'Roboto', sans-serif;
}

/* Layout fixes */
body {
  display: flex;
  flex-direction: column;
}

.main-container {
  height: calc(100% - 60px);
  flex: 1;
}

/* Sidenav Home List */
/* AK Sidenav Toggle */
.sidenav-toggle {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 80px;
  background-color: white;
  border-radius: 0 40px 40px 0;
  /* Right semicircle */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2000;
  /* Above map */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.3s ease;
  left: 0;
  /* Default closed */
  transform: translateY(-50%);
}

.sidenav-toggle:hover {
  background-color: #f0f0f0;
}

.sidenav-toggle i {
  margin-left: 2px;
  font-size: 24px;
  color: #333;
}

.sidenav-home-list,
.sidenav-area-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidenav-home-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: white;
}

.sidenav-home-item:hover {
  background-color: #f5f5f5;
}

.sidenav-home-item .area-name {
  font-size: 18px !important;
  font-weight: 600;
  color: #333;
}

.sidenav-home-item.back-item {
  background-color: #f0f8ff;
  color: #003366;
  justify-content: flex-start;
  gap: 10px;
  font-weight: bold;
}

/* Increase font size for sidenav content by 50% */
#sidenavContentId {
  font-size: 1.2em !important;
}

#sidenavContentId table,
#sidenavContentId td,
#sidenavContentId th,
#sidenavContentId div,
#sidenavContentId span,
#sidenavContentId p {
  font-size: 100%;
  /* Inherit from #sidenavContentId */
}

/* Ensure specific classes don't shrink it back */
.track-info-content1,
.track-info-content2,
.track-info-content0,
.info-content-block,
.info-content-block td {
  font-size: inherit;
}

/* Custom Tooltip Styling */
.custom-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.custom-tooltip .custom-tooltip-text {
  visibility: hidden;
  width: 450px;
  background-color: #fff;
  color: #333;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: fixed;
  /* Changed from absolute to fixed */
  z-index: 20002;
  /* High z-index to be on top of everything */
  bottom: 20px;
  /* Lower it slightly */
  left: 380px;
  /* Overlap sidenav edge (400px - 20px) */
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}

.custom-tooltip:hover .custom-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.custom-tooltip-text .tooltip-row {
  display: flex;
  margin-bottom: 4px;
}

.custom-tooltip-text .tooltip-label {
  font-weight: bold;
  color: #000;
  min-width: 100px;
  margin-right: 5px;
  flex-shrink: 0;
}
.header-search {
  padding: 7px 12px 7px 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 240px;
  background-color: #f0f0f0;
  font-size: 1.1em;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: #888;
  font-size: 1.1em;
}

.header-separator {
  width: 1px;
  height: 36px;
  background-color: #ddd;
  margin-right: 24px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo img {
  height: 42px;
  width: auto;
}

.header-logo .header-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  font-family: 'Roboto', sans-serif;
}

/* Layout fixes */
body {
  display: flex;
  flex-direction: column;
}

.main-container {
  height: calc(100% - 60px);
  flex: 1;
}

/* Sidenav Home List */
/* AK Sidenav Toggle */
.sidenav-toggle {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 80px;
  background-color: white;
  border-radius: 0 40px 40px 0;
  /* Right semicircle */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2000;
  /* Above map */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.3s ease;
  left: 0;
  /* Default closed */
  transform: translateY(-50%);
}

.sidenav-toggle:hover {
  background-color: #f0f0f0;
}

.sidenav-toggle i {
  margin-left: 2px;
  font-size: 24px;
  color: #333;
}

.sidenav-home-list,
.sidenav-area-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidenav-home-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: white;
}

.sidenav-home-item:hover {
  background-color: #f5f5f5;
}

.sidenav-home-item .area-name {
  font-size: 18px !important;
  font-weight: 600;
  color: #333;
}

.sidenav-home-item.back-item {
  background-color: #f0f8ff;
  color: #003366;
  justify-content: flex-start;
  gap: 10px;
  font-weight: bold;
}


/* Custom Tooltip Styling */
.custom-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.custom-tooltip .custom-tooltip-text {
  visibility: hidden;
  width: 450px;
  background-color: #fff;
  color: #333;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: fixed;
  /* Changed from absolute to fixed */
  z-index: 20002;
  /* High z-index to be on top of everything */
  bottom: 20px;
  /* Lower it slightly */
  left: 380px;
  /* Overlap sidenav edge (400px - 20px) */
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}

.custom-tooltip:hover .custom-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.custom-tooltip-text .tooltip-row {
  display: flex;
  margin-bottom: 4px;
}

.custom-tooltip-text .tooltip-label {
  font-weight: bold;
  color: #000;
  min-width: 100px;
  margin-right: 5px;
  flex-shrink: 0;
}

.custom-tooltip-text .tooltip-value {
  flex: 1;
}

/* Mobile font reductions for ski tours */
@media (max-width: 768px) {
  /* Title font reduction (Large-ish but smaller than default) */
  .track-info-title {
    font-size: 14px !important;
  }
}