.zero-height {
  height: 0; }

.zero-width {
  width: 0; }

.full-height {
  height: 100%; }

.full-width {
  width: 100%; }

.half-height {
  height: 50%; }

.on-top {
  z-index: 10000; }

.top-buffer-margin {
  margin-top: 1em; }

.hover-basecolor:hover {
  color: #98E368; }

* {
  font-family: 'Montserrat', sans-serif; }

html, body {
  height: 100%; }

.alert {
  z-index: 100;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 1px;
  padding: 1px;
  padding-right: 35px; }

.alert-success {
  transition: visibility 0s 2s, opacity 2s linear; }

#greeter {
  display: none;
  z-index: 999;
  transition: visibility 0s 2s, opacity 2s linear;
  position: absolute;
  top: 150px;
  left: 100px;
  font-size: 500%; }
  #greeter .highlight {
    background: #98E368; }

#check_update_reload {
  z-index: 95;
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: none;
  font-size: 150%;
  background: #98E368; }

#header {
  padding-top: 1ex;
  padding-bottom: 1ex;
  background-repeat: repeat-x;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #98E368;
  /* ==== BURGER ==== */
  /* ==== user-menu ==== */ }
  #header .menu-cell {
    width: 2.5em; }
  #header .icon-line {
    height: 2.5em; }
  #header #header-logo {
    padding: 0; }
  #header #logo {
    height: 2.5em; }
  #header #logo-mobile {
    max-height: 2.5em;
    max-width: 90%;
    vertical-align: middle; }
  #header #header-icons {
    padding: 0; }
  #header #header_icon_search {
    height: 2.5em;
    vertical-align: middle;
    display: inline-block; }
    #header #header_icon_search #searchbutton-glyph {
      padding: 0; }
  #header #header_icon_login {
    vertical-align: middle;
    display: inline-block; }
  #header #header-burger {
    padding-right: 0; }
  #header #burgermenu-button {
    height: 2.5em;
    width: 2.5em;
    cursor: pointer; }
  #header .hamburger-menu .dropdown-menu {
    z-index: 10000;
    width: 20em;
    max-width: 90vw; }
  #header .hamburger-menu {
    display: inline-block;
    height: 2.5em;
    width: 2.5em; }
    #header .hamburger-menu li {
      align-items: center; }
      #header .hamburger-menu li a.inactive {
        /* Make the disabled links grayish*/
        color: lightgray;
        /* And disable the pointer events */
        pointer-events: none; }
      #header .hamburger-menu li a {
        align-items: center;
        width: 100%; }
        #header .hamburger-menu li a div.left-col {
          width: 3em;
          float: left; }
          #header .hamburger-menu li a div.left-col img {
            height: 2em; }
  #header #login-menu {
    height: 2.5em;
    width: 2.5em;
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  #header .user-menu-button {
    height: 2.5em;
    width: 2.5em;
    border-radius: 50%; }
  #header .user-menu-button:hover {
    opacity: 0.5; }
  #header #header-user-dropdown {
    width: 20em;
    max-width: 90vw;
    z-index: 10000; }
    #header #header-user-dropdown .login-social {
      padding: 0 1em; }
  #header .logout-entry {
    text-align: right; }
  #header .dropdown-menu > li.logout-entry > a {
    font-weight: bold; }
  #header #header-edit-pane {
    background-color: #73C145;
    border-radius: 0.5em;
    height: 2.5em; }
    #header #header-edit-pane #edit_pane #nav-logo {
      float: left;
      padding: 0 0.5em; }
    #header #header-edit-pane #edit_pane #nav-items {
      list-style-type: none;
      margin: 0;
      padding: 0; }
      #header #header-edit-pane #edit_pane #nav-items li {
        float: left; }
        #header #header-edit-pane #edit_pane #nav-items li a {
          display: inline-block;
          padding: 0.5em;
          color: black; }
      #header #header-edit-pane #edit_pane #nav-items li.active {
        background-color: #98E368; }
      #header #header-edit-pane #edit_pane #nav-items li.disabled a {
        color: lightgray; }
    #header #header-edit-pane #edit_pane #nav-dropdown a {
      display: inline-block;
      padding: 0.5em;
      color: black;
      text-decoration: none; }
  #header .btn-mitopo {
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    vertical-align: middle;
    color: #73C145;
    text-decoration: none; }
    #header .btn-mitopo span {
      line-height: inherit;
      font-size: 2.2em; }

