/***********************************************
Global Data Exchange - AngularJS stylesheet
v1.0.0.0 - (c) Global Data Exchange 2015
***********************************************/
/***********************************************
Global Data Exchange - gdx.library.ui
v1.0.0.0 - (c) Global Data Exchange 2015
***********************************************/
/***********************************************
Global Data Exchange - jQuery UI Library
v1.0.0.0 - (c) Global Data Exchange 2015
***********************************************/
/***********************************************
Global Data Exchange - WorldLink UI library
v1.0.0.0 - (c) Global Data Exchange 2015
***********************************************/
.imgW15_unchecked { 
                background-image: url("gdx.mendrix.worldlink.ui/unchecked.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW15_checked { 
                background-image: url("gdx.mendrix.worldlink.ui/checked.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW20_pdfdoc { 
                background-image: url("gdx.mendrix.worldlink.ui/pdfdoc.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW20_txtdoc { 
                background-image: url("gdx.mendrix.worldlink.ui/txtdoc.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW20_imgdoc { 
                background-image: url("gdx.mendrix.worldlink.ui/imgdoc.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW20_mswdoc { 
                background-image: url("gdx.mendrix.worldlink.ui/mswdoc.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW20_xlsdoc { 
                background-image: url("gdx.mendrix.worldlink.ui/xlsdoc.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW20_defdoc { 
                background-image: url("gdx.mendrix.worldlink.ui/defdoc.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW10_back { 
                background-image: url("gdx.mendrix.worldlink.ui/back.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_next { 
                background-image: url("gdx.mendrix.worldlink.ui/next.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW13_nextwhite { 
                background-image: url("gdx.mendrix.worldlink.ui/nextwhite.png"); 
                width: 1.3em; 
                height: 1.3em; 
            }.imgW13_nextcolored { 
                background-image: url("gdx.mendrix.worldlink.ui/nextcolored.png"); 
                width: 1.3em; 
                height: 1.3em; 
            }.imgW10_nextcolored { 
                background-image: url("gdx.mendrix.worldlink.ui/nextcolored.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW15_alert { 
                background-image: url("gdx.mendrix.worldlink.ui/alert.gif"); 
                width: 1.5em; 
                height: 1.2788844621513944em; 
            }.imgW30_alert { 
                background-image: url("gdx.mendrix.worldlink.ui/alert.gif"); 
                width: 3em; 
                height: 2.557768924302789em; 
            }.imgW17_close { 
                background-image: url("gdx.mendrix.worldlink.ui/close.png"); 
                width: 1.7em; 
                height: 1.7em; 
            }.imgW20_close { 
                background-image: url("gdx.mendrix.worldlink.ui/close.png"); 
                width: 2em; 
                height: 2em; 
            }.imgW10_close { 
                background-image: url("gdx.mendrix.worldlink.ui/close.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_upload { 
                background-image: url("gdx.mendrix.worldlink.ui/upload.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_greendot { 
                background-image: url("gdx.mendrix.worldlink.ui/greendot.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_orangedot { 
                background-image: url("gdx.mendrix.worldlink.ui/orangedot.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_blackdot { 
                background-image: url("gdx.mendrix.worldlink.ui/blackdot.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_bluedot { 
                background-image: url("gdx.mendrix.worldlink.ui/bluedot.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_reddot { 
                background-image: url("gdx.mendrix.worldlink.ui/reddot.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_purpledot { 
                background-image: url("gdx.mendrix.worldlink.ui/purpledot.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW20_pdfcolliblue { 
                background-image: url("gdx.mendrix.worldlink.ui/pdfcolliblue.png"); 
                width: 2em; 
                height: 1.9498746867167918em; 
            }.imgW30_pdfcolliblue { 
                background-image: url("gdx.mendrix.worldlink.ui/pdfcolliblue.png"); 
                width: 3em; 
                height: 2.924812030075188em; 
            }.imgW15_nl { 
                background-image: url("gdx.mendrix.worldlink.ui/nl.png"); 
                width: 1.5em; 
                height: 1em; 
            }.imgW15_en { 
                background-image: url("gdx.mendrix.worldlink.ui/en.png"); 
                width: 1.5em; 
                height: 1em; 
            }.imgW15_de { 
                background-image: url("gdx.mendrix.worldlink.ui/de.png"); 
                width: 1.5em; 
                height: 1em; 
            }.imgW15_fr { 
                background-image: url("gdx.mendrix.worldlink.ui/fr.png"); 
                width: 1.5em; 
                height: 1em; 
            }.imgW15_pl { 
                background-image: url("gdx.mendrix.worldlink.ui/pl.png"); 
                width: 1.5em; 
                height: 1em; 
            }.imgW125_logo { 
                background-image: url("gdx.mendrix.worldlink.ui/logo.png"); 
                width: 12.5em; 
                height: 1.7372881355932204em; 
            }.imgW112_menulogo { 
                background-image: url("gdx.mendrix.worldlink.ui/menulogo.png"); 
                width: 11.2em; 
                height: 0.8889817232375978em; 
            }.imgW10_edit { 
                background-image: url("gdx.mendrix.worldlink.ui/edit.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW15_edit { 
                background-image: url("gdx.mendrix.worldlink.ui/edit.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW20_edit { 
                background-image: url("gdx.mendrix.worldlink.ui/edit.png"); 
                width: 2em; 
                height: 2em; 
            }.imgW150_loader { 
                background-image: url("gdx.mendrix.worldlink.ui/loader.gif"); 
                width: 15em; 
                height: 3.340909090909091em; 
            }.imgW10_add { 
                background-image: url("gdx.mendrix.worldlink.ui/add.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW15_search { 
                background-image: url("gdx.mendrix.worldlink.ui/search.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW10_previouscolored { 
                background-image: url("gdx.mendrix.worldlink.ui/previouscolored.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW15_trash { 
                background-image: url("gdx.mendrix.worldlink.ui/trash.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW30_trash { 
                background-image: url("gdx.mendrix.worldlink.ui/trash.png"); 
                width: 3em; 
                height: 3em; 
            }.imgW15_deleteBlue { 
                background-image: url("gdx.mendrix.worldlink.ui/deleteBlue.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW20_addresses { 
                background-image: url("gdx.mendrix.worldlink.ui/addresses.png"); 
                width: 2em; 
                height: 2em; 
            }.imgW15_activity { 
                background-image: url("gdx.mendrix.worldlink.ui/activity.png"); 
                width: 1.5em; 
                height: 1.4999999999999998em; 
            }.imgW30_clientlist { 
                background-image: url("gdx.mendrix.worldlink.ui/clientlist.png"); 
                width: 3em; 
                height: 3em; 
            }.imgW15_location { 
                background-image: url("gdx.mendrix.worldlink.ui/location.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW15_calendar { 
                background-image: url("gdx.mendrix.worldlink.ui/calendar.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW15_chevronleft { 
                background-image: url("gdx.mendrix.worldlink.ui/chevronleft.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW30_chevronleft { 
                background-image: url("gdx.mendrix.worldlink.ui/chevronleft.png"); 
                width: 3em; 
                height: 3em; 
            }.imgW15_deleteblue { 
                background-image: url("gdx.mendrix.worldlink.ui/deleteblue.png"); 
                width: 1.5em; 
                height: 1.5em; 
            }.imgW10_calendarpick { 
                background-image: url("gdx.mendrix.worldlink.ui/calendarpick.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW20_tracktrace { 
                background-image: url("gdx.mendrix.worldlink.ui/tracktrace.png"); 
                width: 2em; 
                height: 2em; 
            }.imgW30_pdffrightblue { 
                background-image: url("gdx.mendrix.worldlink.ui/pdffrightblue.png"); 
                width: 3em; 
                height: 2.924812030075188em; 
            }.imgW15_pdffrightblue { 
                background-image: url("gdx.mendrix.worldlink.ui/pdffrightblue.png"); 
                width: 1.5em; 
                height: 1.462406015037594em; 
            }.imgW30_invoiceSign { 
                background-image: url("gdx.mendrix.worldlink.ui/invoiceSign.png"); 
                width: 3em; 
                height: 3em; 
            }.imgW30_checkedround { 
                background-image: url("gdx.mendrix.worldlink.ui/checkedround.png"); 
                width: 3em; 
                height: 3em; 
            }.imgW30_chevronright { 
                background-image: url("gdx.mendrix.worldlink.ui/chevronright.png"); 
                width: 3em; 
                height: 3em; 
            }.imgW10_download { 
                background-image: url("gdx.mendrix.worldlink.ui/download.png"); 
                width: 1em; 
                height: 1.01em; 
            }.imgW10_printblue { 
                background-image: url("gdx.mendrix.worldlink.ui/printblue.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_backblue { 
                background-image: url("gdx.mendrix.worldlink.ui/backblue.png"); 
                width: 1em; 
                height: 1em; 
            }/* Include this file in your html if you are using the CSP mode. */

@charset "UTF-8";

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}

ng\:form {
    display: block;
}
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1;
    vertical-align: baseline;
    background: transparent;
    /*font-family:Verdana,"Trebuchet MS",Helvetica,Arial,sans-serif;*/
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Helvetica", sans-serif;
    /*font-family: helvetica, sans-serif;*/
    color: black;
}

body {
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

input,
textarea {
    /*font-family: Cambria, Georgia, serif;*/
    font-family: Verdana, Tahoma, "Bitstream Vera Sans", "DejaVu Sans", "Droid Sans", Legendum, Lucida Grande;
    font-size: inherit;
}

/* override defaults */
h1 {
    color: #E41736 !important;
}

/* Override ORDERS page styling */
#orderView .number1 {
    width: 3em !important;
    text-align: right;
}

#orderView .number2 {
    width: 1.7em !important;
    text-align: left;
}/* default font sizes*/

html.size240 {
    font-size: 4.205714286px !important;
}

html.size320 {
    font-size: 5.607619048px !important;
}

html.size480 {
    font-size: 8.411428571px !important;
}

html.size640 {
    font-size: 11.2152381px !important;
}

html.size800 {
    font-size: 14.01904762px !important;
}

html.size1024 {
    font-size: 17.94438095px !important;
}

html.size1200 {
    font-size: 21.02857143px !important;
}

html.size1280 {
    font-size: 22.43047619px !important;
}

html.size1360 {
    font-size: 23.83238095px !important;
}

html.size1440 {
    font-size: 25.23428571px !important;
}

html.size1536 {
    font-size: 26.91657143px !important;
}

html.size1600 {
    font-size: 28.03809524px !important;
}

html.size1680 {
    font-size: 29.44px !important;
}

html.size1920 {
    font-size: 33.64571429px !important;
}

html.size2560 {
    font-size: 44.86095238px !important;
}

/* reset scaling */
html.mobile.landscape body,
html.mobile.portrait body,
html.desktop.landscape body,
html.desktop.portrait body {
    font-size: 100%;
}

/* scaling for mobile phones */
html.mobile.landscape body {
    font-size: 1.2em !important;
}

html.mobile.portrait body {
    font-size: 1.8em !important;
}

/* scaling for desktops and tablets */

html.desktop.landscape body {
    font-size: 0.5em !important;
}

html.desktop.landscape.size240 body,
html.desktop.landscape.size320 body,
html.desktop.landscape.size480 body,
html.desktop.landscape.size640 body {
    font-size: 0.9em !important;
}

html.desktop.landscape.size800 body {
    font-size: 0.8em !important;
}

html.desktop.landscape.size1024 body {
    font-size: 0.7em !important;
}

html.desktop.landscape.size1200 body,
html.desktop.landscape.size1280 body {
    font-size: 0.6em !important;
}
.ajax-file-upload-statusbar {
    border: 0.1em solid #155ea8;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1em;
    box-sizing: Border-box;
}

.ajax-file-upload-filename {
    width: 100%;
    height: auto;
    margin-bottom: 0.5em;
    font-weight: Bold;
    color: #E41736;
}

.ajax-file-upload-progress {
    margin-bottom: 0.5em;
    position: relative;
    width: 100%;
    border: 0.1em solid #155ea8;
    padding: 0.1em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    display: inline-block;
    box-sizing: Border-box;
}

.ajax-file-upload-bar {
    background-color: #155ea8;
    width: 0;
    height: 1.2em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    color: #FFFFFF;
    padding-top: 0.1em;
    box-sizing: border-box;
}

.ajax-file-upload-percent {
    position: absolute;
    display: inline-block;
    top: 3px;
    left: 48%;
}

.ajax-file-upload-red {
    background-color: #155ea8;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    display: inline-block;
    color: #fff;
    font-weight: normal;
    padding: 0.5em;
    text-decoration: none;
    cursor: pointer !important;
    vertical-align: top;
    margin-right: 1em;
}

.ajax-file-upload-green {
    background-color: #155ea8;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    display: inline-block;
    color: #fff;
    font-weight: normal;
    padding: 0.5em;
    text-decoration: none;
    cursor: pointer !important;
    vertical-align: top;
    margin-right: 1em;
}

.ajax-file-upload {
    font-weight: bold;
    cursor: pointer !important;
    line-height: 1em;
    height: 1.5em;
    width: 1.5em;
    margin: 0 1.5em 0.5em 0;
    display: inline-block;
    text-decoration: none;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1em;
    color: #fff;
    background-color: #155ea8;
    border: none;
    vertical-align: middle;
}

    .ajax-file-upload:hover {
        background-color: khaki;
    }

.ajax-upload-dragdrop {
    border: 0.2em dotted #155ea8;
    color: black;
    text-align: left;
    padding: 1em;
    box-sizing: Border-box;
    margin-bottom: 1em;
}

    .ajax-upload-dragdrop.state-hover {
        border: 0.2em solid #155ea8;
    }

.ajax-file-upload-error {
    color: red;
}
.ui-timepicker-wrapper {
    overflow-y: auto;
    height: 150px;
    width: 6.5em;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    outline: none;
    z-index: 10001;
    margin: 0;
}

    .ui-timepicker-wrapper.ui-timepicker-with-duration {
        width: 13em;
    }

        .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
        .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
            width: 11em;
        }

.ui-timepicker-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-timepicker-duration {
    margin-left: 5px;
    color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
    color: #888;
}

.ui-timepicker-list li {
    padding: 3px 0 3px 5px;
    cursor: pointer !important;
    white-space: nowrap;
    color: #000;
    list-style: none;
    margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: #fff;
    color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: #1980EC;
    color: #fff;
}

    li.ui-timepicker-selected .ui-timepicker-duration,
    .ui-timepicker-list li:hover .ui-timepicker-duration {
        color: #ccc;
    }

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: #888;
    cursor: default;
}

    .ui-timepicker-list li.ui-timepicker-disabled:hover,
    .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
        background: #f2f2f2;
    }
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
    display: none;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}

.ui-helper-clearfix:after {
    clear: both;
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0);
    /* support: IE8 */
}

.ui-front {
    z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
    pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-widget-icon-block {
    left: 50%;
    margin-left: -8px;
    display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 2px 0 0 0;
    padding: .5em .5em .5em .7em;
    font-size: 100%;
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
}

.ui-menu .ui-menu {
    position: absolute;
}

.ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    /* support: IE10, see #8844 */
    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em;
}

.ui-menu .ui-menu-divider {
    margin: 5px 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0 0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
    margin: -1px;
}

/* icon support */
.ui-menu-icons {
    position: relative;
}

.ui-menu-icons .ui-menu-item-wrapper {
    padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
    left: auto;
    right: 0;
}

.ui-button {
    padding: .4em 1em;
    display: inline-block;
    position: relative;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Support: IE <= 11 */
    overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
    text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
    width: 2em;
    box-sizing: border-box;
    text-indent: -9999px;
    white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
    text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
    padding: 0;
    width: 2.1em;
    height: 2.1em;
    text-indent: -9999px;
    white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
    width: auto;
    height: auto;
    text-indent: 0;
    white-space: normal;
    padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.ui-controlgroup {
    vertical-align: middle;
    display: inline-block;
}

.ui-controlgroup>.ui-controlgroup-item {
    float: left;
    margin-left: 0;
    margin-right: 0;
}

.ui-controlgroup>.ui-controlgroup-item:focus,
.ui-controlgroup>.ui-controlgroup-item.ui-visual-focus {
    z-index: 9999;
}

.ui-controlgroup-vertical>.ui-controlgroup-item {
    display: block;
    float: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
    box-sizing: border-box;
}

.ui-controlgroup .ui-controlgroup-label {
    padding: .4em 1em;
}

.ui-controlgroup .ui-controlgroup-label span {
    font-size: 80%;
}

.ui-controlgroup-horizontal .ui-controlgroup-label+.ui-controlgroup-item {
    border-left: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label+.ui-controlgroup-item {
    border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
    border-right: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
    border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
    /* Support: IE8 only, Android < 4.4 only */
    width: 75%;
    width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
    box-shadow: inset 1px 1px 1px #ccc;
    border-radius: .12em;
    border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
    width: 16px;
    height: 16px;
    border-radius: 1em;
    overflow: visible;
    border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background-image: none;
    width: 8px;
    height: 8px;
    border-width: 4px;
    border-style: solid;
}

.ui-checkboxradio-disabled {
    pointer-events: none;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 45%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em;
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}

.ui-dialog .ui-resizable-n {
    height: 2px;
    top: 0;
}

.ui-dialog .ui-resizable-e {
    width: 2px;
    right: 0;
}

.ui-dialog .ui-resizable-s {
    height: 2px;
    bottom: 0;
}

.ui-dialog .ui-resizable-w {
    width: 2px;
    left: 0;
}

.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
    width: 7px;
    height: 7px;
}

.ui-dialog .ui-resizable-se {
    right: 0;
    bottom: 0;
}

.ui-dialog .ui-resizable-sw {
    left: 0;
    bottom: 0;
}

.ui-dialog .ui-resizable-ne {
    right: 0;
    top: 0;
}

.ui-dialog .ui-resizable-nw {
    left: 0;
    top: 0;
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-resizable {
    position: relative;
}

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

.ui-progressbar {
    height: 2em;
    text-align: left;
    overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
    background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
    height: 100%;
    filter: alpha(opacity=25);
    /* support: IE8 */
    opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none;
}

.ui-selectable {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    padding: 2px 0.4em;
    margin: 0.5em 0 0 0;
    height: auto;
    border: 0;
}

.ui-selectmenu-open {
    display: block;
}

.ui-selectmenu-text {
    display: block;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
    text-align: left;
    white-space: nowrap;
    width: 14em;
}

.ui-selectmenu-icon.ui-icon {
    float: right;
    margin-top: 0;
}

.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit;
}

.ui-slider-horizontal {
    height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}

.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: .222em 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 2em;
}

.ui-spinner-button {
    width: 1.6em;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0;
}

/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none;
}

.ui-spinner-up {
    top: 0;
}

.ui-spinner-down {
    bottom: 0;
}

.ui-tabs {
    position: relative;
    /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
}

body .ui-tooltip {
    border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.ui-widget .ui-widget {
    font-size: 1em;
}

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

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
}

.ui-widget-content a {
    color: #333333;
}

.ui-widget-header {
    border: 1px solid #dddddd;
    background: #e9e9e9;
    color: #333333;
    font-weight: bold;
}

.ui-widget-header a {
    color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
    color: #454545;
    text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border: 1px solid #cccccc;
    background: #ededed;
    font-weight: normal;
    color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
    color: #2b2b2b;
    text-decoration: none;
}

.ui-visual-focus {
    box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.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 #003eff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
    border: #003eff;
    background-color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #ffffff;
    text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}

.ui-state-checked {
    border: 1px solid #dad55e;
    background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #f1a899;
    background: #fddfdf;
    color: #5f3f3f;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
    color: #5f3f3f;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
    color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    /* support: IE8 */
    font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    /* support: IE8 */
    background-image: none;
}

.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35);
    /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

/* positioning */
.ui-icon-blank {
    background-position: 16px 16px;
}

.ui-icon-caret-1-n {
    background-position: 0 0;
}

.ui-icon-caret-1-ne {
    background-position: -16px 0;
}

.ui-icon-caret-1-e {
    background-position: -32px 0;
}

.ui-icon-caret-1-se {
    background-position: -48px 0;
}

.ui-icon-caret-1-s {
    background-position: -65px 0;
}

.ui-icon-caret-1-sw {
    background-position: -80px 0;
}

.ui-icon-caret-1-w {
    background-position: -96px 0;
}

.ui-icon-caret-1-nw {
    background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
    background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
    background-position: -144px 0;
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
    background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
    background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
    background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
}

.ui-icon-arrow-4 {
    background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px;
}

.ui-icon-extlink {
    background-position: -32px -80px;
}

.ui-icon-newwin {
    background-position: -48px -80px;
}

.ui-icon-refresh {
    background-position: -64px -80px;
}

.ui-icon-shuffle {
    background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px;
}

.ui-icon-folder-open {
    background-position: -16px -96px;
}

.ui-icon-document {
    background-position: -32px -96px;
}

.ui-icon-document-b {
    background-position: -48px -96px;
}

.ui-icon-note {
    background-position: -64px -96px;
}

.ui-icon-mail-closed {
    background-position: -80px -96px;
}

.ui-icon-mail-open {
    background-position: -96px -96px;
}

.ui-icon-suitcase {
    background-position: -112px -96px;
}

.ui-icon-comment {
    background-position: -128px -96px;
}

.ui-icon-person {
    background-position: -144px -96px;
}

.ui-icon-print {
    background-position: -160px -96px;
}

.ui-icon-trash {
    background-position: -176px -96px;
}

.ui-icon-locked {
    background-position: -192px -96px;
}

.ui-icon-unlocked {
    background-position: -208px -96px;
}

.ui-icon-bookmark {
    background-position: -224px -96px;
}

.ui-icon-tag {
    background-position: -240px -96px;
}

.ui-icon-home {
    background-position: 0 -112px;
}

.ui-icon-flag {
    background-position: -16px -112px;
}

.ui-icon-calendar {
    background-position: -32px -112px;
}

.ui-icon-cart {
    background-position: -48px -112px;
}

.ui-icon-pencil {
    background-position: -64px -112px;
}

.ui-icon-clock {
    background-position: -80px -112px;
}

.ui-icon-disk {
    background-position: -96px -112px;
}

.ui-icon-calculator {
    background-position: -112px -112px;
}

.ui-icon-zoomin {
    background-position: -128px -112px;
}

.ui-icon-zoomout {
    background-position: -144px -112px;
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-icon-wrench {
    background-position: -176px -112px;
}

.ui-icon-gear {
    background-position: -192px -112px;
}

.ui-icon-heart {
    background-position: -208px -112px;
}

.ui-icon-star {
    background-position: -224px -112px;
}

.ui-icon-link {
    background-position: -240px -112px;
}

.ui-icon-cancel {
    background-position: 0 -128px;
}

.ui-icon-plus {
    background-position: -16px -128px;
}

.ui-icon-plusthick {
    background-position: -32px -128px;
}

.ui-icon-minus {
    background-position: -48px -128px;
}

.ui-icon-minusthick {
    background-position: -64px -128px;
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-icon-key {
    background-position: -112px -128px;
}

.ui-icon-lightbulb {
    background-position: -128px -128px;
}

.ui-icon-scissors {
    background-position: -144px -128px;
}

.ui-icon-clipboard {
    background-position: -160px -128px;
}

.ui-icon-copy {
    background-position: -176px -128px;
}

.ui-icon-contact {
    background-position: -192px -128px;
}

.ui-icon-image {
    background-position: -208px -128px;
}

.ui-icon-video {
    background-position: -224px -128px;
}

.ui-icon-script {
    background-position: -240px -128px;
}

.ui-icon-alert {
    background-position: 0 -144px;
}

.ui-icon-info {
    background-position: -16px -144px;
}

.ui-icon-notice {
    background-position: -32px -144px;
}

.ui-icon-help {
    background-position: -48px -144px;
}

.ui-icon-check {
    background-position: -64px -144px;
}

.ui-icon-bullet {
    background-position: -80px -144px;
}

.ui-icon-radio-on {
    background-position: -96px -144px;
}

.ui-icon-radio-off {
    background-position: -112px -144px;
}

.ui-icon-pin-w {
    background-position: -128px -144px;
}

.ui-icon-pin-s {
    background-position: -144px -144px;
}

.ui-icon-play {
    background-position: 0 -160px;
}

.ui-icon-pause {
    background-position: -16px -160px;
}

.ui-icon-seek-next {
    background-position: -32px -160px;
}

.ui-icon-seek-prev {
    background-position: -48px -160px;
}

.ui-icon-seek-end {
    background-position: -64px -160px;
}

.ui-icon-seek-start {
    background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
    background-position: -80px -160px;
}

.ui-icon-stop {
    background-position: -96px -160px;
}

.ui-icon-eject {
    background-position: -112px -160px;
}

.ui-icon-volume-off {
    background-position: -128px -160px;
}

.ui-icon-volume-on {
    background-position: -144px -160px;
}

.ui-icon-power {
    background-position: 0 -176px;
}

.ui-icon-signal-diag {
    background-position: -16px -176px;
}

.ui-icon-signal {
    background-position: -32px -176px;
}

.ui-icon-battery-0 {
    background-position: -48px -176px;
}

.ui-icon-battery-1 {
    background-position: -64px -176px;
}

.ui-icon-battery-2 {
    background-position: -80px -176px;
}

.ui-icon-battery-3 {
    background-position: -96px -176px;
}

.ui-icon-circle-plus {
    background-position: 0 -192px;
}

.ui-icon-circle-minus {
    background-position: -16px -192px;
}

.ui-icon-circle-close {
    background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px;
}

.ui-icon-circle-check {
    background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
}


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa;
    opacity: .003;
    filter: Alpha(Opacity=.3);
    /* support: IE8 */
}

.ui-widget-shadow {
    -webkit-box-shadow: 0px 0px 5px #666666;
    box-shadow: 0px 0px 5px #666666;
}/*!
 * jQuery UI CSS Framework 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
    display: none;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}

.ui-helper-clearfix:after {
    clear: both;
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
    z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
    pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-widget-icon-block {
    left: 50%;
    margin-left: -8px;
    display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 2px 0 0 0;
    padding: .5em .5em .5em .7em;
    font-size: 100%;
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
}

    .ui-menu .ui-menu {
        position: absolute;
    }

    .ui-menu .ui-menu-item {
        margin: 0;
        cursor: pointer;
        /* support: IE10, see #8844 */
        list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    }

    .ui-menu .ui-menu-item-wrapper {
        position: relative;
        padding: 3px 1em 3px .4em;
    }

    .ui-menu .ui-menu-divider {
        margin: 5px 0;
        height: 0;
        font-size: 0;
        line-height: 0;
        border-width: 1px 0 0 0;
    }

    .ui-menu .ui-state-focus,
    .ui-menu .ui-state-active {
        margin: -1px;
    }

/* icon support */
.ui-menu-icons {
    position: relative;
}

    .ui-menu-icons .ui-menu-item-wrapper {
        padding-left: 2em;
    }

/* left-aligned */
.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
    left: auto;
    right: 0;
}

.ui-button {
    padding: .4em 1em;
    display: inline-block;
    position: relative;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Support: IE <= 11 */
    overflow: visible;
}

    .ui-button,
    .ui-button:link,
    .ui-button:visited,
    .ui-button:hover,
    .ui-button:active {
        text-decoration: none;
    }

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
    width: 2em;
    box-sizing: border-box;
    text-indent: -9999px;
    white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
    text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
    padding: 0;
    width: 2.1em;
    height: 2.1em;
    text-indent: -9999px;
    white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
    width: auto;
    height: auto;
    text-indent: 0;
    white-space: normal;
    padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.ui-controlgroup {
    vertical-align: middle;
    display: inline-block;
}

    .ui-controlgroup > .ui-controlgroup-item {
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

        .ui-controlgroup > .ui-controlgroup-item:focus,
        .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
            z-index: 9999;
        }

.ui-controlgroup-vertical > .ui-controlgroup-item {
    display: block;
    float: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
    box-sizing: border-box;
}

.ui-controlgroup .ui-controlgroup-label {
    padding: .4em 1em;
}

    .ui-controlgroup .ui-controlgroup-label span {
        font-size: 80%;
    }

.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
    border-left: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
    border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
    border-right: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
    border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
    /* Support: IE8 only, Android < 4.4 only */
    width: 75%;
    width: calc( 100% - 2.4em );
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
    box-shadow: inset 1px 1px 1px #ccc;
    border-radius: .12em;
    border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
    width: 16px;
    height: 16px;
    border-radius: 1em;
    overflow: visible;
    border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background-image: none;
    width: 8px;
    height: 8px;
    border-width: 4px;
    border-style: solid;
}

.ui-checkboxradio-disabled {
    pointer-events: none;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0;
    }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 2px;
        width: 1.8em;
        height: 1.8em;
    }

    .ui-datepicker .ui-datepicker-prev-hover,
    .ui-datepicker .ui-datepicker-next-hover {
        top: 1px;
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 2px;
    }

    .ui-datepicker .ui-datepicker-next {
        right: 2px;
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 1px;
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 1px;
    }

    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
    }

        .ui-datepicker .ui-datepicker-title select {
            font-size: 1em;
            margin: 1px 0;
        }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 45%;
    }

    .ui-datepicker table {
        width: 100%;
        font-size: .9em;
        border-collapse: collapse;
        margin: 0 0 .4em;
    }

    .ui-datepicker th {
        padding: .7em .3em;
        text-align: center;
        font-weight: bold;
        border: 0;
    }

    .ui-datepicker td {
        border: 0;
        padding: 1px;
    }

        .ui-datepicker td span,
        .ui-datepicker td a {
            display: block;
            padding: .2em;
            text-align: right;
            text-decoration: none;
        }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

        .ui-datepicker .ui-datepicker-buttonpane button {
            float: right;
            margin: .5em .2em .4em;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            width: auto;
            overflow: visible;
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: left;
            }

    /* with multiple calendars */
    .ui-datepicker.ui-datepicker-multi {
        width: auto;
    }

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

    .ui-datepicker-multi .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em;
    }

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}

    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 2px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-prev:hover {
        right: 1px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next:hover {
        left: 1px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-buttonpane {
        clear: right;
    }

        .ui-datepicker-rtl .ui-datepicker-buttonpane button {
            float: left;
        }

            .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
            .ui-datepicker-rtl .ui-datepicker-group {
                float: right;
            }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }

/* Icons */
.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em;
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
}

    .ui-dialog .ui-dialog-titlebar {
        padding: .4em 1em;
        position: relative;
    }

    .ui-dialog .ui-dialog-title {
        float: left;
        margin: .1em 0;
        white-space: nowrap;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        position: absolute;
        right: .3em;
        top: 50%;
        width: 20px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 20px;
    }

    .ui-dialog .ui-dialog-content {
        position: relative;
        border: 0;
        padding: .5em 1em;
        background: none;
        overflow: auto;
    }

    .ui-dialog .ui-dialog-buttonpane {
        text-align: left;
        border-width: 1px 0 0 0;
        background-image: none;
        margin-top: .5em;
        padding: .3em 1em .5em .4em;
    }

        .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
            float: right;
        }

        .ui-dialog .ui-dialog-buttonpane button {
            margin: .5em .4em .5em 0;
            cursor: pointer;
        }

    .ui-dialog .ui-resizable-n {
        height: 2px;
        top: 0;
    }

    .ui-dialog .ui-resizable-e {
        width: 2px;
        right: 0;
    }

    .ui-dialog .ui-resizable-s {
        height: 2px;
        bottom: 0;
    }

    .ui-dialog .ui-resizable-w {
        width: 2px;
        left: 0;
    }

    .ui-dialog .ui-resizable-se,
    .ui-dialog .ui-resizable-sw,
    .ui-dialog .ui-resizable-ne,
    .ui-dialog .ui-resizable-nw {
        width: 7px;
        height: 7px;
    }

    .ui-dialog .ui-resizable-se {
        right: 0;
        bottom: 0;
    }

    .ui-dialog .ui-resizable-sw {
        left: 0;
        bottom: 0;
    }

    .ui-dialog .ui-resizable-ne {
        right: 0;
        top: 0;
    }

    .ui-dialog .ui-resizable-nw {
        left: 0;
        top: 0;
    }

.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-resizable {
    position: relative;
}

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

.ui-progressbar {
    height: 2em;
    text-align: left;
    overflow: hidden;
}

    .ui-progressbar .ui-progressbar-value {
        margin: -1px;
        height: 100%;
    }

    .ui-progressbar .ui-progressbar-overlay {
        background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
        height: 100%;
        filter: alpha(opacity=25); /* support: IE8 */
        opacity: 0.25;
    }

.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none;
}

.ui-selectable {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

    .ui-selectmenu-menu .ui-menu {
        overflow: auto;
        overflow-x: hidden;
        padding-bottom: 1px;
    }

        .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
            font-size: 1em;
            font-weight: bold;
            line-height: 1.5;
            padding: 2px 0.4em;
            margin: 0.5em 0 0 0;
            height: auto;
            border: 0;
        }

.ui-selectmenu-open {
    display: block;
}

.ui-selectmenu-text {
    display: block;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
    text-align: left;
    white-space: nowrap;
    width: 14em;
}

.ui-selectmenu-icon.ui-icon {
    float: right;
    margin-top: 0;
}

.ui-slider {
    position: relative;
    text-align: left;
}

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 1.2em;
        height: 1.2em;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
    }

    .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
    }

    /* support: IE8 - See #6727 */
    .ui-slider.ui-state-disabled .ui-slider-handle,
    .ui-slider.ui-state-disabled .ui-slider-range {
        filter: inherit;
    }

.ui-slider-horizontal {
    height: .8em;
}

    .ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
    }

    .ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
    }

    .ui-slider-horizontal .ui-slider-range-min {
        left: 0;
    }

    .ui-slider-horizontal .ui-slider-range-max {
        right: 0;
    }

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

    .ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
    }

    .ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
    }

    .ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
    }

    .ui-slider-vertical .ui-slider-range-max {
        top: 0;
    }

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}

.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: .222em 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 2em;
}

.ui-spinner-button {
    width: 1.6em;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none;
}

.ui-spinner-up {
    top: 0;
}

.ui-spinner-down {
    bottom: 0;
}

.ui-tabs {
    position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}

    .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: .2em .2em 0;
    }

        .ui-tabs .ui-tabs-nav li {
            list-style: none;
            float: left;
            position: relative;
            top: 0;
            margin: 1px .2em 0 0;
            border-bottom-width: 0;
            padding: 0;
            white-space: nowrap;
        }

        .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
            float: left;
            padding: .5em 1em;
            text-decoration: none;
        }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active {
            margin-bottom: -1px;
            padding-bottom: 1px;
        }

            .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
            .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
            .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
                cursor: text;
            }

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
}

