/******************************************************************************************************
*************************************************** CSS RESETS ****************************************
******************************************************************************************************/
* {
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

/**Smooth scrolling for in page links**/
html {
    scroll-behavior: smooth;
}

/*Elementor Overrides*/
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: inherit !important;
    color: inherit !important;
}

.elementor-section.elementor-section-boxed > .elementor-container.fullBleed,
.fullBleed .elementor-section.elementor-section-boxed > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget-container{
    margin: 0px;
}

.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding: 0px !important;
}

.fullBleed .elementor-container:has(.fullBleed){
    padding-left: 0rem;
    padding-right: 0rem;
    margin-top: 0px;
}


.elementor-widget-container:has(.fullBleed) {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
/*****************************************************************************************************
 ******************************************* VARIABLES ***********************************************
 ****************************************************************************************************/
:root {
    /***********************************************
    ************* Global Color Variables ***********
    ***** !important overrides bootstrap scss ******
    ***********************************************/
    /*Action Colours*/
    --Action: #218376 !important;
    --ActionHover: #19615B !important;
    --ActionClicked: #144D48 !important;
    --Disabled: #BFBFBF !important;
    /*Alert Colours*/
    --ActionAlert: #B93822 !important;
    --ActionAlertHover: #A1311E !important;
    --ActionAlertClicked: #872919 !important;
    --AlertText: #A1311E !important;
    /*Warning Colours*/
    --ActionWarning: #E7BD3F !important;
    --ActionWarningHover: #D1AB39 !important;
    --ActionWarningClicked: #B59431 !important;
    --WarningText: #D1AB39 !important;
    /*Success Colours*/
    --ActionSuccess: #8CBC08 !important;
    --ActionSuccessHover: #7AA307 !important;
    --ActionSuccessClicked: #678A06 !important;
    --SuccessText: #7AA307 !important;
    /*Primary Colours*/
    --Primary-300: #029AED !important;
    --Primary-400: #007CC0 !important;
    --Primary-500: #006298 !important;
    --Primary-600: #004976 !important;
    --Primary-700: #00395C !important;
    /*Background Colours*/
    --ActiveBackground: #F3F3F3 !important;
    --HoverBackground: #F3F3F3 !important;
    --InactiveBackground: #F3F3F3 !important;
    --DisabledBackground: #F3F3F3 !important;
    --WhiteBG: #ffffff !important;
    /*Text Colours*/
    --PlaceholderText: #9E9E9E !important;
    --DarkText: #000000 !important;
    --WhiteText: #ffffff !important;
    /*Input Colours*/
    --Input: #777777 !important;
    --InputHover: #777777 !important;
    --InputActive: #333333 !important;
    --InputFocus: #218376 !important;
    --InputDisabled: #555555 !important;
    /*Neutral Colours*/
    --Neutral-100: #ffffff;
    --Neutral-200: #E6E6E6;
    --Neutral-300: #CCCCCC;
    --Neutral-400: #B3B3B3;
    --Neutral-500: #999999;
    --Neutral-600: #808080;
    --Neutral-700: #666666;
    --Neutral-800: #4D4D4D;
    --Neutral-900: #000000;
    /*Gradients*/
    --GradientBG: radial-gradient(30.41% 30.41% at 24.91% 21.85%,#218376 0%,#004976 100%);
    /************************************************
    ************** Drop Shadow Variables ************
    ************************************************/

    --ShadowDefault: 0px 0px 4px 2px rgba(0, 0, 0, 0.06);
    --ShadowActionable: 0px 0px 6px 6px rgba(0, 0, 0, 0.30);
    --ShadowActionableHover: 0px 0px 12px 6px rgba(0, 0, 0, 0.36);
    --ShadowActionableActive: 0px 0px 4px 4px rgba(0, 0, 0, 0.12);
    --ShadowDisabled: 0px 0px 4px 2px rgba(0, 0, 0, 0.03);
}
/**********************************************************************************************************
******************************************** Colour Classes ***********************************************
**********************************************************************************************************/
/*Background Colours*/
.bg-primary {
    background: var(--Primary-500) !important;
}

.bg-gradiant {
    background: var(--GradientBG) !important;
}

.bg-white {
    background-color: var(--Neutral-100) !important;
}

.bg-light-grey {
    background-color: var(--Neutral-200) !important;
}

.bg-grey {
    background-color: var(--Neutral-500) !important;
}

.bg-dark-grey {
    background-color: var(--Neutral-800) !important;
}

/*Colours*/
.primary {
    color: var(--Primary-500) !important;
}

.action {
    color: var(--Action) !important;
}

.white {
    color: var(--Neutral-100) !important;
}

light-grey {
    color: var(--Neutral-300) !important;
}

.grey {
    color: var( --Neutral-600) !important;
}

.dark-grey {
    color: var(--Neutral-800) !important;
}

.black {
    color: var(--Neutral-900) !important;
}

/**********************************************************************************************************
**************************************** BUTTON & LINK STYLES *********************************************
**********************************************************************************************************/

.btn,
.hs-button /*Hubspot Form Styles*/ {
    border-radius: 4px;
}

    /*Primary*/
    .btn.btn-primary,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn.btn-search, /*Search Button*/
    .hs-button /*Hubspot Form Styles*/ {
        background-color: var(--Action) !important;
        color: var(--WhiteText) !important;
        border: none;
    }

        .btn.btn-primary:hover,
        .btn.btn-search:hover { /*Search Button*/
            background-color: var(--ActionHover) !important;
        }

        .btn.btn-primary:focus,
        .btn.btn-search:focus { /*Search Button*/
            background-color: var(--ActionClicked) !important;
        }

    /*Primary Outline*/
    .btn.btn-outline-primary {
        background-color: var(--Neutral-100) !important;
        color: var(--Action) !important;
        border: solid 1px var(--Action);
    }

        .btn.btn-outline-primary:hover {
            color: var(--ActionHover) !important;
            border: solid 2px var(--ActionHover) !important;
        }

        .btn.btn-outline-primary:focus {
            color: var(--ActionClicked) !important;
            border: solid 2px var(--ActionClicked) !important;
        }

    /*Alert*/
    .btn.btn-primary.alert {
        background-color: var(--ActionAlert) !important;
        color: var(--WhiteText) !important;
        border: none;
    }

        .btn.btn-primary.alert:hover {
            background-color: var(--ActionAlertHover) !important;
        }

        .btn.btn-primary.alert:focus {
            background-color: var(--ActionAlertClicked) !important;
        }

    /*Alert Outline*/
    .btn.btn-outline.alert {
        background-color: var(--ActiveBackground) !important;
        color: var(--ActionAlert) !important;
        border: solid 1px var(--ActionAlert) !important;
    }

        .btn.btn-outline.alert:hover {
            color: var(--ActionAlertHover) !important;
            border: solid 1px var(--ActionAlertHover) !important;
        }

        .btn.btn-outline.alert:focus {
            color: var(--ActionAlertClicked) !important;
            border: solid 1px var(--ActionAlertClicked) !important;
        }

    /*Disabled*/
    .btn.btn-primary.disabled,
    .btn.btn-primary:disabled {
        background-color: var(--Disabled) !important;
        color: var(--WhiteText) !important;
        border: none;
    }

        .btn.btn-primary.disabled:hover,
        .btn.btn-primary:disabled:hover {
            background-color: var(--Disabled) !important;
        }

        .btn.btn-primary.disabled:focus,
        .btn.btn-primary:disabled:focus {
            background-color: var(--Disabled) !important;
        }



    /*Secondary Button*/
    .btn.btn-secondary {
        color: var(--Action) !important;
        background-color: initial !important;
        border: 2px solid var(--Action) !important;
    }

        .btn.btn-secondary:hover {
            color: var(--ActionHover) !important;
            border: 2px solid var(--ActionHover) !important;
        }

        .btn.btn-secondary:focus {
            color: var(--ActionClicked) !important;
            border: 2px solid var(--ActionClicked) !important;
            box-shadow: none !important; /*Override for bootstrap styles*/
        }

        .btn.btn-secondary:active {
            background-color: initial !important; /*Override for bootstrap styles*/
        }

        /*Secondary Alert Button*/
        .btn.btn-secondary.alert {
            color: var(--ActionAlert) !important;
        }

            .btn.btn-secondary.alert:focus {
                color: var(--ActionAlertClicked) !important;
                border: 2px solid var(--ActionAlertClicked) !important;
            }

            .btn.btn-secondary.alert:hover {
                color: var(--ActionAlertClicked) !important;
                border: 2px solid var(--ActionAlertHover) !important;
            }

        /*Disabled Secondary*/
        .btn.btn-secondary.disabled,
        .btn.btn-secondary:disabled, {
            background-color: var(--ActiveBackground) !important;
            color: var(--Disabled) !important;
            border: solid 1px var(--Disabled) !important;
        }

            .btn.btn-secondary.disabled:hover,
            .btn.btn-secondary:disabled:hover {
                color: var(--Disabled) !important;
                border: solid 1px var(--Disabled) !important;
            }

            .btn.btn-secondary.disabled:focus,
            .btn.btn-secondary:disabled:focus, {
                color: var(--Disabled) !important;
                border: solid 1px var(--Disabled) !important;
            }

    /*Tertiary Button*/
    .btn.btn-tertiary {
        color: var(--Action) !important;
        border: none !important;
    }

        .btn.btn-tertiary:hover {
            color: var(--ActionHover) !important;
            border: none !important;
        }

        .btn.btn-tertiary:focus {
            color: var(--ActionClicked) !important;
            border: none !important;
        }

        /*Tertiary Alert Button*/
        .btn.btn-tertiary.alert {
            color: var(--ActionAlert) !important;
        }

            .btn.btn-tertiary.alert:hover {
                color: var(--ActionAlertHover) !important;
            }

            .btn.btn-tertiary.alert:focus {
                color: var(--ActionAlertClicked) !important;
            }


        /*Tertiary Disabled Button*/
        .btn.btn-tertiary.disabled,
        .btn.btn-tertiary:disabled {
            color: var(--Disabled) !important;
        }

/*Inline Link*/
a,
.anchor {
    color: var(--Action) !important;
}

    a:hover,
    .anchor:hover {
        color: var(--ActionHover) !important;
    }

    a:focus,
    .anchorfocus {
        color: var(--ActionClicked) !important;
    }

/*********************************************************************************************************
************************************************* CARDS **************************************************
*********************************************************************************************************/

.card {
    background-color: var(--Neutral-100) !important;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.06);
}

    .card.card-actionable {
        background-color: var(--Neutral-100) !important;
        box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.30);
    }

        .card.card-actionable:hover {
            box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 0.36)
        }

        .card.card-actionable:focus {
            box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.12)
        }

        .card.card-actionable.disabled {
            box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.03)
        }


