body {
    color: #14133D;
    font-family: 'Open Sans Condensed', sans-serif;
}

:root {
    --primary-color: #1F6574;
    --primary-color-faded: #5F96A2;
    --primary-color-darker: #11454f;
    --secondary-color: #17295B;
    --secondary-color-faded: #7287c2;
    --secondary-color-darker: #0b1636;
    --primary-color-ultra-faded: rgba(21, 145, 142, 0.1);
    --primary-ultra-fade-solid: #daebeb;
    --secondary-ultra-fade-solid: #d3daf0;
    --tertiary-color: #4188B6;
    --tertiary-color-faded: #7aa7c4;
    --tertiary-ultra-fade-solid: #d5e5f0; /* #bad6e8; */
    --dashDevPlanCard: #e6e6e6;
    --dashModuleCard: white;
    --dashSelfAssessmentCard: #f2faff;
    --dashLogBookCard: #f5ffff;
    --dashOnboardingCard: #edf0fa;
    --dashResourceCard: #f0f0f0;
    --btnNormal: #e6b12c;
    --btnDanger: red; /*#8F1500*/
    --btnCancel: lightgray;
    --btnGreen: #25A159;
    --btnNormalDrk: #8f6e1b;
    --btnDangerDrk: #8c2626;
    --btnCancelDrk: gray;
    --btnGreenDrk: #1F8248;
    --btnNormalFontClr: black;
    --btnDangerFontClr: black;
    --btnCancelFontClr: black;
    --btnNormalFontClrAccent: white;
    --btnDangerFontClrAccent: white;
    --btnCancelFontClrAccent: black;
    --better: #4188B6;
    --worse: #c75b68;
    --worsergb: 199, 91, 104;
    --inprogress: #1F6574;
    --nochange: #595959;
    --graphite: #2d2d2e;
    --green: #4a7857;
    --purple: #674a78;
    --gold: #bd971a;
    --borderRadiusBtns: 8px;
    --borderRadiusBoxes: 8px;
    --tableHeaders: #17295B;
    --splashHeader: #1F6574;
    --glowDotColor: rgba(63, 191, 191, 0.77);
    --toggleLight: #5F96A2;
    --toggleDark: #235793;
}


@media print {
    @page {
        size: letter portrait;
        margin: 1cm;
    }
   
   #myDashboard.reportingDashboard {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    #wTimeline {
        grid-column: 1 / 4;
    }

    #wUnitProgress {
        grid-column: 1 / 3;
    }

    #wStats {
        grid-column: 3 / 4;
    }

    #wActivity {
        grid-column: 2 / 4;
    }

    #wMonthlyProgress {
        grid-column: 1 / 3;
    }

    #wEnd {
        grid-column: 1 / 4;
    }

    footer {
        display: none !important;
    }

    .widget {
        page-break-inside: avoid;
    }
}

.hdrReportBtns {
    display: flex;
}

#btnAddNewQualifications {
    margin-right: 5px;
}

.fta-col3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
}

.fta-col2 {
    columns: 2;
}

.hdrBtnOverride .k-button {
    background-color: var(--secondary-color-darker);
}

.myFilterIcon button.k-button {
    background-color: var(--secondary-color-darker);
}

.myFilterIcon button.k-spinner-increase,
.myFilterIcon button.k-spinner-decrease {
    background-color: lightgray;
}

.myFilterIcon .k-picker,
.myFilterIcon .k-picker:hover,
.myFilterIcon .k-picker:focus,
.myFilterIcon .k-picker:focus-within {
    border-color: transparent;
    background-color: transparent;
    border-width: 0px;
    box-shadow: unset;
}

.k-button-solid-primary {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color-faded) !important;
}

    .k-button-solid-primary:hover {
        border-color: var(--primary-color) !important;
        background-color: var(--primary-color) !important;
    }

button[data-bind="visible:operatorVisible"] {
    background-image: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

a.k-active,
a.k-active:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: white !important;
}

.model-header-custom {
    background-color: red;
    color: white;
}

.bootbox.modal {
    z-index: 9999 !important;
}

    .bootbox.modal.bb-alternate-modal .modal-content {
        background: #555 none repeat scroll 0 0;
        color: #fff;
    }
/* LOGIN SCREEN OVERRIDES */

footer {
    width: 100%;
    position: absolute;
    margin-top: 3rem;
    padding: 1rem 0;
}

.footerRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.loginFooter p {
    color: var(--graphite) !important;
    line-height: 1.4 !important;
}

body.loginContainer {
    background-color: var(--primary-color-faded);
    background-image: url("/images/texture1.png");
}

.formContainer {
    width: 95%;
    margin: 2em auto;
}

.loginBox {
    background: none;
    background-color: white;
    box-shadow: inset 0 0 30px var(--primary-color);
    padding: 2em;
    border-radius: 8px;
}

    .loginBox .loginForm .login-form-block .loginFormLabel {
        background: var(--secondary-color-faded);
        border-radius: 4px;
        color: white;
    }

.loginFormLabel {
    padding: 1px 4px;
    margin-top: -60px;
    margin-left: 5px;
    z-index: 50;
}

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

    .loginLogo img {
        width: 50%;
    }

.formEmail,
.formPassword {
    background-color: var(--secondary-ultra-fade-solid);
    color: var(--graphite);
    width: 100%;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 6px;
}


.login-form-block > *,
.loginActionBtns > *,
.login-form-footer > * {
    color: var(--graphite);
}

.login-welcome {
    color: var(--graphite) !important;
}

.login-blocks-img,
.login-welcome,
.forgotten-password {
    text-align: center;
}

.login-welcome {
    margin-top: 20px !important;
}

.loginActionBtns,
.loginReset {
    display: flex;
    justify-content: center;
}

.loginActionBtns {
    margin-top: 20px;
}

.forgotten-password {
    font-size: 0.8rem;
}

a.forgotten-password {
    text-decoration: none;
    color: var(--secondary-color-faded);
}

    a.forgotten-password:hover {
        font-weight: bold;
    }

.loginBox .loginForm .loginActionBtns .btn {
    border-radius: 4px !important;
    background: var(--btnNormalDrk) !important;
    padding: 15px;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    text-transform: uppercase;
    margin-left: 0px;
    color: white;
    font-weight: bold;
}

.logFormBtn,
.loginBtn {
    border-radius: 4px !important;
    padding: 15px !important;
    line-height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .75rem !important;
    text-transform: uppercase;
    margin-left: 0px !important;
    font-weight: bold !important;
    border: 0px;
}

.loginBtn {
    background: var(--btnNormalDrk) !important;
    color: white !important;
}


    .loginBtn:hover {
        background: var(--btnNormal) !important;
        color: black !important;
        font-weight: bold;
    }


.login-form-block {
    margin-top: 30px !important;
}


.login-box:before {
    background: unset !important;
}

body.login-container {
}

body.login-container-OLD {
    background-color: var(--primary-color-faded) !important;
    background-image: url("/images/texture1.png") !important;
}

.login-box .login-blocks-img {
    background: none !important;
}


.login-box {
    background: none !important;
    background-color: white !important;
    box-shadow: inset 0 0 30px var(--primary-color);
    padding: 2em;
    border-radius: 8px;
}

    .login-box .login-form .login-form-block .login-form-label {
        background: var(--secondary-color-faded) !important;
        border-radius: 4px !important;
        color: white !important;
    }

.login-form-block .form-control,
.login-form-block .login-form-control {
    background-color: var(--secondary-ultra-fade-solid) !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: .9rem;
    min-height: 40px;
    padding: 8px 16px !important;
}


.login-welcome,
.login-form-block input.login-form-control {
    color: var(--graphite) !important;
}

.login-box {
    padding: 40px 20px !important;
}

    .login-box .login-form .login-form-actions {
        justify-content: center !important;
    }




/* override fonts */
.RadGrid, .RadGrid .rgMasterTable, .RadGrid .rgDetailTable, .RadGrid .rgGroupPanel table, .RadGrid .rgCommandRow table, .RadGrid .rgEditForm table, .RadGrid .rgPager table, .GridToolTip {
    font-family: 'Open Sans Condensed', sans-serif;
}

h3.mb-3 {
    font-weight: bold;
    text-align: left;
}

.deletedreq {
    color: gray;
    font-style: italic;
    text-decoration: line-through
}

.disabledreq {
    color: lightgray;
    font-style: italic;
}

.notread {
    font-weight: bold;
    color: #17295B;
}

.customNav,
.customHeader,
.customBrand {
    background-color: var(--secondary-color);
    color: white !important;
}

.navToggle {
    color: white;
}

.customBrand {
    font-weight: bold;
}

.nav-link,
li.nav-item,
.dropdownLink,
.navbar-light,
.navbar-brand,
.isLight {
    color: white !important;
}

.dropdown-item {
    white-space: normal !important;
}

.dropdown-menu {
    padding: 0.5rem 4px;
    min-width: unset;
    width: 12rem;
}

.lastDrop li.nav-item {
    margin-right: 0 !important;
}

/*
.lastDrop {
    display: flex;
    justify-content: space-between;
}
    */
.navUserIcon {
    margin-right: 10px;
}

li.nav-item {
    margin-right: 1rem;
}

.customNav.dropdown-item:focus, .customNav.dropdown-item:hover {
    color: #1e2125;
    background-color: rgba(250, 250, 250, 0.3);
}

.customNav .nav-link:hover {
    background-color: rgba(250, 250, 250, 0.3);
}


.k-grid tr:hover {
    background-color: #cccccc !important;
}

.k-grid-header th {
    background-color: var(--secondary-color-darker) !important;
}


.k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-marquee-color, .k-panel > .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited {
    color: #fff;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

    .k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-marquee-color, .k-panel > .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited {
        color: #fff;
        background-color: var(--primary-color-faded) !important;
        border-color: var(--primary-color-faded) !important;
    }


.leftBtnRow {
    display: flex;
    justify-content: flex-start;
}

.rightBtnRow {
    display: flex;
    justify-content: flex-end;
}


    .leftBtnRow input,
    .rightBtnRow input {
        margin-right: 5px;
    }


/*
td[role=gridcell] {
    font-size: 1rem;
}
*/

.navToggle {
    color: white;
}

.verSelectionRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.verSelector {
    width: 30%;
    margin-right: 10px;
    min-width: 300px;
}

.verSelectorSmall {
    width: 10%;
    margin-right: 10px;
    min-width: 160px;
}

.vSelectionRow {
    align-items: center;
}

    .vSelectionRow > div,
    .verSelectionRow > div {
        margin-bottom: 8px;
    }

.onboardingComplete {
    font-size: 3rem;
    margin: -10px 0 15px 0;
    color: var(--tertiary-color);
}

.approved,
.inprogress,
.disabled,
.rejected {
    font-weight: bold;
}

.partiallyassessed {
    color: gray;
}

.approved {
    color: var(--better);
}

.disabled {
    color: var(--btnCancelDrk);
    font-weight: bold;
}

.rejected {
    color: var(--worse);
}

.inprogress {
    color: var(--inprogress);
}

.bold {
    font-weight: bold;
}

.x2,
.x2 a {
    color: cyan !important;
}

    .x2:hover {
        transform: scale(1.1, 1.1);
    }

#myFilesPage {
    justify-content: flex-end;
}

.schematicsContainer {
    position: relative;
}

.schematicsList {
    display: flex;
    overflow-x: auto;
}

.schematicImg {
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

    .schematicImg img {
        width: 100px;
        height: 100px
    }

.bigSchematic {
    justify-content: center;
    margin-right: 0px;
    cursor: crosshair;
}

    .bigSchematic img {
        width: 100%;
        height: auto;
        max-width: 800px;
    }


.schematicImg:last-child {
    margin-right: 0px;
}

.glowDot {
    background-color: var(--glowDotColor);
    border-radius: 50%;
}

.popDot {
    animation-name: popDot;
    animation-duration: 0.3s;
}

@keyframes popDot {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(2)
    }

    100% {
        transform: scale(1);
    }
}

.popThisDetail {
    animation-name: popDtl;
    animation-duration: 0.3s;
}

@keyframes popDtl {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1);
    }
}





#chartLoggedHours .k-tooltip,
#chartLoggedHours .k-tooltip-content {
    height: 200px;
    background-color: pink !important;
}


.isDashDevPlan {
    background-color: var(--dashDevPlanCard);
}

.isDashSelfAssessment {
    background-color: var(--dashSelfAssessmentCard);
}

.isDashOnboarding {
    background-color: var(--dashOnboardingCard);
}

.isDashLogBook {
    background-color: var(--dashLogBookCard);
}

.isDashModule {
    background-color: var(--dashModuleCard);
}

.isDashResource {
    background-color: var(--dashResourceCard);
}

.hide {
    display: none !important;
}

.dashTopBtns {
    display: flex;
}

    .dashTopBtns .btn {
        margin-right: 5px;
    }

        .dashTopBtns .btn:last-of-type {
            margin-right: 0;
        }

.btn-custom2 {
    color: white;
    background-color: #235793;
    border-color: #235793;
    font-weight: bold;
    letter-spacing: 0.05em;
    max-width: 100%;
}

.btn-language {
    color: #235793;
    background-color: white;
    border-color: white;
    letter-spacing: 0.05em;
    max-width: 100%;
}

.btn-module {
    color: #235793;
    background-color: white;
    border-color: gray;
    letter-spacing: 0.05em;
    max-width: 100%;
}

.btn-criteria {
    color: dimgray;
    background-color: blue;
    border-color: gray;
    letter-spacing: 0.05em;
    width: 100%;
    text-align: left;
}

    .btn-criteria:hover {
        color: black;
    }

.tdTextBtn {
    width: 50px;
    margin-bottom: 3px;
}

td .tdTextBtn:last-child {
    margin: 0px;
}

.selectionRow,
.dropSelectionRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selectionRowOptions {
    display: flex;
    justify-content: space-between;
    width: 40%;
}

.selectName {
    width: 60%;
}

.selectStatus {
    width: 35%
}

.dropSelectionRow .selectName,
.dropSelectionRow .selectStatus {
    margin-right: 10px;
}

.dashBtns {
    display: flex;
}

.assessorBtns {
    display: flex;
}

.selectionRowOptions .ck1:nth-of-type(1) {
    margin-bottom: 0px;
}

.selectionRowOptions .ck1 {
    margin-top: 5px;
    min-width: unset;
}

.bootbox-accept,
.bootbox-cancel {
    border-color: transparent !important;
}

.bootbox-accept {
    background-color: var(--btnNormalDrk) !important;
    color: white !important;
    outline: none;
    box-shadow: none !important;
}

    .bootbox-accept:hover {
        background-color: var(--btnNormal) !important;
        color: black !important;
    }

.makeDanger {
    background-color: var(--btnDangerDrk) !important;
    color: white !important;
}

    .makeDanger:hover {
        background-color: var(--btnDanger) !important;
        color: black !important;
    }

.admAddNewOrgBtn {
    display: flex;
    justify-content: right;
}

    .admAddNewOrgBtn button {
        width: 200px;
    }

.notificationPopup {
    margin: 0 10%;
}

#divRequirementView .modal-body {
    /* display: flex; */
    justify-content: space-around;
}

#divRequirementView #grdRelatedRequirements {
    overflow: hidden;
}




#learnerDash a,
.dashSplash a,
.dashCardLink {
    text-decoration: none !important;
}

.dashSplash,
#learnerDash,
#onboardingMain {
    max-width: 1500px;
    margin: auto;
}

#dashMySelectedData .dashboardSelector {
    width: 100%;
    margin-left: 0;
}

.dashSelectRow {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.dashFilterOptions {
    columns: 2;
}

.dashDataSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

#dashFilterRow .modFilterSelections {
    justify-content: flex-start;
}

.assessorPic {
    width: 50px;
    height: 50px;
    border: 3px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s;
}

.assessorsList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.assessorName {
    text-align: center;
}

.assessorBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.userPic {
    font-size: 2rem;
    color: gray;
}

#myCriteria,
#myComments {
    color: var(--primary-color);
}

#myEndDate {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
}
/*------------------------------
 MILESTONES TIMELINE SECTION
 -----------------------------*/

/*#timeline {
    display: flex;
    width: 100%;
    border-top: 5px solid black;
    margin-top: 50px;
    padding: 0 25px;
}*/

#timeline {
    display: grid;
    grid-template-columns: 10% 15% 25% 25% 25%;
    width: 100%;
    border-top: 5px solid black;
    margin-top: 50px;
    padding: 0 25px;
}

.timeLabel {
    font-size: 1rem;
    font-weight: bold;
    margin-right: 5px;
}

.timeLabel2 {
    display: none;
}

.timepoint {
    /*width: 25%;*/
    background-color: var(--primary-ultra-fade-solid);
    margin: 0 2px;
    padding: 0 0 20px 20px;
    font-size: 2.5rem;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.timeFrame {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 50%;
    padding: 15px;
    width: 70px;
    height: 70px;
    background-color: white;
    margin-top: -40px;
    margin-right: -40px;
    z-index: 9;
}

    .timeFrame.celebrate:hover {
        transform: scale(1.1, 1.1);
        box-shadow: 4px 5px 6px black;
        color: var(--primary-color);
        border: 3px solid var(--primary-color);
        transition: all .5s;
    }

.userProg {
    font-size: .8rem;
    text-align: center;
    width: 100px;
    line-height: 1;
    margin-top: 15px;
}

.progBox {
    width: 100%;
}

.progPerc {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: bold;
}

.arrow {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color-faded);
}

.grayImg {
    filter: grayscale(1);
}

.notYet {
    background-color: #DBDBDB;
}

.celebrate {
    cursor: pointer;
}

