/* gsidebar widget main styles */
.gsidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: var(--sidebar-bg);
}
.gsidebar .gsidebar-collapse-button {
  display: block;
  height: 39.2px;
  line-height: 39.2px;
  color: var(--link-fg);
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}
.gsidebar li i.gsidebar-submenu-toggle-button {
  float: right;
  height: 38px;
  line-height: 38px;
  margin-right: 10px;
}
.gsidebar ul a {
  display: block;
  height: 38px;
  line-height: 38px;
  padding-left: 10px;
  background-color: var(--sidebar-bg);
  color: var(--link-fg);
  text-decoration: none;
}
.gsidebar a:hover {
  text-decoration: none;
}
.gsidebar .gsidebar-submenu a {
  padding-left: 35px;
  background-color: var(--sidebar-bg);
}
.gsidebar li.on > a {
  background-color: var(--primary);
}
.gsidebar li.active > a {
  border-right: solid 3px var(--primary);
  background-color: var(--sidebar-bg);
  color: var(--primary);
}
.gsidebar li.active .gsidebar-submenu li.active a {
  border-right: solid 3px var(--primary);
}
.gsidebar li i {
  display: inline-block;
  width: 15px;
  text-align: center;
  margin-right: 10px;
}
.gsidebar ul {
  display: block;
  margin: 0;
  padding: 0;
}
.gsidebar ul li {
  height: auto;
  padding: 0;
  margin: 0;
  list-style-type: none;
  cursor: pointer;
}
.gsidebar .gsidebar-submenu {
  background-color: var(--sidebar-bg);
  display: none;
}
.gsidebar li.open .gsidebar-submenu {
  display: block;
}

/* gsidebar widget collapsed styles */
.gsidebar-collapsed {
  width: 40px;
}

.gsidebar-collapsed > ul {
  overflow-y: unset !important;
}
.gsidebar-collapsed ul li i {
  margin-right: 0;
}
.gsidebar-collapsed ul li {
  height: 39px;
}
.gsidebar-collapsed ul li .gsidebar-submenu a {
  padding-left: 20px;
  text-align: left;
}
.gsidebar-collapsed ul li a {
  padding-left: 0;
  text-align: center;
}
.gsidebar-collapsed li.on .gsidebar-submenu a {
  padding-left: 20px;
  text-align: left;
}
.gsidebar-collapsed .gsidebar-submenu li i {
  display: inline-block;
  width: 15px;
  text-align: center;
  margin-right: 10px;
}
.gsidebar-collapsed .title {
  display: none;
}
.gsidebar-collapsed li i.gsidebar-submenu-toggle-button {
  display: none;
}
.gsidebar-collapsed .gsidebar-submenu {
  position: relative;
  display: none;
  width: 200px;
  z-index: 9999;
  margin-top: -39px;
  margin-left: 41px;
  box-shadow: 0 2px 8px 0 rgba(121, 174, 200, 0.5), 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
.gsidebar-collapsed li.on .gsidebar-submenu {
  display: block;
}
.gsidebar-collapse-button i {
  float: right;
  height: 38px;
  line-height: 38px;
  margin-right: 10px;
  z-index: 2;
}
.gsidebar-collapsed .sidebar-footer,
.gsidebar-collapsed .sidebar-header {
  visibility: hidden;
}

.gsidebar-collapsed > .sidebar-user-panel > div {
  display: none;
}

.gsidebar li.on > a {
  background-color: var(--sidebar-bg);
  color: var(--primary);
}
/* django admin global sidebar fixing styles for other components */
.with-gsidebar #content,
.with-gsidebar div.breadcrumbs,
.with-gsidebar ul.messagelist {
  margin-left: 200px;
}
.with-gsidebar-collapsed #content,
.with-gsidebar-collapsed div.breadcrumbs,
.with-gsidebar-collapsed ul.messagelist {
  margin-left: 40px;
}
/* global style fix */
.with-gsidebar #branding {
  height: 32px;
  line-height: 32px;
}
.with-gsidebar div.breadcrumbs {
  height: 39.2px;
  line-height: 19.2px;
}

.popup #content,
.popup div.breadcrumbs,
.popup ul.messagelist {
  margin-left: 0;
}

/* more customization */
.sidebar-user-panel {
  height: 50px;
}

.sidebar-user-panel a {
  color: var(--sidebar-muted);
}

.sidebar-user-panel > div {
  padding: 4px 16px;
  font-size: smaller;
  text-align: center;
}
.sidebar-header {
  display: block;
  height: 50px;
  text-align: center;
  margin-top: 12px;
  flex-shrink: 0;
}
.sidebar-footer {
  justify-content: flex-end;
  width: 100%;
  padding-left: 1em;
  margin-top: auto;
}
.sidebar-footer > span {
  font-size: xx-small;
  color: var(--sidebar-muted);
  margin-top: 1rem;
}

/* ------------- extended ------------ */

div.breadcrumbs,
.sidebar-user-panel {
  background: unset;
  font-size: 14px;
  color: var(--link-fg);
  z-index: 1;
}

div.breadcrumbs a {
  color: var(--link-fg);
}

div.breadcrumbs a:focus,
div.breadcrumbs a:hover {
  color: var(--primary);
}

.gsidebar > a:not([href]):hover {
  color: var(--primary);
}

#container {
  height: 100vh;
}
#container > .main {
  flex-shrink: unset;
}
#content {
  display: block;
}
.submit-row a {
  height: unset !important;
}

caption {
  caption-side: unset;
}

.admin-nav {
  /* background: #f1f2f6; */
  display: flex;
}
#user-tools {
  font-weight: 500;
  margin-right: 20px;
  display: inline;
  float: unset;
  margin: unset;
}
a:hover {
  color: var(--primary);
  text-decoration: none;
}
a {
  transition: all 0.4s ease;
}
h1 {
  font-size: 2rem;
}
.form-row {
  display: block;
}
tr.form-row {
  display: table-row;
}
.dark-header-inline > h2 {
  background: rgb(27, 27, 27);
}
.btn-form-container {
  display: flex;
}
input.danger[type='submit'] {
  margin-left: 0.8rem !important;
  display: block;
  background: #ba2121;
  border-radius: 4px;
  padding: 10px 15px;
  line-height: 15px;
  color: #fff;
  cursor: pointer;
}
input.danger[type='submit']:hover {
  background: #a41515;
}
td,
th {
  vertical-align: middle;
}