.drive-browser {
    border:
        1px solid #e4e4e4;

    border-radius:
        13px;

    overflow:
        hidden;

    background:
        #fafafa;
}


/* HEADER */

.drive-topbar {
    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        10px 12px;

    background:
        white;

    border-bottom:
        1px solid #e8e8e8;
}


.drive-breadcrumb {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        4px;
}


.drive-breadcrumb button {
    border:
        none;

    background:
        transparent;

    color:
        #b90000;

    font-size: calc(11px * var(--text-scale, 1));

    font-weight:
        700;

    padding:
        3px;
}


.drive-breadcrumb span {
    color:
        #aaa;

    font-size: calc(12px * var(--text-scale, 1));
}


.drive-small-button {
    border:
        1px solid #ddd;

    background:
        white;

    padding:
        7px 10px;

    border-radius:
        8px;

    font-size: calc(11px * var(--text-scale, 1));

    font-weight:
        700;

    white-space:
        nowrap;
}


/* YENİ KLASÖR */

.drive-new-folder {
    display:
        flex;

    gap:
        7px;

    padding:
        10px;

    border-bottom:
        1px solid #e5e5e5;

    background:
        #fff;
}


.drive-new-folder input {
    flex:
        1;

    min-width:
        0;

    padding:
        9px;

    border:
        1px solid #ddd;

    border-radius:
        8px;
}


.drive-new-folder button {
    border:
        none;

    padding:
        8px 10px;

    border-radius:
        8px;

    font-size: calc(11px * var(--text-scale, 1));

    font-weight:
        700;
}


#saveFolderButton {
    background:
        #c50000;

    color:
        white;
}


/* ITEMS */

.drive-items {
    max-height:
        280px;

    overflow-y:
        auto;

    background:
        white;
}


.drive-item {
    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        1px solid #f0f0f0;
}


.drive-item:last-child {
    border-bottom:
        none;
}


.drive-item-main {
    flex:
        1;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        12px;

    border:
        none;

    background:
        transparent;

    text-align:
        left;
}


.drive-folder
.drive-item-main {
    cursor:
        pointer;
}


.drive-folder
.drive-item-main:hover {
    background:
        #f8f8f8;
}


.drive-icon {
    font-size: calc(20px * var(--text-scale, 1));
}


.drive-item-name {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size: calc(12px * var(--text-scale, 1));

    color:
        #333;
}


.drive-delete {
    margin-right:
        10px;

    border:
        none;

    background:
        #fff0f0;

    color:
        #b40000;

    padding:
        6px 8px;

    border-radius:
        7px;

    font-size: calc(10px * var(--text-scale, 1));

    font-weight:
        700;
}


/* UPLOAD */

.drive-upload-box {
    padding:
        13px;

    border-top:
        1px solid #e5e5e5;

    background:
        #fff;
}


.drive-upload-box input[type="file"] {
    width:
        100%;

    margin-bottom:
        10px;

    font-size: calc(11px * var(--text-scale, 1));
}


.drive-upload-box
.primary-button {
    width:
        100%;
}


.upload-progress {
    width:
        100%;

    height:
        7px;

    overflow:
        hidden;

    margin-top:
        10px;

    border-radius:
        50px;

    background:
        #ececec;
}


.upload-progress-bar {
    width:
        0;

    height:
        100%;

    background:
        #c50000;

    transition:
        width 0.1s;
}


.upload-progress-text {
    margin-top:
        9px;

    color:
        #666;

    font-size: calc(10px * var(--text-scale, 1));
}


.uploaded-files-info {
    padding:
        0 13px 13px;

    background:
        white;

    color:
        #187d40;

    font-size: calc(11px * var(--text-scale, 1));
}


.uploaded-files-info strong {
    display:
        block;

    margin-bottom:
        5px;
}


.drive-empty,
.drive-error {
    padding:
        30px 15px;

    text-align:
        center;

    color:
        #888;

    font-size: calc(11px * var(--text-scale, 1));
}


.drive-error {
    color:
        #b40000;
}


/* COMPLETION */

.completion-warning {
    padding:
        11px;

    margin-bottom:
        17px;

    border-radius:
        9px;

    background:
        #fff8e4;

    color:
        #795d10;

    font-size: calc(11px * var(--text-scale, 1));

    line-height:
        1.5;
}


.completion-state {
    margin-top:
        12px;

    padding:
        10px;

    border-radius:
        8px;

    background:
        #f5f5f5;

    color:
        #777;

    font-size: calc(11px * var(--text-scale, 1));
}


.completion-state.ready {
    background:
        #eaffeF;

    color:
        #14753a;

    font-weight:
        700;
}


#finishTaskButton:disabled {
    opacity:
        0.4;

    cursor:
        not-allowed;
}


.my-task-label.submitted {
    background:
        #eafff0;

    color:
        #167b3d;
}


@media (
    max-width: 500px
) {

    .drive-new-folder {
        flex-wrap:
            wrap;
    }


    .drive-new-folder input {
        width:
            100%;

        flex-basis:
            100%;
    }

}