/* 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 */
}

.tags__view_all_notifications{
 cursor: pointer;
 color: #666666;
}

.tags__view_all_notifications:hover{
 cursor: pointer;
 color: #3498db;
 text-decoration: underline;
}

.octagon.tagContainer:hover > .tagContainerMiddle {
border-color: #3498db;
background-color: white;
color: #5ca3de;
cursor: pointer;
}

.octagon.tagContainer:hover > .tagContainerMiddleAll {
border-color: #3498db;
background-color: white;
color: #5ca3de;
cursor: pointer;
}

.octagon.tagContainer:hover > .tagArrow {
border-left: 13px solid #3498db;
cursor: pointer;
}

.octagon.tagContainer:hover > .tagArrow > div {
border-left: 11px solid white;
}

.octagon.tagContainer:hover > .tagContainerValue {
background-color: #3498db;
color: white;
border-color: #3498db;
}

.octagon.tagContainer .tagContainerMiddle {
border-top: 2px solid #586B7C;
border-bottom: 2px solid #586B7C;
border-left: 2px solid #586B7C;
text-transform: uppercase;
color: #738391;
background-color: #ededed;
font-size: 11px;
padding-left: 1em;
padding-right: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 26px;
cursor: pointer;
}

.octagon.tagContainer .tagContainerMiddleAll {
border-top: 2px solid #586B7C;
border-bottom: 2px solid #586B7C;
border-left: 2px solid #586B7C;
border-right: 2px solid #586B7C;
text-transform: uppercase;
color: #738391;
font-size: 11px;
padding-left: 1em;
padding-right: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 26px;
cursor: pointer;
}

.octagon.tagContainer .tagArrow {
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 13px solid #586B7C;
cursor: pointer;
}

.octagon.tagContainer .tagArrow > div {
width: 0;
position: relative;
left: -14px;
top: -11px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 11px solid #ededed;
cursor: pointer;
}

.octagon.tagContainer .tagArrow .selectedTagContainer {
cursor: pointer;
margin-left: 1em;
}

.octagon.tagContainer .tagContainerValue {
border-top: 2px solid #586B7C;
border-bottom: 2px solid #586B7C;
border-left: 2px solid #586B7C;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
padding-left: 5px;
padding-right: 5px;
background-color: #D0D2D3;
color: #738391;
font-size: 11px;
height: 26px;
cursor: pointer;
}

.selectedTagContainer .tagContainerMiddle {
border-top: 2px solid #3498db;
border-bottom: 2px solid #3498db;
border-left: 2px solid white;
text-transform: uppercase;
color: white;
font-size: 11px;
background-color: #3498db;
padding-left: 1em;
padding-right: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 26px;
cursor: pointer;
}

.selectedTagContainer .tagContainerMiddleAll {
border: 2px solid #3498db;
text-transform: uppercase;
color: white;
font-size: 11px;
background-color: #3498db;
padding-left: 1em;
padding-right: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 26px;
cursor: pointer;
}

.selectedTagContainer .tagArrow {
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 13px solid #3498db;
cursor: pointer;
}

.selectedTagContainer .tagContainerValue {
border-top: 2px solid #3498db;
border-bottom: 2px solid #3498db;
border-left: 2px solid #3498db;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
padding-left: 5px;
padding-right: 5px;
background-color: #3498db;
color: white;
font-size: 11px;
height: 26px;
cursor: pointer;
}

.selectedTagContainer .tagArrow > div {
width: 0;
position: relative;
left: -14px;
top: -11px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 11px solid #3498db;
cursor: pointer;
}


