/* Minification failed. Returning unminified contents.
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,26): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(105,19): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(139,27): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(152,31): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(192,19): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(244,23): run-time error CSS1039: Token not allowed after unary operator: '-s3'
(252,22): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(259,24): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(283,19): run-time error CSS1039: Token not allowed after unary operator: '-s3'
(283,29): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(312,22): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(366,18): run-time error CSS1039: Token not allowed after unary operator: '-s5'
(367,17): run-time error CSS1039: Token not allowed after unary operator: '-s5'
(429,19): run-time error CSS1039: Token not allowed after unary operator: '-s3'
(429,29): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(451,20): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(462,31): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(470,26): run-time error CSS1039: Token not allowed after unary operator: '-s3'
(478,28): run-time error CSS1039: Token not allowed after unary operator: '-s3'
(491,24): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(508,24): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(542,26): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(544,24): run-time error CSS1039: Token not allowed after unary operator: '-s5'
(575,26): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(576,25): run-time error CSS1039: Token not allowed after unary operator: '-s4'
(577,30): run-time error CSS1039: Token not allowed after unary operator: '-s3'
(582,35): run-time error CSS1039: Token not allowed after unary operator: '-s5'
 */
/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=La+Belle+Aurore&display=swap');

:root {
    --base-spacing: 16px;
    --s1: 2px;
    --s2: 4px;
    --s3: 8px;
    --s4: 16px;
    --s5: 32px;
    --s6: 64px;
    --s7: 128px;
    --s8: 256px;
}