.confetti {
    --animation_speed: 40s;
    --paper_color1: #a4d6f3;
    --paper_color2: #ff0000;
    --paper_color3: #d700ff;
    --paper_color4: #0000ff;
    --paper_color5: #ffb000;
    --paper_color6: #ff00e0;
}

    .confetti::before {
        content: '';
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 150px;
        z-index: 1;
        background-repeat: no-repeat;
        display: block;
        animation: confetti ease-out 2s forwards;
        background-image: linear-gradient(var(--paper_color1) 50%, transparent 20%), linear-gradient(var(--paper_color2) 50%, transparent 20%), linear-gradient(var(--paper_color3) 25%, transparent 20%), linear-gradient(var(--paper_color4) 40%, transparent 20%), linear-gradient(var(--paper_color5) 70%, transparent 20%), linear-gradient(var(--paper_color6) 60%, transparent 20%), linear-gradient(var(--paper_color1) 40%, transparent 20%), linear-gradient(var(--paper_color2) 50%, transparent 20%), linear-gradient(var(--paper_color3) 15%, transparent 20%), linear-gradient(var(--paper_color4) 40%, transparent 20%), linear-gradient(var(--paper_color5) 70%, transparent 20%), linear-gradient(var(--paper_color6) 60%, transparent 20%), linear-gradient(var(--paper_color1) 45%, transparent 20%), linear-gradient(var(--paper_color2) 75%, transparent 20%), linear-gradient(var(--paper_color3) 55%, transparent 20%);
        background-size: 8px 8px, 5px 7px, 5px 6px, 7px 8px, 8px 6px, 8px 8px, 5px 9px,7px 6px, 8px 8px, 5px 7px, 5px 9px, 6px 9px, 4px 6px, 5px 7px,8px 5px;
    }

@keyframes confetti {
    0% {
        background-position: 10% -10%, 18% 10%, 25% -10%, 34% -10%, 40% -10%, 47% -10%, 53% 0%,60% 20%, 67% 0%, 73% 0%, 79% 0%, 85% 0%, 92% 10%, 92% 10%, 99% 0%;
    }

    50% {
        background-position: 0% 80%, 8% 80%, 16% 60%, 32% 100%, 40% 70%, 48% 60%, 54% 0%,62% 80%, 70% 80%, 78% 60%, 84% 100%, 90% 70%, 95% 60%, 100% 80%, 88% 80%;
    }

    100% {
        background-position: 0% 90%, 10% 90%, 18% 70%, 25% 110%, 37% 80%, 45% 70%, 57% 10%,63% 90%, 72% 90%, 80% 70%, 88% 110%, 92% 80%, 96% 70%, 100% 90%,84% 90%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}




/*#wTimeline {
    flex-basis: 100%;
}

#wTimeline .widgetContent {
    width: 95%;
    margin: auto;
}

#wTimeline .widgetWrap {
    padding: 1.5em 5em 1.5em 1.5em;
}

.timeline {
    width: 100%;
    margin: 3rem auto 2rem auto;
    border-top: 5px solid var(--secondary-color);
    padding-top: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 1rem;
}

.progressBox {
    width: 100%;
}

#userProgress {
    position: relative;*/
/*left: -80%;*/
/*margin-top: 100px;*/
/*display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;*/
/*    font-size: .8rem;*/
/*text-align: center;
    line-height: 1;
    width: 100px;
}

.userPrgPercent,
.prgArrow {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.timeStamp {
    text-align: center;
    font-size: small;
    margin-top: 15px;
}*/

/*.milestone {
    border: 3px solid var(--secondary-color);
    width: 100%;
    border-radius: 6px;
    min-height: 100px;
    padding: 10px;
    background-color: var(--secondary-color);
    margin: 5px;
    transition: all 0.3s;
}*/

/*.mileDetails {
    border: 3px solid var(--secondary-color);
    width: 100%;
    border-radius: 6px;
    min-height: 100px;
    padding: 10px;
    background-color: var(--secondary-color);
    margin: 5px;
    transition: all 0.3s;
}



.desc {
    background-color: var(--secondary-color-faded);
    margin: 10px -10px -10px -10px;
    padding: 10px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    transition: all 0.3s;
}

.timePoint {
    position: absolute;
    font-size: 2.5rem;
    width: 100px;
    height: 100px;
    border: 5px solid var(--secondary-color);
    border-radius: 50%;
    margin-top: -95px;*/
/* margin-left: 74px;*/
/*background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color-faded);
    transition: all 0.3s;
}*/



/*.milestone:hover .timePoint,*/
/*.timePoint:hover {
        border: 5px solid var(--secondary-color-faded);
        background-color: var(--secondary-color);
        transform: scale(1.1, 1.1);
        box-shadow: 4px 6px 6px #aaaaaa;
    }*/

/*.milestone:hover {
    transform: scale(1.05, 1.05);
    box-shadow: 4px 6px 6px #aaaaaa;
}*/


/*.milestone::before {
    position: absolute;
    content: "";
    margin-top: -20px;
    margin-left: 87px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--secondary-color);
}*/


/*.mileHeader {
    padding-bottom: 5px;
    font-weight: bold;
    color: white;
    text-align: center;
}*/





/*
.dashDataBox {
    margin: 10px;
    padding-left: 10px;
    border-left: 5px solid var(--primary-color);
    min-height: 100px;
}
*/

.dashDataBox {
    border-radius: 8px;
    padding: 2rem;
    margin: 10px;
    margin-bottom: 2rem;
    border: 1px solid rgba(0,0,0,.125);
    min-height: 100px;
}

.dataBoxHeader {
    font-weight: bold;
    margin-bottom: 10px;
}

.criticalNotices {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 15px;
    margin-top: 20px;
}

#devPlansCritical.criticalNotices {
    grid-template-columns: 1fr;
}

.generalNotices {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: auto;
}

.generalNote {
    margin: 5px;
    max-width: 65px;
}

.criticalNote,
.generalNote {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.criticalIcon,
.generalIcon {
    text-align: center;
    border: 3px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    transition: all .5s;
}

    .criticalIcon:hover,
    .generalIcon:hover,
    .assessorPic:hover {
        background-color: var(--primary-ultra-fade-solid);
        border-radius: 50%;
        box-shadow: 4px 5px 6px black;
        transform: scale(1.1, 1.1);
    }

#devPlansCritical .criticalIcon,
#devPlansGeneral .generalIcon {
    border-radius: 5px;
}

    #devPlansCritical .criticalIcon:hover,
    #devPlansGeneral .generalIcon:hover {
        border-radius: 5px;
    }


.criticalNoteIcon a,
.generalNoteIcon a,
.assessorPic a {
    text-decoration: none !important;
}

.generalIcon {
    width: 40px;
    height: 40px;
    padding: 5px;
    font-size: 1rem;
}


.criticalIcon {
    width: 60px;
    height: 60px;
    padding: 6px;
    font-size: 2rem;
}

#typeOfHours .generalIcon {
    width: 50px;
    height: 50px;
    font-size: 1.7rem;
}

    #typeOfHours .generalIcon:hover {
        background-color: unset;
        box-shadow: unset;
        transform: unset;
    }

#content {
    width: 98%;
    margin: auto;
    max-width: 1900px;
    min-height: 100dvh;
}

.criticalNoteTextHeader,
.generalNoteTextHeader {
    font-weight: bold;
}

.criticalNoteTextHeader {
    font-size: 1.2rem;
}

#typeOfHours .criticalNoteTextHeader input {
    text-align: center;
    color: var(--primary-color);
}


.generalNoteTextHeader {
    font-size: 0.9rem;
    min-height: 22px;
}



.generalNoteTextSubHeader,
.criticalNoteTextSubHeader {
    font-size: 0.8rem;
    margin-top: -5px;
    line-height: 1;
}

.progressLabel {
    text-align: center;
    font-size: 0.6rem;
}

.portfolioDetails {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.portfolioInfoLine {
    display: flex;
    align-items: center;
}

.infoLineNum {
    margin-right: 5px;
}

.infoLineText {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    line-height: 1.2;
}

.infoLineUpper {
    font-size: 1.2rem;
}

.infoLineLower {
    font-size: 0.9rem
}

.infoLineUpper,
.infoLineLower {
    text-align: left;
}

    .infoLineLower span {
        margin-right: 5px;
    }

#cDashSelectorRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 25px;
}

    #cDashSelectorRow .dashTitle {
        width: 100%;
    }

#btnDashSwap {
    margin-left: 5px;
}

.dashSelectAndButtons {
    display: flex;
}

    .dashSelectAndButtons .dashboardSelector {
        margin-left: 0;
    }

#advancedDashCardsRow .card-body {
    height: 450px;
}

.dashModCard .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px;
    background-color: var(--secondary-color);
    color: white;
    padding: 10px;
    font-weight: bold;
    font-size: 14px;
    height: 30px;
    margin-bottom: 0;
}

.dashModCard .verifierDash {
    background-color: var(--primary-color);
}

.cardTypeIcon {
    margin-right: 10px;
}

#assessorDash .modTitle {
    min-height: 75px;
}

#assessorDash .modQual {
    min-height: 75px;
}

.dashModCard {
    border-radius: 8px;
    width: 270px;
    margin: 10px;
    padding: 0px;
    display: flex;
    justify-content: center;
    min-height: 365px;
    transition: all .8s;
}

    .dashModCard:hover {
        transform: scale(1.05, 1.05);
        /* box-shadow: -1px 9px 30px -12px #808080; */
        box-shadow: -1px 5px 20px black;
    }

#detailedCards .dashModCard {
    min-height: 675px;
}

#detailedCards .prgBar:first-child {
    margin-bottom: 5px;
}

#detailedCards .modTitleDP {
    height: 75px;
}

#detailedCards .modQual {
    height: 45px;
}

#detailedCards .barPrg,
#basicCards .barPrg {
    width: 95%;
    margin: auto;
    justify-content: center;
}

#detailedCards .modCardsRow .card-body {
    position: relative;
}

#detailedCards .dashViewBtn {
    margin-top: 15px;
    /*position: absolute;
    bottom: 40px;
    right: 105px;*/
}

#detailedCards .moduleCards {
    height: 115px;
}

.cardCounts {
    font-size: 0.9rem;
    display: flex;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0px 10px;
    align-items: center;
    background-color: white;
    min-width: 125px;
    line-height: 1;
}

div#dashCardCount {
    margin-right: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}


.cardTypeBox,
.cardStatusBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.modCardsRow .card-body {
    min-height: 275px;
}

#assessorDash.modCardsRow .card-body {
    min-height: 375px;
}


.dashSplashBorder {
    border-bottom: 5px solid var(--primary-color);
}

.modIcon a {
    color: white;
    text-decoration: none;
}

.modStatusIcon .statusIcon {
    margin-right: 0;
    margin-left: 8px;
}

.isComplete {
    font-weight: bold;
    text-transform: uppercase;
}

.audioRecorder {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 15px;
    /*
    border: 1px solid gray;
    background-color: lightgray;
    box-shadow: 2px 2px 5px gray inset;
        */
}

#audioWarning {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-right: 10px;
    font-weight: bold;
}

.audioWarningLabel {
    color: red;
}


.recorderControls,
.recordingSection {
    display: flex;
    align-items: center;
}


.recorderControls {
    width: 100%;
    justify-content: space-between;
}


/*
.recordingSection {
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;
    align-items:center;
    margin-bottom: -8px;
    padding: 8px;
}
*/
.recordAudioIcon,
.isRecording {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    z-index: 10;
}

    .recordAudioIcon i,
    .isRecording i {
        font-size: 2rem;
    }

.isRecording {
    border: 3px solid red;
}

    .isRecording i {
        color: red;
    }

#audioPlayback {
    margin-top: 15px;
    margin-bottom: 10px;
    height: 35px;
    width: 100%;
}

#writtenLabel {
    margin-right: 10px;
}

.pulse {
    animation: pulse-animation 1.8s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
    }
}



#addCommentFooter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


/*
#userShowcase .modCardsRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#userShowcase .dashModCard:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
*/

/*
#userShowcase .dashModCard {
    flex: auto;
    min-width: 250px;
}
*/


/*
#userShowcase .modCardsRow {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
}

.lastCard {
    flex: auto;
}


#userShowcase .items5plus .firstCard {
    flex: 2 1 0;
    min-width: 500px;
}
*/

/*
#userShowcase .even.items5plus .lastCard {
    flex: 2 1 0;
    min-width: 500px;
}
    */


/*
#userShowcase .modCardsRow {
    display: grid;
}

#userShowcase .items1 {
    grid-template-columns: 1fr
}

#userShowcase .items2 {
    grid-template-columns: 1fr 1fr;
}

#userShowcase .items3 {
    grid-template-columns: repeat(3, 1fr);
}

#userShowcase .items4,
#userShowcase .items5plus {
    grid-template-columns: repeat(4, 1fr);
}

    #userShowcase .items5plus .dashModCard:first-child
    {
        grid-column: span 2;
        grid-row: span 2;
    }
 */

/* VERTICAL MASONRY
#userShowcase .modCardsRow {
    column-count: 4;
    column-gap: 10px;
}

    #userShowcase .modCardsRow .dashModCard {
        margin: unset;
        margin-bottom: 10px;
        display: inline-block !important;
        vertical-align: middle;
        width: 100%;
        min-height: unset;
    }
*/

.scCombined .showcaseFeature a {
    font-size: .8rem;
    text-align: center;
}

.scCombined .showcaseFeature img {
    border: 2px solid var(--primary-color-faded) !important;
}

.scCombined .k-progressbar .k-selected {
    background-color: var(--primary-color-faded) !important;
}

.scCombined .modProgress {
    text-align: center;
    margin-left: 20px;
}

.scCombined .k-arcgauge-label {
    font-size: 1rem;
    left: 29px !important;
    top: 94px !important;
}

.scExp {
    border-left: 5px solid var(--primary-color-faded);
    padding-left: 10px;
}

.expDate {
    font-size: .8rem;
}

.fileUploadBox {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.cancelUpload {
    cursor: pointer;
    font-size: .7rem;
    color: gray;
}

.rifDblFiles {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 15px;
}

.fileUploadLabel {
    margin-left: 15px;
    margin-bottom: 0px !important;
}

.scEdu {
    border-left: 3px solid white;
    padding-left: 8px;
    position: relative;
}

    .scEdu .edLink, .edView:before {
        position: absolute;
        width: 30px;
        height: 30px;
        left: -30px;
        top: 5px;
    }

/*.edView:before {*/
/*content: "🔗";*/
/*content: "⭐";
    color: white;
    transition: all .5s;
}

    .edView:before:hover {
        transform: scale(1.1, 1.1);
    }*/


.cvTrait {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 15px;
    padding: 10px;
}

.traitValInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cvTraitEmoji {
    margin-right: 10px;
    color: darkgoldenrod;
}
.fileUploadBox,
#videoSelector {
    margin-bottom: 0 !important;
}

.dblSection {
    display: flex;
}
.introVideo {
    margin-left: 15px;
    min-width: 250px;
}

/*.vidLandscape {
    min-width: 250px;
}

.vidPortrait {
    width: 200px;
}*/

#videoSelector {
    display: flex;
    align-items: center;
}
    .trait {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.traitDesc {
    margin-bottom: 0!important;
}

.levelViz {
    font-size: 1.7em;
    text-align: center;
    color: darkgoldenrod;
}

.traitLevel {
    flex-direction: column;
}

.traitLevel input {
    width: 100%;
    margin: 0 10px;
    min-width: 80px;
}

.rangeLabel {
    text-align: center;
    font-weight: bold;
}

.sliderContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.traitSlider,
.sliderSet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.traitValLabel {
    font-weight: bold;
    color: darkred;
    margin: 10px 10px 0 10px;
}

span.traitValLabel:last-child {
    color: #5fcf80;
}


.userTraits {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-column-gap: 15px;
}

    .userTraits:nth-child(odd),
    .cvTrait:nth-child(even) {
        background-color: rgba(21, 145, 142, 0.1);
    }

.traitName {
    font-weight: bold;
    color: var(--primary-color-faded);
    margin-bottom: 0 !important;
}
.scSkillCounters2 {
    display: flex;
    flex-direction:column;
    width: 110px;
}

.skillsCounter {
    padding-top: 8px;
}

.eduList {
    display: flex;
    flex-wrap: wrap;
}

.eduSchool {
    font-size: .8rem;
}

.edPic {
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .5s;
    text-align: center;
}

    .edPic img {
        border: 2px solid var(--primary-color-faded);
        border-radius: 8px;
    }

.edPic:hover {
    transform: scale(1.1, 1.1);
}


.eduCert {
    border-top: 5px solid var(--primary-color-faded);
    padding-top: 8px;
}

.scEdu2 {
    width: 110px;
    padding-top: 15px;
}

.eduLinkIcon {
    color: gold;
}

.scEdu:hover {
    font-weight: bold;
    color: gold;
    cursor: pointer;
    border-left: 3px solid gold;
}

    .scEdu:hover .edLink .eduLinkIcon,
    .eduLinkIcon:hover {
        transition: all .5s;
        transform: scale(1.3, 1.3);
    }

.scEdu .edLink {
    display: block;
    z-index: 99;
    cursor: pointer;
}

.scSectionContent .showcaseRibbon {
    justify-content: flex-start;
    margin-top: 40px;
    flex-wrap: wrap;
}

.contactSM {
    display: flex;
}

    .contactSM a {
        color: white;
        text-decoration: none;
    }

        .contactSM a:hover {
            color: var(--primary-color-faded);
        }

.smContactIcon {
    font-size: 1.25rem;
    margin-right: 10px;
}

.expJobTitle {
    font-weight: bold;
}

.scSubSection {
    margin: 30px 0;
}

.scResume {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.scSummary {
    background-color: var(--primary-color);
    color: white;
}

.scSummary, .scDetails, .scPortfolio {
    padding: 20px;
}

.detailHead {
    border-bottom: 2px solid var(--primary-color);
    width: 100%;
}

.summaryHead {
    border-bottom: 2px solid white;
    width: 100%;
}

.scSectionContent {
    margin: 15px 0 15px 50px;
}

#overviewInfo .alertIcon {
    color: black !important;
}

.resumeIcon {
    margin-right: 10px;
    border: 2px solid black;
    border-radius: 50%;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.expJobDetails {
    margin-top: 10px;
}

.hasUnread, .dashHasUnread {
    position: relative;
}


    .hasUnread::before {
        content: "✪";
        position: absolute;
        top: -9px;
        right: -4px;
        color: gold;
        font-size: 1.2rem;
        text-shadow: 2px 2px 5px black;
        z-index: 999;
    }

    .dashHasUnread::before {
        content: "✪";
        position: absolute;
        top: 11px;
        right: 15px;
        color: gold;
        font-size: 1.2rem;
        text-shadow: 2px 2px 5px black;
        z-index: 999;
    }

.scSummary .resumeIcon {
    border: 2px solid white;
}

.scDetails .resumeIcon,
.scPortfolio .resumeIcon {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.scSummaryName {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: bold;
    margin-top: 10px;
}

.scSkillCounters {
    display: grid;
    grid-template-columns: repeat(4, 21%);
    grid-column-gap: 50px;
    /*display: flex;
    justify-content: space-between;*/
    margin-top: 40px;
    max-width: 1190px;
}

.summaryUserPic {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summaryPic .profilePic img {
    width: 200px;
    height: 200px;
}

.scSectionHeader {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}


.btn-green {
    background-color: var(--btnGreen) !important;
}

#userShowcase,
#showcasesList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.scCards {
    position: relative;
    cursor: pointer;
}

.scBbl {
    margin-top: -10px;
    cursor: pointer;
}

.scBbl i {
    font-size: 10rem;
    color: var(--tertiary-color);
    opacity: .4;
}

.scBbl .fadl:after, .fa-duotone:after {
    opacity: .2;
}
.scBblComment {
    position: absolute;
    /*top: 13px;
    left: 60px;
    width: 105px;
    height: 90px;*/
    top: 25px;
    left: 45px;
    width: 135px;
    height: 95px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-style: italic;
}

.scCardTitleBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.scListBtnRow {
    display: flex;
    justify-content:center;
    text-align: center;
}

.scListBtnRow .btn:not(:last-child) {
    margin-right:5px;
}
.createDate {
    font-size: .8rem;
    font-weight: bold;
}

/*.btnShowcase2 button {
    width: 200px;
}*/

#showcasesList {
    margin-top: 20px;
}

.scCards {
    text-align: center;
    margin-bottom: 15px;
}

.scCards img {
    width: 150px;
    height: 150px;
    cursor: pointer;
}

#resumeShowcase .scCardTitleBox {
    justify-content: space-between !important;
}


#userShowcase .scRowCard,
#resumeShowcase .scRowCard {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 10px;
    width: 250px;
}