/********************************************************************************************************
*********************************************** TYPOGRAPHY **********************************************
********************************************************************************************************/

h1, .h1 {
    color: var(--DarkText) !important;
    font-weight: 700 !important;
}


.topic-page .desktop-header h1,
.topic-page .mobile-header h1{
    font-weight: 700 !important;
    color: var(--WhiteText) !important;
}

h2, .h2 {
    color: var(--DarkText);
    font-weight: 700 !important;
}

h3, .h3 {
    color: var(--DarkText);
    font-weight: 700 !important;
}

h4, .h4 {
    font-weight: 700 !important;
}


.bodycopy,
p {
    color: var(--DarkText) !important;
}




/*******************************************************************************************************
************************************************* INPUTS ***********************************************
*******************************************************************************************************/

/*******************************
********** Text Boxes **********
*******************************/


.text-box input[type="text"],
.text-box input[type="email"],
.text-box input[type="password"],
.text-box input[type="tel"],
.text-box input[type="number"],
.text-box textarea,
.hs-form-field input, /*HubSpot Form Styles*/
.hs-form-field textarea /*HubSpot Form Styles*/ {
    padding: 9px !important;
    border: solid 1px var(--Input) !important;
    border-radius: 5px !important;
}

    .text-box input[type="text"]:focus,
    .text-box input[type="email"]:focus,
    .text-box input[type="password"]:focus,
    .text-box input[type="tel"] :focus,
    .text-box textarea:focus,
    .hs-form-field input:focus /*HubSpot Form Styles*/,
    .hs-form-field textarea:focus /*HubSpot Form Styles*/ {
        border: solid 2px var(--InputFocus) !important;
        color: var(--DarkText) !important;
    }

    .text-box input[type="text"]:active,
    .text-box input[type="email"]:active,
    .text-box input[type="password"]:active,
    .text-box input[type="tel"]:active,
    .text-box textarea:active,
    .hs-form-field input:active /*HubSpot Form Styles*/,
    .hs-form-field textarea:active /*HubSpot Form Styles*/ {
        border: solid 1px var(--InputActive) !important;
    }

