/* Start - Base Style Resets */
/* Reset margin, paddings and borders */
html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
/* Keep HTML5 elements in the correct display state. */
article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}

/* Use border box sizing for developer sanity */
* {
    box-sizing: border-box;
}
*:before,
*:after {
    box-sizing: inherit;
}

/* Keep font consistent on all elements */
* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Use base anchor colour even if it's visited. */
a,
a:visited {
    color: inherit;
}

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

/* Override "ghost" css of Firefox and Chrome */
th {
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
}

img {
    border-style: none;
}

blockquote,
q {
    quotes: none;
}

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

a, a:visited, .expandable-text
{
    color: rgb(66, 133, 244);
    text-decoration: none;
	text-decoration-skip-ink: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

a.disabled-link {
	text-decoration: underline;
	color: rgb(204, 204, 204);
	cursor: text;
	pointer-events: none;
}

p.link {
	text-align : center;
	margin-top: 0.5em;
}

/* Makes the html attribute: hidden always apply */
[hidden] {
    display: none !important;
}

/* Show disabled cursor if disabled. */
[disabled] {
    cursor: not-allowed;
}

/* Hides the focus outline if it's not supposed to be visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* End - Base Style Resets */


/* Start - Base Configuration */
html {
    font-size: 12px;
    font-family: "Gill Sans", Helvetica, Arial, sans-serif;
    background-color: white;
}
/* End - Base Configuration */

#sessionCookie,
#__gwt_historyFrame,
.hide {
    display: none;
}

/* Start - Assets */

.my-vehicle-image { background-image: url('../images/header/myVehicle-40x40.png'); }
/* SVG icons are now created using the SVG Icon class */
/*.user-settings-image { background-image: url('../images/header/user_profile-40x40.png'); }
.branch-settings-image { background-image: url('../images/header/work_home-40x40.png'); }
.customer-settings-image { background-image: url('../images/header/work_home-40x40.png'); }

 .notification-bell { background-image: url('../images/header/bell.svg'); }
.signout-image { background-image: url('../images/header/logout.svg'); } */

.left-small { background-image: url('../images/buttons/left-small.png'); }
.right-small { background-image: url('../images/buttons/right-small.png'); }
.print-small { background-image: url('../images/buttons/print-small.png'); }
.info-small { background-image: url('../images/misc/big-info.png'); }
.photo-small { background-image: url('../images/buttons/photo-small.png'); }


/* SVG icons are now created using the SVG Icon class, and be used to edit icon colour */
/*
.select-small { background-image: url('../images/buttons/select-small.png'); }
.complete-small { background-image: url('../images/buttons/complete-small.png'); }
.add-small { background-image: url('../images/buttons/add-small.png'); }
.claim-small { background-image: url('../images/buttons/claim-small.png'); }
.release-small { background-image: url('../images/buttons/release-small.png'); }
.remove-small { background-image: url('../images/buttons/remove-small.png'); }
.view-small { background-image: url('../images/buttons/view.svg'); }
.delete-small { background-image: url('../images/buttons/cross-black.svg'); }
.edit-small { background-image: url('../images/buttons/edit-icon.svg'); }
.refresh-small { background-image: url('../images/buttons/refresh.svg'); }
.calendar-small { background-image: url('../images/buttons/calendar.svg'); }
.upload-small { background-image: url('../images/buttons/attach.svg'); }
.help-small { background-image: url('../images/buttons/help.svg'); }
.download-small { background-image: url('../images/buttons/download.svg'); }
.back-arrow { background-image: url('../images/buttons/arrow-back.svg'); }
.chevron-left { background-image: url('../images/buttons/chevron-left.svg'); }
.chevron-right { background-image: url('../images/buttons/chevron-right.svg'); }
.eye { background-image: url('../images/buttons/view.svg'); }
.hover-close { background-image: url('../images/misc/hover-close.svg')}
.trash-small { background-image: url('../images/buttons/trash-svg.svg'); }
.cross-white {background-image: url('../images/buttons/cross-white.svg');}
.chevron-left-white { background-image: url('../images/buttons/chevron-left-white.svg'); }
.chevron-right-white { background-image: url('../images/buttons/chevron-right-white.svg'); }
*/

.cross-white {color: white}
.chevron-left-white {color: white}
.chevron-right-white {color: white}
.circle-red {color: red}
.circle-amber{color: orange}
.circle-green{color: green}

/* Arrows */
.vertical_first_arrow {background-image: url('../images/misc/arrow-top.png');}
.vertical_last_arrow {background-image: url('../images/misc/arrow-bottom.png'); }
.up_arrow {background-image: url('../images/misc/arrow-up.png'); }
.down_arrow {background-image: url('../images/misc/arrow-down.png'); }
.previous_arrow {background-image: url('../images/misc/arrow-left.png'); }
.next_arrow {background-image: url('../images/misc/arrow-right.png'); }

.boolean-false {color: red }
.boolean-true  {color: #00AA00}

.item-match-none { background-image: url('../images/misc/no.svg'); background-repeat: no-repeat; height: 16px; margin-bottom: 4px !important; min-width: 16px !important; }
.item-match-all { background-image: url('../images/misc/yes.svg'); background-repeat: no-repeat; height: 16px; margin-bottom: 4px !important; min-width: 16px !important; }
.item-match-partial { background-image: url('../images/misc/partial.png');}

.toolbar-bold { background-image: url('../images/texttoolbar/bold.png'); }
.toolbar-italics { background-image: url('../images/texttoolbar/italics.png'); }
.toolbar-underline { background-image: url('../images/texttoolbar/underline.png'); }
.toolbar-bullets { background-image: url('../images/texttoolbar/bullets.png'); }
.toolbar-hyperlink { background-image: url('../images/texttoolbar/hyperlink.png'); }

.grippy-icon { background-image: url('../images/misc/grippy-icon.png'); }
/*
.vehicle-icon { background-image: url('../images/misc/steering-wheel.png'); }
.ancillary-icon { background-image: url('../images/misc/ancillary.svg'); }
.electric-vehicle-icon { background-image: url('../images/misc/electric-car.svg'); }
*/
.highlight-bynx { color: yellow }
.red-flag-icon { color: red }
.red-warning-icon {color: red }
.yellow-warning-icon { color: orange }

/*
.invalid-bynx { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAABqlBMVEX///+RhyeMhSY4NRMcHAEAAABhVRNEPhRKPAJANQEAAABwXQYAAAB6Zw8AAACFawUAAACRdAeLcgyEZwWDZwVKPAIAAACukBKWeQqPcgmMbwmLbgZWSw+Qcwqhggyoig9OPQNMOwOhgAWgfwidfASvkhWkhAujfgaffQZxWQWsig2qhwungwedfgidfAaafAaZegWZeAOZeAGIbQiHagX//1T//1H//FH/+VD/+kP780j68kf88j7370T57z/67jn06Tz16C/z5i7z5TL35Rjx5DL04yz04h7q30zq3UHn2D3u2RPk10Tl1jzi1UDt1Rnp1Bvf0kDi0DLezjnmzQ3mygrkygzTxD7hxAbjwwTiwgPiwwbgwALjwAPhvQHUuh3RuBfJtzrQsQjDrzXNsArLrxXLrRPFqh/NqQTDqB7EpxTDpxrDphfCpR3DpQ24pDXAohi7nBe/mwa5mQ+7lwWvli23lAislC+pkjWsky23kwa0kg+2kQazkQeyjw6wjQywiwasiQiZfCiRfSyXeimUdyp3VSJ5VR09CwYoDgUmAAAYAAAPAAALAAAaMuzCAAAAjnRSTlMAEREREREiIiIiIjMzRFVmZnd3d3d3d4iIiIiIiJmqu7u7zMzM3d3d3d3u7u7u7u7u7u7u7v//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////n9px+wAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8wOC8xMPOa5FMAAAAedEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzUuMasfSOsAAADJSURBVBiVY2CAAEZxJgZkwCpfL4ciIFFgWyyIxOet8/EIbuRGaFAOqujMT1BhhQkIFZq29FS61/JD+czavmZN3aUuKeosEAHJTAvL8q5k77AyaTCfTcvTyj6xwzckNEmHAyQglW7h4OzXHhgQEV0lAuSzq3lZu9q09ra5xURmaHAyMMjmmts5OYY3h/tHxcbVCDOwqlZn52TlpcanFRWVlDQoMXDJKGoa6+obGhka6JloKogysPLwCYjBgAAfD9DdrKxcMMDKygAAwy4qmRpcWDUAAAAASUVORK5CYII="); }
.error-bynx { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAYAAADQWvz5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA6hJREFUeNpsVG1Im1cUfvJhTIyJLja2GXWTRks218HIBOtWFFY6Yp2GalM/foxROlo2WKB1SKAMkZapo3TYsjKotD+msCLdXLXCmLhaXNdNhblBm3alINWakQTz+ebNm2TPFVuk7YXn3iTnnuec85xzo8rlcnh2qbi8p07ZPnC59hh0Oge/IiFJd34YG5sZ7OlZyb3ASfXsb7vr601fnT3bbQQ6pECgPL22howsQ2+1wmCzPUzkcsOfHj365dzsbPSFRCKLL06f3tHS0jIRvH17553hYaQWF2HS6wHeiaXTMDqdeL2zEyVOp394ZKShx+d78CS7p0Tv1NWVfnPhwuzStWt2//nz2K7VwmgyAdnsul3hvXAohMc8q30+vNrc/G9ba2vtH7duBZ4SMRndT1NT/ebV1c/+PHECji1bAI0GqWgUmoICZDIZxFmi2mCAlEggQJ+GoSGELZav66urPyeHrBYlNba2VtqKijpEOa+wFIUR3p2YwI5DhxBbXkZ4aQkVbW1omJ6GxAxVwSDmL15E+datHU0eT6XgUNNH+35j4z4lFLJKCwsoYDkKo453d+O13l6UNTeDwuHt/n782NWFZCQCDYM9mJxEJhi0ug8e3Cc4tNz0RSZTVfzRIxTm568LqzMaER8fx+XGRnw0OipKx7cuF8J01lksSCWTUKnVyMbjKDabqwSHINKlZDk/Sx2erLSiIENU2GyIpVLQkGh7SQlWhZGjkGUw0SJBlpKkfMEhiHDf71/ZVVuLGC8p1EAI6zhyBDV9feuZiPXx9etQFxbid4qcn5cHFaGmDHdnZlaEXWgkj46MzOfM5kgB50S0WHTH4fXiMmcmxHJWiCGKvfvkSRhoS1LDCgbIGAyR7y5dmhccKm55xBsDg4MDe8rK3ps+dgxW0XpmlmD7wcgpDqNMPbQkyfFzprgYndTuZ7//l08OH+6i/98abqLc7G83byY/9HrrSu12w90bN5AOh6EmiSRJEPppBSEzUVGr/WfOQONwhD1u90BalhfoH1VvjHg4Fo3OtXs854w1NWv7qcM2t5tWikkobK7Mjla2t6PjyhXonc61JpfrXDwWmxO+gmPzW+N7QBUj1/X29Xlce/fuNAOFGlEKO6jihLPQ2OTUlN93/Pj3iqL8yvv/0D/63KPlwUePcmKXpbT0raYDB96ssNutNOL+vXv/jV29+lcoEBClLBIPifhzj3bTf5GOx0vEy8Q2wrxhihCPieWNcuTNfv8LMADoorIh168K0QAAAABJRU5ErkJggg=="); }
.success-bynx { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAYAAADQWvz5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTXdYP5PAAAEHElEQVQ4T12Se0xTZxyGD9eJFEQoBQSkUOTSoZQWpOMSLRREYBY7rrq5hRgGzsFwMtRyEUzFS8yQVRwgDosFKXfbIuXSopRbZeGyuS1qzNw9M9sfm38gM7z7TpewZW/y5pycc54nv+98H0WHwWBQiYliS4U7hdaysorIE8dOytva2nr1hmGDTq/VNyquqt4rOFq6P13q6+/nT7FYLIrJZFp4AJarRSQSJVB7klI85KfrLo/N6X9rm1Lgw/53cOCmCG91JKNm6AP0mtsxYTI8Ksh/t9CN6Wbt6upq4ddFjo6OVFxsvN9gn2Zcbf4Mqa08xHR6IGmIjb16DlJId/d5I7rJA2+378X9x9Nrl859fIlwtjS/LnLY4OB047pSp5xrhPBTL6Qbg5A3H4m8+6TmSOTOCJBtEkBqCEeM0hPiBi7mv53G8ZKySppfFx3MebNwZPE24pvYyJjkWuCcGb6l2SY+Mg08vDHKQ0pvMMRdHPAVrshu2YX5JfMPfJ5AYBG5OLt49Kh7TaUDh5Cg8cUBMsW/kghkjv8jSeoKRK2uFLKBIkQ2MMGptkWHuRl1NRfqaQcVGsSN0RoG/8xQRUFiCkXurAA5s3xkTfGQaSSisQgk9vij6FYWXqys4quny4i/GAjWCQrH+/KhVndP0A4qVZx2sONu618JSg6yZsORNyeAxMhFmi4E0tFw7Bkgz9vi8OTHx1h7CVR0FoMts4KvjIKkUYgho+YB7aDSU/YdVt279nL3DTay5sKxbyIUxcNZaDZdhLidg8SWIBiXhslvAFr1CviV22DbGXv4VVJIV0Tizj3tQ9pBRWwXSHvGO1dSlTvw+mQQJJrtuLs8CjwHqjpLcFlTB6wCxvkRhJ1yA6fWFtyzDMtEBR1SdPerP6cdlAfTM1qr1X2XfysVokEfSIbCcKz7EBaWF/DL02d49tPv5H4Ru05z4Uum4MoZCJVvxJaPKFydPI/mhms62kHvvntZaflN1WwTBJ8wsX94B0QqNqSKWOgMg3iw8DVyLiTD+ySFECKgRf5VNog+uxXmh9OrYlFyKe2gRVaeLK/00bHRnyu0R8Cr3wxxBzkrVzYjVs6B5FwcAmR2ROJgWVIA2XZ2uS36vmhHc2PLJOGDaQctouMSK4yTLX25tFKpPYqQWkcEnrGBTxUF7woKATU2YFdbwaucwqtVTKgXWzE+Ynzi7uaeQdgN6yebxJrURxj1WtXY6NivAwudKOzMgrieC76chai6LUi/EoVTt4sw82hire26ctHNlZlHGBca/q+Ijg2pp7PTptziIyXd+iH993dMmucDM12r/VNdL8ZNI390qbq+kaRlKOzt7EXk200WiuT/Ijr0WjeSBjsxnCWB7G3v74wQVvPC+BW+W7YednjFIZG88ya1I10PAOpvBPY08LwUTiIAAAAASUVORK5CYII="); }
.warning-bynx { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25JREFUeNp8VFtoHUUY/mb2cvbcsufkJI22x0jNpQWxbQxUqy0+KFhE9KFe0rTgKagIIvqiKCJYX3zyQYXSt5hYg30REUEo+tYHlQarSEsabS6YNJ6cy57ds5ezO7Pj7AakBHFg2Nnhm+///u//Z4gQAjvHlxfmRvORfTLTXpsU9qZJytWWX9z9o2+U5qemT6/fjiWEgOwk+Xr2/Kt7Rf2NYRP35Mw+SvUMeODD6zhs2aaLK2TowxO1l7/4T5KZmRljLN64dChnHcvvqYLkTQhF2QYmGMYQdztwN29hIRj85pEzbz5Nbid5/+xZ+kQVV+7TGxPawJ0AlYdVTUJiiJiDUDVBA5ynhGHrb0k09MPR2luPJSQ0ifTg3aWP94U3J6hugMlo3HPA7SZY3zCw/zhEeY9UYSHueWA9H2rRxAFt/dFv586/nZxXxkdHBya9q3MFDRqPtyPHyUzAeyehjxxB3F4F21yS+wKChYhZBEUhyDB34oETL86qxbj7Qs7dyEWFEiClkliRk8s1g+JZqSfc2kJY/0umpUlIEihG4ofp+xVzV7Wm5jvLD4uYgUcBiCJzh5qmL7wOiNWAkZB4bfDQA8lk00BCKkKimgcwGkuHVWwtV0RBAqMwNY1ApFWI3Q5ot5UqEZELYkhyTUkPg8h0mfxSCtpcqai0v2pFzlX5T1MFsdOWEZhUJYmdTbCtP5IFtL6CJNHTVHgQQgRy27WB8ohF3f6xn1gYyOoxhHYbke8iFtITRQNrLKL73XsgYRN6pQy9XIReKkIz81ByklAqDwb3LVBHKX7Gzd1Bz7EQuQ6YJONJdbiP7KGnYD53DsbYUahZBVo+C7WQhVbIgagE3dxdVlfvn6VTp05vrA4cuRhZdURRBC47k8umStTQnCm9KIFmC1BUmZ80XlFVqHkDvWYTN837zz0/fWotbbZVVF7xxh+/EdoNMGkwl30gqA7/16/gf/8O4ls/Q6jGdtfqGpw/l7CiHrxyvPb6u8n5lKRWqwW/m4cf6h145rekKmHXRhSGKWFk19OSpl3vO2gu/ILr3fHL14z9x/69hDtv8aXPP/1g1/rll3KtG3cohoZMpQLd0CWQoh4PrS1n7/3kyTOvffS/T0EyLs5fGC9FrZOZrcWDtLNeisvDTa88suBmB+efnZpe2/me/CPAACDKtsCRKsmYAAAAAElFTkSuQmCC"); }
*/
.invalid-bynx { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAABqlBMVEX///+RhyeMhSY4NRMcHAEAAABhVRNEPhRKPAJANQEAAABwXQYAAAB6Zw8AAACFawUAAACRdAeLcgyEZwWDZwVKPAIAAACukBKWeQqPcgmMbwmLbgZWSw+Qcwqhggyoig9OPQNMOwOhgAWgfwidfASvkhWkhAujfgaffQZxWQWsig2qhwungwedfgidfAaafAaZegWZeAOZeAGIbQiHagX//1T//1H//FH/+VD/+kP780j68kf88j7370T57z/67jn06Tz16C/z5i7z5TL35Rjx5DL04yz04h7q30zq3UHn2D3u2RPk10Tl1jzi1UDt1Rnp1Bvf0kDi0DLezjnmzQ3mygrkygzTxD7hxAbjwwTiwgPiwwbgwALjwAPhvQHUuh3RuBfJtzrQsQjDrzXNsArLrxXLrRPFqh/NqQTDqB7EpxTDpxrDphfCpR3DpQ24pDXAohi7nBe/mwa5mQ+7lwWvli23lAislC+pkjWsky23kwa0kg+2kQazkQeyjw6wjQywiwasiQiZfCiRfSyXeimUdyp3VSJ5VR09CwYoDgUmAAAYAAAPAAALAAAaMuzCAAAAjnRSTlMAEREREREiIiIiIjMzRFVmZnd3d3d3d4iIiIiIiJmqu7u7zMzM3d3d3d3u7u7u7u7u7u7u7v//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////n9px+wAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8wOC8xMPOa5FMAAAAedEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzUuMasfSOsAAADJSURBVBiVY2CAAEZxJgZkwCpfL4ciIFFgWyyIxOet8/EIbuRGaFAOqujMT1BhhQkIFZq29FS61/JD+czavmZN3aUuKeosEAHJTAvL8q5k77AyaTCfTcvTyj6xwzckNEmHAyQglW7h4OzXHhgQEV0lAuSzq3lZu9q09ra5xURmaHAyMMjmmts5OYY3h/tHxcbVCDOwqlZn52TlpcanFRWVlDQoMXDJKGoa6+obGhka6JloKogysPLwCYjBgAAfD9DdrKxcMMDKygAAwy4qmRpcWDUAAAAASUVORK5CYII="); }
.error-bynx { color: red }
.success-bynx { color: #00AA00 }
.warning-bynx { color: orange }

/*
*/
.info-bynx { color: #6666FF }

img.no-notes { background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAAl2cEFnAAAAEAAAABAAXMatwwAAAm1JREFUOMulk81LlFEUxn/vODNaapMWk5syK7IoM4UKgloJQopQUBQFEq1atKmg/yDCTUGLFummlRG0iKCoCMqSBKnQok/zo0ZtphmnGZ33vve97z0tNMqPVt3FuXDg+Z3ncp/jiAj/c8IAMnJPTP4HIhoxPhL4iNGI8ZDAA18RGIUYF3xF7NANZz4gMES2H11EFwEH5gogMHXr2GIHXjbBMhHEurNdB0Qs4CD8ITihYsR3l3iCMVg9icn3gfUQ0bO31WAVYhViXaKrD2L9whKAwAMMYhWIPyf6W6wQW8BN9pMuriJ756LM/HiCoxLtYQAznZ61PG+yi7VqDuKic8N4P5dTVXeCWE0D2eFa3j/o7AgD2EChPvVgvM8QaBBDoHKUVMcRW0DnxqCkgcr4LjJD74g6mvIVVZStWhcLAwRuGpNLULbzOGCxepT8q5tIUMCf+QbFO4jVNONNdBNd7jD6+j2+0mnlTu8NATgi+MkBph6dJyh8gsDHio+X/4qEtxLb2IIav44TmSJSVk5JYei7n5to2nXm9sfQ7/8u392On02RfXoZKz6Z9DjabiG2qQ2VuEYo4qNz60k+fo7OF1obzz58DRACwCicohCljacQs5Kx+13YlXuIb2tBT3ZSFBW8XDWpZ/1EUn1sPtfXvyAHiqn7VxCjGEtmKGtsw0icicGrVMSjqMxaMk97CKdfYrWalwNn4TLd6miSw6e7+NB9nvGRXorX1WOSqfGKaFFz3YUXbxbGPbSw8eHzpNFv71JTv4/S0loS/YPTytUHlhIv6eDI/kq3ccOa8O6tNUjE63WTqZOtlwa+/GudfwHA23LwGtv0WAAAACV0RVh0Y3JlYXRlLWRhdGUAMjAwOS0xMS0xNlQyMjoxODoxNy0wNzowMFsA/sEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTAtMDEtMTFUMDY6NTM6MDEtMDc6MDBTKZ3JAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEwLTAxLTExVDA2OjUzOjAxLTA3OjAwInQldQAAAGJ0RVh0TGljZW5zZQBodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9ieS8zLjAvIG9yIGh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LzIuNS+LhjxlAAAAJXRFWHRtb2RpZnktZGF0ZQAyMDA2LTAzLTEyVDIxOjU1OjAyLTA3OjAwe7ZaQAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAbdEVYdFNvdXJjZQBGQU1GQU1GQU0gU2lsayBJY29uc4J6ZPsAAAAzdEVYdFNvdXJjZV9VUkwAaHR0cDovL3d3dy5mYW1mYW1mYW0uY29tL2xhYi9pY29ucy9zaWxrL8LEDQ0AAAAASUVORK5CYII=); }
img.has-notes { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwKEAIwwPBZagAAAXBJREFUOMul0z9rVEEUBfDfbFYIigZBiygomEIRFes0NoKgfgexkyD4GWzzYWwE20AKRYggJo1CNNH4XxM0m+xTn28s3t31xX1bOc29A3POnHvOTMo5+5/VhfQmZT1UKKP+jn5QB/0v8rWc9hAocbqFfiAuNfb3WxT4Frc2AVULYScuGyGo8BPfQ6aouVErHK1HGCUoG4fHgUt8wgTpQcq+oHCjJthtyB8H3kYf53AC61gw3x2C1lAEoIr+eAO8H9N4HR5N4bCpvwp6OBsqfmAl5t3FJE7iPfbhGQpf9c12hq5/xiJ2Gip6ATiFt5HCARQ+2nY538ovOsMULkacj2O/GcQz2KjN08cj7Lieb+eng2RrDyZwIcALOIQzIbsb4Cc1cZ7LS6MxLkb9EE7DMo7EKEvYGn1I6d/PlOZTNod7eIVj2PTOpCv5Tl5pe5x716rS81BxEMt6ClfbwO0KLqW+GV3nkTy05Wa+m1+O+85/AMbfnWLMlsd0AAAAAElFTkSuQmCC); }

.calendarHeaderButtonYearBack { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUeNpi/P//PwMIODo6MiABkCAjMn///v1gPhMDJviPj89EimJ0DQQVo2tgRJNjJKSBKE3YPI1XE0CAAQA+gA4LN9XGHQAAAABJRU5ErkJggg=='); }
.calendarHeaderButtonMonthBack { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADdJREFUeNpi/P//PwMIMDIyMiABoPB/sAATAyb4j8xhwieJruA/FtNQFDASUoBVETZHoigCCDAAp/UKC4Ghs5AAAAAASUVORK5CYII='); }
.calendarHeaderButtonMonthForward { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADZJREFUeNpi/P//PwMIMDIyghiMDFAAE2diQAX/0fgYCjAUYVOAogiXAkZ8ChjxWcGIrhogwACn9QoLaG4e2AAAAABJRU5ErkJggg=='); }
.calendarHeaderButtonYearForward { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpidHBw+M/AwMDIgAAofCYkQQY0RSgKcCpiwqUTxkdXwIjOZ8IniWwFIy6TAAIMAMzpCM6RdThzAAAAAElFTkSuQmCC'); }

.disabled-image {
	opacity:0.4;
	filter:alpha(opacity=40);
}

/* End - Assets */

/* Start - Page Formatting */
body {
	display: flex;
	flex-direction: column; /* Tricks IE11 into actually honoring the .wrapper min-height */
	background-color: rgb(245, 244, 242);
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;

    align-items: stretch;
}

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

.modal-view-noflex {
    width: 1000px; 
}

.modal-view-noflex .root-centre { /* same as .modal-view-noflex width */
  min-width: 1000px;
}

.modal-view-flex {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    min-width: 500px;
}

.modal-view-flex > .modal-view__section {
    padding: 0 2em;
}

.root-centre.small
{
    min-width: 600px;
}

.root-centre {
    min-width: 1200px; /* note: a smaller width adversely affects the right hand tree hierarchy panel */ 
    width: 100%;
    margin: 0 auto;
    padding: 0 2em;
}

/* Undoes the root-centre styling if it has incorrectly been placed inside of another root centre. */
.root-centre .root-centre {
	min-width: auto;
	margin: auto;
	padding: 0;
	max-width: 100%;
}

.module-section {
    flex-grow: 1;
    margin: 0 auto;
    width: 100%;
    padding-top: 1em;
    padding-bottom: 10em;
}

.two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: -0.5em;
    margin-bottom: 0em;
}
.two-column__child {
    margin: 0.5em;
    overflow: hidden;
}
.two-column__child--grow-1 {
    flex: 1 1 0px;
}
.two-column__child--grow-2 {
    flex: 2 1 0px;
}

.two-column-fields {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.3em;

    /* Trick to get spacing nicely between fields when wrapped. */
    margin-right: -0.3em;
    margin-top: -0.3em;
}
.two-column-fields > .field-base {
    margin-right: 0.3em;
    margin-bottom: 0.3em;

	/* Note: We don't use shorthand 'flex' property because IE11 doesn't support the calc function as a value. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 0.3em); /* set width as 50% - margin */
}

.modal {
    z-index: 100;
    animation: fadeIn 0.15s ease-in;
}

.modal__content {
    z-index: 112;
    position: relative;
}

.modal__content .data-loading {
    border-radius: 0.3em;
}

.modal__background-dimmer {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0,0.6);
    width: 100%;
    height: 100%;
    z-index: 111;
}

.modal-view {
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06);

    transition: box-shadow 0.2s ease-in;
    border-radius: 0.3em;
}

.modal-view--dragging {
    cursor: move;
    -webkit-box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.8);
    box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.8);
}

.modal-view__header {
    border-radius: 0.2em 0.2em 0 0;
    height: 2em;
    padding: 0 0.6em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grippy-block {
    width: 12px;
    height: 16px;
    cursor: move;
}

.modal-view__section {
    flex: 1 0 auto;
}

.modal-view__footer {
    padding: 0 2em;
    min-height: 2em;
}

.button-section-root {
    margin: 0.3em 0;
}
.button-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -0.3em;
    align-items: center;
}
.button-section > * {
    flex: 0 1 auto;
    margin: 0.3em;
}
.button-section.centered {
    justify-content: center;
}

.space-at-the-bottom{
    margin-bottom: 7px;
}

/* *** calendar starts *** */


.calendarWrapper {
    z-index: 1002;
}

.calendarPanel {
    background-color: rgb(255, 255, 255);
    border-radius: 0.2em;
    border: 1px solid rgba(71, 71, 71, 0.34);
    box-shadow: 0px 1px 3px 1px rgba(198, 198, 198, 0.56);
}

.singleMonth {
    width: 211px;
}

.doubleMonth {
    width: 422px;
}

.calendarPanel table {
    width: 100%;
}

.calendarPanel table .calendarHeaderLeft {
    border-radius: 15px 0 0 0;
}

.calendarPanel table .calendarHeaderRight {
    border-radius: 0 15px 0 0;
    padding-right: 12px;
}

.calendarPanel table.calendarHeader td {
    background-color: rgb(236, 236, 236);
    padding-left: 12px;
    min-height: 20px;
    border-bottom: 1px solid rgba(33, 33, 33, 0.2);
}

.calendarPanel .calendarHeader .calendarHeaderCenterLeft {
    padding-left: 28px;
    width: 130px;
}

.calendarPanel .calendarHeader .calendarHeaderCenterRight {
    width: 70px;
}

.calendarHeaderCenterDate {
    display: inline-block;
}

.calendarHeaderCenterDate select.standard-input {
    display: inline-block;
    width: 60px;
    font-size: 12px;
}

.calendarHeaderCenterDate span {
    padding-left: 5px;
    vertical-align: middle;
}

.calendarHeaderCenterSpace {
    display: inline-block;
    width: 140px;
}

.calendarHeaderCenterRight {
    display: inline-block;
    width: 140px;
    vertical-align: middle;
}

.calendarPanel button {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    height: 17px;
    width: 17px;
    cursor: pointer;
    border: none;
    box-shadow: none;
    vertical-align: middle;
    border-radius: 0.3em;

    transition: background-color 0.1s ease-in;
}

.calendarPanel button:hover {
    background-color: rgba(33, 33, 33, 0.2);
}

.calendarPanel button:disabled {
    cursor: not-allowed;
}

.calendarBody .separator {
    padding-left: 10px;
}

.calendarHeader {
    overflow: hidden;
    height: 35px;
}

.calendarDate {
    cursor: pointer;
    margin: 1px;
    border-radius: 3px;
}

.calendarDate:hover {
/*     transition: outline 1s ease-in; */
    outline: 1px solid rgb(33, 33, 33);
}

.currentDate {
    text-decoration: underline;
}

.unselectableDate {
    color: #999;
    text-decoration: line-through;
    cursor: default;
}

.highlightDate {
    background-color: #ff8000;
    color: #fff;
    cursor: default;
}

.calendarDate-positive {
    color: white;
    background-color: #00b761;
}

.calendarDate-warning {
    color: white;
    background-color: #f67335;
}

.calendarDate-negative {
    color: white;
    background-color: #000;
}

.calendarBody {
    margin: 0 5px;
}

.calendarBody td {
    line-height: 25px;
    width: 25px;
    height: 25px;
    text-align: center;
}

.calendarBody tbody tr:first-child td {
    font-weight: bold;
    cursor: default;
}

.calendarFooter {
    text-align: right;
    /*! padding-right: 10px; */
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 1em;
}

.calendarFooter a {
    text-decoration: underline;
    margin-left: 0.5em;
}

.calendarFooter a:hover {
    text-decoration: none;
}

.gwt-TimeBox-menu .popupContent {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;

    border-radius: 0.3em;
    border: 1px solid rgb(110, 147, 211);
    box-shadow: inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(110, 147, 211, 0.23);
}
.gwt-TimeBox-menu a {
    white-space: nowrap;
    display: block;
    padding: 0.2em 0.4em;
    color: #111;
}
.gwt-TimeBox-menu .selected a {
    background-color: #ccc;
}
.gwt-TimeBox-menu .highlighted a,
.gwt-TimeBox-menu a:hover {
    background-color: #eee;
    color: #000;
    text-decoration: none;
}

.gwt-SuggestBoxPopup {
    z-index: 1003;
    margin-left: 2px;
    padding: 2px;
    background-color: #fff;
    border: 1px solid #999;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.gwt-SuggestBoxPopup .item {
    margin-bottom: 1em;
    cursor: default;
    line-height: 20px;
    padding: 0.2em 1em;
}

.gwt-SuggestBoxPopup .item:hover,
.gwt-SuggestBoxPopup .item-selected {
    background-color: #ccc;
}

.gwt-SuggestBoxPopup td.item em {
    background-color: rgb(31, 50, 80);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(110, 147, 211, 0.9);
    padding: 0 0.2em;
    text-decoration: none;
    font-style: normal;
}


/* End - Page Formatting */

/* Start - Forms Styling */

.field-base,
.field-base--margin {
    margin-bottom: 0.8em;
}
.field-base {
    display: flex;
    justify-content: flex-start;
    max-width: 700px;
    min-width: 200px;
}
.field-base--vertical-layout, .field-base--wrapped-layout {
    flex-wrap: wrap;
}

.detail > .field-base:last-child {
    margin-bottom: 0;
}

.field-base--vertical-layout > .field-base__label-container {
    flex: 0 0 80%;
    padding-bottom: 3px;
}

.field-base__label-container {
    /* Flex Item - Grow to ratio of 4 from 0px */
    flex: 0 0 33%;
    min-width: 0;

    /* Flex Container - Justify horizontally right, vertically centred. */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
    text-align: right;
    overflow: hidden;
}

.field-base__label-container--align-top {
    align-items: start;
}

.wide-label > .field-base__label-container { flex: 0 0 50%; }

.two-column-fields.check-box-only > .field-base > .field-base__label-container {
    flex: 0 0 80%;
}

fieldset .field-base__label-container { flex: 0 0 32%; }

.top-label .field-base__label-container {
    align-items: flex-start;
    margin-top: 4px;
}

/* ** Translations Override ** */
.field-base.translate {
    min-width: 200px;
    width: 100%;
    display: inherit;
    max-width: inherit;
}

.field-base__label-container.translation-label {
    flex: 0 0 50%;
    max-height: none;
    justify-content: inherit;
    overflow: visible;
    min-width: 90%;
    text-align: left;
}
/* ** End Translations Override ** */

/* ** Key Desc Search Override ** */
.field-base.key-desc-search {
    max-width: 575px;
}
/* ** End Key Desc Search Override ** */

.field-base__label-container--autosize {
    flex: 0 1 auto; /* Base size of auto. Shrinks if necessary. */
}

.field-base--vertical-layout > .field-base__label-container {
    min-width: 165px;
    height: auto;
}
.field-base--vertical-layout > .field-base__label-container > .field-base__label {
    flex: 1 1 0px;
    text-align: left;
}

.field-base__control-container {
    /* Flex Item - Grow to ratio of 8 from 0px */
    flex: 8 1 0px;
    min-width: 0;

    /* Flex Container - Justify horizontally left, vertically centered */
    display: flex;
    justify-content: flex-start;
    align-items: center;

    flex-wrap: wrap;
    width: 100%;
}

/* ** Google maps Overlay override ** */
.field-base__control-container.map-overlay {
	  font-size: 15px;
	  margin: 1em;
}

/* HTML display field wrapping control */
.field-base__control-container .gwt-HTML {
    word-break: break-all;
}

.button-section.fullscreen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 50vw;
    margin-left: -3vw;
    font-size: 15px;
}

/* ** Costs override - wider labels and right justify values ** */

.cost .field-base__label-container,
.cost-panel-text .field-base__label-container {
    flex: 0 0 55%;
}

.cost .currency {
    width: 40%;
    text-align: right;
}

.cost-panel-text .field-base__control-container {
	justify-content: flex-start;
}

/* This keeps the margins nice when wrapping form items.
   Make sure that when you update this selector you also update the
   child wild-card selector below. */
.field-base__control-container {
    margin: -0.2em;
}
.field-base__control-container > * {
    margin: 0.2em;

}

.field-base--vertical-layout > .field-base__control-container,
.field-base--wrapped-layout > .field-base__control-container {
	/* Note: We don't use shorthand 'flex' property because IE11 doesn't support the calc function as a value. */
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: calc((2/3) * 700px);
}
.field-base__control-container > * {
    flex: 0 1 auto;
}
.field-base__control-container > .field-base__control-container {
    margin-right: -0.4em;
}

.field-base__label {
    font-weight: 600;
    color: rgb(72, 72, 72);
    margin-right: 0.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}


.field-base--mandatory .field-base__label:not(:empty):before {
    content: '*';
    margin-right: 0.2em;
    color: red;
}

.remaining-chars .field-base__label:not(:empty):before {
    content: '';
}

.field-base--bigger-text {
    font-size: 1.25em;
}

.field-base.changed {
    background-color: rgb(254, 254, 0);
}

.field-base__control-container > .mce-container {
    width: 100%;
    margin: 0.4em 0.2em 0.4em 0.4em; /* Needs to match the negative margin of the control container. (right .1 less due to border issue) */
}

.mce-container,.mce-container *,.mce-widget,.mce-widget *,.mce-reset {
	resize: vertical;
}

.field-base__note {
    color: rgb(127, 127, 127);
    font-style: italic;
}

.standard-input, .textMessage {
    border: 1px solid rgb(190, 190, 190);
    padding: 0.4em;
    border-radius: 0.3em;
    background-color: white;
    flex: 1 1 auto;
    -webkit-transition: box-shadow 0.3s ease, border-color 0.3s ease;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.textMessage.newlines-visible {
    white-space: pre-line;
}

.standard-input {
    height: 2.4em;
}

.double-field {
	width: 60px;
}

::placeholder { font-style: italic; }

select.standard-input {
	/* Select always wants to be as wide as its options. If we give it a fixed width it will ignore the default behaviour and not grow or shrink.*/
	width: 200px;
}

.error .standard-input,
.standard-input.error,
.very-short-field.error,
.rich-text.error {
    border-color: rgb(246, 167, 167) !important;
    background-color: rgb(255, 239, 239);
    box-shadow: none !important;
}

.rich-text.error {
    border-style: solid;
    border-width: 1px;
}

.rich-text > ul, .rich-text > ol {
	list-style: inside;
}
.rich-text > ol {
	list-style-type: roman;
}

.standard-input:disabled {
    background-color: rgb(236, 236, 236);
}

.standard-input:focus {
    border-color: rgb(0 117 255);
    box-shadow: inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(110, 147, 211, 0.23);
    outline: none;
}

.file-upload {
	border: 1px solid rgb(190, 190, 190);
	border-radius: 0.3em;
	box-shadow: none;
	padding: 0.4em;
	background-color: white;
    -webkit-transition: box-shadow 0.3s ease, border-color 0.3s ease;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    flex: 1 1 auto;
    margin: 0.4em;
}

.file-upload:focus {
    border-color: rgb(0 117 255);
    box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(110, 147, 211, 0.23);
    outline: none;
}

.file-upload:disabled {
    background-color: rgb(236, 236, 236);
}

.field-set {
    margin-bottom: 1.3em;
    margin-top: 1em;
    width: 100%;
    border: 1px solid rgba(31, 50, 80, 0.32);
    padding: 0.8em 0.4em;
    border-radius: 0.2em;
}

.field-set-legend {
    position: relative;
    top: -18px;
    left: 14px;
    font-size: 1.2em;
    font-style: italic;
    color: rgb(31, 50, 80);
    padding: 3px;
    background-color: #f5f4f2;
}

.panel .field-set-legend {
	background-color: #fcfbfa;
}

.select-list > .field-set-legend {
	top: -21px;
}

.field-set > legend {
    font-size: 1.2em;
    font-style: italic;
    color: rgb(31, 50, 80);
    padding: 0 0.4em;
    margin-left: 0.8em;
}

.field-set.mandatory >legend:not(:empty):before, .field-set.mandatory >span.field-set-legend:not(:empty):before 
{
    content: '*';
    margin-right: 0.2em;
    color: red;
}

.field-set > div > .link-base,
.field-set > .link-base {
    margin-left: 10%; margin-top: 1em; display: inline-block;
}

.signature-pad {
    padding: 0; /* Lets the user draw everywhere the background color can be seen */
}
.text-area {
    height: 150px;
}

.radio-select--horizontal {
    display: flex;
    flex-direction: row;
}
.radio-select--horizontal > * {
    margin-right: 0.6em;
}
.radio-select--horizontal > *:last-of-type {
    margin-right:0;
}

.radio-select input[type="radio"] {
	margin-left: 0;
	margin-top: -0.1em; /* Keeps the input vertically aligned with the input */
	vertical-align: middle;
}

.radio-select--vertical {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
}

.radio-select--vertical > * {
    margin-bottom: 0.2em;
}
.radio-select--vertical > *:last-child {
    margin-bottom: 0;
}

.error .radio-select {
    padding: 0.4em;
    border: solid 1px rgb(246, 167, 167);
    background-color: rgb(255, 239, 239);
    border-radius: 0.3em;
}

.date-values {
    flex: 1 1 0px;
    display: flex;
    margin-right: 0;
}
.date-values > * {
    flex: 1 1 0px;
    margin-right: 0.3em;
}

.button {
    width: auto;
    line-height: 1em;
    padding: 0.75em 1.3em;
    font-weight:700;
    font-family: inherit;
    text-align: center;
    color: #fff;
    text-transform: none;
    white-space: nowrap;

    border: 1px solid #999;
    border-radius: 3px;
    background-color: #cf7133;
    cursor: pointer;

    transition: background-color 0.2s linear, border-color 0.4s linear;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06);
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button:enabled:hover {
    background-color: #d8d8d8;
    border-color: #666;
}
.button:focus {
    box-shadow: inset 0 1px 2px rgba(0,117,255,.075), 0 0 0 0.2em rgba(0,117,255, 0.23);
    outline: none;
}

.button--primary {
    background-color: #3586FF;
    border-color: #3586FF;
    color: white;
}
.button--primary:enabled:hover {
    background-color: #3586FFAA;
    border-color: #3586FFAA;
}

.button--secondary {
    background-color: white;
    border-color: #3586FF;
    color: #3586FF;
}
.button--secondary:enabled:hover {
    background-color: #3586FFBB;
    border-color: #3586FF;
    color: white;
}

.button--danger {
    background-color: #F16A54;
    border-color: #F16A54;
    color: white;
}

.button--complete {
    background-color: #35CF35;
    border-color: #35FF35;
    color: white;
}

.button--link {
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    background-color: initial;
    color: rgb(66, 133, 244);
    text-decoration: none;
	text-decoration-skip-ink: none;
}
.button--link:enabled:hover {
    text-decoration: underline;
    background-color: unset;
    border-color: rgba(0, 0, 0, 0);
}
.button--link:disabled {
	text-decoration: underline;
	color: rgb(204, 204, 204);
	cursor: text;
	pointer-events: none;
}

.button.button--inverted {
    background-color: #222B;
    border-color: #222;
    color: white;
}

.button--standard-fwidth {
    width: 100%;
}

.button__image {
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    background-color:#455a64;
}

.button__image:hover{
    background-color:#546e7a;
}

.button--link:enabled:hover{
    background-color: #d8d8d8;
    border-color: #666;
}

.button__image--small {
    width: 2rem;
    height: 2rem;
    background-size: 1.5rem;
    flex-shrink: 0;
}
.button__image--large {
    width: 4em;
    height: 4em;
}

.toggle-button {
    cursor: pointer;
    display: inline-block;
    background-color: transparent;
    border: none;
    color: white;
}

.modal-view__header .toggle-button {
    color: #000;
}

.toggle-button > svg {
    display: block; /* Default behaviour is inline-block. Which causes extra space at the bottom due to the line-height. */
    height: 25px;
    width: 25px;
}

.button--next:after {
	content: ' >';
}
.button--back:before {
	content: '< ';
}
.button.confirming {
    color: #9c3e12;
    border-color: #9c3e12;
    background-color: #e2943d;
}
.button.confirming:enabled:hover {
    background-color: #ebae34;
}

.inline-widget {
    display: inline-block;
    margin-right: 0.6em;
}

.inline-widget-right {
    display: inline-block;
    margin-left: 0.6em;
}

.inline-link {
    display: inline-block;
    margin-right: 0.6em;
}

.link-base,
.link-base:visited {
	line-height: 1;
    color: rgb(6, 72, 181);
    text-decoration: none;
	text-decoration-skip-ink: none;
}
.link-base:hover {
    text-decoration: underline;
}

.link-base.disabled-link {
	text-decoration: underline;
	color: rgb(204, 204, 204);
	cursor: text;
	pointer-events: none;
}

.centred {
    text-align: center !important;
}

.header {
    display: flex;
    justify-content: space-between;
    color: #fff;
    text-shadow: none;
	background-color:rgb(83, 133, 166);
	border-radius: 0.2em 0.2em 0 0;
    align-items: center;
    font-weight:600;
    font-size: 1.2em;
    padding: 0.75em;
    text-transform: none;
    min-height: 30px;
}


.header__buttons {
    display: flex;
    justify-content: space-between;
    align-self: center;
    align-items: center;
}
.header__buttons > * + * {
    margin-left: 0.3em;
}

.detail {
    padding: 1em;
    border: 1px solid rgb(227, 227, 227);
}

.unordered-list {
    list-style: disc;
    margin-left: 1em;
}

.unordered-list > li, .linkslist .unordered-list > li:last-child {
    margin-bottom: 0.4em;
}

.unordered-list > li:last-child {
    margin-bottom: 0;
}

.unordered-list .field-base__label-container {
    flex: none;
}

.tooltip-icon {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    overflow: visible;
    cursor: pointer;
    background-size: 16px;
}

.tooltip-icon-empty {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    overflow: visible;
}

.tooltip-text {
	min-width: 18em;
	max-width: 28em;
}

.tooltip-text.left {
    transform: translateX(-100%);
}

.remaining-chars {
    flex: 0 1 100%;
    margin: 0;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    color: rgb(127, 127, 127);
    font-style: italic;
}
.remaining-chars > *:first-child {
    margin-right: 0.3em;
}

.slider {
    display: flex;
    min-width: 180px;
}

.slider span {
    padding: 3px;
}

/* End - Forms Styling */

/* Start - Tables Styling */
.data-table-wrapper {
	overflow-x: auto;
}

.data-table,
.widget-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background-color: white;
    margin-bottom: 0.3em;
    margin-left: auto;
    margin-right: auto;
}

.data-table__caption
{
    font-size: 1.2em;
    font-style: italic;
    color: rgb(31, 50, 80);
    margin: 0.4em 0.8em;
    text-align: left;
}

.data-table__header {
    background-color:#92a1aa;
    color: white;
    padding: 0.75em 0.3em;;
    font-size: 1em;
    text-align: left;
}

.data-table__header.left {
    text-align: left;
}
.data-table__header.center {
    text-align: center;
}
.data-table__header.right {
    text-align: right;
}

.data-table__sortable {
	cursor: pointer;
}

.data-table__row.highlight {
    background-color: rgba(248, 255, 0, 0.3);
}
.data-table__row.highlight--warning {
    background-color: rgb(255, 239, 239);
}

.data-table__row + .data-table__row,
.widget-table tr + tr {
    border-top: 1px solid rgba(190, 190, 190, 0.45);
}

.data-table__row:hover,
.widget-table tr:hover {
    background-color: #bfcfe0;
}

.data-table__cell-wrapper > img { /* TODO CM Remove fix */
    vertical-align: middle;
}

.empty-results {
    display: block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-style: italic;
}

.data-table__cell,
.widget-table td
{
    padding: 0.2em;
    height: 30px;
}

.data-table__cell.positive
{
  background-color: rgb(193, 244, 193);
}

.data-table__cell.negative
{
  background-color: rgb(255, 208, 208);
}

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

.swap-table-right {
    border-left: unset;
}

.swap-table {
    width: 100%;
}
.swap-table-left,
.swap-table-right {
    width: 50%;
    vertical-align: top;
    display: inline-table;
}
.swap-table-left .data-table__row {
    border-right: 1px solid rgba(190, 190, 190, 0.45)
}
.swap-table-right .data-table__row {
    border-left: 1px solid rgba(190, 190, 190, 0.45);
}

.swap-table .data-table__row {
    height: 35px;
}

.swap-table-left__caption {
    text-align: left;
}

.swap-table-right__caption {
    text-align: right;
}

/* End - Tables Styling */

.rankable {
	width: 100%;
}

/* Start - Header Styling */
.header-main {
	display: block;
	background-color:rgb(66, 106, 132);
	margin-bottom: 0;
	min-height: 60px;
	border-bottom: 1px solid rgba(84, 84, 84, 0.16);
	-webkit-box-shadow: 0px 1px 3px 1px rgba(198, 198, 198, 0.16);
	box-shadow: 0px 1px 3px 1px rgba(198, 198, 198, 0.16);
	height: 50px;
}
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.header-nav__application-title {
	text-indent: -4000px;
	width: 150px;
	background-image: url('../images/furn/logo_inverse.png');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 35px;
}
.header-nav__application-title-internal-user {
    display: none;
}
.application-title { /* TODO CM Remove fix */
    margin: 0;
    padding: 0;
}
.header-nav__items {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    margin: 0;
}

.header-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 2px solid rgba(0,0,0,0);
    border-bottom: 2px solid rgba(0,0,0,0);
    padding: 1em;
    cursor: pointer;
    color: rgb(52, 163, 232);
    min-width: 1em;
    font-size: 1.1em;
    transition: all 0.1s ease-in;
    color: #4285f4;
    position: relative;
}
.header-item > * {
    margin: 0.3em;
}

