/* default view */
#container:not(.plain-view):not(.accordion){
    /*max-width:600px;*/
    background-color:#213C4A;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    position: relative;
    white-space: nowrap;
    margin-bottom:10px;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller  {
    display: inline-block;
    padding: 5px;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label.selected {
    border: 2px solid white;
}
/*#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label.solo.selected.unit01,
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label.solo.selected.unit02,
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label.solo.selected.unit03,
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label.solo.selected.unit04 {
    border: none;
}*/
#container:not(.plain-view):not(.accordion) > .click-to-reveal > .label-container > .label-scroller > .label {
    width: 120px;
    height: 140px;
}

#container:not(.plain-view):not(.accordion) > .click-to-reveal > .label-container > .label-scroller > .label.sm-lbl {
    width:80px;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal > .label-container > .label-scroller > .label > span {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal > .label-container > .label-scroller > .label .unit{
    margin-bottom:5px;
    font-weight:bold;

}
#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label {
    white-space: normal;
    box-sizing: border-box;
    border-radius:9px;
    font-weight:normal;
    line-height:1.4;
    color: white;
    position: relative;
    vertical-align: top;
}

#container:not(.plain-view):not(.accordion) > .click-to-reveal  .label-container > .label-scroller > .label:not(:last-of-type) {
    margin-right: 10px;
}

#container:not(.plain-view) .reveal-container .reveal {
    background-color:#213C4A;
}

#container:not(.plain-view) .reveal-container .reveal .label-container > .label-scroller > .label {
    min-width: 60px;
    min-height: 60px;
    text-align:center;
    font-weight:bold;
}

#container:not(.plain-view) .reveal-container .reveal  .reveal-container .reveal {
    background-color: white;
}

#container:not(.plain-view):not(.accordion) > .click-to-reveal  .reveal-container .label-scroller {
    padding-left:0;
}

/*unit styles */
#container:not(.plain-view) .unit-txt {
    color:white;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label:not(.selected):hover,
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label:not(.selected):focus {
    top: -2px;
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit01:not(.selected):hover,
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit01:not(.selected):focus {
    border: 2px solid rgba(0,164,167,0.5);
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit02:not(.selected):hover,
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit02:not(.selected):focus {
    border: 2px solid rgba(226,128,0,0.5);
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit03:not(.selected):hover,
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit03:not(.selected):focus {
    border: 2px solid rgba(134,162,11,0.5);
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit04:not(.selected):hover,
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.unit04:not(.selected):focus {
    border: 2px solid rgba(116,47,104,0.5);
}
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.clear:not(.solo):hover,
#container:not(.plain-view):not(.accordion) > .click-to-reveal .label-container > .label-scroller > .label.clear:not(.solo):focus {
    background-color: transparent;
    top: -2px;
}
#container:not(.plain-view):not(.accordion) .label.clear {
    background-color:#213C4A;
}
#container:not(.plain-view):not(.accordion) .label.clear:not(.selected):hover,
#container:not(.plain-view):not(.accordion) .label.clear:not(.selected):focus {
    background: #213C4A;
}
#container:not(.plain-view):not(.accordion) .label.unit01.solo{
    border: 2px solid #ffffff;
}
#container:not(.plain-view):not(.accordion) .label.unit01:not(.sm-lbl):not(.solo){
    background: #00A4A7;
}
#container:not(.plain-view):not(.accordion) .label.unit01{
    border:2px solid #00A4A7;
}
#container:not(.plain-view):not(.accordion) .label.unit02:not(.sm-lbl):not(.solo){
    background: #E28000;
}
#container:not(.plain-view):not(.accordion) .unit02 {
    border:2px solid #E28000;
}
#container:not(.plain-view):not(.accordion) .label.unit03:not(.sm-lbl):not(.solo) {
    background: #86A20B;
}
#container:not(.plain-view):not(.accordion) .label.unit03  {
    border:2px solid #86A20B;
}
#container:not(.plain-view):not(.accordion) .label.unit04:not(.sm-lbl):not(.solo) {
    background: #742F68;
}
#container:not(.plain-view):not(.accordion) .label.unit04 {
    border:2px solid #742F68;
}
#container:not(.plain-view) .p-view {
    display:none;
}

#container:not(.plain-view) .gfx-view.key-skills .arr-txt {
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5em 1.25em;
    background-color:#213C4A;
}
#container:not(.plain-view) .gfx-view.key-skills .arr {
    position:absolute;
    left:1em;
    top:1em;
    right:1em;
    height:0.26em;
    background-color:#7D9EA7;
}
#container:not(.plain-view) .gfx-view.key-skills .arr:after {
    content:" ";
    width: 0;
    height: 0;
    position: absolute;
    display:block;
    border-style: solid;
    border-width: 0.54em 0 0.54em 1em;
    right:-0.5em;
    top:-0.4em;
    border-color: transparent transparent transparent #7D9EA7;
}
#container:not(.plain-view) .gfx-view.key-skills .arr:before {
    content:" ";
    width: 0;
    height: 0;
    position: absolute;
    display:block;
    border-style: solid;
    border-width: 0.54em 1em 0.54em 0;
    left: -0.5em;
    top: -0.4em;
    border-color: transparent #7D9EA7 transparent transparent;
}
#container:not(.plain-view) .plainViewBtn {
    margin-left:3px;
}
#container:not(.plain-view) .gfx-view.key-skills {
    color:#7D9EA7;
    font-size:12px;
    font-weight:bold;
    width:100%;
    text-align:center;
    position: relative;
    height:30px;
    margin-top:10px;
    margin-bottom:5px;
}

