﻿/* NOTE - WHEN UPDATING THE CSS, PLEASE UPDATE THE MASTRPAGE.MASTER FILE TOO. THIS IS TO ENSURE USERS GET THE LATEST VERSION OF THE CSS.
    Update 31.9 - 02 Oct 2025   - Added shevron menu.
                - 24 Sep 2025   - Placeholder consistency.
                                - Added padding to QR Code.
    Update 31.6 - 22 May 2025   - Added various table row colours.
    Update 31.5 - 06 May 2025   - Added styles for charge states.
                - 12 Feb 2025   - Added styles for user notifications: error, success, warning & information.
                                - Removed similar clashing styles: warning, success & notice. Where these were used, now use the new notification style.
                - 06 Feb 2025   - Vertical Table Headers adjustment.
                - 22 Jan 2025   - Placeholder textbox colour.
                - 12 Dec 2024   - Home page font changes.
                - 09 Dec 2024   - Home page dynamic seasons update.
    Update 31.4 - 05 Dec 2024   - Home page search bar colour/focus colour improved.
                - 04 Dec 2024   - Winter Background Image.
                                - Added homepage no margin class.
                - 28 Nov 2024   - Added will-change to .overlay_image_panel.
                - 06 Nov 2024   - Feedback amends.
                - 11 Oct 2024   - Updated dynamic col properties. All now float, with width of 100%;
                - 13 Aug 2024   - Added qr_code style.
                                - Textarea styles auto, small, medium, large.
                - 24 Apr 2024   - Added new cancel style.
                                - Added overlay styles.
                - 18 Apr 2024   - Spring Background Image.
    Update 31.3 - 02 Feb 2024   - Added disabled property style for dropdown boxes.
    Update 31.2 - 13 Nov 2023   - Autumn Background Image.
                - 09 Nov 2023   - Added disabled property style for textboxes.
    Update 31.1 - 31 Oct 2023   - Remembrance Background Image.
                - 17 Oct 2023   - Renamed quick_links to quick_scroll.
                                - Created generic class names for FilterList UserControl.
                - 24 Jul 2023   - Converted current background image to .webp.
                - 06 Jul 2023   - Added no_border for table cell.
                - 31 May 2023   - Spring Background Image.
    Update 30.8 - 25 Jan 2023   - Tweaks to tooltip style.
                - 17 Jan 2023   - Added hidden pw btn style & tooltip styles.
                - 15 Nov 2022   - Autumn Background Image.
                - 03 Nov 2022   - Remembrance Background Image.
    Update 30.2 - 17 May 2022   - Spring Background Image.
    Update 29.9 - 01 Dec 2021   - Added a holly background.
                - 25 Nov 2021   - Changed Background Image.
                - 01 Nov 2021   - Changed Background Image.
                - 08 Sep 2021   - Removed powered by WorldPay logo.
    Update 29.7 - 17 Jun 2021   - Created style for radio padding.
    Update 29.6 - 13 May 2021   - Created style for warning.
    Update 29.5 - 27 Apr 2021   - Created style for box join_top.
    Update 29.4 - 07 Apr 2021   - Style for FAQs updated.
    Update 29.1 - 17 Feb 2021   - Hyperlink styles default underline to default.
                                - Exceptions to the hyperlink default.
                - 28 Jan 2021   - Removed Temp style for disabled buttons.
    Update 29.0 - 14 Dec 2020   - Updated home page background.
    Update 28.9 - 19 Nov 2020   - Updated toggle items to handle nested items.
    Update 28.5 - 09 Sep 2020   - Updated home page background.
    Update 28.2 - 09 Mar 2020   - New Donation Wizard styles.
    Update 28.0 - 04 Dec 2019   - Added disabled property styles.
                                - Fixed css formating issues.
                                - Added new styles.
    Update 27.8 - 08 Nov 2019   - Updated Background Image.
    Update 27.7 - 11 Sep 2019   - Extended Label style option.
    Update 27.5 - 28 Jun 2019   - Updated style for tabs.
    Update 27.4 - 23 May 2019   - New Background Images.
    Update 27.2 - 11 Mar 2019   - Style tweaks for footer searchbar.
    Update 27.1 - 17 Jan 2019   - New Text Style text-center.
*/
* {
    margin: 0;
    padding: 0;
}
BODY,
HTML
{
    height: 100%;
    margin:0px;
    padding: 0px;
    
    font-family: Arial;
    color: #817F7F;
}
H1,H2,H3,H4,H5,H6
{
    text-transform: uppercase;
}

