/** base **/

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #5867dd;
  --secondary: #e1e1ef;
  --success: #0abb87;
  --info: #5578eb;
  --warning: #ffb822;
  --danger: #fd397a;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1399px;
}

body {
  background-color: #F1F3F8 !important;
}

/*********/

.delete-confirmation #inner {
  margin: -2rem 1rem 1rem;
  padding: 1.5rem;
  box-sizing: border-box;
  background-color: white;
  border-radius: 0.25rem;
}
.delete-confirmation #inner p {
  color: var(--danger);
}
.dashboard #inner {
  display: flex;
  flex-wrap: wrap;
}
.dashboard #content {
  width: 100%;
}
.dashboard #content-main {
  float: initial;
}
.dashboard #content-related {
  float: initial;
  margin-right: 0;
  margin-left: 1rem;
  background-color: var(--white) !important;
  border-radius: 0.25rem !important;
}
@media (max-width:1024px) {
  #content {
    padding: 0 !important;
  }
  .dashboard #content {
    padding: 0 !important;
    width: 100% !important;
  }
}
/* LINKS */

a:link, a:visited {
    color: var(--gray);
    text-decoration: none;
}

a:focus, a:hover {
    color: var(--gray-dark);
}

a.section:link, a.section:visited {
    color: var(--gray);
    text-decoration: none;
}

/* FORM BUTTONS */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    background: var(--secondary);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: var(--grey);
    cursor: pointer;
    opacity: 0.8;
}

.button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
.button:hover, input[type=submit]:hover, input[type=button]:hover {
    background: var(--secondary);
    opacity: 1;
}

.button.default, input[type=submit].default, .submit-row input.default {
    float: right;
    border: none;
    font-weight: 400;
    background: #5867dd;
    color: var(--white);
}

.button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover {
    background: var(--primary);
}

/** django **/
.module {
  margin-bottom: .5rem !important;
  border: none !important;
}
.dashboard .module caption {
  background: var(--secondary);
}
//.change-form .module:not(:first-child) {
//  display: none;
//}
.change-form .module > h2 {
  display: none;
}
.change-form .inline-group .tabular td.original p {
  top: 3.25rem;
}

fieldset .collapse-toggle {
  color: var(--gray) !important;
}
.xfull {
  width: 100% !important;
}
.toplinks {
  border: none !important;
}

.object-tools a:focus, .object-tools a:hover {
}

/*#changelist*/ #toolbar {
  margin-right: 0 !important;
  background: transparent !important;
  border: none !important;
}
/*#changelist*/ table {
  border: none !important;
}
/*#changelist*/ thead th {
  background: transparent;
  border-top: none;
  color: var(--gray);
  border-color: var(--light);
}
/*#changelist*/ th, td {
  vertical-align: middle;
  padding: 0.75rem 0.5rem;
  border-color: var(--light);
}
/*#changelist*/ tbody tr:hover td, tbody tr:hover th {
  background-color: var(--light);
}
.row2 {
  background: white;
}
#changelist .actions {
  margin-right: 0 !important;
}
#changelist-form .results {
  margin-right: 0 !important;
}
#changelist-filter {
  //display: none !important;
  width: 100% !important;
  position: relative !important;
}
#changelist-filter h2 {
  display: none;
}

/** juss **/

#container {
  display: flex;
}
#inner {
  margin-top: -3rem;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}
#content > h1 {
  color: var(--white);
  background-color: var(--primary);
  padding: 2rem 2rem 3rem;
  font-size: 1.25rem;
}

#changelist #toolbar form #searchbar {
  padding: 0.4rem 1rem !important;
}
#changelist #toolbar form #searchbar:focus {
  border-color: var(--primary) !important;
}
#changelist #toolbar form input[type="submit"] {
  border: none !important;
  background-color: var(--primary) !important;
  color: var(--white) !important;
  padding: 0.45rem 1.5rem !important;
  margin-right: 0.5rem !important;
}

/** change-form **/
.selector-chosen h2 {
  background-color: var(--gray) !important;
}
.submit-row {
  padding: 0.5rem 0 !important;
  border: none !important;
  background-color: white !important;
  margin: 1rem 0 0 !important;
}