.container-small {
    width: 848px;
    max-width: calc(100vw - 48px);
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    .container-small {
        max-width: calc(100vw - 24px);
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html, body, input, select, textarea {
    font-family: Roboto, sans-serif;
    line-height: 1.8;
    font-size: 15px;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', serif !important;
    font-weight: 700;
    color: #111;
    line-height: 1.2em;
}

    h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
        margin-top: var(--s4);
    }

h1,
h2 {
    font-size: 36px;
}

* + h1,
* + h2 {
    margin-top: 100px;
}
/* Background Splash */
h1::before,
h2::before {
    content: url('/Content/Images/bg-dot.svg');
    position: absolute;
    display: block;
    width: 300px;
    max-width: 40vw;
    z-index: -1;
    margin-left: -100px;
    margin-top: -80px;
    opacity: 0.6;
}

p {
    color: #333;
}

a,
a:hover {
    text-decoration: none;
}

input[disabled] {
    cursor: not-allowed;
    color: #a0a09f;
}

header {
    background-color: #fff;
    padding: var(--s4);
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    position: relative;
    border-top: #AB0635 solid 4px;
}

    /* Header Logo */
    header .logo-link {
        width: 128px;
        padding: 0;
        display: flex;
        align-items: center;
        text-decoration: none;
        line-height: 0;
    }

    header a {
        text-decoration: none;
        display: block;
        color: black;
    }

        header a:hover {
            color: #555;
        }

    header .navbar {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    header .menu {
        margin-left: var(--s4);
        list-style: none;
        display: flex;
    }

        header .menu li {
            display: flex;
            align-items: flex-end;
            position: relative;
            bottom: -4px;
        }

        header .menu * + li {
            margin-left: var(--s4);
        }

    header .login-area {
        text-align: right;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        max-width: 45vw;
    }

        header .login-area form {
            position: relative;
            width: calc(100% - 42px);
        }
            /* User Email Address */
            header .login-area form a[title*="Manage"] {
                font-weight: bold;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /* Logout Link */
            header .login-area form a:last-child {
                opacity: 0.8;
                font-size: 0.8em;
            }
        /* User Icon */
        header .login-area::after {
            content: '';
            display: inline-block;
            margin-left: 10px;
            width: 32px;
            height: 32px;
            background: url('/Content/Images/icon-user.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

.body {
    padding: var(--s4);
    flex: 1 0 auto;
}
    /* Front Page Header Background Image */
    .body::before {
        content: '';
        display: block;
        margin: -15px -15px 100px;
        width: calc(100% + 30px);
        height: 30vh;
        max-height: 260px;
        background: url('/Content/Images/header-banner.jpg');
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
    }

    /* Body Content */
    .body > * + * {
        margin-top: 24px;
    }
    /* Media Component */
    .body > .container {
        width: 1000px;
        max-width: calc(100vw - 48px);
        padding: 0;
    }
    /* Media Component */
    .body > .induction-navigation {
        width: 1400px;
        max-width: calc(100vw - 48px);
        padding: 0;
    }

    .body .embed-responsive {
        border-radius: 9px;
    }
    /* Slide Content */
    .body > * > h1 + div,
    .body > * > h1 + p,
    .body > * > h2 + div,
    .body > * > h2 + p {
        font-size: 18px;
        margin-bottom: 40px;
    }

table.table {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-collapse: collapse;
}

    table.table th, table.table td {
        padding: var(--s3);
    }

    table.table tr:nth-child(2n + 0) {
        background-color: rgba(0, 0, 0, 0.1);
    }

* + table.table {
    margin-top: var(--s4);
}

footer {
    color: #a0a09f;
    overflow: visible;
    margin-top: 40px;
    padding: 70px var(--s4) 35px;
    background: url('/Content/Images/footer-banner.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

    footer > p {
        color: white;
        opacity: 0.3;
        text-align: right;
        font-size: 0.9em;
        font-style: italic;
    }

.btn-plain {
    border-radius: 4px;

}

.btn:not(.dropdown-toggle), .btn-plain, #createSubmissionForm input[type="submit"], .grid-form input[type="submit"] {
    appearance: none;
    border: none;
    display: inline-block;
    padding: var(--s3) var(--s4);
    text-decoration: none;
    background-color: #505050;
    color: white;
    font-weight: 600;
    transition: 0s;
}

    .btn.primary, #createSubmissionForm input.primary[type="submit"], .grid-form input.primary[type="submit"] {
        background-color: #b2113a;
        color: white;
    }

.btn:hover, .btn-plain:hover, #createSubmissionForm input:hover[type="submit"], .grid-form input:hover[type="submit"] {
    background-color: #2f2e2e;
    transition: 0.2s;
}

.btn-plain:hover {
    background-color: #2f2e2e;
    transition: 0.2s;
    color:white;
}

    .btn:hover.primary, #createSubmissionForm input:hover.primary[type="submit"], .grid-form input:hover.primary[type="submit"] {
        background-color: #830d2b;
    }

* + .btn:not(.dropdown-toggle), #createSubmissionForm * + input[type="submit"], .grid-form * + input[type="submit"] {
    margin-top: var(--s4);
}

.pagination-container .pagination {
    display: flex;
    list-style: none;
}

    .pagination-container .pagination li {
        display: block;
    }

        .pagination-container .pagination li a {
            height: 32px;
            width: 32px;
            background-color: #f8f8f8;
            border-radius: 4px;
            justify-content: center;
            align-items: center;
            display: flex;
            font-weight: 600;
            text-decoration: none;
            color: #333;
        }

            .pagination-container .pagination li a:hover {
                background-color: #e08080;
            }

        .pagination-container .pagination li.active a {
            background-color: #e8e8e8;
            font-weight: 600;
            color: #333;
        }

            .pagination-container .pagination li.active a:hover {
                background-color: #e8e8e8;
            }

        .pagination-container .pagination li.disabled a {
            background-color: transparent;
            color: black;
        }

            .pagination-container .pagination li.disabled a:hover {
                background-color: transparent;
            }

        .pagination-container .pagination li + li {
            margin-left: 8px;
        }

#createSubmissionForm .checkbox, .grid-form .checkbox, #userRolesForm .checkbox {
    position: relative;
    height: var(--s5);
    width: var(--s5);
    display: inline-block;
}

    #createSubmissionForm .checkbox > input[type="checkbox"], .grid-form .checkbox > input[type="checkbox"], #userRolesForm .checkbox > input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 100%;
        width: 100%;
        z-index: 2;
    }

        #createSubmissionForm .checkbox > input[type="checkbox"]:checked + .checkmark, .grid-form .checkbox > input[type="checkbox"]:checked + .checkmark, #userRolesForm .checkbox > input[type="checkbox"]:checked + .checkmark {
            background-color: #ef213f;
            background-size: 80%;
        }

        #createSubmissionForm .checkbox > input[type="checkbox"]:focus + .checkmark, .grid-form .checkbox > input[type="checkbox"]:focus + .checkmark, #userRolesForm .checkbox > input[type="checkbox"]:focus + .checkmark {
            outline: 1px solid rgba(0, 0, 0, 0.5);
            outline: 1px solid -webkit-focus-ring-color;
        }

        #createSubmissionForm .checkbox > input[type="checkbox"]:disabled, .grid-form .checkbox > input[type="checkbox"]:disabled, #userRolesForm .checkbox > input[type="checkbox"]:disabled {
            cursor: not-allowed;
        }

            #createSubmissionForm .checkbox > input[type="checkbox"]:disabled + .checkmark, .grid-form .checkbox > input[type="checkbox"]:disabled + .checkmark, #userRolesForm .checkbox > input[type="checkbox"]:disabled + .checkmark {
                background-color: #a0a09f;
            }

                #createSubmissionForm .checkbox > input[type="checkbox"]:disabled + .checkmark:after, .grid-form .checkbox > input[type="checkbox"]:disabled + .checkmark:after, #userRolesForm .checkbox > input[type="checkbox"]:disabled + .checkmark:after {
                    opacity: 0.5;
                }

    #createSubmissionForm .checkbox .checkmark, .grid-form .checkbox .checkmark, #userRolesForm .checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #a0a09f;
        background-image: url("data:image/svg+xml,%3Csvg height='200' width='200' fill='%23000000' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16' version='1.1' x='0px' y='0px'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M6,10 L2.5,6.5 L0.5,8.5 L6,14 L15.5,4.5 L13.5,2.5 L6,10 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        background-size: 0;
        background-position: center;
        background-repeat: no-repeat;
        transition: background-color 100ms, background-size 0.1s cubic-bezier(0.27, 1.76, 0.94, 0.97);
    }

        #createSubmissionForm .checkbox .checkmark:after, .grid-form .checkbox .checkmark:after, #userRolesForm .checkbox .checkmark:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: gray;
            opacity: 0;
            transition: 0.2s;
        }

