earlymarket/CoPosition

.c-devices.a-show,
.c-friends.a-show_device,
.c-checkins.a-index {
  .date-select {
    background: #fff;
    position: absolute;
    padding: 10px;
    width: 300px;
    top: 124px;
    left: 90px;
    z-index: 9;

    @media screen and (max-width: 660px){
      width: 260px;
      top: 70px;
      left: 70px;
    }

    i {
      margin: 0;
    }
  }

  .collapsible-body {
    padding: 1rem;
    border-bottom: 0;
  }

  .collapse-mark {
    margin-right: 0;
  }

  .date-filter-presets {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    a {
      color: black;
      font-size: 12px;
    }
  }

  /* Header - Day of the week */
  .picker__weekday-display { background-color: $primary-color-darker; }
  /* Body - Today info */
  .picker__date-display { background-color: $primary-color; }
  /* Buttons of actions */
  .picker__nav--prev:hover, .picker__nav--next:hover { background-color: $primary-color-lighter; }
  .picker__nav--prev:before { border-right: 0.75em solid $primary-color; }
  .picker__nav--next:before { border-left: 0.75em solid $primary-color; }
  .picker__today, .picker__close { color: $primary-color; }
  .btn-flat.picker__today:active, .btn-flat.picker__close:active, .btn-flat.picker__clear:active { background-color: $primary-color; }
  /* Select months of the year */
  .picker__select--month.browser-default {
    display: inline;
    background-color: #FFFFFF;
    width: 34%;
    border: none;
    outline: none;
  }
  /* Every month of the year except: today */
  .picker__day--infocus:hover { color: $primary-color; }
  .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { color: $primary-color-darker; }
  .picker__day.picker__day--infocus.picker__day--selected.picker__day--highlighted { background-color: $primary-color-lighter; }
  /* Today */
  .picker__day.picker__day--infocus.picker__day--today.picker__day--selected.picker__day--highlighted { background-color: $primary-color-lighter; }
  .picker__day.picker__day--today { color: $primary-color-darker; }

// end of override stuff

  #map {
    width:100%;
    position:absolute !important;
    top: 54px;
    margin-top: 64px;
    @media screen and (max-width: 660px){
      margin-top: 0px;
    }
  }

  .myProgress {
    z-index: 10;
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: white;
    border-radius: 2px;
    margin: 0rem 0 1rem 0;
    overflow: hidden;

    .myDeterminate {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background-color: #ffc952;
      transition: width .5s linear;
    }
  }

  .bottom-panel {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    text-align: center;
    background: white;
  }

  .bottom-panel * {
    margin: 0;
  }

  .delete-buttons {
    display: flex;
    justify-content: space-around;
  }

  .revert {
    cursor: pointer; cursor: hand;
  }

  .buttons {
    margin: 10px;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    margin-left: 25%;
    margin-right: 25%;
    @media screen and (max-width: 800px){
      margin-left: 5%;
      margin-right: 5%;
    }
    @media screen and (max-width: 660px){
      .modal-trigger {
        padding: 0 1rem;
        font-size: 10px;
      }
    }
  }

  .disabled-icon {
    color: rgba(0,0,0,0.12);
  }

  .enabled-icon {
    // Material Design specs suggest opacity: 0.25; but I don't think
    // it'd give enough countrast
  }

  .fogged {
    color: #2196f3;
  }

  .path-active {
    color: #FC8428;
  }

  .cities-active {
    color: #FC8428;
  }

  #device-name {
    height: 55px;
    justify-content: center;
    background: white;
    font-size: 1.5rem;
    @media screen and (max-width: 660px){
      display: none;
    }
  }

  .leaflet-right {
    @media screen and (max-width: 660px){
      display: none;
    }
  }

  .leaflet-control-zoom {
    width: 2.5rem;
    .leaflet-control-zoom-in, .leaflet-control-zoom-out {
      background-size: 35px 270px;
      padding-right: 2.5rem;
    }
  }

  .leaflet-top.leaflet-left {
    .leaflet-control:not(.leaflet-control-zoom):not(.leaflet-control-layers-expanded) {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      a {
        border-bottom: 0px;
      }
    }
  }

  .leaflet-touch, .leaflet-control-fullscreen a {
    background-position: 0px 0px;
  }

  .leaflet-popup-content-wrapper {
    background-color: rgba(255, 255, 255, .8);
  }

  .leaflet-popup-content {
    h3, ul {
      margin: 0;
    }

    .editable {
      font-size: 0.9rem;
    }

    .edit-coords {
      font-size: 14px;
      display: none;
    }

    .editable-wrapper.clickable {
      cursor: pointer;

      .editable {
        border-bottom: #ff8f00 2px dotted;
      }

      .edit-coords {
        display: inline-block;
      }
    }

    li.address, .foggedAddress > li {
      white-space: pre-wrap;
      font-family: "Fira Mono", monospace;
    }
  }
}

.c-devices.a-show,
.c-checkins.a-index {

  #map {
    bottom: 60px;
  }

  .bottom-panel {
    height: 100px;
  }

  .crosshair {
    cursor: url(<%= asset_path("location_searching.png") %>), auto;
  }

  .leaflet-popup-content-wrapper {
    z-index: 1000;
  }

  .leaflet-container .leaflet-control-mouseposition {
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 5px #bbb;
    padding: 0 5px;
    margin:0;
    color: #333;
    font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  }
}