.header-item:hover .header-item__link {
    text-decoration: underline;
}
.header-item:first-of-type {
    border-left: none;
}
.header-item:not(.header-item--disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: #fff;
}
.header-item--disabled {
    cursor: default;
    border-bottom: none;
    background-color: rgba(255, 255, 255, 0);
	color: rgb(92, 92, 92);
}
.header-item--disabled:hover > .link-base {
    text-decoration: none;
}


.header-item__image {
    width: 1.3em;
    height: 1.3em;
    background-size: contain;
    background-repeat: no-repeat;
}
/* End - Header Styling */


/* Start - Breadcrumb Styling */
.breadcrumb-navigator {
    width: 100%;
    padding: 0 2em;
    margin: auto;
}
.breadcrumb-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.breadcrumb-item {
    font-size: 1.2em;
}
.breadcrumb-item:after {
    content: '/';
    color: #fafafa;
    margin: 0em 0.4em;
}
.breadcrumb-item:last-child:after {
    content: none;
    margin: 0;
}
.breadcrumb-item > a { /* TODO CM Remove fix */
    border: none !important;
}
.breadcrumb-item > a.disabled-link {
    color: rgb(51, 51, 51);
    text-decoration: none;
}
.breadcrumb-item>.link-base.history-link, .header-item>.header-item__link, .header-item>.header-item__image {
    color:#fff;
}