#createSubmissionForm input, #createSubmissionForm select, #createSubmissionForm textarea, .grid-form input, .grid-form select, .grid-form textarea, #userRolesForm input {
    padding: var(--s3) var(--s4);
    display: block;
    width: 100%;
    max-width: 500px;
    min-width: 150px;
    border: none;
    outline: 1px solid rgba(0, 0, 0, 0.2);
    resize: none;
}

    #createSubmissionForm input[type="checkbox"], #createSubmissionForm select[type="checkbox"], #createSubmissionForm textarea[type="checkbox"], .grid-form input[type="checkbox"], .grid-form select[type="checkbox"], .grid-form textarea[type="checkbox"], #userRolesForm input[type="checkbox"] {
        min-width: auto;
        width: auto;
    }

.grid-form label,
.grid-form .label {
    font-weight: 600;
}

#createSubmissionForm, .grid-form {
    display: grid;
    grid-gap: var(--s4);
    align-items: flex-start;
}

    #createSubmissionForm.form-validated input:invalid, #createSubmissionForm.form-validated input.invalid, #createSubmissionForm.form-validated input[invalid], #createSubmissionForm.form-validated select:invalid, #createSubmissionForm.form-validated select.invalid, #createSubmissionForm.form-validated select[invalid], #createSubmissionForm.form-validated textarea:invalid, #createSubmissionForm.form-validated textarea.invalid, #createSubmissionForm.form-validated textarea[invalid], .grid-form.form-validated input:invalid, .grid-form.form-validated input.invalid, .grid-form.form-validated input[invalid], .grid-form.form-validated select:invalid, .grid-form.form-validated select.invalid, .grid-form.form-validated select[invalid], .grid-form.form-validated textarea:invalid, .grid-form.form-validated textarea.invalid, .grid-form.form-validated textarea[invalid] {
        outline: 1px solid red;
    }

    #createSubmissionForm.form-validated .field-validation-error, #createSubmissionForm.form-validated .validation-error, .grid-form.form-validated .field-validation-error, .grid-form.form-validated .validation-error {
        grid-column: 2/-1;
        color: #b2113a;
        margin-top: calc(var(--s4) * -1);
    }

    #createSubmissionForm input[type="submit"], .grid-form input[type="submit"] {
        margin-top: 0;
    }

    #createSubmissionForm .input-label, .grid-form .input-label {
        margin-top: var(--s3);
    }

    #createSubmissionForm input[type="radio"], .grid-form input[type="radio"] {
        display: inline-block;
        outline: none;
        width: auto;
        min-width: auto;
        margin-right: var(--s3);
    }

    #createSubmissionForm .field-validation-valid, .grid-form .field-validation-valid {
        display: none;
    }

    #createSubmissionForm input[type="submit"], .grid-form input[type="submit"] {
        margin-top: 0;
    }

    #createSubmissionForm .subgrid, .grid-form .subgrid {
        display: grid;
        grid-gap: var(--s4);
    }

    #createSubmissionForm .addable-list, .grid-form .addable-list {
        width: 100%;
        max-width: 500px;
        min-width: 150px;
    }

    #createSubmissionForm .addable-list1, .grid-form .addable-list1 {
        width: 100%;
        max-width: 500px;
        min-width: 150px;
    }

    #createSubmissionForm .subgrid-2, .grid-form .subgrid-2 {
        display: grid;
        grid-gap: var(--s4);
        grid-template-columns: auto 1fr;
    }

        #createSubmissionForm .subgrid-2 label, .grid-form .subgrid-2 label {
            text-align: left;
        }

    #createSubmissionForm .errors ul, .grid-form .errors ul {
        margin-left: 1em;
    }

