:root{
  --list-icon-size:20px;
  --sidebar-addLocale-icon:url(./images/sidebarButton-addLocation.svg);
  --sidebar-localFile-icon:url(./images/sidebarButton-localFile.svg);
  --sidebar-fileHistory-icon:url(./images/sidebarButton-history.svg);
  --sidebar-fileOpen-icon:url(./images/sidebarButton-fileOpen.svg);
  --secureToolbar-back-icon:url(./images/secureToolbarButton-back.svg);
  --cloudFolder-icon:url(./images/cloudFolderIcon.svg);
  --body-bg-color:rgb(247 247 247);
  --upload-bg-hover-color:rgb(255 255 255);
  --hg-accent-color:rgb(28, 89, 255);
  --hg-accent-hover-color:rgb(66, 120, 255);
  --separate-color:rgb(224, 224, 227);
}

body{
  background-color:var(--body-bg-color);
}

#pdfjsViewerFrame{
  touch-action:auto;
}

@media (prefers-color-scheme: dark){
  :root:where(:not(.is-light)){
    --body-bg-color:rgb(42 42 46);
    --upload-bg-hover-color:rgb(52 52 56);
    --hg-accent-color:rgb(144 192 254);
    --hg-accent-hover-color:rgb(154 202 255);
    --separate-color:rgb(32, 32, 35);
  }
}

:root:where(.is-dark){
    --body-bg-color:rgb(42 42 46);
    --upload-bg-hover-color:rgb(52 52 56);
    --hg-accent-color:rgb(144 192 254);
    --hg-accent-hover-color:rgb(154 202 255);
    --separate-color:rgb(32, 32, 35);
  }

#mobileFileOpen{
  display:none;
  flex-direction:column;
  width:100%;
  align-items:center;
  color:var(--main-color);
  justify-content:center;
  position:absolute;
  top:180px;
  gap:24px;
}

#mobileFileOpen div{
    font-size:18px;
  }

#secureViewer{
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:var(--main-color);
  position:relative;
}

#secureViewer.loading::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:var(--main-color);
  background:var(--body-bg-color) url("./images/loading.svg") center/30px no-repeat;
  z-index:9999;
}

.cloudIcon::before{
  -webkit-mask-image:var(--sidebar-addLocale-icon);
          mask-image:var(--sidebar-addLocale-icon);
}

#localFileIcon::before{
  -webkit-mask-image:var(--sidebar-localFile-icon);
          mask-image:var(--sidebar-localFile-icon);
}

#fileHistoryIcon::before{
  -webkit-mask-image:var(--sidebar-fileHistory-icon);
          mask-image:var(--sidebar-fileHistory-icon);
}

#fileOpenAreaButtonIcon::before{
  -webkit-mask-image:var(--sidebar-fileOpen-icon);
          mask-image:var(--sidebar-fileOpen-icon);
}

#secureViewBackIcon::before{
  -webkit-mask-image:var(--secureToolbar-back-icon);
          mask-image:var(--secureToolbar-back-icon);
}

.row.itemButton.folderItem::before{
  content:"";
  display:inline-block;
  width:28px;
  height:24px;
  -webkit-mask-image:var(--cloudFolder-icon);
          mask-image:var(--cloudFolder-icon);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:cover;
          mask-size:cover;
  background-color:currentColor;
}

#pdfjsViewerFrame{
  width:100%;
  height:100%;
  overflow:hidden;
}

.secureViewIcon{
  width:var(--list-icon-size);
  height:var(--list-icon-size);
}

.secureViewIcon::before{
  content:'';
  width:var(--list-icon-size);
  height:var(--list-icon-size);
  transform:scaleX(var(--dir-factor));
  display:inline-block;
  background-color:currentColor;
  mask-repeat:no-repeat;
  mask-size:contain;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  -webkit-mask-position:center;
}

#secureViewerContainer{
  width:100%;
  height:100%;
  display:flex;
  font:message-box;
}