#container.plain-view .gfx-view {
    display:none;
}
/* accordion view */
/* accordion view */
#container:not(.plain-view).accordion .p-view {
    display:block;
}
#container:not(.plain-view).accordion .gfx-view {
    display:none;
}

#container:not(.plain-view).accordion .label:not(.sm-lbl):not(.solo) span{
    font-weight: normal;
}
#container:not(.plain-view).accordion .label.unit01:not(.sm-lbl):not(.solo){
    background: #00A4A7;
    color: #FFFFFF;
}

#container:not(.plain-view).accordion .label.unit01.core:not(.sm-lbl):not(.solo) {
    color: #00A4A7;
}
#container:not(.plain-view).accordion .reveal-container .reveal .label.unit01.core:after {
    color: #00A4A7;
    opacity: 0.8;
}
#container:not(.plain-view).accordion .label.unit01.sm-lbl:not(.solo){
    background: #213C4A;
    color: #FFFFFF;
    -webkit-box-shadow: inset 0px 0px 0px 3px #00A4A7;
    -moz-box-shadow: inset 0px 0px 0px 3px #00A4A7;
    box-shadow: inset 0px 0px 0px 3px #00A4A7;
}
#container:not(.plain-view).accordion .label.unit02:not(.sm-lbl):not(.solo){
    background: #E28000;
    color: #FFFFFF;
}

#container:not(.plain-view).accordion .label.unit02.core:not(.sm-lbl):not(.solo) {
    color: #E28000;
}
#container:not(.plain-view).accordion .reveal-container .reveal .label.unit02.core:after {
    color: #E28000;
    opacity: 0.8;
}
#container:not(.plain-view).accordion .label.unit02.sm-lbl:not(.solo){
    background: #213C4A;
    color: #FFFFFF;
    -webkit-box-shadow: inset 0px 0px 0px 3px #E28000;
    -moz-box-shadow: inset 0px 0px 0px 3px #E28000;
    box-shadow: inset 0px 0px 0px 3px #E28000;
}
#container:not(.plain-view).accordion .label.unit03:not(.sm-lbl):not(.solo){
    background: #86A20B;
    color: #FFFFFF;
}

#container:not(.plain-view).accordion .label.unit03.core:not(.sm-lbl):not(.solo) {
    color: #86A20B;
}
#container:not(.plain-view).accordion .reveal-container .reveal .label.unit03.core:after {
    color: #86A20B;
    opacity: 0.8;
}
#container:not(.plain-view).accordion .label.unit03.sm-lbl:not(.solo){
    background: #213C4A;
    color: #FFFFFF;
    -webkit-box-shadow: inset 0px 0px 0px 3px #86A20B;
    -moz-box-shadow: inset 0px 0px 0px 3px #86A20B;
    box-shadow: inset 0px 0px 0px 3px #86A20B;
}
#container:not(.plain-view).accordion .label.unit04:not(.sm-lbl):not(.solo){
    background: #742F68;
    color: #FFFFFF;
}

#container:not(.plain-view).accordion .label.unit04.core:not(.sm-lbl):not(.solo) {
    color: #742F68;
}
#container:not(.plain-view).accordion .reveal-container .reveal .label.unit04.core:after {
    color: #742F68;
    opacity: 0.8;
}
#container:not(.plain-view).accordion .label.unit04.core:not(.sm-lbl):not(.solo) {
    color: #742F68;
}
#container:not(.plain-view).accordion .reveal-container .reveal .label.unit04.core:after {
    color: #742F68;
    opacity: 0.8;
}

#container:not(.plain-view).accordion .label.unit04.sm-lbl:not(.solo){
    background: #213C4A;
    color: #FFFFFF;
    -webkit-box-shadow: inset 0px 0px 0px 3px #742F68;
    -moz-box-shadow: inset 0px 0px 0px 3px #742F68;
    box-shadow: inset 0px 0px 0px 3px #742F68;
}
#container:not(.plain-view).accordion .label.core:not(.sm-lbl):not(.solo){
    background-color: #FFFFFF;
}
#container:not(.plain-view).accordion .reveal-container .reveal .label {
    border-color: #213C4A;
}

#container:not(.plain-view).accordion .label.solo {
    border: 2px solid #ffffff;
    display:none;
}

#container:not(.plain-view).accordion .reveal-container .reveal .label:after {
    color: #FFFFFF;
    opacity: 0.5;
}
sup {
    font-size: smaller;
}