@font-face {
    font-family: jf;
    font-display: swap;
    src: url("fonts/jf-openhuninn-1.1.ttf");
}

@font-face {
    font-family: eras_tic;
    /* font-family: custom_font; */
    font-display: swap;
    src: url("fonts/ERASMD.TTF");
}

@font-face {
    font-family: cwtex;
    /* font-family: custom_font; */
    font-display: swap;
    src: url("fonts/cwtexyen-zhonly.ttf");
}

@font-face{
	font-family: arima;
	font-display:swap;
	src: url("fonts/Arima/Arima-Light.ttf");
}

@font-face{
	font-family: nanumgothic;
	font-display:swap;
	src:url("fonts/Nanum_Gothic/NanumGothic-Regular.ttf");
}

body {
    min-height: 100vh;
    overflow: auto !important;
}

* {
    font-family: nanumgothic, eras_tic;
}

.header {
    padding-top: 10px;
}

.topTitle {
    text-align: center;
}

.topTitle>h2 {
    /* border-top: 1px solid #ccc; */
    /* border-bottom: 1px solid #ccc; */
    display: inline-block;
}

.container {
    /* width: 80vw; */
    width: 100%;
    /* background-color: yellow; */
    height: auto;
    padding: 0;
}

a:hover {
    cursor: pointer;
}

#fileTable,
#fileTable_wrapper {
    margin-top: 20px;
}

#playerBox {
    /* width: 800px !important; */
    min-width: 600px !important;
    max-width: 1200px !important;
    height: auto !important;
    padding: 0;
    max-height: 800px !important;
}

#player_html5_api {
    max-height: 800px !important;
    /* min-width: 600px !important; */
}

#pictureBox {
    /* width: 800px !important;
  max-width: 1200px !important;
  height: auto !important; */
    /* max-height: 600px; */

    /* width: auto;
    padding: 0; */

    display:flex;
    align-items: center;
    height:400px;
}


/* #player_filename { */


/* padding: 10px 0 0 10px; */


/* } */

#downloadListBox {
    height: 500px;
    width: 350px;
    word-break: break-word;
    background-color: aliceblue;
    position: fixed;
    left: 0;
    bottom: 0;
    border-radius: 10px;
    /* margin-left: 10px; */
}

#downloadListTitle {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#downloadList {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

.downloadItem {
    padding: 20px;
}

#currentPath_href a {
    color: darkgreen;
}

#btnDownloadCurrentFolder {
    font-size: 10pt;
    color: darkgreen;
    border-color: darkgreen;
}

#btnDownloadCurrentFolder:hover {
    color: #fff;
    background-color: darkgreen;
}

#upload,
input,
select,
a.paginate_button {
    border-radius: 20px !important;
}

input {
    outline: none !important;
    box-shadow: 0 0 10px #719ece;
    padding: 10px;
}

.dz-image {
    z-index: 0 !important;
}

.ajs-visible {
    background-color: darkgrey;
}

.ajs-message {
    border-radius: 20px;
}

.btnMore {
    display: none;
}

table {
    word-break: break-word;
}

.table-info,
.table-info>td,
.table-info>th {
    background-color: #0031 !important;
}

.progress {
    height: 100%;
}