#hgSidebar{
  height:100%;
  width:15%;
  min-width:220px;
  display:flex;
  flex-direction:column;
  padding:0 0 0 4px;
  overflow-x:hidden;
  overflow-y:auto;
  border-right:1px solid var(--separator-color);
}

:is(#hgSidebar > .row):first-of-type{
    margin-top:4px;
  }

#hgSidebar > .separator{
  display:block;
  margin:4px 0;
  height:0;
  width:100%;
  border-top:1px solid var(--separator-color);
  border-bottom:none;
}

#cloudFileList{
  display:flex;
  flex-direction:column;
}

.row,
.itemButton{
  color:var(--main-color);
  padding:4px 0;
  padding-inline-start:4px;
  border-radius:2px;
  display:flex;
  align-items:center;
  gap:8px;
  height:24px;
  cursor:pointer;
}

.itemButton > .itemLabel{
  display:block;
  overflow:hidden;
  padding-inline-start:4px;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  width:100%;
}

.fileItemList{
  margin-left:24px;
  max-width:100%;
  display:flex;
  flex-direction:column;
}

.itemButton.selected{
  background-color:var(--toggled-btn-bg-color);
  color:var(--toggled-btn-color);
}

.itemButton:hover,
#fileOpenAreaButton:hover{
  background-color:var(--button-hover-color);
}

#fileOpenContainer{
  width:100%;
  height:350px;
  min-height:150px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:100px;
}

#fileOpenArea{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  gap:16px;
  border:2px dashed var(--main-color);
  width:80%;
  height:100%;
  position:relative;
  border-radius:16px;
  cursor:pointer;
}

#fileOpenArea:is(:hover, .dragging){
  background-color:var(--upload-bg-hover-color);
  border-color:var(--hg-accent-color);
}

#fileOpenAreaButton{
  display:flex;
  align-items:center;
  cursor:pointer;
  min-width:16px;
  width:auto;
  padding:8px 16px;
  gap:8px;
  color:var(--main-color);
  background-color:var(--dialog-button-bg-color);
  border:var(--dialog-button-border) !important;
  border-radius:2px;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
}

#fileOpenAreaButton:is([disabled="disabled"],[disabled]){
    opacity:0.5;
    pointer-events:none;
    background-color:var(--dialog-button-bg-color);
  }

#hgResizer{
  height:100%;
}

.secureToolBarButton{
  height:100%;
  width:-moz-fit-content;
  width:fit-content;
  display:flex;
  align-items:center;
  padding:0 8px 0 2px;
  cursor:pointer;
}

.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-circle{border-radius:50%}

#hg-loading{
  position:absolute;
  width:100%;
  height:10%;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  opacity:50%;
}

.hg-visible{
  display:block!important;
  visibility:visible !important;
}

.hg-selected-item{
  background-color:lightskyblue !important;
}

.hg-btn{
  background-color:lightgray;
  box-shadow:2px 2px 4px gray !important;
  width:52px;
  height:52px;
  text-align:center;
  margin:0px !important;
  padding:0px !important;
}

.hg-btn-text{
  font-size:42px;
  vertical-align:middle;
}

.hg-two-page{
  float:left !important;
  margin-bottom:20px !important;
}

#hg-pagenum{
  display:none;
  position:fixed;
  top:0px;
  padding:5px;
  color:var(--main-color);
  background-color:var(--body-bg-color);
}

#hg-arx-frame{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

#hg-footer{
  display:none;
  position:fixed;
  bottom:0;
  width:100%;
  height:0px;
  text-align:center;
}

#sidebarContainer{
  display:block !important;
  visibility:visible;
}

#sidebarContent{
  display:block !important;
  visibility:visible;
}

#outlineView{
  display:block;
  visibility:visible;
}

#secureToolBar{
  display:none;
}

.hgMobileButton{
  color:var(--hg-accent-color);
  border:2px solid var(--hg-accent-color);
  border-radius:4px;
  padding:1px 12px;
  cursor:pointer;
}

.hgMobileButton:is(:hover){
  color:var(--hg-accent-hover-color);
  border-color:var(--hg-accent-hover-color);
  background-color:var(--upload-bg-hover-color);
}