@import url("../styles.css");

.upload {

}
.upload.content {
    display: flex;
    flex-direction: column;
}

.upload .description {
    text-align: center;
}

.upload .drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 2px dashed var(--primary-color);
    height: 300px;
}

.upload .drop-zone .file-status {
   text-align: center;
}

.upload .drop-zone .icon i {
    font-size: var(--icon-size-x-large);
    color: var(--primary-color);
}

.upload .drop-zone .file-status.upload-success .icon i {
    color: var(--green-color);
}

.upload .drop-zone .file-status.upload-error .icon i {
    color: var(--red-color);
}

.upload .drop-zone .text .main-text {
    font-size: var(--font-size-large);
}

.upload .drop-zone .file-status .action{
    padding-top: var(--button-to-text-padding);
}

.upload #pin {
    width: 120px;
    display: inline-block;
    margin-left: 10px;
}

.upload-error-toast, .upload-error-toast .toast-header {
    background-color: var(--red-90-color);
    color: var(--white-color) !important;
}

.upload-error-toast .toast-header {
    border-bottom-color: var(--white-color);
}

.upload-error-toast .toast-header i {
    padding-right: 10px;
}

/*Breakpoints*/
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (max-width: 767px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media (max-width: 991px) {
    .upload .drop-zone .icon i {
        font-size: var(--icon-size-large);
    }

    .upload .drop-zone .text .main-text {
        font-size: var(--font-size-medium);
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media (max-width: 1199px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media (min-width: 1200px) {
    
}