.btn-mitopo:hover {
  color: #98E368; }

#base-container {
  height: calc(100% - 2.5em + 2*1ex + 2px);
  height: -webkit-calc(100% - 2.5em + 2*1ex + 2px);
  overflow: auto; }

.leaflet_map {
  padding: 1px; }
  .leaflet_map .leaflet-left {
    left: 20px; }

#slideoutwrapper {
  overflow: hidden;
  position: relative;
  height: 100%; }
  #slideoutwrapper #slideout {
    overflow: auto;
    height: 100%;
    max-height: 100%;
    padding-right: 1.2em; }
  #slideoutwrapper #slideout-toggle-area {
    background-color: #98E368;
    width: 1.2em;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0%;
    right: 0; }
    #slideoutwrapper #slideout-toggle-area #slideout-toggle-button {
      position: absolute;
      top: 40%;
      right: .25em;
      width: .65em;
      color: black;
      transform: rotate(90deg) scale(5, 1);
      -webkit-transform: rotate(90deg) scale(5, 1);
      /* Safari and Chrome */
      -moz-transform: rotate(90deg) scale(5, 1);
      /* Firefox */
      -ms-transform: rotate(90deg) scale(5, 1);
      /* IE 9+ */
      -o-transform: rotate(90deg) scale(5, 1);
      /* Opera */ }
  #slideoutwrapper #slideout-toggle-area:hover {
    background-color: #73C145; }

.slideout-open {
  padding-right: 1.2em; }

.slideout-hidden {
  top: calc(2.5em + 2*1ex + 2px );
  height: calc(100% - calc(2.5em + 2*1ex + 2px )) !important;
  width: 1.2em; }
  .slideout-hidden #slideout {
    display: none; }

/* search */
#search-wrapper .search-dropdown {
  max-width: 85vw; }
#search-wrapper .pre-scrollable {
  width: 600px;
  max-width: 100%;
  overflow: auto; }

#wall_detail_map {
  background: none; }

.tick-button, .comment-button {
  background: none;
  padding: 0px; }

#routetable th, #routetable td {
  padding-left: 3px;
  padding-right: 3px; }

.leaflet-div-icon {
  background: #fff;
  text-align: center;
  border: 1px solid #666;
  border-radius: 10px; }

.leaflet-interactive.active-active {
  background-color: #98E368; }

.text-marker-text {
  background-color: #fff; }

.text-marker {
  background-color: #fff;
  border-radius: 5px;
  padding: 2px; }

.route-label, .route-label-highlight {
  background-color: #fff;
  border-radius: 5px;
  padding: 2px; }

.route-label-highlight {
  font-size: large; }

.route-label-grade {
  border-top: 1px gray solid; }

#small_map {
  height: 20em;
  max-height: 80%; }

.sun-table td {
  padding: 5px;
  text-align: center; }

.wall-sun-img {
  height: 40px;
  border-radius: 10px; }

.approach-text {
  margin: 5px; }

.leaflet-control-container #leaflet-polyline-edit-confirm {
  background-color: #98E368;
  height: 34px;
  width: 34px; }
  .leaflet-control-container #leaflet-polyline-edit-confirm span {
    vertical-align: middle; }

.route-info-img {
  height: 25px;
  vertical-align: top; }

.route-grade-icon {
  color: #ff9835; }

#bs-grade-slider {
  margin-top: 40px; }

#bs-grade-slider.slider-disabled .slider-selection {
  background: lightgray; }
#bs-grade-slider.slider-disabled .slider-handle {
  background: lightgray; }
#bs-grade-slider.slider-disabled .tooltip {
  display: none; }

.mitopo-icon {
  height: 25px; }

.decorate-icon {
  background-color: #fff; }

.decorate-buttonsbar {
  width: 200px; }

#route-form-container .small-form-fields div {
  padding-bottom: 5px; }
#route-form-container .small-form-fields #id_name {
  width: 12em; }
#route-form-container .small-form-fields #id_style {
  width: 10em; }
#route-form-container .small-form-fields #id_grade_choices {
  width: 8em; }
#route-form-container .small-form-fields #id_linecolor {
  width: 3em; }

