/*
    DJANGO Admin styles
*/

div.breadcrumbs { margin-bottom: 20px; } 

/* TEXT STYLES & MODIFIERS */

.small {
    font-size: 11px;
}

.tiny {
    font-size: 10px;
}

p.tiny {
    margin-top: -2px;
}

.mini {
    font-size: 10px;
}

p.mini {
    margin-top: -3px;
}

.help, p.help, form p.help, div.help, form div.help, div.help li {
    font-size: 11px;
    color: #999;
}

div.help ul {
     margin-bottom: 0;
}

.help-tooltip {
    cursor: help;
}

p img, h1 img, h2 img, h3 img, h4 img, td img {
    vertical-align: middle;
}

.quiet, a.quiet:link, a.quiet:visited {
    color: #999;
    font-weight: normal;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.clear {
    clear: both;
}

.align-left {
    text-align: left;
}

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

.example {
    margin: 10px 0;
    padding: 5px 10px;
    background: #efefef;
}

.nowrap {
    white-space: nowrap;
}

/* TABLES */

table {
    border-collapse: collapse;
    border-color: #ccc;
	caption-side: top;
	width: 100%; 
}

caption {
 caption-side:top;
 color: white;
}
caption a {
	color: white; 
}

td, th {

    border-bottom: 1px solid #eee;
    vertical-align: middle;
    padding: 8px;

}

th {
    font-weight: 600;
    text-align: left;
}

thead th,
tfoot td {
    color: #666;
    padding: 5px 10px;
    font-size: 11px;
    background: #fff;
    border: none;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

tfoot td {
    border-bottom: none;
    border-top: 1px solid #eee;
}

thead th.required {
    color: #000;
}

tr.alt {
    background: #f6f6f6;
}


div#content-related { padding-left: 10px; }


/* SORTABLE TABLES */

thead th {
    padding: 5px 10px;
    line-height: normal;
    text-transform: uppercase;
    background: #f6f6f6;
}

thead th a:link, thead th a:visited {
    color: #666;
}

thead th.sorted {
    background: #eee;
}

thead th.sorted .text {
    padding-right: 42px;
}

table thead th .text span {
    padding: 8px 10px;
    display: block;
}

table thead th .text a {
    display: block;
    cursor: pointer;
    padding: 8px 10px;
}

table thead th .text a:focus, table thead th .text a:hover {
    background: #eee;
}

thead th.sorted a.sortremove {
    visibility: hidden;
}

table thead th.sorted:hover a.sortremove {
    visibility: visible;
}

table thead th.sorted .sortoptions {
    display: block;
    padding: 9px 5px 0 5px;
    float: right;
    text-align: right;
}

table thead th.sorted .sortpriority {
    font-size: .8em;
    min-width: 12px;
    text-align: center;
    vertical-align: 3px;
    margin-left: 2px;
    margin-right: 2px;
}

table thead th.sorted .sortoptions a {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../../admin/img/sorting-icons.svg) 0 0 no-repeat;
    background-size: 14px auto;
}

table thead th.sorted .sortoptions a.sortremove {
    background-position: 0 0;
}

table thead th.sorted .sortoptions a.sortremove:after {
    content: '\\';
    position: absolute;
    top: -6px;
    left: 3px;
    font-weight: 200;
    font-size: 18px;
    color: #999;
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
    color: #447e9b;
}

table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
    background-position: 0 -14px;
}

table thead th.sorted .sortoptions a.ascending {
    background-position: 0 -28px;
}

table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
    background-position: 0 -42px;
}

table thead th.sorted .sortoptions a.descending {
    top: 1px;
    background-position: 0 -56px;
}

table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
    background-position: 0 -70px;
}

/* FILTER COLUMN */

#changelist-form { float: left; width: 78%; padding-right: 2%; }

#changelist-filter {
    float:right; 
    z-index: 1000;
    width: 20%;
    background: #f8f8f8;
    border-left: none;
    margin: 0;
}

@media all and (max-width: 1023px) {
	#changelist-form { float: none; width: auto; padding-right: 0px; }
	#changelist-filter { float: none; width: auto; margin-top: 10px; margin-bottom: 10px;  }
}




#changelist-filter h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 15px;
    margin-bottom: 12px;
    border-bottom: none;
}

#changelist-filter h3 {
    font-weight: 400;
    font-size: 14px;
    padding: 0 15px;
    margin-bottom: 10px;
}

#changelist-filter ul {
    margin: 5px 0;
    padding: 0 15px 15px;
    border-bottom: 1px solid #eaeaea;
}

#changelist-filter ul:last-child {
    border-bottom: none;
    padding-bottom: none;
}

#changelist-filter li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

#changelist-filter a {
    display: block;
    color: #999;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

#changelist-filter li.selected {
    border-left: 5px solid #eaeaea;
    padding-left: 10px;
    margin-left: -15px;
}

#changelist-filter li.selected a {
    color: #5b80b2;
}

