/*
	This file has been auto-generated by a tool at 31/07/2025 02:13:53
	Any changes made will be overwritten the next time it is regenerated.
*/

@font-face {
    font-family: 'KidSans';
    src: url('fonts/KidSans.woff2') format('woff2'),
        url('fonts/KidSans.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@keyframes gettingstarted {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes gettingstarted-div {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.gettingstarted-active {
    animation: 0.5s gettingstarted ease-in-out 2;
}
div.gettingstarted-active {
    animation: 1s gettingstarted-div ease-in-out 1;
    background-color: #fff;
    border-radius: 16px;
    margin: -16px;
    padding: 16px;
}

html, body {
    background-color: #e7e7e7;
    height: 100%;
    font-size: 16px;
}

h1, h2, h3 {
    font-size: 200%;
    margin: 32px 0 16px;
}
h1:not(.retain-margin):first-child, h2:not(.retain-margin):first-child, h3:not(.retain-margin):first-child {
    margin-top: 0;
}

p {
    margin: 16px 0 0;
}

.radioButtonList td {
    background-color: transparent !important;
}

.widerLabel {
    width:30% !important;
}

.shorterInput {
    width:70% !important;
}

table {
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
}
.Framework_ScrollingTable {
    margin: 16px 0;
}
    .Framework_ScrollingTable table, .Framework_Prompt_Container table {
        margin-top: 0;
}

table, table tr td, table tr th, table tbody tr td, table thead tr th {
    border: 0 none;
    word-break: normal;
}
table tr td, table tr th, table tbody tr td, table thead tr th {
    padding: 8px 12px;
}
table tr td, table tbody tr td {
    background-color: #f1f1f1;
    vertical-align: middle;
}
table tr.alternate > td, table tbody tr.alternate > td, table tr td.alternate, table tbody tr > td.alternate {
    background-color: #fff;
}
.pod table tr td, .pod table tbody tr td,
table table tr td, table table tbody tr td {
    background-color: #e7e7e7;
}
.pod table tr.alternate td, .pod table tbody tr.alternate td, .pod table tr td.alternate, .pod table tbody tr td.alternate,
table table tr.alternate td, table table tbody tr.alternate td, table table tr td.alternate, table table tbody tr td.alternate {
    background-color: #f1f1f1;
}
table tbody tr.error td {
    background-color: #ffcccc;
}
table tbody tr.alternate.error td {
    background-color: #ffd7d7;
}

table tr td.alternate {
    background-color: #fff;
}
table tr.alternate td.alternate {
    background-color: #f1f1f1;
}

td.icon, th.icon {
    padding-right: 0;
    text-align: center;
    width: 1px;
}
td.icon:last-child, th.icon:last-child {
    padding-right: 12px;
}

ul {
    padding-left: 16px;
    margin: 16px 0;
}
ul li {
    list-style: none;
    font-family: lato, sans-serif;
    font-weight: 700;
    line-height: 19px;
    font-size: 16px;
    margin: 4px 0 4px 16px;
    position: relative;
}

.removeFontAwesomeStyling li:before {
    content: '' !important;
    font-family: lato, sans-serif !important;
}

ul li:before {
    font-family: 'Font Awesome 5 Pro', FontAwesome;
    content:'\f0da';
    font-weight: 900;
    left: -15px;
    position: absolute;
    display: inline-block;
    padding-top: 2px;
}

ul.checklist {
    display: inline-block;
    padding: 0;
    width: auto;
}
    ul.checklist li {
        line-height: 1.5;
        margin: 16px 40px 16px 32px;
    }
    ul.checklist li::before {
        font-size: 150%;
        left: -32px;
        padding: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    ul.checklist li.complete {
        text-decoration: line-through;
    }
    ul.checklist li.complete::before {
        content: "\f058";
    }
    ul.checklist li.incomplete {

    }
    ul.checklist li.incomplete::before {
        content: "\f111";
        font-weight: 400;
    }
    ul.checklist li.impossible {
        opacity: 0.5;
    }
    ul.checklist li.impossible::before {
        content: "\f111";
        font-weight: 400;
    }
        ul.checklist li a.fa {
            position: absolute;
            right: -40px;
            top: 50%;
            transform: translateY(-50%);
        }

ul.features {
    padding-left: 24px;
}
    ul.features li::before {
        content: "\f00c";
        left: -24px;
    }

    ul li.unavailable {
        color: #777;
    }
    ul.features li.unavailable::before {
        content: "\f00d";
        left: -22px;
    }

.fa, .fas {
    vertical-align: middle;
}

.fas.amber {
    color: #e38d1e !important;
}
.fas.blue {
    color: #119cd9 !important;
}
.fas.green {
    color: #79ba42 !important;
}
.fas.red {
    color: #e31e25 !important;
}
.fas.amber {
    color: #e38d1e !important;
}
span.blue, strong.blue {
    color: #119cd9 !important;
    font-weight: 700;
}
span.green, strong.green {
    color: #79ba42 !important;
    font-weight: 700;
}
span.red, strong.red {
    color: #e31e25 !important;
    font-weight: 700;
}

strong {
    font-weight: 900;
    color: #555555;
}

h4 {
    color: #333;
}

a.fa {
    border: 2px solid #fff;
    color: #fff;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.25s, color 0.25s;
}
.noTouchEvents a.fa:hover, .noTouchEvents a.fa:focus {
    background-color: #fff;
    color: #119cd9;
}

*::placeholder {
    color: #b7b7b7;
    font-style: italic;
}
.error::placeholder {
    color: #fff;
}

.Framework_IconButton {
    margin: 0;
}
.Framework_AutoUpdate {
    background-color: transparent !important;
    border: 0 none !important;
    height: 16px !important;
    margin: -16px 0 0 !important;
    padding: 0 !important;
}

#Framework_Modal_Padding {
    background-color: #fff;
}

.Framework_AJAXTextBox {
    width: 100%;
}

.spacer {
    clear: both;
    height: 16px;
    line-height: 16px;
    margin: 0;
    padding: 0;
}

.dashboard-header {
    background-color: #119cd9;
    box-shadow: 0 8px 0 0 #0b668d;
    color: #fff;
    padding: 16px;
}

    .dashboard-header .logo {
        height: 72px;
    }
        .dashboard-header .logo img {
            height: 100%;
        }

    .dashboard-header .Framework_IconButton {
        margin: 16px 0 0 8px;
    }

.dashboard-footer {
    padding: 16px;
}

.dashboard-notifications {
    padding: 16px 32px 0;
}
.dashboard-notifications::after {
    clear: both;
    content: "";
    display: table;
}

    .dashboard-notification {
        background-color: #f1f1f1;
        border-radius: 8px;
        box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2);
        color: #777;
        margin-top: 16px;
        overflow: hidden;
        padding: 16px 16px 16px;
        position: relative;
    }
    .dashboard-notification-alert {
        background-color: #e31e25;
        color: #fff;
    }
    .dashboard-notification-information {
        background-color: #119cd9;
        color: #fff;
    }
    .dashboard-notification-success {
        background-color: #79ba42;
        color: #fff;
    }
    .dashboard-notification::before {
        bottom: 0;
        color: #fff;
        content: "\f059";
        font-family: "Font Awesome 5 Pro";
        font-size: 320px;
        font-style: normal;
        font-weight: 900;
        height: 32px;
        left: auto;
        line-height: 0;
        opacity: 0.1;
        position: absolute;
        right: 0;
        top: auto;
        transform: translate(20%,-80%);
    }
    .dashboard-notification-alert::before {
        content: "\f06a";
    }
    .dashboard-notification-information::before {
        content: "\f05a";
    }
    .dashboard-notification-success::before {
        content: "\f058";
    }
        .dashboard-notification strong {
            font-weight: 300;
            font-size: 150%;
        }
        .dashboard-notification p {
            margin: 0;
        }
        .dashboard-notification a {
            color: #fff;
            font-weight: 700;
            text-decoration: underline;
        }

