#_docsBox {width: 29rem; margin: auto; border: 1px solid #CCC; border-top: 0; border-bottom: 0; padding: 0.5rem}
.docsBoxBottomBorder {border-bottom: 1px solid #CCC !important; border-radius: 0 0 0.5rem 0.5rem}
.docsMenu {display: flex; justify-content: space-between; align-items: center; margin-left: 1rem}
.docsMenu > span {width: 1.5rem; font-weight: bold; text-align: center}
.docsAdd {font-size: 1.5rem}
.docsClose {color: red}
.docsItem {display: flex; justify-content: space-between; align-items: flex-start; border: 1px solid white; overflow: hidden}
.docsItem > div {display: flex; justify-content: space-between; align-items: flex-start; padding: 0.2rem 0.5rem}
.docsContent > div {display: flex; justify-content: left; align-items: flex-start; padding: 0.2rem 0.5rem; margin: 0.2rem;}
.docsAction {margin-left: 1rem; font-size: 0.8rem; padding: 0.2rem; width: 2rem}
.docsItemDate {font-size: 0.8rem; color: gray; cursor: pointer}
.docsFile {padding: 0.5rem; margin: 0.2rem}
.docsInner {position: relative; overflow: hidden; min-height: 4rem; margin: 0.5rem; display: none}
.docsIcon {width: 2rem; margin-right: 0.5rem; cursor: pointer}
.docsFolderDelete {color: red !important}
#_docsBreadCrumbs {display: flex; justify-content: left; align-items: center; flex-wrap: wrap; margin-top: 1rem; border: 1px solid #CCC; padding: 0.5rem; font-size: 0.8rem}
#_docsBreadCrumbs > span {margin: 0 0.5rem}
#_docsHeader {width: 29rem; margin: 1rem auto; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background-color: #F5F5F5; border-radius: 0.5rem 0.5rem 0 0; border: 1px solid #CCC}
#_docsHeader > div {display: flex; justify-content: center; align-items: center; margin-left: 0.5rem}
.docsFolderBackBox {width: 2rem; margin-right: 1rem; height: 2.3rem; display: flex; justify-content: center; align-items: center;}
#_docsFolderBack {font-size: 0.8rem; font-weight: bold}
.docsHeaderTitle {margin: 0}
.docsItemDate {font-size: 0.8rem}

#_docsEditHeader {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem}
#_docsEditHidden {font-size: 0.8rem; margin: 0}
#_docsEditDate {width: 4.5rem; font-size: 0.8rem}
#_docsEditTitle {font-size: 0.9rem}
#_docsEditFileName {font-size: 0.9rem}
#_docsEditBox > p {margin-top: 1rem; font-size: 0.8rem; text-align: right; margin-bottom: 0.2rem}
.docsEditButtonsBox {margin-top: 2rem; text-align: right}

#_docsClearFile {color: red; cursor: pointer; margin-left: 0.5rem}
#_docsFileNameBox {display: none; justify-content: space-between; align-items: center}
#_docsAddRootFolder {font-size: 1rem; margin-left: 0.5rem; margin-top: 0.5rem}

.docsNameBox {font-size: 0.8rem; display: flex; justify-content: left; align-items: center; gap: 1rem}
.docsNameBox > div {display: flex; justify-content: space-between; align-items: center; gap: 2rem}
.docsNameBox > p:first-child {color: gray}
.docsDelete {font-size: 0.8rem !important}

.docsFolderEmpty {font-size: 0.9rem; text-align:center; padding: 1rem 0}
.docsFolderEmpty > p:last-child {font-size: 0.8rem; margin-top: 1rem}

#_docsBoxStaticMenu {width: 29.6rem; margin: 0 auto; margin-bottom: 3rem; border: 1px solid #CCC; border-radius: 0 0 0.5rem 0.5rem; padding: 0.2rem; font-size: 0.8rem; display: flex; justify-content: space-around; align-items: center}

.docsNoFiles {display: flex; justify-content: center; align-items: center}
.docsNoFiles > div {text-align: center}
.docsNoFiles > div > button {margin-top: 0.5rem}
.docsUploadCircle {border: 2px solid green; color: green; border-radius: 2rem; width: 2rem; height: 2rem; font-size: 2rem; font-weight: bold; display: flex; justify-content: center; align-items: center}

.docsInDropZone {border: 3px dashed green !important}
.docsTempHidden {display: none !important;}
#_docsDropWelcome {display: none; justify-content: center; align-items: center; color: green; font-size: 3rem; text-decoration: underline}

.docsFileImgBox {position: relative}
.docsFileExt {text-align: center; width: 1.1rem; position: absolute; font-size: 0.5rem; top: 1.2rem; left: 0.1rem}

#_docsWaitBox {text-align: center}
#_docsWaitBox > img {width: 2rem}

#_docsTree {display: none}

@media only screen AND (max-width: 500px) 
{
  #_docsBox {width: 20rem}
  #_docsBoxStaticMenu {width: 20rem}
}

@media only screen AND (orientation: landscape) AND (max-width: 1024px) 
{
}