/* DJANGO Admin styles */

/* overrides /static/admin/css/base.css
    font-family: sans-serif, Helvetica, Arial, Verdana;
    font-family: Arial, Helvetica, sans-serif, Verdana;
    font-family: Helvetica, Arial, sans-serif, Verdana;
 */
body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

.fright {
    float: right;
    margin-right: 1.5rem;
}

.text-xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
}


p {
    margin-right: 15%;
}

ul {
    margin-right: 10%;
    margin-left: -4%;
}

hr {
    height: 0.4rem;
    color: var(--hr-gray);
    background-color: var(--hr-gray);
}

.indent {
    margin-left: 2em;
}

#indent1 {
    padding-left: 30px;
    margin-right: 80px;
}

p.centre {
    margin-left: auto !important;
    margin-right: auto !important;
}


#errorlist, li {
    margin-left: 1%;
}


.txt-right {
    text-align: right;
}


#footer {
  background: var(--topfooter-bg);
  text-align: center;
  margin: 0px 0px 0px 0px;

}

#footer a {
  color: var(--accent);
}


#footer a:hover {
  color: var(--header-color);
}

h1 {
    font-weight: 480;
}

h2 {
    margin: 1em 30% 1em 0.8em;
}

h3 {
    margin: .8em 0 0.8em 0;
}

#branding h1 {
    padding: 0;
    font-weight: 400;
    font-size: 24px;
    color: var(--branding);
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: var(--branding);
}

input[name="_addanother"] {
    display: none;
}

.description {
    max-width: 880px;
}

.form-row .readonly {
    max-width: 620px;
}

p.help, .help hr {
    margin-left: -170px;
    margin-right: -120px;
}

.help, p.help {
    max-width: 620px;
}

.help, p.help {
    font-size: 9pt !important;
    color: var(--help-blue) !important;
}

.help p.help sub {
    font-size: 8pt !important;
}

.help li {
    color: var(--help-blue) !important;
    max-width: 680px;
}

.help td {
    padding-top: 0.25em;
    padding-right: 0.0em;
    padding-bottom: 0.25em;
    padding-left: 0.9em;
    vertical-align: bottom;
    font-size: 9pt !important;
    color: var(--help-red)  !important;
}

.help table {
    width: 100%;
}

.help indent {
    margin-left: 44px !important;
}

.help, blockquote li {
    left-margin: 30em;
}

elem {
    color: var(--help-red) !important;
}

elem-light {
    color: var(--help-pink) !important;
}

#user-tools a:focus, #user-tools a:hover {
    color: var(--header-color)
}

#user-tools {
    font-size: 0.75rem;
}


.submit-row [type=submit],
.submit-row [name=_continue],
.submit-row [name=_save]{
    background: var(--default-button-bg);
}

.submit-row [type=submit]:hover,
.submit-row [name=_continue]:hover,
.submit-row [name=_save]:hover {
    background: var(--topfooter-bg);
}


.errorlist li {
    font-size: 10pt !important;
    color: var(--error_red) !important;
    max-width: 100%;
}

sub sup {
    font-size: 8pt !important;
}

/* overrides /static/admin/css/forms.css */

form .wide p, form .wide input + p.help {
    margin-left: 160px !important;
    margin-right: 5% !important;
}

.wide .form-row .vURLField {
    width: 55.1em;
}

.wider .form-row .vURLField {
    width: 55.1em;
}

.wide .vTextField {
    width: 40em;
}

.wider .vTextField {
    width: 42em;
}

.field-cas .vTextField {
    width: 42em;
}

.wider .vIntegerField {
    width: 20em;
}


/** keep the molecular formula looking the same width as .wider fields **/
.field-formula .vTextField {
    width: 34.6em !important;
    font-size: 15px !important;
}

label {
    color: var(--field-label);
    font-size: 9pt;
    font-weight: normal;
}

label sub sup {
    font-size: 8pt !important;
}

.field-box {
    margin-bottom: 1.2em;
}

/* #content-main { margin-right: 0%; } */

#id_dg_class,
#id_un_number,
#id_dg_subrisk,
#id_dg_subrisk2,
#id_label_codes
{
    width: 10.9em;
}

#id_passenger_aircraft,
#id_cargo_aircraft,
#id_vessel_stowage_location,
#id_vessel_stowage_other
{
    width: 18em;
}



.form-row .vURLField {
    width: 55.1em;
}

/*
 * when a URLField has data it is prepended with "Change"
 * and sticks out beyond the others. In which case it gets
 * put in a <p class="url"> so we can adjust it here
 *
 */
p.url .vURLField {
    width: 35.5em;
}

.vLargeTextField {
    width: 42rem;
    height: 10rem;
    max-width: 50rem;
    max-height: 60rem;
}

/** Substance admin None section **/
#id_division { width: 40em; }
#id_name { width: 40em; }
#id_slug { width: 40em; }
#id_attribution { width: 40em; }
/** end of Substance admin None section **/


 /* Dropdown Button */
.dropbtn {
  background-color: var(--body-bg);
  background-color: var(--topheader-bg);
  color: var(--body-bg);
  font-weight: bold;
  padding: 4px 4px 8px 4px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown a {
  color: var(--body-bg);
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--body-bg);
  background-color: var(--topheader-bg);
  color: var(--body-bg);
  /* options are a minimum width */
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--body-font);
  color: var(--body-bg);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
a:hover {
    /*background-color: var(--body-bg);*/
    color: var(--link-hover-color);
    color: var(--button-hover-bg);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown
   content is shown */
.dropdown:hover .dropbtn {
    background-color: var(--topheader-bg);
    color: var(--link-hover-color);
}