H1{ font-size: 32px;/*32*/  margin: 25px 15px 30px 15px;}
H2{ font-size: 24px;/*24*/}
H3{ font-size: 19px;/*19+-*/margin-bottom: 10px;}
H4{ font-size: 16px;/*16*/  margin-bottom: 6px;}
H5{ font-size: 15px;/*12*/  margin-bottom: 6px;}
H6{}
H1.nbm,
H2.nbm,
H3.nbm {
    margin-bottom: 0 !important;
}
H1.nsm,
H2.nsm,
H3.nsm {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/*H2.year_dob_dod{font-size: 16px;}*/
.qualifications,
H2.qualifications {
    font-size: 14px;
}
H3.dod_msg{font-size: 14px;}
.dodmessage_example {
    padding: 4px 8px 3px 8px;
    border: 1px dashed #817F7F;
    height: 17px;
}

.header_wide_scr A,
.footer_wide_scr A,
.tiles A,
.close A,
.pager A,
A.item_add {
    text-decoration: none;
}

A
{
    color: #817F7F;
    /*text-decoration: none;*/
}
A:HOVER
{
    color: #AB6CB2;
    text-decoration: underline;
}
A[disabled~="disabled"]:HOVER {
    text-decoration: none !important;
}
P
{
    padding-bottom: 10px;
}
LABEL
{
    text-transform: capitalize;
}
.no_cap
{
    text-transform: none !important;
}
/*P:last-of-type
{
    padding-bottom: 0px;
}*/

::-moz-selection, /* Code for Firefox */
::selection {
    color: white;
    background: #AB6CB2;
}
INPUT[type="text"],
INPUT[type="password"],
TEXTAREA
{
	font-family: Arial;
	font-size: 14px;
	color: #817F7F;
	border: none;
	width: 100%;   /*430*/
					
	border: 1px solid #817F7F;
	/*border-radius: 13px;*/
	/*background-color: #FFF;*/
    
    padding: 4px 8px 3px 8px;
	/*box-shadow: 1px 1px 3px #888888 inset;*/
}
INPUT[type=text].donation
{
    background-image: url('../images/system/bg-pound.jpg');
    background-repeat: no-repeat;
    background-position: 8px 8px;
    padding-left: 20px;
}
INPUT[type=text].postcode
{
    text-transform: uppercase;
}
TEXTAREA.auto{  height: auto;}
TEXTAREA.small{ height: 60px;}
TEXTAREA,/*default*/
TEXTAREA.medium{height: 100px;}
TEXTAREA.large{ height: 200px;}

INPUT[type="text"].extra_space {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}


SELECT {
    padding: 4px 10px 5px 8px;
    color: #817F7F;
    background-color: #fff;
    font-size: 14px;
    border-color: #817F7F; /*#aba9aa;*/ /* CHECK TEXTBOX BORDER COLOR*/
    border-style: solid;
    border-width: 1px;
    width: 100%;
}
SELECT:disabled {
    background-color: #DCDDDF;
}

SELECT OPTION
{
	background-color: White;
	padding-left: 20px;
}
	SELECT OPTION.deactivated
	{
		background-color: Red !important;
		color: white !important;
	}
HR
{
    margin: 10px 0;
}

.form_row
{
    font-size: 14px;
    margin: 0 0 10px;
}
.form_row :disabled
{
    cursor: help !important;
}
INPUT[type="text"]:disabled
{
    background-color: #DCDDDF;
}
/*----Colours--------------------*/
.text-purple-light,
.arrow:HOVER:after,
.popup_panel .close A:HOVER,
.popup_panel .cancel A:HOVER,
.toggle_item.collapsed .toggler:HOVER:after,
.toggle_item.expanded .toggler:HOVER:after {
    color: #AB6CB2;
}
.text-purple-dark
{
    color: #5F3E73;
}
.text-green {
    color: #3FBB27;
}
.text-grey {
    color: #817F7F;
}
.text-grey-light {
    color: #C1C0C0;
}

/*----Colours--------------------*/
    .noselect,
    .btn {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }
/*----Buttons--------------------*/
.btn
{
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5px;
    cursor: pointer;
}
A.btn:disabled, A.btn[disabled],
.btn:disabled 
{
    background-color: #ddd !important;
    color: #6D6D6D !important;
}

.btn.group
{
    vertical-align: top;
}
    .btn.group .toggler
    {
        width: 12px;
        color: #fff;
    }
    .btn.group.white .toggler
    {
        width: 12px;
        color: #817F7F;
    }
    
    .btn.group .toggler.collapsed:before{ content: "\25BC"; }
    .btn.group .toggler.expanded:before{ content: "\25B2"; }

    .btn.group .toggler:HOVER
    {
        color: #AB6CB2;
    }
    
    .inline_block
    {
        display: inline-block;
    }
    .btn.group .toggle_target.sep
    {
        border-top: 1px solid white;
        margin-top: 2px;
        padding-top: 2px;
    }
    .btn.group .toggle_target.collapsed
    {
        display: none;
    }
    .btn.group .toggle_target.expanded
    {
        display: block;
    }    
    .btn.group .option
    {
        font-size: 12px;
        padding: 2px 0 0 7px;
        float: right;
    }
    .btn.group .option .chk
    {
        margin-bottom: 0px !important;
    }
.btn.group .btn
{
    border: none;
    padding: 0;
    margin: 0 !important;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    
}
    .btn.group .btn:HOVER
    {
        /*outline: 1px dotted white;*/
        text-decoration: underline;
    }
.btn.rounded
{
    display: inline-block;
    font-size: 16px;
    
    border: 3px solid #FFF;    
    padding: 4px 10px;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    color: #FFF;
    /*Stop Safari Mobile from giving input buttons rounded corners*/
    -webkit-appearance:none;
    text-decoration: none;
}
.btn.square
{
    display: inline-block;
    font-size: 16px;
    
    border-width: 3px;
    border-style: solid;
    padding: 10px 10px;
    
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    
    color: #FFF;
    /*Stop Safari Mobile from giving input buttons rounded corners*/
    -webkit-appearance:none;
    text-decoration: none;
}
    .btn.flat
    {
        /*padding: 2px 24px;*/
        padding: 2px 10px;
        font-size: 14px;
        border-width: 2px;
    }
    .btn.full
    {
        width: 100%;
    }
    .btn_hover_link:HOVER .btn,
    .btn:HOVER
    {
        border-color: #fff !important;
    }
 
    .btn.rounded.flat
    {
        border: 2px solid #FFF;

        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
    }
    .btn.rounded.flat.thin
    {
        padding: 2px 9px;
    }
    .btn.rounded.error
    {
        border-color: red;
    }
    .btn.round
    {
        height: 18px;
        width: 18px;
        border: 2px solid #FFF;
        border-radius: 37px;
        text-align: center;
        font-size: 14px;
        display: inline-block;
        text-decoration: none;
        font-weight: bold;
    }    
    .btn.long
    {
        min-width: 200px;
    }
    
    .btn.grey
    {
        background-color: #807E7F;
        border-color: #807E7F;
        color: #FFF;
    }
    .btn.grey.disabled
    {
        color: #A7A9AC;
    }
    .btn.grey.light
    {
        background-color: #A7A9AC !important;
        border-color: #A7A9AC;
    }
    .btn.grey.light.disabled
    {
        color: #807E7F;
    }
    .btn.blue
    {
        background-color: #00AEEF;
        border-color: #00AEEF;
        color: #FFF;
    }
    
    .btn.orange
    {
        background-color: #EB6D21;
        border-color: #EB6D21;
        color: #FFF;
    }
    
    .btn.mg_purple
    {
        background-color: #7681BF;
        border-color: #7681BF;
        color: #FFF;
    }
    .btn.purple_light
    {
        background-color: #AB6CB2;
        border-color: #AB6CB2;
        color: #FFF;
    }
    .btn.purple_dark
    {
        background-color: #5F3E73;
        border-color: #5F3E73;
        color: #FFF;
    }
    .btn.white
    {
        background-color: #FFF;
        border-color: #FFf;
        color: #817F7F;
    }
    
.btn.group.advanced_search
{
    position: absolute;
    top: 0;
    right: 0;
    /*bottom: 2px;*/
    margin-bottom: 0;
    font-size: 14px;
    padding: 0 5px 0;
    border: 1px solid #817F7F;
}
.btn.group.advanced_search:HOVER
{
    border-color: #817F7F !important;
}
.btn.group.advanced_search .toggle_target
{
    font-size: 11px;
    padding: 0 0 5px;
}
.btn.mag
{
    background-image: url('../images/system/magnifying-glass.png');
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    
    top: 1px;
    right: 1px;
    bottom: 1px;
    
    width: 33px;
    /*height: 33px;*/
    /*border: 1px solid grey;*/
    border: none;
    margin: 0;
    /*vertical-align: middle;*/
    position: absolute;
    
}
.btn.mag:HOVER
{
    background-color: #AB6CB2;
    border-color: #817f7f !important
}
.search
{
    position: relative;
}
    .search.featured INPUT[type="text"] {
        background-color: transparent;
        border-color: #FFF;
        outline: 1px solid #FFF;
        /*border: 2px solid #fff;*/
        color: #fff;
        width: 100%;
        padding: 10px 60px 10px 10px;
        font-size: 25px;
    }

        .search.featured INPUT[type="text"]::placeholder,
        .search.featured INPUT[type="text"]::-webkit-input-placeholder /* Edge */ {
            color: white;
            opacity: 1;
            font-style: italic;
            font-size: 18px;
        }
        .search.featured INPUT[type="text"]::-ms-input-placeholder /* Internet Explorer 10-11 */ {
            color: white;
            opacity: 1;
            font-style: italic;
            font-size: 18px;            
        }

        .search.featured INPUT[type="text"]:focus {
            background-color: #FFF;
            /*border: 2px solid grey;*/
            border-color: #FFF;
            color: gray;
        }
            .search.featured INPUT[type="text"]:focus::placeholder,
            .search.featured INPUT[type="text"]:focus::-webkit-input-placeholder /* Edge */ {
                color: lightgray;
            }
.search.advanced .btn.mag
{
    right: 20px;
}
.search.advanced .toggler
{
    line-height: 24px;
}
    .search.featured .btn.mag {
        width: 49px;
        /*height: 49px;
    top: 2px;
    bottom: 2px;
    right: 2px;*/
    }
.search.footer_nav
{
    margin-top: 2px;
    margin-bottom: 2px;
}
.header_wide_scr .search .btn.mag
{
    top: 1px;
    bottom: 1px;
    right: 1px;
}
.header_wide_scr .search INPUT[type=text]
{
    padding: 8px 40px 8px 8px;
}

.crop /*.holder*/
{
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
}
.crop.bg_white{ background-color: #FFF; }
.holder IMG,    /*This top style will be changed at some point*/
.crop IMG
/* .crop .holder IMG*/
{
	position: absolute;
	max-width: none;
}
.crop.edit IMG
/*.popup_panel .crop .holder IMG*/
{
	cursor: move;
}
    .crop.edit {
        outline-style: dashed;
        outline-width: 4px;
        background-color: #FFF; /*#A7A9AC;*/
        z-index: 20;
        outline-color: #AB6CB2;
    }
/*
    plus solid      <i class="fa-solid fa-square-plus" > </i >          f0fe
    plus regular    <i class="fa-regular fa-square-plus"></i>           f0fe
    minus solid     <i class="fa-solid fa-square-minus"></i>            f146
    minus regular   <i class="fa-regular fa-square-minus"></i>          f146

    up solid        <i class="fa-solid fa-square-caret-up"></i>         f151
    up regular      <i class="fa-regular fa-square-caret-up"></i>       f151
    down solid      <i class="fa-solid fa-square-caret-down"></i>       f150
    down regular    <i class="fa-regular fa-square-caret-down"></i>     f150

    left solid      <i class="fa-solid fa-square-caret-left"></i>       f191
    left regular    <i class="fa-regular fa-square-caret-left"></i>     f191

    right solid     <i class="fa-solid fa-square-caret-right"></i>      f152
    right regular   <i class="fa-regular fa-square-caret-right"></i>    f152


*/
.image_controls .btn {
    width: 40px;
    height: 40px;
    line-height: 15px;
    font-weight: bold;
}
.photo_zoomIn,
.photo_zoomOut,
.photo_scrollUp,
.photo_scrollDown,
.photo_scrollLeft,
.photo_scrollRight
{
    display: inline-block;
    cursor: pointer;
                        
}
.fade_btn {
    color: #FFF;
    background: RGBA(171, 108, 178, 0.5);
    width: 25px;
    height: 25px;
    text-align: center;
    border: 1px solid white;
    border-radius: 8px;
    font-size: 25px;
}
    .fade_btn:hover {
        color: #AB6CB2;
    }



.toggle_image_controls {
    display: none;
}
    .controls_toggle,
    .toggle_image_controls .photo_zoomIn,
    .toggle_image_controls .photo_zoomOut,
    .toggle_image_controls .photo_scrollUp,
    .toggle_image_controls .photo_scrollDown,
    .toggle_image_controls .photo_scrollLeft,
    .toggle_image_controls .photo_scrollRight {
        position: absolute;
    }
        .toggle_image_controls .photo_zoomIn:hover,
        .toggle_image_controls .photo_zoomOut:hover,
        .toggle_image_controls .photo_scrollUp:hover,
        .toggle_image_controls .photo_scrollDown:hover,
        .toggle_image_controls .photo_scrollLeft:hover,
        .toggle_image_controls .photo_scrollRight:hover
        {
            border: 1px solid white;
        }
.controls_toggle {
    bottom: 1px;
    left: 1px;
    padding: 1px;
    border-radius: 4px;
    cursor: pointer;
}
    .toggle_image_controls .photo_zoomIn {
        top: 5px;
        left: 5px;
    }
    .toggle_image_controls .photo_zoomOut {
        top: 5px;
        right: 5px;
    }
    .toggle_image_controls .photo_scrollUp {
        top: 6px;
        left: 0;
        right: 0;
        margin: auto;
        
    }
    .toggle_image_controls .photo_scrollDown {
        bottom: 6px;
        left: 0;
        right: 0;
        margin: auto;
        
    }
    .toggle_image_controls .photo_scrollLeft {
        top: 0;
        bottom: 0;
        left: 6px;
        margin: auto;
        
    }
    .toggle_image_controls .photo_scrollRight {
        top: 0;
        bottom: 0;
        right: 6px;
        margin: auto;
        
    }
    /*.btn.photo_zoomIn,
.btn.photo_zoomOut,
.btn.photo_thumb_zoomIn,
.btn.photo_thumb_zoomOut
{
	height: 40px;
	width: 40px;
}*/
    /*
	.btn.photo_zoomIn,
	.btn.photo_thumb_zoomIn
	{
	    line-height: 17px;
	    font-size: 27px !important;
	}
	.btn.photo_zoomOut,
	.btn.photo_thumb_zoomOut
	{
	    line-height: 9px;
	    font-size: 39px !important;
	}*/
    /*----Buttons--------------------*/
    /*----Custom CheckBox------------*/
    .chk {
        background: #fff;
        outline: 1px solid #fff;
        outline-offset: -1px;
        vertical-align: middle;
        margin: 2px 0px 2px 0;
    }
    .chk:HOVER
    {
        outline-color: #AB6CB2 !important;
    }
    .chk.disabled
    {
        background: #DCDDDF;
    }
    .chk.border
    {
        outline-color: #817F7F;
    }
    .chk.error
    {
        outline-color: red;
    }
    .chk.align_right{float: right; }
    .chk.align_right::after { clear: both; }
    .chk_lbl { display: inline-block;width: 80%;vertical-align: top; }
/*----Custom CheckBox------------*/
.relax
{
    clear: both;
    height: 0;
    width: 0;
    overflow: hidden;
}
.hidden
{
	display: none;
}

.wrapper
{
    margin: 0 auto;
    width: 1000px;
    padding: 0;
}
.main
{
    margin-top: 10px;
}
IMG
{
    max-width: 100%;
}
.main IMG.padding_bottom
{
    margin-bottom: 10px;
}
.box
{
    border: 1px solid #817F7F;
    padding: 12px;
    margin-bottom: 30px;
}
.box.no_side_padding
{
    padding-left: 0;
    padding-right: 0;
}
.box.join_bottom,
.box_group .box {
    margin-bottom: 0;
    border-bottom: none;
}
.box.join_top
{
    margin-top: 0;
    border-top: none;
}

.box_group .box:last-of-type {
    border-bottom: 1px solid #817F7F;
    margin-bottom: 30px;
}
.box.empty
{
    height: 75px;
}



.tiles .box
{
    min-height: 170px;
    position: relative;
}
    .tiles .box A.main
	{
	    font-size: 16px;
	    position: absolute;
	    top: 12px;
	    bottom: 12px;
	    left: 12px;
	    right: 12px;
	    margin: 0;
	}
.tiles .box .item_add
{
    position: absolute;
    bottom: 12px;
    left: 12px;
}
.tiles.fp .box.image
{
    min-height: 0;
}
.tiles.fp .box.image IMG
{
    max-height: 175px;
}
.tiles.fp .box.details
{
    min-height: 100px;
}
.tiles.fp .box.details .donation_beneficiary
{
    bottom: 12px;
    position: absolute;
}
/*&#43;&#x2B;&plus;*/
.item_add:before
{
    content: "\2b";
    font-weight: bold;
    font-size: 18px;
    padding-right: 3px;
}

.tiles .box .arrow
{
    position: absolute;
    bottom: 12px;
    right: 12px;
}
.arrow.top:after    { content: "\25B2"; }
.arrow.bottom:after { content: "\25BC"; }
.arrow.left:after   { content: "\25C0"; }
.arrow.right:after  { content: "\25B6"; padding-left: 4px; }

.arrow.right.full { position: relative; display: block;}
.arrow.right.full:after  { position: absolute; right: 0; padding-left: 0;}

.mismatch
{
    color: #000;
    font-weight: bold;
}

/*Hightlight search matches*/
SPAN.match
{
    color: #000;
    font-weight: bold;
}

.size_helper
{
    position: fixed;
    top: 0;
    background-color: blue;
    color: white;
    display: none;
    width: 20px;
    height: 20px;
    padding: 10px;
    outline: 2px dashed white;
    z-index: 9999;
}

/*border: 1px solid #817F7F;*/
TABLE.results.small
{
    width: auto;
}
TABLE.results
{
    width: 100%;
    text-align: left;
    
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 0 15px;
}
    TABLE.results TH,
    TABLE.results TD
    {
        /*border: 1px solid #817F7F;*/
        border: 1px solid #817F7F;
        /*border-right: none;
        border-top: none;*/
        vertical-align: top;
    }
        TABLE.results TD.no_border 
        {
            border: none;
        }
    TABLE.results TH[rowspan]:not([rowspan="1"]) {
        vertical-align: bottom;
    }
    TABLE.results TH.max,
    TABLE.results TD.max
    {
        width: 100%;
    }
    TABLE.results TH{
        padding: 8px 9px 8px 9px;
    }
        TABLE.results TH.vert {
            vertical-align: bottom;
        }
        TABLE.results TH.vert *{
            writing-mode: sideways-lr;
            /*writing-mode: vertical-rl;
            transform: rotate(180deg);*/

            text-orientation: mixed;
            
            /*-webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);*/
        }
    TABLE.results TD
    {
        padding: 5px 5px 5px 9px;
        
    }
    
    /*TODO check if closed is used anywhere else*/
    /*TABLE.results TR.closed TD
    {
        background-color: #817F7F;
    }
        TABLE.results TR.closed TD,
        TABLE.results TR.closed TD A
        {
            color: #fff;
        }*/
    TABLE.results TR.unpublished.closed TD {
        background-color: #817F7F;
    }
        TABLE.results TR.unpublished.closed TD,
        TABLE.results TR.unpublished.closed TD A {
            color: #fff;
        }

    TABLE.results TR.published.closed TD,
    TABLE.results TR.past TD {
        background-color: #ededed;
    }
    
    TABLE.results TR.awaiting_auth TD {
        background-color: #fff8e1;
    }
    
    TABLE.results TR.future TD {
        background-color: #edf5fe;
    }
    TABLE.results TR.unpublished.open TD
    {
        background-color: #feedfb;
    }
        

    .results TR.low TH,
    .results TR.low TD,
    .results TD.low,
    .results TD.pay{    background-color: #E9F6CC;}

    .results TR.medium TH,
    .results TR.medium TD,
    .results TD.medium  {	background-color: #F8F6DA;}

    .results TR.cheque TD,
    .results TR.error TD,
    .results TR.high TH,
    .results TR.high TD,
    .results TD.high,
    .results TD.hold,
    .results TD.calculated
    {   background-color: #FEF1E9;}

    .key {
        /*font-size: 12px;*/
    }
        .key i { 
            /*border: 1px solid black;
                 font-size: 13px;*/
        }
        .key .past,
        .key .published.closed {
            color: #ededed;
        }
        /*
            .key .current,
            .key .published.open {
                color: #fff;
            }
        */
        
        .key .unpublished.closed {
            color: #817F7F;
        }
        .key .future
        {
            color: #edf5fe;
        }

        .key .unpublished.open {
            color: #feedfb;
        }

        .key .awaiting_auth {
            color: #fff8e1;
        }

    .cheque,
    .calculated
	{
		background-color: #FEF1E9;
		color: #818080;
		padding: 8px 9px;
		margin: 10px 0;
	}

	.deactivated{
	    background-color: #f0f0f0;
	}
.pager
{
	/*padding: 15px 0;*/
	color: #979595;
	font-size: 14px;
	margin-bottom: 15px;
}
	/*.pager A
	{
		color: #979595;
	}
	.pager A.active,
	.pager A.previousNextLink,
	.pager A.numericLink
	{
		color: #817F7F;
	}*/

.text-no-wrap
{
    white-space: nowrap;
}
.text-left{text-align: left !important;}
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}
.nm{padding: 0 !important;}
.nm-left{padding-left: 0 !important;}
.nm-right{padding-right: 0 !important;}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
    position: relative;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    float: left;    
    width: 100%;
}
/*.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11{ }*/
/*.hidden   TODO - This was removed as it kept items hidden even when JQuery slideDown was used*/
.home_page {
    background-color: #817F7F;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    color: White;
}
    .home_page.BG_spring {
        /*background-image: url('../images/backgrounds/arno-smit-88929-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/jeremy-bishop-235014-unsplash.jpg');*/
        background-image: url('../images/backgrounds/remi-antunes-1291536-unsplash.jpg'); /*2024*/
        /*background-image: url('../images/backgrounds/sean-mcgee-654810-unsplash.jpg');*/ /*2023*/
        /*background-image: url('../images/backgrounds/sean-mcgee-654810-unsplash.webp');*/
        /*background-image: url('../images/backgrounds/slava-stupachenko-1439781-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/spring-4022427_1920.jpg');*/
        /*background-image: url('../images/backgrounds/yellow-5219524_960_720.jpg');*/
    }
    .home_page.BG_summer {
        background-image: url('../images/backgrounds/leonard-cotte-300248-unsplash.jpg');
        /*background-image: url('../images/backgrounds/hill-2601798_1920.jpg');*/
        /*background-image: url('../images/backgrounds/rainbow-675832_1920.jpg');*/
    }
    .home_page.BG_autumn {
        /*background-image: url('../images/backgrounds/toni-lluch-4234-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/adi-ulici-417250-unsplash.jpg');*/
        background-image: url('../images/backgrounds/aaron-burden-00QWN1J0g48-unsplash.jpg'); /*2023; 2024*/
        /*background-image: url('../images/backgrounds/aaron-burden-1UCj8BZEqRw-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/andrew-preble-KHbt9Q3udw8-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/dan-freeman-VAWqURK_Th0-unsplash.jpg');*/ /*2022*/
        /*background-image: url('../images/backgrounds/david-marcu-W5MhJ6cy1So-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/jeremy-thomas-Qw2CUd_9OWo-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/johannes-plenio-RwHv7LgeC7s-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/ricardo-gomez-angel-4hhP-Ud4e84-unsplash.jpg');*/
    }
    .home_page.BG_remembrance {
        background-image: url('../images/backgrounds/laurentiu-iordache-568420-unsplash.jpg'); /*2023; 2024*/
        /*background-image: url('../images/backgrounds/corina-ardeleanu-39335-unsplash.jpg');*/
        /*background-image: url('../images/backgrounds/evgeniy-gorbenko-681885-unsplash.jpg');*/ /*2022*/
    }
    .home_page.BG_winter {
        /*background-image: url('../images/backgrounds/john-salzarulo-138022-unsplash.jpg');*/
        background-image: url('../images/backgrounds/aaron-burden-xtIYGB0KEqc-unsplash.jpg');   /*2024*/        
    }

    /*Header Begin*/
    .header_wide_scr {
        box-shadow: 3px 3px 10px #817F7F;
        padding-top: 20px;
    }
    .header_wide_scr .logo,
    .header_wide_scr .search,
    .header_wide_scr .nav
    {
        margin-bottom: 20px;
    }
    .header_wide_scr .logo
    {}
        
    .header_wide_scr .nav
    {
    }
        .header_wide_scr .nav A
        {
            font-size: 12px;
            margin-left: 11px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .header_wide_scr .nav IMG
        {
            vertical-align: middle;
            height: 15px;
        }

.header_wide_scr .nav A.fa-brands {
    font-size: 16px !important;
}

/*Header End*/
/*Home Page Header Begin*/
.home_page .header_wide_scr {
    position: fixed;
    /*top: 20px;
    right: 20px;*/
    z-index: 100;
    box-shadow: none;
    background-color: transparent;
}
.home_page .header_wide_scr A
{
    color: #fff;
    padding-right: 20px;
}
.home_page .header_wide_scr A IMG
{
    vertical-align:middle;
   
}
/*Home Page Header End*/

/*Footer Begin*/
.footer_wide_scr {
    margin-top: 15px;
    border-top: 1px solid #ABA9AA;
    padding-top: 15px;
    text-transform: uppercase;
    font-size: 12px;
    background-color: #F4F4F4;
}
    .footer_wide_scr .wrapper .col
    {
        padding-bottom: 15px;
    }
    .footer_wide_scr H5 {
        border-color: #ABA9AA;
        border-bottom: 1px solid;
        padding-bottom: 4px;
        font-size: 13px;
    }
    .copyright
    {
        font-size: 10px;
    }
    .cookie_footer
    {
        font-size: 12px;
        padding-bottom: 10px;
        text-transform: lowercase;
    }
    
    .home_page .footer_wide_scr
    {
        border: none;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 100;
    }
        .home_page .footer_wide_scr .wrapper
        {
            margin: none;
            width: auto;
        }
    
        .home_page .footer_wide_scr H5
        {
            border-color: #fff;
        }
/*Footer End*/
.btn,
INPUT[type=text],
INPUT[type=password],
TEXTAREA,
.padding_in_width,
.jHtmlArea IFRAME
{
    /*Prevent Padding from being added to width*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
INPUT[type="text"]::placeholder,
INPUT[type="text"]::-webkit-input-placeholder, /*Edge*/
TEXTAREA::placeholder,
TEXTAREA::-webkit-input-placeholder /*Edge*/
{
    color: lightgrey;
}



INPUT[type="radio"]
{
    margin-right: 3px;
}
.error_summary
{
    font-size: 14px;
    color: Red;
}
    .error_summary ul
    {
        padding-bottom: 0;
    }
    .toggle_message_panel P {
        font-size: 14px;
        color: Red;
        padding: 2px 0;
    }
.error_panel
{
	display: none;
	font-size: 14px;
	color: Red;
}
    .error_panel a {
        color: Red;
    }
    .error_panel UL {
        list-style-position: inside;
    }
.error_results
{
    outline: Red 2px dashed;
    color: Red;
    text-align: left;
    padding: 20px;
    margin: 10px;
}

.outer {
  display: table;
  position: fixed;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  /*width: 650px;*/
  /*whatever width you want*/
  color: White;
  text-align: center;
}

.home_page p
{
    text-shadow: 2px 2px #000;
}
.home_page .logo,
.home_page .search.featured,
.home_page p {
    margin-bottom: 10%;
}
    .home_page p.no_margin,
    .home_page .logo.no_margin 
    {
        margin-bottom: 0;
    }
.home_page A
{
    text-transform: uppercase;
    color: #fff;
}
.home_page P A {
    text-transform:  none;
}

    .home_page A:HOVER {
        text-decoration: underline;
    }

.home_page P
{
    font-size: 22px;
}
.home_page .header_wide_scr A.fa-brands {
    font-size: 26px !important;
}

/*POPUP*/
.fade_panel,
.cal_fade
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /*width: 100%;
    height: 200%;*/
    background-color: #000;
    display: none;
}
.fade_panel.visible
{
    display: block;
    opacity: 0.3;
}
body.popup_overflow
{
    overflow: hidden;
}
    body.popup_overflow .popup_anchor
    {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.3)
    }
    .popup_panel
    {
        display: none;
        opacity: 0;
        position: relative;
        background-color: #FFF;
        margin: 100px auto 50px;
        width: 665px;
        max-width: 80%;
        text-align: left;
        padding: 15px 15px 30px;
        z-index: 110;
    }
        .popup_panel .close,
        .popup_panel .cancel,
        .popup_panel .print{position: absolute;}

        .popup_panel .close,
        .popup_panel .cancel{   right: 12px; }
        .popup_panel .print{    left: 12px;}

        .popup_panel .close
        {
            top: 6px;
            font-size: 30px;
            line-height: 30px;
        }
        .popup_panel .close A:HOVER
        {
            /*text-shadow: 0 0 5px #000;*/
            text-decoration: none;
        }
        
        .popup_panel .print,
        .popup_panel .cancel
        {
            bottom: 6px;
        }
        .form_row .cancel
        {
            text-align: right;
        }

/*POPUP PANEL*/
.browse_text_display
{
	position: relative;
}
    .browse_text_display label {
        cursor: pointer;
    }
        .browse_text_display label:hover {
            color: #AB6CB2
        }
        .browse_text_display INPUT[type=file] {
            cursor: pointer;
            position: absolute;
            top: 0px;
            bottom: 0px;
            width: 100%;
            opacity: 0;
            filter: alpha(opacity = 0);
        }
    
.image_controls
{
	margin: 10px 0;
}
/*Toggle Item */
.toggle_item
{
    padding-right: 15px;
    margin-bottom: 2px;
    /*font-size: 13px;*/
    position: relative;
}
    /*.toggle_item .toggle_item:HOVER
    {
        outline: 1px solid #7482BF;
    }*/
    
    .toggle_item .toggler
    {
        cursor: pointer;
        min-height: 16px;
        font-weight: bold;
    }
    

    .toggle_item.collapsed .toggler:after,
    .toggle_item.expanded  .toggler:after
    {
        position:absolute;
        top: 0;
        right: 0;
        line-height: 13px;
    }
    
    .toggle_item.collapsed .toggler:after{ content: "\25B6"; }
    .toggle_item.expanded  .toggler:after{ content: "\25C0"; }
    
    .toggle_item.vert.collapsed .toggler:after{ content: "\25BC" !important; }
    .toggle_item.vert.expanded  .toggler:after{ content: "\25B2"; }
        
    .toggle_item.expanded.onload .toggle_content
    {
        display: block;
    }
    .toggle_item.expanded .toggler.toggle_content
    {
        display: inline-block;
    }
    .toggle_item.collapsed .toggle_content
    {
        display: none;
    }
    .toggle_item.collapsed .toggle_content P,
    .toggle_item.expanded .toggle_content P
    {
        font-size: 13px;
    }
    .toggle_item.pad
    {
        padding-bottom: 5px;
    }
    .toggle_item.pad .toggle_content
    {
        padding: 5px;
    }
/*Toggle Item */

.button_container
{
    margin-bottom: 15px;
}


.empty_results
{
    outline: 2px dashed;
    text-align: center;
    padding: 20px;
    margin: 10px;
}

.jHtmlArea,
.jHtmlArea .ToolBar
{
    width: 100% !important;
}
.jHtmlArea BODY
{
	color: RED;
}
.jHtmlArea IFRAME
{
	background-color: #FFF;
	border: 1px solid #817F7F;
	outline: none;
	frameBorder: 0;
	
	width: 100% !important;
	box-sizing: border-box;
}
.jHtmlArea IFRAME.error
{
	border-color: #FF0000;
}
TEXTAREA.editor.small {
    height: 100px;
}
TEXTAREA.editor.medium {
    height: 150px;
}
TEXTAREA.editor.large {
    height: 200px;
}
TEXTAREA.editor.xlarge {
    height: 270px;
}
TEXTAREA.editor.small,
TEXTAREA.editor.medium,
TEXTAREA.editor.large,
TEXTAREA.editor.xlarge
{
    width: 100%;
}

    .image_gallery {
        height: 248px;
        overflow-y: scroll;
    }
    .image_gallery .image_container
    {
        height: 100px;
        overflow: hidden;
        margin-bottom: 15px;
    }
    .image_gallery .image_container IMG
    {
        cursor: pointer;
        width: 100%;
    }
    .image_gallery .image_container:HOVER
    {
        outline: 2px solid #ABA9AA;
    }
	.image_gallery .image_container .del_btn
	{
		position: absolute;
		top: 0px;
		right: 15px;
		width: 22px;
		height: 24px;
		background: url('../images/system/btn-bin.png') no-repeat center;
		border: 1px solid Transparent;
	}
	.image_gallery .image_container .del_btn:HOVER
	{
		background-color: #fff;
		border-color: #ABA9AA;
	}

.api_key
{
    font-size: 19px;
    font-family: Verdana;
    width: 460px;
    border: 2px solid #817F7F;
    border-radius: 15px;
    text-align: center;
    padding: 10px 10px;
    margin: 10px 0;
    background-color: #FFF;
}

.notification {
    margin: 10px 0;
    border-left-width: 6px;
    border-left-style: solid;
    color: #000;
    background-color: #ededed;
    padding: 10px 10px 10px 40px !important;    
    position: relative;
    font-size: 14px;
}
    .notification::before {
        font: var(--fa-font-solid);
        font-size: 18px;
        top: 10px;
        left: 10px;
        position: absolute;
    }
    .notification.error {
        border-left-color: #de5153;
        background-color: #fff1f1;
    }
        .notification.error::before {
            content: '\f057';
        }
        .notification.error::before,
        .notification.error A {
            color: #de5153;
        }

    .notification.success {
        border-left-color: #59b273;
        background-color: #defce6;
    }
        .notification.success::before {
            content: '\f058';
        }
        .notification.success::before,        
        .notification.success A {
            color: #59b273;
        }

    .notification.warning {
        border-left-color: #efc74c;
        background-color: #fff8e1;
    }
        .notification.warning::before {
            content: '\f06a';
        }
        .notification.warning::before,
        .notification.warning A {
            color: #efc74c;
        }

    .notification.information {
        border-left-color: #4b6ed1;
        background-color: #edf5fe;
    }
        .notification.information::before {
            content: '\f05a';
        }
        .notification.information::before,
        .notification.information A {
            color: #4b6ed1;
        }

.payment_types
{
    border: 1px solid #ABA9AA;
    padding: 8px;
}
    .payment_types.error
    {
        border-color: Red;
    }
    .payment_types LABEL IMG,
    .payment_type IMG
    {
        vertical-align: middle;
        height: 18px;
    }
    
.tab_container
{
    display: flex;
}
    .tab_container.margin_bottom
    {
        margin-bottom: 10px;
    }
    .tab_container A
    {
        width: 100%;
        float: left;
        text-decoration: none;
        background-color: #A7A9AC;
        color: #FFF;
        border-bottom: 5px solid #A7A9AC;
        padding: 5px 5px 2px 20px;
        /*Prevent Padding from being added to width*/
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    .tab_container A.selected,
    .tab_container A:HOVER
    {
        border-color: #807E7F;
    }
    .tab_container A.valid
    {
        background-color: #807E7F;
        border-color: #807E7F;
    }
    
    .tab_container A.valid:HOVER,
    .tab_container A.valid.selected,
    .tab_container A.valid.selected:HOVER
    {
        border-color: #5f3e73;
    }
    .tab_container A.error
    /*, .tab_container A.error:HOVER*/
    {
        background-color: red;
    }
    .tab_content
    {
        
        /*padding: 10px 0 10px 10px;*/
        
    }
    .tab_content.top
    {
        padding-bottom: 0;
    }
    
.donations{}
.donations .title
{
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 2px;
}
.donations .type
{
    text-align: right;
    font-size: 14px;
}
.donations .gift_aid
{
    font-size: 14px;
}
.tr_event {
    border-bottom: 1px solid #817F7F;
    margin-bottom: 10px;
}
    .tr_event:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
    }
.google_map {
    width: 100%;
    height: 300px;
}

.text-small
{
    font-size: 14px;
}
.text-xtra-small
{
    font-size: 12px;
}
.text-large {
    font-size: 24px;    
}


.text-bold{
    font-weight: bold;
}
.list A
{
    padding-bottom: 7px;
}

.calendar
{
	background-color: #fff;
	display: none;
	position: absolute;

	padding: 8px;
	width: 100%; /*268px;*/
	box-sizing: border-box;
	
	z-index: 9010;
			
	/*border: 10px solid #FFF;*/
	/*border-radius: 20px;*/
	text-align: center;
			
	/*position: relative;
    background-color: #FFF;
    margin: 100px auto 50px;
    width: 665px;
    max-width: 80%;
    text-align: left;
    padding: 15px 15px 30px;
    z-index: 110;*/
}
	.calendar A
	{
		text-decoration: none;
	}
	.calendar A:HOVER
	{
		        
	}
	.calendar .ddlMonth,
	.calendar .ddlYear,
	.calendar .ddlHour,
	.calendar .ddlMin,
	.calendar .ddlMeridiem
	{
		/*border: 1px solid #ABA9AA;*/
        /*border-radius: 13px;*/
        overflow: visible;
        /*
        -moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
        box-sizing: content-box;  */  
                
        /*padding: 1px 5px 1px 5px !important;*/
        /*color: #00AEEF !important;*/
	}
	.calendar .ddlMonth{width: 120px !important;}
	.calendar .ddlYear {width: 85px !important;}
	.calendar .next_prev{ padding: 2px 10px;}
	/*.calendar .time
	{
		border-top: 1px solid #00AEEF;
		margin: 5px;
		padding-top: 10px;
	}*/
	.calendar .ddlHour,
	.calendar .ddlMin,
	.calendar .ddlMeridiem
	{
	    width: 55px !important;
	    padding-left: 5px;
	    padding-right: 5px;
	}
		    
	.calendar .time .btn
	{
		margin-top: 10px;
		display: inline-block;
	}
	
	.beneficiary_logo IMG
	{
	    /*width: 100%;*/
	}
	.linked_pages .item
	{
	    padding-bottom: 15px;
	}
	
#classification_filters
{
    margin-left: 0;
}
#classification_filters LI
{
    float: left;
    list-style: none;
    position: relative;
}
    
#classification_filters LI
{   
    margin: 2px;
    padding: 5px;
}
#classification_filters LI A
{
    text-decoration: none;
}
#classification_filters LI:HOVER,
#classification_filters LI.selected
{
    background-color: #AB6CB2;
}
#classification_filters LI:HOVER A,
#classification_filters LI.selected A
{
    color: #FFF;
}

.filter_box,
.quick_scroll
{
    margin: 0 0 5px 0;
}
.quick_scroll A:HOVER
{
    background-color: #ABA9AA;
}
.quick_scroll A
{
    font-size: 14px;
    font-weight: bold;
    font-family: Tahoma;
    text-decoration: none;
    width: 25px;
    height: 25px;
    display: inline-block;
    text-align: center;
    line-height: 25px;
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #ABA9AA;
}
.filter_list,
#selectable_beneficiaries
{
    height: 250px;
    overflow-y: scroll;
    margin-left: 0px;
    padding-bottom: 0;
}
    .filter_list li,
    #selectable_beneficiaries LI {
        padding: 2px;
    }
        .filter_list li:HOVER,
        .filter_list li.selected,
        #selectable_beneficiaries LI:HOVER {
            background-color: #AB6CB2; /*#e2f4fd;*/
            /*font-weight: bold;*/
        }
            .filter_list LI:HOVER A,
            .filter_list li.selected a,
            #selectable_beneficiaries LI:HOVER A {
                color: #FFF;
            }