/* hide sorting icons on wall_detail routetable */
#routetable th.sorting:after,
#routetable th.sorting_asc:after,
#routetable th.sorting_desc:after {
  content: none !important; }

/* hide sorting icons on wall_detail routetable */
#marker-toolbox {
  background-color: whitesmoke;
  padding: 5px; }

.draw_route_tool_img {
  cursor: pointer;
  color: black; }

.large-modal-dialog {
  width: 90%;
  height: 90%;
  padding: 20px;
  margin: 0; }

.large-modal-content {
  height: 100%;
  border-radius: 0; }

#geom-carousel .snapshot-carousel-indicators {
  bottom: 0;
  left: 0;
  width: auto;
  margin-left: 0;
  position: relative;
  display: inline; }
  #geom-carousel .snapshot-carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #73C145; }
  #geom-carousel .snapshot-carousel-indicators li.snapshot {
    border-color: #73C145; }
#geom-carousel .routeinfo-route-thumb {
  margin: 0 auto;
  border-radius: 1em; }
#geom-carousel .snapshot-carousel-control {
  color: #73C145; }

/* ==== LOADER ==== */
.loader, .overlay-loader {
  border: 0.2em solid #f3f3f3;
  /* Light grey */
  border-top: 0.2em solid #8c8c8c;
  /* Blue */
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: spin 2s linear infinite;
  margin-left: auto;
  margin-right: auto; }

.loader-inline {
  border: 0.1em solid #f3f3f3;
  /* Light grey */
  border-top: 0.1em solid #8c8c8c;
  /* Blue */
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 2s linear infinite;
  display: inline-block; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/* Overlay that I put on the popup div when user clicks on a link*/
.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); }

.overlay-loader {
  width: 5em;
  height: 5em;
  position: absolute;
  top: 33%;
  left: 33%; }

#dev_wallmap,
#pub_wallmap {
  background: none;
  padding: 0.1px; }

.publish-wall-label-box {
  height: 0;
  font-size: 120%;
  position: relative;
  text-align: center;
  top: 2em;
  z-index: 1000; }

.fade_wall_loader {
  opacity: 0;
  -webkit-transition: opacity 15s ease-in;
  -moz-transition: opacity 15s ease-in;
  -ms-transition: opacity 15s ease-in;
  -o-transition: opacity 15s ease-in;
  transition: opacity 15s ease-in; }

.comment-box {
  width: 400px;
  max-width: 90%; }

div.comment-delete {
  display: inline-block;
  font-size: 80%; }

ul.commentlist {
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.commentlist li {
    margin-top: 2ex; }
    ul.commentlist li img.comment-avatar {
      height: 2.5em;
      width: 2.5em;
      border-radius: 50%;
      float: left; }

ul.timeline-itemlist {
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.timeline-itemlist li .timeline-item {
    border-left: solid #98E368;
    padding: 2ex; }
  ul.timeline-itemlist li img.timeline-item-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    float: left; }
  ul.timeline-itemlist li .timeline-item-user {
    margin-left: 0.5em;
    font-size: 90%;
    font-weight: bold;
    display: inline-block; }
  ul.timeline-itemlist li .timeline-item-text {
    margin-left: 4em; }
  ul.timeline-itemlist li .timeline-item-date {
    color: #73C145;
    display: inline-block; }
    ul.timeline-itemlist li .timeline-item-date :after {
      display: block; }

.star-full {
  color: #ffcc00; }

.star-empty {
  color: #a5a5a5; }

.rating-number {
  font-weight: bold; }

.star-rating-td {
  padding: 0px !important; }

.news-panel {
  overflow: auto;
  height: 100%; }

.news-entry {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60em; }
  .news-entry a.wall-thumb {
    width: 60em;
    height: 20em;
    display: block;
    background-size: cover;
    background-position: center; }
  .news-entry .news-user-thumb {
    border-radius: 50%;
    height: 30px;
    width: 30px; }
  .news-entry h1 {
    background: #98E368;
    display: inline;
    font-size: 150%; }

.userpic-panel {
  height: 100%;
  overflow-x: hidden; }
  .userpic-panel div.userpic-entry {
    margin: .5em 0; }
  .userpic-panel img.userpic-avatar {
    width: 2em;
    height: 2em; }
  .userpic-panel div.userpic-desc {
    margin: .5em 0; }

.add-picture-button {
  width: 3em;
  height: 3em;
  text-align: center;
  padding: .8em 0;
  margin: 10px;
  position: absolute;
  bottom: 24px;
  right: 24px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px #666;
  z-index: 1; }

div.userpic-nav-control {
  margin: 0 auto;
  width: 15em; }

#activityfeed_content .feed_entry {
  margin-bottom: 1em;
  margin-top: 1em; }
  #activityfeed_content .feed_entry img {
    width: 50px; }
  #activityfeed_content .feed_entry img.sub_img {
    width: 30px; }