/* End - Breadcrumb Styling */


/* Start - Footer Stlying */
.footer-root {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-content: flex-start;
    align-items: flex-start;
    height: 100%;
    margin-top: 1em;
}
.footer-main {
    flex-grow: 1;
    width: 100%;
    margin-top: 0;
	padding-top: 0em;
	padding-bottom: 0em;
	padding-right: 0em;
	padding-left: 2em;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-start;
    background-color: white;
    color: rgb(128, 128, 128);
}
.footer-link {
	margin-right: 10px;
	color: unset;
	line-height:1.1;
	text-decoration: underline;
}
.footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100%;
    line-height: 3;
}
.footer-main-internal-user {
    flex-grow: 1;
    width: 100%;
    margin-top: 0;
	padding: 1em;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-end;
    background-color: white;
    color: rgb(128, 128, 128);
}
/* End - Footer Styling */


/* Start - Panel Styling */
.panel {
    background-color: rgba(255, 255, 255, 0.65);
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);

    margin-bottom: 20px;

    /* This is a fix for IE11. The .header class (.panel > .header) does not enforce
       the min-height rule unless it's a flex-item. So we have to make
       the parent (.panel) display: flex; */
    display: flex;
    flex-direction: column;
}

/* Sometimes panels end up in panels. So lets pretend that doesn't happen.  */
.panel :not(.disclosure-panel).panel {
    background-color: initial;
    box-shadow: 0 0 0;
}
.detail :not(.disclosure-panel) > .detail {
    border: 0;
}

