div.ccm-block-type-form div.form-group {
    margin-bottom: 10px;
}

div.ccm-block-type-form div.form-group .grecaptcha-checkbox > div,
div.ccm-block-type-form div.form-group .grecaptcha-invisible > div {
    margin: 0 0 0 auto;
}

div.ccm-block-type-form div.form-group label.control-label {
    font-weight: bold;
    display: block;
}

div.ccm-block-type-form div.form-group legend.control-legend {
    font-weight: bold;
    display: block;
    margin-bottom:5px;
    font-size:1.6rem;
    border: 0;
}

div.ccm-block-type-form div.form-group span.text-required {
    font-weight: normal;
}

div.ccm-block-type-form .form-actions {
    overflow: hidden;
}

.ccm-block-type-form .form-actions .loader {
    display: none;
    padding: 8px 12px;
}

.ccm-block-type-form .ranker
{
    /*
     * This may not be a good enough same height column solution,
     * may have to resort to alternative css or even a js solution
     * if we are concerned about older browsers...
     */
    display: flex;
}
.ccm-block-type-form .ranker .ranked-list {
    position: relative;
    background-color: #f9f9f9;
}
.ccm-block-type-form .ranker .rankables-list {
    border: 2px solid #CCCCCC;
    margin-right: 8px;
}
.ccm-block-type-form .ranker.touch {
    margin: 0;
}
.ccm-block-type-form .ranker.touch .rankables-list {
    margin: 0;
    padding: 0;
    border: 0;
}
.ccm-block-type-form .ranker.touch .rankables-list .well {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
.ccm-block-type-form .ranker .well .rank,
.ccm-block-type-form .ranker .well .check {
    display: none;
}
.ccm-block-type-form .ranker.touch .rankables-list .well .check {
    display: block;
    position: absolute;
    padding: 13px;
}
.ccm-block-type-form .ranker.touch .rankables-list .well .check .fa:first-child {
    display: block;
}
.ccm-block-type-form .ranker.touch .rankables-list .well .check .fa:last-child {
    display: none;
}
.ccm-block-type-form .ranker.touch .rankables-list .well .name {
    display: inline-block;
    flex-grow: 1;
    border: 2px solid #ddd;
    padding: 10px 10px 10px 30px;
    margin-right: 5px;
}
.ccm-block-type-form .ranker.touch .rankables-list .well .rank {
    display: flex;
    justify-content: center;
    padding: 10px;
    border: 2px solid #ddd;
    font-weight: bold;
    min-width: 64px;
    color: #ccc;
}
.ccm-block-type-form .ranker.touch .rankables-list .well .name,
.ccm-block-type-form .ranker.touch .rankables-list .well .rank {
    border-radius: 4px;
}
.ccm-block-type-form .ranker.touch .rankables-list .ranked .well .check .fa:first-child {
    display: none;
}
.ccm-block-type-form .ranker.touch .rankables-list .ranked .well .check .fa:last-child {
    display: block;
}
.ccm-block-type-form .ranker.touch .rankables-list .ranked .well .name,
.ccm-block-type-form .ranker.touch .rankables-list .ranked .well .rank {
    background-color: green;
    border-color: green;
    color: white;
}


.ccm-block-type-form .ranker .slots {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px;
    width: 100%;
}
.ccm-block-type-form .ranker .slot {
    pointer-events: none;
    width: 100%;
}
.ccm-block-type-form .ranker .slot .well {
    /* border-style: dashed;
    background: none;
    font-size: 150%; */
    font-weight: 300;
    color: #656565;
}
.ccm-block-type-form .ranker .slot.min .well {
    border-color: #ccc;
}
.ccm-block-type-form .ranker .ranked-list.warning,
.ccm-block-type-form .ranker .rankables-list.warning {
    border-color: #eea236 !important;
}
.ccm-block-type-form .ranker .ranked-list.success,
.ccm-block-type-form .ranker .rankables-list.success {
    border-color: #4cae4c !important;
}
.ccm-block-type-form .ranker .ranked-list.error,
.ccm-block-type-form .ranker .rankables-list.error {
    border-color: red !important;
}

.ccm-block-type-form .ranker .well
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.ccm-block-type-form .ranked-list .rankable .well {
    background-color: #fff;
}

.ccm-block-type-form .ranker ol {
    list-style: none;
}

.ccm-block-type-form .ranker .ranked-list
{
    border: 2px dashed #CCCCCC;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ccm-block-type-form .ranker [aria-dropeffect="move"] {
    box-shadow: 0 0 3px #f7941e, 0 0 7px #f7941e;
}

.ccm-block-type-form .ranker .rankable
{
    position: relative;
    z-index: 1;
    cursor: move;
}
.ccm-block-type-form .miniSurveyView.disabled .ranker .rankable {
    cursor: not-allowed;
}

.ccm-block-type-form .ranker .rankable[aria-grabbed="true"] .well {
    background-color: #fff;
}
.ccm-block-type-form .ranker .rankable.ui-selected .well
{
    box-shadow: 0 0 3px #f7941e, 0 0 7px #f7941e;
}

/*
 * Most font awesome icons seem to work just fine but the thumb icons appear
 * to ever so slightly different widths and thus get out of alignment the more
 * steps we add to the rating question.
 */
.bootstrap-star-rating-theme-thumb .empty-stars .star
{
    margin: 0 4.2px
}

.rating-container .rating
{
    cursor: pointer;
}

.rating-container .rating:focus,
.rating-container .clear-rating:focus,
.rating-container .caption:focus
{
    box-shadow: 0 0 3px #f7941e, 0 0 7px #f7941e;
}

.rating-container .help-block
{
    font-size: 0.5em;
}

.rating-container .caption
{
    margin-top:0;
}

.field-likert .matrix-row-first {
    display: none;
}
.field-likert .matrix-row-header {
    font-weight: bold;
}
.field-likert .matrix-row.error legend {
    color: #B34646;
}
.field-likert.has-error > fieldset > legend {
    color: #B34646;
}
@media screen and (max-width: 767px) {
    .field-likert .matrix {
        margin-left: 1em;
    }
    .field-likert .matrix-col-input {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .field-likert .matrix-col-input + .matrix-col-input {
        margin-top: -5px;
    }
}

@media screen and (min-width: 768px) {
    .field-likert .matrix {
        margin-bottom: 1em;
        overflow-x: auto;
        background-image:
            linear-gradient(to right, white, white),
            linear-gradient(to right, white, white),
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.20), rgba(255,255,255,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.20), rgba(255,255,255,0));

        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;

        /* Opera doesn't support this in the shorthand */
        background-attachment: local, local, scroll, scroll;
    }
    .field-likert .matrix-row {
        display: flex;
        flex-flow: row nowrap;
    }
    .field-likert .matrix-row:not(.matrix-row-first):hover .matrix-col {
        background-color: #f2f2f2;
    }
    .field-likert .matrix-col {
        flex: 1;
        padding: 0.5em;
        min-width: 7em;
        border-bottom: 1px solid #ccc;
    }
    .field-likert .matrix-col-first {
        flex: 2;
        min-width: 10em;
    }
    .field-likert .matrix-col-input {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .field-likert .matrix-col input[type="radio"] + label::before {
        margin-right: 0;
        background: transparent; /* So that we don't interfere with overflow shadows */
    }
    .field-likert .matrix-col input[type="radio"] + label,
    .field-likert .matrix-col.matrix-row-header .control-legend {
        margin-bottom: 0;
    }
    .field-likert .matrix-col label span {
        display: none;
    }
    .field-likert .matrix-col:not(.matrix-row-header) {
        text-align: center;
    }
    .field-likert .matrix .matrix-row-header .control-legend {
        font-weight: normal;
    }
}

/* File upload styling */
div.ccm-block-type-form .field-fileupload input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

div.ccm-block-type-form label.form-file-button svg {
    fill: currentcolor;
    margin-right:8px;
}

/* should be on the core  */
div.ccm-block-type-form label.form-file-button {
    font-size: 1.25em;
    font-weight: 700;
    padding:10px 20px;
    color: #000;
    border:#000 solid 1px;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
}

div.ccm-block-type-form label.form-file-button:hover {
    color: #2A93CC;
    border:#2A93CC solid 1px;
}

div.ccm-block-type-form input.form-file:focus + label.form-file-button {
    color: #2A93CC;
    border:#2A93CC solid 1px;
}

/* disabled file upload */
div.ccm-block-type-form .field-fileupload input[type="file"]:disabled + label.form-file-button {
    background: #eee;
    color: #525252;
    border-color: #525252;
    cursor: not-allowed;
}


/* FastClick issue */
div.ccm-block-type-form label.form-file-button * {
    pointer-events: none;
}

/* this is to hide the honeypot so bots dont know */
.sweets {
    display: none;
    visibility: hidden;
}

.question-image {
    display: block;
    max-width: 100%;
    height: auto;
}
.question-image + .ranker {
    margin-top: 15px;
}