body .ui-tooltip {
    border-width: 2px;
}
/*!
 * jQuery UI CSS Framework 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_222222_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
 */


/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.ui-widget .ui-widget {
    font-size: 1em;
}

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

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
}

.ui-widget-content a {
    color: #333333;
}

.ui-widget-header {
    border: 1px solid #dddddd;
    background: #e9e9e9;
    color: #333333;
    font-weight: bold;
}

.ui-widget-header a {
    color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
    color: #454545;
    text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border: 1px solid #cccccc;
    background: #ededed;
    font-weight: normal;
    color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
    color: #2b2b2b;
    text-decoration: none;
}

.ui-visual-focus {
    box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.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 #003eff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
    border: #003eff;
    background-color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #ffffff;
    text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}

.ui-state-checked {
    border: 1px solid #dad55e;
    background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #f1a899;
    background: #fddfdf;
    color: #5f3f3f;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
    color: #5f3f3f;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
    color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    /* support: IE8 */
    font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    /* support: IE8 */
    background-image: none;
}

.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35);
    /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

/* positioning */
.ui-icon-blank {
    background-position: 16px 16px;
}

.ui-icon-caret-1-n {
    background-position: 0 0;
}

.ui-icon-caret-1-ne {
    background-position: -16px 0;
}

.ui-icon-caret-1-e {
    background-position: -32px 0;
}

.ui-icon-caret-1-se {
    background-position: -48px 0;
}

.ui-icon-caret-1-s {
    background-position: -65px 0;
}

.ui-icon-caret-1-sw {
    background-position: -80px 0;
}

.ui-icon-caret-1-w {
    background-position: -96px 0;
}

.ui-icon-caret-1-nw {
    background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
    background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
    background-position: -144px 0;
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
    background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
    background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
    background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
}

.ui-icon-arrow-4 {
    background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px;
}

.ui-icon-extlink {
    background-position: -32px -80px;
}

.ui-icon-newwin {
    background-position: -48px -80px;
}

.ui-icon-refresh {
    background-position: -64px -80px;
}

.ui-icon-shuffle {
    background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px;
}

.ui-icon-folder-open {
    background-position: -16px -96px;
}

.ui-icon-document {
    background-position: -32px -96px;
}

.ui-icon-document-b {
    background-position: -48px -96px;
}

.ui-icon-note {
    background-position: -64px -96px;
}

.ui-icon-mail-closed {
    background-position: -80px -96px;
}

.ui-icon-mail-open {
    background-position: -96px -96px;
}

.ui-icon-suitcase {
    background-position: -112px -96px;
}

.ui-icon-comment {
    background-position: -128px -96px;
}

.ui-icon-person {
    background-position: -144px -96px;
}

.ui-icon-print {
    background-position: -160px -96px;
}

.ui-icon-trash {
    background-position: -176px -96px;
}

.ui-icon-locked {
    background-position: -192px -96px;
}

.ui-icon-unlocked {
    background-position: -208px -96px;
}

.ui-icon-bookmark {
    background-position: -224px -96px;
}

.ui-icon-tag {
    background-position: -240px -96px;
}

.ui-icon-home {
    background-position: 0 -112px;
}

.ui-icon-flag {
    background-position: -16px -112px;
}

.ui-icon-calendar {
    background-position: -32px -112px;
}

.ui-icon-cart {
    background-position: -48px -112px;
}

.ui-icon-pencil {
    background-position: -64px -112px;
}

.ui-icon-clock {
    background-position: -80px -112px;
}

.ui-icon-disk {
    background-position: -96px -112px;
}

.ui-icon-calculator {
    background-position: -112px -112px;
}

.ui-icon-zoomin {
    background-position: -128px -112px;
}

.ui-icon-zoomout {
    background-position: -144px -112px;
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-icon-wrench {
    background-position: -176px -112px;
}

.ui-icon-gear {
    background-position: -192px -112px;
}

.ui-icon-heart {
    background-position: -208px -112px;
}

.ui-icon-star {
    background-position: -224px -112px;
}

.ui-icon-link {
    background-position: -240px -112px;
}

.ui-icon-cancel {
    background-position: 0 -128px;
}

.ui-icon-plus {
    background-position: -16px -128px;
}

.ui-icon-plusthick {
    background-position: -32px -128px;
}

.ui-icon-minus {
    background-position: -48px -128px;
}

.ui-icon-minusthick {
    background-position: -64px -128px;
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-icon-key {
    background-position: -112px -128px;
}

.ui-icon-lightbulb {
    background-position: -128px -128px;
}

.ui-icon-scissors {
    background-position: -144px -128px;
}

.ui-icon-clipboard {
    background-position: -160px -128px;
}

.ui-icon-copy {
    background-position: -176px -128px;
}

.ui-icon-contact {
    background-position: -192px -128px;
}

.ui-icon-image {
    background-position: -208px -128px;
}

.ui-icon-video {
    background-position: -224px -128px;
}

.ui-icon-script {
    background-position: -240px -128px;
}

.ui-icon-alert {
    background-position: 0 -144px;
}

.ui-icon-info {
    background-position: -16px -144px;
}

.ui-icon-notice {
    background-position: -32px -144px;
}

.ui-icon-help {
    background-position: -48px -144px;
}

.ui-icon-check {
    background-position: -64px -144px;
}

.ui-icon-bullet {
    background-position: -80px -144px;
}

.ui-icon-radio-on {
    background-position: -96px -144px;
}

.ui-icon-radio-off {
    background-position: -112px -144px;
}

.ui-icon-pin-w {
    background-position: -128px -144px;
}

.ui-icon-pin-s {
    background-position: -144px -144px;
}

.ui-icon-play {
    background-position: 0 -160px;
}

.ui-icon-pause {
    background-position: -16px -160px;
}

.ui-icon-seek-next {
    background-position: -32px -160px;
}

.ui-icon-seek-prev {
    background-position: -48px -160px;
}

.ui-icon-seek-end {
    background-position: -64px -160px;
}

.ui-icon-seek-start {
    background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
    background-position: -80px -160px;
}

.ui-icon-stop {
    background-position: -96px -160px;
}

.ui-icon-eject {
    background-position: -112px -160px;
}

.ui-icon-volume-off {
    background-position: -128px -160px;
}

.ui-icon-volume-on {
    background-position: -144px -160px;
}

.ui-icon-power {
    background-position: 0 -176px;
}

.ui-icon-signal-diag {
    background-position: -16px -176px;
}

.ui-icon-signal {
    background-position: -32px -176px;
}

.ui-icon-battery-0 {
    background-position: -48px -176px;
}

.ui-icon-battery-1 {
    background-position: -64px -176px;
}

.ui-icon-battery-2 {
    background-position: -80px -176px;
}

.ui-icon-battery-3 {
    background-position: -96px -176px;
}

.ui-icon-circle-plus {
    background-position: 0 -192px;
}

.ui-icon-circle-minus {
    background-position: -16px -192px;
}

.ui-icon-circle-close {
    background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px;
}

.ui-icon-circle-check {
    background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
}


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa;
    opacity: .003;
    filter: Alpha(Opacity=.3);
    /* support: IE8 */
}

.ui-widget-shadow {
    -webkit-box-shadow: 0px 0px 5px #666666;
    box-shadow: 0px 0px 5px #666666;
}html, body {
    cursor: default;
}

    html.mobile {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -ms-user-select: none;
    }

input, textarea, .input {
    -moz-user-select: auto;
    -webkit-user-select: auto;
    user-select: auto;
    -ms-user-select: auto;
    cursor: text;
    resize: none;
}

    textarea, input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=datetime-local] {
        border: 0.15em solid #9A9A9A;
        padding-left: 0.2em;
        padding-right: 0.2em;
        -webkit-user-modify: read-write-plaintext-only;
        -webkit-appearance: textfield;
        background-color: white;
        box-sizing: border-box;
        -ms-border-radius: 0.2em;
        -moz-border-radius: 0.2em;
        -webkit-border-radius: 0.2em;
        border-radius: 0.2em;
    }

select {
    border: 0.15em solid #9A9A9A;
    padding-left: 0.2em;
    padding-right: 0.2em;
    background-color: white;
    box-sizing: border-box;
    -ms-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    font-size: inherit;
}

::selection {
    background-color: #155ea8;
    color: white;
}

::-moz-selection {
    background-color: #155ea8;
    color: white;
}

textarea.readonly, input.readonly, select.readonly {
    background-color: lightgray;
}

textarea:focus, select:focus, input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus {
    background-color: #EDF0AE;
    border-color: navy;
    outline: 0;
}

input[type=button] {
    cursor: pointer !important;
}

input:input-placeholder {
    color: #88ACD1;
}

input:-moz-placeholder {
    color: #88ACD1;
}

input::-webkit-input-placeholder {
    color: #88ACD1;
}

input:-webkit-input-placeholder {
    color: #88ACD1;
}

input:-ms-input-placeholder {
    color: #88ACD1;
}

input:focus:input-placeholder {
    color: #EDF0AE;
}

input:focus:-moz-placeholder {
    color: #EDF0AE;
}

input:focus::-webkit-input-placeholder {
    color: #EDF0AE;
}

input:focus:-webkit-input-placeholder {
    color: #EDF0AE;
}

input:focus:-ms-input-placeholder {
    color: #EDF0AE;
}

h1 {
    color: #E41736;
    font-size: 1.7em;
}

h2 {
    text-transform: uppercase;
    font-size: 1.57em;
}

h3 {
    font-size: 1.42em;
}

h4 {
    font-size: 1.14em;
}

h5 {
    font-size: 0.85em;
}

ol {
    list-style: decimal;
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 3em;
}

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.2;
}

span, strong, a, li {
    line-height: 1.2;
}

    a, a:visited, .a {
        color: #155ea8;
        text-decoration: underline;
        cursor: pointer !important;
    }

input[type=button]:disabled {
    opacity: 0.5;
}

input[type=text]:disabled {
    opacity: 0.5;
}

input[type=button] {
    user-select: none;
}

.clickable {
    cursor: pointer !important;
}

.selectable {
    -moz-user-select: auto;
    -webkit-user-select: auto;
    user-select: auto;
    -ms-user-select: auto;
    cursor: text;
}

button,
.button,
nav,
nav a,
nav span,
.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    cursor: inherit;
}


.img {
    background-size: contain;
    display: inline-block;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
    -moz-image-rendering: crisp-edges;
    -webkit-image-rendering: crisp-edges;
    -ms-image-rendering: crisp-edges;
    transform: rotate( 0deg );
}

#header #languageBar .img {
    border: 1px solid #999;
}

.rotatable {
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    -ms-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.collapsable {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    -ms-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
    max-height: 0;
}

.collapsed {
    max-height: 0;
}

.checkbox {
    cursor: pointer !important;
    display: inline-block;
}

    .checkbox .img {
        border: 0.15em solid #9A9A9A;
        background-color: white;
        box-sizing: border-box;
        -ms-border-radius: 0.2em;
        -moz-border-radius: 0.2em;
        -webkit-border-radius: 0.2em;
        border-radius: 0.2em;
        cursor: pointer !important;
    }

    .checkbox label,
    .checkbox .label {
        display: inline-block !important;
        position: relative;
        top: -0.4em;
        margin-left: 0.2em;
        cursor: pointer !important;
    }

    .checkbox .img:focus,
    .checkbox .checkboxLabel:focus {
        /*border-color: transparent;*/
        border-width: 0.2em;
        border-style: solid;
        outline: 0;
        background-color: #EDF0AE;
        border-color: #E31D38;
        -ms-border-radius: 0.2em;
        -moz-border-radius: 0.2em;
        -webkit-border-radius: 0.2em;
        border-radius: 0.2em;
        cursor: pointer !important;
    }

.pagingHeader {
    clear: both;
    text-align: right;
    display: inline;
    float: right;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.pagingDetails {
    color: #155ea8;
    display: inline;
}

div.loading {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 5em;
}

    div.loading div {
    }

    div.loading span {
        display: block;
        margin-top: 1em;
        text-transform: lowercase;
    }

div.scrollX {
    width: 100%;
    overflow-x: auto;
    min-height: 20em;
}
body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #cbcbcb; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NiY2JjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #cbcbcb 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cbcbcb 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cbcbcb 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cbcbcb 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cbcbcb 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
    background-size: contain;
    background-attachment: fixed;
}

html.noGradients {
    background: url(gdx.mendrix.worldlink-gradients/pagegradient.png) repeat-x;
}
#header {
    background-color: white;
}

#header #headerWrapper {
    margin-left: auto;
    margin-right: auto;
    min-width: 235px;
    position: relative;
}

#header #headerGreeting {
    float: right;
    padding-top: 3em;
    padding-right: 1em;
}

#header #headerGreeting strong {
    color: navy;
    white-space: nowrap;
}

#header div.img {
    margin-left: 0.6em;
    margin-top: 2em;
    margin-bottom: 0.2em;
    font-size: 1.3em;
}

#header #languageBar {
    position: absolute;
    top: -2em;
    right: 1em;
}

html.mobile #header #languageBar {
    position: absolute;
    top: -2.25em;
    right: 1em;
    font-size: 1.5em;
}

#header #languageBar>div {
    margin-left: 0.4em;
}#menubar {
    min-height: 5em;
    position: relative;
    background: #155ea8; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE1NWVhOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDQ0ODkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #155ea8 0%, #004489 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#155ea8), color-stop(100%,#004489)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #155ea8 0%,#004489 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #155ea8 0%,#004489 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #155ea8 0%,#004489 100%); /* IE10+ */
    background: linear-gradient(to bottom, #155ea8 0%,#004489 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#155ea8', endColorstr='#004489',GradientType=0 ); /* IE6-8 */
    background-size: contain;
    background-attachment: fixed;
}

html.noGradients #menubar {
    background: url(gdx.mendrix.worldlink-gradients/menugradient.png) repeat-x;
}

#menubar #menubarWrapper {
    margin-left: auto;
    margin-right: auto;
    min-width: 235px;
}

#menubar div.img {
    margin-left: 0.5em;
    margin-top: 0.5em;
    font-size: 1.4em;
}

#menubar #menu {
    width: 100%;
    text-align: right;
    margin-top: -1em;
}

    #menubar #menu nav {
        display: inline-block;
    }

        #menubar #menu nav ul {
            text-align: right;
        }

        #menubar #menu nav li {
            float: left;
            font-size: 0.9em;
            white-space: nowrap;
        }

            #menubar #menu nav li span {
                color: rgb(200, 203, 218);
                margin-right: 0.25em;
                white-space: nowrap;
            }

                #menubar #menu nav li span:last-child {
                    display: none;
                }

                #menubar #menu nav li a,
                #menubar #menu nav li span.a {
                    margin-left: 0.20em;
                    margin-right: 0.20em;
                    color: white;
                    text-decoration: none;
                    font-size: 1.2em !important;
                    white-space: nowrap;
                }

                    #menubar #menu nav li a:visited {
                        color: white;
                        text-decoration: none;
                    }

                    #menubar #menu nav li a:hover {
                        color: yellow;
                    }

                #menubar #menu nav li span.a {
                    cursor: pointer !important;
                    color: #C2C2C2;
                }

html.portrait #menubar #menu {
    padding-bottom: 2em;
    margin-top: 0;
}

html.desktop.portrait #menubar #menu {
    margin-top: 0.5em;
}

html.mobile.portrait #menubar #menu nav {
    width: 100%;
}

    html.mobile.portrait #menubar #menu nav ul {
        padding-right: 0.5em;
        margin-right: 0.5em;
    }

    html.mobile.portrait #menubar #menu nav li {
        width: 100%;
        float: none;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        font-size: 1.2em;
    }

html.compact.medium.landscape #menubar #menu nav lu {
    display: inline-flex;
}

html.desktop.landscape #menubar #menu nav lu {
    display: inline-flex;
}

html.desktop.portrait #menubar #menu nav li a {
    font-size: 1.6em !important;
    margin-right: 0em;
}

html.desktop.portrait #menubar #menu nav li a {
    font-size: 1.2em !important;
}

html.compact.medium.landscape #menubar #menu nav li a {
    text-overflow: ellipsis;
    max-width: 7em;
    overflow: hidden;
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    font-size: 0.9em;
}

html.desktop.landscape #menubar #menu nav li {
    font-size: 0.9em;
}

html.mobile.landscape #menubar div.img {
    background-image: none;
    background: transparent;
}

html.mobile.landscape #menubar #menu nav lu {
    display: inline-flex;
}

html.mobile.landscape #menubar #menu nav li {
    font-size: 0.9em;
}

#page {
}

#pageWrapper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -1.5em;
    padding-bottom: 2em;
    box-sizing: border-box;
    min-height: 85%;
    min-width: 235px;
}

#content {
    min-height: 85%;
    background-color: white;
    box-sizing: border-box;
    -ms-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    border: 0.25em solid;
    border-style: double;
    border-color: rgb(173, 173, 213);
}
#footer {
    padding: 1em;
    box-sizing: border-box;
    height: 4em;
}

    #footer a, #footer a:visited {
        color: navy;
        text-decoration: none;
        white-space: nowrap;
    }
/* default margins */
.autoWidth {
    width: 60%;
}

/*  portrait margins */

html.portrait .autoWidth {
    width: 90%;
}

/*  mobile margins */
html.mobile .autoWidth {
    width: 100%;
}

/* desktop landscape margins */

html.desktop.landscape .autoWidth {
    width: 80%;
}

html.desktop.landscape.size240 .autoWidth,
html.desktop.landscape.size320 .autoWidth,
html.desktop.landscape.size480 .autoWidth,
html.desktop.landscape.size640 .autoWidth {
    width: 99%;
}

html.desktop.landscape.size800 .autoWidth {
    width: 99%;
}

html.desktop.landscape.size1024 .autoWidth {
    width: 99%;
}

html.desktop.landscape.size1200 .autoWidth,
html.desktop.landscape.size1280 .autoWidth {
    width: 90%;
}
.lightbox {
    padding: 1em;
    margin: 0;
    background-color: #f5f6f7;
    border: 0.25em solid #c4d0dc;
    border-collapse: collapse;
    -ms-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
}

.darkbox {
    padding: 1em;
    margin: 0;
    background-color: #ebecef;
    border: 0.25em solid #c4d0dc;
    border-collapse: collapse;
    -ms-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
}

.lightpanel {
    background-color: white;
    padding: 1em;
}

.darkpanel {
    background-color: #ebecef;
    padding: 1em;
}
#notification {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,0.75);
    z-index: 500;
}

#selectlistMsgScroller {
    overflow: hidden;
}

