html {
    font-family: arial, Arial, Helvetica, sans-serif;
    font-size: 13px;
}
#fovcalc select,
#fovcalc input {
    color: black;
}
#fovcalc-graphics {
    width: 310px;
    height: 440px;
    position: relative;
    text-align: center;
    font-size: 13px;
    color: gray;
}
#fovcalc-output-hfov {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 200px;
    height: 25px;
    left: 65px;
    bottom: 415px;
    /*background-color: red;*/
}
#fovcalc-output-vfov {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 200px;
    height: 25px;
    left: -84px;
    bottom: 291px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    /*background-color: blue;*/
}
#fovcalc-output-dfov {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 200px;
    height: 25px;
    left: 51px;
    bottom: 293px;
    -ms-transform: rotate(-38deg);
    -webkit-transform: rotate(-38deg);
    transform: rotate(-38deg);
    /*background-color: limegreen;*/
}
#fovcalc-output-distance {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 100px;
    height: 25px;
    left: 107px;
    bottom: 148px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    /*background-color: limegreen;*/
}
#fovcalc-output-camera {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 200px;
    height: 25px;
    left: 67px;
    bottom: 12px;
    color: gray;
    text-decoration: none;
    /*background-color: limegreen;*/
}
#fovcalc-output-camera:hover {
    text-decoration: underline;
}
#fovcalc-output-spotsize1 {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 80px;
    height: 25px;
    left: 193px;
    bottom: 304px;
    color: #f58228;
}
#fovcalc-output-spotsize1v {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 80px;
    height: 25px;
    left: 234px;
    bottom: 260px;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #f58228;
}
#fovcalc-output-spotsize3 {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 80px;
    height: 25px;
    left: 193px;
    bottom: 218px
    /*background-color: limegreen;*/
}
#fovcalc-output-spotsize3v {
    position: absolute;
    vertical-align: bottom;
    line-height: 25px;
    width: 80px;
    height: 25px;
    left: 150px;
    bottom: 262px;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /*background-color: limegreen;*/
}
#fovcalc-input-form input,
#fovcalc-input-form select {
    padding: 10px;
    box-sizing: border-box;
    display: block;
    width: 360px;
    font-size: 13px;
    border-radius: 2px;
    border: none;
    margin: 3px 0px 14px 0px;
    height: 40px;
    color: #353535;
    background-color: #efefef;
    box-shadow: none;
}
#fovcalc-input-form input#fovcalc-input-distance {
    width: calc(360px - 178px);
    display: inline-block;
}
#fovcalc-input-form .fovcalc-form-label {
    font-size: 13px;
    color: #484848;
    font-weight: 600;
    margin-bottom: 4px;
}
#fovcalc-input-units {
    font-size: 0;
}
#fovcalc-input-units {
    display: inline-block;
}
#fovcalc-input-units > div {
    display: inline-block;
    background-color: #eaeaea;
    width: 35px;
    height: 40px;
    line-height: 41px;
    font-size: 13px;
    text-align: center;
    border: none;
    border-right: none;
    cursor: pointer;
    color: #4c4c4c;
    transition: background-color 200ms;
    box-sizing: border-box;
    border-right: solid 1px #f7f7f7;
}
#fovcalc-input-units > div:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
#fovcalc-input-units > div:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-right: none;
}
#fovcalc-input-units > div:hover {
    background-color: #c1c1c1;
}
#fovcalc-input-units > div.selected {
    background-color: #f58229;
    color: #ffffff;
    font-weight: bold;
}
#fovcalc {
    display: inline-block;
    text-align: center;
}
#fovcalc-headline {
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 20px;
}
#fovcalc-graphics,
#fovcalc-data {
    display: inline-block;
    vertical-align: top;
}
#fovcalc-data {
    padding-top: 20px;
    padding-right: 20px;
    margin-bottom: 30px;
    text-align: left;
}
#fovcalc-output-data h3 {
    padding: 10px 10px 0px 10px;
    margin-bottom: 0px;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #353535;
}
#fovcalc-output-data {
    background-color: #efefef;
    border-radius: 2px;
    width: 360px;
}
#fovcalc-output-data table {
    text-align: left;
    border-collapse: collapse;
    width: 360px;
    font-size: 13px;
    color: #353535;
    border: none;
}
#fovcalc-output-data table td,
#fovcalc-output-data table th {
    padding: 5px 10px;
    font-weight: normal;
    border: none;
}
#fovcalc-output-data table thead td {
    font-size: 13px;
    color: #484848;
    font-weight: 600;
}
#fovcalc-output-data table tbody tr:nth-child(2n+1) {
    background-color: #ffffff;
}
#fovcalc-output-min-focus-warning {
    display: none;
    width: 360px;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1.4em;
    background-color: #f58229;
    border-radius: 2px;
    color: white;
    margin-top: 5px;
    font-size: 13px;
}
#fovcalc-output-camera-img {
    position: absolute;
    top: 345px;
    left: 152px;
    width: 32px;
    height: 54px;
    transition: top 300ms;
}
#fovcalc-output-camera-img:hover {
    top: 342px;
}
#fovcalc-embeded-logo {
    width: 200px;
    display: block;
    margin-bottom: 5px;
}
#fovcalc-embeded-logo-a {
    display: block;
    margin: auto;
}
#lens-9mm-warning {
    display: none;
    font-size: 12px;
    width: 360px;
    color: #f58228;
    text-align: justify;
    margin-bottom: 15px;
}

@media screen and (max-width: 729px) {
    #fovcalc-input-form input, #fovcalc-input-form select {
        width: calc(100% - 23px);
    }
    #fovcalc-input-form input#fovcalc-input-distance {
        width: calc(100% - 200px);
    }
    #fovcalc-input-form input#fovcalc-input-distance {
        width: calc(100% - 200px);
    }
    #fovcalc-output-data {
        width: calc(100% - 23px);
    }
    #fovcalc-graphics,
    #fovcalc-data {

    }
    #fovcalc-embeded-logo {
        display: inline-block;
    }
    #fovcalc-embeded-logo-a {
        display: block;
        margin: auto;
        text-align: center;
    }
}