#changelist-filter a:focus, #changelist-filter a:hover,
#changelist-filter li.selected a:focus,
#changelist-filter li.selected a:hover {
    color: #036;
}


/* MODULES */

.module {
    border: none;
    margin-bottom: 30px;
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 10px;
    padding-right: 10px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul, .module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2, .module caption, .inline-group h2 {
    margin: 0;
    padding: 8px;
    font-weight: 400;
    font-size: 13px;
    text-align: left;
    background: #333333;
    color: #fff;
}

.module caption,
.inline-group h2 {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: none;
}

.module table {
    border-collapse: collapse;
}

/* MESSAGES & ERRORS */


.errornote {
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    color: #ba2121;
    border: 1px solid #ba2121;
    border-radius: 4px;

    background-position: 5px 12px;
}

ul.errorlist {
    margin: 0 0 4px;
    padding: 0;
    color: #ba2121;
    background: #fff;
}

ul.errorlist li {
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

ul.errorlist li:first-child {
    margin-top: 0;
}

ul.errorlist li a {
    color: inherit;
    text-decoration: underline;
}

td ul.errorlist {
    margin: 0;
    padding: 0;
}

td ul.errorlist li {
    margin: 0;
}

.form-row.errors {
    margin: 0;
    border: none;
    border-bottom: 1px solid #eee;
    background: none;
}

.form-row.errors ul.errorlist li {
    padding-left: 0;
}

.errors input, .errors select, .errors textarea {
    border: 1px solid #ba2121;
}

div.system-message {
    background: #ffc;
    margin: 10px;
    padding: 6px 8px;
    font-size: .8em;
}

div.system-message p.system-message-title {
    padding: 4px 5px 4px 25px;
    margin: 0;
    color: #c11;
    background: #ffefef url(../img/icon-no.svg) 5px 5px no-repeat;
}

.description {
    font-size: 12px;
    padding: 5px 0 0 12px;
}

/* BREADCRUMBS */

div.breadcrumbs {
    background: #333333;
    padding: 10px 40px;
    border: none;
    font-size: 14px;
    color: #c4dce8;
    text-align: left;
}

div.breadcrumbs a {
    color: #fff;
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: #c4dce8;
}

/* ACTION ICONS */



.object-tools {
    font-size: 10px;
    font-weight: bold;
    padding-left: 0;
    float: right;
    position: relative;
    margin-top: -62px;
}

.object-tools li {
    display: block;
    float: left;
    margin-left: 5px;
    height: 38px;
}

@media all and (max-width: 767px) {
	.object-tools { float: none; margin-top: 10px; height: 38px; clear: both; }
	input#searchbar { max-width: 50vw; }
}

p.deletelink-box { display: none; }



form input[type="text"] {


  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #363642;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #c6c9d5;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  	padding: 0 .75rem;
	padding-top: .75rem;
    padding-bottom: .75rem;
	box-shadow: inset 0 1px 0 0 rgba(34,34,48,.05);
	font-size: .875rem;
}




/* OBJECT HISTORY */

table#change-history {
    width: 100%;
}

table#change-history tbody th {
    width: 16em;
}



/* COLUMN TYPES */

.colMS {
    margin-right: 300px;
}

.colSM {
    margin-left: 300px;
}

.colSM #content-related {
    float: left;
    margin-right: 0;
    margin-left: -300px;
}

.colSM #content-main {
    float: right;
}

.popup .colM {
    width: auto;
}



#user-tools {
    float: right;
    padding: 0;
    margin: 0 0 0 20px;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: right;
}

#user-tools a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#user-tools a:focus, #user-tools a:hover {
    text-decoration: none;
    border-bottom-color: #333333;
    color: #333333;
}

/* SIDEBAR */

#content-related {

}

#content-related .module {
    background: none;
}

#content-related h3 {
    font-size: 14px;
    color: #666;
    padding: 0 16px;
    margin: 0 0 16px;
}

#content-related h4 {
    font-size: 13px;
}

#content-related p {
    padding-left: 16px;
    padding-right: 16px;
}

#content-related .actionlist {
    padding: 0;
    margin: 16px;
}

#content-related .actionlist li {
    line-height: 1.2;
    margin-bottom: 10px;
    padding-left: 18px;
}

#content-related .module h2 {
    background: none;
    padding: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eaeaea;
    font-size: 18px;
    color: #333;
}

.delete-confirmation form input[type="submit"] {
    background: #ba2121;
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
}

.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover {
    background: #a41515;
}

.delete-confirmation form .cancel-link {
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    line-height: 15px;
    background: #ddd;
    border-radius: 4px;
    padding: 10px 15px;
    color: #333;
    margin: 0 0 0 10px;
}

.delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover {
    background: #ccc;
}

/* POPUP */
.popup #content {
    padding: 20px;
}

.popup #container {
    min-width: 0;
}

.popup #header {
    padding: 10px 20px;
}