#userRolesForm {
    display: grid;
    grid-auto-columns: 200px;
    grid-template-columns: auto 1fr;
    grid-gap: 16px;
}

    #userRolesForm input {
        grid-column: 1/ -1;
    }

    #userRolesForm .btn, #userRolesForm #createSubmissionForm input[type="submit"], #createSubmissionForm #userRolesForm input[type="submit"], #userRolesForm .grid-form input[type="submit"], .grid-form #userRolesForm input[type="submit"] {
        margin-top: 0;
    }

@media screen and (min-width: 948px) {
    .grid-form label,
    .grid-form .label {
        font-weight: 400;
    }

    #createSubmissionForm, .grid-form {
        margin-top: var(--s4);
        grid-template-columns: minmax(calc(100px + 20vw), min-content) 1fr;
        grid-gap: var(--s5);
    }

        #createSubmissionForm input,
        #createSubmissionForm select,
        #createSubmissionForm textarea,
        #createSubmissionForm .field, .grid-form input,
        .grid-form select,
        .grid-form textarea,
        .grid-form .field {
            grid-column: 2/3;
        }

        #createSubmissionForm textarea, .grid-form textarea {
            height: 10em;
        }

        #createSubmissionForm label,
        #createSubmissionForm .label, .grid-form label,
        .grid-form .label {
            grid-column: 1/2;
            text-align: right;
        }

        #createSubmissionForm .row, .grid-form .row {
            display: flex;
            max-width: 100%;
        }

        #createSubmissionForm .checkbox, .grid-form .checkbox {
            position: relative;
            height: var(--s4);
            width: var(--s4);
            margin-top: var(--s3);
            bottom: 5px;
        }

        #createSubmissionForm.form-validated .field-validation-error, #createSubmissionForm.form-validated .validation-error, .grid-form.form-validated .field-validation-error, .grid-form.form-validated .validation-error {
            margin-top: calc(var(--s5) * -1);
        }
}

.validation-summary-valid {
    display: none;
}
/* Brand Colour */
.text-danger {
    color: #AB0635;
    font-weight: bold !important;
}

.multiline-label {
    white-space: pre-wrap;
}

/* Jumbotron */
.jumbotron {
    background: none;
}

/* Button Styles */
.btn:not(.dropdown-toggle), .btn-plain {
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
}

.btn-default:not(.dropdown-toggle):active {
    box-shadow: none !important;
}

.btn:not(.dropdown-toggle):focus, .btn-plain:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-default:not(.dropdown-toggle) {
    background: #eee;
    color: black;
}

    .btn-default:hover,
    .btn-default:active {
        background: rgb(206, 206, 206);
    }

.btn-primary {
    background: #AB0635;
}

    .btn-primary:hover,
    .btn-primary:active {
        background: #660621;
    }

.btn-success {
    background: #00853E;
}

    .btn-success:hover,
    .btn-success:active {
        background: #00612d;
    }

.btn-danger {
    background: #E51937;
}

    .btn-danger:hover,
    .btn-danger:active {
        background: #c0112b;
    }

