@font-face {
    font-family: Montserrat;
    src: url("/static/cms_plugins/animation_v2/svg/MONTSERRAT-LIGHT.OTF") format("opentype")
}

@font-face {
    font-family: Montserrat-ExtraBold;
    src: url("/static/cms_plugins/animation_v2/font/MONTSERRAT-BOLD.OTF") format("opentype")
}

@font-face {
    font-family: montserrat_light;
    src: url("/static/cms_plugins/animation_v2/svg/MONTSERRAT-LIGHT.OTF") format("opentype")
}

@font-face {
    font-family: montserrat_bold;
    src: url("/static/cms_plugins/animation_v2/font/MONTSERRAT-BOLD.OTF") format("opentype")
}

#tritorsion_base_2 {
    fill: rgb(253, 198, 0);
    stroke: red;
}

#osft_img {
    margin: auto;
}

.user_selection {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    /* bottom: 0vh; */
    z-index: 9999;
    /* margin-right: 50px; */
    /* margin-top: 50px; */
}

.skin-div {
    display: none;
    margin-bottom: 4px;
    z-index: 17;
    background-color: #F6F6F6;
    height: 0px;
    opacity: 0;
    transition: opacity 100ms 250ms, height 300ms 00ms;

}

.skin-div p {
    color: #1a1a1a;
}

.skin-div.opens {
    display: flex;
    padding: 4px;
    flex-direction: column;
}

.skin-div.opens.grow {
    opacity: 1;
}

.skin-div-child-toggler+.skin-div-child-content {
    display: none;
}

.skin-div-child-toggler.opens+.skin-div-child-content {
    display: flex;
}

.skin-div-child-toggler.opens img {

    transform: rotate(90deg);
}

.skin-div-child-toggler img {

    transition: transform 200ms;
}

.skin-div-old {
    position: absolute;
    bottom: 75px;
    display: none;
    padding: 4px;
    flex-wrap: wrap;
    justify-content: end;
    margin-bottom: 4px;
    background-color: rgba(128, 128, 128, 0.9);
    border-radius: 8px;
    z-index: 17;
}

.skin-div-old.opens {
    border: 1px solid white;
    display: flex;
}

.skin-div-old.opens:hover {
    background-color: rgba(128, 128, 128, 1);
}

.skin-div-tabs {
    padding: 0px 4px;
    opacity: .5;
    cursor: pointer;
    border-bottom: none;
    font-size: clamp(.7rem, 1.5vw, 3rem)
}

.skin-div-tabs.active {
    opacity: 1;
    border-bottom: 2px solid red;
}

.skin-div-content {
    display: none;
}

.skin-div-content.active {
    display: flex;
    font-size: clamp(.5rem, 1.5vw, 3rem);
    align-items: flex-start;
}

#color_content>div {
    height: fit-content;
}

#color_content input[type="color"] {
    border-radius: 8px;
    outline: none;
    border: 0px solid white;
}

.style-items {
    width: 100%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0);
    width: 25px;
    height: 25px;
}

.style-items.active {
    border: 1px solid #d30303;
    transition: border .3s;
}

.button-inputs-div {
    cursor: pointer;
}

.button-inputs-div img,
.button-inputs-div p {
    opacity: .7;
}

.button-inputs-div:hover img,
.button-inputs-div:hover p {
    opacity: 1;
}

.button-inputs-div.active img,
.button-inputs-div.active p {
    opacity: 1;
}

.button-inputs-div.active {
    background-color: #999999;
}

.btm-skin-toggler {
    cursor: pointer;
    background-color: #E30613;
    border-radius: 30px;
    width: 100px;
}

.btm-skin-toggler:hover {
    background-color: #d30714;
    transition: opacity .3s;
}

.btm-skin-toggler p {
    font-size: clamp(.7rem, 1.8vw, 1rem);
    line-height: 1;
    text-align: center;
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    /* color: white; */
    /* font-size: 16px; */
}


.green-text {
    color: #008D36;
}

.black-text {
    color: black;
}

#bgimg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body input {
    background: #f000;
}

