/* Font imports */
/*---------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Teko&display=swap');

@import url('https://fonts.googleapis.com/css?family=Oswald:300&display=swap');


/* Defaults */
/*---------------------------------------------*/

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #464749;
}

    /* Privacy and T&C popups */
    body.popup {
        background: #FFF none;
        padding: 8px 16px;
        text-align: left;
    }

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

p {
    display: block;
    margin: 1% 0;
    padding: 0;
    line-height: 22px;
}

    p span {
        display: block;
    }

/* Links */
/*---------------------------------------------*/

a {
    color: #224388;
    text-decoration: none;
}

    a:not(.anchor-button):hover {
        color: #0072bc;
        text-decoration: underline;
    }

/* Lists */
/*---------------------------------------------*/

ul, ol {
    margin: 0;
    padding: 0;
}

    ul li, ol li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

/* Headings */
/*---------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Teko', sans-serif;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    color: #224388;
    line-height: 1.4;
    letter-spacing: 0em;
    margin-bottom: 1.5rem;
    margin: 0;
    padding: 0;
    cursor: default;
}

h1 {
    font-size: 40px;
    white-space: nowrap;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

.line_behind_heading {
    height: 66px;
    padding: 0.3em 0;
}

    .line_behind_heading .the_line {
        border-bottom: 1px solid #464749;
        height: 28px;
        text-align: center;
    }

    .line_behind_heading h1 {
        line-height: 66px;
        background-color: #FFF;
        padding: 0 24px;
        display: inline-block;
    }

/* Responsive grid system overrides */
/*---------------------------------------------*/

/*
#container {
    border: 1px solid red;
}

.section-wrapper {
    border: 1px solid blue;
}

.section {
    border: 1px solid green;
}

.group {
    border: 1px solid blue;
}

.col,
.col-xs,
.single-centered-col {
    border: 1px solid red !important;
}
*/

.col,
.col-xs,
.single-centered-col {
    margin-top: 10px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    .col,
    .col-xs,
    .single-centered-col {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

.col.no-pad,
.col.no-margin {
    margin: 0 0 0 0;
}

.col.no-margin-tb {
    margin-top: 0;
    margin-bottom: 0;
}

/* Responsive specific styles */

.visible-for-mobile,
.hidden-for-desktop,
.visible-for-mobile-xs,
.hidden-for-desktop-xs {
    display: none;
}

@media only screen and (max-width: 767px) {
    .hidden-for-mobile {
        display: none !important;
    }

    .visible-for-mobile,
    .hidden-for-desktop {
        display: block;
    }
}

@media only screen and (max-width: 480px) {
    .hidden-for-mobile-xs {
        display: none !important;
    }

    .visible-for-mobile-xs,
    .hidden-for-desktop-xs {
        display: block;
    }
}

/* Responsive menu */
/*---------------------------------------------*/

.navigation-menu ul {
    width: 100%;
    list-style: none;
}

    .navigation-menu ul li {
        position: relative;
        display: inline-block;
    }

        .navigation-menu ul li:hover {
            background-color: #0072bc;
            transition-duration: 0.3s;
        }

        .navigation-menu ul li ul {
            width: 200px;
        }

            .navigation-menu ul li ul li {
                background-color: #0072bc;
                display: block;
            }

            .navigation-menu ul li ul li ul li {
                background-color: #0072bc;
                display: block;
            }

            .navigation-menu ul li ul li:hover {
                background-color: #224388;
            }

                .navigation-menu ul li ul li ul li:hover {
                    background-color: #224388;
                }

                .navigation-menu ul li a,
                .navigation-menu ul li ul li a,
                .navigation-menu ul li ul li ul li a {
                    color: #ffffff;
                    font-family: 'Oswald', sans-serif;
                    font-weight: 400;
                    line-height: 50px;
                    padding: 0 20px;
                    text-decoration: none;
                }

                .navigation-menu ul li ul,
                .navigation-menu ul li ul li ul {
                    position: absolute;
                    left: 0;
                    display: none;
                    z-index: 999;
                    transition-duration: 0.5s;
                }

        .navigation-menu ul li:hover ul li ul {
            position: absolute;
            top: 0px;
            left: 200px;
            display: none;
            z-index: 999;
            transition-duration: 0.5s;
        }

                    .navigation-menu ul li:hover ul,
                    .navigation-menu ul li ul li,
                    .navigation-menu ul li ul:hover,
                    .navigation-menu ul li ul li ul:hover,
                    .navigation-menu ul li ul li:hover ul {
                        display: block;
                        transition-duration: 0.5s;
                    }

@media only screen and (max-width: 767px) {
    .navigation-menu > ul > li,
    .navigation-menu > ul > li > ul,
    .navigation-menu > ul > li > ul > li,
    .navigation-menu > ul > li > ul > li > ul,
    .navigation-menu > ul > li > ul > li > ul > li {
        display: block!important;
        width: 100%;
    }

        .navigation-menu > ul > li > ul > li,
        .navigation-menu > ul > li > ul > li > ul > li {
            background-color: #224388;
        }

            .navigation-menu > ul > li > ul > li:hover,
            .navigation-menu > ul > li > ul > li > ul > li:hover {
                background-color: #0072bc;
            }

        .navigation-menu > ul > li > ul > li > a {
            padding-left: 3em;
        }

            .navigation-menu > ul > li > ul > li > ul > li a {
                padding-left: 6em;
            }

    .navigation-menu ul li ul,
    .navigation-menu ul li ul li ul {
        position: initial!important;
    }
}

@media only screen and (max-width: 480px) {
    .navigation-menu ul {
        clear: both;
        display: block;
        width: 100%;
    }

        .navigation-menu ul li,
        .navigation-menu ul li ul,
        .navigation-menu ul li ul li,
        .navigation-menu ul li ul li ul {
            display: block;
            width: 100%;
            text-align: center;
        }
}

/* Primary layout elements */
/*---------------------------------------------*/

.primary_background_color {
    background-color: #224388;
}

.primary_color {
    color: #224388;
}

.secondary_background_color {
    background-color: #E6E6E6;
}

.secondary_color {
    color: #E6E6E6;
}

.section-wrapper.top-header {
    height: 32px;
    background: linear-gradient(to right, #d1d3d4 0%,#464749 100%);
}

@media only screen and (max-width: 995px) {
    .section-wrapper.top-header {
        display: none;
    }
}

.section-wrapper.header {
}

    .section-wrapper.header .section {
        height: 100px;
    }

#header_container {
    margin-top: 25px;
    overflow: hidden;
}

    #header_container .company_logo_and_name {
        float: left;
        overflow: hidden;
    }

    #header_container .company_contact_info {
        float: right;
        width: 199px;
        height: 50px;
        background-image: url('../Images/hills-contact-info.png');
        background-repeat: no-repeat;
        background-size: contain;
    }

