﻿body,
html {
    height: 100%;
    margin: 0px;
    font-family: futuraStdMedium,Arial,sans-serif;
}


@font-face {
    font-family: 'futuraStdBold';
    src: url('/fonts/FuturaStd-Bold.eot');
    src: url('fonts/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/FuturaStd-Bold.woff2') format('woff2'), url('fonts/FuturaStd-Bold.woff') format('woff'), url('fonts/FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family: 'futuraStdHeavy';
    src: url('fonts/FuturaStd-Heavy.eot');
    src: url('fonts/FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'), url('fonts/FuturaStd-Heavy.woff2') format('woff2'), url('fonts/FuturaStd-Heavy.woff') format('woff'), url('fonts/FuturaStd-Heavy.svg#FuturaStd-Heavy') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family: 'futuraStdMedium';
    src: url('fonts/FuturaStd-Medium.eot');
    src: url('fonts/FuturaStd-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/FuturaStd-Medium.woff2') format('woff2'), url('fonts/FuturaStd-Medium.woff') format('woff'), url('fonts/FuturaStd-Medium.svg#FuturaStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family: 'futuraStdBook';
    src: url('fonts/FuturaStd-Book.eot');
    src: url('fonts/FuturaStd-Book.eot?#iefix') format('embedded-opentype'), url('fonts/FuturaStd-Book.woff2') format('woff2'), url('fonts/FuturaStd-Book.woff') format('woff'), url('fonts/FuturaStd-Book.svg#FuturaStd-Book') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family: 'futuraStdLight';
    src: url('fonts/FuturaStd-Light.eot');
    src: url('fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'), url('fonts/FuturaStd-Light.woff2') format('woff2'), url('fonts/FuturaStd-Light.woff') format('woff') url('fonts/FuturaStd-Light.svg#FuturaStd-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

.login {
    padding: 0
}

    .login, .login .row {
        height: 100%
    }

        .login.rk .img-block {
            background: url("../img/bg.jpg") no-repeat;
            background-size: cover;
            background-position: center;
            height: 100vh;
            position: fixed;
            width: 100%;
        }

        .login .navbar-nav {
            align-items: center;
            flex-direction: row;
            display: flex;
            list-style: none;
            padding: 0;
        }

            .login .navbar-nav .navItem {
                margin: 0;
                padding: 0
            }

                .login .navbar-nav .navItem .nav-link {
                    padding: 0 0.5rem;
                    cursor: pointer;
                    font-weight: 800;
                    color: #007bff;
                    font-family: futuraStdMedium;
                    font-size: .875rem;
                }

                    .login .navbar-nav .navItem .nav-link.link {
                        text-decoration: none;
                    }

.login-text {
    font-size: 15px;
    font-weight: bold;
    color: #191919;
}

.login .navbar-nav .navItem.lineSeparatorRight {
    margin-top: 0;
    border-right: 2px solid #404040;
}

    .login .navbar-nav .navItem.lineSeparatorRight:after {
        position: absolute;
        content: "";
        width: 2px;
        height: 16px;
        top: calc(50% - 8px);
        right: -2px;
    }

.login .navbar-nav .version {
    padding-left: 40px
}

    .login .navbar-nav .version .nav-link {
        font-family: futuraStdMedium;
        cursor: pointer
    }

.login .login-box {
    background: hsla(0, 0%, 100%, .9);
    border-radius: 2px;
    max-width: 55%;
    width: 100%;
    position: absolute;
    top: calc(50% - 180px);
    right: 0;
    left: 0;
    margin: 0 auto;
    min-height: 260px;
    display: flex;
    box-shadow: 0 0 6px 4px rgba(0, 0, 0, .2)
}

    .login .login-box .container {
        padding-right: 30px;
        padding-left: 30px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .login .login-box .container .login-form {
            border-bottom: 2px solid #343433;
            padding-top: 5px
        }

            .login .login-box .container .login-form h3 {
                text-transform: capitalize;
                font-size: 1.3rem
            }

            .login .login-box .container .login-form h3 {
                margin-bottom: 40px
            }

            .login .login-box .container .login-form .login-header {
                border-bottom: 2px solid #343433;
                padding-bottom: 0px;
                display: flex;
                margin-bottom: 15px;
                align-items: center;
            }

                .login .login-box .container .login-form .login-header .headerBrandTxt {
                    color: #191919;
                    font-weight: bold;
                    font-family: futuraStdHeavy;
                    font-size: 24px;
                    width: 70%;
                }

                .login .login-box .container .login-form .login-header .login-right-section {
                    margin-left: auto
                }

            .login .login-box .container .login-form .login-block {
                position: relative;
                padding-bottom: 15px;
            }

                .login .login-box .container .login-form .login-block .reportsRadioButton {
                    margin-bottom: 0;
                    font-size: 14px;
                    color: #404040
                }

                    .login .login-box .container .login-form .login-block .reportsRadioButton.radiotext {
                        color: #7f7f7f;
                        font-size: 12px;
                        margin-top: 5px
                    }

                .login .login-box .container .login-form .login-block .createFormgroup .bar,
                .login .login-box .container .login-form .login-block .createFormgroup input {
                    width: 100% !important;
                    background: transparent
                }

                    .login .login-box .container .login-form .login-block .createFormgroup .bar:focus ~ label,
                    .login .login-box .container .login-form .login-block .createFormgroup input:focus ~ label {
                        top: -1.5rem;
                        font-size: 12px
                    }

                .login .login-box .container .login-form .login-block .createFormgroup label {
                    font-size: 14px;
                    left: 0
                }

                    .login .login-box .container .login-form .login-block .createFormgroup label.focused {
                        top: -1.5rem;
                        font-size: 12px
                    }

        .login .login-box .container .login-footer {
            border-bottom: transparent;
            margin-bottom: 10px;
        }

            .login .login-box .container .login-footer .navbar-nav {
                flex-direction: row;
                margin-bottom: 10px;
                width: 100%
            }

                .login .login-box .container .login-footer .navbar-nav li {
                    padding-left: 1rem;
                    padding-right: 1rem;
                    position: relative
                }

                    .login .login-box .container .login-footer .navbar-nav li:first-child {
                        padding-left: 0
                    }

                    .login .login-box .container .login-footer .navbar-nav li:after {
                        position: absolute;
                        content: "";
                        width: 2px;
                        background-color: #404040;
                        height: 100%;
                        top: 0;
                        right: 0
                    }

                    .login .login-box .container .login-footer .navbar-nav li:last-child:after {
                        display: none
                    }

                    .login .login-box .container .login-footer .navbar-nav li a {
                        padding: 0;
                        color: #007bff;
                        cursor: pointer;
                        font-weight: 600;
                        font-size: 12px;
                        font-family: futuraStdMedium;
                        text-decoration: none;
                    }

            .login .login-box .container .login-footer .footer-info {
                color: #404040;
                font-size: 12px;
                font-family: futuraStdMedium;
            }

.form-container .column-section {
    float: left;
    width: 50%;
}

.form-container {
    display: flex;
    width: 100%;
}

    .form-container .form-group input {
        padding: 12px 0px;
        background: transparent;
        border: none;
        border-bottom: 2px solid #a7a4a4;
        font-weight: 700;
        width: 100%;
    }

        .form-container .form-group input:focus {
            outline: none;
        }

.mr-3 {
    margin-right: 20px;
}

.btn {
    border: none;
    color: #fff;
    font-weight: bold;
    font-family: futuraStdBold,Arial,sans-serif;
    padding: .75rem 1.05rem 0.65rem;
    font-size: .75rem;
    line-height: 1;
    min-width: 60px;
    cursor: pointer;
    letter-spacing: 0.025rem;
}

    .btn:disabled,
    .btn.disabled {
        pointer-events: none;
        color: #ffffff;
        background-color: #a6a6a6;
        border-color: #a6a6a6;
        box-shadow: none;
    }

    .btn:hover {
        color: #ffffff;
        border-color: #a6a6a6;
        background-color: #a6a6a6;
    }


.mt-10 {
    margin-top: 1.5rem;
}

.footer-btn .btn:focus {
    outline: none;
}

.pwd_rst {
    float: right;
    font-weight: 800;
    font-family: futuraStdMedium;
    font-size: .8rem;
    margin-top: 5px;
    cursor: pointer;
}

    .pwd_rst a {
        color: #007bff;
        text-decoration: none;
    }

.pwd-reset-form {
    border-bottom: none !important;
}

.pwd-reset-text {
    font-size: 14px;
    font-weight: bold;
    color: #191919;
    line-height: 20px;
}

/* Popup box BEGIN */
.dialogOpen {
    background: rgba(0,0,0,.4);
    display: none;
    height: 100%;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10000;
}

    .dialogOpen .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .dialogOpen > .dialogSection {
        background-color: #fff;
        display: inline-block;
        min-height: 100px;
        vertical-align: middle;
        width: 44%;
        position: relative;
        padding: 10px 1%;
    }

.popupCloseButton, .hcPopupCloseButton {
    background-color: #fff;
    cursor: pointer;
    font-family: arial;
    font-size: 20px;
    line-height: 30px;
    width: 10px;
    height: 30px;
    text-align: center;
    float: right;
}


.popupContainer {
    border: 1px solid #f49600;
    float: left;
    width: 100%;
}

.popupTitle {
    width: 98%;
    float: left;
    border: 1px solid #f49600;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 1%;
    text-align: left;
    font-family: futuraStdHeavy;
    color: #262626;
    font-size: .875rem;
    text-transform: uppercase;
}

.popupContent {
    width: 96%;
    float: left;
    padding: 2%;
    max-height: 400px;
    overflow-y: scroll;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    font-family: futuraStdMedium;
    color: #262626;
}

    .popupContent p .popupLink {
        text-decoration: underline;
        color: #3071a5;
        cursor: pointer;
    }

.popupFooter {
    width: 98%;
    float: left;
    border: 1px solid #f49600;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding: 1%;
    text-align: left;
}

.btn-done {
    font-family: futuraStdBold,Arial,sans-serif;
    padding: .7rem .75rem .6rem;
    border-radius: 0;
    font-size: .75rem;
    line-height: 1;
    min-width: 60px;
    cursor: pointer;
    border: none;
    color: #fff;
    font-weight: bold;
}

.primaryBtn {
    background: #dd1d21;
    color: #fff;
}

.secondaryBtn {
    background: #000;
    color: #fff;
}

secondaryBtn:hover {
    color: #000;
    border-color: #000;
}

.secondaryBtn:active, .secondaryBtn:focus, .secondaryBtn:visited {
    background: #000;
    color: #fff;
}


.login-box.contact-box {
    min-height: 165px;
}

.rk .submit {
    background: #E7792B;
}

.priesTrans .nav-link {
    color: #003C88 !important;
}

.priesTrans .pwd_rst {
    color: #003C88 !important;
}

.priesTrans .btn-done {
    background: #003C88 !important;
    color: #fff;
}

.priesTrans .navbar-nav li a {
    color: #003C88 !important;
}

.priesTrans .submit {
    background: #003C88;
}

.priesTrans .popupContainer {
    border: 1px solid #003C88;
}

.priesTrans .popupFooter {
    border: 1px solid #003C88;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.priesTrans .popupTitle {
    border: 1px solid #003C88;
    border-top: none;
    border-left: none;
    border-right: none;
}


.login.priesTrans .img-block {
    background: url("../img/pt_bg.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: fixed;
    width: 100%;
}

.rk .reset {
    background: #000;
}

.priesTrans .reset {
    background: #FBCE07;
    color: #000;
}

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

.priesTrans .toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "PREIS TRANS";
}

.rk .toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "COMPRICE - RHEINLAND KRAFTSTOFF";
}

/*new css*/
.pt-15 {
    padding-top: 15px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.priesTrans .min-height-240 {
    min-height: 240px;
}

.errorMessage {
    background: #ffe9e9;
    color: #ff3133;
}

.successMessage {
    background: #e9f7fe;
    color: #61b131;
}

    .successMessage p {
        margin-bottom: 0;
    }



.errorMessage,
.successMessage,
.infoMessage {
    /*min-height: 2.2rem;*/
    font-size: 0.8rem;
    font-family: $futuraBook;
    /*line-height: 1.4;*/
    /*padding: 0.6rem 1.4rem 0.5rem 0.625rem;*/
    margin-bottom: 0.625rem;
    padding: 0.5rem;
    margin: 5px auto;
    max-width: 70%;
}

infoMessage .inputDialog, infoMessage .inputContainer {
    margin-bottom: 1.4rem;
}

/*.inputContainer & {
    margin-top: -1rem;
}*/


.no-margin {
    margin: 0;
}

ul {
    list-style-type: none;
}

.errorMessage > ul, .successMessage > ul {
    margin: 0;
    padding: 0;
}

.mt-3 {
    margin-top: 1rem;
}

.password-rules-box {
    border: 1px solid #343433;
    padding: 10px;
    font-size: 0.8rem;
}

    .password-rules-box div {
        line-height: 1.25rem;
    }

.field-validation-valid {
    display: none;
}

.field-validation-error {
    color: #ff3133;
    font-size: 0.7rem;
    font-family: $futuraBook;
}

.successIcon, .errorIcon {
    float: right;
    cursor: pointer;
    position: relative;
    top: 2px;
    background: none;
    border: none;
    font-weight: bold;
}

.successIcon {
    color: #61b131;
}

.errorIcon {
    color: #ff3133;
}

.red {
    color: red;
}
.highlight {
    background-color: yellow;
}
ul.disc li{
    list-style-type: disc;
}