[v-cloak] {
   display: none;
}

.hideOverflow {
   overflow: hidden !important;
}

.nowrap {
   white-space: nowrap;
}

 /* Bootstrap theme overrides. We try to keep these as minimal as possible. */
/* Overrides for the Print Preview carousel. This is done so that indicators / controls show up better on light background*/
.carousel-indicators li {
   background-color: #999;
   background-color: rgba(70,70,70,.25);
}

.carousel-indicators .active {
   background-color: #333;
}

.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* End bootstrap theme overrides */

body {
   display: grid !important;
   grid-template-areas:
      "nav "
      "main";
   grid-auto-rows: 67px auto;
}

#navbarHeader {
   position: fixed;
   z-index: 99;
}

.navMenuHambButton {
   background: none;
   border: none;
   display: flex;
   align-items: center;
   padding: 0;
   height: 25px;
   color: #52555B;
}

   .navMenuHambButton > svg {
      height: 1.5rem;
   }

   .navMenuHambButton button:hover {
      cursor: pointer;
      color: #626262;
   }

   .navMenuHambButton:focus, .sideNavCloseButton:focus {
      outline: none;
   }

#profileDropdownDisplayName .tooltip {
   font-size: 0.8rem;
}

#profileDropdownDisplayName .tooltip-inner {
   background-color: white;
   color: #52555B;
   box-shadow: 0px 2px 5px 1px #cecece;
}

#globalSideNav {
   display: none;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 300px;
   background: #fbfbfb;
   z-index: 9999;
   left: 0;
   border-right: 1px solid #dfdfdf;
   overflow: auto;
}

   #globalSideNav > div > div:not(:last-child) {
      /* Child divs in sidenav are roughly 1px too narrow without this*/
      width: inherit;
      border-bottom: 2px solid #dfdfdf;
   }

#globalSideNavHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 60px;
   padding: 12px 16px;
}

   #globalSideNavHeader #navbarLogo {
      max-height: 32px;
      width: auto;
   }

#globalSideNav a {
   color: #52555B !important;
   display: flex;
   align-items: center;
}

   #globalSideNav a:hover {
      background-color: #ececec;
      border-right: 4px solid #068fbe;
   }

.globalSideNavPrimaryText {
   font-size: 1.125rem;
   font-weight: bold;
   margin: 0;
}

.globalSideNavSubText {
   font-size: 0.75rem;
   margin: 0;
}

.sideNavCloseButton {
   background: none;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
   padding: 0;
   height: 20px;
   width: 20px;
   cursor: pointer;
   color: #515151;
}

   .sideNavCloseButton:hover {
      color: #717171
   }

#globalSideNavMask {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #52555B;
   opacity: 0.5;
   z-index: 100;
}

/* Browser page */
#mainContent {
   grid-area: main;
}

#mainContent #FolderBrowserContainer {
      position: fixed;
      z-index: 97;
      bottom: 0;
}

#mainContent #browserToolbar {
      position: fixed;
      top: 59px;
      z-index: 98;
      background: var(--background-color);
}

#fileSection {
   height: fit-content;
}

.breadcrumb-searchresults {
   display: none;
}

.cardSectionItemsContainer {
   display: grid;
   grid-gap: 1rem;
}

.groupingDropdownItem {
   display: flex;
   align-items: center;
}

.groupItemSelected {
   width: 0.4rem;
   height: 0.4rem;
   background: #52555B;
   border-radius: 50%;
   display: inline-block;
   margin: 0 0.4rem 0 -0.8rem;
}