#notificationContent {
    height: auto;
    width: auto;
    position: absolute;
    margin: 0;
    background-color: #004489;
}

#notification #notificationHeader {
    height: 1.5em;
    text-align: center;
    vertical-align: middle;
}

#notificationTitle {
    white-space: pre-wrap;
    font-size: 130%;
}

#notification #notificationMessage {
    margin-bottom: 2em;
}

#notification #notificationHeaderTitle {
    vertical-align: middle;
    text-align: center;
    margin: 0.25em 0em 0em 0em;
    font-size: 125%;
    color: white;
    text-transform: lowercase;
    display: block;
}

#notificationMsgContent {
    margin: 0;
    margin-top: 0.25em;
    padding: 1em;
    background-color: white;
}

#notification table {
    width: auto;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#notification td.gradient {
    cursor: pointer;
    padding: 0.5em;
    vertical-align: middle;
    width: 50%;
    text-align: center;
    background-color: #004489;
}

    #notification td.gradient span {
        color: white;
    }

    #notification td.gradient.disabled {
        border: 0.2em solid rgba(0,89,198,0.2);
        opacity: 0.2;
    }

#notification #selectlistViewContent table {
    width: auto;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#notification #selectlistViewContent TBODY.button.onActive {
    border: none !important;
}

#notification #selectlistViewContent TBODY TR {
    cursor: pointer;
    background: #21aeb5; /* Old browsers */
}

    #notification #selectlistViewContent TBODY TR TD {
        padding: 0.5em;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 10em;
        overflow: hidden;
    }

        #notification #selectlistViewContent TBODY TR TD.BLeft {
            border-left: solid 0.1875em #4ABEC6;
        }

        #notification #selectlistViewContent TBODY TR TD.BTop {
            border-top: solid 0.1875em #4ABEC6;
        }

        #notification #selectlistViewContent TBODY TR TD.BRight {
            border-right: solid 0.1875em #4ABEC6;
        }

        #notification #selectlistViewContent TBODY TR TD.BBottom {
            border-bottom: solid 0.1875em #4ABEC6;
        }

#notification #selectlistViewContent TBODY.odd TR {
    background: #42ba7b;
}

    #notification #selectlistViewContent TBODY.odd TR TD.BLeft {
        border-left: solid 0.1875em #63C38C;
    }

    #notification #selectlistViewContent TBODY.odd TR TD.BTop {
        border-top: solid 0.1875em #63C38C;
    }

    #notification #selectlistViewContent TBODY.odd TR TD.BRight {
        border-right: solid 0.1875em #63C38C;
    }

    #notification #selectlistViewContent TBODY.odd TR TD.BBottom {
        border-bottom: solid 0.1875em #63C38C;
    }

#notification #selectlistViewContent TBODY.tblRsep {
    background: #004D60;
}

    #notification #selectlistViewContent TBODY.tblRsep TR {
        border: 0px solid transparent;
        background: transparent;
    }

        #notification #selectlistViewContent TBODY.tblRsep TR TD {
            background: transparent;
            height: 0.25em;
            padding: 0;
            border-collapse: collapse;
        }

#notification #selectlistViewContent tbody.ui-btn-active TR TD.BLeft, #notification #selectlistViewContent tbody.ui-btn-active.odd TR TD.BLeft {
    border-left: solid 0.1875em white;
}

#notification #selectlistViewContent tbody.ui-btn-active TR TD.BRight, #notification #selectlistViewContent tbody.ui-btn-active.odd TR TD.BRight {
    border-right: solid 0.1875em white;
}

#notification #selectlistViewContent tbody.ui-btn-active TR TD.BTop, #notification #selectlistViewContent tbody.ui-btn-active.odd TR TD.BTop {
    border-top: solid 0.1875em white;
}

#notification #selectlistViewContent tbody.ui-btn-active TR TD.BBottom, #notification #selectlistViewContent tbody.ui-btn-active.odd TR TD.BBottom {
    border-bottom: solid 0.1875em white;
}

#notification #selectlistViewContent tbody.ui-btn-active TR TD {
}

#notification #selectlistViewContent TBODY.tblRsep, #taskList TBODY.tblRsep TR {
    background: transparent;
}

#notificationInput {
    width: 10em;
    border: 0.2em solid #a3c9ed;
    padding: 0.2em;
}
#ordersView input.filtered {
    background-color: khaki;
}

    #ordersView input.filtered:input-placeholder {
        color: khaki;
    }

    #ordersView input.filtered:-moz-placeholder {
        color: khaki;
    }

    #ordersView input.filtered::-webkit-input-placeholder {
        color: khaki;
    }

    #ordersView input.filtered:-webkit-input-placeholder {
        color: khaki;
    }

    #ordersView input.filtered:-ms-input-placeholder {
        color: khaki;
    }

#ordersView #ordersHeader #ordersCalendar {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 15em;
    min-height: 2.5em;
}

html.mobile.portrait #ordersView #ordersHeader #ordersCalendar {
    box-sizing: content-box;
    width: 100%;
}

#ordersView #ordersHeader #ordersCalendar div {
    position: relative;
    z-index: 1000;
    left: -2.3em;
    top: 0.5em;
}

#ordersView #ordersHeader #ordersCalendar input, #ordersView #ordersHeader #ordersCalendar input:focus {
    margin: 0;
    padding: .3em;
    padding-right: 2.5em;
    min-height: 2.3em;
    width: 15em;
    box-sizing: border-box;
}

html.mobile.portrait #ordersView #ordersHeader #ordersCalendar input {
    width: 100%;
}
ul.ui-autocomplete {
    border: 0.2em solid #155ea8;
    max-height: 10em;
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
}

    ul.ui-autocomplete li {
        box-sizing: border-box;
        font-size: inherit;
    }

html.mobile ul.ui-autocomplete {
    box-sizing: border-box;
    font-size: 2em;
}

ul.ui-autocomplete li.ui-state-focus {
    border: 0.2em solid #155ea8;
    background-color: #155ea8;
    color: white;
}

.ui-menu .ui-menu-item {
    box-sizing: border-box;
    white-space: nowrap;
}
.ui-icon-circle-triangle-w {
    /* imgW10_back */
    background-image: url("gdx.mendrix.worldlink.ui/back.png") !important;
    background-size: cover !important;
    background-position: 0 0 !important;
}

.ui-icon-circle-triangle-e {
    /* imgW10_next */
    background-image: url("gdx.mendrix.worldlink.ui/next.png") !important;
    background-size: cover !important;
    background-position: 0 0 !important;
}

.ui-widget-header {
    background: #ccc !important;
}

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background: #e6e6e6 !important;
    }

    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
        background: #fcefa1 !important;
    }

.ui-widget-content {
    background: white !important;
}
#accountView {
    min-height: 60em;
}

#accountViewTop {
    padding: 1em;
}

#accountView input.filtered {
    background-color: khaki;
}

    #accountView input.filtered:input-placeholder {
        color: khaki;
    }

    #accountView input.filtered:-moz-placeholder {
        color: khaki;
    }

    #accountView input.filtered::-webkit-input-placeholder {
        color: khaki;
    }

    #accountView input.filtered:-webkit-input-placeholder {
        color: khaki;
    }

    #accountView input.filtered:-ms-input-placeholder {
        color: khaki;
    }

#accountView #accountHeader {
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    border-color: #155ea8;
    padding-top: 1em;
    margin-top: 1em;
    min-height: 3em;
}

html.mobile.portrait #accountView #accountHeader {
    font-size: 1.444444444em;
}

#accountView #accountHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #accountView #accountHeader nav {
    margin-right: 0em;
}

#accountView #accountHeader nav > div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #accountView #accountHeader nav > div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#accountView #accountHeader nav > div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #accountView #accountHeader nav > div {
    float: none;
}

html.desktop.portrait #accountView #accountHeader div.right {
    width: 100%;
    text-align: right;
    margin-bottom: 1em;
    float: none;
}

html.mobile.portrait #accountView #accountHeader div.right {
    width: 100%;
    float: none;
    display: block;
    margin-right: 0;
}

#accountView #accountHeader nav > div div {
    box-sizing: border-box;
    position: relative;
}

#accountView #accountHeader nav .a,
#accountView #accountHeader nav a,
#accountView #accountHeader nav a:visited {
    margin-right: 0.7em;
    /*color: black;*/
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #accountView #accountHeader nav .a html.medium #accountView #accountHeader nav a {
    margin-right: 0;
}

#accountView #accountHeader nav .a:hover,
#accountView #accountHeader nav a:hover {
    color: navy;
}

#accountView #accountHeader div.right {
    float: right;
}#accountPasswordView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#accountPasswordView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#accountPasswordView .right h2 {
    margin-left: -0.2em;
}

html.mobile.portrait #accountPasswordView .right h2 {
    margin-top: 1em;
    margin-bottom: 0;
}

html.compact.small #accountPasswordView #accountPasswordForm {
    font-size: 1.4em;
}

#accountPasswordView span,
#accountPasswordView sub {
    color: #155ea8;
}

#accountPasswordView sub {
    font-size: 1.3em;
}

#accountPasswordView #accountPasswordHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

html.mobile.portrait #accountPasswordView #accountPasswordHeader {
    font-size: 1.444444444em;
}

#accountPasswordView #accountPasswordHeader a,
#accountPasswordView #accountPasswordHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
}

#accountPasswordView #accountPasswordForm fieldset {
    position: relative;
    margin-top: 2em;
}

#accountPasswordView #accountPasswordForm fieldset div.left {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#accountPasswordView #accountPasswordForm fieldset div.right {
    width: 50%;
    margin-left: 50%;
    box-sizing: border-box;
}

html.compact.small #accountPasswordView #accountPasswordForm fieldset div.left,
html.compact.small #accountPasswordView #accountPasswordForm fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#accountPasswordView #accountPasswordForm fieldset div.inner {
    padding: 0.2em;
}

#accountPasswordView #accountPasswordForm fieldset label,
#accountPasswordView #accountPasswordForm fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

/* mandatory input errors */

#accountPasswordView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

#accountPasswordView div.inputError div {
    float: right;
    margin-right: 0.5em;
}

#accountPasswordView div.inputError span {
    color: red;
    display: block;
}

#accountPasswordView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}

#accountPasswordView .left div.errorSection {
    margin-right: 0em;
}

#accountPasswordView .right div.errorSection {
    margin-left: 0em;
}

html.mobile.compact.portrait #accountPasswordView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

/*** Input widths ***/

/* defaults */
#accountPasswordView input[type="text"],
#accountPasswordView input[type="date"],
#accountPasswordView input[type="datetime"],
#accountPasswordView input[type="number"],
#accountPasswordView textarea,
#accountPasswordView select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

html.mobile.portrait #accountPasswordView input[type="text"],
html.mobile.portrait #accountPasswordView input[type="date"],
html.mobile.portrait #accountPasswordView input[type="datetime"],
html.mobile.portrait #accountPasswordView input[type="number"],
html.mobile.portrait #accountPasswordView textarea,
html.mobile.portrait #accountPasswordView select {
    max-width: 20.5em;
    width: 20.5em;
    box-sizing: border-box;
}

html.compact #accountPasswordView div.errorSection input[type="text"],
html.compact #accountPasswordView div.errorSection input[type="date"],
html.compact #accountPasswordView div.errorSection input[type="datetime"],
html.compact #accountPasswordView div.errorSection input[type="number"],
html.compact #accountPasswordView div.errorSection textarea,
html.compact #accountPasswordView div.errorSection select,
html.mobile.portrait #accountPasswordView div.errorSection input[type="text"],
html.mobile.portrait #accountPasswordView div.errorSection input[type="date"],
html.mobile.portrait #accountPasswordView div.errorSection input[type="datetime"],
html.mobile.portrait #accountPasswordView div.errorSection input[type="number"],
html.mobile.portrait #accountPasswordView div.errorSection textarea,
html.mobile.portrait #accountPasswordView div.errorSection select {
    width: 18em;
    max-width: 18em;
    height: 1.6em;
    margin-right: 1em;
}

#accountPasswordView input[type=button] {
    width: 10em;
    max-width: 10em;
}

#accountPasswordView label:focus,
#accountPasswordView .label:focus,
#accountPasswordView .img:focus {
    background-color: khaki;
}

#accountPasswordView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 20em;
}

#accountPasswordView div.submitting span {
    display: block;
    margin-top: 1em;
}

#accountPasswordView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#accountPasswordView div.haveMissingFields div {
    float: left;
}

#accountPasswordView div.haveMissingFields span {
    margin-left: 5em;
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

html.mobile.portrait #accountPasswordView div.haveMissingFields span {
    display: inline-block;
    top: -0.5em;
    max-width: 13em;
    margin-left: 1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

/* accountPassword header */
#accountPasswordView #accountPasswordHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #accountPasswordView #accountPasswordHeader nav {
    margin-right: 0em;
}

#accountPasswordView #accountPasswordHeader nav > div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #accountPasswordView #accountPasswordHeader nav > div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#accountPasswordView #accountPasswordHeader nav > div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #accountPasswordView #accountPasswordHeader nav > div {
    float: none;
}

#accountPasswordView #accountPasswordHeader nav > div div {
    box-sizing: border-box;
    position: relative;
}

#accountPasswordView #accountPasswordHeader nav a,
#accountPasswordView #accountPasswordHeader nav a:visited {
    margin-right: 0.7em;
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #accountPasswordView #accountPasswordHeader nav a {
    margin-right: 0;
}

#accountPasswordView #accountPasswordHeader nav a:hover {
    color: #155ea8;
}

#accountPasswordView .seperator {
    display: block !important;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#accountPasswordView .passwordmismatch {
    padding: 0.2em;
}

#accountPasswordView .passwordmismatch .errorSection {
    padding-top: 1em;
}

#accountPasswordView .CheckmarkBlack {
    color: black;
    font-size: 1em;
    margin-left: .5em;
    margin-top: .5em;
}

#accountPasswordView .CheckmarkGreen {
    color: green;
    font-size: 1em;
    margin-left: .5em;
    margin-top: .5em;
    font-weight: bold;
}

.requirementsBox {
    border-radius: .5em;
    margin-top: 1em;
    padding: .5em 0 .5em 0;
    background-color: #AFDCEC;
}

.requirementsHeader {
    font-size: max(16px, 1em);
    margin-left: .5em;
    font-weight: bold;
}

.requirementsContent {
    margin-left: .5em;
    margin-top: .5em;
    line-height: 1.5;
}
#addressView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#addressView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#addressView .right h2 {
    margin-left: -0.2em;
}

html.mobile.portrait #addressView .right h2 {
    margin-top: 1em;
    margin-bottom: 0;
}

html.compact.small #addressView #addressForm {
    font-size: 1.4em;
}

#addressView span,
#addressView sub {
    color: #155ea8;
    font-weight: bold;
}

#addressView sub {
    font-size: 1.3em;
}

#addressView #addressHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

html.mobile.portrait #addressView #addressHeader {
    font-size: 1.444444444em;
}

#addressView #addressHeader a,
#addressView #addressHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
}

#addressView #addressForm fieldset {
    position: relative;
    margin-top: 2em;
}

#addressView #addressForm fieldset div.left {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#addressView #addressForm fieldset div.right {
    width: 50%;
    margin-left: 50%;
    box-sizing: border-box;
}

html.compact.small #addressView #addressForm fieldset div.left,
html.compact.small #addressView #addressForm fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#addressView #addressForm fieldset div.inner {
    padding: 0.2em;
}

#addressView #addressForm fieldset label,
#addressView #addressForm fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

/* mandatory input errors */

#addressView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

#addressView div.inputError div {
    float: right;
    margin-right: 0.5em;
}

#addressView div.inputError span {
    color: red;
    display: block;
}

#addressView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}

#addressView .left div.errorSection {
    margin-right: 0em;
}

#addressView .right div.errorSection {
    margin-left: 0em;
}

html.mobile.compact.portrait #addressView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

#addressView tbody.errorSection ul {
    padding-bottom: 0.5em;
    border-bottom: #155ea8 dashed 0.1em;
    margin-bottom: 0.5em;
}

#addressView tbody.errorSection .inputError {
    margin-left: 1.5em;
}

/*** Input widths ***/

/* defaults */
#addressView input[type="text"],
#addressView input[type="date"],
#addressView input[type="datetime"],
#addressView input[type="number"],
#addressView textarea,
#addressView select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

html.mobile.portrait #addressView input[type="text"],
html.mobile.portrait #addressView input[type="date"],
html.mobile.portrait #addressView input[type="datetime"],
html.mobile.portrait #addressView input[type="number"],
html.mobile.portrait #addressView textarea,
html.mobile.portrait #addressView select {
    max-width: 20.5em;
    width: 20.5em;
    box-sizing: border-box;
}

html.compact #addressView div.errorSection input[type="text"],
html.compact #addressView div.errorSection input[type="date"],
html.compact #addressView div.errorSection input[type="datetime"],
html.compact #addressView div.errorSection input[type="number"],
html.compact #addressView div.errorSection textarea,
html.compact #addressView div.errorSection select,
html.mobile.portrait #addressView div.errorSection input[type="text"],
html.mobile.portrait #addressView div.errorSection input[type="date"],
html.mobile.portrait #addressView div.errorSection input[type="datetime"],
html.mobile.portrait #addressView div.errorSection input[type="number"],
html.mobile.portrait #addressView div.errorSection textarea,
html.mobile.portrait #addressView div.errorSection select {
    width: 18em;
    max-width: 18em;
    height: 1.6em;
    margin-right: 1em;
}

/** special output */
#addressView #addressForm fieldset label.foundAddress {
    font-size: 0.9em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    color: #748EA5;
    color: #5B81A3;
}    
    
/** special inputs ****/
#addressView input[type="text"].postalcode1,
#addressView input[type="text"].address1 {
    width: 15.7em;
    max-width: 15.7em;
}

html.mobile.portrait #addressView input[type="text"].postalcode1,
html.mobile.portrait #addressView input[type="text"].address1 {
    width: 15.2em;
    max-width: 15.2em;
}

html.compact #addressView div.errorSection input[type="text"].postalcode1,
html.compact #addressView div.errorSection input[type="text"].address1 {
    width: 12.7em;
    max-width: 12.7em;
    margin-right: 0em;
}

#addressView input[type="text"].address2,
html.mobile.portrait #addressView input[type="text"].address2,
html.compact #addressView div.errorSection input[type="text"].address2 {
    width: 5em;
    max-width: 5em;
}

#addressView textarea {
    height: 6em !important;
}

#addressView input[type=button] {
    width: 10em;
    max-width: 10em;
}

#addressView input.time,
#addressView select.time {
    width: 5.8em !important;
    max-width: 5.8em !important;
    margin-right: 0;
}



#addressView label:focus,
#addressView .label:focus,
#addressView .img:focus {
    background-color: khaki;
}

/* misc */
#addressView .openingHours {
    height: 3.9em;
}

#addressView .openingHoursLabelWrapper {
    width: 18em;
    display: block;
}

#addressView .endTimeTommorow {
    text-transform: lowercase;
    color: red;
    display: inline-block;
    text-align: right;
    float: right;
}

html.mobile.portrait #addressView .openingHours {
    display: none;
}

#addressView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 20em;
}

#addressView div.submitting div {
}

#addressView div.submitting span {
    display: block;
    margin-top: 1em;
}

#addressView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#addressView div.haveMissingFields div {
    float: left;
}

#addressView div.haveMissingFields span {
    margin-left: 5em;
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

html.mobile.portrait #addressView div.haveMissingFields span {
    display: inline-block;
    top: -0.5em;
    max-width: 13em;
    margin-left: 1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

/* address header */
#addressView #addressHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #addressView #addressHeader nav {
    margin-right: 0em;
}

#addressView #addressHeader nav > div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #addressView #addressHeader nav > div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#addressView #addressHeader nav > div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #addressView #addressHeader nav > div {
    float: none;
}

#addressView #addressHeader nav > div div {
    box-sizing: border-box;
    position: relative;
}

#addressView #addressHeader nav a,
#addressView #addressHeader nav a:visited {
    margin-right: 0.7em;
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #addressView #addressHeader nav a {
    margin-right: 0;
}

#addressView #addressHeader nav a:hover {
    color: #155ea8;
}

#addressView .seperator {
    display: block !important;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#addressView div.taskCountry {
    margin-bottom: 0.5em;
}
#addressbookView {
    min-height: 60em;
}

#addressbookViewTop {
    padding: 1em;
}

#addressbookView input.filtered {
    background-color: khaki;
}

#addressbookView input.filtered:input-placeholder {
    color: khaki;
}

#addressbookView input.filtered:-moz-placeholder {
    color: khaki;
}

#addressbookView input.filtered::-webkit-input-placeholder {
    color: khaki;
}

#addressbookView input.filtered:-webkit-input-placeholder {
    color: khaki;
}

#addressbookView input.filtered:-ms-input-placeholder {
    color: khaki;
}

#addressbookView #addressesHeader {
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    border-color: #155ea8;
    padding-top: 1em;
    margin-top: 1em;
    min-height: 3em;
}

html.mobile.portrait #addressbookView #addressesHeader {
    font-size: 1.444444444em;
}

#addressbookView #addressesHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #addressbookView #addressesHeader nav {
    margin-right: 0em;
}

#addressbookView #addressesHeader nav>div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #addressbookView #addressesHeader nav>div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#addressbookView #addressesHeader nav>div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #addressbookView #addressesHeader nav>div {
    float: none;
}

html.desktop.portrait #addressbookView #addressesHeader div.right {
    width: 100%;
    text-align: right;
    margin-bottom: 1em;
    float: none;
}

html.mobile.portrait #addressbookView #addressesHeader div.right {
    width: 100%;
    float: none;
    display: block;
    margin-right: 0;
}

#addressbookView #addressesHeader nav>div div {
    box-sizing: border-box;
    position: relative;
}

#addressbookView #addressesHeader nav .a,
#addressbookView #addressesHeader nav a,
#addressbookView #addressesHeader nav a:visited {
    margin-right: 0.7em;
    /*color: black;*/
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #addressbookView #addressesHeader nav .a html.medium #addressbookView #addressesHeader nav a {
    margin-right: 0;
}

#addressbookView #addressesHeader nav .a:hover,
#addressbookView #addressesHeader nav a:hover {
    color: navy;
}

#addressbookView #addressesHeader div.right {
    float: right;
}

#addressbookView #addressesHeader #addressesSearch {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 15em;
    min-height: 2.5em;
}

html.mobile.portrait #addressbookView #addressesHeader #addressesSearch {
    box-sizing: content-box;
    width: 100%;
}

#addressbookView #addressesHeader #addressesSearch div {
    position: relative;
    z-index: 1000;
    left: -2.3em;
    top: 0.5em;
}

#addressbookView #addressesHeader #addressesSearch input,
#addressbookView #addressesHeader #addressesSearch input:focus {
    margin: 0;
    padding: .3em;
    padding-right: 2.5em;
    min-height: 2.3em;
    width: 15em;
    box-sizing: border-box;
}

html.mobile.portrait #addressbookView #addressesHeader #addressesSearch input {
    width: 100%;
}

/****************************************************************************/

#addressbookViewContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
    margin-top: -1em;
}

#addressbookViewContainer span,
#addressbookViewContainer strong,
#addressbookViewContainer a,
#addressbookViewContainer li {
    line-height: 1.3;
}

html.compact #addressbookViewContainer span,
html.compact #addressbookViewContainer strong,
html.compact #addressbookViewContainer a,
html.compact #addressbookViewContainer li {
    line-height: 1.2;
}

#addressbookViewContainer tbody tr.value td {
    display: none;
    vertical-align: top;
}

#addressbookViewContainer tbody tr.value td.value {
    display: table-cell;
}

html.compact tbody tr.value td.taskHeader {
    display: table-cell;
}

html.compact #addressbookViewContainer table tr.value td,
html.compact #addressbookViewContainer table,
html.compact #addressbookViewContainer table tbody,
html.compact #addressbookViewContainer table tr,
html.compact #addressbookViewContainer table td {
    display: block;
}

#addressbookViewContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

html.mobile #addressbookViewContainer table {
    font-size: 1.1em;
}

html.desktop.portrait #addressbookViewContainer table {
    font-size: 0.8em;
}

html.mobile.landscape #addressbookViewContainer table {
    font-size: 0.8em;
}

#addressbookViewContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

html.medium #addressbookViewContainer tbody {
    display: inline-block !important;
    width: 50%;
}

html.medium #addressbookViewContainer tbody.odd {
    clear: left;
}

#addressbookViewContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: rgb(199, 198, 213);
    border-bottom-width: 0.3em;
    padding: 0.2em 0.6em 0.2em 0.6em;
}

html.compact #addressbookViewContainer tbody tr td {
    border-bottom-color: transparent;
    border-bottom-width: 0.1em;
    height: 1.5em;
    min-height: 1.5em;
    max-height: 1.5em;
}

/* allow wrapping in compact mode */
html.compact #addressbookViewContainer tbody tr.value td.value,
html.compact #addressbookViewContainer tbody tr.value td.value span.value {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

#addressbookViewContainer tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

#addressbookViewContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

html.compact #addressbookViewContainer tbody tr td>span.header {
    display: inline-block;
}

html.compact #addressbookViewContainer tbody tr td>span.value {
    max-width: 65%;
}

html.compact #addressbookViewContainer tbody tr td {
    grid-row-span: 1 !important;
}

#addressbookViewContainer tbody tr.compactAddressHeader {
    display: none;
}

html.compact #addressbookViewContainer tbody tr.compactAddressHeader {
    display: block;
}

html.compact #addressbookViewContainer tbody tr.compactAddressHeader td {
    text-align: left !important;
    background-color: #5286BB;
    color: white !important;
    text-transform: uppercase;
    height: 1em;
    min-height: 1em;
    max-height: 1em;
}

#addressbookViewContainer tbody tr.value td.value.addressName div.img {
    float: right;
}

#addressbookViewContainer tbody tr.value td.value.addressName span.value {
    margin-right: 1.5em;
}

/***** 2nd address ****/
/* 2nd column */
#addressbookViewContainer tbody tr.value td.value {
    background-color: #E5E5E5;
    vertical-align: middle;
}

/***** 2nd address ****/
/* 1th column */
#addressbookViewContainer tbody tr.value td.value.odd {
    background-color: #EAEAEA;
}

/***** 1st address ****/
/* 2nd column */
#addressbookViewContainer tbody.odd tr.value td.value {
    background-color: #EEEEEE;
}

/***** 1st address ****/
/* 1th column */
#addressbookViewContainer tbody.odd tr.value td.value.odd {
    background-color: #F1F1F1;
}