#table_values tr {
    /* border: 2px solid #055778; */
    /* border-collapse:collapse; */
    /* background-color: #5e5d5dbd; */
}

.btm-info {
    padding-left: 8px;
    font-size: .75rem;
}

.img-overlay-wrap {
    position: relative;
    display: inline-block;
    transition: transform 150ms ease-in-out
}

.img-overlay-wrap img {
    display: block;
    max-width: 100%;
    height: auto
}

.img-overlay-wrap svg {
    position: absolute;
    top: 0;
    left: 0
}

.img-overlay-wrap:hover {
    transform: rotate(15deg)
}

#graph {
    /*position: absolute;*/
    z-index: 2;
    margin: 0 auto;
    overflow: hidden
}

#SVG {
    /*background-color: green;*/
    /* height: 100%; */
    width: 100%;
    margin: 0 auto;
    display: flex;
    font-size: 16.45px
}

#gif_area {
    position: absolute;
    z-index: 16;
    text-align: center;
    display: none
}

#load_area {
    position: absolute;
    z-index: 15;
    max-resolution: auto
}

#svg_container {
    width: 400px;
    background: blue
}

.load_img {
    /*position: absolute;*/
    width: 50px;
    height: 30px
}

.tload_img {
    width: 60px;
    height: 60px
}

@media (min-width: 200px) {
    .tload_img {
        width: 150px;
        height: 150px
    }
}

/* @media (min-width: 400px) {
    .tload_img {
        width: 80px;
        height: 80px
    }
  }
  @media (min-width: 700px) {
    .tload_img {
        width: 60px;
        height: 60px
    }
  } */
.load_img_png {
    /*position: absolute;*/
    width: 6em;
    height: 6em
}

.hide_img {
    display: none
}

#button_area1 {
    font-family: montserrat_light;
    z-index: 35;
    margin-left: auto;
    margin-right: auto;
    top: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
}

#button_area1>div {
    padding: 8px;
}

#button_area1 input {
    border-radius: 15px
}

#button_area1 {
    /* font-size: 2px; */
}

#parent-to-user-selection {
    margin-top: -150px;
}

#Layer_1 {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    transform: translate(47%, -47%);
}

@media(min-width: 200px) {

    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 100%;
        display: block
    }

    .responsive_grid_2 {
        width: 100%;
        display: block;
        margin-top: 40px
    }

    .m-item3 {
        width: 95%;
        padding: 4px;
        margin: auto;
    }

    #parent-to-user-selection {
        margin-top: -0px;
    }

    /* #button_area1 {
        font-size: 10px
    }

    .btm-skin-toggler img {
        max-height: 25px;
    }

}

@media(min-width: 300px) {
    #color_content input {
        height: 20px;
    }

    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 100%;
        display: block
    }

    .responsive_grid_2 {
        width: 100%;
        display: block;
        margin-top: 45px
    }

    /* #button_area1 {
        font-size: 10px
    } */

    .m-item0 {
        height: auto;
    }

    .m-item1 {
        display: flex;
        text-align: center;
        justify-content: center;
        width: 100%;
        height: auto;
    }

    .m-item2 {
        width: 100%;
        height: auto;
    }

    .m-item2.s-view {
        width: 90%;
    }



    .parents-of-items {
        display: flex;
        flex-wrap: wrap;
        max-width: 75vh
    }

    #parent-to-user-selection {
        justify-content: end;
        min-height: 100px;
    }

    .btm-skin-toggler {
        width: 120px !important;
    }

    #form_t td {
        font-size: .5rem;
    }

    .header_calc.parag {
        font-size: .7rem;
    }

    #table_values td,
    th {
        padding: 1px;
    }

    #spring_table {
        padding: 1px;
    }

    #osft_img {
        max-width: 80px;
        max-height: 80px;
    }

    #bgimg {
        aspect-ratio: 3/4;
        max-width: 75vh
    }

    .para-normal-font {
        font-weight: 600;
    }

}

@media(min-width: 300px) {
    .m-item3 {
        width: 95%;
        padding: 4px;
        margin: auto;
    }
}