.text-box.alert input[type="text"],
.text-box.alert input[type="email"],
.text-box.alert input[type="password"],
.text-box.alert input[type="tel"],
.hs-form-field.alert input /*HubSpot Form Styles*/,
.hs-form-field.alert textarea /*HubSpot Form Styles*/ {
    color: var(--AlertText) !important;
    border: solid 1px var(--AlertText) !important;
}

.text-box.disabled input[type="text"],
.text-box.disabled input[type="email"],
.text-box.disabled input[type="password"],
.text-box.disabled input[type="tel"],
.hs-form-field.disabled input /*HubSpot Form Styles*/,
.hs-form-field.disabled textarea /*HubSpot Form Styles*/ {
    color: var(--Disabled) !important;
    border: solid 1px var(--Disabled) !important;
}

/*Text Box Label*/
.text-box label,
.text-box .label,
.hs-form-field label /*Hubspot Form Styles*/ {
    background: var(--WhiteBG) !important;
    color: var(--Input) !important;
}


/*Focus Label*/
.text-box:has(input:focus) label,
.text-box:has(input:focus) .label,
.hs-form-field:has(input:focus) label /*Hubspot Form Styles*/ {
    color: var(--Action) !important;
}

/*Alert Label*/
.text-box:has(.alert) label,
.text-box:has(.alert) .label,
.hs-form-field label.hs-error-msg /*Hubspot Form Styles*/ {
    color: var(--AlertText) !important;
}

