/* Industry overview charts and visualizations. */
.graph-body {
          /*background-color: #1a2b34;*/
          background-color: rgba(0, 166, 255, 0.051);
          font-family: 'Helvetica Neue', Helvetica, sans-serif;
          color: rgba(255,255,255,0.75);
        }
         h1 {
         margin: 15px auto 0;
         width: 565px;
         text-align: center;
         font-size: 22px;
         }
         /* Create two equal columnTs that floats next to each other */
         .columnT {
         float: left;
         width: 18%;
         height: 10px; /* Should be removed. Only for demonstration */
         }
         .columnT p{
         margin: 0;
         color: #000;
         float:left;
         }
         /* Clear floats after the columnTs */
         .row-year:after {
         content: "";
         display: table;
         clear: both;
         }

         .base {
         /*position: absolute;*/
         /*bottom: 0;*/
         /*left: -35px;*/
         /*width: 825px;*/
         /*height: 20px;*/
         /*background-color: rgba(255,255,255,0.05);*/
         -moz-transform: skew(45deg);
         -o-transform: skew(45deg);
         -webkit-transform: skew(45deg);
         position: absolute;
         bottom: 0;
         left: -10px;
         width: 795px;
         height: 20px;
         /*background-color: rgba(14,81,117,0.6);*/
         background-color: rgba(0, 166, 255, 0.2);
        }
        .right-base {
            /*transform: rotate(90deg) skew(-45deg);*/
            /*transform-origin: 161% 0 0;*/
            /*bottom: -328px;*/
            /*width: 500px;*/
            transform: rotate(90deg) skew(-45deg);
            transform-origin: 223% 0 0;
            bottom: -464px;
            width: 360px;
         }
         .chart-container {
         position: relative;
         z-index: 0;
         margin: 25px auto 0;
         width: 795px;
         height: 360px;
         border: 1px solid rgba(0, 166, 255, 0.2);
         /*background-color: rgba(255,255,255,0.055);*/
         /*box-shadow: 0 8px 6px -6px #444;*/
         }
         .chart-container:after {
         content:"";
         position: absolute;
         top: -15px;
         left: -8px;
         height: 15px;
         width: 800px;
         /*background-color: rgba(255,255,255,0.055);*/
         -moz-transform: skew(45deg);
         -o-transform: skew(45deg);
         -webkit-transform: skew(45deg);
         transform: skew(45deg);
         }
         .chart-container > table {
         position: absolute;
         top: 0;
         left: 0;
         z-index: -999;
         width: 100%;
         height: 100%;
         }
         .chart-container table  tr  td {
         width: 100px;
         height: 98x;
         /*border: 1px solid rgba(0, 166, 255, 0.2);*/
         }
        .one-text{
            font-size: 1.1vw;
            line-height: 7vw;
            letter-spacing: 0.3vw;
            color: rgb(0, 135, 255);
            display: block;
            position: absolute;
            text-align: left;
            /*text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.15);*/
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 1px 0 #bbbbbb, 0 2px 0 #b9b9b9, 0 1px 0 #aaaaaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.15);
            /*text-shadow: 0 2px 1px #f6f6f6, 0 3px 0 #efefef, 0 4px 0 #e9e9e9, 0 5px 0 #e3e3e3, 0 6px 0 #ddd, 0 7px 0 #d7d7d7, 0 8px 0 #d1d1d1, 0 10px 10px rgba(170, 170, 170, 0.4);*/
            z-index: 100;
            width: auto;
            left: -23px;
            top: -100px
         }
         .two-text{
            font-size: 1.1vw;
            line-height: 7vw;
            letter-spacing: 0.3vw;
            color: #FF4800;
            display: block;
            position: absolute;
            text-align: left;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 1px 0 #bbbbbb, 0 2px 0 #b9b9b9, 0 1px 0 #aaaaaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.15);
            z-index: 100;
            width: auto;
            left: -23px;
            top: -100px
         }
         .three-text{
            font-size: 1.1vw;
            line-height: 7vw;
            letter-spacing: 0.3vw;
            color: #2C4FFF;
            display: block;
            position: absolute;
            text-align: left;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 1px 0 #bbbbbb, 0 2px 0 #b9b9b9, 0 1px 0 #aaaaaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.15);
            z-index: 100;
            width: auto;
            left: -23px;
            top: -100px
         }
         .four-text{
            font-size: 1.1vw;
            line-height: 7vw;
            letter-spacing: 0.3vw;
            color: #006971;
            display: block;
            position: absolute;
            text-align: left;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 1px 0 #bbbbbb, 0 2px 0 #b9b9b9, 0 1px 0 #aaaaaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.15);
            z-index: 100;
            width: auto;
            left: -23px;
            top: -100px
         }
         .five-text{
            font-size: 1.1vw;
            line-height: 7vw;
            letter-spacing: 0.3vw;
            color: #FF2CA1;
            display: block;
            position: absolute;
            text-align: left;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 1px 0 #bbbbbb, 0 2px 0 #b9b9b9, 0 1px 0 #aaaaaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.15);
            z-index: 100;
            width: auto;
            left: -23px;
            top: -100px
         }
         .bar-text{
            display: none;
         }
         .bar-text-two{
            display: none;
         }
          .bar-text-three{
            display: none;
         }
          .bar-text-four{
            display: none;
         }
          .bar-text-five{
            display: none;
         }
         .one:hover > .bar-text{
            display: block;
         }
         .two:hover > .bar-text-two{
            display: block;
         }
         .three:hover > .bar-text-three{
            display: block;
         }
         .four:hover > .bar-text-four{
            display: block;
         }
         .five:hover > .bar-text-five{
            display: block;
         }
         .meter {
         /*position: relative;
         top: 0px;
         left: -30px;
         height: 500px;
         width: 30px;
         background-color: rgba(20,113,163,0.5);
         border-left: solid 1px rgba(255,255,255,0.5);*/
         position: relative;
         top: -1px;
         height: 500px;
         border-left: solid 1px rgba(255,255,255,0.5);
         }
         .meter:before {
         content: "";
         position: absolute;
         top: -10px;
         left: -20px;
         width: 20px;
         height: 360px;
         /*background-color: rgba(14,81,117,0.9);*/
         background-color: rgba(0, 166, 255, 0.3);
         -moz-transform: skewY(45deg);
         -o-transform: skewY(45deg);
         -webkit-transform: skewY(45deg);
         transform: skewY(45deg);
         }
         .meter:after {
         content: "";
         position: absolute;
         top: -19px;
         left: -9px;
         /*width: 30px;*/
         width: 100%;
         height: 20px;
         background-color: rgba(0, 166, 255, 0.3);
         /*background-color: rgba(14,81,117,0.9);*/
         -moz-transform: skewX(45deg);
         -o-transform: skewX(45deg);
         -webkit-transform: skewX(45deg);
         transform: skewX(45deg);
         }
         .meter li {
         position: relative;
         list-style-type: none;
         height: 60px;
         /*border-bottom: solid 1px #0DABD9;*/
         border-bottom: solid 1px #006A895E;
         left: -40px;
         width: 105%;
         /*z-index: 100;*/
         }
         .meter li:before {
         /*content: "";
         position: absolute;
         top: -15px;
         left: -30px;
         width: 30px;
         height: 100%;
         border-bottom: solid 1px #0DABD9;
         -moz-transform: skewY(45deg);
         -o-transform: skewY(45deg);
         -webkit-transform: skewY(45deg);
         transform: skewY(45deg);*/
         content: "";
         position: absolute;
         top: -8px;
         left: -20px;
         width: 20px;
         height: 100%;
         border-bottom: solid 1px #0DABD9;
         -moz-transform: skewY(45deg);
         -o-transform: skewY(45deg);
         -webkit-transform: skewY(45deg);
         transform: skewY(45deg);
         }
         .meter li:last-child {
         border-bottom: none;
         }
         .meter li:last-child:before {
         border: 0;
         }
         .meter li div {
         position: absolute;
         left: -105px;
         top: -30px;
         padding: 55px 0 0;
         width: 80px;
         color: #000;
         text-align: right;
         font-weight: 300;
         font-size: 16px;
         line-height: 27px;
         text-transform: uppercase;
         }
         /* ---------------------
         Vertical Bars
         ----------------------*/
         .bar {
         float: left;
         position: absolute;
         bottom: 3px;
         z-index: 99;
         height: 35%;
         width: 40px;
         margin: 0 55px;
         cursor: pointer;
         /*background-color: rgba(107,255,49,0.6);*/
         }
         .bar:before {
         content: "";
         position: absolute;
         left: -15px;
         bottom: 7px;
         height: 100%;
         width: 15px;
         /*background-color: rgba(107,255,49,0.25);*/
         background-color: rgba(0, 166, 255, 0.3);
         -webkit-transform: skewY(45deg);
         }
         .bar:after {
         content: "";
         position: absolute;
         top: -15px;
         left: -8px;
         width: 40px;
         height: 15px;
         /*background-color: rgba(107,255,49,0.45);*/
         background-color: rgba(0, 166, 255, 0.5);
         -moz-transform: skewX(45deg);
         -o-transform: skewX(45deg);
         -webkit-transform: skewX(45deg);
         transform: skewX(45deg);
         }
         .one {
         height: 0%;
         animation-name: m1-limit;
         animation-duration: 1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in-out;
         }
         .one:before{
             background-color: rgba(0, 166, 255, 0.8);
         }
         .one:after{
             background-color: rgba(0, 166, 255, 0.6);
         }
         @keyframes m1-limit {
         from {height: 0%;}
         to {height: 35.5%;}
         }
         .two {
         left: 20%;
         height: 0%;
         animation-name: m2-limit;
         animation-duration: 1s;
         animation-fill-mode: forwards;
         animation-delay: 1s;
         animation-timing-function: ease-in-out;
         background-color: rgba(244, 115, 64, 1);
         }
         .two:before{
             background-color: rgba(244, 115, 64, 0.8);
         }
         .two:after{
             background-color: rgba(244, 115, 64, 0.6);
         }
         @keyframes m2-limit {
         from {height: 0%;}
         to {height: 46.5%;}
         }
         .three {
         left: 40%;
         height: 0%;
         animation-name: m3-limit;
         animation-duration: 1s;
         animation-fill-mode: forwards;
         animation-delay: 2s;
         animation-timing-function: ease-in-out;
         background-color: rgba(81, 107, 235, 1);
         }
         .three:before{
             background-color: rgba(81, 107, 235, 0.8);
         }
         .three:after{
             background-color: rgba(81, 107, 235, 0.6);
         }
         @keyframes m3-limit {
         from {height: 0%;}
         to {height: 55%;}
         }
         .four {
         left: 60%;
         height: 0%;
         animation-name: m4-limit;
         animation-duration: 1s;
         animation-fill-mode: forwards;
         animation-delay: 3s;
         animation-timing-function: ease-in-out;
         background-color: rgba(53, 133, 139, 1);
         }
         .four:before{
             background-color: rgba(53, 133, 139, 0.8);
         }
         .four:after{
             background-color: rgba(53, 133, 139, 0.6);
         }
         @keyframes m4-limit {
         from {height: 0%;}
         to {height: 60.5%;}
         }
         .five {
         left: 80%;
         height: 0%;
         animation-name: m5-limit;
         animation-duration: 1s;
         animation-fill-mode: forwards;
         animation-delay: 4s;
         animation-timing-function: ease-in-out;
         background-color: rgba(255, 102, 187, 1);
         }
         .five:before{
             background-color: rgba(255, 102, 187, 0.8);
         }
         .five:after{
             background-color: rgba(255, 102, 187, 0.6);
         }
         @keyframes m5-limit {
         from {height: 0%;}
         to {height: 69.5%;}
         }
         .six {
         left: 100%;
         height: 0%;
         }
         .seven {
         left: 75%;
         height: 15%;
         }
         .eight {
         left: 87.5%;
         height: 32%;
         }
        #chartdiv {
          width: 100%;
          height: 65vh;
          margin-bottom: -90px;
        }
        tspan{
            font-size: 16px !important;
            display: none;
        }
        polyline{
            display: none;
        }
        [role="switch"]{
            display: none;
        }
        [role="tooltip"] tspan{
            display: block;
        }
        .row-year{
            /*left: 44px;*/
            margin: 0px 0px 0px 200px;
            color: #000 !important;
            font-size: 16px !important;
            position: relative;
        }
        @media only screen and (max-width: 500px) {
            .chart-container{
                width: 333px;
                left: 10px;
            }
            .meter li div{
                font-size: 14px;
                left: -65px;
                color: #494949;
                top: -10px;
            }
            .row-year{
                margin: 0px 0px 0px 20px;
            }
            .two{
                left:18%;
            }
            .three{
                left:36%;
            }
            .four{
                left:54%;
            }
            .five{
                left:72%;
            }
            .base{
                width: 325px;
            }

            .right-base {
                transform: rotate(90deg) skew(-45deg);
                transform-origin: 94% 0 0;
                bottom: -1px;
                width: 363px;
             }
            .bar{
                margin: 0 35px;
            }
            .columnT{
                width: 18.5%;
            }
            .row-year{
                left: 34px;
            }
            #chartdiv {
              height: 85vh;
            }
            tspan{
                font-size: 9px !important;
            }
        }
        .color-span{
            width: 20px;
            display: inline-block;
            height: 13px;
        }
        .fa-arrow-right::before {
            content: "\f0a4";
        }