body {
  font-size: 14px;
  color: #333;
  overflow: hidden;
}
select, input[type="text"] {
  border-radius: 3px;
  border: solid 1px #bbb;
  font-size: 0.8em;
  padding: 5px 5px;
  color: #666;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9em;
}
table tr {
  border-bottom: solid 0.5px #ccc;
  cursor: pointer;
}
table td {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 5px;
  border-left: solid 0.5px #ddd;
}
table tr:nth-child(odd) {
  background-color: #fafafa;
}
table tr[on-select="true"] {
  background-color: #d8ec66!important;
  font-weight: bold!important;
  color: #555!important;
}

.c-hidden-upload {
  display: none;
}
.c-cmd {
  padding: 4px 10px;
  display: flex;
  flex-direction: row;
  background-color: #ddd;
  border-bottom: solid 1px #bbb;
  user-select: none;
}
.c-cmd > div:first-child {
  flex: content;
}
.c-cmd > div:last-child {
  text-align: right;
  flex: auto;
}
.c-cmd-icon {
  width: 26px;
  height: 26px;
  border: solid 1px #bbb;
}

.c-form {
  color: #666;
  display: inline;
}
.c-form:not(:first-child) {
  margin-left: 5px;
}
.c-form span {
  font-size: 0.8em;
  margin-right: 5px;
}
.c-form input {
  border-radius: 3px;
  border: solid 1px #bbb;
  font-size: 0.8em;
  padding:5px 5px;
  color: #666;
}

#box_action .c-form button {
  font-size: 0.9em;
  height: 26px;
  border: solid 1px #bbb;
  color: #666;
  background: white;
  cursor: pointer;
  border-radius: 5px;
}

.c-lr {
  display: flex;
  flex-direction: row;
}
.c-lr > div:first-child {
  flex: auto;
}
.c-lr > div:last-child {
  text-align: right;
  flex: auto;
}

/* ================================================== */
.c-header {
  background-color: #e4e4e4;
  border-bottom: solid 1px #bbb;
  padding: 1px 10px;
  font-size: 0.8em;
  display: flex;
  flex-direction: row;
  user-select:none
}
.c-header > div:first-child {
  flex: auto;
}
.c-header > div:last-child {
  text-align: right;
  flex: auto;
}
.c-header > div > span:not(:last-child) {
  margin-right: 5px;
}

/* ================================================== */

.c-paging {
  padding: 2px 10px;
  display: flex;
  flex-direction: row;
  font-size: 0.8em;
  background-color: #eee;
  border-bottom: solid 1px #bbb;
  user-select:none
}
.c-paging > div:first-child {
  flex: auto;
}
.c-paging > div:last-child {
  text-align: right;
  flex: auto;
}
#box_paging_idx > a {
  margin-left: 4px;
}
#box_paging_idx {
  margin-right: 4px;
}

/* ================================================== */

.c-list {
  overflow-y: scroll;
}
.c-list-head {
  overflow-y: scroll;
  font-size: 0.8em;
  background-color: #eee;
  user-select:none;
}
/* check */
.c-list table td:nth-child(1),
.c-list-head table td:nth-child(1) {
  width: 50px;
  max-width: 50px;
  line-height: 1em;
  text-align: center;
}
/* file_key */
.c-list table td:nth-child(2),
.c-list-head table td:nth-child(2) {
  width: 150px;
  max-width: 150px;
}
/* name */
.c-list table td:nth-child(3),
.c-list-head table td:nth-child(3) {
}
/* sub_type */
.c-list table td:nth-child(4),
.c-list-head table td:nth-child(4) {
  width: 200px;
  max-width: 200px;
}
/* mime */
.c-list table td:nth-child(5),
.c-list-head table td:nth-child(5) {
  width: 150px;
  max-width: 150px;
  padding: 2px 10px;
  border-right: solid 0.5px #ddd;
}
.c-list table tr[on-select="true"] {
  background-color: #d8ec66!important;
  font-weight: bold!important;
  color: #555!important;
}

/* ================================================== */

.c-action {
  padding: 4px 10px;
  display: flex;
  flex-direction: row;
  background-color: #ddd;
  border-top: solid 1px #ccc;
  user-select: none;
}
.c-action > div:first-child {
  flex: auto;
}
.c-action > div:last-child {
  text-align: right;
  flex: auto;
}

/* ================================================== */

.c-layer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  background: #0000008a;
  display: none;
}
.c-msg-layer
{
  background: #ffffff3b;
}

.c-dlg {
  font-size: 0.9em;
  position: absolute;
  top: 10px;
  width: 400px;
  left: 0;
  right: 0;
  margin: auto;
  background: #eeeeee;
  box-shadow: 1px 1px 4px #00000073;
  border: solid 1px #aaa;
  border-radius: 3px;
  display: none;
}
.c-dlg-title {
  padding: 3px 10px;
  border-bottom: solid 1px #aaa;
}
.c-dlg-content {
  padding: 3px 10px;
  background: #fcfcfc;
}