.company_logo {
    width: 91px;
    height: 50px;
    background-image: url('../Images/hills-logo.png?v=1.0');
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-right: 20px;
}

.company_name {
    height: 50px;
    float: left;
}

    .company_name span {
        font-family: 'Teko', sans-serif;
        font-weight: 400;
        font-size: 30px;
        color: #224388;
        line-height: 50px;
    }

@media only screen and (max-width: 767px) {
    .section-wrapper.header .section {
        height: 80px;
    }

    #header_container {
        margin-top: 20px;
    }

        #header_container .company_contact_info {
            width: 159px;
            height: 40px;
        }

    .company_logo {
        width: 72px;
        height: 40px;
        margin-right: 18px;
    }

    .company_name {
        height: 40px;
    }

        .company_name span {
            font-size: 24px;
            line-height: 40px;
        }
}

@media only screen and (max-width: 480px) {
    .section-wrapper.header .section {
        height: 50px;
    }

    #header_container {
        margin-top: 10px;
    }

        #header_container .company_contact_info {
            display: none;
        }

    .company_logo {
        width: 54px;
        height: 30px;
    }

    .company_name {
        height: 30px;
    }

        .company_name span {
            font-size: 20px;
            line-height: 30px;
        }
}

.section-wrapper.sub-header {
    background-color: #224388;
}

    .section-wrapper.sub-header .section {
        min-height: 50px;
    }

@media only screen and (max-width: 480px) {
    .section-wrapper.sub-header .section {
        height: auto;
    }
}

.section-wrapper.content {
}

    .section-wrapper.content .section {
        min-height: 400px;
    }

.section-wrapper.footer-top {
    background-color: #1B2327;
}

.section-wrapper.footer-bottom {
    background-color: #12171A;
    color: #d1d3d4;
    font-size: 14px;
}

    .section-wrapper.footer-bottom .section {
        padding: 20px 0;
    }

.section-wrapper.footer-copyright {
    font-size: 14px;
}

    .section-wrapper.footer-copyright .section {
        padding: 10px 0;
    }

.margin-all {
    margin: 10px;
    /*margin: 1%;*/
}

.double-margin-all {
    margin: 20px;
    /*margin: 1%;*/
}

.double-margin-tb {
    margin-top: 20px;
    margin-bottom: 20px;
}