.disclosure-panel
{
	margin: 20px;
}


.disclosure-panel .header
{
	font-size: 1em;
	min-height: 25px;
}


.panel.plain,
.plain > .detail,
.panel.message-no-border,
.message-no-border > .detail,
.panel.no-border,
.no-border > .detail { /* TODO CM Remove fix */
    box-shadow: 0 0 0;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.panel.secondary {
    border: 1px solid rgba(31, 50, 80, 0.3);
    border-radius: 0.3em;
}

.panel.secondary > .header {
    background-color: rgb(123, 150, 179);
    /* bg colour the same as data-table__header so copied to client styles if table header is */
    min-height: 22px;
}

/* End - Panel Styling */

/* Start - Form Styling */



/* End - Form Styling */


/* ********** Dashboard Starts ********** */

.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    list-style: none;
    line-height: 1;
}
.tiles > li {
    align-self: flex-start;
}

.tile {
    background-color: #fff;
    cursor: pointer;
    height: 110px;
    width: 110px;

    border-radius: 5px;
    margin: 0.5em;
    -webkit-box-shadow: 0px 1px 4px 1px rgb(219, 219, 219);
    box-shadow: 0px 1px 4px 1px rgb(197, 197, 197);
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.20);
    transition: box-shadow 0.1s ease-in;
}