.filter_list_info
{
    padding-top: 5px;
    text-align: right;
}

#selectable_beneficiaries.highlight_swap LI:HOVER {
    background-color: #5F3E73;
}
    #selectable_beneficiaries.highlight_swap LI:HOVER
    {
        /*background-color: #7482bf;*/
    }
    #selectable_beneficiaries.highlight_swap LI A
    {
        color: #fff;
    }
    #selectable_beneficiaries.highlight_swap LI A.unselectable
    {
        color: #d4caca;
    }
    .filter_list LI A,
    #selectable_beneficiaries LI A {
        text-decoration: none;
        display: block;
    }
    A.unselectable
    {
        color: #d4caca;
        cursor: default !important;
    }
    #selectable_beneficiaries LI A.deactivated
    {
        background-color: #f0f0f0;
        cursor: pointer;
    }
    #selectable_beneficiaries.highlight_swap LI A.deactivated
    {
        background-color: #0094cb;
    }
    A.deactivated
    {
        color: #c3c3c3;
    }
.selectable_beneficiaries_info
{
    text-align: right;
}
.empty_results.selectable_beneficiaries
    {
        margin-left: 0;
        height: 230px;
        padding-top: 100px;
    }
    
.selected_beneficiaries
{
    /*list-style-position: inside;*/
    padding-left: 20px;
}
    .selected_beneficiaries LI
    {
        width: 100%;
        position: relative;
        padding: 5px;
    }
    .selected_beneficiaries LI A
    {
        text-decoration: none;
        display: inline-block;
    }
        