.margin-none {
    margin: 0;
}

.margin-none-t {
    margin-top: 0;
}

.margin-none-t-im {
    margin-top: 0 !important;
}

.margin-none-b-im {
    margin-bottom: 0!important;
}

.margin-none-l {
    margin-left: 0;
}

.margin-half-t {
    margin: 5px 0 0 0;
    /*margin: 0.5% 0 0 0;*/
}

.margin-t {
    margin: 10px 0 0 0;
    /*margin: 1% 0 0 0;*/
}

.margin-tb {
    margin: 10px 0;
    /*margin: 1% 0;*/
}

.margin-t {
    margin: 10px 0 0 0;
    /*margin: 1% 0 0 0;*/
}

.margin-r {
    margin: 0 10px 0 0;
    /*margin: 0 1% 0 0;*/
}

.margin-b {
    margin: 0 0 10px 0;
    /*margin: 0 0 1% 0;*/
}

.margin-half-b {
    margin: 0 0 5px 0;
    /*margin: 0 0 0.5% 0;*/
}

.margin-l {
    margin: 0 0 0 10px;
    /*margin: 0 0 0 1%;*/
}

.margin-tr {
    margin: 10px 10px 0 0;
    /*margin: 1% 1% 0 0;*/
}

.padding-all {
    padding: 10px;
    /*padding: 1%;*/
}

.padding-half-all {
    padding: 5px;
}

.padding-none {
    padding: 0;
}

.padding-tb {
    padding: 10px 0;
}

.padding-half-tb {
    padding: 5px 0;
}

.padding-half-r {
    padding: 0 5px 0 0;
}

.padding-t {
    padding: 10px 0 0 0;
}

.padding-r {
    padding: 0 10px 0 0;
}

.padding-tr {
    padding: 10px 10px 0 0;
}

.padding-l {
    padding: 0 0 0 10px;
}

.padding-b {
    padding: 0 0 10px 0;
}

.padding-half-t {
    padding: 5px 0 0 0;
}

.padding-half-b {
    padding: 0 0 5px 0;
}

.padding-lr {
    padding: 0 10px;
}

.padding-lrb {
    padding: 0 10px 10px 10px;
}

.no-border {
    border: 0 none;
}

.border-dashed-b {
    border-bottom: 1px dashed #D3D3D3;
}

.border-solid-t {
    border-top: 1px solid #D3D3D3;
}

.border-solid-b {
    border-bottom: 1px solid #D3D3D3;
}

.border-solid-tb {
    border-top: 1px solid #D3D3D3;
    border-bottom: 1px solid #D3D3D3;
}

.border-radius-all {
    border-radius: 3px;
}

.fl,
.float-left {
    float: left;
}

.fr,
.float-right {
    float: right;
}

.clearing {
    clear: both;
}

.clearing-container {
    overflow: hidden;
}

.lh {
    line-height: 24px;
}

.lal,
.tal,
.align-left {
    text-align: left;
}

.cal,
.tac,
.align-center,
.align-center-desktop-only,
.align-center-desktop-only-xs {
    text-align: center;
}

.ral,
.tar,
.align-right,
.align-right-desktop-only,
.align-right-desktop-only-xs {
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .align-right-desktop-only,
    .align-center-desktop-only {
        text-align: left;
    }
}

@media only screen and (max-width: 480px) {
    .align-right-desktop-only-xs,
    .align-center-desktop-only-xs {
        text-align: left;
    }
}

.vat {
    vertical-align: top;
}

.vam {
    vertical-align: middle;
}

.vab {
    vertical-align: bottom;
}

.buttons-lal,
.buttons_lal {
    text-align: left;
    margin: 5px 0;
}

.buttons-ral,
.buttons_ral {
    text-align: right;
    margin: 5px 0;
}

.hidden-column,
.hidden_column {
    display: none;
}

.display-none,
.display_none {
    display: none;
}

.display-inline {
    display: inline;
}

.display-inline-im {
    display: inline!important;
}

.display-inline-block {
    display: inline-block;
}

.display-block {
    display: block;
}

.visibility-hidden {
    visibility: hidden;
}

.info-text,
.error-text,
.success-text {
    padding: 10px;
    overflow: hidden;
    border-radius: 3px;
}

.info-text {
    background-color: #FCFAF2;
    border: 1px solid #FCEFA1;
    color: #3282FF;
}

    .info-text h1,
    .info-text h2,
    .info-text h3 {
        text-transform: none;
        color: #3282FF;
    }