#wallmap_export_map {
  width: 600px;
  height: 300px; }
  #wallmap_export_map .leaflet-control-attribution,
  #wallmap_export_map .leaflet-bar-part,
  #wallmap_export_map .leaflet-control-zoom-in,
  #wallmap_export_map .leaflet-control-zoom-out,
  #wallmap_export_map .leaflet-control-layers {
    display: none; }

.leaflet-popup {
  min-width: 18em;
  max-width: 70vw;
  margin: 3; }
  .leaflet-popup .popup-heading {
    background: #98E368;
    font-size: 150%;
    vertical-align: middle;
    max-width: 65vw;
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Firefox */
    white-space: -pre-wrap;
    /* Opera <7 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* IE */ }
  .leaflet-popup .leaflet-popup-close-button {
    display: none; }
  .leaflet-popup .popup-content .row, .leaflet-popup .popup-content #pic, .leaflet-popup .popup-content #graph, .leaflet-popup .popup-content #content {
    margin: 0;
    padding: 0; }
  .leaflet-popup .popup-content #pic {
    text-align: center; }
    .leaflet-popup .popup-content #pic img {
      max-width: 20em;
      max-height: 8em;
      margin-bottom: 1em; }
  .leaflet-popup .wall_popup_route_hist {
    width: 16em;
    height: 8em;
    max-width: 70vw; }

.popup-heading-wrapper {
  padding-top: 0.3em;
  padding-bottom: 0.5em; }
  .popup-heading-wrapper a.popup-heading {
    color: #000000; }

.leaflet-popup-content-wrapper {
  border-radius: 0;
  box-shadow: none;
  border: solid 5px rgba(0, 0, 0, 0.1);
  background-clip: padding-box; }
  .leaflet-popup-content-wrapper .leaflet-popup-content {
    margin: 0; }

.contactform-outer-wrapper {
  text-align: center; }
  .contactform-outer-wrapper .contactform-wrapper {
    display: inline-block; }
    .contactform-outer-wrapper .contactform-wrapper h1 {
      text-align: center; }
    .contactform-outer-wrapper .contactform-wrapper .sent-success {
      margin-top: 10em;
      font-size: 150%; }
  .contactform-outer-wrapper .contactform input, .contactform-outer-wrapper .contactform textarea {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto; }
  .contactform-outer-wrapper .contactform input.tar {
    display: none; }

a.paginate_button, a.paginate_active {
  border: 1px solid #aaa;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 2px 5px;
  margin: 0 3px;
  cursor: pointer;
  *cursor: hand; }

a.paginate_button:hover {
  background-color: #98E368; }

a.paginate_button.current {
  background-color: #98E368; }

#ascent_sunburst_chart .nvd3 text {
  pointer-events: none; }

/* FONT */
@font-face {
  font-family: 'mitopo-font';
  src: url("../fonts/mitopo-font.eot?rg00ro");
  src: url("../fonts/mitopo-font.eot?rg00ro#iefix") format("embedded-opentype"), url("../fonts/mitopo-font.ttf?rg00ro") format("truetype"), url("../fonts/mitopo-font.woff?rg00ro") format("woff"), url("../fonts/mitopo-font.svg?rg00ro#mitopo-font") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="mitopo-"], [class*=" mitopo-"] {
  /* use !important to prevent issues with browser extensions that change ../fonts */
  font-family: 'mitopo-font' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.mitopo-route:before {
  content: "\e902"; }

.mitopo-hamburger:before {
  content: "\e901"; }

.mitopo-icon:before {
  content: "\e900"; }

/* MOBILE STYLES

These styles always have to be last to overwrite "normal" styles when on a screen
with small width (e.g. mobile)
*/

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