/*.selected_beneficiaries LI A
{
    vertical-align: top;
        
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/
    
#selectable_beneficiaries.highlight_swap,        
.swapping,
.selected_beneficiaries LI A.swappable:HOVER
{
    color: #fff;
    background-color: #AB6CB2;
    /*#00aeef*/
}
    
.selected_beneficiaries LI A.not_swappable:HOVER
{
    background-color: #f0f0f0;
    cursor: default;
}
.selected_beneficiaries LI,
.border_box
{
	/*Prevent Padding from being added to width*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}


.stay_top_test
{
    position: fixed;
    z-index: 999;
    background-color: #fff;
}
.stay_top_placeholder
{
    height : 105px;
}

.loading_panel
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
    .loading_panel .fade
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10005;
        background-color: #000;
        opacity: 0.5;
        filter: alpha(opacity = 50);
    }
    .loading_panel .animation
    {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10010;
        background: transparent url('../images/system/loading-flower.gif') no-repeat center center;
    }

.highlight_section
{
    background-color: #b970bc;
    padding: 5px;
    color: #fff;
    font-size: 14px;
}
    .highlight_section .error {
        color: #000 !important;
        display: block;
        font-weight: bold;
    }

    .help {
        cursor: help !important;
        font-weight: bold;
        background-color: #817F7F;
        color: #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        height: 17px;
        width: 17px;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        margin: 5px;
    }
.help.no_margin
{
    margin: 0px;
}
.donation_suggestions
{
    display: flex;
    
}
    .donation_suggestions A,
    .donation_suggestion_label
    {
        margin-bottom: 1px;
        font-weight: bold;
        width: 100%;
        float: left;
        box-sizing: border-box;

        text-align: center;
        
        color: #fff;
        padding: 2px 0;
        border: 1px solid #fff;
        font-size: 20px;
        text-decoration: none;
    }
    .donation_suggestions A
    {
        background-color: #5f3e73;
    }
    
.donation_reminder
{
    font-weight: bold;
    font-size: 18px;
}

.summary_edit
{
    font-weight: bold;
    font-size: 16px;
}

.rem_char
{
    text-align: right;
    font-size: 12px;
}

.bg_holly
{
    background-image: url('../images/system/bg-holly.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    padding-right: 30px;
}
.hdn_pw_val {
    display: none;
}
.tooltip_spacer {
    padding-right: 25px !important;
    position: relative;
}
.tooltip_container {    
    display: inline-block;
    position: absolute;
    top: 3px;
    right: 4px;
}

    .tooltip_container A,
    .tooltip_container .tooltip_content {
        background-color: #FFF;
        color: #817F7F !important;
        border: 2px solid #817F7F;
        border-radius: 15px;
    }

    .tooltip_container A {
        font-size: 15px;
        line-height: 15px;
        font-family: Verdana;
        /*width: 460px;*/

        text-align: center;
        padding: 0;
        margin: 0;
        display: inline-block;
        width: 15px;
        height: 15px;
        text-decoration: none;
        cursor: pointer;
        z-index: 11;
    }

    .tooltip_container .tooltip_content {
        position: absolute;
        display: none;
        /*visibility: hidden;*/
        box-shadow: 3px 3px 10px #817F7F;
        top: 0;
        left: 0;
        padding: 20px 7px 7px;
        z-index: 100;
        text-align: left;
        box-sizing: border-box;
    }

        .tooltip_container .tooltip_content .close {
            position: absolute;
            top: 2px;
            right: 2px;
            line-height: 12px;
            font-size: 15px !important;
        }