.cardSectionItemsContainer.viewTypeIcons {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.cardSectionItemsContainer.viewTypeDetails {
   grid-template-rows: repeat(auto-fill,minmax(60px,1fr));
}

.cardSectionItemsContainer.viewTypeDetails .browserCard a.cardImage {
      width: 3rem;
}

.cardSectionItemsContainer.viewTypeIcons .browserCard a.cardImage {
   min-height: 200px;
}

.cache-status-icon {
   width: 1em;
   height: 1em;
   opacity: 0.7;
   flex-shrink: 0;
}

.folderBrowserRootFolderIcon, .folderBrowserSubFolderIcon {
   vertical-align: text-bottom;
   font-size: 1.25rem;
}

.cloud-warning-icon {
   color: #ff9800;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.2em;
   height: 1.2em;
   margin: 0 0.25rem;
   background: rgba(255,152,0,0.12);
   border-radius: 50%;
   transition: transform 0.12s ease;
   cursor: help;
}

.cloud-warning-icon:hover {
   color: #f57c00 !important;
   transform: scale(1.1);
}

.dropdown-item.selected {
   content: '';
   background: #52555B;
   height: 0.4rem;
   width: 0.4rem;
   color: #52555B;
   display: inline-block;
   border-radius: 50%;
   margin-right: 0.4rem;
   margin-left: -0.8rem;
}

.cardDropdownShown, .cardDropdownShown .card, .cardDropdownShown .dropdown {
   position: unset;
}

.searchInput {
   border-radius: 4px 0 0 4px;
   border-color: #3B3C41;
   border-style: solid;
   border-width: 1px 0 1px 1px;
   height: 42px;
}

.searchButton {
   border-radius: 0 4px 4px 0;
   border-color: #3B3C41;
   border-style: solid;
   border-width: 1px;
   height: 42px;
}

#profileDropdown {
   width: 18rem;
   border-radius: 0.25rem;
}

/* The style selectors here are copied from the default tree css sheet. Adding min-width because it's required for the overflow */
[data-type=tree] ul li [data-role=expander].gj-tree-font-awesome-expander, [data-type=tree] ul li [data-role=expander].gj-tree-glyphicons-expander, [data-type=tree] ul li [data-role=expander].gj-tree-material-icons-expander {
   min-width: 24px;
}

#FolderBrowserTreeView {
   white-space: pre;
}

.breadcrumb {
   white-space: pre-wrap;
}

.card-title {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

.browserCard .card-text {
   word-wrap: break-word;
   overflow-wrap: break-word;
}

.browserCard .card-body > a {
   min-width: 0;
}
/* End Browser Page */

/* Intelligent Form */
.dataentry-form-dialog {
   overflow: auto !important;
}

.dataentry-form-container {
   padding: 0;
}

/* Data tables column reorder z-index must be set higher than modal dialog default (1050) */
table.DTCR_clonedTable.dataTable {
   z-index: 1052 !important;
}

div.DTCR_pointer {
   z-index: 1051 !important;
}

div.DTS div.dataTables_scrollBody {
   background: none !important;
}

/* This changed from "repeat" to "redo" in Font Awesome 4 to Font Awesome 5. But the HTML editor still uses the FA4 name. */
.fa-repeat:before {
   content: "\f01e";
}
/* End Intelligent Form */


/* Misc utility classes */
.xsmall-text {
   font-size: 70%;
}

.message-alert-icon {
   font-size: 2.5rem;
}

.break-word {
   word-break: break-word;
}
/* End Misc utility classes */

/* File Compare classes */
#originalImage, #changedImage {
   height: 15rem;
}

#comparedImageContainer {
   height: auto;
   text-align: center;
}
/* End File Compare classes */

#RootFolderList:focus {
   border: 1px solid #ced4da;
   box-shadow: none;
}

#brandingSettingsForm input[type=color] {
   cursor: pointer;
}

#navbarLogoContainer {
   display: flex;
   align-items: center;
   height: 50px;
}

#navbarLogo {
   max-height: 100%;
}

.gj-tree-bootstrap-4 ul.gj-list-bootstrap li.active {
   color: inherit;
}

.gj-list .gj-list {
   padding-left: 24px;
}

span[data-role="spacer"] {
   width: 0 !important;
   min-width: 0 !important;
}

#settingsTabMenu {
   position: fixed;
   top: 57px;
   z-index: 98;
}

#SettingsPageContainer {
   max-width: 1000px;
}

.fixedButtonFooter {
   position: fixed;
   bottom: 0px;
   left: 0px;
   width: 100%;
   z-index: 98;
}

.footerOffset {
   margin-bottom: 74px;
}

/* Thumbnail images skeleton loader */
.thumbnailImage-skeleton {
   animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
   0% {
      background-color: hsl(200, 20%, 80%);
   }

   100% {
      background-color: hsl(200, 20%, 95%);
   }
}

.thumbnailImage-skeleton-text {
   width: 100%;
   height: 0.7rem;
   margin-bottom: 0.5rem;
   border-radius: 0.25rem;
}

/*override gijgo to use seagull black*/
li.list-group-item {
   color: #52555B !important;
}