.container {
    max-width: 100%;
    padding-bottom: 32px;
    padding-top: 32px;
}

.summary,
.summaryNoIcon {
    background-color: #f1f1f1;
    border-radius: 8px;
    color: #777;
    font-size: 120%;
    font-style: italic;
    margin: 16px 0;
    padding: 16px 16px 16px 64px;
    position: relative;
}
.summary:first-child,
.summaryNoIcon:first-child {
    margin-top: 0;
}
.summary:last-child,
.summaryNoIcon:last-child {
    margin-bottom: 0;
}
    .summary::before {
        color: #F7323F;
        content: "\f069";
        font-family: "Font Awesome 5 Pro";
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        height: 32px;
        left: 16px;
        line-height: 32px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

.pod .summary, 
.pod .summaryNoIcon {
    background-color: #e7e7e7;
    font-size: 100%;
    margin: 8px 0;
    padding: 8px 8px 8px 40px;
}
.pod .summary:first-child,
.pod .summaryNoIcon:first-child {
    margin-top: 0;
}
.pod .summary:last-child,
.pod .summaryNoIcon:last-child {
    margin-bottom: 0;
}
    .pod .summary::before,
    .pod .summaryNoIcon::before {
        font-size: 24px;
        height: 24px;
        left: 8px;
        line-height: 24px;
    }
    .pod h2 {
        font-size: 150%;
    }

.pod {
    background-color: #f1f1f1;
    border-radius: 8px;
    margin: 16px 0;
    overflow: hidden;
    padding: 16px;
}
.pod .pod {
    background-color: #e7e7e7;
}
.pod:not(.retain-margin):first-child {
    margin-top: 0;
}

.pagination {

}
    .pagination .page {
        border: 1px solid #119cd9;
        border-radius: 8px;
        color: #119cd9;
        display: inline-block;
        font-weight: 700;
        padding: 4px 8px;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.125s, color 0.125s;
    }
    .pagination .page-active, .noTouchEvents .pagination .page:hover {
        background-color: #119cd9;
        color: #fff;
    }

.renewal-cost {
    color: #119cd9;
    font-size: 200%;
    font-weight: 700;
    vertical-align: middle;
}

.stat {
    box-sizing: border-box;
    height: 211px;
    padding: 64px 16px 16px 16px;
    position: relative;
    text-align: center;
}
    .stat .fas {
        font-size: 32px;
        position: absolute;
        left: 50%;
        top: 16px;
        transform: translateX(-50%);
    }
    .stat-label {
        font-size: 120%;
        font-weight: 400;
    }
    .stat-value {
        color: #35bdf8;
        font-size: 200%;
        font-weight: 900;
    }
    .stat-value:not(.stat-value-table) {
        line-height: 99px;
    }

    .stat table thead tr th, .stat table tbody tr td {
        font-size: 75%;
        line-height: 1;
        padding: 8px 16px;
        width: 33.33%;
    }

.tabs {

}
    .tabs-header {
        padding: 0 16px;
    }
    .tabs-header::after {
        clear: both;
        content: "";
        display: table;
    }
        .tabs-group {
            float: left;
            margin-bottom: -12px;
            position: relative;
            width: 100%;
        }
        .tabs-group:last-child {
            margin: 0;
        }
        .tabs-tab {
            background-color: #d7d7d7;
            border-left: 1px solid #c7c7c7;
            box-sizing: border-box;
            color: #555;
            float: left;
            font-weight: 900;
            margin-top: 8px;
            padding: 12px 16px;
            text-decoration: none;
            transition: background-color 0.25s, color 0.25s;
        }
        .tabs-tab:first-child {
            border-left: 0 none;
            border-radius: 8px 0 0 0;
        }
        .tabs-tab:last-child {
            border-radius: 0 8px 0 0;
        }
        .tabs-tab:first-child:last-child {
            border-left: 0 none;
            border-radius: 8px 8px 0 0;
        }
        .tabs-group-inactive .tabs-tab {
            background-color: #c7c7c7;
            border-color: #b7b7b7;
            box-shadow: 0 -8px 0 0 rgba(0, 0, 0, 0.1) inset;
        }
        .tabs-group-inactive .tabs-tab{
            margin: 0;
        }
        .tabs-group-1 .tabs-tab {
            width: 100%;
        }
        .tabs-group-2 .tabs-tab {
            width: 50%;
        }
        .tabs-group-3 .tabs-tab {
            width: 33.33%;
        }
        .tabs-group-4 .tabs-tab {
            width: 25%;
        }
        .noTouchEvents .tabs-tab:hover {
            background-color: #119cd9;
            color: #fff;
            position: relative;
            text-decoration: none;
            transition: background-color 0.125s, color 0.125s;
        }
        .noTouchEvents .tabs-tab:last-child:hover {
            border-right: 0 none;
            margin-right: 0;
        }
        .tabs-tab-active, .noTouchEvents .tabs-tab-active:hover, .tabs-tab-active:first-child, .tabs-tab-active:last-child {
            background-color: #fff;
            background-image: none;
            border-left: 0 none;
            border-radius: 8px 8px 0 0;
            border-right: 0 none;
            color: #333;
            margin-right: 0;
            margin-top: 0;
            padding: 16px;
        }
            .tabs-tab .fas {
                vertical-align: middle;
            }
            .tabs-tab .hide_Sma {
                margin-left: 8px;
                vertical-align: middle;
            }

    .tabs-content {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2);
        padding: 16px;
    }

