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

/**Smooth scrolling for in page links**/
/**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;
    color: inherit;
}

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

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


/****************************************************************************************************
******************************************* Bootstrap Addendum ***************************************
****************************************************************************************************/

.overflow-scroll {
    overflow: scroll;
}

/*****************************************************************************************************
 ******************************************* 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;
    --AlertBG: #b938223b !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;
    --SuccessBG: #8CBC08 !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-150: #f5f5f5;
    --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);
}

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

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

.bg-alert {
    background-color: var(--AlertBG);
}

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

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

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

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

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

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

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

.alert {
    color: var(--AlertText);
}



/**********************************************************************************************************
**************************************************** Z-INDEX **********************************************
**********************************************************************************************************/

.z-index-10 {
    z-index: 10;
}

.z-index-20 {
    z-index: 20;
}

.z-index-30 {
    z-index: 30;
}

.z-index-40 {
    z-index: 40;
}

.z-index-50 {
    z-index: 50;
}

/**********************************************************************************************************
*********************************************** Validation ************************************************
**********************************************************************************************************/

.validation-summary-errors {
    background-color: var(--AlertBG);
    color: var(--AlertText);
    padding: 20px 10px 5px 10px;
    font-weight: 700;
}

    .validation-summary-errors li {
        list-style-type: none;
    }

/**********************************************************************************************************
**************************************** BUTTON & LINK STYLES *********************************************
**********************************************************************************************************/
.btn,
.hs-button /*Hubspot Form Styles*/ {
    border-radius: 2px;
    font-weight: 700;
    font-size: 1rem;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    line-height: 1.5rem;
    min-width: 140px;
    text-transform:uppercase;
}

    .btn.btn-small {
        min-width: initial;
    }

    .btn:focus {
        box-shadow: none; /*Overrides Bootstrap Outlines*/
    }

    /*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);
        color: var(--WhiteText);
        border: none;
        padding: 10px;
    }

    .btn.btn-search { /*Search Button*/
        height: 100%;
        padding: 0 60%;
        border-radius: 0px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

        .btn.btn-secondary:focus {
            color: var(--ActionClicked);
            border: 2px solid var(--ActionClicked);
            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);
            border: 2px solid var(--ActionAlert) !important;
            padding: 10px !important; /*Overrides Bootstrap*/
            margin-bottom: initial; /*Overrides Bootstrap*/
        }

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

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

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

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

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

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

        .btn.btn-white-secondary:hover {
            color: var(--WhiteText) !important;
            border: 2px solid var(--Neutral-100);
        }

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

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

        /*Secondary White Alert Button*/
        .btn.btn-white-secondary.alert {
            color: var(--WhiteText);
        }

            .btn.btn-white-secondary.alert:focus {
                color: var(--WhiteText);
                border: 2px solid var(--Neutral-100);
            }

            .btn.btn-white-secondary.alert:hover {
                color: var(--WhiteText);
                border: 2px solid var(--Neutral-100);
            }

        /*Disabled Secondary White*/
        .btn.btn-white-secondary.disabled,
        .btn.btn-white-secondary:disabled {
            background-color: initial;
            color: var(--Disabled);
            border: solid 1px var(--Disabled);
            cursor: default;
        }

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

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

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

        .btn.btn-tertiary:hover {
            color: var(--ActionHover);
            border: none;
            text-decoration: underline;
        }

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

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

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

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


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

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

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

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

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

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

    .card.card-actionable {
        background-color: var(--Neutral-100);
        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);
    font-size: 2.5rem;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 2.625rem;
    text-transform: uppercase;
}

h2, .h2 {
    color: var(--DarkText);
    font-size: 1.75rem;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 2.125rem;
}

h3, .h3 {
    color: var(--DarkText);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
}

h4, .h4, subtitle {
    color: var(--DarkText);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
}


