/* purgecss start ignore */

/* FRAMEWORK STYLING */
body, html {
  font-family: "Arial", sans-serif;
}

/* START HEADER STYLING */
/* Styling for the logo background. */
a.logo {
  background-color: var(--sidebar-background) !important;
  display: flex !important;
  align-items: center;
}

.main-header .logo {
  height: 55px;
}

.main-header .logo img {
  padding: 0;
}

/* Styling for the help button and sidebar toggle. */
a.help, a.help:visited, a.help:link {
  float: left;
  vertical-align: middle;
  padding: 15px;
  text-decoration: none;
  color: white;
  height: 55px;
  font-size: 1rem;
}
.skin-red .main-header .navbar .nav > li > a:hover, .skin-red .main-header .navbar .nav > li > a:active, .skin-red .main-header .navbar .nav > li > a:focus, .skin-red .main-header .navbar .nav .open > a, .skin-red .main-header .navbar .nav .open > a:hover, .skin-red .main-header .navbar .nav .open > a:focus, .skin-red .main-header .navbar .nav > .active > a {
  background: rgba(0,0,0,0.1);
  border-radius: 0 0 30px 0;
  color: white;
}
/* Shows dropdown user menu without right and correct top padding. */
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  right: 0;
  top: 55px;
  margin-top: 0;
  border-top-width: 1px;
  padding: 0;
}
/* Removes top and bottom padding from user menu section of the header in admin pages. */
.navbar-custom-menu > .navbar-nav > li {
  padding: 0;
}
/* Removes top margin from user menu section of the header in admin pages. */
.navbar-custom-menu > ul {
  margin-top: 0;
}
/* Shows the user image in the middle of the header. */
.navbar-nav > .user-menu .user-image {
  margin-top: 0;
}
/* Corrects the header height on smaller screens. */
.navbar {
  max-height: 105px;
  background: var(--header-background) !important;
  padding: 0;

}

.main-header .navbar {
  border-radius: 0 0 30px 30px;
}

.main-header{
  background-color: rgb(236, 240, 245);
}

.main-header .navbar {
  border-radius: 0 0 30px 30px;
}

.main-header {
  background-color: rgb(236, 240, 245);
}

.adhoc-name {
  padding-right: 15px;
}
/* END HEADER STYLING */

/* START FOOTER STYLING */
.footer-img {
  padding-bottom: 3px;
}

.strong-footer-text {
    display: flex;
    column-gap: 3px;
}

.footer-box {
    display: flex;
    column-gap: 3px;
}

.bv-footer-text {
    margin-bottom: 0px;
}

div.version {
  max-width: 150px;
}
/* END FOOTER STYLING */

/* START SIDEBAR STYLING */
/* Make sure the sidebar is aligned correctly under the header. */
.main-sidebar {
  padding-top: 55px;
  background-color: var(--sidebar-background);
}

.skin-red .wrapper, .skin-red .main-sidebar, .skin-red .left-side {
  background-color: var(--sidebar-background);
}

.skin-red .main-header li.user-header {
  background: var(--header-background);
}

.skin-red .sidebar-menu.tree li:not(.app) a {
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, var(--sidebar-page) 50%);
  background-color: var(--sidebar-background);
  transition: background-position 0.5s ease-out;
}

.skin-red .sidebar-menu.tree li:not(.app) a:hover {
  color: var(--sidebar-page-color, white) !important;
}

.skin-red .sidebar-menu.tree li.app a {
  display: flex;
  align-items: center;
  position: relative;
}

.skin-red .sidebar-menu.tree li.app a::after {
  /*display: block;*/
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 0;
  transition: all .5s;
  color: transparent;
  opacity: 0;
  z-index: -1;
  background-color: var(--sidebar-app);
}
.skin-red .sidebar-menu.tree li.app a:hover {
  opacity: 1;
  background: none;
}

.skin-red .sidebar-menu.tree li.app a:hover::after {
  transition: all .7s;
  opacity: 1;
  height: 40px;
}

.sidebar-menu.tree li.current a {
  background-position: 5px 0;
  transition: 0.2s;
}

/* Animation sidebar menu */
.sidebar-menu.tree li a:hover {
  background-position: -100% 0 !important;
  -webkit-transition: background-position 0.5s ease-out;
  -moz-transition: background-position 0.5s ease-out;
  transition: background-position 0.5s ease-out;
  opacity: 1;
}

.skin-red .sidebar-menu > li > a {
  display: grid;
  grid-template-columns: 1fr 5fr;
  align-items: center;
  padding: 8px 5px 8px 15px;
  border: 0;
  color: white !important;
  opacity: 0.7;
  width: 100%;
}

/* Makes the user information appear next to the avatar on the sidebar. */
.user-panel .info {
  padding: 0;
  left: 65px;
}

.skin-red .sidebar-menu > li {
  display: flex;
  padding: 0;
  height: 40px;
  align-items: center;
}

.skin-red .sidebar-menu > li.header {
  background-color: var(--sidebar-app);
}

.skin-red .sidebar-menu > li span {
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
}

.skin-red .sidebar-menu > li.header span {
  margin-left: 15px;
  color: white;
}

.skin-red .sidebar-menu > li > a > div.logo_div {
  width: 40px;
}

.skin-red .sidebar-menu > li.active_header > div.logo_div {
  width: 30px;
  display: grid;
  place-items: center;
  margin-left: 10px;
}

.skin-red .sidebar-menu > li.active_header > div.logo_div > svg {
  display: inline-block;
}

.skin-red .sidebar-menu > li > a > span.sidebar-item-name {
  margin-left: 42.5px;
}

.skin-red .sidebar-menu > li > a > span.sidebar-item-name.no_margin {
  margin-left: 0;
}
/* END SIDEBAR STYLING */

