/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

/* This snippet replaces Google Fonts with our locally served Open Sans */
/* Generated with https://gwfh.mranftl.com/fonts/open-sans?subsets=latin,latin-ext */
/* open-sans-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/open-sans-v34-latin_latin-ext-regular.woff2') format('woff2')
}

/*
.dropdown-toggle {
    background-color: #eee;
    color: #000
}*/

/* Hides all the following sibling */
.hide-rest ~ * {
    display: none!important;
}

.kids-clickable {
    pointer-events: none;
}

.kids-clickable > * {
    pointer-events: all;
}

.iteminfo {
	border: 3px solid #e7e7e7;
	background-color: #ffffff;
}

.red {
	color: #f00;
}

.white {
	color: #fff;
}

.dim-disabled:disabled {
    opacity: 0.5;
}

.disallow-click-disabled:disabled {
    cursor: not-allowed;
    pointer-events: auto;
}

body, table, td {
    font-family: Open Sans !important;
}
body {
	font-size: 13px;
    /* This causes problem with the new layout things*/
	/* text-align: center; */
	margin: 0px;
	overflow: hidden;
}

#container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	z-index: -1;
}

.commentpanel {
    background-color: #fbfbff;
    border: 2px solid #000;
}

.commentreplypanel {
    background-color: #f0f0f0;
    border: 2px solid #000;
}

.vantaacontrolpanel {
    background-color: rgb(65, 145, 206);
}

.headerpanel {
	background-color: #ccc;
}

.lujacontrolpanel {
	position: absolute;
	top: 0px;
	left:  0px;
	bottom: 0px;
	z-index: 0;
	background-color: #fff;
}

.hyvinkaacontrolpanel {
	position: absolute;
	top: 0px;
	left:  0px;
	bottom: 0px;
	z-index: 0;
	background-color: #fff;
}

.porvoocontrolpanel {
	position: absolute;
	top: 0px;
	left:  0px;
	bottom: 0px;
	z-index: 0;
	background-color: #fff;
	border: 1px solid #000;
}

.waitpopup {
   padding: 4px;
   border: 5px solid #e7e7e7;
   background-color: #fff;
   z-index: 999;
}

.whitepanel {
	background: #fff;
}

.blackpanel {
	background: #000;
}

.lupaiconpanel {
	background: #333;
}

#chatDiv {
	text-align: left;
	position: absolute;
	left:  200px;
	top: 0%;
	z-index: 0;
}

.gwt-levels {
  border: none;
}


.gwt-levels-up-hovering, .gwt-levels-down-hovering {
  cursor: pointer;
  cursor: hand;
}


.gwt-vote1 {
   border: 1px solid #ccc;
   background-color: #fff;
}

tr.pointSelector:hover {
    outline: solid red;
}

.toolspanel {
	margin: 0px 6px 6px 6px;
}

.controlpanel {
	background-color: #eee;
    max-width: 470px;
}
.typhooncontrolpanel {
    background-color: #fff;
}

.hover-scale-150 {
    transition: transform .2s;
}

.hover-scale-150:hover {
    transform: scale(1.5);
}

.controlpanel_kuopio {
    background-color: #fff;
}

.iconpanel_kuopio {
    background: #9d9d9d;
}

#hierarchy-dialog > table > tr > td {
    text-align: left;
    vertical-align: top;
    max-height: 500px;
}

#ifc-property-data-div {
    overflow-y: scroll;
    word-wrap: normal;
    white-space: pre-wrap;
    max-height: 500px;
    height: 500px;
}

#hierarchy-tree-table tr {
    height: 1em;
    max-height: 1em;
    vertical-align: top;
}

#hierarchy-dialog .fancytree-node {
    height: 1em;
    min-height: min-content;
}

#hierarchy-dialog .fancytree-container td {
    border: 0.1px dotted;
}

.fancytree-container {
    outline: none;
    overflow-y: auto;
}

div#hierarchy-tree-div {
    overflow-y: hidden;
    padding-right: 16px;
}

div#hierarchy-tree-div > table.fancytree-ext-grid {
    width: 500px;
    margin-right: -200px;
}

/* Ext-grid breaks if another extension hides rows. */
table.fancytree-ext-grid tbody tr.fancytree-hide {
    display: table-row;
}

table.fancytree-ext-grid tbody span.fancytree-node {
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 400px;
}

table.fancytree-container {
    display: block;
}

table.fancytree-ext-table tbody tr.fancytree-selected {
    background-color: initial;
}
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected {
    background-color: initial;
}

table.fancytree-ext-table tbody tr.fancytree-active {
    background-color: #CBE8F6!important;
}

/* Override Bootstrap's animation, because IE and Edge are SOOO slow */
.collapsing {
    transition: none !important;
}

.marker-text {
    flex: 1;
    padding-right: 0.7em;
    text-align: left;
    white-space: pre-wrap;
    overflow-y: auto;
}

.marker-media {
    flex: 1;
}

#categoriesConfigDialog table {
    border-collapse: collapse;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

#markerDetailsModal .modal-header .close {
    margin-left: 1em;
    text-shadow: none;
    opacity: 0.6;
}

