.filetype-header, .filetype-row, .filetype-footer ,.filetype-html{
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.filetype-row {
    flex-direction: row;
}

.html-link {
    color: #1e90ff;
    cursor:pointer;
    user-select: none;
    margin-left: 1rem;
}

.html-link.fold:after {
    content: ">>";
    margin-left: 2px;
}

.html-link.unfold:after {
    content: "<<";
    margin-left: 2px;
}

.html-link:hover {
    color: blue;
}
.filetype-footer {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: min(100%, 1080px);
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #cccccc;
    background-color: #dddddd;
    color: rgb(128, 128, 128);
    border-radius: 6px;
    position: relative;
}

.filetype-default {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    color: rgb(128, 128, 128);
    cursor: default;
}

.filetype-default:hover {
    color: rgb(188, 188, 188);
}

.filetype-default > div {
    width: min(100%, 1080px);
    border: 2px dashed #cccccc;
    background-color: rgb(246, 246, 246);
    height: calc(10vh);
    border-radius: 4px;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.filetype-footer label {
    width: 45%;
    text-align: right;
    font-size: 1.2rem;
    font-weight: bold;
}
.filetype-footer span,.filetype-footer pre {
    width: calc(100% - 45%);
}

.preview{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    cursor: pointer;
    position: relative;
}

button{
    border-radius:3px;
    color:#ffffff;
    letter-spacing:2px;
    font-size:15px;
    cursor:pointer;
    user-select: none;
    height: 38px;
    line-height: 38px;
}

.select-file{
    background:#1e90ff;
    border:1px solid #1e90ff;
    width: 98px;
}

.select-file:hover{
    background: blue;
    border: 1px solid blue;
}

.copy{
    background: green;
    border: 1px solid green;
    width: 98px;
}
.copy:hover{
    background: #006400FF;
    border: 1px solid #006400FF;
}
.copied {
    color: yellow;
}
pre{
    overflow: hidden;
}

.filetype-html {
    margin-top: 2rem;
}

.html-row {
    width: min(100%, 1080px);
    border: 1px solid #cccccc;
    background-color: #dddddd;
    display: inline-flex;
    flex-direction: row;
}

.html-row:nth-child(2) {
    font-size: 1.2rem;
    font-weight: bold;
}

.html-row:not(:first-child):not(:nth-child(2)):hover {
    color: rgb(128, 128, 128);
}

.html-row input {
    width: calc(100% - 12px);
    height: 38px;
    line-height: 38px;
    outline-style: none;
    padding: 0 6px;
}

.html-row label {
    width: 60%;
    word-break: break-all;
    text-align: right;
    padding: 0 4px;
    height: 38px;
    line-height: 38px;
}

.html-row span {
    width: calc(100% - 60% - 8px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #cccccc;
    height: 38px;
}



@media only screen and (max-width: 767px) {
    .filetype-footer label {
        width: 25vw;
    }

    .filetype-footer span,.filetype-footer pre {
        width: calc(100% - 25vw);
    }

}