/*Disabled Label*/
.text-box:has(.disabled) label,
.text-box:has(.disabled) .label,
.hs-form-field:has(.disabled) label /*Hubspot Form Styles*/ {
    color: var(--Disabled) !important;
}


/*******************************
********* Search Boxes *********
*******************************/

/*Search Box*/


.search-box input[type="text"] {
    border: solid 1px var(--Action);
}

    .search-box input[type="text"]:focus {
        border: solid 2px var(--Action);
    }

/*******************************
********** Check Boxes *********
*******************************/

/*Checkbox*/
input[type="checkbox"] {
    accent-color: var(--Action) !important;
    border: solid 1px var(--Action);
    color: var(--Action) !important;
}

    /*Checkbox Hover*/
    input[type="checkbox"]:hover {
        border: solid 1px var(--ActionHover);
    }

    /*Checkbox Focus*/
    input[type="checkbox"]:active {
        accent-color: var(--Action) !important;
        color: var(--WhiteText);
    }

    /*Checkbox Disabled*/
    input[type="checkbox"].disabled {
        accent-color: var(--Disabled) !important;
        color: var(--Disabled) !important;
    }
    /*Checkbox Alert*/
    input[type="checkbox"].alert {
        background-color: var(--ActionAlert) !important;
    }

        input[type="checkbox"].alert:hover {
            accent-color: var(--ActionAlertHover) !important;
        }

        input[type="checkbox"].alert:active {
            accent-color: var(--ActionAlertClicked) !important;
        }


