/********************************** File Upload **********************************/

.clearfix:after {
    display: block;
    clear: both;
    content: "";
}

input[type="file"] {
    display: block;
}

button, input {
    outline: none !important;
}

button, input {
    overflow: visible;
}

.remove {
    display: block;
    padding: .6rem;
    background: #fe195e;
    color: white;
    text-align: center;
    cursor: pointer;
}

.remove:hover {
    background: white;
    color: black;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #d2d1d5;
    opacity: 0.8;
    text-shadow: 0 1px 0 #fff;
    text-align: right;
    cursor: pointer;
}

.close:hover, .close:focus {
    color: #000;
}

/* HIDE RADIO */
.file-input [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
.file-input [type=radio] + img {
    cursor: pointer;
    margin: 10px;
}

/* CHECKED STYLES */
.file-input [type=radio]:checked + img {
    outline: 2px solid #0f0;
}

.file-input {
    overflow-x: auto;
}

.file-loading {
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    font-size: 999px;
    text-align: right;
    color: #FFF;
    background: transparent url('loading.gif') top left no-repeat;
    border: none;
}

.btn-file {
    position: relative;
    overflow: hidden;
    border-radius: 0 4px 4px 0 !important;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    opacity: 0;
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
}

.file-caption .glyphicon {
    display: inline-block;
    min-width: 18px;
    float: left;
    margin-top: 2px;
}

.file-caption-name {
    display: inline-block;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 85%;
}

.file-error-message {
    background-color: #F2DEDE;
    color: #A94442;
    text-align: center;
    padding: 5px;
}

.file-caption-disabled {
    background-color: #EEEEEE;
    cursor: not-allowed;
    opacity: 1;
}

.initial-preview-image {
    display: none;
}

.file-input .btn[disabled],
.file-input .btn .disabled {
    cursor: not-allowed;
}

.file-preview {
    border: 1px solid #DDD;
    padding: 5px;
    width: 100%;
    margin-bottom: 5px;
}

.file-preview-thumbnail {
    margin-top: 2rem;
}

.file-preview-frame {
    display: table;
    margin: 8px;
    height: 160px;
    border: 1px solid #DDD;
    box-shadow: 1px 1px 5px 0 #A2958A;
    padding: 6px;
    float: left;
    text-align: center;
}

.file-preview-frame.deleted {
    display: none;
}

.file-preview-frame:hover {
    background-color: #EEE;
    box-shadow: 2px 2px 5px 0 #333;
}

.file-preview-image {
    height: 160px;
    vertical-align: text-center;
}

.file-preview-text {
    display: table-cell;
    width: 160px;
    height: 160px;
    color: #428BCA;
    font-size: 11px;
    vertical-align: middle;
    text-align: center;
}

.file-preview-other {
    display: table-cell;
    width: 160px;
    height: 160px;
    font-family: Monaco, Consolas, monospace;
    font-size: 11px;
    vertical-align: middle;
    text-align: center;
}

.file-input-new .file-preview,
.file-input-new .close,
.file-input-new .glyphicon-file,
.file-input-new .fileinput-remove-button,
.file-input-new .fileinput-upload-button {
    display: none;
}

.loading {
    background: transparent url('loading.gif') no-repeat scroll center center content-box !important;
}

.close i {
    pointer-events: none;
}

.has-error .btn-file { background: #A94442; border-color: #843534; }

span.file-input {
    display: block;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control,
.input-group > .custom-select,
.input-group > .custom-file {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.input-group .input-group-btn .btn {
    padding: 0.9rem 1.07rem;
    border-radius: 0;
    font-weight: 500;
}

.form-control {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    color: #2c304d;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1rem;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-group .input-group-btn .btn i {
    font-size: 1.4rem;
    margin-right: 1rem;
}

.btn {
    display: inline-block;
    font-weight: 600 !important;
    line-height: 1.25;
    border: 2px solid transparent;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #5d5386;
    border-color: #5d5386;
}

.btn-danger {
    color: #fff;
    background-color: #fe195e;
}

/********************************** Table **********************************/
.table-v-image {
    max-width: 90px;
}

.table-h-image {
    max-width: 150px;
}

.sortable {
    cursor: grab;
}

.flex-right {
    margin-left: auto;
}

.file-preview-image {
    max-width: 100%;
}


.checkbox input[type='checkbox'] {
    height: 0;
    width: 0;
}

.checkbox input[type='checkbox'] + label {
    position: relative;
    display: flex;
    margin: .6em 0;
    align-items: center;
    color: #9e9e9e;
    transition: color 250ms cubic-bezier(.4, .0, .23, 1);
}

.checkbox input[type='checkbox'] + label > ins {
    position: absolute;
    display: block;
    bottom: 0;
    left: 2em;
    height: 0;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: height 300ms cubic-bezier(.4, .0, .23, 1);
}

.checkbox input[type='checkbox'] + label > ins > i {
    position: absolute;
    bottom: 0;
    font-style: normal;
    color: #4FC3F7;
}

.checkbox input[type='checkbox'] + label > span {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1em;
    width: 1.2em;
    height: 1.2em;
    background: transparent;
    border: 2px solid #9E9E9E;
    border-radius: 2px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(.4, .0, .23, 1);
}

.checkbox input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label {
    color: #fff;
}

.checkbox input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span {
    background: rgba(255, 255, 255, .1);
}

.checkbox input[type='checkbox']:checked + label > ins {
    height: 100%;
}

.checkbox input[type='checkbox']:checked + label > span {
    border: .6em solid #09ad7e;
    animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);
}

.checkbox input[type='checkbox']:checked + label > span:before {
    content: "";
    position: absolute;
    top: .6em;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg);
    transform-origin: 0 100%;
    animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;
}

@keyframes checkbox-check {
    0% {
        width: 0;
        height: 0;
        border-color: #212121;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    33% {
        width: .3em;
        height: 0;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    100% {
        width: .7em;
        height: 1.2em;
        border-color: #01f;
        transform: translate3d(0, -1.2em, 0) rotate(45deg);
    }
}

/********************************** TABS **********************************/
.tab-content {
    width: 100%;
    align-self: flex-start;
}

.tab-content > .tab-pane {
    width: 100%;
}

.nav-tabs > li > a::after {
    z-index: 10;
}

.tab-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.tab-flex > i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tab-title {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
    min-width: 200px;
}

.nav-left.nav-tabs {
    border-right: 0.07rem solid #EEE;
}

.m-active {
    color: #F84271;
}

.m-inactive {
    color: #F8F7FA;
}