.image-editor
{
    position: relative;

    height: 100%;
    /*overflow: hidden;*/
}

.ie .image-editor .panel-body {
    padding: 0;
}

.cropit-preview
{
    width: 100%;
    height: 400px;
    margin-top: 7px;

    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f8f8f8;
    background-size: cover;
}

.cropit-preview-image-container
{
    cursor: move;
}

.image-size-label
{
    margin-top: 10px;
}

input,
.export
{
    display: block;
}

/* button
{
    margin-top: 10px;
} */

.cropit-preview-background
{
    opacity: .2;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
        filter: alpha(opacity=20);
}

/* Hide file input */
input.cropit-image-input
{
    visibility: hidden;
}

/*
 * See http://www.htmllion.com/html5-range-input-with-css.html
 * for styling range input
 */

input[type='range']
{
    width: 200px;

    -webkit-appearance: none ;
}
.ie input[type='range'] {
    padding: 0;
}

input[type='range']::-webkit-slider-runnable-track
{
    height: 8px;

    cursor: pointer;
    vertical-align: middle;

    border: none;
    border-radius: 5px;
    background-color: #ccc;
    box-shadow: inset 1px 1px 1px rgba(000,000,000,.10);

    -webkit-appearance: none ;
            appearance: none ;
}
input[type='range']::-webkit-slider-thumb
{
    width: 22px;
    height: 22px;
    margin-top: -6px;

    cursor: pointer;
    vertical-align: middle;

    border: none;
    border-radius: 100%;
    background-color: #037cd5;
    box-shadow: inset 0 0 0 4px #ccc, inset 0 0 4px #ccc, inset 0 0 0 4px #ccc;

    -webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb:hover
{
    background: #fdd921;
}
input[type='range']:active::-webkit-slider-thumb
{
    background: #fdd921;
}
input[type='range']::-moz-range-track
{
    height: 8px;
    margin: 0;
    padding: 0;

    cursor: pointer;
    vertical-align: middle;

    border: none;
    border-radius: 5px;
    background-color: #ccc;
    box-shadow: inset 1px 1px 1px rgba(000,000,000,.10);

    -moz-appearance: none ;
}
input[type='range']::-moz-range-thumb
{
    width: 22px;
    height: 22px;
    margin-top: -6px;

    cursor: pointer;
    vertical-align: middle;

    border: none;
    border-radius: 100%;
    background-color: #037cd5;
    box-shadow: inset 0 0 0 4px #ccc, inset 0 0 4px #ccc, inset 0 0 0 4px #ccc;

    -moz-appearance: none ;
}
input[type='range']::-moz-range-thumb:hover
{
    background: #fdd921;
}
input[type='range']:active::-moz-range-thumb
{
    background: #fdd921;
}
input[type=range]::-ms-track
{
    width: 100%;
    height: 8px;

    cursor: pointer;

    color: transparent;
    border-width: 39px 0;
    border-color: transparent;
    background: transparent;

    animate: .2s;
}
input[type=range]::-ms-fill-lower
{
    border: 0 solid #000101;
    border-radius: 50px;
    background: #ccc;
    box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
}
input[type=range]::-ms-fill-upper
{
    border: 0 solid #000101;
    border-radius: 50px;
    background: #ccc;
    box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
}
input[type=range]::-ms-thumb
{
    width: 22px;
    height: 22px;
    margin-top: -2px;

    cursor: pointer;

    border: 0 solid #000;
    border-radius: 100%;
    background: #037cd5;
    box-shadow: inset 0 0 0 4px #ccc, inset 0 0 4px #ccc, inset 0 0 0 4px #ccc;
}