@media(min-width: 400px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 100%;
        display: block
    }

    .responsive_grid_2 {
        width: 100%;
        display: block;
        margin-top: 45px
    }

    /* #button_area1 {
        font-size: 12px
    } */
    #form_t td {
        font-size: .6rem;
    }

    .header_calc.parag {
        font-size: .8rem;
    }

    #osft_img {
        max-width: 100px;
        max-height: 100px;
    }

    .m-item3 {
        width: 95%;
        padding: 4px;
        margin: auto;
    }
}

@media(min-width:500px) {
    #color_content input {
        height: 30px;
    }

    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 100%;
        display: block
    }

    .responsive_grid_2 {
        box-sizing: border-box;
        width: 100%;
        display: block;
        margin-top: 50px
    }

    /* 
    #button_area1 {
        font-size: 12px
    } */

    /* .btm-skin-toggler img {
        max-height: 45px;
    } */
    #osft_img {
        max-width: 120px;
        max-height: 120px;
    }

    .para-normal-font {
        font-weight: 800;
    }
}

@media(min-width:650px) {
    #color_content input {
        height: 35px;
    }

    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 55%;
        display: block
    }

    .responsive_grid_2 {
        width: 40%;
        margin-right: 5%;
        display: block
    }

    /* #button_area1 {
        font-size: 10px
    } */
    #form_t td {
        font-size: .6rem;
        line-height: 1;
        margin-bottom: 0px;
    }

    .header_calc.parag {
        font-size: .8rem;
    }

    #osft_img {
        max-width: 125px;
        max-height: 125px;
    }
}

@media(min-width:700px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 55%;
        display: block
    }

    .responsive_grid_2 {
        width: 40%;
        margin-right: 5%;
        display: block
    }

    /* #button_area1 {
        font-size: 11px
    } */

    .m-item0 {
        height: 27vh;

    }

    .m-item1 {
        height: 6vh;

    }

    .m-item2 {
        width: 55%;
        height: 47vh;

    }

    .m-item2.s-view {
        width: 66%;
        height: 47vh;

    }

    .m-item3 {
        margin: 0 auto;
        width: 45%;
        padding: 8px;
        margin-top: 16px;
    }

    /* .user_selection {
        bottom: 0vh;
    } */




    #spring_table {
        padding: 4px;
    }

    #osft_img {
        max-width: 140px;
        max-height: 140px;
    }

    #bgimg {
        aspect-ratio: 4/3;
        max-width: 133vh
    }

    .parents-of-items {
        max-width: 133vh
    }
}

/* @media(min-width:768px){
    #table_values tr:not(:last-child){
        border-bottom: 2px solid;
        }
} */
@media(min-width:800px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 55%;
        display: block
    }

    .responsive_grid_2 {
        width: 40%;
        margin-right: 5%;
        display: block
    }

    /* #button_area1 {
        font-size: 12px
    } */

    /* .user_selection {
        bottom: 2vh;
    } */
    #form_t td {
        font-size: .7rem;
        line-height: 1;
    }

    .header_calc.parag {
        font-size: .9rem;
    }

    .btm-skin-toggler {
        width: 230px !important;
    }

    #Layer_1 {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 50px;
        height: 50px;
        transform: translate(47%, -47%);
    }
}

@media(min-width:900px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 60%;
        display: block
    }

    .responsive_grid_2 {
        width: 35%;
        margin-right: 5%;
        display: block
    }

    /* #button_area1 {
        font-size: 13px
    } */

    /* .user_selection {
        bottom: 5vh;
    } */
}

@media(min-width:1000px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 60%;
        display: block
    }

    .responsive_grid_2 {
        width: 35%;
        margin-right: 5%;
        display: block
    }

    #parent-to-user-selection {
        margin-top: -0px;
    }

    /* #button_area1 {
        font-size: 14px
    }
     */
    /* .user_selection {
        bottom: 7vh;
    } */
}

@media(min-width:1400px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 60%;
        display: block
    }

    .responsive_grid_2 {
        width: 35%;
        margin-right: 5%;
        display: block
    }

    #button_area1 {
        font-size: 15px
    }

    /* .user_selection {
        bottom: 10vh;
    } */
}