.scroll_vert
{
    overflow-x: auto;
    margin-bottom: 15px;
}

    .scroll_vert.small {
        max-height: 150px;
    }
    .scroll_vert.medium {
        max-height: 300px;
    }
    .scroll_vert.large {
        max-height: 450px;
    }

.social_share{ margin-bottom: 8px;}
.social_share .stButton .stArrow {
    display: none;
}
.fb_link {
    display: inline-block;
    margin-top: 5px;
}
    .fb_link img
    {
        height: 18px;
        padding-right: 2px;
    }
A.inline_link {
    outline: 2px dashed #AB6CB2;
}
    /*A.inline_link::after {
        background: url(../images/system/bg-pound.jpg) no-repeat -30px -50px no-scroll;
        content: "#f044";
        width: 30px;
        height: 30px;
        background-color: red;
        top: 10px;
        right: 5px;
        position: absolute;
        display: inline-block;
    }*/
    A.inline_link,
    A.inline_link:hover {
        text-decoration: none;
        color: none;
    }
.anchor {
    position: relative;
}
    .anchor.min_height {
        min-height: 75px;
    }
    A.overlay_link {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        z-index: 10;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        outline: 2px dashed lightgray;
        padding: 5px 25px;
    }
/*.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}*/
        A.overlay_link::after {
            font: var(--fa-font-solid);
            content: '\f044';
            top: 5px;
            right: 5px;
            position: absolute;
            display: inline-block;
            /*animation-delay: var(--fa-animation-delay,3s);
            animation-direction: var(--fa-animation-direction,normal);
            animation-duration: var(--fa-animation-duration,2s);
            animation-name: fa-fade;
            animation-iteration-count: var(--fa-animation-iteration-count,infinite);
            animation-timing-function: var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));*/
        }
    A.overlay_link,
    A.overlay_link:hover {
        text-decoration: none;
    }
        A.overlay_link.init_transp {
            color: transparent;
        }
        A.overlay_link:hover {
            outline: 2px dashed #AB6CB2;
        }        
        A.overlay_link.hover_bg_grey:hover {
            color: white;
            background-color: rgba(129, 127, 127, 0.5);
        }

