@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/comfortaa-v40-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/comfortaa-v40-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/comfortaa-v40-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/comfortaa-v40-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/comfortaa-v40-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/comfortaa-v40-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}




:root {
    font-family: 'Comfortaa' !important;
    --bs-body-font-family: "Comfortaa" !important;
    height: 100%;
    --pip-darkBackground: #333333;
    --pip-blue: #149bd7;
}

html, body {
    font-family: 'Comfortaa' !important;
    --bs-body-font-family: "Comfortaa" !important;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
}


a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


.e-card, .e-listbox-container, .e-multi-select-wrapper .e-delim-values, .e-input-group, .e-input-group.e-control-wrapper {
    font-family: "Comfortaa" !important;
}

.e-dropdownbase .e-list-item {
    font-family: Comfortaa;
}

.content {
    padding-top: 1.1rem;
    overflow-y: scroll;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}


.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.PageWrapper {
    background-color: #f7f7f7;
}

.supportCard {
    margin-bottom: 10px;
    box-shadow: 2px 2px 3px grey !important;
}
.reportTemplate{
    height:200px;
}

    .supportCard:hover {
        cursor: pointer;
    }
.reportTemplate .e-card-content {
    height: 200px;
}
.reportTemplateImage{
    position:relative;
    top:43px;
}
.pdfWrapper {
    height: 100%;
    width: 100%;
    min-height: 50%;
}

.VideoWrapper {
    max-height: 100%; /* Set a pixel value instead if no parent container*/

    max-width: 100%; /* Set a pixel value instead if no parent container*/
    margin: 0 auto; /* Center the container */
    vertical-align: middle;
    display: flex;
    background-color: black;
    height: 100%;
}

    .VideoWrapper video {
        vertical-align: middle;
    }

.VideoWrapperCoachingVid {
    margin: 20px 22px auto;
    /* vertical-align: middle; */
    /* display: flex
; */
    width: 16em;
    height: 200px;
/*    background: lightblue;
    border-radius: 10px;
    box-shadow: 6px 7px 2px rgba(-55, 119, 200, 0.4);
    display: flex;
    flex-wrap: wrap;
*/    max-width: 18em;
}

    .VideoWrapperCoachingVid video {
        vertical-align: middle;
        padding: 25px;
    }

.evaluationChartWrapper {
    width: 100%;
    height: 250px;
}

td.e-rowcell.achievedPass {
    background-color: green !important;
}

td.e-rowcell.didNotAchievePass {
    background-color: red !important;
}


.100PercentDataGrid {
    height: 100%;
}

#CBTM {
    padding-top: 20%;
    font-style: italic;
}

.flex-container {
    display: flex;
    felx-wrap: wrap;
    justify-content: center;
}

#coachvidinfo {
    flex-grow: 1;
    flex-basis: 30%;
    margin: 5px 5px auto;
    /* vertical-align: middle; */
    /* display: flex
; */
    width: 16em;
    /* height: 200px; */
/*    background: lightblue;
    border-radius: 10px;
    box-shadow: 6px 7px 2px rgba(-55, 119, 200, 0.4);
    display: flex;
    flex-wrap: wrap;
*/    /*max-width: 18em;*/
    padding: 20px;
}

#coachvidtitle {
    font-size: x-large;
}

#coachviddescription {
    text-align: justify;
}

#coachvidduration {
    font-size: smaller;
}

#coachvidnext {
    text-align: center;

}

#coachvidnextlink {
}

#coachvidnexttext {
}

#coachvidnextimageholder {
    height: 120px;
    cursor: pointer;
}

#coachvidnextimage {
    /*    border-radius: 15px;
*/
    box-shadow: 6px 7px 2px rgb(0 0 0 / 40%);
}

#coachingvidactionplan {
    text-align: center;
    margin-top: 25px;
    width: 100%;
}

.CBvidthumb {
    height: 120px;
    cursor: pointer;
    box-shadow: 6px 7px 2px rgb(0 0 0 / 40%);
    margin: 10px;
}
.AppealButton {
    background-image: url(../img/AppealsCheck.png);
    background-position-x: 0em;
    background-size: 2em;
    background-repeat: no-repeat;
}

