
.application-sidebar,
.application-sidebar-sub {
  flex: 0 0 34rem !important;
  &.empty {
    flex: 0;
  }
}

// Volet 1
.application-sidebar {
  background-color: color(volet1);
  overflow: hidden;
}

// Volet 2
.application-sidebar-sub {
  background-color: color(volet2);
  overflow: hidden;

  .body {
    margin-top: 1rem;
  }
}

.sidebar-scroll-wrapper {
  overflow: auto;
  // padding: 0 2rem 0 6rem;
  padding:0 2rem;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.application-sidebar-sub .sidebar-scroll-wrapper {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
}


.sidebar-content{
  overflow-x: auto;
  overflow-y: hidden;
}

// Close btn
.sidebar-sub-close {
  padding: 0.5rem;
  position: absolute;
  top: 0;
  right: 0.5rem;
  cursor:pointer;
  z-index: 2;
}

.sidebar-bottom {

  height: 70px;
  padding:10px;
  border-top: 1px solid greys(30%);

  & .logo-atelier {
    background-image: url(images/logo-Atelier-NB.svg);
    background-repeat: no-repeat;
    flex:1;
  }

  & .app-version {
    font-size:80%;
    margin-bottom:0.2rem;
    color: #b3b3b3;
  }

  .btn-arrow, .btn-home {
    display: flex;
    align-items: center;
    justify-content: center;
    color: color(primary2);
  }

  .btn-home {
    text-decoration: none;
  }

  .btn-home i {
    font-size: 3.5rem;
  }

  .btn-arrow i {
    font-size: 5.5rem;
  }

  .btn-arrow.disabled, .btn-home.disabled {
    color: color(disabled);
  }
}

.geo-ref-column, .layers-column {

  .dropdown {
    min-width:300px;
  }

  .accordion-wrapper > div {
    padding: 2rem;
  }

  .collection {

    border:none;
    margin-right: -20px;
    overflow: auto;

    & > li.selected {
      margin-right: 0;
      padding-right:  2.5rem;
      background-color: color(volet2);
      border-color:transparent;

      .layer-name {
        font-weight: bold;
      }
    }

    & > li {
      margin-right: 20px;
      background-color: #FFF;
      border:2px solid #b2b2b2;
    }

    & > li:hover {
      background-color: #efe6df ;
      border-color: #b29d8d;
    }

  }

}

.geo-ref-column {

  .collection {

    & > li:first-child {
      background-color: color(titles);
      color: #FFF;
      margin-bottom: 3rem;

      .dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .dropdown-label {
        flex:1;
      }

      .dropdown-icon {
        width : 16%;
      }
    }

    & > li {
      margin-bottom: 0.5rem;
      padding: 0.5rem;
    }

    & > li.selected {
      color: color(titles);
    }
  }
}


.layers-column {

  .collection > li {

      margin-bottom: 0.5rem;
      padding: 0.2rem 0.5rem 0.2rem 0.5rem;

      .layer-visualization-icon {
        display: block;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        width: 5rem;
        img {
          display: inline-block;
          vertical-align: middle;
          width: 100%;
        }
      }
  }

  .collection > li.selected,
  .collection > li.selected a{
    color:color(text);
  }

}



.report {

  flex-shrink: 0;

  ul {
    padding-left: 0;
    list-style: none;
  }

  li.warnings, li.errors {
    margin-top: 1em;
  }

  .error-explenation {
    margin-left: 0.3em;
    padding-left: 0.5em;
    font-size: 1.3rem;
    color: greys(90%);
  }

  .report-message {
    margin-bottom: 1.3rem;
    font-size: 1.3rem;
    padding: 0.6rem 1rem;
  }

  .report-message.success {
    background-color: color(success, 'tint');
    color: color(success);
    border-left: 2px solid color(success);
  }

  .report-message.warning {
    background-color: color(warning, 'tint');
    color: color(warning);
    border-left: 2px solid color(warning);
  }

  .report-message.danger {
    background-color: color(warning, 'tint');
    color: color(danger);
    border-left: 2px solid color(danger);
  }

  .map-card {
    border: 1px solid greys(20%);
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    cursor: pointer;

    &:hover {
      background-color: greys(10%);
    }

    .iconfont {
      font-size: 6em;
    }

    .label {
      text-align: center;
    }

  }

}
