html, body, div, span, applet, object, iframe, input, select, textarea, img, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } :root { --text-color:#333; --bs-navbar-nav-link-padding-x:.5rem; --department-title-width:180px; --servicecontainer-width:120px; --servicecontainer-height:30px; --servicecontainer-left-margin:4px; --servicecontainer-titles-width:220px; --service-nofplanned-height:20px; --calendar-entry-height:64px; --calendar-entry-margin-top:32px; --calendar-description-height:44px; } html{font-size:0.7em;} body{ font-family: Verdana, Arial, Helvetica, sans-serif !important; } input, textarea, keygen, select, button { font-family: Verdana, Arial, Helvetica, sans-serif !important; } input, textarea, select, button { text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0; } body {height:100%;} img {border-width:0; vertical-align:middle;} span, label, a {display:inline-block;} table {border-spacing:0 0;} td {vertical-align:top;} li {list-style-type:none;} select {height:22px;vertical-align:baseline;margin-top:1px;margin-bottom:1px; border: 1px solid #ababab;} body, input, textarea, select {color:var(--text-color); background-color:white;} input[type="text"],input[type="password"],input[type="file"],input[type="email"],input[type="date"],input[type="number"], textarea, .msddl {padding-left:2px; padding-right:2px; height:22px;vertical-align:baseline;margin-top:1px;margin-bottom:1px; border: 1px solid #ababab;} input[type="file"] {border:none;height:auto;} input[type="image"] {vertical-align:bottom;margin-left:2px;cursor:pointer; border-width:0;background-color:transparent;} input[type="image"]:disabled {opacity:0.4;} input[type="checkbox"] {margin:2px 2px 0 2px !important; } input[type="number"] {padding-right:0px;} input:focus, button:focus, textarea:focus, select:focus, .wsFocus {outline:1px solid #404040 !important;} textarea {resize:both; overflow:auto; line-height:normal; border:1px solid #ababab;vertical-align:top;} div[wp] span, .ui-dialog span, div[wp] label, .ui-dialog label {margin-top:0.25rem} * { box-sizing:border-box; outline:0; } ::placeholder {color:#AAA !important;} a:active:not(.btn) {background-color:#f1f1f1 !important;} a.disabled {pointer-events: none;} /* Animation */ @keyframes fadeInOut { 50% { background-color: #DDDDDD; } } /* fadeinout for short highlighting */ .fadeinout {animation: fadeInOut 1s ease-in-out; } .required:before{ content: '*'; position: absolute; color: red; font-weight: bold; margin-left: -10px; } /* Positioning divs */ #contractant-dropdown {cursor:pointer; height:80px; display:none;} #LicenseLogoAnchor { height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align:top; } #ContextSwitcherListbox {font-size:inherit;} #ContextSelector {height: 90px; border:none;} #ContextObject {border: none;background-color: transparent; margin: 0px 0px 4px 0px; width:180px; overflow:hidden; white-space:nowrap;} #ContextObjectTitle {color: #333333; font-weight: bold;font-size: small; } #ContextSelector, #InfoBox, #FavoritesPopup, #OverflowFavoritesPopup {padding:0;height:auto; background:inherit; color:inherit;} #ContextObjectInfo {overflow:hidden; color:#404040 !important; font-size:larger; font-weight:bold; text-overflow:ellipsis; max-width:initial;} #SearchObjectText {height:auto;} /* Standard Controls */ .PageBreak {page-break-before:always;background-color:Yellow;} .lbCenter {text-align:center;} .lbMiddle {vertical-align:middle;} .lbTop {vertical-align:top!important;} .lbCloseTop {padding-bottom:4px;vertical-align:top;} .lbSpace {color: inherit;padding: 4px 0 4px 0;vertical-align:top;} .lbRed {color:Red;} .lbGrey {color:grey;} .lbRight {text-align:right} .lbWebPartHeader {color: inherit;padding-top:4px;font-size:small;font-weight: bold;} .lbDialogHeader {color: #FFFFFF;margin:4px 0 8px 0;font-weight: bold;} .lbBold {font-weight: bold;} .lbBoldRed {font-weight: bold;color:Red;} .lbdgHeader {background-color: #f6f6f6; padding:6px; font-weight:bold; border:0;} .cbKey {margin-top:0.4em;} /* datagrid checkboxes */ .cbKeySelectAllNoneTitle {width:120px; vertical-align:middle;} /* tristate will be used in combination with nullable checkboxes */ .tristate { margin:2px 2px 0 2px;vertical-align:text-bottom; /* <= same as chk!! */ display:inline-block; width:13px; height:13px; background:transparent url('../images/3-state-checkbox.png') scroll no-repeat top left;} .tristate.off {background-position:0 0;} .tristate.on {background-position:0 -13px;} .tristate.intermediate {background-position:0 -26px;} .tristate > input {display:none;} /* places the checkbox outside the visible area */ /* ToggleCheckboxes are checkboxes that don't show a check mark, but button like texts representing off and on. The checkbox itself is hidden. */ .ToggleCheckbox {display:none;} .ToggleCheckboxContainer {margin-right:0.25rem; margin-top:-1rem !important;margin-bottom:0.2rem;} .ToggleCheckboxContainer > input[type="checkbox"] {display:none;} .ToggleCheckboxContainer > span {border:1px solid dimgrey; cursor:pointer; opacity:0.60; background-color:white; text-align:center; } .ToggleCheckboxContainer.ToggleCheckboxContainerWidthSet > span {width:50%;} .ToggleCheckboxOff {border-radius:0.5em 0px 0px 0.5em; padding-left:0.5em; padding-right:0.5em;} .ToggleCheckboxOn {border-radius:0 0.5em 0.5em 0; padding-left:0.5em; padding-right:0.5em;} .ToggleCheckboxContainer > span.checked {font-weight:bold; opacity:1;} .ToggleCheckboxContainer > span.disabled {background-color:#e3e3e3; opacity:1; cursor:default;} .opaque {opacity: 1;} .faded {opacity: 0.50;} .transparent {opacity: 0;} .disabled {cursor:default;} .FilteredOut {display:none !important;} .FilterPanel {float:left; min-width: 350px; margin-bottom: 10px;} .InstantFilterPanel {width:auto!important; margin:1rem 0;} /* InstantFilterPanel buttons are based on .btn.reverse */ .InstantFilterPanel > * { background-color:white; color:#404040; border:0; border-radius:0; margin-left:0; margin-right:0; padding-left:0; padding-right:0; } .InstantFilterPanel > *:not(:last-child) { border-right:2px solid #404040; margin-right:1rem; padding-right:1rem; } .InstantFilterPanel > *:hover, .InstantFilterPanel > *:focus, .InstantFilterPanel > *:focus { text-decoration:underline; color:#404040; } .InputPanelBig {float:left; min-width: 370px; margin-bottom: 10px; margin-right: 30px;} .ColumnSelectPanel {float:left; min-width: 300px; margin-bottom: 10px;} .Title1 {font-size: medium;font-weight: bold;border-bottom: silver 1px solid;} .Title2 {font-size: small;font-weight: bold;font-style:italic;border-bottom: silver 1px solid;} .Title3 {font-weight: bold;border-bottom: silver 1px solid;} .MainTitle {font-size: x-large; font-weight: bold;} .SubTitle {font-size: large; font-weight: bold;} .tbBold {font-weight: bold;} .tbRight {text-align:right;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {border: 1px solid #ababab;} .ui-datepicker-trigger {height:20px; width:20px; cursor:pointer; border:2px solid transparent !important; margin-top:-0.3rem; margin-left:-20px;} input.hidedatepicker + .ui-datepicker-trigger {display: none;} .ui-datepicker-add {height:20px; width:20px; cursor:pointer; border:2px solid transparent !important; margin-top:-0.3rem; vertical-align:middle !important;} button.ui-datepicker-close {display: none;} .hasDatepicker {padding-right:20px!important;} .unstyledoption {color:black; font-weight:normal;} .read, .wsread {vertical-align:baseline;margin-top:1px;margin-bottom:1px; border: 1px solid LightGrey; background-color: LightGrey;} input[type="checkbox"].read {opacity: .5;} img.read {margin-top:0px;margin-bottom:0px; border:none; background-color:transparent; opacity:.5; vertical-align:middle;} .btn { background-color: #404040; color: white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .btn:hover, .btn:focus, .btn:active:focus { background-color: #404040; color: white; box-shadow: none; border:1px solid #404040; } .btnIconInline {vertical-align: middle;} /* The next two css settings style buttons in JQuery UI dialogs and datepickers. All btn properties are important to overrule the JQuery UI settings. Some bootstrap properties are added to also overrule JQuery UI. */ .ui-datepicker-buttonpane button, .ui-dialog-buttonpane button { background: #404040 !important; color: white !important; opacity:1 !important; border: 1px solid transparent!important; border-radius: 0.375rem !important; } .ui-datepicker-buttonpane button:hover, .ui-datepicker-buttonpane button:focus, .ui-datepicker-buttonpane button:focus, .ui-dialog-buttonpane button:hover, .ui-dialog-buttonpane button:focus, .ui-dialog-buttonpane button:focus { background: #404040 !important; color: white !important; box-shadow: none !important; border:1px solid #404040 !important; } .btn.reverse { background-color:white; color:#404040; border:1px solid #404040; } .btn.reverse:hover, .btn.reverse:focus, .btn.reverse:active:focus { background-color: #f1f1f1; color:#404040; } .svg-btn {background-size:80%; background-repeat:no-repeat; background-position:center; height:28px; width:28px;} .ui-slider-handle {background:lightgrey !important; border-color:grey !important; box-sizing: content-box;} .clip {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* vertical-align:text-bottom; Taak 461957*/} .timesheet .clip {white-space: nowrap; overflow: clip; text-overflow: ellipsis; vertical-align: unset;} .labeltextbox {border:none !important; background-color:transparent !important; } .centeredlabeltextbox {border:none !important; background-color:transparent !important; text-align:center; } .horizontalradiolist, .verticalradiolist {border-color:transparent; background-color:transparent; } .horizontalradiolist label, .verticalradiolist label {margin-left:4px; margin-right:8px;} .horizontalradiolist input, .verticalradiolist input {position: relative; top: 2px;} .verticalradiolist > label {width: calc(100% - 30px); vertical-align: top;} .verticalradiolist > input {margin-bottom: 1rem;} .break {display:block; } .inline {display:inline-block; white-space:nowrap;} .displaylink {color:#339; text-decoration:underline; cursor:pointer;} .nowrap {white-space:nowrap;} .nowrap th, .nowrap th a {vertical-align:middle;} .normalwrap {white-space:normal;} .cursorpointer {cursor:pointer;} /* Multi Select Choice List */ .mscl {vertical-align:text-top; margin:0 0 0 0!important;} .mscl.msddlcl {vertical-align:baseline;} .mscl ul {overflow:hidden; border:none; } .mscl ul > li {float:left; padding-right:1em; height:24px; overflow:hidden; white-space:nowrap;} .mscl ul > li label {text-overflow:ellipsis; overflow:hidden;} .mscl ul > li:first-child .cbKeySelectAllNone {margin-top:-4px; } .mscl ul > li:first-child .cbKeySelectAllNoneTitle {width:auto; vertical-align:baseline; margin-left:2px;} .msddl {height:22px; margin:1px 0!important;} .msddl, .msddl > span {margin:0!important;} .msddl input[type="checkbox"] {margin-top: 4px!important; vertical-align:top;} .msddl > ul {background-color:white; border:1px solid #ababab; z-index:1; padding:0.1rem;} .msddlSelected {width:100%; cursor:pointer; height:20px; /* height is the same as the image */} .msddlSelectedDisplay {width:calc(100% - 2.2rem); margin-top: 0px !important; line-height:20px!important; /* line-height is the same as the image */ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle;} .msddl img {height:20px; width:20px; margin-left:-2px;vertical-align:top;} .highlight {color:goldenrod;} .highlightbasecolor {color:#404040;} /* Selector */ .ws { display:inline-flex; align-items:center; padding:0 1px; height: 22px; vertical-align:baseline; margin-top: 1px; margin-bottom: 1px; border: 1px solid #ababab; overflow:hidden; white-space:nowrap; } .ws > * {margin: 0; border:1px solid transparent !important; height: 18px !important; line-height:18px !important; } .ws .wsvalue {width:0; visibility:hidden; border:none!important; padding:0;} .ws .wsdisplay { padding: 0 2px; height:18px; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; margin:1px 0; border-radius:2px; } .ws .wsclear { position:relative; left:-2px; width:18px; background-image: url(../images/svg/maxccbuttons/wsclear.svg); border-top-left-radius:0px; border-bottom-left-radius:0px; border-top-right-radius:2px; border-bottom-right-radius:2px; background-repeat: no-repeat; background-position: center; background-size: 80%; } .ws .wssearch { border:none; width:50px; /* Flex will resize this, but it must be set to prevent that the display label element gets too narrow. */ } .ws .wsfind { border:none!important; position:relative; background-image: url(../images/svg/maxccbuttons/wssearch.svg); width:18px; } .wsfindpreload > .wsfind { margin-right: 5px; margin-top: 1px; } .ws input:focus { outline:none!important; } .ws > .wsprev, .ws > .wsnext { margin-left: 2px; } .wsprev {color:transparent !important; vertical-align:middle;margin-left:2px;} .wsnext {color:transparent !important; vertical-align:middle;margin-left:2px;} /* Override hover color on selector buttons, otherwize < and > will be visible when hovering the buttons */ a.wsprev:hover, a.wsnext:hover { color: transparent!important; } /* ws Flex settings */ .wssearch {min-width:50px;} .wsNoData > .wsdisplay, .wsNoData > .wsclear {display:none;} .wsRead {background-color:lightgrey;} .wsRead > .wsclear, .wsRead > .wssearch, .wsRead > .wsfind, .wsRead > .wsprev, .wsRead > .wsnext {display:none;} .wsRead > .wsdisplay {width:100%;} .wsfind, .wsclear, .wsnext, .wsprev {flex:none;} .wssearch {flex-grow:1;} .hidden {display:none;} /* Keep this one behind .ws classes! And do NOT use !important, serveral things will go wrong, i.e. the megamenus will not show. */ /* End Standard Controls */ .PeriodSelector {position:relative; margin-bottom:0.5em;} .PeriodSelector > .overlay {position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0.75); display: none;} .PeriodSelector li.selected {background-color:#e0e0e0;} .PeriodSelector > .btn {width:2.5em; padding-left:0; padding-right:0;} .PeriodSelector > .btn[period="Today"] {width:6em;} .PeriodSelector > .Period {text-align:center; align-content:center; height:100%; cursor:pointer; font-weight:bold;} .PeriodSelector > .Period > ul {min-width: 0;} /* DATAGRID STYLE */ .hover>tbody>tr:hover {background-color:#e4e4e4; cursor:pointer; transition-duration:0.3s;} .dataGrid {border-collapse:separate; line-height:21px; border-spacing:0; clear:both; border-color:transparent;} .dataGrid thead tr {background-color: #f6f6f6;} .dataGrid thead tr th, .dataGrid thead tr td, .dataGrid tfoot tr td {padding: 4px 6px; font-weight:bold; border:0;} .dataGrid thead tr:last-child th, .dataGrid thead tr:last-child td {border-bottom:1px solid dimgrey;} .dataGrid tfoot tr:first-child td {border-top:1px solid dimgrey;} .dataGrid tbody td {padding: 4px 6px; border:0; border-top:1px solid #ddd;} .dataGrid span, .dataGrid label {margin-top: 0!important;} .dataGridNoBorder td {border:none; } .sortasc {background-image: url('../images/sortascdark.png'); background-repeat:no-repeat; background-position:2px center; padding-left: 10px !important;} .sortdesc {background-image: url('../images/sortdescdark.png'); background-repeat:no-repeat; background-position:2px center; padding-left: 10px !important;} .dgTitle {font-weight: bold;} .dgItem:nth-child(odd) {background-color: #fafafa;} .dgItem:nth-child(even) {background-color: #fff;} .dgSelectedItem {background-color:#D0D0D0; background: linear-gradient(to bottom, #D0D0D0 0%, #DDDDDD 50%, #D0D0D0 100%);} .dgMouseOverItem {background-color:#C7C7C7;color:Black;} .dataGridVerzuimkaart,.dgCell,.RosterGridAlternatingColumnStyle,.popuptooltip,.SSDItem {background-color:#f6f6f6;} @media screen and (max-width: 575.98px) { /* xs only */ .dataGrid:not(.noPivot) {width:100%; line-height:inherit; } /* Force table to not be like tables anymore, but pivot it per row, see also class dataGridPivot for general use indepent of screen size. */ .dataGrid:not(.noPivot) table, .dataGrid:not(.noPivot) thead, .dataGrid:not(.noPivot) tbody, .dataGrid:not(.noPivot) th, .dataGrid:not(.noPivot) td, .dataGrid:not(.noPivot) tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .dataGrid:not(.noPivot) > thead > tr { position: absolute; top: -9999px; left: -9999px; } .dataGrid:not(.noPivot) tr { border-bottom: 1px solid #ccc; padding-bottom:10px; margin-bottom:4px; } .dataGrid:not(.noPivot) > tbody > tr > td, .dataGrid:not(.noPivot) > tfoot > tr > td { /* Behave like a "row" */ position: relative; padding-left: 40%; white-space: normal; text-align:left; border-top: 1px solid transparent !important; } .dataGrid:not(.noPivot) > tbody > tr > td.colRight, .dataGrid:not(.noPivot) > tfoot > tr > td.colRight { padding-right: 30%; } .dataGrid:not(.noPivot) td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ left: 6px; width: 40%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: normal; overflow:hidden; text-overflow:ellipsis; } /* Label the data */ .dataGrid:not(.noPivot) td:before { content: attr(data-title); } } /* BEGIN DATAGRID PIVOT STYLE */ /*.dataGrid {width:100%; line-height:inherit; }*/ /* Force table to not be like tables anymore, but pivot it per row, see also class dataGridPivot for general use indepent of screen size. */ .dataGridPivot table, .dataGridPivot thead, .dataGridPivot tbody, .dataGridPivot th, .dataGridPivot td, .dataGridPivot tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .dataGridPivot > thead > tr { position: absolute; top: -9999px; left: -9999px; } .dataGridPivot tr { border-bottom: 1px solid #ccc; padding-bottom:10px; margin-bottom:4px; } .dataGridPivot > tbody > tr > td, .dataGridPivot > tfoot > tr > td { /* Behave like a "row" */ position: relative; padding-left: 40%; white-space: normal; text-align:left; } .dataGridPivot > tbody > tr > td:nth-child(odd) {background-color: #fafafa;} .dataGridPivot > tbody > tr > td:nth-child(even) {background-color: #fff;} .dataGridPivot > tbody > tr > td.colRight, .dataGridPivot > tfoot > tr > td.colRight { padding-right: 30%; } .dataGridPivot td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ left: 6px; width: 40%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: normal; overflow:hidden; text-overflow:ellipsis; } /* Label the data */ .dataGridPivot td:before { content: attr(data-title); } /* END DATAGRID PIVOT STYLE */ /* BEGIN PlaceHolderList styles BEGIN */ .DeleteItemTrue, .DeleteItemFalse { width:60px; border-left-style:solid; border-left-width:5px; background-color:#f6f6f6; vertical-align:middle; } .DeleteItemTrue { border-left-color:DimGray; } .DeleteItemFalse { border-left-color:#f6f6f6; } .DeleteAll { cursor: pointer; position: absolute; margin-left: 10px; } .AddItem { width:35px; background-color:#f6f6f6; padding-left:5px; vertical-align:middle; } thead span[headeritem="1"] {margin:0;} .dataGridPlaceHolderList {margin-top:6px;} .dgPhlHeader {font-weight: bold;background-color: #f6f6f6; line-height:20px; } .dgPhlHeader.stickyRow > th {background-color: #f6f6f6;} .dgPhlHeader a {} .dgPhlHeader th {text-align:left;} .dataGridPlaceHolderList thead tr:last-child th, .dataGridPlaceHolderList thead tr:last-child td {border-bottom:1px solid dimgrey;} .dataGridPlaceHolderList tbody + thead tr:last-child th, .dataGridPlaceHolderList tbody + thead tr:last-child td {border-bottom-color: transparent;} .dataGridPlaceHolderList tbody + thead tr:first-child th, .dataGridPlaceHolderList tbody + thead tr:first-child td {border-top: 1px solid dimgrey;} .dgPhlHeader thead tr:last-child th, .dgPhlHeader thead tr:last-child td {border-bottom:1px solid dimgrey;} .dgPhlItem {vertical-align:top;padding:0;} .dgPhlPager {background-color:#EFEFEF;color: Black;vertical-align:top;padding:0;margin-right:10px;} .dgPhlItem td {padding:1px 1px 1px 4px;} .dgPhlItem:nth-child(odd) {background-color: #fafafa;} .dgPhlItem:nth-child(even) {background-color: #fff;} .dgPhlTotal td {background-color:#EFEFEF;font-weight: bold;vertical-align:top;padding:1px 1px 1px 4px;} .dgPhlItem .cbKey {margin-top:1rem !important;} .timesheet .dgPhlItem {line-height: 30px;} /* END PlaceHolderList styles END */ .nopadding {padding:0;} .dataGridVerzuimkaart {border: #FFFFFF 0 solid;line-height: 20px;width: 100%;color: Black;vertical-align:top;} .dataGridVerzuimkaart td {border: #FFFFFF 1px solid;} .dataGridVerzuimkaart img {margin:auto; display:block;} .dataGridVerzuimkaart span {position:relative; width:100%; text-align:center; top:-1.5em;} .dataGridVerzuimkaart thead span {text-align:center; width:100%; position:relative; top:-1.6em; height:1em; padding:0;} .dataGridVerzuimkaart th {border: #FFFFFF 1px solid; text-align:center;} .dataGridVerzuimkaart th a {color:dimgrey;} .dataGridVerzuimkaart th.sortasc {background-image:url('../images/sortascdark.png'); background-repeat:no-repeat; background-position:2px center; padding-left: 10px !important;} .dataGridVerzuimkaart th.sortdesc {background-image:url('../images/sortdescdark.png'); background-repeat:no-repeat; background-position:2px center; padding-left: 10px !important;} .dataGridVerzuimkaartNaam, .dataGridVerzuimkaartAfdeling {width:102px;} .dataGridVerzuimkaartNaam > span, .dataGridVerzuimkaartAfdeling > span {text-overflow:ellipsis; white-space:nowrap; width:100px; overflow:hidden; text-align:left; top:0;} .idg {display:inline-block; width:auto; vertical-align:top;} /* Inline DataGrid */ /* DataGrid DataBound events */ .dgEmptyItem {background-color:White;} .dgItemBold {font-weight:bold;} .dgItemItalic {font-style:italic;} .dgItemRed, .dgItemRed a {color:FireBrick !important;} .dgItemYellow, .dgItemYellow a {color:DarkGoldenrod !important;} .dgItemBrightYellow, .dgItemBrightYellow a {color:Yellow !important;} .dgItemGreen, .dgItemGreen a {color:DarkGreen !important;} .dgItemBlue, .dgItemBlue a {color:DarkBlue !important;} .dgItemBoldBlue {font-weight:bold;color:DarkBlue;} .dgItemBackgroundRed {background-color: #F08080 !important;} .dgItemBackgroundFirebrick {background-color: firebrick !important;} .dgItemBackgroundBlue {background-color: #00b4cc !important;} .dgItemSeparator td {border-bottom:lightgrey 2px solid !important;} .dgItemSmall {line-height:0px;} /* Usefull for empty seperator rows */ /* Classes for showing totals in datagrids */ .dgFooter {background-color:#ffffaa;font-weight:bold;} .dgItemTotal {background-color:#ffffaa;font-weight:bold;} .dgItemTotalRed {background-color:#ffffaa;color:FireBrick;font-weight:bold;} /* Other datagrid classes */ .dgCellBold {font-weight:bold;} .dgCellBorderRight {border-right:#000 2px solid !important;} .dgCellItalic {font-style:italic;} .dgCellLineThrough {text-decoration:line-through;} .dgCellBlack {color:Black;} .dgCellRed, .dgCellRed a, .dgCellRed span, .dgCellRed label {color:FireBrick !important;} .dgCellYellow {color:DarkGoldenrod !important;} .dgCellBrightYellow {color:Yellow !important;} .dgCellGreen, .dgCellGreen a, .dgCellGreen span, .dgCellGreen label {color:DarkGreen !important;} .dgCellWhite {color:White !important;} .dgCellbgRed {background-color: #F08080;} .dgCellbgRed a:visited {color: Black;} .dgCellbgRed a:link {color: Black;} .dgCellbgRed a:hover {color: Black;} .dgCellbgLightRed {background-color: rgba(255, 199, 199, 1);} .dgCellbgLightRed a:visited {color: Black;} .dgCellbgLightRed a:link {color: Black;} .dgCellbgLightRed a:hover {color: Black;} .dgCellbgGrey {background-color:LightGrey;} .dgCellbgYellow {background-color:DarkGoldenRod;} .dgCellbgGold {background-color:#FFE44F;} .dgCellbgBrightYellow {background-color:Yellow;} .dgCellbgGreen {background-color:#90EE90;} .dgCellbgLightGreen {background-color:#32CD32;} .dgCellbgOrange {background-color:#F4A460;} .dgCellbgGreen a:visited {color: Black;} .dgCellbgGreen a:link {color: Black;} .dgCellbgGreen a:hover {color: Black;} .dgCellSeparatorColumn {background-color: silver; width: 26px;} .dgCellFooter {border-top: black double !important;} .dgCellFooterbgRed {background-color: #F08080; border-top: black double !important;} .dgCellFooterbgGreen {background-color: #90EE90; border-top: black double !important;} .dgCellCode {white-space:pre-wrap; font-family: Consolas, monospace; font-size: 12px;} .dgUnderline {background-color: #B1A596;} .dgHighLine {vertical-align: bottom; font-weight:bold;} .dgNegative {color:Red !important;} .dgItemRight {text-align: right;} .dgCellMax200 {max-width: 200px; overflow: hidden; text-overflow: ellipsis;} .dgCellFill {max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis;} .dtGrip100 td:nth-of-type(1) ~ td {width: 100px; text-align:center;} .rotate {transform: rotate(-90deg);} .flip {transform: rotate(-180deg); } .DrillDownGrid {min-height:6em; background-color:#ccc; width:fit-content; margin:1em 0;} /* Cell alignments */ .colLeft {text-align:left !important;} .colCenter {text-align:center !important;} .colRight {text-align:right !important;} .colTop {vertical-align:top !important;} .colMiddle {vertical-align:middle !important;} .colBottom {vertical-align:bottom !important;} [v-cloak] { display: none !important; } .JSONListViewContainer {border-top:1px solid dimgrey;} /* ++ Verzuimkaart DataGrid ++ */ .weekendday { background-color: #808080; height: 20px; margin-top:3px; min-width:20px; } .weekday { background-color:#dddddd; height:20px; margin-top:3px; min-width:20px; } .noday { background-color: black; height: 20px; margin-top:3px; min-width:20px; } /* -- Absence DataGrid -- */ .NoBorders {border-collapse:collapse;} .NoBorders td, .NoBorders th {border:none!important;} .PagingContainer > .PageSizer, .PagingContainer > .Pager {display:inline-block; vertical-align:middle;} .PagingContainer label {font-weight:bold;} .PageSizer {white-space:nowrap;} .PageSizer label {padding-right:1em;} .Pager {margin-left:1em;} .Pager > button, .Pager > a {margin-left:0.4em;} /* -------------- Datagrids -------------- */ .TextBoxFilter {background-image: url("../Images/svg/interface-and-web/filter-filled-tool-symbol-with-padding.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); background-repeat:no-repeat; background-position: right; padding-right: 20px !important; margin-top: 10px !important;} /* -------------- Vertical Menus -------------- */ .Menu {background-color:#FFFFFF;color:#555555; } .Menu > li > a {font-size: 1.4em; font-weight: bold; width:140px;text-decoration:none; margin-top:0.6em;} .Menu > li {background-image:url('/Skins/Appel/graphics/MenuBg.jpg');height:35px; text-align: left; padding-left: 25px; cursor: default;} .Menu.CS > li {background-color:#FFFFFF;color:#555555;} .Menu.CS > li > a:link {color:#555555;} .Menu.CS > li > a:visited {color:#555555;} .Menu.CS > li > a:hover {color:#333333;text-decoration:none;} .Menu.CIS {margin-top:-20px; } .Menu.CIS > li {background-color:#FFFFFF;color:#555555;} .Menu.CIS > li > a:link {color:#555555;} .Menu.CIS > li > a:visited {color:#555555;} .Menu.CIS > li > a:hover {color:#333333; text-decoration:none;} .Menu.CS > li.selected {background-image:url('/Skins/Appel/graphics/MenuSelected.jpg');color:#333333; background-position:left center; height:35px;text-align:left; padding-left: 25px; cursor:pointer;} .Menu.CIS > li.selected {background-image:url('/Skins/Appel/graphics/MenuSelected_ci.jpg');color:#333333; background-position:left center; height:35px;text-align:left; padding-left: 25px; cursor:pointer;} .Menu.CS > li.selected > a {color:#FFFFFF; } .Menu.CS > li.selected > a:hover {color:#FFFFFF; } .Menu.CIS > li.selected > a {color:#FFFFFF;} .Menu.CIS > li.selected > a:hover {color:#FFFFFF;} .Menu > span {display:block; background-image:url('/Skins/Appel/graphics/MenuBg.jpg');height:35px;text-align:center; text-align: left; padding-left: 25px; cursor: default;} /* -------------- Vertical Menus -------------- */ .Context {font-size:larger;font-weight:bold;background-color:#86B3C6;color:#FFFFFF;height:25px;text-align:center;} .ContextRow {padding-left: 10px; color:#FFFFFF; background-color:#9cc718; vertical-align:middle;font-weight:bold;background-image:url('/Skins/Appel/graphics/Context.jpg');height:25px;text-align:left; background-repeat: repeat-x; } #pnlObjectPopup {margin-top: -20px;margin-left:150px;} #SelectedValueMainS {background-color:white; margin:0; padding:0; font-size:medium; width:40em;} .ContentHolder {background: White url('/Skins/Appel/graphics/ContentFlow.jpg') repeat-x;} .NoContextRow {background: #4c680b url('/Skins/Appel/graphics/ContentBackground.jpg') repeat-x; clear: both;border: none; height: 100%; overflow: auto; width: 100%; } .LibraryContent {background-color: White; clear: both;border: none;height: 100%; width: 100%; padding-left: 5px; padding-right: 5px;} .LoginPage {background-color: inherit;} .LoginTitle {display:none;} .LoginInput {width:170px;} .LoginInput::placeholder {color: white;} .License {color: White; font-size: 12pt; font-weight:bold; margin-left: 16px; margin-right: 30px;} #LoginName {color: White; font-size:10pt; margin-right: 4px;} .LoginLogout {position:relative;margin:2px 0 -2px 4px;} .support {color: White; font-size:8pt; margin-left: 8px;} .imgRight {border:none;} .ParametersTable {border-style: none;} .ParametersTable td {border-right: 5px solid transparent;} .SearchResultTitle {color: #C3C3C3; font-size:medium;} .SearchResultText {color: #000000;} .SearchResultMark {background-color:#FFFF00;color:#000000} .SearchHelper {font-size:medium; min-width:20em;} .SearchResultPopupInfo {color:dimgrey; background-color:white; border:solid 1px lightgrey; opacity:1.0;} .SearchResultPopupInfo a {color:dimgrey; height:1.5em; display:table-row;} .SearchResultPopupInfo a:hover, .SearchResultPopupInfo a.selected {background-color:Gainsboro;} .SearchResultPopupInfoHighlight {font-weight:bold; color:#404040; width:auto; padding:0; } .InfoContentSearchResultMark {background-color:#FFFF00;color:#000000} .InfoTitleSearchResultMark {background-color:#FFFF00;color:#000000} .InfoIntroSearchResultMark {background-color:#FFFF00;color:#000000} .wizoptout > div {position:absolute; font-size:small; margin-left:790px; margin-top:-24px; width: 400px;} /* This is the style the table around a webpart gets when it is dirty */ .DirtyWebPart {border-right: solid 5px #C3C3C3; padding-right: 0; background-color: #EEEEEE;} .CleanWebPart {border-right: solid 5px transparent;} .Holiday, .Holiday .Link {color:DarkGoldenrod; font-weight:bold;} .InfoList {width:100%;border: none 0 Gray;} .InfoTitle {background-color:#DDDDDD;color:Black;font-size:small ;font-weight:bold;} .InfoDate {background-color:#DDDDDD;text-align:right;color:Black;font-size:x-small;} .InfoIntro {font-style:italic; font-size:small; padding:0 0 15px 0 /* Keep in sink with trumbowyg, use here padding because td elements don't have margins */;} .InfoContent {font-size:small;} .LoketInfoItem {border: none 0 Gray} .LoketInfoTitle {color:#114aa3;font-size:small ;font-weight:bold;} .LoketInfoDate {color:Black;} .LoketInfoIntro {font-style:italic;font-size:small;color:Gray;} .LoketInfoContent {font-size:small;} .RegisterGroup {color:DarkGoldenrod; font-weight:bold;} .NoRegistration {vertical-align:middle !important;} .inlineReport {height:500px; width: 100%;} .showreportbuttons {margin-top:1em;} .showreportbuttons button {display:inline-block; width:20em; margin:1em 1em 1em 0;} .exportreportbuttons button { background-color: transparent; border: transparent 0; box-shadow: none; } #divContentInside {padding:0.5rem 0.5rem 1rem 1.5rem; overflow-x:auto;} .WebpartInfo {display:none; position:absolute; background-color:white; border:2px solid #555555; padding:4px; overflow:auto; height:400px; width:900px; z-index:12;} .WebpartItemInfo {border:1px solid #777777; padding:4px; z-index:10; overflow:hidden; color:var(--text-color); background:#ffffcc url('../images/Icons16/closegrey.png') no-repeat right top;} @media screen and (min-width: 576px) { .WebpartItemInfo {max-width:400px;} } @media screen and (max-width: 575.98px) { .WebpartItemInfo {max-width:90%;} } .InfoButton {margin-left:-16px; margin-top:1px; position:absolute;} .InfoButton > span, .AdministratorInfoButton > span {font-size:1.5rem!important; color:#b5b5b5;} .InfoButton > span:hover, .AdministratorInfoButton > span:hover {color:#404040;} .AdministratorInfoButton {vertical-align:middle;} #ToolsMenuArea .InfoButton {margin-left:-26px; margin-top:-2px;} .Indent0 {padding-left:0 !important;} .Indent10 {padding-left:10px !important;} .Indent20 {padding-left:20px !important;} .Indent30 {padding-left:30px !important;} .Indent40 {padding-left:40px !important;} .Indent50 {padding-left:50px !important;} .Indent60 {padding-left:60px !important;} .Indent70 {padding-left:70px !important;} .Indent80 {padding-left:80px !important;} .Indent90 {padding-left:90px !important;} .Indent100 {padding-left:100px !important;} /* NOTE: Class vertical-text is the css way to display text vertically. This must replace .verticaltext and .Matrix th .verticaltext. But some work there has to be done.*/ .vertical-text {writing-mode:sideways-lr;} /********************************************************************/ /* Rooster styles */ /********************************************************************/ .RosterTable input {width:4.4rem; text-align:center;} .RosterTable thead {text-align:center;} .RosterTable tfoot td:first-child {text-align:right;} /* Spacing between period columns */ .RosterTable td:nth-child(4), .RosterTable td:nth-child(6), .RosterTable .dgHeader:nth-child(1) th:nth-child(3), .RosterTable .dgHeader:nth-child(1) th:nth-child(4), .RosterTable .dgHeader:nth-child(2) th:nth-child(4), .RosterTable .dgHeader:nth-child(2) th:nth-child(6) { padding-left: 20px; } /********************************************************************/ /* Roster viewer */ /********************************************************************/ .verticaltext {filter:flipv fliph; transform-origin:left; transform:translate(-20%, -40%) rotate(90deg); height:70px; } .RosterGridColumnStyle {background-color: #DDDDDD;} .RosterGridHeaderStyle {background-color: #FFFF00;vertical-align: bottom;} /* ICON BUTTONS */ /* Note: Most of the original bitmaps of MaxCC had some white space or padding around it (some exceptions like the GO button). The svg images don't have any padding. So, for compatibility, the padding is simulated by adding a margin around the pictures of 1px (padding doesn't work). */ .NavigateTo, .maxcc_search, .maxcc_cancel, .maxcc_manage, .maxcc_left, .maxcc_right, .maxcc_add, .wsprev, .wsnext, .maxcc_save, .maxcc_delete, .maxcc_copy , .maxcc_edit, .maxcc_reset, .maxcc_execute, .maxcc_actiontarget, .maxcc_imagebrowser , .maxcc_save, .maxcc_save_plus_1, .maxcc_save_plus_7, .maxcc_save_right_arrow, .maxcc_save_minus_1, .maxcc_save_minus_7, .maxcc_save_left_arrow , .icon-rooster-edit {cursor:pointer; border:none; height:20px; width:20px; background-color:transparent; background-repeat: no-repeat; margin:0 .2rem; } .maxcc_save_plus_1, .maxcc_save_plus_7, .maxcc_save_right_arrow, .maxcc_save_minus_1, .maxcc_save_minus_7, .maxcc_save_left_arrow {width:54px;} .maxcc_execute {background-image: url('../images/svg/maxccbuttons/execute.svg');} .NavigateTo {background-image: url('../images/svg/maxccbuttons/navigation.svg');} .maxcc_search {background-image: url('../images/svg/maxccbuttons/search.svg');} .maxcc_cancel {background-image: url('../images/svg/maxccbuttons/cancel.svg');} .maxcc_manage {background-image: url('../images/svg/maxccbuttons/manage.svg');} .maxcc_left, .wsprev {background-image: url('../images/svg/maxccbuttons/left.svg');} .maxcc_right, .wsnext {background-image: url('../images/svg/maxccbuttons/right.svg');} .maxcc_add {background-image: url('../images/svg/maxccbuttons/add.svg');} .maxcc_save {background-image: url('../images/svg/maxccbuttons/save.svg');} .maxcc_save_plus_1 {background-image: url('../images/svg/maxccbuttons/save_plus_1.svg');} .maxcc_save_plus_7 {background-image: url('../images/svg/maxccbuttons/save_plus_7.svg');} .maxcc_save_right_arrow {background-image: url('../images/svg/maxccbuttons/save_right_arrow.svg');} .maxcc_save_minus_1 {background-image: url('../images/svg/maxccbuttons/save_minus_1.svg');} .maxcc_save_minus_7 {background-image: url('../images/svg/maxccbuttons/save_minus_7.svg');} .maxcc_save_left_arrow {background-image: url('../images/svg/maxccbuttons/save_left_arrow.svg');} .maxcc_delete {background-image: url('../images/svg/maxccbuttons/delete.svg');} .maxcc_copy {background-image: url('../images/svg/maxccbuttons/copy.svg');} .maxcc_edit {background-image: url('../images/svg/maxccbuttons/edit.svg');} .maxcc_reset {background-image: url('../images/svg/interface/reload.svg');} .maxcc_actiontarget {background-image: url('../images/svg/maxccbuttons/actiontarget.svg');} .maxcc_showfavorites {background-image: url('../images/svg/maxccbuttons/showfavorites.svg');} .maxcc_imagebrowser {background-image: url('../images/svg/android-app/image-2.svg');} .maxcc_printing {background-image: url('../images/svg/maxccbuttons/printing.svg');} .maxcc_Alert {background-image: url('../images/svg/maxccbuttons/cross-circle-white.svg');} .maxcc_Info {background-image: url('../images/svg/maxccbuttons/check-circle-white.svg');} .maxcc_font {background-image: url('../images/svg/maxccbuttons/font.svg');} .maxcc_pen {background-image: url('../images/svg/maxccbuttons/pen.svg');} .progress { color: Red; font-size: x-small; text-align:right; } /* This class is used for the popup on the chosen object */ .PopupInfo { position:absolute; overflow:auto; font-size:small; text-align: left; border-style: solid; background-color: #114aa3; color: White; white-space: nowrap; padding: 5px; display: none; opacity:0.90; z-index: 100000; } .PopupInfo span { display:inline-block; width:100px; font-weight: bold; padding-right: 5px; color: White; } .PopupInfo table { color: White; } .PopupInfo a {color:White;font-size: medium ; text-decoration:none;display:block; line-height: 1.5em;} .PopupInfo a:hover, .PopupInfo a.selected {color:Gray;} .ZelfloketSelectorBackground { background-image:url('../images/bgsel.png'); background-repeat:no-repeat; padding-top:10px; /* wg loket */ height:40px; /* wg loket */ width:540px; /* wg loket */ padding-left:10px; margin-top:5px; } .ZelfloketItemBackground { background-image:url('../images/bg.png'); background-repeat:no-repeat; padding-top:10px; padding-left:10px; margin-top:5px; } .ZelfloketItemBackgroundWide { background-image:url('../images/bgwide.png'); background-repeat:no-repeat; padding-top:10px; padding-left:10px; margin-top:5px; min-width:420px; } .ZelfloketItem { font-weight:bold; font-size:small; color: #114aa3;; text-decoration:none; cursor:pointer; } A:hover.ZelfloketItem {text-decoration:underline;} .ZelfloketItemToevoeging { font-weight:normal; color: Gray; text-decoration:none; vertical-align:text-top; } .btnDelete, .btnReset, .btnSpec { cursor:pointer; } .btnHidden { visibility:hidden; } /* The button is visible and displayed in browser terms, but not for the user */ .btnStealth { width:0; height:0; border: 0 none transparent; } /* Bootstrap Tooltip styling */ .tooltip-inner, .tooltip-arrow {color:dimgrey; background-color:#f2f2f2; border:1px solid #aaaaaa; font-size:1rem;} .tooltip.show {opacity:1;} /* Bootstrap Tooltip styling */ #LicenseBanner {position:relative; z-index:100; height:20px;margin-top:4px; margin-left:10px; background:transparent url('/Skins/Appel/graphics/licenseright.png') no-repeat right top;} #LicenseBannerLeft {white-space:nowrap; height:20px; margin-right:10px; background:transparent url('/Skins/Appel/graphics/licenseleft.png') no-repeat left top;} /* Classes for .Net 4.0 disabled non input controls */ a.aspNetDisabled, input[type="submit"].aspNetDisabled {color:#999999;cursor:default;} .horizontalradiolist > .aspNetDisabled, .verticalradiolist > .aspNetDisabled {margin:0;} .popuptooltip { position:absolute; border:1px solid #aaaaaa; display:none; padding:2px; width:200px; font-style:normal; font-weight:normal; color:black; white-space:normal; text-align:left; line-height:normal; margin-left:22px; margin-top:-6px; } /* Text area expander: a span with an image inside */ .taExpander {height:0; width:0; position:relative; vertical-align:top;} .taExpander > img {cursor:pointer; position:absolute; top:-7px;} /* Wait popup */ .processing { position:absolute; background-color:white; border:solid 2px lightgrey; padding:10px; white-space:nowrap; } /* Animated wait using wait.svg */ .wait { background-image: url('../images/wait.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791'); /* The animated svg */ background-repeat: no-repeat; background-size: auto; height: 30px; width: 30px; } /* Standard Link Styles */ .Link {color:black; text-decoration:none;} /* text-decoration:none; sepciaal voor FireFox */ .Link:hover span {text-decoration:underline;} /********************************************************************/ /* Leave distribution styles */ /********************************************************************/ #totalDistributed {width:40px; border-color:transparent;} .timesURS, .timesROO {width:80px; text-align:center; white-space:nowrap;} .actionURS, .actionROO {font-weight:normal; text-align:center;} /********************************************************************/ /* Timesheet styles */ /********************************************************************/ /* Timesheet Rostering */ /* Compass */ .copycompass {background-image: url('../images/copycompass.png'); height:59px; width:59px; position:relative; float:right;} .compassUp {height:13px; width:13px; position:absolute; top:13px; left:23px; cursor:pointer; } .compassDown {height:13px; width:13px; position:absolute; top:33px; left:23px; cursor:pointer; } .compassLeft {height:13px; width:13px; position:absolute; top:23px; left:13px; cursor:pointer; } .compassRight {height:13px; width:13px; position:absolute; top:23px; left:33px; cursor:pointer; } .compassCopyUp {height:13px; width:13px; position:absolute; top:0; left:23px; cursor:pointer; } .compassCopyDown {height:13px; width:13px; position:absolute; top:46px; left:23px; cursor:pointer; } .compassCopyLeft {height:13px; width:13px; position:absolute; top:23px; left:0; cursor:pointer; } .compassCopyRight {height:13px; width:13px; position:absolute; top:23px; left:46px; cursor:pointer; } .tt {margin-left:4px; width: 34px; color:DarkGreen; text-align:right;} .ttRed {color:FireBrick;} .ntb {width:30px; margin:auto !important; text-align:center;} .aNPr {color:Blue !important;} .aPr {color:Black;} .aNV {color:FireBrick !important;} .wpRed {border-right: solid 5px FireBrick !important; padding-right: 0;} .noschedule {color:#936B09; width:84px; padding-left:2px !important; text-align:center;} .schedule {background-color:#E1E1E1; color:#936B09; cursor:pointer; width:88px; padding:2px !important; text-align:center; vertical-align:middle;} td.schedule span {margin-top:0;} .scheduled {background-color:#FFE2AA; color:DarkBlue; font-weight:bold;} /* (Non-)Productive */ .scheduledP {background-color:#D1EAF3; color:DarkBlue; font-weight:bold;} /* Productive */ .scheduledNP {background-color:#FFD5D5; color:FireBrick; font-weight:bold;} /* Non-Productive */ .scheduledHEW {text-decoration:overline; } /* Scheduled Here AND ElseWhere */ .scheduledEW {background-color:#FFE2AA; color:#936B09; font-weight:bold; text-decoration:overline; } /* (Non-)Productive Scheduled ElseWhere, but not on the current department */ .scheduledEWP {background-color:#D1EAF3; color:#936B09; font-weight:bold; text-decoration:overline; } /* Productive Scheduled ElseWhere, but not on the current department */ .scheduledEWNP {background-color:#FFD5D5; color:#936B09; font-weight:bold; text-decoration:overline; } /* Non-Productive Scheduled ElseWhere, but not on the current department */ .scheduledAvConflict {border: dashed 1px FireBrick !important;} /* Conflict between the schedule and availability */ .scheduledConflict {border: double 3px Red !important; padding:0px !important;} /* Conflict between shifts within the schedule */ .youthConflict::before {content:"J"; margin-right:1px; padding-left:2px; padding-right:2px; color:White; background-color:FireBrick; font-weight:bold; } .timesheet .youthConflict::before {position:absolute; height:2rem; line-height:2rem; margin-top:0.5rem; margin-left:-0.5rem} /* Only in URS */ .shiftConflict::before {content:"šŸ•˜"; margin-right:1px; padding-left:1px; padding-right:2px; font-weight:bold; } /* padding-left of 1px looks better than 2px for this symbol */ .isLeave:before, .isSick:before {content:""; width:16px; height:16px;display:inline-block; } .isLeave:before {background-image:url("../Images/svg/updatedMenuIcons/Verlof.svg?color=darkgreen"); background-repeat:no-repeat;} .isSick:before {background-image:url("../Images/svg/customer-services/review.svg?color=firebrick"); background-repeat:no-repeat;} .issick, .isleave {width:16px; height:16px;} .aday, .rday {width:40px; height:2em; overflow:hidden; float:left;} /* OLD */ .rday {border-right:4px solid white;} /* OLD */ .actday, .svcday, .remday {overflow:hidden; font-weight:normal; text-align:left; height:1.4em;} .remday {font-style:italic;} #toggleTimesheetSequence{cursor:pointer; margin-left:1em; margin-top:20px; text-decoration:underline;} #toggleTimesheetInfo {margin-left: 50px; cursor:pointer;} #toggleLPGInfo {cursor:pointer;} td.LPGAmount {text-align:right; padding-right: 12px;} div.LPGAmount {text-align:center; padding-right: 4px; height:1.75em; border:1px solid lightgrey; background-color:lightgrey;} .LPGCategory {padding:1px 0; height:2rem;} .schedulepersonname {width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:2px;} .schedulelabel {padding-top:4px;width:9em;} .scheduletime {width:40px;} .scheduleAmount {text-align: right; width: 56px;} .scheduleSelected {border: solid 1px #00008B !important;} .scheduleButtonArea {float:right; margin-right: 100px;} .scheduleButtonArea > input {margin-bottom:4px;} .balancesDetailed td, .balancesDetailed th {border-right:4px solid transparent;} .balancelabelHeader {font-weight:bold; width:30px; vertical-align:bottom;} .balanceAmountHeader {font-weight:bold; width:54px; text-align:right; vertical-align:bottom;} .balancelabel {} .balanceAmount {text-align:right;} .a1, .a2, .a3 {width: 70px;} .buttonremark {position:relative; cursor:pointer; display:inline-block; z-index:1; overflow:hidden; width:10px; height:10px; margin:6px 2px 0 -12px; background: transparent url('../images/svg/maxccbuttons/balloon.svg') no-repeat left top;} .buttonremark.add {background: transparent url('../images/svg/maxccbuttons/balloonempty.svg') no-repeat left top;} .buttonremark.expanded {padding:2px; background: rgb(102,102,102) url('../images/icons16/maxcc_16x16_check.png') no-repeat right top; } .buttonremark.big {width:20px; height:20px; vertical-align:bottom; margin:0 6px;} .timesheet .buttonremark.big {vertical-align: middle;} .remark {border: solid 1px #ababab !important; box-shadow: 2px 2px 5px grey; z-index:2;} .remarkText {display:block; min-height: 82px; margin:0; border:none; padding:.3rem; } .remarkTitle {font-size:xx-small; z-index: 3; font-weight:bold; display:block; background-color:grey; color:white; padding:.3rem; cursor:pointer; margin-top:0!important;} .remarkText.big {min-width:384px; min-height: 123px;} .pubremtext {display:inline-block; width:600px; min-height:82px; max-width:100%;} /* Used in scheduling */ .TemporaryIn {color:FireBrick;} .TemporaryOut {color:DarkGoldenrod;} .TemporaryOff {color:DarkBlue;} .buttondayremark {cursor:pointer; display:inline-block; z-index: 1; overflow:hidden; width:10px; height: 10px; background: transparent url('../images/svg/maxccbuttons/balloon.svg') no-repeat left top;} .buttondayremarkAdd {cursor:pointer; display:inline-block; z-index: 1; overflow:hidden; width:10px; height: 10px; background: transparent url('../images/svg/maxccbuttons/balloonempty.svg') no-repeat left top;} .hl {width:7px;} .hlhigh {background: transparent url('../images/hlhigh.png') no-repeat center center;} .hlok {background: transparent url('../images/hlok.png') no-repeat center center;} .hllow {background: transparent url('../images/hllow.png') no-repeat center center;} .scheduleTotal {width:87px; text-align:right; padding-right:12px;} .scheduleGrandTotal {font-weight:bold; text-align:right; padding-right:24px;} .sd {text-align:center; vertical-align:bottom; margin-left:var(--servicecontainer-left-margin);} .sddr {width:var(--servicecontainer-width) !important; } textarea.sddr {height: 44px; overflow:auto; color:black; font-weight:normal; text-align:left;} .sddr svg {cursor: pointer;} .scheduleDateHeader {text-align:center !important; vertical-align:bottom;} .scheduleDateHeader span{white-space:nowrap;} .timesheetShowDate, .timesheetShowDateStart, .timesheetShowDateEnd {padding-right:20px;} .availability tr {height:40px; font-weight:bold;} .availability td, .availability th {width: 30px; text-align:center !important; vertical-align:middle !important;} .noavailability {font-weight: normal !important; font-style: italic; } .available {color:DarkGreen;font-weight:bold;} .notavailable {color:FireBrick;font-weight:bold;} .notavailableShort {color:FireBrick;font-weight:bold;font-size:larger;margin:-1em 0.25em;} .unavailable > :first-child::before {content:"āŒ"; color:white; font-size:0.5em; background-color:FireBrick; border:solid FireBrick 1px; padding:0.1em 0.2em; margin-right:1px; border-radius:100%; top:-0.3em; position:relative;} .mixedavailable {color:DarkGoldenrod;font-weight:bold;} .availabilityHidden {color:transparent;} .availabilityHidden > img {display:none;} .availabilityHidden > :first-child::before {content:""; color:transparent; background-color:transparent; border:solid transparent 0;} .availablerange {margin-top:5px; background-color:DarkGreen; height:10px; border-radius:3px;} .notavailablerange {margin-top:5px; background-color:FireBrick; height:10px; border-radius:3px;} .mixedavailablerange {margin-top:5px; background-color:DarkGoldenrod; height:10px; border-radius:3px;} .available0 {background: transparent url('../images/icons32/rsv0.png') center center no-repeat;} .available1 {background: transparent url('../images/icons32/rsv1.png') center center no-repeat; color:White; } .available2 {background: transparent url('../images/icons32/rsv2.png') center center no-repeat; color:White; } .available3 {background: transparent url('../images/icons32/rsv3.png') center center no-repeat; color:White; } .chav {display: inline-block; height: 24px; width: 24px; border: 2px solid #a0a0a0; margin-bottom: 0.5em; font-weight: bold; border-radius:24px; text-align: center; vertical-align: top; cursor:pointer; } .chavRO {background-color: White; border-color: transparent; cursor: default;} .chav0 {background-color: White;} .chav1 {background: #006400 url('../images/icons16/rsv1.png') 2px 2px no-repeat; color: White; } .chav2 {background: #ff0006 url('../images/icons16/rsv2.png') 1px 2px no-repeat; color: White; } .avdata {display: inline-block; padding: 0px 10px; width:100%; max-width:200px; } .avShortDate {margin-left:0.5em;} .ftime, .ttime {margin: 0px 20px 10px 0px;} .vhdr {width: 20px; color:blue; font-weight:bold; text-align: center; } .vbtn { width: 20px; height: 1.5em; color: blue; vertical-align: baseline; font-weight: bold; background-color: lightblue; cursor: pointer; text-align: center; position: relative; top: -0.2em; border-radius: 4px; } .Deviation, .Scheduled {text-align: center;} #TimeSheetLegenda {display:inline-block; background-color:white; padding:1em; border:2px solid dimgrey; vertical-align:text-top;} /* Timesheet Schedule Service Rostering */ .ssd {width:102px; text-align:center; border: 1px solid transparent; } /* Schedule Service Day (Header) */ .ssdi {width:var(--servicecontainer-width);} /* Schedule Service Day Items (container for persons for the service on that day) */ .personContainer {border: 1px dashed #d9d9d9;} .ssdiDroppable {border: 2px solid silver; } /* Schedule Service Day Item (container for one persons service on that day). Position relative and left/top -1px will position the item over the borders of ssdi. Display flex will allow center the text vertically. margin -1px will cover the dashed border of the ssdi container. */ /*.ssdip width 100% werkt niet bij verslepen*/ .ssdip {width:var(--servicecontainer-width); height:var(--servicecontainer-height); text-align:center; cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; line-height:1.2em; position:relative;} .ssdipP, .ssdipPNP, .ssdipNP, .ssdipOver, .serviceContainer .RegionService, .serviceContainer .OpenService {border-width:1px; border-style:solid; overflow:hidden;} .ssdipP {border-color:#80C5DD; background-color:#D1EAF3;} /* Scheduled Productive only */ .ssdipPNP {border-color:#FFBF43; background-color:#FFE2AA;} /* Scheduled Productive and NonProductive */ .ssdipNP {border-color:#FF6E6E; background-color:#FFD5D5;} /* Scheduled NonProductive only */ .ssdiDelete {background-image:url('../images/maxcc_inline_verwijderen_dienst.png'); background-repeat:no-repeat; background-position:right center; } .ssdipDelete {background-image:url('../images/maxcc_inline_verwijderen_persoon.png'); background-repeat:no-repeat; background-position:right center; } .ssdipCopy {background:url('../images/maxcc_inline_kopieren.png') no-repeat right center; } .ssdipOver {border-color:GoldenRod;} .ssdipElseWhere {text-decoration:overline;} .ssdipElseWhereOnly {color:#936B09; text-decoration:overline;} .ssdSvc {text-align:center; color:white;} .ssdSvc:not([serviceid=""]) {cursor:pointer;} /*.ssdSvc[nofsvcplanned="0"][nofsvcactual="0"] {border-color:transparent;} .ssdSvc:not(.ssdUnder):not(.ssdOver):not(.ssdOn) {border-color:transparent;}*/ .ssdUnder {background-color:#f6f6f6; color:var(--text-color) !important;} .ssdOn {background-color:#4dc17a;} .ssdOver {background-color:indianred;} .extraService .ssdOver, .emptyService .ssdOver, .extraentries .ssdOver {background-color:cornflowerblue;} .ssdNoSvc {background-color:#A8C1AD;} .ssdSvcAdd {background-image:url('../images/icons16/maxcc_16x16_plus.png'); background-repeat:no-repeat; background-position:right top; opacity:1;} .serviceContainer {width:var(--servicecontainer-width); margin-left:var(--servicecontainer-left-margin);} .serviceContainer > div {width:var(--servicecontainer-width); height:var(--servicecontainer-height); display:flex; align-items:center; justify-content:center;} .serviceContainer > div + div {margin-top: 2px;} /* Spacing between divs only */ .serviceContainer > div, .serviceContainer > div > div {border-radius:2px;} .serviceContainer > .ssdSvc {height:var(--service-nofplanned-height);} /* Make the element transparent. This is almost the same as visibility:hidden, but now child parts can be made visible. */ .serviceContainer[servicespresent="false"] {border-color:transparent; background-color:transparent; color:transparent;} .serviceContainer[servicespresent="false"] > .ssdSvcAdd {/*background-position:center top;*/ animation: fadeInOut 0.5s ease-in-out;} .ssdPNP {background-color:#FFE2AA; color:DarkBlue;} /* (Non-)Productive */ .ssdP {background-color:#D1EAF3; color:DarkBlue;} /* Productive */ .ssdNP {background-color:#FFD5D5; color:DarkBlue;} /* Non-Productive */ .ssdEW {background-color:#D8E2EE;} /* Scheduled, but not on the current department (Not applicable) */ /* Totals on services management page */ .totalSvcTitle {width:420px;} .totalSvcPerDay {width:50px; margin-right:2px; text-align:center;} .noSvcToDay {border-color:firebrick;} /* Totals on services scheduling for a department page */ .ssdiTotalSvcTitle {width:252px; padding:2px;} .ssdiTotalSvcPerDay {width:100px; margin:0 2px; text-align:center;} .ssdTotal {min-height:1.5em; margin-top:.2em; /* Keep margins and borders inline with .ssdSvc */ border: 2px solid transparent;} .ssdipState {float:left; height:var(--servicecontainer-height); width: 7px;} /* Keep height the same as class ssdip!! */ .ssdipRemark {float:left; height:var(--servicecontainer-height); width: 14px; background:transparent url('../images/icons/balloon.png') no-repeat center; } /* Keep height the same as class ssdip!! */ .ssdipClassification {position:absolute; height:var(--servicecontainer-height); margin-left:15em; width: 6em; text-align:center; text-overflow:ellipsis; white-space:nowrap; color:black;} /* Keep height the same as class ssdip!! */ .ssdipSkills {position:absolute; height:var(--servicecontainer-height); margin-left:21em; width:10em; text-align:left; text-overflow:ellipsis; white-space:nowrap; color:black;} /* Keep height the same as class ssdip!! */ .hll {background-repeat:no-repeat; background-position:center center;} .hll.high {background-image:url('../images/hlhighblue.png');} .hll.level {background-image:url('../images/hllevelblue.png');} .hll.low {background-image:url('../images/hllowblue.png');} .ssdiDelete.hll.high {background-image:url('../images/hlhighblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:center center, right center; } .ssdiDelete.hll.level {background-image:url('../images/hllevelblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:center center, right center; } .ssdiDelete.hll.low {background-image:url('../images/hllowblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:center center, right center; } .ssdipDelete.hll.high {background-image:url('../images/hlhighblue.png'), url('../images/maxcc_inline_verwijderen_persoon.png'); background-position:left center, right center; } .ssdipDelete.hll.level {background-image:url('../images/hllevelblue.png'), url('../images/maxcc_inline_verwijderen_persoon.png'); background-position:left center, right center; } .ssdipDelete.hll.low {background-image:url('../images/hllowblue.png'), url('../images/maxcc_inline_verwijderen_persoon.png'); background-position:left center, right center; } .ssdi.OpenService.hll, .ssdi.RegionService.hll, .ssdip.hll {background-position:left center; background-repeat:no-repeat;} .ssdiDelete.OpenService.hll.high {background-image:url('../images/hlhighblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:left center, right center; } .ssdiDelete.OpenService.hll.level {background-image:url('../images/hllevelblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:left center, right center; } .ssdiDelete.OpenService.hll.low {background-image:url('../images/hllowblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:left center, right center; } .ssdiDelete.RegionService.hll.high {background-image:url('../images/hlhighblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:left center, right center; } .ssdiDelete.RegionService.hll.level {background-image:url('../images/hllevelblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:left center, right center; } .ssdiDelete.RegionService.hll.low {background-image:url('../images/hllowblue.png'), url('../images/maxcc_inline_verwijderen_dienst.png'); background-position:left center, right center; } .ssdip.hll { padding-left:7px;} .skillsList {margin-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; background-color:lightgrey; vertical-align:middle; height:2em; width:80px;} .calendarDepartment {width:180px;} .clickHere {background-image:url('../images/ClickHere.png'); background-repeat:no-repeat; background-position-y:1px;} .MarkerLeftBorder {border-left: 2px solid goldenrod !important;} .MarkerRightBorder {border-right:2px solid yellow !important;} .sddel {display:block; width:20px; height:20px; cursor:pointer; margin:auto; background-repeat:no-repeat; background-position:center;} .sddelpersons {background-image:url('../images/maxcc_inline_verwijderen_personen.png');} .sddelservices {background-image:url('../images/maxcc_inline_verwijderen_diensten.png');} .ui-autocomplete, .ui-selectmenu-open { max-height: 200px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; } /* Period scheduling: 1, 4 (or any number of) weeks */ .datagridScheduleList {border-collapse:separate;} .datagridScheduleList th {text-align: center;} .dgScheduleItem td {border: 1px solid white; padding-top:2px; padding-bottom:2px; padding-right:1em;} .dgScheduleItem {white-space:nowrap; } /* */ .pSeq {width:40px;} .toggleSeq {width:16px; text-decoration:underline; text-align:center; cursor:pointer;} .ContractualHours, .ScheduledHours, .TVTHours, .HoursToSchedule, .LPGTotal {text-align: right; width: 6em; padding-right:2px;} .WeekAvailability {background-color:rgb(220, 255, 220); min-width:20px; text-align:center; padding-right:0.2em!important;} .ScheduledHours {border-right-width:2px !important ;} /* Set the border right width to 2px to make room for class RestViolation */ .datagridScheduleList > tfoot {background-color: #E5F1F5;} .datagridScheduleList > tfoot td[serviceid] {padding-left: 4px;} .svctotal {height: 1.3em; text-align: center; color: white; margin-top: .2em; border: 1px solid white;} .serviceTitle {padding-left: 4px; min-width:5em; margin-right:1em;} .hss {text-decoration:underline; margin-left:4px;} .RestViolation {border-right:2px dotted red !important;} .ScheduleGroupContainer {max-width:20px; border-width:0; display:none;} div.ScheduleGroup {offset: content-box 90deg / left 0px bottom -2px;} .ScheduleGroup0 {background-color:#f9d9ff; border-color:#f9d9ff !important;} .ScheduleGroup1 {background-color:#c9eaf3; border-color:#c9eaf3 !important;} .ScheduleGroup2 {background-color:#f7f9d0; border-color:#f7f9d0 !important;} .ScheduleGroup3 {background-color:#ffe2c8; border-color:#ffe2c8 !important;} .ScheduleGroup4 {background-color:#ffe099; border-color:#ffe099 !important;} .ScheduleGroup5 {background-color:#eacdc1; border-color:#eacdc1 !important;} .ScheduleGroup6 {background-color:#ffc8c8; border-color:#ffc8c8 !important;} .ScheduleGroup7 {background-color:#c6c6ff; border-color:#c6c6ff !important;} .ScheduleGroup8 {background-color:#fafecf; border-color:#fafecf !important;} .ScheduleGroup9 {background-color:#cdedea; border-color:#cdedea !important;} /* Timesheet Calendar Schedule Service Rostering */ .timesheetServices {padding:0 1px;} .calservices { overflow:hidden; margin-top:0.5em;} .calservices > span.action {width:32px; text-align:center;} .calservices > .NavigateTo {position:relative; margin-right:1em;} .calservices > div {float:left;} .calservices .title {} /* Same height, margins and border as .ssdSvc */ .calservices .subtitle {} /* Same height, margins and border as .ssdSvc */ .calservices > .titles > div {padding-left:4px;} /* Header of the calendar services timesheet */ .serviceHeader {padding:0.5em; overflow:hidden;} .serviceHeader > div {float:left;} .serviceHeader .serviceDescription {width:31em;} .serviceHeader .classification {width:6em; text-align:center;} .serviceHeader .skills {width:10em;} .serviceHeader .person {width:12em; text-align:center;} .serviceHeader .personClassification {margin-left:4em; width:6em; text-align:center;} .serviceHeader .personSkills {width:10em;} /* Services of a calendar item, same sizes as the header!! */ /* Services of the calendar week overview popup */ .calendarservicesoverview {padding:4px; background-color:#efefef; border:1px solid var(--text-color);} .calendarservicesoverview [calendarentryid] {font-weight:bold;} .calendarservicesoverview .service > div {float:left; min-height:2.5em; padding-top: 0.5em; border:0;} .calendarservicesoverview .service {border-top:1px solid lightgrey} .calendarservicesoverview .service .serviceDescription {width:30em;} .calendarservicesoverview .service .classification {width:6em;text-align:center;} .calendarservicesoverview .service .skills {width:10em;} .calendarservicesoverview .service .ssdi {padding:0} .calendarservicesoverview .service .ssdSvc {position:relative; margin:8px 0 0 0;} /* Scheduled persons counter for service calendar scheduling, margin-left is linked to personContainer width. */ #timesheet {background-color:white; position:relative; border-bottom:1px solid lightgrey; margin-bottom:14px;} #timesheet > * {padding: 0 1px;} /* Header of the services timesheet and the date range */ .DateRange {padding:2px 0; display: flex; align-items: center;} .DateRange, .titles > .title {overflow:hidden; font-weight:bold;} .DateRange, .timesheetHeader > div, .departmentscheduleheaders > div {width:100%; overflow:hidden; position:relative; } /* Overflow hidden to prevent wrapping of the child floats */ .DateRange > div, .timesheetHeader > div > div, .departmentscheduleheaders > div > div {float:left;} .DateRange, .timesheetHeader, .timesheetFooter {background-color: #f6f6f6;} .templateentries .titles, .calendarentries .titles, .extraentries .titles, .totalentries .titles, .AbsenceOrLeave .titles {width: var(--servicecontainer-titles-width);} .templateentries .ssdi, .calendarentries .ssdi, .extraentries .ssdi, .totalentries .ssdi, .deleteentries .ssdi {margin-left: var(--servicecontainer-left-margin);} #timesheet .HeaderLine {text-align:right; width:var(--servicecontainer-titles-width); padding-right:1em;} .timesheetHeader {border-bottom:1px solid dimgrey; display:block; padding: 2px 0;} .timesheetHeader .serviceDescription {width:30em;} .timesheetHeader .classification {width:6em; text-align:center;} .timesheetHeader .skills {width:10em;} .timesheetHeader .person {width:12em; text-align:center;} .timesheetHeader .personClassification {margin-left:4em; width:6em; text-align:center;} .timesheetHeader .personSkills {width:10em;} #AddServiceAndTemplateContainer {margin-left:4px; float:left;} #AddServiceTemplateDialog .day {height: 1.85em;} .timesheetFooter > div {width:100%; overflow:hidden;} /* Overflow hidden to prevent wrapping of the child floats */ .timesheetFooter > div > div {float:left;} .timesheetFooter > div > .FooterLine {text-align:right; width:var(--servicecontainer-titles-width); padding-right:1em;} .deleteentries {height:3em; padding:0.5em 0 0.5em var(--servicecontainer-titles-width); background-color:#f6f6f6;} /* Services of a calendar item, same sizes as the header!! */ .service {min-height:3em; overflow:hidden; margin:2px 0; padding:1px 0;} /* Padding top/bottom is needed for the outline of the selectedTimesheetItem class */ .service .serviceDescription {float:left; width:var(--servicecontainer-titles-width); min-height:3em; /*background-color:#FFFFDD;*/ border-top: 1px solid lightgrey;} .service .serviceDescription > span:first-child {margin-right:1rem;} .service .classification {float:left; width:6em; min-height:3em; /*background-color:#FFDDFF;*/ text-align:center; display:none;} .service .skills {float:left; width:10em; min-height:3em; /*background-color:#FFDDDD*/; padding: 0 0.5em; display:none;} .service > div {float:left;} .totalentries {overflow:hidden; vertical-align:top; background-color:white; padding-bottom: 0.5em;} .totalentries > .titles {} .totalentries > .titles > div, .AbsenceOrLeave > .titles > div {width:var(--servicecontainer-titles-width); padding-left:4px;} .totalentries > .ssdi, .deleteentries > .ssdi {width:var(--servicecontainer-width); margin-left:var(--servicecontainer-left-margin);} .totalentries > .titles > div, #timesheet .totalentries > .ssdi > div {} .totalentries .ssdSvc {cursor:default; } .totalentries .ssdOn {background-color:#f6f6f6; color:darkgreen;} .totalentries .ssdOver {background-color:#f6f6f6; color:firebrick;} .totalentries > div > div {margin-top:0.5em;} .DayOccupation {padding-top:0.5em; } .DayOccupation .sd {height:60px; } #SortServicesContainer {clear:both;} .validTemplate {color:black; font-weight:normal;} .invalidTemplate {color:Red; font-weight:bold;} /* Different colors for each header */ .calendarentry {color:#505050; height:var(--calendar-entry-height); background:linear-gradient(to bottom, #f5f5f5, white); border-radius:2px; /* Misschien later een achtergrondje met icon (# wordt vervangen door %23 (url encoded #) en 11 wordt toegevoegd voor de transparency) background-image: url('../Images/svg/updatedMenuIcons/Events.svg?Color=%2340404011'); background-position: center; background-repeat: no-repeat;*/ } .scheduleentry {color:#004000; margin-top:20px;} .extraentry {clear:both; color:#000050; margin-top:20px;} .calendarentry, .calendarService { width: var(--servicecontainer-width); margin:0; padding: 0; } .calendarentry span, .calendarService span { width: var(--servicecontainer-width); margin-right:0; margin-top:0!important; } .eventContainer > *, .calendarentry > *, .calendarService > * { margin-left: 0; } .eventContainerFiller, .eventContainer { float: left; min-height: 3em; margin-top:1rem; } .eventContainerFiller { width: var(--servicecontainer-titles-width); } .eventContainer { width: var(--servicecontainer-width); margin-left: var(--servicecontainer-left-margin); padding: 0; } .eventContainer > .calendarentry:not(:first-child) { margin-top:var(--calendar-entry-margin-top); } .calendarService > .serviceDescription { width:var(--servicecontainer-width); height:var(--calendar-description-height); padding-top:5px; border-top:none; } .calendarService > .serviceDescription > span {display:block; text-align:center;} /* Selecting persons/employees for the services */ .personSelectorSelectionHeader {background-color:#EEEEEE;} /* This is a kind of hack (clearfix): .personSelectorSelectionHeader should have overflow:hidden for the floats, but then the region popup is also hidden. Therefor this "after" div is used to give .personSelectorSelectionHeader some height so the SelectorHeader doesn't hide .personSelectorSelectionHeader. Note: When there is a div before .personSelectorSelectionHeader then :after should be combined with a same :before https://css-tricks.com/snippets/css/clear-fix/ */ .personSelectorSelectionHeader:after {content:""; display:table; clear:both;} .personSelector {line-height:20px; color:Black; vertical-align:top; overflow:hidden;} .selectorHeader {font-weight:bold; color:white; background-color:#757575; padding:1px 1px 1px 4px;} .selectorHeader input, selectorHeader select {color:var(--text-color);} .selectorHeader > div {white-space:normal;display:inline-block; overflow-wrap:anywhere;} #personSelectorBody {padding:2px 0;} #personSelectorBody > .person {padding:4px 2px;} #personSelectorBody > .person:nth-of-type(odd) {background-color: #fafafa;} .personSelector div {white-space:nowrap; vertical-align:middle;} .personSelector span {margin-top:0!important;} .personSelectorSelectionHeader > div {white-space:normal; float:left; margin-left:0.5rem;} .personSelectorSelectionHeader .pshService :first-child, .personSelectorSelectionHeader .pshClassification :first-child {width:8rem; text-overflow:ellipsis; overflow:hidden; } .personSelectorSelectionHeader .pshService :nth-child(2), .personSelectorSelectionHeader .pshClassification :nth-child(2) {width:12rem; text-overflow:ellipsis; overflow:hidden; } #pshSkills {clear:both;} #GetBalances {border-color:white} .scroller { overflow: auto; height: 300px; } /* Absence leave in scheduling */ .AbsenceOrLeave {position:relative;} .AbsenceOrLeave > div {position:relative; display:table-cell;} .AbsenceOrLeave .titles {font-weight:bold;} .AbsenceOrLeaveContainer > a {position:absolute; text-align:center; border-radius:4px; color:white; white-space:nowrap;} .AbsenceOrLeaveContainer > a:hover {color:white;opacity:1;} .AbsenceOrLeaveContainer > a:focus {color:white;} .absenceleave {margin-top:.5rem;} .absenceleave a {background-color:#28a745;opacity:.75;} .absence a {background-color:firebrick;opacity:.75;} /* widths of headers and body divs */ .personSelector .Department, .personSelector .Organisation, .personSelector .CAO {text-overflow: ellipsis; overflow: hidden;} /* display values of headers and body divs */ .personSelector .PersonName, .personSelector .ContractualHours, .personSelector .ScheduledHours, .personSelector .TVTHours, .personSelector .HoursToSchedule , .personSelector .Classification, .personSelector .NofServicesWorked, .personSelector .TravelCost, .personSelector .AvailabilityTime, .personSelector .Skills , .personSelector .Department, .personSelector .Organisation, .personSelector .CAO, .personSelector .CO2Emission {display:inline-block;} .personSelector .Skills > span {margin:0 4px 0 0; } .personSelector .Skills {overflow:hidden; text-overflow:ellipsis;} .personSelector .Skills:hover {width:auto;} /* Alignment */ .personSelector .ContractualHours, .personSelector .ScheduledHours, .personSelector .TVTHours, .personSelector .HoursToSchedule , .personSelector .NofServicesWorked, .personSelector .TravelCost, .personSelector .CO2Emission {text-align:right; padding-right:2px;} .personSelector.AvailabilityTime {text-align:center;} #personSelectorColumnFilter {font-size:large; float:left; cursor:pointer; margin-right: 0.25Rem;} #personSelectorColumnFilterOptions {position:absolute; background-color:dimgrey; text-align:left; padding:0.5em; z-index:2; white-space:nowrap;} #personSelector .OpenServiceSubscription {width:200px; text-align:center; /*border:2px solid #c7a94c;*/ background-color:#ffd966; z-index:1; white-space:nowrap;} .personContainer.servicescheduling .ssdip > div {display:none;} /* hide skills and classification in service scheduling */ .personDroppable {border:2px solid green !important;} .ssdSvc.personDroppable {background-image:url('../images/icons16/maxcc_16x16_plus.png'); background-repeat:no-repeat; background-position:right top; visibility:visible!important;} .personDraggable {border:1px solid lightgrey; cursor:pointer;} .personDragging {border:1px solid #4DFF4D; background-color:#CCFFCC; z-index:9999; } /* style during dragging */ .currentRegistrations {vertical-align:top; color:DimGrey; line-height:1em;} .otherRegistrations {position:absolute; color:red; margin-left:-1em; margin-top:2rem!important; line-height:2rem; height:2rem; overflow:hidden; text-overflow:ellipsis; max-width:600px; text-wrap:nowrap;} .personSelector .otherRegistrations {position:relative; margin-top:0!important; margin-left:0; overflow:visible;} .isAbsentInPeriod {opacity:0.5;} .isAbsent {margin-top:0 !important; width:16px; height:16px; } /* Staffing Per Hour report: a table style like a bar chart */ .StaffingPerHourButton {background-color:dimgrey; border-radius:4px; cursor:pointer !important; } .StaffingPerHour td, .StaffingPerHour th {text-align:center; vertical-align:middle; font-weight:normal; } .StaffingPerHour > tbody > tr > td:not(:first-child) {width:2em; height:2em; border:1px solid #CCCCCC;} .StaffingPerHour td.planned {border:1px solid #CCCCCC !important; background-color:#CCCCCC; } .StaffingPerHour td.scheduled {border:1px solid darkgreen !important; background-color:darkgreen; } .StaffingPerHour td.overscheduled {border:1px solid firebrick !important; background-color:firebrick; } /* Service overview classes */ .calendaroverviewentry {width:100%; overflow:hidden; cursor:pointer; font-weight:normal; border:1px solid white; background-color:lightgrey; } .calendaroverviewentry > .ssdSvc {float:right; padding:0 2px;} .templates select {width:100%;} .sdate {cursor:pointer; text-decoration:underline;} /* Region Scheduling and Open Service Scheduling */ .RegionService.empty:after, .OpenService.empty:after {line-height:2.5em;} .RegionService > .ssdip, .OpenService > .ssdip {margin:auto; width:calc(var(--servicecontainer-width) - 2px); height:calc(var(--servicecontainer-height) - 2px);} /* Region Scheduling */ .RegionService {background-color:#8f85ff; border-color:#1f18ff;} .RegionService.empty:after {content: 'REGIO';} .RegionService.personDroppable {background-color:transparent;} .RegionServiceRequestInternalEmployee {background-color:#e8e6ff; border-color:#8f85ff; text-align:center;} .RegionServiceRequestInternalEmployee.empty:after {content: 'In behandeling'; line-height:1.8em; } .RegionServiceRequestExternalEmployee.hll { background-image: url(../images/hllowblue.png); background-repeat: no-repeat; background-position: left center; } .RegionServiceRequestExternalEmployee.empty:after {content: attr(externalsource); line-height:1.2em; text-align:center; } .YoungOnes, .YoungOnes .ssdip {background-color:#4be4c2; border-color:#41c6a7;} .Temper, .Temper .ssdip {background-color:#00ff86; border-color:#00cc69;} .EmailFlexer, .EmailFlexer .ssdip {background-color:#ffa460; border-color:#c65200;} .EmailIntermediary, .EmailIntermediary .ssdip {background-color:#e6c0f5; border-color:#b195bc;} .DefaultExternalResourceClass, .DefaultExternalResourceClass .ssdip {background-color:#ebeaff; border-color:#cac9ff;} .RegionEmployee:after {content:'R'; margin-left:2px; border:1px solid #1f18ff; background-color:#8f85ff !important; text-align:center; } .ExtraRegionEmployee:after {content:'R+'; margin-left:2px; border:1px solid #1f18ff; background-color:rgba(236, 235, 255, 1) !important; text-align:center; } .CRMInfo {font-weight:normal; overflow:hidden; text-overflow:ellipsis;} .selectedTimesheetItem {outline:1px solid blue !important; border-radius:2px;} .OnlyServiceHeaders:not(.calendarService) {height:2em; min-height:auto;} /* When Only Service Headers is selected, the outline is on the service count item, not on the service container. */ .OnlyServiceHeaders > .serviceContainer.selectedTimesheetItem > .ssdSvc {outline:1px solid blue;} .OnlyServiceHeaders > .serviceContainer.selectedTimesheetItem {outline:none !important;} .OnlyServiceHeaders .personContainer {display:none;} /* Without display:none the elements still recieve drag-drop events! */ /* Open Service Scheduling Note: OpenService and OpenServiceSubscription have the same coloring. */ .OpenService {background-color:#ffd966; border-color:#c7a94c;} .OpenService.empty:after {content:'OPEN';} /* Open Service with persons to select */ .ssdiDelete.ssdiOpenServiceSelect { background-image: url(../images/maxcc_inline_selecteren_persoon.png), url(../images/maxcc_inline_verwijderen_dienst.png) !important; background-repeat: no-repeat, no-repeat !important; background-position: left center, right center !important; } .ssdiOpenServiceSelect { background-image: url(../images/maxcc_inline_selecteren_persoon.png) !important; background-repeat: no-repeat !important; background-position: left center !important; } /* Open Service (Un)Subscribe for employees */ .OpenServiceBody div {display: inline-block;} .OpenServiceItem:not(:first-child) {margin-top:1rem;} .OpenServiceHeader {font-weight:bold;} .OpenServiceBody {padding:1rem; border:2px solid #f1f1f1; max-width:850px;} .OpenServiceDetails {margin-right:1rem;} .OpenServiceDetails span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; /* vertical-align middle prevents overflow hidden from changing the element's offset */} .OpenServiceDetails span.title {width:60px; } .OpenServiceDetails span.value {width:160px; } .OpenServiceSubscription button {width:10rem;} .OpenServiceSubscription button.Unsubscribe {background-color:firebrick; color:white;} .OpenServiceSubscription button.Subscribe {background-color:darkgreen; color:white;} /* Grid Roosteren Flex */ .departmentschedulecontainer { display: grid; grid-template-columns: var(--department-title-width) 1fr; grid-template-rows: 22px auto auto auto; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "departmentpublish departmentpublish" "departmentscheduletitle departmentscheduleheaders" "departmentscheduletitle departmentscheduleservices" "departmentscheduletitle departmentschedulefooters"; } .departmentpublish { grid-area: departmentpublish; } .departmentscheduleheaders { grid-area: departmentscheduleheaders; } .departmentscheduleservices { grid-area: departmentscheduleservices; } .departmentscheduletitle { grid-area: departmentscheduletitle; padding:10px; vertical-align:middle; font-weight:bold; background-color:#eeeeee; border-left: 3px solid #d9d9d9; border-right: 3px solid transparent; border-radius: 2px; overflow:hidden;} .departmentscheduletitle:hover {background-color:#dddddd; cursor:pointer;} .departmentschedulefooters { grid-area: departmentschedulefooters; padding-top:1em;} .totalentries > div, .deleteentries > div, .DateTurnover > div, .DateHoursCosts > div, .InternalDateRemark > div, .ExternalDateRemark > div {float:left; width:var(--servicecontainer-titles-width);} .DateTurnover input, .DateHoursCosts input {width:100%; text-align:right;} .departmentschedulecontainer{position:relative; min-height:4rem; width:100%; border-bottom: 1px solid transparent;} .departmentschedulecontainer:not(:first-of-type) {border-top: 1px solid #404040; } .departmentschedulecontainer.selected .departmentscheduletitle{background-color:#ccffcc; border-left:3px solid #28e328;} .toggleCollapseDepartment { height: 0px; width: 0px; position: absolute; border: 0; padding: 0; left: 250px; /* Is related to departmentscheduletitle! */ top:-5px; } .toggleCollapseDepartment:before { content: "\f0d8"; font-family: 'fontawesome'; color:#303030; font-size: 16px; } .is-collapsed > .toggleCollapseDepartment:before {content: "\f0d7"; } .toggleCollapseDepartment:focus {outline:none !important;} .departmentHeader {width:180px; padding-left:2px;} .departmentHeader > .toggleCollapseDepartment {} .departmentHeader > .toggleCollapseDepartment:first-of-type {top:-6px;} .departmentHeader > .toggleCollapseDepartment:last-of-type {top:0px;} .departmentschedulecontainer.is-collapsed {overflow:hidden; height:4.6rem;} .departmentschedulecontainer.is-collapsed .departmentscheduletitle {vertical-align:top;} .departmentscheduleservices > div:visible:last-of-type { background-color: aqua !important; margin-left: 100px !important; } .departmentpublish > span {margin-right:10px;} .departmentpublishall {padding:0 0 0 4px;} .gotoflexdepartment {opacity:0;font-size:1.25rem;} .departmentscheduletitle:hover {transition:0.3s;} .departmentschedulefooters > div {min-height: 2em;} .RegionServicePopup {position:absolute; margin-left:20px; margin-top:10px; z-index:1000; border:1px solid #CCC; white-space:nowrap; background:#FFF; border-radius:5px; padding:8px 12px; cursor:pointer;} .scheduler button {vertical-align: baseline;} /* Clocking related styles */ /* personEmpChoiceList is the ChoiceList (JQueryUI autocomplete) in clocking (also in StaffSkinCssMobile.aspx) */ #personEmpChoiceList input[type="text"] { height:2em; width:20em; margin:0px; vertical-align: top;} .personEmpChoiceLabel, .departmentChoiceLabel, .activityChoiceLabel {margin-right:2em;} .ui-combobox-toggle { position: relative; top: 0px; left: -1px; height: 16px; width: 16px; padding: 0em; } #personEmpNrExactMatch {display:inline-block; width:20em; height:9em; overflow:hidden; margin-top:1em;} #personEmpNrDisplay {width:20em; font-size:xx-large !important;} #personEmpNrConfirm {display:inline-block;} /* Clocking Evaluation */ .clockTimes {display:inline-block; vertical-align:top; border-top:5px solid transparent;} .clockSchedule {background-color:rgb(220, 255, 220); min-height:2em;} .clockClocking {background-color:rgb(220, 220, 255); min-height:2em;} .clockProposal {background-color:rgb(255, 255, 220); min-height:2em;} .clockTimesheet{min-height:2em;} .clockSchedule > input {background-color:rgb(220, 255, 220);} .clockClocking > input {background-color:rgb(220, 220, 255);} .clockProposal > input {background-color:rgb(255, 255, 220);} .clockSchedule > select {background-color:rgb(220, 255, 220);} .clockClocking > select {background-color:rgb(220, 220, 255);} .clockProposal > select {background-color:rgb(255, 255, 220);} .clockDepartment {width: 100px; overflow:hidden; text-overflow:ellipsis;} .readtt {margin-left:4px; width: 34px; color:DarkGreen; text-align:right;} .clocksource {padding:2px; position:relative; border:2px solid transparent; min-width:2em; text-align:center; margin-right:14px;} /* 14px margin-right for the remark button!! */ .clockSchedule > .clocksource {background-color:rgb(0, 255, 0); color:dimgrey;} .clockClocking > .clocksource {background-color:rgb(0, 0, 255); color:white;} .clockProposal > .clocksource {background-color:rgb(255, 255, 0); color:dimgrey;} .clockTimesheet > .clocksource {background-color:dimgrey; color:white;} .clocksourcebutton {border-radius:100px; cursor:pointer;} /* 100px is way to big for a radius, this makes the button round. */ .clockSchedule > .clocksourcebutton {border-color:dimgrey; } .clockClocking > .clocksourcebutton {border-color:rgb(0, 170, 255); } .clockProposal > .clocksourcebutton {border-color:dimgrey; } .clockTimesheet > .clocksourcebutton {border-color:white; } /* Clocking Evaluation Multi */ .deletedState {background-image:url("../images/svg/maxccbuttons/deleted-greyed.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791");} .deletedState.active {background-image:url("../images/svg/web-navigation/deleted.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791");} .approvedState {background-image:url("../images/svg/maxccbuttons/checked-greyed.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791");} .approvedState.active {background-image:url("../images/svg/web-navigation/checked.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791");} .lockedState {background-image:url("../images/svg/maxccbuttons/locked-greyed.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791");} .lockedState.active {background-image:url("../images/svg/web-navigation/locked.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791");} /* Clocking styles for tables */ .clockStatusGrid, .clockSelectGrid {vertical-align:top; line-height:1em;} .clockStatusGrid th, .clockSelectGrid th, .clockStatusGrid td, .clockSelectGrid td {padding:0.25em;} /* Clocking styles for "read only" tables */ .clockStatusGrid > thead {background-color:#cccccc;} .clockStatusGrid > tbody > tr, .clockStatusGrid > tfoot > tr {background-color:#cccccc;} /* Clocking styles for "selectable" tables */ .clockSelectGrid > thead, .clockSelectGridHeader {background-color:#072b69 !important; color:white; font-weight:bold;} .clockSelectGrid > tbody > tr[activityindex] {background-color:#eeeeee; cursor:pointer; height:3em;} .clockSelectGrid > tfoot > tr {background-color:#ffffaa;} /* Buttons */ .cancel {margin-left:2em; float:right; font-size:120% !important;} .DepartmentButton, .ActivityButton {width:8em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .SelectedButton {font-weight:bold; font-style:italic; background-color:#ffff00 !important; color:DarkGreen !important;} /* Personal Clocking */ #personalClockingStart {text-align:center;} #personalClockingHeader {background-color:#eeeeee; padding:1rem 0; margin:1rem 0; } #personalClockingHeader .timefrom {color:#404040; font-size:3rem !important; font-weight:bold;} #personalClockingHeader .clockdetails {color:#404040; } #personalClockingHeader .clockdetails div {display:inline-block; margin:0 20px; } /* Timesheet mass mutation buttons */ .CopyContractHours {border-color:#00b4cc !important; background-image: url('../images/svg/maxccbuttons/copy-contracthours.svg');} .CopyScheduled {border-color:#4dc17a !important; background-image: url('../images/svg/maxccbuttons/copy-scheduled.svg');} .CopyClocked {border-color:#5dd2cc !important; background-image: url('../images/svg/maxccbuttons/copy-clocked.svg');} .CopyCalculated {border-color:#5dd2cc !important; background-image: url('../images/svg/maxccbuttons/copy-calculated.svg');} .CopySavingHours {border-color:#203dd1 !important; background-image: url('../images/svg/maxccbuttons/copy-savinghours.svg');} .ApproveTimesheet {border-color:#6da6e9 !important; background-image: url('../images/svg/maxccbuttons/approve-timesheet.svg');} .LockTimesheet {border-color:#6da6e9 !important; background-image: url('../images/svg/maxccbuttons/lock-timesheet.svg');} .DeleteTimesheet {border-color:firebrick !important; background-color:firebrick !important; background-image: url('../images/svg/maxccbuttons/delete-white.svg');} /* Main style sheet for jQuery Keypad v1.5.1. ("borrowed" from http://keith-wood.name/keypad.html, parts removed and adjustments done for making the keypad bigger and wider for touch usage) */ #inlineKeypad { vertical-align:top; margin-left:3em; position:relative; height:1em; overflow:visible; } #inlineKeypad button { font-family: Arial,Helvetica,sans-serif; font-size: 18px; width:4.5em !important; height:4.5em !important; } #inlineKeypad .keypad-popup { display: none; z-index: 10; margin: 0; padding: 0; background-color: #fff; color: #000; border: 1px solid #888; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em; } #inlineKeypad .keypad-keyentry { display: none; } #inlineKeypad .keypad-inline { background-color: #fff; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em; } #inlineKeypad .keypad-row { width: 100%; } #inlineKeypad .keypad-space { display: inline-block; margin: 1.25em; width: 3.5em; } #inlineKeypad .keypad-key, #inlineKeypad .keypad-special, #inlineKeypad .keypad-back, #inlineKeypad .keypad-clear { margin: 0.5em; padding: 0em; width: 3.5em; height: 3.5em; background-color:white; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em; text-align: center; cursor: pointer; } #inlineKeypad .keypad-clear, #inlineKeypad .keypad-back { background-color: #404040; color: white; } /* Main style sheet for jQuery Keypad v1.5.1. */ /********************************************************************/ /* TOR styles */ /********************************************************************/ /*.valueTitle, .valueAmount, .totalTitle, .totalAmount {}*/ span.valueTitle, span.valueAmount, .totalTitle, .totalAmount, {border: 1px solid transparent; background-color: transparent;} .valueTitle {width: 250px; } .valueAmount {text-align: right; width: 70px; } .totalTitle {margin-left: 70px; width: 180px; } .totalAmount {text-align: right; width: 70px; } input.totalAmount {font-weight: bold;} .LaborProductivity {display:block;} #LaborProductivity {position: absolute;} .torAlert {display:block; margin-left:0px !important;} /* Overrules margin-left of .LoketIntegrity below */ .torSelectMessage {display:block;} .torSelectDate+.ui-datepicker-trigger { margin-left: 0px; } .ActionButtonPlaceholder{width:350px; cursor:pointer;} /********************************************************************/ /* Button panel control */ /********************************************************************/ .buttonpanel {} /********************************************************************/ /* Collapsible panel control */ /********************************************************************/ img.collapsible {cursor:pointer;margin-right:4px; transition:transform 0.5s; width:20px; height:20px;} /* the button */ .collapsible-panel > span {padding-top:4px; margin-right:20px; color: inherit;font-size: x-small;font-weight: bold;} span.collapsible {margin-right:10px;} .PanelTitle {padding-right: 20px;} /* .pin {background: transparent url('../images/unpinned.png') no-repeat 50% 50% !important; right:3em;} .unpin {background: transparent url('../images/pinned.png') no-repeat 50% 50% !important; right:3em;} */ .ui-dialog-titlebar-close {width: 18px !important;} div.ui-dialog {font-size:1em;} .ui-dialog, .ui-dialog-content { box-sizing: content-box; } .ui-dialog { z-index: 1000 !important ;} .ui-dialog[aria-modal="true"] { z-index: 2000 !important ;} /********************************************************************/ /* Popup Dialog */ /********************************************************************/ .popupDialog > iframe {width:100%; height:97%; /* "97%" to prevent an extra vertical scroll bar */ border: 0px solid transparent; } .popupDialog.closeButton > iframe {height:90%; /* Make room for the close button */ } /********************************************************************/ /* Reportviewer styles */ /********************************************************************/ #rv_ReportViewer {width:100%;} /********************************************************************/ /* Smoelenbook classes (same as in StaffSkinCssMobile.aspx) */ /********************************************************************/ .businessCard { float:left; margin-left:2px !important; background: linear-gradient(180deg, #ababab 20%, rgba(255,255,255) 28%); border-style: solid; border-color: #dee2e6; border-radius: 0.375rem; border-width: 1px; width:250px; height:350px; padding:5px; margin:0 10px 10px 0; overflow:hidden; cursor:pointer; } .businessCard:hover {border-width: 5pxpx; border-style:none;outline-style:solid; outline-color: #404040; outline-width:2px;} .bcard-icon.icon-email:hover { width: 30px; height: 30px; } .businessCardImageContainer {text-align:center; height:180px;} .businessCardImageContainer > img {height:150px; width:150px; margin-top:25px; border-radius:50%; border:5px solid rgba(255,255,255)} .businessCardContent > .naam {display:table; margin:auto; font-size:large; color:rgb(80, 80, 80); } .businessCardContent > .functie {display:table; margin:auto; color:rgb(80, 80, 80); font-size:medium;} .businessCardContent > .telnr, .businessCardContent > .email {margin-left:20px; width:180px; word-wrap:break-word; margin-left:55px; margin-top:-5px;} .businessCardContent > .telnr {font-size:small;} .businessCardContent > .email {font-size:x-small;} .businessCardContent > .icon {height:25px; width:25px; margin-left:10px;position:absolute;} .businessCard.zoomedIn {height:auto;} .businessCard.zoomedIn > img {width:250px;} .businessCard.zoomedIn > span {margin-left:8px; margin-top:8px; position:static; width:250px;} /********************************************************************/ /* Gadget styles */ /********************************************************************/ #gadgetsPanel {width:100%;} .gadget {float:left;} /* For "don't wrap" use this css: #gadgetsPanel {float:left; width:100%; overflow:auto; white-space:nowrap; } .gadget {display:inline-block;} */ .gadgetWide {/* height:180px; */ width:360px; float:left; border: 1px solid inherit; border-radius:4px; -moz-border-radius:4px; /* Firefox 3.6 and earlier */ margin:2px; background-color: #eeeeee;} .gadgetHeader {height: 22px; padding: 4px 0 0 4px; font-weight: bold; background-color: #e5e5e5;} .gadgetRefresh {display:none; float: right; height:20px; width:20px; margin: -2px 2px; cursor:pointer; background: transparent url('../images/icons20/maxcc_20x20_refresh.png') no-repeat;} .gadgetContent {/* height: 150px; */ padding: 0px;} /* gadgetContent.height = gadget.height - alle paddings.top of .bottom */ .gadgetContent > .CleanWebPart {/* height: 150px; */ padding-right: 0px; overflow: auto;} .DetailsPanel {clear: both; padding-top: 2em;} /*Prestatie cockpit - resizable Master buttons*/ .MasterDetailButton { width: 116px; height: 116px; min-width: 20px; min-height: 20px; max-width: 116px; max-height: 116px; position:relative; padding:5px; background-color:white; border: 3px solid #595959; border-radius:10px; margin:5px; cursor:pointer; } .MasterDetailButton.Red:hover { border-color: #F08080; } .MasterDetailButton.Green:hover { border-color: #90EE90; } .MasterDetailButton.Grey:hover { border-color: LightGrey; } /* De display bevat het plaatje dat de knop vormt, tesamen met de titel en eventuele extra informatie. Deze div is relatief gepositioneerd en de child-div's zijn absoluut gepositioneerd */ .MasterDetailButton .displayTitle { bottom: 30px; margin:-0.5rem auto 0 auto; min-height:20px; text-align:center; font-family:Verdana; font-size: 10px; font-weight:bold; font-style:italic; /*background-color: white;*/ } .MasterDetailButton .displayTitle > * { display:block; } .MasterDetailButton .displayExtra, .MasterDetailButton .displayExtraBold { position:absolute; bottom: 0px; margin-left:-5px; padding-top:3px; padding-bottom:5px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; width: 100%; min-height:28px; text-align:center; font-family:Verdana; font-size: 12px; border-top: 1px solid #595959; color: Black; font-weight:900; } .MasterDetailButton .displayExtraBold { font-weight:bold; } .MasterDetailButton .displayExtraNoContent { border-top: none; } .MasterDetailButton .displayImage { display:block; margin:auto; width: 60px; height: 60px; } .MasterDetailButton.Red .displayImage, .MasterDetailButton.Red .displayExtra{ background-color: #F08080; } .MasterDetailButton.Green .displayImage, .MasterDetailButton.Green .displayExtra{ background-color: #90EE90; } .MasterDetailButton.Grey .displayImage, .MasterDetailButton.Grey .displayExtra{ background-color: LightGrey; } .gadgetMasterDetailRefresh {display:none; position: absolute; z-index:1000; height:20px; width:20px; margin-left:102px; margin-top:14px; cursor:pointer; background: transparent url('../images/icons20/maxcc_20x20_refresh.png') no-repeat;} .CockpitHeader { width: 116px; height: 116px; position:relative; padding:5px; background-color:white; border: 3px solid #595959; border-radius:10px; float: left; margin:5px; } .CockpitHeader .displayTitle { position:absolute; bottom: 8px; margin-left:-5px; padding-bottom:5px; width: 100%; text-align:center; font-family:Verdana; font-size: 10px; font-weight:bold; font-style:italic; } .CockpitHeader .displayImage { margin-left:18px; margin-right:15px; width: 60px; height: 60px; background: #333333; } .CockpitHeader:hover { pointer:default; } .CockpitHeaderImage { width: 60px; height: 60px; background: #333333; } .CockpitHeaderTitle { width: 100%; text-align:center; font-family:Verdana; font-size: 10px; font-weight:bold; font-style:italic; } .CockpitTitle, .CockpitTitle a { font-size: 10px; font-weight: bold; height: 30px; vertical-align: middle !important; } .CockpitTitle a { margin-top: 5px; margin-bottom: -5px; text-decoration: none; color: #333333; width: 20em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .CockpitTitle a:hover { text-decoration: underline; } .CockpitCell { font-size: 15px; text-align: center; height: 30px; vertical-align: middle !important; } .CockpitCell a { margin-top: 5px; margin-bottom: -5px; font-size: 15px; text-align: center; height: 30px; color: White; font-weight: bold; vertical-align: middle !important; text-decoration: none; } .CockpitCell a:hover { text-decoration: underline; } /********************************************************************/ /* Styles voor de nieuwe loketten */ /********************************************************************/ /* Dit is de style van de container-div voor de alle knoppen.*/ .Loket, .PreLoket { max-width:890px; } /* Dit is de style van de container-div voor de hele knop.*/ .LoketButtonHolder, .LoketButtonHolderNoEffect { width:166px; height:166px; position:relative; padding:5px; color:DimGrey; background-color:white; float: left; margin:5px; cursor:pointer; } .LoketButtonHolder:hover, .LoketButtonHolderNoEffect:hover { color:#333333; } /* Een knop bestaat uit twee div's die over elkaar heen liggen. De 'LoketDisplay' en de 'LoketContent' div. */ .LoketContent, .LoketDisplay { width:154px; height:154px; position:absolute; left:0px; top:0px; overflow:hidden; } /* De LoketDisplay bevat het plaatje dat de knop vormt, tesamen met de titel en eventuele extra informatie. Deze div is relatief gepositioneerd en de child-div's zijn absoluut gepositioneerd */ .LoketDisplay { background-color: white; border-radius:10px; padding: 5px; margin-left: -5px; margin-top: -5px; position:relative; } .LoketDisplay .LoketDisplayTitle { position:absolute; bottom: 10px; width: 100%; text-align:center; font-size: 15px; font-weight:bold; font-style:italic; background-color: white; text-overflow:ellipsis; overflow:hidden; } .LoketDisplay .LoketDisplayExtra { position:absolute; bottom: 0px; margin-left:-5px; padding-top:3px; padding-bottom:5px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; width: 100%; text-align:center; font-size: 10px; background-color: white; border-top: 1px solid DimGrey; white-space:nowrap; overflow:hidden; } .LoketDisplay .LoketDisplayExtraNoContent { border-top: none; } .LoketDisplay > img { width:110px; height:110px; margin-right: auto; margin-left: auto; display: block; } .LoketButtonHolder img, .LoketButtonHolderNoEffect img, .LoketButtonIcon { background-color: #333333; } .LoketButtonIconSmall {height:20px; width:20px;} .LoketButtonIconMedium {height:40px; width:40px;} .LoketButtonIconLarge {height:150px; width:150px;} .LoketButton, .LoketButton:hover { margin-left: 5px; font-size: 13px; color:DimGrey; text-decoration: none; font-weight:bold; line-height:20px; } .LoketButton:hover { color: #333333; } .LoketButtonNoEffect { display:block; } .LoketButtonNoEffect:hover { font-size: 13px; color:DimGrey; text-decoration: none; } .LoketTitle { padding: 2px 5px 2px 5px; width: 150px; border-bottom: 1px solid DimGrey; font-size: 13px; font-style:italic; font-weight: bold; } .LoketTitle .TitleText { margin-top: 6px; margin-left: 4px; font-size: 13px; } .LoketTitle > img { width:30px; height:30px; } .LoketContent ul { margin-top: 4px; margin-left: 4px; width:150px; overflow:hidden; } .LoketContent li { width:150px; overflow:hidden; white-space:nowrap; /* list-style-position:inside; */ } .LoketNews { padding:5px; color:DimGrey; background-color:white; border: 3px solid DimGrey; border-radius:10px; margin:5px; clear:both; max-width:694px; } .LoketIntegrity, .torAlert { border: 1px solid red; border-radius: 6px; color: firebrick; background-color:white; font-weight: bold; margin-left: 20px; padding: 4px 20px; white-space:nowrap; } /* Dit is de style van de container-div voor de hele knop.*/ .LoketButtonHolder, .LoketButtonHolderNoEffect, .LoketButtonHolder:hover, .LoketButtonHolderNoEffect:hover, .LoketNews { border-color: #f1f1f1; border-radius: 0px; border-width:1px; } .LoketIntegrity, .torAlert { border-radius: 0px; } /********************************************************************/ /* Styles voor Mijn Loket */ /********************************************************************/ /* Dit is de style van de container-div voor de positie van de link of widget.*/ .nav-pos { float: left; border: 1px solid LightGray; margin: 5px; background-image: url('../images/svg/maxccbuttons/addLight.svg'); background-repeat: no-repeat; background-position: center center; background-size: 40%; background-color: #f8f9fa !important; cursor:pointer; } .nav-pos.ui-draggable-dragging {opacity:.5;} .DashboardItems .CleanWebPart {padding-right:0px;} #dashboardactions {float:left; margin-top:30px;} /* De groottes van de items bij de diverse schermgroottes. Zie ook portal.css. */ @media screen and (max-width: 575.98px) { .nav-pos { height: 100px; width: 100px; } .WidgetContent > * { zoom:0.5; /* Dit is mogelijk niet goed, we weten het niet omdat de inhoud onbekend is. Misschien later onderdeel van de widget zelf maken? */ } .DashboardItems .icon { height: 50px; width: 50px; } .DashboardItems .delete .icon { height: 70px; width: 70px; margin: 10px; } .DashboardItems .nav-name { margin-top: 0.4em; font-size: 10px; } } @media screen and (min-width: 576px) and (max-width: 991.98px) { .nav-pos { height: 150px; width: 150px; } .WidgetContent > * { zoom:0.75; /* Dit is mogelijk niet goed, we weten het niet omdat de inhoud onbekend is. Misschien later onderdeel van de widget zelf maken? */ } .DashboardItems .icon { height: 75px; width: 75px; } .DashboardItems .delete .icon { height: 90px; width: 90px; margin: 10px; } .DashboardItems .nav-name { margin-top: 0.75em; font-size: 14px; } } @media screen and (min-width: 992px) { .nav-pos { height: 200px; width: 200px; } .DashboardItems .icon { height: 100px; width: 100px; } .DashboardItems .delete .icon { height: 180px; width: 180px; margin: 10px; } .DashboardItems .nav-name { margin-top: 1em; font-size: 15px; } } .DashboardItems > div, .DashboardItems > div > div { background-color:white; transition: background-color 400ms linear; } .DashboardItems .IsDroppable > div, .DashboardItems .IsDroppable { background-color:lightgrey; transition: background-color 400ms linear; } .DashboardItems .delete.IsDroppable { outline: 6px solid lightgrey; transition: background-color 400ms linear; } .DashboardItems .delete .nav-link, .DashboardItems .print .nav-link { padding:0; } .DashboardItems .Folder, .DashboardItems .DashboardTemplateInstance, .DashboardItems .nav-link { padding: 1.5rem 1rem; } .nav-pos > div { background-color: #f8f9fa !important; width: 100%; height: 100%; overflow:hidden; } .nav-pos .GadgetContent > div[wp] { width: 100%; height: 100%; overflow:hidden; } .nav-pos .gadgetRefresh { position: absolute; margin: 2px; float: right; right: 0px; } .Card .gadgetRefresh { position: absolute; margin: 2px; float: right; right: 0px; } .gadgetRefresh, .gadgetMasterDetailRefresh { background: transparent url('../images/svg/web-navigation/refresh.svg') no-repeat; z-index:2; } .DashboardItems > div[itemtypeid="6f4e4d88-c979-44fa-8ac9-d0fed2ee6745"] * /* Favoriet */ , .DashboardItems > div[itemtypeid="9d8cdbf1-dca8-4273-b7fb-257c0b14cea3"] * /* WebAddress */ , .DashboardItems > div.WidgetContent[itemtypeid="b38ca7de-f625-4a54-b749-0ffb72109d8a"] * /* Component van type Widget */ , .DashboardItems > div.GadgetContent[itemtypeid="b38ca7de-f625-4a54-b749-0ffb72109d8a"] > * > * /* Component van type Gadget. Hier dus niet alle child elements, maar alleen de eerste 2 niveau"s !! */ , .DashboardItems > div[itemtypeid="7bada616-9fa7-490f-97c6-88afad705b09"] * /* Folder */ , .DashboardItems > div[itemtypeid="6849519f-4e20-4bb1-9bc7-b2c177db34e8"] * /* Loket */ , .DashboardItems > div[itemtypeid="ea6c90b0-1e25-49e6-9187-af65aee5346a"] * /* Video */ { margin-left: auto; margin-right: auto; } .DashboardItems .icon { display: block; } .DashboardItems .nav-name { display: block; text-align: center; color: #404040; } .DashboardItems iframe { border: 0; width: 100%; height: 100%; } .DashboardItems .MasterDetailButton { /* Inside DashboardArea */ margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; } .DashboardItems .MasterDetailButton .displayImage { margin-bottom:2em; } @media screen and (max-width: 991.98px) { .DashboardItems .MasterDetailButton .displayTitle { font-size: 8px; } .DashboardItems .MasterDetailButton .displayImage { display:none; } } .dashboardexample {height:150px; width:150px; border:2px solid lightgrey; color:lightgrey; background-size:contain;} .dashboardexample label {font-size:2rem; font-weight:bold; text-align:center; margin-top:2rem;} /* Static classes */ .FavoriteHolder {overflow:hidden; } .FavoriteHolder > div {position:relative; float:left; cursor:pointer; border-top:transparent solid 2px; border-bottom:transparent solid 2px; margin-right:0.5em;} .FavoriteHolder > div > input[type="image"] {position:absolute; display:none; } .FavoriteHolder > div > input.Edit {margin-left:-40px; } .FavoriteHolder > div > input.Remove, .FavoriteHolder > div > input.Save {margin-left:-16px; } .FavoriteHolder > div > span.Title, .FavoriteHolder > div > input.EditTitle, .FavoriteHolder > div > span.Icon {vertical-align:middle;} .FavoriteHolder.Large > div {margin:0 2em 2em 0; width:40em;} .FavoriteHolder.Large > div > span.Icon > svg {height:4em; width:4em;} .FavoriteHolder.Large > div > div.EditIcon {display:none; } .FavoriteHolder.Large > div > span.Title, .FavoriteHolder.Large > div > input.EditTitle {height:4em; font-size:1.6em; line-height:4em; } .FavoriteHolder.Wide > div > span.Title {margin-left:1em; width:20em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .FavoriteHolder.Wide > div > input.EditTitle {margin-left:1em; width:20em; border:none; display:none; background-color:LightYellow;} .FavoriteHolder.Small > div > span.Icon > svg {height:2em; width:2em;} .FavoriteHolder.Small > div > span.Title {height:1em; font-size:1em; line-height:1em; } .FavoriteHolder.Narrow > div > span.Title {margin-left:0.5em; width:10em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .FavoriteHolder.NoTitle > div > span.Title {display:none; } /* Dynamic classes */ .FavoriteHolder.Large > div:hover {border-top:#333333 solid 2px; border-bottom:#333333 solid 2px;} .FavoriteHolder.Large {overflow:visible; } .FavoritePlaceholder {background-color:lightyellow !important; border:4px solid grey; border-radius:10px; height:6em; } .EditIcon{display:block; position:absolute; width:40em; height:15em; overflow:scroll; background-color:white; z-index:1; border:dimgrey solid 2px;} .PagePath {position:absolute; left:5.5em; top:5em; font-size:7pt; width:35em; display:none; background-color:LightYellow; font-style:italic;} /********************************************************************/ /* Alerts styles */ /********************************************************************/ #confirmMessage, #promptMessage, #infoMessage, #alertMessage {font-size:small !important; padding:0 0 0 30px;} .NoContextObject {margin:40px; color:Red; font-size:small; font-weight:bold;} .NoContextObjectTooltip .tooltip-inner {color:red!important; font-weight:bold; font-size:1.25rem;} #InfoBox, #FavoritesPopup, #OverflowFavoritesPopup {border:2px solid dimgrey; background-color:white; padding:1em; position:absolute; z-index:10; } #InfoBox {max-width:40em; } #FavoritesPopup {width:40em; } #OverflowFavoritesPopup {display:none; width:20em; position:absolute !important; } #InfoBox > ul > li {list-style-type:none; display:block; color:dimgrey; max-width:40em; } #InfoBox > ul > li * {font-size:small; } /********************************************************************/ /* Login page styles */ /********************************************************************/ .loginpage {width: 100%; } .loginlogo {width: 400px; height: 200px; margin: 0px auto; background: transparent url('/Skins/Appel/graphics/loginlogo.png') center bottom no-repeat; } .loginform {width: 368px; margin: 0px auto; padding: 10px; border: 4px solid #333333; border-radius: 20px; } .loginform span, .loginform label, .loginform input, .loginform a { font-size: small; } .loginform input { padding-top:0; } .loginform input[type="text"], .loginform input[type="password"] { border: 1px solid #dddddd; padding:0 1em; background-color:white; } .loginform .loginprompt { width: 90px; margin-top: 10px; } .loginform .btn, .loginform a { display: block; margin-top: 10px; } .loginform .btn:hover:enabled { text-decoration: underline; background-image: none; } .loginintro { display:block; } .loginresult { color: Red; background-color:White; margin-top: 1em; } .loginhelp {width: 366px; margin: 0px auto; padding: 10px; font-size:x-small; color:dimgray; } .loginheader { margin-bottom: 12px; } /* Administration Documents classes */ .CategorieSelectionPanel {overflow:auto; margin-bottom:1em;} .CategorieSelectionPanel > div { float:left; margin: 0.2em; background-color:#eeeeee; } .CategorieSelectionPanel > div > div {float:left;} .CategorieSelectionPanel > div > a { display: block; height: 3em; padding-top: 1.5em; text-align: center; background-color: steelBlue; color: white; font-weight: bold; } .CategorieSelectionPanel > div > a.selected { background-color: Blue; } .CategorieSelectionPanel > div > div > a {display:block; width:18em; padding:1px 0;} .CategorieSelectionPanel > div > div > a.selected {background-color:lightgrey; font-weight:bold;} /* Administration Sumatra Database selection classes */ .DatabaseSelectionPanel {overflow:auto; margin-bottom:1em;} .DatabaseSelectionPanel > div { margin: 0.2em; } .DatabaseSelectionPanel > div > a { height:3em; padding-top:1.5em; text-align:center; background-color:steelBlue; color:white; font-weight:bold; width:18em; margin-bottom:0.5em; } .DatabaseSelectionPanel > div > a.selected { background-color: Blue; } .DatabaseSelectionPanel > div > span { margin-left:2em; } /* Image Picker */ #maxccImages {overflow-y:scroll;} div.thumbnail {width:62px; height:62px; border:solid 2px transparent; margin:0 4px 4px; float:left;} div.thumbnail > img {max-width:60px; max-height:60px;} .imageSelected {border: solid 1px dimgrey !important; box-shadow: 2px 2px 1px grey;} /* Highlighting code */ .Referenced {background-color:LightBlue; display:inline; } .References0 {background-color:#bdf5bd; display:inline; } .References1 {background-color:#90ee90; display:inline; } .References2 {background-color:#65e765; display:inline; } .References3 {background-color:#38e038; display:inline; } /* Drag drop code for dragging files on input[type="file"] */ .draganddrophandler {border:4px solid LightGrey; min-height:8em; overflow:hidden; max-width:100%;} .draganddrophandler .info {font-weight:bold; font-size:larger; color:LightGrey;} .draganddrophandler.over {border:4px solid DimGrey !important;} .draganddrophandler.dropped {border:4px dotted DimGrey !important; } .droppedfile {padding:0.5em; float:left; background-color:LightGrey; margin:1em; } .droppedfile > span {width:20em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:8px;} .droppedfile > select {width:15em;} .droppedfile > * {vertical-align:middle;} /* Approve or reject Documents */ .Approve, .Reject {padding:0; color:white; font-weight:bold; text-decoration:none;} .Approve {background-color:DarkGreen;} .Reject {background-color:FireBrick;} /* Role or UserGroup matrix */ .Matrix td, .Matrix th {cursor:pointer;} .Matrix th {overflow:hidden;} .Matrix th .verticaltext { transform-origin:center; transform:translate(88px, 80px) rotate(-90deg); height:200px; white-space:nowrap; width:20px; } .UsageChanged {background-color:#dddddd;} /* Upload button style as single icon button */ .uploadIconInline { vertical-align:middle; margin-left:2px; background-image:url('../images/Icons20/maxcc_20x20_bijlage.png'); display:inline-block; cursor:pointer; height:20px; width:20px; } /* Download button style as single icon button */ .downloadIconInline { vertical-align:middle; margin-left:2px; background-image:url('../images/Icons20/maxcc_20x20_bekijken.png'); display:inline-block; cursor:pointer; height:20px; width:20px; } /* Swap services / Diensten ruilen */ .SwapRequested, .SwapRequested > td {background-color: #A8CFFF;} /* Blauwig */ .SwapInvited, .SwapInvited > td {background-color: #FFE44F;} /* Geelachtig */ .SwapAccepted, .SwapAccepted > td {background-color: #90EE90;} /* Groenig */ .SwapRefused, .SwapRefused > td {background-color: #F08080;} /* Roodachtig */ /* Swap services / Diensten ruilen in het rooster */ .swap {font-size:16px; position:absolute; left:0.1rem; bottom:-0.4rem; background-size:contain; margin:0!important;} .requested {color: #5EADE5;} /* Zelfde kleur blauw maar donkerder */ .accepted {color: #74BF74;} /* Zelfde kleur groen maar donkerder */ /* Generic */ .LargerFont {font-size: larger;} .BoldFont {font-weight: bold;} .absolute {position:absolute !important;} /* Vending Machine */ .units {width:10px;} #VendingMachineRegistration {margin-top:1em;} #VendingMachineRegistration td { padding: 0 2em 0.5em 0; } /* In the html code the floatlefts and floatrights must have a max-width setting */ .floatcontainer {overflow:hidden; padding-bottom:4px;} .floatleft {float:left; width:100%;} .floatright {float:right; width:100%;} /* Image List for editors */ #imageContainer > a {height:90px;width:150px;text-align:center;} #imageContainer > a > img {max-height:90px;max-width:90px;display:block;margin:auto;} #imageContainer > a > label {height:4em;max-width:150px;overflow:hidden;} #imageBrowser > .UploadFile > * {margin-right:2rem;} #imageBrowser > .UploadFile.over {background-color:#f0f0f0; transition:background-color 1s linear;} #imageBrowser > .UploadFile {background-color:white; transition:background-color 0.5s linear;} /* Widgets */ .WidgetPanel { padding: 10px; height: 100%; width: 100%; overflow: hidden; } .WidgetHeader { font-size: 12px; font-weight: bold; width: 100%; text-align: center; } .WidgetSubHeader { font-size: smaller; width: 100%; text-align: center; } .WidgetData { height: calc(100% - 50px); width: calc(100% - 50px); margin-left: 10px; } @media screen and (max-width: 991.98px) { .WidgetSubHeader {font-size: 8px;} .WidgetData {height: calc(100% - 35px); width:calc(100% - 35px); margin-left:17px;} } @media screen and (max-width: 575.98px) { .WidgetHeader {font-size: 10px;} .WidgetSubHeader {font-size: 6px;} .WidgetData {height: calc(100% - 25px); width:calc(100% - 25px); margin-left:0px;} } /* End Widgets */ /********************************************************************/ /* Styles uit style.css */ /********************************************************************/ .disable-animation { transition: none !important; transform: none !important; animation: none !important; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ #hamburger-button { padding: 15px 0 15px 15px; display: inline-block; cursor: pointer; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } #hamburger-button:hover {opacity: 0.7; } #hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } #hamburger-box span { display: block; position: absolute; height: 2px; width: 30px; background: #404040; border-radius: 2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #hamburger-box span:nth-child(1) { top: 8px; } #hamburger-box span:nth-child(2),#hamburger-box span:nth-child(3) { top: 15px; } #hamburger-box span:nth-child(4) { top: 22px; } #hamburger-button.is-active #hamburger-box span:nth-child(1) { top: 18px; width: 0%; left: 50%; } #hamburger-button.is-active #hamburger-box span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger-button.is-active #hamburger-box span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #hamburger-button.is-active #hamburger-box span:nth-child(4) { top: 18px; width: 0%; left: 50%; } .focusInput { position:absolute; left:-100%; width:0px; border:none!important; outline:none!important; box-shadow:none!important; } /* nieuw 29-5-2017 */ a { color:var(--text-color); text-decoration: none; transition: .5s; } a:focus { color: #404040; text-decoration: none; } a:hover { color: #404040; /* !important removed because of conflicts with bgItemRed etc. */ text-decoration: none; } .float-right { float: right; } button { border: 1px solid #e5e5e5; } /* einde*/ /* nieuw 23-5-2017*/ form .input-group-addon { border-radius: 0; color: #ccc; } form .input-group-addon:hover { background-color: #e6e6e6; } /* einde*/ .input-group { /* nieuw 23-5-2017 box-shadow, transition en focus weg (verplaats naar alleen de zoekbalk)*/ } .input-group input.form-control { border: 1px solid #e0e0e0; border-radius: 0; box-shadow: none; padding-left: 30px; } .input-group input.form-control:focus { box-shadow: -2px 0 5px #b5b5b5; border-color: #404040; } .input-group input.form-control + .glyphicon-search { color: #b5b5b5; position: absolute; z-index: 10; left: 0; padding: 10px; font-size: 15px; } .dropdown-menu { margin-top:0px; box-shadow: 0 6px 12px #f1f1f1; border-radius: 0px 0px 4px 4px; border: 1px solid #e5e5e5; } .dropdown-menu li a { color: #555; } .dropdown-menu li a:hover { color: #404040; /* nieuw 23-5-2017*/ background-color: transparent; } .grey-background { background-color: #f1f1f1; } /* oud ? */ .form-group input.form-control { border: 1px solid #e0e0e0; border-radius: 0; box-shadow: none; padding-left: 30px; } .form-group input.form-control:focus { box-shadow: -2px 0 5px #b5b5b5; border-color: #404040; } .popup-button { border-radius: 0px; } #header { height: 100px; /* nieuw 23-5-2017*/ /*einde*/ } #header .logo { white-space:nowrap; } #contractant-dropdown > .dropdown-menu { white-space:normal; } #header .logo .dropdown-menu { overflow-y:scroll; } #header .logo .dropdown-menu > span { display: inline-block; line-height: 45px; margin-left: 20px; } #header .logo .dropdown-menu > input { width: 65%; display: inline-block; margin: 10px 5px 5px 15px; padding-left:1rem; height: 2.5rem; } @media (max-width: 991.98px) { #header .logo .dropdown-menu > span {display: none !important;} #header .logo .dropdown-menu > input {width: 85%;} } #header .logo .dropdown-menu img { width: 30%; margin-right: 5px; } #header .logo .dropdown-menu .form-control { border-radius: 0; } #header .logo .dropdown-menu .form-control:focus { border-color: #404040; box-shadow: -2px 0 5px #b5b5b5; } #header .logo .dropdown-menu > div { display: inline-block; line-height: 2em; margin-left: 20px; min-width:10em; } @media (min-width: 576px) { #header .context { margin-top: 15px; } } #header .context { text-align: center; position: relative; } #header .context span { vertical-align:middle; margin-left:0.5em; } #header .search .btn { border-radius: 0; padding: 7px 12px; } #header .search .dropdown-menu { width: 90%; /* Some compatibility with older browsers */ width: calc(100% - 66px); /* 66px = search button width. Keeps the dropdown below the search textbox */ padding: 15px 20px; margin-top: 0; box-shadow: 0 4px 12px #f1f1f1; top: 100%; } #header .search .dropdown-menu .search-category { background-color: #f1f1f1; color: #555; /* nieuw 23-5-2017*/ padding: 5px; margin: 10px 0 0 0; } #header .search .dropdown-menu .search-category .fa { margin-right: 5px; } #header .search .dropdown-menu li { padding: 3px; } #header .search .dropdown-menu li a { } #header .search .dropdown-menu li a:hover { color: #404040; } #header .search .dropdown-menu li a .float-right { color: #b5b5b5; } #header .search .dropdown-menu li:last-child { margin-bottom: 30px; } /* Additional MaxCC settings for correcting style.css or other skins */ .userInfo:focus { border-color: #E5E5E5 !important; } #header .search .dropdown-menu a { display:block; padding:3px; } #header .search .dropdown-menu a.selected { font-weight:bold; background-color:#dfdfdf; } .fa {transition:.5s;} @media screen and (max-width: 767.98px) { #header .search { margin-bottom: 10px; } } #UserArea.open .dropdown-toggle { box-shadow: 0px 0px 5px #f1f1f1; border: 1px solid #e5e5e5; } #UserArea.open .btn:hover { border-color: #E5E5E5; } #UserArea { margin-top: 14px; height: 75px; float: right; background: none; color: black; box-shadow: none; /*border-color: #E5E5E5;*/ /* nieuw 23-5-2017*/ } #UserArea .userInfo { background: none; color: black; box-shadow: none;} #UserArea .name > p { vertical-align: top; margin-top: 10px; } #UserArea .name span { text-align: right; color: #b5b5b5; display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #ProfileContainer, .ProfileContainer {float:right;} .roundedInitials div { height: 100%; line-height: 60px; text-align: center; } .roundedImage, .roundedInitials { display: inline-block; height: 60px; width: 60px; border-radius: 50%; border: 2px solid #404040;} .roundedImage { background-repeat: no-repeat; background-position: center; background-size: contain; background-color: transparent; } .roundedInitials { text-align: center; overflow: hidden; color: white; background-color: #404040; } .roundedNoImage { text-align: center; overflow: hidden; color: lightgrey; border-color: lightgrey; background-color: white;} /* Rounded images/initials in a datagrid (much smaller) */ .roundedInitials.small div { line-height: 20px; font-size: 8px; } .roundedImage.small, .roundedInitials.small { height: 20px; width: 20px; border: 1px solid #404040; vertical-align:middle; margin-right:4px; } #ProfileToggle { /* Zie ook .contextInfo:after */ display: inline-block; color: #404040; position: relative; top: 20px; left: 5px; font-size: 18px; } #UserArea li a {display:block;} #UserArea li .icon { float: right; height: 20px; font-size:20px; margin:0; } #UserArea .userInfo + .dropdown-menu { border-top: 1px solid #e5e5e5; } #header .input-group { box-shadow: -2px 2px 5px #f1f1f1; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } #header .input-group:hover { box-shadow: -2px 2px 5px #b5b5b5; } #navmain {z-index:3;} #nav, #favo-bar, #favo-bar-dropdown, #favoDropdown, #iconbar {height:44px;} #iconbar {padding-right:4px !important;} /* Dit zorgt er voor dat er geen scroll bar getoond wordt in sommige situaties. Teveel pixels is ook niet goed, dan krijg je soms wrapping van buttons */ #nav .navbar-header .hamburger { color: #404040; padding-top: 5px; padding-bottom: 5px; } #nav .navbar-header .hamburger p { font-size: 20px; display: inline-block; margin: 0; } #nav ul { list-style-type: none; margin: 0; padding: 0; } .navbar {padding-top:0; padding-bottom:0; height:3rem;} .navbar-complementary { background-color: #404040; color: white; } .contextmenuheader > .roundedImage {position:absolute; right:20px; height:40px; width:40px;} .contextmenuheader > .roundedImage > div {line-height:36px;} .contextmenuheader > span {display:block; color:#b5b5b5; font-size:1rem;clear: both; float:left; width:calc(100% - 60px); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #favo-bar {overflow:hidden;} #favo-bar > .nav-item {padding-top: 6px;} #favo-bar .icon {margin-right:1px;} #favo-bar-dropdown {padding-top: 0px !important;} #favo-bar-dropdown a.nav-link { padding: 0.5rem 1rem; } .favo-label { max-width:20em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width: 575.98px) { #favobarContainer {padding-right:0;} } #favoDropdown { background-color:white; padding-left:4px; padding-right:4px; } #favoDropdown > span { width:32px; height:32px; } #favoDrop { padding-top: 10px; padding-bottom: 10px; } #favoDrop li { white-space:nowrap; } #iconbar > li { float: right; } #iconbar > li a { padding: 0 5px; } #iconbar> li .dropdown-menu { padding: 10px 15px; } #loketDropdown::before { content: ''; background-image: url("../Images/svg/web-navigation/menu3hor.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); display: block; margin: 11px 5px 11px 5px; height: 20px; width: 20px; } #loketDropdown.ToolsMenuArea::before { background-image: url("../Images/svg/web-navigation/menu.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } #loketDrop > li { padding: 0 2px; } #loketDrop > li > a { display:inline-block; white-space: normal; text-align: center; margin-top: 10px; /* nieuw 23-5-2017*/ padding: 0; } #iconbar .fa { font-size: 25px; color: #b5b5b5; padding: 9px 4px; } #iconbar .fa:hover { color: #404040; } #nav .icon-bar .fa:focus, #nav .icon-bar .is-active > .fa, #nav .icon-bar .Active > .fa { color: #404040; } #favchoose {display:none; z-index:1; background:white; border:1px solid #e5e5e5; padding:1rem; text-align:left;} #favchoose .fa {vertical-align:middle; margin-right:1rem; width:35px; text-align:center;} .timerBar {width:100%; height:4px; background-color:#404040;} #notificationDropdown {color:#b5b5b5;} #notificationDropdown.active .fa {color:#404040;} #notificationDropdown .countNotifications {display:none;} #notificationDropdown.active .countNotifications {display:block;} #notificationDropdown .countNotifications { background-color: red; border-radius: 8px; color: white; position: absolute; font-size: 9px; top: 5px; left: 50%; padding: 0 4px;} #ntfDropParent {padding:0 0 0 4px !important;} /* Just for IE (to prevent flickering when scrolling) #ntfDrop is wrapped in a div */ #ntfDrop {overflow-x:hidden; overflow-y:scroll; height:auto;} #ntfDrop li:not(:first-child) {margin-top:1em; } #ntfDrop li {position:relative; display: block; float:none !important; padding-left:3rem; } /* Important: the padding-left (3rem) of the li corresponds with the margin-left of the checkmark (-3rem). */ #ntfDrop li.divider {padding: 0; } #ntfDrop .fa {font-size:2em !important; margin-top:-6px; cursor:pointer; position:absolute; margin-left:-3rem; } /* Checkmark */ #ntfDrop h1 {color:#404040; font-size:1em; display:inline-block; font-weight:bold;} #ntfDrop h1 > a:link, #ntfDrop h1 > a:visited {color:#404040; text-decoration:underline;} #ntfDrop h1 a {text-decoration:underline;} #ntfDrop p {max-height:5em; overflow:hidden; position:relative; padding-left:4px;} #ntfDrop p::after { content: ""; position: absolute; top: 3em; /* max-height of p - height of this + 1 em*/ right: 0; width: 100%; height: 3em; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } #ntfDrop li.expandedNotification p {max-height:15em; overflow-y:auto;} #ntfDrop li.expandedNotification p::after {content:none;} /* Elements to the toolsmenu are hidden initially. When moved to the tools menu they are made visible. */ .ToolsMenu {display:none;} #ToolsMenuArea > li { padding:0.25rem 0; } /* This margin and padding are for creating space around the tools menu for info buttons etc. */ #ToolsMenuArea { margin: -1rem !important; padding: 1rem 1.5rem !important; } /* Affix was removed from Bootstrap 4. The Bootstrap team recommends using position:sticky instead. But this doesn't work in IE, and also in other browsers it doesn't work in combination with the current MaxCC navbar setup en dropdown menus. Therefor the Affix plugin is imported in MaxCC, see affix.js. The next 2 classes are also needed for Affix. */ .affix {position: fixed; top: 0;} .affix-bottom {position: absolute;} .affix {width: 100%;} .affix-top {position: static;} .affix + .row {padding-top: 200px; } /* Reset/tweak some bootstrap class */ .dropdown-item.active, .dropdown-item:active { color: initial; text-decoration: initial; background-color: initial; } .nav-link {color: var(--text-color) !important;} /* Bootstrap 5 override */ #ToastContainer { position:fixed; z-index:10000; top:10vh; height: 0px; width:100%; } .toast { top:0; right:0; background-color: rgba(255, 255, 255, 1); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-size:1.0rem; margin-left: 40%; margin-right: 40%; min-width: 20%; margin-top: 150px; z-index: 1; border-radius: .25rem; padding: .75rem 1.25rem; color: white; } .toast .icon { margin: 0 4px 0 0; } @media (max-width: 575.98px) { .toast { margin-left: 20%; margin-right: 20%; min-width: 60%; } } @media screen and (min-width: 576px) and (max-width: 767.98px) { .toast { margin-left: 30%; margin-right: 30%; min-width: 40%; } } .toast.Info { background-color: #038800; } .toast.Alert { background-color: FireBrick; } .toast-header { display:none; } .toast-body button { background-color: transparent; border: none; box-shadow: none; } /* +++++++++ MEGAMENU +++++++++ Standaard settings. Schermgrootte afhankelijke settings verderop. */ .megamenu a {padding: 6px 0px 6px 15px;} .megamenu {display:none; background-color:white;overflow-y:auto; overflow-x:hidden;} .megamenu .list-item {list-style: none; } .megamenu .list-item a {color: #999999; font-size:1rem;} .megamenu .list-item a:hover {color: #404040;} .megamenu .list-item .sublist-item {list-style: none; line-height:0.8em; } .megamenu .sublist-item a {font-size:0.9rem; padding-left:35px !important;} .megamenu .subsublist {padding-left: 4px; margin-top:0px; margin-bottom:0px; } .megamenu .subsublist-item {list-style: none; line-height:0.4em; } .sublisttitle {margin-top:4px; padding: 0 0 0 25px !important;} .megamenu h3 { background-color: #404040; color: white; margin-top: 0; padding-top: 7px; padding-bottom: 8px; text-align: center; } .megamenu a {font-size: 1.1rem; } .megamenu .list {margin-top: -0.5em;} .megamenu-items {background-color:white; } .megadroprightmenu .megamenu-items {background-color:#f9f9f9; } /* --------- MEGAMENU --------- */ /* +++++++++ MEGADROPRIGHTMENU +++++++++ Standaard settings. Schermgrootte afhankelijke settings verderop. */ .megadroprightmenu a, .megadroprightmenu .sublisttitle {padding: 6px 15px !important; width:100%; white-space:nowrap; margin:0; } .megadroprightmenu a.has-sub-menu:after {content:"Ā»"; float:right; font-size:1.3rem; line-height:0rem; padding-top:0.6rem; margin:0 -12px 0 0;} .megadroprightmenu a.active, aside li.activemenu {background-color:#e5e5e5;} .megadroprightmenu, .megadroprightmenu .sub-menu {display:none; background-color:#f9f9f9; border-radius:3px; border:1px solid #f1f1f1; box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.25);} .megadroprightmenu.show, .megadroprightmenu .sub-menu.show {display:block; z-index:3;} .megadroprightmenu li {list-style: none; min-width:15rem;} .megadroprightmenu li a:hover {color: #404040;} .width0 {width:0;} .megadroprightmenu ul {column-rule:2px solid #f1f1f1;} /* --------- MEGAMENU --------- */ /* De Bootstrap 5 responsive breakpoints zijn: * xs: Extra small (< 576px) * sm: Small (576px ā‰„ X < 768px) * md: Medium (768px ā‰„ X < 992px) * lg: Large (992px ā‰„ X < 1200px) * xl: Extra large (ā‰„ 1200 px X < 1400px) * xxl: Extra extra large (ā‰„ 1400 px) De volgende @media queries zorgen er voor dat de combinatie van menu button en de rest van de navbar, en ook de combinatie van het aside menu, de content en het megamenu, goed resizen op de verschillende bootstrap scherm groottes. Zie daarvoor ook de Bootstrap classes op navbar-header, navbar en aside. Al deze @media queries en classes moeten gesynchroniseerd blijven. */ @media (max-width: 575.98px) { #header .logo { text-align:center;} .content { position: relative; } #LicenseLogoAnchor { height: 2rem; width:5rem; margin-left:10%;} .contextInfo { padding:0; } #contractant-dropdown { height: 2rem; } } @media (min-width: 576px) { #header .logo { padding: 10px; } .content { position: absolute; } #header .logo .dropdown-menu { /* More space on bigger screens, but this is too wide on smallscreens */ width: 150%; } #contractant-dropdown .dropdown-toggle { height: 100%; padding: 50% 0; } } @media screen and (min-width: 576px) and (max-width: 767.98px) { #LicenseLogoAnchor {width:100px;} } @media screen and (max-width: 767.98px) { .megamenu .card-columns { -webkit-column-count:1; -moz-column-count:1; column-count:1; } .megamenu-items > .card {width:100%; } } @media screen and (min-width: 768px) { .megamenu { top: 20%; height:72%; position: fixed; transition: all 0s ease; /* nieuw 29-5-2017 voor nu op 13px tot er een oplossing is gevonden voor de styling van de scrollbar in andere browsers*/ width: 50%; z-index: 55; border: 1px solid #f1f1f1; border-radius: 0; padding-top: 0; padding-bottom: 30px; } .megamenu .list { margin-bottom: 1em; } .megamenu-items > .card {width:33.33%; } } @media screen and (min-width: 768px) and (max-width: 991.98px) { #LicenseLogoAnchor {width:130px; } } @media screen and (min-width: 992px) { } @media screen and (min-width: 992px) and (max-width: 1199.98px) { #LicenseLogoAnchor {width:160px; } } @media screen and (min-width: 1200px) { #LicenseLogoAnchor {width:200px; } } #aside {width: auto;} #aside.droprightaside {white-space:nowrap; background-color:#f1f1f1; overflow-x:hidden; overflow-y:scroll; scrollbar-width:none;} #aside.droprightaside::-webkit-scrollbar {display: none; /* Voor Chromium, deze ondersteunt "scrollbar-width" (nog) niet */} #aside:not(.droprightaside) .title {float:left;} #aside:not(.show) .title:not(:first-child) {display:none;} #aside:not(.show) .contextmenuheader > span {display:none;} #aside.sidebar { background-color:white; border-right: 1px solid #f1f1f1; transition: all 0.2s; z-index: 1; padding-right: 0; overflow: auto; padding-left:0; } #aside.droprightaside:not(.show) {background-color:#f9f9f9;} #aside.droprightaside .card {background-color:#f9f9f9; border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0;} #aside .card, .megamenu .card { border: none; box-shadow: none; } #aside .card-header { background-color:transparent; border:none; border-radius:unset; border-bottom: 1px solid #f1f1f1; padding-left:14px; color:#303030; font-size:14px; cursor:pointer;} #aside .card-header:after { content: "\f0d8"; font-family: 'fontawesome'; display: inline-block; float:right; color:#303030; font-size: 16px;} #aside.droprightaside .card-header:after { margin-top:-2rem; } #aside.droprightaside:not(.show) .card-header:after { display:none; } #aside.droprightaside .card-header { height:3rem; background-color:#404040; color:white;} #aside.droprightaside.show .card-header:after { color:white;} #aside.show.sidebar .card .card-header.is-collapsed:after { content: "\f0d7"; } /* Nieuwe navigatie toggle */ #ToggleAlternativePageId {height:100%; align-content:space-around; padding:0 1rem; position:relative;} @media screen and (min-width: 576px) { #ToggleAlternativePageId > span {position:absolute; left:-100px;} } /* Taak 463577: Redesign menu (alleen in het nieuwe menu) Icons aan pagina categorie toegevoegd */ #aside .card-header.is-collapsed.active {border-left:4px solid #303030; padding-left:10px;} #aside.droprightaside .card-header.is-collapsed.active {border-left:4px solid white; padding-left:10px;} #aside .card-header > .icon {float:left; margin:0 1rem 0 0; height:20px; width:20px;} #aside ul { border: none; border-radius:unset; padding: 0; } #aside a.MainMenuItem span.icon {margin-right:11px;} #aside a.MainMenuItem span.title {float:none; display:none;} #aside.show a.MainMenuItem span.title {display:inline-block;} #aside a.MainMenuItem:hover, .megamenu a:hover {background-color: #f1f1f1 !important;} #aside.droprightaside a.MainMenuItem:hover, .megadroprightmenu a:hover {background-color: #e5e5e5 !important;} #aside a, .megamenu a {display:block;} /* Taak 426359: Ingeklapt menu uitbreiden met icoonweergave teruggedraaid. Uncomment deze regel als het weer geactiveerd moet worden!! #aside + .content {margin-left:50px; width:calc(100% - 50px);} */ #aside a {border-left:4px solid transparent; padding: 6px 0px 6px 15px;} #aside a.active {border-left-color:#404040;} /* Taak 426359: Ingeklapt menu uitbreiden met icoonweergave teruggedraaid. +++++ Verwijder de regels tot ----- als het weer geactiveerd moet worden!! */ /* Taak 426359: Ingeklapt menu uitbreiden met icoonweergave teruggedraaid. ----- Verwijder de bovenstaande regels tot +++++ als het weer geactiveerd moet worden!! */ /* Taak 426359: Ingeklapt menu uitbreiden met icoonweergave teruggedraaid. Uncomment dit gedeelte als het weer geactiveerd moet worden!! Vervang ook commentaar // ... // door open en sluiten (CSS kent geen genest commentaar) */ /* Taak 483631: Menu 3.0 hoofdcategorie tekst creĆ«ert overlap met in/uitklappen icoon Het menu is nu een vaste breedte, behalve bij xs, dan is de breedte 100%. LET OP: De oude code is uitgecommentarieerd. Commentaar in de oude code is tussen -- gezet, omdat genest commentaar niet werkt in css. */ /* @media screen and (min-width: 576px) and (max-width: 991.98px) { #aside.droprightaside.show { width:25%;} #aside.droprightaside.show + .content { left:0; margin-left:25%; width: 75%; } #aside.droprightaside.show.fixed + .content { margin-left: 25%; } -- Dit stukje moet na de overige #aside.droprightaside css -- #aside.droprightaside.show { margin-left: 0; } } @media screen and (min-width: 992px) and (max-width: 1805.98px) { #aside.droprightaside.show { width:16.66%;} #aside.droprightaside.show + .content { left:0; margin-left:16.66%; width: 83.34%; } #aside.droprightaside.show.fixed + .content { margin-left: 16.66%; } -- Dit stukje moet na de overige #aside.droprightaside css -- #aside.droprightaside.show { margin-left: 0; } } -- Maximale grootte van de aside is 300px -- @media screen and (min-width: 1806px) { #aside.droprightaside.show { width:300px;} #aside.droprightaside.show + .content { left:0; margin-left:300px; width: calc(100% - 300px); } #aside.droprightaside.show.fixed + .content { margin-left: 300px; } -- Dit stukje moet na de overige #aside.droprightaside css -- #aside.droprightaside.show { margin-left: 0; } } */ /* Nieuw, vaste menu-breedte */ /* Maximale grootte van de aside is 275px */ @media screen and (min-width: 576px) { #aside.droprightaside.show { width:275px;} #aside.droprightaside.show + .content { left:0; margin-left:275px; width: calc(100% - 275px); } #aside.droprightaside.show.fixed + .content { margin-left: 275px; } /* Dit stukje moet na de overige #aside.droprightaside css */ #aside.droprightaside.show { margin-left: 0; } } /* not show instellingen */ @media screen and (min-width: 576px) { #aside.droprightaside {margin-left:0; width:4.6rem;} #aside.droprightaside:not(.show) .contextmenuheader { width:65px; } #aside.droprightaside:not(.show) .contextmenuheader span { width:100%; display:block; } #aside.droprightaside:not(.show) + .content { left: 0; margin-left: 52px; width: calc(100% - 52px); } } @media screen and (max-width: 575.98px) { #aside { display:none; position:relative; left: -100%; width: 100%; padding-bottom:1px; max-height: calc(100vh - 44px);} .megamenu {margin-left:4%;} .megamenu a, .megamenu .list-item a {font-size:13px; padding-top:0 !important;} #aside.show + .content { margin-left: 0; width: 100%; } #aside.sidebar .card .list-group .list-group-item a {padding-top:0;} #aside.sidebar .card .list-group .list-group-item {height:auto; } /* The IE fix doesn't work here. */ /* Dit stukje moet na de overige #aside css en wijkt af van andere schermbreedtes */ #aside.show { display:block; left: 0; } #aside.show a { padding-left: 15px; font-size:larger;} } /* Taak 483631: Menu 3.0 hoofdcategorie tekst creĆ«ert overlap met in/uitklappen icoon Het menu is nu een vaste breedte, behalve bij xs, dan is de breedte 100%. LET OP: De oude code is uitgecommentarieerd. Commentaar in de oude code is tussen -- gezet, omdat genest commentaar niet werkt in css. */ /* @media screen and (min-width: 576px) and (max-width: 991.98px) { #aside { margin-left:-25%; width:25%;} #aside.show + .content { left:0; margin-left:25%; width: 75%; } #aside.show.fixed + .content { margin-left: 25%; } -- Dit stukje moet na de overige #aside css -- #aside.show { margin-left: 0; } } @media screen and (min-width: 992px) and (max-width: 1805.98px) { #aside { margin-left:-16.66%; width:16.66%;} #aside.show + .content { left:0; margin-left:16.66%; width: 83.34%; } #aside.show.fixed + .content { margin-left: 16.66%; } -- Dit stukje moet na de overige #aside css -- #aside.show { margin-left: 0; } } -- Maximale grootte van de aside is 300px -- @media screen and (min-width: 1806px) { #aside { margin-left:-300px; width:300px;} #aside.show { width:300px;} #aside.show + .content { left:0; margin-left:300px; width: calc(100% - 300px); } #aside.show.fixed + .content { margin-left: 300px; } -- Dit stukje moet na de overige #aside css -- #aside.show { margin-left: 0; } } /* Nieuw, vaste menu-breedte */ /* Maximale grootte van de aside is 275px */ @media screen and (min-width: 576px) { #aside { margin-left:-275px; width:275px;} #aside.show { width:275px;} #aside.show + .content { left:0; margin-left:275px; width: calc(100% - 275px); } #aside.show.fixed + .content { margin-left: 275px; } /* Dit stukje moet na de overige #aside css */ #aside.show { margin-left: 0; } } .content { z-index: 0; } #BreadCrumb {background-color: transparent; display:inline-block;} #BreadCrumb > .nav-item {position: relative; white-space:nowrap; display:inline-block;} #BreadCrumb .dropdown-item.active { font-weight: bold; background-color: transparent; } #BreadCrumb .dropdown-item:hover {color: #404040; } #BreadCrumb .breadcrumb-arrow:after { content: "\f0da"; font-family: "fontawesome"; display: inline-block; font-size: 16px; color: #b5b5b5; margin-left: 1rem; margin-right: 0px; width:6px; } #BreadCrumb .breadcrumb-hide-arrow:after {color:transparent;} @media (max-width: 575.98px) { #BreadCrumb .breadcrumb-arrow { padding-left: 0; } #BreadCrumb .breadcrumb-arrow:after { margin-left:0.2rem; font-size:12px; } } #BreadCrumb :first-child.nav-item span { font-size: 1.3rem; } #BreadCrumb .active a {color: #404040;} .content .pageoptions { display: inline; } .content .pageoptions #pageoptions { background-image: url("../Images/svg/web-navigation/list.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); height: 40px; width: 40px; float: right; border-radius: 50%; margin: 10px; } .content .pageoptions #pageoptions:hover { box-shadow: 0px 0px 5px #b5b5b5; } .content .pageoptions .dropdown-menu { width: 250px; right: 0; left: auto; } .content .pageoptions .dropdown-menu li.icons a { display: inline-block; padding: 3px 17px; } .content .pageoptions .dropdown-menu li.icons a:first-child { margin-left: 20px; padding-left: 0; } #divPageHeaderTitle {font-size:x-large;} #divPageHeaderTitle label:not(:first-child):before {content:": ";} .footer { position:fixed; left:0; bottom:0; z-index:2; } @media (max-width: 575.98px) { /* Waarom dit gegoochel met z-indexen?? */ .footer { position: static; z-index:1; } } .footer p { text-align: center; line-height: 40px; margin-bottom: 0; padding: 5px; white-space:nowrap; } .footer p a { color: #404040; transition: .5s; } .footer p a:hover {color: #404040; } .footer p a.primary-link {text-decoration: underline; } .footer img { max-height: 40px; padding: 5px; } .footer .icon { margin-left:10px; margin-right:1px; } .footer a:first-child .icon {margin-left:0px;} /********************************************************************/ /* Styles voor icons */ /********************************************************************/ .icon { height: 20px; width: 20px; display: inline-block; margin: -5px; margin-right: 0; background-repeat: no-repeat;} .dataGrid .icon {margin: 0 4px 0 0;} .loket { height: 28px; width: 28px; display: inline-block; margin: -5px; margin-right: 0; } .loket { background-image: url("../responsive/loket.png"); } .loket-MG { background-position: -992px -0px; width: 28px; height: 28px; } .loket-WG { background-position: -36px -0px; width: 28px; height: 28px; } .loket-MW { background-position: -68px -0px; width: 28px; height: 28px; } .loket-ROI { background-position: -0px -0px; width: 28px; height: 28px; } .loket-FAV { background-position: -1584px -0px; width: 28px; height: 28px; } .icon-administratie { background-image: url("../Images/svg/office-productivity/folders.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-administratie.white { background-image: url("../Images/svg/office-productivity/folders.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-agenda { background-image: url("../Images/svg/updatedMenuIcons/Agenda.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-algemeen { background-image: url("../Images/svg/web-navigation/folder.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-algemeen.white { background-image: url("../Images/svg/web-navigation/folder.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-arbeidsproductiviteit { background-image: url("../Images/svg/productivity/stats-2.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-artikel, .icon-artikelen { background-image: url("../Images/svg/business-seo/tags-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-beheer { background-image: url("../Images/svg/web-navigation/settings.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-beheer.white { background-image: url("../Images/svg/web-navigation/settings.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-beheer.disabled { background-image: url("../Images/svg/web-navigation/settings.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-berichten { background-image: url("../Images/svg/updatedMenuIcons/Berichten.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-beschikbaarheid { background-image: url("../Images/svg/updatedMenuIcons/Beschikbaarheid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-beschikbaarheid.disabled { background-image: url("../Images/svg/updatedMenuIcons/Beschikbaarheid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-bestanden { background-image: url("../Images/svg/updatedMenuIcons/Bestanden.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-file-add { background-image: url("../Images/svg/interface/file-circle-plus-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-file-add.disabled { background-image: url("../Images/svg/interface/file-circle-plus-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-bibliotheek { background-image: url("../Images/svg/school/stack-of-books-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-bloem { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-boekhouding { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-bonus { background-image: url("../Images/svg/business-seo/medal-2.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-brutowinstmarge { background-image: url("../Images/svg/ecommerce/laptop.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-calendar { background-image: url("../Images/svg/interface/calendar-alt-regular.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-calendar-add { background-image: url("../Images/svg/interface/calendar-plus-regular.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-communicatie { background-image: url("../Images/svg/interface/speech-bubble-5.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-competenties { background-image: url("../Images/svg/ecommerce/list.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-contactpersonen { background-image: url("../Images/svg/updatedMenuIcons/Contactpersonen.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-contracten { background-image: url("../Images/svg/office-set/signing-the-contract.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-contract-info { background-image: url("../Images/svg/office-set/file-contract-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-contract-info.disabled { background-image: url("../Images/svg/office-set/file-contract-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-dashboard { background-image: url("../Images/svg/interface/gauge75.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-declaraties { background-image: url("../Images/svg/updatedMenuIcons/Declaraties.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-delete { background-image: url("../Images/svg/android-app/rubbish.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-delete.disabled { background-image: url("../Images/svg/android-app/rubbish.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-dienstverband { background-image: url("../Images/svg/business-seo/agreement.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-dienstverbanden { background-image: url("../Images/svg/android-app/building-user-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-dock-undock { background-image: url("../Images/svg/interface-and-web/two-filled-overlapped-rectangles.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-undock-dock { background-image: url("../Images/svg/interface-and-web/right-and-left-arrows-with-vertical-line-separation.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-documenten { background-image: url("../Images/svg/school/stack-of-books.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-doos { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-download { background-image: url("../Images/svg/interface-and-web/upper-right-arrow-in-square-button-outline.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-email { background-image: url("../Images/svg/ui-kit/email.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-email.disabled { background-image: url("../Images/svg/ui-kit/email.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-events { background-image: url("../Images/svg/updatedMenuIcons/Events.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-evenementen { background-image: url("../Images/svg/updatedMenuIcons/Events.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-events.disabled { background-image: url("../Images/svg/updatedMenuIcons/Events.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-excel { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-exclamation { background-image: url("../Images/svg/interface-and-web/warning-exclamation-sign-in-filled-triangle.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-factuur, .icon-facturatie { background-image: url("../Images/svg/updatedMenuIcons/Facturatie.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-omzet-definitief { background-image: url("../Images/svg/arrow-down-up-lock-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-omzet-definitief.disabled { background-image: url("../Images/svg/arrow-down-up-lock-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-favorite { background-image: url("../Images/svg/interface/star.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-favorite.disabled { background-image: url("../Images/svg/interface/star.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-fiatteren { background-image: url("../Images/svg/interface/check-mark.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-fiatteren.disabled { background-image: url("../Images/svg/interface/check-mark.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-fiatteren-white { background-image: url("../Images/svg/interface/check-mark-white.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-fiatteren-square { background-image: url("../images/svg/web-navigation/checked.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-fiatteren-square.disabled { background-image: url("../images/svg/web-navigation/checked.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-filter { background-image: url("../Images/svg/interface-and-web/filter-filled-tool-symbol-with-padding.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-functie-wijzigen { background-image: url("../Images/svg/interface/user-astronaut-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-functie-wijzigen.disabled { background-image: url("../Images/svg/interface/user-astronaut-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-functioneren { background-image: url("../Images/svg/interface/ranking-star-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-functioneren.disabled { background-image: url("../Images/svg/interface/ranking-star-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-gebruikers { background-image: url("../Images/svg/updatedMenuIcons/Gebruikers.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-user-check { background-image: url("../Images/svg/interface/user-check.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-user-check.disabled { background-image: url("../Images/svg/interface/user-check.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-user-lock { background-image: url("../Images/svg/interface/user-lock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-user-lock.disabled { background-image: url("../Images/svg/interface/user-lock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-user-takeover { background-image: url("../Images/svg/android-app/right-arrow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-user-takeover.disabled { background-image: url("../Images/svg/android-app/right-arrow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-globe { background-image: url("../Images/svg/interface-and-web/global-grid-globe-symbol.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-handleiding { background-image: url("../Images/svg/school/book-and-magnifier.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-herhalen { background-image: url("../Images/svg/ui-kit/refresh.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ingrepen { background-image: url("../Images/svg/interface/clock-rotate-left.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ingrepen.disabled { background-image: url("../Images/svg/interface/clock-rotate-left.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-inkoop { background-image: url("../Images/svg/updatedMenuIcons/Inkoop.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-inrichting { background-image: url("../Images/svg/updatedMenuIcons/Inrichting.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-inrichting.disabled { background-image: url("../Images/svg/updatedMenuIcons/Inrichting.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-instructie { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-indienst { background-image: url("../Images/svg/interface/person-circle-plus-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-indienst.disabled { background-image: url("../Images/svg/interface/person-circle-plus-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-uitdienst { background-image: url("../Images/svg/interface/person-circle-minus-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-uitdienst.disabled { background-image: url("../Images/svg/interface/person-circle-minus-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-andere-organisatie { background-image: url("../Images/svg/interface/person-walking-arrow-right-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-andere-organisatie.disabled { background-image: url("../Images/svg/interface/person-walking-arrow-right-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-inuitdienst { background-image: url("../Images/svg/interface/person-walking-arrow-loop-left-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-inuitdienst.disabled { background-image: url("../Images/svg/interface/person-walking-arrow-loop-left-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-inzichtinomzet { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-kassa { background-image: url("../Images/svg/school/calculator.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-kilometerregistratie { background-image: url("../Images/svg/android-app/person-biking-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-mobiliteit { background-image: url("../Images/svg/android-app/person-biking-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-klok { background-image: url("../Images/svg/ui-kit/circular-clock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-klokken { background-image: url("../Images/svg/updatedMenuIcons/Klokken.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-klokken.disabled { background-image: url("../Images/svg/updatedMenuIcons/Klokken.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-koppelingen { background-image: url("../Images/svg/updatedMenuIcons/Koppelingen.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-password { background-image: url("../Images/svg/interface-and-web/password-key.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-password.disabled { background-image: url("../Images/svg/interface-and-web/password-key.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-clocking { background-image: url("../Images/svg/interface/clocking.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-clocking-white { background-image: url("../Images/svg/interface/clocking-white.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-clock-arrow { background-image: url("../Images/svg/interface-and-web/clock-with-refresh-circular-arrow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-clock-arrow.disabled { background-image: url("../Images/svg/interface-and-web/clock-with-refresh-circular-arrow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-clock-solid { background-image: url("../Images/svg/web-navigation/clock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-clock-solid.disabled { background-image: url("../Images/svg/web-navigation/clock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-coin { background-image: url("../Images/svg/android-app/coins2.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-coin.disabled { background-image: url("../Images/svg/android-app/coins2.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-hand-stop { background-image: url("../Images/svg/interface-and-web/male-hand-shape.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-kwaliteit { background-image: url("../Images/svg/productivity/user.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-like { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-lineaal { background-image: url("../Images/svg/interface-and-web/ruler-or-comb-diagonal-tool.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-lineaal.disabled { background-image: url("../Images/svg/interface-and-web/ruler-or-comb-diagonal-tool.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-list { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-locatie { background-image: url("../Images/svg/android-app/maps-and-flags-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-mijnloket { background-image: url("../Images/svg/android-app/spreadsheet-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-mijnrapporten { background-image: url("../Images/svg/interface-and-web/folder-filled-with-tabs.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-nieuws { background-image: url("../Images/svg/office-set/lightbulb-idea.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-omzbetwijzeexp { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-omzbetwijzeimp { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-omzet { background-image: url("../Images/svg/business-seo/line-chart.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ontwikkelaanvraag { background-image: url("../Images/svg/productivity/code.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-omzetontwikkeling { background-image: url("../Images/svg/business-seo/line-chart.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ontwikkeling { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-organisatie { background-image: url("../Images/svg/updatedMenuIcons/Organisatie.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-overzichten { background-image: url("../Images/svg/office-set/graph-analysis.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-oog { background-image: url("../Images/svg/ui-kit/eye.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-pagina { background-image: url("../Images/svg/ui-kit/worldwide.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-paneel { background-image: url("../Images/svg/interface/bookmark-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-paraplu { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-personeel { background-image: url("../Images/svg/updatedMenuIcons/Personeel.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-personeel.white { background-image: url("../Images/svg/updatedMenuIcons/Personeel.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-personen { background-image: url("../Images/svg/ui-kit/group.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-persoonlijk { background-image: url("../Images/svg/interface/user-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-planning-personen-1-week { background-image: url("../Images/svg/android-app/calendar-circle-user-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-planning-personen-1-week.disabled { background-image: url("../Images/svg/android-app/calendar-circle-user-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-planning-personen-4-weken { background-image: url("../Images/svg/android-app/square-4-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-planning-personen-4-weken.disabled { background-image: url("../Images/svg/android-app/square-4-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-planning { background-image: url("../Images/svg/updatedMenuIcons/Planning.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-planning.disabled { background-image: url("../Images/svg/updatedMenuIcons/Planning.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-planning-flex { background-image: url("../Images/svg/android-app/calendar-users-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-planning-flex.disabled { background-image: url("../Images/svg/android-app/calendar-users-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-prestatie { background-image: url("../Images/svg/updatedMenuIcons/Prestatie.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-prestatie.white { background-image: url("../Images/svg/updatedMenuIcons/Prestatie.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-prognose { background-image: url("../Images/svg/business-seo/line-chart.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-projecten { background-image: url("../Images/svg/updatedMenuIcons/Projecten.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-quit { background-image: url("../Images/svg/customer-services/quit.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-raadplegen { background-image: url("../Images/svg/office-set/analysis-chart.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-regioprestatie { background-image: url("../Images/svg/productivity/share-3.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-rapporten { background-image: url("../Images/svg/updatedMenuIcons/Rapporten.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-resultaat { background-image: url("../Images/svg/ecommerce/television-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-roosteren { background-image: url("../Images/svg/office-set/meeting-deadlines.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-rooster-edit { background-image: url("../Images/svg/web-navigation/browser-3.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ruilen { background-image: url("../Images/svg/interface-and-web/arrow-right-arrow-left-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ruilen.disabled { background-image: url("../Images/svg/interface-and-web/arrow-right-arrow-left-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-salaris { background-image: url("../Images/svg/finances/piggy-bank.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-schedule { background-image: url("../Images/svg/interface/calendar-3.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-schedule.disabled { background-image: url("../Images/svg/interface/calendar-3.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-schedule-white { background-image: url("../Images/svg/interface/calendar-3-white.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-signing { background-image: url("../Images/svg/interface/signing-start.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-signing.disabled { background-image: url("../Images/svg/interface/signing-start.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-smartphone{ background-image: url("../Images/svg/updatedMenuIcons/mobile-screen-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-sollicitatie { background-image: url("../Images/svg/android-app/user-tie-hair-long-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-statusFalse { background-image: url("../Images/svg/Circle.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-statusTrue { background-image: url("../Images/svg/Circle.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=rgb(126,211,33)"); } .icon-status-zoombar { background-image: url("../Images/svg/productivity/magnifying-glass-chart-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-status-zoombar.disabled { background-image: url("../Images/svg/productivity/magnifying-glass-chart-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-stopwatch { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-structuur { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-support { background-image: url("../Images/svg/android-app/telemarketer.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-support.white { background-image: url("../Images/svg/android-app/telemarketer.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-switchback { background-image: url("../Images/svg/android-app/left-arrow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-tabel { background-image: url("../Images/svg/android-app/table.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-taken { background-image: url("../Images/svg/office-set/task-complete.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-tandwiel { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-telefoon { background-image: url("../Images/svg/office-productivity/telephone.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-thermometer { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-thumb-up { background-image: url("../Images/svg/android-app/thumbs-up-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-thumb-up.disabled { background-image: url("../Images/svg/android-app/thumbs-up-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-thumb-down { background-image: url("../Images/svg/android-app/thumbs-down-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-thumb-down.disabled { background-image: url("../Images/svg/android-app/thumbs-down-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-upload { background-image: url("../Images/svg/interface/upload.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-upload.disabled { background-image: url("../Images/svg/interface/upload.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-uren { background-image: url("../Images/svg/updatedMenuIcons/Uren.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-uren.white { background-image: url("../Images/svg/updatedMenuIcons/Uren.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-uren.disabled { background-image: url("../Images/svg/updatedMenuIcons/Uren.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-uurkosten { background-image: url("../Images/svg/finances/businessman-5.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-vastekosten { background-image: url("../Images/svg/office-set/office-block.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-vergelijkenbudget { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verjaardagstaart { background-image: url("../Images/svg/android-app/cake-candles-solid.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verjaardagstaart-wit { background-image: url("../Images/svg/android-app/cake-candles-solid-white.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-vakantie { background-image: url("../Images/svg/updatedMenuIcons/Verlof.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-vakantie.disabled { background-image: url("../Images/svg/updatedMenuIcons/Verlof.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-verlof { background-image: url("../Images/svg/updatedMenuIcons/Verlof.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verlof.disabled { background-image: url("../Images/svg/updatedMenuIcons/Verlof.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-verzuim { background-image: url("../Images/svg/updatedMenuIcons/Verzuim.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verzuim.disabled { background-image: url("../Images/svg/updatedMenuIcons/Verzuim.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-verrekijkerstaand { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verrekijkervoor { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verzuim { background-image: url("../Images/svg/customer-services/review.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verzenden { background-image: url("../Images/svg/school/new-message.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-verzuim.disabled { background-image: url("../Images/svg/customer-services/review.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-vliegtuigje { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-voorraad { background-image: url("../Images/svg/ecommerce/box-4.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weegschaal { background-image: url("../Images/svg/business-seo/panel.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-zakgeld { background-image: url("../Images/svg/default.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-ziekbeter { background-image: url("../Images/svg/customer-services/review.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-up { background-image: url("../Images/svg/interface-and-web/up-arrow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-unlocked { background-image: url("../Images/svg/ui-kit/padlock-1.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-locked { background-image: url("../Images/svg/ui-kit/padlock-2.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-locked-solid { background-image: url("../Images/svg/ui-kit/padlock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-locked-solid.disabled { background-image: url("../Images/svg/ui-kit/padlock.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=lightgrey"); } .icon-locked-solid-white { background-image: url("../Images/svg/ui-kit/padlock-white.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-visie { background-image: url("../Images/svg/interface/visie.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-relatiebeheer { background-image: url("../Images/svg/updatedMenuIcons/Relaties.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-relatiebeheer.white { background-image: url("../Images/svg/updatedMenuIcons/Relaties.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791&color=white"); } .icon-relaties { background-image: url("../Images/svg/updatedMenuIcons/Relaties.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } /* Weather icons */ .icon-weather-cloudy-heavy { background-image: url("../Images/svg/weather/cloudy-heavy.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-cloudy-light { background-image: url("../Images/svg/weather/cloudy-light.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-cloudy-medium { background-image: url("../Images/svg/weather/cloudy-medium.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-fog { background-image: url("../Images/svg/weather/fog.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-drizzle-light { background-image: url("../Images/svg/weather/drizzle-light.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-drizzle-medium { background-image: url("../Images/svg/weather/drizzle-medium.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-drizzle-heavy { background-image: url("../Images/svg/weather/drizzle-heavy.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-rain-light { background-image: url("../Images/svg/weather/rain-light.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-rain-medium { background-image: url("../Images/svg/weather/rain-medium.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-rain-heavy { background-image: url("../Images/svg/weather/rain-heavy.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-snow { background-image: url("../Images/svg/weather/snow.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-sunny { background-image: url("../Images/svg/weather/sunny.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } .icon-weather-thunder { background-image: url("../Images/svg/weather/thunder.svg?SkinId=bb03bc23b52a49b99bf61cd9be355791"); } /********************************************************************/ /* Overige styles */ /********************************************************************/ .show-all { float: right; /* of class="text-right" */ color: #404040; text-decoration: underline; transition: .5s; cursor:pointer; } .show-all:hover { color: #404040; text-decoration: none; } .overflow-hidden {overflow-x:hidden !important; overflow-y:hidden !important;} /********************************************************************/ /* Styles uit maxcc.css */ /********************************************************************/ #contractant-dropdown .dropdown-toggle { width:40px; font-size:1.75rem; } #contractant-dropdown .dropdown-menu { left:0; } .LicenseList a { display:block; } .LicenseList a.selected { font-weight:bold; color:#404040; } .buttonList > button { width:100%; border:silver solid 1px; margin-bottom:5px; padding:3px; border-radius:2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:block; } .button { cursor:pointer; } .LoginPoweredByLogo { display:none; } #loketDrop span { padding-top: 32px; width: 50px; word-wrap: break-word; margin-left: -10px; } #ContextSelector { background-image:none !important; margin-left:auto; margin-right:auto; } .contextInfo { background:none; width:100%; cursor:pointer; color:#b5b5b5; } .contextInfo:hover { color:#404040; } .contextInfo:focus { box-shadow:none; } .contextInfo:after { /* Zie ook #ProfileToggle */ display: inline-block; color: #404040; position: relative; font-size: 18px; } #contextList {width:100%; overflow:hidden;} #contextList a {display:block; padding:0.5rem 0; } #contextList a > span:first-child {overflow:hidden; max-width:70%; vertical-align:bottom; } @media (min-width: 1200px) { #contextList a > span:first-child {max-width:85%;} } .addContextItem { color:#404040 !important; font-weight:bold; font-size:20px; height:20px; width:20px; margin-top:-6px; position:absolute; margin-left:2rem !important; } .addContextItem:after { content:"+"; } #AddItemList { margin-top:8px!important; margin-left:-40px!important; } .searchresultlist { overflow-y:scroll; } .searchresultlist .nr { width:6rem; margin-right:0.2rem; text-overflow:ellipsis; text-align:center; overflow:hidden; vertical-align:bottom; /* Because of a CSS quirk: overflow:hidden messes up vertical-alignment. */ } .searchoptions { color:#404040; } .searchoptions > p:hover { color:#404040; } .searchoptions > p { float: right; } .searchoptions .glyphicon-triangle-bottom, #header #CurrentContextTitle .glyphicon-plus { display: inline-block; color: #404040; position: relative; font-size: 10px; cursor:pointer; } #CurrentContextTitle {height: 28px;} #CurrentContextTitle li > span { float: right !important; margin-top: 0.6em; } #SearchOption { width: auto; right: 0px; float: right; left: auto; padding:5px; } /* Lock/Unlock portal items on the screen */ .MoveLockUnlock {width:40px; height:40px; position:absolute; right:10px; top:-30px;} /* Lock/Unlock portal items in the tools menu area*/ #ToolsMenuArea .MoveLockUnlock {width:20px; height:20px; position:relative; right:0; top:0;} #AllUsersTools {text-align: center; height:38px;} #AllUsersTools > li:not(.hidden), #iconbar_xs > li:not(.hidden) { width:42px; clear:none; display:inline-block; float:none !important; padding:0 0px;} #AllUsersTools > li a {padding:0;} #userarea_xs > li, #iconbar_xs > li {padding-left:0; padding-right:0; padding-top:0px; padding-bottom:15px;} #userarea_xs > li a, #iconbar_xs > li a {width:100%;} #userarea_xs span:first-child {text-overflow:ellipsis; overflow:hidden; width:90%;} #userarea_xs .icon {float:right; padding:0 !important;} #iconbar_xs {text-align:center;} #AllUsersTools .fa { margin: 0px 5px 0px 5px; font-size: 20px !important; text-align: center; } #LokettenToolbars > hr { margin-top: 10px; } /* Additional Bootstrap-like classes for ease of use for SoftNewLine WebpartItem property */ /* Hidden when in tier or smaller */ @media (max-width: 575.98px) { .hidden-xs-down, .visible-sm-up { display: none !important; } } @media (max-width: 767.98px) { .hidden-sm-down, .visible-md-up { display: none !important; } } @media (max-width: 991.98px) { .hidden-md-down, .visible-lg-up { display: none !important; } } @media (max-width: 1199.98px) { .hidden-lg-down, .visible-xl-up { display: none !important; } } .hidden-xl-down { display: none !important; } /* Visible when in tier or smaller */ @media (max-width: 575.98px) { .visible-xs-down, .hidden-sm-up { display: inline-block !important; } } @media (max-width: 767.98px) { .visible-sm-down, .hidden-md-up { display: inline-block !important; } } @media (max-width: 991.98px) { .visible-md-down, .hidden-lg-up { display: inline-block !important; } } @media (max-width: 1199.98px) { .visible-lg-down, .hidden-xl-up { display: inline-block !important; } } .visible-xl-down { display: inline-block !important; } /* Hidden when in tier or bigger */ .hidden-xs-up { display: none !important; } @media (min-width: 576px) { .hidden-sm-up, .visible-xs-down { display: none !important; } } @media (min-width: 768px) { .hidden-md-up, .visible-sm-down { display: none !important; } } @media (min-width: 992px) { .hidden-lg-up, .visible-md-down { display: none !important; } } @media (min-width: 1200px) { .hidden-xl-up, .visible-lg-down { display: none !important; } } /* Visible when in tier or bigger */ .visible-xs-up { display: inline-block !important; } @media (min-width: 576px) { .visible-sm-up, .hidden-xs-down { display: inline-block !important; } } @media (min-width: 768px) { .visible-md-up, .hidden-sm-down { display: inline-block !important; } } @media (min-width: 992px) { .visible-lg-up, .hidden-md-down { display: inline-block !important; } } @media (min-width: 1200px) { .visible-xl-up, .hidden-lg-down { display: inline-block !important; } } /* Classes voor page search */ .PageSearch { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; overflow-y:auto; border:1px solid #e5e5e5 !important; margin-top:6px; } @media (max-width: 575.98px) { .PageSearch { width:100% !important; } } @media (min-width: 576px) { .PageSearch { width:200% !important; margin-left:calc(-200% + 40px); } } .PageSearch input {width: 200px; margin-left:10px;} .PageSearch a {overflow:hidden; text-overflow:ellipsis; display:block; white-space:nowrap; height:1.5em;} .PageSearch a.selected { color: #404040; background-color:#efefef; transition: .5s; } .PageSearch a:hover { color: #404040; } .PageSearchLoading { background-image: url('../images/loading.gif'); background-repeat: no-repeat; background-position: right center; } /* Classes voor page search */ .favo-edit {list-style-type:none; } .favo-edit .nav-item {cursor:ns-resize; display:block; background-color:white; border:1px solid white; } .favo-edit .nav-item-drag {border:1px solid #e0e0e0; background-color:#f5f5f5;} .favo-edit .nav-edit-name {width:400px; max-width:100%; } .favo-edit .nav-edit-link {display:block; margin-left:0px;} .favo-edit .nav-edit-link img {width:26px; height:26px; margin-left:-8px; margin-top:4px;} .favo-edit .nav-edit-context {display:block; margin-left:20px;} .favo-edit .nav-edit-context img {margin-right:10px; width:20px; height:20px;} .favo-edit .nav-edit-usage {display:block; margin-left:20px;} .favo-edit .nav-edit-usage input, .favo-edit .nav-edit-usage label{cursor:pointer;} .CodeMirror {font-size:1.25rem;} /* ** Aanpassingen in stijlen van buttons etc. binnen webparts */ /* Toon links in een kleurtje omdat ze anders niet te onderscheiden zijn van standaard tekst, maar niet "te diep" anders worden datagrid headers te opvallend. */ div[wp] > a, div[wp] > span > a { color: #404040; } div[wp] > a:focus, div[wp] > span > a:focus { color: #404040; text-decoration: none; } div[wp] > a:hover, div[wp] > span > a:hover { color: #404040; /* !important removed because of conflicts with bgItemRed etc. */ text-decoration: none; } /* Geef sommige elementen een marge aan de bovenkant om te voorkomen dat ze op verschillende regels tegen elkaar aan geplakt zitten. */ div[wp] .btn { margin-top: .2rem; } /* Deze weer niet */ .standardLabel, .CodeMirror span { margin-top: 0!important; } .iframehandle { position: absolute; border-bottom: solid 10px transparent; border-left: solid 10px #404040; cursor: pointer; } #alertMessage .ui-icon { float:left; margin:0px 0 0 -28px; } /* JQuery UI */ /* Door een conflict met Bootstrap 5 voegen we deze class toe als oplossing. */ /* .dialogClose .ui-dialog-titlebar-close {background: transparent url("../JavaFiles/smoothness/images/ui-icons_888888_256x240.png") -96px -128px no-repeat !important; } .dialogSave .ui-dialog-titlebar-close {background: transparent url("../JavaFiles/smoothness/images/ui-icons_888888_256x240.png") -64px -144px no-repeat !important; } .dialogSave {position:fixed;} */ .ui-widget-header { color: #404040; border-bottom: 1px solid lightgrey; } .ui-widget-header:not(.ui-tabs-nav), .ui-widget-header a { color: #404040; border-bottom:none; } .ui-dialog-titlebar button { position:relative!important; height:20px!important; width:auto!important; top:unset!important; left:unset!important; right:unset!important; float:right!important; margin:0 0.5rem !important; padding:0 !important; background-color: transparent; border:0; color:#404040; font-size: large; line-height: 1px; } .ui-dialog .ui-dialog-title { font-size: larger; width: unset; } /********************************************************************/ /* Modal Dialog */ /********************************************************************/ .modaldialog {display:none;} .dialogBoxInputs {} .dialogSelectedValuesContainer {overflow:hidden; margin-bottom:10px; overflow-y:auto; max-height:120px; } .dialogSelectedValuesContainer > div {float:left; border:1px solid dimgrey; background-color:#dddddd; margin:0 2px 2px 0; padding:2px 16px 2px 16px; cursor:pointer; min-height: 2.1rem; max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .dialogSelectedValuesContainer > div:hover {background-image:url('../images/maxcc_inline_verwijderen_dienst.png') !important; background-repeat:no-repeat !important; background-position:right center !important; } .dialogSelectedValuesContainer > .dialogUseSelectedValues {margin:0 40px 2px 10px;} .dialogBoxList {height: 360px; overflow:auto;} .no-close .ui-dialog-titlebar-close {display: none;} .restore .ui-dialog-titlebar-close {background: transparent url('../images/expandBig.jpg') no-repeat 50% 50% !important; } .minimize .ui-dialog-titlebar-close {background: transparent url('../images/collapseBig.jpg') no-repeat 50% 50% !important; } .extraDialogButton { height:16px !important; width:15px !important; position:absolute; right:30px; } .expanded {background: transparent url("../JavaFiles/smoothness/images/ui-icons_888888_256x240.png") 0px -16px no-repeat !important; padding:8px; } .collapsed {background: transparent url("../JavaFiles/smoothness/images/ui-icons_888888_256x240.png") -65px -16px no-repeat !important; padding:8px; } /********************************************************************/ /* Modal Dialog Bootstrap version (TEST) */ /* Gebruik het standaard dialog element. Wanneer alle code goed */ /* werkt kan deze style naar de standaard CSS verplaatst worden. */ /********************************************************************/ :root { --modal-header-height:30px; } .modal-header {height:var(--modal-header-height);} .modal-body {height:calc(100% - var(--modal-header-height));} .modal-content {height: 100%;} dialog::backdrop { background-color: rgba(0, 0, 0, 0.25); /* Less than Bootstrap's modal backdrop */ } dialog { border: none; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: .5rem; margin: 0; } dialog[open]:not(:modal) { margin: 0; } .modal-header { justify-content: space-between; } .modal-header button { float: right; background-color: transparent; border: 0; color: #404040; font-size:large; } .modal-header button:focus { outline:none!important; } .modal-title { display:inline-block; font-weight:bold; color: #404040; } /* Nieuws created with Vuejs in a gadget */ .GadgetContent .JSONListViewContainer { overflow:auto; width:100%; height:100%; background-color: #ddd; } .GadgetContent .newscontainer { overflow:auto; padding:10px; width:420px; margin:0 auto; } .GadgetContent article { float:left; margin:10px; border: 1px solid #ebeaea; padding:10px; break-inside: avoid; -webkit-column-break-inside: avoid; box-shadow: 3px 3px 3px #ddd; background-color: #F8F9FA; } .GadgetContent article .NewsInfo { float: left; color: grey; } .GadgetContent article .AuthorImage { text-align: center; height: 40px; width: 40px; border-radius: 50%; border: 1px solid #404040; overflow: hidden; color: white; background-color: #404040; float: left; margin-right: 10px; font-size: 2rem; } .GadgetContent .InfoTitle { font-size: larger; font-weight: bold; color: #404040; background-color: transparent; white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; clear: both; margin: 20px 0px 5px 0px; } .GadgetContent .InfoSeperator { height: 1px; margin:20px 0 20px 0; border-color: #ebeaea; border-top-style: solid; border-top-width: 1px; } .GadgetContent .Dienstverband, .GadgetContent .Personalia, .GadgetContent .Gebruikers, .GadgetContent .Communicatie, .GadgetContent .Verlof, .GadgetContent .Overzichten, .GadgetContent .ZiekBeter, .GadgetContent .InUitDienst { border: none; } .GadgetContent .LoketButtonHolder { float:none; margin:auto; text-align: center; height:100%; width:100%; } .GadgetContent .Loket { height: 100%; } .GadgetContent .LoketContent { width:100%; height:100%; overflow-y:auto; } .GadgetContent .LoketContent ul{ text-align: left; } .GadgetContent .LoketTitle { width:100%; } .GadgetContent .LoketDisplay { background-color: white; margin: 0px; position: absolute; width: 100%; height: 100%; } .GadgetContent .LoketDisplay > img { width:90%; height:90%; max-width:200px; max-height:200px; } .GadgetContent .LoketContent .LoketButton { text-overflow:ellipsis; overflow: hidden; width: 100%; } .GadgetContent .LoketContent ul, .width1 .GadgetContent .LoketContent li { width:auto; } @media (max-width: 575.98px) { .width1 .GadgetContent .LoketDisplay .LoketDisplayTitle { bottom:0; font-size:12px; } .width1 .GadgetContent .LoketContent , .width1 .GadgetContent .LoketContent .LoketTitle .TitleText , .width1 .GadgetContent .LoketContent .LoketButton { font-size:10px; margin:0; line-height:1.4em; } .height1 .GadgetContent .LoketContent .LoketTitle img { width:16px; height:16px; } } .GadgetContent .newscontainer > article > a { display: block !important; } /* In news you can jump to the right article. The navigation can be in the way, so shift the anchor up so the title of the news item will be visible. */ .shiftedanchor {position:absolute; margin-top:-50px;} /* Animated and colored (slider) checkboxes and radio buttons*/ @supports (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) { input[type="checkbox"].colored, input[type="radio"].colored { --active: #404040; --active-inner: #fff; --focus: 2px #40404040; /* The number after #404040 adds transparency */ --border: #404040; --border-hover: #40404040; --background: #ccc; --disabled: #F6F8FF; --disabled-inner: #E1E6F9; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 20px; outline: none; display: inline-block; vertical-align: bottom; position: relative; margin: 0; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); -webkit-transition: background .3s, border-color .3s, box-shadow .2s; transition: background .3s, border-color .3s, box-shadow .2s; } input[type="checkbox"].colored:after, input[type="radio"].colored:after { content: ''; display: block; left: 0; top: 0; position: absolute; -webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease); transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease); transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s); transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease); } input[type="checkbox"].colored:checked, input[type="radio"].colored:checked { --b: var(--active); --bc: var(--active); --d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2); } input[type="checkbox"].colored:disabled, input[type="radio"].colored:disabled { --b: var(--disabled); cursor: not-allowed; opacity: .9; } input[type="checkbox"].colored:disabled:checked, input[type="radio"].colored:disabled:checked { --b: var(--disabled-inner); --bc: var(--border); } input[type="checkbox"].colored:disabled + label, input[type="radio"].colored:disabled + label { cursor: not-allowed; } input[type="checkbox"].colored:not(:checked):not(:disabled), input[type="radio"].colored:not(:checked):not(:disabled) { --bc: var(--background); } /* input[type="checkbox"].colored:hover:not(:checked):not(:disabled), input[type="radio"].colored:hover:not(:checked):not(:disabled) { --bc: var(--border-hover); }*/ input[type="checkbox"].colored:focus, input[type="radio"].colored:focus { box-shadow: 0 0 0 var(--focus); outline:0 !important; } input[type="checkbox"].colored:not(.slider), input[type="radio"].colored:not(.slider) { width: 20px; } input[type="checkbox"].colored:not(.slider):after, input[type="radio"].colored:not(.slider):after { opacity: var(--o, 0); } input[type="checkbox"].colored:not(.slider):checked, input[type="radio"].colored:not(.slider):checked { --o: 1; } input[type="checkbox"].colored + label, input[type="radio"].colored + label { cursor: pointer; } input[type="checkbox"].colored:not(.slider) { border-radius: 7px; } input[type="checkbox"].colored:not(.slider):after { width: 5px; height: 9px; border: 2px solid var(--active-inner); border-top: 0; border-left: 0; left: 7px; top: 4px; -webkit-transform: rotate(var(--r, 20deg)); transform: rotate(var(--r, 20deg)); } input[type="checkbox"].colored:not(.slider):checked { --r: 43deg; } input[type="checkbox"].colored.slider { width: 32px; border-radius: 11px; } input[type="checkbox"].colored.slider:after { left: 2px; top: 2px; border-radius: 50%; width: 14px; height: 14px; background: var(--ab, var(--border)); -webkit-transform: translateX(var(--x, 0)); transform: translateX(var(--x, 0)); } input[type="checkbox"].colored.slider { --ab: var(--active-inner); } input[type="checkbox"].colored.slider:checked { --x: 12px; } input[type="checkbox"].colored.slider:disabled:not(:checked):after { opacity: .6; } input[type="radio"].colored { border-radius: 50%; } input[type="radio"].colored:after { width: 18px; height: 18px; border-radius: 50%; background: var(--active-inner); opacity: 0; -webkit-transform: scale(var(--s, 0.7)); transform: scale(var(--s, 0.7)); } input[type="radio"].colored:checked { --s: .5; } } /* Input of type range */ .rangeslider { -webkit-appearance: none; height: 15px; border-radius: 5px; background: #ccc; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; vertical-align:text-bottom; border:1px solid #ababab; } .rangeslider:hover { opacity: 1; } .rangeslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 23px; height: 23px; border-radius: 50%; background: #404040; cursor: pointer; } .rangeslider::-moz-range-thumb { width: 23px; height: 23px; border-radius: 50%; background: #404040; cursor: pointer; } input:invalid {box-shadow: 0 0 1.5px 1px red;} .NewSidePanel { padding: 0 1rem; border-left:1px solid #404040; } .NewSidePanel .btn { background-color: white; color: #404040; border:2px solid #404040; padding:2rem; } .NewSidePanel .btn:hover, .NewSidePanel .btn:focus, .NewSidePanel .btn:active:focus { background-color: white; color:#404040; border-color:#404040; } .NewSidePanel .NewCheck { padding-top:1em; padding-bottom:1em; } .NewCheck ~ .NewCheck { padding-top:0em; } .NewSidePanel .NewCheck:before { content: '\2714'; display: inline-block; color: #404040; padding: 0 1em 0 0; font-weight: bold; font-size: larger; } .badge { background-color: #404040; color: white; vertical-align: text-top; padding-left:10px; padding-right:10px; } h3 .badge { background-color: white; color: #404040; } .clearboth{clear:both;} .fc-button {background-color:#404040!important; border-style:none!important;} .fc-button:hover {background-color:#404040!important;} .fc-button:disabled {background-color:#404040!important;} .fc-button-active{background-color:#404040!important;}