/** common **/

ul.messagelist {
  margin-bottom: 0.25rem !important;
}
ul.messagelist li {
  padding: 1rem;
  background: none;
  border-radius: 0.25rem !important;
  color: var(--light) !important;
}
ul.messagelist li.success {
  background-color: var(--success) !important;
}
ul.messagelist li.info {
  background-color: var(--info) !important;
}
ul.messagelist li.warning {
  background-color: var(--warning) !important;
}
ul.messagelist li.danger {
  background-color: var(--danger) !important;
}



#header2 {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - 280px);
  height: 3.5rem;
  line-height: 2.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--white);
  color: var(--gay-dark);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}
.header_fullwidth {
  width: 100% !important;
}
.header__left {
  display: flex;
  align-items: center;
}
#left_toggle {
  display: flex;
  align-items: center;
}

.breadcrumbs {
  background-color: transparent !important;
  padding: 0 !important;
}
.breadcrumbs a {
  display: inline-block !important;
  padding: 0 0.5rem !important;
  color: var(--gray) !important;
  border-radius: 0.25rem;
  margin: 0 0.5rem;
}
.breadcrumbs a:hover {
  color: var(--primary) !important;
}
/** login page **/
#login-page {
  height: 100vh;
  display: flex;
  align-items: stretch;
}
#login-bg {
  flex: 1;
  background: url(https://images.unsplash.com/photo-1515096788709-a3cf4ce0a4a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1306&q=80);
  background-size: cover;
  background-position: center;
  padding: 4rem;
}
#login-bg h1 {
  letter-spacing: 4px;
}
#login-box {
  width: 400px;
  max-width: 100%;
  padding: 10vh 2rem 2rem;
  box-sizing: border-box;
  background-color: var(--dark);
  color: var(--white);
}
#login-box h2 {
  margin-bottom: 2rem;
}
#login-box h2>small {
  margin-left: 0.5rem;
}
#login-page .form-row label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 16px;
}
#login-page .form-row {
  margin-bottom: 1rem;
}
#login-page input {
  display: block;
  width: 100%;
  padding: 0.35rem 1rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  box-shadow: none;
  border: none;
  color: var(--dark);
}

#login-page .submit-row {
  background-color: transparent !important;
}
#login-page .submit-row input {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}
#login-box .errornote {
  margin-bottom: 1.5rem;
  color: var(--warning) !important;
  font-size: 0.8rem !important;
}
@media (max-width:576px) {
  #login-bg {
    display: none !important;
  }
  #login-box {
    width: 100%;
  }
}
@media (max-width:768px) {
  #container {
    overflow: hidden;
  }
  #left-box {
    //position: fixed;
    //top: 0;
    //left: 0;
    //width: 80%;
    //height: 100vh;
    //z-index: 99;
    display: none;
  }
  #right-box {
    margin-left: 0 !important;
  }
  #header2 {
    height: 3rem;
    line-height: 3rem;
    background-color: var(--primary) !important;
    padding: 0 1rem !important;
    width: 100%;
    overflow: hidden;
  }
  #header2 a {
    color: var(--white) !important;
  }
  #header svg {
    color: var(--white) !important;
  }
  .aligned .form-row > div {
    width: 100% !important;
  }
  #user-tools2{
    display: none !important;
  }
  #content {
    //margin-top: 3.1rem !important;
  }
  #inner {
    padding: 0.5rem;
  }
  #content > h1 {
    padding: 1.5rem 1.5rem 3rem;
  }
  .object-tools {
    top: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
  .object-tools a:link, .object-tools a:visited {
    background-color: var(--secondary) !important;
    color: var(--gray) !important;
  }
  .dashboard #content-main {
    margin-bottom: 1rem;
  }
  .dashboard #content-related {
    margin-left: 0;
  }
  fieldset {
    min-inline-size: auto !important;
  }
}

.juss-tabs {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  margin-bottom: 1rem;
}
.juss-tabs li {
  display: inline-block;
  padding: 0.25rem 1rem 1.2rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--gray);
}
.tab-active {
  color: var(--gray-dark) !important;
  border-color: var(--dark) !important;
}
