:root {
    --main-black-kia: #05141F;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans'), local('OpenSans'), url('../../font/googleapi/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url('../../font/googleapi/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../../font/googleapi/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../font/googleapi/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

@font-face {
    font-family: 'FontAwesome';
    src: url("../../font/fontawesome-webfont.eot?v=3.2.1");
    src: url("../../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../../font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Glyphicons';
    src: url("../../font/glyphicons-regular.eot");
    src: url("../../font/glyphicons-regular.eot?#iefix") format("embedded-opentype"), url("../../font/glyphicons-regular.woff") format("woff"), url("../../font/glyphicons-regular.ttf") format("truetype"), url("../../font/glyphicons-regular.svg#glyphicons_halflingsregular") format("svg");
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0px;
    padding: 0px;
    color: black;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    height: 100%;
}

.btn {
    border: 1px solid var(--main-black-kia);
    padding-inline: .5em;
    padding-block: 1em;
    color: var(--main-black-kia);
    background-color: white;
}

.return-login {
    font-weight: bold;

    &:hover {
        text-decoration: underline;
    }
}

body {
    font-family: 'open sans', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    body header {
        border-bottom: 3px solid var(--main-black-kia);
        min-height: 5em;
        flex-shrink: 0;
        padding: 3px;

        a {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 1em;
            height: 100%;

            div {
                padding: 3px;
                text-align: center;

                img {
                    width: 100px;
                    object-fit: cover;
                    margin-top: 10px;
                }

                h1 {
                    letter-spacing: 5px;
                    text-align: center;
                    font-size: 25px;
                }

                h4 {
                    font-size: 13px;
                }
            }
        }
    }

    body main {
        flex: 1;
        min-height: 0;
        overflow: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url('/Images/Imagenlogin_10.png');
        background-size: cover; /* ocupa todo el main */
        background-position: center; /* centrada */
        background-repeat: no-repeat;

        .validation-summary-errors {
            position: relative;
            color: white;
            background-color: var(--main-black-kia);
            padding-inline: 0.5em;
            padding-block: 1em;
            display: flex;
            flex-direction: column;
            box-shadow: 0px 0px 20px 4px #00000057;

            span {
                color: inherit;
                font-weight: bold;
            }

            ul {
                color: inherit;
                font-size: 13px;
                padding-block: 1em;

                li {
                    color: inherit;
                }
            }
        }

        & > div {
            width: 50vw;
            max-width: 450px;
            min-width: 300px;
            padding: 3em;
            display: flex;
            flex-direction: column;
            gap: 1em;

            div.info {
                position: relative;
                color: white;
                background-color: var(--main-black-kia);
                padding-inline: 1em;
                padding-block: 2em;
                box-shadow: 0px 0px 20px 4px #00000057;

                &::before {
                    position: absolute;
                    top: 0.1em;
                    left: .4em;
                    content: "\2139";
                }

                p {
                    color: inherit;
                    text-wrap: pretty;
                    text-align: justify;
                    text-justify: auto;
                    text-align: center;
                }

                ul {
                    color: inherit;
                    list-style: none;

                    li {
                        color: inherit;
                    }
                }
            }

            div.warn {
                position: relative;
                color: white;
                background-color: var(--main-black-kia);
                padding-inline: 1em;
                padding-block: 2em;

                &::before {
                    position: absolute;
                    top: 0.1em;
                    left: .4em;
                    content: "\26A0";
                }
            }

            form {
                display: flex;
                flex-direction: column;
                gap: .6em;

                input[type='text'], input[type='password'] {
                    padding-inline: .5em;
                    padding-block: 1em;
                }

                input[type='button'], button, input[type='submit'] {
                    border: none;
                    padding-inline: .5em;
                    padding-block: 1em;
                    color: white;
                    background-color: var(--main-black-kia);
                    cursor: pointer;
                }

                a#lnkPasswordRecovery {
                    font-weight: bold;
                }
            }
        }
    }

    body footer {
        border-top: 3px solid black;
        min-height: 7em;
        flex-shrink: 0;
        padding-inline: 3em;
        background-color: var(--main-black-kia);
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        span {
            color: inherit;
        }
    }
}