/***** 2nd NAME ****/
#addressbookViewContainer tbody tr.value td.value.odd.addressName {
    background-color: rgb(203, 203, 238);
}

/***** 1st NAME ****/
#addressbookViewContainer tbody.odd tr.value td.value.odd.addressName {
    background-color: rgb(221, 221, 231);
}

/* second compact column*/
html.compact #addressbookViewContainer tbody tr.value td.value,
html.compact #addressbookViewContainer tbody.odd tr.value td.value {
    background-color: #E5E5E5;
}

/* first compact column*/
html.compact #addressbookViewContainer tbody tr.value.odd td.value,
html.compact #addressbookViewContainer tbody.odd tr.value.odd td.value {
    background-color: #F1F1F1;
}

/*** hover ***/
html.large #addressbookViewContainer tbody:hover tr.value td.value,
html.large #addressbookViewContainer tbody:hover tr.value td.value.odd,
html.large #addressbookViewContainer tbody:hover tr.odd.value td.value,
html.large #addressbookViewContainer tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

html.compact #addressbookViewContainer tbody tr.value:hover td.value,
html.compact #addressbookViewContainer tbody tr.value:hover td.value.odd,
html.compact #addressbookViewContainer tbody tr.odd.value:hover td.value,
html.compact #addressbookViewContainer tbody tr.odd.value:hover td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    border-bottom-color: #EEF0BA;
    background-color: #EDF0AE;
}

#addressbookViewContainer tbody tr.value td.value.addressName,
#addressbookViewContainer tbody tr.value td.value.addressName .imgW13_nextwhite {
    display: none;
}

#addressbookViewContainer tbody tr.value td.value.addressName:hover,
#addressbookViewContainer tbody tr.value td.value.addressName:hover .imgW13_nextwhite {
    display: inline-block;
}

#addressbookViewContainer tbody tr.value td.value.addressName,
#addressbookViewContainer tbody tr.value td.value.addressName .imgW13_nextcolored {
    display: inline-block;
}

#addressbookViewContainer tbody tr.value td.value.addressName:hover,
#addressbookViewContainer tbody tr.value td.value.addressName:hover .imgW13_nextcolored {
    display: none;
}

html.compact #addressbookViewContainer tbody tr.value:hover td.value.addressName:hover span,
html.compact #addressbookViewContainer tbody tr.value:hover td.value.odd.addressName:hover span,
html.compact #addressbookViewContainer tbody tr.odd.value:hover td.value.addressName:hover span,
html.compact #addressbookViewContainer tbody tr.odd.value:hover td.value.odd.addressName:hover span,
html.compact #addressbookViewContainer tbody tr.value:hover td.value.addressName:hover,
html.compact #addressbookViewContainer tbody tr.value:hover td.value.odd.addressName:hover,
html.compact #addressbookViewContainer tbody tr.odd.value:hover td.value.addressName:hover,
html.compact #addressbookViewContainer tbody tr.odd.value:hover td.value.odd.addressName:hover,
html.large #addressbookViewContainer tbody tr.value td.value.addressName:hover,
html.large #addressbookViewContainer tbody tr.value td.value.odd.addressName:hover,
html.large #addressbookViewContainer tbody tr.odd.value td.value.addressName:hover,
html.large #addressbookViewContainer tbody tr.odd.value td.value.odd.addressName:hover,
html.large #addressbookViewContainer tbody tr.value td.value.addressName:hover span,
html.large #addressbookViewContainer tbody tr.value td.value.odd.addressName:hover span,
html.large #addressbookViewContainer tbody tr.odd.value td.value.addressName:hover span,
html.large #addressbookViewContainer tbody tr.odd.value td.value.odd.addressName:hover span {
    color: white;
    border-right-color: #155ea8;
    border-left-color: #155ea8;
    border-bottom-color: #155ea8;
    background-color: #155ea8;
}

/** header **/
html.compact #addressbookViewContainer thead {
    display: none !important;
}

#addressbookViewContainer thead tr th {
    padding: 0.6em;
    max-width: 14em;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-align: left;
    color: #155ea8;
    background-color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #155ea8 solid 0.1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** delete ***/

#addressbookViewContainer td.value.actions.images a {
    margin-left: 0.5em;
}

html.mobile #addressbookViewContainer td.value.actions .images a {
    margin-left: 1em;
    font-size: 2em;
}

/*************************************/

/* capitalize */
#addressbookViewContainer td.value.addressName span.value span,
#addressbookViewContainer td.value.Contact span.value span,
#addressbookViewContainer td.value.Premise span.value span,
#addressbookViewContainer td.value.Street span.value span,
#addressbookViewContainer td.value.Place span.value span,
#addressbookViewContainer td.value.Country span.value span {
    text-transform: capitalize;
}

/* also lowercase */
#addressbookViewContainer td.value.Email span.value span,
#addressbookViewContainer td.value.LastUse span.value span,
#addressbookViewContainer td.value.Phone span.value span,
#addressbookViewContainer td.value.Fax span.value span,
#addressbookViewContainer td.value.Mobile span.value span {
    text-transform: lowercase;
}

/* uppercase */
#addressesviewcontainer td.value.PostalCode span.value span {
    text-transform: uppercase;
}

#addressbookViewContainer tbody tr td>span#addresValue {
    display: flex;
    justify-content: space-between;
    width: 100%;
}#clientlistView {
    min-height: 60em;
}

#clientlistViewTop {
    padding: 1em;
}

#clientlistView input.filtered {
    background-color: khaki;
}

#clientlistView input.filtered:input-placeholder {
    color: khaki;
}

#clientlistView input.filtered:-moz-placeholder {
    color: khaki;
}

#clientlistView input.filtered::-webkit-input-placeholder {
    color: khaki;
}

#clientlistView input.filtered:-webkit-input-placeholder {
    color: khaki;
}

#clientlistView input.filtered:-ms-input-placeholder {
    color: khaki;
}

#clientlistView #clientsHeader {
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    border-color: #155ea8;
    padding-top: 1em;
    margin-top: 1em;
    min-height: 3em;
}

#clientlistView #clientsHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

#clientlistView #clientsHeader nav {
    margin-right: 0em;
}

#clientlistView #clientsHeader nav>div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

h#clientlistView #clientsHeader nav>div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#clientlistView #clientsHeader nav>div:hover {
    background-color: #EDF0AE;
}

#clientlistView #clientsHeader nav>div div {
    box-sizing: border-box;
    position: relative;
}

#clientlistView #clientsHeader nav .a,
#clientlistView #clientsHeader nav a,
#clientlistView #clientsHeader nav a:visited {
    margin-right: 0.7em;
    /*color: black;*/
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

#clientlistView #clientsHeader nav .a:hover,
#clientlistView #clientsHeader nav a:hover {
    color: navy;
}

#clientlistView #clientsHeader div.right {
    float: right;
}

#clientlistView #clientsHeader #clientsSearch {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 15em;
    min-height: 2.5em;
}

#clientlistView #clientsHeader #clientsSearch div {
    position: relative;
    z-index: 1000;
    left: -2.3em;
    top: 0.5em;
}

#clientlistView #clientsHeader #clientsSearch input,
#clientlistView #clientsHeader #clientsSearch input:focus {
    margin: 0;
    padding: .3em;
    padding-right: 2.5em;
    min-height: 2.3em;
    width: 15em;
    box-sizing: border-box;
}

/****************************************************************************/

#clientlistViewContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
    margin-top: -1em;
}

#clientlistViewContainer span,
#clientlistViewContainer strong,
#clientlistViewContainer a,
#clientlistViewContainer li {
    line-height: 1.3;
}

#clientlistViewContainer tbody tr.value td {
    display: none;
    vertical-align: top;
}

#clientlistViewContainer tbody tr.value td.value {
    display: table-cell;
}

#clientlistViewContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

#clientlistViewContainer table {
    font-size: 0.8em;
}

#clientlistViewContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

#clientlistViewContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: rgb(199, 198, 213);
    border-bottom-width: 0.3em;
    padding: 0.2em 0.6em 0.2em 0.6em;
}

/* allow wrapping in compact mode */
#clientlistViewContainer tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

#clientlistViewContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

#clientlistViewContainer tbody tr.compactClientHeader {
    display: none;
}

#clientlistViewContainer tbody tr.value td.value.Name div.img {
    float: right;
}

#clientlistViewContainer tbody tr.value td.value.Name span.value {
    margin-right: 1.5em;
}

/***** 2nd client ****/
/* 2nd column */
#clientlistViewContainer tbody tr.value td.value {
    background-color: #E5E5E5;
    vertical-align: middle;
}

/***** 2nd client ****/
/* 1th column */
#clientlistViewContainer tbody tr.value td.value.odd {
    background-color: #EAEAEA;
}

/***** 1st client ****/
/* 2nd column */
#clientlistViewContainer tbody.odd tr.value td.value {
    background-color: #EEEEEE;
}

/***** 1st client ****/
/* 1th column */
#clientlistViewContainer tbody.odd tr.value td.value.odd {
    background-color: #F1F1F1;
}

/***** 2nd NAME ****/
#clientlistViewContainer tbody tr.value td.value.odd.Name {
    background-color: rgb(203, 203, 238);
}

/***** 1st NAME ****/
#clientlistViewContainer tbody.odd tr.value td.value.odd.Name {
    background-color: rgb(221, 221, 231);
}

/*** hover ***/
#clientlistViewContainer tbody:hover tr.value td.value,
#clientlistViewContainer tbody:hover tr.value td.value.odd,
#clientlistViewContainer tbody:hover tr.odd.value td.value,
#clientlistViewContainer tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

#clientlistViewContainer tbody tr.value td.value.Name,
#clientlistViewContainer tbody tr.value td.value.Name .imgW13_nextwhite {
    display: none;
}

#clientlistViewContainer tbody tr.value td.value.Name:hover,
#clientlistViewContainer tbody tr.value td.value.Name:hover .imgW13_nextwhite {
    display: inline-block;
}

#clientlistViewContainer tbody tr.value td.value.Name,
#clientlistViewContainer tbody tr.value td.value.Name .imgW13_nextcolored {
    display: inline-block;
}

#clientlistViewContainer tbody tr.value td.value.Name:hover,
#clientlistViewContainer tbody tr.value td.value.Name:hover .imgW13_nextcolored {
    display: none;
}

#clientlistViewContainer tbody tr.value td.value.Name:hover,
#clientlistViewContainer tbody tr.value td.value.odd.Name:hover,
#clientlistViewContainer tbody tr.odd.value td.value.Name:hover,
#clientlistViewContainer tbody tr.odd.value td.value.odd.Name:hover,
#clientlistViewContainer tbody tr.value td.value.Name:hover span,
#clientlistViewContainer tbody tr.value td.value.odd.Name:hover span,
#clientlistViewContainer tbody tr.odd.value td.value.Name:hover span,
#clientlistViewContainer tbody tr.odd.value td.value.odd.Name:hover span {
    color: white;
    border-right-color: #155ea8;
    border-left-color: #155ea8;
    border-bottom-color: #155ea8;
    background-color: #155ea8;
}

/** header **/
#clientlistViewContainer thead tr th {
    padding: 0.6em;
    max-width: 14em;
    font-family: Tahoma;
    text-align: left;
    color: #155ea8;
    background-color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #155ea8 solid 0.1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** delete ***/

#clientlistViewContainer td.value.actions.images a {
    margin-left: 0.5em;
}

/*************************************/

/* capitalize */
#clientlistViewContainer td.value.Name span.value span {
    text-transform: capitalize;
}#errorMessages {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    height: 2000%;
    right: 0;
    padding: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
}

    #errorMessages > div {
        position: relative;
        margin: auto;
        margin-top: 20%;
        width: 30em;
        height: auto;
        background-color: khaki;
        padding: 2em;
        -ms-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        border-radius: 0.5em;
        border: 0.25em solid;
        border-style: double;
        border-color: khaki;
        z-index: 2000;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

html.mobile.portrait #errorMessages > div {
    margin-top: 10%;
}

html.mobile.landscape #errorMessages > div {
    margin-top: 4%;
    width: 80%;
}

#errorMessages > div .img {
    float: right;
    position: relative;
    left: 1.5em;
    top: -1.5em;
}

#errorMessages > div h2 {
    color: #155ea8;
}

#errorMessages > div h3 {
    color: #155ea8;
    margin-top: 0.5em;
}

#errorMessages > div h4 {
    color: #155ea8;
    margin-top: 1em;
}

#errorMessages > div h5 {
    font-size: 0.8em;
    font-weight: normal;
    margin-top: 1em;
}

#errorMessages > div ul {
    margin-left: 1.2em;
}

#errorMessages > div li {
    margin-top: 1em;
}

html.mobile #errorMessages ul {
    font-size: 1.75em;
}

#errorMessages a,
#errorMessages .a {
    text-transform: uppercase;
    text-decoration: none;
}
#joblistView {
    min-height: 60em;
}

#joblistViewTop {
    padding: 1em;
}

#joblistView input.filtered {
    background-color: khaki;
}

#joblistView input.filtered:input-placeholder {
    color: khaki;
}

#joblistView input.filtered:-moz-placeholder {
    color: khaki;
}

#joblistView input.filtered::-webkit-input-placeholder {
    color: khaki;
}

#joblistView input.filtered:-webkit-input-placeholder {
    color: khaki;
}

#joblistView input.filtered:-ms-input-placeholder {
    color: khaki;
}

#joblistView #jobsHeader {
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    border-color: #155ea8;
    padding-top: 1em;
    margin-top: 1em;
    min-height: 3em;
}

html.mobile.portrait #joblistView #jobsHeader {
    font-size: 1.444444444em;
}

#joblistView #jobsHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #joblistView #jobsHeader nav {
    margin-right: 0em;
}

#joblistView #jobsHeader nav>div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #joblistView #jobsHeader nav>div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#joblistView #jobsHeader nav>div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #joblistView #jobsHeader nav>div {
    float: none;
}

html.desktop.portrait #joblistView #jobsHeader div.right {
    width: 100%;
    text-align: right;
    margin-bottom: 1em;
    float: none;
}

html.mobile.portrait #joblistView #jobsHeader div.right {
    width: 100%;
    float: none;
    display: block;
    margin-right: 0;
}

#joblistView #jobsHeader nav>div div {
    box-sizing: border-box;
    position: relative;
}

#joblistView #jobsHeader nav .a,
#joblistView #jobsHeader nav a,
#joblistView #jobsHeader nav a:visited {
    margin-right: 0.7em;
    /*color: black;*/
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #joblistView #jobsHeader nav .a html.medium #joblistView #jobsHeader nav a {
    margin-right: 0;
}

#joblistView #jobsHeader nav .a:hover,
#joblistView #jobsHeader nav a:hover {
    color: navy;
}

#joblistView #jobsHeader div.right {
    float: right;
}

/****************************************************************************/

#joblistViewContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
    margin-top: -1em;
}

#joblistViewContainer span,
#joblistViewContainer strong,
#joblistViewContainer a,
#joblistViewContainer li {
    line-height: 1.3;
}

html.compact #joblistViewContainer span,
html.compact #joblistViewContainer strong,
html.compact #joblistViewContainer a,
html.compact #joblistViewContainer li {
    line-height: 1.2;
}

#joblistViewContainer tbody tr.value td {
    display: none;
    vertical-align: top;
}

#joblistViewContainer tbody tr.value td.value {
    display: table-cell;
}

html.compact tbody tr.value td.taskHeader {
    display: table-cell;
}

html.compact #joblistViewContainer table tr.value td,
html.compact #joblistViewContainer table,
html.compact #joblistViewContainer table tbody,
html.compact #joblistViewContainer table tr,
html.compact #joblistViewContainer table td {
    display: block;
}

#joblistViewContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

html.mobile #joblistViewContainer table {
    font-size: 1.1em;
}

html.desktop.portrait #joblistViewContainer table {
    font-size: 0.8em;
}

html.mobile.landscape #joblistViewContainer table {
    font-size: 0.8em;
}

#joblistViewContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

html.medium #joblistViewContainer tbody {
    display: inline-block !important;
    width: 50%;
}

html.medium #joblistViewContainer tbody.odd {
    clear: left;
}

#joblistViewContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: rgb(199, 198, 213);
    border-bottom-width: 0.3em;
    padding: 0.2em 0.6em 0.2em 0.6em;
}

html.compact #joblistViewContainer tbody tr td {
    border-bottom-color: transparent;
    border-bottom-width: 0.1em;
    height: 1.5em;
    min-height: 1.5em;
    max-height: 1.5em;
}

/* allow wrapping in compact mode */
html.compact #joblistViewContainer tbody tr.value td.value,
html.compact #joblistViewContainer tbody tr.value td.value span.value {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

#joblistViewContainer tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    display: inline-block;
}

#joblistViewContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

html.compact #joblistViewContainer tbody tr td>span.header {
    display: inline-block;
}

html.compact #joblistViewContainer tbody tr td>span.value {
    max-width: 65%;
}

html.compact #joblistViewContainer tbody tr td {
    grid-row-span: 1 !important;
}

#joblistViewContainer tbody tr.compactJobHeader {
    display: none;
}

html.compact #joblistViewContainer tbody tr.compactJobHeader {
    display: block;
}

html.compact #joblistViewContainer tbody tr.compactJobHeader td {
    text-align: left !important;
    background-color: #5286BB;
    color: white !important;
    text-transform: uppercase;
    height: 1em;
    min-height: 1em;
    max-height: 1em;
}

#joblistViewContainer tbody tr.value td.value.JobId div.img {
    float: right;
}

#joblistViewContainer tbody tr.value td.value.JobId span.value {
    margin-right: 1.5em;
}

/***** 2nd job ****/
/* 2nd column */
#joblistViewContainer tbody tr.value td.value {
    background-color: #E5E5E5;
    vertical-align: middle;
}

/***** 2nd job ****/
/* 1th column */
#joblistViewContainer tbody tr.value td.value.odd {
    background-color: #EAEAEA;
}

/***** 1st job ****/
/* 2nd column */
#joblistViewContainer tbody.odd tr.value td.value {
    background-color: #EEEEEE;
}

/***** 1st job ****/
/* 1th column */
#joblistViewContainer tbody.odd tr.value td.value.odd {
    background-color: #F1F1F1;
}

/***** 2nd JobId ****/
#joblistViewContainer tbody tr.value td.value.odd.JobId {
    background-color: rgb(203, 203, 238);
}

/***** 1st JobId ****/
#joblistViewContainer tbody.odd tr.value td.value.odd.JobId {
    background-color: rgb(221, 221, 231);
}

/* second compact column*/
html.compact #joblistViewContainer tbody tr.value td.value,
html.compact #joblistViewContainer tbody.odd tr.value td.value {
    background-color: #E5E5E5;
}

/* first compact column*/
html.compact #joblistViewContainer tbody tr.value.odd td.value,
html.compact #joblistViewContainer tbody.odd tr.value.odd td.value {
    background-color: #F1F1F1;
}

/*** hover ***/
html.large #joblistViewContainer tbody:hover tr.value td.value,
html.large #joblistViewContainer tbody:hover tr.value td.value.odd,
html.large #joblistViewContainer tbody:hover tr.odd.value td.value,
html.large #joblistViewContainer tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

html.compact #joblistViewContainer tbody tr.value:hover td.value,
html.compact #joblistViewContainer tbody tr.value:hover td.value.odd,
html.compact #joblistViewContainer tbody tr.odd.value:hover td.value,
html.compact #joblistViewContainer tbody tr.odd.value:hover td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    border-bottom-color: #EEF0BA;
    background-color: #EDF0AE;
}

#joblistViewContainer tbody tr.value td.value.JobId,
#joblistViewContainer tbody tr.value td.value.JobId .imgW13_nextwhite {
    display: none;
}

#joblistViewContainer tbody tr.value td.value.JobId:hover,
#joblistViewContainer tbody tr.value td.value.JobId:hover .imgW13_nextwhite {
    display: inline-block;
}

#joblistViewContainer tbody tr.value td.value.JobId,
#joblistViewContainer tbody tr.value td.value.JobId .imgW13_nextcolored {
    display: inline-block;
}

#joblistViewContainer tbody tr.value td.value.JobId:hover,
#joblistViewContainer tbody tr.value td.value.JobId:hover .imgW13_nextcolored {
    display: none;
}

html.compact #joblistViewContainer tbody tr.value:hover td.value.JobId:hover span,
html.compact #joblistViewContainer tbody tr.value:hover td.value.odd.JobId:hover span,
html.compact #joblistViewContainer tbody tr.odd.value:hover td.value.JobId:hover span,
html.compact #joblistViewContainer tbody tr.odd.value:hover td.value.odd.JobId:hover span,
html.compact #joblistViewContainer tbody tr.value:hover td.value.JobId:hover,
html.compact #joblistViewContainer tbody tr.value:hover td.value.odd.JobId:hover,
html.compact #joblistViewContainer tbody tr.odd.value:hover td.value.JobId:hover,
html.compact #joblistViewContainer tbody tr.odd.value:hover td.value.odd.JobId:hover,
html.large #joblistViewContainer tbody tr.value td.value.JobId:hover,
html.large #joblistViewContainer tbody tr.value td.value.odd.JobId:hover,
html.large #joblistViewContainer tbody tr.odd.value td.value.JobId:hover,
html.large #joblistViewContainer tbody tr.odd.value td.value.odd.JobId:hover,
html.large #joblistViewContainer tbody tr.value td.value.JobId:hover span,
html.large #joblistViewContainer tbody tr.value td.value.odd.JobId:hover span,
html.large #joblistViewContainer tbody tr.odd.value td.value.JobId:hover span,
html.large #joblistViewContainer tbody tr.odd.value td.value.odd.JobId:hover span {
    color: white;
    border-right-color: #155ea8;
    border-left-color: #155ea8;
    border-bottom-color: #155ea8;
    background-color: #155ea8;
}

/** header **/
html.compact #joblistViewContainer thead {
    display: none !important;
}

#joblistViewContainer thead tr th {
    padding: 0.6em;
    max-width: 14em;
    font-family: Tahoma;
    text-align: left;
    color: #155ea8;
    background-color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #155ea8 solid 0.1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** delete ***/

#joblistViewContainer td.value.actions.images a {
    margin-left: 0.5em;
}

html.mobile #joblistViewContainer td.value.actions .images a {
    margin-left: 1em;
    font-size: 2em;
}

/*************************************/

#joblistViewContainer td.value.JobId DIV.img.statusImg {
    float: none !important;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

#joblistViewContainer td.value.JobId DIV.img.state0 {
    background-image: url("gdx.mendrix.worldlink.ui/purpledot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state1 {
    background-image: url("gdx.mendrix.worldlink.ui/purpledot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state2 {
    background-image: url("gdx.mendrix.worldlink.ui/orangedot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state3 {
    background-image: url("gdx.mendrix.worldlink.ui/greendot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state4 {
    background-image: url("gdx.mendrix.worldlink.ui/bluedot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state5 {
    background-image: url("gdx.mendrix.worldlink.ui/blackdot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state6 {
    background-image: url("gdx.mendrix.worldlink.ui/reddot.png") !important;
}

#joblistViewContainer td.value.JobId DIV.img.state7 {
    background-image: url("gdx.mendrix.worldlink.ui/greydot.png") !important;
}#loginView {
    padding: 1em;
    min-height: 15em;
}

#loginHide {
    display: none;
}

#loginView p {
    margin: 1rem 0;
}

#loginView #loginForm label,
#loginView #loginForm .label {
    display: block;
    margin: 0.25em 0;
    text-transform: lowercase;
    white-space: nowrap;
    top: 0;
}

#loginView #loginUserName,
#loginView #loginPassword {
    display: block;
    max-width: 15em;
}

#loginView input[type=button] {
    display: block;
    color: #E41736;
    margin-top: 1.5em;
    margin-bottom: 1em;
    padding: 0.2em 1em;
}

#loginView .clear {
    clear: both;
    display: block;
    margin-top: 0.5em;
}

#loginView span.error {
    color: red;
    display: block;
    margin-bottom: 1em;
}

#loginView a.label {
    padding: 0 0.5em;
    position: relative;
    top: -0.25em !important;
}

#loginView h1 {
    white-space: nowrap;
    color: #E41736;
}#orderView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#orderView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#orderView .right h2 {
    margin-left: -0.2em;
}

html.mobile.portrait #orderView .right h2 {
    margin-top: 1em;
    margin-bottom: 0;
}

html.compact.small #orderView #orderForm {
    font-size: 1.4em;
}

#orderView span,
#orderView sub {
    color: #155ea8;
    font-weight: bold;
}

#orderView sub {
    font-size: 1.3em;
}

#orderView #orderHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

html.mobile.portrait #orderView #orderHeader {
    font-size: 1.444444444em;
}

#orderView #orderHeader a,
#orderView #orderHeader span,
#orderView #orderHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: normal;
}

#orderView #orderForm fieldset {
    position: relative;
    margin-top: 2em;
}

#orderView #orderForm fieldset div.left {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#orderView #orderForm fieldset div.right {
    width: 50%;
    margin-left: 50%;
    box-sizing: border-box;
}

#orderView #orderForm fieldset div.full {
    width: 100%;
    margin-left: 0%;
    box-sizing: border-box;
    float: left;
}

html.compact.small #orderView #orderForm fieldset div.left,
html.compact.small #orderView #orderForm fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#orderView #orderForm fieldset div.inner {
    padding: 0.2em;
}

#orderView #orderForm fieldset label,
#orderView #orderForm fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

#orderView .showmore {
    display: block;
    margin-top: 2em;
}

#orderView .fastcollapsable {
    display: block;
}

#orderView .fastcollapsable.collapsed {
    display: none;
}

#orderView table {
    margin-bottom: 1em;
    width: 100%;
}

#orderView #orderForm th {
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
    padding: 0.2em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

html.compact.small #orderView #orderForm th {
    display: none;
}

#orderView #orderForm td {
    padding-right: 0.3em;
    vertical-align: top;
    padding: 0.2em;
}

html.compact.small #orderView #orderForm td {
    display: block;
    white-space: nowrap;
}

html.compact.small #orderView #orderForm td:last-child {
    padding-bottom: 0.25em;
    margin-bottom: 0.25em;
    border-bottom: #155ea8 dashed 0.1em;
}

#orderView tbody.errorSection tr td {
    padding-bottom: 0.5em !important;
}

html.compact.small #orderView #orderForm tbody.errorSection td:last-child {
    border-bottom: none !important;
}

#orderView #orderForm .compactLabel {
    display: none;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    text-align: right;
    width: 7em;
    max-width: 7em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    vertical-align: middle;
}

