/*-- Quality Scale --*/
#qualityScaleContainer{
    position: relative;
}

#qualityScaleSliderContainer{
    position: relative;
    background: #ebebeb;
    width: 710px;
    height: 300px;
    /* border-bottom: 2px solid grey; */
}

#qualityScaleImagesTable {
    margin-top: 16px;
    width: 100%;
}

table#qualityScaleImagesTable th.title {
    font-weight: bold;
    width: 33%;
    padding: 10px 0;
    font-size: 16px;
}

#qualityScaleSliderContainer .quality-scale-image {
    margin: 0;
    opacity: 0.3;
    transition: opacity .3s linear;
    cursor: pointer;
}

#qualityScaleSliderContainer .quality-scale-image:hover {
    opacity: 1;
}

#qualityScaleSliderContainer .quality-scale-image.selected {
    opacity: 1;
}

#qualityScaleAutoToggleSwitch {
    position: absolute;
    bottom: 21px;
    left: -2px;
    width: 50px;
    text-align: center;
}

div#qualityScaleContainer.assist-on table#qualityScaleDescriptionTable{
    display: table;
}

table#qualityScaleDescriptionTable {
    margin-top: 16px;
    width: 100%;
    border-spacing: 4px;
    border-collapse: separate;
    display: none;
}

table#qualityScaleDescriptionTable.clickable {}
table#qualityScaleDescriptionTable td{
    width: 33%;
}

table#qualityScaleDescriptionTable tr.header td.center-align {
    padding: 10px;
    text-align: center;
    /* border-top: 1px solid #dadada; */
    /* background-color: #f9f9f9; */
    font-style: italic;
}

table#qualityScaleDescriptionTable tr.header td{
    padding: 10px 0;
}
table#qualityScaleDescriptionTable tr.header td label{
    min-width: initial;
}

table#qualityScaleDescriptionTable tr.buttons td {
    padding: 10px;
}

table#qualityScaleDescriptionTable tr.buttons td.selected {
    color: black;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td {
    padding: 0 0 16px;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td:not(.empty) label{
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
    display: block;
    width: 218px;
    height: 138px;
    border-radius: 8px;
    border: 1px solid #a2a2a2;
    box-sizing: border-box;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 80%;
    position: relative;
}

table#qualityScaleDescriptionTable.clickable tr.buttons.image-middle td:not(.empty) label{
    height: 178px;
    background-position: center 70%;
}

table#qualityScaleDescriptionTable.clickable tr.buttons.image-top td:not(.empty) label{
    background-position: center 10%;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td:not(.empty) label span.bottom-text{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

table#qualityScaleDescriptionTable.clickable tr.buttons.no-images td:not(.empty){
    text-align: center;
}

table#qualityScaleDescriptionTable.clickable tr.buttons.no-images td:not(.empty) label{
    height: 100%;
    display: inline-block;
    box-sizing: content-box;
    width: 196px;
    text-align: left;
}

label[for=qsa_1_1] {
    background-image: url(../images/quality_scale_assistant/1-1.png);
}

label[for=qsa_1_2] {
    background-image: url(../images/quality_scale_assistant/1-2.png);
}

label[for=qsa_1_3] {
    background-image: url(../images/quality_scale_assistant/1-3.png);
}

label[for=qsa_2_1] {
    background-image: url(../images/quality_scale_assistant/2-1.png);
}

label[for=qsa_2_2] {
    background-image: url(../images/quality_scale_assistant/2-2.png);
}

label[for=qsa_2_3] {
    background-image: url(../images/quality_scale_assistant/2-3.png);
}

label[for=qsa_3_1] {
    background-image: url(../images/quality_scale_assistant/3-1.png);
}

label[for=qsa_3_2] {
    background-image: url(../images/quality_scale_assistant/3-2.png);
}

label[for=qsa_3_3] {
    background-image: url(../images/quality_scale_assistant/3-3.png);
}

label[for=qsa_5_1] {
    background-image: url(../images/quality_scale_assistant/5-1.png);
}

label[for=qsa_5_2] {
    background-image: url(../images/quality_scale_assistant/5-2.png);
}