.bodycopy,
p {
    color: var(--DarkText);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.bodycopy-large {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.875rem;
}

label,
.label {
    font-size: .87rem;
    font-weight: 700;
    line-height: 1rem;
}

.label-large {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
}

caption,
.caption {
    font-size: .75rem;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 1rem;
}

p.alert,
.alert {
    color: var(--AlertText) !important;
}

.field-validation-error{
    color: var(--AlertText);
    background: var(--AlertBG);
    padding: 5px 10px;
    border-radius: 5px;
    margin-top:2px;
    font-weight:700;
    font-size: .87rem;
}

/*******************************************************************************************************
************************************************* Cursor ***********************************************
*******************************************************************************************************/
.cursor-pointer {
    cursor: pointer;
}
/*******************************************************************************************************
************************************************* INPUTS ***********************************************
*******************************************************************************************************/

/*******************************
********** Text Boxes **********
*******************************/
/*Text Box*/
.text-box {
    display: flex;
    flex-direction: column;
    min-width: min-content;
}

    .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*/ {
        position: relative !important;
        top: 9px !important;
        background: var(--WhiteBG) !important;
        padding: 0 8px 0 8px !important;
        margin: 0 30px 0 10px !important;
        width: max-content !important;
        color: var(--Input) !important;
    }

        .text-box .label label { /*Prevents Double Styling*/
            position: initial !important;
            margin: initial !important;
            padding: initial !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 {
    margin-top: 26px;
}

    .search-box input[type="text"] {
        border: solid 1px var(--Action);
        margin-right: 0px;
        padding: 10px 15px;
        line-height: 35px;
        border-radius: 7px 0 0 7px
    }

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

    .search-box .btn.btn-search {
        border-radius: 0 7px 7px 0;
    }

    .search-box .ui-state-active,
    .search-box .ui-widget-content .ui-state-active,
    .search-box .ui-widget-header .ui-state-active {
        background: none !important;
        border: none !important;
    }
/*******************************
********** Check Boxes *********
*******************************/
/*Checkbox*/
input [type="checkbox"] {
    accent-color: var(--Action);
    border: solid 1px var(--Action);
    color: var(--Action);
}

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

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

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

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

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


/*******************************
********* Toggle Button ********
*******************************/
.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--Neutral-600);
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }

        .toggle .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%
        }

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

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

    .toggle input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }



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

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

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

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

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

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

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

/*Dropdown*/
.dropdown,
.hs-form-field:has(select) /*HubSpot Form Styles*/ {
    display: flex;
    flex-direction: column;
    width: max-content;
    z-index: 2;
}

    .dropdown select,
    .hs-form-field select /*HubSpot Form Styles*/ {
        color: var(--PlaceholderText);
        padding: 18px;
        border: solid 1px var(--Input);
        border-radius: 5px;
    }

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

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

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

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

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

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

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

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

    /*Dropdown Label*/
    .dropdown label,
    .dropdown .label,
    .hs-form-field:has(select) label /*HubSpot Form Styles*/ {
        position: relative;
        top: 9px;
        background: var(--WhiteBG);
        padding: 0 8px 0 8px;
        margin: 0 30px 0 10px;
        width: max-content;
        color: var(--Input);
    }

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

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

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

    .dropdown .label label { /*Prevents Double Styling*/
        position: initial !important;
        margin: initial !important;
        padding: initial !important;
    }

/*Bullets*/
/*No Decoration*/
ul li.text-decoration-none,
ul.text-decoration-none li {
    display: block;
    text-decoration: none;
}


/***************************************************************************************
*************************************** Tables *****************************************
***************************************************************************************/

table tr:nth-child(2n+2) {
    background-color: var(--Neutral-150);
}

table td:first-child{
    padding-left:10px;
}

table td:last-child{
    padding-right:10px;
}

table td{
    padding-top: 5px;
    padding-bottom: 5px;
}

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

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

.modal-content {
    margin: 50px;
    width: calc(100% - 100px);
    height: 90%;
}


/***************************************************************************************
************************************* iFrame *******************************************
***************************************************************************************/
.iframe-wrapper iframe {
    min-height: 100vh;
}

/***************************************************************************************
************************************** Lists *******************************************
***************************************************************************************/
ul {
    padding: 0 0 0 36px;
}
.topic-block ul,
.topic-page ul,
.post-body ul,{
    margin: 12px 0;
    list-style: disc;
}

.topic-block ol,
.topic-page ol,
.post-body ol {
    margin: 12px 0;
    padding: 0 0 0 36px;
    list-style: decimal;
}

.list-unstyled {
    list-style-type: none;
}

/***************************************************************************************
 ********************************* Item Specific CSS ***********************************
 **************************************************************************************/