.error-text {
    background-color: #FEF6F3;
    border: 1px solid #CD0A0A;
    color: #CD0A0A;
}

    .error-text h1,
    .error-text h2,
    .error-text h3 {
        text-transform: none;
        color: #CD0A0A;
    }

.success-text {
    background-color: #ddffdd;
    border: 1px solid #9bd89b;
    color: #64B164;
}

    .success-text h1,
    .success-text h2,
    .success-text h3 {
        text-transform: none;
        color: #64B164;
    }

.bordered-box {
    text-align: left;
    border: 1px solid #CCCCCC;
    overflow: hidden;
    border-radius: 3px;
}

.word_break_all {
    word-break: break-all;
}

.white-space-nowrap {
    white-space: nowrap;
}

.form-fieldset-container {
    border: 1px solid #CCCCCC;
    background-color: #FFF;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2);
}

.form-fieldset-legend {
    background-color: #224388;
    color: #FFF;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
}

.user-login-silhouette {
    background: url("../images/user-login-silhouette.png") no-repeat scroll center center #E6E6E6;
    height: 153px;
}

.user-change-password-silhouette {
    background: url("../images/user-change-password-silhouette.png") no-repeat scroll center center #E6E6E6;
    height: 153px;
}

.user-success-silhouette {
    background: url("../images/user-success-silhouette.png") no-repeat scroll center center #E6E6E6;
    height: 153px;
}

.large-success-tick {
    background: url("../images/success.png") no-repeat scroll top center #FFFFFF;
    height: 100px;
}

ul.password-requirements {
    padding-left: 50px;
}

    ul.password-requirements li {
        list-style-type: disc;
    }

.flat-panel-dialog .ui-dialog-titlebar {
    display: none;
}

.flat-panel-dialog.ui-dialog {
    padding: 0;
}

.flat-panel-dialog .ui-dialog-content {
}

.flat-panel-dialog,
.flat-panel-dialog .ui-dialog-content,
.flat-panel-dialog .ui-widget-content {
    background: none #FFF !important;
    border: none !important;    
}

.gdpr_container {
}

.gdpr_item {
    border: 1px solid #d3d3d3;
    margin: 5px 0;
    padding: 5px;
    /*border-radius: 4px;*/
}

.line_behind_text
{
    height: 30px;
}

    .line_behind_text .the_line
    {
        border-bottom: 1px solid #D3D3D3;
        height: 15px;
        text-align: center;
    }

    .line_behind_text .the_text
    {
        line-height: 30px;
        background-color: #FFF;
        padding: 0 10px;
    }

/* Form elements */
/*---------------------------------------------*/

span {
    cursor: default;
}

select:hover {
    cursor: pointer;
}

.literal,
.label {
    font-weight: normal;
}

.literal-above,
.small-literal-above {
    display: block;
    width: 100%;
    color: #224388;
}

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

.x-small-font-size {
    font-size: 13px;
}

.small-font-size {
    font-size: 14px;
}

.medium-font-size {
    font-size: 16px;
}

.large-font-size {
    font-size: 18px;
}

.x-large-font-size {
    font-size: 20px;
}

.xx-large-font-size {
    font-size: 24px;
}

.paragraph-text {
    display: block;
    margin: 5px 0;
    padding: 0;
    line-height: 22px;
}

/* Legacy table layout - phase out? */
.TableLayout {
    width: 100%;
    margin: 1px 0;
}

    .TableLayout td {
        padding: 1px 0;
        margin: 0;
    }

div.input_block,
p.input_block,
.form_fieldset {
    overflow: hidden;
    margin: 2px 0px;
    width: 100%;
}

    div.input_block span,
    .form_fieldset span {
        display: block;
        overflow: hidden;
        /*_height: 1%;*/
    }

/*.literal,*/
.literal70,
.literal100,
.literal125,
.literal150,
.literal200 {
    float: left;
    text-align: right;
    margin-right: 5px;
    padding: 1px;
    border: solid 1px #DCDCDC;
    clear: left;
}

div.input_block .noborder {
    border-color: #FFF;
}

.literal70 {
    width: 70px;
}

.literal100 {
    width: 100px;
}

.literal125 {
    width: 125px;
}

.literal150 {
    width: 150px;
}

.literal200 {
    width: 200px;
}