label[for=qsa_5_3] {
    background-image: url(../images/quality_scale_assistant/5-3.png);
}

label[for=qsa_6_1] {
    background-image: url(../images/quality_scale_assistant/6-1.png);
}

label[for=qsa_6_2] {
    background-image: url(../images/quality_scale_assistant/6-2.png);
}

label[for=qsa_6_3] {
    background-image: url(../images/quality_scale_assistant/6-3.png);
}

table#qualityScaleDescriptionTable.clickable tr.buttons td:not(.empty):hover label {
    color: black;
    background-color: white;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td.clicked {
    color: black;
    box-shadow: none;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td:nth-child(1) input:checked + label {
    background-color: rgba(134,228,79,0.5);
    box-shadow: none;
    color: black;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td:nth-child(2) input:checked + label {
    background-color: rgba(109, 167, 226, 0.5);
    box-shadow: none;
    color: black;
}

table#qualityScaleDescriptionTable.clickable tr.buttons td:nth-child(3) input:checked + label {
    background-color: rgba(166, 122, 245, 0.5);
    box-shadow: none;
    color: black;
}

table#qualityScaleDescriptionTable input {
    opacity: 0;
    position: absolute;
}

div#qualityScaleSliderInputContainer {
    margin: 10px 0;
}

div#qualityScaleSlider {
    width: 80%;
    margin-left: 8%;
    margin-top: 20px;
}

div#qualityScaleSlider:before {
    content: 'Lower Cost';
    color: #9F2322;
    position: absolute;
    top: -20px;
}

div#qualityScaleSlider:after {
    content: 'Higher Cost';
    color: #9F2322;
    position: absolute;
    top: -20px;
    right: 0;
}

input#qualityScaleInput {
    width: 5%;
    position: absolute;
    right: 8px;
    bottom: 20px;
    font-weight: bold;
}

div#qualityScaleContainer.assist-on div#qualityScaleSliderContainer.fixed-top {
    position: fixed;
    top: 65px;
    box-shadow: 0 2px 2px 0 rgba(128,128,128,0.5);
    width: 750px;
    padding: 0 20px;
    left: 50%;
    margin-left: -460px;
    box-sizing: border-box;
    border-left: 1px solid #9a9a9a;
    border-right: 1px solid #9a9a9a;
    z-index: 1 !important;
}

div#qualityScaleSliderContainer.fixed-top {
    z-index: 1 !important;
}

#qualityScaleSliderContainer.fixed-top + table#qualityScaleDescriptionTable {
    margin-top: 326px;
}

div#qualityScaleContainer.assist-on div#qualityScaleSliderContainer.fixed-top #qualityScaleAutoToggleSwitch {
    left: 18px;
}

div#qualityScaleContainer.assist-on div#qualityScaleSliderContainer.fixed-top input#qualityScaleInput {
    right: 28px;
}


div#qualityScaleSliderContainer.absolute-bottom {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

div#qualityScaleContainer.assist-on div#qualityScaleSliderContainer.fixed-top + div#qualityScaleDescriptionContainer #qualityScaleDescriptionTable,
div#qualityScaleContainer.assist-on div#qualityScaleSliderContainer.absolute-bottom + div#qualityScaleDescriptionContainer #qualityScaleDescriptionTable{
    margin-top: 310px;
}

.ui-slider-range {
    transition: background-color .3s linear;
}

.manual-scale.ui-slider-range {
    background: #e9e9e9 !important;
}

div#qualityScaleAutoToggleSwitch > label:first-child {
    min-width: 0;
    cursor: pointer;
}

div#qualityScaleSlider.disable-values-less-than-three .ui-slider-range:before{
    content: 'Disabled';
    position: absolute;
    background-color: rgb(235, 235, 235);
    width: 142px;
    height: 100%;
    color: transparent;
}

div#qualityScaleSlider.disable-values-less-than-three .ui-slider-pip-1,
div#qualityScaleSlider.disable-values-less-than-three .ui-slider-pip-2{
    opacity: .2;
}

div#qualityScaleAssistantLabel {border-bottom: 2px solid black;padding-bottom: 8px;}

#qualityScaleAssistantLabel label.bold {
    color: black !important;
}