/*Floating Side Nav*/
#floatingSideNav {
    position: fixed;
    right: 0;
    bottom: 166px;
    z-index: 2000;
}

/*Footer Links Arrows*/
.footer li a::after {
    content: url(\images\Website-Arrow-Down-White.png);
    transform: rotate(-90deg);
    display: inline-block;
}

/*Checkout Progress Tracker*/
.active-step div div {
    border: solid 2px var(--Action);
    border-radius: 100px;
    background-color: var(--Action);
    height: 90px;
    width: 90px;
}

.inactive-step div div {
    border: solid 2px var(--Action);
    border-radius: 100px;
    height: 90px;
    width: 90px;
}

.active-step img,
.inactive-step img {
    position: relative;
    top: 11px;
    left: 15px;
}

.inactive-step + .checkout-progress-line {
    border-bottom: solid 1px var(--Neutral-300);
    min-width: 30px;
    flex-grow: 1;
    margin-bottom: 70px;
}

.active-step + .checkout-progress-line {
    border-bottom: solid 2px var(--Neutral-800);
    min-width: 30px;
    flex-grow: 1;
    margin-bottom: 70px;
}

/*Filters Mobile Collapse*/
.navBlock .card {
    display: none;
}

/*Elementor Spacing*/
.fullBleed .elementor-container {
    margin-left: 6rem;
    margin-right: 6rem;
}