.form-fieldset {
}

    .form-fieldset .literal,
    .form-fieldset .label,
    .form-fieldset label,
    .form-fieldset span,
    .form-fieldset strong {
        line-height: 28px;
        display: inline-block;
    }

    .form-fieldset span.normal-line-height {
        line-height: normal;
    }

    /*.form-fieldset .literal,*/
    .form-fieldset .literal-above {
        font-weight: bold;
        font-size: 15px;
        line-height: 15px;
        margin-bottom: 5px;
    }

    .form-fieldset .small-literal-above {
        font-weight: bold;
        font-size: 13px;
        line-height: 13px;
        margin-bottom: 5px;
    }

    .form-fieldset .reserve-empty-space {
        min-height: 28px;
    }

    .form-fieldset .col,
    .form-fieldset .col-xs,
    .form-fieldset .single-centered-col {
        /*
        margin-top: 0.5%;
        margin-bottom: 0.5%;
        */
        
        margin-top: 5px;
        margin-bottom: 5px;
        
    }

        .form-fieldset .col.no-margin,
        .form-fieldset .col.no-margin-tb,
        .form-fieldset .col-xs.no-margin,
        .form-fieldset .col-xs.no-margin-tb {
            margin-top: 0;
            margin-bottom: 0;
        }

        .form-fieldset .col.no-margin-t,
        .form-fieldset .col-xs.no-margin-t {
            margin-top: 0;
        }

    /* New class to apply "no margin" to all group columns */
    .form-fieldset.no-margin-columns .col,
    .form-fieldset.no-margin-columns .col-xs {
        margin-top: 0;
        margin-bottom: 0;
    }

    .form-fieldset ul li {
        line-height: 28px;
    }

    .form-fieldset .inline-button {
        font-size: 15px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* 30-Sep-2019, DKG - Experimental ... */
    .form-fieldset .col > input[type=button],
    .form-fieldset .col > input[type=button],
    .form-fieldset .col > input[type=submit],
    .form-fieldset .col > input[type=text],
    .form-fieldset .col > input[type=password],
    .form-fieldset .col > select,
    .form-fieldset .col > textarea,
    .form-fieldset .col-xs > input[type=button],
    .form-fieldset .col-xs > input[type=button],
    .form-fieldset .col-xs > input[type=submit],
    .form-fieldset .col-xs > input[type=text],
    .form-fieldset .col-xs > input[type=password],
    .form-fieldset .col-xs > select,
    .form-fieldset .col-xs > textarea {
        display: block;
        width: 100%;
    }

/* On mobiles controls will wrap, therefore line height can be reduced. */
@media only screen and (max-width: 767px) {
    .form-fieldset .literal, .form-fieldset .label, .form-fieldset label, .form-fieldset span, .form-fieldset strong {
        line-height: 22px;
    }

    .form-fieldset .reserve-empty-space {
        min-height: 22px;
    }

    .form-fieldset ul li {
        line-height: 22px;
    }
}

.xx_small,
.xx-small-width {
    width: 50px;
}

.x_small,
.x-small-width {
    width: 100px;
}

.small,
.small-width {
    width: 150px;
}

.medium,
.medium-width {
    width: 200px;
}

.large,
.large-width {
    width: 250px;
}

.x_large,
.x-large-width {
    width: 300px;
}

.xx_large,
.xx-large-width {
    width: 400px;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 49%;
}

.one-third-width {
    width: 33%;
}

.two-thirds-width {
    width: 66%;
}

.one-quarter-width {
    width: 25%;
}

.full-width-max {
    max-width: 100%;
}

.Label {
}

.LabelMain {
    font-weight: bold;
}

.LabelError {
    color: #FF0000;
}

.LabelSuccess {
    color: #0000FF;
}

.LabelTitle {
    font-size: 22px;
    font-weight: bold;
}

.LabelMenu {
    font-weight: bold;
    display: block;
}

.LabelBold,
.label_bold,
.bold {
    font-weight: bold;
}

.noBold_im {
    font-weight: normal !important;
}

.LabelItalic,
.label_italic,
.italic {
    font-style: italic;
}

.Textbox,
.textbox,
.DropDownList,
.dropdownlist,
/*.CheckBox,*/
input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    border: 1px solid #CCCCCC;
    color: #464749;
    padding: 5px;
    /*margin: 1px;*/
    border-radius: 3px;
}

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus {
        border: 1px solid #224388;
    }

    input[type="text"].login,
    input[type="password"].login {
        border-top: none;
        border-right: none;
        border-bottom: 1px solid #464749;
        border-left: none;
        margin-bottom: 2px;
        border-radius: 0;
    }

        input[type="text"].login:focus,
        input[type="password"].login:focus {
            border-bottom: 3px solid #224388;
            margin-bottom: 0;
        }