.tile > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tile--high-priority {
    border-color: #CB1100;
    border-width: medium;
    color: #CB1100;
}

.tile_image_panel {
    width: 87.6px;
    height: 50px;
    display: flex;
    align-self: end;
    justify-content: right;
    margin: 0;
    padding: 5px;
    overflow: hidden;
}

.tile_image_panel > img {
	max-width: 100%;
    max-height: 100%;
}

.tile-image-colour-1 {
	fill: #436a85;
}

.tile-image-colour-2 {
	fill: #cf7331;
}

.tile--high-priority .tile-image-colour-1 {
	fill: rgb(215, 61, 61);
}

.tile--high-priority .tile-image-colour-2 {
	fill: rgb(215, 91, 81);
}

.tile_text {
    display: inherit;
    margin: 5px;
    font-size: 1.25em;
    max-width: 100%;
    padding-bottom: 2px;
}

.tile:hover {
    transition: transform 0.15s ease-in, box-shadow 0.1s ease-in;
    transform: translateY(-2px);
    -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.tile:active {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 1);
}

.tileConfig {
    list-style: none;
}
.tileConfig .tile {
    margin: 0 auto;
    margin-bottom: 0.8em;
}

.tile-notification
{
    fill: #CB1100;
    stroke: #CB1100;
}

/* ********** Dashboard Ends ********** */


/* ************ SVG Starts ************ */
.vehicle-diagram 
{
	width: 100%;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}

.vehicle-diagram svg
{
    overflow: visible;
}

.kipper-svg-root {
    width: 100%;
    border-radius: 3px;
    min-height: 300px;
    background-color: white;
    border: 1px solid #BEBEBE;
}

#kipper-svg-root > svg {
    padding: 50px;
}

.tooltip-panel {
    position: absolute;
    font-size: 14px;
    max-width: 200px;
    padding: 4px 8px;
    color: #fff;
    text-align: center;
    background-color: #1F3250;
    border-radius: 2px;
}


.fadeout {
    -webkit-animation: slide-out 0.5s forwards;
    -webkit-animation-delay: 0.1s;
    animation: slide-out 0.5s forwards;
    animation-delay: 0.1s;
}

.fadein {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);

    -webkit-animation: slide-in 0.5s forwards;
    -webkit-animation-delay: 0.1s;
    animation: slide-in 0.5s forwards;
    animation-delay: 0.1s;
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes slide-out {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);

  }
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);

  }
}

.vehicle-diagram-button {
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 0px;
    color: white;
    overflow: hidden;
}