.elementor-heading-title {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.elementor-widget-container {
    margin-left: 2rem;
    margin-right: 2rem;
}

/*Search Category Dropdown*/
.dropdown.search-category-container {
    float: left;
    min-width: 50px;
    border: none;
    background-color: #eaeaea;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    min-height: 45px;
}

.dropdown .search-category-content {
    width: min-content;
    padding: 16px 10px 0px 15px;
    color: var(--Gray-400);
    text-align: center;
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    line-height: 37px;
}

/*My Project Lists*/
.mylists-content .collapse {
    display: block !important;
}


.myprojects {
    min-height: 50px;
    margin: auto;
    text-align: left;
}

    .myprojects .title {
        position: relative;
        border-bottom: 1px solid var(--Gray-500);
        background: var(--Action);
        padding: 12px 30px 12px 10px;
        font-size: 20px;
        color: var(--White);
    }

        .myprojects .title .edit-icon {
            display: inline-block;
        }

            .myprojects .title .edit-icon .icon {
                background: url(/themes/B2B-Atomic/content/images/edit-white.png) no-repeat;
                width: 12px;
                height: 12px;
                float: right;
                margin-left: 5px;
                margin-top: 5px;
            }

        .myprojects .title strong {
            font-weight: normal;
        }

    .myprojects .listGroup-header.sticky {
        position: fixed;
        top: 0;
        z-index: 1;
        padding: 10px;
        background-color: var(--White);
        border-bottom: 1px solid var(--Gray-500);
    }

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

    .myprojects .sub-title {
        position: relative;
        padding: 12px 30px 12px 10px;
        font-size: 16px;
        color: #060606;
    }

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

        .myprojects .sub-title strong {
            line-height: 26px;
            padding-left: 10px;
        }

        .myprojects .sub-title span.list-item-count {
            font-size: 12px;
            text-transform: lowercase;
            padding-left: 10px;
        }

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


    .myprojects .project.expand-collapse {
        width: 40px;
        height: 25px;
        cursor: pointer;
        float: right;
        display: inline-block;
    }

        .myprojects .project.expand-collapse .no-lists {
            margin-left: 40%;
        }

        .myprojects .project.expand-collapse .collapse,
        .myprojects .project.expand-collapse .expand {
            display: block;
            float: right;
            margin-right: -54px;
            margin-top: -35px;
            background-image: url('../images/toggle-single-white.png');
            background-position: 5px 10px;
            height: 50px;
            width: 50px;
            background-repeat: no-repeat;
            border-left: 1px solid var(--White);
        }

    .myprojects .list.expand-collapse .collapse,
    .myprojects .list.expand-collapse .expand {
        float: right;
        margin-right: -20px;
        margin-top: -22px;
        background-image: url('../themes/B2B-Atomic/content/images/toggle-single-black.png');
        height: 40px;
        width: 40px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .myprojects .project.expand-collapse .expand {
        transform: rotate(180deg);
        background-position: 10px 10px;
        margin-top: -38px;
        /* margin-left: -15px; */
        margin-right: -54px;
        border-right: 1px solid var(--White);
        border-left: 0px;
    }

    .myprojects .list.expand-collapse .expand {
        transform: rotate(180deg);
        margin-top: -40px;
    }


.list-expand-collapse {
    position: relative;
    top: -11px;
    left: -26px;
}

.myprojects .expand-collapse img {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

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

.myprojects .mylist-items .button-pane input {
    margin-right: 23px;
}

    .myprojects .mylist-items .button-pane input:first-child {
        margin-right: -18px;
    }

.myprojects .tool-menu .tool-menu-options {
    right: 15px;
}

    .myprojects .tool-menu .tool-menu-options li {
        color: var(--Gray-400);
        text-decoration: none;
        cursor: pointer;
    }

        .myprojects .tool-menu .tool-menu-options li:nth-child(n+2) {
            margin-top: 10px;
        }

.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 {
    display: inline-block;
    float: right;
}

.tool-menu-icon {
    background: url('../themes/B2B-Atomic/content/images/dashboard-options-icon.png') no-repeat center;
    height: 16px;
    width: 20px;
    cursor: pointer;
    float: right;
    position: relative;
    right: -20px;
    top: -20px;
    background-size: contain;
}

.tool-menu-icon-white {
    background: url('../themes/B2B-Atomic/content/images/dashboard-options-icon-white.png') no-repeat center;
    height: 16px;
    width: 20px;
    cursor: pointer;
    float: right;
    position: relative;
    right: 25px;
    top: -20px;
    background-size: contain;
}

.tool-menu-options {
    display: none;
    float: right;
    position: absolute;
    border: 1px solid var(--Gray-500);
    padding: 10px;
    background-color: var(--White);
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
}

.mylist-items .table-wrapper {
    width: 100%;
}

.hidden-column {
    display: none;
}

#view-detail-modal {
    overflow-y: hidden;
}

    #view-detail-modal .modal-content {
        margin-top: 80px;
    }


.text-input-view-icon {
    background: url(/themes/B2B-Atomic/content/images/edit.png) no-repeat;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    margin-top: 5px;
}

/*Cart*/
.shopping-cart-page .item-box div:nth-child(2) {
    border-top: none !important;
}

/*My Account Quick Links*/
.dropdown-menu-arrow {
    top: -25px;
    left: 50%;
    width: 0;
    height: 0;
    position: relative;
}

.dropdown-header-between {
    background: var(--Primary-500);
    margin-top: -10px;
    padding-top: 7px;
}

/*Homepage Account Cards*/
.homepage-account-cards {
    margin-top: -203px;
}

    .homepage-account-cards .card {
        min-height: min-content;
    }

/*Browse & Search Images*/
. .picture img {
    max-width: 250px;
    max-height: 230px;
}

/*PDP Image Zoom*/
/* Compatibility styles for frameworks like bootstrap, foundation e.t.c */
.xzoom-source img, .xzoom-preview img, .xzoom-lens img {
    display: block;
    max-width: none;
    max-height: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
/* --------------- */

/********* xZoom Styles below ***********/
.xzoom-container {
    display: inline-block;
}

.xzoom-thumbs {
    text-align: center;
    margin-bottom: 10px;
}

.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);
}

/* Thumbs */
.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
    border: 1px solid #cecece;
    margin-left: 5px;
    margin-bottom: 10px;
}

.xzoom-source, .xzoom-hidden {
    display: block;
    position: static;
    float: none;
    clear: both;
}

/* Everything out of border is hidden */
.xzoom-hidden {
    overflow: hidden;
}

/* 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);
    width: 48px;
    height: 48px;
}

/* 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;
}

/* Caption */
.xzoom-caption {
    position: absolute;
    bottom: -43px;
    left: 0;
    background: #000;
    width: 100%;
    text-align: left;
}

    .xzoom-caption span {
        color: #fff;
        font-family: Arial, sans-serif;
        display: block;
        font-size: 0.75em;
        font-weight: bold;
        padding: 10px;
    }

