:root {
    --danger-colour: #D53F3E;
    --success-colour: #4caf50;
    --text-colour: #2c2d34;
    --background-grey-colour: #F7F7F7;
    --disabled-grey: #898989;
    --lms-font-size: 14px;

    --lms-status-failed-bg: #f5cece;
    --lms-status-failed-text: #D53F3E;
    --lms-status-complete-bg: #daf4dc;
    --lms-status-complete-text: #4caf50;
    --lms-status-warning-bg: #f7ede1;
    --lms-status-warning-text: #ff993a;
    --lms-status-processing-bg: var(--background-grey-colour);
    --lms-status-processing-text: var(--text-colour);
    --lms-status-queued-bg: #c6d3ea;
    --lms-status-queued-text: #2323a8;
}
/* Prevent existing icons to be displayed in the background and be positioned in an odd way */
.etrainu-icon-regular[class*=icon-] {
    top: auto;
    height: auto;
    width: auto;
    margin-right: initial;
}
.etrainu-icon-thin[class*=icon-] {
    top: auto;
    height: auto;
    width: auto;
    margin-right: initial;
}
.etrainu-icon-bold[class*=icon-] {
    top: auto;
    height: auto;
    width: auto;
    margin-right: initial;
}
[class*=etrainu-icon-] {
    background-image: none !important;
    margin-left: 0 !important;
}

.lms-container {
    max-width: 1040px;
    width: 100%;
}

.lms-container-fluid {
    max-width: calc(100vw - 40px);
}
.lms-dialogue-large {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-box-shadow: 3px 3px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 3px 3px 10px 0 rgb(0 0 0 / 10%);
}

.lms-dialogue-medium {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
}

.lms-dialogue-small {
    background-color: var(--background-grey-colour);
    border-radius: 5px;
}

.lms-button {
    padding: 10px 22px;
    font-weight: 600;
    font-size: var(--lms-font-size);
    height: fit-content;
    cursor: pointer;
}
.lms-button.lms-button-small {
    padding: 8px 12px;
    border-width: 1px;
}
[class*=lms-button-] {
    border-radius: 100px;
    text-transform: uppercase;
    text-decoration: none;
    border-style: solid;
    border-width: 2px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: var(--lms-font-size);
    height: fit-content;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}
[class*=lms-button-].boxbutton {
    border-radius: 0px;
}

[class*=lms-button-].has-loader {
    position: relative;
}
[class*=lms-button-].has-loader .text {
    visibility: visible;
}

[class*=lms-button-].has-loader .loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}
[class*=lms-button-].has-loader.loading .text{
    visibility: hidden;
}
[class*=lms-button-].has-loader.loading .loader {
    display: block;
}
[class*=lms-button-] p {
    font-size: var(--lms-font-size);
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}
[class*=lms-button-][disabled],
[class*=lms-button-][disabled]:hover {
    color: #fff !important;
    opacity: .4 !important;
    cursor: not-allowed !important;
    background-color: var(--secondary-colour);
}

.lms-button-fill {
    color: #FFFFFF;
    background-color: var(--secondary-colour);
    border-color: var(--secondary-colour);
    min-width: 10ch;
    text-align: center;
}

.lms-button-fill.lms-button-danger {
    background-color: var(--danger-colour);
    border-color: var(--danger-colour);
}
.lms-button-fill:disabled {
    background-color: var(--disabled-grey) !important;
    border-color: var(--disabled-grey) !important;
    cursor: no-drop;
}

.lms-button-fill p{
    color: #FFFFFF;
}

.lms-button-fill:hover {
    background-color: var(--primary-colour);
    border-color: var(--primary-colour);
    color: #FFFFFF;
    text-decoration: none;
}

.lms-button-fill:focus {
    background-color: var(--primary-colour);
    border-color: var(--primary-colour);
    color: #FFFFFF;
    text-decoration: none;
}

.lms-button-hollow {
    background-color: #FFFFFF;
    color: var(--secondary-colour);
    border-color: var(--seconday-colour);
    min-width: 10ch;
    text-align: center;
}
.lms-button-hollow.lms-button-danger {
    border-color: var(--danger-colour);
}
.lms-button-hollow.lms-button-grey {
    border-color: rgb(204, 204, 204) !important;
    color:  var(--text-colour) !important;
}
.lms-button-hollow:disabled {
    border-color: var(--disabled-grey) !important;
    color: var(--disabled-grey) !important;
    background-color: #FFFFFF !important;
    cursor: no-drop;
}

.lms-button-hollow p,
button.lms-button-hollow {
    color: var(--secondary-colour);
}

