/*
    List of z-indexes:
    Mask: 99999999
    fancybox: 8010
    #aLogout 2996
    #header .container #clock and notification icons that overlap: 2996
    alerts: 2997 (below modal)
    .savemodal: 2998 (active) -1 (inactive)
    body.modal .changed:(not.page): 2999

    #header .container .masq: 3500

    blockaction: 10000
    
    showConfirm (.grodialog) 11000 (above blockaction)
    
*/

/*#region IE10 resets*/
::-ms-clear{display:none}
::-ms-reveal{display:none}
a:active{background-color: transparent;}

/*#endregion end resets*/

:root{
    --gro_novalue: #ddd;

    --gro_red: #c30000;
    --gro_amber: #f29116;
    --gro_green: #49a942;
    --gro_purple: #69518c;

    --gro_pastblue: #b3c0e0;
    --gro_highlightblue: #D0D5F2;
    --gro_darkblue: #013983;
    --gro_verypaleblue: #E2E5F1;
    --gro_faintgrey: #f0f0ee;
    --gro_greytext: #999A9C;
    --gro_pane_offwhite: #f4f5f0;
    --gro_faint_keyline: #c1c1c1;
    --gro_bodytext: #414042;
    --gro_bodybgcol: #ebece7;
    --gro_headbgcol: #52534d;

    --gro_trans_highlightblue: rgba(0, 25, 179, 0.18);

    --gro_headerblue: #99abdb;

    --gro_ts_novalue: #ffe6c7;
    --gro_ts_novaluedark: #facd8c;
    --gro_ts_noobjectiveset: #dfb8ab;
    --gro_ts_noobjectivesetdark: #e59677;
    --gro_ts_objectiveset: #c6d9ba;
    --gro_ts_objectivesetdark: #b1d095;
    --gro_ts_completed: #abd1e0;
    --gro_ts_completeddark: #84d0f0;
    --gro_ts_failedsale: #e6bad4;
    --gro_ts_failedsaledark: #f09fc0;
    --gro_ts_ordered: #cdc0d3;
    --gro_ts_ordereddark: #b598b6;
    --gro_ts_offered: #ffca85;
    --gro_ts_uploaded: #d9dad5;
    --gro_ts_uploadeddark: #aeafa9;
    --gro_ts_nofuture: #d9dad5;
    --gro_ts_nofuturedark: #aeafa9;
    --gro_ts_all: #d9dad5;
    --gro_ts_alldark: #aeafa9;
    --gro_ts_new: #d9dad5;
    --gro_ts_newdark: #aeafa9;

    --gro_contact_colleague: #99abdb;
    --gro_contact_general: #999;
    --gro_contact_personal: #b598b6;
    --gro_contact_internal: #99b698;

    --gro_container_width: 180rem;
    --gro_container_height: 101.8rem;

    --gro_svg_emailiconblue:#d0d5f2;
    --gro_svg_emailicondarkblue:#b9c1eb;

    /* Basic appointments colours */
    --gro_agenda_back: #ffffff;
    --gro_agenda_bar: #dbdad4;
    --gro_agenda_bar_hovr: #b7b5ab;
    --gro_agenda_bord: #4a463d;
    --gro_agenda_icon: #4a463d;
    --gro_agenda_line: 1px;

    /* Basic highlighted appointment colours */
    /*--gro_agenda_hl_back: #ededea;
    --gro_agenda_hl_bar: #dbdad4;
    --gro_agenda_hl_bord: #4a463d;
    --gro_agenda_hl_icon: #4a463d;
    --gro_agenda_hl_line: 2px;
    --gro_agenda_hl_text: ;*/

    /* Next upcoming appointment colours */
    --gro_agenda_next_back: #eeeff9;
    --gro_agenda_next_bar: #8fa1da;
    --gro_agenda_next_bar_hovr: #8fa1da;
    --gro_agenda_next_bord: #8fa1da;
    --gro_agenda_next_icon: #fff;
    --gro_agenda_next_line: 2px;
    --gro_agenda_next_text: #231f20;

    /* Completed appointment colours */
    --gro_agenda_comp_back: #f6f6f4;
    --gro_agenda_comp_bar: #cfeac0;
    --gro_agenda_comp_bar_hovr: #a0d68a;
    --gro_agenda_comp_bord: #a5a397;
    --gro_agenda_comp_icon: #64c05b;
    --gro_agenda_comp_icon_hovr: #41b23b;
    --gro_agenda_comp_line: 1px;
    --gro_agenda_comp_text: #a5a397;

    /* Missed appointment colours */
    --gro_agenda_miss_back: #f6f6f4;
    --gro_agenda_miss_bar: #f2bdac;
    --gro_agenda_miss_bar_hovr: #e6826d;
    --gro_agenda_miss_bord: #a5a397;
    --gro_agenda_miss_icon: #c01a2c;
    --gro_agenda_miss_line: 1px;
    --gro_agenda_miss_text: #231f20;

    /* Ticked appointment colours */
    --gro_agenda_remind_back: #f6f6f4;
    --gro_agenda_remind_bar: #fddfb6;
    --gro_agenda_remind_bar_hovr: #fbc076;
    --gro_agenda_remind_bord: #a5a397;
    --gro_agenda_remind_icon: #f78b11;
    --gro_agenda_remind_iconhovr: #f78b11;

    --gro_agenda_remind_line: 1px;
    --gro_agenda_remind_text: #231f20;

    /* Personal appointment colours */
    --gro_agenda_pers_back: #ffffff;
    --gro_agenda_pers_bar: #efc9ed;
    --gro_agenda_pers_bar_hovr: #efc9ed;
    --gro_agenda_pers_bord: #4a463d;
    --gro_agenda_pers_icon: #b226b5;
    --gro_agenda_pers_line: 1px;
    --gro_agenda_pers_text: #231f20;

    /* Staff meet colours */
    --gro_agenda_staff_back: #ffffff;
    --gro_agenda_staff_bar: #ededea;
    --gro_agenda_staff_bar_hovr: #dbdad4;
    --gro_agenda_staff_bord: #4a463d;
    --gro_agenda_staff_icon: #9b9994;
    --gro_agenda_staff_line: 1px;
    --gro_agenda_staff_text: #231f20;

    /* persona lilac background: #efc9ed, icon: #b226b5 */
    
    /* Registration plate background yellow */
    --gro_regplate_bg: #ffb000;
}

/******************************************************************/

/*#region Elements*/

body, html, textarea,input {font-family: 'Open Sans', sans-serif; font-weight:300; }
textarea,input { font-size: 1.8rem;}
body {color: var(--gro_bodytext);margin: 0;min-width: var(--gro_container_width); height: var(--gro_container_height);background-color: var(--gro_bodybgcol); overflow: hidden;}/* Overflow hidden added to compensate for removal of poaition:fixed on #alerts, stops scrolling on overflow*/
body > * {font-size:1.8rem;}
a {color: var(--gro_bodytext);text-decoration: none;}
a:focus {outline: none;}
a.disabled{cursor:default;}
object:not([data]) {display: none;}/*force unspecified objects to not render*/
input[type=image] {vertical-align:middle;}

b,
strong { font-weight: 600; }

svg {width: 100%;height: 100%;vertical-align: middle;}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}

input[type=number] {-moz-appearance:textfield;}

.faint {opacity: 0.5; }
/*#endregion Elements*/