.gallery {
    max-height: 400px;
    width: 305px;
}

    .gallery .picture {
        width: auto;
    }

    .gallery .picture-wrapper {
        margin: 0 0 10px;
    }

    .gallery .picture {
        position: relative;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

        .gallery .picture:before {
            content: "";
            display: block;
            padding-top: 100%;
        }

        .gallery .picture img,
        .gallery .picture-thumbs img,
        .variant-picture img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            max-width: 100%;
            max-height: 100%;
            margin: auto;
            box-shadow:none;
        }

    .gallery .picture-thumbs {
        overflow: hidden;
        font-size: 0;
    }

        .gallery .picture-thumbs a {
            display: inline-block;
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 5px 10px;
            overflow: hidden;
        }

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

    .xzoom-preview{ /*Prevents qty selectors from showing over preivew*/
        z-index:3;
    }


/********** Flyout Cart ***************/
#flyout-cart-wrapper .item:last-child {
    border: none !important;
}
/*********** Add To Card Toast *****************/
.flyout-add-confirmation {
    right: 0;
    z-index: 1;
    width: 300px;
    background-color: var(--WhiteBG);
    color: var(--Neutral-500);
}
    .flyout-add-confirmation.active

{
    display: block;
}

.cart-add-confirmation {
    position: fixed;
    z-index: 3;
    background-color: var(--White);
    top: 0;
    right: 55px;
    width: 300px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

    .cart-add-confirmation .message {
        font-size: 20px;
        text-align: center;
    }

    .cart-add-confirmation .detail:first-child {
        border-top: 1px solid var(--Gray-500);
    }

    .cart-add-confirmation .detail {
        border-bottom: 1px solid var(--Gray-500);
        margin: 10px 0;
        padding: 5px 0;
    }

    .cart-add-confirmation .picture {
        float: left;
        width: 70px;
        text-align: center;
    }

        .cart-add-confirmation .picture a {
            display: block;
            position: relative;
            overflow: hidden;
        }

            .cart-add-confirmation .picture a:before {
                content: "";
                display: block;
                padding-top: 100%;
            }

        .cart-add-confirmation .picture img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            max-width: 100%;
        }

        .cart-add-confirmation .picture + .product {
            margin: 0 0 0 80px;
            padding: 15px;
            padding-left: 0px;
            text-align: left;
        }

    .cart-add-confirmation .name {
        margin: 0 0 10px;
        font-size: 14px;
        font-weight: 700;
    }

        .cart-add-confirmation .name a {
            color: var(--Action);
        }

            .cart-add-confirmation .name a:hover {
                color: var(--ActionHover);
            }



    .cart-add-confirmation input[type="button"] {
        height: 50px;
        border: none;
        background-color: var(--Action);
        font-size: 15px;
        color: var(--White);
        text-transform: uppercase;
        min-width: 240px;
        margin-top: 7px;
    }

        .cart-add-confirmation input[type="button"]:hover {
            background-color: var(--ActionHover);
        }

}
/***********Mobile Mega Menu**********/
.header-menu {
    position: relative
}

.mobile-mega-menu {
    position: absolute;
    top: 165px;
    z-index: 10;
}

.menu .with-subcategories {
    width: 100%;
}

.menu .submenu {
    position: relative;
}

.top-menu.mobile .h3 {
    color: var(--Action);
}

    .top-menu.mobile .h3:hover {
        color: var(--ActionHover);
    }

    .top-menu.mobile .h3:focus {
        color: var(--ActionClicked);
    }

/*Mobile Hamburger Menu Animation*/

body {
    margin: 0;
}

:root {
    --bar-width: 30px;
    --bar-height: 5px;
    --hamburger-gap: 4px;
    --foreground: var(--Neutral-100);
    --background: var(--Neutral-100);
    --hamburger-margin: 0px;
    --mega-menu-animation-timing: 600ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    cursor: pointer;
}

    .hamburger-menu:has(input:checked) {
        --foreground: var(--Neutral-100);
        --background: var(--Neutral-100);
    }

    .hamburger-menu:has(input:focus-visible)::before,
    .hamburger-menu:has(input:focus-visible)::after,
    .hamburger-menu input:focus-visible {
        border: 1px solid var(--background);
        box-shadow: 0 0 0 1px var(--foreground);
    }

    .hamburger-menu::before,
    .hamburger-menu::after,
    .hamburger-menu input {
        content: "";
        width: var(--bar-width);
        height: var(--bar-height);
        background-color: var(--foreground);
        border-radius: 9999px;
        transform-origin: left center;
        transition: opacity var(--mega-menuanimation-timing), width var(--mega-menuanimation-timing), rotate var(--mega-menu-animation-timing), translate var(--mega-menu-animation-timing), background-color var(--meag-menu-animation-timing);
    }

    .hamburger-menu input {
        appearance: none;
        padding: 0;
        margin: 0;
        outline: none;
        pointer-events: none;
    }

    .hamburger-menu:has(input:checked)::before {
        rotate: 45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / -2);
    }

    .hamburger-menu:has(input:checked)::after {
        rotate: -45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height) / 2);
    }

    .hamburger-menu input:checked {
        opacity: 0;
        width: 0;
    }