.scSection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
}

.scResSection {
    /*display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;*/
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#userShowcase .scResSection .scRowCard {
    padding: 0;
}

.scUserHeader {
    margin-bottom: 30px;
}

.scResSection .scRowCardHeader {
    background-color: #eee;
    border-radius: 8px 8px 0 0;
    padding: 15px;
    min-height: 90px;
}

.scResSection .scRowCardBody {
    padding: 15px;
}

.scResSection .isAMini {
    margin: 0;
}

    .scResSection .isAMini:first-child img {
        width: 160px;
        height: 160px;
        margin-top: 10px;
    }

.scResSection .scRowCardImgs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 10px;
    margin: auto;
    text-align: center;
}

.scResSection .isAMini:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    margin-right: 2;
    background-color: #eee;
    border-radius: 8px;
    margin-right: -3px;
}

.scResSection .scRowCardImgs img {
    width: 75px;
    height: 75px;
}

.scResSection .isAMini:first-child .scFileName {
    max-width: 150px;
    text-align: center;
    margin: auto;
    margin-top: 5px;
    padding-bottom: 5px;
}

.scResSection .scFileName {
    max-width: 75px;
    margin: 5px auto;
}

.scResSection .scRowCardTitle {
    font-size: 1rem;
    color: var(--primary-color);
    line-height: 1.2;
}

.scCatBtn {
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--secondary-color);
}

.scHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--tertiary-ultra-fade-solid);
    margin-bottom: 40px;
}

    .scHeader .accordionContent div {
        margin-left: 0;
    }

    .scHeader .accordionSection {
        border-bottom: none;
    }

    .scHeader .showcaseFeature a {
        font-size: .8rem;
        text-align: center;
    }

.hdrWbtns {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .hdrWbtns h1 {
        margin-bottom: 0;
    }

.scRowCardDate {
    margin-left: 100px;
    font-weight: bold;
}

.scCardSubHeader {
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 20px 0;
}

.scRowCardImgs {
    display: flex;
    flex-wrap: wrap;
    /* margin-top: 20px; */
}

.scRowCardTitle {
    font-weight: bold;
    font-size: 1.3rem;
    color: var(--primary-color);
    line-height: 1.3;
}

.scRowCardImgs img,
.scRowCardImgs object {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    box-shadow: -1px 5px 7px gray;
    cursor: pointer;
    transition: all .5s;
}

    .scRowCardImgs img:hover,
    .scRowCardImgs object:hover {
        transform: scale(1.1);
    }

.scFileName {
    max-width: 100px;
    word-break: break-all;
    white-space: normal;
    margin-top: 8px;
}

.scRowCardHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.isAMini {
    margin-right: 10px;
}

.scComment:nth-child(odd) {
    background-color: var(--primary-ultra-fade-solid);
}

.scRowCardComments {
    /* margin-top: 15px; */
}

.cardTextNote {
    margin: 10px 0px 20px 0px;
    font-weight: bold;
}

.showcaseSectionModule {
    margin-bottom: -10px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    background-color: var(--tertiary-ultra-fade-solid);
}

    .showcaseSectionModule .certSeal img {
        max-width: 50px;
    }

    .showcaseSectionModule .certCompletion {
        color: var(--tertiary-color);
    }

.certModuleName {
    font-size: 0.9rem;
    /*color: white;*/
}

.proofTypes {
    font-size: 0.8rem;
}

.truncIt {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 85%;
    margin: auto;
    text-align: center;
}

#userShowcase .modCardsRow {
    display: flex;
    flex-flow: row wrap;
    margin-left: 10px; /* Adjustment for the gutter */
    width: 100%;
}

#userShowcase .scCardBody {
    display: grid;
}

#userShowcase .scCardContent {
    justify-self: center;
    margin-top: 10px;
}

#userShowcase .modCardsRow .dashModCard {
    margin: unset;
    min-height: unset;
    flex: auto;
    min-width: 150px;
    margin: 0 20px 20px 0; /* Some gutter */
}

    #userShowcase .modCardsRow .dashModCard:nth-child(4n+1) {
        width: 250px;
    }

    #userShowcase .modCardsRow .dashModCard:nth-child(4n+2) {
        width: 325px;
    }

    #userShowcase .modCardsRow .dashModCard:nth-child(4n+3) {
        width: 180px;
    }

    #userShowcase .modCardsRow .dashModCard:nth-child(4n+4) {
        width: 380px;
    }


.bubble {
    position: relative;
    background: var(--tertiary-ultra-fade-solid);
    border-radius: 5px;
    padding: 12px;
    margin: auto;
    margin-bottom: 25px;
    cursor: pointer;
}

.bubble-arrow-left:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 24px solid var(--tertiary-ultra-fade-solid);
    border-right: 12px solid transparent;
    border-top: 12px solid var(--tertiary-ultra-fade-solid);
    border-bottom: 20px solid transparent;
    left: 32px;
    bottom: -24px;
}



.scMiniPreview img {
    max-width: 100%;
    cursor: pointer;
}

/*
#userShowcase .items5plus .dashModCard:first-child .scMiniPreview img {
    max-width: 100%;
    margin: 20px 0;
}
    */



.cardInner .scMiniPreview {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

/*
.cardInner {
    display: flex;
    justify-content: center;
    align-items: center;
}
    */

.cardInner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 10px;
}


    .cardInner .bubble {
        min-width: 75px;
    }

#userShowcase .showcaseSectionDesc {
    margin: 40px auto 25px auto;
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#userShowcase .dashModCardFooter {
    text-align: center;
    display: none;
}


#userShowcase .modCardTitle {
    justify-content: flex-start;
    height: auto;
    line-height: 1.3;
}

.statusBarLink {
    text-decoration: none !important;
    transition: all .5s;
    color: white;
}

    .statusBarLink:hover {
        transform: scale(1.1, 1.1);
        color: white;
    }

.pageContent {
    width: 95%;
    max-width: 1500px;
    margin: auto;
    padding: 1rem;
}

.vidPageContainer {
    margin: 2rem !important;
    max-width: 1900px;
    margin: auto;
}

    .vidPageContainer h2 {
        margin-bottom: 2rem;
    }

#vidContent {
    display: flex;
    flex-direction: row-reverse;
}

#vidTranscript {
    margin-right: 25px;
    margin-top: 0px;
}

.helpVid video {
    width: 100%;
    border-radius: 8px;
    border: 1px solid lightgray;
}

.vidTitleLine {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.vidTitle {
    font-weight: bold;
}

.vidDesc {
    margin-top: 10px;
    font-size: 0.9rem;
}

.singleVidPage {
    margin: 2rem;
}

    .singleVidPage .vidTime {
        font-size: 2rem;
        font-weight: bold;
    }

    .singleVidPage .vidTitleLine {
        margin-bottom: 15px;
    }

    .singleVidPage .vidDesc {
        margin-bottom: 25px;
        font-size: inherit;
    }

    .singleVidPage .vidTranscript {
        margin-top: 25px;
    }

.vidGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
    margin-top: 25px;
}

.vidUserCats {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 30px;
    transition: all .8s;
    min-height: 242px;
}


    .vidUserCats:hover {
        transform: scale(1.05, 1.05);
        /* box-shadow: -1px 9px 30px -12px #808080; */
        box-shadow: -1px 5px 20px black;
    }


.vidUserCatsIcon {
    text-align: center;
    color: var(--tertiary-color);
    font-size: 2.75rem;
    margin-top: -10px;
}

.vidUserCatTitle {
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.vidUserCount {
    font-size: 0.9rem;
    color: var(--tertiary-color);
    text-align: center;
    text-transform: uppercase;
    margin-top: 8px;
}

.vidUserCatDesc {
    text-align: center;
}

.vidUserCatsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    margin-top: 2rem;
}

a.vidCatLink {
    text-decoration: none;
    color: inherit;
}

.vidUserListItem {
    padding: 10px 0px 0px 0px;
}

    .vidUserListItem:last-child {
        padding-bottom: 10px;
    }

.narrowHeader {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-column-gap: 2%;
    border-bottom: 3px solid black;
}

.showcaseSectionHeader {
    padding: 30px 0;
    text-align: center;
}


.certBoxGilded {
    margin-top: 0;
    height: 8px;
    background-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%);
    background-size: 150%;
    filter: drop-shadow(0 0 1px rgba(255, 200, 0, .3));
    animation: goldShimmer 6s ease-in-out infinite;
}

.certBoxSilver {
    margin-top: 0;
    height: 8px;
    background-image: repeating-linear-gradient(to right, #9f9fa1 0%, #b9babd 8%, #b9babd 18%, #bdbebf 27%, #f7f7f5 35%, #d4d5d6 40%, #f7f7f5 50%, #bdbebf 58%, #f7f7f7 67%, #727273 77%, #949494 83%, #9fa0a1 88%, #b3b4b5 93%, #f7f7f7 100%);
    background-size: 150%;
    filter: drop-shadow(0 0 1px rgba(0, 200, 220, .3));
    animation: goldShimmer 6s ease-in-out infinite;
}


@keyframes goldShimmer {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}
/*
.certBox {
    background-color: var(--secondary-color);
    display: grid;
    grid-template-columns: 20% 80%;
    margin-top: 15px;
    border-radius: 8px 8px 0 0;
}
    */

.certificate {
    display: flex;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 8px 8px 10px gray;
}

.certSidebar {
    max-width: 175px;
    border-right: 8px double var(--tertiary-color);
    flex-grow: 1;
    border-radius: 8px 0 0 8px;
}

.certSidebar2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 5rem;
}

.certSealBox {
    width: 150px;
}

.certMain {
    flex-grow: 2;
}


.certHeader {
    background-color: var(--secondary-color);
}

.certExplainer {
    margin: 20px 0;
}

.certHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
}

.certCompletion {
    /*color: white;*/
    text-transform: uppercase;
    text-align: center;
}

.certSeal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .certSeal img {
        width: 90%;
        max-width: 150px;
    }


.certTitle {
    text-transform: uppercase;
    font-size: 4rem;
    letter-spacing: 8px;
    margin-top: -30px;
    padding: 15px;
}

.silvered {
    background-image: repeating-linear-gradient(to right, #9f9fa1 0%, #b9babd 8%, #b9babd 18%, #bdbebf 27%, #f7f7f5 35%, #d4d5d6 40%, #f7f7f5 50%, #bdbebf 58%, #f7f7f7 67%, #727273 77%, #949494 83%, #9fa0a1 88%, #b3b4b5 93%, #f7f7f7 100%);
    background-size: 150%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 1px rgba(0, 200, 220, .3));
    animation: goldShimmer 6s ease-in-out infinite;
}

.gilded {
    background-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%);
    background-size: 150%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 1px rgba(255, 200, 0, .3));
    animation: goldShimmer 6s ease-in-out infinite;
}


.certSubTitle {
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-top: -30px;
}

/*
.certDetails {
    border: 1px solid var(--secondary-color);
    border-top: none;
    display: grid;
    grid-template-columns: 1fr 80%;
    border-radius: 0 0 8px 8px;
}

.certSeal,
.certSpacer {
    max-width: 220px;
}

.certSpacer {
    background-color: var(--secondary-color);
    padding: 0;
    border-right: 8px double var(--tertiary-color);
    border-radius: 0 0 0 8px;
}
*/

.certDetailsText {
    padding: 4rem 2rem 2rem 2rem;
}

.certLearnerName {
    text-align: center;
    font-size: 3rem;
}

.certModule {
    text-align: center;
    font-weight: bold;
}

.certAssessorBox {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.certAssessor {
    margin-top: 25px;
    width: 200px;
    text-align: center;
    border-bottom: 1px solid var(--secondary-color);
    margin-bottom: 5px;
}

.certAssessorCred {
    font-size: .9rem;
    font-weight: bold;
}


.accordionContent div {
    margin-bottom: 0;
    margin-left: 37px;
}

.headerCaret.fa-caret-down {
    transform: rotate(0deg);
    transition: transform .3s linear;
}

    .headerCaret.fa-caret-down.flipIt {
        transform: rotate(-180deg);
        transition: transform .3s linear;
    }

.accordionSection {
    cursor: pointer;
    border-bottom: 3px solid black;
    padding: 15px;
}

.showcaseUserInfo {
    display: grid;
    grid-template-columns: 24% 74%;
    grid-column-gap: 2%;
}

    .showcaseUserInfo .profilePic img {
        border-radius: 50%;
        width: 115px !important;
        height: 115px !important;
    }

.accordionTitleLine {
    display: grid;
    grid-template-columns: 20px 100%;
}

.accordionContent {
    visibility: hidden;
    transition: visibility 1s, max-height .5s, opacity .7s;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}


    .accordionContent.slideOpen {
        visibility: visible;
        opacity: 1;
        max-height: 300px;
    }


.aiSummary {
    margin: 40px auto;
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 35px;
}

.showHideAiSummary {
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
}

.aiStmts {
    height: 100px;
    overflow: hidden;
    transition: all .3s;
}

.fadeThis {
    --mask: linear-gradient(to bottom, rgba(0,0,0, 1) 0, rgba(0,0,0, 1) 40%, rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0 ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.aiStmts p {
    line-height: 1.3;
}

    .aiStmts p:first-child {
        margin-top: 15px;
    }

.aiCaret {
    transition: all 1s ease;
    margin-left: 8px;
}



.flipCaret {
    transform: rotate(180deg);
}

.showFull {
    height: auto !important;
}

.aiNotice {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 20px;
    background-color: var(--primary-color-ultra-faded);
    padding: 8px;
    border-radius: 4px;
}

.aiIcon {
    margin-right: 10px;
    color: var(--primary-color);
    font-size: 1.5rem;
}

#ptfOptions {
    width: 60%;
    margin: auto;
}

#ptfCks {
    columns: 3;
}

.dashSplash,
#onboardingMain {
    width: 85%;
    margin: auto;
}

    #onboardingMain h1 {
        margin-top: 30px;
    }

.onboardingWelcome {
    margin: 15px 0;
}

.disabledFooter {
    height: 10px;
    border-radius: 0px 0px 8px 8px;
}


.requiredFiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    grid-column-gap: 30px;
}

.fileReadIcon {
    cursor: pointer;
}

.fileTypeIcon i {
    font-size: 1.5rem;
}

.requiredFileInfo {
    display: grid;
    grid-template-columns: 35px 30px 100%;
    padding: 5px;
}

.onboardingOverview {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.requiredDone {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
}

.requiredDoneLabel {
    font-size: 0.9rem;
    margin-top: -15px;
}

#requiredReading .accordionSection {
    padding-left: 0;
    padding-right: 0;
}

#requiredReading .accordionTitleLine {
    display: grid;
    grid-template-columns: 35px 5fr 10px;
}

.complexHeader {
    display: flex;
}

    .complexHeader .searchField {
        flex: 2 1 auto;
    }

    .complexHeader .btnContainer {
        margin-left: 10px;
    }

.btnContainerBtns {
    display: flex;
}

#dropdownTop {
    width: 215px !important;
}

.drpdwnIcon {
    margin-right: 8px;
}

.portfolioHdrSearch {
    margin-left: 4px;
}

div#portfolioTopRow {
    display: grid;
    grid-template-columns: 70% 30%;
}

.portfolioHdrBtns {
    display: flex;
    justify-content: flex-end;
}

    .portfolioHdrBtns input {
        margin: 0 .25rem;
    }

    .edPic img {
        width: 100px;
        height: 100px;
    }

.uploadFileBtns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.cvUploadFileBtns {
    justify-content: flex-start !important;
}

.uploadFileBtns button {
    margin: .25rem;
}


/*ROUND CHECKBOXES ON ONBOARDING PAGE*/
.accordionCheck {
    display: flex;
    align-items: center;
}