.skipButton {
    position: relative;
    bottom: -300px;
    right: -600px;
    background: whitesmoke;
    padding: 4px;
    cursor: pointer;
    z-index: 10;
}
/*.MP3Player {
    left: 20%;
    position: relative;
    top: 40%;
}*/
.collapsible {
    position: relative;
    right: -170px;
    padding: 10px;
    cursor: pointer;
}
#labelMediaMinMax {
    position: relative;
    right: -170px;
    padding: 10px;
    background-color: white;
}
#imageGrid > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    list-style-type: none;
}
#imageGrid > ul > li > img {
    max-height: 250px;
    max-width: 250px;
    padding: 5px;
}
.lapTitleLabel{
    display:flex;
    pa
}
.lapClientLogo {
    position: absolute;
    top: 46px;
    right: 10%;
    height: 200px;
    width: 200px;
}
/**/
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    display: inherit;
    font-family: 'Comfortaa' !important;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    -ms-flex-item-align: auto;
    -ms-grid-row-align: auto;
    align-self: auto;
    margin-bottom: 0;
}
.calendarButton {
    background-color: black !important;
    color: white !important;
    position: relative;
    top: -32px;
    right: -100%;
    background-image: url(../img/reminder.png) !important;
    background-repeat: no-repeat !important;
}
    .calendarButton:disabled {
        background-color: grey !important;
        background-repeat: no-repeat !important;
    }
/*    .calendarButton:after {
        background-repeat: no-repeat !important;
    }
    .calendarButton:active {
        background-color: dimgrey;
        background-repeat: no-repeat !important;
    }*/
.blackButton {
    background-color: black !important;
    color: white !important;
    text-align:center !important;
}

.supportSection {
    margin: 20px;
}

.supportHeader {
    min-height: 20px;
    border-radius: 5px 5px 0px 0px;
    padding-left: 10px;
}

    .supportHeader P {
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: bold;
    }

.supportBody {
    left: 30%;
    position: sticky;
    padding-top: 10px;
    background: white;
    padding-left: 10px;
}

.supportItem {
    display: flex;
}
.supportImage {
    width:150px;
    text-align:center;
}

/* bugid#38165/38503 (round 2): on-the-fly thumbnails and video first-frames sit in the same
   80px-high box the old icon thumbnails used, so the cards keep their original uniform height
   (retest feedback: 110px-tall media made the tiles taller than they would normally be, and
   uneven). */
.supportImage img,
.supportImage video.supportThumbVideo {
    max-width: 100%;
    height: 80px;
    width: auto;
    object-fit: contain;
}

.DocTitle {
    font-weight: bold;
}

.sioverlay {
    position:absolute;
    opacity: 0.1;
    height:40px;
    top:18px;
    left:55px;
}
.sioverlay:hover{
    opacity:0.7;
}
.sioverlay img{
    width:64px;
    height:64px;
}

.EvalExportButton {
    position: absolute;
    right: 50%;
    z-index: 1;
    top: 70px;
}
.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 0px !important;
}
.AttentionSectionHeading {
    padding: 25px;
    text-align: center;
}
.BMSDescription {
    font-size: smaller;
}

.supportMediaViewer .scalingVideo {
    position: absolute;
    left: 0;
    top: 60px;
    height: calc(100% - 60px);
    object-fit: scale-down;
    width: 100%;
    text-align: center;
}


.rz-listbox {
    width:300px;
}
/* bugid#38908: Syncfusion writes every dialog's max-height as PIXELS computed from the window at
   the moment it opens, and never recalculates - so opening in a small window and maximising left
   the Switch Programme picker (and any percentage-height dialog) short and clipped. Replacing
   only the CAP with a live viewport unit fixes the whole class at once: percentage heights (the
   picker's 90%) and auto heights (the evaluation report) re-flow with the window in both
   directions, while heights the user sets by dragging (EnableResize dialogs) are untouched.
   Verified live on the picker (585px -> 900px on maximise, back again) and the evaluation
   report dialog (950px <-> 618px, correctly capped at 95vh in the small window). */
.e-dialog {
    max-height: 95vh !important;
}

/* bugid#38405 round 3 (Lloyd): the page hosts' sticky headers pin INSIDE #PageWrapperBody's
   5px padding, so scrolling content peeked through the strip above "< Back". The cover strip
   hides whatever the container padding exposes, on all three full-page hosts. */
.fullPageHeader::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    height: 6px;
    background: white;
}

/* bugid#38952: the framing border round the report body (added in bugid#38405 round 3) reads as
   a bevel around the whole page - the report now sits flush in the shell. */