@media(min-width:1600px) {
    .responsive_grid {
        display: flex;
        flex-wrap: wrap
    }

    .responsive_grid_1 {
        width: 60%;
        display: block
    }

    .responsive_grid_2 {
        width: 35%;
        margin-right: 5%;
        display: block
    }

    #button_area1 {
        font-size: 15px
    }
}

/* @media screen and (min-width: 200px) {
    #button_area1 {
        font-size: 6px;
    }
}

@media screen and (min-width: 400px) {
    #button_area1 {
        font-size: 10px;
    }
}

@media screen and (min-width: 800px) {
    #button_area1 {
        font-size: 12px;
    }
} */


/* #para_torsion,
#para_compression,
#para_extension,
#para_conical {
    font-size: clamp(.7rem, 1vw, .8rem);
    margin-bottom: 0px;
    font-family: "Montserrat", sans-serif;
    line-height: 1.3;
}  */

/* #para_torsion b,
#para_compression b,
#para_extension b,
#para_conical b {
    font-size: clamp(.7rem, 1vw, .8rem);
    font-family: "Montserrat", sans-serif;
    ;
    margin-bottom: 0px;
    line-height: 1.3
} */



#clear {
    /* font-size: 1.25em; */
    border-radius: 9px;
    font-weight: 600;
    width: 85px;
    font-family: "Montserrat", sans-serif;
    background-color: rgb(255, 56, 56);
    color: white;
}

#load_unit_2,
#load_unit_1 {
    white-space: nowrap
}

#load_1,
#height_1,
#load_2,
#height_2,
#inner_dia_1,
#inner_dia_2 {
    font-family: montserrat_bold;
    /* font-size:clamp(.8rem,1vw,1rem); */
    /* max-width: 3em */
    /*width: 80px;*/

}

#load_2,
#load_1,
#height_1,
#height_2,
#inner_dia_1,
#inner_dia_2 {
    /* width: 100% !important; */
    padding-left: 5px;
    padding-right: 5px;
}

.input_custom tr:nth-child(3) td:nth-child(3),
.input_custom tr:nth-child(5) td:nth-child(3),
.input_custom tr:nth-child(3) td:nth-child(5),
.input_custom tr:nth-child(4) td:nth-child(5),
.input_custom tr:nth-child(5) td:nth-child(5),
.input_custom tr:nth-child(6) td:nth-child(5) {
    /* background-color: red; */
    width: 20% !important;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

#button_area2 {
    /*width: 100%;*/
    position: absolute;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    display: none
}

#svg_green {
    /*width: 100%;*/

}

#control_btn {
    /*margin-left: auto;*/
    /*margin-right auto;*/
    min-width: 40%;

}

.buttons {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*width: 100px;*/
    /*height: 30px;*/
    text-align: center
        /*background: lightgreen;*/

}

#title_2 {
    position: absolute;
    text-align: center;
    color: rgb(100, 150, 210);
    line-height: 0.0;
    font-size: 25px;
    font-family: Arial;
    font-weight: bold;
    top: 0px;
    z-index: 6
}

.info_torq,
.info_torq_val {
    display: block;
    text-align: center;
    margin: 2px 5px;
    padding: 2px;
    border-radius: 10px
}

.info_torq_val {
    border: 1px solid;
    padding: 2px 2px
}

#torsion_info {
    margin-bottom: 10px
}

.rotateimg180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.arrow {
    /*stroke: "#777777";*/

}

.coil_line {
    stroke: #04437e;
    stroke-height: 1
}

.color_box {
    fill: white
}

.color_box.cs {
    fill: white
}

.svg_rectangle {
    fill: white;
    stroke: rgb(100, 150, 210);
    stroke-width: 2;
    opacity: 1
}

#t1_hi_fl,
#t1_hi_fl,
#t1_hi_fl {
    font-family: montserrat_bold
}

.svg_text {
    font-size: 0.9em;
    fill: #646363;
    font-family: montserrat_light
}

#t_part_number {
    dominant-baseline: middle;
    text-anchor: middle;
    font-size: 1.75em;
    font-weight: 800;
}

