:root {
    /* Logo / sizing */
    --logo: url(../CustomerFiles/Images/LogoHvid.png);
    --logo-width: 225px;
    --logo-height: 46px;
    --navbar-height: 66px;

    /* Brand */
    --text-color: #29303b;
    --v-interaction-color: #147BBF;
    --v-secondary-color: #147BBF;
    --v-background-color: #f2f3f5;
    --navnbar-background-color: #103166;
    --card-background-color: #FFFFFF;
    --container-padding: 0 15px 0;

    /* Typography */
    /*--font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");*/
    --font-family: Arial;

    /* Navbar */
    --navnbarBorderBottom: 1px solid #e5e7eb;

    /* Buttons */
    --buttonFontWeigth: 400;
    --buttonColor: #FFFFFF;
    --buttonBorderColor: var(--v-interaction-color);
    --buttonBackgroundColor: var(--v-interaction-color);
    --buttonColorHover: #FFFFFF;
    --buttonBorderColorHover: var(--v-secondary-color);
    --buttonBackgroundColorHover: var(--v-secondary-color);
    --externalButtonColor: #FFFFFF;
    --externalButtonBorderColor: var(--v-interaction-color);
    --externalButtonBackgroundColor: var(--v-interaction-color);
    --externalButtonColorHover: #FFFFFF;
    --externalButtonBorderColorHover: var(--v-secondary-color);
    --externalButtonBackgroundColorHover: var(--v-secondary-color);
    --buttonPadding: 8px 16px;
    --buttonBoxShadowHover: none;
    --buttonBorderRadius: 10px;
    --button-border: none;
    --btn-text-transform: none;

    /* Links */
    --link-color: #147BBF;
    --link-color-hover: #147BBF;
    --link-text-decoration: underline;
    --link-text-decoration-hover: underline;
    --link-text-transform: none;

    /* Cards */
    --card-margin-top: 16px;
    --bs-card-border-width: 0px;
    --bs-card-border-color: #e5e7eb;
    --card-border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    --card-border-radius: 10px;
    --card-box-shadow: none;

    /* Inputs */
    --inputTextColor: var(--text-color);
    --inputBackgroundColor: #f2f3f5;
    --inputBorderColor: #e5e7eb;
    --inputBackgroundColorFocus: #f2f3f5;
    --inputBorderColorFocus: none;
    --inputBoxShadowFocus: none;
    --inputCheckBoxBackgroundColor: #29a581;
    --inputBorderRadius: 8px;
}

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);
    border-bottom: var(--navnbarBorderBottom);
}

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(--buttonBorderRadius);
    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(--buttonBoxShadowHover);
    border-radius: var(--buttonBorderRadius);
    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);
    border-radius: var(--inputBorderRadius);
}

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

input.form-check-input:checked:focus,
.form-check-input:checked {
    background-color: var(--inputCheckBoxBackgroundColor);
}