/* This is simple stylesheet I wrote to test this specific app */

body {
    text-align: justify;
    word-break: break-word;
    color: rgb(232, 234, 237);
    padding: 0;
    margin: 0;
    background: rgb(20, 20, 20);
}

p, b, a {
    margin-top: 1px;
    margin-bottom: 1px;
    margin: 1px;
}

a, a:hover, a:visited, a:active {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.container {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    max-width: 1000px;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
}

.small-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: calc(50vh - 200px);
    min-width: 400px;
    margin: auto;
}

.big-box {
    height: 800px;
    width: 1200px;
    margin: auto;
    margin-top: 40px;
}

.upload-form {
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    padding-bottom: 4px;
}

.upload-form form {
    margin: 0;
}

.box h1, p {
    text-align: center;
}

.box .field, .form {
    display: block;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    border: 0;
}

.small-box .field {
    min-width: 300px;
    margin: 10px auto;
    padding: 15px;
}
.small-box .big-button {
    min-width: 300px;
    padding: 15px;
    margin-top: 20px;
}

.file-browser {
    padding: 10px;
    padding-top: 4px;
}

.file-browser td, th {
    padding: 8px;
}

.file-browser tr:nth-child(even) {
    background-color: rgba(255,255,255,0.02);
}

.file-browser tr:hover {
    background: rgba(255,255,255,0.05);
}

.file-browser th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: rgba(255,255,255,0.02);
    color: white;
}

.box input:focus,.box input:active,.box button:focus,.box button:active{
    outline: none;
}

progress::-moz-progress-bar { background: #742ECC; }
progress::-webkit-progress-value { background: #742ECC; }
.box progress {
    overflow: hidden;
    width: 100%;
    height: 6px;
    background: transparent;
    color: #742ECC;
}

.progress-box {
    height: 6px;
}

.box table {
    width: 100%;
}

.td-title {
    max-width: 60%;
}

.file-name {
    color: #fff;
    background: none;
    border: none;
    text-align: left;
}

.td-buttons {
    display: flex;
}

.td-buttons button {
    width: 90px;
    cursor: pointer;
    color: #fff;
    background: none;
    border: 0;
}

.box .button {
    background: #742ECC;
    display: block;
    cursor: pointer;
    color: #fff;
    border: 0;
}

.box .big-button {
    font-size: 20px;
    width: 200px;
    padding: 10px;
}

.big-button .upload {
    margin-left: 8px;
}

.box .small-button {
    color: #fff;
    font-size: 18px;
    background: none;
    border: none;
    margin-left: 32px;
    min-width: 100px;
    display: flex;
    justify-content: flex-end;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.check-box {
    /* text-align: center; */
    margin-top: 4px;
    margin-left: 8px;
    font-size: 1.1em;
    color: #2b2b2b;
}
.check-box label {
    display: block;
    width: unset;
    margin: 0;
    color: #fff;
}
.check-box input {  display: none; }

.check-box label::before {
    padding: 0;
    content: "\2714";
    font-weight: bold;
    font-size: 0.75em;
    height: 1em;
    width: 1em;
    border: 0.05em solid #000;
    border-radius: 0.2em;
    display: inline-block;
    margin-right: 0.3em;
    color: transparent;
    transition: .1s;
    border-color: #fff;
}

.message-box {
    overflow: auto;
}

.check-box label:active::before {
    transform: scale(0.8);
    border-color: #fff;
}
.check-box [type=checkbox]:checked + label:before {
    background-color: #742ECC;
    border-color: #742ECC;
    color: #fff;
}
.check-box [type=checkbox]:disabled + label:before {
    transform: scale(1);
    border-color: #aaa;
}

.check-box [type=checkbox]:checked:disabled + label:before {
    transform: scale(1);
    background-color: #9487d1;
    border-color: #742ECC;
}

.pop-close {
    position: fixed;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.pop-window {
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(#000, 0.25);
    z-index: 1;
    position: absolute;
    padding: 10px;
}

.pop-buttons {
    display: flex;
    gap: 4px;
}

.extra {
}

/* .progress { */
/*     height: 20px; */
/*     margin-bottom: 20px; */
/*     overflow: hidden; */
/*     background-color: #f5f5f5; */
/*     border-radius: 4px; */
/*     box-shadow: inset 0 1px 2px rgba(0,0,0,.1); */
/* } */
/**/
/* .progress-bar { */
/*     float: left; */
/*     width: 0%; */
/*     height: 100%; */
/*     font-size: 12px; */
/*     line-height: 20px; */
/*     color: #fff; */
/*     text-align: center; */
/*     background-color: #337ab7; */
/*     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); */
/*     box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); */
/*     -webkit-transition: width .6s ease; */
/*     -o-transition: width .6s ease; */
/*     transition: width .6s ease; */
/* } */