.dropdown_wrapper{
            display: flex;
            flex-direction: column;
        }
        .dropdown{
            position: absolute;
            background-color: white;
            border-radius: var(--radius-cards);
            border: var(--strong-border);
            display: none;
            width: fit-content;
        }
        .dropdown > .contents > div + div{
            border-top: var(--strong-border);
        }
        .dropdown > .contents > div{
            text-align: center;
            padding: var(--element-gap);
            color: var(--color-fog);
        }
        .dropdown > .contents > div:hover{
            color: var(--color-mist);
        }
        .modal{
            border: solid 1px var(--color-smoke);
            border-radius: var(--radius-cards);
            padding: var(--card-padding);
            width: fit-content;
            position: absolute;
            background-color: var(--color-obsidian);
            z-index: 200;
            zoom: 110%;
        }
        .modal, .dropdown{
            background-color: var(--color-obsidian);
        }
        .modal_content input{
            background: var(--color-carbon);
            color: var(--color-mist);
            border: 2px solid var(--color-graphite);
            border-radius: var(--radius-inputs);
            padding: var(--spacing-4);
        }
        .modal_content input:focus{
            outline: 1px solid var(--color-smoke);

        }
        .modal_content select{
            background: var(--color-carbon);
            color: var(--color-mist);
            border: 2px solid var(--color-graphite);
            border-radius: var(--radius-inputs);
            padding: var(--spacing-4);
        }
        .modal_content select:focus{
            outline: 1px solid var(--color-smoke);
        }
        .modal_heading .title{
            color: var(--color-paper);
        }


        .product_name{
            font-size: var(--text-heading-sm);
        }
        .product_name input{
            all: unset;
            font-size: var(--text-subheading);
            border-bottom: var(--strong-border);
            flex: 1;
            margin-left: var(--spacing-16) !important;
        }
        .modal form{
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing-unit) * 10);
        }
        .form_group{
            display: flex;
            gap: var(--element-gap);
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .modal_content{
            display: flex;
            gap: calc(var(--section-gap));
        }
        .modal_content > div{
            display: flex;
            flex-direction: column;
            gap: var(--spacing-16);
        }
        .modal_content .heading{
            font-size: var(--text-caption);
            font-weight: var(--font-weight-w510);
        }
        .modal_content .form_group input, .modal_content .form_group > select{
            box-sizing: border-box;
            width: 70%;
        }
        .modal_content .form_group_double{
            div{
                display: flex;
                width: 70%
            }
            input:first-child{
                flex:1;
            }
        }
        .modal_content .form_group{
            width: 350px;
            color: var(--color-fog)
        }
        .modal_footer{
            display: flex;
            justify-content: space-between;
        }
        .modal_footer div{
            display: flex;
            gap: var(--element-gap);
        }
        .modal .caption{
            text-align: end;
            font-size: var(--text-caption);
        }
        .modal .title{
            font-size: var(--text-subheading);
        }
        .cancel, .clear, .confirm{
            background-color: var(--color-obsidian);
            padding: var(--spacing-8);
            border-radius: var(--radius-buttons);
            border: var(--strong-border);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--element-gap);
        }

        #modal_brand_menu, #modal_category_menu, #modal_location_menu{
            right: 0;

            .searchbox{
                all: unset;
            }
            .search_wrapper{
                display: flex;
                flex-direction: row;
                gap: var(--element-gap);
                align-items: center;
                background-color: var(--color-carbon);
                color: var(--color-fog);
                border: 2px solid var(--color-graphite);
                border-radius: var(--radius-inputs);
                padding: var(--spacing-4);
            }
            .search_wrapper input{
                flex: 1;
            }

            table{
                background: var(--color-carbon);
                padding: var(--spacing-4);
                border-radius: var(--radius-inputs);
                border: 2px solid var(--color-graphite);
            }
            th{
                border-bottom:2px solid var(--color-graphite);
                text-align: center;
                font-weight: 400;
            }
            th span{
                font-size: var(--text-subheading) !important;
            }
        }

#modal_brand_menu,
#modal_category_menu,
#modal_location_menu{
    width: 260px;
    max-width: none;
}