.main_element{
    transform: translate(-180px, -160px);
}
.formula_svg{
    text-align: center;
}
.formula_svg .svg-content-responsive{
    width: 50%;
    height: 100%;
    display: inline-block;
    max-width: 400px;
}
.main_wrap{
    width: 94%;
    margin: 0 auto;
    display: block;
    max-width: 1540px;
    font-size: 0;
}
h1{
    font-size: 28px;
    font-weight: normal;
}
.svg-content-responsive{
	width: 100%;
	height: 100%;
	display: inline-block;
}
body { font: 12px Arial;}
*{
    user-select: none
}
path { 
    stroke: steelblue;
    stroke-width: 4;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 3;
    shape-rendering: crispEdges;
}
.formula_svg{
    margin: 0 0 30px 0;
}
.main_svg_wrap,
.second_svg_wrap{
    font-size: 0;
    margin: 0 0 50px 0;
}
.main_svg,
.second_svg,
.buttons,
.buttons_wrap{
    width: 75%;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.third_svg,
.fourth_svg{
    font-size: 26px;
}
.buttons,
.buttons_wrap{
    width: 25%;
}
.main-second-line{
    stroke: red;
}
.buttons label,
.buttons input,
.type_changer,
.buttons_wrap label,
.buttons_wrap input{
    cursor: pointer;
}
.buttons .radio_buttons,
.buttons_wrap .radio_buttons,
.buttons_wrap .checkbox_buttons{
    display: block;
    margin: 0 0 5px 0;
}
.x_title,
.y_title{
    font-size: 35px;
}
.line-1,
label[for=graph_1]{
    stroke: #fe3aa6;
    color: #fe3aa6;   
}
.line-2,
label[for=graph_2]{
    stroke: #9ed112;
    color: #9ed112;

}
.line-3,
label[for=graph_3]{
    stroke: #ff8100;
    color: #ff8100;

}
.line-4,
label[for=graph_4]{
    stroke: #179067;
    color: #179067;

}
.line-5,
label[for=graph_5]{
    stroke: #486eaf;
    color: #486eaf;

}
.line-6,
label[for=graph_6]{
    stroke: #ede604;
    color: #ede604;   
}
.line-7,
label[for=graph_7]{
    stroke: #cc42a2;
    color: #cc42a2;

}
.line-8,
label[for=graph_8]{
    stroke: #9f49ac;
    color: #9f49ac;

}
.line-9,
label[for=graph_9]{
    stroke: #ff5800;
    color: #ff5800;

}
.line-10,
label[for=graph_10]{
    stroke: #50b517;
    color: #50b517;

}
.line-11,
label[for=graph_11]{
    stroke: #ff1343;
    color: #ff1343;

}
.line-12,
label[for=graph_12]{
    stroke: #019f9e;
    color: #019f9e;

}
.tooltip{
    position: absolute;
    background: rgba(0,0,0,0.5);
    color: yellow;
    font-size: 14px;
    padding: 7px;
    border-radius: 5px;
    width: auto !important;
    text-align: center;
    display: none; 
}
.all-line-second.hide,
.second_g_check,
.checkbox_wrap,
.second_g_check .main-second-line,
.hidden{
    display: none;
}
.second_g_check .DCM{
    display: inline;
}


.Acetone,
label[for=Acetone],
label[for=check_Acetone]{
    stroke: #fe3aa6;
    color: #fe3aa6;   
}
.Acetonitrile,
label[for=Acetonitrile],
label[for=check_Acetonitrile]{
    stroke: #FFE293;
    color:  #FFE293;   
}
.Benzene,
label[for=Benzene],
label[for=check_Benzene]{
    stroke: #51008A;
    color:  #51008A;   
}
.BuOH,
label[for=BuOH],
label[for=check_BuOH]{
    stroke: #72B726;
    color:  #72B726;
}
.CCl4,
label[for=CCl4],
label[for=check_CCl4]{
    stroke: #3C00D0;
    color:  #3C00D0;
}
.DCM,
label[for=DCM],
label[for=check_DCM]{
    stroke:#57A4D4;
    color: #57A4D4;
}
.Dioxane,
label[for=Dioxane],
label[for=check_Dioxane]{
    stroke:#DD7873;
    color: #DD7873;
}
.DMF,
label[for=DMF],
label[for=check_DMF]{
    stroke:#DD213F;
    color:#DD213F;
}
.DMSO,
label[for=DMSO],
label[for=check_DMSO]{
    stroke:#FCDC04;
    color:#FCDC04;
}
.DOPC,
label[for=DOPC],
label[for=check_DOPC]{
    stroke:#DD5E98;
    color:#DD5E98;
}
.Et2O,
label[for=Et2O],
label[for=check_Et2O]{
    stroke:#FF4B00;
    color:#FF4B00;
}
.EtOAc,
label[for=EtOAc],
label[for=check_EtOAc]{
    stroke:#FF4BFF;
    color:#FF4BFF;
}
.EtOH,
label[for=EtOH],
label[for=check_EtOH]{
    stroke:#02FCE2;
    color:#02FCE2;
}
.MeOH,
label[for=MeOH],
label[for=check_MeOH]{
    stroke:#09F531;
    color:#09F531;
}
.Octanole,
label[for=Octanole],
label[for=check_Octanole]{
    stroke:#8C15B6;
    color:#8C15B6;
}
.PBS,
label[for=PBS],
label[for=check_PBS]{
    stroke:#707263;
    color:#707263;
}
.MF,
label[for=MF],
label[for=check_MF]{
    stroke:#B63C02;
    color:#B63C02;
}
.THF,
label[for=THF],
label[for=check_THF]{
    stroke:#0D12F1;
    color:#0D12F1;
}
.Toluene,
label[for=Toluene],
label[for=check_Toluene]{
    stroke:#00C68C;
    color:#00C68C;
}

.third_svg_wrap,
.fourth_svg_wrap{
    display: inline-block;
    width: 50%;
    font-size: 0;
    vertical-align: top;
}
.dot{
    cursor: pointer;
}
.third_svg_wrap path,
.fourth_svg_wrap path{
    stroke: black;
}



@media screen and (max-width: 980px) {
    h1{
        font-size: 18px;
    }
    .main_svg,
    .second_svg,
    .buttons,
    .buttons_wrap{
        width: 100%;
    }
    .buttons .radio_buttons,
    .buttons_wrap .radio_buttons,
    .buttons_wrap .checkbox_buttons{
        display: inline-block;
        margin: 0 5px 5px 0;
    }
    .third_svg_wrap,
    .fourth_svg_wrap{
        display: block;
        width: 100%;
        margin: 0 0 30px 0;
    }

    
}