/**
 * Custom CSS rules for Comunica dashboard
 */

body {
  font-size: .875rem;
  overflow-x: hidden;
}

:root {
  --navbar-brand-width: 16rem;
  --navbar-main-height: 3.5rem;
  --navbar-utils-height: 0px;

  --color-primary: #007bff;
  --color-accent: #f78f1e;
  --color-gray-lighter: #fafafa;
  --color-gray-light: #e7e7e7;
  --color-gray-discrete: #999;
  --color-gray-medium: #777;
  --color-gray-dark: #333;
  --color-gray-darker: #272B30;
  --color-gray-darkest: #222;
}

.text-accent {
  color: var(--color-accent) !important;
}

.badge-accent {
    color: #fff;
    background-color: var(--color-accent);
}

/*
 * Login
 */
#com-login {
  position: relative;
  background-color: var(--color-gray-darker);
}

#com-login .card {
  width: 28rem;
  margin-top: calc(50vh - 11rem);
  margin-left: calc(50vw - 14rem);
  margin-right: calc(50vw - 14rem);
}

/*
 * Internal pages
 */
#com-main {
  position: relative;
  background-color: #fefefe;
}

/*
 * Navbar
 */

.navbar-brand {
  width: var(--navbar-brand-width);
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: var(--color-gray-darker);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar-brand.main {
  height: var(--navbar-main-height);
}

.navbar-brand.utils {
  height: var(--navbar-utils-height);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.com-logo {
  height: 40px;
}

.navbar-nav.main {
  width: calc(100vw - var(--navbar-brand-width));
}

.navbar-nav.utils {
  width: var(--navbar-brand-width);
  background-color: rgba(255, 255, 255, .05);
}

.navbar-nav.nav-utils {
  width: calc(100vw - var(--navbar-brand-width));
  background-color: rgba(255, 255, 255, .05);
}

.navbar-dark .navbar-nav .nav-link {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.1em;
  color: var(--color-gray-medium);
}

.navbar-dark .navbar-nav .nav-link i {
  color: var(--color-gray-discrete);
}

.navbar-dark .navbar-nav .nav-link:hover i {
  color: white;
}

.com-modules .nav-link {
    padding-top: 12px;
    padding-bottom: 5px;
}

.navbar-dark .navbar-nav .nav-link.active {
  font-weight: 600;
  color: white;
}

.navbar-dark .navbar-nav .nav-link.active i {
  color: var(--color-accent);
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  background-color: var(--color-gray-darkest);
  padding: calc(var(--navbar-main-height) + var(--navbar-utils-height)) 0 0; /* Height of navbar */
  overflow-x: hidden;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  width: var(--navbar-brand-width);
  height: calc(100vh - var(--navbar-main-height) - var(--navbar-utils-height));
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  padding: 0.125rem 1rem;
  font-size: .9rem;
  font-weight: 400;
  color: var(--color-gray-medium);
}

.sidebar .nav-link i {
  color: var(--color-gray-discrete);
}

.sidebar .nav-link.nav-link-lg {
  padding: 0.5rem 1rem;
}

.sidebar .nav-link.nav-link-lg i {
  font-size: 1.2rem;
}

.sidebar .nav-link:hover, .sidebar .nav-link:hover i {
  color: #fff;
}

.sidebar .nav-link.active i {
  color: var(--color-accent);
}

.sidebar .nav-link.active {
  color: white;
  font-weight: 600;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

.site-selector-sticky {
  position: sticky;
  top: 0px;
  padding: 0.85rem 0.5rem 0.75rem 0.5rem;
  background-color: var(--color-gray-darker);
  color: #eee;
  font-size: .9em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*
 * Footer
 */

#footer-logo-sinapto {
  position: fixed;
  top: calc(100vh - 30px);
  left: calc(100vw - 75px);
}

/*
 * Pages
 */

a.icon-tool {
    color: var(--color-gray-medium);
}

a.icon-tool:visited {
    color: var(--color-gray-medium);
}

a.icon-tool:hover {
    color: black;
    text-decoration: none;
}

a.icon-tool.active {
    color: var(--color-accent) !important;
}

.table-header-tool {
    color: var(--color-primary) !important;
    cursor: pointer;
}

.table-header-tool:visited {
    color: var(--color-primary) !important;
}

.table-header-tool:hover {
    color: black !important;
    text-decoration: none;
}

.table-header-tool.active {
    color: var(--color-accent) !important;
}

.com-contents {
  padding-left: var(--navbar-brand-width);
}

.com-bt {
  border-top: 1px solid lightgray;
}

.com-bl {
  border-left: 1px solid lightgray;
}

.com-br {
  border-right: 1px solid lightgray;
}

.com-bb {
  border-bottom: 1px solid lightgray;
}

.com-table {
  color: var(--color-gray-dark);
}

.com-table th {
  border-top: none;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.com-table tbody tr:last-child {
  border-bottom: 1px solid lightgray;
}

.com-table tbody tr:hover {
  background-color: var(--color-gray-lighter);
}

.com-table td {
  padding: 4px 0;
}

.com-table .tools-col {
  width: 60px;
}

.com-table a {
  color: var(--color-gray-dark);
}

.com-edit-table-row {
  border-bottom: 4px solid white;
  border-top: 4px solid white;
}

.com-edit-table-row:first-child {
  border-bottom: 4px solid white;
}

.com-edit-table-row:last-child {
  border-top: 4px solid white;
}

.com-edit-table-row:hover {
  background-color: var(--color-gray-light);
}

.com-edit-table-row.nohover:hover {
  background-color: initial;
}

.com-edit-table-row td {
  vertical-align: middle;
}

.com-edit-table-row td:first-child:not([colspan="2"]) {
  text-align: right;
  vertical-align: top;
  border-right: 2px solid #888;
}

.com-tooltip .tooltip-inner {
  text-align: left !important;
}

.com-tooltip-large .tooltip-inner {
  max-width: 320px;
  text-align: left !important;
}

.content-dropdown {
  position: relative;
}

.dropdown-ground {
  margin-left: 8px;
  margin-bottom: -5px;
}

.dropdown-ground.margin-dbl {
  margin-left: 16px;
  margin-bottom: -5px;
}

.dropdown-label {
  margin-bottom: -5px;
}

.content-name {
  cursor: pointer;
}

.page_open_close {
  z-index: 999;
  margin-left: 8px;
  cursor: pointer;
}

.content-dropdown .dropdown-toggle {
  position: absolute;
  top: -8px;
  left: 0px;
  z-index: 997;
  border: none;
  padding: 6px 12px 6px 8px;
  font-size: .875rem;
  /* color: var(--color-gray-dark); */
  color: transparent;
  transition: 0s;
}

.content-dropdown .dropdown-toggle:hover {
  border: none;
  color: var(--color-gray-dark);
  background-color: white;
  transition: 0s;
}

.content-dropdown .dropdown-toggle::after {
  color: transparent;
  transition: 0s;
}

.content-dropdown .dropdown-toggle.show-toggle {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  /* background-color: rgba(255, 255, 255, .5); */
  background-color: white;
  padding: 4px 10px 4px 6px;
  transition: 0s;
}

.content-dropdown .dropdown-toggle.show-toggle:active {
  background-color: rgba(255, 255, 255, .5);
  color: var(--color-primary);
}

.content-dropdown .dropdown-toggle.show-toggle::after {
  color: var(--color-primary);
  transition: 0s;
}

.content-dropdown .dropdown-menu {
  z-index: 998;
}

:root {
  --gallery-box-width: 218px;
  --gallery-box-height: 385px;
  --gallery-box-image-height: 120px;
}

.gallery_image_src                    { max-width: var(--gallery-box-width); max-height: var(--gallery-box-image-height); }
.gallery_sortable_box                 { position: relative; width: calc(var(--gallery-box-width) + 18px); height: var(--gallery-box-height); padding: 8px; margin: 4px; float: left; cursor: move; background-color: #f9f9f9; }
.gallery_sortable_box.only_thumbnails { width: calc(var(--gallery-box-width) + 18px); height: calc(var(--gallery-box-image-height) + 18px); }
.gallery_image_box                    { cursor: zoom-in ; width: var(--gallery-box-width); height: var(--gallery-box-image-height); position: absolute; top: 8px; text-align: center; display: flex; align-items: center; justify-content: center; }
.gallery_more                         { cursor: pointer; width: 18px; height: 18px; position: absolute; top: 4px; left: 6px; z-index:999; }
.gallery_more i                       { font-size: 18px; }
.only_thumbnails .gallery_more        { display: initial; }
.gallery_less                         { cursor: pointer; width: 18px; height: 18px; position: absolute; top: 4px; left: 6px; z-index:999; }
.gallery_less i                       { font-size: 18px; }
.only_thumbnails .gallery_less        { display:none; }
.gallery_delete                       { cursor: pointer; width: 18px; height: 18px; position: absolute; top: calc(var(--gallery-box-image-height) - 8px); left: calc(var(--gallery-box-width) - 6px); z-index:999; }
.gallery_delete i                     { font-size: 18px; }
.gallery_filename                     { margin-top: calc(var(--gallery-box-image-height) + 4px); width: var(--gallery-box-width); height: 32px; overflow: hidden; text-align: center; font-size: .75em; }
.gallery_input_seo_alt                { width: var(--gallery-box-width); height: 24px; }
.gallery_input_url                    { width: var(--gallery-box-width); height: 24px; }
.gallery_input_text                   { width: var(--gallery-box-width); height: 24px; }
.only_thumbnails .gallery_details     { display: none; }

.upload-area {
  position: relative;
  padding: 5px;
  border: 5px dashed var(--color-gray-light);
}

.upload-close {
  position: absolute;
  top: 10px;
  left: calc(100% - 28px);
}

.element_title {
  font-weight: 600;
}

#permission-panes .tab-pane {
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
}

.com-subpane {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem 0.5rem;
}