@media only screen and (max-width:991px) {
    .FormControl {
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .FormControl80px {
        height: 34px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .FormControl150px {
        height: 34px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .FormControl50 {
        height: 34px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .FormControlMultiLine50 {
        height: 100px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .FormControlMultiLine200 {
        height: 200px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }


    .FormControl100 {
        height: 34px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .FormControl600 {
        height: 34px;
        width: 100%;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    }

    .Desktop {
        display: none
    }

    .Mobile {
        display: normal
    }

    .AdminSectionLeft {
        padding: 10px 10px 10px 10px;
        margin-top: 20px;
        background-color: #ffffff;
        float: left;
        width: 100%;
    }

    .AdminSectionRight {
        padding: 10px 10px 10px 10px;
        margin-top: 20px;
        background-color: #ffffff;
        float: left;
        width: 100%;
    }

    .AdminSectionIcon {
        float: left;
        padding-right: 10px
    }

    #map_canvas {
        height: 400px;
        border: solid 1px #999999;
        overflow: auto;
        clear: both;
    }


    .CalendarDateCell {
        height: 110px;
        text-align: center;
        background-color: #EFEFEF;
        color: #5e5e5e;
        border: 2px solid #ffffff;
        border-collapse: collapse;
    }

    .CalendarDateCellDiv {
        height: 100%;
        width: 100%;
        flex-direction: column;
        display: flex;
    }

    .CalendarDate {
        top: 0px;
        width: 100%;
        height: 20px;
        text-align: center;
        padding: 5px 10px 5px 10px;
        color: #6f6d6d;
        font-weight: bold;
    }

    .CalendarPlace {
        width: 100%;
        text-align: left;
        flex-grow: 1;
        padding: 5px 10px 5px 10px;
    }

    .CalendarAction {
        height: 30px;
        width: 100%;
        text-align: center;
        background-color: #E5D4C0;
        padding: 3px 5px 3px 5px;
    }

    .CalendarIcon {
        padding-right: 15px;
        height: 25px;
    }

    .CalendarDateVerified {
        width: 100%;
        text-align: center;
        color: #FFFFFF;
        background-color: #00A597;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
    }

    .CalendarDateNotVerified {
        width: 100%;
        text-align: center;
        color: #FFFFFF;
        background-color: #00A597;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
    }

    .TravelCO2 {
        font-weight: bold;
        color: #686868;
        font-size: 16px;
    }

    .YearBubble {
        padding: 5px 5px 5px 5px;
        margin-right: 10px;
        color: #fff;
        background-color: #C46412;
        float: left;
    }

    .DataTableFull {
        border: solid 1px #dedede;
        background-color: #ffffff;
        margin-bottom: 10px;
        width: 100%;
    }

    .CalendarTable {
        margin-bottom: 20px;
        width: 100%;
    }

    .CalendarDateCell {
        height: 50px;
        text-align: center;
        background-color: #EFEFEF;
        color: #5e5e5e;
        border: 2px solid #ffffff;
        border-collapse: collapse;
    }

    .CalendarDateCellPresent {
        height: 60px;
        text-align: center;
        vertical-align: middle;
        background-color: #00A597;
        color: #ffffff;
        border: 2px solid #ffffff;
        border-collapse: collapse;
    }

    .CalendarDateCellNotPresent {
        height: 60px;
        text-align: center;
        vertical-align: middle;
        background-color: #EFEFEF;
        color: #5e5e5e;
        border: 2px solid #ffffff;
        border-collapse: collapse;
    }

    .CalendarDateCellDiv {
        height: 100%;
        width: 100%;
        flex-direction: column;
        display: flex;
    }

    .CalendarDate {
        top: 0px;
        width: 100%;
        height: 20px;
        text-align: right;
        padding: 5px 10px 5px 10px;
        color: #6f6d6d;
        font-weight: bold;
    }

    .CalendarPlace {
        width: 100%;
        text-align: left;
        flex-grow: 1;
        float: left;
        padding: 5px 10px 5px 10px;
    }

    .CalendarAction {
        float: left;
        height: 30px;
        width: 100%;
        text-align: center;
        padding: 3px 5px 3px 5px;
    }

    .CalendarIcon {
        padding-right: 15px;
        height: 25px;
    }

    .CalendarDateVerified {
        width: 100%;
        height: 20px;
        text-align: right;
        color: #06a039;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
    }

    .CalendarDateNotVerified {
        width: 100%;
        height: 20px;
        text-align: right;
        color: #8b0404;
        font-weight: bold;
        padding: 5px 10px 5px 10px;
    }
}

.DataTableMild {
    border: solid 1px #dedede;
    background-color: #ffffff;
    margin-bottom: 10px;
    width: 100%;
}


@media only screen and (max-width:479px) {




    .DataTableMild table {
        display: block;
        overflow: auto;
        border-collapse: collapse
    }

    .DataTableMild thead {
        display: block;
        overflow: auto;
        border-collapse: collapse
    }

        .DataTableMild thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
            border-collapse: collapse
        }

    .DataTableMild tbody {
        display: block;
        overflow: auto;
    }

    .DataTableMild th {
        display: block;
        overflow: auto;
    }

    .DataTableMild tr {
        display: block;
        overflow: auto;
        border-collapse: collapse
    }

    .DataTableMild td {
        display: block;
        overflow: auto;
    }

    .DataTableMild tr {
        border-collapse: collapse;
    }

    td {
        /* Behave  like a "row" */
    }

    .DataTableMild td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        content: attr(data-label);
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    .DataTableMild .cell {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 35px;
        vertical-align: middle;
        border-collapse: collapse
    }

    .DataTableMild .cellAction {
        border: none;
        position: relative;
        padding-left: 50%;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 35px;
        text-align: left;
        vertical-align: middle
    }

    .DataTableMildNoMargin table {
        display: block;
        overflow: auto;
    }

    .DataTableMildNoMargin thead {
        display: block;
        overflow: auto;
    }

        .DataTableMildNoMargin thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .DataTableMildNoMargin tbody {
        display: block;
        overflow: auto;
    }

    .DataTableMildNoMargin th {
        display: block;
        overflow: auto;
    }

    .DataTableMildNoMargin tr {
        display: block;
        overflow: auto;
    }

    .DataTableMildNoMargin td {
        display: block;
        overflow: auto;
    }

    .DataTableMildNoMargin tr {
        border: 1px solid #ccc;
    }

    .DataTableMildNoMargin td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        content: attr(data-label);
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    .DataTableMildNoMargin .cell {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        padding-top: 5px;
        padding-bottom: 5px;
        min-height: 16px;
    }

    .DataTableMildNoMargin .cellAction {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        padding-top: 5px;
        padding-bottom: 5px;
        min-height: 16px;
    }


    .addressBox {
        width: 100%;
        float: left;
        margin-right: 10px;
        margin-top: 10px;
    }


    .header {
        width: 98%;
        padding: 0;
    }

    #logo {
        width: 160px;
        margin: 0 auto;
        display: inline-block;
        float: left;
        padding: 10px 0 10px;
    }

        #logo a img {
            width: 100%;
            height: auto;
        }

    .header_rht {
        width: 100%;
        margin: 0 auto;
        display: inline-block;
        float: right;
    }

        .header_rht .login {
            width: 82px;
            font-size: 13px;
            padding: 6px 0;
            border: 2px solid #17c2e9;
            float: none;
            display: block;
            margin: 0 auto;
            position: absolute;
            top: 18px;
            right: 92px;
        }

    .nav {
        width: 100%;
        float: none;
        clear: both;
        padding: 0;
    }

        .nav ul {
            display: none;
        }

            .nav ul li {
                padding: 0 0 6px;
                width: 100%;
                text-align: center;
                display: block;
                float: none;
            }

                .nav ul li a {
                    font-size: 14px;
                }

    .menu {
        display: block;
        width: 44px;
        margin: 0 auto;
        padding: 0 0 13px;
        position: absolute;
        top: 15px;
        right: 10px;
    }

    .menuList {
        float: unset
    }

    .breadcrumb_outer {
        width: 100%;
        height: 25px;
        padding-bottom: 3px;
        background-color: #EFEFEF;
    }

    .breadcrumb {
        width: 95%;
    }


    .footer_in {
        width: 98%;
    }

    .footer_in_rht {
        display: block;
        float: none;
        margin: 0 auto;
    }

    .footer_in_logo a img {
        width: 100%;
        height: auto;
    }

    .footer_in_logo {
        width: 140px;
        margin: 0 auto;
        display: block;
        float: none;
        padding: 0 0 11px;
    }

    .footer_in_mid {
        margin: 11px 0 0 0;
        width: 100%;
    }

        .footer_in_mid ul li a {
            font-size: 16px;
        }

        .footer_in_mid ul.privacy {
            padding: 0;
        }

            .footer_in_mid ul.privacy li a {
                font-size: 10px;
            }

        .footer_in_mid ul li {
            padding: 0 0px 15px 0;
            text-align: center;
            float: none;
            display: block;
        }

        .footer_in_mid ul.privacy li {
            padding: 0 11px 11px 0;
        }

    .footer_in_btm_cpy {
        width: 92%;
        padding: 25px 0 0;
    }

        .footer_in_btm_cpy span {
            padding: 0 0 11px;
            font-size: 13px;
        }

        .footer_in_btm_cpy small {
            font-size: 10px;
        }

    #map_canvas {
        height: 200px;
        border: solid 1px #999999;
        overflow: auto;
        clear: both;
    }

    .mapkey {
        display: none;
    }

    #TextBoxCountry {
        width: 95%
    }

    .inputcontrol {
        width: 95%
    }

    .inputcontrolNoMargin {
        width: 95%
    }

    .homeSummary {
        margin-top: 20px;
        margin-left: 10px;
        text-align: center;
        margin-right: 10px;
        width: 90%;
        min-height: unset;
    }

    .infoSecIconContainer {
        float: left;
        width: 46px
    }

    .infoSecIcon {
        width: 46px;
        height: 40px;
        border: 0px
    }

    .infoSecLine {
        width: 100%;
        height: 13px;
        border: 0px
    }


    .inputcontrolDropDownNoMargin {
        width: 95%
    }

    .inputcontrolNoMargin {
        width: 95%
    }

    .documentDetails {
        float: unset;
        width: 100%
    }

    .documentPreview {
        float: unset;
        width: 100%;
        border: 1px solid #cecece;
    }

    .ExpensePreview {
        border: 1px solid #cecece;
        width: 100%
    }

    .image {
        width: 100%;
    }

    .imagebutton {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-right: 10px;
        height: 25px;
    }

    .CalendarDateCellPresent {
        height: 40px;
        text-align: center;
        vertical-align: middle;
        background-color: #00A597;
        color: #ffffff;
        border: 2px solid #ffffff;
        border-collapse: collapse;
    }

    .CalendarDateCellNotPresent {
        height: 40px;
        text-align: center;
        vertical-align: middle;
        background-color: #EFEFEF;
        color: #5e5e5e;
        border: 2px solid #ffffff;
        border-collapse: collapse;
    }
}