#t1_hi_sh {
    dominant-baseline: middle;
    text-anchor: end
}

#t1_hi_mtr {
    dominant-baseline: middle;
    text-anchor: end
}

#t2_hi_sh {
    dominant-baseline: middle;
    text-anchor: middle
}

.t1_fl_std {
    text-anchor: middle
}

#t2_fl_std {
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #ffffff
}

#t1_hi_load {
    text-anchor: end
}

#t2_hi_load {
    text-anchor: middle;
    dominant-baseline: middle
}

.t1_hi_flloaded {
    text-anchor: end
}

.t2_hi_flloaded {
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #ffffff
}

#t1_hi_fl_trvl {
    text-anchor: start
}

.t2_hi_fl_trvl {
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #ffffff
}



#t2_hi_mtr {
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #ffffff
}

/*==================================*/

#rhi_load,
#rhi_mtr {
    fill: #ffffff;
    stroke: #e30613
}

#rhi_sh {
    fill: #e30613;
    stroke: #e30613
}

#rhi_lh {
    fill: #fbb700;
    stroke: #fbb700
}

#rfl_std {
    fill: #fbb700;
    stroke: #fbb700
}

#t2_hi_load,
#t2_hi_mtr,
.t2_hi_flloaded,
.t2_hi_fl_trvl {
    fill: #e30613
}

#t2_hi_sh {
    fill: #ffffff
}

/*==================================*/
body.cs {
    background: url('bg_cs.jpg');
    background-size: cover;
    fill: red
}

#rhi_load.cs,
#rhi_mtr.cs {
    fill: #ffffff;
    stroke: #f6a000
}

#rhi_sh.cs {
    fill: #e30613;
    stroke: #e30613
}

#rfl_std.cs {
    fill: #fbb700;
    stroke: #fbb700
}

#t2_hi_load.cs,
#t2_hi_mtr.cs {
    fill: #f6a000
}

#t2_hi_sh.cs {
    fill: #ffffff
}

/*======================================*/

#rhi_load.isq,
#rhi_mtr.isq {
    fill: #ffffff;
    stroke: #53BCBF
}

#rhi_sh.isq {
    fill: #e30613;
    stroke: #e30613
}

#rfl_std.isq {
    fill: #55bdbe;
    stroke: #55bdbe
}

#t2_hi_load.isq,
#t2_hi_mtr.isq,
.t2_hi_flloaded.isq,
.t2_hi_fl_trvl.isq {
    fill: #53BCBF
}



#t2_hi_sh.isq {
    fill: #ffffff
}

/*======================================*/





#rhi_load.tss,
#rhi_mtr.tss {
    fill: #ffffff;
    stroke: #f0813e
}

#rhi_sh.tss {
    fill: #e30613;
    stroke: #e30613
}

#rfl_std.tss {
    fill: #f0813e;
    stroke: #f0813e
}

#t2_hi_load.tss,
#t2_hi_mtr.tss,
.t2_hi_flloaded.tss,
.t2_hi_fl_trvl.tss {
    fill: #f0813e
}

#t2_hi_sh.tss {
    fill: #ffffff
}

/*===========================*/





#rhi_load.as,
#rhi_mtr.as {
    fill: #ffffff;
    stroke: #f0813e
}

#rhi_sh.as {
    fill: #e30613;
    stroke: #e30613
}

#rfl_std.as {
    fill: #f0813e;
    stroke: #f0813e
}

#t2_hi_load.as,
#t2_hi_mtr.as,
.t2_hi_flloaded.as,
.t2_hi_fl_trvl.as {
    fill: #f0813e
}

#t2_hi_sh.as {
    fill: #ffffff
}

/*===========================*/





#rhi_load.ssc,
#rhi_mtr.ssc {
    fill: #ffffff;
    stroke: #f0813e
}

#rhi_sh.ssc {
    fill: #e30613;
    stroke: #e30613
}

#rfl_std.ssc {
    fill: #f59d06;
    stroke: #f59d06
}

#t2_hi_load.ssc,
#t2_hi_mtr.ssc,
.t2_hi_flloaded.ssc,
.t2_hi_fl_trvl.ssc {
    fill: #f0813e
}