/*#region Generic classes*/
.valigntop{vertical-align: top;}
.nohover:hover{background: none repeat scroll 0 0 transparent !important;color: #FFFFFF;}
.clickable:not(.disabled) {cursor: pointer;}
.hidden{display:none;}
.invisible { visibility: hidden; pointer-events: none; }/*validation uses this*/
.overflowvis{overflow:visible}

.faded{opacity:0.25;pointer-events:none;}

.mousedefault { cursor: default !important; }

.uppercase { text-transform: uppercase; }

/* TODO Combine with dev/reception -> home-reception.css radiopill extensions i.e. iconpills and floatpills. */
/*#region Radio Pill Buttons */
.radiopills { display: inline-flex; flex-direction: row; justify-content: space-between; width: 100%; max-width: 33.3rem; right: 0; }
.radiopills.tinypills { width: auto; }

    .radiopills input.radiopill { display: none; }
    .radiopills label.radiopill { flex: 0 1 14rem; display: inline-block; height: 2.8rem; line-height: 2.5rem; background: #f6f6f4; border: 0.1rem solid #efefed; border-radius: 1rem; box-shadow: none; font-size: 2.1rem; font-weight: 600; text-align: center; opacity: 0.5; cursor: pointer; }
    
    .radiopills.tinypills label.radiopill { width: 2.8rem; height: 2.8rem; border-radius: 100%; background: #fff; border: 0.3rem solid var(--gro_bodytext); line-height: 2.7rem; margin-top: 0.1rem; }
    .radiopills.tinypills.notset label.radiopill { border: 0.3rem solid var(--gro_red); }

    .radiopills .radiopill:checked + label { font-weight: 600; opacity: 1; }
    .radiopills.tinypills .radiopill:checked + label { border: 0.4rem solid var(--gro_bodytext); margin-top: 0; }

    .radiopills.invalid .radiopill + label { box-shadow: 0 0 1.5px 1px var(--gro_red); opacity: 1; }/* Required value not set */
    .radiopills.notset .radiopill + label { opacity: 1; }/* Non-required value not set */

    .radiopills .pillspacer { font-size: 2rem; font-weight: 500; margin: 0 1rem; cursor: default; }
    .radiopills.tinypills .pillspacer { margin: 0 0.5rem; }
/*#endregion*/

/*#region largetabs*/
.largetabs { display: block; position: absolute; height: 4rem; background-color: var(--gro_bodybgcol); border-radius: 2rem 0 0 0; }
    .largetabs > .tab { display: inline-block; height: 4rem; background-color: #dbdad4; font-size: 2.5rem; font-weight: 700; text-align: center; line-height: 4rem; border-radius: 2rem 2rem 0 0; cursor: pointer; }
    .largetabs > .tab.selected { background: #f6f6f4; }
/*#endregion*/

/*#region Popup close (Cross) icon*/
.commclose { position: absolute; top: 2.4rem; right: 2.4rem; width: 2rem; height: 2rem; cursor: pointer; }
.commclose:hover { opacity: 0.8; }
/*#endregion*/

/*#region Clear Overlay*/
#clearoverlay { display: none; }
#clearoverlay.activeovl { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0; -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; transition: opacity 250ms; z-index: 2700; }
#clearoverlay.darken { opacity: 0.7; }
body.clearblur .lens :not(.noblur) { filter: blur(0.5rem) }/*blur modal non-changed, or all blurrable behind fancybox.*/
/*#endregion*/

/*#region common fancybox popup elements*/

.fbTIOS.csssize {width:auto !important;top:0 !important;left: 0 !important;position:relative !important;}/*csssizingclass - converted to floating content in flexbox*/
.fbTIOS .fancybox-skin{border-radius:0;background:#fff;}
.fbTIOS.frameless .fancybox-skin{box-shadow:none;background:transparent;}
.fbTIOS.csssize .fancybox-inner{height:auto !important;width:auto !important;}/*override inline styles on fancybox for the internals on direct-content-injected windows*/
.fbTIOS.csssize .popup{visibility:visible; pointer-events:auto;position:static;left:0;top:0;}/*displayed popups content*/
.fancybox-lock .fancybox-overlay { overflow-x: hidden !important; overflow-y: hidden !important; /*do not allow to flow outside the window*/ align-items: center; display: flex !important; justify-content: center; }
/*make the container a centred flex box*/

.popup { visibility: hidden; pointer-events: none; box-sizing: border-box; position: absolute; top: -100%; left: -100%; }/*shunted offscreen and invisible*/
    .popup > header,
    .popwindow > header { top: 0; right: 0; left: 0; min-height: 7.2rem; font-weight: 600; text-transform: none; font-size: 2.8rem; background: #ededea; padding: 1.8rem 2.5rem 0; }
        .popup > header svg,
        .popwindow > header svg { width: 5rem; height: 5rem; }
        .popup > header span,
        .popwindow > header span { line-height: 5rem; margin-left: 1rem; }
    .popup > .panel,
    .popwindow > .content { position: relative; border: none; color: #222; font-size: 2.3rem; font-weight: 500; padding: 4rem 5rem 0; }
        .popup > .panel input,
        .popwindow > .content input { border: none; background: #f6f6f4; font-size: 2.3rem; font-weight: 600; padding: 0 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .popup > .panel input:not(.setheight),
        .popwindow > .content input:not(.setheight) { height: 4rem; }/*Make this easier to override in popups that require inupts at different heights*/
    .popup > footer,
    .popwindow > footer { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; position: absolute; right: 0; bottom: 0; left: 0; padding: 0 5rem; }
        .popup > footer > .actionButton,
        .popwindow > footer > .actionButton { flex: 0 0 auto; height: 3rem; line-height: 2.6rem; font-size: 1.6rem; margin-left: 5rem; }

.closepop { position: absolute; top: 2.4rem; right: 2.4rem; width: 2rem; height: 2rem; cursor: pointer; }
.closepop:hover { opacity: 0.8; }

.popback { width: 3rem; height: 3rem; left: 2.4rem; color: var(--gro_bodytext); cursor: pointer; }
.popback:hover { opacity: 0.8; }

.erroricon,
.errorpopup > header svg { color: var(--gro_red); }
.warnicon,
.warnpopup > header svg { color: var(--gro_amber); }
.successpopup > header svg { color: var(--gro_green); }
/*#endregion*/

/*#region common dialog popup elements*/
.domPopup { display: none; }/* Hide in-page element for DOM popup population */
html.dom-popup-open .lens { filter: blur(0.5rem); }

#grodialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 11000; background: rgba(0,0,0,0.7); }/*make the container a centred flex box that blocks input*/
    #grodialog.noback { background: transparent; }
.fancybox-lock #grodialog { background: rgba(0,0,0,0.1); }/*dim only slightly when showing in front of a fancybox lock*/
#grodialog > div { align-items: center; display: flex; justify-content: center; right: 0; bottom: 0; height: var(--gro_container_height); }/*overlay positioner*/
    #grodialog > div > div { flex: 0 0 auto; max-height: 100%; max-width: 100%; min-width: 60rem; background: #fff; box-sizing: border-box; pointer-events: all; box-shadow: 1rem 1rem 1rem rgba(0,0,0,0.5); }/*window element*/
    #grodialog > div > div > div.confirm,
    #grodialog .domElement { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
        #grodialog > div > div > div.confirm > header { top: 0; right: 0; left: 0; height: 7.2rem; font-weight: 600; font-size: 2.8rem; line-height: 5rem; background: #ededea; padding: 1.8rem 2.4rem 0; }
            #grodialog > div > div > div.confirm > header > svg { display: inline-block; width: 5rem; height: 5rem; }
            #grodialog > div > div > div.confirm > header > span { margin-left: 1rem; }
        #grodialog > div > div > div.confirm > div.main { max-height: 76rem; max-width: 160rem; /*no larger than GRO's screen size*/ overflow-y: auto; font-size: 2.2rem; font-weight: 600; padding: 4rem 5rem 0; }
        #grodialog > div > div > div:not(.groerror) > div.main { text-align: center; }
        #grodialog > div > div > div.confirm > input { width: calc(100% - 10rem); height: 4rem; border: none; background: #f6f6f4; font-size: 2.3rem; font-weight: 600; padding: 0 1rem; margin-top: 1.5rem; margin-left: 5rem; box-sizing: border-box; }
        #grodialog > div > div > div.confirm > .section { display: flex; flex-direction: row; justify-content: flex-end; padding: 3rem 0 2rem; }
            #grodialog > div > div > div.confirm > .section .actionButton { flex: 0 0 auto; margin-right: 4rem; }

        #grodialog .domPopup { display: block; }
/*#endregion*/

/*#region popup input placeholder*/
    .popup > .panel input::-webkit-input-placeholder,
    .popwindow > .content input::-webkit-input-placeholder { color: #000; font-style: italic; font-weight: 500; }
    .popup > .panel input::-moz-placeholder,
    .popwindow > .content input::-moz-placeholder { color: #000; font-style: italic; font-weight: 500; }
    .popup > .panel input:-ms-input-placeholder,
    .popwindow > .content input:-ms-input-placeholder { color: #000; font-style: italic; font-weight: 500; }
    .popup > .panel input:-moz-placeholder,
    .popwindow > .content input:-moz-placeholder { color: #000; font-style: italic; font-weight: 500; }
/*#endregion */

/*#region specific dialog classes */
    /*Error showConfirm popups */
    #grodialog > div > div > div.groerror > div.main { font-size: 1.2rem; font-weight: 500; text-align: left; }
        #grodialog > div > div > div.groerror > div.main table tr td:first-of-type { padding-right: 1rem; }
        #grodialog > div > div > div.groerror > div.main pre { margin: 0; }

/*#endregion*/



.tooltip { background-image:url(../images-svg/icon-info.svg); background-repeat: no-repeat;background-size: contain;display: inline-block;height: 20px;vertical-align: top;width: 20px;}
.tooltipcontent {display:none}
#tooltip{/*opacity:0;transition:opacity 500ms;*/ font-size:1.6rem; border: 1px solid #999999;border-radius: 10px;margin: 10px;padding: 15px;position: absolute;background-color:#fff;z-index:99999;display:none;}
.unwraptooltip {text-overflow:ellipsis;white-space:nowrap;}/*long content for use in tables etc*/

.nofunction{display:inline;height:100%;width:0;position:relative;}
    .nofunction::before {position:absolute;content:' ';background:#00f;border-radius:100%;display:inline-block;height:1rem;width:1rem;top:calc(50% - 0.5rem);left:-1.5rem;}

/*#region grid tile layouts */
[data-w],[data-h]{box-sizing:border-box;}
[data-x], [data-y]{position:absolute;}
/* Dimensions are calculated as X * units + (padding * (units - 1)) */
/* When attr support comes in this could be width:calc((var(--grid_w) * attr(data-w integer)) + (var(--grid-s) * (attr(data-w integer) - 1)))*/
[data-w='1']{width:calc((var(--grid_w) * 1) + (var(--grid-s) * (1 - 1)))}
[data-w='2']{width:calc((var(--grid_w) * 2) + (var(--grid-s) * (2 - 1)))}
[data-w='3']{width:calc((var(--grid_w) * 3) + (var(--grid-s) * (3 - 1)))}
[data-w='4']{width:calc((var(--grid_w) * 4) + (var(--grid-s) * (4 - 1)))}
[data-w='5']{width:calc((var(--grid_w) * 5) + (var(--grid-s) * (5 - 1)))}
[data-h='1']{height:calc((var(--grid_h) * 1) + (var(--grid-s) * (1 - 1)))}
[data-h='2']{height:calc((var(--grid_h) * 2) + (var(--grid-s) * (2 - 1)))}
[data-h='3']{height:calc((var(--grid_h) * 3) + (var(--grid-s) * (3 - 1)))}
[data-h='4']{height:calc((var(--grid_h) * 4) + (var(--grid-s) * (4 - 1)))}
[data-h='5']{height:calc((var(--grid_h) * 5) + (var(--grid-s) * (5 - 1)))}
[data-h='6']{height:calc((var(--grid_h) * 6) + (var(--grid-s) * (6 - 1)))}

/*position the zones*/
[data-x='0']{left:calc((var(--grid_w) * 0) + (var(--grid-s) * 0))}
[data-x='1']{left:calc((var(--grid_w) * 1) + (var(--grid-s) * 1))}
[data-x='2']{left:calc((var(--grid_w) * 2) + (var(--grid-s) * 2))}
[data-x='3']{left:calc((var(--grid_w) * 3) + (var(--grid-s) * 3))}
[data-x='4']{left:calc((var(--grid_w) * 4) + (var(--grid-s) * 4))}
[data-y='0']{top:calc((var(--grid_h) * 0) + (var(--grid-s) * 0))}
[data-y='1']{top:calc((var(--grid_h) * 1) + (var(--grid-s) * 1))}
[data-y='2']{top:calc((var(--grid_h) * 2) + (var(--grid-s) * 2))}
[data-y='3']{top:calc((var(--grid_h) * 3) + (var(--grid-s) * 3))}
[data-y='4']{top:calc((var(--grid_h) * 4) + (var(--grid-s) * 4))}
[data-y='5']{top:calc((var(--grid_h) * 5) + (var(--grid-s) * 5))}


/*#endregion grid tilelayouts*/


/*#endregion Generic classes end*/

/*#region Overlay elements Blocks user action when clicking something */
body.blocked{cursor:wait;}
    body.blocked > * {pointer-events:none !important;}
body.unblocked{cursor:auto;}/*needed to prevent persistent state after nav*/

#blockAction{position: fixed; top: 0; left:0; z-index: -1; width:100%;height:100%;}
#blockAction.Blocked{z-index: 10000; cursor:wait;background-color:#fff;opacity:0}/* put back to #fff and 0 opacity*/
body.touch #blockAction.Blocked {background-color:transparent; opacity:1;}
    body.touch #blockAction.Blocked #BlockedSpinner {position:absolute;}
[data-nowait]{/* Prevent wait cursor by using this attribute on an element*/}


#tiosbar{position: fixed;bottom: 0;left: 0;white-space: nowrap;opacity:0; transition:opacity 500ms, height 500ms, background-color 500ms; -webkit-transition:opacity 500ms, height 500ms, background-color 500ms;  right: 0;
    height: 1.5rem;padding:0.2rem 1rem 0.2rem 1rem;background-color:rgba(250,250,250,0);}
    #tiosbar:hover{opacity: 1;height:5.6rem;box-shadow:0 0 1rem rgba(0,0,0,0.5);background-color:rgba(235,235,235,1);}
    #tiosbar .icon {display:inline-block;cursor:pointer;background-size:contain;background-position:center center;background-repeat:no-repeat;height:5rem;width:5rem;vertical-align:middle;padding:0;}

    #tiosbar .zoom {background:url('../images-svg/maximize.svg') no-repeat;position:fixed;right:2rem;}
    #tiosbar .contentment {background:url('../images-svg/face-happy.svg') no-repeat;margin-left:3rem;}
    #tiosbar .wellbeing {background:url('../images-svg/face-sad.svg') no-repeat;}

    #tiosbar .fullscreen {background:url('../images-svg/fullscreen.svg') no-repeat;}
    .fullscreen #tiosbar .fullscreen {background: url('../images-svg/nonfullscreen.svg') no-repeat;}

/*
#DivMaster {bottom: 0;left: 0;right: 0;top: 0;position: fixed;}
*/

/*#endregion Overlay elements*/

/*sequential appearance*/
[data-sequence] { opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; }
[data-sequence].slowtransition { -webkit-transition-duration: 2s; transition-duration: 2s; }
[data-sequence]:not(.visible) { pointer-events: none; }
    [data-sequence].visible { opacity: 1; }

/*Interaction*/
.NoContext {}/*prevent context menu (javascript)*/
.NoSelect{-webkit-touch-callout: none;-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;-ms-user-select: none;user-select: none;}
.disabled,[disabled],[data-disabled], .noclick{cursor: default !important; pointer-events:none !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important;}/*For disabledbycss controls (if blocking pointer-events:none;)*/

.heightsetter {/*Use to align vertical centered content*/display: inline-block; vertical-align: middle; height: 100%; width: 0;font-size:0;}
.vertcentral{display: inline-block; vertical-align: middle;}
/* definition lists, side by side */
dl.table{overflow:hidden;}    dl.table>dt{clear: both;float: left;position:relative;}     dl.table>dd{float: left;}
dl.stacked {display:inline-block;vertical-align:top;margin:0;} dl.stacked > dt {position:relative;} dl.stacked > dd {margin:0;}

ul.table {list-style: none;padding:0;}
    ul.table > li {margin: 0;}



/*#region Validation*/
dt mark {color: #FF0000; font-size: 2rem;font-weight: bold;left: -1rem;line-height: 2rem;position: absolute;top: 0.4rem; width: 0.7rem; background:none;}
dt mark.Optional {color: #00ff00;visibility:hidden}

/*Helper classes*/
.DefaultFocus{/* Set this on one control for default focus on page*/}
[data-validation=group]{/* Top level container for a validation group */}
[data-validation=requiredcontainer].Empty, [data-validation=requiredcontainer].Empty>header{ border-color: #f00;/* container for required control (div to mark)*/}
[data-validation=required]{/* Required field within ValidationGroup - must be an input type control, or telerik*/}
[data-validation=optionalcontainer]{/* container for optional control (div to mark)*/}
[data-validation=optionalcontainer].Empty, [data-validation=optionalcontainer].Empty>header{ border-color: #7CFC00;}
[data-validation=optional]{/* Optional field within ValidationGroup - must be an input type control, or telerik*/}
[data-validation=submit]{/* Button etc. contained within validationgroup to disable/enable */}
/* Container surrounding a button to highlight on validation*/
[data-validation=submitcontainer]{  display:inline-block; border:/*0.1rem*/ 1px solid transparent;} [data-validation=submitcontainer].Unsaved{border:/*0.1rem*/ 1px solid #f00;}
[data-validation=reminder]{/* Element containing a reminder for required fields*/}
[data-validationallowsaving=true]{/*allow saving if unvalidated*/}
[data-validationhighlight=false]{/*higlight required fields*/}
[data-validateconstraint]{ /*validation constraints such as email, numeric etc.*/}
[data-validateconstraintfailed],[data-validateuniquefailed]{color:#f00;/*validation constraint failed*/}
/* something that shows only when group is validated */
.showonvalid{display: none;}
[data-validated=true] .showonvalid{display: block;}
/*#endregion validation */

/*#region forms */

.transparentInput {background-color: transparent; border: 0; overflow: hidden; text-overflow: ellipsis;padding:0; resize:none;outline:none;}
.transparentInput:required{box-shadow:none;}
.transparentInput::-webkit-input-placeholder{font-style:italic;font-weight:300;}
.transparentInput::-moz-placeholder{font-style:italic;font-weight:300;}
.transparentInput:-ms-input-placeholder{font-style:italic;font-weight:300;}
.transparentInput:-moz-placeholder{font-style:italic;font-weight:300;}

.shadowedInput {background-color:#fff; border:1px solid #c1c2bc;  resize:none; outline:none; box-shadow:inset 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.2); border-top-color:#a1a29d; border-left-color:#a1a29d;}

.insetInput {border-width: 3px; border-style: solid; border-color:#999 #bbb #f4f4f4;border-radius:0.5rem;background:#fff;line-height:1.2;resize:none;outline:none;}
.insetInput:required{box-shadow:none;}
.insetInput::-webkit-input-placeholder{font-style:italic;font-weight:300;}
.insetInput::-moz-placeholder{font-style:italic;font-weight:300;}
.insetInput:-ms-input-placeholder{font-style:italic;font-weight:300;}
.insetInput:-moz-placeholder{font-style:italic;font-weight:300;}

.InputLabel {font-size: 1.4rem;font-weight: bold; line-height: 2rem;display:inline-block;color:var(--gro_bodytext)}

/*.FilterBox {border:  1px solid #777;font-size: 1.2rem;width: auto;}
    .FilterBox:not([readonly]):hover {border:  1px solid #777;}*/

/*[data-highlight].empty, .highlight.empty, [data-highlight].invalid:not(.disabled), .highlight.invalid:not(.disabled) {background-color: #fff;}*/

[data-highlight].invalid:not(.disabled) label:not(.radiopill),
.highlight.invalid:not(.disabled) label:not(.radiopill) { color: #f33 !important; font-weight: 600 !important; }

[data-highlight].invalid:not(.disabled) textarea,
.highlight.invalid:not(.disabled) textarea { border: 2px solid #f33 !important; box-shadow: none; }

[data-highlight] input:-moz-ui-invalid,
[data-highlight].invalid:not(.disabled) input,
.highlight.invalid:not(.disabled) input { box-shadow: none; }

[data-highlight] label.asterisk:after { content:"*"; color: #f33; opacity: 0; }
[data-highlight].invalid:not(.disabled) label.asterisk:after, .highlight.invalid:not(.disabled) label.asterisk:after { opacity: 1; }

.checkboxlist label{margin-left:1rem;vertical-align:middle;}
.checkboxlist input{vertical-align:middle;}
.radiolist label, .radioinline label{margin-left:1rem;vertical-align:middle;font-size:1.4rem;}
.radiolist input, .radioinline input{vertical-align:middle;}
.radioinline td{padding-right:2rem;}

.savebar{pointer-events:none;}/*do not let the savebar block content*/
    body:not(.blocked) .savebar > * { pointer-events: auto; }/* Added body:not(.blocked) to prevent the savebar from overriding: body.blocked > * { pointer-events: none } RC*/
.changed > .savebar, .savebar.changed {}
    .savebar .save, .savebar .undo{display:none;}
    .savebar .cancel, .savebar .ok {display:inline-block;}
    .invalid > footer .save, .invalid > .savebar .save, .savebar.invalid .save, .savebar .save.invalid, .savebar .cancel.invalid, .savebar .undo.invalid {pointer-events:none;opacity:0.5;}
    .changed > .savebar .save, .savebar.changed .save, .changed > .savebar .undo, .savebar.changed .undo, 
    .savebar .save.alwaysshow {display:inline-block;}
    .changed > .savebar .undo + .cancel, .savebar.changed .undo + .cancel {display:none;}/*hide cancel if there is an undo button and changed*/

/*#endregion forms*/

/*#region Masterpage Elements*/
div.browserwarn{ /*float:right;color:#fff;margin-top:15px;*/ position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;z-index:10000;text-align:center;}
div.browserwarn .message{display:inline-block; vertical-align:middle;font-size:2rem;}

#header { height: 8.6rem; background-color: var(--gro_headbgcol); z-index: 1; }
    #header #versionnumber { position: absolute; top: 0.5rem; left: 0.5rem; color: transparent; }
        #header #versionnumber:hover { color: #fff; }
    #header .container { position: relative; margin: auto; padding: 0; width: 180rem; height: 100%; }
        #header .container #logo { position: absolute; height: 4rem; width: 13.3rem; left: 7.2rem; top: 2.4rem; cursor: pointer; }
        #header .container #clientlogoA,
        #header .container #clientlogoB { display: none; position: absolute; width: 11.6rem; height: 9rem; left: 2rem; top: 2.5rem; }

        #header .container #newcustomer { position: absolute; width: 5.5rem; height: 5.5rem; top: 1.5rem; left: 3.8rem; color: #ededea; fill: var(--gro_green); cursor: pointer; }
        #header .container #newcustomer:hover { color: #fff; }

        #header .container nav { display: inline-flex; position: absolute; left: 10.7rem; height: 7.5rem; bottom: 0; }
            
        #header .container nav#backbutton { cursor: pointer; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url('../images-svg/header-back.svg'); left: 0; width: 4rem; display: none; }/*TODO coloured variants*/
        #header .container nav#backbutton:hover { background-image: url('../images-svg/header-back-hover.svg'); }
        .fullscreen #header .container nav#backbutton { display: inline-block; }

            #header .container nav .heightsetter { vertical-align: bottom; }

            #header .container nav a { height: 100%; border-radius: 0.5rem 0.5rem 0 0; font-weight: 600; text-transform: uppercase; font-size: 1.6rem; color: #fff; /*header height*/ font-weight: 600; margin-right: 0.4rem; padding: 2rem 1.3rem; box-sizing: border-box; }
            #header .container nav a:not(.disabled):hover { color: #999; }
            #header .container nav a.active { height: calc(100% - 1.5rem); background-color: var(--gro_bodybgcol); color: var(--gro_headbgcol); padding-top: 0.5rem; margin-top: 1.5rem; }
            #header .container nav a.darker { color: #aaa89b; }
            #header .container nav a.darker:hover { color: #7a776c; }
            #header .container nav .notesbutton { width: 7rem; height: 6rem; color: #fff; fill: none; margin: 0.2rem 0.7rem 0 0.3rem; cursor: pointer; }
            #header .container nav .notesbutton:hover { color: #999; }
        
            #header .container .customeremail,
            /*#header .container .profile,*/
            #header .container .masq,
            #header .container .xmail,
            #header .container .notifications { display: inline-block; position: absolute; cursor: pointer; }

            /*#header .container .profile { height: 4.8rem; width: 4.8rem; left: 22.4rem; top: 1.9rem; }*/

                /* SVG */
                #header .container svg.alerticon { width: 100%; height: 100%; pointer-events: none; /*allow clicks to fall through to parent div*/ }
                    #header .container svg.alerticon .innercircle { stroke: none; }
                    #header .container svg.alerticon .outercircle { fill: none; stroke-width: 2; }

                /*#header .container .profile svg.alerticon .innercircle { fill: #fff; stroke: none; }
                #header .container .profile svg.alerticon .icon { color: #4E4F4B; }
                #header .container a.profile:hover svg.alerticon .innercircle,
                #header .container a.profile.active svg.alerticon .innercircle { fill: #fff; }
                #header .container a.profile:hover svg.alerticon .icon,
                #header .container a.profile.active svg.alerticon .icon { color: #9AABD0; }*/
                /* END SVG */

                /*#header .container .masq .details { display: none; position: absolute; left: 11rem; top: 0; background: #fff; border-radius: 1rem; padding: 1rem; border: 1px solid #000; box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.5); }
                #header .container .masq:hover .details {display:block;}
                    #header .container .masq .details td{white-space:nowrap;}
                    #header .container .masq .details td:nth-of-type(2) {padding-left:1rem;}
                    #header .container .masq .details .hdr{font-weight:bold;}
                    #header .container .masq .details tr + .hdr td{padding-top:1rem;}*/

            #header #daily-flex { display: flex; flex-direction: column; justify-content: center; position: absolute; width: 10.2rem; height: 6.4rem; top: 1.5rem; left: 77rem; }
                #header #daily-alerts { display: table; border-collapse: collapse; cursor: pointer; }
                    #header #daily-alerts * { box-sizing: border-box; }
                    #header #daily-alerts > div { display: table-row; }
                        #header #daily-alerts > div div { display: table-cell; width: 4.5rem; height: 2.5rem; font-size: 0; background: #ededea; border: 0.4rem solid #fff; }
                        #header #daily-alerts > div div.invisible { border: none; }
                            #header #daily-alerts > div div > * { display: inline-block; vertical-align: middle; }
                            #header #daily-alerts > div div svg { width: 2rem; height: 2rem; margin: 0 0.3rem; }
                            #header #daily-alerts > div div span { font-size: 2rem; font-weight: 700; line-height: 2.5rem; }

            #header .container .notifications { width: 6.9rem; bottom: -0.8rem; height: 7.6rem; left: 90rem; z-index: 2996; }
                #header .container .notifications > span { position: absolute; bottom: 1.2rem; left: 0; right: 0; font-weight: 600; color: #fff; font-size: 2.7rem; text-align: center; }

            #header .container .mailcounter { position: absolute; width: 3.5rem; height: 3.5rem; font-weight: normal; font-size: 2rem; border-radius: 100%; text-align: center; line-height: 2.9rem; font-weight: 600; color: #fff; border: 0.4rem solid var(--gro_headbgcol); box-sizing: border-box; }
            #header .container .mailcounter.over100 { font-size: 1.4rem; font-weight: 700; }

            #header .container .customeremail { bottom: 1rem; left: 99.8rem; }
                #header .container .customeremail svg { width: 4.5rem; height: 4.5rem; color: #fff; }
                #header .container .customeremail .mailcounter { top: -1.3rem; right: -1.2rem; background: var(--gro_red); }

            #header .container .xmail { width: 6.7rem; height: 4rem; left: 108.5rem; bottom: 1rem; }
                #header .container .xmail svg { color: #807d77; }
                #header .container .xmail:hover svg { color: #999; }
                #header .container .xmail.active svg { color: #fff; }
                #header .container .xmail .mailcounter { top: -1.9rem; right: -1.4rem; background: #222; }

            #header .container span.date { position: absolute; top: 2.7rem; right: 27rem; color: #fff; font-size: 2.2rem; font-weight: 500; }
            #header .container span.session { position: absolute; right: 21.7rem; top: 5.7rem; font-size: 1.5rem; font-weight: 400; text-transform: none; }

            #header .container .dateswitcher { position: absolute; right: 17.5rem; top: 6.5rem; background-color: #fff; border-radius: 1rem; box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.5); padding: 2rem; z-index: 10000; }
                #header .container .dateswitcher > .reset { width: 100%; text-align: center; margin-top: 1rem; cursor: pointer; }

            #header .container #clock { position: absolute; width: 13rem; height: 13rem; right: 10rem; top: 2.2rem; z-index: 2996; }

            #header .container #manager-return { display: flex; align-items: center; position: absolute; width: 13rem; height: 13rem; right: 10rem; top: 2.2rem; background: #fff; color: #000; font-size: 2.4rem; font-weight: 700; text-transform: uppercase; border: 1rem solid #000; border-radius: 100%; opacity: 0; box-sizing: border-box; cursor: pointer; z-index: 2996; transition: opacity 500ms 500ms; }
            #header .container #manager-return.fadein { opacity: 1; }
            #header .container #manager-return:hover { color: var(--gro_red); border-color: var(--gro_red); }
                #header .container #manager-return svg { width: 3rem; height: 3rem; margin: 0 0.5rem 0 0.3rem; }

#supportbutton { position: absolute; top: 3rem; right: 3rem; cursor: pointer; }
    #supportbutton span { display: block; width: 4rem; height: 5px; background: #a6a498; border-radius: 0.3rem; }
    #supportbutton span:nth-of-type(2) { margin: 6px 0; }
#supportbutton:hover span:not(.sncount) { background: #fff; }

#supportmenu { position: absolute; width: 50rem; top: 18.2rem; right: 3.2rem; z-index: 3100; box-sizing: border-box; }
    #supportmenu > svg { position: absolute; width: 2rem; height: 2rem; top: 0; right: 2rem; fill: #ededea; stroke: #d4d4d4; }
    #supportmenu > div { position: absolute; width: 100%; top: 1.7rem; background: #ededea; border: 1px solid #d4d4d4; border-radius: 0 0 1.5rem 1.5rem; box-shadow: 0.5rem 0.7rem 0.5rem rgba(0, 0, 0, 0.3); overflow: hidden; padding: 0.7rem 7.5rem 0.7rem 2.5rem; box-sizing: border-box; }
        #supportmenu > div > div { display: flex; align-items: center; height: 6.5rem; border-bottom: 1px solid #fff; font-size: 2.6rem; font-weight: 500; line-height: 3.8rem; padding: 0 2rem; cursor: pointer; }
        #supportmenu > div > div:last-of-type { border: none; }
        #supportmenu > div > div.selected,
        #supportmenu > div > div:hover { font-weight: 600; }

    #header .sncount { position: absolute; right: 2.5rem; width: 3.5rem; height: 3.5rem; color: #fff; font-size: 2rem; font-weight: 700; line-height: 3.5rem; text-align: center; background: var(--gro_red); border-radius: 100%; }
    #header .mecount { background: var(--gro_agenda_pers_icon); }
    #header #supportbutton .sncount { width: 2.5rem; height: 2.5rem; top: -1.9rem; right: -1.75rem; font-size: 1.8rem; line-height: 2.3rem; border: 0.4rem solid var(--gro_headbgcol); }
    #header #supportbutton .mecount { top: auto; bottom: -1.8rem; }

/*#region support popup fancybox overrides */
.fbTIOS.support .fancybox-skin,
.fbTIOS.support .fancybox-inner { border-radius: 2rem; }

/*#region Masquerade button styling */
.masqbutton { display: inline-flex; align-items: center; position: absolute; left: 87.5rem; top: 2.5rem; width: 10rem; height: 4.5rem; background: #fff; z-index: 2990; cursor: pointer; }
    .masqbutton:hover { background: var(--gro_highlightblue); }
    .masqbutton svg { height: 2.5rem; width: 2.5rem; color: var(--gro_bodytext); margin: 0 1rem 0 1.5rem; }
    .masqbutton:hover svg { color: var(--gro_bodytext); }
    .masqbutton span { color: var(--gro_red); font-size: 2.2rem; font-weight: 600; }
    .masqbutton:hover span { color: var(--gro_bodytext); }
/*#endregion*/

#main{min-height: 91.4rem;height: 91.4rem; /*temporary override*/ overflow: hidden;position:relative;}
    #main > .pagecontainer {width: 180rem;margin: auto auto;position: relative;height: 91.4rem;}
    #main > .pagecontainer::after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}

#copy {width: 180rem;margin: auto auto; padding: 0.3rem 0 0 3.5rem;color: #2e2e2e;font-size: 1.1rem;text-align: left;}
    #copy a{color: #2e2e2e;}
/*#endregion Masterpage Elements*/

/*#region Common page elements*/

.check365 {height: 25rem;width: 40rem;}
    .check365 .panel {left: 0rem;top: 0rem;position:relative;width:100%;height:100%;} 
    @keyframes pulsefade { from { opacity:0; } to { opacity:1; } }

        .check365 .panel:not(.authed) .authcycle{
            /*animate fading the checking text in and out*/
            animation-duration:1s;
            animation-name:pulsefade;
            animation-iteration-count:infinite;
            animation-direction:alternate;
        }
        .check365 .panel.authed .authcycle{opacity:1;}

.ErrorContainer{height: 0;position:relative;width:0;}
.Reminder {color: #FF0000; font-size:1.2rem; display:inline-block;height:2.8rem; white-space: nowrap;}
    .Reminder::before {content: "*"; font-size: 2rem; font-weight: bold; position: relative; right: 0.4rem; top: 0.6rem;}
.ErrorContainer .Reminder {position: absolute;right: 2.5rem;top: -0.7rem;}

.dot{background-repeat:no-repeat;background-size:contain;background-position:center center;}
[data-dot="Green"] .dot, [data-dot="Green"].dot {background-image: url(../images-svg/dot-green.svg);}
[data-dot="Amber"] .dot, [data-dot="Amber"].dot {background-image: url(../images-svg/dot-orange.svg);}
[data-dot="Red"] .dot, [data-dot="Red"].dot {background-image: url(../images-svg/dot-red.svg);}


.colour1border{box-sizing:border-box;}
[data-colour1="Purple"] .colour1border, [data-colour1="Purple"].colour1border, .border_gro_purple { border-color: var(--gro_purple); border-style: solid; }
[data-colour1="Green"] .colour1border, [data-colour1="Green"].colour1border, .border_gro_green {border-color:var(--gro_green) /*gro_green*/;border-style:solid;}
[data-colour1="Amber"] .colour1border, [data-colour1="Amber"].colour1border, .border_gro_amber {border-color:var(--gro_amber);/*gro_amber*/border-style:solid;}
[data-colour1="Red"] .colour1border, [data-colour1="Red"].colour1border, .border_gro_red {border-color:var(--gro_red);/*gro_red*/border-style:solid;}

[data-colour1='Red'] .colour1bg, [data-colour1='Red'].colour1bg, [data-colour2='Red'] .colour2bg, [data-colour2='Red'].colour2bg {background-color:var(--gro_red);/*gro_red*/ color:#fff;}
[data-colour1='Amber'] .colour1bg, [data-colour1='Amber'].colour1bg, [data-colour2='Amber'] .colour2bg, [data-colour2='Amber'].colour2bg{background-color:var(--gro_amber);/*gro_amber*/ color:#fff;}
[data-colour1='Green'] .colour1bg, [data-colour1='Green'].colour1bg, [data-colour2='Green'] .colour2bg, [data-colour2='Green'].colour2bg{background-color:var(--gro_green);/*gro_green*/ color:#fff;}
[data-colour1='Purple'] .colour1bg, [data-colour1='Purple'].colour1bg, [data-colour2='Purple'] .colour2bg, [data-colour2='Purple'].colour2bg { background-color: var(--gro_purple); color: #fff; }
[data-colour1='past'] .colour1bg, [data-colour1='past'].colour1bg, .grid .pastSegment{background-color:var(--gro_pastblue);/*gro_pastblue*/}

[data-colour1="Purple"] .colour1fg, [data-colour1="Purple"].colour1fg, .colour_gro_purple { color: var(--gro_purple); }
[data-colour1="Green"] .colour1fg, [data-colour1="Green"].colour1fg, .colour_gro_green {color:var(--gro_green);/*gro_green*/}
[data-colour1="Amber"] .colour1fg, [data-colour1="Amber"].colour1fg , .colour_gro_amber {color:var(--gro_amber);/*gro_amber*/}
[data-colour1="Red"] .colour1fg, [data-colour1="Red"].colour1fg, .colour_gro_red  {color:var(--gro_red);/*gro_red*/}

[data-colour1="Purple"] .colour1fill, [data-colour1="Purple"].colour1fill, .fill_gro_purple { fill: var(--gro_purple); }
[data-colour1="Green"] .colour1fill, [data-colour1="Green"].colour1fill, .fill_gro_green {fill:var(--gro_green);/*gro_green*/}
[data-colour1="Amber"] .colour1fill, [data-colour1="Amber"].colour1fill, .fill_gro_amber {fill:var(--gro_amber);/*gro_amber*/}
[data-colour1="Red"] .colour1fill, [data-colour1="Red"].colour1fill, .fill_gro_red {fill:var(--gro_red);/*gro_red*/}
[data-colour1="NoValue"] .colour1fill, [data-colour1="NoValue"].colour1fill, .fill_gro_novalue {fill:var(--gro_novalue);/*gro_red*/}

progress[data-colour="Purple"]::-moz-progress-bar { background: var(--gro_purple); }
progress[data-colour="Green"]::-moz-progress-bar { background: var(--gro_green); /*gro_green*/ }
 progress[data-colour="Green"]::-webkit-progress-value { background: var(--gro_green); /*gro_green*/ }
progress[data-colour="Amber"]::-moz-progress-bar { background: var(--gro_amber); /*gro_amber*/ }
 progress[data-colour="Amber"]::-webkit-progress-value { background: var(--gro_amber); /*gro_amber*/ }
progress[data-colour="Red"]::-moz-progress-bar { background: var(--gro_red); /*gro_red*/ }
 progress[data-colour="Red"]::-webkit-progress-value { background: var(--gro_red); /*gro_red*/ }
progress[data-colour="NoValue"]::-moz-progress-bar { background: var(--gro_novalue); /*gro_green*/ }
 progress[data-colour="NoValue"]::-webkit-progress-value { background: var(--gro_novalue); /*gro_green*/ }

 progress {border-radius:20rem; border:none; background:#dbdad4;}
     progress::-moz-progress-bar { border-radius:20rem; box-shadow: none; transition: width 1s ease; -moz-transition:width 1s ease; }
         progress::-webkit-progress-bar { background: transparent;}  
         progress::-webkit-progress-value {   border-radius:20rem;  box-shadow: none; -webkit-transition : width 1s ease;} 

/*#region gradient backgrounds*/

/*#endregion gradient backgrounds*/


    /* orange labels*/
    .panel header, .panel footer, .sectionHeading, .prominentLabel {text-transform:uppercase;color: var(--gro_headerblue)/*gro_amber*/;font-weight:600;position:absolute;font-size:1.6rem;}

/*round bordered panels with no overflow*/
.panel{/*border-radius:1rem;*/background-color:#fff;overflow:hidden;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
    
    .panel > header, .panel > footer, .sectionHeading {left: 3.5rem; top: 1.7rem;}
     .panel footer {bottom: 1.2rem; top:auto;height:6.7rem;border-top:/*0.1rem*/ 1px solid #000;}

.triangleUp, .triangleDown, .triangleLeft, .triangleRight{background-repeat:no-repeat;}
.triangleUp {background-image:url(../images-svg/triangle-up.svg);}/*TODO coloured variants*/
.triangleDown {background-image:url(../images-svg/triangle-down.svg);}/*TODO coloured variants*/
.triangleLeft {background-image:url(../images-svg/triangle-left.svg);}/*TODO coloured variants*/
.triangleRight {background-image:url(../images-svg/triangle-right.svg);}/*TODO coloured variants*/

/*custom checkbox*/

/*#region customcheckleft has the checkbox to the left of the label */
label.customcheckleft { display: inline-block; cursor: pointer; }
    label.customcheckleft::before { content: ""; display: inline-block; position: relative; top: -0.3rem; height: 1.3rem; width: 1.3rem; background-repeat: no-repeat; background-size: contain; background-position: center center; border: /*0.1rem*/ 1px solid #000; margin-right: 0.5rem; vertical-align: middle; }
    label.customcheckleft.larger::before { top: -0.2rem; width: 4rem; height: 4rem; background: #fff; border: 1px solid #222; margin-right: 2.5rem; }
input[type=radio].customcheckleft, input[type=checkbox].customcheckleft { display: none; }
    input[type=radio].customcheckleft:disabled + label.customcheckleft,
    input[type=checkbox].customcheckleft:disabled + label.customcheckleft { cursor: default; }
    input[type=radio].customcheckleft:checked + label.customcheckleft::before,
    input[type=checkbox].customcheckleft:checked + label.customcheckleft::before { background-image: url(../images-svg/tickblack.svg); background-size: 3rem; background-repeat: no-repeat; background-position: center; }
/*#endregion*/

label.customCheck { display: inline-block; cursor: pointer; }
    label.customCheck::after { content: ""; display: inline-block; position: relative; top: -0.3rem; height: 1.3rem; width: 1.3rem; background-repeat: no-repeat; background-size: contain; background-position: center center; border: /*0.1rem*/ 1px solid #000; margin-left: 0.5rem; vertical-align: middle; }
    label.customCheck.larger::after { top: -0.2rem; width: 4rem; height: 4rem; background: #fff; border: 1px solid #222; margin-left: 2.5rem; }
input[type=radio].customCheck, input[type=checkbox].customCheck { display: none; }
    input[type=radio].customCheck:disabled + label.customCheck,
    input[type=checkbox].customCheck:disabled + label.customCheck { cursor: default; }
    input[type=radio].customCheck:checked + label.customCheck::after,
    input[type=checkbox].customCheck:checked + label.customCheck::after { background-image: url(../images-svg/tickblack.svg); background-size: 3rem; background-repeat: no-repeat; background-position: center; }

        /*Custom radiobutton dots*/
        label.customRadio {display:inline-block; cursor:pointer;margin-right:5rem;font-weight:300;}
        label.customRadio::after { content: ""; display: inline-block; height: 3rem; width: 3rem; margin-left: 1rem; vertical-align: middle;top: -0.2rem; position: relative;background-size: 2.9rem 2.9rem;background-repeat:no-repeat;background-position: center center;background-image:url(../images-svg/radio-off.svg);}
            input[type=radio].customRadio:disabled + label.customRadio,
            input[type=checkbox].customRadio:disabled + label.customRadio{cursor:default;}
            input[type=radio].customRadio:checked + label.customRadio::after,
            input[type=checkbox].customRadio:checked + label.customRadio::after {background-image:url(../images-svg/radio-on.svg); }
            input[type=radio].customRadio, input[type=checkbox].customRadio {display:none;}
            input[type=radio].customRadio:checked + label.customRadio,
            input[type=checkbox].customRadio:checked + label.customRadio {font-weight:400; }

.vertsplit{border-left: 1px solid var(--gro_faint_keyline);  position: absolute; width: 0;}
.horizsplit{border-top: 1px solid var(--gro_faint_keyline);  position: absolute; height: 0;}
/*#endregion Common page elements*/

/*#region Buttons and page menus*/



/*page menu buttons*/
.actionButton{
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;

background: rgb(250,250,248);
background: -moz-linear-gradient(top,  rgba(250,250,248,1) 0%, rgba(233,232,230,1) 25%, rgba(211,211,211,1) 45%, rgba(233,232,230,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,248,1)), color-stop(25%,rgba(233,232,230,1)), color-stop(45%,rgba(211,211,211,1)), color-stop(100%,rgba(233,232,230,1)));
background: -webkit-linear-gradient(top,  rgba(250,250,248,1) 0%,rgba(233,232,230,1) 25%,rgba(211,211,211,1) 45%,rgba(233,232,230,1) 100%);
background: -o-linear-gradient(top,  rgba(250,250,248,1) 0%,rgba(233,232,230,1) 25%,rgba(211,211,211,1) 45%,rgba(233,232,230,1) 100%);
background: -ms-linear-gradient(top,  rgba(250,250,248,1) 0%,rgba(233,232,230,1) 25%,rgba(211,211,211,1) 45%,rgba(233,232,230,1) 100%);
background: linear-gradient(to bottom,  rgba(250,250,248,1) 0%,rgba(233,232,230,1) 25%,rgba(211,211,211,1) 45%,rgba(233,232,230,1) 100%);


    color: #333;cursor: pointer;text-align: center;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
    border: /*0.1rem*/ 1px solid #BBB;border-radius: 20rem;
    display: inline-block;
    font-size: 1.4rem;
    min-height: 2.8rem;line-height: 2.5rem;
    margin: 0;padding: 0 0.8rem;
    min-width: 7.2rem;

    text-transform:uppercase;font-weight:600;

}
.actionButton.larger {font-size: 2.1rem;line-height: 3.2rem;min-height: 3.8rem;min-width: 10.5rem;}

    .roundButton:first-of-type{margin-top: 0;} .roundButton:last-of-type{margin-bottom: 0;}
    .actionButton.disabled{ opacity: 0.5; }
    .actionButton:not(.disabled):hover{background: rgb(249,246,252);
background: -moz-linear-gradient(top,  rgba(249,246,252,1) 0%, rgba(227,223,241,1) 25%, rgba(196,210,226,1) 45%, rgba(227,223,241,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,246,252,1)), color-stop(25%,rgba(227,223,241,1)), color-stop(45%,rgba(196,210,226,1)), color-stop(100%,rgba(227,223,241,1)));
background: -webkit-linear-gradient(top,  rgba(249,246,252,1) 0%,rgba(227,223,241,1) 25%,rgba(196,210,226,1) 45%,rgba(227,223,241,1) 100%);
background: -o-linear-gradient(top,  rgba(249,246,252,1) 0%,rgba(227,223,241,1) 25%,rgba(196,210,226,1) 45%,rgba(227,223,241,1) 100%);
background: -ms-linear-gradient(top,  rgba(249,246,252,1) 0%,rgba(227,223,241,1) 25%,rgba(196,210,226,1) 45%,rgba(227,223,241,1) 100%);
background: linear-gradient(to bottom,  rgba(249,246,252,1) 0%,rgba(227,223,241,1) 25%,rgba(196,210,226,1) 45%,rgba(227,223,241,1) 100%);
}
     .actionButton.selected{box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.4) inset; color: #000;}

.circlebutton {background-repeat:no-repeat;background-size:contain;background-position:center center;background-image:url(../images-svg/button-add.svg);cursor:pointer;}/*TODO coloured variants*/
    .circlebutton.minus {background-image:url(../images-svg/button-subtract.svg);}/*TODO coloured variants*/
    ul.table.list > li > .circlebutton {position: absolute;top: 0.4rem;left: 1rem;}
    ul.table.list > li > .circlebutton.minus {left:4rem;display:none;}
    ul.table.list > li:hover > .circlebutton.minus {display:inline;}/*show on hover*/
    [data-highlight].empty .circlebutton.plus, .highlight.empty .circlebutton.plus {display:none;}/*not to show on empty entries*/

.expandbutton{background-repeat:no-repeat;background-size:contain;background-position:center center;background-image:url(../images-svg/chevron-right.svg);cursor:pointer;}/*TODO coloured variants*/
    .expandbutton.expanded, .expanded > .expandbutton {background-image:url(../images-svg/chevron-down.svg);}/*TODO coloured variants*/

/*#endregion Buttons and page menus end*/
body .savemodal {position: absolute; left: 0px; top: 0px;z-index:-1;  background-color: rgb(0, 0, 0);  bottom:0; right:0;opacity:0; transition:opacity 500ms; -webkit-transition:opacity 500ms;}
body.modal .savemodal{z-index: 2998; opacity: 0.7;}
html.fancybox-lock body.modal .savemodal{opacity:0;/*do not double-up the alpha with fancybox*/}
body.modal .changed:not(.page){z-index: 2999;}/* if higher than 6000, obscures dropdown*/
body .lens {transition:filter 500ms;-webkit-transition:filter 500ms;}
body .lens[data-sequence] {transition:filter 500ms, opacity 500ms;-webkit-transition:filter 500ms, opacity 500ms;}
body.modal .lens:not(.changed), html.fancybox-lock .lens{filter:blur(0.5rem)}/*blur modal non-changed, or all blurrable behind fancybox.*/
/*#region fancybox style skin*/

/* Fancybox blur override i.e. elements appear above fancybpx overlay and aren't blurred */
.popover { z-index: 11100 !important; filter: none !important; }
/* popover end */

html.windowFancy {height:100%;}
.windowFancy body {min-width:10rem; height:100%;padding:2rem;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;background-color:transparent;}
.windowFancy form{height: 100%;}
    /*.windowFancy .close {position:absolute;top:1rem;right:1rem;text-transform:uppercase;font-size:1.5rem;cursor:pointer;}*/
/*#endregion fancybox style skin*/


/* generic tables */
.scrollpane {overflow-y: auto;}
/*hide the main's heading row (preserved for screenreaders) and table column widths*/
.scrollgrid .scrollpane > table.main > thead > tr{height: 0;border-bottom: none;font-size:0;line-height:0;}
.scrollgrid .scrollpane > table.main > thead > tr > th{padding-top:0;padding-bottom:0;border-bottom:0;}
.scrollgrid > table, .scrollgrid > .scrollpane > table{width:100%;border-collapse:separate;table-layout:fixed;}
.scrollgrid .heading > colgroup col:last-of-type, .scrollgrid .main > colgroup col:last-of-type {width:auto;}/*last column autowidth*/
.scrollgrid .heading {}
    .scrollgrid .heading th {text-transform: uppercase; /*UAs seem to control th fonts so we override*/text-align:left;}

.scrollgrid .main tbody tr td, .scrollgrid .heading tr:last-of-type th {border-bottom: /*0.1rem*/ 1px solid #999;}
.scrollgrid .main tbody tr:last-child td { border-bottom: none; }/* Doing this the long way round allows for overriding in other css files*/
                .scrollgrid .main > tbody > tr > td, .scrollgrid thead > tr > th{ border-right: /*0.1rem*/ 1px solid #999;empty-cells:show;}
                
                .scrollgrid .heading th:last-of-type, .scrollgrid .main > thead > tr > th:last-of-type, .scrollgrid .main > tbody > tr > td:last-of-type {/*padding: 0;*/ border-right:none;}  

                .scrollgrid .main > tbody > tr.noRecords:last-child{text-align:center;border-bottom:none}
                .scrollgrid .main > tbody > tr.noRecords:last-child td{padding-top:8rem;border-bottom:none;}

.scrollgrid .heading th .sort:before{content:' ';float:left;background-position:center;background-repeat:no-repeat;background-size:contain;height:1.5rem;width:1.5rem;margin:0 0.5rem 0 0;vertical-align:middle;background-image:url('../images-svg/triangle-up.svg'); display:inline-block;}
.scrollgrid .heading th .sort.desc:before{background-image:url('../images-svg/triangle-down.svg'); display:inline-block;}

/*#region grid filtering */                
.scrollgrid tr.filter {line-height: 2.8rem;text-transform:uppercase;font-weight:400;}
    .scrollgrid tr.filter th{position:relative;white-space:nowrap;}
    .scrollgrid tr.filter input{vertical-align: top;text-transform:none;}
    .scrollgrid tr.filter .entry{height: 2.5rem;font-size: 1.4rem;position:absolute;bottom:0;right:0;border-bottom:none;border-right:none;border-left:1px solid #cbccc6;/*TODO colour*/border-top:1px solid #cbccc6;/*TODO colour*/}
        .scrollgrid tr.filter .clear{background-image:url(../images-svg/icon-search.svg); background-repeat:no-repeat;background-size:2rem 2rem;background-position:center;
                                           height: 2.7rem; width: 2.7rem; position:absolute;right:0;bottom:0;cursor:pointer;}/*TODO coloured variants*/
        .scrollgrid tr.filter .entry:focus + .clear , .scrollgrid tr.filter .entry:hover + .clear, .scrollgrid tr.filter .clear:hover {background-image:url(../images-svg/crossblack.svg);background-color:#fff; }  /*TODO coloured variants*/
/*#endregion*/

/* common row statuses */
/*inverse action type backgrounds */
.highlighted .actionicon, .actionicon.inversehover:hover, .actionicon.active{color:#fff;}


/*hovered line items*/
.linktext{white-space: nowrap;text-decoration: none;color: #000000;/* check if this must be black*/
overflow: hidden;display: inline-block;text-overflow: ellipsis;line-height:2rem;width:100%;vertical-align:bottom;}
.linktext:hover{white-space: normal;word-wrap: break-word;}

/*#endregion*/

/*#region masquerade picker*/
#masqueradepicker { width: 70rem; height: 32.5rem; }
    
    #masqueradepicker.popwindow .content { padding-top: 4.5rem; }

        #masqueradepicker.popwindow .content > span { display: inline-block; vertical-align: middle; width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 2rem; }
    
        #masqueradepicker dropdown { height: 4rem; }
        #masqueradepicker #accessdd { width: 38rem; }
        #masqueradepicker #roledd { width: 20rem; margin-right: 2rem; }

            #masqueradepicker dropdown .dropdown-container { border: none; line-height: 3.8rem; }
            #masqueradepicker dropdown .dropdown-container.show { padding-bottom: 0; }
                #masqueradepicker dropdown .dropdown-container .dropdown-display { background: #ededea; border-radius: 0; }
                    #masqueradepicker dropdown .dropdown-container .dropdown-display > span { font-size: 2.3rem; padding-left: 1rem; }
                    #masqueradepicker dropdown .dropdown-container .dropdown-display .placeholder { color: var(--gro_bodytext); font-weight: 500; }
                #masqueradepicker dropdown .dropdown-container .dropdown-list { left: 0.1rem; width: 38rem; background: #f6f6f4; border: none; border-radius: 0 0 1.5rem 1.5rem; font-weight: 500; box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.25); overflow: hidden; }
                #masqueradepicker dropdown .dropdown-container .dropdown-list > div { padding-left: 2.2rem; }

    #masqueradepicker footer { height: 7.5rem; background: #ededea; }
/*#endregion*/

/*#region invitations popout */
/* 2rem added to width and popout set to -2rem to hide left limit of box-shadow */
#invitations { position: fixed; left: -52rem; top: 15rem; width: 52rem; height: 61.5rem; background: #fff; -webkit-transition: left 250ms; -moz-transition: left 250ms; transition: left 250ms; }
#invitations.popout { left: -2rem; box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.25); }

    #invitations .alerttab { position: absolute; right: -6rem; top: 0; width: 6rem; height: 6rem; background: #8fa1da; border-radius: 0 1.5rem 1.5rem 0; cursor: pointer; }
        #invitations .alerttab svg { position: absolute; top: 1rem; left: 1rem; width: 3.5rem; height: 3.5rem; color: #fff; }
        #invitations .alerttab > span { position: absolute; bottom: 1rem; right: 1rem; width: 1.8rem; height: 1.8rem; border: 0.3rem solid #fff; border-radius: 100%; background: var(--gro_red); color: #fff; font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.6rem; }
    #invitations.popout .alerttab { box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.25); }

    #invitations > header { position: relative; top: 0; right: 0; left: 0; height: 6rem; background: #8fa1da; }
        #invitations > header .largetabs { right: 0; bottom: 0; left: 13rem; border-radius: 0; background: transparent; }
            #invitations > header .largetabs .tab { width: 6rem; background: #c5ccec; color: #fff; }
            #invitations > header .largetabs .tab.selected { background: #fff; color: #222; }

    #invitations .content { position: absolute; top: 6rem; bottom: 6rem; width: 100%; }
        #invitations .content > span { position: absolute; left: 13rem; top: 2rem; font-size: 2rem; font-weight: 600; }
        #invitations agenda { position: absolute; top: 4.4rem; bottom: 0; left: 5.6rem; right: 0; }
        #invitations agenda .nowLayer .now { visibility:hidden;/*must have display, so that scrolling can work correctly */}
        #invitations agenda .actionicon { color: #747474; }
        #invitations agenda .item.invite {background-color:var(--gro_highlightblue);}

    #invitations footer { display: flex; justify-content: space-between; align-items: center; position: absolute; right: 0; bottom: 0; left: 0; height: 6rem; background: #d2d1ca; }
        #invitations footer .actionButton { width: 11.2rem; height: 2.6rem; border: 0.3rem solid #fff; font-size: 1.8rem; line-height: 2.2rem; }
        #invitations footer .decline { border-color: var(--gro_red); margin-left: 13rem; }
        #invitations footer .accept { border-color: var(--gro_green); margin-right: 2.5rem; }
/*#endregion*/

/*#region staff meeting canellation domPopup*/
#meetingcancellation { width: 60rem; height: 35rem; }

    #meetingcancellation header > span { margin-left: 2.5rem; }

    #meetingcancellation .content { text-align: center; padding-top: 3.5rem; }
        #meetingcancellation .content > div { max-width: 50rem; font-size: 3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #meetingcancellation .content > div:first-of-type { font-weight: 600; margin-bottom: 0.5rem; }

    #meetingcancellation footer { height: 9rem; }
/*#endregion*/

/*#region notifications area at bottom*/
#alerts { position: absolute; bottom: 0; left: 0; right: 0; height: 0; }
#clearoverlay.activeovl + #alerts { pointer-events: none; }
    #alerts * { box-sizing: border-box; }

    #alerts #past { display: flex; align-items: flex-end; position: absolute; bottom: -0.5rem; left: 0; padding-left: 2rem; }
        #alerts #past .flex-div { display: inline-flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; }

    #alerts #upcoming { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; position: absolute; bottom: 0; right: 0; }

        #alerts .alert { display: inline-block; position: relative; height: 15rem; width: 30rem; bottom: 4.5rem; /*negative height plus some*/ box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.25); text-align: left; vertical-align: top; overflow: hidden; margin-right: 2rem; }
        #alerts .alert:not(.colour1border) { border: 1px solid #726f67; }
        #alerts .alert:not(.colour1bg) { background: #dbdad4; }
        #alerts .alert.snoozed { height: 6rem; bottom: 0; width: 17.5rem; border-bottom: none; z-index: 2997; }
        #alerts .alert.animate { transition: top 250ms, bottom 250ms, left 250ms, right 250ms, width 250ms, height 250ms; }
        #alerts .alert.transitioning { width: 0; }

            /*#region Alert header*/
            #alerts .alert .alerthead { height: 5.5rem; background: #ededea; border-width: 0 0 0.5rem; opacity: 0; }
            #alerts .alert.animate .alerthead { opacity: 1; transition: opacity 100ms; }
            #alerts .alert.snoozed .alerthead { height: 6rem; border-width: 0 0 0.9rem; }

                #alerts .alert .alerthead .glyph { display: inline-block; width: 3.2rem; height: 3.2rem; color: var(--gro_bodytext); margin-right: 1.5rem; }
            
                #alerts .alert .alerthead .alerthover { position: absolute; top: 1rem; left: 2rem; font-weight: 700; cursor: pointer; }
                #alerts .alert.animate .alerthead .alerthover { transition: left 250ms; }
                #alerts .alert.snoozed .alerthead .alerthover { left: 1rem; }
                    #alerts .alert .alerthead .alerthover .start { display: inline-block; }
                    #alerts .alert .alerthead .alerthover:hover .start { display: none; }
                    #alerts .alert .alerthead .alerthover .log { display: none; text-transform: uppercase; }
                    #alerts .alert .alerthead .alerthover:hover .log { display: inline-block; }

                #alerts .alert .alerthead .actionButton { position: absolute; left: 5rem; top: 1rem; height: 3rem; width: 7.5rem; font-size: 1.8rem; }
                #alerts .alert.snoozed .alerthead .actionButton { left: 2.5rem; }

                #alerts .alert .alerthead .showhide { position: absolute; top: 1rem; right: 1rem; height: 2.5rem; width: 2.5rem; fill: #fff; cursor: pointer; pointer-events: all; }
            /*#endregion*/

            /*#region Alert body*/
            #alerts .alert .alertbody { display: block; height: 100%; background: #ededea; color: var(--gro_bodytext); padding-top: 2rem; }
            #alerts .alert .alertbody > * { opacity: 1; transition: opacity 200ms 250ms; }
            #alerts .alert.snoozed .alertbody > * { opacity: 0; }
                #alerts .alert .alertbody .actionicon { display: inline-block; height: 2.5rem; width: 3.5rem; vertical-align: middle; margin-left: 1rem; }
                #alerts .alert .alertbody .name { display: inline-block; position: relative; left: 2rem; max-width: 23rem; font-size: 1.8rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; cursor: pointer; }
                #alerts .alert .alertbody .name:hover { font-weight: 700; color: #222; }
                #alerts .alert .alertbody .subject { display: block; position: relative; left: 2rem; width: 23rem; height: 4rem; font-size: 1.6rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
            /*#endregion*/

        /*#region Past alerts */
        #alerts #past .alert { border-radius: 2rem 2rem 0 0; }
        #alerts #past .alert.snoozed { width: 7.5rem; height: 9.5rem; margin-right: 1rem; }
        #alerts #past .alert.colour1bg.snoozed { height: 10.5rem; }
        #alerts #past .alert.pre-midday.snoozed { height: 10rem; }

        #alerts #past .alert[data-colour1] { border-width: 0.5rem; }
        #alerts #past .alert[data-colour1="NoValue"] { border: 0.3rem solid #4a463d; }
        
            #alerts #past .alert .alerthead { display: flex; align-items: center; background-color: #d4d2cb; padding-left: 2rem; cursor: pointer; }
            #alerts #past .alert .alerthead:hover { background: var(--gro_highlightblue); }
                #alerts #past .alert .alerthead > span { font-size: 2rem; font-weight: 600; }

            #alerts #past .alert.snoozed .alerthead { align-items: flex-start; height: 10.5rem; padding: 0.8rem 0 0; }
            #alerts #past .alert.colour1bg.snoozed .alerthead { height: 10.5rem; }
                #alerts #past .alert.snoozed .alerthead .glyph { width: 6rem; height: 6rem; color: #b2afa8; margin: 0 auto; }

                #alerts #past .alert.refused .alerthead .glyph { color: var(--gro_red); }

            #alerts #past .alert.pre-midday .glyph { color: var(--gro_red); }
            #alerts #past .alert.pre-midday.snoozed .glyph { color: #94918a; }

            #alerts #past .alert .snooze { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; color: var(--gro_bodytext); fill: none; cursor: pointer; }
            #alerts #past .alert.colour1bg .snooze { color: #fff; }
            #alerts #past .alert.colour1bg .alerthead:hover + .snooze { color: var(--gro_bodytext); border-color: var(--gro_bodytext); }
                
            #alerts #past .alert:not(.colour1bg) { background: #dbdad4; }

                #alerts #past .alert .alertbody > svg { color: #575b5b; }
                #alerts #past .alert .alertbody > span { max-width: 26rem; left: 2rem; font-size: 2rem; }

            #alerts #past .alert.colour1bg .alerthead { background: transparent; }
                #alerts #past .alert.colour1bg .alerthead .glyph { color: #fff; }

            #alerts #past .alert.colour1bg:not(.snoozed) { border: none; }
                #alerts #past .alert.colour1bg:not(.snoozed) .alerthead:hover { background: var(--gro_highlightblue); }
                    #alerts #past .alert.colour1bg:not(.snoozed) .alerthead:hover > * { color: var(--gro_bodytext); }

            #alerts .alert .alerthead .type { position: absolute; width: 3.2rem; height: 3.2rem; top: 4rem; left: 3.2rem; color: var(--gro_bodytext); background: #fff; border-radius: 100%; border: 2px solid #d2d1ca; opacity: 0; overflow: visible; padding: 0.4rem; }
            #alerts #past .alert .alerthead .type.Handover { padding: 0.5rem 0.7rem 0.7rem 0.5rem; }
            #alerts #past .alert.animate .alerthead .type { transition: opacity 250ms; }
            #alerts #past .alert.animate.snoozed .alerthead .type { opacity: 1; transition-delay: 250ms; }
            #alerts #past .alert.colour1bg .alerthead .type { border-color: var(--gro_red); }
        /*#endregion*/
/*#endregion*/

/*#region page load overrides*/
.pageloading { background-color: transparent !important; border: none !important; padding: 0 !important; pointer-events: none !important; overflow: hidden !important; cursor: default !important; opacity: 1; }
.popwindow.pageloading { background-color: #fff !important; }
    .pageloading::after { position: absolute; top: 40%; left: 5%; width: 95%; content: "Loading..." !important; color: #999; font-weight: 600; font-size: 2rem; text-transform: uppercase; text-align: center; animation-duration: 1s; animation-name: pulsefade; animation-iteration-count: infinite; animation-direction: alternate; visibility: visible !important; }
    .pageloading * { visibility: hidden; }
/*#endregion*/

/*#region component overrides*/
calendar .week { background-color: #fff; }
calendar .day { font-weight: 600; }
    calendar .day.selected { background-color: var(--gro_amber); color: #fff; }
    calendar .day.blocked { font-weight: 300; color: #ddd; }
    calendar .day.highlight { color: #000; background-color: var(--gro_highlightblue) !important; }
    calendar .day.today > span { border: 1px solid #f00; font-weight: 600; line-height: 4.5rem; }

    /* specialdates overrides */
    calendar .day.ideal:not(.selected) { background-color: #cfe9bd; }
    calendar .day.nwd:not(.selected):not(.selectedweek) { background-color:var(--gro_agenda_pers_bar); color: #999; }/*non working day*/
    /* end specialdates overrides*/
    calendar .day:not(.blocked):hover, calendar .day:not(.blocked):hover > span { background-color: var(--gro_highlightblue); }


dropdown > .dropdown-container .dropdown-list > div:not(.readonly):hover { background: var(--gro_highlightblue); color: inherit; }
/*#endregion*/

/*#region objectivedate component calendar grouping styles */
objectivedate calendar .selectedweek { color: #fff; background-color: #f93 !important; }
objectivedate calendar .hoveredweek:not(.blocked) { color: #000; background-color: var(--gro_highlightblue) !important; /*gro_highlightblue*/ }
/*#endregion*/