@media only screen and (min-width : 992px) {
   #revisionsListWrapper {
      border-right: 1px solid #dee2e6 !important;
   }
}

/*the built-in bootstrap class btn-sm is overridden by our custom btn-sgl classes, so I'm adding this in to make a smaller version of the btn-sgl buttons for the upload queue*/
.btn-sgl-sm {
   padding: 0.5rem 0.5rem;
   font-size: .875rem;
   line-height: 1.5;
   border-radius: 0.2rem;
   height: 39px;
}

.revisionWindowWide {
   height: calc(100vh - 283.8px);
   min-height: 300px;
}

.revisionWindowThin {
   margin-bottom: 20px;
}

.revisionHeader {
   z-index: 97;
}

#expand-toolbar-button {
   top: 25px;
   right: 25px;
}

@media (max-width: 992px) {
   #mainContent #browserToolbar {
      height: 4.1rem;
      overflow: hidden;
   }

      #mainContent #browserToolbar.expanded {
         height: auto;
         overflow: unset;
      }

         #mainContent #browserToolbar.expanded #expand-toolbar i {
            rotate: 180deg;
         }

   #FolderBrowserContainer.expanded {
      display: block !important;
      z-index: 99 !important;
      width: 22rem;
      max-width: unset;
   }

   .cardSectionItemsContainer.viewTypeIcons {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }

      .cardSectionItemsContainer.viewTypeIcons .browserCard a.cardImage {
         min-height: 150px;
      }
}

/* Grouped Printer Dropdown */
#custom-dropdown {
   position: relative; /* This makes the dropdown-menu respect the width of it's parent. */
}

   #custom-dropdown .dropdown-menu {
      width: fit-content;
      min-width: 100% !important;
      max-height: 300px;
      top: 100% !important; /* This and the transform keep the menu fixed to the the bottom-start of the button. */
      transform: unset !important;
      overflow: auto;
   }

   #custom-dropdown a {
      color: black !important;
   }

      #custom-dropdown a:hover {
         color: white !important;
         background-color: #0d6efd !important;
      }

      #custom-dropdown a.disabled {
         color: #adb5bd !important;
      }

/* After the printer dropdown's div wraps, we add these to prevent the menu from growing outside of the 
window on smaller screens.  This also makes the max-width of the menu the size of the button/input. */
@media (max-width: 991px) {
   #custom-dropdown .dropdown-item {
      white-space: normal !important;
      word-break: break-all;
   }
}

#custom-dropdown-button {
   background-color: white;
   border: 1px solid rgb(206, 212, 218);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   height: 38px;
   padding-left: 1rem;
   padding-right: 1rem;
}

.group-toggle {
   font-weight: bold;
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
   align-items: center;
   padding-left: 1rem;
}

.printerListPartialViewSelect span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block !important;
}

/* Context menu container */
#browseContextMenu {
   position: fixed !important;
   z-index: 9999;
   min-width: 180px;
   background: white;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: 0.25rem;
   box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
   padding: 0.5rem 0;
}

/* Context menu items */
#browseContextMenu .dropdown-item {
   display: flex;
   align-items: center;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   color: #212529;
   cursor: pointer;
   border: none;
   background: transparent;
   width: 100%;
   text-align: left;
   transition: background-color 0.15s ease-in-out;
}

#browseContextMenu .dropdown-item:hover {
   background-color: #f8f9fa;
   color: #16181b;
}

#browseContextMenu .dropdown-item:active {
   background-color: #e9ecef;
}

#browseContextMenu .dropdown-item i {
   width: 1.5rem;
   text-align: center;
}

#browseContextMenu .dropdown-divider {
   margin: 0.5rem 0;
   border-top: 1px solid #e9ecef;
}

/* Kebab button in card body */
.itemInlineContextMenuButton {
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
   color: #6c757d;
   font-size: 1.2rem;
   line-height: 1;
   border: none;
   background: transparent;
}

.itemInlineContextMenuButton:hover {
   color: #495057;
   text-decoration: none;
}

/* Show kebab button on card hover */
.browserCard:hover .itemInlineContextMenuButton {
   opacity: 1;
}

/* Always show kebab button on touch devices */
@media (hover: none) {
   .itemInlineContextMenuButton {
      opacity: 1;
   }
}

img[src*="forms-icon-temp.svg"] {
   width: auto !important;
}