.button_inside_textbox {
    position: relative;
}

    .button_inside_textbox input[type="text"] {
        display: block;
        width: 100%;
        padding-right: 35px;
    }

    .button_inside_textbox .the_button {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background-color: #224388;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        cursor: pointer;
    }

        .button_inside_textbox .the_button:hover {
            background-color: #0072bc;
        }

        .button_inside_textbox .the_button.search {
            background-image: url('../Images/button-search-icon.png');
            background-repeat: no-repeat;
            background-position: center center;
        }

        .button_inside_textbox .the_button.calendar {
            background-image: url('../Images/button-calendar-icon.png');
            background-repeat: no-repeat;
            background-position: center center;
        }

select {
    padding: 5px 4px 4px 4px;
}

.hide-excess,
.radio-button,
.check-box {
    overflow: hidden;
}

    .radio-button input[type=radio],
    .check-box input[type=checkbox] {
        float: left;
        margin-top: 7px;
    }

    .radio-button label,
    .check-box label {
        display: block;
        margin-left: 25px;
        line-height: 28px;
    }

@media only screen and (max-width: 767px) {
    .radio-button input[type=radio],
    .check-box input[type=checkbox] {
        margin-top: 4px;
    }

    .radio-button label,
    .check-box label {
        line-height: 22px;
    }
}

@media only screen and (max-width: 480px) {
    .radio-button,
    .check-box {
        width: 100%;
    }
}

/* CB + RB lists - needed? */

.check-box-list label {
    padding: 0 10px 0 5px;
    line-height: 28px;
}

@media only screen and (max-width: 480px) {
    .check-box-list {
        overflow: hidden;
    }

        .check-box-list input,
        .check-box-list label {
            float: left;
        }

        .check-box-list input {
            clear: left;
        }
}

/* Legacy buttons */
.Button,
.button-state-default,
input[type="button"],
input[type="submit"],
.ui-dialog .ui-dialog-buttonpane button {
    cursor: pointer;
    /*padding: 8px 20px;*/
    padding: 8px 0;
    /*border-radius: 5px;*/
    border: none;
    font-size: 16px;
    text-align: center;
    background-color: #224388;
    color: #ffffff;
    text-transform: uppercase;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2);
    border-radius: 3px;
}

.StdButton {
    display: block;
    width: 100%;
    height: 34px;
    vertical-align: middle;
    padding: 0px;
}

.ui-dialog .ui-dialog-buttonpane button {
    background: none;
}

.Button:hover,
.button-state-hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}

.Button:disabled,
.button-state-default:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    cursor: default;
}

/* RWD buttons with support for an icon */
.button-primary,
.button-secondary {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    text-decoration: none;
    border-radius: 3px;
    text-align: center;
}

    .button-primary span,
    .button-secondary span {
        font-size: 16px;
        vertical-align: middle;
        white-space: nowrap;
        display: inline-block;
        line-height: 24px;
    }

.button-primary {
    /* MustOverride: background-color */
}

    .button-primary span {
        /* MustOverride: color */
    }

    .button-primary:hover {
        /* MustOverride: background-color */
    }

        .button-primary:hover span {
            /* MustOverride: color */
        }

.button-secondary {
    /* MustOverride: background-color */
}

    .button-secondary span {
        /* MustOverride: color */
    }

/* Responsive layout - make buttons full width for mobile (portrait) */
@media only screen and (max-width: 480px) {
    .Button,
    .button-state-default,
    input[type="button"],
    input[type="submit"],
    .button-primary,
    .button-secondary {
        width: 100%;
        margin: 2px 0;
    }
}

.glyphicon-label {
    display: block; /* Should get inherited if inside a pragraph tag anyway */
    padding-left: 28px;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent;
    margin: 2px 0;
}

    .glyphicon-label.warning-message {
        background-image: url("../images/glyphicon-warning-message.png");
    }

    .glyphicon-label.circle-info {
        background-image: url("../images/glyphicon-circle-info.png");
    }

/* Tables */
/*---------------------------------------------*/