.round {
    position: relative;
}

    .round label {
        background-color: var(--worse);
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 23px;
        left: 0;
        position: absolute;
        top: 0;
        width: 23px;
    }

        .round label:before {
            content: "!";
            height: 6px;
            left: 8.5px;
            position: absolute;
            top: -3px;
            font-size: 17px;
            font-weight: bold;
            color: white;
        }

        .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 6px;
            left: 5px;
            opacity: 0;
            position: absolute;
            top: 6px;
            transform: rotate(-45deg);
            width: 12px;
        }

    .round input[type="checkbox"] {
        visibility: hidden;
    }

        .round input[type="checkbox"]:checked + label {
            background-color: var(--green);
            border-color: var(--green);
            /* border-color: #66bb6a; */
        }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }

            .round input[type="checkbox"]:checked + label:before {
                opacity: 0;
            }



/*
.readIcon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.k-expander-title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06a";
    font-size: 1rem;
    margin-right: 8px;
}
*/


#schedulerModal .k-edit-field {
    margin: 0 !important;
}

.k-window-titlebar,
.k-window-actions {
    padding-block: 0 !important;
}

.k-window-titlebar {
    background-color: var(--secondary-color) !important;
}

.k-window-actions {
    background-color: transparent !important;
}

.k-window-title {
    color: white !important;
}

.k-hstack .k-button-md.k-icon-button {
    color: white !important;
}

#advancedDashCardsRow .showAward {
    position: absolute;
    z-index: 2;
    font-size: 8rem;
    margin-left: 66px;
    top: 290px;
    color: var(--tertiary-color);
    opacity: 0.3;
}

#schedulerModal .k-input-button, .k-input-button.k-button {
    height: calc(1.4285714286em + 15px) !important;
}

.missingEvidence {
    color: var(--worse);
    font-weight: bold;
    margin: 10px 0;
}

.showAward {
    position: absolute;
    z-index: 2;
    font-size: 8rem;
    margin-left: 35px;
    top: 20px;
    color: var(--tertiary-color);
    opacity: 0.1;
}

.modTitle {
    font-size: 14px;
    font-weight: bold;
}

.modDPTitle {
    font-size: 14px;
    font-weight: bold;
}

.modDPSubTitle {
    font-size: 12px;
    font-weight: bold;
    height: 60px;
}

.modDPSubTitleThin {
    font-size: 12px;
    font-weight: bold;
    height: 40px;
}

.modDPQual {
    font-size: 0.8rem;
}

.cardTopInfo {
    height: 60px;
}

.modCardTitle.userInfoCard {
    background-color: var(--primary-color);
}

.modQual {
    font-size: 0.9rem;
}

.cardTitleSection {
    min-height: 115px;
}

.cardBodySectionAll {
    min-height: 100px;
}

.dashModCardFooter {
    border-radius: 0px 0px 8px 8px;
    width: 100%;
    background-color: #4f4f4f;
    color: white;
    height: 25px;
}

.dashModFooterIcons {
    width: 100%;
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;*/
    display: flex;
    justify-content: space-around;
}

.footerLabel {
    font-size: 0.8rem;
}

.modQualIcon {
    margin-right: 5px;
}

.verifierMod {
    margin-top: 2px;
}


.verifierProfilePic img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
}

.verifierName {
    height: 45px;
}

.verifierModLabel {
    font-size: 0.7rem;
    text-align: left;
}

.verifierModDash {
    display: flex;
    justify-content: space-around;
}

    .verifierModDash .containIcon {
        margin-right: 0px;
    }

    .verifierModDash .overViewDetails {
        margin-left: 0px;
    }

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

.modFilterCol .optionChecks {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xsmall {
    font-size: 0.8rem;
}

.optionsSelected {
    background-color: var(--primary-color-ultra-faded);
}

.optionChecks,
.modFilterOptions,
.assessorModFilters {
    display: flex;
}

#optionsModStatus .modFilterOptions,
#optionsModTypes .modFilterOptions {
    display: unset;
    columns: 3;
}

.cDashFilterSelector {
    margin: 5px;
    width: 48%;
}

    .cDashFilterSelector .dashTitle {
        width: 100%;
    }

#cDashSelectionFilters {
    display: flex;
}

.optionNames {
    width: 25%;
}

.modFilter,
.toDoFilter,
.incDevPlansFilter {
    display: flex;
    align-items: center;
}

.modFilterText {
    font-weight: bold;
    margin-right: 15px;
}

.modFilter input,
.toDoFilter input,
.incDevPlansFilter input {
    margin-top: -6px;
    margin-right: 15px;
    margin-left: 5px;
}

.helpMsg {
    border: 2px solid var(--worse);
    border-radius: 6px;
    font-weight: bold;
    color: var(--worse);
    max-width: 60%;
    padding: 20px;
    margin: auto;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--worsergb), 0.2);
}

.qualNeededMsg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#btnAddNewQualifications2 {
    margin-top: 15px;
}

.helpMsgIcon {
    margin-right: 20px;
}


.modLearner {
    font-weight: bold;
    font-size: 12px;
}

.dashWidget {
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
    margin: 10px;
}

.wDashboard {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}


.wMini {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 4fr;
    height: 50px;
    margin: 10px;
    width: 30%;
}

.dashViewBtn {
    position: relative;
    z-index: 10;
}

#hoursLogContainer {
    width: 95%;
    max-width: 1500px;
    margin: auto;
}

#hoursData h4 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-bottom: 0.5px solid lightgray;
}


#loggedHoursDash {
    margin-top: 25px;
}

.arcGauges {
    /*display:flex;
    flex-wrap:wrap;
        */
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    max-width: 1200px;
    margin: auto;
    margin-top: -20px;
}

.hoursGauge {
    margin: 15px;
    width: 200px;
    text-align: center;
}

.gaugeBox,
.gaugeLabel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modName {
    font-size: 1.1rem;
    margin-top: -50px;
}

/*
.badgeLabel {
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: -5px;
    font-weight: bold;
}

.badgeMod,
.badgeLabel {
    text-align: center;
}

.hoursBadge {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.badgeIcon {
    font-size: 2rem;
    color: var(--tertiary-color);
}

.myBadges {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}


*/


.adminOptions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.instructions {
    display: flex;
    align-items: center;
    text-align: left;
    margin-right:20px;
}

.adminSelections {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}





/*--------LOADING SPINNER STYLES-----------*/
.spinloader {
    /* min-width: 100px;
    width: 100%;
    height: 200px;
    padding: 10px;*/
    /*    color: #ccc;
    cursor: pointer;
    transition: 0.3s linear;
    background-color: rgba(255,255,255,0.8);*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(255,255,255,0.8);
    /*    position: relative;*/
    display: flex;
    /*    align-items: center;*/
    justify-content: center;
}

.tripleSpinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-top: 25%;
    border: 3px solid;
    border-color: var(--secondary-color-faded) var(--secondary-color-faded) transparent transparent;
    animation: rotation 1s linear infinite;
}

    .tripleSpinner::before, .tripleSpinner::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid;
        border-color: transparent transparent var(--primary-color) var(--primary-color);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        animation: rotationBack 0.5s linear infinite;
        transform-origin: center center;
    }

    .tripleSpinner::before {
        width: 32px;
        height: 32px;
        border-color: var(--tertiary-color) var(--tertiary-color) transparent transparent;
        animation: rotation 1.5s linear infinite;
    }


@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

/*---- END LOADING SPINNER STYLES----------*/



#tipTitle {
    color: var(--tertiary-ultra-fade-solid);
    font-size: 0.9rem;
    font-weight: bold !important;
}

#tipTitle2 {
    color: var(--primary-ultra-fade-solid);
    font-size: 0.9rem;
    font-weight: bold !important;
}

#myDashboard.reportingDashboard #openDevs,
#myDashboard.reportingDashboard #pendingSubs,
#myDashboard.reportingDashboard #filesSub {
    color: var(--primary-color);
}

.widgetWrap {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 8px;
}

/* DASHBOARD TOGGLE STYLE*/
.toggleSection {
    display: flex;
    padding: 8px;
}

#newDash {
    text-align: right;
}

#dashToggle {
    margin: 0 8px;
    margin-bottom: -10px;
}

.hide {
    display: none;
}

.toggle {
    position: relative;
    display: inline-block;
}

.toggleInput {
    display: none;
}

.toggleLabel {
    display: block;
    width: 50px;
    height: 20px;
    background-color: var(--toggleLight);
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.showDetailed .toggleLabel {
    background-color: var(--toggleDark);
}

.toggleInput:checked + .toggleLabel::after {
    left: 32px;
}

.toggleLabel::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: left 0.3s ease;
}


/**********FTA CODE****************/

#ftaForm input,
#ftaEmpAddDetails input,
#ftaContactInfo input,
#ftaEmployerInfo input,
#ftaLearnerContacts input,
.ftaFormGroup input {
    width: 100%;
    border: 1px solid #bbb;
    border-radius: 4px;
    color: #2e2e2e;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 8px;
}


.ftaFormGroup {
    margin-bottom: 1rem;
}

.ftaHalf,
.ftaThird {
    margin-right: 10px;
}

    .ftaHalf:last-child,
    .ftaThird:last-child {
        margin-right: 0px;
    }


#ftaContactInfo,
#ftaLearnerContacts,
#ftaEmpAddDetails {
    display: flex;
}

.ftaHalf {
    width: 50%;
}

.ftaThird {
    width: 33%;
}





/***************FTA CODE ENDS*******/


/******** NEW FILTER TOOLBAR STLES ******/

#filterToolBar {
    width: 98%;
    max-width: 1200px;
    margin: auto;
}

.toolBar,
.filterRangeSliders {
    display: flex;
}

.filterRangeSliders {
    justify-content: space-between;
}

.filterCheckLabel {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 3px;
}

.filterCheckColumns {
    columns: 2;
}

.perc {
    display: flex;
    flex-direction: column;
    margin: 0px 4px;
}

.filterSelection {
    width: 300px;
    background-color: transparent;
}

.selectBox {
    position: relative;
    cursor: pointer;
}

    .selectBox select {
        width: 100%;
        font-family: inherit;
        padding: 8px;
        border: 1px solid #bbb;
        border-radius: 4px;
    }

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkBoxes,
#percentRange {
    display: none;
    border: 1px #bbb solid;
    background-color: #ffffff;
    position: absolute;
    z-index: 999;
}

    #checkBoxes label,
    #percentRange label {
        display: block;
        margin-bottom: unset;
    }

        #checkBoxes label:hover,
        #percentRange label:hover {
            background-color: #4f615e;
            color: white;
        }

.filterBtns {
    display: flex;
    justify-content: flex-end;
}

    .filterBtns button {
        margin: 0px 5px 5px 5px;
    }

.rangeSliderLabel {
    display: flex;
}

.customSlider {
    accent-color: var(--primary-color);
}

.toolbarFilter {
    margin-left: 7px;
}

.filterDropBox {
    padding: 10px;
}


/************* Title Search - New dashboard **********/

#titleSearchContainer {
    display: flex;
}

.searchTitlesField {
    display: flex;
}

#titleSearch:focus,
#titleSearch:-internal-autofill-selected {
    background: #daebeb;
}



.search-container {
    width: 300px;
    position: relative;
}

    .search-container input, .search-container .suggestions {
        width: 100%;
    }

    .search-container input {
        padding: 0 10px;
        width: 100%;
        font-family: inherit;
        padding: 8px;
        border: 1px solid #bbb;
        border-radius: 4px 0 0 4px;
    }

.searchTitlesField .half {
    border-left: none;
    height: unset;
    border-radius: 0 4px 4px 0;
}

.search-container .suggestions {
    position: absolute;
    top: 41px;
    z-index: 999;
}

.suggestions ul {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
    max-height: 200px;
    overflow-y: auto;
    border: 1px #bbb solid;
}

ul.has-suggestions {
    display: block;
}

.suggestions ul li {
    padding: 10px;
    cursor: pointer;
    background: white;
}

    .suggestions ul li:hover {
        background-color: #5F96A2;
    }




/*******************************/




.k-arcgauge-label {
    font-size: 30px;
}






.saScoreCard,
.saReportScoreCard,
.saChartBorderBox,
.saScoreResultsCard {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: white;
}

.saReportScoreCard {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

    .saReportScoreCard .saScoreCardInfo {
        display: flex;
        flex-direction: column;
    }

.saScoreResultsCard {
    margin-bottom: 25px;
}

    .saScoreResultsCard:last-child {
        margin-bottom: 0;
    }


.saScoreResultsCard {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-column-gap: 10px;
}

.saLabel {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.saScoreResultsA {
    text-align: center;
}

.btnClientDigital {
    display: flex;
    flex-direction: column;
}

.saA {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--primary-color-faded);
}

.saNum {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 15px;
}

    .saNum.saNumWord {
        font-size: 1.8rem;
    }

.saTxt {
    font-size: 1rem;
    margin-top: -13px;
    text-transform: uppercase;
    background-color: var(--primary-color-ultra-faded);
}

.saScoreCard {
    transition: all .8s;
}

a .saScoreCard {
    color: black;
}

.saScoreLink:hover {
    text-decoration: none !important;
}

.saScoreCard:hover {
    transform: scale(1.05, 1.05);
    box-shadow: -1px 5px 20px black;
}

.selfAssessmentScores,
.selfAssessmentDetails,
.saAnswersReport,
.hoursBoxes {
    padding: 2rem;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 8px;
}

#saReportPagePrintable .saComparisonSection,
#saReportPagePrintable .selfAssessmentScores {
    padding: 50px;
}

#saReportPagePrintable .saScoreBoxSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#saReportPagePrintable .scoreCardIcon {
    font-size: 2rem;
}

#saReportPagePrintable .scoreCardLabel {
    font-size: 1.2rem;
    margin: 10px 0 8px 0;
}

.reportTopper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

#saReportPagePrintable .saReportScoreCard .saScoreCardInfo {
    padding: 1rem;
}

.hoursBoxes {
    padding: 15px;
    border-radius: 0 8px 8px 8px;
}


.selfAssessmentDetails,
.saAnswersReport {
    background-color: rgba(0,0,0,.09);
    border-radius: 8px;
}

.saAnswersReport {
    margin-top: 25px;
}

#saAnswersReportPage {
    max-width: 1200px;
    margin: auto;
}

.saScoreCardInfo {
    display: grid;
    grid-template-columns: 1fr 7fr 3fr;
    grid-column-gap: 10px;
}

.saJobMatchInfo {
    display: grid;
    grid-template-columns: 1fr 7fr;
    grid-column-gap: 10px;
}

.jobCategory {
    font-size: 0.8rem;
}


.scoreCardIcon,
.scoreCardLabel {
    display: flex;
    align-items: center;
}

.scoreCardData {
    flex-direction: column;
    justify-content: center;
}

.scoreCardGraph {
    width: 108px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 2px;
}

.graphTrack {
    background-color: lightgray;
    width: 20px;
    height: 5px;
}

.graphPercent {
    background-color: var(--primary-color-faded);
    height: 5px;
}

.saInfoModal {
    padding: 10px;
}

.saTestQuestions {
    display: grid;
    grid-template-columns: 70% 28%;
    grid-column-gap: 2%;
}

.saInfoModal h4 {
    font-weight: bold;
    font-size: 1.2rem;
}

.scale {
    border: 0.25px solid rgba(0,0,0,.125);
    border-radius: 8px;
    padding: 10px;
}

.viewScores {
    text-align: right;
    margin-top: -8px;
    margin-right: -8px;
    height: 10px;
    font-size: 1.2rem;
}

.scoreCardIcon {
    font-size: 1.2rem;
}

.saViewScoresIcon {
    transition: all .5s;
}

.viewScores a {
    cursor: pointer;
    color: black;
    text-decoration: none;
}

    .viewScores a:hover,
    .saViewScoresIcon:hover {
        color: var(--primary-color-faded);
        transform: scale(1.3, 1.3);
    }

.saQuestionnaire {
    width: 90%;
    max-width: 900px !important;
    margin: auto;
}

.saQsScale {
    font-weight: bold;
    color: var(--primary-color);
    border-bottom: 0.25px solid rgba(0,0,0,.125);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.saQsNums {
    font-weight: bold;
    color: var(--primary-color);
}

#selfAssessmentReport {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 3%;
    margin-top: 15px;
}

#saReportPage,
#saReportPagePrintable {
    max-width: 1500px;
    margin: auto;
}

    #saReportPagePrintable #saScoresSection {
        margin-top: 20px;
    }

.saDescriptor {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 25px 0;
}

#saTop5 .saDescriptor {
    margin-top: 0;
}

.saOccupation {
    margin-bottom: 15px;
}

.saChart {
    width: 90%;
    margin: auto;
}

.saChartDataLine {
    display: grid;
    grid-template-columns: 3fr 4fr;
}

.saChartDataBoxes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.saChartDataBox {
    height: 50px;
    border: 0.25px solid rgba(0,0,0,.125);
}

.dataScoreSection {
    position: relative;
    width: 100%;
    height: 100%;
}

.dataScores {
    top: 12px;
    z-index: 50;
}

.saTop5JobGraphs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

    .saTop5JobGraphs .saChartContainer,
    .saComparisonSection {
        border: 1px solid rgba(0, 0, 0, .125);
        border-radius: 8px;
        padding: 25px;
        min-width: 350px;
    }

    .saTop5JobGraphs .saDescriptor {
        margin: 0 0 10px 0;
        text-align: center;
    }

    .saTop5JobGraphs .shaded {
        background-color: rgba(0,0,0,.09);
    }




#selfAssessmentReport h3,
#saTop5 h3 {
    font-size: 1.9rem;
    border-bottom: 1px solid gray;
    margin-bottom: 0;
}

.saMoreInfo {
    display: flex;
    margin-top: 25px;
    align-items: center;
}

    .saMoreInfo .saDescriptor {
        flex-grow: 1;
    }

.saBtn {
    display: flex;
    flex: 0 0 20%;
    justify-content: flex-end;
}

.saChartLabel {
    display: flex;
    align-items: center;
}

.saChartLegend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    width: 80%;
    margin: auto;
    margin-bottom: 15px;
}

.saChartLegendLabel {
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
}

.scoreCardLevel {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
}

.jobCatScore {
    font-size: 2.25rem;
    text-align: center
}

.jobName {
    color: var(--primary-color);
    font-weight: bold;
    line-height: 1.2;
}


.learnerIcon {
    color: #3262a8;
}

.industryIcon {
    color: #29b32c;
}

.saChartDataLabelNum {
    height: 25px !important;
    text-align: right;
}

