.app-content {background-color:#E5E9EE;}

#body {
       position:absolute;
       top:0;
       right:0;
       background-color:#6B8D8C;
       height:28.625em;
       width:12.5em;
       border-radius:.625em;
       border: 0.09em solid #fff;
       margin:.625em;
       -moz-box-sizing:border-box;
       -webkit-box-sizing:border-box;
       box-sizing:border-box;
       }


#activity{position:absolute; top:0; left:0; background-color:#93AEAD; height:28.625em; width:36.125em; border-radius:.625em; border:1px solid #fff; margin:.625em 0 .625em .625em; 
       -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

/*****************************************************************/

#img{width:9.3125em; height:27.6875em; margin:.5em auto; position:absolute; top:0; left:1.5em}

g[id$='Selected']{display:none;}

g[id^='bodyPart']{cursor:pointer;}

#floor{
       height:4em;
       background-color:#93AEAD;
       margin-top:24.625em;
       border-bottom: 0.09em solid #fff;
       border-top: 0.18em solid #fff;
       border-radius:0 0 .625em .625em;
       -moz-box-sizing:border-box;
       -webkit-box-sizing:border-box;
       box-sizing:border-box;
       }

.he .fsArrow{font-size:10px;}
.en .fsArrow{font-size:8.5px;}
.vi .fsArrow{font-size:8.5px;}
.ar .fsArrow{font-size:10px;}

/*****************************************************************/

#menu{background-color:#6B8D8C; height:4em; border-radius:.625em .625em 0 0; border-bottom:.125em solid #fff; margin:0; padding:1em 0 1em 1em; list-style:none; white-space:nowrap;}
.vi #menu{background-color:#6B8D8C; height:4.4em; border-radius:.625em .625em 0 0; border-bottom:.125em solid #fff; margin:0; padding:0.8em 0.8em; 1em 1em; list-style:none; white-space:nowrap;}

#menu li{
          display:inline-block;
          width:6em;
          height:4em;
          margin-right: 0.75em;
          border-radius:.625em;
          color:#000;
          text-align:center;
          font-weight:bold;
          cursor:pointer;
          -moz-box-sizing:border-box;
          -webkit-box-sizing:border-box;
          box-sizing:border-box;
          }

     .vi #menu li{
          display:inline-block;
          width:6.5em;
          height:4.4em;
          margin-right: 0.20em;
          border-radius:.625em;
          color:#000;
          text-align:center;
          font-weight:bold;
          cursor:pointer;
          -moz-box-sizing:border-box;
          -webkit-box-sizing:border-box;
          box-sizing:border-box;
          }
.no-touch #menu li:hover, #menu li.on{color:#fff;}

#menu li#tab1{background-color:#ff6666;}
#menu li#tab2{background-color:#ffcc66;}
#menu li#tab3{background-color:#51FF7C;}
#menu li#tab4{background-color:#8AC5FF;}
#menu li#tab5{background-color:#66CCFF;}

.no-touch #menu li#tab1:hover, #menu li#tab1.on, #menu li#tab1 > .icon-holder{background-color:#ff2222;}
.no-touch #menu li#tab2:hover, #menu li#tab2.on, #menu li#tab2 > .icon-holder{background-color:#ff9900;}
.no-touch #menu li#tab3:hover, #menu li#tab3.on, #menu li#tab3 > .icon-holder{background-color:#00CD34;}
.no-touch #menu li#tab4:hover, #menu li#tab4.on, #menu li#tab4 > .icon-holder{background-color:#3399FE;}
#menu li#tab5 > .icon-holder{background-color:#689FD7;}

#menu li > .title{line-height:.875em; height:.875em;}
#menu li  span {font-size:.625em;}

.vi #menu li  span {font-size:.57em;}

#menu li > .icon-holder{height:2.75em; width:5em; margin:0.125em auto; border-radius:.625em; padding:.25em 1.25em;
                        -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
#menu li.on > .icon-holder, .no-touch #menu li:hover > .icon-holder{background-color:#fff !important;}

/*******************************/
/*all units in pixels since using grid-scale*/
#menu li .icon { background: url("../content/img/icons.png") no-repeat; width: 100%; height: 100%;background-size: 7.09em 18.162em;}

#menu li#tab1 .icon{background-position: -4.2em 0;}
.no-touch #menu li#tab1:hover .icon, #menu li#tab1.on .icon{background-position: 0.1em 0;}
#menu li#tab2 .icon{background-position: -4.3em -4em;}
.no-touch #menu li#tab2:hover .icon, #menu li#tab2.on .icon{background-position: 0.2em -4em;}
#menu li#tab3 .icon{background-position: -4.3em -8em;}
.no-touch #menu li#tab3:hover .icon, #menu li#tab3.on .icon{background-position: 0.1em -8em;}
#menu li#tab4 .icon{background-position: -4.2em -11.9em;}
.no-touch #menu li#tab4:hover .icon, #menu li#tab4.on .icon{background-position: 0 -11.9em;}
#menu li#tab5 .icon{background-position: -4.6em -15.9em; width: 2.7em;}
.no-touch #menu li#tab5:hover .icon, #menu li#tab5.on .icon{background-position: 0px -15.9em;}

/*********************************/

#menu li > .arrow{display:none;}
#menu li.on > .arrow{position:relative; display:block; width:0; height:0; border-left:1.1875em solid transparent;	border-right:1.1875em solid transparent;	border-top:1.1875em solid #fff; margin:.625em auto;}
#menu li.on > .arrow:after{content:""; display:block; position:absolute; bottom:-.4375em; left:-.875em;  border-left:.875em solid transparent;	border-right:.875em solid transparent;	border-top:.875em solid #fff; margin:.625em auto;}