html.compact.small #orderView #orderForm td input,
html.compact.small #orderView #orderForm td select {
    vertical-align: middle;
}

html.compact.small #orderView #orderForm .compactLabel {
    display: inline-block;
}

html.compact.small #orderView #orderForm td {
    border-top: grey solid 1px;
}


#orderView .timeLabelWrapper {
    width: 22em;
    display: block;
}

html.compact.small #orderView .timeLabelWrapper,
html.compact.medium #orderView .timeLabelWrapper {
    width: 20em;
}

#orderView .openingHoursLabelWrapper {
    width: 18em;
    display: block;
}

html.compact.small #orderView .timeLabelWrapper,
html.compact.medium #orderView .timeLabelWrapper {
    width: 16em;
}


#orderView .endTimeTommorow {
    text-transform: lowercase;
    color: red;
    display: inline-block;
    text-align: right;
    float: right;
}

/* product options */

#orderView .productOptions div.inner>select,
#orderView .productOptions div.inner>div {
    display: inline-block;
    width: 15em;
    max-width: 15em;
    margin-bottom: 1em;
    margin-right: 0.5em;
}

#orderView .productOptions .seperator {
    margin-top: -1em;
}

#orderView .productOptions div.inner>div label {
    margin-right: 1em;
    margin-left: 0.2em !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

#orderView .productOptions {
    margin-bottom: -1em;
}

#orderView .required {
    vertical-align: text-top;
}

/* warnings */

#orderView .inputWarning {
    background-color: whitesmoke;
    padding: 0.5em 1.0em;
    padding-right: 0;
    border: #155ea8 solid 0.1em;
    margin-top: 1em;
    margin-right: 1em;
}

#orderView div.inputWarning .img {
    float: right;
    margin-right: 0.5em;
}

#orderView div.inputWarning span {
    display: block;
}

/* mandatory input errors */

#orderView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

#orderView div.inputError div {
    float: right;
    margin-right: 0.5em;
}

#orderView div.inputError span {
    color: red;
    display: block;
}

#orderView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}


#orderView .left div.errorSection {
    margin-right: 0em;
}

#orderView .right div.errorSection {
    margin-left: 0em;
}

html.mobile.compact.portrait #orderView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

#orderView tbody.errorSection {
    background-color: khaki;
    border: #155ea8 solid 0.2em;
}

#orderView tbody.errorSection div.imgW15_alert {
    float: right;
    margin-right: 0.5em;
}

#orderView tbody.errorSection ul {
    padding-bottom: 0.5em;
    border-bottom: #155ea8 dashed 0.1em;
    margin-bottom: 0.5em;
}

#orderView tbody.errorSection .inputError {
    margin-left: 1.5em;
}

/*** Input widths ***/

/* defaults */
#orderView input[type="text"],
#orderView input[type="date"],
#orderView input[type="datetime"],
#orderView input[type="number"],
#orderView textarea,
#orderView select {
    width: 21em !important;
    max-width: 21em !important;
    height: 1.6em !important;
}

html.mobile.portrait #orderView input[type="text"],
html.mobile.portrait #orderView input[type="date"],
html.mobile.portrait #orderView input[type="datetime"],
html.mobile.portrait #orderView input[type="number"],
html.mobile.portrait #orderView textarea,
html.mobile.portrait #orderView select {
    max-width: 20.5em;
    width: 20.5em;
    box-sizing: border-box;
}

html.compact #orderView div.errorSection input[type="text"],
html.compact #orderView div.errorSection input[type="date"],
html.compact #orderView div.errorSection input[type="datetime"],
html.compact #orderView div.errorSection input[type="number"],
html.compact #orderView div.errorSection textarea,
html.compact #orderView div.errorSection select,
html.mobile.portrait #orderView div.errorSection input[type="text"],
html.mobile.portrait #orderView div.errorSection input[type="date"],
html.mobile.portrait #orderView div.errorSection input[type="datetime"],
html.mobile.portrait #orderView div.errorSection input[type="number"],
html.mobile.portrait #orderView div.errorSection textarea,
html.mobile.portrait #orderView div.errorSection select {
    width: 18em;
    max-width: 18em;
    height: 1.6em;
    margin-right: 1em;
}

#orderView #orderViewOptions select {
    width: 10em;
    max-width: 10em;
}

#orderView table .imgW17_close {
    position: relative;
    top: -0.05em;
}

/** special output */
#orderView #orderForm fieldset label.foundAddress {
    font-size: 0.9em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    color: #748EA5;
    color: #5B81A3;
}

/** special inputs ****/

#orderView input[type="text"].currency {
    width: 3em !important;
    max-width: 3em !important;
    text-transform: uppercase;
}

#orderView input[type="text"].number1 {
    width: 4em !important;
    max-width: 4em !important;
    text-align: right;
}

#orderView input[type="text"].number2 {
    width: 2em !important;
    max-width: 2em !important;
}

#orderView input[type="text"].postalcode1,
#orderView input[type="text"].address1 {
    width: 15.7em !important;
    max-width: 15.7em !important;
}

html.mobile.portrait #orderView input[type="text"].postalcode1,
html.mobile.portrait #orderView input[type="text"].address1 {
    width: 15.2em !important;
    max-width: 15.2em !important;
}

html.compact #orderView div.errorSection input[type="text"].postalcode1,
html.compact #orderView div.errorSection input[type="text"].address1 {
    width: 12.7em;
    max-width: 12.7em;
    margin-right: 0em;
}

#orderView input[type="text"].address2,
html.mobile.portrait #orderView input[type="text"].address2,
html.compact #orderView div.errorSection input[type="text"].address2 {
    width: 5em;
    max-width: 5em;
}

#orderView textarea {
    height: 6em !important;
}

#orderView .reference {
    width: 10em !important;
    max-width: 10em !important;
}

#orderView input[type=button] {
    width: 10em;
    max-width: 10em;
}

#orderView input.time,
#orderView select.time,
html.mobile #orderView div.moment input {
    width: 5.8em !important;
    max-width: 5.8em !important;
    margin-right: 0 !important;
}

#orderView input.moment {
    width: 8em !important;
    max-width: 8em !important;
    margin-right: 0 !important;
}

#orderView .makeMoment {
    box-sizing: border-box;
    margin-left: 0.3em;
    vertical-align: middle;
}

/* html.compact.small #orderView .packingDetails input {
    width: 12.5em;
    max-width: 12.5em;
}

html.compact.small #orderView .packingName input {
    width: 12.5em !important;
    max-width: 12.5em !important;
    display: inline-block;
} */

#orderView label:focus,
#orderView .label:focus,
#orderView .img:focus {
    background-color: khaki;
}

/* misc */

#orderView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 20em;
}

#orderView div.submitting div {}

#orderView div.submitting span {
    display: block;
    margin-top: 1em;
}

#orderView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#orderView div.haveMissingFields div {
    float: left;
}

#orderView div.haveMissingFields span {
    margin-left: 5em;
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

#orderView div.InvalidOrder {
    background-color: khaki;
    height: auto;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#orderView div.InvalidOrderWarning {
    float: left;
}

#orderView div.InvalidOrderHeader {
    padding-bottom: 20px;
}

#orderView div.InvalidOrder span {
    margin-left: 5em;
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

#orderView div.InvalidOrder li {
    margin-left: 7em;
    color: #155ea8;
    font-weight: bold;
}

html.mobile.portrait #orderView div.haveMissingFields span {
    display: inline-block;
    top: -0.5em;
    max-width: 13em;
    margin-left: 1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
}

/* order header */
#orderView #orderHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #orderView #orderHeader nav {
    margin-right: 0em;
}

#orderView #orderHeader nav>div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #orderView #orderHeader nav>div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#orderView #orderHeader nav>div:hover {
    background-color: #EDF0AE;
    color: #155ea8;
}

html.mobile.portrait #orderView #orderHeader nav>div {
    float: none;
}

#orderView #orderHeader nav>div div {
    box-sizing: border-box;
    position: relative;
}

#orderView #orderHeader nav>div a,
#orderView #orderHeader nav>div span,
#orderView #orderHeader nav>div a:visited {
    margin-right: 0.7em;
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #orderView #orderHeader nav a {
    margin-right: 0;
}

#orderView #orderHeader nav a:hover {
    color: #155ea8;
}

#orderView .seperator {
    /* used to have a !important flag on display: block; , but that interferes with customizations display: none;*/
    /* it seems unnecessary */
    display: block;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#orderView .momentSeperator {
    clear: both;
}

#orderView div.taskCountry {
    margin-bottom: 0.5em;
}

#orderView span.addressbook {
    position: relative;
    top: -0.5em;
    text-transform: lowercase;
}

#orderView div.addressbook {
    padding: 1em;
}

#orderView div .addressbook {
    padding-left: 1em !important;
}

#orderView div.addressbook:hover {
    background-color: khaki;
}

.packingDetails {
    width: 10%;
}

.packingWeight,
.packingVolume,
.packingSurface {
    width: 5% !important;

}

.packingWeight,
.packingVolume,
.packingSurface,
.packingDetails,
.packingNumber,
.packingName input {
    width: calc(100% - 10px) !important;
}

.packingDimensions {
    width: 15% !important;
}


#orderView input:not([class*="packingL"], [class*="packingW"], [class*="packingH"], [class*="postalcode1"], [class*="address2"], [class*="number1"], [class*="number2"], [class*="packingDetails"], [class*="packingNumber"], [class*="packingSurface"], [class*="packingName"], [class="packingVolume"], [class*="characteristicCheckBox"]) {
    width: 21em !important;
}

#orderView input[class*="postalcode1"] {
    width: 17em !important;
}

#orderView input[class*="address2"] {
    width: 3em !important;
}

.orderReference input {
    width: 21em !important;
}

.OrderProductId select,
.quickAddressLeft,
.quickAddressRight,
.taskCountry select,
.taskCountry select {
    width: 21.5em !important;
    min-width: 21.5em !important;
}

.taskInstructions textarea {
    width: 21.5em !important;
    min-width: 21.5em !important;
}


/*
    **********************
        Shipment Goods
    **********************
*/
#orderView .shipmentGoods table {
    max-width: 100% !important;
}

#orderView .shipmentGoods table td {
    max-width: fit-content !important;
    white-space: nowrap;
}

/* name */
#orderView .shipmentGoods table td select {
    max-width: 10em !important;
    width: auto;
}

/* number */
#orderView .shipmentGoods table .packingNumber,
#orderView .shipmentGoods table .packingNumber input {
    max-width: 7em !important;
    width: auto;
}

/* L * W * H dimensions */
#orderView .shipmentGoods table .packingDimensions {
    max-width: 12em !important;
    width: auto;
}

#orderView .shipmentGoods table .packingDimensions input {
    max-width: 3.2em !important;
    width: auto;
}

#orerderView .shipmentGoods .checkbox.characteristicCheckBox {
    width: 2em !important;
    margin: 0.2em !important;
}

/* Weight, Volume, Surface */
#orderView .shipmentGoods table .packingWeight,
#orderView .shipmentGoods table .packingPieceWeight ,
#orderView .shipmentGoods table .netWeight,
#orderView .shipmentGoods table .packingVolume,
#orderView .shipmentGoods table .packingSurface,
#orderView .shipmentGoods table .packingWeight input,
#orderView .shipmentGoods table .netWeight  input,
#orderView .shipmentGoods table .packingVolume input,
#orderView .shipmentGoods table .packingSurface input {
    max-width: 3em !important;
    width: auto;
}

/* Details */
#orderView .shipmentGoods table .packingDetails input {
    max-width: 12em !important;
    width: auto;
}

#orderView .shipmentGoods table {
    table-layout: auto;
}

@media screen and (max-width: 880px) {
    #orderView .shipmentGoods table {
        table-layout: auto;
    }

    #orderView .shipmentGoods table .packingDetails,
    /* #orderView .shipmentGoods table .packingBarcode, */
    #orderView .shipmentGoods table .packingDimensions {
        max-width: 7em !important;
        width: auto;
        white-space: normal;
        word-wrap: break-word;
    }

    #orderView .shipmentGoods table .packingBarcode {
        max-width: 10em !important;
        width: auto;
        white-space: normal;
        word-wrap: break-word;
    }

    /* L * W * H dimensions */
    #orderView .shipmentGoods table .packingDimensions input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }

    #orderView .shipmentGoods table .packingBarcode input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }
}

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

    /* Name */
    #orderView .shipmentGoods table {
        table-layout: fixed;
    }

    #orderView .shipmentGoods table td select {
        max-width: 5em !important;
    }

    /* NUmber input */
    #orderView .shipmentGoods table .packingNumber {
        max-width: 5em !important;
        width: auto;
    }

    #orderView .shipmentGoods table .packingDimensions {
        max-width: 4em !important;
        width: auto;
        white-space: normal;
        word-wrap: break-word;
    }

    /* L * W * H dimensions */
    #orderView .shipmentGoods table .packingDimensions input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }

    #orderView .shipmentGoods table .packingBarcode input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }
}#orderImportView {
    min-height: 20em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#orderImportView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#orderImportView .right h2 {
    margin-left: -0.2em;
}

#orderImportView span,
#orderImportView sub {
    color: #155ea8;
    font-weight: bold;
}

#orderImportView sub {
    font-size: 1.3em;
}

#orderImportView #orderImportHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-right-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
    font-size: 90%;
}

html.small #orderImportHeader {
    border-left-width: 0.2em;
}

#orderImportView #orderImportHeader a,
#orderImportView #orderImportHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
}

#orderImportView #orderImportForm fieldset {
    position: relative;
    margin-top: 2em;
}

#orderImportView #orderImportForm fieldset div.left {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#orderImportView #orderImportForm fieldset div.right {
    width: 50%;
    margin-left: 50%;
    box-sizing: border-box;
}

#orderImportView #orderImportForm fieldset .full {
    box-sizing: border-box;
    margin-top: 4em;
}

#orderImportView #orderImportForm fieldset div.inner {
    padding: 0.2em;
}

#orderImportView #orderImportForm fieldset label,
#orderImportView #orderImportForm fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

/* mandatory input errors */

#orderImportView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

#orderImportView div.inputError div {
    float: right;
    margin-right: 0.5em;
}

#orderImportView div.inputError span {
    color: red;
    display: block;
}

#orderImportView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}

#orderImportView .left div.errorSection {
    margin-right: 0em;
}

#orderImportView .right div.errorSection {
    margin-left: 0em;
}

#orderImportView tbody.errorSection ul {
    padding-bottom: 0.5em;
    border-bottom: #155ea8 dashed 0.1em;
    margin-bottom: 0.5em;
}

#orderImportView tbody.errorSection .inputError {
    margin-left: 1.5em;
}

/*** Input widths ***/

/* defaults */
#orderImportView input[type="text"],
#orderImportView input[type="date"],
#orderImportView input[type="datetime"],
#orderImportView input[type="number"],
#orderImportView textarea,
#orderImportView select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

/** special inputs ****/
#orderImportView input[type="text"].orderImport1 {
    width: 15.7em;
    max-width: 15.7em;
}

#orderImportView input[type="text"].orderImport2 {
    width: 5em;
    max-width: 5em;
}

#orderImportView textarea {
    height: 6em !important;
}

#orderImportView input[type=button] {
    width: 10em;
    max-width: 10em;
}

#orderImportView input.time,
#orderImportView select.time {
    width: 5.8em !important;
    max-width: 5.8em !important;
    margin-right: 0;
}

#orderImportView label:focus,
#orderImportView .label:focus,
#orderImportView .img:focus {
    background-color: khaki;
}

#orderImportView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30em;
    max-width: 15em;
    margin-top: 5em;
}

#orderImportView div.submitting div {}

#orderImportView div.submitting span {
    display: block;
    margin-top: 1em;
}

#orderImportView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#orderImportView div.haveMissingFields div {
    float: left;
}

#orderImportView div.haveMissingFields span {
    margin-left: 5em;
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

/* orderImport header */
#orderImportView .seperator {
    clear: both;
    display: block !important;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#orderImportView .seperatorEmpty {
    clear: both;
}

#orderImportView #orderImportHeader table {
    width: 100%;
}

#orderImportView #orderImportHeader table td {
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 0.3em;
    background-color: rgb(221, 221, 231);
}

html.small #orderImportView #orderImportHeader table td {
    display: inline-block;
    min-width: 10em;
    height: 1.1em;
}

html.small #orderImportView #orderImportHeader table td.sep {
    min-width: 2em;
}

html.small #orderImportView #orderImportHeader table {
    background-color: rgb(221, 221, 231);
}

#orderImportView #orderImportHeader table td.label {
    width: 1em;
}

#orderImportView #orderImportHeader table td.sep {}

#orderImportView #orderImportHeader table td.sep span {
    font-size: 300%;
    line-height: 0.5;
    vertical-align: middle;
    position: relative;
    top: -0.15em;
    color: #155ea8;
}

#orderImportView #orderImportHeader table td.sep.completed span {
    color: white;
}

html.ie #orderImportView #orderImportHeader table td.sep span {
    top: -0.05em;
}

#orderImportView #orderImportHeader table td.active {
    background-color: #155ea8;
    color: khaki;
    font-weight: bold;
}

#orderImportView #orderImportHeader table td.completed {
    background-color: #155ea8;
    color: white;
}

/**************************************************/

#orderImportView #orderImportFormUpload p {
    margin-bottom: 1em;
    margin-top: 0;
    margin-right: 1em;
}

#orderImportView #orderImportFormUpload .uploadError {
    margin-top: 1em;
}

#orderImportView #orderImportFormUpload .right .inner span.errorMsg {
    white-space: pre-line;
    overflow: hidden;
}

/**************************************************/

#orderImportView #orderImportFormPreview p {
    margin-bottom: 1em;
    margin-top: 0;
    margin-right: 1em;
}

#orderImportView #orderImportFormPreview .previewError {}

#orderImportView #orderImportFormPreview .right .inner span.errorMsg {
    white-space: pre-line;
    overflow: hidden;
}

#orderImportView #orderImportFormPreview .right .inner span.reloadErrorMsg {
    text-decoration: underline;
    cursor: pointer !important;
    margin-top: 1em;
}

#orderImportView #orderImportFormPreview .loader {
    clear: both;
    text-align: center;
}

#orderImportView #orderImportFormPreview .loader .img {
    margin: 1em;
}

#orderImportView #orderImportFormPreview .loader span {
    text-transform: lowercase;
    display: block;
}

#orderImportView #orderImportFormPreview .tableWrapOuter {
    height: 20em;
    font-size: 85%;
}

#orderImportView #orderImportFormPreview .tableWrapInner {
    overflow: auto;
    position: absolute;
    right: 0;
    left: 0;
    height: 20em;
}

#orderImportView #orderImportFormPreview table {
    min-width: 100%;
}

#orderImportView #orderImportFormPreview table tbody.header {}

#orderImportView #orderImportFormPreview table tbody.header th {
    padding: 0.25em;
    text-align: left;
    background-color: #155ea8;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

#orderImportView #orderImportFormPreview table tbody.header th.odd {}

#orderImportView #orderImportFormPreview table tbody.header th span {
    font-weight: normal;
    color: white;
}

#orderImportView #orderImportFormPreview table tbody.data td {
    padding: 0.25em;
    text-align: left;
}

#orderImportView #orderImportFormPreview table tbody.data td span {
    font-weight: normal;
}

#orderImportView #orderImportFormPreview table tbody.data.odd td {}

#orderImportView #orderImportFormPreview table tbody.data td.odd {
    background-color: rgb(221, 221, 231);
}

#orderImportView #orderImportFormPreview table tbody.data.odd td.odd {
    background-color: rgb(221, 221, 231);
}

/**************************************************/
/* imgW10_upload */

.ajax-file-upload-statusbar {
    border: 0.1em solid #155ea8;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1em;
    box-sizing: Border-box;
}

.ajax-file-upload-filename {
    width: 100%;
    height: auto;
    margin-bottom: 0.5em;
    font-weight: Bold;
    color: #E41736;
}

.ajax-file-upload-progress {
    margin-bottom: 0.5em;
    position: relative;
    width: 100%;
    border: 0.1em solid #155ea8;
    padding: 0.1em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    display: inline-block;
    box-sizing: Border-box;
}

.ajax-file-upload-bar {
    background-color: #155ea8;
    width: 0;
    height: 1.2em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    color: #FFFFFF;
    padding-top: 0.1em;
    box-sizing: border-box;
}

.ajax-file-upload-percent {
    position: absolute;
    display: inline-block;
    top: 3px;
    left: 48%;
}

.ajax-file-upload-red {
    background-color: #155ea8;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    display: inline-block;
    color: #fff;
    font-weight: normal;
    padding: 0.5em;
    text-decoration: none;
    cursor: pointer !important;
    vertical-align: top;
    margin-right: 1em;
}

.ajax-file-upload-green {
    background-color: #155ea8;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    display: inline-block;
    color: #fff;
    font-weight: normal;
    padding: 0.5em;
    text-decoration: none;
    cursor: pointer !important;
    vertical-align: top;
    margin-right: 1em;
}

.ajax-file-upload {
    font-weight: bold;
    cursor: pointer !important;
    line-height: 1em;
    height: 1.5em;
    width: 1.5em;
    margin: 0 1.5em 0.5em 0;
    display: inline-block;
    text-decoration: none;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1em;
    color: #fff;
    background-color: #155ea8;
    border: none;
    vertical-align: middle;
    background-image: url('gdx.mendrix.worldlink.ui/upload.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ajax-file-upload:hover {
    background-color: #0B6F14;
}

.ajax-upload-dragdrop {
    border: 0.2em dotted #155ea8;
    color: black;
    text-align: left;
    padding: 1em;
    box-sizing: Border-box;
    margin-bottom: 1em;
}

.ajax-upload-dragdrop.state-hover {
    border: 0.2em solid #155ea8;
}

.ajax-file-upload-error {
    color: red;
}

/**************************************************/

#orderImportView #orderImportFormTemplate p {
    margin-bottom: 1em;
    margin-top: 0;
    margin-right: 1em;
}

/**************************************************/

#orderImportView #orderImportFormColumns p {
    margin-bottom: 1em;
    margin-top: 0;
    margin-right: 1em;
}

/***************************/

#orderImportFormTemplateViewContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

#orderImportFormTemplateViewContainer span,
#orderImportFormTemplateViewContainer strong,
#orderImportFormTemplateViewContainer a,
#orderImportFormTemplateViewContainer li {
    line-height: 1.3;
}

#orderImportFormTemplateViewContainer tbody tr.value td {
    display: none;
    vertical-align: top;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value {
    display: table-cell;
}

#orderImportFormTemplateViewContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

#orderImportFormTemplateViewContainer table {
    font-size: 0.8em;
}

#orderImportFormTemplateViewContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

#orderImportFormTemplateViewContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: rgb(199, 198, 213);
    border-bottom-width: 0.3em;
    padding: 0.2em 0.6em 0.2em 0.6em;
}

#orderImportFormTemplateViewContainer tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

#orderImportFormTemplateViewContainer tbody tr th.actions,
#orderImportFormTemplateViewContainer tbody tr td.actions {
    width: 1.5em;
    min-width: 1.5em;
    max-width: 1.5em;
}

#orderImportFormTemplateViewContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

#orderImportFormTemplateViewContainer tbody tr.compactTemplateHeader {
    display: none;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name div.img {
    float: right;
}

#orderImportFormTemplateViewContainer tbody tr th.Name,
#orderImportFormTemplateViewContainer tbody tr td.Name,
#orderImportFormTemplateViewContainer tbody tr td.Name>span {
    width: 20em;
    max-width: 20em;
    min-width: 20em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name span.value {
    width: 18em;
    max-width: 18em;
    min-width: 18em;
}

#orderImportFormTemplateViewContainer tbody tr th.Description,
#orderImportFormTemplateViewContainer tbody tr td.Description,
#orderImportFormTemplateViewContainer tbody tr td.Description>span {
    width: auto;
    max-width: initial;
    text-transform: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    vertical-align: top;
}

/***** 2nd template ****/
/* 2nd column */
#orderImportFormTemplateViewContainer tbody tr.value td.value {
    background-color: #E5E5E5;
    vertical-align: top;
}

/***** 2nd template ****/
/* 1th column */
#orderImportFormTemplateViewContainer tbody tr.value td.value.odd {
    background-color: #EAEAEA;
}

/***** 1st template ****/
/* 2nd column */
#orderImportFormTemplateViewContainer tbody.odd tr.value td.value {
    background-color: #EEEEEE;
}

/***** 1st template ****/
/* 1th column */
#orderImportFormTemplateViewContainer tbody.odd tr.value td.value.odd {
    background-color: #F1F1F1;
}

/***** 2nd NAME ****/
#orderImportFormTemplateViewContainer tbody tr.value td.value.odd.Name {
    background-color: rgb(203, 203, 238);
}

/***** 1st NAME ****/
#orderImportFormTemplateViewContainer tbody.odd tr.value td.value.odd.Name {
    background-color: rgb(221, 221, 231);
}

/*** hover ***/
#orderImportFormTemplateViewContainer tbody:hover tr.value td.value,
#orderImportFormTemplateViewContainer tbody:hover tr.value td.value.odd,
#orderImportFormTemplateViewContainer tbody:hover tr.odd.value td.value,
#orderImportFormTemplateViewContainer tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name,
#orderImportFormTemplateViewContainer tbody tr.value td.value.Name .imgW13_nextwhite {
    display: none;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name:hover,
#orderImportFormTemplateViewContainer tbody tr.value td.value.Name:hover .imgW13_nextwhite {
    display: inline-block;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name,
#orderImportFormTemplateViewContainer tbody tr.value td.value.Name .imgW13_nextcolored {
    display: inline-block;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name:hover,
#orderImportFormTemplateViewContainer tbody tr.value td.value.Name:hover .imgW13_nextcolored {
    display: none;
}

#orderImportFormTemplateViewContainer tbody tr.value td.value.Name:hover,
#orderImportFormTemplateViewContainer tbody tr.value td.value.odd.Name:hover,
#orderImportFormTemplateViewContainer tbody tr.odd.value td.value.Name:hover,
#orderImportFormTemplateViewContainer tbody tr.odd.value td.value.odd.Name:hover,
#orderImportFormTemplateViewContainer tbody tr.value td.value.Name:hover span,
#orderImportFormTemplateViewContainer tbody tr.value td.value.odd.Name:hover span,
#orderImportFormTemplateViewContainer tbody tr.odd.value td.value.Name:hover span,
#orderImportFormTemplateViewContainer tbody tr.odd.value td.value.odd.Name:hover span {
    color: white;
    border-right-color: #155ea8;
    border-left-color: #155ea8;
    border-bottom-color: #155ea8;
    background-color: #155ea8;
}