.context-menu-icon-download_custom {
    background-image: url("imgs/download.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-share_custom {
    background-image: url("imgs/copy.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-delete_custom {
    background-image: url("imgs/delete.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-play_custom {
    background-image: url("imgs/play.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-view_custom {
    background-image: url("imgs/view.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-add_custom {
    background-image: url("imgs/add.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-lock_custom {
    background-image: url("imgs/lock.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-unlock_custom {
    background-image: url("imgs/unlock.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-uploadFile_custom {
    background-image: url("imgs/uploadFile.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-uploadFolder_custom {
    background-image: url("imgs/uploadFolder.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.context-menu-icon-rename_custom {
    background-image: url("imgs/rename.png") !important;
    background-repeat: no-repeat;
    background-position: 6px 4px;
    background-size: 16px 16px;
}

.modal {
    max-width: initial !important;
    height: auto !important;
}

#tempPicture {
    height: 100%;
    /* max-width: 800px; */
    max-width:100%;
}

@media all and (max-width: 767px) {
    .container {
        width: 95vw;
        /* background-color: yellow; */
        height: auto;
        padding: 0;
    }
    #fileTable th,
    #fileTable td {
        /* min-width: 50px; */
        max-width: 100px;
        overflow: scroll;
        word-wrap: break-word;
        white-space: normal;
    }
    #playerBox {
        width: 300px !important;
        height: auto !important;
        padding: 0;
        min-width: 300px !important;
    }
    #pictureBox {
        width: 400px !important;
        height: auto !important;
        padding: 0;
    }
    #pdfBox {
        width: 400px !important;
        height: auto !important;
        padding: 0;
    }
    .col-md-3 img {
        left: -15px;
        position: relative;
    }
    .progress {
        height: 20px;
    }
    .col-md-10 {
        width: 80%;
    }
    .col-md-2 {
        width: 20%;
    }
    #fileTable {
        overflow-x: hidden;
    }
    #pictureBox {
        position: fixed;
        top: 15%;
    }
    /* #tempPicture {
        max-width: 400px;
    } */
}

@media (max-width: 1200px) {
    .col-md-3 img {
        left: -15px;
        position: relative;
    }
    .progress {
        height: 20px;
    }
    .col-md-10 {
        width: 80%;
    }
    .col-md-2 {
        width: 20%;
    }
    #fileTable {
        overflow-x: hidden;
    }
}


/* Dark Mode */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #090e11;
        color: #ffffff;
    }
    table.dataTable tbody tr.odd {
        color: #ffffff !important;
    }
    table.dataTable tbody tr.even {
        background-color: #044444 !important;
        color: #ffffff !important;
    }
    table.dataTable tbody tr:hover {
        background-color: #2c3434 !important;
    }
    .dataTables_wrapper,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate,
    .paginate_button.disabled,
    .dataTables_filter {
        color: #ffffff !important;
        background-color: #242c34;
    }
    .table-info th {
        background-color: #044460 !important;
        color: #ffffff;
    }
    .dropzone {
        background-color: #242c34 !important;
        border: 2px solid #ffff !important;
    }
    .paginate_button {
        background: #2c2c34 !important;
        color: #ffff !important;
    }
    div a {
        color: #68bbe4;
    }
    #btnCopyCurrentPath,
    #btnDownloadCurrentFolder {
        color: #fff !important;
    }
    #currentPath_href a {
        color: #fff !important;
    }
    #txtBox {
        background-color: #1e2931;
    }
    .fancytree-lastsib {
        background-color: #1e2931 !important;
    }
    .fancytree-plain span.fancytree-node.fancytree-active,
    .fancytree-plain span.fancytree-node.fancytree-selected {
        background-color: #1e2931 !important;
    }
    ul.fancytree-container {
        background-color: #1e2931 !important;
    }
    span.fancytree-title {
        color: white !important;
    }
    .fancytree-plain span.fancytree-node:hover {
        background-color: #000 !important;
    }
    .modal {
        background: #1e2931 !important;
    }
    form span {
        color: #fff !important;
    }
    .context-menu-root {
        background: #1e2931 !important;
    }
    .dropdown-menu.show {
        background-color: #1e2931 !important;
    }
    a.dropdown-item {
        color: #fff;
    }
    .context-menu-item {
        background-color: #1e2931 !important;
        color: #fff !important;
    }
    .context-menu-list span {
        color: #fff;
    }
    .context-menu-disabled span {
        color: grey !important;
    }
    .context-menu-item:hover {
        background-color: #000 !important;
    }
}


/* End of Dark Mode */

td .row .col-xs-4 {
    text-align: center;
}

td{
	white-space:normal !important;
	word-break:break-all;
}