.mimic_h1_gap {
    margin-top: 24px;   /*25(H1 margin-top)-1(textbox border)*/
}
.txt_h1_inline {
    font-size: 32px !important;
    font-weight: bold;    
    padding: 0 !important;
}

.overlay_image_panel {
    will-change: filter; /*safari requires this to clean up the shadow after the element has become hidden*/
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    background-color: rgba(129, 127, 127, 0.5);
    filter: drop-shadow(0 0 30px black);
    /*background-color: white;*/
}
.overlay {
    position: absolute;
    z-index: 20;
}
    .overlay.overlay {
        z-index: 40;
    }
    .overlay.bg_white {
        background: white;
        padding: 10px 5px;
    }
    .overlay.small {
        font-size: 25px;
    }
    .text-shadow-white {
        text-shadow: 0 0 15px white;
    }

.overlay.inside.top     { top: 5px;}
.overlay.inside.bottom  { bottom: 5px;}
.overlay.inside.left    { left: 5px;}
.overlay.inside.right   { right: 5px;}


.overlay.outside.top    { bottom: 100%; left: 0; right: 0;}
.overlay.outside.bottom { top: 100%; left: 0; right: 0;}
.overlay.outside.left   { right: 100%; top: 0; bottom: 0;}
.overlay.outside.right  { left: 100%; top: 0; bottom: 0;}