.lms-button-hollow:hover {
    background-color: var(--secondary-colour);
    border-color: var(--secondary-colour);
    color: #FFFFFF;
    text-decoration: none;
}
.lms-button-hollow.lms-button-danger:hover {
    background-color: var(--danger-colour);
    border-color: var(--primary-danger);
}
.lms-button-hollow:hover p,
button.lms-button-hollow:hover {
    color: #FFFFFF;
}

.lms-button-hollow.lms-button-grey:hover,
.lms-button-hollow.lms-button-grey:focus {
    border-color: rgb(204, 204, 204) !important;
    color:  var(--text-colour) !important;
    background-color: var(--background-grey-colour) !important;
}

.lms-button-hollow:focus {
    background-color: var(--secondary-colour);
    border-color: var(--secondary-colour);
    color: #FFFFFF;
    text-decoration: none;
}


.lms-button-hollow:focus p,
button.lms-button-hollow:focus {
    color: #FFFFFF;
}

.lms-button-action {
    text-transform: none;
    outline: 1px solid #D5D5D5;
    border: 1px solid transparent;
    margin: 0 8px;
    border-radius: 4px;
    background-color: #FFFFFF;
    transition: all 100ms ease-in-out;
    color: var(--text-colour);
    font-weight: 400;
}

.lms-button-action svg {
    margin: 0 6px;
    vertical-align: middle;
    stroke-width: 1.5;
}

.lms-button-action-active {
    outline-color: var(--secondary-colour);
    color: var(--secondary-colour);
    outline-width: 2px;
}

.lms-link {
    color: var(--secondary-colour);
    padding-bottom: 1px;
    border: none;
    background: none;
}

a.lms-link {
    font-weight: 600;
    font-size: var(--lms-font-size);
}

.lms-link:hover {
    cursor: pointer;
    color: var(--secondary-colour);
    text-decoration: underline;
}

.lms-link:focus {
    cursor: pointer;
    color: var(--secondary-colour);
    text-decoration: underline;
}

.lms-text-input {
    padding: 10px 1ch;
    color: #898989;
    border: none;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: #898989;
}

.lms-text-input-container,
.lms-input-container {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
}
.lms-text-input-container.inline-form,
.lms-input-container.inline-form {
    flex-direction: row;
}
.lms-radio-input-container .lms-radio-input {
    border-bottom: 1px solid #898989;
    display: flex;
    align-items: center;
}
.lms-input-container {
    border-bottom: 1px solid #898989;
}
.lms-input-container .lms-input-field {
    flex-grow: 1;
}
.lms-radio-input-container .lms-radio-input .radio-group-label,
.lms-input-container .lms-input-label{
    margin-right: 4.5ch;
}
.lms-radio-input-container label {
    color: #898989;
    font-weight: normal;
    padding: 12px 12px 6px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.lms-radio-input-container label:nth-child(2) {
    padding-left: 0;
}
.lms-radio-input-container label:last-child {
    padding-right: 0;
}
.lms-radio-input-container .lms-radio-input input[type=radio] {
    margin-top: 0;
    vertical-align: middle;
    display: inline-block;
    margin-right: 8px;
}
.lms-text-input-container .lms-text-input {
    font-size: var(--lms-font-size);
    color: #898989;
    width: 100%;
    border-style: none;
    border-bottom-style: solid;
    border-color: #898989;
    border-width: 1px;
    padding: 12px 24px 12px 0;
    font-weight: 400;
}

.lms-text-input-container.has-helper-text {
    position: relative;
    padding-bottom: 20px;
}

.lms-text-input-container.has-prefix-icon input {
    padding-left: 3.5ch;
}

.lms-text-input-container.has-suffix-icon input {
    padding-right: 4.5ch;
}

.lms-text-input-container .lms-text-input.input-error {
    border-bottom-color: var(--danger-colour);
}

.lms-text-input-container [class*="icon-"] {
    font-size: 24px;
    color: #898989;
    position: absolute;
}

.lms-text-input-container .suffix-icon {
    right: .5ch;
    width: 24px;
    height: 24px;
}

.lms-text-input-container .suffix-icon.small-icon {
    font-size: 12px;
    display: flex;
    align-items: center;
    width: 12px;
    height: 12px;
}
.lms-text-input-container .clickable-icon {
    cursor: pointer;
}
.lms-dropdown {
    background-color: var(--background-grey-colour);
    border-radius: 5px;
    display: flex;
    align-items: center;
    position: relative;
}

.lms-dropdown .lms-dropdown-suffix {
    right: 1ch;
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 1;
    cursor: pointer;
}

.lms-dropdown select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    border: none;
    box-shadow: none;
    background-color: transparent;
    font-weight: 800;
    font-size: var(--lms-font-size);
    height: 4rem;
    padding: 0.25rem 12px;
    z-index: 2;
    width: calc(100% + 30px);
}
.select2-container-disabled.select2-container.select2 .select2-choice {
    border: none;
    border-bottom: 1px solid #898989;
    cursor: not-allowed;
}
.lms-dropdown i {
    width: 16px;
    height: 16px;
    font-weight: 800;
}

