/*--- GENERAL STYLES -------------------------------------------------------------------------------------------------*/

    body {
        margin: 0;
    }

    .displayHidden {
        display: none!important;
    }

    .achornImageHeader img {
        width: 100%;
        top: -350px;
        position: relative;
    }

    /*--- ERROR MANAGEMENT -------------------------------------------------------------------------------------------*/

        .statusMessage {
            padding: 1rem;
            border-left: 10px solid;
            margin-top: 0rem!important;
            margin-bottom: 2rem!important;
            display: flex;
            align-items: center;
        }
        .statusMessage svg {
            width: 24px;
            height: 24px;
            margin-right: 0.5rem;
        }

        .fatalError {
            background-color: #ffc2c2;
            border-color: #f13939;
        }
        .fatalError svg path {
            fill: #f13939;
        }

        .alertError {
            background-color: #ffe8bd;
            border-color: #F48021;
        }
        .alertError svg path {
            fill: #F48021;
        }

        .validMessage {
            background-color: #b9ebbd;
            border-color: #5cbf64;
        }
        .validMessage svg path {
            fill: #5cbf64;
        }


        .fieldErrorMessage {
            font-size: 14px;
            margin-top: 0;
            color: red;
            font-weight: 600;
        }
        .fieldError {
            border: 1px solid red!important;
        }

    /*--- DATEPICKER -------------------------------------------------------------------------------------------------*/

    .fullScreenPopover > #ui-datepicker-div {
        position: relative!important;
        height: auto;
        /*top: 25%!important;*/
        bottom: 0!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;


        min-width: 500px!important;
        max-width: 1000px!important;
        width: 50%!important;
        background-color: white;
        border: none!important;
        padding: 2rem!important;
        border-radius: 10px!important;
        box-shadow: 0 0.75rem 1.5rem rgba(18, 63, 25, 0.03)!important;
    }

    .ui-datepicker td {
        text-align: center!important;
        /*padding: 0.25rem!important;*/
        /*background-color: red;*/
        /*margin: 0.25rem;*/
    }

    /*.ui-datepicker td a::after {*/
    /*    content: " ";*/
    /*    content: " ";*/
    /*    color: blue;*/
    /*    background: red;*/
    /*    width: 1rem;*/
    /*    height: 1rem;*/
    /*    display: block;*/
    /*    position: absolute;*/
    /*    padding: 1rem;*/
    /*    border-radius: 100%;*/
    /*}*/

    .ui-datepicker td span, .ui-datepicker td a {
        text-align: center!important;
        padding: 1.3rem!important;
        width: 100%;
        height: auto;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
        font-weight: normal;
    }

    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
        font-weight: bold!important;
    }


    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
        font-weight: bold!important;
    }

    .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 {
        font-weight: bold!important;
    }

    .ui-widget-content {
        color: #666666!important;
    }

    .ui-datepicker th {
        padding: 1.7em .3em!important;
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: relative!important;
        top: 0!important;
        /*width: max-content!important;*/
        /*height: max-content!important;*/
    }

    .ui-datepicker-prev span, .ui-datepicker-next span {
        background-image: none !important;
    }
    /*//this the width of the icon. increase it if your icon is bigger*/
    .ui-datepicker-prev span.ui-icon {
        width: auto;
        height: auto;
        display: block;
        text-indent: 0;
        overflow: hidden;
        background-repeat: no-repeat;
    }

    /* ORDER OF DATEPICKER */
    .ui-datepicker-prev {order: 1;}
    .ui-datepicker-title {order: 2;}
    .ui-datepicker-next {order: 3;}

    .ui-datepicker-prev, .ui-datepicker-next {
        position: relative;
        /*width: max-content;*/
        /*height: max-content;*/
        display: block;
        cursor: pointer!important;
    }

    .ui-datepicker-prev {
        content: url("icons/jq-arrow-left-1.svg");
        margin-right: 2rem;
    }
    .ui-datepicker-next {
        content: url("icons/jq-arrow-right-1.svg");
        margin-left: 2rem;
    }

    .ui-datepicker-prev, .ui-datepicker-next {
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-height: 2.25rem !important;
        min-width: 2.25rem !important;
        padding: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;

        background-color: white;
        border: 1px solid #EEEEEE;
    }

    .ui-datepicker-prev:hover {
        color: #fff;
    }

    .ui-datepicker-prev:hover, .ui-datepicker-next:hover {
        background-color: #f3f3f3!important;
        border: 1px solid #b4b4b4 !important;
    }

    .ui-datepicker .ui-icon {
        display: none!important;
    }

    .ui-datepicker-header {
        position: absolute!important;
        width: 100% !important;
        top: 0!important;
        left: 0!important;
        padding: 1rem 2rem 1rem 2rem!important;
    }
    .ui-datepicker-header:before {
        content: none!important;
    }

    .ui-helper-clearfix::before, .ui-helper-clearfix::after {
        content: none!important;
    }

    .ui-widget-header, .ui-datepicker-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .ui-datepicker-calendar {
        margin-top: 3rem !important;
        position: relative;
    }

    .ui-datepicker-prev, .ui-datepicker-next {
        position: relative!important;
        right: 0!important;
        min-width: 30px;
        min-height: 30px;
    }

    .ui-datepicker-header {
        background: #fff!important;
        box-shadow: 0 0.15rem 0.75rem rgb(18 63 25 / 0.075);
        border: none!important;
        border-top-right-radius: 10px!important;
        border-top-left-radius: 10px!important;
        border-bottom-right-radius: 0!important;
        border-bottom-left-radius: 0!important;
    }

    .ui-datepicker-title {
        width: 100%!important;
        display: flex!important;
        justify-content: space-between!important;
        flex-wrap: wrap!important;
        margin: 0 0rem!important;
        max-height: 2.25rem!important;
    }

    .ui-datepicker-title select {
        margin: 0!important;
        font-size: 0.9rem!important;
        width: 47.5% !important;
        padding: 8px 20px !important;
        /*margin: 8px 0!important;*/
        display: inline-block!important;
        border: 1px solid #ccc!important;
        border-radius: 4px!important;
        box-sizing: border-box!important;
        color: #888888!important;
        font-weight: 500!important;
        cursor: pointer!important;
    }

    .ui-datepicker-title select:hover {
        background-color: #f3f3f3!important;
        border: 1px solid #b4b4b4 !important;
        color: #4b4b4b!important;
    }

    .ui-datepicker input[type="text"], .ui-datepicker input[type="password"], .ui-datepicker input[type="date"], .ui-datepicker input[type="number"], .ui-datepicker select {
        display: block!important;
    }

    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
        position: relative!important;
    }














    /*--- TYPOGRAPHY -------------------------------------------------------------------------------------------------*/



    @font-face {
        font-family: "Avenir LT Std", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-variation-settings:
                "wdth" 100;
    }

    @font-face {
        font-family: "Avenir Next LT Pro", serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        font-variation-settings:
                "wdth" 100;
    }



    @font-face {
        font-family: "Avenir Next LT Pro", serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        font-variation-settings:
                "wdth" 100;
    }


    @font-face {
        font-family: "Avenir Next LT Pro", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
                "wdth" 100;
    }

    @font-face {
        font-family: "Avenir Next LT Pro", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: italic;
        font-variation-settings:
                "wdth" 100;
    }



        body {
            font-family: 'Avenir Next LT Pro', 'Roboto', sans-serif;
            font-weight: 500;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Avenir LT Std', sans-serif;
            font-weight: normal;
        }

        .main-container h1, h2, h3, h4, h5, h6 {
            margin: 0px;
            margin-bottom: 1rem;
        }

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

/*rgba(0, 0, 0, 0.25) 0rem 0rem 0.375rem 0.00005rem inset*/


    /*--- SHADOWS ----------------------------------------------------------------------------------------------------*/

        /*.softShadowApply {*/
        /*    box-shadow: 0 0.75rem 1.5rem rgba(18, 63, 25, 0.03);*/
        /*}*/

        /*.hardShadowApply {*/
        /*    box-shadow: 0 0.15rem 0.75rem rgb(18 63 25 / 0.075);*/
        /*}*/

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


    /*--- BORDER RADIUS ----------------------------------------------------------------------------------------------*/

        .borderRadiusStepThree {
            border-radius: 10px;
        }

        .borderRadiusTopStepThree {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

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


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


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

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    display: block;
    /*visibility: hidden;*/
    /*display: none!important;*/
}