.overlay.outside.top_left       {bottom: 100%; left: 0;}
.overlay.outside.bottom_left    {top: 100%; left: 0;}
.overlay.outside.top_right      {bottom: 100%; right: 0;}
.overlay.outside.bottom_right   {top: 100%; right: 0;}

.overlay.outside.left_top       {right: 100%; top: 0;}
.overlay.outside.left_bottom    {right: 100%; bottom: 0;}
.overlay.outside.right_top      {left: 100%; top: 0;}
.overlay.outside.right_bottom   {left: 100%; bottom: 0;}

/*
.top_left {
    top: 5px;
    left: 5px;
}
.top_right {
    top: 5px;
    right: 5px;
    text-align: right;
}
.bottom_left {
    bottom: 5px;
    left: 5px;
}

.top_top_left {
    bottom: 100%;
    left: 0px;
}
.top_top_right {
    bottom: 100%;
    right: 0px;
}

.bottom_bottom_left {
    top: 100%;
    left: 0px;
}

.bottom_bottom_right {
    top: 100%;
    right: 0px;
}
*/


.fileUpload {
    position: relative;
    margin-bottom: 0
}

    .fileUpload::before {
        content: "Upload"
    }

    .fileUpload input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0)
    }

.hdn_async_btn {
    display: none
}

