/***********************************************
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_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; 
            }.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_red { 
                background-image: url("gdx.mendrix.worldlink.ui/red.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_Blue { 
                background-image: url("gdx.mendrix.worldlink.ui/Blue.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_Brown { 
                background-image: url("gdx.mendrix.worldlink.ui/Brown.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_Pink { 
                background-image: url("gdx.mendrix.worldlink.ui/Pink.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_Green { 
                background-image: url("gdx.mendrix.worldlink.ui/Green.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_Yellow { 
                background-image: url("gdx.mendrix.worldlink.ui/Yellow.png"); 
                width: 1em; 
                height: 1em; 
            }.imgW10_White { 
                background-image: url("gdx.mendrix.worldlink.ui/White.png"); 
                width: 1em; 
                height: 1em; 
            }.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; 
            }.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;
}
/* 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;
}
/*! 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_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_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_444444_256x240.png");
}

.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_444444_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_555555_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_777777_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_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_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_444444_256x240.png");
}

.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_444444_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_555555_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_777777_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;
}
.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;
    }
/* WorldLink-2024 profile overrides
   Loaded after all vendor stylesheets (sorts last in the bundle since
   this file has no sublib prefix). Three sections:
     1. jQuery UI icon palette — re-applies the dark 222222 sprite on top
        of the vendor's lighter 444444 / 555555 / 777777 palette.
     2. App-level overrides — brand-red h1 and ORDERS page tweaks.
     3. CSP updates — notification spacer, password requirements, import
        wizard / progress sizing. */

/* === 1. jQuery UI icon palette (dark) === */
.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon,
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon,
.ui-button .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

/* === 2. App-level overrides === */
h1 {
    color: #E41736 !important;
}

#orderView .number1 {
    width: 3em !important;
    text-align: right;
}

#orderView .number2 {
    width: 1.7em !important;
    text-align: left;
}

/* === 3. CSP updates === */
#btnNotificationSpacer1 {
    width: 0.5em;
}

#passwordRequirements {
    margin-left: 1em
}

#orderImportWizzard,
#progress {
    width: 100%;
}
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;
}
/* ADR Table 3.a inline UN-number suggestion dropdown (MTX-10130) */

.adrInputWrap {
    position: relative;
}

.adrSuggestions {
    position: absolute;
    top: 100%;
    /* UN number is the last field in the row and sits near the right edge of the
       view, so anchor the dropdown to the right and let it grow leftward to avoid
       being cut off when there is not enough space on the right. */
    right: 0;
    left: auto;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content;
    min-width: 100%;
    max-width: 90vw;
    max-height: 16em;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #c0c0c0;
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.2);
    /* Table-like columns: the whole list is one grid and each row exposes its
       cells to it (display: contents), so the fields after the description line
       up under each other across every item.
       Columns: UN | description | classification | dangerCode | tunnelCode | packingGroup */
    display: grid;
    grid-template-columns: auto minmax(6em, 24em) auto auto auto auto;
    align-items: stretch;
}

.adrSuggestions li {
    display: contents;
    cursor: pointer;
}

.adrSuggestions li > span {
    padding: 0.3em 0.6em;
    border-bottom: 1px solid #eeeeee;
    white-space: nowrap;
}

.adrSuggestions li:last-child > span {
    border-bottom: none;
}

.adrSuggestions li:hover > span {
    background: #eef4ff;
}

.adrSuggestions .adrSuggestUn {
    font-weight: bold;
}

.adrSuggestions .adrSuggestDesc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adrSuggestions .adrSuggestCode {
    color: #666666;
}#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;
}#credentialRecoveryView {
    min-height: 60em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 1em;
}

html.compact.small #credentialRecoveryView #credentialRecoveryForm {
    font-size: 1.4em;
}

#credentialRecoveryView span,
#credentialRecoveryView sub {
    color: #155ea8;
}

#credentialRecoveryView sub {
    font-size: 1.3em;
}

#credentialRecoveryView #credentialRecoveryForm fieldset {
    position: relative;
    margin-top: 2em;
}

#credentialRecoveryView #credentialRecoveryForm fieldset div.left {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#credentialRecoveryView #credentialRecoveryForm fieldset div.right {
    width: 50%;
    margin-left: 50%;
    box-sizing: border-box;
}

html.compact.small #credentialRecoveryView #credentialRecoveryForm fieldset div.left,
html.compact.small #credentialRecoveryView #credentialRecoveryForm fieldset div.right {
    float: none;
    width: 100%;
    display: block;
    margin-left: 0;
}

#credentialRecoveryView #credentialRecoveryForm fieldset div.inner {
    padding: 0.2em;
}

#credentialRecoveryView #credentialRecoveryForm fieldset label,
#credentialRecoveryView #credentialRecoveryForm 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 */