.copyrightBanner {
    background-color: #1B1B1B;
    width: 100%;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.footerNav {
    width: 100%;
    padding: 45px 25px;
    font-size: 16px;
    color: white;
    background-color: #F58220;
}

.footerNavList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footerNavList a {
    color: #fff!important;
}

.footerNav .footerLogo {
    width: 150px;
    margin-bottom: 30px;
}

.inventoryIconInner svg {
    width: 100%!important;
    height: 100%!important;
}


.footerLogo {
    width: 150px;
    display: inline-flex;
}

.footerLogo img {
    width: 100%;
    height: 100%;
}

.footerNav h4 {
    /*color: #1b1b1b;*/
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.footerNav .navContainerFooter {
    flex-direction: column;
    width: max-content;
}

.footerFlexBox {
    display: flex;
    gap: 5rem;
}

@media (max-width: 550px) {
    .footerFlexBox {
        flex-wrap: wrap;
    }
}

@media (max-width: 350px) {
    .footerFlexBox {
        gap: 2rem;
        flex-direction: column;
    }
}

/*--- FORMS ----------------------------------------------------------------------------------------------------------*/

    /*--- STANDARD FORM ----------------------------------------------------------------------------------------------*/

    .standardForm {
        display: flex;
        flex-direction: column;
    }

    .standardForm .input-group {
        margin-bottom: 1rem;
        width: 100%;
        text-align: left;
    }

    .standardForm > .rememberMeGroup {
        margin-bottom: 0.5rem!important;
    }

    .standardForm > .input-group-v {
        display: flex;
        flex-direction: column;
    }

    .standardForm > .input-group-h {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .standardForm label  {
        /*margin-bottom: 0px;*/
        font-size: 0.9rem;
        color: #BBBBBB;
    }

    .standardForm input:focus + label  {
        /*margin-bottom: 0px;*/
        font-size: 0.9rem;
    }

    .standardForm input::placeholder {
        color: #BBBBBB;
        font-weight: 500;
    }



    input[type=checkbox] {
        margin: 5px 0px;
    }

    .standardForm > .input-group-h > label {
        margin-left: 5px;
    }

    #card-element {
        tab-index: 0!important;
    }

    input[type=text],
    input[type=password],
    input[type=date],
    input[type=number],
    input[type=email],
    #card-element,
    select {
        font-size: 0.9rem;
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        color: #888888;
        font-weight: 500;
    }

    /* Standard input focus mode */
    input[type=text]:focus,
    input[type=password]:focus,
    input[type=date]:focus,
    input[type=number]:focus,
    input[type=email]:focus,
    #card-element:focus,
    .StripeElement--focus,
    select:focus,
    .outerButton:focus {
        outline: 2px solid;
        -moz-outline-radius: 5px;
        outline-offset: -1.5px;
        -moz-outline-style: solid;
        /*font-weight: 600;*/
    }

    /* Indent on items with a leading icon */
    .inputTest input {
        text-indent: 30px;
    }

    .inputTest select {
        text-indent: 13px;
    }

    .inputTestNoIndent input, .inputTestNoIndent select  {
        text-indent: 0;
    }


    input[type=date], .noIndent select {
        text-indent: 0!important;
    }

    select {
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        appearance:none;
    }

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

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



.invisible {
    display: none;
    flex-direction: column;
}

.formInputContainer {
    min-width: 500px;
    max-width: 1000px;
    width: 50%;
    text-align: center;
    margin: 0 auto;
    background-color: white;
    /* padding: 25px; */
    margin-top: 25px;
}




.popupFormContainer {
    min-width: 500px;
    max-width: 1000px;
    width: 50%;
    text-align: left;
    margin: 0 auto;
    background-color: white;
    /* padding: 25px; */
    margin-top: 25px;
    margin-top: 50px;
    /*overflow: hidden;*/
}

.addNewItemFullscreenPopover {
    position: fixed;
    display: flex!important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    visibility: hidden;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

#modalItemOverflow {
    z-index: 11111;
}








.addItemPopupTriggerButton {
    width: 75px;
    background: linear-gradient(-155deg, rgba(248,175,47,1) 0%, rgba(244,128,33,1) 100%);
    height: 75px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: white;
    box-shadow: 0 0.25rem 3rem rgb(63 30 18 / 20%) !important;
    font-size: 3rem;
    line-height: 2rem;

    position: fixed;
    bottom: 2rem;
    /* right: 0; */
    margin: 0 auto;
    right: 2rem;
    z-index: 300;
    border: 4px solid;
}

.addItemPopupTriggerButton span {
    width: 50%;
    height: 50%;
}

.addItemPopupTriggerButton {
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    width: max-content;
    cursor: pointer;
    margin-top: 7rem;
    position: relative;
}

.addItemPopupTriggerButton span {
    width: max-content;
    height: max-content;
}


@media (min-width: 650px) {

    .addItemPopupTriggerButton {
        right: 0;
        font-size: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;

        height: max-content;
        cursor: pointer;
        transition: all 300ms ease-in-out;
    }

    .addItemPopupTriggerButton span {
        /*margin-left: 1rem;*/
        margin-right: 0.5rem;
    }

    .addItemPopupTriggerButton h6 {
        margin: 0;
        /*margin-right: 1rem;*/
    }

    .addItemPopupTriggerButton:hover {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .addItemPopupTriggerButton:hover h6 {
        text-decoration: underline;
    }
}


@media (max-width: 650px) {
    .addItemPopupTriggerButton h6 {
        display: none!important;
    }

    .addItemPopupTriggerButton {
        width: 75px;
        background: linear-gradient(-155deg, rgba(248,175,47,1) 0%, rgba(244,128,33,1) 100%);
        height: 75px;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        color: white;
        box-shadow: 0 0.25rem 3rem rgb(63 30 18 / 20%) !important;
        font-size: 3rem;
        line-height: 2rem;

        position: fixed;
        bottom: 2rem;
        /* right: 0; */
        margin: 0 auto;
        right: 2rem;
        z-index: 300;
        border: 4px solid;
    }

    .addItemPopupTriggerButton span {
        width: 50%;
        height: 50%;
    }
}








.popupFormContainerPadding {
    padding: 2rem;
}

.formInputContainerPadding {
    padding: 2rem;
}



.active {
    margin-bottom: 1rem;
}

#container {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    height: 100vh;
}

.adsbygoogle {
    display: none;
}

.main-container {
    min-width: 500px;
    max-width: 1000px;
    width: 50%;
    text-align: center;
    margin: 0 auto;
    /*padding: 25px;*/
    margin-top: 75px;
    margin-bottom: 25px;
    /*box-shadow: 0 0.75rem 1.5rem rgba(18, 63, 25, 0.03);*/
    border-radius: .375rem;
}


.no-padding {
    background-color: transparent;
}

.main-container-padding {
    padding: 2rem;
}




.forgotPasswordLink {
    display: block;
    font-size: 0.85rem;
}

.linkUnderButton {
    margin-top: 0.75rem;
    display: block;
    font-size: 0.9rem;
}

.linkResetPassword {
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    display: block;
    font-size: 0.9rem;
}



.firstParagraph {
    margin-top: 0;
}


button[type=submit],
.buttonClass {
    width: 100%;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.redButton {
    margin-top: 8px;
}

.redButtonSize {
    display: flex;
    width: max-content!important;
}


.alternateSubmitButton {
    width: 100%;
    padding: 12px 18px!important;
    margin: 8px 0;
    border-radius: 4px;
    cursor: pointer;
    /*background: rgb(63,187,53);*/
    /*background: linear-gradient(45deg, rgba(63,187,53,1) 0%, rgba(20,181,143,1) 100%);*/
}

button[type=submit]:hover,
.buttonClass:hover {
    font-weight: bold;
}



.mystyle {
    background-color: red;
}






.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

















.collapsible {
    margin-bottom: 0rem!important;
}

.active {
    margin-bottom: 1rem!important;
}

.inputTest {
    position: relative;
}







/*--- DASHBOARD ------------------------------------------------------------------------------------------------------*/

    /*--- SECTION HEADERS -*/

        .inventorySection {
            /*background-color: red;*/
            margin-bottom: 80px;
            margin-bottom: 4rem;
        }

        .sectionHeaderContainer {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 10px;
            padding-top: 10px;
            cursor: pointer;
            user-select:none;
        }

        .sectionHeaderContainer > h3 {
            margin-bottom: 0;
            font-size: 1.5rem;
        }

        .sectionHeaderContainer > .outerButton {
            position: relative;
            right: 0;
            margin-right: 10px;
        }

    /*--- INVENTORY ITEM ---------------------------------------------------------------------------------------------*/

        .inventoryItem {
            background-color: #FFFFFF;
            height: 70px;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            box-shadow: 0px 10px 40px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
            border-radius: 10px;
        }

        #changeCardSizeButton {
            right: 0!important;
        }

        .inventoryItemTall {
            height: max-content!important;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            margin-bottom: 1rem;
            border-radius: 10px;
        }



        .inventoryItemTall .inventoryIcon {
            position: absolute;
            height: 100% !important;
            margin-right: 0;
            min-width: 0!important;
        }

        .inventoryItemTall .inventoryItemLabelData {
            min-width: 0!important;
            text-align: left!important;
            gap: 0.5rem!important;
            align-items: flex-start;
        }

        .inventoryItemTall .inventoryItemCreationContainer {
            align-items: center;
            gap: 0.35rem;
            display: flex;
        }
        .inventoryItemTall .inventoryItemExpirationContainer {
            align-items: center;
            gap: 0.35rem;
            display: flex;
        }
        .inventoryItemTall .inventoryItemCreationContainer .inventoryItemCreationLabel,
        .inventoryItemTall .inventoryItemExpirationContainer .inventoryItemExpirationLabel {
            margin: 0!important;
        }
        .inventoryItemTall .inventoryItemCreationContainer .innerIcon svg path,
        .inventoryItemTall .inventoryItemExpirationContainer .innerIcon svg path {
            fill: #535353;
        }

        .inventoryItemTall .inventoryItemCategory,
        .inventoryItemTall .inventoryItemLocation {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.25rem;
        }

        .inventoryItemTall .inventoryItemLabelData .innerIcon svg path {
            fill: #6F6F6F;
        }

        .inventoryItemTall .innerIcon {
            width: 24px;
            height: 24px;
        }

        .inventoryItemTall .inventoryItemLabelData::before,
        .inventoryItemExpirationLabel::before {
            content: none!important;
        }

        .inventoryItemTall .inventoryItemTextContainer {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            gap: 0.75rem;

            margin-left: 70px;
            padding: 1rem;
        }

        .inventoryItemTall .inventoryItemTextContainer > * {
            margin: 0!important;
        }

        @media (max-width: 650px) {
            .inventoryItemTall .inventoryItemCreationContainer {
                display: none!important;
            }
        }

        @media (max-width: 550px) {
            .inventoryItemTall .inventoryIcon {
                width: 50px!important;
            }

            .inventoryItemTall .inventoryItemTextContainer {
                margin-left: 50px!important;
            }

            .inventoryItemTall .inventoryItemLabelData {
                gap: 0.25rem!important;
            }
            .inventoryItemTall .inventoryItemTextContainer {
                gap: 0.45rem!important;
            }
        }

        @media (max-width: 300px) {
            .inventoryItemTall .inventoryIcon {
                width: 30px!important;
            }
            .inventoryItemTall .inventoryItemTextContainer {
                padding: 0.5rem!important;
                margin-left: 30px!important;
            }

            .inventoryItemTall .inventoryItemLabelData {
                gap: 0.25rem!important;
            }
            .inventoryItemTall .inventoryItemTextContainer {
                gap: 0.25rem!important;
            }
        }

        .inventoryItemTextContainer {
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        /* --- INVENTORY CATEGORY AND LABEL DEFINITIONS ---*/
        .inventoryItemLabelData > * {
            min-width: min-content;
            max-width: max-content;
            flex-grow: 1;
            flex-basis: calc(var(--multiplier) * 999);
        }

        .inventoryItemLabelData {
            display: flex;
            align-items: flex-end;
            flex-wrap: wrap;
            --multiplier: calc(40rem - 100%);
            gap: 5px;

            flex-basis: 30%;
            /* max-width: 200px; */
            width: max-content;
            min-width: 25%;
        }

        .inventoryItemLabelData {
            display: flex;



            flex-wrap: wrap;
            flex-flow: row wrap;

            width: max-content;
            margin: 0.5rem;
            margin-left: auto;
            text-align: right!important;
            justify-content: right;
        }


        .inventoryItemLabelData :nth-child(2) {
            flex-basis: 100%;
        }

        .inventoryItemLabelData::before {
            content: "";
            align-self: stretch;
            border: 1px solid #eee;
            /*max-width: 80%;*/
            /*max-height: 80%;*/
        }

        .inventoryItemCategory {
            order: -1;
        }

        @media (max-width: 900px) {
            .inventoryItemLabelData {
                flex-direction: column!important;
                /*align-items: center;*/
            }
        }

        @media (max-width: 650px) {
            .inventoryItemCreationLabel {
                display: none!important;
            }
        }
        @media (min-width: 650px) {
            .inventoryItemCreationLabel {
                display: block!important;
            }
        }











        .inventoryItem h4, .inventoryItem h3 {
            margin: 0;
        }

        /*#deleteItem {*/
        /*    margin-left: auto;*/
        /*}*/

        .inventoryItemExpirationLabel, .inventoryInfoSpacer, .inventoryItemLocation, .inventoryItemCategory {
            color: #6F6F6F;
        }

        .inventoryItemExpirationLabel {
            gap: 5px;
            display: flex;
            text-align: right;
            justify-content: space-between;
            min-width: 4rem;
        }


        .inventoryItemExpirationLabel::before {
            content: "";
            align-self: stretch;
            border: 1px solid #eee;
        }

        .inventoryItemCategory, .inventoryItemLocation {
            /*min-width: max-content;*/

            min-width: 50px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .inventoryName {
            color: #535353;
            font-weight: 500;
            text-align: left;
            flex-basis: 30%;

            /* Manage truncation */
            width: max-content;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .inventoryItemCreationLabel {
            /*display: none;*/
            width: max-content;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .inventoryItemCategory, .inventoryInfoSpacer, .inventoryItemLocation {
            margin: 0;
        }







        /*.inventoryItemExpirationLabel {*/
        /*    margin-right: ;*/
        /*}*/

        /*.inventoryItemCategory {*/
        /*    margin-left: auto;*/
        /*}*/
        .inventoryInfoSpacer {
            margin-left: 5px;
            margin-right: 5px;
        }

        .inventoryItem h3 {
            font-size: 24px;
        }

        .inventoryItem h4 {
            font-size: 18px;
            color: #6F6F6F;
            font-weight: 400;
        }

        .inventoryIcon {
            height: 70px;
            width: 70px;
            display: flex;
            min-width: 70px!important;
            justify-content: center;
            align-items: center;
            border-radius: 10px 0px 0px 10px;
            margin-right: 20px!important;

            max-width: 70px!important;
        }

        .inventoryIconInner {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 35px;
            max-height: 35px;
        }

        .noicon .inventoryIconInner, .noiconinner {
            max-width: 25px;
            max-height: 25px;
        }

        .inventoryIconInner svg path {
            fill: white!important;
        }

        .iconNoColor svg path {
            fill: #535353!important;
        }

        .inventoryIconInner {
            width: 100%;
        }

        /*.inventoryKebab {*/
        /*    height: 70px;*/
        /*    width: 70px;*/
        /*    background-color: #DB5C5C;*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    align-items: center;*/
        /*    border-radius: 10px 0px 0px 10px;*/
        /*}*/

        .inventoryAmount {
            margin: 0;
            margin-right: 10px!important;
            font-weight: 500;
        }

        .inventoryKebab {
            margin-left: 10px;
            margin-right: 10px;
        }

        .inventorySeparator {
            margin-left: 5px!important;
            margin-right: 5px!important;
        }

        .inventoryKebab > .trailingButton {
            right: 0;
        }

        .kebabLink {
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
        }

        .kebabLink svg {
            width: 16px;
            height: 16px;
            margin-right: 8px;
        }

        .kebabLink svg path {
            fill: #F48021;
        }

        .inventoryButton {
            position: relative!important;
            margin-left: auto;
        }

        .inventoryButton .innerIcon {
            width: 90% !important;
        }

        .inventoryButton {
            width: 35px!important;
            height: 35px!important;
        }

        .itemSort {
            margin-right: 0.5rem;
            min-width: 150px;
        }

        #changeUserLoadDirectionButton {
            margin-left: 0rem!important;
            margin-right: 0rem!important;
            right: 0!important;
        }

        .buttonGroupRight {
            margin-left: auto;
            display: flex;
            flex-direction: row;
        }

        .downloadButton button,
        .printButton button {
            padding: 0;
            background: transparent!important;
        }

        .floatRight {
            margin-left: auto!important;
        }

        .inventoryMetaData {
            display: none;
        }

        .expiredItem {
            font-weight: bold;
            color: #F48021;
        }

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

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


/*--- POP-UPS --------------------------------------------------------------------------------------------------------*/

    /*--- HEADER -----------------------------------------------------------------------------------------------------*/

    .popupHeaderBar {
        display: flex;
        background-color: #fff;
        /*margin-left: 2rem;*/
        /*margin-right: 2rem;*/
        padding: 1rem 2rem 1rem 2rem;
        position: relative;
    }

    .popupHeaderBar h2 {
        /*margin-left: 2rem;*/
        margin: 0;
        width: -webkit-calc((100% - 30px) - 2rem);
        width:    -moz-calc((100% - 30px) - 2rem);
        width:         calc((100% - 30px) - 2rem);
        text-align: left;
        font-size: 1.25rem;
        color: #666666;
    }

    .popupHeaderBar button {
        width: 100%;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .popupHeaderBar button:hover {
        font-weight: bold;
    }

    /*--- BODY -------------------------------------------------------------------------------------------------------*/


    .popupHeaderBar .trailingButton {
        right: 2rem;
    }

    .popupHeaderBar .outerButton {
        background-color: white;
        border: 1px solid #EEEEEE;
    }

    .popupHeaderBar .innerIcon, .trailingButton .innerIcon {
        width: 75%;
    }



    @media (min-width: 1000px) {
        .main-container {
            max-width: 1000px!important;
        }
    }
    @media (max-width: 1000px) {
        .main-container {
            max-width: none!important;
        }
    }

    .dd-search, .dd-button {
        display: none!important;
    }

/* Item Section Responsiveness */
    @media (max-width: 550px) {
        .dropdown-select .list ul {
            max-height: 100px!important;
            max-height: 25vh!important;
        }

        .popupFormContainer .standardForm .input-group {
            margin-bottom: 0.5rem!important;
        }

        .popupFormContainer {
            margin-left: 0!important;
            margin-right: 0!important;
            margin-top: 0!important;
            border-radius: 0!important;
            width: 100% !important;
            height: 100% !important;
        }



        .collapsibleSection .sectionHeaderContainer {
            border-bottom: 1px solid #F48021;
            margin-bottom: 15px;
        }

        .collapsibleSection .sectionHeaderContainer .outerButton {
            height: 24px!important;
            width: 24px!important;
        }

        .sectionHeaderContainer > h3 {
            font-size: 20px!important;
        }

        .autoDeleteExplain {
            font-size: 12px!important;
            margin-bottom: 15px!important;
        }

        .sectionHeaderContainer {
            margin-bottom: 1rem!important;
        }

        .inventorySection {
            margin-bottom: 1rem!important;
        }
    }

    @media (max-width: 300px) {
        .ui-datepicker td a {
            padding: 0.5rem!important;
        }
    }



/*thead {*/
/*    display: flex;*/
/*}*/
/*tbody {*/
/*    width: 100%;*/
/*    justify-content: space-between;*/
/*}*/
/*tbody tr {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*}*/

/*td {*/
/*    min-width: 12%;*/
/*}*/



    @media (max-width: 550px) {
        .ui-datepicker tbody {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .ui-datepicker thead {
            display: flex;
            width: 100%;
        }

        .ui-datepicker tbody tr {
            display: flex;
            justify-content: space-between;
        }

        .ui-datepicker tr td {
            min-width: 12%;
        }

        .ui-datepicker tr td span,
        .ui-datepicker tr td a {
            width: 100%!important;
        }

        .ui-datepicker thead tr {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .ui-datepicker-month, .ui-datepicker-year {
            background-color: #fff!important;
        }

        .ui-datepicker thead tr th {
            min-width: 12%;
            padding: 0.5rem 0.5rem!important;
        }

        .ui-datepicker .ui-datepicker-header {
            padding: 0.5rem 1rem!important;
        }

        .ui-datepicker-prev {
            margin-right: 1rem;
        }
        .ui-datepicker-next {
            margin-left: 1rem;
        }

    }

    @media (max-width: 550px) {

        .fullScreenPopover, .fullScreenEditPopover {
            /*justify-content: start!important;*/
        }

        .fullScreenPopover > #ui-datepicker-div {
            margin-top: 3rem;
        }

        .fullScreenPopover > #ui-datepicker-div {
            padding: 1rem!important;

            width: calc(100vw - 1rem)!important;
            min-width: calc(100vw - 1rem)!important;
            max-width: calc(100vw - 1rem)!important;
        }

        .popupFormContainerPadding {
            padding: 1rem;
        }

        .popupHeaderBar {
            padding: 0.5rem 1rem 0.5rem 1rem!important;
            justify-content: space-between!important;
            align-items: center!important;
        }

        .custom-dropdown {
            width: calc(100vw - 75px) !important;
        }

        /*.fullScreenPopover > #ui-datepicker-div {*/
        /*    width: calc(100vw - 1rem);*/
        /*}*/

        .ui-datepicker td a, .ui-datepicker td span {
            padding: 0.75rem!important;

            padding: 1rem 1rem!important;
            width: max-content;
        }

        .custom-dropdown-inner-container > .customClickableBox {
            height: 40px;
            width: 40px;
        }

        .popupHeaderBar h2 {
            font-size: 18px!important;
        }

        .standardForm label {
            font-size: 0.8rem;
        }

        .popupHeaderBar .trailingButton {
            right: 0!important;
            position: relative!important;
        }

        .main-container, .popupFormContainer, .formInputContainer {
            margin-left: 0.5rem!important;
            margin-right: 0.5rem!important;
        }
    }

    /* Item Input Responsiveness */
    @media (max-width: 450px) {
        .ui-datepicker td a, .ui-datepicker td span {
            padding: 0.75rem!important;

            padding: 0.5rem 0.5rem!important;
            width: max-content;
        }
    }

    /* Item Responsiveness */
    @media (max-width: 550px) {
        .inventoryItem {
            height: 50px;
            margin-bottom: 0.5rem;
            border-radius: 10px;
        }

        .inventoryIcon {
            height: 50px!important;
            width: 35px!important;
            min-width: 50px!important;
            border-radius: 10px 0px 0px 10px;
            margin-right: 0.5rem!important;
            max-width: 50px!important;
        }

        .inventoryIconInner {
            max-width: 25px!important;
            max-height: 25px!important;
        }

        .inventoryItem h3 {
            font-size: 16px;
        }
        /*p {*/
        /*    font-size: 12px;*/
        /*}*/
        .inventoryItemExpirationLabel, .inventoryItemCreationLabel {
            font-size: 14px;
        }


        .inventoryKebab .innerIcon svg {
            width: 100% !important;
            height: 100% !important;
        }

        .inventoryKebab {
            margin-left: 5px !important;
            margin-right: 5px !important;
        }

        .customClickableBox > .innerIcon {
            width: 25px !important;
            height: 25px !important;
        }
    }





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




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


/*--- BLOGS ----------------------------------------------------------------------------------------------------------*/

    .blogThumbnailContainer {
        width: 100%!important;
        max-width: none!important;
        padding-bottom: 0!important;
        max-height: 500px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin: -2rem -2rem 1.5rem;
        width: calc(100% + 4rem)!important;
        background-color: orange!important;

    }

    .blogThumbnail {
        max-width: 100%;
        height: auto;
        display: block;
        align-self: center;

        transition-duration: 0.3s;
    }

    .blogThumbnail:hover {
        opacity: 0.8!important;
        max-width: 110%!important;
        left: 5%;
    }
    .blogThumbnailNoLink:hover {
        opacity: 1!important;
        max-width: 100%!important;
        left: 0!important;
    }

    .blogPostContainer {
        text-align: left!important;
        color: #535353;
    }

    .blogThumbnailContainer {
    }



    .blogPostContainer ul {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .blogPostContainer li {
        margin-top: 1.5rem;
    }
    .blogPostContainer ul li:first-child {
        margin-top: 0rem!important;
    }


    .blogPostContainer p, .blogPostContainer li {
        font-size: 21px;
    }

    .blogPostContainer h1 {
        font-size: 32px;
    }

    .blogPostDateContainer {
        color: #6F6F6F!important;
    }

    .lastParagraphOfSection {
        margin-bottom: 3rem;
    }

    .blogPostContainer h3 {
        font-size: 30px;
        margin-bottom: 0.5rem;
    }

    .firstListOfSection {
        margin-top: 1rem!important;
    }

    .lastItemOnBlog {
        margin-bottom: 0!important;
    }

    .paginationContainer {
        display: flex;
        /*justify-content: space-around;*/

        min-width: 500px;
        max-width: 1000px;
        width: 50%;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 25px;
    }

    .paginationItem {
        display: block;
        padding: 1rem 1.25rem;
        background-color: #fff;
        color: #6F6F6F !important;
        font-size: 18px;
        font-weight: normal;
        margin-right: 1rem;
    }

    .paginationItem:hover {
        background-color: #F58220;
        color: #fff !important;
        font-weight: bold;
        text-decoration: none!important;
    }

    .returnButton {
        position: absolute;
        padding: 0.75rem;
        background: #F58220;
        margin-left: -2rem;
        color: #fff!important;
        display: flex;
    }

    .backArrowButtonIcon {
        width: 16px;
        margin-right: 0.25rem;
    }

    .paginationItem:first-child {
        margin-left: auto;
    }
    .paginationItem:last-child {
        margin-right: auto;
    }

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





/*--- ICONS ----------------------------------------------------------------------------------------------------------*/


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



/*--- BUTTONS --------------------------------------------------------------------------------------------------------*/


    /*--- SMALL BUTTON -----------------------------------------------------------------------------------------------*/

    /* Leading button position */
    .leadingButton {
        bottom: 14px;
        left: 10px;
    }

    /* Trailing button position */
    .trailingButton {
        bottom: 14px;
        right: 10px;
    }

    .innerIcon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .innerButton {
        width: 15px;
        height: 15px;
        /*padding: 5px;*/
        display: block;
        border-radius: 2.5px;
        border: none;
    }

    .innerIcon svg {
        width: 80%;
        height: 80%;
    }

    .outerButton {
        position: absolute;
        /*z-index: 1;*/
        border-radius: 5px;
        background-color: transparent;
        display: flex;
        height: 30px;
        width: 30px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .changePlanButton {
        color: #F48021 !important;
        text-decoration: underline!important;
    }



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



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






.testforAlign {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.leadingButton {
    bottom: auto;
    left: 10px;
}

.trailingButton {
    bottom: auto;
    right: 10px;
}





/* GRADIENT */
/*background: rgb(63,187,53);*/
/*background: linear-gradient(90deg, rgba(63,187,53,1) 0%, rgba(20,181,143,1) 100%);*/

/*text-align: left;*/
/*margin: 0 auto;*/


.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0.3s linear 0.3s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    min-width: 500px;
    max-width: 1000px;
    width: 50%;
    border-radius: 0.5rem;
}
.modal-content-text {
    padding: 1rem 2rem 1rem 2rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.textAlignLeft {
text-align: left;
}

.modalActive  {
visibility: visible!important;
opacity: 1;
transition: visibility 0.3s linear 0.3s, opacity 0.25s 0s, transform 0.25s;
}












/*--- MEDIA QUERIES --------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 550px) {
    .main-container, .popupFormContainer, .formInputContainer {
        min-width: 0;
        width: auto;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

:root {
    --max-width: max-content;

    --stepcalc: calc(100% - var(--step2));
    --step0: 0.5rem;
    --step1: 1rem;
    --step2: 2rem;

    --maincontainerwidth: calc(100vw - var(--step1));

    --maxwidth: 100%;
    --90width: 90%;
}

.main-container {
    width: var(--stepcalc) !important;
}








/*SELECT*/

.custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select select {
    display: none; /*hide original SELECT element:*/
}

/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
}

/*style items (options):*/
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.sortingDropdown {
    /*width: 50%;*/
    display: flex;
    flex-direction: row;
    align-items: center;
}

#changeUserLoadDirectionButton {
    margin-left: 1rem;
    margin-right: 1rem;
}

.removeAbsolute {
    position: relative!important;
}

.custom-dropdown .outerButton {
    position: relative;
    left: 0;
    margin: 5px;
}

.custom-dropdown-inner-container {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    display: flex;
    padding: 0.5rem;
}

.arrowLeftAligned .custom-dropdown:before {
    position:absolute;
    top:-10px; left:7px;
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    z-index:2;
}

.arrowLeftAligned .custom-dropdown:after {
    position:absolute;
    top:-12px; left:5px;
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid rgba(0,0,0, 0.03);
    z-index:1;
}

.firstKebabLink:before  {
    position:absolute;
    top:-10px; right:7px;
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    z-index:2;
}

.firstKebabLink:after {
    position:absolute;
    top:-12px; right:5px;
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid rgba(0,0,0, 0.03);
    z-index:1;
}

.dropdownOriginArrow {
    width: 12px;
    height: 12px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 35px solid #943c3c;
}

.custom-dropdown {
    margin-top: 10px;
    background-color: white;
    width: 200px;
    height: auto;
    position: absolute;
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);

    border-radius: 5px;
    border: 1px solid #f1ede8 !important;
}
























*,
*:after,
*:before {
    box-sizing: border-box;
}

.container {
    margin: 20px;
    max-width: 300px;
}

.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select {
    display: flex;
    flex-direction: column;
    border-width: 0 2px 0 2px;
    border-style: solid;
    border-color: #394a6d;
}

.custom-select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    font-size: 20px;
    font-weight: 300;
    color: #3b3b3b;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    cursor: pointer;
    border-width: 2px 0 2px 0;
    border-style: solid;
    border-color: #394a6d;
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    border: 2px solid #394a6d;
    border-top: 0;
    background: #fff;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px 0 22px;
    font-size: 22px;
    font-weight: 300;
    color: #3b3b3b;
    line-height: 60px;
    cursor: pointer;
    transition: all 0.5s;
}

.custom-option:hover {
    cursor: pointer;
    background-color: #b2b2b2;
}

.custom-option.selected {
    color: #ffffff;
    background-color: #305c91;
}

.arrow {
    position: relative;
    height: 15px;
    width: 15px;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.15rem;
    height: 100%;
    transition: all 0.5s;
}

.arrow::before {
    left: -5px;
    transform: rotate(45deg);
    background-color: #394a6d;
}

.arrow::after {
    left: 5px;
    transform: rotate(-45deg);
    background-color: #394a6d;
}

.open .arrow::before {
    left: -5px;
    transform: rotate(-45deg);
}

.open .arrow::after {
    left: 5px;
    transform: rotate(45deg);
}

.color {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 2.5px;
}





.custom-option {height: 60px;
    display: flex;
    align-items: center;
}

.customClickableBox {
    position: relative;
    border-radius: 5px;
    background-color: transparent;
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.customClickableBox:focus {
    outline: 2px solid;
    -moz-outline-radius: 5px;
    outline-offset: -1.5px;
    -moz-outline-style: solid;
    /*font-weight: 600;*/
}


.customClickableBox > .innerIcon {
    width: 75%;
}


.customClickableBox > .innerColor {
    width: 15px;
    height: 15px;
    /*background-color: red;*/
    display: block;
    border-radius: 2.5px;
    border: none;
}


.popupHeaderBar .outerButton {
    background-color: white;
    border: 1px solid #EEEEEE;
}

.fullWidth {
    width: 100%;
}

.emptyLine {
    height: 1rem;
    width: 100%;
}

.customDropDown {
    width: max-content;
}

.custom-dropdown .selected {
    /*background-color: #00b9ff !important;*/
    outline: 2px solid;
    -moz-outline-radius: 5px;
    outline-offset: -1.5px;
    -moz-outline-style: solid;
}

.dropDownContent {
    visibility: hidden;
    display: none;
}

.open > .dropDownContent {
    opacity: 1;
    display: flex;
    visibility: visible!important;
    pointer-events: all;
}

.userFeedbackContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 500px;
    max-width: 500px;
    width: 50%;
    margin: 0 auto;
    margin-top: 25px;
    text-align: center;
}

.userFeedbackContainer .illustrationContainer {
    width: 25%;
}

.userFeedbackContainer button {
    width: 50% !important;
}

.userFeedbackContainer .illustrationContainer img {
    width: 100%;
}


/* PLANS & PRICING ------------------------------------------------------------------------------------*/

    .pageContainer {
        margin-top: 25px;

        min-width: 500px;
        max-width: 1000px;
        width: 50%;
        margin: 0 auto;
        margin-top: 50px;
    }

    .priceToggle {
        display: flex;
        box-shadow: 0 0.75rem 1.5rem rgb(18 63 25 / 3%);
        background-color: #fff;
        width: max-content;
        border-radius: 10px;
        align-items: center;
    }

    .priceToggle > .priceToggleActive {
        padding: calc(0.75rem - 3px) !important;
        font-weight: 600;
        border-radius: 10px;
    }

    .priceToggleButton {
        padding: 0.75rem;
        margin: 0;
        cursor: pointer;
    }

    .paymentPlanOption, .paymentMethodOption {
        cursor: pointer;
    }

    .plan-choices {
        display: flex;
        justify-content: space-between;
        text-align: center;
        /* padding: 25px; */
        margin-top: 25px;
        margin-bottom: 25px;
        /* box-shadow: 0 0.75rem 1.5rem rgb(18 63 25 / 3%); */
        border-radius: .375rem;
    }

    .plan-choices > .planToggleActive {
        padding: calc(1rem - 3px) calc(1rem - 3px) calc(2rem - 3px) calc(2rem - 3px) !important;
        font-weight: 600;
        border-radius: 10px;
    }

    .paymentPlans > .planToggleActive {
        padding: calc(1rem - 3px) calc(2rem - 3px) calc(1rem - 3px) calc(2rem - 3px) !important;
        font-weight: 600;
        border-radius: 10px;
    }

    .paymentMethod > .paymentMethodActive {
        padding: calc(1rem - 3px) calc(2rem - 3px) calc(1rem - 3px) calc(2rem - 3px) !important;
        font-weight: 600;
        border-radius: 10px;
    }

    .planPrice {
        font-weight: 600;
    }

    .planInterval {
        margin-left: 10px!important;
        font-weight: 500;
    }

    .plan-item {
        /*min-width: 375px;*/
        max-width: 1000px;
        width: 30%;
        text-align: center;
        background-color: white;
        /* padding: 25px; */
        margin-top: 25px;
        margin-bottom: 25px;
        border-radius: .375rem;
        display: flex;
        flex-direction: column;
        overflow: hidden!important;
    }

    .planHeader {
        text-align: left;
        padding: 0.75rem;
    }

    .planHeader h4 {
        margin: 0;
    }

    .planDetails h4 {
        margin: 0;
    }

    .planDetails {
        text-align: left;
        padding: 0.75rem;
        padding-top: 1.5rem;
    }

    .planButton {
        padding: 0.75rem;
        margin-top: auto;
    }

    .plans-matrix {
        margin-top: 50px;
        width: 100%;
        font-size: 14px;
        background-color: white;
        border-spacing: 0;
        color: #6F6F6F!important;
    }

    .plans-matrix thead {
        border-bottom: 1px solid rgba(172, 172, 172, .5);
        display: block;
    }

    .tablePlanOffer {
        display: flex;
        flex-direction: column;
    }

    .plans-matrix thead tr {
        display: flex;
        border-top: 1px solid rgba(172, 172, 172, .5);
        border-right: 1px solid rgba(172, 172, 172, .5);
    }

    .plans-matrix thead tr th {
        width: 25%;
        border-left: 1px solid rgba(172, 172, 172, .5);
    }

    .planName-Table {
        margin: 30px 0 10px 0;
    }

    .tablePriceContainer {
        display: flex;
        flex-direction: row;
        margin: 0 auto;
    }


    @document regexp("https:.*") {
        body {
            background: white!important;
        }
        /* Styles written here are applied to all URLs that begin with 'https:' */
    }
    /* The above applies styles only to the page at the given URL  */


    .plans-matrix tbody {
        display: block;
        border-right: 1px solid rgba(172, 172, 172, .5);
        border-bottom: 1px solid rgba(172, 172, 172, .5);
    }

    .plans-matrix tbody tr {
        display: flex;
        min-height: 60px;
    }

    .plans-matrix tbody tr+tr {
        border-top: 1px solid rgba(172, 172, 172, .5);
    }

    .featureDescription {
        display: flex;
        align-items: center;
        text-align: left;
        justify-content: flex-start;
        padding: 16px 16px;
        border-left: 1px solid rgba(172, 172, 172, .5);
    }

    .plans-matrix tbody tr td {
        width: 25%;
        border-left: 1px solid rgba(172, 172, 172, .5);
    }

    .plans-matrix tbody tr .tableCell {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 8px 8px;
    }

    .tableCell .innerIconTable {
        width: 25px;
    }

    .tableCell .notIncluded svg path {
        fill: #BCBCBC!important;
    }

    .tableCell .yesIncluded svg path {
        fill: #F18D31!important;
    }

    .lineDivider {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
        height: 1px;
        background-color: rgba(172, 172, 172, .5);
        display: block;
    }

    .paymentPlanOption, .paymentMethodOption {
        padding: 1rem 2rem 1rem 2rem;
        background-color: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .checkoutOrderTotalContainer {
        padding: 1rem;
        border-radius: 10px;
    }


    .paymentPlanOption .billingCycle, .paymentMethodOption .billingCycle {
        margin-left: 1rem;
    }

    .priceLine, .priceTotalLine {
        display: flex;
        flex-direction: row;
    }

    .paymentPlanOption .planPrice,
    .paymentMethodOption .additionalCharge,
    .productTotalPrice,
    .taxPrice,
    .productPrice
    {
        margin-left: auto;
    }

    .paymentPlanOption .planInterval, .paymentMethodOption .planInterval {
        margin-left: 5px!important;
    }

    .paymentPlanOption h3, .paymentMethodOption h3 {
        margin: 0;
    }

    .paymentPlanOption h3, .paymentMethodOption h3 , .priceTotalLine {
        font-weight: 600;
    }

    .checkoutContainer {
        display: flex;
        flex-direction: row;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .checkoutOrderTotalContainer {
        min-width: 300px;
        margin-left: 2rem;
        height: max-content;
    }

    .checkoutOptionsContainer {
        width: 100%;
    }

/* Scrollbars ----------------------------------------------------------------------------------------------*/

    body {
        overflow: overlay;
    }


    *::-webkit-scrollbar {
        /*width: 5px;*/
        /*background-color: inherit; !* or add it to the track *!*/
        /*background-color: rgba(150, 150, 150, 0.2); !* or add it to the track *!*/
        transition: background-color 0.8s;
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-corner {
        background: rgba(0,0,0,0.0);
    }

    *::-webkit-scrollbar-track {
        /*width: 14px;*/
        background-color: transparent!important;
        /*background-color: transparent!important;*/
    }

    *::-webkit-scrollbar:hover {
        /*width: 5px;*/
        /*height: 8px;*/
        /*background-color: rgba(150, 150, 150, 0.8); !* or add it to the track *!*/
    }

    /* Add a thumb */
    *::-webkit-scrollbar-thumb {
        /*border: 4px solid rgba(0, 0, 0, 0);*/
        /*background-clip: padding-box;*/
        border-radius: 5px;
        width: 5px!important;


        padding: 0 4px;
        background-color: rgba(150, 150, 150, 0.3);
    }

    *::-webkit-scrollbar-thumb:hover {
        background-color: rgba(150, 150, 150, 0.8);
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(150, 150, 150, 0.4) rgba(0,0,0,0.0);
    }

    /* width */
    .userTable::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    /* Track */
    .userTable::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .userTable::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    /* Handle on hover */
    .userTable::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* TABLE ----------------------------------------------------------------------------------------------*/

    .main-container {
        width: 90%;
        /*max-width: none!important;*/
    }

    .grid-table-row td, .grid-table-row th {
        /*border: 1px solid #ddd;*/
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .grid-table {
        border-spacing: 0!important;
        width: 100%;
        border: 1px solid #f1ede8 !important;
        overflow: hidden;
        max-width: 100%;
        position: relative;
        display: block;
        overflow-x: auto;
        overflow-y: visible;
        text-align: left;
    }

    .grid-table .status {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-radius: 15px;
        font-weight: 600;
    }

    .grid-table .paid {
        color: #1fc657;
        background-color: #ddffdf;
    }
    .grid-table .canceled {
        color: #6a6a6a;
        background-color: #e2e2e2;
    }
    .grid-table .open {
        color: #cc9900;
        background-color: #fff4c2;
    }
    .grid-table .pending {
        color: #cc9900;
        background-color: #fff4c2;
    }
    .grid-table .authorized {
        color: #1fc657;
        background-color: #ddffdf;
    }
    .grid-table .expired {
        color: #c61f1f;
        background-color: #ffd1d1;
    }
    .grid-table .failed {
        color: #c61f1f;
        background-color: #ffd1d1;
    }


    .grid-table-row .last-column {
        text-align: right;
    }

    .grid-table tbody {
        width: 100%;
        display: table;
    }

    .grid-table-row th {
        padding-top: 1rem;
        padding-bottom: 1rem;
        text-align: left;
        background-color: #F48021;
        color: white;
        white-space: nowrap;
    }

    .grid-table-row .description-column, .grid-table-row .date-column {
        max-width: 20%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .grid-table-row td {
        border-bottom: 1px solid #eee;
    }

    .standalone-row td {
        border-top: 2px solid #CBCBCB;
    }

    .grid-table-row {
        border-collapse: collapse;
        width: 100%;
        border-bottom: 1px solid #eee;
        /*padding: 10px 15px;*/
        /*grid-template-areas: "date amount status description payment";*/
        /*display: grid;*/
    }

    .grid-table-row > td {
        position: relative;
    }

    /* TRANSACTION  TABLE */





/* PROFILE STYLING ------------------------------------------------------------------------------------*/

    .subscriptionEndsOnText {
        color: #bbb;
    }

    .horizontalToggleMenu {
        /*width: max-content;*/

        overflow-x: scroll;
        border-bottom: 1px solid #eee;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        padding: 0;
    }

    .horizontalToggleMenu a {
        text-transform: capitalize;
    }

    .horizontalToggleMenu li {
        padding: 1rem 0rem 1rem 0rem;
        margin: 0rem 1rem 0rem 1rem;
    }

    .horizontalToggleMenu li:last-child {
        margin-right: 0;
    }

    .horizontalToggleMenu .selected {
        border-bottom: 3px solid #F58220;
        font-weight: bold;
    }

    .horizontalToggleMenu .selected a {
        color: #F58220!important;
    }

    .horizontalToggleMenu li:first-child {
        padding-left: 0;
        margin-left: 0;
    }

    .profileSubSection .profileItem {
        margin-bottom: 1.25rem;
    }

    .profileSubSection {
        margin-top: 2.5rem;
    }


    .profileSubSection .profileItem:last-child {
        margin-bottom: 0;
    }
    .textAlignLeft .profileSubSection:last-child {
        margin-bottom: 2.5rem!important;
    }

    .profileSubSection h5 {
        color: #BBBBBB!important;
        font-size: 14px;
        margin-bottom: 0.25rem;
    }

    .profileSubSection p {
        margin: 0;
    }

    .usageBar {
        display: flex;
        flex-direction: row;
        height: 0.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .usageBar * {
        height: 100%;
    }

    .usedSpan {
        width: 30%;
    }

    .expiredSpan {
        width: 5%;
    }

    .availableSpan {
        width: 65%;
    }

    .usedSpan, .usedSpanOrb {
        background-color: #1FC657;
    }
    .expiredSpan, .expiredSpanOrb {
        background-color: #93D6AA;
    }
    .availableSpan, .availableSpanOrb {
        background-color: #707070;
    }

    .usageBarInfo {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .usageBarInfo li {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .usageBarInfo li:last-child {
        margin-bottom: 0rem;
    }

    .usedSpanOrb, .expiredSpanOrb, .availableSpanOrb {
        display: block;
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 100%;
        margin-right: 0.35rem;
    }


    .categorySection p {
        margin-bottom: 1rem;
    }

    .categorySection .standardForm {
        border-spacing: 0!important;
        width: 100%;
        border: 1px solid #f1ede8 !important;
        overflow: hidden;
        max-width: 100%;
        position: relative;
        display: block;
        overflow-x: auto;
        overflow-y: visible;
        text-align: left;
        background: white;

        padding: 1rem;
        margin-top: 2rem;
    }

    .categorySection .standardForm p {
        margin: 0!important;
    }

    .categorySection .last-column {
        display: table-cell;
        /*display: flex;*/
        /*justify-content: right;*/
    }
    .categorySection .last-column .outerButton {
        position: relative;
        right: 0!important;
    }

    .categorySection .last-column button {
        border: none!important;
        background-color: transparent!important;
        width: max-content!important;
    }
    .categorySection .last-column button[type=submit] {
        border: none!important;
        background: transparent!important;
        margin: 0!important;
        padding: 0!important;
    }
    .categorySection .last-column button[type=submit]:hover {
        border: none!important;
        background: transparent!important;
    }







/* LOGIN & NEW ACCOUNT --------------------------------------------------------------------------------*/

    .loginContainer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .newAccountContainer, .existingAccountContainer {
        width: 50%;
    }

    .existingAccountContainer {
        padding-right: 1rem;
    }

    .newAccountContainer {
        padding-left: 1rem;
    }

    .newAccountContainer button, .existingAccountContainer button {
        /*margin-top: auto;*/
    }


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

    .fullScreenEditPopover {
        z-index: 20000;
    }

    .modal {
        z-index: 10;
    }

    .select-items {
        z-index: 99;
    }

    .custom-dropdown {
        z-index: 200;
    }

    .custom-options {
        z-index: 2;
    }

    .fullScreenPopover {
        z-index: 30000!important;
    }

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


.fullScreenPopover, .fullScreenEditPopover {
    position: fixed;
    display: flex!important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    visibility: hidden;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

#popupEditForm {
    position: relative !important;
    /*top: 25%!important;*/
    /*bottom: 0!important;*/
    /*left: 0!important;*/
    /*right: 0!important;*/
    margin-top: 0!important;
}

.visible {
    visibility: visible!important;
}

.dontOverflow {
    overflow: hidden;
}





.inventoryKebab .outerButton {
    width: 35px !important;
    height: 35px !important;
}

#kebabSelector .customDropDownWrapper,
#kebabSelector .customDropDown,
#kebabSelector .dropDownButton,
#kebabSelector .innerIcon {
    width: 100%;
    height: 100%;
}

.kebabContent .custom-dropdown {
    right: 0!important;
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.32);
}

.kebabContent .custom-dropdown-inner-container {
    flex-direction: column;
    align-items: baseline;
    padding: 0!important;
}

.kebabContent .custom-dropdown-inner-container a:first-child {
    /*margin-bottom: 1rem;*/
}
.kebabContent .custom-dropdown-inner-container a {
    padding: 1rem;
    /*margin-top: 1rem;*/
    /*margin-bottom: 1rem;*/
    /*margin-left: 0.5rem;*/
    width: 100%;
    text-align: left;
}
.kebabContent .custom-dropdown-inner-container a:hover {
    background-color: #eaeaea;
}

.kebabContent .custom-dropdown-inner-container a:last-child {
    /*margin-top: 1rem;*/
}

#kebabSelector .customClickableBox {
    width: 35px !important;
    height: 35px !important;
}

#kebabSelector {
    left: 0!important;
}
.inventoryKebab > #kebabSelector {
    position: relative!important;
}

.inventoryKebab > .inventoryButton {
    display: none!important;
}


.inventoryItemExpirationLabel, .inventoryItemCreationLabel {
    /*display: none!important;*/
}



/* - COLORS FOR DROPDOWN */

.red {background-color: #e02222;}
.orange {background-color: #e5692a;}
.yellow {background-color: #e5bc2a;}
.green {background-color: #418d33;}
.blue {background-color: #1a53b1;}
.indigo {background-color: #1d2558;}
.purple {background-color: #5926ac;}
.brown {background-color: #805b3a;}
.pink {background-color: #f14db0;}
.grey {background-color: #616161;}
.black {background-color: #151515;}
/*.noicon {background-color: #e3e3e3;}*/
.nocolor {background-color: #d0d0d0;}


.fullScreenEditPopover {
    /*visibility: visible !important;*/
}


.autoDeleteExplain {
    margin-top: 0!important;
    color: #e02222;
    margin-bottom: 30px;
}




.reasonTextSection h3 {
    margin-bottom: 16px;
}

.reasonTextSection p {
    margin: 0;
    color: #1B1B1B;
}

.reasonTextSection {
    width: 80%;
}

.reasonTextSection .sourceLink {
    font-style: italic;
    margin-top: 0.5rem!important;
    display: inline-block;
    color: #a5a5a5;
}

.reasonImage {
    margin-right: 2rem;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reasonImage img {
    width: 100%;
}

.backgroundShape {
    width: 100%;
}

.custom-shape-divider-bottom-1621444960 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1621444960 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 163px;
}

.custom-shape-divider-bottom-1621444960 .shape-fill {
    fill: #FFFFFF;
}

.heroBannerHomepage {
    height: auto;
    position: relative;
    max-height: 800px;

    overflow: hidden;
}

.heroBannerText {

    padding: 125px 25px;
}

.backgroundShape {
    position: absolute;
    bottom: 0;
}

.backgroundShape svg {
    display: block;
    width: 100%;
}


.backgroundImage img, .backgroundShape img {
    width: 100%;
    display: block;
}

.backgroundImage {
    max-height: 800px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}


.achornBackground {
    max-height: 800px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.achornBackground img {
    width: 100%;
    display: block;
}
.achornBackground .overlay {
    width: 100%;
    background: #F48021;
    display: block;
    position: absolute;
    height: 100%;
    opacity: 0.3;
}
.backgroundShape {
    z-index: 1;
}
.achornHeader {
    z-index: 1;
}



.dividerOrangeTan {
    background-color: #F58220;
}

.dividerWhiteOrange {
    background-color: #fff;
}

.dividerOrangeTan svg {
    display: block;
    width: 100%;
}

.dividerWhiteOrange svg {
    display: block;
    width: 100%;
}

.shapeForm {
    shape-outside: polygon(0px 0px, 6.93% 1.35%, 13.88% 4.97%, 20.46% 10.09%, 28.74% 18.78%, 34.53% 27.38%, 40.55% 38.09%, 44.84% 47.64%, 48.04% 55.85%, 52.75% 67%, 56.57% 75.04%, 61.44% 83.56%, 65.66% 89.63%, 69.27% 93.22%, 73.04% 96.39%, 77.63% 98.35%, 82.98% 99.46%, 86.17% 98.79%, 91.23% 96.09%, 96.66% 90.47%, 99.87% 85.32%, 100% 100%, 0px 100%);
}

.howItWorksYoutubeSection h2 {
    margin-top: 1rem;
}

.howItWorksYoutubeSection .contentContainer {
    width: 100%;
    position: relative;
    padding: 0;
    padding-top: 0px;
    padding-top: 56% !important;
}

.howItWorksYoutubeSection .contentContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.callToActionLink {
    margin-top: 2rem;
}

.callToAction {
    margin-top: 0!important;
    width: 400px!important;
}

.callToAction {

}

.standardContainer {
    padding: 0px 25px;
    display: flex;
    align-items: center;
    flex-direction: column;


    /*width: var(--maincontainerwidth)!important;*/


    /*width: 100%;*/
    /*padding-left: var(--step0)!important;*/
    /*padding-right: var(--step0)!important;*/
}

.maxWidthContainer {
    max-width: 1000px;
    width: 100%;
}

.standardContainer .blueButton {
    margin-bottom: 0px!important;
}

.whyAchornSection {
    background-color: #F58220;
    color: #fff!important;
    padding-top: 100px;
    padding-bottom: 140px;
}

.whyAchornSection .reasonsFlexBox {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    /*display: flex;*/
    /*grid-template-columns: repeat(auto-fill,minmax(30%, 30%));*/
    /*margin:-25px;*/
    justify-content: center;
}

.whyAchornSection h1, .whyAchornSection h3, .whyAchornSection p {
    margin: 0;
}

.whyAchornSection h1 {
    margin-bottom: 50px;
}

.whyAchornSection .reasonBox {
    /*width: 25%;*/
    /*margin-right: auto;*/
    /*flex: 1 0 21%;*/
    margin: 25px;
    width: 30%;
    min-width: 150px;
    max-width: 300px;
}


.reasonBox {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.reasonBox svg path {
    fill: #fff!important;
}

@media (max-width: 750px) {
    .reasonBox {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }

    .platformInstall .reasonBox {
        text-align: left;
        align-items: flex-start;
    }
}


/*html {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-content: center;*/
/*    align-items: center;*/
/*}*/
/*body {*/
/*    max-width: 1400px;*/
/*    box-shadow: 0 0.15rem 3.75rem rgba(0, 0, 0, 0.1);*/
/*}*/

.dropDownContent {
    /*visibility: visible !important;*/
    /*display: block !important;*/
}


.reasonsToUseAchorn {
    background-color: #fff;
    color: #F58220;
    padding: 125px 25px;
    display: flex; flex-direction: column;
}

.howItWorksYoutubeSection svg {
    fill: #F58220!important;
    width: 100%;
}

.reasonSection {
    display: flex;
    margin-bottom: 60px;
    width: 100% !important;
}

.reasonsToUseAchorn .reasonSection:last-child {
    margin-bottom: 0px!important;
}
.howItWorksYoutubeSection {
    background-color: #FFF3E9;
    padding-bottom: 140px;
}
.platformInstall > .platformInstallHeader {
    width: 100%;
    margin-bottom: 1rem;

    display: flex;
    flex-direction: row;
}

.platformInstallHeader {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.platformInstallHeader h3 {
    margin-bottom: 0;
    height: max-content;
}

.platformInstallHeader > span {
    width: 30px;
    height: 30px;
}

.platformInstallHeader svg {
    width: 100%;
    height: 100% !important;
}

.platformInstallHeader svg path {
    fill: #F58220!important;
}

.platformInstall {
    margin-top: 2rem;

    padding-top: 2rem;
    /*padding-bottom: 2rem;*/
    border-top: solid 1px #F58220!important;
    /*border-bottom: solid 1px #F58220!important;*/

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 840px;
    justify-content: space-between;
}

.platformInstall .reasonBox {
    width: 30%;
}

.howItWorksYoutubeSection .maxWidthContainer,
.whyAchornSection .maxWidthContainer,
.reasonsToUseAchorn .maxWidthContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.heroBannerHomepage {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 50px;
}

.heroBannerHomepage .maxWidthContainer {
    position: absolute;
    margin-top: -150px;
    padding: 0 25px;
    box-sizing: content-box;
}

@media screen and (max-width: 1025px) {
    .heroBannerHomepage .maxWidthContainer {
        box-sizing: border-box!important;
    }
}

.paddingContainer {

}

.heroBannerText {
    width: 30%;
    position: relative;
    padding: 0!important;
    z-index: 4;
    color: #fff;
}

html, body {
    min-height: 100vh;
    position: relative;
    /*margin-bottom: 355px;*/
}

body {
    display: flex;
    flex-direction: column;
}

footer {
    position: relative;
    margin-top: auto;
}


/* TO DO, APPLY TO ALL SHORT PAGES */
.flexBoxMinHeight {
    display: flex;
    min-height: calc(100vh - 50px);
    flex-direction: column;
    justify-content: space-between;
}

.adminTile {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    width: 25%;
    min-width: 200px;
    margin-bottom: 30px;

    min-width: 275px;
    max-width: 300px;
    margin-right: 1rem;
}

.emailTile {
    min-width: max-content;
    max-width: max-content;
}

.emailTile .dashboardInformation {
    margin-right: 1rem;
}

.tableButton {
    color: #333!important;
    background: transparent!important;
    padding: 0!important;
    width: max-content!important;
}

.tableButton:hover {
    background-color: transparent!important;
    text-decoration: underline!important;
}

.setBold {
    font-weight: bold;
}

.adminTile button[type=submit] {
    padding: 7px 20px;
    color: white;
    background: linear-gradient(-155deg, rgba(248,175,47,1) 0%, rgba(244,128,33,1) 100%);
}

.adminTileFull {
    width: 100% !important;
    max-width: 0;
    min-width: 100%;
}

.adminTile {
    box-shadow: 0 0.15rem 1rem rgb(63 30 18 / 10%) !important;
    border-radius: 10px;
}

.adminTile:last-child {
    margin-right: 0rem;
}

.dashboardPercentage {
    max-width: max-content;
    height: max-content;
    padding: 0.15rem 0.4rem;
    margin-left: 0.25rem;
    margin-top: -0.25rem;
    border-radius: 20px;
    font-weight: bold;
}

.dashboardIcon {
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboardIconOrange {
    background-color: #ffe3ae;
    color: #F58220;
}
.dashboardIconOrange svg path {
    fill: #f58220;
}

.dashboardIconGreen {
    background-color: #bceec0;
    color: #1c9323;
}
.dashboardIconGreen svg path {
    fill: #1c9323;
}

.dashboardIconBlue {
    background-color: #dee6ff;
    color: #3352F0;
}
.dashboardIconBlue svg path {
    fill: #3352F0;
}

.backArrow {
    color: #F48021;
    display: flex;

    /*align-items: center;*/
    width: max-content;
}

.margin-top-1rem {
    margin-top: 1rem!important;
}

.backArrow svg {
    width: 18px;
    height: 18px;
    margin-right: 0.35rem;
}

.backArrow  svg path {
    fill: #F48021;
}

.inventoryTotal {
    display: flex;
}

.dashboardInformation {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.dashboardIconRed {
    background-color: #ffcbcb;
    color: #EF5126;
}
.dashboardIconRed svg path {
    fill: #EF5126;
}


.dashboardIcon svg {
    width: 32px;
    height: 32px;
}

.adminTile h1  {
    font-size: 32px;
    margin: 0!important;
}

.adminTile p {
    margin: 0!important;
    /*margin-top: 12px!important;*/
}

.adminTileSection {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}







.userRow, .userHeader {
    display: flex;
    flex-direction: row;
}

.userHeader {
    font-weight: 600;
}

.userTable {
    overflow-x: scroll;
}

.userRow:nth-of-type(odd) {
    background: #eeeeee;
}

.userCell {
    /*border: 1px solid;*/
}

.userIdCell {
    min-width: 100px;
}

.userNameCell {
    min-width: 150px;
}

.userLanguageCell {
    min-width: 150px;
}

.userEmailUpdateCell {
    min-width: 150px;
}

.userPremiumCell {
    min-width: 100px;
}

.userAdminCell {
    min-width: 100px;
}



/* CUSTOM DROPDOWN -----------------------------------------------------------------------------------*/

    .selectize-input {
        font-size: 0.9rem;
        width: 100%;
        padding: 12px 20px!important;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        color: #888888!important;
        font-weight: 500;
    }

    .selectize-dropdown {
        width: 100% !important;
    }

    .selectize-dropdown-content {
        max-height: 300px!important;
    }

    .selectize-dropdown .option {
        padding: 0.5rem 14px 0.5rem 14px!important;
        cursor: pointer;
    }

    .selectize-dropdown .option .highlight {
        /*background-color: rgba(255, 255, 255, 0.35)!important;*/
        background-color: transparent!important;
        color: #888888!important;
    }

    .selectize-dropdown .active .highlight {
        /*background-color: rgba(255, 255, 255, 0.35)!important;*/
        color: #fff!important;
    }

    .selectize-dropdown .active {
        background-color: #F58220!important;
        color: #fff!important;
        margin: 0!important;
    }

    .selectize-dropdown-content {
        padding: 0px 0!important;
    }

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


.dropdownsearch {
    height:100%;
    width: 100% !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: 'Ubuntu', sans-serif;

}
.options {
    margin: 8px 0;
    /*max-width:350px;*/
    /*width:50%;*/
    width: 100%;
    height: max-content;
}
/*@media(max-width:34em){*/
/*    .main{*/
/*        min-width:150px;*/
/*        width:auto;*/
/*    }*/
/*}*/
/*select {*/
/*    display: none !important;*/
/*}*/

.dropdownsearch > .options > select {
    display: none !important;
}

.dropdown-select {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40FFFFFF', endColorstr='#00FFFFFF', GradientType=0);
    background-color: #fff;
    border-radius: 6px;
    border: solid 1px #ccc;
    /*box-shadow: 0px 2px 5px 0px rgba(155, 155, 155, 0.5);*/
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    /*line-height: 40px;*/
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;


    display: flex;
    align-items: center;

}

.dropdown-select:focus {
    background-color: #fff;
}

.dropdown-select:hover {
    background-color: #fff;
}

.dropdown-select:active,
.dropdown-select.open {
    background-color: #fff !important;
    border-color: #bbb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) inset;
    outline: 2px solid;
    outline-offset: -1.5px;
}

.dropdown-select .current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* This section is for the styling of the arrow at the back */
.dropdown-select:after {
    height: 0;
    width: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #777;
    -webkit-transform: origin(50% 20%);
    transform: origin(50% 20%);
    transition: all 0.125s ease-in-out;
    content: '';
    display: block;
    margin-top: -2px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
}

.dropdown-select.open:after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.dropdown-select.open .list {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.dropdown-select.open .option {
    cursor: pointer;
}

.dropdown-select.wide {
    width: 100%;
}

.dropdown-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.dropdown-select .list {
    box-sizing: border-box;
    transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
    background-color: #fff;
    border-radius: 6px;
    margin-top: 4px;
    padding: 0px 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    /*max-height: 250px;*/
    overflow: auto;
    border: 1px solid #ddd;
}

.dropdown-select .list .dd-search .innerIcon {
    position: absolute;
    left: 20px;
    width: 24px;
}

.dropdown-select .list .dd-button .innerIcon {
    width: 24px;
    margin-right: 5px;
}

.dropdown-select .list .dd-button button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-select .list .dd-button .innerIcon svg path {
    fill: #fff;
}

.dropdown-select .option .isCustom .innerIcon svg path,
.dropdown-select .list .dd-search .innerIcon svg path {
    fill: #F58220!important;
}

.dropdown-select .list ul {
    overflow-x: hidden!important;
}

.dropdown-select .list:hover .option:not(:hover) {
    /*background-color: transparent !important;*/
}
.dropdown-select .dd-search {
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    /*margin: 0.5rem 14px 0.5rem 14px;*/



    top: 0;
    position: sticky;
    background-color: white!important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
    padding: 0.5rem 14px 0.5rem 14px;
}

.dropdown-select .dd-searchbox {
    width: 100%;
    padding:0.5rem;
    border:1px solid #999;
    border-color:#999;
    border-radius:4px;
    outline:none;
    text-indent: 24px;
}
.dropdown-select .dd-searchbox:focus{
    border-color:#12CBC4;
}

.dropdown-select .dd-button {
    box-shadow: 0 0 0 1px rgb(0 0 0 / 9%);
    padding: 0.5rem 14px 0.5rem 14px;
    background-color: white;
    bottom: 0;
    position: sticky;
}

.dropdown-select .dd-button button {
    width: 100%;
    padding: 14px 20px;
    /*margin: 8px 0;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background: linear-gradient(-155deg, rgba(248,175,47,1) 0%, rgba(244,128,33,1) 100%);
}

.dropdown-select .list ul {
    padding: 0;
    margin: 0;

    max-height: 300px;
    overflow-y: auto;
}

.dropdown-select .option {
    cursor: default;
    font-weight: 400;
    /*line-height: 40px;*/
    outline: none;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    transition: all 0.2s;
    list-style: none;

    display: flex;
    align-items: center;
}

.dropdown-select .option .isCustom {
    position: relative;
    bottom: 8px;
    right: 4px;
    transform: rotate(15deg)
}

.dropdown-select .option:hover,
.dropdown-select .option:focus {
    background-color: #FFD6B2 !important;
}

.dropdown-select .option.selected:not(.placeholderOption) {
    background-color: #F58220 !important;
    font-weight: 600;
    color: #fff !important;
}

.dropdown-select .option.selected .isCustom .innerIcon svg path {
    fill: #fff!important;
}

.dropdown-select .option.selected:focus {
    background: #F58220;
}

.dropdown-select a {
    color: #aaa;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.dropdown-select a:hover {
    color: #666;
}

.isCustom .innerIcon {
    width: 24px;
}

.cat .options .dropdown-select {
    padding-left: 50px;
}

/* Scrollbar ------------------------------------------------------------------------------------------*/

/*::-webkit-scrollbar {*/
/*    width: 8px;*/
/*    transition-delay: 1s;*/
/*}*/

/*!* Track *!*/
/*::-webkit-scrollbar-track {*/
/*    background: #f1f1f1;*/
/*}*/

/*!* Handle *!*/
/*::-webkit-scrollbar-thumb {*/
/*    background: #FFD6B2;*/

/*}*/

/*!* Handle on hover *!*/
/*::-webkit-scrollbar-thumb:hover {*/
/*    background: #F58220;*/
/*}*/

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

/* Printer ------------------------------------------------------------------------------------------*/

    .onlyPrint {
        display: none;
    }

    @media print {

        .inventoryName {
            margin-left: 10px!important;
            margin-right: 10px!important;
        }

        .inventoryItemExpirationLabel {
            margin-right: 10px;
        }

        @page {
            size: auto;
            margin: 0;
        }

        .addItemPopupTriggerButton {
            display: none;
        }

        .control-group {
            display: none;
        }

        .onlyPrint {
            display: block;
        }

        .inventoryItem {
            break-inside: avoid;
            display: inline-flex;
            width: 100%;
            height: auto!important;
            max-height: 70px!important;


            -webkit-print-color-adjust: exact;
            -moz-print-color-adjust: exact;
            -ms-print-color-adjust: exact;
            print-color-adjust: exact;

        }

        @media print {
            .inventoryItem {
                break-inside: avoid!important;
                page-break-inside: avoid!important;
            }
        }

        .inventoryIconInner {
            display: block;
            position: relative;
            width: 70px;
            height: 70px;
            vertical-align: middle;
            overflow: hidden;
        }

        .inventoryIconInner svg {
            display: flex;
            justify-content: center;
            align-items: center;
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            /*bottom: 0;*/
            /*right: 0;*/
        }
    }

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

    #toastArea {
        /*background-color: red;*/
        width: 90%!important;
        min-width: 500px;
        /*text-align: center;*/
        margin: 0 auto;
        /*margin-top: 25px;*/
        /*margin-bottom: 25px;*/
        border-radius: 0.375rem;

        position: fixed;
        z-index: 1000000;
        margin-top: 30px;
        left: 0;
        right: 0;
    }


    #snackbar {

        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        /*padding: 16px;*/
        position: fixed;
        z-index: 1;
        right: 30px;
        top: 30px;
        font-size: 17px;
    }

    #toastArea p {
        visibility: hidden;
        margin-bottom: 1rem!important;
    }

    #toastArea .show {
        visibility: visible;
        -webkit-animation: fadein 0.1s, fadeout 0.3s 2.7s;
        animation: fadein 0.1s, fadeout 0.3s 2.7s;
    }

    @-webkit-keyframes fadein {
        from {top: 0; opacity: 0;}
        to {top: 30px; opacity: 1;}
    }

    @keyframes fadein {
        from {top: 0; opacity: 0;}
        to {top: 30px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {top: 30px; opacity: 1;}
        to {top: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {top: 30px; opacity: 1;}
        to {top: 0; opacity: 0;}
    }

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

@media (max-width: 700px) {
    .heroBannerHomepage .maxWidthContainer {
        width: var(--maincontainerwidth)!important;
        margin-left: var(--step0)!important;
        margin-right: var(--step0)!important;
        margin-top: -1rem;
        padding: 1rem!important;

        /*background: #ffffff30;*/
        border-radius: 0.5rem;
    }

    /*.heroBannerText {*/
    /*    width: 100% !important;*/
    /*}*/

    .heroBannerText h1 {
        margin-top: 0!important;
    }

    .heroBannerText a button {
        margin-bottom: 0!important;
        /*padding: 10px 10px!important;*/
    }

    /*.heroBannerText p {*/
    /*    font-size: 0.8rem;*/
    /*}*/
    /*.heroBannerText h1 {*/
    /*    font-size: 1.25rem;*/
    /*}*/

    .userFeedbackContainer {
        min-width: unset!important;
        max-width: unset!important;
        width: 100%!important;
    }
}

@media (max-width: 550px) {

    /*header {*/
    /*    overflow-x: scroll;*/
    /*}*/

    .reasonBox {
        width: 100%!important;
        max-width: none!important;
        margin: 1rem 0rem!important;
    }

    .reasonsToUseAchorn, .whyAchornSection, .howItWorksYoutubeSection  {
        padding: 4rem 1rem!important;
    }

    .reasonsFlexBox {
        width: 100%;
    }

    .dividerWhiteOrange svg, .dividerOrangeTan svg {
        height: 3rem!important;
    }

    /*body {*/
    /*    overflow-x: hidden;*/
    /*}*/

    #popupEditForm {
        /*margin-top: 1rem!important;*/
        margin-top: 0rem!important;
    }

    .backgroundImage {
        /*overflow: hidden;*/
        width: 150%;
    }

    .achornBackground {
        max-height: 800px;
        width: 150%;
    }
    .achornBackground img {
        width: 100%;
        display: block;
    }


    .heroBannerHomepage {
        overflow: hidden;
    }

    .main-container {
        width: var(--maincontainerwidth)!important;
        margin-left: var(--step0)!important;
        margin-right: var(--step0)!important;
    }

    #toastArea {
        width: var(--maincontainerwidth)!important;
        margin-left: var(--step0)!important;
        margin-right: var(--step0)!important;
        min-width: 0!important;
    }

    #toastArea p {
        width: 100%!important;
        display: flex;
    }



    .pageContainer {
        width: var(--maincontainerwidth)!important;
        margin-left: var(--step0)!important;
        margin-right: var(--step0)!important;

        min-width: 0!important;
    }

    .plan-choices {
        flex-direction: column;
    }

    .plan-item {
        width: 100%;

        margin-top: 0!important;
        margin-bottom: 1rem!important;
    }

    .planDetails {
        padding-top: 0.75rem!important;
    }

    .plan-item p {
        font-size: 0.9rem;
    }

    .plan-item:last-child {
        margin-bottom: 0!important;
    }

    .plan-item:first-child .planSummary, .planSummary {
        margin-bottom: 0!important;
    }



    .plans-matrix {
        display: block;
        overflow: scroll;
    }

    .plans-matrix thead, .plans-matrix tbody {
        min-width: 500px;
    }

    .main-container-padding {
        padding: 0!important;
    }

    .main-container-padding .pageContainer {
        margin-left: 0!important;
    }

    .loginContainer {
        flex-direction: column;
    }

    .newAccountContainer, .existingAccountContainer {
        width: 100%!important;
        padding: 0!important;
    }

    .existingAccountContainer {
        border-bottom: 1px solid #ddd;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(221, 221, 221);
        margin-bottom: 1rem;
        padding-bottom: 1rem!important;
    }

    .pageContainer {
        margin-bottom: 1rem;
    }

    .checkoutContainer {
        flex-direction: column;
    }

    .checkoutOrderTotalContainer {
        margin-left: 0!important;

        display: flex;
        flex-direction: column;
    }

    .checkoutOrderTotalContainer form {
        order: 1;
        margin-top: 1rem;
    }

    .checkoutOrderTotalContainer .submitButtonInMiniForm button {
        margin: 0!important;
    }

    .checkoutOptionsContainer form {
        display: none;
    }

    .checkoutOptionsContainer {
        margin-bottom: 1.5rem;
    }




    .heroBannerHomepage .maxWidthContainer {
        width: var(--maincontainerwidth)!important;
        margin-left: var(--step0)!important;
        margin-right: var(--step0)!important;
        margin-top: -1rem;
        padding: 1rem!important;

        /*background: #ffffff30;*/
        border-radius: 0.5rem;
    }

    /*.heroBannerText {*/
    /*    width: 100% !important;*/
    /*}*/

    .heroBannerText h1 {
        margin-top: 0!important;
    }

    .heroBannerText a button {
        margin-bottom: 0!important;
        padding: 10px 10px!important;
    }

    .heroBannerText p {
        font-size: 0.8rem;
    }
    .heroBannerText h1 {
        font-size: 1.25rem;
    }

    .callToAction {
        width: 100%!important;
    }

    .howItWorksYoutubeSection a {
        width: 100%;
    }

    .reasonSection {
        flex-direction: column;
        text-align: center;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .reasonTextSection {
        width: 100%;
        align-items: center;
    }

    .reasonImage {
        margin-bottom: 1rem;
        margin-right: 0!important;
    }

    .reasonTextSection p {
        font-size: 0.8rem;
    }

    .reasonsToUseAchorn h2 {
        margin-bottom: 2rem;
    }

    .reasonsToUseAchorn .reasonSection:last-child {
        margin-bottom: 0!important;
    }

}

@media (max-width: 350px) {
    .heroBannerHomepage .maxWidthContainer {
        margin-top: 1rem;
        position: relative;
        box-shadow: #00000025 0 0 15px 0px;
        border: solid 1px #eee;
        margin-bottom: 1rem;
    }



    .heroBannerHomepage .backgroundShape,
    .heroBannerHomepage .backgroundImage {
        display: none;
    }

    .heroBannerText {
        color: #F58220;
    }
}

/*--- HEADER NAVIGATION ----------------------------------------------------------------------------------------------*/

.headerNavigation {
    background-color: #fff;

}

.nav-header-main {

    width: var(--maincontainerwidth)!important;
    margin-left: var(--step0)!important;
    margin-right: var(--step0)!important;

    padding: 0!important;


    display: flex;
    flex-direction: row;
    height: 50px;

    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
}

/*.mobileMenuToggle {*/
/*    margin-left: 1rem;*/
/*}*/

.mobileMenuToggle span {
    right: 0!important;
    position: relative!important;
}

.logoContainer {
    height: 50%;
    margin-right: 1rem;
}

.logoAndCloseContainer {
    height: 100%;
    margin-right: 1rem;
    display: flex;
    align-items: center;
}

.actionButton {
    margin-left: 1rem;
    height: 100%;
}



.nav-header-main button[type="submit"] {
    padding: 7px 20px;
}

.nav-header-right {
    margin-left: auto;
}

.secondaryNav {
    margin-left: auto;
    padding-left: 0rem;
}


.primaryNav, .secondaryNav {
    height: 100%;
    justify-content: center;
    display: flex;
}

.primaryNav ul,
.secondaryNav ul {
    margin: 0;
}

.primaryNav ul li,
.secondaryNav ul li {
    margin-right: 1rem;
}

.primaryNav ul,
.secondaryNav ul {
    padding: 0!important;
}

.primaryNav ul li:last-child,
.secondaryNav ul li:last-child {
    margin-right: 0;
}

.nav-header-main ul {
    display: flex;
    flex-direction: row;
    color: black;
    text-transform: none;
    list-style: none;
    font-size: 18px;
    align-items: center;
}
.actionButton li {
    list-style: none;
}


.nav-header-main > ul > li {
    margin-left: 10px;
    margin-right: 10px;
}

.nav-header-main > ul > li:first-child {
    margin-left: 0;
}

.nav-header-main > ul > li:last-child {
    margin-right: 0;
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: underline;
    color: black;
}

a:active {
    text-decoration: underline;
    color: black;
}

.header-login {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}

.header-login > a {
    margin-left: 20px;
    margin-right: 20px;
}

.header-logo {
    height: 50% !important;
}

.header-logo > img {
    height: 100%;
}

.headerNavigation div:last-child {
    /*background-color: red;*/
    margin-left: 1rem;
}

.mobileMenuToggle,
.ghostElement {
    display: none;
}

.mobileMenuCloseButton {
    display: none;
}

.headerNavigation {
    position: fixed;
    z-index: 10000;
}

#mobileNavigation {
    display: none;
}

/*@media (min-width: 800px) {*/
/*    .actionButton {*/
/*        margin-right: 1rem;*/
/*    }*/
/*}*/

@media (max-width: 800px) {


    #mobileNavigation {
        display: block;
    }

    .headerNavigation {
        position: fixed;
        z-index: 1000;
    }
    #mobileNavigation {
        z-index: 10000;
    }

    .ghostElement {
        display: block;
        margin-right: 1rem;
        height: 30px;
        width: 30px;
    }


    /* MOBILE MENU CSS GOES HERE */
    .mobileMenuToggle {
        display: block;
    }

    .logoContainer {
        margin: 0!important;
    }

    .nav-header-main {
        justify-content: space-between;
    }

    .primaryNav,
    .secondaryNav,
    .actionButton {
        display: none;
    }

    #mobileNavigation .nav-header-main {
        margin-left: var(--step1)!important;
        margin-right: var(--step1)!important;
        width: calc(100% var(--step2))!important;
    }

    #mobileNavigation .primaryNav,
    #mobileNavigation .secondaryNav,
    #mobileNavigation .actionButton {
        display: flex;
        height: max-content;
        margin-left: 0!important;
    }
    #mobileNavigation .actionButton {
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    #mobileNavigation .logoAndCloseContainer {
        max-height: 100px;
    }
    #mobileNavigation .logoContainer .header-logo > img {
        height: 2rem;
    }

    #mobileNavigation .logoContainer .header-logo {
        height: max-content!important;
        padding-left: 0!important;
    }

    #mobileNavigation .logoContainer {
        height: max-content!important;
        /*margin-bottom: 1rem!important;*/
    }

    #mobileNavigation .nav-header-main {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
    }

    #mobileNavigation .primaryNav ul,
    #mobileNavigation .secondaryNav ul {
        flex-direction: column;
        align-items: self-start;
    }

    #mobileNavigation .primaryNav ul li a,
    #mobileNavigation .secondaryNav ul li a {
        padding: 0.75rem;
        padding-left: 0!important;
    }

    #mobileNavigation .primaryNav {
        margin-bottom: auto;
    }

    #mobileNavigation .mobileMenuCloseButton {
        display: flex;
    }

    #mobileNavigation .logoAndCloseContainer {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        height: max-content;
    }

    #mobileNavigation .ghostElement {
        height: 1rem!important;
    }

    #mobileNavigation .overlay a {
        font-size: 1.25rem!important;
    }

    #mobileNavigation {
        overflow: hidden!important;
    }

    #mobileNavigation .closebtn {
        position: relative;
        top: 0!important;
        right: 0!important;
        font-size: 60px;

        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        width: 3rem;
        color: #F48021!important;
    }

    .overlay {
        height: 0;
        width: 100%;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        /*background-color: rgb(0,0,0);*/
        /*background-color: rgba(0,0,0, 0.9);*/
        background-color: #fff;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        /*font-weight: bold;*/
        /*font-size: 1.5rem;*/
        /*color: #818181;*/
        display: block;
        transition: 0.1s;
    }

    .overlay a:hover, .overlay a:focus {
        color: #F48021;
        text-decoration: underline;
    }

    #mobileNavigation .closebtn:hover, #mobileNavigation .closebtn:focus {
        font-weight: bold;
        text-decoration: none!important;
    }

    /*.overlay .closebtn {*/
    /*    position: absolute;*/
    /*    top: 20px;*/
    /*    right: 45px;*/
    /*    font-size: 60px;*/
    /*}*/

}

.legalContainer {
    text-align: left!important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.collapsibleList, .collapsibleContainerTextAndItems, .inventoryItem, .collapsibleSection, .itemContainer, .main-container body {
    position: relative;
    float:none!important;
}

@media print {
    .inventoryItem {
        page-break-before: always!important;
        page-break-inside: avoid!important;
    }
}

.cookie-banner p {
    margin-top: 3.5rem;
}

.buttonGroupCookieConsent {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.buttonGroupCookieConsent button {
    width: max-content;
    padding: 8px 20px;
    /*margin: 8px 0;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;

    background: linear-gradient(-155deg, rgb(153, 153, 153) 0%, rgb(116, 116, 116) 100%) !important;
    /*background: linear-gradient(-155deg, rgba(57,126,241,1) 0%, rgba(51,82,240,1) 100%) !important;*/

    color: white;

}

.buttonGroupCookieConsent button:hover {
    font-weight: bold;
}

.buttonGroupCookieConsent .js-cookie-dismiss {
    background: linear-gradient(-155deg, rgba(248,175,47,1) 0%, rgba(244,128,33,1) 100%) !important;
}

.cookie-banner h4 {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    width: calc(100%);
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px 20px;

    background: #F58220;
    color: #fff;
}

.cookie-banner {
    border-radius: 3px;
    background-color: #FFF;
    box-shadow: 0 8px 48px rgba(0,0,0,.35)!important;
    padding: 20px;
    position: fixed;
    display: flex;
    flex-direction: column;

    top: 1rem;
    z-index: 100000;
    width: var(--maincontainerwidth)!important;
    margin-left: var(--step0)!important;
    margin-right: var(--step0)!important;
    max-width: 1000px;
    align-self: center;
}

.emptyState svg {
    width: 225px;
    margin-bottom: 1rem;
    margin-left: -25px;
}

/*.inventoryItem {*/
/*    page-break-inside: avoid!important;*/

/*    box-shadow: none!important;*/
/*    border: none!important;*/

/*    display: block;*/
/*    position: relative;*/
/*}*/

.achornHeader {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 0px;
    order: 2;
    overflow: visible;


    /*position: absolute;*/
}

@media (max-width: 1000px) {
    .achornImageHeader img {
        left: 100px;
    }
}
@media (max-width: 350px) {
    .achornImageHeader img {
        display: none;
    }
}

.achornImageHeader {
    width: 500px;
    height: 500px;
    position: relative;

    bottom: 100px;
}

@media (max-width: 500px) {
    .achornImageHeader img {
        left: 175px;
        top: -275px;
    }
}

@media (max-width: 450px) {
    .achornImageHeader img {
        left: 175px;
        top: -255px;
    }
    .heroBannerText {
        width: 45%;
    }
}


@media (max-width: 400px) {
    .achornImageHeader img {
        left: 175px;
        top: -255px;
    }
}

@media (max-width: 375px) {
    .achornImageHeader img {
        left: 175px;
        top: -225px;
    }
}







input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
    font-size: 16px;
}
input[type='text'],
input[type='number'],
textarea {
    font-size: 16px;
}





/*.dropdown-select .option .isCustom {*/
/*    bottom: 10px;*/
/*    right: 5px;*/
/*    width: max-content;*/
/*    height: max-content;*/
/*    position: absolute;*/
/*    !* right: 0; *!*/
/*    display: block;*/
/*    !* float: right; *!*/
/*    margin: 0!important;*/
/*}*/

/*.dropdown-select .option.selected:not(.placeholderOption) {*/
/*    overflow-x: hidden;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*    display: block;*/
/*    !* width: 90%; *!*/
/*    padding-right: 30px;*/
/*    height: max-content;*/
/*}*/


/*@media all and (display-mode: fullscreen) {*/
/*    footer {*/
/*        display: none!important;*/
/*    }*/
/*    !* Here goes the CSS rules that will only apply if app is running standalone *!*/
/*}*/