.dataColor0 {
    background-color: #fae3e3;
}

.dataColor1,
.dataColor2 {
    background-color: #e6f5fc;
}

.dataColor3,
.dataColor4,
.dataColor5 {
    background-color: #e2fae1;
}





#hoursTracker {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;
    margin-top: 20px;
}

    #hoursTracker .k-nav-prev,
    #hoursTracker .k-nav-next {
        padding: 18px !important;
    }

    #hoursTracker .k-nav-next {
        margin-right: 5px;
    }

#hoursDataTabs {
    margin-bottom: 41px;
}

.tabList {
    list-style-type: none;
    margin-left: -32px;
    margin-bottom: -4px;
}

#hoursDataTabs li {
    min-width: 100px;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 6px 6px 0 0;
    padding: 8px;
    margin-right: 2px;
    float: left;
    cursor: pointer;
    background-color: var(--tertiary-ultra-fade-solid);
    text-align: center;
    box-shadow: inset -1px -3px 6px -1px rgba(0, 0, 0, 0.2);
}

.activeTab {
    background-color: #FAFAFA !important;
    border-bottom: 1px solid #FAFAFA !important;
    box-shadow: none !important;
}


.hoursInfoLine {
    display: grid;
    grid-template-columns: 55px 75px 125px;
    margin: 20px 0;
}

.hourStatsBtns {
    display: flex;
}

    .hourStatsBtns .btn-icon {
        margin: 5px;
    }

.hoursInfoTitle {
    margin-bottom: 10px;
    text-align: center;
}

.criticalNoteTextGroup {
    text-align: center;
}

#typeOfHours .criticalNoteTextHeader span {
    font-weight: bold;
    font-size: 2rem;
    border: 0;
    background-color: transparent;
    text-align: center;
    min-width: 65px;
}

#typeOfHours .criticalNoteTextSubHeader {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin: 0;
}



#hoursInfo {
}

    #hoursInfo .criticalNote {
        margin: 15px;
    }

    #hoursInfo .criticalNoteTextSubHeader {
        font-size: 1rem;
        margin-top: -5px;
        line-height: 1;
    }

#hoursChart {
    margin: 2rem;
}

#scheduler h3 {
    font-size: 0.8rem;
    font-weight: 400;
}

#schedulerModal {
    width: 98%;
    margin: auto;
    margin-top: -10px;
}

    #schedulerModal .k-edit-field {
        float: unset;
    }


    #schedulerModal .k-scheduler-edit-form .k-edit-form-container,
    #schedulerModal .k-scheduler-timezones .k-edit-form-container {
        width: 100%;
    }

    #schedulerModal .k-edit-field {
        width: 100% !important;
    }

#schedulerTimePicks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}


#hoursLogger {
    position: absolute !important;
    left: 50% !important;
    top: 375px !important;
    transform: translate(-50%, -50%) !important;
    min-width: 200px !important;
    max-width: 600px;
    width: 90% !important;
}



#calendar .k-event {
    background-color: var(--primary-color-faded);
    border: 1px solid var(--primary-color-faded);
}

#calendar .k-button-solid-base.k-selected,
#calendar .k-button-solid-base:active {
    border-color: var(--secondary-color);
    color: #fff;
    background-color: var(--secondary-color-faded);
    box-shadow: inset 0 0 3px 1px var(--primary-color);
}

#calendar .k-focus.k-selected {
    box-shadow: inset 0 0 3px 1px var(--primary-color);
}

.miniColorBlock {
    /*background: rgb(117,191,198);
    background: linear-gradient(180deg, rgba(117,191,198,1) 6%, rgba(212,238,244,1) 61%);
     */
    background: rgb(95,95,95);
    background: linear-gradient(180deg, rgba(95,95,95,1) 16%, rgba(197,197,197,1) 82%);
    border-radius: 8px 8px 0px 0px;
    height: 50px;
    padding: 10px;
}

    .miniColorBlock .modIcon,
    .wMini .modIcon {
        margin-top: -15px;
        margin-left: -10px;
        background-color: #fafafa;
        border-radius: 50%;
        width: 80px;
        height: 80px;
    }

    .miniColorBlock .infoIcon,
    .wMini .infoIcon {
        width: 80px;
        height: 80px;
    }



.miniContent {
    padding: 8px;
    margin-top: -15px;
    display: flex;
}

    .miniContent .alertInfo {
        margin-left: 0;
    }

.modIcon .infoIcon:hover {
    background-color: var(--primary-color-ultra-faded);
    transform: scale(1.1, 1.1);
    box-shadow: 3px 2px 3px black;
    color: var(--primary-color);
    border: 3px solid var(--primary-color);
}


.dashWidget .alertIcon:hover,
#learnerDash .alertIcon:hover,
.dashSplash .alertIcon:hover {
    background-color: var(--primary-ultra-fade-solid);
    border-radius: 50%;
}

.modCardsRow {
    margin: auto;
}

.modIcon:hover {
    cursor: help;
}

.modIcon.actionItem {
    cursor: pointer;
}

.modIconGo:hover {
    cursor: pointer;
}

/*all word wrap on Kendo table headers*/
#grdAssessors .k-column-title,
#grdVerifiers .k-column-title,
#grdQualifications .k-column-title,
#grdModules .k-column-title,
#grdAssessorRequests .k-column-title {
    white-space: normal !important;
}

#divModules .modIcon.actionItem,
#divModules .modIconGo:hover {
    cursor: help;
}

.btn-primary,
.btn-primary-cpd2,
.btn-secondary-cpd2,
.btn-danger-cpd2 {
    font-weight: bold;
    height: 35px;
}


.btn-primary-cpd2,
.btn-primary,
.btnSub,
.btn-icon {
    background-color: var(--btnNormalDrk);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-grid,
.btn-icon-grid-danger {
    width: 25px;
    height: 25px;
    padding: 0 2px;
    text-align: center;
    color: white;
    border-radius: 0.25rem;
    vertical-align: middle;
    padding-top: 4px;
}

.btn-icon-grid {
    background-color: var(--btnNormalDrk);
}

    .btn-icon-grid:hover {
        cursor: pointer;
    }

.btn-icon-grid-danger {
    background-color: var(--btnDangerDrk);
}

    .btn-icon-grid-danger:hover {
        background-color: var(--btnDanger);
        color: black;
        cursor: pointer;
    }

.summaryRow {
    display: flex;
    flex-direction: row;
}

#grdRequirementsDocs {
    width: 97%;
}

.devPlanFilter {
    text-align: right;
    width: 100%;
}

.summaryRowSearch {
    width: 75%;
}

.summaryRowBtns {
    width: 25%;
    text-align: right;
}

.profileOrgEditLogo {
    margin-right: 20px;
}

    .profileOrgEditLogo img {
        width: 100%;
        height: auto;
    }

.admModGrdBtns .btn-grid,
.admOrgBtns .btn-grid {
    margin-left: -5px !important;
}

.admModGrdBtns .rowBtn:first-child,
.admOrgBtns .rowBtn:first-child {
    margin-left: 5px !important;
}


.k-i-more-vertical:before,
.k-grid-filter .k-i-filter:before {
    content: "\e129" !important;
}

.k-active .k-i-more-vertical:before,
.k-grid-filter.k-active .k-i-filter:before {
    content: "\e12a" !important;
}

.k-i-more-vertical,
.k-grid-filter .k-i-filter {
    margin-top: -10px !important;
    margin-left: 10px !important;
}

.k-columnmenu-item .k-i-filter {
    color: black !important;
}

thead th[data-field='Id'] a {
    display: none !important;
}

.quizResults {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 10px;
}

.resultsBadge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quizBadge {
    font-size: 5rem;
}

.badgeText {
    text-align: center;
    font-size: 0.8rem;
}

.qResultsRow {
    display: grid;
    grid-template-columns: 45px 1fr 0.5fr;
    grid-column-gap: 6px;
}

.learnerResults .qResultsIcon,
.learnerResults .qResultsLabel,
.learnerResults .qResultsNum {
    font-size: 1.4rem;
    font-weight: bold;
}

.gradeFail {
    color: var(--worse);
}

.gradePass {
    color: var(--better);
}

.gradeExceed {
    color: var(--green);
}

.gradePerfect {
    color: var(--gold);
}

.qResultsIcon {
    text-align: center;
}

.qResultsLabel,
.qResultsNum,
.qResultsIcon {
    font-size: 1.2rem;
}

.qResultsNum {
    font-weight: bold;
}

.modal-footer.quizModalFooter {
    padding: 0 !important;
    padding-top: 10px !important;
}

.btn-primary-cpd2:hover,
.btn-primary:hover
.btnSub:hover,
.btn-icon:hover,
.btn-icon-grid:hover {
    background-color: var(--btnNormal);
    color: var(--btnNormalFontClr);
}

.btnSub {
    font-size: 0.9rem;
    font-weight: bold;
    min-width: 90px;
}


.dropSectionHeader {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.dropSectionBtns {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.prtBtns {
    display: flex;
}

/*
.dropSectionBtns div:first-child {
    margin-right: 8px;
}
*/

.dblProgress {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.progressCounter {
    width: 100%
}

    .progressCounter:first-child {
        margin-right: 35px;
        margin-left: 3px;
    }

    .progressCounter .modProgress.xsmall {
        font-size: 0.8rem;
        line-height: 1.1;
        margin-left: -7px;
    }

    .progressCounter .k-arcgauge-label {
        font-size: 20px;
        left: 43.5px !important;
    }



.gaugeBox {
    display: flex;
    justify-content: center;
    margin-top: -70px;
    margin-bottom: -85px;
}

.singleGauge .k-gauge {
    margin-left: 58px;
}

.singleGauge .k-arcgauge-label {
    left: 52.5px !important;
}

#portfolioForm .dropSectionBtns {
    flex-wrap: wrap;
}

    #portfolioForm .dropSectionBtns div {
        margin-right: 3px;
    }

        #portfolioForm .dropSectionBtns div:last-child {
            margin-right: 0;
        }

.dropSectionCard .row {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.5rem !important;
}

/* file upload button */
input[type="file"]::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 35px;
    cursor: pointer;
    background-color: #99999b;
    color: white;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    transition: background-color 200ms;
}

    /* file upload button hover state */
    input[type="file"]::file-selector-button:hover {
        background-color: #c3c3c7;
        color: black;
    }




.btn-secondary-cpd2 {
    background-color: #99999b;
    color: white;
    display: inline-flex;
    align-items: center;
}

    .btn-secondary-cpd2:hover {
        background-color: #c3c3c7;
        color: black;
    }

.btn-danger-cpd2 {
    background-color: #8F1500;
    color: white;
}

.btn-small-cpd2 {
    background-color: var(--btnNormal);
    color: white;
    font-size: 12px;
    padding: 4px 24px;
}

.btn-xsmall-cpd2 {
    background-color: var(--btnNormal);
    color: white;
    font-size: 12px;
    padding: 4px 4px;
}

.btn-small-primary-cpd2 {
    background-color: var(--btnNormal);
    color: white;
    font-size: 12px;
    line-height: 1.3;
    padding: 2px 16px;
}

td button:last-child {
    margin-left: 3px;
}

.btn-small-secondary-cpd2 {
    background-color: #99999b;
    color: white;
    font-size: 12px;
    line-height: 1.3;
    padding: 2px 16px;
}

.btn-small-danger-cpd2 {
    background-color: var(--btnDanger);
    color: white;
    font-size: 12px;
    line-height: 1.3;
    padding: 2px 16px;
}

.btn-criteria.isNeutral {
    background-color: var(--secondary-ultra-fade-solid);
}

.btn-criteria.isFail {
    background-color: #edd5d5;
}

    .btn-criteria.isFail .statusIcon,
    .fileStatusFail {
        color: #c28f8f;
    }

.btn-criteria.isPass {
    background-color: #d5eddc;
}

    .btn-criteria.isPass .statusIcon,
    .fileStatusPass {
        color: #7fb08d;
    }

.btn-criteria.isBegun {
    background-color: #fff8d9; /*#ede3d5;*/
}

    .btn-criteria.isBegun .statusIcon {
        color: #f2d64b; /*#b5a38a;*/
    }

.btn-criteria.isPending {
    background-color: #e8e8e8;
}

    .btn-criteria.isPending .statusIcon {
        color: #b0b0b0;
    }

.statusIcon {
    margin-right: 10px;
}

.reportTitleRow,
.reportOptionsRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.optionsDiv {
    margin-left: 25px;
}

.btnShowcase {
    text-align: right;
}

    .btnShowcase button {
        width: 300px;
    }

.reportOptionsList {
    display: flex;
    align-items: center;
}

.reportListLabel {
    margin-right: 8px;
}

.reportOptionsRow {
    margin-bottom: 15px;
}

.modal-title {
    font-weight: bold;
}

.portfolioUnits {
    display: flex;
    margin-bottom: 10px;
    /*width: 95%; */
}

.detailsPanel {
    width: 100%;
}

.unitDetails {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detailActions,
.detailInfo {
    display: flex;
    margin-left: 10px;
    justify-content: flex-end;
}

.moreDetails {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .moreDetails div {
        margin-left: 5px;
    }

.recallBtn {
    margin-right: 8px;
}



.detailActions:first-child {
    margin-left: 15px;
}

.detailInfo {
    margin-left: 0px;
}

.searchField {
    margin-left: 3px;
}


.btn {
    white-space: normal !important;
}

.btn-grid {
    white-space: normal !important;
}

.btn-icon,
.btn-icon-danger {
    width: 35px;
    height: 35px;
    padding: 5px;
    text-align: center;
}


.btn-icon-danger {
    background-color: var(--btnDangerDrk);
    color: white;
}

    .btn-icon-danger:hover {
        background-color: var(--btnDanger);
        color: black;
    }

.btn-iconSub {
    width: 30px;
    height: 30px;
}

.ck1 {
    display: flex;
    align-items: center;
}

    .ck1:nth-of-type(1) {
        margin-bottom: -5px;
    }

.admModBtns {
    text-align: right !important;
}

.ck1-input {
    position: unset;
    margin: 0;
    margin-right: 5px;
    width: 1em;
    height: 1em;
    border-radius: 5px;
}

.ck1-label {
    font-size: 0.8rem;
}


.containerWide {
    max-width: 100% !important;
}

.containerNarrow {
    max-width: 50% !important;
    margin-left: 0;
}

.allModsSelectionRow,
.verifiedReqsSelectionRow,
.assessorSummarySelectionRow {
    display: flex;
}

    .allModsSelectionRow > span,
    .assessorSummarySelectionRow > span {
        width: 50%;
        z-index: 10;
        margin-bottom: 8px;
    }

    .verifiedReqsSelectionRow > span {
        margin-bottom: 8px;
        width: 33%;
        z-index: 10;
    }



        .assessorSummarySelectionRow > span:first-child,
        .verifiedReqsSelectionRow > span:not(:last-child),
        .allModsSelectionRow > span:first-child {
            margin-right: 8px;
        }



.col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.col3 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
}

.ckOptions {
    columns: 2;
    column-gap: 5px;
}

.btnContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#portfolioBtnsTop.btnContainer {
    flex-wrap: wrap;
}


.rowBtn {
    margin-left: 10px;
}

    .rowBtn:first-child {
        margin-left: 0px;
    }


.itemViewImg {
    max-height: 300px;
}

.itemContentMini {
    text-align: center;
}

.itemActions {
    margin-top: 10px;
}


.itemViewContent {
    display: flex;
}

.itemContentData {
    margin-left: 20px;
    width: 90%;
}

.modalFix {
    display: block !important;
}

.itemContentActions {
    margin-top: 10px;
}

.itemContentFile {
    color: #235793;
    cursor: pointer;
}

.viewVideoContent {
    margin-top: 10px;
}

.devPlanHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.devPlanReqs {
    width: 95%;
}

.modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: none;
    color: white;
    opacity: 0.5;
    cursor: pointer;
}

    .modal .close:hover {
        opacity: 1;
    }

.modal-body .close {
    color: black;
}

.modal-header {
    background-color: #235793;
    color: white !important;
    min-height: 50px;
}

.msgModal {
    height: 615px;
}


.msgModalContainer {
    margin: 0 auto;
    width: 100%;
    background: #444753;
    border-radius: 5px;
    display: flex;
}

.chat {
    width: 80%;
    background: #F2F5F8;
    border-radius: 5px;
    color: #434651;
    margin: 1rem;
    margin-left: 0px;
}

.chat-history {
    padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 350px;
}


.chatUserName {
    color: white;
}

.chatUserImg img,
.chatTalkImg img {
    border-radius: 50%;
}

.chatTalkImg img {
    width: 40px;
    height: 40px;
}

.chatTalkImg {
    margin-bottom: -10px;
    z-index: 999;
}

.chatInfoResp {
    flex-direction: row-reverse;
}

.chatInfoMe,
.chatInfoResp {
    font-size: 0.8rem;
    align-items: center;
}

.message-data-name {
    font-weight: bold;
}

.chatUserName {
    line-height: 1.3;
    margin-top: 8px;
}

.chatBtn {
    float: right;
    color: #94C2ED;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background: #F2F5F8;
    border: 2px solid #94C2ED;
    border-radius: 5px;
    padding: 5px;
}

    .chatBtn:hover {
        color: #235793;
        border: 2px solid #235793;
    }


.other-message,
.my-message {
    color: white;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}

.chatLine {
    display: flex;
    flex-direction: column;
}


.chatInfoMe,
.chatInfoResp {
    display: flex;
}

    .chatInfoMe div:nth-child(2),
    .chatInfoResp div:nth-child(2) {
        margin: 0px 8px;
    }

.goRight {
    align-items: flex-end;
}


.my-message {
    background: #94C2ED;
}


.other-message {
    background: #86BB71;
}



.people-list {
    width: 160px;
    margin-top: 1rem;
}

.msgList {
    list-style: none;
}

.people-list {
    margin: 1rem;
}

.chatUser {
    margin-bottom: 10px;
    text-align: center;
}


.people-list.msgList {
    padding: 20px;
    overflow-y: auto;
}