/* Induction Navigation */
.induction-navigation .btn {
    font-size: 17px;
    border-radius: 20px;
    padding: 18px 32px;
    display: inline-flex;
    margin-top: 0;
}

    .induction-navigation .btn:not(.pull-right) {
        background: #eee;
        color: black;
    }

        .induction-navigation .btn:not(.pull-right):hover {
            background: rgb(206, 206, 206);
        }

        .induction-navigation .btn:not(.pull-right)::before {
            content: url('/Content/Images/chevron-left-black.svg');
            margin: 0 8px 0 -10px;
            top: 3px;
            position: relative;
        }

    .induction-navigation .btn.pull-right {
        background: #AB0635;
    }

        .induction-navigation .btn.pull-right:hover {
            background: #660621;
        }

        .induction-navigation .btn.pull-right::after {
            content: url('/Content/Images/chevron-right.svg');
            margin: 0 -10px 0 8px;
            top: 3px;
            position: relative;
        }

/* Standard Alert Styles */
.alert {
    border-radius: 20px;
}

    .alert p {
        margin-bottom: 0;
    }

        .alert p + p {
            margin-top: 16px;
        }

    .alert .alert-heading {
        font-family: Roboto, sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        margin-bottom: 0;
    }

        .alert .alert-heading + p {
            font-size: 16px;
            margin-top: 6px;
        }

    .alert.alert-info {
        border: #ccc solid 2px;
        background: #fff;
    }

    .alert.alert-danger {
        border: #E51937 solid 2px;
        background: #FADCDC;
    }

    .alert.alert-success {
        border: #00853E solid 2px;
        background: #DBEED6;
    }

/* Question & Answers Forms */
.question-answers,
form[action*="\/PackingShed\/Induction"] {
    background: white;
    border-radius: 30px;
    padding: 15px 30px;
}

@media screen and (max-width: 600px) {
    .question-answers,
    form[action*="\/PackingShed\/Induction"] {
        padding: 15px 6px;
    }
}
/* Preload the selected icon */
form[action*="\/PackingShed\/Induction"]::after {
    content: url('/Content/Images/circle-filled.svg');
    display: block;
    opacity: 0;
    font-size: 0;
    line-height: 0;
}

.question-answers .alert,
form[action*="\/PackingShed\/Induction"] .alert {
    padding: 0;
}

.question-answers .alert-info,
form[action*="\/PackingShed\/Induction"] .alert-info {
    background: none;
    border: none;
}
/* Hide the default radio buttons */
.question-answers input[type="radio"],
form[action*="\/PackingShed\/Induction"] input[type="radio"] {
    opacity: 0;
}

form[action*="\/PackingShed\/Induction"] .radio:hover {
    background: #f7f7f7;
}

.question-answers .radio > label,
form[action*="\/PackingShed\/Induction"] .radio > label {
    width: 100%;
    padding: 12px 20px;
    font-size: 18px;
    color: black;
    display: inline-flex;
}

@media screen and (max-width: 600px) {
    .question-answers .radio > label,
    form[action*="\/PackingShed\/Induction"] .radio > label {
        padding: 8px 14px;
        font-size: 18px;
    }
}
/* Flex the question text next to the icon */
.question-answers .radio p,
form[action*="\/PackingShed\/Induction"] .radio p {
    display: inline-flex;
}
/* Unselected Answer */
.question-answers .radio.alert-info input[type="radio"] + p::before,
form[action*="\/PackingShed\/Induction"] .radio.alert-info input[type="radio"] + p::before {
    content: url('/Content/Images/circle.svg');
    opacity: 0.3;
    margin: 0 8px 0 -4px;
    top: 5px;
    position: relative;
}
/* Make other answer more transparent */
.question-answers .radio.alert-info {
    opacity: 0.5;
}
    /* Selected Answer */
    .question-answers .radio.alert-info input[type="radio"]:checked + p::before,
    form[action*="\/PackingShed\/Induction"] .radio.alert-info input[type="radio"]:checked + p::before {
        content: url('/Content/Images/circle-filled.svg');
        opacity: 1;
        margin: 0 8px 0 -4px;
        top: 5px;
        position: relative;
    }
/* Wrong Answer Field */
.question-answers .alert.alert-danger input[type="radio"] + p::before {
    content: url('/Content/Images/x.svg');
    margin: 0 8px 0 -4px;
    top: 5px;
    position: relative;
}
/* Correct Answer Field */
.question-answers .radio.alert-success input[type="radio"] + p::before {
    content: url('/Content/Images/check.svg');
    margin: 0 8px 0 -4px;
    top: 5px;
    position: relative;
}
/* Disable pointer on ansers */
.question-answers label {
    cursor: default;
}