.lms-toggle, .lms-toggle-input {
    display: flex;
    align-items: center;
}

.lms-toggle *, .lms-toggle-input *  {
    cursor: pointer;
}

.lms-toggle-input input {
    text-decoration: none;
}

.lms-toggle-input input.lms-toggle-hidden-input:checked ~ .icon-settings-off {
    color: var(--secondary-colour);
    transform: scaleX(-1);
}

.lms-toggle-input input.lms-toggle-hidden-input:disabled ~ .icon-settings-off {
    filter: var(--disabled-grey)scale(1);
    cursor: not-allowed;
}

.lms-toggle-input input.lms-toggle-hidden-input:disabled ~ .lms-text {
    color: #57585c;
    cursor: not-allowed;
}

.lms-toggle-input .lms-toggle-hidden-input {
    display: none;
}

.lms-toggle [class*="icon-settings-"], .lms-toggle-input [class*="icon-settings-"]{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2rem;
    font-size: 3rem;
    margin-bottom: 0;
}
.lms-toggle input[type=checkbox] {
    display: none;
}
.lms-toggle input[type=checkbox]:checked + .icon-settings-off,
.lms-toggle .icon-settings-off.checked{
    transform: scaleX(-1);
    color: var(--secondary-colour);
}
.lms-checkbox {
    margin-top: 0;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-colour);
}
.lms-checkbox input[type=checkbox] {
    display: none;
}
.lms-checkbox label {
    padding-left: 36px;
    font-weight: normal;
    display: flex;
    align-items: center;
    line-height: 18px;
    cursor: pointer;
}
.lms-checkbox label:before {
    font-family: 'etrainu-icon-regular' !important;
    content: '\e920'; /* unchecked */
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    position: absolute;
    left: 0;
    cursor: pointer;
}
.lms-checkbox input[type=checkbox]:checked + label:before {
    content: '\e9b5'; /* checked */
    color: var(--secondary-colour);
}
* {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
}

h1 {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 36px;
    color: var(--text-colour);
    line-height: 1.2;
}

h2 {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 28px;
    color: var(--text-colour);
}

h3 {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 20px;
    color: var(--text-colour);
}

h4 {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 18px;
    color: var(--text-colour);
}

h5 {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-colour);
}

h6 {
    font-family: Montserrat, 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: var(--lms-font-size);
    color: var(--text-colour);
}

p {
    font-size: var(--lms-font-size);
}
.modal {
    align-content: center;
    justify-content: center;
}
.modal-content {
    padding: 36px;
    border: none;
}
.modal-header {
    border: none;
    padding: 0;
    margin-bottom: 24px;
}
.modal-header .close {
    margin: 8px 0;
    font-size: 12px;
    opacity: 1;
}
.modal-title {
    font-weight: 700;
}
.modal-body {
    color: var(--text-colour);
    padding: 0;
    margin: 24px 0;
}
.modal-body .modal-warning{
    background-color: #FFF5EB;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 4px;;
}
.modal-body .modal-warning p{
    margin: 0px;
}
.modal-body .modal-warning .modal-warning-icon{
    width: 20px;
    height: 20px;
    color: #ff993a;
    font-size: 20px;
    padding-left: 5px;
}
.modal-footer {
    border: none;
    padding: 0;
}
.lms-text {
    text-decoration: none;
    color: var(--text-colour);
    font-size: var(--lms-font-size);
    margin-bottom: 0;
}

.lms-danger-text {
    color: var(--danger-colour);
}

.lms-background-grey {
    background-color: var(--background-grey-colour);
}

.lms-danger-border {
    border-style: solid;
    border-width: 2px;
    border-color: var(--danger-colour);
}

.look-and-feel-primary-colour {
    color: var(--primary-colour);
}

.look-and-feel-secondary-colour {
    color: var(--secondary-colour);
}

.look-and-feel-banner-colour {
    color: var(--banner-colour);
}

.look-and-feel-primary-colour-background {
    background-color: var(--primary-colour);
}

.look-and-feel-secondary-colour-background {
    background-color: var(--secondary-colour);
}

.look-and-feel-banner-colour-background {
    background-color: var(--banner-colour);
}