#credentialRecoveryView div.inputError {
    display: block;
    margin-bottom: 0.5em;
}

#credentialRecoveryView div.inputError div {
    float: right;
    margin-right: 0.5em;
}

#credentialRecoveryView div.inputError span {
    color: red;
    display: block;
}

#credentialRecoveryView 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;
}

#credentialRecoveryView .left div.errorSection {
    margin-right: 0em;
}

html.mobile.compact.portrait #credentialRecoveryView div.errorSection {
    margin-left: -0.2em;
    margin-right: -0.2em;
}

/*** Input widths ***/

/* defaults */
#credentialRecoveryView input[type="text"],
#credentialRecoveryView input[type="password"],
#credentialRecoveryView textarea,
#credentialRecoveryView select {
    width: 21em;
    max-width: 21em;
    height: 1.6em;
}

html.mobile.portrait #credentialRecoveryView input[type="text"],
html.mobile.portrait #credentialRecoveryView input[type="password"],
html.mobile.portrait #credentialRecoveryView textarea,
html.mobile.portrait #credentialRecoveryView select {
    max-width: 20.5em;
    width: 20.5em;
    box-sizing: border-box;
}

html.compact #credentialRecoveryView div.errorSection input[type="text"],
html.compact #credentialRecoveryView div.errorSection input[type="password"],
html.compact #credentialRecoveryView div.errorSection textarea,
html.compact #credentialRecoveryView div.errorSection select,
html.mobile.portrait #credentialRecoveryView div.errorSection input[type="text"],
html.mobile.portrait #credentialRecoveryView div.errorSection input[type="password"],
html.mobile.portrait #credentialRecoveryView div.errorSection textarea,
html.mobile.portrait #credentialRecoveryView div.errorSection select {
    width: 18em;
    max-width: 18em;
    height: 1.6em;
    margin-right: 1em;
}

#credentialRecoveryView input[type=button] {
    width: 16em;
    max-width: 16em;
}

#credentialRecoveryView label:focus,
#credentialRecoveryView .label:focus,
#credentialRecoveryView .img:focus {
    background-color: khaki;
}

#credentialRecoveryView div.submitting {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
    max-width: 15em;
    margin-top: 20em;
}

#credentialRecoveryView div.submitting span {
    display: block;
    margin-top: 1em;
}

#credentialRecoveryView div.haveMissingFields {
    background-color: khaki;
    height: 3em;
    padding: 1em;
    border: #155ea8 solid 0.2em;
}

#credentialRecoveryView div.haveMissingFields div {
    float: left;
}

#credentialRecoveryView div.haveMissingFields span {
    margin-left: 2em;
    position: relative;
    top: 0.75em;
}

html.mobile.portrait #credentialRecoveryView 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;
}

#credentialRecoveryView .seperator {
    display: block !important;
    height: 1em;
    margin-bottom: 1em !important;
    border-bottom: #155ea8 dashed 0.1em;
    width: auto !important;
    max-width: none !important;
}

#credentialRecoveryView .passwordmismatch {
    padding: 0.2em;
}

#credentialRecoveryView .passwordmismatch .errorSection {
    padding-top: 1em;
}

#credentialRecoveryView .CheckmarkBlack {
    color: black;
    font-size: 1em;
    margin-left: .5em;
    margin-top: .5em;
}

#credentialRecoveryView .CheckmarkGreen {
    color: green;
    font-size: 1em;
    margin-left: .5em;
    margin-top: .5em;
    font-weight: bold;
}

#credentialRecoveryView p {
    margin: 1rem 0;
    color: #155ea8;
}
#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 span.info {
    color: #31708f;
    display: block;
    margin-top: 5px;
}

#loginView a.label {
    padding: 0 0.5em;
    position: relative;
    top: -0.25em !important;
}

#loginView a.forgotPassword {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #155ea8;
    text-decoration: none;
    text-transform: lowercase;
}

#loginView a.forgotPassword:hover {
    text-decoration: underline;
}

#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;
}

/* Identifier (barcode) - smaller, holds up to 12 chars */
#orderView .shipmentGoods table .packingBarcode,
#orderView .shipmentGoods table .packingBarcode input {
    max-width: 8em !important;
    width: auto;
}

/* UN number - narrow, holds up to ~5 chars */
#orderView .shipmentGoods table .packingUNNumber input.packingUNNumber {
    max-width: 5em !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 */

div.loadingFailed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20em;
    max-width: 80%;
    margin-top: 5em;
    text-align: center;
}

div.loadingFailed span {
    display: block;
    margin-top: 1em;
}

div.loadingFailed span.a {
    cursor: pointer;
    color: #155ea8;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.9em;
}#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;
}