.people-list img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.divAddFileViewToFiles_uploadFileBtns.vidUploadBtns {
    display: flex;
    justify-content: flex-end;
}

    .divAddFileViewToFiles_uploadFileBtns.vidUploadBtns button {
        margin-left: .5rem;
    }

.headerBtns {
    display: flex;
    justify-content: flex-end;
}

    .headerBtns div,
    .headerBtns button {
        margin-left: 5px;
    }

.splashBoxOrg {
    background-color: var(--tertiary-color);
    color: white;
    border-radius: 5px;
    padding: 2rem;
    margin-bottom: 2rem;
}


.splashBox {
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(0,0,0,.125);
}

.dashSplash {
    padding: 2rem;
    margin-bottom: 2rem;
    border-bottom: 6px solid black;
}

.splashBox {
    background-color: var(--splashHeader);
    color: white;
}

.splashHeader {
    display: flex;
    justify-content: flex-end;
    margin-top: -1rem;
}

.splashHeaderOrg {
    display: flex;
    justify-content: flex-end;
    margin-top: -1rem;
}

.splashContent {
    display: grid;
    grid-template-columns: 1fr 4fr;
}

.dashSplash .splashContent {
    grid-template-columns: 1fr 3fr 1fr;
}

.profilePicOrg img {
    width: 150px !important;
    height: 150px !important;
}

    .profilePicOrg img:hover {
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        filter: saturate(0%);
    }


#dashSplashContent .profilePic img {
    border: 1px solid rgba(0, 0, 0, .125);
}


.profilePic img {
    border-radius: 50%;
    width: 150px !important;
    height: 150px !important;
}

    .profilePic img:hover {
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        filter: saturate(0%);
    }

.profileOrgEditIcon a {
    color: rgba(255, 255, 255, 0.70);
    width: 150px !important;
    height: 150px !important;
}

.profileEditIcon a {
    color: rgba(255, 255, 255, 0.70);
}

    .profileEditIcon a:hover {
        color: white;
    }


.iconSearch {
    color: lightgrey;
    position: absolute;
    top: 9px;
    right: 8px;
}


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

.showcaseFeature {
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    transition: all .5s;
    cursor: pointer;
}

    .showcaseFeature img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 2px solid lightgray;
    }

    .showcaseFeature:hover {
        transform: scale(1.1, 1.1);
    }

.showcaseSectionExplainer {
    text-align: center;
    padding: 10px;
    font-weight: bold;
}

.showcaseSection {
    display: flex;
    flex-wrap: wrap;
}

.showcaseContent img,
.scPopContent img {
    max-height: 300px;
    max-width: 98%;
}

.scFileName {
    font-size: 0.7rem;
    text-align: center;
    cursor: pointer;
}

#scModal {
    width: 95% !important;
    max-width: 900px !important;
}

    #scModal button {
        max-width: 300px;
    }

.commentRow {
    margin: 10px 1rem;
}

.popBoxContent {
    max-width: 90%;
    max-height: 90vh;
    margin: auto;
}

.popImg {
    max-width: 100%;
    max-height: 75vh;
    margin: auto;
}

.mainContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

.showcaseContent .scBoxHeader {
    font-weight: bold;
    padding: 10px;
}

.showcaseTitle {
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 0;
}

.viewVideoContent button {
    margin-bottom: 5px;
}

.mainContent1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;
}

.contentBox {
    border: 2px solid gray;
    border-radius: 5px;
    min-height: 150px;
    width: 100%;
}

.showcaseContent {
    border: 2px solid gray;
    border-radius: 5px;
    min-height: 150px;
    margin: 1%;
    width: 48%;
}


    .showcaseContent:last-child:nth-child(odd) {
        flex-basis: 100%;
        width: 100%;
    }


/*
.showcaseBox {
   
    flex: 0 0 50%;
    max-width: 50%;    
}
    */


.boxHeader,
.scBoxHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: var(--secondary-color);*/
    background-color: #14133D;
    color: white;
    border-radius: 5px 5px 0px 0px;
    margin: -1px;
    padding: 5px;
}

    .boxHeader .profileEditIcon {
        margin-right: 8px;
    }

.boxHeaderTitle,
.scBoxHeaderTitle {
    margin: 0px !important;
    padding: 4px 8px 0px 8px;
    font-weight: bold;
    font-size: 1rem;
    color: white;
}


.boxContent,
.scBoxContent {
    padding: 20px;
}

.upperCase {
    text-transform: uppercase;
}

#verifiersForm .dashTitleRow {
    margin-bottom: 15px;
}

#verifierDashboard {
    margin-top: 15px;
}

#grdUsers label {
    color: white;
}

.selectRow {
    display: flex;
    margin-top: 8px;
}

.moduleSelect:first-child {
    margin-left: -3px;
}

.moduleSelect:not(:first-child) {
    margin-left: 8px;
}

.moduleSelect {
    width: 50%;
}

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

.admModOpts {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admModSrch {
    width: 75%;
    margin-right: 8px;
}

.admModCmb {
    margin-left: -3px;
    width: 75.5%;
    margin-bottom: 8px !important;
}


/*--------------------------
    DASHBOARD STYLES
--------------------------*/
.dashTitleRow {
    display: flex;
    width: 98%;
    margin: auto;
    margin-top: 15px;
    align-items: center
}

.dashTitle {
    font-weight: bold;
    width: 20%;
    /*text-align: right;*/
}

.dashboardSelector {
    margin-left: 10px;
    margin-right: 10px;
    width: 80%;
}

.dashTitle .helpIcon {
    margin-right: 8px;
    cursor: pointer;
}





/*overview info detail panel*/

.overviewPanel {
    /*padding: 10px; */
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 8px;
}

.overviewInfo {
    background-color: #e6e6e6;
    padding: 10px;
    border-bottom-left-radius: 8px;
    font-size: 1rem;
}

.overviewLine {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.containIcon {
    margin-right: 8px;
}

.alertLine {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .alertLine:last-of-type {
        margin-bottom: 0;
    }

.overviewTitle {
    font-size: 1rem;
    margin-bottom: 20px;
    text-align: center;
}

.dashSummaryIcon,
.profileIcon i {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    font-size: 1.8rem;
}

.infoIcon {
    text-align: center;
    /*line-height: 1;*/
    border: 3px solid black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: 1rem;
}

.wMini i {
    font-size: 2rem;
}

.overviewSpec {
    font-weight: normal;
    margin-left: 5px;
}

.bigIcon {
    font-size: 4rem;
    margin: 0.5rem 0;
}

.makeRow {
    flex-direction: row; /*overide default column layout*/
}

.boxTitle {
    font-weight: bold;
}

.glow1 {
    box-shadow: inset 0 0 60px var(--primary-color);
}

.glow2 {
    box-shadow: inset 0 0 60px var(--tertiary-color);
}

.alertInfo {
    display: flex;
    align-items: center;
    margin-left: 10px;
    line-height: 1.2;
}

    .alertInfo .big {
        margin-right: 8px;
    }

.alertIcon a,
.iconStats a,
.dashIcon a {
    color: black;
}

.alertIcon,
.iconStatsFrame,
.infoIcon,
.wIconDetails,
.actionItem,
.modIcon {
    transition: all .5s;
}

.dashSummaryIcon,
.profileIcon {
    transition: all .5s;
}

    .dashSummaryIcon:hover {
        color: var(--primary-color);
        transform: scale(1.3, 1.3);
    }

.alertIcon:hover .infoIcon,
.iconStatsFrame:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 4px 5px 6px black;
    color: var(--primary-color);
    border: 3px solid var(--primary-color);
}


.profileSplashContent {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
}

.profileIcon a {
    color: white;
    text-decoration: none !important;
}

.profileIcon {
    opacity: 0.5;
}

    .profileIcon a:hover,
    .profileIcon:hover {
        transform: scale(1.3, 1.3);
        opacity: 1;
    }


.myDashboard {
    padding: 0;
    margin: 10px;
    list-style: none;
    font-family: Roboto, sans-serif;
    color: black;
}

.xlarge {
    font-size: 5rem;
    font-weight: bold;
    line-height: 1;
}

#adminDashboard .xlarge {
    font-size: 5rem;
}

.better {
    color: var(--better);
}

.worse {
    color: var(--worse);
}

.noChange {
    color: var(--nochange);
}


/*
.myDashboard .widgetHeader {
    cursor: move;
}
*/

.myDashboard .widget {
    padding: 10px;
    /*height: 300px;*/
    box-sizing: border-box;
}

    .myDashboard .widget .widgetWrap {
        height: 100%;
        border-radius: 5px;
        padding: 1.5em;
    }

.widgetContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.alignLeft {
    align-items: flex-start;
}

.row3-1 {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.wIconDetails {
    color: black;
    opacity: 0.5;
}

    .wIconDetails:hover {
        color: black;
        transform: scale(1.1, 1.1);
        opacity: 1;
    }

.widgetHeader {
    margin-top: -1em;
    margin-right: -1em;
    display: flex;
    justify-content: space-between;
}

.boxTitle {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.iconStats {
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconStatsFrame,
.iconFrameNoHover {
    border: 3px solid black;
    border-radius: 50%;
    padding: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.bkColorPrimary {
    background-color: var(--primary-color-faded);
}

.bkColorPrimaryPale {
    background-color: var(--primary-ultra-fade-solid);
}

.bkColorSecondary {
    background-color: var(--secondary-color-faded);
}

.bkColorSecondaryPale {
    background-color: var(--secondary-ultra-fade-solid);
}

.bkColorTertiary {
    background-color: var(--tertiary-color-faded);
}

.bkColorTertiaryPale {
    background-color: var(--tertiary-ultra-fade-solid);
}

.bkTexture1 {
    background-image: url("/images/texture1.png");
}

.bkTexture2 {
    background-image: url("/images/texture2.png");
}

.bkTexture3 {
    background-image: url("/images/texture3.png");
}

.bkTexture4 {
    background-image: url("/images/texture4.png");
}

.bkTexture5 {
    background-image: url("/images/texture5.png");
}

.myDashboard .widget.dropBefore {
    border-top: 5px solid var(--secondary-color-faded);
}

.myDashboard .widget.dropAfter {
    border-bottom: 5px solid var(--secondary-color-faded);
}


/* Portfolio Size */

#usedSpace {
    width: 90%;
    margin: auto;
    text-align: center;
}

.sizeBarGraph {
    position: relative;
    grid-column-start: 2;
    grid-column-end: 6;
}

.sizeBar {
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    /*opacity: 0.7;*/
}

/*
    .sizeBar:hover {
        opacity: 1;
        cursor: pointer;
    }
*/


div#recentMods {
    width: 98%;
    height: inherit;
}

.modsMore {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.modDetailLine {
    transition: all .5s;
}

.modName.xsmall {
    margin-bottom: -25px;
    margin-top: 15px;
    font-size: 0.7rem;
}

.sizeBarRequired {
    background-color: #c7c7c7;
    position: relative;
    border-radius: 15px;
    margin-top: 30px;
    font-size: 0.6rem;
    text-align: right;
    border: 1px solid black;
}

div#recentMods a {
    color: black;
}

    div#recentMods a:hover .modDetailLine {
        transform: scale(1.1, 1.1);
        font-weight: bold;
    }


.myDashboard a {
    text-decoration: none !important;
}


.sizeBarSubmitted {
    background-color: #235793;
    height: 15px;
    top: 0;
    border-radius: 15px 0 0 15px;
}


/* Assessors */

.idPic img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.thisAsr {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px;
}

.asrName {
    margin-left: 10px;
}

/* Circle charts */

.small {
    font-size: 0.9rem;
}

.unit-progress {
    display: flex;
    flex-direction: row;
}

.progressInfo {
    position: unset;
    text-align: center;
}

#statCircle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.progress-circle {
    transition: 0.35s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.circleStatDetails .big {
    line-height: 1;
    margin-top: 8px;
}

.circleStatDetails .small {
    line-height: 1;
    margin-top: -15px;
    margin-bottom: 10px;
}


/* Activity Monitor */

.activity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}

.activityInfo {
    text-align: center;
}



.big {
    font-size: 1.75rem;
}


.dashcard {
    border: 2px solid var(--primary-color);
    border-radius: 10px;
}


.tutorialTranscript table,
.tutorialTranscript table th,
.tutorialTranscript table td {
    border: 1px solid gray;
    padding: 8px;
    border-collapse: collapse;
}

.tutorialTranscript th {
    background-color: lightgray;
}

.tutorialTranscript .tFirstRow {
    background-color: #f1f1f1;
}

.tutorialTranscript table {
    margin-bottom: 20px;
}

/*----------------------------------------
    IMAGE TAGGER
---------------------------------------*/
.titleQicon {
    cursor: pointer;
}

.sp4c {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    /*padding: 1rem;  */
    grid-column-gap: 6px;
}

.boxTitle {
    font-weight: bold;
}

.titleIcon {
    margin-right: 10px;
}

.idItemsList ul,
.idItemsList li {
    list-style-type: none;
    margin-bottom: 1rem;
}

.idItemsList li {
    padding-left: 0;
    margin-left: 0;
}

    .idItemsList li button {
        margin-right: 5px;
    }

.idItemsList ul {
    margin-bottom: 2rem;
}

.frmBtn {
    width: 100%;
}

#tagDetails ol {
    list-style: decimal outside;
    padding: 5px;
    margin: 20px 15px 15px 15px;
}


    #tagDetails ol li {
        font-weight: bold;
    }

        #tagDetails ol li p {
            font-weight: normal;
            padding: 20px;
        }


.imgDetails h2 {
    /*     background: #DDDDDD;
       margin: -1;
       */
    margin: 0;
}


.detailsItem {
    cursor: pointer;
}

.imgTagHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #DDDDDD;
    margin: -1;
    padding: 8px;
}

/* Styling for Image Uploader */


.imgUploadDiv {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-column-gap: 10px;
}

.imgUploadFrame {
    margin: 1rem auto;
    border: 1px solid black;
    cursor: crosshair;
}

    .imgUploadFrame img {
        border-radius: 0%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

#test {
    position: relative;
}

#popColor {
    cursor: pointer;
}

.glowDot {
    background-color: var(--glowDotColor);
    border-radius: 50%;
}

.popDot {
    animation-name: popDot;
    animation-duration: 0.3s;
}

@keyframes popDot {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(2)
    }

    100% {
        transform: scale(1);
    }
}

.popThisDetail {
    animation-name: popDtl;
    animation-duration: 0.3s;
}

@keyframes popDtl {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1);
    }
}


.imgDetails {
    border: 1px solid black;
}

#tagDetails {
    padding: 0 8px 8px 8px;
    height: 345px;
    overflow-x: hidden;
    overflow-y: auto;
}

/*for scroll bars*/


.idItemsList {
    height: 350px;
    overflow-x: auto;
    overflow-y: auto;
}

.uploadTagBtn {
    margin-top: 10px;
}

/***************************
 HIGLIGHTER PAGE
***************************/

#contentPanel ::selection,
#contentPanel mark {
    background: var(--hilighter);
}

.testHover {
    background-color: pink;
    cursor: pointer;
}

.btnBar,
#contentPanel {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#contentPanel {
    margin-top: 20px;
    transition: .3s ease-out;
}


.hideMe {
    display: none;
}



/*
.originalFiles {
 display: flex;
 flex-direction: row;
}
*/

originalFiles {
    display: flex;
    flex-direction: column;
}

.destinationFiles {
    display: flex;
    flex-direction: column;
}

.extBtns {
    margin-top: 8px;
}

/*
#extracted,
.testSection {
    padding-left: 20px;
   }
*/
.srcContent,
.extContent {
    display: grid;
    grid-template-columns: 5% 90%;
}

.trgSlide {
    cursor: pointer;
    transition: .3s ease-out;
}


    .trgSlide:hover {
        color: var(--primary-color-faded);
    }

object,
iframe {
    width: 100%;
    height: 100%;
}



/*  DOCUMENT TAGGER */
#canvas_container {
    width: 800px;
    height: 450px;
    overflow: auto;
}

#canvas_container {
    background: #333;
    text-align: center;
    border: solid 3px;
}

.col2,
.portfolioHeaderCols {
    display: grid;
    /*grid-template-columns: 33% 66%;*/
    grid-template-columns: 60% 30%;
}

#portfolioHeaderRow {
    /* grid-template-columns: 50% 35% 15%; */
    grid-template-columns: 70% 30%;
}

/*
#actionBtnsMobile {
    display: none;
}
*/

.headerDropdowns {
    display: flex;
    justify-content: space-evenly;
}


.lineUnit,
.lineData
.col2 input[type="text"],
.col2 input[type="file"] {
    font-size: 0.95rem;
}



#portfolioHeaderRow .headerDropdowns {
    justify-content: flex-end;
    padding-right: 15px;
}

#portfolioHeaderRow #actionBtnsMobile {
    margin-right: 8px;
}

.filterLabels {
    font-size: 0.8rem;
}

.tagLabel {
    font-weight: bold;
}

.nb {
    font-size: 0.95rem;
    font-weight: bold;
}

.colDbl {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

#tagComms {
    margin-top: 0px;
}

/*
.col2 .lineItem {
  font-size: 0.95rem;
}
*/

.col2Head {
    font-weight: bold;
}

/*-------------------------------
    FANCY SHOWCASES STYLES
---------------------------------*/

.rifForm {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 2rem 2rem;
    max-width: 1200px;
    margin: 40px auto;
}

    .rifForm fieldset {
        background-color: rgba(21, 145, 142, 0.1);
        border-radius: 4px;
        padding: 25px;
        position: relative;
    }

        .rifForm fieldset:not(:last-child) {
            margin-bottom: 30px;
        }

    .rifForm input[type="range"] {
        margin-right: 10px;
        width: 100%;
        accent-color: var(--primary-color);
    }

        .rifForm input[type="range"]:hover {
            accent-color: var(--primary-color-faded);
        }

    .rifForm h2 {
        margin-bottom: 25px;
    }

#conversationName {
    font-weight: bold;
    text-align: center;
}

#msgPanels {
    display: flex;
    height: 85vh;
    border: 1px solid #ccc;
    border-radius: 8px;
}

#messages {
    background-color: white;
}

.msgForm {
    padding: 1rem;
    border-top: 1px solid #ccc;
    background-color: white;
    border-radius: 0 0 8px 0;
}

