/* $breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
); */

.side-panel {
  position: absolute;
  margin-top: -125px;
  left: 0;
  min-width: 250px;

  padding: 1rem;
  background-color: #008db1;
  color: white;
}

.side-panel.small {
  right: 0;
  position: relative;
  margin-top: 0;
  min-width: 100%; 
  margin-top: -48px;
  margin-bottom: 40px;
}

.cs-detail-line {
  margin-bottom: 3px;
}

@media ( min-width: 1025px ) {
  .side-panel-container {
    max-width: 0px;
    padding: 0;
    position: relative;
  }
}

@media ( max-width: 1024px ) { 
  .side-panel {
    right: 120px;
    left: auto;
  }
}

@media ( min-width: 640px  ) and ( max-width: 1023px) { 
  .side-panel {
    right: 0px;
    left: auto;
  }
}