mappe/last_version/assets/css/style.css

body {
	padding-top: 56px;
}
.app-body-application {
	padding-top:5px !important;
}
.app-body-map {
	padding-right:0 !important;
}
.map-wrapper-front {
  height: calc(60vh - 0px);
}
.map-wrapper {
  height: calc(100vh - 0px);
}
.flex {
  display: flex;
}
.flex-sidebar {
  width: 250px;
}
.flex-content {
  flex: 1;
}
.sidebar-wrapper {
  position: relative;
}

.sidebar-title {
  padding: 10px 15px;
  border-bottom: 1px solid #dee2e6;
  height: 60px;
}
.sidebar-title .title {
  margin: 0;
  font-size: 20px;
  line-height: 38px;
}
.sidebar-wrapper.has-max-height {
  max-height: calc(100vh - 56px);
  overflow: auto;
  margin: 0 -15px 0 -10px;
}
.filter-wrapper {
  padding: 15px;
  border-bottom: 1px solid #dee2e6;
  height: 70px;
}
.sidebar-table {
  overflow: auto;
  height: calc(100vh - 186px);
}
.sidebar-table table {
  margin: 0;
}

/* Section II - Leaflet.js -related */
.leaflet-control-layers {
  overflow: auto;
}

.leaflet-control-layers label {
  font-weight: normal;
  margin-bottom: 0px;
}

.leaflet-control-layers-list input[type="radio"], input[type="checkbox"] {
  margin: 2px;
}

/* Section III - Plugin: Image Display */
#tdimgcontainer {
	display: inline-block;
	border: none;
}
img.thumbnailx {
	object-fit: cover;
	margin:0 5px 5px 5px;
}

#roadPropertyImg, 
#dataPropertyImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#roadPropertyImg:hover, 
#dataPropertyImg:hover {
	opacity: 0.7;
}

.roadPropertyModal, 
.dataPropertyModal {
    display: none;
    position: fixed;
    z-index: 1060;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.roadPropertyModalShown, 
.dataPropertyModalShown {
    display: block;
    position: fixed;
    z-index: 1060;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.roadPropertyModal-content, 
.dataPropertyModal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#roadPropertyCaption, 
#dataPropertyCaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.roadPropertyModal-content, 
.dataPropertyModal-content, 
#roadPropertyCaption, 
#dataPropertyCaption { 
    -webkit-animation-name: zoom-image-data;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom-image-data;
    animation-duration: 0.6s;
}
@-webkit-keyframes zoom-image-data {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
@keyframes zoom-image-data {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.roadPropertyClose, 
.dataPropertyClose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.roadPropertyClose:hover,
.roadPropertyClose:focus,
.dataPropertyClose:hover,
.dataPropertyClose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#thumb-wrapper .thumb {
	border: 1px solid #333;
	border-radius: 4px;
	color: #888;
	cursor: pointer;
	float: left;
	height: 75px;
	margin: 2px;
	padding: 2px;
	position: relative;
	width: 60px;
}
#thumb-wrapper .thumb small {
	bottom: 5px;
	position: absolute;
	right: 5px;
}
#thumb-wrapper .inset.img {
	background-size: cover;
	border-radius: 2px;
	display: block;
	height: 45px;
	width: 100%;
}
#thumb-wrapper .thumb .inset > span {
	display: block;
	font-size: 24px;
	line-height: 40px;
	margin: 0 auto;
	opacity: 0.5;
	text-align: center;
	width: 40px;
}
#view-pane img {
	transition: transform 0.25s ease-in-out;
	width: 100%;
}