#msgConvos {
    width: 30%;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    border-radius: 8px 0 0 8px;
}

#msgPane {
    display: flex;
    flex: 1;
    flex-direction: column;
}

#newMessageText {
    width: 100%;
    border: 1px solid lightgray;
    border-radius: 4px;
    padding: 5px;
    margin-right: 8px;
}

#newMessageForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.conversation-item.selected {
    background: var(--tertiary-ultra-fade-solid) !important;
    border-left: 4px solid var(--tertiary-color);
}

.user-list-box {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid #eee;
    background-color: #eee;
    border-radius: 0 8px 0 0;
}

.user-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid lightgray;
    margin-bottom: 0.3rem;
}

.user-name {
    font-size: 0.95em;
    color: #333;
    text-align: center;
    word-break: break-word;
}

/*----------------------------
 CUSTOM SCROLL BAR STYLES
 -------------------------------*/
/* vertical scroll */
table.scroll ::-webkit-scrollbar,
.bulkItems::-webkit-scrollbar,
.msgBox::-webkit-scrollbar,
#myFilesPanel::-webkit-scrollbar,
.msgList::-webkit-scrollbar,
#tagDetails::-webkit-scrollbar,
.idItemsList::-webkit-scrollbar {
    width: 5px;
}

.rifForm fieldset div {
    margin-bottom: 10px;
}

.userTraits,
.trait,
.traitLevel,
.levelViz,
.traitSlider,
.sliderContainer {
    margin-bottom: 0 !important;
}

.userTraits {
    padding: 10px;
}

#rifEduInput #eduFileSelector input {
    margin-bottom: 0px;
}

.rifForm input,
.ftaRadio,
.eduItem,
.expItem,
#rifProfile,
.fileUploadBox,
.rifFileUploads {
    border: 1px solid lightgray;
    border-radius: 4px;
    padding: 4px;
    width: 100%;
}

.rifSupportDocs {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    margin-bottom: 0px !important;
}

.rifOr {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rifFileUploads {
    padding: 15px;
}

#addOldDocs span.k-multiselect.k-input.k-multiselect-clearable.k-input-solid.k-input-md.k-rounded-md {
    height: 45px;
}


.rifForm input[type="text"] {
    padding: 5px;
}

.rifForm input[type="text"],
.rifForm input[type="date"] {
    width: 100%;
}

.rifForm fieldset legend {
    font-weight: bold;
    font-size: 1.1rem;
    position: absolute;
    top: -12px;
}

.skillSet {
    display: flex;
    flex-direction: column;
}

.userSkills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 15px;
}

#ftaRadioChecks div {
    margin-bottom: 0 !important;
    margin-right: 10px;
}

    #ftaRadioChecks div label {
        margin-bottom: 0;
    }

#adminDashboard .widget:last-child {
    max-width: unset;
}

.modDashboard .widget:last-child {
    max-width: 100%;
}


.ftaRadio {
    display: flex;
    align-items: center;
}


.narrowMax {
    max-width: 850px;
}


.ftaSigFields {
    display: flex;
    justify-content: space-around;
}

.ftaSigBlock {
    width: 100%;
}

    .ftaSigBlock:first-child {
        margin-right: 15px;
    }

.rifCol3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
}

.rifCol2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}



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

.sliderValue {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 0 !important;
}

#rifEduInput input,
#rifExpInput input,
#expBlurb {
    margin-bottom: 15px;
}

#rifProfile {
    width: 100%;
}

.rifDbl div:first-child {
    margin-right: 35px;
}

.rifDbl {
    display: flex;
}

.smProfile {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .smProfile label {
        margin-bottom: 0;
    }

.smIcon {
    margin-right: 8px;
    display: flex;
    align-items: center;
}

    .smIcon i {
        margin-right: 8px;
    }

.smLinks {
    grid-column-gap: 35px;
    margin-top: 30px;
}

    .smLinks input {
        width: 100%;
    }

.k-multiselect div {
    margin-bottom: 0px !important;
}

.expDates {
    display: flex;
    font-size: .9rem;
}

.expItem h4,
.eduItem h4 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.expOrg,
.edInst {
    font-size: .9rem;
    color: var(--primary-color);
}

.expBlurb,
.edYear {
    font-size: .8rem;
}

#expList .expItem div,
#edList .eduItem div {
    margin-bottom: 0;
}

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

.scTinyBtn {
    font-size: .9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scTinyBtns {
    display: flex;
}

.scTinyBtn:not(:last-child) {
    margin-right: 4px;
}

.smIcon {
    min-width: 82px;
}

.rifCol2.smLinks div,
.rifCol2.userContact div {
    margin-bottom: 0;
}

#rifPortfolio .k-grid-header .k-header {
    background-color: var(--primary-color) !important;
}

    #rifPortfolio .k-grid-header .k-header:last-child {
        border-top-right-radius: 4px;
    }

    #rifPortfolio .k-grid-header .k-header:first-child {
        border-top-left-radius: 4px;
    }

#rifPortfolio .k-grid {
    margin-left: 10px;
}

#eduFileSelector .dropImg {
    border-radius: 50% !important;
}

.alertIcon {
    color: var(--btnDangerDrk);
    font-size: 3rem;
    margin-right: 10px
}

.alertIcon, .alertMsg {
    margin-bottom: 0px !important;
}

#eduError {
    display: flex;
    align-items: center;
    background-color: #ffe9ec;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 4px;
}




/*----------------------------
 CUSTOM SCROLL BAR STYLES
 -------------------------------*/

/* vertical scroll */
table.scroll ::-webkit-scrollbar,
.bulkItems::-webkit-scrollbar,
.msgBox::-webkit-scrollbar,
#myFilesPanel::-webkit-scrollbar,
.msgList::-webkit-scrollbar,
#tagDetails::-webkit-scrollbar,
.idItemsList::-webkit-scrollbar {
    width: 5px;
}


/*horizontal scroll*/
#allDevPlans::-webkit-scrollbar,
.subsLineChart::-webkit-scrollbar,
.schematicsList::-webkit-scrollbar,
#portfolioBtnsTop::-webkit-scrollbar {
    height: 5px;
}

.schematicsList::-webkit-scrollbar,
#portfolioBtnsTop::-webkit-scrollbar {
    height: 10px;
}

/* shadow inset on track */
table.scroll::-webkit-scrollbar-track,
.bulkItems::-webkit-scrollbar-track,
.msgBox::-webkit-scrollbar-track,
#myFilesPanel::-webkit-scrollbar-track,
.msgList::-webkit-scrollbar-track,
.subsLineChart::-webkit-scrollbar-track,
#allDevPlans::-webkit-scrollbar-track,
#tagDetails::-webkit-scrollbar-track,
.idItemsList::-webkit-scrollbar-track,
.schematicsList::-webkit-scrollbar-track,
#portfolioBtnsTop::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px grey;
    border-radius: 5px;
}

/* handle bar styles */
table.scroll ::-webkit-scrollbar-thumb,
.bulkItems::-webkit-scrollbar-thumb,
.msgBox::-webkit-scrollbar-thumb,
#myFilesPanel::-webkit-scrollbar-thumb,
.msgList::-webkit-scrollbar-thumb,
.subsLineChart::-webkit-scrollbar-thumb,
#allDevPlans::-webkit-scrollbar-thumb,
#tagDetails::-webkit-scrollbar-thumb,
.idItemsList::-webkit-scrollbar-thumb,
.schematicsList::-webkit-scrollbar-thumb,
#portfolioBtnsTop::-webkit-scrollbar-thumb {
    background: #3b3b3b;
    border-radius: 5px;
}

    table.scroll ::-webkit-scrollbar-thumb:hover,
    .bulkItems::-webkit-scrollbar-thumb:hover,
    .msgBox::-webkit-scrollbar-thumb:hover,
    #myFilesPanel::-webkit-scrollbar-thumb:hover,
    .msgList::-webkit-scrollbar-thumb:hover,
    .subsLineChart::-webkit-scrollbar-thumb:hover,
    #allDevPlans::-webkit-scrollbar-thumb:hover,
    #tagDetails::-webkit-scrollbar-thumb:hover,
    .idItemsList::-webkit-scrollbar-thumb:hover,
    .schematicsList::-webkit-scrollbar-thumb:hover,
    #portfolioBtnsTop::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color-faded);
    }




@media only screen and (min-width: 600px) {
    .myDashboard {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
    }

        .myDashboard .widget {
            flex-grow: 1;
            flex-basis: 50%;
        }

            .myDashboard .widget:last-child {
                max-width: 50%;
            }

    .modDashboard .widget:last-child {
        max-width: 100%;
    }

    .myDashboard .widget.large {
        flex-grow: 2;
        flex-basis: 100%;
    }

        .myDashboard .widget.large:last-child {
            max-width: 100%;
        }

    .myDashboard .widget.dropBefore {
        border-top: none;
        border-left: 5px solid var(--secondary-color-faded);
    }

    .myDashboard .widget.dropAfter {
        border-bottom: none;
        border-right: 5px solid var(--secondary-color-faded);
    }
}


@media screen and (max-width: 1000px) {
    .modFilterSelections {
        flex-direction: column;
        align-items: center;
    }

    .optionNames {
        width: 60%;
    }


}


/*@media screen and (max-width: 979px) {
   
    .timeline {
        flex-direction: column;
        border-top: 0;
        border-left: 5px solid var(--secondary-color);*/
/*width: 85%;*/
/*margin: 2rem auto;*/
/*margin-left: 60px;*/
/* padding-left: 2.5rem;*/
/*justify-content: space-around;
        height: 100%;
        min-height: 700px;
        position: relative;
    }

    #wTimeline .widgetWrap {
        padding: 1.5em 1.5em 8em 1.5em;
    }*/

/* #userProgress {
        top: -100%;
        left: -120%;
        align-items: flex-end;
        flex-direction: column-reverse;
    }*/

/*#userProgress {
        position: relative;
        margin-right: -20px
    }

    .progressBox {
        height: 100%;
    }

    .mileDetails {
        min-width: 200px;
    }

    #wTimeline .widgetContent {
        flex-direction: row;
    }

    #wTimeline {
        min-height: 750px;
    }


    .prgArrow {
        transform: rotate(-0.25turn);
    }

    .milestone {
        padding: 10px;
        margin: 0;
        margin-bottom: 1.5rem;
    }

    .timePoint {*/
/*margin-top: 25px;*/
/*margin-left: -75px;
    }*/

/*.milestone::before {
        margin-top: 40px;
        margin-left: -30px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid var(--secondary-color);
    }*/

/*.milestone:hover {
        transform: none;
    }*/

/*.milestone:hover .timePoint,*/
/*.timePoint:hover {
            border: 5px solid var(--secondary-color-faded);
            background-color: var(--secondary-color);
            transform: scale(1.2, 1.2);
        }
}*/



@media screen and (min-width: 960px) {
    .myDashboard .widget {
        /* flex-basis: 33%; */
        flex-basis: 25%;
    }

    #adminDashboard .widget {
        flex-basis: 20%;
    }

    .myDashboard .widget:last-child {
        /* max-width: 33%; */
        max-width: 50%;
    }

    #myDashboard.reportingDashboard .widget:last-child {
        max-width: 100%;
    }

    .myDashboard .widget.large,
    #adminDashboard .widget.large {
        flex-basis: 65%;
    }

        .myDashboard .widget.large:last-child {
            max-width: 50%;
        }
}
/*
@media (max-width: 1205px) {
    td button:last-child {
        margin-left: unset;
        margin-top: 3px;
    }
}
*/


@media screen and (max-width: 1660px) {
    .scSkillCounters {
        grid-template-columns: repeat(4, 20%);
        max-width: 1000px;
    }
}

@media screen and (max-width: 1475px) {
    .scSkillCounters {
        max-width: 800px;
    }
}

@media screen and (max-width: 1300px) {
    .scSkillCounters {
        max-width: 600px;
    }
}

@media screen and (max-width: 1265px) {
    #filterToolBar {
        flex-wrap: wrap;
    }

    .filterSelection {
        width: unset;
        margin-left: 8px;
    }

    .halfWidth {
        flex-grow: 1;
        margin-left: 0px;
    }

    .searchFilter {
        flex-basis: 100%;
        margin-top: 7px;
        margin-left: 0px;
    }

    .search-container {
        width: 100%;
        margin: auto;
    }
}





@media screen and (max-width: 1230px) {
    .myBadges {
        grid-template-columns: 1fr 1fr 1fr;
    }
}



@media screen and (max-width: 1207px) {
    .wMini {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}


@media screen and (max-width: 1200px) {

    .msgModalContainer {
        flex-direction: column;
    }

    .msgModalOverride {
        width: 75% !important;
        margin: auto !important;
    }

    .chat {
        width: 95%;
        margin: auto;
        margin-bottom: 1rem;
    }

    .allMsgPeople {
        display: flex;
    }

    .chatUser {
        margin-right: 10px;
    }

    .chat-history {
        height: 253px;
    }

    .chat-message.clearfix {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chatBtn {
        margin-left: 10px;
        height: 40px;
    }

    #grdModules td button:last-child {
        margin-left: 0 !important;
        margin-top: 5px;
    }

    #userShowcase .modCardsRow {
        column-count: 3;
    }
}



@media screen and (max-width: 1160px) {
    .scSkillCounters {
        grid-template-columns: repeat(2, 43%);
        grid-gap: 50px;
        margin-top: 45px;
    }
}


@media screen and (max-width: 1100px) {
    .profileSplashContent {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        justify-content: center;
    }

        .profileSplashContent .profilePic {
            margin-right: 20px;
        }

    .portfolioDetails {
        width: 600px;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1140px) {
    .milestone .desc {
        font-size: large;
    }
}
/*@media screen and (min-width: 1140px) {
    #userProgress {
        top: -95%;
    }
}*/

/*@media screen and (min-width: 1770px) {
    #userProgress {
        top: -100%;
    }
}*/

@media screen and (max-width: 1148px) {

    .col3 {
        grid-template-columns: 1fr 1fr 1.5fr;
    }

    #portfolioHeaderRow.col3 {
        grid-template-columns: 1fr 1fr;
    }

    /* #portfolioHeaderRow .ckOptions {
        columns: 3;
    }
   */

    #ptfOptions {
        grid-column: span 3;
        margin-top: 8px;
    }

    .ckOptions {
        columns: 4;
    }

    .optionsDiv .ckOptions {
        columns: 2;
    }
}





@media screen and (max-width: 1065px) {
    .dashDataSection {
        display: flex;
        flex-wrap: wrap;
    }

    .dashDataBox {
        flex: 1 1 0;
    }

    div#dashMySelectedData {
        flex: 1 1 100%;
    }


    .dashFilterOptions {
        columns: 4;
    }
}


@media screen and (max-width: 995px) {
    #vidContent {
        display: block;
    }

    #vidTranscript {
        margin-right: 0px;
        margin-top: 25px;
    }

    #vidScreen {
        display: flex;
        flex-direction: column-reverse;
    }

    .singleVidPage .vidTitleLine {
        margin-bottom: 0px;
    }

    .dblSection {
        flex-direction: column-reverse;
    }

    .introVideo {
        margin-left: 0;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 995px) {
    .showcaseSection {
        display: flex;
        flex-direction: column;
    }

    .showcaseContent {
        width: 100%;
    }

    .profilePic {
        margin-right: 2rem;
    }


    .dashSplash .profilePic img {
        width: 105px !important;
        height: 105px !important;
    }

    .scSkillCounters {
        grid-template-columns: repeat(1, 100%);
        grid-gap: 25px;
    }

        .scSkillCounters .scCombined .modProgress {
            margin-left: -55px;
        }
}


.selectionRow,
.selectionRowOptions {
    flex-direction: column;
    align-items: center;
}

#cDashSelectorRow {
    grid-template-columns: 1fr;
}

    #cDashSelectorRow .dashboardSelector {
        margin-left: 0;
    }

.dashSplash .splashContent {
    grid-template-columns: 1fr 3fr 4fr;
}

.dashSplash .profileDetails h1 {
    font-size: 2rem;
}

.dashSplash .profilePic img {
    width: 105px !important;
    height: 105px !important;
}


@media screen and (max-width: 975px) {
    #hoursTracker {
        display: flex;
        flex-direction: column-reverse;
    }

    #hoursLogContainer {
        width: 98%;
    }

    #hoursData {
        margin-bottom: 15px;
    }

    .hoursInfoLine {
        width: 255px;
        margin: auto;
    }
}

@media screen and (max-width: 950px) {
    .fta-col3 {
        grid-template-columns: 1fr 1fr;
    }

    .vidGrid {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 940px) {
    .complexHeader {
        flex-direction: column;
    }

        .complexHeader .searchField {
            margin-bottom: 10px;
        }

        .complexHeader .btnContainer {
            justify-content: flex-start;
        }

        .complexHeader .ckOptions {
            width: unset;
        }
}


@media screen and (max-width: 900px) {

    .triple {
        width: 50%;
    }

    .searchFilter {
        flex-basis: 50%;
    }

    .tripleWrap {
        margin-top: 7px;
        margin-left: -7px;
        margin-right: 7px;
    }
}




@media screen and (max-width: 880px) {
    .leftBtnRow,
    .rightBtnRow {
        justify-content: center;
    }

    .verifiedReqsSelectionRow {
        flex-direction: column;
    }

        .verifiedReqsSelectionRow > span {
            width: 100%;
        }

    .admAddNewOrgBtn {
        justify-content: center;
    }



    #hoursInfo {
        flex-direction: row;
    }
}


@media screen and (max-width: 875px) {
    .timeFrame {
        width: 30px;
        height: 30px;
        margin-top: -20px;
        margin-right: -20px;
    }

    .timepoint {
        font-size: 1.5rem
    }

    .timeLabel {
        font-size: .8rem;
    }

    .progPerc,
    .arrow {
        font-size: 1rem;
    }
}