.top-menu.mobile {
    position: absolute;
    top: 240px;
    transition: translate var(--mega-menu-animation-timing);
    translate: 0 -200%;
    padding: 0.5rem 1rem;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    background-color: var(--foreground);
    color: var(--background);
}

.hamburger-menu:has(input:checked) + .top-menu.mobile {
    translate: 0 0;
}


/*hubspot misc styles*/
label.hs-error-msg {
    font-weight: 400;
    top: 0 !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
}

.hs-button {
    color: var(--WhiteText) !important;
}


/*Gated Menu Indicator*/
.gated-indicator img {
    max-width: 10px;
}


/*Collapse/Expand Facet Filters*/
.active:not(.show) {
    display: block !important;
}

.inactive:not(.show) {
    display: none !important;
}

/*Footer*/
.page,
.center-1 {
    min-height: calc(100vh - 425px); /*Keeps Footer At Bottom*/
}

.page .page,
.center-1 .page {
    min-height: 0px; /*Keeps Secondary Page classes from pushing content down*/
}

/*Blog List*/

.master-column-wrapper:has(.blog-page) {
    display: flex;
    flex-direction: row;
}

.side-2:has(.blog-categories) {
    width: 10%;
    min-width: 300px;
    margin: 0 20px 0 50px;
}

.center-2:has(.blog-page) {
    max-width: calc(90% - 300px);
}

.blog-page .pager li {
    margin: 0 2px 0 2px;
}


/**Inbox Tab Override*/

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background-color: white !important;
    border: solid 1px var(--Neutral-300) !important;
    border-bottom: none !important;
}


/**Homepage Background Color*/
.homepageSignedIn:has(homepageSignedIn) {
    background-color: var(--Neutral-200);
}


/*Elementor Topics*/
.master-wrapper-content.fullBleed {
    width: 100%;
}

.fullBleed .topic-page .page-body {
    padding: 0px;
}

.fullBleed .header-menu {
    margin-bottom: 0px;
}

.parallax {
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: inset 0 0 15px var(--Gray-400) !important;
}

.desktop-header,
.mobile-header {
    min-height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}

    .desktop-header h1,
    .mobile-header h1 {
        padding: 70px 20px;
        text-shadow: 0 0 3px #dfdede;
    }

/*Corp Managment*/
.form-control {
    height: initial !important;
}

/*Gates Configurator*/
#gates-results-table .picture img {
    max-height: 200px
}

/*Rockwell PDP Lifecycle Status*/
.product-lifecycle-status-container {
    border: solid 1px var(--Neutral-400);
    padding: 20px;
    height: 43px;
    border-radius: 4px;
}

    .product-lifecycle-status-container span {
        background-color: var(--WhiteBG);
        margin-top: -26px;
        display: block;
        width: min-content;
        margin-left: -4px;
    }

/*Account Team Dashboard Card*/
.account-team-item img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 4px;
}


/*Notification Toast*/
.bar-notification {
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.2);
}

    .bar-notification.success {
        background-color: var(--SuccessBG);
        color: var(--SuccessText);
    }

        .bar-notification.success p {
            margin: 0px;
            padding: 15px;
        }

    .bar-notification.error {
        background-color: var(--AlertBG);
        color: var(--AlertText);
    }

        .bar-notification.error p {
            margin: 0px;
            padding: 15px;
        }

    .bar-notification .close {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        margin: 7px;
        background: url('../images/close-black.png') center no-repeat;
        cursor: pointer;
    }

/***Desktop Mega Menu***/

.submenu {
    z-index:3;
}