:root {
    --primary: rgba(252, 103, 34, 1);
    --primary-light: rgba(253, 195, 173, 0.7);
    --primary-shaded: rgba(252, 103, 34, 0.7);
    --primary-hover: rgb(55, 65, 81, 1);
    --footer: rgb(31, 41, 55, 1);

    --primary-button: rgba(252, 103, 34, 1);
    --primary-button-hover: rgba(252, 103, 34, 0.7);

    --primary-text: rgba(255, 255, 255, 1);
    --pop-up-text: rgba(255, 255, 255, 1);

    --checkbox-fill-color: rgba(252, 103, 34, 1);
    --primary-text-hover: rgb(55, 65, 81, 1);

    --step-circle: rgba(252, 103, 34, 1);
    --step-circle-number: rgba(252, 103, 34, 1);
    --highlight-text: rgba(252, 103, 34, 1);
    --border-color: rgba(254, 109, 10, 1);

    --hamburger-color: rgba(255, 255, 255, 1);

    --invoice-text-color: rgba(0, 0, 0, 0.8);
    --invoice-download-color: rgba(252, 103, 34, 1);

}

.orange-background{
    --tw-bg-opacity: 1;
    background-color: var(--primary);
}

.light-orange-background{
    --tw-bg-opacity: 1;
    background-color: var(--primary-light);
}

.light-orange-table{
    background-color: var(--primary-light);
}

.orange-text{
    --tw-bg-opacity: 1;
    color: rgb(252 103 34 / var(--tw-bg-opacity));
}

.white-text{
    --tw-bg-opacity: 1;
    color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.hover-text-color{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}