.sections {

}

    .sections-header {
    }
    .sections-header::after {
        clear: both;
        content: "";
        display: table;
    }
        .sections-section {
            background-color: #d7d7d7;
            border-top: 1px solid #c7c7c7;
            box-sizing: border-box;
            color: #777;
            float: left;
            overflow: hidden;
            padding: 16px;
            text-decoration: none;
            text-overflow: ellipsis;
            transition: background-color 0.25s, color 0.25s;
            white-space: nowrap;
            width: 100%;
        }
        .noTouchEvents .sections-section:hover {
            background-color: #119cd9;
            border-top-color: #0b668d;
            color: #fff;
            text-decoration: none;
        }
        .sections-section:first-child {
            border-radius: 8px 8px 0 0;
            border-top: 0 none;
            box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2) inset;
        }
        .sections-section:last-child {
            border-radius: 0 0 8px 8px;
        }
        .sections-section:only-child {
            border-radius: 8px;
        }
        .sections-section-active, .noTouchEvents .sections-section-active:hover, .sections-section-active:first-child, .noTouchEvents .sections-section-active:first-child:hover {
            background-color: #333;
            border-top-color: #212121;
            box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2);
            color: #fff;
            position: relative;
            z-index: 1;
        }
        .sections-section-active:last-child, .noTouchEvents .sections-section-active:last-child:hover {
            box-shadow: none;
        }
            .sections-section .fas {
                color: #777;
                transition: color 0.25s;
                vertical-align: middle;
            }
            .sections-section-active .fas {
                color: #fff;
            }
            .noTouchEvents .sections-section:not(.sections-section-active):hover .fas {
                color: #fff !important;
            }
            .sections-section .hide_Sma {
                margin-left: 8px;
                vertical-align: middle;
            }

    .sections-content {
        /*border: 4px solid #119cd9;
        border-radius: 8px;
        box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2);
        min-height: 320px;*/
        /*padding: 16px;*/
    }