.responsive-table,
.responsive-table-xs {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    margin: 10px 0;
    padding: 10px;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2);
}

    .responsive-table-xs.limited {
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .responsive-table .desktop-header,
    .responsive-table-xs .desktop-header {
        display: block;
        border-bottom: 1px solid #224388;
        padding: 0 10px;
    }

    .responsive-table .desktop-footer,
    .responsive-table-xs .desktop-footer {
        display: block;
        border-top: 1px solid #224388;
        padding: 0 10px;
        margin-top: 5px;
    }

    .responsive-table .mobile-header,
    .responsive-table-xs .mobile-header {
        display: none;
    }

    .responsive-table-borderless .row-item,
    .responsive-table .row-item,
    .responsive-table-xs .row-item {
        padding: 5px 10px;
    }

        .responsive-table .row-item:hover,
        .responsive-table-xs .row-item:hover {
            border-left: 5px solid #224388;
            padding-left: 5px;
        }

        .responsive-table-borderless .row-item.alt,
        .responsive-table .row-item.alt,
        .responsive-table-xs .row-item.alt {
            background-color: #E6E6E6;
        }

    .responsive-table .footer-item,
    .responsive-table-xs .footer-item {
        font-weight: bold;
        padding: 0 10px;
    }

@media only screen and (max-width: 767px) {
    .responsive-table {
        border: none;
        padding: 0;
    }

        .responsive-table .desktop-header,
        .responsive-table .desktop-footer {
            display: none;
        }

        .responsive-table .mobile-header {
            display: block;
        }

        .responsive-table .row-item {
            border: 1px solid #D3D3D3;
            border-radius: 3px;
            margin: 10px 0 0 0;
        }

            .responsive-table .row-item:hover {
                padding-left: 6px;
            }
}

@media only screen and (max-width: 480px) {
    .responsive-table-xs {
        border: none;
        padding: 0;
    }

        .responsive-table-xs .desktop-header,
        .responsive-table-xs .desktop-footer {
            display: none;
        }

        .responsive-table-xs .mobile-header {
            display: block;
        }

        .responsive-table-xs .row-item {
            border: 1px solid #D3D3D3;
            border-radius: 3px;
            margin: 10px 0 0 0;
        }

            .responsive-table-xs .row-item:hover {
                padding-left: 6px;
            }
}

.standard_grid {
    font-size: 14px;
    /* MustOverride: color */
    border-collapse: collapse;
    border: 1px solid #D9D9D9;
    width: 100%;
    /*margin: 10px 0;*/
}

    .standard_grid th,
    .standard_grid td {
        padding: 5px;
        text-align: left;
        vertical-align: top;
    }

    .standard_grid th {
        border: none;
        font-weight: bold;
        /* MustOverride: background-color, color */
    }

        .standard_grid th a {
        }

    .standard_grid td {
        border: none;
        /* MustOverride: background-color, color */
    }

        .standard_grid td a {
        }

    .standard_grid .alt td {
        /* MustOverride: background-color, color */
    }

    .standard_grid .unselected td {
        /* MustOverride: background-color, color */
        cursor: default;
    }

    .standard_grid .selected td {
        /* MustOverride: background-color, color */
        cursor: default;
    }

    .standard_grid th.ral,
    .standard_grid td.ral {
        text-align: right;
    }

.standard_grid_container {
    padding: 0;
    margin: 10px 0;
    border: solid 1px #CCC;
    overflow: scroll;
    overflow-x: hidden;
    background-color: #FFF;
}

@media only screen and (max-width: 767px) {
    .standard_grid.responsive {
        border: none;
    }

        .standard_grid.responsive thead,
        .standard_grid.responsive tr.legacy_datagrid_header {
            display: none;
        }

        .standard_grid.responsive tr {
            margin-bottom: 1%;
            display: block;
            border: 1px solid #D9D9D9;
            /*border-radius: 5px;*/
        }

            .standard_grid.responsive tr:last-child {
                margin-bottom: 0;
            }

        .standard_grid.responsive td {
            position: relative;
            display: block;
            padding-left: 35%;
            min-height: 29px;
        }

            .standard_grid.responsive td:last-child {
                /*border-bottom: 0;*/
            }

            .standard_grid.responsive td:before {
                content: attr(data-header-text);
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 33%;
                padding: 5px 0;
                text-indent: 10px;
                /* MustOverride: background-color, color */
            }

            .standard_grid.responsive td.ral,
            .standard_grid.responsive td.cal {
                text-align: left;
            }
}

/* Styles to make the file upload control look half decent */
/*---------------------------------------------*/

div.file_inputs {
    position: relative;
    /*width: 77px;*/
    height: 39px;
    overflow: hidden;
}

.fake_file {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    width: 100%;
    height: 39px;
}

.real_file {
    position: absolute;
    top: 0px;
    right: 0px;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width: 100%;
    height: 39px;
}

/* JQuery UI Overrides */
/*---------------------------------------------*/

/* To fix IE8 issue where the overlay is larger than the screen therefore forcing scrollbars to display */
.ui-widget-overlay {
    position: fixed;
    background: #224388;
    opacity: .7;
    filter: Alpha(Opacity=70); /* support: IE8 */
}

.ui-datepicker {
    display: none;
}

.ui-widget-content a {
    /* MustOverride: color */
}

.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
}

    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-family: Arial, Helvetica, sans-serif;
    }

