body {
    width: 80%;
    margin: auto;
    background-color: black;
    color: white;
}

#id_image {
    border: 0;
}

.l-model {
}

.highlight-t {
    border: 1px solid red;
}

#previewHolder, #responseImg, .respImg {

    margin: auto;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 400px;
    min-height: 100px;
    min-width: 50px;
    border-radius: 6px;
}

.respImg {
    max-width: 800px !important;
    max-height: 1600px !important;
}

.mg-t {
    margin-top: 20px;
    text-align: center;
}

.mg-1 {
    margin-top: 5px;
    text-align: center;
}

.crop {
    margin: auto auto 10px;

}

.code-block {
    font-weight: 100;
    width: 70%;
    margin: auto;
    background-color: hsl(0, 0%, 96.5%);
    color: indianred;
    border-radius: 5px;
}

.r3 {
    visibility: hidden;
    border-radius: 10px;
}

.r4 {
    visibility: hidden;
}

.r5 {
    visibility: hidden;
}

.s-row {
    height: 10px;
    width: 95%;
    margin: auto;
    border-radius: 5px;
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;

}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    letter-spacing: .2rem;
    text-align: center;
}

::-moz-placeholder { /* Firefox 19+ */
    letter-spacing: .2rem;
    text-align: center;
}


input[type=text] {
    padding: 5px 12px;
    margin: 4px 0;
    box-sizing: border-box;
    letter-spacing: 2px;
    background-color: #d8dada;
    border: 0;
    border-bottom: 1px solid black;

}

.model-name {
    border-radius: 5px;
    box-shadow: inset 0 0 2px 2px #6cc406;
}

label {
    font-weight: 800;
    letter-spacing: .1rem;
    text-align: center;
}

input:focus {
    outline: none;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 95%);

        width: 100%;
    }
    25% {
        background-color: hsl(204, 66%, 76%);
        width: 90%;

    }
    50% {
        background-color: hsl(204, 65%, 65%);
        width: 80%;

    }
    75% {
        background-color: hsl(200, 20%, 70%);
        width: 90%;

    }
    100% {
        background-color: hsl(200, 20%, 95%);
        width: 100%;

    }
}

.wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    width: 140px;
    height: 45px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: white;
    background-color: #6cc406;
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 3px #3a9370;
    transition: all 0.2s ease 0s;
    outline: none;
}

.button:hover {
    background-color: #3a9370;
    /* box-shadow: 0 7px 10px #6cc406; */
    color: #fff;
    transform: translateX(-1px);
    outline: none;
    border: 0;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 2;
    border: 0;
}

input:focus {
    outline: none;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.skeleton_2 {

}

@media all and (max-device-width: 900px) {
    button {
        width: 100px !important;
        height: 30px !important;
        border-radius: 5px !important;;

    }

    #previewHolder, #responseImg, .respImg {

        margin: auto;
        /* width: 90% !important; */
        height: auto;
        border-radius: 6px;
    }


    .skeleton_2 {
        /*animation: none;*/
    }


}