/*******************************
********* Toggle Button ********
*******************************/
.toggle .slider {
    background-color: var(--Neutral-600) !important;
}

    .toggle .slider:before {
        background-color: white !important;
    }

.toggle input:checked + .slider {
    background-color: var(--Action) !important;
}

.toggle input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}



/*******************************
********* Radio Buttons ********
*******************************/

/*Default Radio Button*/
input[type="radio"] {
    border: solid 1px var(--Action);
    accent-color: var(--Action) !important;
}

    input[type="radio"]:hover {
        border: solid 1px var(--ActionHover);
        accent-color: var(--ActionHover) !important;
    }

    /*Alert Radio Button*/
    input[type="radio"].alert {
        border: solid 1px var(--ActionAlert);
        accent-color: var(--ActionAlert) !important;
    }

        input[type="radio"].alert:hover {
            border: solid 1px var(--ActionAlertHover);
            accent-color: var(--ActionAlertHover) !important;
        }

        input[type="radio"].alert:active {
            border: solid 1px var(--ActionAlert) !important;
        }

    /*Disabled Radio Button*/
    input[type="radio"].disabled {
        border: solid 1px var(--Disabled) !important;
        accent-color: var(--Disabled) !important;
    }
/*******************************
******** Dropdown Boxes ********
*******************************/


.dropdown select,
.hs-form-field select /*HubSpot Form Styles*/ {
    color: var(--PlaceholderText) !important;
}

    .dropdown select:focus,
    .hs-form-field select:focus /*HubSpot Form Styles*/ {
        border: solid 2px var(--InputFocus) !important;
        color: var(--DarkText) !important;
    }

    .dropdown select:active,
    .hs-form-field select:active /*HubSpot Form Styles*/ {
        border: solid 1px var(--InputActive) !important;
    }

/*Dropdown Alert*/
.dropdown.alert select,
.hs-form-field.alert select /*HubSpot Form Styles*/ {
    color: var(--AlertText) !important;
    border: solid 1px var(--AlertText) !important;
}

/*Dropdown Disabled*/
.dropdown.disabled select,
.hs-form-field.disabled select /*HubSpot Form Styles*/ {
    color: var(--Disabled) !important;
    border: solid 1px var(--Disabled) !important;
}

    .dropdown.disabled select:focus,
    .hs-form-field.disabled select:focus /*HubSpot Form Styles*/ {
        color: var(--Disabled) !important;
        border: solid 1px var(--Disabled) !important;
    }

    .dropdown.disabled select:active,
    .hs-form-field.disabled select:active /*HubSpot Form Styles*/ {
        color: var(--Disabled) !important;
        border: solid 1px var(--Disabled) !important;
    }

/*Dropdown Options*/
.dropdown select option,
.hs-form-field select option /*HubSpot Form Styles*/ {
    background-color: var(--WhiteBG) !important;
    color: var(--DarkText) !important;
}

    .dropdown select option:hover,
    .hs-form-field select option:hover /*HubSpot Form Styles*/ {
        background-color: var(--Action) !important;
        color: var(--WhiteText) !important;
    }

/*Dropdown Label*/
.dropdown label,
.dropdown .label,
.hs-form-field:has(select) label /*HubSpot Form Styles*/ {
    color: var(--Input) !important;
}

    /*Dropdown Label Focus*/
    .dropdown label:focus,
    .dropdown .label:focus,
    .hs-form-field:has(select) label:focus /*HubSpot Form Styles*/ {
        color: var(--Action) !important;
    }

/*Dropdown Label Alert*/
.dropdown.alert label,
.dropdown.alert .label,
.hs-form-field.alert:has(select) label /*HubSpot Form Styles*/ {
    color: var(--AlertText) !important;
}

/*Dropdown Label Disabled*/
.dropdown.disabled label,
.dropdown.disabled .label,
.hs-form-field.disabled:has(select) label /*HubSpot Form Styles*/ {
    color: var(--Disabled) !important;
}



