@include url('//fonts.etrack1.com/google/heebo/font.css');
@media (min-width: 100px) {
    body, p, td, div, label, span, input, select, textarea,
    .form_field td {
        font-size: 17px;
    }

    .wrapper {
        margin: 0 auto auto auto;
    }

    body {
        background-color: #888;
    }

    #content {
        background-size: 180px auto;
        padding: 80px 20px 30px;
    }

    input[type=submit] {
        padding: 12px 24px;
    }

    .form label {
        font-size: 35px;
    }

    div.action {
        margin: 0 0 30px;
    }
}

@media (min-width: 450px) {
    body, p, td, div, label, span, input, select, textarea,
    .form_field td {
        font-size: 14px;
    }

    .wrapper {
        margin: auto;
    }

    body {
        background-color: #282736;
    }

    #content {
        background-size: 150px auto;
        padding: 80px 40px 30px;
    }

    input[type=submit] {
        padding: 6px 12px;
    }

    .form label {
        font-size: 25px;
    }

    div.action {
        margin: 0 0 50px;
    }
}

@media all {
    * {
        box-sizing: border-box;
        outline: none;
        -webkit-text-size-adjust: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /*IE FIX*/
    html, body {
        text-align: center;
    }
    /*IE FIX END*/
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    body, p, td, div, label, span, input, select, textarea {
        font-family: "Heebo",Arial,sans-serif;
        font-weight: normal;
        text-decoration: none;
        color: #000000;
    }

    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
        color: #000000;
        text-decoration: none;
    }

        a:hover {
            text-decoration: underline;
        }

    #content {
        background-color: #FFFFFF;
        background-image: url("//cdn.etrack1.com/fo/images/logo-dark.png");
        background-position: 10px 20px;
        background-repeat: no-repeat;
        border: 0 none;
        border-radius: 8px;
        padding: 80px 20px 30px;
        width: 100%;
    }

        #content.logox {
            /*TEMPORARY VERSION*/
            background-image: url("//cdn.etrack1.com/fo/images/logo-dark.png");
            background-position: 18px 20px;
            background-size: 160px;
        }

    .wrapper {
        border: 0 none;
        width: 100%;
        height: 100%;
        max-height: 400px;
        max-width: 450px;
        padding: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        text-align: left;
    }

    .form {
        width: 100%;
        height: 100%;
    }

        .form label {
            font-weight: 200;
            display: inline-block;
            color: #000000;
            margin: 10px 0 20px 0;
        }

    .form_field {
        width: 100%;
        margin: 20px 0;
    }

        .form_field input[type=text],
        .form_field input[type=password],
        .form_field select,
        .form_field textarea {
            border: 1px solid #b8b8b8;
        }

        .form_field input[type=text],
        .form_field input[type=password] {
            width: 100% !important;
            height: 28px;
            padding-left: 3px;
        }

        .form_field td {
            text-align: left;
            padding: 2px;
            width: 60%;
        }

        .form_field .right {
            text-align: left;
            min-width: 100px;
            width: 40%;
            padding: 2px 10px 2px 2px;
        }

        .form_field tr:first-child td {
            vertical-align: top;
        }

            .form_field tr:first-child td:nth-child(2) {
                text-transform: uppercase;
            }

    form#login_form {
        /*TO DO*/
    }

    input[type=submit] {
        -moz-user-select: none;
        background: #649A3D none repeat scroll 0 0;
        border: 1px solid #649A3D;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        margin-right: 4px;
        transition: background 1s ease 0s;
        width: auto;
    }

        input[type=submit]:hover {
            background: #649A3D none repeat scroll 0 0;
            border: 1px solid #000000;
        }

    #content.logox input[type=submit] {
        background-image: url(https://cdn.etrack1.com/nfo/images/loginback.png);
        background-repeat: repeat-x;
    }

        #content.logox input[type=submit]:hover {
            background: #649A3D none repeat scroll 0 0;
        }

    /*FOR iOS*/
    input, select, textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
    }
}