/* Question & Agree Navigation */
.question-navigation,
.agree-navigation {
    display: flex;
    justify-content: center;
}

    .question-navigation .btn,
    .agree-navigation .btn {
        font-size: 17px;
        border-radius: 20px;
        padding: 18px 32px;
        display: inline-flex;
        align-items: center;
        margin-top: 0;
    }

        .question-navigation .btn.btn-danger::before {
            content: url('/Content/Images/chevron-left.svg');
            margin: 0 8px 0 -6px;
            top: 3px;
            position: relative;
        }

        .question-navigation .btn.btn-success::after {
            content: url('/Content/Images/chevron-right.svg');
            margin: 0 -6px 0 8px;
            top: 3px;
            position: relative;
        }

/* Agree Form */
form[action*="\/PackingShed\/InductionSigned"] {
    position: relative;
}

    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input {
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding: 0 0 4px 0;
        margin-bottom: 16px;
    }
        /* Empty Sign Field */
        form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName {
            padding-top: 6px;
            padding-bottom: 0;
            font-size: 38px;
            font-family: 'La Belle Aurore', cursive;
            height: auto;
            height: auto;
            line-height: 1.8;
        }

            form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName ~ .form-validation-underline {
                margin-top: -40px;
                margin-bottom: 40px;
                border-bottom: 2px solid #ccc;
            }
            /* form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName ~ .agree-navigation > .btn::before {
    content: url('/Content/Images/edit.svg');
    margin: 0 8px 0 -10px;
    display: inline-block;
  } */
            form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName:not(.valid) ~ .agree-navigation > .btn {
                background: #ccc;
                color: #7D7D7D;
                cursor: default;
            }
    /* Form Cover Element, this creates the validation outline for the agree form box */
    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > .form-validation-outline {
        border: 2px solid #ccc;
        border-radius: 20px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        pointer-events: none;
    }

    /* Invalid Sign Field */
    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName.input-validation-error ~ .form-validation-underline {
        border-color: #c0112b;
    }

    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName.input-validation-error ~ .form-validation-outline {
        border-color: #c0112b;
    }
    /* Valid Sign Field */

    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName.valid ~ .form-validation-underline {
        border-color: #00853E;
    }

    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName.valid ~ .agree-navigation > .btn {
        background: #AB0635;
    }

    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#SignedName.valid ~ .form-validation-outline {
        border-color: #00853E;
    }

    form[action*="\/PackingShed\/InductionSigned"] > .form-horizontal > input#EmployeeName {
        padding-top: 6px;
        padding-bottom: 0;
        font-size: 38px;
        font-family: 'La Belle Aurore', cursive;
        height: auto;
        height: auto;
        line-height: 1.8;
    }








/*Quick Induction Area*/

/* Question & Answers Forms */
.question-answers,
form[action*="\/QuickInduction\/Induction"] {
    background: white;
    border-radius: 30px;
    padding: 15px 30px;
}

@media screen and (max-width: 600px) {
    .question-answers,
    form[action*="\/QuickInduction\/Induction"] {
        padding: 15px 6px;
    }
}
/* Preload the selected icon */
form[action*="\/QuickInduction\/Induction"]::after {
    content: url('/Content/Images/circle-filled.svg');
    display: block;
    opacity: 0;
    font-size: 0;
    line-height: 0;
}

.question-answers .alert,
form[action*="\/QuickInduction\/Induction"] .alert {
    padding: 0;
}

.question-answers .alert-info,
form[action*="\/QuickInduction\/Induction"] .alert-info {
    background: none;
    border: none;
}
/* Hide the default radio buttons */
.question-answers input[type="radio"],
form[action*="\/QuickInduction\/Induction"] input[type="radio"] {
    opacity: 0;
}

form[action*="\/QuickInduction\/Induction"] .radio:hover {
    background: #f7f7f7;
}

.question-answers .radio > label,
form[action*="\/QuickInduction\/Induction"] .radio > label {
    width: 100%;
    padding: 12px 20px;
    font-size: 18px;
    color: black;
    display: inline-flex;
}