/***************************************************************************************
*************************************** Modals *****************************************
***************************************************************************************/

.modal {
    background-color: rgba(0,0,0,.75);
}

/***************************************************************************************
 ********************************* Item Specific CSS ***********************************
 **************************************************************************************/
/*Checkout Progress Tracker*/
.active-step div div {
    border: solid 2px var(--Action) !important;
    background-color: var(--Action) !important;
}

.inactive-step div div {
    border: solid 2px var(--Action);
}


.inactive-step + .checkout-progress-line {
    border-bottom: solid 1px var(--Neutral-300);
}

.active-step + .checkout-progress-line {
    border-bottom: solid 2px var(--Neutral-800);
}


/*Search Category Dropdown*/
.dropdown.search-category-container {
    background-color: #eaeaea;
}

.dropdown .search-category-content {
    color: var(--Gray-400);
}

.myprojects .title {
    border-bottom: 1px solid var(--Gray-500);
    background: var(--Action);
    color: var(--White);
}


    .myprojects .title .edit-icon .icon {
        background: url(/themes/B2B-Atomic/content/images/edit-white.png) no-repeat;
    }


.myprojects .listGroup-header.sticky {
    background-color: var(--White);
    border-bottom: 1px solid var(--Gray-500);
}

.myprojects .listGroup-footer {
    height: 1px;
}

.myprojects .sub-title {
    color: #060606;
}

    .myprojects .sub-title:nth-of-type(odd) {
        background-color: var(--Neutral-200);
    }



    .myprojects .sub-title .action-pane {
        border-top: 1px solid var(--Gray-500);
        border-bottom: 1px solid var(--Gray-500);
    }

.sub-title {
    border-bottom: solid 1px var(--Gray-500);
}

.myprojects .tool-menu .tool-menu-options li {
    color: var(--Gray-400);
}

.mylists-page .myprojects .call-for-price {
    background-color: var(--Action);
}

    .mylists-page .myprojects .call-for-price:hover {
        background-color: var(--ActionHover);
    }

.myprojects .tool-menu .tool-menu-options li a:hover, .myprojects .tool-menu .tool-menu-options li span:hover {
    color: var(--Action);
    text-decoration: none;
}


.tool-menu-icon {
    background: url('../themes/B2B-Atomic/content/images/dashboard-options-icon.png') no-repeat center;
    background-size: contain;
}

.tool-menu-icon-white {
    background: url('../themes/B2B-Atomic/content/images/dashboard-options-icon-white.png') no-repeat center;
    background-size: contain;
}

.tool-menu-options {
    border: 1px solid var(--Gray-500);
    background-color: var(--White);
}

.text-input-view-icon {
    background: url(/themes/B2B-Atomic/content/images/edit.png) no-repeat;
}


.dropdown-header-between {
    background: var(--Primary-500);
}



/* --------------- */

/********* xZoom Styles below ***********/


.xzoom {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.xzoom2, .xzoom3, .xzoom4, .xzoom5 {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

/* Preview */
.xzoom-preview {
    border: 1px solid #888;
    background: #ffffff;
    box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
}

/* Lens */
.xzoom-lens {
    border: 1px solid #555;
    box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
    cursor: crosshair;
}

/* Loading */
.xzoom-loading {
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 100%;
    opacity: .7;
    background: url(../Themes/B2B-Atomic/Content/images/xloading.gif);
}

/* Additional class that applied to thumb when it is active */
.xactive {
    -webkit-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
    box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
    border: 1px solid #4aaad2;
}







.gallery .collateral-disclaimer {
    color: var(--Secondary-400);
    font-style: oblique;
}

.btn.white {
    color: var(--WhiteText) !important;
}

    .btn.white:hover {
        color: var(--WhiteText) !important;
    }

.white:focus {
    color: var(--WhiteText) !important;
}

a.white {
    color: var(--WhiteText) !important;
}

    a.white:hover {
        color: var(--WhiteText) !important;
    }

    a.white:focus {
        color: var(--WhiteText) !important;
    }