/* Next 2 needed for sticky footer - from https://getbootstrap.com/docs/5.0/examples/sticky-footer/ example */

html, body, form {
    height: 100% !important;
    flex-direction: column !important;
    display: flex !important;
}

@media only screen and (min-width: 992px) {
    .pe-5 {
        padding-right: 0em !important;
    }

    .footer .text-md-end a {
        padding-right: 3rem !important;
    }
}

@media only screen and (max-width: 575px) {
    .pe-5 {
        padding-left: 0em !important;
        padding-right: 0em !important;
    }
}

    /*login photo*/
    body {
        background-image: url(images/pattern.png), url(images/login.jpg);
        background-repeat: no-repeat;
        background-size: contain, cover;
        background-position: right bottom 40px, left bottom;
        background-attachment: fixed;
    }

    @media only screen and (max-width: 575px) {
        body {
            background-size: 60%, cover;
            background-position: right bottom 88px, left bottom;
        }
    }

    .ilbox {
        background: #ffffff;
        padding: 30px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

        .ilbox img.login-logo, .ilbox .headerPane, .ilbox .contentPane {

        }

@media only screen and (max-width: 575px) {
    .ilbox img.login-logo {
        padding-left: 0px;
        padding-right: 0px;
    }
}

    @media only screen and (max-width: 575px) {
        .ilbox {
            margin-bottom: 350px;
        }
    }

    /*above login panel*/
    #LoginContent p {
        margin-bottom: 0px;
    }

    /*login panel*/
    .contentPane {
        margin-top: 10px;
    }

    form {
        flex-direction: column !important;
        display: flex !important;
    }

    .Normal {
        margin-bottom: 30px;
    }

        .Normal p, .Normal a {
            color: var(--bs-primary-text);
        }

            .Normal a:hover {
                text-decoration: none;
            }

    /*logo*/
    .login-logo {
        margin-bottom: 45px;
    }

    @media only screen and (max-width: 575px) {
        .login-logo {
            margin-bottom: 25px;
        }

        .headerPane {
            padding-top: 20px;
            background: linear-gradient(to bottom,var(--ioc-v-light-grey), var(--ioc-white)) no-repeat top;
            background-size: 100% 25px;
        }
    }

    @media only screen and (max-width: 375px) {
        .login-logo {
            width: 160px !important;
        }
    }

    @media only screen and (min-width: 376px) and (max-width: 401px) {
        .login-logo {
            width: 200px !important;
        }
    }

    h1 {
        font-family: 'Olympic Headline Condensed';
        font-style: normal;
        font-weight: 400;
        color: var(--ioc-dark-blue);
        font-size: var(--ioc-h1-login-size);
        line-height: var(--ioc-h1-login-line-height);
        margin-bottom: 50px;
        background-color: var(--ioc-dark-blue);
        background-image: linear-gradient(90deg, var(--ioc-dark-blue), var(--ioc-blue));
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
    }

    @media only screen and (max-width: 1311px) {
        h1 {
            font-size: var(--ioc-h1-login-size-s);
            line-height: var(--ioc-h1-login-line-height-s);
        }
    }

    .col-form-label {
        color: var(--bs-primary-text);
    }

    .form-control, .form-control:focus, .LoginPanel input[type="password"] {
        background-color: var(--ioc-light-grey);
        background: var(--ioc-light-grey);
        color: var(--bs-primary-text);
        border: 1px solid var(--ioc-black);
        border-color: var(--ioc-black);
        box-shadow: none;
        outline: var(--ioc-black);
        margin-bottom: 0px;
        border-radius: var(--ioc-field-corner-radius);
    }

    #Login-Button::after {
        content: "";
        background: url('images/arrow.png');
        background-size: contain;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        margin-left: 10px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
    }

    button#login-submit {
        background-color: var(--ioc-blue);
        color: var(--ioc-white);
        font-family: 'Olympic Headline Condensed';
        font-size: 32px;
        line-height: 45px;
        margin-top: 70px;
        margin-bottom: 0px;
        outline: 4px solid var(--ioc-blue);
        outline-offset: 10px;
        cursor: pointer;
        border-radius: 100%;
        height: 90px;
        width: 90px;
        border: 0px solid var(--ioc-blue);
        transform: translate(30%,-30%);
        margin-left:-12px;
    }

    .justify-content-end {
        justify-content: flex-end !important;
    }

    .LoginPanel .mb-3 {
        padding-bottom: 20px;
    }


    .LoginPanel button, .btn, .btn-primary {
        padding: 10px 20px;
    }

    button#login-submit:hover {
        background-color: var(--ioc-dark-blue);
        outline: 4px solid var(--ioc-dark-blue);
    }


    /*forgotten password link*/
    .LoginPanel .forgotPasswordLink, .LoginPanel #forgot-password {
        color: var(--bs-primary-text);
        float: right;
    }

        .LoginPanel .forgotPasswordLink:hover, .LoginPanel #forgot-password:hover {
            text-decoration: none;
        }

    /*form validation*/
    .invalid-feedback {
        background-color: transparent;
        color: var(--ioc-red);
        border-radius: var(--ioc-field-corner-radius);
        padding: 10px 20px;
        margin-top: 20px;
        margin-bottom: 0px;
    }

    /*language options*/
    .language-object {
        display: none;
    }

    /*footer*/
    .footer a {
        text-decoration: none;
        color: var(--bs-primary);
    }

        .footer a:hover {
            text-decoration: underline;
        }

    /* Mobile overrides */
    @media only screen and (max-width: 991px) {
        .LoginPanel .justify-content-end {
            transform: translate(0%,0%);
        }

        .LoginPanel button, button#login-submit {
            transform: translate(30%,0%);
        }
    }


    @media only screen and (max-width: 575px) {
        .LoginPanel .forgotPasswordLink, .LoginPanel #forgot-password {
            transform: translate(0%, -650%);
        }
    }



    /*Sing-up Page DNN module specific*/
    .dnnRegistrationForm .dnnFormItem.dnnFormShort:last-child {
        display: none;
    }

    div.dnnRegistrationForm {
        width: 100%;
        min-width: inherit;
    }

        div.dnnRegistrationForm .dnnForm {
            min-width: 0;
            width: 100%;
        }

    .dnnRegistrationForm .dnnActions {
        clear: both;
    }

    .dnnRegistrationForm ul {
        display: flex;
        list-style: none;
        padding-left: 0;
        justify-content: flex-end;
    }

    .dnnRegistrationForm li a {
        background: var(--ioc-light-grey);
        color: var(--bs-body-color);
        border-radius: var(--ioc-corner-button-radius);
        border: none;
        text-transform: none;
        font-family: 'Olympic Sans Medium';
        padding: 15px 20px;
        font-weight: 400;
    }

    .dnnRegistrationForm li {
        width: unset;
    }

    .dnnRegistrationForm .dnnActions {
        padding-bottom: 100px;
    }

    .dnnRegistrationForm input {
        border: 1px solid var(--ioc-black) !important;
        background-color: var(--ioc-light-grey);
        color: var(--bs-body-color);
        width: 66%;
        padding: 6px 36px 6px 12px !important;
        margin-bottom: 30px;
    }

    .dnnRegistrationForm li a {
        background: var(--ioc-light-grey);
        color: var(--bs-body-color);
        text-decoration: none;
    }

        .dnnRegistrationForm li a:hover {
            background-color: var(--ioc-yellow);
            color: var(--bs-primary-text);
            text-decoration: none;
        }

    .dnnRegistrationForm .dnnCheckbox {
        border: 1px solid var(--ioc-light-grey);
        display: inline-flex;
    }

    .dnnRegistrationForm .dnnCheckbox {
        display: none !important;
    }

    .dnnRegistrationForm input[type=checkbox] {
        position: unset !important;
        width: auto !important;
        opacity: unset !important;
        z-index: unset !important;
    }

    .dnnRegistrationForm .dnnTooltip {
        display: none;
    }

    .dnnRegistrationForm .dnnFormItem .dnnFormShort {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
    }

        .dnnRegistrationForm .dnnFormItem .dnnFormShort:last-child {
            display: none;
        }

    .dnnRegistrationForm .dnnFormError:last-child {
        display: none !important;
    }

    .dnnRegistrationForm .dnnLabel {
        margin-bottom: 30px;
        width: 33%;
    }

        .dnnRegistrationForm .dnnLabel label {
            color: var(--bs-primary-text) !important;
        }

    .dnnRegistrationForm .dnnFormError {
        color: var(--ioc-red);
        font-size: var(--ioc-validation-size);
        font-weight: 600;
        border-radius: var(--ioc-field-corner-radius);
        transform: translate(0px, -20px);
        float: left;
        margin-left: 33%;
        width: 66%;
    }

    .dnnRegistrationForm input[type=checkbox] .dnnFormError {
        margin-top: 30px;
    }


