/* Minification failed. Returning unminified contents. (53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (75,26): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (75,30): run-time error CSS1046: Expect comma, found '-' (75,31): run-time error CSS1047: Expected number or percentage value in rgb function, found '-scroll-bar-active' (75,49): run-time error CSS1046: Expect comma, found ')' (75,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (80,33): run-time error CSS1039: Token not allowed after unary operator: '-scroll-bar-active' (85,33): run-time error CSS1039: Token not allowed after unary operator: '-scroll-bar-active' (90,33): run-time error CSS1039: Token not allowed after unary operator: '-theme-bg-secondary' (94,33): run-time error CSS1039: Token not allowed after unary operator: '-theme-bg-secondary' (110,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family' (119,22): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (122,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (125,22): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color-secondary' (128,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color-secondary' (135,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (149,22): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (153,22): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (168,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (168,31): run-time error CSS1046: Expect comma, found '-' (168,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (168,55): run-time error CSS1046: Expect comma, found ')' (168,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (243,22): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (244,44): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (351,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (427,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (585,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (631,16): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (631,20): run-time error CSS1046: Expect comma, found '-' (631,21): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (631,44): run-time error CSS1046: Expect comma, found ')' (631,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1265,19): run-time error CSS1046: Expect comma, found '50' (1265,24): run-time error CSS1046: Expect comma, found ')' (1277,31): run-time error CSS1046: Expect comma, found '253' (1277,38): run-time error CSS1046: Expect comma, found ')' (1280,20): run-time error CSS1046: Expect comma, found '253' (1280,27): run-time error CSS1046: Expect comma, found ')' (1289,31): run-time error CSS1046: Expect comma, found '235' (1289,38): run-time error CSS1046: Expect comma, found ')' (1299,31): run-time error CSS1046: Expect comma, found '150' (1299,38): run-time error CSS1046: Expect comma, found ')' (1371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1374,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1378,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1383,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1386,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1387,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1388,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1389,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1390,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1421,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1433,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1440,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1445,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1451,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1480,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1491,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1494,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1521,37): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1564,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1568,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1590,20): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (1590,24): run-time error CSS1046: Expect comma, found '-' (1590,25): run-time error CSS1047: Expected number or percentage value in rgb function, found '-help-colour' (1590,37): run-time error CSS1046: Expect comma, found ')' (1590,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1600,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (1600,31): run-time error CSS1046: Expect comma, found '-' (1600,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-help-colour' (1600,44): run-time error CSS1046: Expect comma, found ')' (1600,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1615,27): run-time error CSS1039: Token not allowed after unary operator: '-help-colour' (1691,57): run-time error CSS1039: Token not allowed after unary operator: '-busy-color' (1691,89): run-time error CSS1039: Token not allowed after unary operator: '-busy-color' (1691,121): run-time error CSS1039: Token not allowed after unary operator: '-busy-color' (1691,153): run-time error CSS1039: Token not allowed after unary operator: '-busy-color' (1691,185): run-time error CSS1039: Token not allowed after unary operator: '-busy-color' (1691,217): run-time error CSS1039: Token not allowed after unary operator: '-busy-color' (1727,22): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow' (1734,28): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (1734,32): run-time error CSS1046: Expect comma, found '-' (1734,33): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (1734,56): run-time error CSS1046: Expect comma, found ')' (1734,57): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1741,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (1741,31): run-time error CSS1046: Expect comma, found '-' (1741,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (1741,55): run-time error CSS1046: Expect comma, found ')' (1741,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1824,29): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1827,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1854,29): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (1885,21): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (1885,25): run-time error CSS1046: Expect comma, found '-' (1885,26): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (1885,49): run-time error CSS1046: Expect comma, found ')' (1885,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1931,27): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (1932,22): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow' (1995,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (1995,31): run-time error CSS1046: Expect comma, found '-' (1995,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (1995,55): run-time error CSS1046: Expect comma, found ')' (1995,58): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (2038,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2132,21): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (2132,25): run-time error CSS1046: Expect comma, found '-' (2132,26): run-time error CSS1047: Expected number or percentage value in rgb function, found '-bg' (2132,29): run-time error CSS1046: Expect comma, found ')' (2132,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (2141,33): run-time error CSS1039: Token not allowed after unary operator: '-bg-input' (2154,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (2154,31): run-time error CSS1046: Expect comma, found '-' (2154,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (2154,55): run-time error CSS1046: Expect comma, found ')' (2154,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (2170,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2173,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2176,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2185,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (2185,31): run-time error CSS1046: Expect comma, found '-' (2185,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (2185,55): run-time error CSS1046: Expect comma, found ')' (2185,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (2196,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2208,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2234,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2254,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2286,21): run-time error CSS1039: Token not allowed after unary operator: '-icon-color' (2289,49): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2289,113): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2289,176): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2289,240): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2294,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2297,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2300,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2308,61): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2308,83): run-time error CSS1039: Token not allowed after unary operator: '-bg-pinstripe' (2308,119): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2328,22): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2354,27): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2363,22): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2512,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (2512,31): run-time error CSS1046: Expect comma, found '-' (2512,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (2512,55): run-time error CSS1046: Expect comma, found ')' (2512,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (2515,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (2515,31): run-time error CSS1046: Expect comma, found '-' (2515,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (2515,55): run-time error CSS1046: Expect comma, found ')' (2515,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (2519,22): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2533,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2553,29): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2556,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2598,33): run-time error CSS1039: Token not allowed after unary operator: '-agency-highlight-color' (2624,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2626,27): run-time error CSS1047: Expected number or percentage value in rgb function, found 'var(' (2626,31): run-time error CSS1046: Expect comma, found '-' (2626,32): run-time error CSS1047: Expected number or percentage value in rgb function, found '-agency-highlight-color' (2626,55): run-time error CSS1046: Expect comma, found ')' (2626,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700&display=swap'); @media screen { body, .ui-widget { font-size: 9.5pt; z-index: 500; } .printonly { display:none; } #logonInfoDiv label { color: #706f6f; width: 17ex; display: inline-block; clear: both; } .tabContainer { display: inline-block; width: 100%; box-sizing: border-box !important; } .tabContainer, .button, .buttonGroup a, .block, .tabStrip .tabSelector, ul.blocks li, ul#runner, #CommandBar, #logonInfoDiv #accountDetails ul, .dropdown a.button { background-color: #F4F4F4; border: 1px solid #D0D0D0; padding: 0.25em 1em; text-align: left; } .tabContainer { display: inline-block; width: 100%; box-sizing: border-box !important; } #pageWrapper { box-sizing: border-box; width: 100%; padding: 0 8px; /*min-width:1000px;*/ } td, th { border-bottom: 1px solid #d0d0d0; padding: 0.2em 0.5em 0.2em 0.5em; } } :root { --font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif; --busy-color: 90,90,90; --help-colour: 0, 96, 99; --box-shadow: rgb(0 0 0 / 14%) 0px 0px 7px 2px; --bg-normal: #e6e6e6; --bg-darker: 235,235,235; --highlight-color: 130, 18, 130; --button-color: 130, 18, 130; --button-hover-color: 100, 12, 100; --text-color: 0,0,0; --scroll-bar-inactive: 145, 146, 146; --scroll-bar-active: 188, 188, 188; --icon-color: 90, 90, 90; --icon-color-secondary: 224, 224, 224; --select-border: #777; --select-focus: blue; --select-arrow: var(--select-border); --agency-highlight-color: 156,74,120; } *, *:after, *:before { /*-ms-overflow-style: auto;*/ scrollbar-color: rgb(var(--scroll-bar-active)) ; scrollbar-width: thin; } *::-webkit-scrollbar-thumb, .scrollbarthumb::after { background-color: rgba(var(--scroll-bar-active),1); transition: all linear 0.1s; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--scroll-bar-active),1); transition: all linear 0.2s; } *::-webkit-scrollbar-track { background-color: rgba(var(--theme-bg-secondary),1); } *::-webkit-scrollbar-corner { background-color: rgba(var(--theme-bg-secondary),1); } *::-webkit-scrollbar { width: 10px; height: 10px; } body, html { padding: 0px; margin: 0px; width: 100%; } /* Font */ body, input, button, textarea, select, .ui-widget { font-family: var(--font-family); /*font-family: 'Myriad Pro', Calibri, 'Lucida Grande', Ubuntu, sans-serif;*/ } input[type=text], select, input[type=password] { border: 1px solid #CCC; border-radius: 2px; } .agency-primary-color { color: rgba(var(--agency-highlight-color)); } .agency-primary-background-color { background-color: rgba(var(--agency-highlight-color)); } .agency-secondary-color { color: rgba(var(--agency-highlight-color-secondary)); } .agency-secondary-background-color { background-color: rgba(var(--agency-highlight-color-secondary)); } .agency-bullet { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background-color: rgba(var(--agency-highlight-color),1); } p { /*font-family: Arial, Helvetica, sans-serif; display:flex;*/ } p svg { vertical-align: middle; } a, a:visited { text-decoration: none; color: rgba(var(--agency-highlight-color),1); display: inline-flex; } a:hover { color: rgba(var(--agency-highlight-color),0.7); } a > *:not(:last-child), a:visited > *:not(:last-child) { margin-right: 4px; } tr:nth-child(2n), tr.odd { background-color: #F5F5F5; } tr, tr.even { background-color: #F5F5F5; } table.rainbowZebra tr:nth-child(2n), table.brightlyColouredZebra tr.odd { background-color: rgb(var(--agency-highlight-color)); color: white; } .tabContainer, .block, #CommandBar { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #CommandBar:empty { display: none; } .block { margin-top: 1em; } .tabStrip { overflow: auto; overflow-y: hidden; padding: 10px 20px 0px 20px; margin: 0px; /*margin-top: 0.5em;*/ white-space: nowrap; border-bottom: none; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; display: flex; flex-direction: row; flex-wrap: wrap-reverse; } .tabStrip .tabSelector, .buttonGroup a, .button, th { background: rgb(235,235,235) url(images/gradient.png) top; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(235,235,235)), color-stop(0.9, rgb(254,254,254)) ); background-image: -o-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); } .tabStrip .tabSelector, .buttonGroup a, .button { color: #706f6f; text-decoration: none; min-width: 5ex; cursor: pointer; } .tabStrip .tabSelector { border-bottom: none; margin-right: 0.1em; display: inline-block; white-space: nowrap; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .tabStrip .tabSelector:hover, .buttonGroup a:hover, .button:hover { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(254,254,254)), color-stop(1.0, rgb(235,235,235)) ); background-image: -o-linear-gradient(bottom, rgb(254,254,254) 10%, rgb(235,235,235) 100%); background-image: -moz-linear-gradient(bottom, rgb(254,254,254) 10%, rgb(235,235,235) 100%); background-image: -webkit-linear-gradient(bottom, rgb(254,254,254) 10%, rgb(235,235,235) 100%); background-image: -ms-linear-gradient(bottom, rgb(254,254,254) 10%, rgb(235,235,235) 100%); background-image: linear-gradient(bottom, rgb(254,254,254) 10%, rgb(235,235,235) 100%); } .tabStrip .tabSelector.selectedTabItem { background: #FFF; color: rgba(var(--agency-highlight-color)); box-shadow: 0px 0px 10px 0px rgba(var(--agency-highlight-color)); } .fileExport { background-image:url(images/downloadFile_small.png); height:24px; width:24px; display:inline-block; background-repeat:no-repeat; content:""; } fieldset { border: none; border-top: 2px groove; margin: 43px 0 0 0; padding: 20px 0 0 6px; min-width: 0; position: relative; } fieldset legend { color: #706f6f; font-weight: bold; width: 0px; margin: 0px; padding: 0px; white-space: nowrap; position: absolute; top: -20px; } /*Legend before fieldset for Firefox*/ fieldset legend::after { content: ""; display: block; margin-top: 1.5em; } .image-border { border: 1px solid #d0d0d0; background-color: #d3d1d1; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } ul.blocks { padding: 0px; margin: 0px; display: flex; flex-wrap: wrap; } ul.blocks li { color: black; position: relative; display: flex; min-width: 235px; background: rgb(235,235,235); background-image: linear-gradient(bottom, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(235,235,235)), color-stop(0.9, rgb(254,254,254)) ); background-image: -o-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(254,254,254) 100%); border-radius: 4px; margin: 2px; padding: 3px 8px; } ul.blocks li:hover { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.9, rgb(235,235,235)), color-stop(0.1, rgb(254,254,254)) ); background-image: -o-linear-gradient(top, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -webkit-linear-gradient(top, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: -ms-linear-gradient(top, rgb(235,235,235) 0%, rgb(254,254,254) 100%); background-image: linear-gradient(top, rgb(235,235,235) 0%, rgb(254,254,254) 100%); } ul.blocks li a { color: #000; display: flex; align-items: center; width: 100%; } ul.blocks li a img { max-height: 35px; max-width: 46px; margin-right: 10px; } ul.blocks li a h3 { display: inline; line-height: 35px; padding: 0px; margin: 0px; font-size: 14px; font-weight: 400; } ul.blocks-column { flex-direction:column; flex-wrap:nowrap; } .buttonGroup a::after, .button::after { content: ""; display: block; width: 18px; background-color: rgba(var(--agency-highlight-color),1); background-image: url(images/edit.png); background-repeat: no-repeat; background-position: center center; position: absolute; right: 4px; top: 4px; bottom: 4px; border-radius: 3px; transition: transform 0.1s linear; transform: scale(0.8); } .buttonGroup a::after, .buttonGroup a, .button, .button::after { display: inline-block; line-height: 20px; vertical-align: middle; } .buttonGroup a:hover::after, .button:hover::after { transform:scale(1); } .buttonGroup a.go::after, .button.go::after { background-image: url(images/go.png); } .buttonGroup a.new::after, .button.new::after { background-image: url(images/new.png); } .buttonGroup a.remove::after, .button.remove::after { background-image: url(images/remove.png); } .buttonGroup a.save::after, .button.save::after { background-image: url(images/save.png); } .buttonGroup a.search::after, .button.search::after { background-image: url(images/search.png); } .buttonGroup a.export::after, .button.export::after { background-image: url(images/export.png); } .buttonGroup a.import::after, .button.import::after { background-image: url(images/import.png); } .buttonGroup a.approve::after, .button.approve::after { background-image: url(images/approve.png); } .buttonGroup a.copy::after, .button.copy::after { background-image: url(images/copy.png); } .buttonGroup a.resize::after, .button.resize::after { background-image: url(images/grow.png); } .grow .buttonGroup a.resize::after, .grow .button.resize::after { background-image: url(images/shrink.png); } .buttonGroup a.back::after, .button.back::after, .buttonGroup a.left::after, .button.left::after { background-image: url(images/back.png); } .buttonGroup a.attachment::after, .button.attachment::after { background-image: url(images/paperclip.png); } .buttonGroup a.rotatel::after, .button.rotatel::after { background-image: url(images/rotate-l.png); } .buttonGroup a.rotater::after, .button.rotater::after { background-image: url(images/rotate-r.png); } .buttonGroup a.delete::after, .button.delete::after { background-image: url(images/delete.png); background-color: #c50c00; } .dropbtn a::after, .dropbtn::after { content: ''; display: inline-block; height: 20px; width: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: rgba(var(--agency-highlight-color)); background-image: url(/Content/themes/IO/images/go.png); background-repeat: no-repeat; background-position: center center; vertical-align: middle; right: 4px; position: absolute; top: 5px; transform: rotate(90deg) } .button:disabled { opacity: 0.5; } .fileDownload { text-align:center; background-image: url(images/downloadFile.png); background-repeat:no-repeat; background-position: center top; padding-top: 50px; line-height:25px; } .button input { background: transparent; border: none; padding: 0px; margin: 0px; color: #706F6F; cursor: pointer; } .button.back { float: right; } #CommandBar { margin: 0.5em 0px; padding: 5px; padding-left: 40px; padding-right: 40px; /*height: 32px;*/ vertical-align: middle; } .buttonGroup { vertical-align: bottom; } .buttonGroup * { margin-right: 0px; /* height: 36px;*/ vertical-align: bottom; } .buttonGroup input { height: 32px; } .buttonGroup a, .button { box-sizing: border-box; position: relative; padding-left: 7px; padding-right: 28px; min-width: 8ex; border-radius: 4px; display: inline-block; margin: 0 0 3px 0; height: auto; overflow: hidden; } .buttonGroup a:empty, a.button:empty { min-width: 0; border-radius: 4px; width: 18px; height: 18px; padding: 4px; margin: 0px; } .buttonGroup a:nth-child(1), .buttonGroup .button:nth-child(1) { z-index: 20; } .buttonGroup a:nth-child(2), .buttonGroup .button:nth-child(2) { z-index: 19; } .buttonGroup a:nth-child(3), .buttonGroup .button:nth-child(3) { z-index: 18; } .buttonGroup a:nth-child(4), .buttonGroup .button:nth-child(4) { z-index: 17; } .buttonGroup a:nth-child(5), .buttonGroup .button:nth-child(5) { z-index: 16; } .buttonGroup a:nth-child(6), .buttonGroup .button:nth-child(6) { z-index: 15; } .buttonGroup a:nth-child(7), .buttonGroup .button:nth-child(7) { z-index: 14; } .buttonGroup a:nth-child(8), .buttonGroup .button:nth-child(8) { z-index: 13; } .buttonGroup a:nth-child(9), .buttonGroup .button:nth-child(9) { z-index: 12; } .buttonGroup a:nth-child(10), .buttonGroup .button:nth-child(10) { z-index: 11; } .buttonGroup a:nth-child(11), .buttonGroup .button:nth-child(11) { z-index: 10; } .buttonGroup a:nth-child(12), .buttonGroup .button:nth-child(12) { z-index: 9; } .buttonGroup a:nth-child(13), .buttonGroup .button:nth-child(13) { z-index: 8; } .buttonGroup a:nth-child(14), .buttonGroup .button:nth-child(14) { z-index: 7; } .buttonGroup a:nth-child(15), .buttonGroup .button:nth-child(15) { z-index: 6; } .buttonGroup a:nth-child(16), .buttonGroup .button:nth-child(16) { z-index: 5; } .buttonGroup a:nth-child(17), .buttonGroup .button:nth-child(17) { z-index: 4; } .buttonGroup a:nth-child(18), .buttonGroup .button:nth-child(18) { z-index: 3; } .buttonGroup a:nth-child(19), .buttonGroup .button:nth-child(19) { z-index: 2; } .buttonGroup a:nth-child(20), .buttonGroup .button:nth-child(20) { z-index: 1; } /*Prevent Highlight*/ .buttonGroup a, .button { -khtml-user-select: none; /* Safari old */ -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */ -o-user-select: none; user-select: none; } h1, h2 { padding: 0px; margin: 0.5em 0px; padding-left: 20px; position: relative; display:flex; } /*colour banner*/ h1, h2 { background: rgba(var(--agency-highlight-color)); /*#d163a1 url(images/gradient.png) center; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(156,74,120)), color-stop(0.9, rgb(209, 99, 161)) ); background-image: -o-linear-gradient(bottom, rgb(156,74,120) 0%, rgb(209, 99, 161) 90%); background-image: -moz-linear-gradient(bottom, rgb(156,74,120) 0%, rgb(209, 99, 161) 90%); background-image: -webkit-linear-gradient(bottom, rgb(156,74,120) 0%, rgb(209, 99, 161) 90%); background-image: -ms-linear-gradient(bottom, rgb(156,74,120) 0%, rgb(209, 99, 161) 90%); background-image: linear-gradient(bottom, rgb(156,74,120) 0%, rgb(209, 99, 161) 90%);*/ line-height: 2em; border: 1px solid #d0d0d0; color: white; font-weight: normal; font-size: 12pt; padding-left: 35px; } #body { display: block; } #body { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #body * { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } label { display: inline-block; width: 50%; margin-bottom: 5px; color: #6f6f6f; font-weight: 500; } #logonInfoDiv span, #logonInfoDiv a { color: rgb(var(--agency-highlight-color)); } #logonInfoDiv #accountDetails { display: inline; position: relative; } #logonInfoDiv #accountDetails ul { display: none; position: absolute; z-index: 1000; left: 0px; margin: 0px; margin-top: -0.6em; width: 200px; list-style-position: inside; } #logonInfoDiv #accountDetails:hover ul, #logonInfoDiv #accountDetails ul:hover { display: block; } #logonInfoDiv #loginName { padding-right: 15px; background: url(images/maximise.png) no-repeat 100% 50%; } img { border: none; } .column { width: 49%; padding: 0px; display: inline-block; vertical-align: top; } .float { float:left; } table { margin: 0em 1em; max-width: 100%; overflow: auto; border: 1px solid #d0d0d0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-collapse: collapse; } .table-100 { width: 100%; box-sizing: border-box; margin: 0; } div[data-role="grid"] table { margin: 0px; } .hidden { display: none; } /*TABLE SCROLLING*/ div.tableScroll { position: relative; overflow: auto; } div.tableScroll.tableScrollFixCol * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-y: hidden; } div.tableScroll > table { display: inline-block; max-width: 100%; overflow: auto; /*Only shows scrollbar if required*/ margin: 0px; } div.tableScroll.tableScrollFixCol > table { max-width: 90%; margin-left: 10%; } div.tableScroll.tableScrollFixCol > table tr > * { padding: 0px; margin: 0px; } div.tableScroll.tableScrollFixCol > table th > *:not(span), div.tableScroll.tableScrollFixCol > table td > *:not(span) { width: 130px!important; } div.tableScroll.tableScrollFixCol > table th > *, div.tableScroll.tableScrollFixCol > table td > * { height: 20px; /*36px;*/ overflow: hidden; display: inline-block; padding: 0ex 1ex; margin: 0px; } div.tableScroll.tableScrollFixCol table a.button::after { height: 16px; width: 16px; top: 0px; right: 0px; } div.tableScroll.tableScrollFixCol > table th > *, div.tableScroll.tableScrollFixCol > table td > span, div.tableScroll.tableScrollFixCol > table td > a { line-height: 20px; /*36px;*/ } div.tableScroll.tableScrollFixCol > table th > select, div.tableScroll.tableScrollFixCol > table td > select { padding-right: 0ex; } div.tableScroll.tableScrollFixCol > table td > input, div.tableScroll.tableScrollFixCol > table td > select, div.tableScroll.tableScrollFixCol > table td > textarea { border: none; } div.tableScroll.tableScrollFixCol > table tr td, div.tableScroll.tableScrollFixCol > table tr th { border: 1px solid #d0d0d0; } div.tableScroll.tableScrollFixCol > table tr td:first-child, div.tableScroll.tableScrollFixCol > table tr th:first-child { position: absolute; width: 10%; left: 1em; margin-left: -5px; margin-top: -1px; top: auto; overflow: hidden; } div.tableScroll.tableScrollFixCol > table tr td:first-child > *, div.tableScroll.tableScrollFixCol > table tr th:first-child > * { width: 100%!important; margin-top: 2px; height: 24px; /*38px;*/ position: relative; } /*label { display:block; }*/ .column input:not(.k-input), .column select, .column textarea, .formField { /*, */ display: inline-block; width: 45%; max-width: 45%; } .column table input:not(.k-input), .column table select, .column table textarea, table .formField { /*, */ display: inline-block; width: 100%; max-width: none; } .input-block { position: relative; width: 45%; display:inline-flex; } .input-block *:first-child { flex: 1 0; } input[type=number], .column .payeRef input { width: 10ex; } fieldset textarea { width: 95%; } /*.column input, .column select, .column textarea, .formField, fieldset textarea { display:block; width:90%; max-width:90%; }*/ .column table input[type=checkbox], .column input[type=checkbox] { display: inline; width: auto; } .addressBlock label { display: inline-block; width: 17ex; } .input-validation-error, .custom-input-validation-error, [data-groupval-sum-valid="invalid"], input.error, select.error { border-color: red; box-shadow: red 0px 0px 10px inset; } /* styles for validation helpers */ .field-validation-error { color: #b94a48; } .field-validation-valid { display: none; } input.input-validation-error { border: 1px solid #b94a48; } select.input-validation-error { border: 1px solid #b94a48; } input[type="checkbox"].input-validation-error { border: 0 none; } .validation-summary-errors { color: #b94a48; } .validation-summary-valid { display: none; } .field-validation-error, .field-validation-valid, .custom-field-validation-error, label.error { font-size: 10px; color:red; display: block; margin-left:50%; padding-left:5px; } #description_validationMessage { margin-left: 75%; } #taxweek_validationMessage { margin-left: 49%; margin-top: 8px; } #taxmonth_validationMessage { margin-left: 49%; margin-top: 8px; } #taxyear_validationMessage { margin-left: 49%; margin-top: 8px; } .custom-field-validation-error { display: none; } td > .field-validation-error, td > .field-validation-valid, td > .custom-field-validation-error { margin:0; padding:0; } form.search h4 { display: inline; } form.search { text-align: right; margin: 0em 1em 1em 1em; } th { text-align: left; } .colorPicker { border: 1px solid #777; height: 50px; width: 50px; position:relative; } .colorPicker div { position:absolute; left:2px; right:2px; bottom:2px; top:2px; cursor: crosshair; } .colorPicker div:hover { border: 1px solid #333; } .rowFilter { width: 95%; } input[readonly] { background-color: lightgray; } #logonInfoDiv .printonly span { color:black; } @media print { html { height: 98%; } body { font-size: 10pt; height: 100%; /*-webkit-transform: rotate(90deg); -webkit-transform-origin: 35% 40%; -moz-transform: rotate(90deg); -moz-transform-origin: 35% 40%; -ms-transform: rotate(90deg); -ms-transform-origin: 35% 40%;*/ } .noprint, ul#runner.noprint { display: none!important; } div#TimesheetLines { border: 0px solid #D0D0D0; } #logonInfoDiv label, #logonInfoDiv span { color: #000000; display: inline!important; float:left; width:auto; } #logonInfoDiv label { clear:both; margin-right:1ex; } label { margin-bottom: 5px; } div#TimesheetDetail { margin-top: 1em; } .tabContainer, .block, .tabStrip .tabSelector, ul.blocks li, .buttonGroup a, .button, ul#runner, #CommandBar, #logonInfoDiv #accountDetails ul { text-align: left; } input[type="number"] { width: 5.5ex; } #pageWrapper { margin-left: auto; margin-right: auto; min-width: 80%; width: 100%; height:100%; } td, th { border-bottom: 1px solid #d0d0d0; padding: 0.2em 0.3em 0.2em 0.3em; } input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } .k-timepicker .k-picker-wrap .k-select { display:none; } .k-timepicker .k-picker-wrap { padding: 0; } .k-timepicker { width:5.5ex!important; } /*#TimesheetContainer tbody label { display:none; }*/ #body { padding-bottom:290px; padding-top: 150px; min-height: 100%; } header { position:absolute; } tr { page-break-after: auto; page-break-inside:avoid; } *, div.tableScroll, div.tableScroll > table { overflow:visible!important; } } .hoverHelp span { display:none; } .hoverHelp:before { content: "?"; background-color: #706f6f; color: #F4F4F4; padding: 0.2em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .hoverHelp { cursor: help; } .hoverHelp:hover span { display:inline-block; position:absolute; line-height:1.5em; padding:0.2em; margin-left:0.2em; background-color:white; border:1px solid #D0D0D0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 2147483001; } .warning { background-color: LemonChiffon; margin: 1px 0 5px; padding: 3px 10px 3px 20px; border-radius: 6px 6px 6px 6px; color: #911313; position: relative; width: 100%; } .warning:before { content: '!'; font-weight: bold; position: absolute; left: 10px; color: #911313; font-size: 1.2em; } .error { background-color: #ffcdcd; margin: 1px 0 5px; padding: 3px 10px 3px 10px; border-radius: 6px 6px 6px 6px; color: #5b0c0c; position: relative; width: 100%; } .ui-autocomplete { z-index: 1000 !important; /* Defaults to 1 which isn't high enough to place it above buttons. */ } dt, dd { display:inline-block; float:left; margin:0; } dt { clear:both; width: 10%; font-weight:bold; } .hideSearch .k-grid-filter{ display: none; } .AwrCheckbox { vertical-align: middle; } #clientBatchOwnersTable { margin-left:50.3%; } #batchdetailsbutton { margin-left: 50.5%; margin-top: 20px; } #batchdetails #clientbatchheader #Description { overflow-y: hidden; } .compliancesave { font-family: 'Myriad Pro', Calibri, 'Lucida Grande', Ubuntu, sans-serif; font-size: 10pt; } .compliancesave { background-image: url(/Evertime/Content/themes/IO/images/gradient.png); background-image: url(/Evertime/Content/themes/IO/images/save.png), linear-gradient(left bottom, rgb(51,60,134) 0%, rgb(68,81,179) 100%); background-image: url(/Evertime/Content/themes/IO/images/save.png), -o-linear-gradient(left bottom, rgb(51,60,134) 0%, rgb(68,81,179) 100%); background-image: url(/Evertime/Content/themes/IO/images/save.png), -moz-linear-gradient(left bottom, rgb(51,60,134) 0%, rgb(68,81,179) 100%); background-image: url(/Evertime/Content/themes/IO/images/save.png), -webkit-linear-gradient(left bottom, rgb(51,60,134) 0%, rgb(68,81,179) 100%); background-image: url(/Evertime/Content/themes/IO/images/save.png), -ms-linear-gradient(left bottom, rgb(51,60,134) 0%, rgb(68,81,179) 100%); background-image: url(/Evertime/Content/themes/IO/images/save.png), -webkit-gradient( linear, left bottom, left bottom, color-stop(0, rgb(51,60,134)), color-stop(1, rgb(68,81,179)) ); } /*don't shoot me !!*/ .reminderOverDue, tr:nth-child(2n).reminderOverDue, tr.odd.reminderOverDue { background: #ff0000; color: #ffffff; } .reminderNearlyOverDue, tr:nth-child(2n).reminderNearlyOverDue, tr.odd.reminderNearlyOverDue { background: #ff9966; color: #ffffff; } .remindersbutton { color: white; display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ position: relative; /* All 'absolute'ly positioned elements are relative to this one */ padding: 2px 5px; /* Add some padding so it looks nice */ } .editorControl table, editorControl table.k-editor{ width: 100%; height:440px; /* table properties*/ margin: 0; } .preview { margin-top:-22px; } .preview button { margin-top:5px; margin-bottom:5px; } /* Make the badge float in the top right corner of the button */ .button__badge { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } .placementnotes { color: red; } a.disabled { cursor: default; color: #aaaaaa; } a.disabled:hover { cursor: default; color: #aaaaaa; background: rgb(235,235,235) url(images/gradient.png) top; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(235,235,235)), color-stop(0.9, rgb(254,254,254)) ); background-image: -o-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); background-image: linear-gradient(bottom, rgb(235,235,235) 10%, rgb(254,254,254) 100%); } button.action-ok { min-width: 200px; min-height: 40px; border: none; background-color: limegreen; font-size: larger; color: white; } /* Custom Sortable Elements */ .sort-handle { cursor: move; cursor: -webkit-grabbing; font-weight: bolder; font-size: 2em; padding-right:5px; } .sort-ghost { opacity: 0.4; } .sort-disabled-textbox { color: rgb(50 50 50) !important; background-color: #F4F4F4 !important; } .sort-header { color: #313131 !important; background-color: transparent !important; font-weight: bold; font-size: 1rem !important; border-width: 2px !important; } .sort-header-row { background-color: rgb(253 253 253) !important; } .sort-header-handle-spacer { color: rgb(253 253 253) !important; font-size: 2em !important; } .sort-list-group-item { padding: .75rem 1.25rem; margin-bottom: 2px; border: 1px solid rgba(0,0,0,.125); border-radius: 9px; background-color: rgb(235 235 235); } .sort-cell { border: 1px solid rgba(0,0,0,.125); border-radius: 3px; padding: 4px; width: 40% !important; } .sort-readonly { background-color: rgb(150 150 150); } .sort-items-container { min-height: 400px; } /*End sortable*/ .rotate90after:after { transform: rotate(90deg); /* Legacy vendor prefixes that you probably don't need... */ /* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* IE */ -ms-transform: rotate(90deg); /* Opera */ -o-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .text-box.multi-line {vertical-align: top;} /*Badge*/ .badge { padding: 0px; border-width: 1px; border-style: solid; border-radius: 4px; text-align: center; height: 18px; width: 18px; color: #2e2e2e; line-height: normal; /*Manually setting line height to match Kendo styles as some pages have other style sheets overriding this value*/ } .badge:hover { filter: brightness(70%); } /*Colour name ties into TimesheetAttachmentExtensions*/ .badge-none { background-color: #F4F4F4; } .badge-green { background-color: rgb(15, 121, 14); } .badge-amber { background-color: rgb(255, 140, 0); } .badge-red { background-color: rgb(255, 0, 0); } .advance-history-entry { flex-wrap:wrap; background-color:#dadada; margin-bottom:8px; padding: 5px; } .advance-history-entry > span { padding: 2px; } /* Light Theme */ :root { --bg: 222, 222, 222; --bg-pinstripe: 235, 235, 235; --bg-secondary: 243, 243, 243; --bg-secondary-odd: 227, 227, 227; --bg-tertiary: 207, 207, 207; --bg-disabled: 220,220,220; --text-color: 27,27,27; --text-color-value: 12,103,167; --border: 232, 232, 232; --border-secondary: 204, 204, 204; --busy-color: 11,11,11; --item-hover-border: 215, 235, 249; --item-hover-bg: 210,212,217; --item-selected-bg: 67, 150, 249; --error-color: 230, 168, 168; --icon-color: 90, 90, 90; --icon-color-secondary: 224, 224, 224; --icon-color-tertiary: 202, 202, 202; --scroll-bar-inactive: 145, 146, 156; --scroll-bar-active: 88, 107, 125; } /* inputs */ .search { border: 1px solid #CCC; background: #FFF; display: flex; margin: 0; padding: 0 5px; align-items: center; border-radius: 3px; justify-content: stretch; } .search input { border: none; } .search input:focus { border: none; outline: none; } input[type=text].input-error { border-color: red; } input.input-wide { width:100%; } /* Input Range Slider */ input[type=range] { background: rgba(var(--agency-highlight-color),0.3); -webkit-appearance: none; margin: 5px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; background: rgba(var(--agency-highlight-color),0.5); } input[type=range]::-webkit-slider-thumb { height: 16px; width: 16px; border: none; border-radius: 5px; background: rgba(var(--agency-highlight-color),1); cursor: pointer; -webkit-appearance: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: rgba(var(--agency-highlight-color),0.5); } input[type=range]::-moz-range-thumb { height: 16px; width: 16px; border-radius: 6px; background: rgba(var(--agency-highlight-color),1); cursor: pointer; border: none; } /* Checkboxes and Radios */ label > input[type=checkbox], label > input[type=radio] { display: none; } label input[type=checkbox] + span + span, label input[type=radio] + span + span { user-select: none; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; flex-shrink: 1; width: 1px; } label input[type=checkbox] + span, label input[type=radio] + span { margin: 0 5px 0 0; display: inline-block; color: #FFFFFF; width: 20px; height: 20px; font-weight: 600; line-height: 20px; margin-right: 5px; position: relative; background-color: rgba(var(--agency-highlight-color),1); vertical-align: middle; flex-grow: 0; flex-shrink: 0; transition: all 0.2s linear; cursor: pointer; } label input[type=radio] + span { border-radius: 50%; } label:hover input[type=checkbox]:not(:disabled) + span, label:hover input[type=radio]:not(:disabled) + span { background-color: rgba(var(--agency-highlight-color),0.5) !important; } label input[type=checkbox]:checked + span, label input[type=radio]:checked + span { background-color: rgba(var(--agency-highlight-color),1); } label input[type=checkbox]:checked + span:before, label input[type=radio]:checked + span:before { content: '✓'; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } label input[type=radio]:checked + span:not(.icon-svg):before { content: '\00a0\00a0'; display: block; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: #FFF; width: 40%; height: 40%; border-radius: 50%; } label input[type=checkbox]:disabled + span, label input[type=checkbox]:disabled + span + span { opacity: 0.5; } label input[type=checkbox] + span:focus, label input[type=radio] + span:focus { /*outline: 1px solid var(--item-link-colour);*/ outline: none; box-shadow: 0 0 0 1pt rgba(var(--agency-highlight-color),0.8); } .check-list label { display: block; width: auto; display:flex; } .check-list label .description { font-weight:300; } /* Table Grid */ .table-overflow { overflow-x: auto; max-height: 600px } table.data-grid { border-collapse: collapse; box-sizing: border-box !important; margin: 0; min-width: unset; border: none; table-layout: fixed; width:1px; } table.data-grid th, table.data-grid td { line-height: 30px; margin: 0; position: relative; } table.data-grid th { width: 300px; white-space:nowrap; } table.data-grid td div, table.data-grid td a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.data-grid tr:hover td { background-color: rgba(var(--agency-highlight-color),0.1); cursor: pointer; } table.data-grid tr.row-selected td { background-color: rgba(var(--agency-highlight-color),0.3); cursor: pointer; } table.data-grid tr.disabled td { opacity: 0.4; } table.data-grid .right { text-align: right; } table.data-grid .center { text-align: center; } table.data-grid tfoob tr td { background-color: #e7e7e7; } table.data-grid input { width: 100%; } /* Help Links */ a.helplink { text-decoration: none; border-radius: 30px 8px 30px 30px; color: rgb(var(--help-colour)); padding: 4px; position: relative; padding-left: 25px; box-sizing: border-box; } a.helplink::after { content: '?'; font-weight: bold; font-size: 0.8em; background-color: rgb(var(--help-colour)); color: #FFF; border-radius: 30px 8px 30px 30px; display: inline-flex; width: 18px; height: 18px; margin-right: 5px; align-items: center; justify-content: center; transition: all 0.1s linear; position: absolute; left: 0px; } a.helplink:hover { /*text-decoration:underline;*/ background: rgba(var(--help-colour),0.5); color: #FFF; } a.helplink:hover::after { transform: scale(1.4) } /* Busy Spinner */ .busy-spinner { min-height: 50px; } .busy-spinner:after { content: " "; display: block; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; transform-origin: 0% 0%; transform: translateX(-50%) translateY(-50%); border-radius: 50%; animation: spin-ring 1s linear infinite; opacity: 1; padding:8px; background: linear-gradient(160deg, #ed7325 0%, #b40096 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .busy-spinner-small { min-height: 20px; width: 16px; height: 16px; display:none; } .busy-spinner-small:after { position: relative; width: 16px; height: 16px; padding: 6px; } @keyframes spin-ring { 0% { transform: rotate(0deg) translateX(-50%) translateY(-50%); /*border-color: rgba(var(--theme-text),1) transparent rgba(var(--theme-text),1) transparent;*/ } 50% { transform: rotate(180deg) translateX(-50%) translateY(-50%); /*border-color: rgba(var(--theme-text),0.5) transparent rgba(var(--theme-text),0.5) transparent;*/ } 100% { transform: rotate(360deg) translateX(-50%) translateY(-50%); /*border-color: rgba(var(--theme-text),1) transparent rgba(var(--theme-text),1) transparent;*/ } } /* Busy - row */ .busy { position: relative; } .busy:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background-size: 50px 50px; animation: movebg 2s linear infinite; pointer-events: none; background-image: linear-gradient(-45deg, rgba(var(--busy-color),.2) 25%, rgba(var(--busy-color),.1) 25%, rgba(var(--busy-color),.1) 50%, rgba(var(--busy-color),.2) 50%, rgba(var(--busy-color),.2) 75%, rgba(var(--busy-color),.1) 75%); opacity: 1; } @keyframes movebg { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* Tabs */ ul.tabs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap-reverse; } ul.tabs button { } .tab-content { display: none; } /* Blocks */ .info-block { border-radius: 4px; margin: 4px 10px; background-color: #F0F0F0; box-shadow: var(--box-shadow); margin: 0 0 20px 0; transition: all 0.2s linear; } .info-block.hoverable:hover { cursor: pointer !important; background-color: #FFF; outline: 1px solid rgb(var(--agency-highlight-color)); } .info-block-content { padding: 8px 15px; } .info-block-header { border-radius: 4px 4px 0 0; background-color: rgb(var(--agency-highlight-color)); color: #FFF; padding: 6px 10px; } .box-padding { padding: 20px; } /* Flex */ .flex-row { display: flex; padding: 3px 0; align-items: center; } .flex-row > label { width: auto; margin: 0; color: #6f6f6f; flex: 1 0 165px; max-width: 165px; } .flex-row label + * { flex: 1 0; } .no-grow { flex-grow: 0; } .flex-row.with-space > label + *:not(:last-child) { margin-right: 4px; } .flex-column { flex-direction: column; flex-wrap: nowrap; display: flex; min-height: 1px; } .flex-fixed { flex-grow:0; flex-shrink: 0; } .flex-grow { flex-shrink: 1; flex-grow: 1; } .flex-grid { display: flex; flex-direction: row; flex-wrap: wrap; } .flex-grid label { width:auto; } .block-33 { width: 33.333%; position: relative; display: inline-block; } .block-50 { width: 50%; position: relative; display: inline-block; } .block-100 { width: 100%; position: relative; display: inline-block; } .picklist-item { display: flex; margin: 3px; background-color: rgba(255,255,255,0.4); border-radius: 3px; border: 1px solid #CCC; padding: 2px; position: relative; } .picklist-item label { flex-grow: 1; flex-shrink: 1; } .picklist-item:hover { border-color: rgba(var(--agency-highlight-color), 1); } .picklist-item .picklist-total { background-color: rgba(var(--agency-highlight-color), 1); color: #FFF; position: absolute; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; text-align: center; padding: 5px; border-radius: 0 2px 2px 0; min-width: 30px; } .file-item { display: flex; flex-direction: column; margin: 7px; background-color: rgba(255,255,255,0.4); border-radius: 3px; border: 1px solid #CCC; padding: 10px 2px; position: relative; align-items: center; gap: 5px; } .file-item:hover { border-color: rgba(var(--agency-highlight-color), 1); } /* Tool Bars */ .tool-bar { list-style: none; display: flex; flex-direction: row; padding: 3px; margin: 0; background-color: rgba(0,0,0,0.05); flex-wrap: wrap; } .tool-bar li { margin:0; padding: 0; display:flex; padding: 2px; } .tool-bar button { margin:0; } .tool-bar label { width:auto; } .tool-bar select { margin:0; } .tool-bar li.divider:after { content: ''; background: rgb(var(--agency-highlight-color)); width: 2px; } /* Popup */ .overlay, .overlay * { box-sizing: border-box; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.2); overflow: hidden; display: flex; justify-content: center; align-items: center; z-index: 2147483001; backdrop-filter: blur(2px); } .overlay-stacked { background-color: rgba(0,0,0,0.2); backdrop-filter: blur(0.8px); } .overlay-ui-blocker { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0); overflow: hidden; display: flex; justify-content: center; align-items: center; z-index: 2147483001; } .popup { background: rgba(var(--bg-secondary),1); box-shadow: var(--box-shadow); display: flex; flex-direction: column; flex-wrap: nowrap; z-index: 50; margin: 10px 10px; max-width: 80%; max-height: 94%; min-width: 340px; transition: max-width 0.5s linear; position: relative; overflow: hidden; border-radius: 4px; } .popup-side-bar { position: fixed; right: 0; height: 100%; top: 0; transform: translateX(100%); margin: 0; border-radius: 0; /*transition: transform 0.3s ease-in-out;*/ /*animation: slide 0.5s forwards; */ transition: all 0.5s; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 30px 0 rgba(0, 0, 0, 0.19); visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); max-height: 100%; max-width: 500px; min-width: 200px; width: 100%; } .popup-dialog { animation-duration: 0.2s; animation-name: slidein; animation-iteration-count: 1; animation-fill-mode: forwards; } .popup-open { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .popup-title { font-weight: 700; font-size: 18px; display: flex; flex-direction: row; flex-grow: 0; flex-shrink: 0; padding: 5px 10px; align-items: center; justify-content: center; text-align: center; color: #FFF; /*background: rgba(var(--highlight-color),1);*/ /*background-image: linear-gradient(160deg,#ed7325 0%,#b40096 100%) !important;*/ background-color: rgb(var(--agency-highlight-color),1); } .popup-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; } .popup-buttons-main { padding: 12px; background-color: rgba(0,0,0,0.05); } .popup-content { flex: 1; overflow: auto; display: flex; flex-direction: column; } .popup-busy-message { display: block; text-align: center; padding: 2px 10px; position: relative; font-size: 17px; font-weight: bold; z-index: 5; } .popup-icon-box { text-align: center; padding: 20px; } .popup-message { display: flex; } .popup-icon { width: 54px; padding: 20px; --icon-color: var(--agency-highlight-color); } .popup-icon svg { max-height: 34px; max-width: 34px; } .popup-plain-text { padding: 20px; align-items: center; flex-grow: 1; } .popup-plain-text > * { margin: 0 3px; } .content-scrollable { overflow-y: auto; overscroll-behavior: contain; } .popup .table-overflow { max-height: none; } .popup .box-padding { padding: 20px; } .popup .fixed-table { width: 100%; padding: 0; margin: 0; table-layout: fixed; } .popup label { display: flex; margin: 3px; color: #6f6f6f; font-weight: 500; align-items: center; } @keyframes slidein { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } } /* Tool Bars */ .tool-bar-container { display: flex; flex-direction: row; padding: 3px; margin: 0; } .tool-bar { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap-reverse; margin:0; padding:0; /*background-color: rgba(var(--bg-secondary), 1);*/ } .tool-bar li { margin: 0; padding: 0; display: flex; padding: 2px; display: flex; align-items: center; justify-content:stretch; } .tool-bar button { margin:0; } .tool-bar label { width:auto; } .tool-bar select { margin:0; } .tool-bar li.divider:after { content: ''; background: rgb(var(--bg)); width: 2px; height: 100%; } .tool-bar li div.tool-block { white-space: nowrap; display: flex; align-items: center; gap: 4px; background-color: rgba(var(--bg-input), 1); padding: 0 2px; height: 100%; border-radius: 3px; } .tool-bar li div.tool-block input, .tool-bar li div.tool-block select { border:none; } /* Buttons */ button { cursor: pointer; } .button-normal { background-color: rgb(var(--agency-highlight-color)); color: #fff; border: 1px solid transparent; cursor: pointer; margin: 3px; white-space: nowrap; display: inline-flex; flex-direction: row; flex-wrap: nowrap; padding: 5px 10px; align-items: center; justify-content: center; border-radius: 3px; user-select: none; } .button-normal:disabled { background-color: rgba(var(--agency-highlight-color),0.5); } .button-normal:not(:disabled):hover { background-color: rgba(var(--agency-highlight-color),0.8); } .button-normal svg { --icon-color: 255, 255, 255; } .button-normal * { margin-right: 4px; } .button-normal *:last-child { margin-right: 0; } .button-option-icon { background-color: rgb(var(--agency-highlight-color)); border-radius: 3px; display: flex; flex-direction: column; justify-content: stretch; width: 50%; align-items: center; margin: 10px; padding: 0; border: 0; overflow: hidden; --icon-color: 255,255,255; } .button-option-icon span { background: #000; padding: 3px; color: #FFF; align-self: stretch; } .button-option-icon svg { padding:15px 5px; } .button-red { --agency-highlight-color: 133, 23, 23; background-color: rgb(133, 23, 23); } button.button-normal.corner-button { border: 1px solid #d0d0d0; position: absolute; right: 0; top: 0; padding: 3px; border-radius: 0 0 0 6px; border-top: none; border-right: none; margin: 0; } .image-button { border: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: none; } .image-button:hover { } .image-button:hover { --icon-color: 255, 255, 255; } .toggle-button { border: 0; padding: 2px; opacity: 0.3; } .toggle-button.on { opacity: 1; } .icon-button { background: transparent; margin: -5px 5px; padding: 5px; border: 0; border-radius: 4px } .icon-button:hover { --icon-color: 255, 255, 255; background-color: rgba(var(--agency-highlight-color),0.8); } /* Icons */ .icon-tiny, .icon-small, .icon-medium, .icon-large { flex-shrink: 0; flex-grow: 0; display: inline-block; position: relative; overflow: visible; } .icon-tiny { width: 10px; height: 10px; } .icon-small { width: 16px; height: 16px; } .icon-medium { width: 24px; height: 24px; } .icon-large { width: 32px; height: 32px; } .icon-huge { width: 80px; height: 80px; } use { fill: rgba(var(--icon-color),1); } use:nth-child(2) { filter: drop-shadow(-1px -1px 0px rgba(var(--agency-highlight-color),1)) drop-shadow(1px -1px 0px rgba(var(--agency-highlight-color),1)) drop-shadow(1px 1px 0px rgba(var(--agency-highlight-color),1)) drop-shadow(-1px 1px 0px rgba(var(--agency-highlight-color),1)); transform: scale(50%); } .agency-color use { --icon-color: var(--agency-highlight-color); } .icon-green use { --icon-color: 15, 121, 14; } .icon-amber use { --icon-color: 255, 140, 0; } .icon-red use { --icon-color: 255, 0, 0; } body { border-top: 7px solid #333333 !important; background: repeating-linear-gradient(-45deg, rgba(var(--bg), 1) 0, rgba(var(--bg-pinstripe), 1) 1.5px, rgba(var(--bg), 1) 3px); } /* Label Value groups */ .label-value { display: flex; flex-direction: row; flex-wrap: nowrap; min-height: 25px; align-items: center; } .label-value > label { flex: 0 0 34%; margin: 0; padding-right: 20px; word-wrap: break-word; position: relative; display: inline-block; width: auto; margin-bottom: 0; color: rgba(var(--text-color),0.6); font-weight: 500; } .label-value label:first-child::after { content:':'; position:absolute; right:10px; top: 50%; transform: translateY(-50%); } .label-value .value { flex: 0 1 66%; display: flex; flex-direction: row; column-gap: 5px; } /* Headings */ h1, h2, ul#runner { padding: 0px; margin: 7px 0px; padding-left: 20px; position: relative; display: flex; } h1, h2 { background: rgba(var(--agency-highlight-color)); line-height: 2em; border: 1px solid #d0d0d0; color: #FFF; font-weight: normal; font-size: 12pt; padding-left: 35px; } h3 { color: rgba(var(--text-color),1); font-size: 19px; font-weight: 400; } h3 > * { vertical-align:middle; } /*black strip*/ h1::before, h2::before, ul#runner::before { position: absolute; } h1::before, h2::before, ul#runner::before { content: ""; display: inline-block; width: 20px; height: 100%; margin-left: -20px; background-image: linear-gradient(0deg, #000 0%, #656565 70%); flex-grow: 0; flex-shrink: 0; } h1::before, h2::before { margin-left: -35px; } * > :first-child:is(h1), * > :first-child:is(h2), * > :first-child:is(h3) { margin-top: 0; } /* Inline Text Variations */ .subtext { font-size: 0.8em; opacity: 0.6; } /* Header */ header { line-height: normal; } header * { box-sizing: border-box; } header .header-content { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 7px; } header .label-value label::after { display:none; } header .label-value { min-height: 21px; } /* Logo */ #logoDiv { border: 1px solid #d0d0d0; background-color: white; padding: 10px; max-width: 320px; min-width: 0; height: 120px; border-radius: 3px; } #logoDiv a { display: flex; justify-content: center; /* align-items: center; */ width: 100%; height: 100%; } #logoDiv img { max-width: 300px; max-height: 100px; } #logonInfoDiv { padding-left: 1em; line-height: 1.5em; } .login-block { flex-grow: 1; max-width: 400px; padding-left: 20px; } /* Runner */ ul#runner { white-space: nowrap; background-color: #F4F4F4; border: 1px solid #D0D0D0; user-select: none; padding: 0px; margin: 0.5em 0px; padding-left: 20px; position: relative; display: flex; } ul#runner::before { float: left; } ul#runner li { display: block; border-left: 1px solid #d0d0d0; margin: 0px; box-sizing: border-box; position: relative; flex: 1 1 20%; } ul#runner li a { line-height: 40px; display: block; color: black; text-decoration: none; padding: 0px 15px; } ul#runner li a:hover, ul#runner li a.current { background-color: white; } ul#runner li a::before { content: ""; width: 31px; height: 32px; position: absolute; right: 0px; top: 4px; background-color: white; border: 1px solid #d0d0d0; border-right: none; border-top-left-radius: 21px; border-bottom-left-radius: 21px; box-sizing: border-box; display: none; } ul#runner li a::after { position: absolute; right: 5px; top: 10px; content: ""; display: block; height: 20px; width: 20px; border-radius: 50%; background-image: url(/Content/themes/IO/images/go.png); background-color: gray; background-repeat: no-repeat; background-position: 3px 4px; box-sizing: border-box; } ul#runner li a.current::after { background-color: rgb(var(--agency-highlight-color)); } ul#runner li a:hover::after, ul#runner li a.current:hover::after { background-color: rgb(var(--agency-highlight-color)); } footer, footer a, footer a:visited { color: rgba(var(--text-color),0.6); } /* Agency Selector */ .agency-selector { border: 1px solid #CCC; background-color: #FFF; padding: 1px 4px 1px 4px; border-radius: 4px; white-space: nowrap; margin-right: 5px; flex-grow: 1; } .agency-selector:hover { background-color: rgba(var(--agency-highlight-color),1); color: #FFF !important; cursor: pointer; } /* Agency Picker */ .picklist-item { display: flex; margin: 3px; background-color: rgba(255,255,255,0.4); border-radius: 3px; border: 1px solid #CCC; padding: 2px; position: relative; } .picklist-item label { flex-grow: 1; flex-shrink: 1; } .picklist-item:hover { border-color: rgba(var(--agency-highlight-color), 1); } .picklist-item .picklist-total { background-color: rgba(var(--agency-highlight-color), 1); color: #FFF; position: absolute; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; text-align: center; padding: 5px; border-radius: 0 2px 2px 0; min-width: 30px; } .flex-grid { display: flex; flex-direction: row; flex-wrap: wrap; } .flex-grid label { width: auto; } .block-33 { width: 33.333%; position: relative; display: inline-block; } .block-50 { width: 50%; position: relative; display: inline-block; } .block-100 { width: 100%; position: relative; display: inline-block; } .agency-bullet { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background-color: rgba(var(--agency-highlight-color), 1); } /* Agency Search */ .search { border: 1px solid #CCC; background: #FFF; display: flex; margin: 0; padding: 0 5px; align-items: center; border-radius: 3px; justify-content: stretch; } .search input { border: none; } .search input:focus { outline: none; } /* Tags */ .item-tag { /*font-size: 9px;*/ --icon-color: 255,255,255; font-weight: 100; background-color: rgb(var(--agency-highlight-color)); color: #FFF; padding: 1px 5px; border-radius: 10px; align-self: center; white-space: nowrap; display: inline-flex; align-items: center; } .item-tag.purple { background-color: #d90f7b; } .item-tag.green { background-color: rgba(15, 121, 14, 1); } .item-tag.red { background-color: rgba(133, 23, 23, 1); } .item-tag.amber { background-color: rgba(255, 140, 0, 1); } .item-tag.lightgreen { background-color: rgba(15, 121, 14, 0.4); } .item-tag.lightamber { background-color: rgba(255, 140, 0, 0.4); } /* MEDIA QUERIES */ @media only screen and (max-width: 1000px) { .panel-33, .panel-50 { width: 100%; } } @media only screen and (max-width: 700px) { .label-value { flex-wrap: wrap; padding: 0px 0 8px 0; } .label-value .value { display: inline; flex: 0 1 100%; } .label-value label { flex: 1 1 100%; } .label-value label:first-child::after { display: none; } .login-block { display: none; } #logoDiv { height: 50px; } footer { display: none; } ul#runner { flex-direction: column; } ul#runner li { border-bottom: 1px solid #d0d0d0; } ul#runner li a { line-height: 20px; } ul#runner li a::after, ul#runner li a::before { display:none; } }