/* START ADMIN STYLING */
/* Styling for buttons. */
/* Make sure Delete button is not half in admin pages. */
.submit-row p.deletelink-box {
  height: 35px;
}
/* Make sure Delete button is not half and font-size is correct in admin pages. */
.submit-row a.deletelink {
  height: inherit !important;
}
/* Make sure Close button is not half and font-size is correct in admin pages. */
.submit-row a.closelink {
  height: inherit !important;
}
/* Make sure Cancel button is not half in admin pages. */
.delete-confirmation form .cancel-link {
  height: auto !important;
  line-height: inherit !important;
  font-size: 1rem;
}

/* Admin sidebar row */
.sidebar-menu li > a > .pull-right-container {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px
}

/* Corrects top margin (grey line) in admin pages with breadcrumbs. */
.breadcrumb {
  margin-top: 0;
}

.inline-group h2 {
  text-transform: none;
}

/* Edits to show list_filter better. */
/* Removes bottom margin from each admin page and removes the white background. */
#changelist {
  margin-bottom: 0;
  background: none;
}

/* Prevents content floating onto footer. */
#content-main {
  float: none;
}

/* Aligns list filter height with toolbar height. */
#changelist-filter {
  min-height: 49.5px;
}

/* Correct font size of filter options. */
#changelist-filter h3 {
  font-size: 14px;
}

/* Aligns height of searchbar with search button. */
#changelist #toolbar form #searchbar {
  height: 27px;
}

/* Removes bottom margin from actions label to align content better. */
#changelist .actions label {
  margin-bottom: 0;
}

/* Moves list filter between toolbar and actions and adds margins in between on small screens. */
/* See `static/js/hide_unhide_list_filter-1.0.2.js` as well */
@media (max-width: 960px) {
  #changelist {
    display: block;
  }
  #changelist #toolbar {
    width: 100%;
    margin-right: 0;
  }
  #changelist-filter {
    width: 100%;
    margin: 0;
    padding-bottom: 1px;
  }
}

/* Makes sure that admin list tables and fieldsets do not scroll horizontally. */
#result_list tbody td, #result_list tbody th {
  white-space: normal;
}

#result_list tbody th.field-get_filename {
  word-break: break-word;
}

fieldset.module {
  word-break: break-word;
}

a.inlinechangelink {
  word-break: initial;
}

/* Puts the collapse/expand buttons in the vertical middle of the box title. */
.box-header > .box-tools {
  margin: 0;
}

.btn.btn-box-tool {
  margin-bottom: 0;
  line-height: 2em;
}

/* Override dark mode settings with light mode settings. */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: var(--primary);
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--primary);

    --link-fg: #447e9b;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8;
    --selected-bg: #e4e4e4;
    --selected-row: #ffc;

    --close-button-bg: #888;
    --close-button-hover-bg: #747474;
  }
}
/* END ADMIN STYLING */

/* START ALERTS STYLING */
.alert-dismissible {
  transition: opacity 5s ease-in;
}
/* END ALERTS STYLING */

/* START BOX (HEADER) STYLING */
.box {
  box-shadow: 0 -5px 15px 0 #d2d6de;
  border-top: 0;
}

.box-header.with-border {
  background: var(--box-header-background, var(--sidebar-background));
  color: white;
  height: 3.7em;
  padding-left: 20px;
}

.box-header.with-border .box-title {
  line-height: 2em;
}

.box-header .float-right {
  position: absolute;
  right: 5px;
}

h3#page-title {
  width: 100%;
}

.box-header, .box-title {
  display: flex;
}

span.separator {
  display: inline-block;
  overflow: hidden;
}

.box-header .overflow-name {
  white-space: nowrap;
  max-width: calc(100% - 10em);
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

/* In case of update, reduce width of detail link to have space for '/ Update' */
span#detail-link {
  max-width: calc(100% - 16em);
}

a#list-link {
  display: inline-block;
  max-width: 8.5em;
  overflow: hidden;
}

option, select {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.box-header.with-border a {
  color: white;
  text-decoration: underline;
}
/* END BOX (HEADER) STYLING */

/* START FORM STYLING */
/* Makes an icon appear on the left of an input field. */
.form-group .form-control-input-icon {
  padding-left: 2.375rem;
}
.form-group .form-control-icon {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
}

.hidden-left {
  margin-left: -9999px;
}
/* END FORM STYLING */

/* START LOGIN/LOGOUT STYLING */
/* Adds top margin to the Secura logo. */
.login-logo {
  margin-top: 25px;
}

/* Ensure a responsive Secura logo. */
.login-logo img {
  max-height:100%;
  max-width: 470px;
}

/* Corrects the width of the login container. */
.login-container {
  max-width: 500px;
}

.login-container .form-control-icon {
  line-height: 15px;
  padding: 0.7em;
}

.flexsidebar_header {
  flex-direction: row !important;
}

.nonactive_sidebar_header span{
  margin-left: 5px;
}

.login-links {
  padding-left: 0;
}
/* END LOGIN/LOGOUT STYLING */

/* START BUTTON STYLING */
/* Sets min width for button with icon and margin for multiple lines of buttons on mobile devices */
.btn {
  min-width: 60px;
  margin-bottom: 5px;
}

/* Sets the right link colors. */
a, .btn-link {
  color: var(--primary);
}

a:hover, a:active, a:focus, .btn-link:hover, .btn-link:active, .btn-link:focus {
  color: var(--primary-focus);
  text-decoration: none;
}

.btn-dark {
  background-color: var(--sidebar-background);
}

.warning-text {
    color: orange
}

.target-row-width {
    width: 140px
}

.buttons {
  padding-left: 10px;
}
/* END BUTTON STYLING */

/* purgecss end ignore */