// old_template_core START

/* no form-group on radio-item and checkbox-item */
li.radio-item {
    margin-bottom : 1em
}

/* awesome-bootstrap-checkbox */
li.radio-item {
    display : block
}

/* map item : .input-group-addon.checkbox-item : put awesome padding */
.input-group-addon.radio-item {
    padding-left : 25px;
}

.radio-item {
    position : relative;
}

.radio-item input[type="radio"] {
    /*give near same position to real button (except in td : can fix but not needed )*/
    display  : inline-block;
    height   : 17px;
    position : absolute;
    width    : 17px;
}

.radio-item input[type="radio"] {
    left : 0;
}

.radio-item input[type="radio"] {
    opacity : 0;
}

.radio-item .ls-label-xs-visibility {
    display     : inline-block;
    position    : relative;
    overflow    : hidden;
    width       : 20px;
    height      : 20px;
    line-height : 21px;
    text-indent : 21px;
}

/* no margin on label : no margin after and before too */
.radio-item label.ls-label-xs-visibility::before {
    margin-left : 0;
}

.radio-item label.ls-label-xs-visibility::after {
    margin-left  : 2px;
    padding-left : 0;
}

/* Hide the other content inside visually-hidden */
.radio-item label.ls-label-xs-visibility > * {
    position : absolute;
    top      : auto;
    width    : 1px;
    height   : 1px;
    overflow : hidden;
}

.radio-item label.ls-label-xs-visibility > * {
    left : -10000px;
}

.ls-answers td.radio-item {
    padding : 4px;
}

table.ls-answers .radio-item .ls-label-xs-visibility {
    margin-left : 0;
}

/* Fix for IE11 - no array question radio buttons on small screens */
@media all and (max-width : 760px) and (-ms-high-contrast : none), (-ms-high-contrast : active) {
    table.ls-answers .radio-item label.ls-label-xs-visibility::before {
        margin-left : 0px;
    }
    table.ls-answers .radio-item label.ls-label-xs-visibility::after {
        margin-left : 0px;
    }
}
// old_template_core END

// awesome-bootstrap-checkbox START
.radio-item, .radio-text-item {
    padding-left: 20px;
}
.radio-item label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 8px;
}
.radio-item label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 19px;
    height: 19px;
    left: 0;
    top:0;
    margin-left: -20px;
    border-radius: 50%;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}
.radio-item label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 9px;
    height: 9px;
    left: 3px;
    top: 3px;
    margin-left: -18px;
    margin-top: 2px;
    border-radius: 50%;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.radio-item input[type="radio"] {
    opacity: 0;
    z-index: 1;
    top:0;
}
.radio-item input[type="radio"]:focus + label::before {
    outline: none;
}
.radio-item input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}
.radio-item input[type="radio"]:disabled + label {
    opacity: 0.65;
}
.radio-item input[type="radio"]:disabled + label::before {
    cursor: not-allowed;
}
.radio-item.radio-inline {
    margin-top: 0;
}
// awesome-bootstrap-checkbox END

/*
Max width before this PARTICULAR table gets nasty
For iPads specifically : add this : (min-device-width: 768px) and (max-device-width: 1024px)
*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

    .ls-answers td.radio-item {
        padding: 4px;
    }

    .ls-answers td.radio-item {
        padding-left: 24px;
        padding-right: 4px;
    }

    table.ls-answers .radio-item .ls-label-xs-visibility {
        line-height: initial;
        text-indent: initial;
    }

    table.ls-answers .radio-item .ls-label-xs-visibility {
        margin-left: 0;
    }

    table.ls-answers .radio-item label.ls-label-xs-visibility::before {
        margin-left: -20px;
    }

    table.ls-answers .radio-item label.ls-label-xs-visibility::after {
        margin-left: -18px !important;
    }
}

@media only screen and (max-width : 760px), (min-device-width : 768px) and (max-device-width : 1024px) {
    .radio-item label.ls-label-xs-visibility > * {
        left : auto;
    }
}