.testQuestion {
    padding-left: 56px;
    padding-right: 80px;
    position: relative;
}
    .testQuestion-number {
        background-color: #777;
        border-radius: 50%;
        color: #f1f1f1;
        display: inline-block;
        font-size: 14px;
        font-weight: 700;
        height: 32px;
        line-height: 32px;
        position: absolute;
        left: 16px;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
    }
    .testQuestion .delete {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

.view-results, .edit-class, .edit-staff, .edit-student, .edit-test, .edit-yeargroup {
    max-width: 100%;
    margin: 0 auto;
    width: 768px;
}

    .edit-class h2, .edit-staff h2, .edit-student h2 {
        color: black;
    }

    .view-results .question {
        background-color: #555;
        border-radius: 16px;
        box-sizing: border-box;
        color: #fff;
        float: left;
        font-size: 150%;
        font-weight: 700;
        height: 64px;
        line-height: 64px;
        margin: 1%;
        overflow: hidden;
        padding: 0 2%;
        position: relative;
        width: 48%;
    }
    .view-results .question::after {
        bottom: 0;
        color: #fff;
        content: "\f059";
        display: inline-block;
        font-family: "Font Awesome 5 Pro";
        font-size: 96px;
        font-weight: 700;
        left: auto;
        line-height: 1;
        opacity: 0.2;
        position: absolute;
        right: 0;
        top: auto;
        transform: translate(10%, 15%);
    }
    .view-results .question-correct {
        background-color: #999;
    }
    .view-results .question-correct::after {
        content: "\f058";
    }
    .view-results .question-incorrect {
        background-color: #2a2a2a;
    }
    .view-results .question-incorrect::after {
        content: "\f057";
    }

@media (max-width: 480px) {
    .view-results .question {
        margin: 8px 0;
        padding: 0 16px;
        width: 100%;
    }
}

@media print {
    html, body {
        background-color: #fff;
    }
    h2, h2 span.blue {
        color: #333 !important;
    }
    .Framework_IconButton {
        display: none;
    }
    .view-results .question {
        background-color: transparent !important;
        border-radius: 0 !important;
        color: #333 !important;
        height: auto !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 0 0 48px !important;
    }
    .view-results .question::after {
        bottom: auto !important;
        color: #333 !important;
        font-size: 32px !important;
        left: 0 !important;
        opacity: 1 !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(0, -50%);
    }
}

table.report {

}
    table.report tbody tr td.blue,
    table.report thead tr th.blue,
    table.report tbody tr th.blue {
        background-color: #119cd9;
        color: #fff;
    }
    table.report tbody tr td.green,
    table.report thead tr th.green,
    table.report tbody tr th.green {
        background-color: #79ba42;
        color: #fff;
    }
    table.report tbody tr td.red,
    table.report thead tr th.red,
    table.report tbody tr th.red {
        background-color: #e31e25;
        color: #fff;
    }
    table.report tbody tr td.grey,
    table.report thead tr th.grey,
    table.report tbody tr th.grey {
        background-color: #777;
        color: #fff;
    }

.print-student {
    border: 4px dashed #333;
    box-sizing: border-box;
    display: inline-block;
    font-size: 65%;
    margin: 0 1% 1% 0;
    padding: 0 16px 16px 96px;
    position: relative;
    page-break-inside: avoid;
    width: 49.5%;
}
.print-student:nth-child(2n+1) {
    margin: 0 0 1% 0;
}
    .print-student p {
        margin: 8px 0 0;
    }
    .print-student-logo {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 64px;
    }
    .print-student-name {
        font-family: KidSans;
        font-size: 250%;
        font-weight: 700;
        margin: 0;
    }
    .print-student-url {
        word-break: break-word;
    }

@media (max-width: 768px) {

    .dashboard-header .logo {
        height: 40px;
    }
    .dashboard-header .Framework_IconButton {
        margin: 0 0 0 8px;
    }


    .tabs-tab {
        min-width: 68px;
        text-align: center;
    }

    .Framework_Form_Row label {
        width: 100%;
    }
    .Framework_Form_Row_Input {
        width: 100%;
    }

    .sections-section {
        text-align: center;
    }

    .pod .summaryNoIcon {
        padding: 40px 8px 8px;
    }
}

@media (max-width: 420px) {

    /*.dashboard-notification {
        padding: 64px 16px 16px;
    }
        .dashboard-notification::before {
            left: 50%;
            top: 16px;
            transform: translateX(-50%);
        }*/


    .summary {
        padding: 64px 16px 16px;
    }

    .summaryNoIcon {
        padding: 16px;
    }
        .summary::before {
            left: 50%;
            top: 16px;
            transform: translateX(-50%);
        }
    .pod .summary {
        padding: 40px 8px 8px;
    }
        .pod .summary::before {
            left: 50%;
            top: 8px;
            transform: translateX(-50%);
        }

    .sections-header {
        margin-bottom: 16px;
    }
    .sections-section {
        border-left: 1px solid #c7c7c7;
        border-top: 0 none;
        box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2) inset;
        padding: 16px;
        text-align: center;
        width: 33.33%;
    }
    .sections-four .sections-section {
        width: 25%;
    }
    .sections-one .sections-section {
        width: 100%;
    }
    .sections-section:first-child {
        border-radius: 8px 0 0 8px;
        border-left: 0 none;
        box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.2) inset;
    }
    .sections-section:last-child {
        border-radius: 0 8px 8px 0;
    }
    .sections-section:only-child {
        border-radius: 8px;
    }
    .sections-section-active, .noTouchEvents .sections-section-active:hover, .sections-section-active:first-child, .noTouchEvents .sections-section-active:first-child:hover {
        box-shadow: none;
    }
    .sections-content {
        border-radius: 0 0 8px 8px;
    }
}

