/* Variables - a mix of Old and New */

:root {

/* Octagon Design System Colors */

/* Start Yung's palette */ 

  /* COLORS */
  /* primary */

  /*--black: #000000;*/

  /* secondary */
/* End Yung's palette */

  /* Components Colors */

  /* Basic Colors used in components*/ /* was used for sidebar - Yung's theme uses slightly lighter charcoal #454545*/
  
  /* other */

  /* margins */
}

.octagon.side-nav {
  background: rgb(54, 61, 67);
  color: #fff;
  display: inline-block;
  list-style: none;
  min-width: 65px;
  position: relative
}

.octagon.side-nav .side-nav__item {
color: #fff;
position: relative;
width: 100%;
}

.octagon.side-nav {/* Note that this class is basically needed to simplify
  using NavLink from react-router */
}

.octagon.side-nav .side-nav__item a {
color: #fff;
width: 100%;
height: 100%;
}

.octagon.side-nav .side-nav__icon-container {
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 40px;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
padding: 10px 0 10px 4px;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
width: 100%;
}

.octagon.side-nav .side-nav__item img {
height: 40px;
width: 40px;
}

.octagon.side-nav .side-nav__item .side-nav_active {
border-left: 4px solid #fff;
padding-left: 0;
opacity: 1;
}

.octagon.side-nav .side-nav__icon-container:not(.side-nav_active) {
opacity: 0.4;
}

.octagon.side-nav .side-nav__icon-container:not(.side-nav_active):hover {
opacity: 0.7;
}
