:root {
	--logo: url(../CustomerFiles/Images/Spillerforeningen.png);
	--logo-width: 110px;
	--logo-height: 100px;
	--navbar-height: 100px;
    --v-interaction-color: #59756f;
    --v-secondary-color: #37625b;
    --v-background-color: #FFFFFF;
    --navnbar-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);
    --btn-shadow-hover: none;
	--btn-border-radius: 0;
    --btn-text-transform: none;
	--container-padding: 0 15px 0;
	--link-color: #40716a;
	--link-color-hover: #40716a;
	--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: 0.375rem;
    --card-box-shadow: none;
}

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: 15px 35px;
    border: none;
    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;
}

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

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

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

.card-body {
    padding: 2rem;
}

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