#t2_hi_sh.ssc {
    fill: #ffffff
}

/*===========================*/





#rhi_load.sc,
#rhi_mtr.sc {
    fill: #ffffff;
    stroke: #2b96d3
}

#rhi_sh.sc {
    fill: #e30613;
    stroke: #e30613
}

#rfl_std.sc {
    fill: #2b96d3;
    stroke: #2b96d3
}

#t2_hi_load.sc,
#t2_hi_mtr.sc,
.t2_hi_flloaded.sc,
.t2_hi_fl_trvl.sc {
    fill: #2b96d3
}

#t2_hi_sh.sc {
    fill: #ffffff
}

/*======================================*/
.t1_ang_rect {
    fill: #69b42d;
    stroke: #69b42d
}

.t1_ang_info {
    fill: #ffffff;
    stroke: #ffffff
}

.t1_ang_rect.cs {
    fill: #69b42d;
    stroke: #69b42d
}

.t1_ang_info.cs {
    fill: #ffffff;
    stroke: #ffffff
}

[data-tip] {
    position: relative
}

[data-tip]:before {
    content: '';
    /* hides the tooltip when not hovered */
    display: none;
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;
    position: absolute;
    top: 35px;
    left: 35px;
    z-index: 8;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0
}

[data-tip]:after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: 40px;
    left: 0px;
    padding: 5px 8px;
    background: #1a1a1a;
    color: #fff;
    z-index: 9;
    font-size: 1px;
    height: 25px;
    line-height: 18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    word-wrap: normal
}

[data-tip]:hover:before,
[data-tip]:hover:after {
    display: block
}

/*===========================*/
.tooltip-inner {
    font-family: montserrat_light;
    font-size: 10px;
    background-color: #777777;
    color: #ffffff;
    /*color: red;*/
    border: 1px solid #000
}

#play,
#play_image,
#pause_image {
    /*width: 80px;*/
    /*height: 80px;*/
    border: 0px solid;
    background-color: transparent;
    border-radius: 50px
}

#pause_Layer_1,
#forw_Layer_1,
#backw_Layer_1,
#play_Layer_1 {
    /*height: 80px;*/
    align-content: middle;
    align-items: middle
}

.big_col {
    /*width: 185px;*/

}

.small_col img {
    border-radius: 50%;

}

#backward,
#forward,
#backward_image,
#forward_image {
    /*width: 25px;*/
    /*height: 80px;*/
    border: 0px solid;
    background-color: transparent;
    border-radius: 50%
}

#backward_image svg,
#forward_image svg,
#forward svg,
#backward svg {
    width: 100%
}

#play_image {
    display: none
}

#play :click {
    transform: translateY(4px)
}

#data_json,
#data_gif {
    display: none
}

/*

#play_image:focus {
  outline: none;
}
*, *:focus, *:hover {
    outline: none;
}

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

*/
/*
button{
    
    border: 0px solid #cdd8e0; 
    outline: 0;
}*/
/*=================torsion===========*/
.t1_fp {
    font-family: montserrat_light;
    font-size: 1.2em;
    /* fill: #646363; */
    dominant-baseline: middle;
    text-anchor: middle
}

.t1_mtr {
    font-family: montserrat_light;
    font-size: 1.2em;
    fill: #e30613;
    dominant-baseline: middle;
    text-anchor: middle
}

/*fill:#fdc600;*/
#torsion_base_l {
    stroke: #fdc600;
    stroke-dasharray: 3, 3;
    stroke-width: 2
}

#torsion_base_2 {
    stroke: #00ff00;
    stroke-width: 2
        /*marker-end: url(#througharrow_end);*/
        /*marker-start: url(#througharrow);*/

}

#ang_fp_1 {
    stroke: #fdc600;
    stroke-width: 8;
    stroke-linecap: round
}

#ang_mtr_1 {
    stroke: #e30613;
    stroke-width: 5;
    stroke-linecap: round
}

#ang_t1,
#ang_t2 {
    stroke: #fdc600;
    stroke-width: 2
}