/** header **/
#orderImportFormTemplateViewContainer thead tr th {
    padding: 0.6em;
    max-width: 14em;
    font-family: Tahoma;
    text-align: left;
    color: #155ea8;
    background-color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #155ea8 solid 0.1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** delete ***/

#orderImportFormTemplateViewContainer td.value.actions.images a {
    margin-left: 0.5em;
}

/* capitalize */
#orderImportFormTemplateViewContainer td.value.Name span.value span {
    text-transform: capitalize;
}

/****************************************/

#orderImportFormColumnAssignments {}

#orderImportFormColumnAssignments>div.left {
    width: 70% !important;
}

#orderImportFormColumnAssignments>div.right {
    width: 30% !important;
    margin-left: 70% !important;
}

#orderImportFormColumnAssignments>div.left>div.inner {
    max-height: 26em;
    overflow: auto;
    overflow-x: hidden;
}

#orderImportFormColumnAssignments>div.left>div.inner>div {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    margin-bottom: 0.4em;
    font-size: 1em;
    background-color: #71A1D2;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
    cursor: move;
    border-color: #155ea8;
    border-width: 0.1em;
    border-style: solid;
}

#orderImportFormColumnAssignments>div.left>div.inner>div.unassigned {}

#orderImportFormColumnAssignments>div.left>div.inner>div>div.ColumnName {
    color: white;
    padding: 0.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#orderImportFormColumnAssignments>div.left>div.inner>div.unassigned>div.ColumnName {}

#orderImportFormColumnAssignments>div.left>div.inner>div>div.ColumnName>div.name {
    display: inline-block;
    color: white;
    text-overflow: ellipsis;
    max-width: 15em;
    overflow: hidden;
    line-height: 1.2;
}

#orderImportFormColumnAssignments>div.left>div.inner>div>div.ColumnName>div.value {
    display: inline-block;
    float: right;
    color: white;
    max-width: 15em;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
}

#orderImportFormColumnAssignments>div.left>div.inner>div>div.AssignedColumn {
    background-color: rgb(208, 208, 208);
    height: 1.5em;
    box-sizing: Border-box;
    padding: 0.2em;
}

#orderImportFormColumnAssignments>div.left>div.inner>div.unassigned>div.AssignedColumn {}

#orderImportFormColumnAssignments>div.right>div.inner {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    max-height: 26em;
    overflow: auto;
    overflow-x: hidden;
}

#orderImportFormDraggable,
#orderImportFormColumnAssignments>div.right>div.inner>div {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    margin-bottom: 0.4em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #71A1D2;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
    cursor: move;
}

#orderImportFormDraggable.required,
#orderImportFormColumnAssignments>div.right>div.inner>div.required {
    font-weight: bold;
}

#orderImportFormColumnAssignments>div.right>div.inner>div>span {
    display: none;
    color: white;
}

#orderImportFormColumnAssignments>div.right>div.inner>div.required>span {
    display: inline-block;
}

/**************************************************/

#orderImportView #orderImportFormOptions .header p {
    margin-bottom: 1em;
    margin-top: 0;
    margin-right: 1em;
}

/* product options */

#orderImportView .productOptions div.inner>select,
#orderImportView .productOptions div.inner>div {
    display: inline-block;
    width: 15em;
    max-width: 15em;
    margin-bottom: 1em;
    margin-right: 0.5em;
}

#orderImportView .productOptions .seperator {
    margin-top: -1em;
}

#orderImportView .productOptions div.inner>div label {
    margin-right: 1em;
    margin-left: 0.2em !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

#orderImportView .productOptions {
    margin-bottom: -1em;
}

#orderImportView #orderImportFormOptions .required {
    vertical-align: text-top;
}

#orderImportView fieldset.client>div {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 4em;
}

#orderImportView fieldset.client>div.errorSection {
    margin-left: 0em;
    box-sizing: border-box;
    height: 6em;
}

#orderImportView fieldset.client>div span.clientName {
    vertical-align: middle;
    margin-left: 1em;
    max-width: 17em;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

#orderImportView fieldset.client>div div {
    vertical-align: middle;
}

#orderImportView .productIdError {
    height: 4.25em;
}

#orderImportView #orderImportFormComplete .header p {
    margin-bottom: 1em;
    margin-top: 0;
    margin-right: 1em;
}

/* default pickupTask */

#orderImportView .defaultPickupOrder .showmore {
    display: block;
    margin-top: 2em;
}

#orderImportView .defaultPickupOrder .fastcollapsable {
    display: block;
}

#orderImportView .defaultPickupOrder .fastcollapsable.collapsed {
    display: none;
}

#orderImportView .defaultPickupOrder tbody.errorSection tr td {
    padding-bottom: 0.5em !important;
}

#orderImportView .defaultPickupOrder .timeLabelWrapper {
    width: 22em;
    display: block;
}

#orderImportView .defaultPickupOrder .endTimeTommorow {
    text-transform: lowercase;
    color: red;
    display: inline-block;
    text-align: right;
    float: right;
}

#orderImportView .defaultPickupOrder input[type="text"],
#orderImportView .defaultPickupOrder input[type="date"],
#orderImportView .defaultPickupOrder input[type="datetime"],
#orderImportView .defaultPickupOrder input[type="number"],
#orderImportView .defaultPickupOrder textarea,
#orderImportView .defaultPickupOrder select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

#orderImportView .defaultPickupOrder input[type="text"].address1 {
    width: 15.7em;
    max-width: 15.7em;
}

#orderImportView .defaultPickupOrder input[type="text"].address2 {
    width: 5em;
    max-width: 5em;
}

#orderImportView .defaultPickupOrder textarea {
    height: 6em !important;
}

#orderImportView .defaultPickupOrder .reference {
    width: 10em !important;
    max-width: 10em !important;
}

#orderImportView .defaultPickupOrder div.taskCountry {
    margin-bottom: 0.5em;
}

#orderImportView .defaultPickupOrder span.addressbook {
    position: relative;
    top: -0.5em;
    text-transform: lowercase;
}

#orderImportView .defaultPickupOrder div.addressbook {
    padding: 1em;
    margin: -1em;
}

#orderImportView .defaultPickupOrder div.left .addressbook {
    margin-right: 1em;
}

#orderImportView .defaultPickupOrder div.addressbook:hover {
    background-color: khaki;
}

#orderImportView input.time,
#orderImportView select.time,
html.mobile #orderImportView div.moment input {
    width: 5.8em !important;
    max-width: 5.8em !important;
    margin-right: 0 !important;
}

#orderImportView input.moment {
    width: 8em !important;
    max-width: 8em !important;
    margin-right: 0 !important;
}#orderImportDetailsView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#orderImportDetailsView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#orderImportDetailsView #orderImportDetailsHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#orderImportDetailsView .actions {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    clear: both;
}

#orderImportDetailsView #orderImportDetailsHeader a,
#orderImportDetailsView #orderImportDetailsHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
}

#orderImportDetailsView div.header {
    margin-top: 1em;
    position: relative;
    white-space: nowrap;
}

#orderImportDetailsView div.header div.left {
    float: left;
    position: relative;
    display: inline-block;
    width: 50%;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
}

#orderImportDetailsView div.header div.right {
    position: relative;
    display: inline-block;
    width: 50%;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
}

#orderImportDetailsView div.header div.single>div:nth-child(odd),
#orderImportDetailsView div.header div.left>div:nth-child(odd),
#orderImportDetailsView div.header div.right>div:nth-child(odd) {
    /*background-color: #EEEEEE;*/
}

#orderImportDetailsView div.header div.single>div:nth-child(even),
#orderImportDetailsView div.header div.left>div:nth-child(even),
#orderImportDetailsView div.header div.right>div:nth-child(even) {
    background-color: #F1F1F1;
}

#orderImportDetailsView div.header .columnheader {
    background-color: #5286BB;
    color: white;
    font-weight: bold;
    padding: 0.4em;
    text-transform: lowercase;
}

#orderImportDetailsView div.header .columnTitle {
    margin-top: 1em;
    font-weight: bold;
    padding: 0.2em;
}

#orderImportDetailsView div.header div.caption {
    padding: 0.4em;
    width: 35%;
    max-width: 35%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
    background-color: transparent;
}

#orderImportDetailsView div.header div.value {
    padding: 0.2em;
    width: 65%;
    max-width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
    background-color: transparent;
}

#orderImportDetailsView div.header div.value.progress {
    white-space: nowrap;
    vertical-align: middle;
    height: 1em;
    overflow: hidden;
    background-color: #5286BB;
    padding: 0;
}

#orderImportDetailsView div.header div.value.progress .bar {
    position: relative;
    background-color: #5FBB52;
    width: 0%;
    height: 1.2em;
    box-sizing: border-box;
    display: block;
}

#orderImportDetailsView div.header div.value.progress div.txt {
    position: relative;
    top: -1.2em;
    text-align: center;
    color: white;
    width: 100%;
    height: 1.2em;
    box-sizing: border-box;
    display: block;
}

#orderImportDetailsView div.header div.single div.caption {
    width: 17.5%;
    max-width: 17.5%;
}

#orderImportDetailsView div.header div.single div.value {
    max-width: 82.5%;
    width: 82.5%;
}

#orderImportDetailsView div.seperator {
    height: 1em;
    /*border-top: 0.2em solid #5286BB;*/
    clear: both;
}

/****************************************************************************/

#orderImportStatusListContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
    clear: both;
}

#orderImportStatusListContainer span,
#orderImportStatusListContainer strong,
#orderImportStatusListContainer a,
#orderImportStatusListContainer li {
    line-height: 1.3;
}

#orderImportStatusListContainer tbody tr.value td {
    display: none;
    vertical-align: top;
}

#orderImportStatusListContainer tbody tr.value td.value {
    display: table-cell;
}

#orderImportStatusListContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

#orderImportStatusListContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

#orderImportStatusListContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: #5286BB;
    border-bottom-width: 0.3em;
    padding: 0.3em 0.6em 0.3em 0.2em;
}

#orderImportStatusListContainer tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

#orderImportStatusListContainer tbody tr td.StatusDescription>span {
    max-width: initial;
    white-space: pre-line;
}

#orderImportStatusListContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

#orderImportStatusListContainer tbody tr.compactHeader {
    display: none;
}

#orderImportStatusListContainer tbody tr.value td.value.Name div.img {
    float: right;
}

#orderImportStatusListContainer tbody tr.value td.value.Name span.value {
    margin-right: 1.5em;
}

/***** 2nd trace ****/
#orderImportStatusListContainer tbody.odd tr.value td.value {
    background-color: white;
    vertical-align: middle;
}

/***** 1st trace ****/
#orderImportStatusListContainer tbody tr.value td.value {
    background-color: #F1F1F1;
}

/*** hover ***/
#orderImportStatusListContainer tbody:hover tr.value td.value,
#orderImportStatusListContainer tbody:hover tr.value td.value.odd,
#orderImportStatusListContainer tbody:hover tr.odd.value td.value,
#orderImportStatusListContainer tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

#orderImportStatusListContainer tbody tr.value td.value.Name,
#orderImportStatusListContainer tbody tr.value td.value.Name .imgW13_nextwhite {
    display: none;
}

#orderImportStatusListContainer tbody tr.value td.value.Name:hover,
#orderImportStatusListContainer tbody tr.value td.value.Name:hover .imgW13_nextwhite {
    display: inline-block;
}

#orderImportStatusListContainer tbody tr.value td.value.Name,
#orderImportStatusListContainer tbody tr.value td.value.Name .imgW13_nextcolored {
    display: inline-block;
}

#orderImportStatusListContainer tbody tr.value td.value.Name:hover,
#orderImportStatusListContainer tbody tr.value td.value.Name:hover .imgW13_nextcolored {
    display: none;
}

/** header **/
#orderImportStatusListContainer thead tr th {
    padding: 0.4em 0.6em 0.4em 0.4em;
    max-width: 14em;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-align: left;
    color: white;
    background-color: #5286BB;
    font-weight: bold;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** delete ***/

#orderImportStatusListContainer td.value.actions.images a {
    margin-left: 0.5em;
}

/*************************************/
#orderImportStatusListContainer tbody tr.value td.value.Percentage {
    position: relative;
    white-space: nowrap !important;
}

#orderImportStatusListContainer tbody tr.value td.value.Percentage div.value>div {
    text-align: center;
    -ms-border-radius: 0.2em !important;
    -moz-border-radius: 0.2em !important;
    -webkit-border-radius: 0.2em !important;
    border-radius: 0.2em !important;
    position: relative;
}

/**********************************/
#orderImportDetailsView #ordersViewContainer {
    margin-top: 0;
    margin: 0;
}#orderrouteView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#orderrouteViewTaskPanel {}

#orderrouteViewOrderPanel {}

#orderrouteView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    display: block;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#orderrouteView .right h2 {
    margin-left: -0.2em;
}

html.mobile.portrait #orderrouteView .right h2 {
    margin-top: 1em;
    margin-bottom: 0;
}

html.compact.small #orderrouteView #orderrouteForm {
    font-size: 1.4em;
}

#orderrouteView span,
#orderrouteView sub {
    color: #155ea8;
    font-weight: bold;
}

#orderrouteView sub {
    font-size: 1.3em;
}

#orderrouteView #orderHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

html.mobile.portrait #orderrouteView #orderHeader {
    font-size: 1.444444444em;
}

#orderrouteView #orderHeader a,
#orderrouteView #orderHeader span,
#orderrouteView #orderHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: normal;
}

#orderrouteView #orderrouteForm fieldset {
    position: relative;
    margin-top: 2em;
}

#orderrouteView #orderrouteForm fieldset div.left {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#orderrouteView #orderrouteForm fieldset div.right {
    width: 50%;
    margin-left: 50%;
    box-sizing: border-box;
}

#orderrouteView #orderrouteForm fieldset div.full {
    width: 100%;
    margin-left: 0%;
    box-sizing: border-box;
    float: left;
}

html.compact.small #orderrouteView #orderrouteForm fieldset div.left,
html.compact.small #orderrouteView #orderrouteForm fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#orderrouteView #orderrouteForm fieldset div.inner {
    padding: 0.2em;
}

#orderrouteView #orderrouteForm fieldset label,
#orderrouteView #orderrouteForm fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

#orderrouteView .showmore {
    display: block;
    margin-top: 2em;
}

#orderrouteView .fastcollapsable {
    display: block;
}

#orderrouteView .fastcollapsable.collapsed {
    display: none;
}

#orderrouteViewTaskPanel table {
    margin-bottom: 1em;
    width: 100%;
}

#orderrouteView #orderrouteViewTaskPanel th {
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
    padding: 0.2em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

html.compact.small #orderrouteViewTaskPanel th {
    display: none;
}

#orderrouteView #orderrouteViewTaskPanel td {
    padding-right: 0.3em;
    vertical-align: top;
    padding: 0.2em;
}

html.compact.small #orderrouteViewTaskPanel td {
    display: block;
    white-space: nowrap;
}

html.compact.small #orderrouteViewTaskPanel td:last-child {
    padding-bottom: 0.25em;
    margin-bottom: 0.25em;
    border-bottom: #155ea8 dashed 0.1em;
}

html.compact.small #orderrouteViewTaskPanel tbody.errorSection td:last-child {
    border-bottom: none !important;
}

#orderrouteView tbody.errorSection tr td {
    padding-bottom: 0.5em !important;
}

#orderrouteView #orderrouteForm .compactLabel {
    display: none;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    text-align: right;
    width: 7em;
    max-width: 7em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    vertical-align: middle;
}

html.compact.small #orderrouteView #orderrouteForm td input,
html.compact.small #orderrouteView #orderrouteForm td select {
    vertical-align: middle;
}

html.compact.small #orderrouteView #orderrouteForm td {
    border-top: grey solid 1px;
}

html.compact.small #orderrouteView #orderrouteForm .compactLabel {
    display: inline-block;
}

#orderrouteView .timeLabelWrapper {
    width: 22em;
    display: block;
}

html.compact.small #orderrouteView .timeLabelWrapper,
html.compact.medium #orderrouteView .timeLabelWrapper {
    width: 20em;
}

#orderrouteView .openingHoursLabelWrapper {
    width: 18em;
    display: block;
}

html.compact.small #orderrouteView .timeLabelWrapper,
html.compact.medium #orderrouteView .timeLabelWrapper {
    width: 16em;
}

#orderrouteView .endTimeTommorow {
    text-transform: lowercase;
    color: red;
    display: inline-block;
    text-align: right;
    float: right;
}

/* product options */

#orderrouteView .productOptions div.inner>select,
#orderrouteView .productOptions div.inner>div {
    display: inline-block;
    width: 15em;
    max-width: 15em;
    margin-bottom: 1em;
    margin-right: 0.5em;
}

#orderrouteView .productOptions .seperator {
    margin-top: -1em;
}

#orderrouteView .productOptions div.inner>div label {
    margin-right: 1em;
    margin-left: 0.2em !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

#orderrouteView .productOptions {
    margin-bottom: -1em;
}

#orderrouteView .required {
    vertical-align: text-top;
}

/* mandatory input errors */

#orderrouteView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

#orderrouteView div.inputError div {
    float: right;
    margin-right: 0.5em;
}

#orderrouteView div.inputError span {
    color: red;
    display: block;
}

#orderrouteView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}

#orderrouteView .left div.errorSection {
    margin-right: 0em;
}

#orderrouteView .right div.errorSection {
    margin-left: 0em;
}

html.mobile.compact.portrait #orderrouteView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

#orderrouteView tbody.errorSection {
    background-color: khaki;
    border: #155ea8 solid 0.2em;
}

#orderrouteView tbody.errorSection div.imgW15_alert {
    float: right;
    margin-right: 0.5em;
}

#orderrouteView tbody.errorSection ul {
    padding-bottom: 0.5em;
    border-bottom: #155ea8 dashed 0.1em;
    margin-bottom: 0.5em;
}

#orderrouteView tbody.errorSection .inputError {
    margin-left: 1.5em;
}

/*** Input widths ***/

/* defaults */
#orderrouteView input[type="text"],
#orderrouteView input[type="date"],
#orderrouteView input[type="datetime"],
#orderrouteView input[type="number"],
#orderrouteView textarea,
#orderrouteView select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

html.mobile.portrait #orderrouteView input[type="text"],
html.mobile.portrait #orderrouteView input[type="date"],
html.mobile.portrait #orderrouteView input[type="datetime"],
html.mobile.portrait #orderrouteView input[type="number"],
html.mobile.portrait #orderrouteView textarea,
html.mobile.portrait #orderrouteView select {
    max-width: 20.5em;
    width: 20.5em;
    box-sizing: border-box;
}

html.compact #orderrouteView div.errorSection input[type="text"],
html.compact #orderrouteView div.errorSection input[type="date"],
html.compact #orderrouteView div.errorSection input[type="datetime"],
html.compact #orderrouteView div.errorSection input[type="number"],
html.compact #orderrouteView div.errorSection textarea,
html.compact #orderrouteView div.errorSection select,
html.mobile.portrait #orderrouteView div.errorSection input[type="text"],
html.mobile.portrait #orderrouteView div.errorSection input[type="date"],
html.mobile.portrait #orderrouteView div.errorSection input[type="datetime"],
html.mobile.portrait #orderrouteView div.errorSection input[type="number"],
html.mobile.portrait #orderrouteView div.errorSection textarea,
html.mobile.portrait #orderrouteView div.errorSection select {
    width: 18em;
    max-width: 18em;
    height: 1.6em;
    margin-right: 1em;
}

#orderrouteView #orderrouteViewOptions select {
    width: 10em;
    max-width: 10em;
}

#orderrouteView .shipmentGoods div.packingNameReadOnly,
#orderrouteView .shipmentGoods input[type="text"].packingNameReadOnly {
    display: inline-block;
    width: 100% !important;
    max-width: none !important;
    border: .15em solid #9A9A9A;
    padding-left: .2em;
    padding-right: .2em;
    background-color: white;
    box-sizing: border-box;
    -ms-border-radius: .2em;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.65em;
    padding-top: .2em;
    padding-bottom: .2em;
}

#orderrouteView .shipmentGoods .packingNameReadOnly {
    width: 28em !important;
    max-width: 28em !important;
}

html #orderrouteView .shipmentGoods .packingNameReadOnly {
    width: 28em !important;
    max-width: 28em !important;
}

html #orderrouteView .shipmentGoods .packingNumberReadOnly {
    width: 8em !important;
    max-width: 8em !important;
}

html #orderrouteView .shipmentGoods input[type="text"].packingDetailsReadOnly {
    width: 100%;
    max-width: none;
    position: relative;
}

html.mobile.landscape #orderrouteView .shipmentGoods .packingNameReadOnly {
    width: 25em !important;
    max-width: 25em !important;
}

html.small #orderrouteView .shipmentGoods .packingNameReadOnly {
    width: 11em !important;
    max-width: 11em !important;
}

#orderrouteView .shipmentGoods .packingDelete {
    width: 1.5em;
    max-width: 1.5em;
}

html.compact.small #orderrouteView .shipmentGoods .packingDelete {
    width: auto;
    max-width: none;
}

html.mobile.small #orderrouteView .shipmentGoods .packingDelete {
    width: auto;
    max-width: none;
}

html.mobile.portrait #orderrouteView .shipmentGoods tr.extraHeaders {
    display: none;
}

#orderrouteView .packingDimensions {
    white-space: nowrap;
}

#orderrouteView table .imgW17_close {
    position: relative;
    top: -0.05em;
}

/** special output */
#orderrouteView #orderrouteForm fieldset label.foundAddress {
    font-size: 0.9em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    color: #748EA5;
    color: #5B81A3;
}


/** special inputs ****/

#orderrouteView input[type="text"].currency {
    width: 3em !important;
    max-width: 3em !important;
    text-transform: uppercase;
}

#orderrouteView input[type="text"].number1 {
    width: 4em !important;
    max-width: 4em !important;
    text-align: right;
}

#orderrouteView input[type="text"].number2 {
    width: 2em !important;
    max-width: 2em !important;
}

#orderrouteView input[type="text"].postalcode1,
#orderrouteView input[type="text"].address1 {
    width: 15.7em;
    max-width: 15.7em;
}

html.mobile.portrait #orderrouteView input[type="text"].postalcode1,
html.mobile.portrait #orderrouteView input[type="text"].address1 {
    width: 15.2em;
    max-width: 15.2em;
}

html.compact #orderrouteView div.errorSection input[type="text"].postalcode1,
html.compact #orderrouteView div.errorSection input[type="text"].address1 {
    width: 12.7em;
    max-width: 12.7em;
    margin-right: 0em;
}

#orderrouteView input[type="text"].address2,
html.mobile.portrait #orderrouteView input[type="text"].address2,
html.compact #orderrouteView div.errorSection input[type="text"].address2 {
    width: 5em;
    max-width: 5em;
}

#orderrouteView textarea {
    height: 6.6em !important;
    margin-bottom: 0.35em;
}

html.mozilla #orderrouteView textarea {
    height: 6.6em !important;
    margin-bottom: 0.45em;
}

html.ie #orderrouteView textarea {
    height: 6.6em !important;
    margin-bottom: 0.5em;
}

#orderrouteView .reference {
    width: 10em !important;
    max-width: 10em !important;
}

#orderrouteView input[type=button] {
    min-width: 10em;
    margin-bottom: 1em;
}

#orderrouteView input.time,
#orderrouteView select.time,
html.mobile #orderrouteView div.moment input {
    width: 5.8em !important;
    max-width: 5.8em !important;
    margin-right: 0 !important;
}

#orderrouteView input.moment {
    width: 8em !important;
    max-width: 8em !important;
    margin-right: 0 !important;
}

#orderrouteView .makeMoment {
    box-sizing: border-box;
    margin-left: 0em;
    vertical-align: middle;
}

html.compact.small #orderrouteView .packingDetails input {
    width: 12.5em;
    max-width: 12.5em;
}

html.compact.small #orderrouteView .packingName input {
    width: 12.5em !important;
    max-width: 12.5em !important;
    display: inline-block;
}

#orderrouteView label:focus,
#orderrouteView .label:focus,
#orderrouteView .img:focus {
    background-color: khaki;
}

/* misc */
#orderrouteView .openingHours {
    height: 3.9em;
}

html.mobile.portrait #orderrouteView .openingHours {
    display: none;
}

#orderrouteView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 20em;
}

#orderrouteView div.submitting div {}

#orderrouteView div.submitting span {
    display: block;
    margin-top: 1em;
}

#orderrouteView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#orderrouteView div.haveMissingFields div {
    float: left;
}

#orderrouteView div.haveMissingFields span {
    margin-left: 5em;
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

html.mobile.portrait #orderrouteView div.haveMissingFields span {
    display: inline-block;
    top: -0.5em;
    max-width: 13em;
    margin-left: 1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
}

/* order header */
#orderrouteView #orderHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #orderrouteView #orderHeader nav {
    margin-right: 0em;
}

#orderrouteView #orderHeader nav>div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

html.desktop.landscape #orderrouteView #orderHeader nav>div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#orderrouteView #orderHeader nav>div:hover {
    background-color: #EDF0AE;
    color: #155ea8;
}

html.mobile.portrait #orderrouteView #orderHeader nav>div {
    float: none;
}

#orderrouteView #orderHeader nav>div div {
    box-sizing: border-box;
    position: relative;
}

#orderrouteView #orderHeader nav>div a,
#orderrouteView #orderHeader nav>div span,
#orderrouteView #orderHeader nav>div a:visited {
    margin-right: 0.7em;
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #orderrouteView #orderHeader nav a {
    margin-right: 0;
}

#orderrouteView #orderHeader nav a:hover {
    color: #155ea8;
}

#orderrouteView .seperator {
    display: block !important;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#orderrouteView div.taskCountry {
    margin-bottom: 0.5em;
}

#orderrouteView span.addressbook {
    position: relative;
    top: -0.5em;
    text-transform: lowercase;
}

#orderrouteView div.addressbook {
    padding: 1em;
    margin: -1em;
    padding-bottom: 1.75em;
}

#orderrouteView div.left .addressbook {
    margin-right: 1em;
}

/*#orderrouteView div.addressbook:hover {
    background-color: khaki;
}*/

#orderrouteView .incompleteroute {
    padding: 0.2em;
}

#orderrouteView .incompleteroute .errorSection {
    padding-top: 1em;
}

/****************************************************************************/

html.compact.small #orderrouteViewTaskPanel #orderrouteAdressesContainer td {
    display: table-cell !important;
}

