/*GENERAL THEME STYLING*/
.click-bar-answer {
    max-width: 1000px;
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px 15px;
    display: table;
}

.click-bar-row {
    display: table-row;
    height: 50px;
}

.click-bar-header {
    display: table-cell;
    vertical-align: middle;
}

.click-bar-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /*font-weight: 600;*/
    padding: 7px;
}

.click-bar-header {
    font-weight: 600;
}

.click-bar-header:first-child {
    text-align: right;
}

.click-bar-header:last-child {
    text-align: left;
}
/*END OF GENERAL THEME STYLING*/

/*RESPONSIVE STYLING*/
@media screen and (max-width: 768px) {
    .responsive .click-bar-answer {
        display: inline-block;
        border-spacing: 5px;
    }

    .responsive .click-bar-answer .grid-header-row {
        display: inline-block;
        width: 100%;
        padding: 0;
    }

    .responsive .click-bar-answer .grid-header {
        text-align: center !important;
        width: 100%;
        display: inline-block;
    }

    .responsive .click-bar-row {
        display: inline-block;
        height: auto;
        width: 100%;
        padding: 20px 0;
    }

    .responsive .click-bar-header {
        display: inline-block;
        width: 100% !important;
        text-align: left;
    }

    .responsive .click-bar-cell {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        font-weight: 600;
        width: 100% !important;
        margin: 3px 0;
        padding: 10px 0;
    }
}


/*LAYOUT STYLES*/
/*vertical - default on mobile*/
.desktop-vertical-layout .click-bar-answer,
.tablet-vertical-layout .click-bar-answer,
.mobile-vertical-layout .click-bar-answer {
    display: inline-block;
    border-spacing: 5px;
}

.desktop-vertical-layout .click-bar-answer .grid-header-row,
.tablet-vertical-layout .click-bar-answer .grid-header-row,
.mobile-vertical-layout .click-bar-answer .grid-header-row {
    display: inline-block;
    width: 100%;
    padding: 20px 0 0;
}

.desktop-vertical-layout .click-bar-answer .grid-header,
.tablet-vertical-layout .click-bar-answer .grid-header,
.mobile-vertical-layout .click-bar-answer .grid-header {
    text-align: center !important;
    width: 100%;
    display: inline-block;
}

.click-bar-question tr.grid-header-row td.grid-header {
    text-align: center;
    padding: 8px 0 0;
}

.desktop-vertical-layout .click-bar-row,
.tablet-vertical-layout .click-bar-row,
.mobile-vertical-layout .click-bar-row {
    display: inline-block;
    height: auto;
    width: 100%;
    padding: 20px 0;
}

.desktop-vertical-layout .click-bar-header,
.tablet-vertical-layout .click-bar-header,
.mobile-vertical-layout .click-bar-header {
    display: inline-block;
    width: 100% !important;
    text-align: left;
    font-size: 1.1em;
}

.desktop-vertical-layout .click-bar-cell,
.tablet-vertical-layout .click-bar-cell,
.mobile-vertical-layout .click-bar-cell {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: 600;
    width: 100% !important;
    margin: 3px 0;
    padding: 10px 0;
    min-height: 30px;
}

.desktop-vertical-layout .click-bar-row:not(:last-of-type),
.tablet-vertical-layout .click-bar-row:not(:last-of-type),
.mobile-vertical-layout .click-bar-row:not(:last-of-type) {
    border-bottom: 1px dashed #D9D9D9;
}
/*END OF LAYOUT STYLES*/

/*CLICK BAR CELL COLOURS*/
/*black header*/
.click-bar-header.sentis-black {
    color: #444444;
}

/*NEW CLICK BAR CELL COLOURS*/
/*default colour*/
.click-bar-cell {
    background-color: var(--sentis-default-xl);
}

.click-bar-cell:hover {
    background-color: var(--sentis-default-lt);
    cursor: pointer;
}

