:root {
    --logo: url(../CustomerFiles/Images/logo-ffd.webp);
    --logo-width: 394px;
    --logo-height: 46px;
    --navbar-height: 100px;
    --text-color: #000000;
    --v-interaction-color: #d51310;
    --v-secondary-color: #d51310E6;
    --v-background-color: #FFFFFF;
	--navnbar-background-color: #FFFFFF;
    --card-background-color: #FFFFFF;
    --buttonFontWeigth: bold;
    --buttonColor: #FFFFFF;
    --buttonBorderColor: var(--v-interaction-color);
    --buttonBackgroundColor: var(--v-interaction-color);
    --buttonColorHover: #FFFFFF;
    --buttonBorderColorHover: var(--v-interaction-color);
    --buttonBackgroundColorHover: var(--v-secondary-color);
    --externalButtonColor: #FFFFFF;
    --externalButtonBorderColor: var(--v-interaction-color);
    --externalButtonBackgroundColor: var(--v-interaction-color);
    --externalButtonColorHover: #FFFFFF;
    --externalButtonBorderColorHover: var(--v-interaction-color);
    --externalButtonBackgroundColorHover: var(--v-secondary-color);
    --buttonPadding: 15px 35px;
	--btn-shadow-hover: none;
	--btn-border-radius: 0;
    --button-border: none;
    --btn-text-transform: none;
	--container-padding: 0 15px 0;
    --link-color: #d51310;
    --link-color-hover: #d51310;
	--link-text-decoration: none;
	--link-text-decoration-hover: underline;
    --link-text-transform: none;
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(0, 0, 0, 0.175);
    --card-margin-top: 15px;
    --card-border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    --card-border-radius: none;
    --card-box-shadow: none;
    --inputTextColor: var(--text-color);
    --inputBackgroundColor: inherit;
    --inputBorderColor: inherit;
    --inputBackgroundColorFocus: inherit;
    --inputBorderColorFocus: inherit;
    --inputBoxShadowFocus: inherit;
}

body {
    font-family: var(--font-family);
    background-color: var(--v-background-color);
}

.logo{
    background-image: var(--logo);
    margin-right: 0;
    height: var(--logo-height);
    width: var(--logo-width);
	background-size: var(--logo-width) var(--logo-height);
}

.h-100 {
    justify-content: center;
}

.navbar {
    justify-content: center;
	height: var(--navbar-height);
	padding: 20px 10px;
    background-color: var(--navnbar-background-color);
}

main > .container {
    padding: var(--container-padding);
}

a,
.btn.btn-link {
    color: var(--link-color);
    text-decoration: var(--link-text-decoration);
    text-transform: var(--link-text-transform);
}

a:hover,
.btn.btn-link:hover {
    color: var(--link-color-hover);
    text-decoration: var(--link-text-decoration-hover);
}

.btn.btn-primary,
a.btn.btn-primary {
    background-color: var(--buttonBackgroundColor);
    border-color: var(--buttonBorderColor);
    color: var(--buttonColor);
    padding: var(--buttonPadding);
    border: var(--button-border);
    border-radius: var(--btn-border-radius);
    text-transform: var(--btn-text-transform);
    font-weight: var(--buttonFontWeigth);
    text-decoration: none;
}

.btn.btn-primary:hover,
a.btn.btn-primary:hover {
    background-color: var(--buttonBackgroundColorHover);
    border-color: var(--buttonBorderColorHover);
    color: var(--buttonColorHover);
    box-shadow: var(--btn-shadow-hover);
    border-radius: var(--btn-border-radius);
    text-decoration: none;
}

.external-providers .btn.btn-primary,
.external-providers a.btn.btn-primary {
    background-color: var(--externalButtonBackgroundColor);
    border-color: var(--externalButtonBorderColor);
    color: var(--externalButtonColor);
}

.external-providers .btn.btn-primary:hover,
.external-providers a.btn.btn-primary:hover {
    background-color: var(--externalButtonBackgroundColorHover);
    border-color: var(--externalButtonBorderColorHover);
    color: var(--externalButtonColorHover);
}

@media (min-width: 576px) {
    .col-sm-6 {
        width: 75%;
    }

    .offset-sm-3 {
        margin-left: 12.5%;
    }
}

.card {
    --bs-card-color: var(--text-color);
    margin-top: var(--card-margin-top);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    background-color: var(--card-background-color);
}

.card-body {
    padding: 2rem;
}

.login-page .m-3 {
    margin: 1rem 0 !important;
}

input.form-control,
input.form-check-input,
.form-check-input:checked {
    background-color: var(--inputBackgroundColor);
    border-color: var(--inputBorderColor);
    color: var(--inputTextColor);
}

input.form-control:focus,
input.form-check-input:focus,
.btn:focus-visible {
    background-color: var(--inputBackgroundColorFocus);
    border-color: var(--inputBorderColorFocus);
    box-shadow: var(--inputBoxShadowFocus);
}