@-moz-keyframes spin_putar { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin_putar { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin_putar { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.animasi-putar {
    -webkit-animation:spin_putar 4s linear infinite;
    -moz-animation:spin_putar 4s linear infinite;
    animation:spin_putar 4s linear infinite;
}
input.form-control.is-invalid, 
textarea.form-control.is-invalid,
.select2-selection--single.is-invalid,
.select2-selection--multiple.is-invalid,
.form-group.is-invalid > span > span > span,
div.is-invalid > select + span > span > span {
    border-color: #f62d51 !important;
}
.form-group.is-invalid > label {
    color: #f62d51;
}
body {
    height: auto;
}
body > .container {
    padding-top: 90px;
    padding-bottom: 90px;
}
.toggle-pass {
    cursor: pointer;
}
label[for=ktp-input] {
    float: right;
}
#batal-ktp {
    float: right;
    margin-right: 10px;
}
.box.kotak {
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    border-radius: 10px;
}
.box.kotak > .box-header {
    display: unset;
    text-align: center;
}
.box.kotak > .box-footer {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.cropper,
.cropper-toolbar {
    margin-bottom: 30px;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
    margin-left: 0; 
}
.cropper-preview {
    overflow: hidden; 
}
.img-preview {
    float: left;
    margin: 0 10px 10px 0;
    overflow: hidden;
}
.img-preview > img {
    max-width: 100%;
}
.preview-lg {
    width: 263px;
    height: 148px;
}
.preview-md {
    width: 139px;
    height: 78px;
}
.preview-sm {
    width: 69px;
    height: 39px;
}
.preview-xs {
    width: 35px;
    height: 20px;
    margin-right: 0;
}
.col-cropper_crop,
.col-cropper_preview,
.col-kiri_form,
.col-kanan_form {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    min-height: 1px;
    position: relative;
}
@media (max-width: 600px) {
    label[for=ktp-input] {
        display: block;
        width: 100%;
        float: unset;
        margin-top: 25px;
    }
    #batal-ktp {
        float: unset;
        display: block;
        width: 100%;
    }
}
@media (max-width: 730px) {
    .box.kotak {
        width: unset;
        max-width: 100%;
        border-radius: unset;
        margin-left: unset;
        margin-right: unset;
    }
    .box.kotak .box:nth-child(3) > .box-footer {
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
    }
}
@media (max-width: 1100px) {
    .box.kotak {
        width: 700px;
    }
}
@media (min-width: 1100px) {
    .col-cropper_crop {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-cropper_preview {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-kiri_form, .col-kanan_form {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 1200px) {
    .cropper {
        max-height: 600px;
    }
}
@media (min-width: 768px) {
    .cropper {
        max-height: 400px;
    }
}
@media (max-width: 767.98px) {
    .cropper {
        max-height: 300px;
    }
}
@media (max-width: 479.98px) {
    .cropper {
        max-height: 246px;
    }
}
@media (max-width: 586px) {
    .btn-group .btn {
        padding: 6px 8px;
    }
    .cropper {
        max-height: 246px;
    }
}
@media (min-width: 288px){
    label[for=tt1-input] {
        margin-right: 20px;
    }
}
@media (min-width: 318px){
    label[for=jk1-input] {
        margin-right: 20px;
    }
}