*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#181818;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

.window{
    width:400px;
}

.container{
    background:#222222;
    border-radius:16px;
    padding:30px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-shadow:0 12px 35px rgba(0,0,0,.45);
    min-height:220px;
    justify-content:center;
}

button{
    width:170px;
    height:38px;
    border:none;
    border-radius:10px;
    color:white;
    font-size:15px;
    cursor:pointer;
    transition:.2s;
}

.secondary-btn{
    background:#333333;
    margin-bottom:14px;
}

.secondary-btn:hover{
    background:#3d3d3d;
}

.primary-btn{
    background:#1f6aa5;
    margin-bottom:16px;
}

.primary-btn:hover:not(:disabled){
    background:#1a5b8d;
}

.primary-btn:disabled{
    background:#555;
    color:#999;
    cursor:not-allowed;
}

.file-name{
    color:#ddd;
    margin-bottom:18px;
    font-size:14px;
    text-align:center;
    word-break:break-word;
}

.hint{
    color:#BBBBBB;
    font-size:13px;
    text-align:center;
}

.loading{
    color:white;
    font-size:24px;
    font-weight:bold;
    margin-bottom:32px;
}

.page{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.hidden{
    display:none;
}




.progressBar {
    background-color: transparent;
    border-radius: 25px;
    padding: 2px 2px 2px 2px;
    width: 95%;
    border-radius: 15px;
}

.barr {
    background-color: rgb(245, 128, 36);
    color: white;
    padding: 1%;
    text-align: right;
    font-size: 8px;
    border-radius: 15px;
}

#progress {
    width: 0%;
}