.click-bar-cell.selected {
    background-color: var(--sentis-default-md);
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.click-bar-header {
    color: var(--sentis-default-dk);
}

/*black header*/
.click-bar-header.sentis-black {
    color: #444444;
}

/*grey*/
.click-bar-cell.sentis-grey {
    background-color: var(--sentis-grey-xl);
    /*color: var(--sentis-grey-dk);*/
}

.click-bar-cell.sentis-grey:hover {
    background-color: var(--sentis-grey-lt);
}

.click-bar-cell.sentis-grey.selected {
    background-color: var(--sentis-grey-md);
}

.click-bar-header.sentis-grey {
    color: var(--sentis-grey-dk);
}

/*default*/
.click-bar-cell.sentis-default {
    background-color: var(--sentis-default-xl);
    /*color: var(--sentis-default-dk);*/
}

.click-bar-cell.sentis-default:hover {
    background-color: var(--sentis-default-lt);
}

.click-bar-cell.sentis-default.selected {
    background-color: var(--sentis-default-md);
    /*color: white!important;*/
}

.click-bar-header.sentis-default {
    color: var(--sentis-default-dk);
}

/*yellow*/
.click-bar-cell.sentis-yellow {
    background-color: var(--sentis-yellow-xl);
    /*color: var(--sentis-yellow-dk);*/
}

.click-bar-cell.sentis-yellow:hover {
    background-color: var(--sentis-yellow-lt);
}

.click-bar-cell.sentis-yellow.selected {
    background-color: var(--sentis-yellow-md);
    /*color: white!important;*/
}

.click-bar-header.sentis-yellow {
    color: var(--sentis-yellow-dk);
}

/*orange*/
.click-bar-cell.sentis-orange {
    background-color: var(--sentis-orange-xl);
    /*color: var(--sentis-orange-dk);*/
}

.click-bar-cell.sentis-orange:hover {
    background-color: var(--sentis-orange-lt);
}

.click-bar-cell.sentis-orange.selected {
    background-color: var(--sentis-orange-md);
}

.click-bar-header.sentis-orange {
    color: var(--sentis-orange-dk);
}

/*red*/
.click-bar-cell.sentis-red {
    background-color: var(--sentis-red-xl);
    /*color: var(--sentis-red-dk);*/
}

.click-bar-cell.sentis-red:hover {
    background-color: var(--sentis-red-lt);
}

.click-bar-cell.sentis-red.selected {
    background-color: var(--sentis-red-md);
}

.click-bar-header.sentis-red {
    color: var(--sentis-red-dk);
}

/*pink*/
.click-bar-cell.sentis-pink {
    background-color: var(--sentis-pink-xl);
    /*color: var(--sentis-pink-dk);*/
}

.click-bar-cell.sentis-pink:hover {
    background-color: var(--sentis-pink-lt);
}

.click-bar-cell.sentis-pink.selected {
    background-color: var(--sentis-pink-md);
}

.click-bar-header.sentis-pink {
    color: var(--sentis-pink-dk);
}

/*green*/
.click-bar-cell.sentis-green {
    background-color: var(--sentis-green-xl);
    /*color: var(--sentis-green-dk);*/
}

.click-bar-cell.sentis-green:hover {
    background-color: var(--sentis-green-lt);
}

.click-bar-cell.sentis-green.selected {
    background-color: var(--sentis-green-md);
}

.click-bar-header.sentis-green {
    color: var(--sentis-green-dk);
}

/*dark green*/
.click-bar-cell.sentis-dark-green {
    background-color: var(--sentis-dark-green-xl);
    /*color: var(--sentis-dark-green-dk);*/
}

.click-bar-cell.sentis-dark-green:hover {
    background-color: var(--sentis-dark-green-lt);
}

.click-bar-cell.sentis-dark-green.selected {
    background-color: var(--sentis-dark-green-md);
}

.click-bar-header.sentis-dark-green {
    color: var(--sentis-dark-green-dk);
}

/*blue*/
.click-bar-cell.sentis-blue {
    background-color: var(--sentis-blue-xl);
    /*color: var(--sentis-blue-dk);*/
}

.click-bar-cell.sentis-blue:hover {
    background-color: var(--sentis-blue-lt);
}

.click-bar-cell.sentis-blue.selected {
    background-color: var(--sentis-blue-md);
}

.click-bar-header.sentis-blue {
    color: var(--sentis-blue-dk);
}

/*teal*/
.click-bar-cell.sentis-teal {
    background-color: var(--sentis-teal-xl);
    /*color: var(--sentis-teal-dk);*/
}

.click-bar-cell.sentis-teal:hover {
    background-color: var(--sentis-teal-lt);
}

.click-bar-cell.sentis-teal.selected {
    background-color: var(--sentis-teal-md);
}

.click-bar-header.sentis-teal {
    color: var(--sentis-teal-dk);
}

/*purple*/
.click-bar-cell.sentis-purple {
    background-color: var(--sentis-purple-xl);
    /*color: var(--sentis-purple-dk);*/
}

.click-bar-cell.sentis-purple:hover {
    background-color: var(--sentis-purple-lt);
}

.click-bar-cell.sentis-purple.selected {
    background-color: var(--sentis-purple-md);
}

.click-bar-header.sentis-purple {
    color: var(--sentis-purple-dk);
}

/*extra color one*/
.click-bar-cell.sentis-extra-color-one {
    background-color: var(--sentis-extra-color-one-xl);
}

.click-bar-cell.sentis-extra-color-one:hover {
    background-color: var(--sentis-extra-color-one-lt);
}

.click-bar-cell.sentis-extra-color-one.selected {
    background-color: var(--sentis-extra-color-one-md);
}

.click-bar-header.sentis-extra-color-one {
    color: var(--sentis-extra-color-one-dk);
}

/*extra color two*/
.click-bar-cell.sentis-extra-color-two {
    background-color: var(--sentis-extra-color-two-xl);
}

.click-bar-cell.sentis-extra-color-two:hover {
    background-color: var(--sentis-extra-color-two-lt);
}

.click-bar-cell.sentis-extra-color-two.selected {
    background-color: var(--sentis-extra-color-two-md);
}

.click-bar-header.sentis-extra-color-two {
    color: var(--sentis-extra-color-two-dk);
}
/*END OF NEW CLICK BAR CELL COLOURS*/

/*BOLD COLOURS*/
/*default colour*/
.bold-colour.click-bar-cell {
    background-color: white;
    border: 1px solid #cccccc;
}

.bold-colour.click-bar-cell:hover {
    background-color: var(--sentis-default-xl);
    /*cursor: pointer;*/
}

.bold-colour.click-bar-cell.selected {
    background-color: var(--sentis-default-md);
    border: 1px solid var(--sentis-default-md);
    /*cursor: pointer;*/
}

/*grey*/
.bold-colour.click-bar-cell.sentis-grey:hover {
    background-color: var(--sentis-grey-xl);
}

.bold-colour.click-bar-cell.sentis-grey.selected {
    background-color: var(--sentis-grey-md);
    border: 1px solid var(--sentis-grey-md);
}

/*yellow*/
.bold-colour.click-bar-cell.sentis-yellow:hover {
    background-color: var(--sentis-yellow-xl);
}

.bold-colour.click-bar-cell.sentis-yellow.selected {
    background-color: var(--sentis-yellow-md);
    border: 1px solid var(--sentis-yellow-md);
}

/*orange*/
.bold-colour.click-bar-cell.sentis-orange:hover {
    background-color: var(--sentis-orange-xl);
}

.bold-colour.click-bar-cell.sentis-orange.selected {
    background-color: var(--sentis-orange-md);
    border: 1px solid var(--sentis-orange-md);
}

/*red*/
.bold-colour.click-bar-cell.sentis-red:hover {
    background-color: var(--sentis-red-xl);
}

.bold-colour.click-bar-cell.sentis-red.selected {
    background-color: var(--sentis-red-md);
    border: 1px solid var(--sentis-red-md);
}

/*pink*/
.bold-colour.click-bar-cell.sentis-pink:hover {
    background-color: var(--sentis-pink-xl);
}

.bold-colour.click-bar-cell.sentis-pink.selected {
    background-color: var(--sentis-pink-md);
    border: 1px solid var(--sentis-pink-md);
}

/*green*/
.bold-colour.click-bar-cell.sentis-green:hover {
    background-color: var(--sentis-green-xl);
}

.bold-colour.click-bar-cell.sentis-green.selected {
    background-color: var(--sentis-green-md);
    border: 1px solid var(--sentis-green-md);
}

/*dark green*/
.bold-colour.click-bar-cell.sentis-dark-green:hover {
    background-color: var(--sentis-dark-green-xl);
}

.bold-colour.click-bar-cell.sentis-dark-green.selected {
    background-color: var(--sentis-dark-green-md);
    border: 1px solid var(--sentis-dark-green-md);
}

/*blue*/
.bold-colour.click-bar-cell.sentis-blue:hover {
    background-color: var(--sentis-blue-xl);
}

.bold-colour.click-bar-cell.sentis-blue.selected {
    background-color: var(--sentis-blue-md);
    border: 1px solid var(--sentis-blue-md);
}

/*teal*/
.bold-colour.click-bar-cell.sentis-teal:hover {
    background-color: var(--sentis-teal-xl);
}

.bold-colour.click-bar-cell.sentis-teal.selected {
    background-color: var(--sentis-teal-md);
    border: 1px solid var(--sentis-teal-md);
}

/*purple*/
.bold-colour.click-bar-cell.sentis-purple:hover {
    background-color: var(--sentis-purple-xl);
}

.bold-colour.click-bar-cell.sentis-purple.selected {
    background-color: var(--sentis-purple-md);
    border: 1px solid var(--sentis-purple-md);
}

/*POSITIONING TEXT WITHIN CLICK BAR CELL*/
.click-bar-question.flex .click-bar-cell {

}

.bar-cell-wrapper {
    width: 100%;
    justify-content: space-between;
}

.bar-cell-top {

}

.bar-cell-middle {
    margin-top: 15px;
}

.bar-cell-bottom {
    align-self: flex-end;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    color: darkgrey;
    font-style: italic;
    font-size: 90%;
}

.click-bar-cell.selected .bar-cell-bottom {
    color: inherit;
    font-style: italic;
}
/*END OF POSITIONING TEXT WITHIN CLICK BAR CELL*/



/*STYLING TO BE USED WITH 'CSS CLASSES' IN LIME*/
.taller-click-cells.click-bar-question .click-bar-cell {
    padding: 25px 5px;
}

.dashed-border.click-bar-question .click-bar-cell {
    border: 1px dashed lightgrey !important;
}

/*ERRORS*/
/*error flag for unanswered rows*/
.click-bar-row .bar-cell.sentis-error:before {
    font-family: FontAwesome;
    content: "\f054";
    color: var(--sentis-error-message-color);
    position: absolute;
    left: 75px;
    font-size: 18px;
}

body.sentis_portrait .click-bar-row .bar-cell.sentis-error:before {
    left: 3px;
}

.click-bar-row .bar-cell.sentis-error.wobble:before {
    -webkit-animation: wobble 1.5s both;
    animation: wobble 1.5s both;
}

@media screen and (max-width: 500px) {
    .click-bar-row .bar-cell.sentis-error:before {
        display: inline-block;
        position: absolute;
        left: 3px;
    }
}

@media screen and (min-width: 501px) and (max-width: 991px) {
    .click-bar-row .bar-cell.sentis-error:before {
        left: 15px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .click-bar-row .bar-cell.sentis-error:before {
        left: 30px;
    }
}

/*END OF ERRORS*/

/* LANDSCAPE STYLING */
.sentis_landscape .click-bar-header:first-child {
    padding-right: 20px;
}