/*
    Switches
*/

.switch {
    background-color: #777;
    border-radius: 24px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.2) 0 8px 0 0 inset;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    transition: background-color 0.125s;
    vertical-align: middle;
    width: 96px;
}
.switch.active {
    background-color: #79ba42;
}
.switch.inactive {
    pointer-events: none;
}

    .switch::before {
        background-color: #d7d7d7;
        border-radius: 24px;
        box-sizing: border-box;
        color: #777;
        content: "Off";
        height: 48px;
        left: 0;
        line-height: 48px;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 0;
        transition: left 0.125s, transform 0.125s;
        transform: translateX(0) scale(1.1);
        width: 64px;
    }
    .switch.active::before {
        content: "On";
        left: 100%;
        transform: translateX(-100%) scale(1.1);
    }

.HolidayModeSwitch {
    display: block;
    text-align: right;
}
    .HolidayModeSwitch label {
        display: inline-block;
        height: 48px;
        line-height: 48px;
        vertical-align: middle;
    }

.table-scroll {
    position: relative;   
    margin: auto;
    overflow: hidden;   
}
.table-wrap {
    width: 100%;
    overflow: auto;
}
.table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.table-scroll th, .table-scroll td {
    white-space: nowrap;
    vertical-align: top;
}
.clone {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.clone th, .clone td {
    visibility: hidden
}
.clone td, .clone th {
    border-color: transparent
}
.clone tbody th {
    visibility: visible;    
}
.clone .fixed-side {   
    visibility: visible;
}