span,
.dx-data-row {
    font: normal normal normal 16px/19px Segoe UI;
}


.headerText,
.dx-datagrid-text-content {
    font: normal normal 600 16px/21px Segoe UI;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td,
.dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    vertical-align: middle;
}

.userGridIcon {
    margin: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.userImage {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

.userLink {
    align-self: center;
    color: var(--color-accent);
    text-decoration: underline !important;
}

    .userLink:hover {
        text-decoration: none;
    }

.textToImage {
    margin: 6px;
    width: 25px;
}

.ellipse {
    height: 10px;
    width: 10px;
    background-color: var(--color-accent);
    border-radius: 50%;
    align-self: center;
    margin-right: 4px;
}

.ellipseNotStarted {
    background-color: var(--color-bg-disabled);
}

.ellipseInProgress {
    background-color: var(--color-accent);
}

.ellipseCompleted {
    background-color: var(--color-primary-alt);
}

.cellTemplateStyle {
    display: flex;
    justify-content: center;
}

.userReportCellStyle {
    justify-content: normal;
}

    .userReportCellStyle .headerText {
        font: normal normal normal 12px/19px Segoe UI;
        color: var(--color-text-muted);
    }

.trainingReportHeader {
    background: var(--color-bg-panel) 0% 0% no-repeat padding-box;
    position: relative;
    left: 21vw;
    margin-left: -40vw;
    margin-top: -45px;
}

    .trainingReportHeader h1 {
        font-size: 20px;
    }

    .trainingReportHeader > div:first-child {
        margin-left: 19vw;
    }

.trainingReportHeaderElementTitle {
    font: normal normal normal 16px/21px Segoe UI;
    color: var(--color-text-muted);
}

.trainingReportHeaderElementTitleText {
    font: normal normal normal 16px/21px Segoe UI;
    overflow-wrap: break-word;
}

.trainingReportResultsHeader {
    padding-top: 46px;
    margin-bottom: 32px;
    min-height: 114px;
    max-height: 114px;
}

.trainingReportUserHeader {
    margin-bottom: 48px;
    /*    min-height: 227px;
    max-height: 227px;
    padding-top: 30px;*/
}

    .trainingReportUserHeader h1 {
        font: normal normal 600 28px/33px Segoe UI;
    }

    .trainingReportUserHeader .userDetails {
        display: flex;
        justify-content: space-between;
    }

    .trainingReportUserHeader p {
        padding-bottom: 16px;
    }

.trainingReportDetailsHeader {
    margin-bottom: 42px;
}

    .trainingReportDetailsHeader h1 {
        font: normal normal 600 20px/25px Segoe UI;
        letter-spacing: 0px;
        color: var(--color-text-default);
        padding-top: 8px;
    }

    .trainingReportDetailsHeader h2 {
        font: normal normal 600 14px/19px Segoe UI;
        letter-spacing: 0px;
        color: var(--color-text-muted);
        text-transform: uppercase;
    }

.competionFont {
    font: normal normal 600 14px/19px Segoe UI;
}

.tabUnderline {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-text-default);
    display: none;
}

.tabTitle {
    color: var(--color-text-muted);
    font-size: 16px;
    padding: 0px 30px 17px 30px;
    font: normal normal normal 16px/21px Segoe UI;
}

.tabElement {
    max-width: 233px;
    cursor: pointer;
}

.tabActive .tabTitle {
    color: var(--color-text-default);
}

.tabActive .tabUnderline,
.tabElement:hover .tabUnderline,
.tabElement:focus .tabUnderline,
.tabElement:active .tabUnderline {
    display: block;
}

.dx-selectbox input.dx-texteditor-input {
    font: normal normal normal 16px/21px Segoe UI;
}

.dx-list-item-content {
    word-wrap: break-word;
    white-space: normal;
}