@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

body.neds {
    --body-background: linear-gradient(0deg, #ff6000, #ff7800);
    --brand-image-url: url("/static/images/neds.svg");
    --button-background: #ff7800;
    --button-background-hover: #ff6000;
    --button-color: #ffffff;
    --button-outlined-background: #ffffff;
    --button-outlined-color: #ff7800;
    --button-outlined-color-hover: #ff6000;
    --input-field-border-focus-color: #ff7800;
}

body.ladbrokes {
    --body-background: #d32123;
    --brand-image-url: url("/static/images/ladbrokes.svg");
    --button-background: #232323;
    --button-background-hover: #353535;
    --button-color: #ffffff;
    --button-outlined-background: #ffffff;
    --button-outlined-color: #232323;
    --button-outlined-color-hover: #353535;
    --input-field-border-focus-color: #d32123;
}

body.betstar {
    --body-background: #0366cc;
    --brand-image-url: url("/static/images/betstar.svg");
    --button-background: #f36f21;
    --button-background-hover: #ff7d2f;
    --button-color: #ffffff;
    --button-outlined-background: #ffffff;
    --button-outlined-color: #f36f21;
    --button-outlined-color-hover: #ff7d2f;
    --input-field-border-focus-color: #f36f21;
}

body.bookmaker {
    --body-background: #252525;
    --brand-image-url: url("/static/images/bookmaker.svg");
    --button-background: #fbc300;
    --button-background-hover: #e4a609;
    --button-color: #000000;
    --button-outlined-background: #ffffff;
    --button-outlined-color: #232323;
    --button-outlined-color-hover: #353535;
    --input-field-border-focus-color: #fbc300;
}


html, body {
    margin: 0;
	padding: 0;
}

body {
    background: var(--body-background);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

* {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

/* helpers */
.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* alerts */
.alert {
    border-radius: 5px;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
}

.alert.error {
    background: #ffdddd;
    border: 1px solid #ff5252;
    color: #ff5252;
}

.alert.info {
    background: #e2effa;
    border: 1px solid #2196f3;
    color: #2196f3;
}

/* button */
.button {
    background: var(--button-background);
    border: none;
    border-radius: 5px;
    color: var(--button-color);
    cursor: pointer;
    font-size: 1.1rem;
    height: 40px;
    outline: none;
    padding: 0 10px 0 10px;
    transition: background .2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button:hover {
    background: var(--button-background-hover);
}

.button.disabled:hover {
    background: var(--button-background)
}

.button.outlined {
    background: var(--button-outlined-background);
    border-width: 1px;
    border-style: solid;
    border-color: var(--button-outlined-color);
    color: var(--button-outlined-color);
}

.button.outlined:hover {
    background: var(--button-outlined-background);
    border-color: var(--button-outlined-color-hover);
    box-shadow: inset var(--button-outlined-color-hover) 0px 0px 0px 1px;
    color: var(--button-outlined-color-hover);
}

.button.outlined.disabled:hover {
    border-color: var(--button-outlined-color);
    box-shadow: none;
    color: var(--button-outlined-color);
}

/* brand-image */
.brand-image {
    background-image: var(--brand-image-url);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 20px;
    margin-top: 20px;
    height:  50px;
    width: 100%;
}

/* card */
.card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    padding: 20px;
    margin-bottom: 20px;
    width: calc(100% - 40px);
}

/* container */
.container {
    width: 240px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container.wide {
    width: 240px;
}

@media only screen and (min-width: 360px) {
    .container {
        width: 320px;
    }

    .container.wide {
        width: 340px;
    }
}

@media only screen and (min-width: 480px) {
    .container {
        width: 320px;
    }

    .container.wide {
        width: 460px;
    }
}

/* inner-container */
.inner-container {
    max-width: 260px;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* input */
.input-field {
    padding:10px;
    border: none;
    background: #ffffff;
    color: #000000;
    display: block;
    font-size: 1rem;
    border-bottom: 1px solid #9196a1;
    transition: border-bottom-color .25s ease;
}

.input-field:focus {
    outline: none;
    border-bottom-color: 5px;
}

.input-field-group {
    display: flex;
    flex-direction: column;
}

.input-field-group>:not(:first-child) {
    margin-top: 5px;
}

.input-field-label {
    font-weight: 700;
}

.separator:after {
    content: "";
    width: 100%;
    border-top: 1px solid rgb(204 204 204);
    margin: 20px 0px;
    display: block;
}