@media screen and (max-width: 600px) {
    .question-answers .radio > label,
    form[action*="\/QuickInduction\/Induction"] .radio > label {
        padding: 8px 14px;
        font-size: 18px;
    }
}
/* Flex the question text next to the icon */
.question-answers .radio p,
form[action*="\/QuickInduction\/Induction"] .radio p {
    display: inline-flex;
}
/* Unselected Answer */
.question-answers .radio.alert-info input[type="radio"] + p::before,
form[action*="\/QuickInduction\/Induction"] .radio.alert-info input[type="radio"] + p::before {
    content: url('/Content/Images/circle.svg');
    opacity: 0.3;
    margin: 0 8px 0 -4px;
    top: 5px;
    position: relative;
}
/* Make other answer more transparent */
.question-answers .radio.alert-info {
    opacity: 0.5;
}
    /* Selected Answer */
    .question-answers .radio.alert-info input[type="radio"]:checked + p::before,
    form[action*="\/QuickInduction\/Induction"] .radio.alert-info input[type="radio"]:checked + p::before {
        content: url('/Content/Images/circle-filled.svg');
        opacity: 1;
        margin: 0 8px 0 -4px;
        top: 5px;
        position: relative;
    }
/* Wrong Answer Field */
.question-answers .alert.alert-danger input[type="radio"] + p::before {
    content: url('/Content/Images/x.svg');
    margin: 0 8px 0 -4px;
    top: 5px;
    position: relative;
}
/* Correct Answer Field */
.question-answers .radio.alert-success input[type="radio"] + p::before {
    content: url('/Content/Images/check.svg');
    margin: 0 8px 0 -4px;
    top: 5px;
    position: relative;
}
/* Disable pointer on ansers */
.question-answers label {
    cursor: default;
}

/* Question & Agree Navigation */
.question-navigation,
.agree-navigation {
    display: flex;
    justify-content: center;
}

    .question-navigation .btn,
    .agree-navigation .btn {
        font-size: 17px;
        border-radius: 20px;
        padding: 18px 32px;
        display: inline-flex;
        align-items: center;
        margin-top: 0;
    }

        .question-navigation .btn.btn-danger::before {
            content: url('/Content/Images/chevron-left.svg');
            margin: 0 8px 0 -6px;
            top: 3px;
            position: relative;
        }

        .question-navigation .btn.btn-success::after {
            content: url('/Content/Images/chevron-right.svg');
            margin: 0 -6px 0 8px;
            top: 3px;
            position: relative;
        }

/* Agree Form */
form[action*="\/QuickInduction\/InductionSigned"] {
    position: relative;
}

    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input {
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding: 0 0 4px 0;
        margin-bottom: 16px;
    }
        /* Empty Sign Field */
        form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName {
            padding-top: 6px;
            padding-bottom: 0;
            font-size: 38px;
            font-family: 'La Belle Aurore', cursive;
            height: auto;
            height: auto;
            line-height: 1.8;
        }

            form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName ~ .form-validation-underline {
                margin-top: -40px;
                margin-bottom: 40px;
                border-bottom: 2px solid #ccc;
            }
            /* form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName ~ .agree-navigation > .btn::before {
    content: url('/Content/Images/edit.svg');
    margin: 0 8px 0 -10px;
    display: inline-block;
  } */
            form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName:not(.valid) ~ .agree-navigation > .btn {
                background: #ccc;
                color: #7D7D7D;
                cursor: default;
            }
    /* Form Cover Element, this creates the validation outline for the agree form box */
    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > .form-validation-outline {
        border: 2px solid #ccc;
        border-radius: 20px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        pointer-events: none;
    }

    /* Invalid Sign Field */
    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName.input-validation-error ~ .form-validation-underline {
        border-color: #c0112b;
    }

    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName.input-validation-error ~ .form-validation-outline {
        border-color: #c0112b;
    }
    /* Valid Sign Field */

    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName.valid ~ .form-validation-underline {
        border-color: #00853E;
    }

    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName.valid ~ .agree-navigation > .btn {
        background: #AB0635;
    }

    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#SignedName.valid ~ .form-validation-outline {
        border-color: #00853E;
    }

    form[action*="\/QuickInduction\/InductionSigned"] > .form-horizontal > input#EmployeeName {
        padding-top: 6px;
        padding-bottom: 0;
        font-size: 38px;
        font-family: 'La Belle Aurore', cursive;
        height: auto;
        height: auto;
        line-height: 1.8;
    }

    .sub-detail-group {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        max-height: 60px;
    }

    .Img-preview{
        max-height: 300px;
        width: auto;
    }

    .panel-sep{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 3rem;
    }