@media only screen and (max-width: 767px) {
    .dnnRegistrationForm input, .dnnRegistrationForm .dnnLabel {
        width: 100%;
    }

    .dnnRegistrationForm input {
        margin-top: calc(.375rem + 1px);
    }

    .dnnRegistrationForm .dnnLabel {
        margin-bottom: 0px;
    }

    .dnnRegistrationForm ul {
        display: inline-block;
        width: unset !important;
        float: left;
    }

    .dnnRegistrationForm li:nth-last-child(2) {
        margin-bottom: 30px !important;
        margin-right: 0px;
    }

    .dnnRegistrationForm .dnnFormError {
        margin-left: unset;
        width: 100% !important;
    }
}

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .dnnRegistrationForm .dnnActions {
            display: inline-block;
        }

        .dnnRegistrationForm li {
            margin-bottom: 30px;
        }
    }


    /*cookie notice*/
.cookiealert, .cookiealert a {
    color: var(--bs-primary-text) !important;
}

        .cookiealert a:hover {
            text-decoration:none;
        }

.cookiealert {
    background: var(--ioc-white) !important;
    word-break: break-word !important;
    z-index: 1030 !important;
}

        .cookiealert .acceptcookies {
            padding: 9px 19px;
            margin: 0px !important;
        }

    .btn-sm.acceptcookies {
        border: 1px solid transparent;
        margin-left: 20px !important;
    }