#menu li#tab1.on > .arrow:after{border-top-color:#ff2222;}
#menu li#tab2.on > .arrow:after{border-top-color:#ff9900;}
#menu li#tab3.on > .arrow:after{border-top-color:#00CD34;}
#menu li#tab4.on > .arrow:after{border-top-color:#3399FE;}
#menu li#tab5.on > .arrow:after{border-top-color:#66CCFF;}

/*****************************************************************/

#graph-holder{margin:0 1em;}
#graph-holder > .title{font-weight:bold; text-align:center; margin-top:1em}
.vi #graph-holder > .title{font-weight:bold;text-align:center;margin-top: 0.65em;}
#graph-holder > .title > span{font-size:1em}


#graph-holder .background{
        height:18em;
        background-color:#fff;
        margin: 1em 0 1em;
        padding-top:2.9375em;
        padding-left:2.5em;
        position:relative;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        }

.vi #graph-holder .background{
        height: 17.8em;
        background-color:#fff;
        margin: 0.4em 0 1em;
        padding-top: 2.9375em;
        padding-left:2.5em;
        position:relative;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        }

#graph{position:relative;width: 31.2em; height:12em; border-left:.125em solid #000; border-bottom:.125em solid #000;margin-left: -.4em;}

div#graph {}

#separator{
            position:absolute;
            top:2.375em;
            /* left:-.625em; */
            width: 31em;
            height:.1875em;
            background-color:#fff;
            border-top: 0.09em dashed #000;
            border-bottom: 0.09em dashed #000;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            }

/************************************************************/
/*all units in pixels since using grid-scale*/
#cols{
         position:absolute;
         bottom:0;
         width: 30.9em;
         white-space:nowrap;
         height: 12em;
         -moz-transform-origin: bottom left;
         -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
         -webkit-transform-origin: bottom left;
         transform-origin: bottom left;
}

#graph .body-part{
              position:relative;
              width: 3.75em;
              height:100%;
              display:inline-block;
              margin: 0 0.25em;
              white-space:nowrap;
              -moz-box-sizing:border-box;
              -webkit-box-sizing:border-box;
              box-sizing:border-box;
              }

#graph .body-part > div{
                        width: 0.97em;
                        border: 0.09em solid #000;
                        border-bottom:0;
                        position:absolute;
                        bottom:0;
                        display:none;
                        -moz-box-sizing:border-box;
                        -webkit-box-sizing:border-box;
                        box-sizing:border-box;
                        }

#graph .body-part > div.on{display:block;}

.value > span{font-size: 0.48em;position:absolute; top: -1.1em; left:0; letter-spacing: -0.07em;line-height: 0.9em; height: 0.9em;}
@media screen and (min-device-width: 320px) and (max-device-width: 1024px)
{
.value > span{top:-9px;}
}
.col4{background-color:#ff6666; left:0;}
.col3{background-color:#ffcc66; left: 0.9em;}
.col2{background-color:#51FF7C; left: 1.8em;}
.col1{background-color:#8AC5FF; left: 2.7em;}

#col4_1,#col3_1{height: 0.7em;}
#col2_1{height: 0.9em;}
#col1_1{height: 1.1em;}

#col4_2{height: 1.3em;}
#col3_2{height: 2em;}
#col2_2{height: 4.4em;}
#col1_2{height: 2.7em;}

#col4_3{height: 1.3em;}
#col3_3{height: 1.7em;}
#col2_3, #col1_3{height: 2.3em;}

#col4_4{height: 3.8em;}
#col3_4{height: 3em;}
#col2_4, #col1_4{height: 1.1em;}

#col4_5{height: 10.9em;}
#col3_5{height: 8.3em;}
#col2_5{height: 1.1em;}
#col1_5{height: 2.3em;}

#col4_6{height: 1.7em;}
#col3_6{height: 0.6em;}
#col2_6, #col1_6{height: 0.4em;}

#col4_7, #col3_7, #col2_7, #col1_7{height: 1.5em;}

/************************************************************/

#chir-x{
    margin-left: -.4em;
}
#chir-x div{
            border: 0.09em solid #000;
            border-top:0;
            background-color:#e8e3e3;
            margin: 0 .25em;
            width:3.75em;
            height:2em;
            display:inline-block;
            vertical-align:middle;
            text-align:center;
            padding:.5625em .25em;
            line-height:.75em;
            cursor:pointer;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            }

.vi #chir-x div{
            border: 0.09em solid #000;
            border-top:0;
            background-color:#e8e3e3;
            margin: 0 .25em;
            width:3.75em;
            height:2em;
            display:inline-block;
            vertical-align:middle;
            text-align:center;
            padding:.525em .25em;
            line-height:.75em;
            cursor:pointer;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            }


#chir-x div:first-child, #chir-x div:nth-child(2){padding:.125em;}
#chir-x div.cxOn{background-color:#FFFFCC; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#chir-x span{font-size:.75em;}

.vi #chir-x span{font-size:.7em;}

#chir-y{position:absolute; top:.8125em; left: 0.6em;}
#chir-y > .title{height:1.5em; line-height:.75em; width:1em;}
.en #chir-y > .title{width:3.5em;}
.vi #chir-y > .title{width:3.5em;}
#chir-y div:not(.title){height:2em; width:1em; text-align:center; position:relative;
            -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#chir-y div:not(.title):before{content:""; display:block; position:absolute; top:.625em; right:-.5em; width:.375em; border-top:.125em solid #000;}
#chir-y span{font-size:.75em;}