body {
   font-family: 'Tinos', sans-serif;
   padding: 0;
   color: #3f3305;
   min-height: 100vh;
   margin: 0 !important;
   display: flex;
   flex-direction: column;
}

footer {
   min-height: 50px;
}

main {
   flex: 1;
   margin-bottom: 20px;
}

.brand-text {
   color: #928676;
}

.brand-background {
   background-color: #928676;
}

.t-special {
   font-family: 'Alex Brush', cursive;
}

html {
   min-height: 100vh;
}



/* Form */
.input {
   margin-top: 5px;
   display: flex;
   flex-direction: column;
}

.input label {
   font-size: 1.4em;
}

.input input,
.input textarea {
   border-radius: 0;
   outline: none !important;
   border: gray 1px solid;
   height: 30px;
}

.textarea {
   height: 100px !important;
}

/* Files */
.files {
   list-style: none;
   padding: 0;
   margin: 20px 0;
   min-width: 100px;
}

.files span {
   font-size: 0.8em;
}

.files span span {
   font-size: 0.9em;
   color: #888;
}

.files .column {
   width: calc(100% - 50px);
}


.files li p {
   margin: 0;
   font-size: 1.2em;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   text-wrap: nowrap;
   width: 100%;
}

.files li {
   background: #eeeeee;
   padding: 12px;
   margin: 8px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
   transition: background 0.3s;
}

.file input[type="checkbox"] {
   width: 1.3em;
   height: 1.3em;
   background-color: white;
   border-radius: 50%;
   vertical-align: middle;
   border: 1px solid #ddd;
   appearance: none;
   -webkit-appearance: none;
   outline: none;
   cursor: pointer;
}
.file input[type="checkbox"]:checked {
   background-color: #928676;
}

.files li:hover {
   background: #dbdbdb;
}

.files li {
   display: flex;
   justify-content: space-between;
}

.files i {
   margin-left: 5px;
}

/* folders */
.folders {
   width: 100%;
}
.folders  p {
   margin: 0;
}
.folders {
   list-style: none;
   padding: 0;
}
.folder {
   background: #eeeeee;
   margin: 8px 0;
   height: 4em;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
   transition: background 0.3s;
   cursor: pointer;
   padding: 5px;
}
.folder:hover {
   background: #dbdbdb;
}
.folder .column {
   width: 100%;
   padding: 10px 0;
}

.folder p {
   text-align: left;
   padding-left: 7px;
   width: 80%;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

.icon-wrapper {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 90%;
   height: 90%;
   aspect-ratio: 1 / 1;
   width: fit-content;
}
.icon-wrapper i {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width: 100%;
   height: 100%;
   font-size: 2em;
   vertical-align: middle;
   margin-top: -2px;
}

.folder.active {
   background: #c0c0c0;
}

.folder_size {
   font-size: 0.8em;
   color: #888;
   position: absolute;
   right: 2px;
   bottom: 2px;
}


/* buttons */
button:not(.select2-container *) {
   background-color: #928676;
   color: white;
   border: none;
   padding: 10px 20px;
   cursor: pointer;
   font-size: 1.2em;
   margin-top: 10px;
}