@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700");

:root {
    --bg-color: #760b0b;
    --bg-light: #9c0828;
}

body {
    position: relative;
    height: 100vh;
    margin: 0;
    font-family: "Josefin Sans", sans-serif;
    background-size: cover;
    background-position: center;
    background-color: transparent !important;
    overflow-y: hidden;
}


.videoplayer {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

.rawvideo {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

.login-screen {
    opacity: 0.7;
    min-height: auto;
    min-width: 340px;
    max-width: 550px;
    width: 33%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    margin: 0px
}

.left-item {
    width: 400px;
    height: 450px;
    margin: 40px auto;
    background-color: #fff;
    border-radius: 7px;
}


.devdiv {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
}

.login-screen .left-item .login-panel {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
}

    .login-screen .left-item .login-panel .inner-login-panel {
        display: table-cell;
        vertical-align: middle;
    }

        .login-screen .left-item .login-panel .inner-login-panel .content-panel {
            padding: 0 30px;
            text-align: center;
        }

            .login-screen .left-item .login-panel .inner-login-panel .content-panel .title {
                text-align: center;
                margin: 0 0 40px 0;
                text-transform: uppercase;
                font-size: 2em;
                color: var(--bg-color);
            }

            .login-screen .left-item .login-panel .inner-login-panel .content-panel input {
                border: 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                outline: none;
                width: 100%;
                padding: 6px 0;
                color: var(--bg-color);
                text-transform: uppercase;
                font-weight: 500;
            }

            .login-screen .left-item .login-panel .inner-login-panel .content-panel select {
                border: 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                outline: none;
                width: 100%;
                padding: 6px 0;
                color: var(--bg-color);
                text-transform: uppercase;
                font-weight: 500;
            }

            .login-screen
            .left-item
            .login-panel
            .inner-login-panel
            .content-panel
            input + input {
                margin-top: 20px;
            }

            .login-screen .left-item .login-panel .inner-login-panel .content-panel button {
                background-color: var(--bg-color);
                border: 0;
                outline: none;
                color: #fff;
                text-transform: uppercase;
                padding: 12px 15px;
                font-weight: 500;
                border-radius: 2px;
                width: 100%;
                margin-top: 10px;
                box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.3);
                cursor: pointer;
            }

/* Responsive */
@media (max-width: 768px) {
    .login-screen {
        width: 700px;
    }
}

@media (max-width: 767px) {
    .login-screen {
        width: 300px;
    }

        .login-screen .left-item {
            width: 100%;
        }

            .login-screen .left-item .login-panel .inner-login-panel .content-panel button {
                margin-top: 40px !important
            }
}

.content-panel input {
    margin-top: 10px;
}

.validation-summary-errors ul {
    list-style-type: none;
    padding: 0px;
    /* background: red; */
    color: red;
    /* font-weight: bold; */
    border-radius: 4px;
}

span.field-validation-error {
    color: red;
    float: left;
    display: inline-block;
    margin-bottom: 10px;
}

.retail_headig {
    margin-bottom: 0px !important;
    font-size: 16px !important;
    font-weight: bold;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(0, 0, 0, 0.38);
    font-weight: 500;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(0, 0, 0, 0.38);
    font-weight: 500;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(0, 0, 0, 0.38);
    font-weight: 500;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(0, 0, 0, 0.38);
    font-weight: 500;
}