.c-dlg-action {
  padding: 7px 10px;
  border-top: solid 1px #aaa;
  display: flex;
  flex-direction: row;
}
.c-dlg-action > div:first-child {
  flex: auto;
}
.c-dlg-action > div:last-child {
  text-align: right;
  flex: auto;
}
.c-dlg-action button {
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 3px;
  padding: 3px 10px;
  border: solid 1px #aaa;
  height: 26px;
  width: 120px;
  background: #f5f5f5;
}
.c-dlg-action button:hover {
  background-color: #fefefe;
}
.c-dlg-msg {
  top: 30px;
  width: 300px;
}
.c-dlg-msg .c-dlg-content {
  height: 100px;
}
.c-blkform {
  color: #666;
  margin: 10px 0;
}
.c-blkform-blk:not(:first-child) {
  margin-top: 5px;
}
.c-blkform-ta-blk:not(:first-child) {
  margin-top: 10px;
}
.c-blkform-blk > span:first-child{
  display: inline-block;
  width: 100px;
  font-size: 0.8em;
  margin-right: 5px;
}
.c-blkform-blk > input:last-child{
  width: calc(100% - 125px);
  border-radius: 3px;
  border: solid 1px #bbb;
  font-size: 0.8em;
  padding: 3px 5px;
}
.c-blkform-blk > label:last-child > input {
  cursor: pointer;
}
.c-blkform-blk > label:last-child > span {
  vertical-align: top;
  font-size: 0.9em;
  cursor: pointer;
}
.c-blkform-ta-blk > span:first-child {
  vertical-align: top;
  display: inline-block;
  width: 100px;
  font-size: 0.8em;
  margin-right: 5px;
}
.c-blkform-ta-blk > textarea:last-child {
  width: calc(100% - 125px);
  border-radius: 3px;
  border: solid 1px #bbb;
  font-size: 0.8em;
  padding: 3px 5px;
  height: 100px;
  resize: none;
}
.c-blkform-blk-file > input {
  border: solid 1px #bbb;
  padding: 5px;
  font-size: 0.8em;
  width: calc(100% - 15px);
  border-radius: 3px;
}
.c-cont-blk {
  color: #666;
  margin: 10px 0;
}
.c-cont-blk > div {
  padding: 5px 0;
  border-bottom: solid 1px #ddd;
}
.c-cont-blk > div:first-child {
  padding-top: 0;
}
.c-cont-blk > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* -------------------------- */

.c-dlg-sysdir {
  width: 50vw;
  min-width: 400px;
}
.c-dlg-sysdir-list {
  width: 100%;
  height: 50vh;
  min-height: 400px;
  overflow-y: scroll;
  border: solid 1px #ddd;
}
.c-dlg-sysdir-list-head {
  width: 100%;
  overflow-y: scroll;
  font-size: 0.8em;
  background-color: #eee;
  user-select: none;
  border: solid 1px #ddd;
  border-bottom: none;
}
.c-dlg-sysdir-list-head tr {
  border-bottom: none;
}
.c-dlg-sysdir-list table{
  border-top: solid 1px #ddd;
  user-select: none;
}
.c-dlg-sysdir table td:first-child {
  border-left: none;
}

/* check */
.c-dlg-sysdir-list table td:nth-child(1),
.c-dlg-sysdir-list-head table td:nth-child(1) {
  width: 50px;
  max-width: 50px;
  line-height: 1em;
  text-align: center;
}
/* name */
.c-dlg-sysdir-list table td:nth-child(2),
.c-dlg-sysdir-list-head table td:nth-child(2) {
}
/* updated */
.c-dlg-sysdir-list table td:nth-child(3),
.c-dlg-sysdir-list-head table td:nth-child(3) {
  width: 150px;
  max-width: 150px;
}

.c-dlg-sysdir-path {
  width: calc(100% - 45px);
}

.c-dlg-sysdir-diricon {
  color: #999;
  margin: 2px 5px 2px 2px;
}
.c-dlg-sysdir-fileicon {
  margin-right: 5px;
}
.c-dlg-sysdir-rename:hover {
  text-decoration: underline;
}
.c-dlg-sysdir-rename-ipt {
  padding: 3px 2px 2px 0px;
  font-size: 1em;
  width: calc(100% - 30px);
  border: none;
  background: none;
}

/* ================================================== */
.c-mime {
  font-size: 0.8em;
  padding: 1px 10px 2px 10px;
  border-radius: 10px;
  line-height: 2em;
}
.c-mime-pdf {
  color: white;
  background: #db7272;
}
.c-mime-jpeg,.c-mime-jpg {
  color: white;
  background: #8d4aff;
}
.c-mime-bmp {
  color: white;
  background: #577abd;
}
.c-mime-png {
  color: white;
  background: rgb(0, 162, 255);
}
.c-mime-tif,.c-mime-tiff {
  color: white;
  background: rgb(40 145 153);
}
.c-mime-lay,.c-mime-x-lay {
  color: white;
  background: #79be45;
}