#t1_tor_ang {
    font-family: "montserrat_bold";
    font-size: 2em;
    fill: #fdc600;
    dominant-baseline: middle;
    text-anchor: middle
}

.spiral_arrow {
    marker-end: url(#througharrow_end)
}

#apart_number {
    font-size: 18px;
    font-family: montserrat_bold
}

#cell_load_1 {
    height: 20px
}

#warning {
    font-size: 18;
    font-family: montserrat_light;
    position: absolute;
    bottom: 25px;
    left: 10px
}

#SVG text {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#backward_image text,
#forward_image text,
#warning {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/*
#gif_container{
    position: relative;
    top: 0px;
    z-index: 45;
}*/
/*
body, .main_div {
   overflow - x: hidden;
   overflow - y: hidden;
   scrollbar - width: none;
}*/
/*
::-webkit - scrollbar {
   display: none;
}*/



.parag {
    text-align: center;
    max-width: 600px;
    margin-bottom: 4px;
}

.big_col {
    width: 50px
}

.small_col {
    width: 5px
}

.grid-container {
    display: grid;
    /* gap: 1px; */
    /* background-color: #2196F3; */
    /* padding: 1px; */
    /* height: 800px; */
    width: 100%
}

.grid-item {
    /* background-color: rgba(255, 255, 255, 0.8); */
    text-align: center
        /* padding: 1px; */
        /* font-size: 20px; */

}

.col0 {
    grid-column: 1
}

.col1 {
    grid-column: 1
}

.col2 {
    grid-column: 1
}

.item1 {
    grid-row: 1
}

.item2 {
    grid-row: 2
}

.item3 {
    grid-row: 3
}

.item4 {
    grid-row: 4
}

.item5 {
    grid-row: 5
}

@media (min-width: 1980px) {
    .col0 {
        grid-column: 1/span 5
    }

    .col1 {
        grid-column: 1/span 4
    }

    .col2 {
        grid-column: 5
    }

    .item2 {
        grid-row: 2
    }

    .item3 {
        grid-row: 3
    }

    .item4 {
        grid-row: 2/span 3
    }

    .item5 {
        grid-row: 4
    }
}

@media (min-width: 1400px) {
    .col0 {
        grid-column: 1/span 5
    }

    .col1 {
        grid-column: 1/span 4
    }

    .col2 {
        grid-column: 5
    }

    .item2 {
        grid-row: 2
    }

    .item3 {
        grid-row: 3
    }

    .item4 {
        grid-row: 2/span 3
    }

    .item5 {
        grid-row: 4
    }
}

@media (min-width: 800px) {
    .col0 {
        grid-column: 1/span 6
    }

    .col1 {
        grid-column: 1/span 5
    }

    .col2 {
        grid-column: 6
    }

    .item2 {
        grid-row: 2
    }

    .item3 {
        grid-row: 3
    }

    .item4 {
        grid-row: 2/span 3
    }

    .item5 {
        grid-row: 4
    }
}

.crop {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.crop img {
    width: 80px;
    height: 80px;
    margin: -20px 0 0 -20px;
}

@media(max-width: 400px) {
    .crop {
        width: 30px;
        height: 30px;
        overflow: hidden;
    }

    .crop img {
        width: 60px;
        height: 60px;
        margin: -15px 0 0 -15px;
    }
}

.header_calc {
    font-size: 1.5em;
    margin-top: 1rem;
    font-weight: 800;
}

.m-item1 {
    height: 60px;
    margin: auto auto;
}

.ui-tooltip {
    font-size: 12px;
}

.para-normal-font {
    padding: 0px 2px !important;
}

.para-normal-font {
    font-size: clamp(.55rem, 1.5vw, .8rem);
}

@media screen and (min-width: 1430px) {
    .animate_icons_top .para-normal-font {
        font-size: 1.2rem;
    }

    .animate_icons .para-normal-font {
        font-size: 1.2rem;
    }

    .header_calc.parag {
        font-size: 1.2rem;
    }

    #form_t td {
        font-size: 1rem;
        line-height: 1.5;
    }

    #osft_img {
        max-width: 180px;
        max-height: 180px;
    }
}