.fileUpload_text {
    display: inline-block;
    vertical-align: top;
    padding-top: 3px
}


.pbtn {
    vertical-align: top;
    display: inline-block;
    padding-right: 30px;
    font-size: 16px;
}

.pbtn a {
}
    .pbtn a.selected {
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #AB6CB2;
    }

.pbtn .additional {
    font-size: 14px;
    color: lightgray;
    padding-left: 30px;
}

/*autocomplete styles*/
.ac_not_found {
    background-color: #f9d6d6;
}
.ac_list {
    background-color: white;
    list-style: none;
    padding: 5px;
    border: 1px solid #817F7F;
}

.ac_list_item {
    background-color: white;
    color: #817F7F;
    padding: 2px;
}

    .ac_list_item.highlight {
        color: white;
        background-color: #AB6CB2;
        cursor: pointer;
    }
.qr_code{
    max-width: 180px;
    padding: 5px;
}

.shevron a {
    display: block;
    float: left;
    height: 30px;
    text-align: center;
    padding: 10px 30px 0 40px;
    position: relative;
    margin: 0 10px 10px 0; 
        
    font-size: 16px;
    text-decoration: none;
    color: #fff;
}
    .shevron a span {
        font-size: 10px;
        line-height: 5px;
        display: block;
    }
    .shevron a:after {
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #817F7F;
        position: absolute; right: -20px; top: 0;
        z-index: 10;
    }
    .shevron a:before {
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid white;
        position: absolute; left: 0; top: 0;
    }
    .shevron a:first-child {
        border-top-left-radius: 10px; border-bottom-left-radius: 10px;
    }
    .shevron a:first-child:before {
        display: none; 
    }
    .shevron a:last-child {
        padding-right: 40px;
        border-top-right-radius: 10px; border-bottom-right-radius: 10px;
    }
    .shevron a:last-child:after {
        display: none; 
    }

    .shevron a.selectable {                     background: #817F7F;}
    .shevron a.selectable:after {        border-left-color: #817F7F;}

    .shevron a {                                background: #DCDDDF;}
    .shevron a:after {                   border-left-color: #DCDDDF;}
    
    .shevron a.selected{                        background: #AB6CB2;}
    .shevron a.selected:after{           border-left-color: #AB6CB2;}

    .shevron a.incomplete{                      background: #ABA9A9;}
    .shevron a.incomplete:after{         border-left-color: #ABA9A9;}

    .shevron a.selectable:hover{                background: #AB6CB2;}
    .shevron a.selectable:hover:after {  border-left-color: #AB6CB2;}