/******************************************/
/* Survey elements (to be moved into separate module) */
/******************************************/

table.assessment-table {
    display: table;
    width: 100%;
    table-layout: auto;
}

table.assessment-table .assessment-table-cell {
    display: table-cell;
    vertical-align: middle;
}

table.assessment-table td.assessment-table-cell .form-control {
    margin-bottom: 0px;
}

.assessment-horizontally-centered {
    margin-left: auto;
    margin-right: auto;
}

.assessment-wrap {
    white-space: normal;
}

.assessment-tab {
    overflow-y: scroll;
    overflow-x: visible;
    max-height: 500px;
}

.btn.assessment-button {
    margin-bottom: -1px;
    padding: 8px;
    display: block;
    white-space: normal;
    height: auto;
}

/* This class still needs work. Ideally the height should adjust according to the content so that the wrapping works
   as expected. Setting "height: auto" does not cause the height of the select box to auto-adjust to the wrapped content. */
.assessment-single-select {
    height: auto;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
}

.assessment-validation {
    overflow-x: visible;
    overflow-wrap: break-word;
    margin-top: 0px;
    margin-bottom: 0px;
}

.assessment-flex {
    display: flex;
}

.assessment-block {
    display: block;
}

/* Begin: Progressive enhancement for Multi-Select Dropdowns */
.ui-select-multiple.assessment-multi-select {
    display: block;
    padding-bottom: 1px;
}

@supports ((display: flex) OR (display: -webkit-flex)) {
    .ui-select-multiple.assessment-multi-select {
        display: flex;
        flex-wrap: wrap;

        display: -webkit-flex;
        -webkit-flex-wrap: wrap;

        padding-bottom: 0px;
    }
}
/* End: Progressive enhancement for Multi-Select Dropdowns */


/* Begin: Animations for Branching-Logic */
.assessment-fade.ng-enter, .assessment-fade.ng-leave {
    transition: 750ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity;
}

.assessment-fade.ng-enter,
.assessment-fade.ng-leave.ng-leave-active {
    opacity:0;
}

.assessment-fade.ng-leave,
.assessment-fade.ng-enter.ng-enter-active {
    opacity:1;
}
/* End: Animations for Branching-Logic */