ul.qualRating {
    display: inline-flex;
    list-style: none;
}
ul.qualRating li.qualOuter {
    float: left;
    width: 28px;
    height: 14px;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff;
    position: relative;
}
ul.qualRating li.qualOuter .qualComplete {
    width: 32px;
    height: 20px;
    border-radius: 100%;
    background-color: #ffffff;
    position: absolute;
    top: -3px;
    left: -2px;
}
ul.qualRating li.qualOuter .qualComplete span {
    background-color: #888888;
    display: block;
    border: 1px solid #cccccc;
    height: 8px;
    width: 22px;
    margin: 5px 4px;
}
ul.qualRating li.qualOuter .qualEmpty {
    width: 32px;
    height: 20px;
    border-radius: 100%;
    background-color: #ffffff;
    position: absolute;
    top: -3px;
    left: -2px;
}
ul.qualRating li.qualOuter .qualEmpty span {
    background-color: #ffffff;
    display: block;
    border: 1px solid #cccccc;
    height: 8px;
    width: 22px;
    margin: 5px 4px;
}
ul.qualRating li.qualOuter .arrowRed {
    bottom: -5px;
    left: 5px;
}
ul.qualRating li.qualOuter .arrowGreen {
    top: -5px;
    left: 5px;
}
ul.qualRating li.qualCurrent {
    border-color: #666666;
}
.arrowRed {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 5px solid #ed2637;
    position: absolute;
}
.arrowGreen {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 5px solid #0b873a;
    position: absolute;
}
.noFamiliarityGreyIcon {
    position: absolute;
    background-color: #ffffff;
    border-radius: 100%;
    width: 32px;
    height: 20px;
    top: -3px;
    left: -2px;
}
.noFamiliarityGreyIcon span {
    display: block;
    height: 19px;
    width: 19px;
    margin: 5px 4px;
    position: absolute;
    top: -4px;
    left: 3px;
}
.noFamiliarityDarkIcon {
    position: absolute;
    background-color: #ffffff;
    border-radius: 100%;
    width: 32px;
    height: 20px;
    top: -3px;
    left: -2px;
}
.noFamiliarityDarkIcon span {
    display: block;
    height: 19px;
    width: 19px;
    margin: 5px 4px;
    position: absolute;
    top: -4px;
    left: 3px;
}
.noFamiliarityRedIcon {
    position: absolute;
    background-color: #ffffff;
    border-radius: 100%;
    width: 32px;
    height: 20px;
    top: -3px;
    left: -2px;
}
.noFamiliarityRedIcon span {
    display: block;
    height: 19px;
    width: 19px;
    margin: 5px 4px;
    position: absolute;
    top: -4px;
    left: 3px;
}
.qualPlaceHolder {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    border: 1px solid transparent;
    border-radius: 3.1px;
    margin-left: -4px;
    padding: 5px 1px;
}
table.box th.tertiaryHeader {
    background-color: #e8f0fd;
    font-weight: bold;
}
table.box .center {
    text-align: center;
}
table.box td.sectionQualCategory {
    padding: 2px;
}
table.box .certCell .displayCell {
    padding-top: 2px;
}
.tertiaryHeader {
    background-color: #e8f0fd;
    font-weight: bold;
}
.qualTable {
    width: 100%;
}
.qualTable .center {
    text-align: center;
}
.qualTable .qualBlueHeader {
    color: #00679e;
    font-weight: bold;
}
.qualTable tr {
    height: 30px;
}
.qualTable input[name="qualYears"] {
    width: 48px;
    margin-right: 2px;
    margin-left: -2px;
}
.qualTable .certCell {
    vertical-align: text-top;
    padding-top: 12px;
}
.qualTable .certCell div > .label {
    margin-top: 27px;
}
.qualTable .noBorder {
    border-bottom: 0 solid #cccccc;
}
.qualBlueHeader {
    color: #00679e;
    font-weight: bold;
}
.duration {
    display: inline-block;
    position: relative;
}
.duration .arrowGreen {
    left: 95px;
    top: 12px;
}
.duration .arrowRed {
    left: 95px;
    top: 12px;
}
.durationReview {
    display: inline-block;
    position: relative;
}
.durationReview .arrowGreen {
    left: 50px;
    top: 5px;
}
.durationReview .arrowRed {
    left: 50px;
    top: 5px;
}
.pointduration {
    display: inline-block;
    position: relative;
}
.pointduration .arrowGreen {
    left: 118px;
    top: 12px;
}
.pointduration .arrowRed {
    left: 118px;
    top: 12px;
}
.pointdurationReview {
    display: inline-block;
    position: relative;
}
.pointdurationReview .arrowGreen {
    left: 75px;
    top: 5px;
}
.pointdurationReview .arrowRed {
    left: 75px;
    top: 5px;
}
div.qualSlider div.inner {
    background-color: #199de0;
    height: 10px;
}
table.adminViewTable.qualTable th {
    border: 1px solid #cccccc;
}
table.adminViewTable.qualTable .qualBlueHeader {
    background: #ffffff;
}
.qualContainer {
    border: 1px solid transparent;
    border-radius: 3.1px;
    display: inline-block;
}
table.formTableCls .qualContainer {
    margin-left: -2px;
}

/* flexible assessment scale — round numbered buttons */
ul.qualRating li.flexibleScaleQualOuter {
    border: 1px solid #dddddd;
    border-radius: 100%;
    float: left;
    height: 18px;
    margin: 5px 3px;
    position: relative;
    width: 18px;
}
ul.qualRating li.flexibleScaleQualOuter .qualComplete {
    background-color: #ffffff;
    border-radius: 100%;
    height: 20px;
    left: -2px;
    position: absolute;
    top: -2px;
    width: 20px;
}
ul.qualRating li.flexibleScaleQualOuter .qualComplete span {
    background-color: #0088cc;
    border: 1px solid #0088cc;
    border-radius: 100%;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 0.75rem;
    height: 20px;
    padding-top: 1px;
    text-align: center;
    width: 20px;
}
ul.qualRating li.flexibleScaleQualOuter .qualEmpty {
    background-color: #ffffff;
    border-radius: 100%;
    height: 20px;
    left: -2px;
    position: absolute;
    top: -2px;
    width: 20px;
}
ul.qualRating li.flexibleScaleQualOuter .qualEmpty span {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    font-size: 0.75rem;
    height: 20px;
    justify-content: center;
    padding-top: 1px;
    text-align: center;
    width: 20px;
}
ul.qualRating li.flexibleScaleQualOuter .qualEmpty span:hover {
    background-color: #f3f7ff;
    border: 1px solid #0088cc;
}

/* rating label text below flexible scale */
.qualRatingNotSelectedText,
.qualRatingText {
    font-size: 0.875rem;
    margin: 0 3px;
}
.qualRatingNotSelectedText {
    color: #a0a0a0;
}
.qualRatingTextContainer {
    display: flex;
}

/* flex arrows for JS/applicant comparison view */
.flexArrowRed {
    fill: #ed2637;
}
.flexArrowGreen {
    fill: #0b873a;
    transform: rotate(180deg);
}
.flexArrowRed,
.flexArrowGreen {
    align-items: center;
    display: flex;
    justify-content: center;
}
.flexArrowRed figure,
.flexArrowGreen figure {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    width: 20px;
}
.flexArrowRed figure svg,
.flexArrowGreen figure svg {
    height: 1rem;
    width: 1rem;
}

/* 2-level radio button scale */
.flexScaleRadioContainer {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 3px;
    position: relative;
}