@media screen and (max-width: 850px) {
    #selfAssessmentReport {
        grid-template-columns: 1fr;
    }

    .selfAssessmentScores {
        margin-bottom: 15px;
    }

    .saTestQuestions {
        grid-template-columns: 65% 33%;
    }

    .certTitle {
        font-size: 3rem;
    }

    .certLearnerName {
        font-size: 2rem;
    }

    .certSidebar {
        max-width: 125px;
    }

    #ptfOptions {
        width: 98%;
    }



    .headerDropdowns {
        margin-top: 0px;
    }

    #portfolioBtnsTop {
        margin-top: 10px;
    }

    #portfolioHeaderRow .rowBtn {
        margin: 5px;
    }

        #portfolioHeaderRow .rowBtn div {
            min-width: 150px;
            line-height: 1.1;
            height: 45px;
        }

    #portfolioHeaderRow .btnContainer {
        justify-content: center;
        margin: auto;
        flex-wrap: nowrap;
        overflow-x: scroll;
        width: 95%;
        margin-top: 10px;
    }
    /*
        #actionBtnsMobile {
            display: block;
        }
         */

    #portfolioBtnsTop {
        display: none;
    }


    #moduleProgress {
        display: none;
    }

    .scResume {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
    }


    #msgPanels {
        flex-direction: column;
    }

    #msgConvos {
        width: 100%;
        height: 150px;
        border-radius: 8px 8px 0 8px;
    }

    #msgPanels {
        height: auto;
        min-height: 85vh;
    }


    .user-list-box {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        border-radius: 0px;
    }

    #newMessageForm .btn-primary-cpd2 {
        margin-bottom: 0 !important;
    }

    .msgForm {
        border-radius: 0 0 8px 8px;
    }
}






@media screen and (max-width: 800px) {

    #userShowcase .modCardsRow {
        column-count: 2;
    }


    .scHeader {
        flex-wrap: wrap;
        justify-content: center;
    }

        .scHeader .accordionTitleLine {
            width: 25%;
            margin: auto;
        }

    .scHeaderTitleSection {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .selectRow {
        flex-direction: column;
        margin-top: 0;
    }
}

@media screen and (max-width: 775px) {
    .userSkills {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .showAward {
        font-size: 9rem;
    }

    .moduleSelect:not(:first-child) {
        margin-left: unset;
        margin-top: 8px;
    }

    .moduleSelect {
        width: 100%;
    }

    .admModCmbBtnRow {
        flex-direction: column;
        justify-content: space-between;
    }

    .admModBtns {
        text-align: center !important;
        margin-bottom: 8px;
    }

    .admModCmb {
        width: 100%;
    }

    .moduleSelect:first-child,
    .admModSrch {
        margin-left: unset;
    }

    .admModOpts {
        flex-direction: column;
    }

    .admModSrch {
        width: 99%;
        margin-right: unset;
    }
    .dashHasUnread::before {
        top: 15px;
        right: 18px;
    }
}


@media screen and (max-width: 767px) {
    .showAward {
        font-size: 9rem;
    }

    #hoursDataTabs {
        margin-bottom: 38px;
    }

    .tabList {
        margin-left: -28px;
    }
}


@media screen and (max-width: 765px) {

    .fta-col2 {
        columns: 1;
    }


    .ftaSigFields {
        flex-direction: column;
    }

    .ftaSigBlock:first-child {
        margin-right: 0 !important;
        margin-bottom: 25px !important;
    }

    .contentBox {
        width: 100%;
    }

    .ftaSigBlock:first-child {
        margin-right: 0 !important;
        margin-bottom: 25px !important;
    }

    .contentBox {
        width: 100%;
    }


    .chat-history {
        height: 235px;
    }

    .chat-message.clearfix {
        flex-direction: column;
    }

    .chatBtn {
        margin-left: 0px;
    }

    .msgModalOverride {
        width: 95% !important;
    }

    #portfolioHeaderRow.col3 {
        grid-template-columns: 1fr;
    }


    .dropSelectionRow {
        flex-direction: column;
        align-items: flex-start;
    }

        .dropSelectionRow .selectName,
        .dropSelectionRow .selectStatus {
            margin-bottom: 5px;
            margin-right: 0px;
        }

    .selectName,
    .selectStatus {
        width: 98%;
    }

    .allModsSelectionRow,
    .assessorSummarySelectionRow {
        flex-direction: column;
    }

        .allModsSelectionRow > span,
        .assessorSummarySelectionRow > span {
            width: 100%;
            margin-bottom: 8px;
        }

    .searchField {
        display: flex;
        align-items: center;
        margin-left: 3px;
    }
}

@media screen and (max-width: 745px) {
    .col3 {
        grid-template-columns: 1fr;
    }


    .btnContainer {
        justify-content: center;
        margin: 10px 0px;
    }

    .ckOptions {
        columns: 3;
        width: 65%;
        margin: auto;
    }

    .ck1:nth-of-type(1) {
        margin-bottom: 0;
    }
}


@media screen and (max-width: 730px) {
    .wDashboard {
        flex-direction: column;
        align-items: center;
    }

    .wMini {
        width: 60%;
    }
}



@media screen and (max-width: 715px) {
    .splashContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profileOrgEditLogo {
        margin-right: 0;
    }

    .profileSplashContent {
        flex-direction: column;
        align-items: center;
    }

    .profileDetails {
        text-align: center;
    }

    .profilePic {
        margin-right: 0px;
    }

    .profileSplashContent .profilePic {
        margin-right: 0px;
    }

    .mainContent {
        display: flex;
        flex-direction: column;
    }

    .contentBox:first-child {
        margin-bottom: 15px;
    }

    .smLinks {
        grid-template-columns: 100%
    }

    .smField {
        flex-grow: 3;
    }
    .assessorBtns {
        width: 200px;
    }
}

.devPlanHeader {
    flex-direction: column;
    align-items: flex-start;
}

.headerBtns div,
.headerBtns button {
    margin-left: 0px;
    margin-right: 5px;
}

.row3-1 {
    display: block;
}

#bulletChartLegend {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.makeRow {
    flex-direction: column;
}

.lineTipDetails {
    margin-left: 0px;
    width: 60%
}

.myLineTooltip::before {
    display: none;
}

.ck1 {
    min-width: 150px;
}

.portfolioInfoLine {
    margin-bottom: 10px;
}


@media screen and (max-width: 700px) {
    .requiredFiles {
        grid-template-columns: 1fr;
    }

    .vidGrid {
        grid-template-columns: 1fr;
    }

    .vidUserCatsGrid {
        grid-template-columns: 1fr;
    }

    .portfolioHeaderCols {
        display: flex;
        flex-direction: column;
    }

    #actionBtnsMobile, #headerFilters {
        width: 50%;
    }

    div#portfolioTopRow {
        grid-template-columns: 1fr;
    }

    .portfolioHdrSearch {
        margin-bottom: 8px;
        margin-left: 0;
    }

    .portfolioHdrBtns input {
        margin: 0;
    }

        .portfolioHdrBtns input:first-child {
            margin-right: .5rem;
        }

    #portfolioHeaderRow .searchField {
        margin: 0;
    }
    .portfolioHdrBtns{
        justify-content: center;
    }

    #showFiltersBtn,
    #dropdownMenuButton {
        width: 100%
    }

    #portfolioHeaderRow .headerDropdowns {
        justify-content: center;
        margin-top: 8px;
        padding-right: 10px;
    }

    .userTraits {
        display: flex;
        flex-direction: column;
    }

    .traitLevel {
        margin-left: 0;
    }

    .sliderContainer, .traitSlider {
        width: 100%;
    }
}

@media screen and (max-width: 685px) {
    .timeLabel {
        display: none;
    }

    .timeLabel2 {
        display: block;
        font-weight: bold;
        font-size: 1rem;
    }
}


@media screen and (max-width: 670px) {
    .dashTitleRow {
        flex-direction: column;
        width: 80%
    }

    .dashTitle {
        margin-bottom: 5px;
        width: 100%;
        text-align: center;
    }

    .dashboardSelector {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        width: 100%;
    }

    td button:last-child {
        margin-left: 0;
        margin-top: 3px;
    }

    .showcaseBtns button:last-child {
        margin-top: 0px !important;
    }

    .unitDetails {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .moreDetails div {
        margin-left: unset;
        margin-right: 8px;
    }

    .moreDetails {
        display: flex;
        flex-direction: row;
    }

    .detailActions {
        flex-direction: row-reverse;
        width: 100%;
        margin-left: unset;
        margin-bottom: 10px;
        align-items: center;
        justify-content: space-between;
    }

    .recallBtn {
        margin-right: 0;
    }

    .ckOptions {
        width: 98%;
    }

    .helpIcon,
    .planIcon {
        font-size: 1.5rem;
        margin-right: 5px;
    }

    /*   .statusIcon {
                font-size: 1.5rem;
            }
             */

    .verSelector {
        width: 100%;
        margin-right: 0;
        min-width: unset;
    }

    #filterToolBar {
        flex-direction: column;
        align-items: center;
    }

    .toolbarFilter {
        width: 100%;
    }

    .toolbarFilter {
        margin-bottom: 7px;
    }

    .searchFilter {
        margin-top: 0;
    }

    .tripleWrap {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .filterSelection {
        margin-left: 0px;
    }

    .cardCounts {
        padding: 10px;
    }


    div#btnMessages {
        margin-bottom: 0px;
        margin-top: 3px;
    }

    #portfolioForm .dropSectionBtns div#btnMessages {
        margin-top: 0;
    }

    .portfolioDetails {
        grid-template-columns: 1fr 1fr;
        width: 80%;
        margin: auto;
    }
}


@media screen and (max-width: 650px) {
    .fta-col3 {
        grid-template-columns: 1fr;
    }

    .modFilterSelections {
        max-width: 80%;
        margin: auto;
    }

    .optionChecks,
    .modFilterOptions {
        flex-direction: column;
        align-items: center;
    }

    .assessorModFilters {
        display: block;
        columns: 2;
    }

    .optionNames {
        width: 80%;
    }

    .modFilterText,
    .modFilter input,
    .toDoFilter input {
        margin-right: 0px;
    }

    .dashFilterOptions {
        columns: 3;
    }

    .dashDataBox {
        flex: 1 1 100%;
    }

    .saTestQuestions {
        grid-template-columns: 1fr;
    }

    #userShowcase .items5plus .firstCard {
        min-width: 250px;
    }


    .portfolioDetails {
        display: flex;
        flex-direction: column;
        width: unset;
    }
}

.scResSection {
    grid-template-columns: 1fr;
}

.showcaseUserInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media screen and (max-width: 625px) {
    .complexHeader .btnContainer {
        flex-direction: column;
    }


    .complexHeader .btnContainerBtns {
        justify-content: center;
    }

    .complexHeader .optionsDiv {
        margin-left: 0;
    }

    .complexHeader .ckOptions {
        columns: 3;
        margin-top: 10px;
    }

    .footerRow {
        flex-direction: column-reverse;
        align-items: center;
    }

        .footerRow div {
            margin: 5px;
            text-align: center
        }
}

@media screen and (max-width: 600px) {
    .btnShowcase {
        text-align: center;
    }

    div#hoursData {
        grid-template-columns: 1fr;
    }

    #hoursStatsIcons {
        margin-bottom: 15px;
    }

    .myBadges {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .rifCol2 {
        grid-template-columns: 100%;
    }

    .rifOr {
        margin: 10px;
    }

    .rifSupportDocs {
        display: flex;
        flex-direction: column;
    }
}


@media screen and (max-width: 580px) {
    .userSkills {
        grid-template-columns: 1fr;
    }

        .userSkills .skillSet {
            margin-bottom: 35px !important;
        }

    .smProfile {
        flex-direction: column;
        align-items: flex-start;
    }

    .smField {
        width: 100%;
    }
}


@media screen and (max-width: 575px) {
    .btn-primary-cpd2 {
        margin-bottom: 5px;
    }

    #portfolioHeaderRow .searchField {
        margin-left: 0px;
        padding-left: 4px;
        padding-right: 4px;
    }

    #ptfOptions {
        grid-column: span 1;
    }
}


@media screen and (max-width: 575px) {
    .btn-primary-cpd2 {
        margin-bottom: 5px;
    }

    #portfolioHeaderRow .searchField {
        margin-left: 0px;
        padding-left: 4px;
        padding-right: 4px;
    }

    #ptfOptions {
        grid-column: span 1;
    }

    .ckOptions {
        columns: 4;
    }

        .ckOptions.longOptions {
            width: 98%;
            columns: 2;
        }

    #btnApproveModule {
        margin-top: 8px;
    }

    .itemContentActions button.btn-primary-cpd2 {
        margin-bottom: 0;
    }

    .ckOptions {
        columns: 4;
    }

        .ckOptions.longOptions {
            width: 98%;
            columns: 2;
        }

    .devPlanFilter {
        margin-top: 8px;
    }

    #btnApproveModule {
        margin-top: 8px;
    }

    .itemContentActions button.btn-primary-cpd2 {
        margin-bottom: 0;
    }


    .devPlanFilter {
        margin-top: 8px;
    }


    .longRow {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 98% !important;
        margin: auto !important;
        --bs-gutter-x: 0px !important;
        --bs-gutter-y: 0px !important;
    }
    /*
        #portfolioHeaderRow .ckOptions {
            columns: 2;
            width: 300px;
        }
    */

    #portfolioHeaderRow .rowBtn {
        margin-left: unset;
    }

    #portfolioHeaderRow .rowBtn {
        margin: 5px;
    }

        #portfolioHeaderRow .rowBtn div {
            font-size: 0.9rem;
        }

    #portfolioTopRow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }


    .btn-small-cpd2 {
        margin-bottom: 5px;
    }


    .ck1 {
        display: flex;
        flex-direction: row;
    }

    .ck1-input {
        margin: 5px;
    }

    .col2 {
        grid-template-columns: 1fr;
    }


    .containerNarrow {
        max-width: 100% !important;
    }

    .portfolioHeaderCols {
        display: flex;
        flex-direction: column;
    }

    .headerDropdowns {
        margin-top: 10px;
    }

    .dropSectionHeader {
        flex-direction: column;
        justify-content: flex-start;
    }

    .dropSectionBtns {
        justify-content: flex-start;
        margin-top: 8px;
        margin-left: 0px;
    }

    #portfolioForm .dropSectionBtns {
        justify-content: center;
    }


    .admModOpts {
        columns: unset;
        margin-top: 8px;
        text-align: center;
    }

    .admModCmb {
        padding-right: 10px;
    }

    .admModSrch {
        margin-right: unset;
    }

    .admModBtns {
        text-align: center !important;
    }


    .leftBtnRow,
    .rightBtnRow {
        flex-direction: column;
        align-items: center;
    }

        .leftBtnRow input,
        .rightBtnRow input {
            margin-right: 0px;
            width: 98%
        }

    .reportTitleRow,
    .reportOptionsRow {
        flex-direction: column;
        align-items: flex-start;
    }

    .reportOptionsRow {
        margin-bottom: 10px;
    }

    .reportOptionsList {
        flex-direction: column;
        align-items: flex-start;
    }

    .reportOptionsBtns {
        margin-top: 10px;
    }

    .certificate {
        flex-direction: column;
        min-width: 275px;
    }

    .certSidebar {
        max-width: unset;
        border-right: none;
        padding-top: 1rem;
        border-radius: 8px 8px 0 0;
    }

    .certSeal {
        padding: 0;
    }

    .certHeader {
        border-radius: 0;
    }

    .certDetailsText {
        padding: 2rem;
    }
}


@media (min-width: 576px) {
    #test2 .modal-dialog {
        max-width: 900px;
    }
}

@media screen and (max-width: 500px) {
    .hideAtMobile {
        cursor: pointer;
    }

    .admAddNewOrgBtn button {
        width: 100%
    }

    #hoursInfo {
        flex-direction: column;
        margin-left: 0;
    }

        #hoursInfo .criticalNote {
            margin: 10px;
        }

    #userShowcase .modCardsRow {
        column-count: 1;
    }
}

@media screen and (max-width: 495px) {
    #schedulerTimePicks {
        grid-template-columns: 1fr;
    }

    #ptfCks {
        columns: 1;
    }
}

@media screen and (max-width: 490px) {
    .portfolioDetails {
        grid-template-columns: 1fr;
    }

    .ckOptions,
    .optionsDiv .ckOptions {
        columns: unset;
        width: 140px;
    }

    .dashFilterOptions {
        columns: 2;
    }

    .wDashboard {
        padding-left: 15px;
    }

    .wMini {
        width: 100%;
    }
}

@media screen and (max-width: 470px) {
    .rifCol2 {
        flex-direction: column;
    }
}

@media screen and (max-width: 470px) {

    .audioRecorder {
        min-width: 365px;
    }

    .recorderControls {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .recBtns {
        margin-bottom: 10px;
    }

    #audioWarning {
        margin-right: 0;
    }

    .recordingSection {
        flex-direction: column-reverse;
    }
}



@media screen and (max-width: 455px) {
    .quizResults {
        grid-template-columns: 1fr;
    }

    .resultsData {
        width: 65%;
        margin: auto;
        margin-bottom: 20px;
    }

    .itemViewContent {
        flex-direction: column;
    }

    .summaryRow {
        flex-direction: column;
    }

    .summaryRowSearch {
        width: 100%;
    }

    .summaryRowBtns {
        width: 100%;
        text-align: center;
    }

    .summaryRowBtns {
        margin-top: 10px;
    }

    .btnShowcase button {
        width: 100%;
    }

    #userShowcase .showcaseSectionDesc {
        flex-direction: column;
    }

    .adminSelections {
        flex-direction: column;
        align-items:center;
    }

    .adminOptions {
        align-items:center;
    }
}


@media screen and (max-width: 380px) {
    .resultsData {
        width: 75%;
    }

    .assessorModFilters {
        columns: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #typeOfHours .hoursInfoLine {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 340px) {
    .dashFilterOptions {
        columns: 1;
    }
}

@media screen and (max-width: 325px) {
    .resultsData {
        width: 100%;
    }

    #portfolioHeaderRow .ckOptions {
        columns: 1;
        width: 140px;
    }

    .ckOptions.longOptions {
        columns: 1;
    }
}

@media screen and (max-width: 320px) {

    .dropSectionBtns div:first-child {
        margin-right: 0px;
    }

    #portfolioForm .dropSectionBtns div {
        margin-right: 0px;
    }
}