html.small #orderrouteAdressesContainer .hideable,
html.compact.small #orderrouteViewTaskPanel #orderrouteAdressesContainer td.hideable {
    display: none !important;
}

#orderrouteAdressesContainer .nr {
    width: 5%;
}

#orderrouteAdressesContainer .name {
    width: 15%;
}

html.small #orderrouteAdressesContainer .nr {
    width: 20%;
}

html.small #orderrouteAdressesContainer .name {
    width: 80%;
}

html.compact #orderrouteAdressesContainer .name>span {
    max-width: 5em !important;
}

html.small #orderrouteAdressesContainer .name>span {
    max-width: 11em !important;
}

#orderrouteAdressesContainer .address {
    width: 30%;
}

html.compact #orderrouteAdressesContainer .address>span {
    max-width: 16em !important;
}

#orderrouteAdressesContainer .place {
    width: 20%;
}

html.compact #orderrouteAdressesContainer .place>span {
    max-width: 11em !important;
}

#orderrouteAdressesContainer .info {
    width: 20%;
}

#orderrouteAdressesContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: -1em;
}

#orderrouteAdressesContainer span,
#orderrouteAdressesContainer strong,
#orderrouteAdressesContainer a,
#orderrouteAdressesContainer li {
    line-height: 1.3;
}

html.compact #orderrouteAdressesContainer span,
html.compact #orderrouteAdressesContainer strong,
html.compact #orderrouteAdressesContainer a,
html.compact #orderrouteAdressesContainer li {
    line-height: 1.2;
}

#orderrouteAdressesContainer tbody tr.value td {
    vertical-align: top;
}

#orderrouteAdressesContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

html.mobile #orderrouteAdressesContainer table {
    font-size: 1.1em;
}

html.desktop.portrait #orderrouteAdressesContainer table {
    font-size: 0.8em;
}

html.mobile.landscape #orderrouteAdressesContainer table {
    font-size: 0.8em;
}

#orderrouteAdressesContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

#orderrouteAdressesContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: rgb(199, 198, 213);
    border-bottom-width: 0.3em;
    padding: 0.2em 0.6em 0.2em 0.6em;
}

#orderrouteAdressesContainer tbody tr td>span {
    max-width: 16em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

#orderrouteAdressesContainer tbody tr td.address>span {
    max-width: 20em;
}

#orderrouteAdressesContainer tbody tr td.name>span {
    max-width: 11em;
}

#orderrouteAdressesContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

#orderrouteAdressesContainer tbody tr.value td.value.name div.img {
    float: right;
}

#orderrouteAdressesContainer tbody tr.value td.value.name span.value {
    margin-right: 1.5em;
}

/***** 2nd address ****/
/* 2nd column */
#orderrouteAdressesContainer tbody tr.value td.value {
    background-color: #E5E5E5;
    vertical-align: middle;
}

/***** 2nd address ****/
/* 1th column */
#orderrouteAdressesContainer tbody tr.value td.value.odd {
    background-color: #EAEAEA;
}

/***** 1st address ****/
/* 2nd column */
#orderrouteAdressesContainer tbody.odd tr.value td.value {
    background-color: #EEEEEE;
}

/***** 1st address ****/
/* 1th column */
#orderrouteAdressesContainer tbody.odd tr.value td.value.odd {
    background-color: #F1F1F1;
}

/***** 2nd NAME ****/
#orderrouteAdressesContainer tbody tr.value td.value.odd.name {
    background-color: rgb(203, 203, 238);
}

/***** 1st NAME ****/
#orderrouteAdressesContainer tbody.odd tr.value td.value.odd.name {
    background-color: rgb(221, 221, 231);
}

/*** hover ***/
html.large #orderrouteAdressesContainer tbody.active tr.value td.value,
html.large #orderrouteAdressesContainer tbody.active tr.value td.value.odd,
html.large #orderrouteAdressesContainer tbody.active tr.odd.value td.value,
html.large #orderrouteAdressesContainer tbody.active tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

#orderrouteAdressesContainer thead tr th {
    padding: 0.6em;
    max-width: 14em;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-align: left;
    color: #155ea8;
    background-color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #155ea8 solid 0.1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*************************************/

/* capitalize */
#orderrouteAdressesContainer td.value.name span.value span,
#orderrouteAdressesContainer td.value.Premise span.value span,
#orderrouteAdressesContainer td.value.Address span.value span,
#orderrouteAdressesContainer td.value.Place span.value span {
    text-transform: capitalize;
}

#orderrouteAdressesContainer td.info>span>span {
    text-transform: lowercase !important;
}


/* OVERRIDE ROUTE PAGE STYLING */

/* Insured amount inputs */
#orderrouteViewOrderPanel .number1,
#orderrouteViewOrderPanel .currency {
    width: 4em !important;
    max-width: 4em !important;
    text-align: right;
}

#orderrouteViewOrderPanel .number2 {
    width: 2em !important;
    max-width: 2em !important;
}

/* other inputs */
#orderrouteViewOrderPanel input:not([class*="number1"], [class*="number2"], [class*="currency"]),
#orderrouteViewOrderPanel .reference {
    width: 21em !important;
    max-width: 21em !important;
}

/* ADDRESS SUB LAYOUT */

#orderrouteViewTaskPanel .addressTask input:not([class*="postalcode1"], [class*="address2"], [class*="moment"], [class*="time"]) {
    width: 21em !important;
    max-width: 21em !important;
}

/* Postal code inputs */
#orderrouteViewTaskPanel .postalcode1 {
    width: 15.7em !important;
    max-width: 15.7em !important;
}

#orderrouteViewTaskPanel .address2 {
    width: 3em !important;
}

/* Date and time inputs */
#orderrouteViewTaskPanel input.moment,
#orderrouteViewTaskPanel select.time {
    width: 5.8em !important;
    max-width: 5.8em !important;
    margin-right: 0 !important;
}

/* addressbook icon and span spacing */
#orderrouteViewTaskPanel .addressbook span {
    margin-left: .5rem;
}

/* clock icon */
#orderrouteViewTaskPanel .makeMoment {
    margin-left: .3em;
}

/* ======================== */
/* Shipment section */
/* ======================== */

#orderrouteViewTaskPanel .shipmentGoods table {
    max-width: 100% !important;
}

#orderrouteViewTaskPanel .shipmentGoods table td {
    max-width: fit-content !important;
    white-space: nowrap;
}

/* name */
#orderrouteViewTaskPanel .shipmentGoods table td select {
    max-width: 10em !important;
    width: auto;
}

/* number */
#orderrouteViewTaskPanel .shipmentGoods table .packingNumber,
#orderrouteViewTaskPanel .shipmentGoods table .packingNumber input {
    max-width: 7em !important;
    width: auto;
}

/* L * W * H dimensions */
#orderrouteViewTaskPanel .shipmentGoods table .packingDimensions {
    max-width: 12em !important;
    width: auto;
}

#orderrouteViewTaskPanel .shipmentGoods table .packingDimensions input {
    max-width: 3.2em !important;
    width: auto;
}

/* Weight, Volume, Surface */
#orderrouteViewTaskPanel .shipmentGoods table .packingWeight,
#orderrouteViewTaskPanel .shipmentGoods table .packingVolume,
#orderrouteViewTaskPanel .shipmentGoods table .packingSurface,
#orderrouteViewTaskPanel .shipmentGoods table .packingWeight input,
#orderrouteViewTaskPanel .shipmentGoods table .packingVolume input,
#orderrouteViewTaskPanel .shipmentGoods table .packingSurface input {
    max-width: 3em !important;
    width: auto;
}

/* Details */
#orderrouteViewTaskPanel .shipmentGoods table .packingDetails input {
    max-width: 12em !important;
    width: auto;
}

#orderrouteViewTaskPanel .shipmentGoods .taskCashOnDelivery .number1 {
    width: 4em !important;
    max-width: 4em !important;
}

#orderrouteViewTaskPanel .shipmentGoods .taskCashOnDelivery .number2 {
    width: 2em !important;
    max-width: 2em !important;
}


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

    #orderrouteViewTaskPanel .shipmentGoods table .packingDetails,
    #orderrouteViewTaskPanel .shipmentGoods table .packingBarcode,
    #orderrouteViewTaskPanel .shipmentGoods table .packingDimensions {
        max-width: 7em !important;
        width: auto;
        white-space: normal;
        word-wrap: break-word;
    }

    /* L * W * H dimensions */
    #orderrouteViewTaskPanel .shipmentGoods table .packingDimensions input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }

    #orderrouteViewTaskPanel .shipmentGoods table .packingBarcode input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }
}

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

    /* NUmber input */
    #orderrouteViewTaskPanel .shipmentGoods table .packingNumber {
        max-width: 5em !important;
        width: auto;
    }

    #orderrouteViewTaskPanel .shipmentGoods table .packingDimensions {
        max-width: 4em !important;
        width: auto;
        white-space: normal;
        word-wrap: break-word;
    }

    /* L * W * H dimensions */
    #orderrouteViewTaskPanel .shipmentGoods table .packingDimensions input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }

    #orderrouteViewTaskPanel .shipmentGoods table .packingBarcode input {
        max-width: 100% !important;
        width: auto;
        box-sizing: border-box;
    }
}#ordersView {
    min-height: 35em;
}

#ordersViewTop {
    padding: 1em;
}

#ordersView input.filtered {
    background-color: khaki;
}

#ordersView input.filtered:input-placeholder {
    color: khaki;
}

#ordersView input.filtered:-moz-placeholder {
    color: khaki;
}

#ordersView input.filtered::-webkit-input-placeholder {
    color: khaki;
}

#ordersView input.filtered:-webkit-input-placeholder {
    color: khaki;
}

#ordersView input.filtered:-ms-input-placeholder {
    color: khaki;
}

#ordersView #ordersHeader {
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    border-color: #155ea8;
    padding-top: 1em;
    margin-top: 1em;
    min-height: 3em;
}

html.mobile.portrait #ordersView #ordersHeader {
    font-size: 1.444444444em;
}

#ordersView #ordersHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #ordersView #ordersHeader nav {
    margin-right: 0em;
}

#ordersView #ordersHeader nav>div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

#ordersHeader div.right>span {
    color: #155ea8;
    font-size: 150%;
    vertical-align: super;
    top: -0.2em;
    margin-right: 0.25em;
}

html.desktop.landscape #ordersView #ordersHeader nav>div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#ordersView #ordersHeader nav>div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #ordersView #ordersHeader nav>div {
    float: none;
}

html.desktop.portrait #ordersView #ordersHeader div.right {
    width: 100%;
    text-align: right;
    margin-bottom: 1em;
    float: none;
}

html.mobile.portrait #ordersView #ordersHeader div.right {
    width: 100%;
    display: block;
    float: none;
    margin-right: 0;
}

#ordersView #ordersHeader nav>div div {
    box-sizing: border-box;
    position: relative;
}

#ordersView #ordersHeader nav>div a,
#ordersView #ordersHeader nav>div a:visited {
    margin-right: 0.7em;
    /*color: black;*/
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #ordersView #ordersHeader nav>div a {
    margin-right: 0;
}

#ordersView #ordersHeader nav>div a:hover {
    color: navy;
}

#ordersView #ordersHeader div.right {
    float: right;
}

#ordersView #ordersHeader #ordersSearch,
#ordersView #ordersHeader #ordersCalendar {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 15em;
    min-height: 2.5em;
}

html.mobile.portrait #ordersView #ordersHeader #ordersSearch,
html.mobile.portrait #ordersView #ordersHeader #ordersCalendar {
    box-sizing: content-box;
    width: 100%;
}

#ordersView #ordersHeader #ordersSearch div,
#ordersView #ordersHeader #ordersCalendar div {
    position: relative;
    z-index: 1000;
    left: -2.3em;
    top: 0.5em;
}

#ordersView #ordersHeader #ordersSearch input,
#ordersView #ordersHeader #ordersSearch input:focus,
#ordersView #ordersHeader #ordersCalendar input,
#ordersView #ordersHeader #ordersCalendar input:focus {
    margin: 0;
    padding: .3em;
    padding-right: 2.5em;
    min-height: 2.3em;
    width: 15em;
    box-sizing: border-box;
}

html.mobile.portrait #ordersView #ordersHeader #ordersSearch input,
html.mobile.portrait #ordersView #ordersHeader #ordersCalendar input {
    width: 100%;
}

#ordersView td.emptyList {
    white-space: normal !important;
}

#ordersView td.emptyList span {
    text-transform: none !important;
    max-width: none !important;
    white-space: normal !important;
    font-size: 1.4em;
    padding: 1.5em;
}

/****************************************************************************/

#ordersViewContainer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
    margin-top: -1em;
}

#ordersViewContainer span,
#ordersViewContainer strong,
#ordersViewContainer a,
#ordersViewContainer li {
    line-height: 1.3;
}

html.compact #ordersViewContainer span,
html.compact #ordersViewContainer strong,
html.compact #ordersViewContainer a,
html.compact #ordersViewContainer li {
    line-height: 1.2;
}

#ordersViewContainer tbody th.select,
#ordersViewContainer tbody td.select {
    width: 1em;
    max-width: 1em;
}

#ordersViewContainer tbody tr.value td {
    display: none;
    vertical-align: top;
}

#ordersViewContainer tbody tr.value td.value.firstOrTaskColumn {
    display: table-cell;
}

html.compact tbody tr.value td.taskHeader {
    display: table-cell;
}

html.compact #ordersViewContainer tbody tr.value td.taskHeader,
html.compact #ordersViewContainer table tr.value td.firstOrTaskColumn,
html.compact #ordersViewContainer table,
html.compact #ordersViewContainer table tbody,
html.compact #ordersViewContainer table tr,
html.compact #ordersViewContainer table td {
    display: block;
}

#ordersViewContainer table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

html.mobile #ordersViewContainer table {
    font-size: 1.1em;
}

html.desktop.portrait #ordersViewContainer table {
    font-size: 0.8em;
}

html.mobile.landscape #ordersViewContainer table {
    font-size: 0.8em;
}

#ordersViewContainer tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

html.compact #ordersViewContainer tbody {
    clear: both;
}

html.medium #ordersViewContainer tbody tr.value {
    display: inline-block !important;
    width: 50%;
}

html.medium #ordersViewContainer tbody tr.value.odd {
    float: left;
}

html.medium #ordersViewContainer tbody tr.value.odd.last {
    float: none;
    display: block !important;
}

#ordersViewContainer tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: rgb(199, 198, 213);
    border-bottom-width: 0.3em;
    padding: 0.2em 0.6em 0.2em 0.6em;
}

html.compact #ordersViewContainer tbody tr td {
    border-bottom-color: transparent;
    border-bottom-width: 0.1em;
}

/* allow wrapping in compact mode */
html.compact #ordersViewContainer tbody tr.value td.value,
html.compact #ordersViewContainer tbody tr.value td.value span.value {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

#ordersViewContainer tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

#ordersViewContainer tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: none;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

html.compact #ordersViewContainer tbody tr td>span.header {
    display: inline-block;
}

html.compact #ordersViewContainer tbody tr td>span.value {
    max-width: 65%;
}

html.compact #ordersViewContainer tbody tr td {
    grid-row-span: 1 !important;
}

#ordersViewContainer tbody tr.compactOrderHeader {
    display: none;
}

html.compact #ordersViewContainer tbody tr.compactOrderHeader {
    display: block;
}

html.compact #ordersViewContainer tbody tr.compactOrderHeader td {
    text-align: left !important;
    background-color: #5286BB;
    color: white !important;
    text-transform: uppercase;
}

html.compact #ordersViewContainer tbody tr.value td.taskHeader {
    background-color: #6F9DCC !important;
    color: white;
    text-transform: uppercase;
}

html.compact #ordersViewContainer tbody tr.value.odd td.taskHeader {
    background-color: #9BBDE0 !important;
}

/***** 2nd order ****/
/* 2nd column */
#ordersViewContainer tbody tr.value td.value {
    background-color: #E5E5E5;
}

/***** 2nd order ****/
/* 1th column */
#ordersViewContainer tbody tr.value td.value.odd {
    background-color: #EAEAEA;
}

/***** 1st order ****/
/* 2nd column */
#ordersViewContainer tbody.odd tr.value td.value {
    background-color: #EEEEEE;
}

/***** 1st order ****/
/* 1th column */
#ordersViewContainer tbody.odd tr.value td.value.odd {
    background-color: #F1F1F1;
}

/* second compact column*/
html.compact #ordersViewContainer tbody tr.value td.value,
html.compact #ordersViewContainer tbody.odd tr.value td.value {
    background-color: #E5E5E5;
}

/* first compact column*/
html.compact #ordersViewContainer tbody tr.value.odd td.value,
html.compact #ordersViewContainer tbody.odd tr.value.odd td.value {
    background-color: #F1F1F1;
}

/* highlighted orders with invalid timeWindows (after conceptToNormal) */
html div#ordersView div#ordersViewContainer tbody.invalidTimeWindow tr.value td.value {
    background-color: #f7c3c3;
}

html div#ordersView div#ordersViewContainer tbody.invalidTimeWindow:hover tr.value td.value {
    background-color: #EDF0AE;
}

html div#ordersView div#ordersViewContainer tbody.invalidTimeWindow tr.value td.taskrequestedbegin span {
    color: red;
    font-weight: bold;
}

/*** hover ***/
html.large #ordersViewContainer tbody:hover tr.value td.value,
html.large #ordersViewContainer tbody:hover tr.value td.value.odd,
html.large #ordersViewContainer tbody:hover tr.odd.value td.value,
html.large #ordersViewContainer tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

html.compact #ordersViewContainer tbody tr.value:hover td.value,
html.compact #ordersViewContainer tbody tr.value:hover td.value.odd,
html.compact #ordersViewContainer tbody tr.odd.value:hover td.value,
html.compact #ordersViewContainer tbody tr.odd.value:hover td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    border-bottom-color: #EEF0BA;
    background-color: #EDF0AE;
}

/** header **/
html.compact #ordersViewContainer thead {
    display: none !important;
}

#ordersViewContainer thead tr th {
    padding: 0.6em;
    max-width: 14em;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-align: left;
    color: #155ea8;
    background-color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: #155ea8 solid 0.1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** status ***/
/* imgW10_greendot imgW10_orangedot imgW10_blackdot imgW10_bluedot imgW10_reddot imgW10_purpledot */
#ordersViewContainer td.value.status .img {
    margin: 0.15em 0.5em 0.15em 0.25em;
    float: left;
}

#ordersViewContainer td.value.status DIV.img.state0 {
    background-image: url("gdx.mendrix.worldlink.ui/purpledot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state1 {
    background-image: url("gdx.mendrix.worldlink.ui/greydot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state2 {
    background-image: url("gdx.mendrix.worldlink.ui/bluedot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state3 {
    background-image: url("gdx.mendrix.worldlink.ui/reddot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state4 {
    background-image: url("gdx.mendrix.worldlink.ui/orangedot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state5 {
    background-image: url("gdx.mendrix.worldlink.ui/blackdot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state6 {
    background-image: url("gdx.mendrix.worldlink.ui/greendot.png") !important;
}

#ordersViewContainer td.value.status DIV.img.state7 {
    background-image: url("gdx.mendrix.worldlink.ui/greydot.png") !important;
}

/*** print ***/

#ordersViewContainer td.value.print .images a {
    margin-left: 0.5em;
}

html.mobile #ordersViewContainer td.value.print .images a {
    margin-left: 1em;
    font-size: 2em;
}

/*************************************/

/* dates */
#ordersViewContainer td.value.ordermoment span.value span,
#ordersViewContainer td.value.taskrequestedbegin span.value span,
#ordersViewContainer td.value.taskrequestedend span.value span,
#ordersViewContainer td.value.taskplannedbegin span.value span,
#ordersViewContainer td.value.taskplannedend span.value span,
#ordersViewContainer td.value.taskcompletedbegin span.value span,
#ordersViewContainer td.value.taskcompletedend span.value span {
    text-transform: lowercase;
}

/* also lowercase */
#ordersViewContainer td.value.status span.value span,
#ordersViewContainer td.value.taskemail span.value span,
#ordersViewContainer td.value.tasktasktype span.value span,
#ordersViewContainer td.value.taskproblem span.value span {
    text-transform: lowercase;
}

/* uppercase */
#ordersviewcontainer td.value.markcharacters span.value span,
#ordersviewcontainer td.value.postalcode span.value span {
    text-transform: uppercase;
}

/* unchanged */
#ordersViewContainer td.value.amount span.value span,
#ordersViewContainer td.value.colliamount span.value span,
#ordersViewContainer td.value.weight span.value span,
#ordersViewContainer td.value.volumeweight span.value span,
#ordersViewContainer td.value.articleweight span.value span,
#ordersViewContainer td.value.volume span.value span,
#ordersViewContainer td.value.goodcount span.value span,
#ordersViewContainer td.value.distanceinkms span.value span,
#ordersViewContainer td.value.durationinhours span.value span,
#ordersViewContainer td.value.taskwaittime span.value span,
#ordersViewContainer td.value.cashondelivery span.value span,
#ordersViewContainer td.value.taskcashondelivery span.value span,
#ordersViewContainer td.value.notes span.value span,
#ordersViewContainer td.value.reference span.value span,
#ordersViewContainer td.value.taskreferenceour span.value span,
#ordersViewContainer td.value.taskreferenceyour span.value span,
#ordersViewContainer td.value.tasksignedcontact span.value span,
#ordersViewContainer td.value.taskinstructions span.value span {
    text-transform: none;
}

/* right align */
html.large #ordersViewContainer tbody tr.value td.value.print,
#ordersViewContainer thead th.print,
html.large #ordersViewContainer tbody tr.value td.value.orderid,
#ordersViewContainer thead th.orderid,
html.large #ordersViewContainer tbody tr.value td.value.amount,
#ordersViewContainer thead th.amount,
html.large #ordersViewContainer tbody tr.value td.value.colliamount,
#ordersViewContainer thead th.colliamount,
html.large #ordersViewContainer tbody tr.value td.value.weight,
#ordersViewContainer thead th.weight,
html.large #ordersViewContainer tbody tr.value td.value.cashondelivery,
#ordersViewContainer thead th.cashondelivery,
html.large #ordersViewContainer tbody tr.value td.value.volumeweight,
#ordersViewContainer thead th.volumeweight,
html.large #ordersViewContainer tbody tr.value td.value.articleweight,
#ordersViewContainer thead th.articleweight,
html.large #ordersViewContainer tbody tr.value td.value.invoiceid,
#ordersViewContainer thead th.invoiceid,
html.large #ordersViewContainer tbody tr.value td.value.invoicenumber,
#ordersViewContainer thead th.invoicenumber,
html.large #ordersViewContainer tbody tr.value td.value.goodcount,
#ordersViewContainer thead th.goodcount,
html.large #ordersViewContainer tbody tr.value td.value.taskcount,
#ordersViewContainer thead th.taskcount,
html.large #ordersViewContainer tbody tr.value td.value.volume,
#ordersViewContainer thead th.volume,
html.large #ordersViewContainer tbody tr.value td.value.distanceinkms,
#ordersViewContainer thead th.distanceinkms,
html.large #ordersViewContainer tbody tr.value td.value.durationinhours,
#ordersViewContainer thead th.durationinhours,
html.large #ordersViewContainer tbody tr.value td.value.taskwaittime,
#ordersViewContainer thead th.taskwaittime,
html.large #ordersViewContainer tbody tr.value td.value.taskcashondelivery,
#ordersViewContainer thead th.taskcashondelivery {
    text-align: right !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
    min-width: 4em;
}

#ordersViewContainer tbody tr td.customfilesdocuments>span,
#ordersViewContainer tbody tr td.customfilesdossiers>span {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

#ordersViewContainer tbody tr td.customfilesdocuments a,
#ordersViewContainer tbody tr td.customfilesdossiers a {
    text-decoration: none;
}

#ordersView .selectOptions {
    clear: both;
    text-align: left;
    margin-bottom: 0.5em;
    border-top-width: 0em;
    border-style: solid;
    border-color: #155ea8;
}

#ordersView .selectOptionsButtons {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    display: inline-block;
}

.selectionButtonGoodsLabel {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

.selectionButtonConsignment {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

.selectionButtonInvoice {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

.selectionButtonDelete {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

.selectionButtonAccept {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

.pagingButtonPrevious {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

.pagingButtonNext {
    background-size: 2em;
    background-color: #E1E1E1;
    background-position: center;
    color: #155ea8;
    height: 2.5em;
    width: 3em;
    border: #155ea8 solid 0.1em;
    background-repeat: no-repeat;
}

input.selectionButtonAccept:enabled:hover,
input.selectionButtonConsignment:enabled:hover,
input.selectionButtonDelete:enabled:hover,
input.selectionButtonGoodsLabel:enabled:hover,
input.selectionButtonInvoice:enabled:hover,
.pagingButtonPrevious:enabled:hover,
.pagingButtonNext:enabled:hover {
    background-color: #E5F1FB;
}

/* imgW20_pdfcolliblue  don't remove this */#registerClientView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

    #registerClientView h2 {
        margin-bottom: 1em;
        font-size: 1em;
        padding: 0.4em;
        background-color: #155ea8;
        color: white;
        display: block;
        text-transform: lowercase;
        -ms-border-radius: .25em;
        -moz-border-radius: .25em;
        -webkit-border-radius: .25em;
        border-radius: .25em;
        margin-top: 1em;
    }

    #registerClientView .right h2 {
        margin-left: -0.2em;
    }

html.mobile.portrait #registerClientView .right h2 {
    margin-top: 1em;
    margin-bottom: 0;
}

html.compact.small #registerClientView #registerClientForm {
    font-size: 1.4em;
}

#registerClientView span,
#registerClientView sub {
    color: #155ea8;
    font-weight: bold;
}

#registerClientView sub {
    font-size: 1.3em;
}


#registerClientView #registerClientForm fieldset {
    position: relative;
    margin-top: 2em;
}

    #registerClientView #registerClientForm fieldset div.left {
        float: left;
        width: 50%;
        box-sizing: border-box;
    }

    #registerClientView #registerClientForm fieldset div.right {
        width: 50%;
        margin-left: 50%;
        box-sizing: border-box;
    }

    #registerClientView #registerClientForm fieldset div.full {
        width: 100%;
        margin-left: 0%;
        box-sizing: border-box;
        float: left;
    }

html.compact.small #registerClientView #registerClientForm fieldset div.left,
html.compact.small #registerClientView #registerClientForm fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#registerClientView #registerClientForm fieldset div.inner {
    padding: 0.2em;
}