.ui-widget-content {
    color: #464749;
}

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
        border: 1px solid #0072BC;
        background: #224388;
    }

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 200px;
}

/* Metro checkbox */
/*---------------------------------------------*/

.metro-checkbox input[type="checkbox"] {
    display: none;
}

    .metro-checkbox input[type="checkbox"] + label {
    }

        .metro-checkbox input[type="checkbox"] + label span {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 0 0 0 5px;
            vertical-align: middle;
            background: url("../images/boxed-checkbox.png?v=0.1") center center no-repeat;
            cursor: pointer;
        }

    .metro-checkbox input[type="checkbox"]:checked + label span {
        background: url("../images/boxed-checkbox-selected.png?v=0.2") center center no-repeat;
    }

/* Catalogue Items */
/*---------------------------------------------*/

.digits-item {
    padding: 5px;
    text-align: center;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,.2);
}

.catalogue-item {
    padding: 5px;
    text-align: center;
    overflow: hidden;
}

.catalogue-item:hover {
    cursor: pointer;
}

.catalogue-img {
    opacity: 0.9;
    display: inline-block;
    border: 1px solid #cccccc;
    max-width: 250px;
    max-width: -webkit-fill-available;
}

.catalogue-item:hover .catalogue-img {
    opacity: 1.0;
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}

.catalogue-txt {
    font-family: 'Teko', sans-serif;
    color: #224388;
    font-size: 26px;
}

.catalogue-hr {
    margin-left: 25%;
    border-bottom: 2px solid #CCCCCC;
}

/* Misc */
/*---------------------------------------------*/
.literal.text_link:hover,
.literal-above.text_link:hover,
.small-literal-above.text_link:hover {
    color: #0072bc;
    cursor: pointer;
}

.search-filters-clear,
.order-line-edit,
.order-line-removal {
    background-image: url('../Images/button-icon-sprite.png');
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.search-filters-clear {
    background-position: 0px 0px;
}

    .search-filters-clear:hover {
        background-position: 0px -28px;
    }

.order-line-edit {
    background-position: -56px 0px;
}

    .order-line-edit:hover {
        background-position: -56px -28px;
    }

.order-line-removal {
    background-position: -28px 0px;
}

    .order-line-removal:hover {
        background-position: -28px -28px;
    }

@media only screen and (max-width: 767px) {
    .order-line-edit,
    .order-line-removal {
        width: 22px;
        height: 22px;
        background-size: contain;
    }
}

.summary-phone-icon,
.summary-email-icon {
    height: 16px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    padding-left: 22px;
    margin-top: 10px;
}

.summary-phone-icon {
    background-image: url('../Images/button-phone-icon.png');
}

.summary-email-icon {
    background-image: url('../Images/button-email-icon.png');
}

.plate {
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: inset 0px 0px 0px 1px #000, 0px 2px 4px 0px rgba(0,0,0,0.5);
    text-align: center;
    padding: 4px 8px;
    font-size: 150%;
    line-height: 1.1;
    word-wrap: break-word;
    background: #fff;
    border: 2px solid #fff;
}

    .plate.front {
        background: #fff;
        border: 2px solid #fff;
    }

    .plate.rear {
        background: #FBDA06;
        border: 2px solid #FBDA06;
    }

    .plate.pair {
        background: #ffffff;
        background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 46%, #fbda06 54%, #fbda06 71%, #fbda06 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, #ffffff), color-stop(46%, #ffffff), color-stop(54%, #fbda06), color-stop(71%, #fbda06), color-stop(100%, #fbda06));
        background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 46%, #fbda06 54%, #fbda06 71%, #fbda06 100%);
        background: -o-linear-gradient(left, #ffffff 0%, #ffffff 46%, #fbda06 54%, #fbda06 71%, #fbda06 100%);
        background: -ms-linear-gradient(left, #ffffff 0%, #ffffff 46%, #fbda06 54%, #fbda06 71%, #fbda06 100%);
        background: linear-gradient(to right, #ffffff 0%, #ffffff 46%, #fbda06 54%, #fbda06 71%, #fbda06 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fbda06', GradientType=1 );
        border: 2px solid #fff;
    }

span.plate-format-ok {
    color: #64B164;
}

span.plate-format-not-ok {
    color: #CD0A0A;
}

.autoComplete {
    background-repeat: no-repeat;
    background-color: transparent;
    padding-left: 25px;
    background-position: left 6px top 4px;
}

.autoComplete {
    background-image: url(../Images/glyphicon-search.png?v=0.1);
}