@font-face {
	font-family: 'Arial';
	src: url('../fonts/arial/arialmt.eot');
	src: url('../fonts/arial/arialmt.eot?#iefix') format('embedded-opentype'),
		url('../fonts/arial/arialmt.woff2') format('woff2'),
		url('../fonts/arial/arialmt.woff') format('woff'),
		url('../fonts/arial/arialmt.ttf') format('truetype'),
		url('../fonts/arial/arialmt.svg#ArialMT') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
    overflow: hidden;
    margin: 0px;
    cursor: default;
    font-family:'Arial';
	font-size: 12px;
}

.main_container {
    position: absolute;
    border: 1px solid black;
    width: 800px;
    height: 600px;
    background-color: #dcdcdc;
}

.container_1 {
    height: 570px;
    margin-top: 30px;  
    background-color: #666666;
}

.container_2 {
    border: 1px solid;
    width: 270px;
    height: 420px;
    position: absolute;
    background-color: #dcdcdc;
    top: 100px;
    left: 50px;
    -webkit-box-shadow: 0px 10px 13px 8px #4E4E4E;
    -moz-box-shadow: 0px 10px 13px 8px #4E4E4E;
    box-shadow: 0px 10px 13px 8px #4E4E4E;
}

.heading {
    font-size: 12px;
    color: black;
    padding: 7px;
}

.container_3 {
    background-color: #666666;
    margin-top: 0px;
    height: 392px; 
}

.txt {
    color: white;
    font-size: 12px;
}

.mass_prop {
    display: inline-block;
    padding: 15px;
}

.value_pos {
    width: 90px;
    position: relative;
    top: -18px;
    left: 75px;
}

.mass_unit {
    position: absolute;
    left: 192px;
    top: 44px;
}


.line_1 {
    position: absolute;
    left: 7px;
    top: 70PX;
}



.input_force {
    display: inline-block;
    padding: 15px;
}

.ip_txt {
        margin-top: -25px;
}

.xvalue_pos {
    width: 51px;
    margin-top: 5px;
}
.yvalue_pos {
    width: 51px;
    margin-top: 5px;
    margin-left: 5px;
}
::-webkit-input-placeholder {
   font-style: italic;
}
:-moz-placeholder {
   font-style: italic;  
}
::-moz-placeholder {
   font-style: italic;  
}
:-ms-input-placeholder {  
   font-style: italic; 
}

.btn {
    border: 1px solid black;
    border-radius: 4px;
    background-color: #dcdcdc;
    position: absolute;
}

.show_btn {
    position: absolute;
    left: 165px;
    top: 102PX;
    width: 60px;
    height: 15px;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
}

.line_2 {
    position: absolute;
    left: 7px;
    top: 135PX;
}

.show_btn:hover,th:hover,.add_btn:hover,.clr_btn:hover {
    opacity: 0.7;
    
}

.all_txt {
    position: absolute;
    padding-top: 10px;
    padding-left: 15px;
}
table {
    border-width: 2px;
    border-style: solid;
    border-color: #696969;
    border-collapse: collapse;
}

table td {
    border-width: 1px;
    border-style: solid;
    border-color: #E6E6E6;
     background-color: white;
    height: 20px;
}

table th {
    border: 1px;
    border-style: solid;
    border-color: #696969;
    background-color: #DDDDDD;
    cursor: col-resize;
    width: 111px;
}

table th.resizing {
    cursor: col-resize;
}

.noCrsr {
    margin-right: +5px;
    cursor: default;
    height: 17px;
    text-align: left;
    padding-left: 10px;

}

.table {
    height: 116px;
    width: 215px;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
/*    padding-top: 5px;*/
    left: 15px;
    top: 165px;
}

.clr_btn {
    width: 105px;
    height: 17px;
    left: 130px;
    text-align: center;
    top: 290px;
    padding-top: 3px;
}

.add_btn {
    width: 105px;
    height: 17px;
    left: 15px;
    text-align: center;
    top: 290px;
    padding-top: 3px;
}

.g_txt {
    color: #6beb8b;
}

.b_txt {
    color: #3699ff;
}

.txt_frce {
    position: absolute;
    left: 15px;
    top: 320px;
}

.frce_value {
    position: absolute;
    left: 15px;
    top: 340px;    
}

.line_3 {
    position: absolute;
    left: 15px;
    top: 360px;
}

.txt_acctn {
    position: absolute;
    left: 15px;
    top: 367px;
}

.acctn_value {
    position: absolute;
    left: 15px;
    top: 385px;
}

.main_img {
    position: absolute;
    left: 415px;
    top: 240px;
    width: 201px;
    height: 201px;
    background-image: url("../images/2.jpg");
}

.shape1 {
    background-image: url(../images/9.png);
    width: 0px;
    height: 6px;
    display: inline-block;
    vertical-align: top;
    top: 6px;
    position: relative;
        
}

.arrow1 {
    background-image: url(../images/13.png);
    width: 19px;
    height: 19px;
    background-size: 100%;
    display: inline-block;
}

.shape2 {
    background-image: url(../images/21.png);
    width: 0px;
    height: 6px;
    display: inline-block;
    vertical-align: top;
    top: 6px;
    position: relative;
}

.arrow2 {
    background-image: url(../images/17.png);
    width: 19px;
    height: 19px;
    background-size: 100%;
    display: inline-block;
}

#show1 {
    top: 203px;
    left: 216px;
    cursor: pointer;
    z-index: 10;
}

#add1 {
    top: 391px;
    z-index: 10;
    left: 66px;
    cursor: pointer;
}

#clear1 {
    top: 391px;
    left: 181px;
    z-index: 10;
    cursor: pointer;
}

#show1:hover, #add1:hover, #clear1:hover {
    opacity: 1;
}

div#xyvalue {
    top: 196px;
    left: 66px;
    position: absolute;
    z-index: 10;
}