/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 4, 2020, 4:11:57 PM
    Author     : MOBA
*/

@media only screen   
and (min-width: 1370px)  
and (max-width: 1605px)  
{
    #preview-textfield {
        position: absolute;
        top: 220px;
        right: 3px;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 700;
        color: #ffc107;
        font-family: 'Amaranth', sans-serif;
    }
    #preview-textfield3 {
        position: absolute;
        top: 221px;
        left: 2px;
        right: 8px;
        text-align: center;
        font-size: 2em;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    #preview-textfield1 {
        position: absolute;
        top: 154px;
        left: 16px;
        right: 20px;
        text-align: center;
        font-size: 1.7em;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    #preview-textfield4 {
        position: absolute;
        top: 221px;
        left: 2px;
        right: 4px;
        text-align: center;
        font-size: 2em;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    .engine_hr_img {
        width: 59%;
        position: absolute;
        left: 68px;
    }
    .enginhr_set_value {
        position: absolute;
        top: 38%;
        left: 49%;
        transform: translate(-50%, -50%);
        font-size: 1.5rem;
        color: #ffcc00;
        z-index: 1;
        font-weight: bold;
    }
    #preview-textfield2 {
        position: absolute;
        top: 154px;
        right: 10px;
        text-align: center;
        font-size: 1.7rem;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    .gauge_img {
        width: 79%;
        position: absolute;
        left: 40px;
        top: 9px;
    }
    .gauge_right_icon {
        top: 115px;
        left: 223px;
    }
    .gauge_center_icon {
        top: 115px;
        left: 139px;
    }
    .gauge_left_icon {
        top: 115px;
        left: 56px;
    }
    .gauge_top_icon {
        top: 31px;
        left: 143px;
    }
    .gauge_bottom_icon {
        top: 196px;
        left: 137px;
    }
    canvas {
        width: 100% !important;
        /* top: 10px; */
        position: relative;
        right: 0px;
        height: auto;

    }
    /*    .degree_cel {
            color: #fff;
            position: absolute;
            bottom: 5px;
            left: 162px;
        }*/

    .degree_cel {
        color: #fff;
        position: absolute;
        top: 18px;
        left: 60px;
    }
    .gauge1 {
        width: 100% !important;
        bottom: 11px;
        position: relative;
        right: 4px;
        height: auto !important;
    }
    .set_rpm {
        color: #fff;
        position: absolute;
        bottom: 13px;
        left: 159px;
    }
    .gauge2 {
        width: 450px !important;
        bottom: 27px;
        position: relative;
        right: 57px;
        height: auto !important;
    }
    .set_date_time{
        left:9% !important;
        float: right;
        color: #fff;
        position: relative;
        top: 50%;
        /* right: 0%; */
        transform: translate(-50%, -50%);
        font-size: 1.2rem;
    }
}

@media only screen and (width: 1920px) {

    #preview-textfield {
        position: absolute;
        top: 220px;
        right: 20px;
        text-align: center;
        font-size: 2em;
        font-weight: 700;
        color: #ffc107;
        font-family: 'Amaranth', sans-serif;
    }
    #preview-textfield3 {
        position: absolute;
        top: 230px;
        left: 2px;
        right: 7px;
        text-align: center;
        font-size: 2em;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    #preview-textfield1 {
        position: absolute;
        top: 146px;
        left: 16px;
        right: 20px;
        text-align: center;
        font-size: 1.7em;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    #preview-textfield4 {
        position: absolute;
        top: 230px;
        left: 2px;
        right: 7px;
        text-align: center;
        font-size: 2em;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    .engine_hr_img {
        width: 48%;
        position: absolute;
        left: 110px;
        bottom: 24px;
    }
    .enginhr_set_value {
        position: absolute;
        top: 36%;
        left: 48%;
        transform: translate(-50%, -50%);
        font-size: 1.5rem;
        color: #ffcc00;
        z-index: 1;
        font-weight: bold;
    }
    #preview-textfield2 {
        position: absolute;
        top: 145px;
        right: 20px;
        text-align: center;
        font-size: 1.7rem;
        font-weight: 700;
        color: #fff;
        font-family: 'Amaranth', sans-serif;
    }
    .gauge_img {
        width: 63%;
        position: absolute;
        left: 83px;
        top: 6px;
    }
    .gauge_right_icon {
        top: 110px;
        left: 267px;
    }
    .gauge_center_icon {
        top: 110px;
        left: 184px;
    }
    .gauge_left_icon {
        top: 110px;
        left: 102px;
    }
    .gauge_top_icon {
        top: 27px;
        left: 189px;
    }
    .gauge_bottom_icon {
        top: 192px;
        left: 182px;
    }
    .gauge1 {
        width: 100% !important;
        bottom: 39px;
        position: relative;
        right: 8px;
    }
    .set_rpm {
        color: #fff;
        position: absolute;
        bottom: 13px;
        left: 204px;
    }
    canvas {
        width: 100% !important;
        bottom: 30px;
        height: auto;
        position: relative;
        right: 1px;
    }
    /*    .degree_cel {
            color: #fff;
            position: absolute;
            bottom: 0px;
            left: 208px;
        }*/

    .degree_cel {
        color: #fff;
        position: absolute;
        top: 18px;
        left: 60px;
    }
    .gauge2 {
        width: 475px !important;
        bottom: 40px;
        position: relative;
        right: 22px;
        height: auto !important;
    }
    .set_date_time{
        left:9%;
        float: right;
        color: #fff;
        position: relative;
        top: 50%;
        /* right: 0%; */
        transform: translate(-50%, -50%);
        font-size: 1.2rem;
    }

}
@media (min-width: 768px) {
    body:not(.sidebar-mini-md) .content-wrapper, body:not(.sidebar-mini-md) .main-footer, body:not(.sidebar-mini-md) .main-header {
        transition: margin-left .3s ease-in-out;
        margin-left: 0px !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .col-md-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}