body{
    margin:0 auto;
    font-family: 'Arial',sans-serif;
    overflow: hidden;
    
}

#slider_circle1:before, 
#slider_circle2:before, 
#slider_circle3:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
    background-color: rgba(0,0,0,0.01);
    border-radius: 50%;
}

.container{
  position: absolute;
    /*
    width: 1200px;
    height: 741px;
    //*/
    width: 900px;
    height: 600px;
    
    top: 0px;
    left: 0px;
    border: 1px solid black;
    background-color: #666666;
}

.top_Cont {
    height:25px;
    background-color: #dcdcdc;
    margin-bottom: 25px;
}



.dropdown_cont {
    float: right;
    margin: 0px 5px;
}


#dis_txt {
    position: relative;
    font-size: 14px;
    font-family: "Arial";
    color: white;
    display: inline-block;
}

.dropdown {
    position: relative;
    display: inline-block;
}


.dropbtn {
    color: white;
    font-size: 14px;
    border: none;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: default;
    background: rgb(255,255,255);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 6%, rgba(228,228,228,1) 53%, rgba(211,211,211,1) 59%, rgba(196,196,196,1) 88%, rgba(195,195,195,1) 94%, rgba(190,190,190,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 6%,rgba(228,228,228,1) 53%,rgba(211,211,211,1) 59%,rgba(196,196,196,1) 88%,rgba(195,195,195,1) 94%,rgba(190,190,190,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 6%,rgba(228,228,228,1) 53%,rgba(211,211,211,1) 59%,rgba(196,196,196,1) 88%,rgba(195,195,195,1) 94%,rgba(190,190,190,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bebebe',GradientType=0 );
}

.ddtxt {
    position: relative;
    display: inline-block;
    padding: 2px 0px;
    padding-left: 5px;
    width: 100px;
    vertical-align: top;
    color: #000;
    font-family: 'Arial';
    border-right: 1px solid #000;
}
.arrow {
    position: relative;
    display: inline-block;
    background-image: url(../images/arw.png);
    width: 20px;
    height: 16px;
    position: relative;
    background-size: 75%;
    left: 2px;
    background-repeat: no-repeat;
    vertical-align: bottom;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 124px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow: auto;
    z-index: 10;
    border: 1px solid #000;
}
.dropdown-content div {
    color: #000;
    position: relative;
    font-size: 14px;
    padding: 2px 0px;
    padding-left: 5px;
    cursor: default;
    outline: 0px;
}
.select {
    background-color: #a8c6ee !important;
}


.slider_Title {
    text-align: center;
    color: #f7b637;
    display: block;
    position: relative;    
    margin-top: 90px;
    font-size: 21px;
}

.distUnits {
    display: inline-block;
    width: 38px;
    background-color: #666666;
    border: none;
    color: #ffbc00;
    font-size: 19px;
}

.dist {
     display: inline-block;
}
.dropdown-content div:hover{
    background-color: #cedbef;
}





.dropbtn:hover {
    background: rgb(205,206,206);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkY2VjZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjYmRiZmJmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYjViN2I3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTYlIiBzdG9wLWNvbG9yPSIjOWU5ZmEwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTQlIiBzdG9wLWNvbG9yPSIjOGY5MDkxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzllOWZhMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(205,206,206,1) 0%, rgba(189,191,191,1) 6%, rgba(181,183,183,1) 50%, rgba(158,159,160,1) 56%, rgba(143,144,145,1) 94%, rgba(158,159,160,1) 100%);
background: -webkit-linear-gradient(top,  rgba(205,206,206,1) 0%,rgba(189,191,191,1) 6%,rgba(181,183,183,1) 50%,rgba(158,159,160,1) 56%,rgba(143,144,145,1) 94%,rgba(158,159,160,1) 100%);
background: linear-gradient(to bottom,  rgba(205,206,206,1) 0%,rgba(189,191,191,1) 6%,rgba(181,183,183,1) 50%,rgba(158,159,160,1) 56%,rgba(143,144,145,1) 94%,rgba(158,159,160,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcece', endColorstr='#9e9fa0',GradientType=0 );}

.slider_scale1 {
    width: 600px;
    background-color: #cacaca;
    height: 3px;
    position: relative;
    border-top: 1px solid black;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
}

.bluemass {
    display: inline-block;    
    position: relative;
}



.redmass {
    display: inline-block;    
    position: relative;
}

.redvalue {
    display: inline-block;
}

.slider1 {
    width: 100%;
    height: 70px;
    text-align: center;
}

.blueTxt {
    width: 100px;    
    position: relative;
    left: -50%;
    display: block;
    font-weight: bold;
    color: #0099ff;
    text-align: center;    
    margin-bottom: 5px;
}

.redTxt {
    width: 100px;    
    position: relative;
    left: -50%;
    display: block;
    font-weight: bold;
    color: #ff0000;
    text-align: center;    
    margin-bottom: 5px;
    
}

.slider_scale2 {
    width: 100px;
    background-color: #cacaca;
    height: 3px;
    position: relative;    
    border-top: 1px solid black;
    border-radius: 2px;
    left: -50%;
    margin-bottom: 10px;
}

.slider_scale3 {
    width: 100px;
    background-color: #cacaca;
    height: 3px;
    position: relative;    
    border-top: 1px solid black;
    border-radius: 2px;
    left: -50%;
    margin-bottom: 10px;
}

.blueMass {
    /*
    position: relative;
    width: 100px;
    height: 103px;
    background-size: 100%;
    background-image: url(../images/bluemass.png);
    background-repeat: no-repeat;
    display: inline-block;
    right: -163px;
    */
}

.redMass {
    /* 
    position: relative;
    left: 384px;
    width: 100px;
    height: 103px;
    background-size: 100%;
    background-image: url(../images/redmass.png);
    background-repeat: no-repeat;
    display: inline-block;
    */
}

.slider2 {
    width: 100%;
    height: 33px;;
}

.redup {    
    position: absolute;    
    border: 1px solid #FFBC00;
    background-color: #FFBC00;
    width: 8px;
    height: 44px;
    z-index: 1;
    display: inline-block;
    top: 34px;
    left: -4px;
}

.blueup {
    position: absolute;    
    border: 1px solid #FFBC00;
    background-color: #FFBC00;
    width: 8px;
    height: 44px;
    z-index: 1;
    display: inline-block;
    top: 34px;
    left: -4px;
}

.yellowLine {
    position: absolute;
    /*top: 268px;
    left: 397px;*/
    top: 217px;
    left: 146px;
    border: 1px solid #FFBC00;
    background-color: #FFBC00;
    width: 307px;
    height: 6px;
    z-index: 1;
}

.redarrow {
    position: relative;
/*    right: -22px;*/
    width: 160px;
    height: 11px;
    background-size: 100% 100%;
    background-image: url(../images/redmain.png);
    background-repeat: no-repeat;
    display: inline-block;
/*    bottom: -18px;*/
    float: left;
    
}

.redpointer {
    position: relative;
/*    right: -58px;*/
    width: 32px;
    height: 30px;
    background-size: 100% 100%;
    background-image: url(../images/redarrow.png);
    background-repeat: no-repeat;
    top: -9px;
    display: inline-block;
/*    margin-left: 4px;*/
}

.bluearrow {    
    position: relative;
/*    right: -22px;*/
    width: 160px;
    height: 11px;
    background-size: 100% 100%;
    background-image: url(../images/bluemain.png);
    background-repeat: no-repeat;
    display: inline-block;
/*    bottom: -18px;*/
    float: right;
}

.bluepointer {
    position: relative;
    /* left: 245px; */
    top: -9px;
    width: 32px;
    height: 30px;
    background-size: 100% 100%;
    background-image: url(../images/bluearrow.png);
    background-repeat: no-repeat;
    transform: rotate(-180deg);
    display: inline-block;
    float: right;
}

.blueUnits {
    color: #148EE0;
    width: 190px;
/*    left: 304px;*/
    position: relative;
    display: inline-block;
/*    top: 45px;*/
    top: -10px;
    font-weight: bold;
    text-align: right;
}

.redUnits {
    color: #E01414;
    width: 190px;
/*    right: -121px;*/
    position: relative;
    display: inline-block;
/*    top: 45px;*/
    font-weight: bold;
    top: -10px;
    left: 10px;
}

#slider_circle1 {
        width: 8px;
    height: 8px;
    background-color: #e9e9e9;
    box-shadow: 0 0 2px rgba(0,0,0,0.6);
    border-radius: 14px;
    top: -3px;
    left: 300px;
    position: relative;
    cursor: pointer;
    border: 1px solid #000000;
}

#slider_circle2 {
    width: 8px;
    height: 8px;
    background-color: #e9e9e9;
    box-shadow: 0 0 2px rgba(0,0,0,0.6);
    border-radius: 14px;
    top: -3px;
    left: 43px;
    position: relative;
    cursor: pointer;
    border: 1px solid #000000;
}

#slider_circle3 {
    width: 8px;
    height: 8px;
    background-color: #e9e9e9;
    box-shadow: 0 0 2px rgba(0,0,0,0.6);
    border-radius: 14px;
    top: -3px;
    left: 43px;
    position: relative;
    cursor: pointer;
    border: 1px solid #000000;
}

.slide_txt2 {
    display: inline-block;
    width: 38px;
    background-color: #666666;
    border: none;
    color: #148ee0;
    font-size: 19px;
}

.slide_txt3 {
    display: inline-block;
    width: 38px;
    background-color: #666666;
    border: none;
    color: #ff0000;
    font-size: 19px;
}

.slide_txt1 {
    display: inline-block;
    width: 38px;
    background-color: #666666;
    border: none;
    color: #ffbc00;
    font-size: 19px;
}

.innerwidth {
/*    margin-left: 175px;*/
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

#blue {
    position: relative;
    width: 100%;
    background-image: url(../images/bluemass.png);
    background-repeat: no-repeat;
    display: inline-block;    
    left: -50%;
    height: 100%;
    background-size: 100% 100%;
}

#red {    
    position: relative;
    width: 100%;
    background-image: url(../images/redmass.png);
    background-repeat: no-repeat;
    display: inline-block;    
    left: -50%;
    height: 100%;
    background-size: 100% 100%;
}

.red_arrow {
    width: 200px;
    position: relative;
    top: 14px;
    display: inline-block;
    left: -100px;    
}

.blue_arrow {
    /*
    width: 250px;
    position: relative;
    top: 30px;
    left: 133px; 
    display: inline-block;    
    */
    width: 200px;
    position: relative;
    top: 14px;
    display: inline-block;
    left: -100px;   
    
}

.arrow2 {
    position: relative;
    display: block;
    top:25px;
}

.bluePartContainer {
    position: absolute;
    left: 100px;
    width: 100px;
}

.redPartContainer {
    position: absolute;
    left: 700px;
    width: 100px;
}

.blueBall {
    width: 100px;
    height: 100px;
    position: relative;
}

.redBall {
    width: 100px;
    height: 100px;
    position: relative;
}