#upload-card {
    /* max-width: 900px; */
    width: 100%;
    border: 3px dashed #C8E176;
    background-color: #f8f8eb;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    margin: auto;
}

/* icon */
.material-icons {
    font-size: 40px;
    color: #333;
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}



/* button */
#btn-upload {
    width: 100% !important;
    padding: 12px;
}

/* text below the button */
.instructions {
    color: #666;
}

/* upload method */
.bttn {
    border-color: #C8E176;
    color: #000000;

}

.bttn.active {
    background-color: #C8E176;
    border-color: #C8E176;
    color: #000000;
}

.bttn.active:hover,
.bttn:hover {
    background-color: #96b336;
    border-color: #96b336;
    color: #ffff;
}

.detect {
    color: #627f03;
    background-color: #F3FFCB;
    padding: 4px 12px 5px 12px;
    border-radius: 100px;
}

.detect .material-symbols-sharp {
    font-size: 17px;
    vertical-align: middle
}