/* Section IV - Plugin: Loader/Spinner */
/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-line-scale-pulse-out-rapid,
.la-line-scale-pulse-out-rapid > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-line-scale-pulse-out-rapid {
    display: block;
    font-size: 0;
    color: #fff;
}
.la-line-scale-pulse-out-rapid.la-dark {
    color: #333;
}
.la-line-scale-pulse-out-rapid > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-line-scale-pulse-out-rapid {
    width: 40px;
    height: 32px;
}
.la-line-scale-pulse-out-rapid > div {
    width: 4px;
    height: 32px;
    margin: 2px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-animation: line-scale-pulse-out-rapid .9s infinite cubic-bezier(.11, .49, .38, .78);
       -moz-animation: line-scale-pulse-out-rapid .9s infinite cubic-bezier(.11, .49, .38, .78);
         -o-animation: line-scale-pulse-out-rapid .9s infinite cubic-bezier(.11, .49, .38, .78);
            animation: line-scale-pulse-out-rapid .9s infinite cubic-bezier(.11, .49, .38, .78);
}
.la-line-scale-pulse-out-rapid > div:nth-child(3) {
    -webkit-animation-delay: -.9s;
       -moz-animation-delay: -.9s;
         -o-animation-delay: -.9s;
            animation-delay: -.9s;
}
.la-line-scale-pulse-out-rapid > div:nth-child(2),
.la-line-scale-pulse-out-rapid > div:nth-child(4) {
    -webkit-animation-delay: -.65s;
       -moz-animation-delay: -.65s;
         -o-animation-delay: -.65s;
            animation-delay: -.65s;
}
.la-line-scale-pulse-out-rapid > div:nth-child(1),
.la-line-scale-pulse-out-rapid > div:nth-child(5) {
    -webkit-animation-delay: -.4s;
       -moz-animation-delay: -.4s;
         -o-animation-delay: -.4s;
            animation-delay: -.4s;
}
.la-line-scale-pulse-out-rapid.la-sm {
    width: 20px;
    height: 16px;
}
.la-line-scale-pulse-out-rapid.la-sm > div {
    width: 2px;
    height: 16px;
    margin: 1px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale-pulse-out-rapid.la-2x {
    width: 80px;
    height: 64px;
}
.la-line-scale-pulse-out-rapid.la-2x > div {
    width: 8px;
    height: 64px;
    margin: 4px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale-pulse-out-rapid.la-3x {
    width: 120px;
    height: 96px;
}
.la-line-scale-pulse-out-rapid.la-3x > div {
    width: 12px;
    height: 96px;
    margin: 6px;
    margin-top: 0;
    margin-bottom: 0;
}
@-webkit-keyframes line-scale-pulse-out-rapid {
    0% {
        -webkit-transform: scaley(1);
                transform: scaley(1);
    }
    80% {
        -webkit-transform: scaley(.3);
                transform: scaley(.3);
    }
    90% {
        -webkit-transform: scaley(1);
                transform: scaley(1);
    }
}
@-moz-keyframes line-scale-pulse-out-rapid {
    0% {
        -moz-transform: scaley(1);
             transform: scaley(1);
    }
    80% {
        -moz-transform: scaley(.3);
             transform: scaley(.3);
    }
    90% {
        -moz-transform: scaley(1);
             transform: scaley(1);
    }
}
@-o-keyframes line-scale-pulse-out-rapid {
    0% {
        -o-transform: scaley(1);
           transform: scaley(1);
    }
    80% {
        -o-transform: scaley(.3);
           transform: scaley(.3);
    }
    90% {
        -o-transform: scaley(1);
           transform: scaley(1);
    }
}
@keyframes line-scale-pulse-out-rapid {
    0% {
        -webkit-transform: scaley(1);
           -moz-transform: scaley(1);
             -o-transform: scaley(1);
                transform: scaley(1);
    }
    80% {
        -webkit-transform: scaley(.3);
           -moz-transform: scaley(.3);
             -o-transform: scaley(.3);
                transform: scaley(.3);
    }
    90% {
        -webkit-transform: scaley(1);
           -moz-transform: scaley(1);
             -o-transform: scaley(1);
                transform: scaley(1);
    }
}

/* Media Queries */
@media only screen and (max-width: 767px){
	.navbar-brand {
		font-size: 14px;
	}
	#feature-title {
		font-size: 14px;
		font-weight: bold;
	}
	.sidebar-wrapper.has-max-height {
		max-height: calc(100vh - 56px);
		overflow: auto;
		margin: inherit;
	}
	.roadPropertyModal-content, 
	.dataPropertyModal-content {
			width: 100%;
	}
	img.thumbnailx {
		width:75px;
	}
	.content-text {
		max-width:100%;
	}
}