#markerDetailsModal .modal-header .close:hover, .close:focus {
    opacity: 1.0;
}

#markerDetailsModal .modal-dialog {
     /* Measured by dividing 500px (the max-size of a bootstrap modal)
     with 1526px (the window.innerWidth on my machine)
     Bootstrap's 500px doesn't probably translate well to larger screens */
    max-width: 32.55vw;
}

#markerDetailsModal .modal-content {
   overflow: hidden;
}

#materialTable {
    table-layout: fixed;
    overflow-x: hidden;
    width: 100%;
}

/* We use !important, because otherwise DataTables computes
 its own values which will mess the layout */
#materialTable .matVisible {
    width: 12px!important;
}

#materialTable .matName {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto!important;
}

#materialTable .matColor {
    width: 1.1em!important;
}

.gwt-PopupPanel, .gwt-DialogBox, .gwt-PopupPanelGlass {
    z-index: 900;
}

#tutorialCarousel ul li {
    margin-bottom: 1em;
}

#tutorialCarousel .carousel-control-prev:hover,
                  .carousel-control-next:hover  {
    background-color: #444;
    opacity: 0.7;
}

#julkisivutbanner {
    width: 100%;
    left: 0;
    height: 319px;
    position: absolute;
    background-image: url("images/julkisivut3d/banner.jpg");
    background-repeat: repeat-x;
    background-position-x: center;
    background-size: cover;
    z-index: 998;
}

#tutorialCarousel .carousel-ctrl {
    position: absolute;
    top: 0;
    font-size: xx-large;
    color: green;
    margin: 0.2em;
}

/* The next three rules are used to override the font settings of jQuery UI */
.ui-widget {
    font-family: Open Sans;
    font-size: 1rem;
}

.ui-widget .ui-widget {
    font-family: Open Sans;
    font-size: 1rem;
}

.ui-widget button, .ui-widget input, .ui-widget textarea .ui-widget select {
    font-family: Open Sans;
}

.gwt-DialogBox .Caption {
	background: #0f0;
	height: 20px;
}

.tabpanel {
	background: #fff;
}

#neighbors-table th {
    white-space: nowrap;
}

button.goToNearbyApp {
    white-space: nowrap;
}

#neighbors-table td {
    padding: 4px 6px;
}

/* progresspopup modal */
body .modal-content {
    border-radius: 0px
}

body .modal-header {
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0;
    background-color: #EEEEEE
}

body .modal-header h5 {
    font-weight: 500;
    font-size: 18px
}

body .modal-footer {
    border-radius: 0px
}

body .custom-range-container .btn {
    font-weight: 900
}

body .custom-range-container .custom-range {
    margin-top: 10px
}

#clip-slider-container .noUi-target {
    border-width: 0;
}

.noUi-horizontal .noUi-handle {
  height: 100%;
  top: -3px;
}

.noUi-horizontal .noUi-origin {
  height: calc(100% + 6px);
}
.noUi-horizontal .noUi-handle:before,
.noUi-horizontal  .noUi-handle:after {
  height: 50%;
  top: 25%;
}


.noUi-vertical .noUi-handle {
  width: 100%;
  left: -3px;
}

.noUi-vertical .noUi-origin {
  width: calc(100% + 6px);
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical  .noUi-handle:after {
  width: 50%;
  left: 25%;
}

div#materialTable_paginate a.paginate_button {
    padding: 0.5em;
}

.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* override bootstrap */

table {
  border-collapse: initial;
}

dd {
    margin-bottom: 0;
    margin-left: 1.5rem;
}

label {
  display: inline-block;
  margin-bottom: 0;
}

/* s3dpopup definitions */

.s3dWindow {
	position: absolute;
	/* top: 80px; */
	z-index: 9;
	background-color: #fff;
	border-radius: 4px 4px 0 0;
	box-shadow: 8px 8px 6px -6px black;
	border: 1px solid #888;
}

[id$="s3dWindowHeader"] {
	padding: 10px;
	z-index: 10;
	background-color: black;
	color: #000;
	border-radius: 4px 4px 0 0;
	height: 36px;
	justify-content: space-between;
	display: flex;
	touch-action: none;
	box-sizing: border-box;
}

.s3dWindowActive {
	z-index: 1000;
}

.s3dWindowTitle {
	position: relative;
	bottom: 2px;
	margin-top: 0;
}

[id^="s3dWindowCloseButton"] {
	color: #000;
	cursor: pointer;
	position: relative;
	bottom: 9px;
	font-size: 24px;
}

[id^="s3dWindowHelpButton"] {
    color: #000;
    cursor: pointer;
    position: relative;
    bottom: 9px;
    font-size: 20px;
}

.s3dWindowHeader {
	background-color: #ccc;
}

.s3dDimWindow {
	position: absolute;
	background-color: rgba(1,0,0,0.4);
	z-index: 21;
	top: 0px;
	left:  0px;
	right: 0px;
	bottom: 0px;
}

.s3dWindowGroup {
	justify-content: center;
	display: flex;
	line-height: 1.5;
}

.s3dWindowGroup p {
	cursor: default;
	/* margin-top: 0; */
	/* margin-bottom: 1rem; */
}