.download-main{
max-width:1200px;
width:90%;
margin:0 auto;
padding-top:5%;
display:flex;
gap:30px;
min-height:calc(100vh - 250px);
align-items:center;
justify-content:center;
color:var(--firstpag-color);
}

.left-panel{
width:300px;

display:flex;
flex-direction:column;
justify-content:center;

}

.right-panel{
flex:1;

display:flex;
flex-direction:column;
justify-content:center;

}


.info-card,
.login-card,
.download-card{
background:var(--download-color);

backdrop-filter:blur(12px);

border-radius:20px;

padding:25px;

color:var(--firstpag-color);

}

.info-card h1,
.info-card h2,
.info-card h3,
.info-card p,
.info-card span,

.login-card h1,
.login-card h2,
.login-card h3,
.login-card p,
.login-card span,

.download-card h1,
.download-card h2,
.download-card h3,
.download-card p,
.download-card span,

.file-item h1,
.file-item h2,
.file-item h3,
.file-item p,
.file-item span{
color:var(--firstpag-color);
}


.login-card form{
width:100%;
}

.login-input,
.login-btn{
width:100%;
height:45px;
box-sizing:border-box;
}

.login-input{
border-radius:8px;
padding:0 15px;
margin-top:15px;
outline:none;
}

.login-btn{
margin-top:15px;

border:none;

border-radius:8px;

cursor:pointer;

background:var(--main-color);

color:#fff !important;

}


.file-item{
padding:15px;

border-bottom:1px solid rgba(255,255,255,.2);

}

.download-btn,
.logout-btn{
padding:10px 20px;
background:var(--main-color);
color:#fff !important;
text-decoration:none;
border-radius:8px;
transition:.2s;
}

.download-btn,
.logout-btn,
.login-btn{
opacity:.85;
}


.download-card{
height:65vh;
display:flex;
flex-direction:column;
overflow:hidden;
}


.download-header{
flex-shrink:0;
padding-bottom:15px;
margin-bottom:15px;
border-bottom:1px solid rgba(255,255,255,.15);
}


.download-content{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding-right:10px;
}


.download-content::-webkit-scrollbar{
width:8px;
}

.download-content::-webkit-scrollbar-track{
background:rgba(255,255,255,.1);
}

.download-content::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.25);
border-radius:10px;
}


.folder-item{
display:block;
padding:15px;
margin-bottom:10px;
border-radius:10px;
color:var(--firstpag-color);
text-decoration:none;
transition:.2s;
}

.folder-item{
background:var(--download-color);
transform:translateX(5px);
}


.back-btn{
display:inline-block;
margin-top:10px;
color:var(--firstpag-color);
text-decoration:none;
font-weight:bold;
transition:.2s;
}

.back-btn{
opacity:.8;
}

.download-header{
flex-shrink:0;
padding-bottom:15px;
border-bottom:1px solid var(--download-color);
}

.download-header h2{
margin:0 0 10px 0;
}

.table-header{
display:grid;
grid-template-columns:
4fr
1fr
1.5fr
1fr;
padding:12px;
background:var(--download-color);
border-radius:10px;
font-weight:bold;
margin-bottom:10px;
position:sticky;
top:0;
z-index:20;
backdrop-filter:blur(10px);
}

.table-content{
max-height:45vh;
overflow-y:auto;
padding-right:8px;
}

.file-row{
display:grid;
grid-template-columns:
4fr
1fr
1.5fr
1fr;
align-items:center;
padding:12px;
border-bottom:
1px dashed var(--firstpag-color);
}

.file-row{

background:
var(--download-color);

}

.file-row div{
color:var(--firstpag-color);
word-break:break-all;
}

.table-content::-webkit-scrollbar{
width:8px;
}

.table-content::-webkit-scrollbar-thumb{
background:var(--download-color);
border-radius:10px;
}

.error{
color:#ff4d4f;
margin-top:10px;
}

.password-box{
    position:relative;
    width:100%;
}

.password-box .login-input{
    padding-right:45px;
}

.eye-icon{
    position:absolute;
    right:12px;
    margin-top:38px;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    cursor:pointer;
    opacity:0.7;
    transition:0.2s;
}

.eye-icon:hover{
    opacity:1;
}

@media screen and (max-width: 1063px) {
    .download-main{
        padding-top:0;
        position:fixed;
        top:60px;
        bottom:90px;
        margin:0 5%;
        gap:1vh;
        flex-direction:column;
    }

    .left-panel{
        width:100%;
        height:30%;
    }
    .info-card{
        text-align: center;
        padding:1vh;
    }

    .info-card>h2{
        margin:1vh 0;
        font-size:14px;
    }
    .info-card>p{
        font-size:10px;
        margin:0.8vh 0;
    }

    .logout-btn{
        padding:1px 10px;
        font-size:14px;
    }

    .right-panel{
        width:100%;
        height:70%;
    }

    .download-card{
        padding:1vh;
        height:90%;
    }

    .download-header{
        padding:1vh;
        margin-bottom:1vh;
    }

    .download-header>h2{
        text-align: center;
        margin:0;
    }

    .download-content{
        padding-right:0;
    }

    .table-content{
        max-height:78%;
    }

    .folder-item{
        padding:10px;
    }

    .table-header{
        padding:8px;
        font-size:12px;
        grid-template-columns:
        4fr
        0.7fr
        0.9fr
        0.9fr;
    }

    .file-row{
        padding:8px;
        font-size:10px;
        grid-template-columns:
        4fr
        0.5fr
        1fr
        0.6fr;
    }

    .download-btn{
        padding:4px 4px;
    }

}