#registerClientView #registerClientForm fieldset label,
#registerClientView #registerClientForm fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

#registerClientView .required {
    vertical-align: text-top;
}

/* table */

#registerClientView table {
    margin-bottom: 1em;
    width: 100%;
}

#registerClientView #registerClientForm th {
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
    padding: 0.2em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

html.compact.small #registerClientView #registerClientForm th {
    display: none;
}

#registerClientView #registerClientForm td {
    padding-right: 0.3em;
    vertical-align: top;
    padding: 0.2em;
}

html.compact.small #registerClientView #registerClientForm td {
    display: block;
    white-space: nowrap;
}

    html.compact.small #registerClientView #registerClientForm td:last-child {
        padding-bottom: 0.25em;
        margin-bottom: 0.25em;
        border-bottom: #155ea8 dashed 0.1em;
    }

#registerClientView tbody.errorSection tr td {
    padding-bottom: 0.5em !important;
}

html.compact.small #registerClientView #registerClientForm tbody.errorSection td:last-child {
    border-bottom: none !important;
}

html.compact.small #registerClientView #registerClientForm td input,
html.compact.small #registerClientView #registerClientForm td select {
    vertical-align: middle;
}

html.compact.small #registerClientView #registerClientForm td {
    border-top: grey solid 1px;
}

/* warnings */

#registerClientView .inputWarning {
    background-color: whitesmoke;
    padding: 0.5em 1.0em;
    padding-right: 0;
    border: #155ea8 solid 0.1em;
    margin-top: 1em;
    margin-right: 1em;
}

#registerClientView div.inputWarning .img {
    float: right;
    margin-right: 0.5em;
}

#registerClientView div.inputWarning span {
    display: block;
}

/* mandatory input errors */

#registerClientView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

    #registerClientView div.inputError div {
        float: right;
        margin-right: 0.5em;
    }

    #registerClientView div.inputError span {
        color: red;
        display: block;
    }

#registerClientView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}

#registerClientView .left div.errorSection {
    margin-right: 0em;
}

#registerClientView .right div.errorSection {
    margin-left: 0em;
}

html.mobile.compact.portrait #registerClientView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

#registerClientView tbody.errorSection {
    background-color: khaki;
    border: #155ea8 solid 0.2em;
}

    #registerClientView tbody.errorSection div.imgW15_alert {
        float: right;
        margin-right: 0.5em;
    }

    #registerClientView tbody.errorSection ul {
        padding-bottom: 0.5em;
        border-bottom: #155ea8 dashed 0.1em;
        margin-bottom: 0.5em;
    }

    #registerClientView tbody.errorSection .inputError {
        margin-left: 1.5em;
    }

/*** Input widths ***/

/* defaults */
#registerClientView input[type="text"],
#registerClientView input[type="date"],
#registerClientView input[type="datetime"],
#registerClientView input[type="number"],
#registerClientView input[type="password"],
#registerClientView textarea,
#registerClientView select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

html.mobile.portrait #registerClientView input[type="text"],
html.mobile.portrait #registerClientView input[type="date"],
html.mobile.portrait #registerClientView input[type="datetime"],
html.mobile.portrait #registerClientView input[type="number"],
html.mobile.portrait #registerClientView input[type="password"],
html.mobile.portrait #registerClientView textarea,
html.mobile.portrait #registerClientView select {
    max-width: 20.5em;
    width: 20.5em;
    box-sizing: border-box;
}

html.compact #registerClientView div.errorSection input[type="text"],
html.compact #registerClientView div.errorSection input[type="date"],
html.compact #registerClientView div.errorSection input[type="datetime"],
html.compact #registerClientView div.errorSection input[type="number"],
html.compact #registerClientView div.errorSection input[type="password"],
html.compact #registerClientView div.errorSection textarea,
html.compact #registerClientView div.errorSection select,
html.mobile.portrait #registerClientView div.errorSection input[type="text"],
html.mobile.portrait #registerClientView div.errorSection input[type="date"],
html.mobile.portrait #registerClientView div.errorSection input[type="datetime"],
html.mobile.portrait #registerClientView div.errorSection input[type="number"],
html.mobile.portrait #registerClientView div.errorSection input[type="password"],
html.mobile.portrait #registerClientView div.errorSection textarea,
html.mobile.portrait #registerClientView div.errorSection select {
    width: 18em;
    max-width: 18em;
    height: 1.6em;
    margin-right: 1em;
}


/** special output */
#registerClientView #orderForm fieldset label.foundAddress {
    font-size: 0.9em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    color: #748EA5;
    color: #5B81A3;
}

/** special inputs ****/

#registerClientView input[type="text"].number1 {
    width: 4em !important;
    max-width: 4em !important;
    text-align: right;
}

#registerClientView input[type="text"].number2 {
    width: 2em !important;
    max-width: 2em !important;
}

#registerClientView input[type="text"].postalcode1,
#registerClientView input[type="text"].address1 {
    width: 15.7em;
    max-width: 15.7em;
}

html.mobile.portrait #registerClientView input[type="text"].postalcode1,
html.mobile.portrait #registerClientView input[type="text"].address1 {
    width: 15.2em;
    max-width: 15.2em;
}

html.compact #registerClientView div.errorSection input[type="text"].postalcode1,
html.compact #registerClientView div.errorSection input[type="text"].address1 {
    width: 12.7em;
    max-width: 12.7em;
    margin-right: 0em;
}

#registerClientView input[type="text"].address2,
html.mobile.portrait #registerClientView input[type="text"].address2,
html.compact #registerClientView div.errorSection input[type="text"].address2 {
    width: 5em;
    max-width: 5em;
}


/* misc */

#registerClientView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 20em;
}

    #registerClientView div.submitting div {
    }

    #registerClientView div.submitting span {
        display: block;
        margin-top: 1em;
    }

#registerClientView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

    #registerClientView div.haveMissingFields div {
        float: left;
    }

    #registerClientView div.haveMissingFields span {
        margin-left: 5em;
        margin-left: 2em;
        position: relative;
        top: 0.75em;
    }

html.mobile.portrait #registerClientView div.haveMissingFields span {
    display: inline-block;
    top: -0.5em;
    max-width: 13em;
    margin-left: 1em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
}

#registerClientView .clearseperator {
    clear: both;
}
 
#registerClientView .seperator {
    /* used to have a !important flag on display: block; , but that interferes with customizations display: none;*/
    /* it seems unnecessary */
    display: block;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}
#reportView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

    #reportView h2 {
        margin-bottom: 1em;
        font-size: 1em;
        padding: 0.4em;
        background-color: #155ea8;
        color: white;
        display: block;
        text-transform: lowercase;
        -ms-border-radius: .25em;
        -moz-border-radius: .25em;
        -webkit-border-radius: .25em;
        border-radius: .25em;
    }

    #reportView #reportHeader {
        border-color: #155ea8;
        border-top-width: 0.2em;
        border-bottom-width: 0.2em;
        border-style: solid;
        margin-top: 1em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

html.mobile.portrait #reportView #reportHeader {
    font-size: 1.444444444em;
}

#reportView #reportHeader a,
#reportView #reportHeader span,
#reportView #reportHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: normal;
}
/* order header */
#reportView #reportHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #reportView #reportHeader nav {
    margin-right: 0em;
}

#reportView #reportHeader nav > div {
    float: left;
}

html.desktop.landscape #reportView #reportHeader nav > div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#reportView #reportHeader nav > div:hover {
    background-color: #EDF0AE;
    color: #155ea8;
}

html.mobile.portrait #reportView #reportHeader nav > div {
    float: none;
}

#reportView #reportHeader nav > div div {
    box-sizing: border-box;
    position: relative;
    top: 0.15em;
}

#reportView #reportHeader nav > div a,
#reportView #reportHeader nav > div span,
#reportView #reportHeader nav > div a:visited {
    margin-right: 0.7em;
    text-decoration: none;
    margin-left: 0.25em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #reportView #reportHeader nav a {
    margin-right: 0;
}

#reportView #reportHeader nav a:hover {
    color: #155ea8;
}

#reportPdf, #reportPdfiframe {
    border: 1px solid #155ea8;
    position: absolute;
    width: 100%;
    height: 100%;
}

#reportImage {
    position: absolute;
    width: 100%;
}

#reportView .loader {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 10em;
}
#tracktraceView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

#tracktraceView h2 {
    margin-bottom: 1em;
    font-size: 1em;
    padding: 0.4em;
    background-color: #155ea8;
    color: white;
    display: block;
    text-transform: lowercase;
    -ms-border-radius: .25em;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
}

#tracktraceView #tracktraceHeader {
    border-color: #155ea8;
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

html.mobile.portrait #tracktraceView #tracktraceHeader {
    font-size: 1.444444444em;
}

.progressbar {
    border: thin solid black;
    background-color: none;
}

#tracktraceView #tracktraceHeader a,
#tracktraceView #tracktraceHeader a:visited {
    text-decoration: none;
    text-transform: uppercase;
}

#tracktraceView div.header {
    margin-top: 1em;
    position: relative;
    white-space: nowrap;
}

html.mobile.small #tracktraceView div.header {
    white-space: nowrap;
    overflow-wrap: break-word;
    word-break: keep-all;
    ;
}

#tracktraceView div.header div.left {
    float: left;
    position: relative;
    display: inline-block;
    width: 50%;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
}

#tracktraceView div.header div.right {
    position: relative;
    display: inline-block;
    width: 50%;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
}

html.mobile.small #tracktraceView div.header div.left {
    background-color: white;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

html.mobile.small #tracktraceView div.header div.right {
    background-color: white;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

div.single {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
    clear: both;
}

#tracktraceView div.header div.single>div:nth-child(odd),
#tracktraceView div.header div.left>div:nth-child(odd),
#tracktraceView div.header div.right>div:nth-child(odd) {
    /*background-color: #EEEEEE;*/
}

#tracktraceView div.header div.single>div:nth-child(even),
#tracktraceView div.header div.left>div:nth-child(even),
#tracktraceView div.header div.right>div:nth-child(even) {
    background-color: #F1F1F1;
}

#tracktraceView div.header .columnheader {
    background-color: #5286BB;
    color: white;
    font-weight: bold;
    padding: 0.2em;
    text-transform: lowercase;
}

#tracktraceView div.header .columnTitle {
    margin-top: 1em;
    font-weight: bold;
    padding: 0.2em;
}

#tracktraceView div.header div.caption {
    padding: 0.2em;
    width: 35%;
    max-width: 35%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
    background-color: transparent;
    vertical-align: top;
}

#tracktraceView div.header div.value {
    padding: 0.2em;
    width: 62%;
    max-width: 62%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-flex;
    line-height: 1.2;
    background-color: transparent;
    vertical-align: top;
}

.wordwrap {
    white-space: normal;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

html .compact #tracktraceView div.header div.value {
    width: 62%;
    max-width: 62%;
}

#tracktraceView div.header div.single div.caption {
    width: 17.5%;
    max-width: 17.5%;
}

#tracktraceView div.header div.single div.value {
    max-width: 82.5%;
    width: 82.5%;
}

html.small #tracktraceView div.header div.single>div {
    white-space: nowrap;
}

html.small #tracktraceView div.header div.single div.caption {
    width: 35%;
    max-width: 35%;
}

html.small #tracktraceView div.header div.single div.value {
    max-width: 62%;
    width: 62%;
}

#tracktraceView div.seperator {
    height: 1em;
    border-top: 0.2em solid #5286BB;
    clear: both;
}


/****************************************************************************/
/* is a ListSection class, but might want little different styling*/
html.compact #orderGoodsViewContainer.ListSection tbody tr td {
    border-bottom-color: transparent;
    border-bottom-width: 0.1em;
    height: 1.1em;
    min-height: 1.1em;
    max-height: 1.1em;
    font-size: .9em;
}

html.mobile.landscape #orderGoodsViewContainer.ListSection tbody tr td {
    height: 1.2em;
    min-height: 1.2em;
    max-height: 1.2em;
    font-size: 1em;
}

/****************************************************************************/
.ListSection {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
    clear: both;
}

.ListSection span,
.ListSection strong,
.ListSection a,
.ListSection li {
    line-height: 1.3;
}

html.compact .ListSection span,
html.compact .ListSection strong,
html.compact .ListSection a,
html.compact .ListSection li {
    line-height: 1.2;
}

.ListSection tbody tr.value td {
    display: none;
    vertical-align: top;
}

.ListSection tbody tr.value td.value {
    display: table-cell;
}

html.compact tbody tr.value td.taskHeader {
    display: table-cell;
}

html.compact .ListSection table tr.value td,
html.compact .ListSection table,
html.compact .ListSection table tbody,
html.compact .ListSection table tr,
html.compact .ListSection table td {
    display: block;
}

.ListSection table {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
}

.ListSection table thead {
    font-size: 1.1em;
}

html.mobile .ListSection table {
    font-size: 1.1em;
}

html.desktop.portrait .ListSection table {
    font-size: 0.8em;
}

html.mobile.landscape .ListSection table {
    font-size: 0.8em;
}

.ListSection tbody {
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 0.25em;
}

html.medium .ListSection tbody {
    display: inline-block !important;
    width: 50%;
}

html.medium .ListSection tbody.odd {
    clear: left;
}

.ListSection tbody tr td {
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-color: #5286BB;
    border-bottom-width: 0.3em;
    padding: 0.3em 0.6em 0.3em 0.2em;
}

html.compact .ListSection tbody tr td {
    border-bottom-color: transparent;
    border-bottom-width: 0.1em;
    height: 1.3em;
    min-height: 1.3em;
    max-height: 1.3em;
}

/* allow wrapping in compact mode */
html.compact .ListSection tbody tr.value td.value,
html.compact .ListSection tbody tr.value td.value span.value {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
}

.ListSection tbody tr td>span {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-transform: capitalize;
    display: inline-block;
}

.ListSection tbody tr td>span.notexttransform {
    text-transform: none;
}

.ListSection tbody tr td>span.header {
    max-width: 35%;
    width: 35%;
    font-weight: bold;
    text-align: right;
    color: #155ea8;
    display: none;
    text-transform: capitalize;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}

html.compact .ListSection tbody tr td>span.header {
    display: inline-block;
}

html.compact .ListSection tbody tr td>span.value {
    max-width: 65%;
}

html.compact .ListSection tbody tr td {
    grid-row-span: 1 !important;
}

.ListSection tbody tr.compactHeader {
    display: none;
}

html.compact .ListSection tbody tr.compactHeader {
    display: block;
}

html.compact .ListSection tbody tr.compactHeader td {
    text-align: left !important;
    background-color: #5286BB;
    color: white !important;
    text-transform: lowercase;
    height: 1em;
    min-height: 1em;
    max-height: 1em;
}

.ListSection tbody tr.value td.value.Name div.img {
    float: right;
}

.ListSection tbody tr.value td.value.Name span.value {
    margin-right: 1.5em;
}

/***** 2nd trace ****/
.ListSection tbody.odd tr.value td.value {
    background-color: white;
    vertical-align: middle;
}

/***** 1st trace ****/
.ListSection tbody tr.value td.value {
    background-color: #F1F1F1;
}

/* second compact column*/
html.compact .ListSection tbody tr.value td.value,
html.compact .ListSection tbody.odd tr.value td.value {
    background-color: #E5E5E5;
}

/* first compact column*/
html.compact .ListSection tbody tr.value.odd td.value,
html.compact .ListSection tbody.odd tr.value.odd td.value {
    background-color: #F1F1F1;
}

/*** hover ***/
html.large .ListSection tbody:hover tr.value td.value,
html.large .ListSection tbody:hover tr.value td.value.odd,
html.large .ListSection tbody:hover tr.odd.value td.value,
html.large .ListSection tbody:hover tr.odd.value td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    /*border-bottom-color: #EEF0BA;*/
    background-color: #EDF0AE;
}

html.compact .ListSection tbody tr.value:hover td.value,
html.compact .ListSection tbody tr.value:hover td.value.odd,
html.compact .ListSection tbody tr.odd.value:hover td.value,
html.compact .ListSection tbody tr.odd.value:hover td.value.odd {
    /*background-color: #EEF0BA;*/
    border-right-color: #EEF0BA;
    border-left-color: #EEF0BA;
    border-bottom-color: #EEF0BA;
    background-color: #EDF0AE;
}

.ListSection tbody tr.value td.value.Name,
.ListSection tbody tr.value td.value.Name .imgW13_nextwhite {
    display: none;
}

.ListSection tbody tr.value td.value.Name:hover,
.ListSection tbody tr.value td.value.Name:hover .imgW13_nextwhite {
    display: inline-block;
}

.ListSection tbody tr.value td.value.Name,
.ListSection tbody tr.value td.value.Name .imgW13_nextcolored {
    display: inline-block;
}

.ListSection tbody tr.value td.value.Name:hover,
.ListSection tbody tr.value td.value.Name:hover .imgW13_nextcolored {
    display: none;
}

html.compact .ListSection tbody tr.value:hover td.value.Name:hover span,
html.compact .ListSection tbody tr.value:hover td.value.odd.Name:hover span,
html.compact .ListSection tbody tr.odd.value:hover td.value.Name:hover span,
html.compact .ListSection tbody tr.odd.value:hover td.value.odd.Name:hover span,
html.compact .ListSection tbody tr.value:hover td.value.Name:hover,
html.compact .ListSection tbody tr.value:hover td.value.odd.Name:hover,
html.compact .ListSection tbody tr.odd.value:hover td.value.Name:hover,
html.compact .ListSection tbody tr.odd.value:hover td.value.odd.Name:hover,
html.large .ListSection tbody tr.value td.value.Name:hover,
html.large .ListSection tbody tr.value td.value.odd.Name:hover,
html.large .ListSection tbody tr.odd.value td.value.Name:hover,
html.large .ListSection tbody tr.odd.value td.value.odd.Name:hover,
html.large .ListSection tbody tr.value td.value.Name:hover span,
html.large .ListSection tbody tr.value td.value.odd.Name:hover span,
html.large .ListSection tbody tr.odd.value td.value.Name:hover span,
html.large .ListSection tbody tr.odd.value td.value.odd.Name:hover span {
    color: white;
    border-right-color: #155ea8;
    border-left-color: #155ea8;
    border-bottom-color: #155ea8;
    background-color: #155ea8;
}

/** header **/
html.compact .ListSection thead {
    display: none !important;
}

.ListSection thead tr th {
    padding: 0.4em 0.6em 0.4em 0.2em;
    max-width: 14em;
    text-overflow: ellipsis;
    font-family: Tahoma;
    text-align: left;
    color: white;
    background-color: #5286BB;
    font-weight: bold;
    text-transform: lowercase;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    overflow: hidden;
}

/*** delete ***/

.ListSection td.value.actions.images a {
    margin-left: 0.5em;
}

html.mobile .ListSection td.value.actions .images a {
    margin-left: 1em;
    font-size: 2em;
}

/*************************************/
.ListSection tbody tr.value td.value.Percentage {
    position: relative;
    white-space: nowrap !important;
}

.ListSection tbody tr.value td.value.Percentage div.value>div {
    text-align: center;
    -ms-border-radius: 0.2em !important;
    -moz-border-radius: 0.2em !important;
    -webkit-border-radius: 0.2em !important;
    border-radius: 0.2em !important;
    position: relative;
}#workhoursView {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

    #workhoursView h2 {
        margin-bottom: 1em;
        font-size: 1.3em;
        padding: 0.4em;
        background-color: #155ea8;
        color: white;
        display: block;
        text-transform: lowercase;
        -ms-border-radius: .25em;
        -moz-border-radius: .25em;
        -webkit-border-radius: .25em;
        border-radius: .25em;
    }

    #workhoursView .right h2 {
        margin-left: -0.2em;
    }

html.mobile.portrait #workhoursView .right h2 {
    margin-top: 1em;
    margin-bottom: 0;
}

html.compact.small #workhoursView #workhoursViewContainer {
    font-size: 1.4em;
}

#workhoursView span,
#workhoursView sub {
    color: #155ea8;
    font-weight: bold;
}

#workhoursView sub {
    font-size: 1.3em;
}

#workhoursView #workhoursHeader {
    border-top-width: 0.2em;
    border-bottom-width: 0.2em;
    border-style: solid;
    border-color: #155ea8;
    padding-top: 1em;
    margin-top: 1em;
    min-height: 3em;
}

html.mobile.portrait #workhoursView #workhoursHeader {
    font-size: 1.444444444em;
}

#workhoursView #workhoursHeader nav {
    display: inline-block;
    margin-right: 5em;
    margin-top: 0.3em;
    min-height: 2em;
}

html.desktop.landscape #workhoursView #workhoursHeader nav {
    margin-right: 0em;
}

#workhoursView #workhoursHeader nav > div {
    float: left;
    padding: 0.5em;
    white-space: nowrap;
}

#workhoursHeader div.right > span {
    color: #155ea8;
    font-size: 100%;
    vertical-align: text-bottom;
    top: -0.2em;
    display: inline-block;
    margin-right: 0.25em;
    margin-bottom: 1em;
}

html.desktop.landscape #workhoursView #workhoursHeader nav > div {
    padding: 0;
    position: relative;
    top: 0.2em;
}

#workhoursView #workhoursHeader nav > div:hover {
    background-color: #EDF0AE;
}

html.mobile.portrait #workhoursView #workhoursHeader nav > div {
    float: none;
}

html.mobile.portrait #workhoursHeader div.right > .dateFromToSign {
    display: none;
}

html.desktop.portrait #workhoursView #workhoursHeader div.right {
    width: 100%;
    text-align: right;
    margin-bottom: 1em;
    float: none;
}

html.mobile.portrait #workhoursView #workhoursHeader div.right {
    width: 100%;
    display: block;
    float: none;
    margin-right: 0;
}

#workhoursView #workhoursHeader nav > div div {
    box-sizing: border-box;
    position: relative;
}

#workhoursView #workhoursHeader nav > div a,
#workhoursView #workhoursHeader nav > div a:visited {
    margin-right: 0.7em;
    text-decoration: none;
    margin-left: 0.5em;
    white-space: nowrap;
    color: #155ea8;
    text-transform: uppercase;
    font-size: 0.9em;
}

html.medium #workhoursView #workhoursHeader nav > div a {
    margin-right: 0;
}

#workhoursView #workhoursHeader nav > div a:hover {
    color: navy;
}

#workhoursView #workhoursHeader div.right {
    float: right;
}

/* workhours workhoursViewContainer */
#workhoursView #workhoursViewContainer ul {
    display: grid;
    list-style-position: outside;
    margin: 0.3em;
    font-size: 1.3em;
    text-transform: capitalize;
}

#workhoursView #workhoursViewContainer li {
    display: list-item;
    margin-right: 0.3em;
    margin-top: 0.3em;
    font-size: 1.3em;
    text-transform: capitalize;
    padding-bottom: .2em;
}

html.desktop.landscape #workhoursView #workhoursViewContainer li {
    margin-right: 0em;
    display: list-item;
}

html.mobile.portrait #workhoursView #workhoursViewContainer li {
    min-height: 1.5em;
    font-size: 1.1em;
}

html.mobile.portrait #workhoursView #workhoursViewContainer li a {
    font-size: .7em;
}

#workhoursView #workhoursViewContainer li.listTitle {
    white-space: nowrap;
    font-size: 1em;
    min-height: 1em;
    margin-top: 0.2em;
    text-transform: capitalize;
    padding-bottom: .2em;
}

#workhoursView #workhoursViewContainer .reportInfo {
    line-height: 1.1em;
    font-size: .7em;
    text-transform: none;
}

html.mobile.portrait #workhoursView #workhoursViewContainer .reportInfo {
    line-height: 1.1em;
    font-size: .4em;
    text-transform: none;
}

#workhoursView #workhoursViewContainer a,
#workhoursView #workhoursViewContainer a:visited {
    text-decoration: none;
    white-space: nowrap;
    color: #155ea8;
    text-transform: capitalize;
}

#workhoursView #workhoursViewContainer li > div:hover {
    background-color: #EDF0AE;
}

#workhoursView #workhoursHeader .calendar{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 15em;
    min-height: 2.5em;
}

html.mobile.portrait #workhoursView #workhoursHeader .calendar {
    box-sizing: content-box;
    width: 100%;
}

#workhoursView #workhoursHeader .calendar div {
    position: relative;
    z-index: 1000;
    left: -2.3em;
    top: 0.5em;
}

#workhoursView #workhoursHeader .calendar input, #workhoursView #workhoursHeader .calendar input:focus {
    margin: 0;
    padding: .3em;
    padding-right: 2.5em;
    min-height: 2.3em;
    width: 15em;
    box-sizing: border-box;
}

html.mobile.portrait #workhoursView #workhoursHeader .calendar input {
    width: 100%;
}


#workhoursView .seperator {
    display: block !important;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#workhoursView #workhoursViewContainer fieldset {
    position: relative;
    margin-top: 2em;
}

    #workhoursView #workhoursViewContainer fieldset div.left {
        float: left;
        width: 50%;
        box-sizing: border-box;
    }

    #workhoursView #workhoursViewContainer fieldset div.right {
        width: 50%;
        margin-left: 50%;
        box-sizing: border-box;
    }

html.compact.small #workhoursView #workhoursViewContainer fieldset div.left,
html.compact.small #workhoursView #workhoursViewContainer fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#workhoursView #workhoursViewContainer fieldset div.inner {
    padding: 0.2em;
}

#workhoursView #workhoursViewContainer fieldset label,
#workhoursView #workhoursViewContainer fieldset .label {
    display: block;
    text-transform: lowercase;
    color: #155ea8;
    font-weight: bold;
    margin-bottom: 0.15em;
    margin-top: 0.2em;
    text-align: left;
}

/* mandatory input errors */

#workhoursView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

    #workhoursView div.inputError div {
        float: right;
        margin-right: 0.5em;
    }

    #workhoursView div.inputError span {
        color: red;
        display: block;
    }

#workhoursView div.errorSection {
    background-color: khaki;
    padding-bottom: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    border: #155ea8 solid 0.2em;
    margin-bottom: 0.5em;
    margin-left: -0.2em;
    margin-right: -0.2em;
    margin-top: 0.5em;
}

#workhoursView .left div.errorSection {
    margin-right: 0em;
}

#workhoursView .right div.errorSection {
    margin-left: 0em;
}

html.mobile.compact.portrait #workhoursView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

#workhoursView tbody.errorSection ul {
    padding-bottom: 0.5em;
    border-bottom: #155ea8 dashed 0.1em;
    margin-bottom: 0.5em;
}

#workhoursView tbody.errorSection .inputError {
    margin-left: 1.5em;
}