.fade-parent-invisible {
    -webkit-transition: 0s 1s;
    -o-transition: 0s 1s;
    transition: 0s 1s;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.vehicle-diagram-button > div > * {
    margin-left: 1em;
    vertical-align: middle;
}

.vehicle-diagram-button > div {
    padding: 5px;
    background-color: rgba(31,50,80, 0.7);
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    line-height: 21px;
    text-shadow: 0 0 0 #1F3250;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.vehicle-area-highlight * {
	stroke-width: 6px !important;
    fill: #fdbebe !important;
    cursor: pointer;
}

.vehicle-area-selected * {
	stroke-width: 9px !important;
    fill: #ff8f86 !important;
}

.vehicle-damage-add * {
    cursor: crosshair !important;
}

.kipper-div > div > svg {
    background-color: rgba(67, 203, 255, 0.11);
    overflow: visible;
}

.marker * {
    overflow: visible;
}

g.area[style*="crosshair"] {
    -webkit-filter: drop-shadow( 3px 3px 5px #000000AA );
            filter: drop-shadow( 3px 3px 5px #000000AA );
}

.svg-damage-dialog {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.97) !important;;
    border-radius: 3px !important;
    box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.3);
}
.svg-damage-dialog .msg 
{
    max-width: 200px;
}

.svg-damage-popup 
{
    z-index: 100;
}

.svg-damage-popup-position 
{
    transform: translate(-50%, 0);
}

.svg-arrow-div {
    position: absolute;

    width: 0px !important;;
    height: 0px !important;;
    border: 10px solid ;
    border-color: rgba(0,0,0,0);
    border-bottom: 10px solid black;
}

.svg-damage-dialog .header {
    display: none;
}

.svg-damage-dialog > .detail > div > label:first-of-type {
    margin-bottom: 2px;
    text-align: left;
}

.svg-damage-dialog > .detail > div > * {
    width: 100% !important;
    margin: 0px 0px 0px 0px;
}

.svg-damage-dialog > .detail > div > *:empty:after {
    content: "-";
}

.svg-damage-dialog .field-base 
{
    flex-wrap: wrap;
    width: 300px;
    overflow: hidden;
}

.svg-damage-dialog .field-base__label-container {
	/* Note: We don't use shorthand 'flex' property because IE11 doesn't support the calc function as a value. */
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: calc((2/3) * 700px);
    justify-content: flex-start;
}

.svg-damage-dialog > .detail > div > label + * {
    margin-bottom: 10px;
}

.svg-damage-dialog > .detail > .button > button {
    margin-bottom: 5px;
}

.svg-close-button {
    color: grey !important;
    position: absolute;
    top: 0%;
    left: 88%;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent;;
}
.svg-close-button:enabled:hover {
    color: black !important;;
    background-color: transparent;
}
.svg-close-button:after {
    content: "x";
}

svg 
{
    width: 100%;
    height: 100%;
}

.unselectable-div > * {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.tyres-diagram-wheel {
    fill: RGB(214, 212, 212);
    stroke: rgb(1, 1, 1);
    stroke-width: 3;
    stroke-miterlimit: 10;
}

.tyres-diagram-wheel:hover,
.tyres-diagram-wheel--hovered {
	stroke-width: 6px;
    fill: #fdbebe;
    cursor: pointer;
}
.tyres-diagram-wheel--selected {
	stroke-width: 9px !important;
    fill: #ff8f86 !important;
}

.tyres-diagram-wheel.pass{
    fill: lime;
}

.tyres-diagram-wheel.warning{
    fill: RGB(255, 144, 0);
}

.tyres-diagram-wheel.fail{
    fill: red;
}

.tyres-diagram-wheel.rotate-from{
    fill: #ff9000;
    cursor: default;
    stroke-width: 3 !important;
}

.rotate-from-display{
    background-color: #ff9000;
    padding: 5px;
    font-weight: 600;
    color: #fefbf6;
}

.tyres-diagram-wheel.rotate-to{
    fill: #31e531;
}

.tyres-diagram-wheel.rotate-to.chosen{
    fill: #05aaf7;
    cursor: default;
    stroke-width: 3 !important;
}

.tyres-diagram-wheel.rotate-to.not-avail{
    fill: #fa0c0c;
    cursor: default;
    stroke-width: 3 !important;
}

.rotate-to-chosen-display{
    background-color: #05aaf7;
    padding: 5px;
    font-weight: 600;
    color: #f6f9fb;
}

.tyres-diagram-arrow,
.tyres-diagram-axle {
    fill: rgb(224, 224, 224);
}

/* ************ SVG Ends ************ */


/* ************ Loading *************** */
.data-loading {
    height: 40px;
    width: 100%;
    background-image: url('../images/furn/ajax_loader.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.data-loading--fixed {
    position: fixed;
    width: 40px;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
}

/* Start mediaGallery Styling */

.mediaGallery {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    /* negative margins used for creating a 'gutter' effect between flex-items. */
    margin: 0 -0.3em 0.3em -0.3em;
}

.mediaGallery a {
	/* Note: We don't use shorthand 'flex' property because IE11 doesn't support the calc function as a value. */
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: calc(50% - 0.6em);
	width: 225px;
	height: 100px;
    margin: 0.3em;

	position: relative;
    border-radius: 0.3em;
    border: 1px solid rgba(31, 50, 80, 0.32);
	display: inline-block;
    overflow: hidden;
}

.mediaGallery a.non-image {
    text-align: center;
    background-color: #fff;
    background-image: url(../images/misc/document-preview.png);
    background-repeat: no-repeat;
    background-position: center;
    word-wrap: break-word;
    color: #1f1f1f;
    padding-top: 40px;
}

.popup-overlay .mediaGallery a {
    width: 174px;
    height: 120px;
}

.mediaGallery img, .mediaGallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mediaGallery a:hover {
	border-bottom: initial;
	opacity: 0.7;
}

.mediaGallery .defaultItemTitle {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: white;
    background: #1f3250;
    opacity: .8;
}

.mediaGallery .defaultItemIcon {
	width: 15px;
    position: absolute;
    right: 3px;
	top: 1px;
}

.mediaGalleryItem img,
.mediaGalleryItem video {
	max-width: inherit;
	max-height: 99%;
}

.mediaGalleryItem .right-small {
	right: 0;
}
.mediaGalleryItem .left-small {
	left: 0;
}

.mediaGalleryItem > div {
    position: relative;
    height: 600px;
    width: 100%;
    /*! max-width: 900px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-button {
    position: absolute;
    top: calc(50% - 30px);
    height: 60px;
    width: 40px;
    margin: 0.3em;
    opacity: 0.7;
    z-index: 1;
}


/* End mediaGallery Styling */

.signature > canvas {
    background-color: white;
}

.address {
	padding-left: 15px;
}

fieldset.full > .address {
	padding-left: 230px;
}

fieldset.full > .address > .link-base {
	margin-left: 0px;
}


/* Start Map Styling */

.map-display {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.pac-target-input {
	flex-grow : 0;
}

.address-map-display {
    flex-direction: row;
}

.address-list {
    flex: 0 1 200px;
}

.bynx-styled-map {
    flex: 1 1 0px;
    position: relative;
    overflow: hidden;
    margin: 0.6em;
}

.bynx-map {
    height: 100%;
    min-height: 400px;
}

/* End Map Styling */

/* Start Checklist Styling */

.checklists {
    margin-bottom: 0.6em;
}

.checklist {
    margin-bottom: 0.6em;
}

/* drivers checklist title */
.checklist > span {
    font-weight: bold;
    width: 194px;
    color: #666;
    display: inline-block;
    text-transform: capitalize;
    vertical-align: middle;
    margin: 0.6em 0;
}

/* layout - item: whole row, left: question, right: buttons, integer */
.checklist__item > .field-base__label-container > .field-base__label {
    font-weight: normal;
    margin-right: 2em;
}
@media (min-width: 650px) {
	.checklist__item {
	    width: 100%;
	    padding: 3px 0;
	    max-width: none;
	}
	.checklist__item > .field-base__label-container {
	    justify-content: flex-start;
	    flex: 1 1 0px;
	    text-align: left;
	    align-items: flex-start;
	    max-height: none;
	}
	.checklist__item > .field-base__control-container {
	    justify-content: flex-end;
	    flex: 0 0 300px;
	    align-items: flex-start;
	    width: auto;
	}
	.checklist__item.disabled > .field-base__control-container {
		flex: 0 0 auto;
	}
}
@media (max-width: 650px) {
	.checklist__item {
	    width: 100%;
	    padding: 3px 0;
	    max-width: none;
	    flex-wrap: wrap;
	}
	.checklist__item > .field-base__label-container {
	    justify-content: flex-start;
	    flex: 1 1 auto;
	    text-align: left;
	    align-items: flex-start;
	    max-height: none;
	    margin-bottom: 0.3em;
	}
	.checklist__item > .field-base__control-container {
	    justify-content: flex-end;
	    flex: 1 1 auto;
	    align-items: flex-start;
	    width: auto;
	}
}

/* drivers checklists only */
.checklist .checklist__item {
	border: 1px solid #bfbfbf;
	border-width: 1px 0 0 0;
}

/* remove the standard radio circle */
.checklist__item input[type="radio"] {
    position: absolute !important;
    left: -999px !important;
}

/* checklist button group */
.checklist__item .radio-select  {
    border: 1px solid rgb(201, 201, 201);
    border-radius: 0.3em;
    overflow: hidden;
}
.checklist__item.enabled .radio-select {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
}
.checklist__item.enabled .radio-select:focus-within {
    border-color: rgb(110, 147, 211);
    border-radius: 0.4em;
    box-shadow: inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(110, 147, 211, 0.23);
}

/* checklist buttons */
.checklist__item .radio-select > label {
    margin: 0;
    padding: 0;
    width: 80px;
    height: 2.4em;
    line-height: 2.4em;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background-color: RGB(236, 236, 236);
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.checklist__item.enabled .radio-select > label {
    color: #333;
}
.checklist__item.disabled .radio-select > label {
    opacity: 0.6;
}
.checklist__item.enabled .radio-select > label:hover {
    box-shadow: inset 0px 0px 5px #0505054d;
    cursor: pointer;
}
.checklist__item .radio-select > label:first-child {
	border-right: 1px solid rgb(201, 201, 201);
}
.checklist__item .radio-select > label:nth-child(2) {
	border-right: 1px solid rgb(201, 201, 201);
}
.checklist__item .radio-select > label:last-child {
	border: none;
}

/* validation error */
.error.checklist__item .radio-select {
    border: 1px solid rgb(246, 167, 167);
    padding: 0;
}
.error.checklist__item .radio-select > label {
	background-color: rgb(255, 239, 239);
}

/* boolean yes/no */
.checklist__item--positive .radio-select > label:first-child {
    background-color: #00b761;
    color: rgba(255, 255, 255, .9) !important;;
    opacity: 1;
}
.checklist__item--positive.disabled .radio-select > label:last-child {
    display: none;
}

.checklist__item--negative .radio-select > label:last-child {
    background-color: #f67335;
    color: rgba(255, 255, 255, .9) !important;;
    opacity: 1;
}
.checklist__item--negative.disabled .radio-select > label:first-child {
    display: none;
}

/* boolean yes/no/not applicable */
.checklist__item--notapplicable .radio-select > label:first-child {
    background-color: #0099ff;
    color: rgba(255, 255, 255, .9) !important;;
    opacity: 1;
}
.checklist__item--notapplicable.disabled .radio-select > label:nth-child(2) {
    display: none;
}
.checklist__item--notapplicable.disabled .radio-select > label:last-child {
    display: none;
}

.checklist__item--pos--with-na .radio-select > label:nth-child(2) {
    background-color: #00b761;
    color: rgba(255, 255, 255, .9) !important;;
    opacity: 1;
}
.checklist__item--pos--with-na.disabled .radio-select > label:first-child {
    display: none;
}
.checklist__item--pos--with-na.disabled .radio-select > label:last-child {
    display: none;
}

.checklist__item--neg--with-na .radio-select > label:last-child {
    background-color: #f67335;
    color: rgba(255, 255, 255, .9) !important;;
    opacity: 1;
}
.checklist__item--neg--with-na.disabled .radio-select > label:nth-child(2) {
    display: none;
}
.checklist__item--neg--with-na.disabled .radio-select > label:first-child {
    display: none;
}

/* checklist standalone button and within integer not applicable */
.checklist__integer__na--button {
    padding: 0.5em;
    width: 80px;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background-color: RGB(236, 236, 236);
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
    border: 1px solid rgb(201, 201, 201);
    border-radius: 0.3em;
    cursor: auto;
}

.checklist__integer__na--button:focus {
	box-shadow: inset 0px 0px 2px #05054d;
}

.checklist__integer__na--button.integer-group {
	margin: 0;
	border: none;
	border-right: 1px solid rgb(201, 201, 201);
	border-radius: 0.3em 0 0 0.3em;
}

/* button values when read-only */
.checklist__integer__na--button.notapplicable {
	background-color: #0099ff !important;  /*not applicable*/
	color: rgba(255, 255, 255, .9) !important;
	opacity: 1;
}

.checklist__integer__na--button.positive {
	background-color: #00b761 !important;  /*positive*/
	color: rgba(255, 255, 255, .9) !important;
	opacity: 1;
}

.checklist__integer__na--button.negative {
	background-color: #f67335 !important;  /*negative*/
	color: rgba(255, 255, 255, .9) !important;
	opacity: 1;
}

/* checklist integer group */
.checklist__integer__layer {
    border: 1px solid rgb(201, 201, 201);
    border-radius: 0.3em;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
}

.checklist__integer__layer.enabled {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
}

.checklist__integer__layer.enabled:focus-within {
    border-color: rgb(110, 147, 211);
    border-radius: 0.4em;
    box-shadow: inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(110, 147, 211, 0.23);
}

/* checklist integer field */
.checklist__integer__input {
    width: 80px;
    max-width: 80px;
    box-sizing: border-box;
    border: 1px solid rgb(190, 190, 190);
    padding: 0.5em;
    text-align: right;
    border-radius: 0.3em;
    background-color: white;
    -webkit-transition: box-shadow 0.3s ease, border-color 0.3s ease;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

/* checklist string field */
.checklist__string__input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgb(190, 190, 190);
    padding: 0.5em;
    text-align: left;
    border-radius: 0.3em;
    background-color: white;
    -webkit-transition: box-shadow 0.3s ease, border-color 0.3s ease;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.checklist__integer__input.enabled {
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
}

.checklist__integer__input.integer-group {
	border: none;
	-moz-user-select: none;
    user-select: none;
}

.checklist__integer__input.integer-group:focus {
	outline: none;
	border-radius: 0 0.3em 0.3em 0;
}

/* validation error */
.error .checklist__integer__layer.enabled {
    border: 1px solid rgb(246, 167, 167);
}
.error .checklist__integer__na--button {
	background-color: rgb(255, 239, 239);
}

/* End Checklist Styling */

/* Begin Coordinates Styling */

.coordinates-widget {
	display: flex;
}

/* End Coordinates Styling */

/* Begin Vehicle Advert Styling */

.vehicle-sale-adverts > div > * + * {
    margin-top: 0.5em;
}

.vehicle-sale-advert {
    /* Positioning */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
            flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;

    height: 120px;
    padding: 0;

    /* Styling */
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgb(227, 227, 227);
    background-color: rgb(248, 248, 248);
    color: rgb(31, 50, 80);
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

.vehicle-sale-advert__picture-container {
    width: 160px;
    min-width: 160px;
    height: 120px;
    position: relative;
    overflow: hidden;
}

.vehicle-sale-advert__picture-reserved {
    position: absolute;
    width: inherit;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: white;
    background-color: rgba(31, 50, 80, 0.8);
}

.vehicle-sale-advert__picture {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.vehicle-sale-advert__picture--fallback {
    object-fit: scale-down;
    filter: opacity(10%);
    width: 100%;
    height: 100%;
}

.vehicle-sale-advert__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 10px 5px;
    overflow: hidden;
}

.vehicle-sale-advert__title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.vehicle-sale-advert__description 
{
    font-size: 13px;
    text-align: center;
}

.vehicle-sale-advert__description-item-seperator {
    display: inline-block;
}
.vehicle-sale-advert__description-item-seperator:after {
    content: ' \2022  ';
    white-space: pre;
}

.vehicle-sale-advert__small-description 
{
    font-size: 12px;
    text-align: center;
}

.vehicle-sale-advert__auction
{
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.vehicle-sale-advert__auction-image {
    object-fit: cover;
    width: 20px;
    height: 20px;
    margin-left: 1em;
}

.vehicle-sale-advert__timestamp-reserved { font-weight: bold; font-style: italic; }

.vehicle-sale-advert__secondary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 10px 2px;
    max-width: 160px;
    min-width: 160px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.vehicle-sale-advert__price {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
}

.vehicle-sale-advert__buttons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.vehicle-sale-advert__button {
    min-width: 50%;
    background-color: unset;
    border: 1px solid rgba(0,0,0,0);
    color: rgb(52, 163, 232);
    border-radius: 6px;
    cursor: pointer;
    border: unset !important;
    text-align: center;
    flex-grow: 1;
    padding: 3px;
}

.vehicle-sale-advert__button:hover  {
    text-decoration: underline;
}

.vehicle-sale-advert__more-to-load {
    box-sizing: border-box !important;;

    margin: 0;
    text-align: center;

    border-radius: 4px;
    border: 1px solid rgb(227, 227, 227);

    background-color: rgb(243, 243, 243);
    height: 40px;
    display: block;
    margin: 20px;
    height: 40px;
}

.vehicle-sale-advert__more-to-load-link {
    display: block;
    line-height: 40px; /* Needs to match the parent box size */
}

.vehicle-sale-advert--inserted {
    animation: vehicle-advert-entry 0.5s forwards ease-in;
}

.vehicle-sale-advert__highlighted
{
	font-size: 13px;
    text-align: center;
    background-color: rgb(235, 225, 252);
    padding: 5px;
    border-radius: 5px;
}

@keyframes vehicle-advert-entry {
    0% {
        opacity: 0;
    }
}


/* End Vehicle Advert Styling */

.session-expiry-popup { z-index: 9999 !important; }

/* big button panel styling */
.big-button 
{
    box-sizing: border-box;
    margin-bottom: 10px;
}

.big-button > div {
    border-radius: 4px;
    background-color: #F3F3F3;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.big-button.disabled > div {
    cursor: default;
    box-shadow: unset;
    background-color: rgb(248, 248, 248) !important;
}

.big-button .text {
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
    padding: 10px 5px 10px 0px;
    margin-right: 5px;
}
/* end big button panel styling */

.big-button .sales-basket {
    background-color: #5AB788;
}

.big-button .sales-basket-image {
    width: 40px;
    height: 40px;
    background-image: url('../images/misc/sales-basket.svg');
    background-repeat: no-repeat;
    background-size: 40px;
}

.big-button .outstanding-purchases {
    background-color: #A3D0FA;
}

/* Start - Charts Styling */
.chart-panel {
    border-radius: 0.3em;
    overflow: hidden;
    border: 1px solid rgb(190, 190, 190);
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    margin-bottom: 0.6em;
}
.chart-panel > div {
    max-width: 685px;
}

/* End - Charts Styling */

/* Start - Message Styling */

.msg { /* The container for messages */
    margin-bottom: 0.6em;
}

.msg > .msg-block + .msg-block {
	margin-top: 0.3em;
}

.tooltip-text,
.msg-block {
	background-color: white;
    border: 1px solid rgba(60, 60, 60, 0.2);
    border-radius: 0.3em;
    padding: 1em;

    -webkit-box-shadow:  0px 1px 4px 1px rgb(219, 219, 219);
    box-shadow: 0px 1px 4px 1px rgba(183, 183, 183, 0.42);
    background-size: 0;

    background-color: rgb(213, 240, 255);
    color: rgb(22, 37, 59);
    border-color: rgb(100, 199, 255);
}

.msg-block > ul {
    list-style: outside disc;
}

.msg-block > ul > li {
    margin-left: 1em;
}

.msg-block > h3 {
    font-weight: 600;
    font-size: 1em;
    text-transform: none;
}
.msg-block > * + * {
    margin-top: 0.3em;
}

.tooltip-text.invalid-bynx,
.msg-block.invalid-bynx {
    background-color: rgb(255, 221, 201);
    color: rgb(49, 48, 33);
    border-color: rgb(255, 153, 92);
}

.tooltip-text.highlight-bynx,
.msg-block.highlight-bynx {
    background-color: rgb(235, 225, 252);
    color: rgb(44, 40, 69);
    border-color: rgb(165, 118, 244);
}

.tooltip-text.warning-bynx,
.msg-block.warning-bynx {
    background-color: rgb(255, 253, 208);
    color: rgb(68, 48, 28);
    border-color: rgb(213, 206, 69);
}

.tooltip-text.error-bynx,
.msg-block.error-bynx {
    background-color: rgb(255, 208, 208);
    color: rgb(31, 9, 9);
    border-color: rgb(241, 106, 84);
}

.tooltip-text.success-bynx,
.msg-block.success-bynx {
    background-color: rgb(193, 244, 193);
    color: rgb(12, 15, 12);
	border-color: rgb(127, 209, 127);
}

.tooltip-text.info-bynx,
.msg-block.info-bynx {
    background-color: rgb(213, 240, 255);
    color: rgb(22, 37, 59);
    z-index: 100;
    border-color: rgb(100, 199, 255);
}

.message-popup-root {
    position: fixed !important;
    z-index: 1000;
}

.tooltip-retain-text {
	display: block;
    font-size: 0.9em;
    font-style: italic;
    text-decoration: underline;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.6em;
}

/* End - Message Styling */

/* Start - Headings Styling */


.heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
    min-height: 45px;
}

/* IE11 vertical alignment workaround. see: https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042*/
.heading:after {
    content: '';
    display: block;
    min-height: inherit;
    font-size: 0;
}

.heading__primary {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}

.heading__primary > * + * {
    margin-left: 2em;
}

.heading__title {
    font-weight: 400;
    font-size: 2.4em;
    letter-spacing: 0;
    line-height: normal;
    margin: 0;
    padding: 0;
	color: rgb(31, 50, 80);
    align-self: center;
}

.heading__title2 {
    font-weight: 600;
	font-size: 1.2em;
	line-height: 2.4em;
}

.heading__primary_items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.heading__primary_items > * + * {
    margin-top: 0.5em;
}

.buttons-row {
    display: flex;
}
.buttons-row > * {
    flex: 1 1 auto;
}
.buttons-row > * + * {
    margin-left: 0.3em;
}

.refresh-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.refresh-item > * + * {
    margin-left: 1em;
}
.refresh-item > button {
    flex-shrink: 0;
}
.refresh-item > div { /* TODO CM Remove fix */
    width: 100%;
    display: flex;
    align-items: center;
}

/* End - Headings Styling */


.dynamic-detail__header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dynamic-detail__header > .toggle-button {
    padding: 0 0.8em;
    cursor: pointer;
    flex-shrink: 0;
}
.dynamic-detail__header > .toggle-button > img {
    display: block;
    height: 25px;
}

.dynamic-detail__detail {
	margin-top: 0.5em;
}

/* Start - HighChart */
.chart-panel text {
    /* overrides the font programatically set by the component */
    font-size: 0.9em !important;
    font-family: Arial, sans-serif !important;
}
.chart-panel .highcharts-title {
    font-size: 1em !important;
}
.chart-panel .highcharts-container {
    margin: 0 auto !important;
}


.chart-panel .highcharts-text-shadow {
    display: none; /* Fixes IE by removing that white shadow */
}
/* End - HighCharts */


/* ************ Split bar Start **************** */
div.panel div.split-field-set {
    width: 100%;
    height: 10px;
    padding: 0px !important;
    border-radius: 0.3em;
    overflow: hidden;
    margin-bottom: 0.3em;
}

div.panel div.split-field-set div {
    height: inherit;
    margin: 0;
    width: auto;
}
div.panel .split-field-set div label:before {
    content: ' ';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 4px;
}
div.panel div.split-field-set div,
.split-field-set > div + div label:before {
    background-image: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAKABEDAREAAhEBAxEB/8QAhgAAAwEAAAAAAAAAAAAAAAAAAQQFCQEAAgMBAAAAAAAAAAAAAAAAAgMEBQcJEAAAAgUHDQAAAAAAAAAAAAABAwACEjIEITGBQgUHNxFhcZGxMxQk1AZWF5cRAAADAwgKAwAAAAAAAAAAAAABAwIEBRExQRLSQ3OTIZEycpJTFDUGB1WVFv/aAAwDAQACEQMRAD8AETe1EQ6rBdvmCYIZJC4MWdPLyjsTDCXfz0mq3JvGODacd9gKHWaiURq46loKQ15loHLNr9xngpO7CA1mAOHQmnh+KZRTiMNU8k88YKRmJRGtjqWhT9mH+QL6oLp0Dqn/AJimsxG/Sewfk4lnqWhnaZvFsQnq89KWZTXQ1ZnYLtcwrquBiC7VmoQKbsRDp7YE/pKHkhv1I//Z');
    background-repeat: repeat-x;
    background-position: left top;
}
div.panel div.split-field-set,
.split-field-set > div + div + div label:before {
    /* this selector pattern is supported by ie8 */
    background-image: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAKABEDAREAAhEBAxEB/8QAhQAAAwEAAAAAAAAAAAAAAAAAAwUIBAEAAQUBAAAAAAAAAAAAAAAAAgEDBAcIChAAAAMDBg8AAAAAAAAAAAAAATEDAAIFESGBEjIEQWFxIpITI0Ok1FWVBgcXEQABAgMECAcAAAAAAAAAAAABAAIxAwURIUGRUXGhMnKSBDTRElKTFJQV/9oADAMBAAIRAxEAPwCDF/ZjiYVE4xERenCaI3yR3JtzbJQ6WcYk5roYmV+mtua2XbwjwWZDzwFR1ikZiVU5BiV8zuIJiPTzhAm3WmpdXpzja5rPLwi/YmH0BDqsQ7le+YYPjT9JzKk/tUv0S+RqkYbe7pMsONrAbAbiyBM3ndzEwhHBMHbDtgqTFh5FIGHdIGgy+2g+2v/Z');
    background-repeat: repeat-x;
    background-position: center center;
}
/* ************ Split bar End **************** */


/* Start - Notifications */

.notification {
    background-color: rgb(255, 255, 255);
    padding: 0.3em 0.6em;
    border: 1px solid rgba(60, 60, 60, 0.2);
    border-radius: 0.3em;
-webkit-box-shadow: 0px 1px 4px 1px rgb(219, 219, 219);
box-shadow: 0px 1px 4px 1px rgba(183, 183, 183, 0.42);
    border-left: 3px solid rgb(31, 50, 80);
    margin: 0 -0.3em;
    margin-bottom: 0.3em;
}

.notification-header {
    display: flex;
    justify-content: space-between;
}

.notification-link {
    font-size: 1.1em;
}

.past-time {
    font-style: italic;
    color: rgb(93, 93, 93);
    font-size: 0.9em;
}

.notification > span {
    padding: 0.3em 0;
    display: block;
    font-size: 1em;
}

/* End - Notifications */

/* Start - Schedule */

/* Schedule */
.bring-to-front { z-index: 99;}

.schedule {
    position: relative;
}
.schedule-headings {
    width: 100%;
}

.schedule-titles {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.schedule-title {
    display: table-cell;
    height: 37px;
    vertical-align: middle;
}

.schedule-titles.selectable .tooltip-text {
    left: 90px;
    top: 20px;
}

.schedule-titles.selectable .schedule-title {
    display: inline;
}

.schedule-title span {
    padding-left: 5px;
    display: inline-block;
}

.schedule-entry {
    position: absolute;
    border: 1px solid black;

    top: 11px;
    height: 15px;
}

.orange-entry {
    background-color: #f8cf80;
    border-color: #d99d2b;
}

.blue-entry {
    background-color: #a3d0fa;
    border-color: #5e9ad1;
}
.green-entry {
    background-color: #b9edb9;
    border-color: #6cc46c;
}
.red-entry {
    background-color: #e49797;
    border-color: #d25252;
}


.schedule-row {
    position: relative;
    width: 932px;
    height: auto;
    border-bottom: 1px solid #CCCCCC;
}

.schedule-column {
    position: absolute;
    background-image: none;
    background-repeat: repeat;
    background-position: 0 0;
    background-color: rgba(100, 100, 100, 0.2);
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 2;
    opacity: 0.6;
}

.schedule-row button {
    margin-top: 4px;
    margin-bottom: 4px;
}

.schedule-heading {
    display: inline-block;
    text-align: center;
    font-weight: bold;
}
.schedule-no-records {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    text-align: center;
}
/* End - Schedule */

/* Start - Util Animations */
.fade-in {
    animation: fadeIn 0.2 ease-in;
}

@keyframes fadeIn {
    0% {
        opacity:0
    }
    100% {
        opacity:1;
    }
}

.fade-out {
    animation: fadeOut 0.2s ease-out;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* End - Util Animation */

/* *** tree starts *** Uses same HTML as in previous builds (inc, blank.gif!) */
.relationship-tree li span {
	color: rgb(66, 133, 244);
}

.relationship-tree li :not(.active) {
	cursor: pointer;
}

.relationship-tree li {
	display: block;
}

.relationship-tree li .active {
	text-decoration: none;
	color: #1f1f1f;
}

.relationship-tree li .active:before {
    content: url('../images/misc/row-select.png');
}

span.child-setup {
	display: inline-block;
	width: 92%;
}

span.setup-indicator {
	display: inline-block;
	width: 92%;
}

.child-indicator {
	background: url('../images/tree/indicator2.png') no-repeat;
}

.child-no-setup {
	background: url('../images/tree/indicator3.png') no-repeat;
}

.childless-indicator {
	background: url('../images/tree/none-indicator.png') no-repeat;
}

.alt {
	background: grey;
}

.relationship-tree,
.relationship-tree .relationship-tree {
	list-style: none;
	line-height: 1.6em;
	font-size: 1.0em;
	margin: 0 auto;
}

.tree-panel .relationship-tree .relationship-tree {
	margin: 0 10px;
}

.relationship-tree {
	margin: 1px;
}

.relationship-tree li .tree-node,
.relationship-tree li .tree-node span {
	height: 20px;
	display: inline-block;
    line-height: 12px;
}

.relationship-tree li .tree-node-icon {
	float: right;
	background-image: url('../images/tree/tree-sprite.png');
	background-repeat: no-repeat;
	background-position: right -40px;
	width: 42px;
	min-width: 42px;
    cursor: default;  /* cant be clicked on, info hover, may be redesigned in future */
}

.relationship-tree li .tree-node-icon.config {
	background-position: right 0;
}

.relationship-tree li .tree-node-icon.parent-child-config {
	background-position: right -20px;
}

.relationship-tree li .tree-node-icon.child-only-config {
	background-position: right -60px;
}

.relationship-tree > li > .tree-node > .name {
	width: 286px;
}

.relationship-tree li ul {
	padding-left: 10px;
}

.relationship-tree li ul > li > .tree-node > .name {
	width: 277px;
}

.relationship-tree li ul li ul {
	padding-left: 10px;
}

.relationship-tree li ul li ul > li > .tree-node > .name {
	width: 267px;
}

.relationship-tree li ul li ul li ul {
	padding-left: 10px;
}

.relationship-tree li ul li ul li ul > li > .tree-node > .name {
	width: 257px;
}

.relationship-tree li ul li ul li ul li ul {
	padding-left: 10px;
}

.relationship-tree li ul li ul li ul li ul > li > .tree-node > .name {
	width: 177px;
}

.relationship-tree .link-base {
    margin-right: 2px;
}

.expand,
.collapse {
	margin-right: 2px;
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	width: 10px;
	height: 10px;
}

.expand {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOhJREFUeNpitAueHMzAyNDNwMCgyIAJ7jP8ZyhlMPPuvNfYPvP/v3//MDBIHCTPoGlX+//Pnz//f/z4AcYg/rt37/4/e/bs/+vXr8F8lq9fvzD8/v0bjL98+coA4j969BhsFwcHJ5jP8uPnL4a/f/8yqFhVwh3iFjMLTB9ZV8IAkmdh+M/E8PPnH4abhzvBEuo2lQw3j7SD2R8+fGIAybOwsHACTWJm+PHjL1gCxP/2DcJmY+MG85nY2Xnvd/QtBgpwgvGd4x1wds/kJQwgeUYJldA8fgmLIgYGJnnMYPr38OOLE/0AAQYAIUyC7y3NB0YAAAAASUVORK5CYII=');
}

.collapse {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMpJREFUeNpitAueHMzAyNDNwMCgyIAJ7jP8ZyhlNPPuvOdtI6BYW56KoaK5czbD1iMf7jNo2tX+//Pnz/8fP35g4NevX/8HybN8/fqF4ffv32D85ctXFJM+ffrMAJJn+fHzF8Pfv38ZVKwqMaw7sq6EASTPwvCfieHnzz8MNw93Yij68OETA0ieiYWFE2gSMwM2wMbGzQCSZ2Jn573f0beY4c8fNjBmZ+eCs3smL2EAyTNKqITm8UtYFDEwMMljmvXv4ccXJ/oBAgwABPFp6Ew38bAAAAAASUVORK5CYII=');
	border: none !important;
	background-color: transparent;
}

.collapse {
	list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMpJREFUeNpitAueHMzAyNDNwMCgyIAJ7jP8ZyhlNPPuvOdtI6BYW56KoaK5czbD1iMf7jNo2tX+//Pnz/8fP35g4NevX/8HybN8/fqF4ffv32D85ctXFJM+ffrMAJJn+fHzF8Pfv38ZVKwqMaw7sq6EASTPwvCfieHnzz8MNw93Yij68OETA0ieiYWFE2gSMwM2wMbGzQCSZ2Jn573f0beY4c8fNjBmZ+eCs3smL2EAyTNKqITm8UtYFDEwMMljmvXv4ccXJ/oBAgwABPFp6Ew38bAAAAAASUVORK5CYII=');
}

.active {
	padding-top: 2px;
	color: #fff;
	font-weight: bold;
}

.relationship-tree ul {
	list-style: none;
	color: #000;
	margin: 0px -14px 0;
	padding: 0;
	display: block;
}

.relationship-tree ul li a {
	margin: 0;
	display: inline-block;
	width: 10px;
	height: 10px;
	clear: right;
	border-bottom: none !important;
}

.child {
	margin: 0;
	border-bottom: none !important;
}

.relationship-tree ul li img {
	border-bottom: none !important;
}

.panel .relationship-tree li a {
	display: inline-block;
	align-content: center;
}

.panel .relationship-tree li span {
	margin: 0;
}
/* *** tree ends *** */


.comparison-table {
	width:100%;
}

.comparison-table tr {
	height: 2em;
}

.comparison-table td {
	padding: 2px;
	margin: 2px;
	text-align: center;
}

.category-heading {
	text-align: left;
	font-weight: bold;
}

.category-detail {
	text-align: right;
}

.results-heading {
	font-weight: bold;
}

.very-short-field {
	width: 70px;
}

/* start: table first column fixed width */
.fixed-first-col-panel { margin-left: 150px; }

table.fixed-first-col td:first-child, table.fixed-first-col th:first-child
{
  position: absolute;
  width: 150px;
  left: 0px;
  top: auto;
  color: rgb(72, 72, 72);
  background-color: transparent;
}

table.fixed-first-col th:first-child
{
    font-weight: 600;
}
/* end: table first column fixed width */


/* start: count display panel */

.count-display-list
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin-bottom: 10px;
}

.count-display-list > li
{
    align-self: flex-start;
}

.count-display-panel 
{
    background-color: rgba(255,255,255,0.7);
    color: #000;
    cursor: pointer;
    height: 110px;
    width: 110px;

    border-radius: 5px;
    text-align: center;
    margin: 0.5em;
    padding: 0.8em;

    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.20);

    transition: box-shadow 0.1s ease-in;
    outline: none;
    overflow: hidden;
}

.count-display-panel:hover {
    transition: transform 0.15s ease-in, box-shadow 0.1s ease-in;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    color: #000;
    outline: none;
}

.count-display-panel.count-selected 
{
  border: 2px solid rgba(0, 0, 0, 0.7);
  color: #000;
  outline: none;
  background-color: rgb(235, 225, 252);
}

.count-display-panel > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.count-display-panel-count {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 3.0em;
}

.count-display-panel-heading {
    flex: 1 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* end: count display panel */

.odometer {
	margin-bottom: 0.6em;
}

form {
		margin-bottom: 0.6em;
}

/* Start - Job Job Item Fields */

.jji-field {
    display: flex;
    margin-bottom: 0.6em;
}
.jji-field:last-of-type {
	margin-bottom: 0;
}

.jji-field--label-container {
    flex: 4 1 0;
    padding-right: 0.3em;

    display: flex;
    flex-direction: column;
}
.jji-field--label-container > .currency {
    font-weight: 600;
}

.jji-field--action-container {
    flex: 3 0 0;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -0.1em 0.3em;
}

.jji-field--action-container > * {
    margin: 0.1em 0.3em;
}
.jji-field--action-container > *:last-child {
    margin-right: 0;
}

/* End - Job Job Item Fields */

/* Image popup display */
.img-display {
	width: 100%;
	position: fixed;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #222222;
	z-index: 112;
	max-height:90%;
	left: 0px;
}


.img-display > div > img {
	width: 100%;
	height: 100%;
}


.img-display > button {
    width: 10vw;
    height: 100%;
    background-size: 23px;
}

.img-display > .cross-white {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    background-size: 23px;
    margin: 10px;
	position:fixed;
	right:0px;
	top:0px;
}
.img-display > div > button {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    background-size: 23px;
    margin: 10px;
}

.img-display > div > .gwt-InlineHTML > .tooltip-icon
{
    width: 34px;
    height: 34px;
    vertical-align: middle;
    overflow: visible;
    background-size: 34px;
    cursor: pointer;
    background-image: url(../images/misc/big-info.png);
}
/* Mandatory button */
button.field-base--mandatory:before {
    content: '*';
    margin-right: 0.2em;
    color: red;
}

/* Image Display Field */
div.image-display-field {
	width: 100%;
    max-height: 200px;
    overflow: hidden;
}


div.image-display-field {
	width: 100%;
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.image-display-field > .trash-small {
	bottom: 5px;
	right: 5px;
	position: absolute;
}

.select-list
{
	padding: 15px;
}

.long-label > .field-base > .field-base__label-container {
    flex: 0 0 50%;
}

.wide-label-container { flex: 0 0 50%; }

#HeaderPanel{
    margin-bottom:1em;
}

#ApplicationPanel{
    padding-top:0;
}

.breadcrumb-root{
   background-color:rgb(83, 133, 166);
   padding-top:1.5em;
   padding-bottom:1.5em; 
   max-width:unset;
}