﻿@media screen and (max-width: 640px) {
    body {
        width: 100% !important;
        text-align: left !important;
        font-size: 0.9em !important;
        padding: 0px;
    }
    .content-wrapper {
        width:98%;
    }
    #banner img {
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
    }
    /* IF MOBILE DEVICE - DON'T FLOAT - this is the default.aspx page */
    .domainBox {
        float: none;
    }

    .divFloat {
        clear: both;
        float: none !important;
        width: 96% !important;
        padding-left: 10px !important;
    }

        .divFloat .left, .divFloat .right {
            padding-top: 20px !important;
        }
    /*-----END DOMAIN HOME PAGE-------*/

    /* nav menu for mobile devices */
    .navMobile {
        background-color: black;
        color: white !important;
        margin: 0px;
        padding: 0px;
    }

        .navMobile ul {
            padding: 0px;
            margin-top: 0px;
            margin-left: 10px;
            text-align: left;
        }

        .navMobile li {
            display: flex;
        }

            .navMobile li a {
                text-decoration: none;
                font-size: 1.2em;
                height: 20px;
                line-height: 20px;
                padding: 8px 8px;
                display: block;
                border: none;
                color: white;
            }

            .navMobile li:not(:first-child) {
                display: none;
            }
    /* end nav menu for mobile devices */
    /* code for the flex table - for mobile device rendering */
    table.flexTable thead {
        display: none;
    }

    table.flexTable td {
        display: flex;
    }

        table.flexTable td.last {
            padding-bottom: 5px !important;
        }

        table.flexTable td.center {
            text-align: left !important;
        }

        table.flexTable td::before {
            content: attr(data-label);
            font-weight: bold;
            color: #272727;
            width: 120px;
            min-width: 120px;
        }
    .flexcontainer, .flexrows, .flexcols {
        width: 100%;
    }

        .flexcontainer .regformLeft, .flexrows .regformLeft, .flexcols .regformLeft {
            flex: 1 100% !important;
            width: 100% !important;
            text-align: left;
            flex-wrap: nowrap;
            white-space: nowrap !important;
        }

        .flexcontainer .regformRight, .flexrows .regformRight, .flexcols .regformRight {
            flex: 1 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            text-align: left;
            flex-wrap: nowrap;
            white-space: nowrap !important;
        }

            .flexcontainer .formFieldOn input, .flexcontainer .regformRight input[type="text"], .regformSelect {
                width: 85% !important;
            }
            .flexLeft{
                margin-left:0px;
            }

    .formFieldOff input[type="text"], .formFieldOn input[type="text"], .formFieldError input[type="text"] {
        width: 85% !important;
    }
}