.lms-report-form .form-section {
    padding: 1em 1em .5em;
    margin-bottom: 1em;
    background: var(--background-grey-colour);
    position: relative;
}
.lms-report-form .form-section .form-group label {
    font-weight: normal;
}
.lms-report-form .form-section .form-group.inline-form {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
}
.lms-report-form .form-section .form-group.inline-form label {
    margin-bottom: 0;
    text-transform: uppercase;
}
.lms-report-form .form-section .form-group.inline-form .v-select {
    flex-grow: 1;
}
.lms-report-form .form-section .form-group.inline-form .v-select .vs__selected {
    margin-top: 0.5rem;
}
.lms-report-form .form-section .form-group {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 1.4em;
}
.lms-report-form .form-section .form-group.lms-text-input-container .lms-text-input {
    background: none;
}
.lms-report-form .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}
.lms-report-form .form-actions > * {
    margin-left: 16px;
}
.lms-container .vs--single.vs--loading .vs__selected,
.lms-container  .vs--single.vs--open .vs__selected {
    top: 4px;
}
.lms-report-form .v-select .vs__dropdown-toggle .vs__selected-options .vs__search {
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 0;
}
.lms-report-form .v-select .vs__actions {
    padding-top: 0;
}
.lms-report-form .form-section .helper-text {
    position: absolute;
    bottom: 0;
    font-size: 12px;
}
.has-error label {
    color: var(--danger-colour);
}
.helper-text.error {
    color: var(--danger-colour);
}
.helper-text {
    font-weight: normal;
}

.helper-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 5;
}
.helper-hover .toggle {
    position: relative;
    z-index: 3;
    font-size: 16px;
    line-height: 100%;
}
.helper-hover .content,
.helper-hover-content {
    position: absolute;
    z-index: -1;
    opacity: 0;
    top: 50%;
    left: 0;
    transform: translate(-25%, -50%);
    background: var(--secondary-colour);
    color: #fff;
    border-radius: 16px;
    transition: opacity .2s linear, transform .2s linear;
    font-size: 12px;
    font-weight: normal;
    width: 250px;
    transition-delay: .5s;
    padding: 8px 12px;
    margin-left: calc(100% + 8px);
    line-height: 1.4;
}
.helper-hover-content {
    position: fixed;
    margin-left: 0;
    z-index: 2;
    left: -9999px;
    top: -9999px;
}
.helper-hover:hover .content,
.helper-hover:focus .content,
.helper-hover-content.show {
    opacity: 1;
    transform: translate(0, -50%);
    transition: opacity .2s linear, transform .2s linear;
    transition-delay: .5s;
    z-index: 2;
}

.helper-hover.right-to-left .content {
    transform: translate(-25%, -50%);
}
.helper-hover-content[data-direction=rtl] {
    transform: translate(0%, -50%);
}
.helper-hover.right-to-left:hover .content {
    transform: translate(calc(-100% - 34px), -50%);
}

.helper-hover-content[data-direction=top] {
    transform: translate(0, -100%);
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    size: 12px;
    line-height: 14.63px;
    padding: 13px 15px 13px 15px;
    background-color: #676767;
    z-index: 50;
    transition-delay: 0s;

}
.helper-hover.top:hover .content,
.helper-hover.top:focus .content,
.helper-hover-content[data-direction=top].show  {
    /*width: 100%; */
}

@media screen and (min-width: 768px) {
    .lms-report-form .form-section .form-group.inline-form {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .lms-report-form .form-section .form-group.inline-form > label {
        width: 33.3333333333%;
    }
    .lms-report-form .form-section .form-group.inline-form > *:not(label):not([class^=etrainu-icon]) {
        width: 66.66666666667%;
    }
    .lms-report-form .form-section .form-group.inline-form .additional-options {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-left: -8px;
        margin-right: -8px;
    }
    .lms-report-form .form-section .form-group.inline-form .additional-options .additional-option {
        width: 50%;
        margin-left: 8px;
        margin-right: 8px;
    }
    .lms-report-form .form-section .helper-text {
        box-sizing: content-box;
        width: 100%;
        margin-left: 33.3333333333%;
        position: absolute;
    }
}
.dropdown_option {
    cursor:pointer;
    padding: 8px 20px;
    margin-bottom: 0;
}
.dropdown_option:hover {
    background-Color:var(--background-grey-colour);
}
.group-selector-section {
    padding-bottom: 38px;
}
.warning-status {
    background: var(--lms-status-warning-bg);
    color: var(--lms-status-warning-text);
    font-weight: 200;
    text-transform: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
}
.warning-status .helper-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
}
.warning-status .helper-info > * {
    font-size: 16px;
    padding: 16px;
    box-sizing: content-box;
    width: 16px;
}