/* Copyright 2015-2017 Simplify Solutions */
/* These edits go first because we want the rules from the original style.css file to take precedence. This was achieved before by calling the style.css file after rowan.css. As the files have been merged, we lose the cascading style effect and thus rules lower down in the document take precedence. Search 'BH32TCH' to jump to beginning of the original style.css section. */

/* Bootstrap Glyphicons have been deprecated. For repeating instance buttons use ::before CSS pseudo-elements to insert the relevant glyphs as these can then be changed easily across the board. */

/* quick hide toggle for admin panels/menus */
/* #acting_as_member,
#development_menu,
#diagnostics,
.dashboard_debug,
#last_db_update {
    display: none !important;
}
.dashboard_nav {
    float: right;
    padding-bottom: 15px !important;
}

/* --- TEMP DEVELOPMENT OF LANDING SPLASH --- */
.landing-splash {
    width: 98%;
    margin: 0 auto;
    border-radius: 0;
    padding-bottom: 10px;
    background-image: url('../images/just-friends-2.jpg');
    background-repeat: no-repeat;
    background-size: fixed;
}
.landing-splash .whitebox {
    padding: 20px;
    margin: auto 30px;
    background-color: #fff;
    border-left: 7px solid #74B446;
}
.landing-splash h1 {
    font-size: 3.5em;
    line-height: 50px;
}
.landing-splash p {
    font-weight: 300;
}
/* - NEW FLEXBOX NAV - */
.flex-menu, .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-menu {
    margin-top: 10px;
    background-color: #FFF;
}
.flex-menu a.menu-item {
    border-right: 1px solid #ccc;
    width: 16.666667%;
    height: 7rem;
    transition: border-bottom 0.25s ease-in-out, color 0.25s ease-in-out, width 0.5s ease-in-out;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 5px;
    border-bottom: 8px solid #F6F6F6;
    border-top: 8px solid #F6F6F6;
    background: #F6F6F6;
}
.flex-menu a.menu-item:last-child {
    border-right: none;
}
.flex-menu a.menu-item:hover,
.flex-menu a.menu-item:active {
    color: #4f7931;
    width: 20%;
    text-decoration: none;
    border-bottom: 8px solid #74B446;
    border-top: 8px solid #FFF;
    background: #FFF;
}
.flex-menu .menu-item > div {
    text-align: center;
}
.flex-menu .menu-item em {
    padding-bottom: 2px;
    font-weight: 500;
}
.flex-menu .menu-item span {
    text-transform: lowercase;
    font-size: 0.9em;
    font-weight:300;
    display: block;
}
/* END --- landing splash + flexbox nav --- */

/* admin representing member bar - common features */
.acting-as {
    margin: 0;
    background-color: #fcb0b0;
    padding: 5px 0;
}
.acting-as-member-col { display: inline-block; position: relative; vertical-align: middle; }
.acting-as-contact { position: absolute; top: 18px; left: 4px; font-size: 8px; color: #b06b73; line-height: 1; letter-spacing: .2px; white-space: nowrap; }
/* hide the mobile version in desktop mode */
#acting_as_mobile {
    display: none;
}
#acting_as_mobile .accordion-toggle {
    text-decoration: none;
    display: block;
    width: 100%;
    color: #808080;
}
span.glyphicon-calendar {
    color: #848484;
    font-size: 1em;
}
.nav-search {
    margin-top: 20px;
}
.nav-search input {
    padding: 0 15px;
    border-radius: 15px;
    border: 0;
    height: 30px;
}
#primary_search.input-group .form-control:first-child,
#primary_search .input-group-addon:first-child,
#primary_search .input-group-btn:first-child > .btn,
#primary_search .input-group-btn:first-child > .btn-group > .btn,
#primary_search .input-group-btn:first-child > .dropdown-toggle,
#primary_search .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
#primary_search .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
#primary_search {
    width: 100%;
    transition: width .3s linear;
}
#primary_search input {

    opacity: 0.7;
    transition: opacity 0.8s linear;
}
#primary_search input:hover,
#primary_search input:active,
#primary_search input:focus {
    opacity: 1;
}
#primary_search button {
    padding: 12px 13px;
    color: #7B7B82;
    border-radius: 25px;
    background-color: #bde59e;
    position: absolute;
    right: -13px;
    top: 0;
    transform: translate(0,-9%);
    border: none;
    z-index: 998;
    transition: all .3s;
}
#primary_search button i {
    padding-right: 0;
    text-shadow: 1px 1px 1px #7B7B82;
}
#primary_search button:hover,
#primary_search button:focus,
#primary_search button:active {
    color: #FFF;
    background-color: #619639;
}

/* main menu dropdown */
.header_rgt {
    padding-right: 0;
    padding-left: 10px;
}
.header_rgt li.nav-item {
    margin: 0;
    text-align: center;
}
.header_rgt li.nav-item:first-child,
.header_rgt li.nav-item:nth-child(4) {
    width: 15%;
    max-width: 60px;
}
.header_rgt li.nav-item:nth-child(2) {
    width: 65%;
    max-width: 170px;
}
.header_rgt li.nav-item:nth-child(3) {
    width: 20%;
    max-width: 70px;
}
li.nav-item .messages,
li.nav-item .glyphicon-shopping-cart {
    color: #FFF;
}

/* first li.nav-item daughter element */
.header_rgt > ul > li {
    float: right;
}
.header_rgt li.nav-item > a {
    padding: 30px 0;
    position: relative;
    width: 100%;
}
.header_rgt ul li em {
    top: 50%;
    left: 30%;
    transform: translate(100%, -100%);
}
/* second li.nav-item daughter element */
#top-nav-menu {
    padding: 30px 0;
    position: relative;
    color: #FFF;
    width: 100%;
    text-align: center;
}
#top-nav-menu .glyphicon {
    padding-right: 5%;
}
li.page-help a img {
    height: 20px;
    width: auto;
}
/* initial declarations are for styling in common. */
.dashboard .dropdown-toggle:after,
.dashboard .open .dropdown-toggle:after,
.input-group-btn button::after,
.input-group-btn.open button::after {
    font-family: 'Glyphicons Halflings';
    padding-left: 10px;
    font-size: 0.8em;
    font-weight: normal;
}
/* repeated declarations are to call individual content */
.dashboard .dropdown-toggle:after,
.input-group-btn button.dropdown-toggle::after {
    content: "\e114";
}
.dashboard .open .dropdown-toggle:after,
.input-group-btn.open button::after {
    content: "\e113";
}
.input-group-btn button span.caret {
    display: none; /* hide existing carets in spans to preference this solution without doubling up */
}
/* right hand section of the header */
.header_rgt li.nav-item > a > em {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(10%,-120%);
    padding: 1px 6px;
    border-radius: 100%;
    background: #ffac1c;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}
.header_rgt li.nav-item {
    transition: background-color 0.2s;
}
.header_rgt li.nav-item:hover {
    cursor: pointer;
    background-color: #619937;
}
.dashboard ul.dropdown-menu {
    display: none;
    border-radius: 0 0 5px 5px;
    top: 99%;
    left: 0;
    right: 0;
    min-width: 50%;
}
.dashboard .open .dropdown-menu {
    display: block;
}
.dashboard .dropdown-menu > li {
    display: block;
    margin: 0;
    padding: 0;
}
.dashboard .dropdown-menu > li > a {
    padding: 8px 0 8px 8px;
    display: block;
}
.dashboard .dropdown-menu > li > a span.glyphicon {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #ebebeb;
}
.dashboard .dropdown-menu > li:last-child > a {
    border-radius: 0 0 5px 5px;
}
.dashboard .dropdown-menu > li > a:hover {
    background-color: #619937;
    color: #FFF;
    transition: background-color 0.2s linear;
}

/* hide mobile menu on desktop view */
#mobile-menu,
#mobile-dropdown {
    display: none;
}

/* staged sidebar */
.tracking a:hover {
color: #5E96FF;
}
.slidebar img.icon3 {
    width: 60%;
    height: auto;
}
.slidebar .herd img.icon3 {
    width: 75%;
}
.slidebar .inbreeding img.icon3 {
    width: 55%;
}
.slidebar .members img.icon3 {
    width: 50%;
}
.slidebar .help img.icon3 {
    width: 70%;
}
.slidebar span i {
    color: #fff;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    font-size: 1.7em;
    opacity: 0.8;
}
.slidebar a span i.glyphicon {
    padding: 0;
    margin: 0;
    border-right: none;
}
/* sub-menus */
.menu {
    margin: 5px auto;
    width: 100%;
}
.menu h3 {
    display: inline-block;
}
.menu a {
    margin: 10px 20px;
    display: block;
    width: 100%;
    text-align: center;
}
.menu p {
    clear: left;
    margin: 10px 0;
}
.menu ul li.col-md-4 {
    padding: 0 20px !important;
}
.eventverview {
    border-radius: 2px;
    background-color: #FFF;
    padding: 3px 15px;
    margin: 5px 0;
    display: inline-block;
    border-radius: 5px;
    font-size: 1.1em;
}
.eventverview p {
    margin: 0;
}
ul.functions {
    margin-top: 15px;
}
.functions li {
    text-align: center;
    padding: 10px 0;
}
.functions li a {
    float: none;
    display: inline-block;
}
tr.highlighted {
    background-color: #EEFF00;
}

/*** LINKS/BUTTONS ***/
/* logged in dashboard panel */
.top_icons ul li a:hover div,
.top_icons ul li a:active div {
    background-color: #FFAC1C;
    color: #FFF;
    transition: color 0.2s, background-color 0.2s;
}
.top_icons ul li a figure.anml-trans i {
    top: 40%;
    left: 70%;
    font-size: 100%;
}
.top_icons figure {
    position: relative;
}
.top_icons figure i {
    color: #fff;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6em;
}
.top_icons ul li a:hover small,
.top_icons ul li a:active small {
    border: 3px solid #ffac1c;
    transition: 0.5s;
    box-shadow: none;
}
.fill a/* , .fill a:visited */ {
    color: #74B446;
    transition: 0.25s linear;
}
.fill a:hover/*  , .fill a:active*/ {
    color: #FFAC1C;
}

/** table links/buttons **/
table a, .fill table a {
    color: #1D359A;
}
table a:hover,
table a:focus {
    color: #74B446;
    text-decoration: underline;
}
table a::before {
    margin-top: 2px;
}
.profile-table a.breeding {
    font-size: 0.95em;
    font-style: italic;
    opacity: 0.8;
}
.profile-table a.breeding:hover {
    opacity: 1;
}
/* standard button core default style */
.button, .fill .button {
    border: 2px solid #808080;
    line-height: 15px;
    font-weight: 400;
    line-height: 15px;
    padding: 6px 28px 6px 28px;
    font-family: Roboto, sans-serif;
    border-radius: 20px;
    color: #808080;
    background: none;
    transition: all .2s linear;
    display: inline-block;
}
/* small varient of buttons */
table .button,
.fill table .button,
.small-button,
.fill .small-button {
    color: #808080;
    font-size: 12px;
    padding: 2px 10px;
}

/** Bad data **/
.bad-data-warning {
    color: #a94442;
    background-color: #f2dede;
}

/** button hover-state colours **/
/* common hover/active/focus declarations */
.button:active, .button:hover, .button:focus,
.fill .button:active, .fill .button:hover, .fill .button:focus {
    text-decoration: none;
    color: #FFF;
    cursor: pointer;
}
/* orange (cancel/search/notice) */
.orange-button:hover,
.orange-button:focus {
    border: 2px solid #ffac1c;
    background-color: #ffac1c;
}
/* green (add/link/view) */
.green-button:hover,
.green-button:focus {
    background-color: #74B446;
    border: 2px solid #74B446;
}
/* blue (save) */
.blue-button:hover,
.blue-button:focus {
    background-color: #4fabc6;
    border: 2px solid #4fabc6;
}
/* grey (back) */
.grey-button:hover,
.grey-button:focus {
    background-color: #808080;
    border: 2px solid #808080;
}
/* red (remove/delete/no) */
.red-button:hover,
.red-button:focus {
    background-color: #F45D5D;
    border: 2px solid #F45D5D;
}

/** alernative button states **/
/* these take priority based on flow */
/* limbo (outstanding payment) */
a.limbo-state {
    color: #a94442;
    background-color: #f2dede;
}
/* alert links (links nested in alert boxes) */
.alert a {
    font-weight: bold;
}
.alert-info a {
    color: #002752;
}

/* disabled/readonly */
.button[disabled],
button[disabled]:hover, button[disabled]:active, button[disabled]:focus,
.button[disabled]:hover, .button[disabled]:active, .button[disabled]:focus,
.button.disabled:hover, .button.disabled:active, .button.disabled:focus {
    border: 2px solid #a8a8a8;
    color: #a8a8a8;
    background-color: #e8e8e8;
    opacity: 0.7;
    transition: none;
    cursor: not-allowed;
}
select.form-control[readonly=readonly] {
    cursor: not-allowed;
}
/* typeahead styling override */
.typeahead__container input.disabled, .typeahead__container input[disabled] {
    background-color: #eee;
    opacity: 1;
}

/* alignment behaviour */
.button.pull-right {
    margin-left: 10px;
}

/** button icons **/
.glyphicon-list-alt.reports {
     font-size: 50px;
     vertical-align: middle;
}

/* common icon declarations */
a::before, button::before, a::after, button::after {
    font-family: 'Glyphicons Halflings';
}
a::before, button::before,
a i, button i {
    padding-right: 10px;
    font-size: 12px;
    margin: 0;
}
/* change display characteristics for buttons with only icons - not yet implemented */
a.button.no-text,
button.button.no-text {
    margin: 0 3px;
    float: right;
}
.actions a.button:last-child,
.actions button.button:last-child {
    /* margin-top: 2px; */
    margin-right: 0;
}
.actions .button:nth-child(3) {
    margin: 3px 0;
}
a::after, button::after {
    padding-left: 10px;
}
/* icons */
a.cancel::before,
a.close2::before,
button.close2::before, /* .close2 needed because Bootstrap already uses buttons with .close for modals */
button.cancel::before{
    content: "\e014";
}
a.save::before,
button.save::before {
    content: "\e172";
}
a.reject::before,
button.reject::before {
    content: "\e090";
}
a.pause::before,
button.pause::before {
    content: "\e073";
}
a.back::before,
button.back::before {
    content: "\e091";
}
a.certificate::before,
button.certificate::before {
    content: "\e124";
}
a.next::after,
button.next::after {
    content: "\e092";
}
a.edit::before,
button.edit::before {
    content: "\270f";
}
a.search::before,
button.search::before,
button.search2::before {
    content: "\e003";
}
a.add::before,
button.add::before {
    content: "\002b";
}
a.remove::before,
button.remove::before {
    content: "\e020";
}
a.tick::before,
button.tick::before {
    content: "\e013";
}
a.message::before,
button.message::before {
    content: "\2709";
}
a.video::before,
button.video::before {
    content: "\e009";
}
a.document::before,
button.document::before {
    content: "\e022";
}
button.btn-dload::before,
a.btn-dload::before,
button.download::before,
a.download::before {
    content: "\e166";
}
button.btn-uload::before,
a.btn-uload::before {
    content: "\e167";
}
.actions a.spaced, .actions button.spaced {
    margin-top: 2px;
}
.action .button {
    display: block;
}
/***| button section |***/
/* bottom row of buttons in workflows */
.bottom-button-section {
    border-top: 2px solid #F2F2F2;
    padding: 20px 0;
    margin: 20px 0;
}
/* top row of buttons on some pages */
.top-button-section {
    border-bottom: 1px solid #F2F2F2;
    padding: 0 0 10px 0;
    margin: 0 0 20px 0;
}
.button-section .button.left {
    float: left;
    margin: 0 5px;
}
.button-section .button.right {
    float: right;
    margin: 0 5px;
}
.button-section .button:nth-child(2) {
    margin-left: 15px;
    margin-right: 15px;
}
.no-border {
    border-bottom: none;
    border-top: none;
    border-right: none;
    border-left: none;
}

/* button section nested inside .fill section */
.fill .button-section {
    border-top: none;
    /* margin: 0; */
    padding: 0;
}
/* .fill .button-section .button {
    margin: 15px;
} */

/** misc button/link **/
.button.bright {
    border: 3px solid #ffac1c;
}
.edit-btn {
    margin-top: 25px;
}
.edit-btn {
    float:right;
    padding: 6px 20px;
    position: absolute;
    top: -10px;
    right: 15px;
}
/* Shared positioned box for entry_summary.tt's waybill Edit + opt-in buttons, shown together (unlike a lone .edit-btn,
   which assumes only one button occupies this corner): same corner position as .edit-btn above, laid out as a row. */
.waybill-actions {
    position: absolute;
    top: -10px;
    right: 15px;
    display: flex;
    gap: 10px;
}
.modal-header .close {
    margin: 5px 10px 0 20px;
    font-size: 1.6em;
}
#request_authority_heading {
    margin: -15px 0 0 0;
}
#request_authority button::before {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0,-50%);
    font-size: 1.5em;
}
#request_authority button {
    margin: 20px 0 20px 30px;
    text-align: left;
    padding-left: 65px;
    position: relative;
}
#sending_request span {
    margin-left: 20px;
    color: #999BA6;
}
.updates a:hover h2 {
    color: #FFAD1E;
    transition: color .25s ease-in-out;
}
.updates a:hover span {
    text-decoration: underline;
}
a.list-link {
    padding: 0 0 0 15px;
    background: url(../images/arrow-right.png) no-repeat left center;
    color: #1D359A;
    text-decoration: none;
    display: block;
}
.top_icons a i {
    padding-right: 0;
}
a#reset {
    /* animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite; */
    transition: 0.3s linear;
    color: blue;
    text-decoration: underline;
}
a#reset:hover {
    /* text-decoration: underline; */
    color: #ffac1c;
}
/* @keyframes example {
    0% {color:#808080;}
    25% {color: #74B446;}
    50% {color: #4fabc6}
    75% {color: #74B446;}
    100% {color: #808080;}
    } */

/* related but not a link */
#authority_requested {
    margin: 25px 0 0;
    padding: 20px 20px 20px 50px;
    background: url("../images/green_check_32.png") no-repeat left center;
    border-top: 3px dashed #75B644;
    border-right: 3px dashed #75B644;
    border-bottom: 3px dashed #75B644;
    border-radius: 15px;
    color: #75B644;
    font-size: 1.2em;
}
#request_authority_heading div.form-group {
    margin: 20px 0 0 0;
}
#request_authority_heading div.form-group > * {
    margin: 0;
}
.bulk-edit-7 {
    margin: 0 0 !important;
}
.low {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    margin: 0;
}

/***| profile page(s) |***/
/* edit profile */
.profile {
    width: 240px;
    padding: 40px 20px 20px 20px;
    margin: 15px;
    position: relative;
    box-shadow: 0 0 4px #BFBFBF;
    border-radius: 4px;
    text-align: center;
}
.profile > label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%,0);
    padding: 2px 8px;
    box-shadow: 0 0 4px #BFBFBF;
    border: 1px solid #BFBFBF;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: #F6F6F6;
}
.profilepic {
    width: auto;
    margin: 0 0 20px 0;
}
.profile .placeholder {
    font-size: 4em;
}
.profile .round-window {
    opacity: 0.85;
}
.profile .round-window,
.profile img.profilelogo,
.profile-tile .round-window {
    border: 2px solid #808080;
    padding: 3px;
}
.profile .round-window:hover,
.profile:hover img.profilelogo {
    opacity: 1;
    transition: opacity 0.3s linear;
}
.profile .placeholder span {
    margin-top: 25%;
}
.profile input[name=photo_upload] {
    overflow: hidden;
    width: 100%;
}
/* view member profile */
.profile-tile {
    box-shadow: 0 0 4px #BFBFBF;
    background-color: #FFF;
    position: relative;
}
.profile-tile:first-child {
    border-bottom: 2px solid #808080;
    border-radius: 4px 4px 0 0;
    padding: 10px 10px 20px 10px;
}
.profile-tile:nth-child(2) {
    border-radius: 0 0 4px 4px;
    padding: 20px 10px 10px 10px;
}
.round-window {
    position: relative;
    width: 170px;
    height: 170px;
    max-width: 95%;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #808080;
    transition: 0.2s;
}
.profile img.profilepic,
.profile-tile:first-child img {
    position: absolute;
    top: 50%;
    left: -10px;
    width: 110%;
    transform: translate(0,-50%);
}
.profile-tile:nth-child(2) img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
.profile-tile figcaption {
    position: absolute;
    top: 15px;
    left: -5px;
    padding: 2px 5px;
    box-shadow: 2px 2px 2px #BFBFBF;
    background-color: #FFF;
    border-radius: 0 0 4px 0;
    border: 1px solid #BFBFBF;
}
.profile-tile .generic-icon {
    width: 100%;
    text-align: center;
    border: 2px solid #808080;
    border-radius: 4px;
    opacity: 0.7;
}
.profile-tile .generic-icon i {
    font-size: 3em;
}

.flex .tile {
    padding: 15px;
    text-align: center;
}
.thumbs {
    font-weight: 200;
}
.thumbs .t_text {
    font-weight: 400;
    font-size: 1.2em;
}

/* horizontal padding overrides for nested columns */
.nested {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.message {
    margin: 5px 0;
    font-size: 1em;
    color: #808080;
}
.message span {
    border-bottom: 1px solid red;
}

/* content sections/blocks */
h2.tab_heading {
    border-radius: 10px 10px 0 0;
}
h2.section-heading {
    font-size: 2.5em;
    font-weight: 200;
    letter-spacing: 1px;
    padding: 10px 0 3px 0;
}
h4 {
    margin: 0 0 10px 0;
}
h2 span {
    color: #999999;
}
h2.results_text {
    display: inline-block;
}
.button[id*='print'] {
    margin-top: 20px;
}
.advise,
.fill,
.slimfill,
.summary {
    border-radius: 10px;
    background-color: #F6F6F6;
    position: relative;
}
.fill h2, .fill h3, .fill h4 {
    color: #7B7B82;
}
h2.tab_heading.limbo-state {
    color: #a94442;
    background-color: #f2dede;
}
.fill.limbo-state {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.tabbed {
    border-radius: 0 10px 10px 10px;
}
.advise {
    padding: 10px 0 10px 20px;
    font-weight: bold;
    margin: 0 0 25px 0;
}
.summary {
    margin-top: 0 !important;
}
/* notprod */
table .to {
    display: none !important;
}

/***| utility classes |***/
/** styling **/
.greyed {
    color: #999BA6;
    padding: 0 10px;
}
.red {
    color: red;
}
.blue {
    color: #1D359A;
}
.italic {
    font-style: italic;
}
.uppercase {
    text-transform: uppercase;
}
.bold,
td.bold,
.maintable td.bold {
    font-weight: bold;
}
.underline {
    text-decoration: underline;
}
.reduce {
    font-size: 0.8em !important;
}
.inline {
    display: inline;
}
.text-right {
    text-align: right;
}
/** spacing **/
/* vertical */
/* documentation: b = bottom, t = top, null = both sides (top/bottom) */
.spacer {
    margin-top: 15px;
    margin-bottom: 15px;
}
.spacer-v10 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.spacer-v15 {
    margin-top: 15px;
    margin-bottom: 15px;
}
.spacer-v20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.spacer-b5 {  margin-bottom: 5px; }
.spacer-b10 {  margin-bottom: 10px; }
.spacer-b15 {  margin-bottom: 15px; }
.spacer-b20 {  margin-bottom: 20px; }
.spacer-t5 {  margin-top: 5px; }
.spacer-t10 {  margin-top: 10px; }
.spacer-t15 {  margin-top: 15px; }
.spacer-t20 {  margin-top: 20px; }
/* horizontal */
/* documentation: b = bottom, t = top, null = both sides (top/bottom) */
.spacer-h {
    margin-left: 20px;
    margin-right: 20px;
}
.spacer-h10 {
    margin-left: 10px;
    margin-right: 10px;
}
.spacer-h15 {
    margin-left: 15px;
    margin-right: 15px;
}
.spacer-h20 { /* yes, doubled up */
    margin-left: 20px;
    margin-right: 20px;
}
.spacer-h25 {
    margin-left: 25px;
    margin-right: 25px;
}
.spacer-l10 {  padding-left: 10px; }
.spacer-l15 {  padding-left: 15px; }
.spacer-l20 {  padding-left: 20px; }
.spacer-l25 {  padding-left: 25px; }
.spacer-r10 {  padding-right: 10px; }
.spacer-r15 {  padding-right: 15px; }
.spacer-r20 {  padding-right: 20px; }
.spacer-r25 {  padding-right: 25px; }

/** bordering **/
.border-t {  border-top: 1px solid #DDD !important; }
.border-b {  border-bottom: 1px solid #DDD !important; }
.border-l {  border-left: 1px solid #DDD !important; }
.border-r {  border-right: 1px solid #DDD !important; }

a.sublist {
    display: block;
}
.view_class ul {
    list-style-type: disc;
    padding-left: 30px !important;
}
.view_class ul li {
    padding: 5px 0 5px 5px;
}
#listed1, #listed2, #listed3 {
    padding: 10px 0 10px 20px;
}
.agree {
    margin: 0 20px 20px 50px;
}
.agree ol {
    list-style-type: numeral;
    padding: 20px;
}
.agree ol li {
    padding: 5px 0;
}
.agree ol ol {
    list-style-type: lower-alpha;
    padding-left: 25px;
}
.costfloat {
    font-weight: bold;
    font-size: 1.5em;
    display: block;
    padding: 15px;
}
ol[type=a] {
    list-style-type: lower-alpha;
    padding-left: 25px;
}
ol[type=a] li {
    padding: 5px 0;
}
ol.initial {
    list-style-type: decimal;
    padding-left: 20px;
}

/* main form section */
.form-group {
    margin: 10px 0;
}
.indent {
    margin-left: 50px;
}
input.datepicker {
    background: url("../images/calender.png") no-repeat 95% 50% #FFF;
}
.find_table ul {
    margin-bottom: 20px;
}
.find_table ul li.bold {
    margin: 15px 0 10px;
}
.find_table pre {
    margin: 15px 0 10px;
}
.sub-section {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-left: 1px dotted #B1B1BA;
}
.search_criteria {
    padding: 0 0 0 15px;
}
.fill .search_criteria button {
    padding: 5px 7px;
    text-align: center;
    font-weight: 200;
    border: 2px solid #cccccc;
}
.search_criteria i {
    padding: 0;
    opacity: 0.7;
    transition: 0.25s linear;
}
.search_criteria button:hover i {
    opacity: 1;
}
.search_criteria button:first-child i {
    left: -1px;
}
.search_criteria button:last-child i {
    left: 1px;
}
#inputPens_msdd {
    display: none;
}
.form-section element.style {
    height: auto !important;
    position: auto !important;
}
.form-section .checkbox {
    padding: 10px 0;
}
section.adjust {
    margin: -200px 0 0 0;
}
form #name {
    text-transform: uppercase;
}

/* these are understood as temporary solutions */
.yeanea {
    border-radius: 10px;
    border: 2px solid #eea236;
    text-align: center;
    margin-bottom: 20px;
}
.yeanea div.radio {
    text-align: left;
    margin-left: 50px !important;
    display: inline-block;
}
.yeanea div.radio input {
    margin-left: 0;
    float: none;
}
.yeanea div.radio label {
    padding-left: 0;
}
.optionyeanea {
    border-radius: 10px;
    border: 2px solid #eea236;
    padding: 20px !important;
    margin-bottom: 25px;
}
p.optionyeanea {
    border: none;
    font-weight: bold;
    font-size: 1.4em;
    float: right;
    color: #eea236;
}
/**** end temporary solutions  ****/

.radiogroup {
    display: inline-block;
    width: 100px;
}
.radiogroup label input {
    margin-bottom: auto;
}
label.checked span {
    padding-left: 30px;
}
.nogreen {
    margin: 50px 0 0 0;
    background-color: transparent;
    }
select option {
    padding: 7px 5px;
    border-bottom: 1px solid #EAEAEA;
}
ul.dotpoints, ol.dotpoints {
    list-style-type: disc;
    padding: 0 0 0 4%;
    font-size: 14px;
}
.fill ol.dotpoints {
    list-style-type: decimal;
}
.fill ul.dotpoints li, .fill ol.dotpoints li {
    padding: 10px 0;
}
.fill ul.dotpoints.compact li {
    padding: 2px 0;
}
.request * {
    font-size: 1.3em;
    display: inline-block;
}
.request span {
    color: #74B446;
    padding-left: 15px;
}

/* payment gateway */
.paymock div.centered {
    text-align: center;
    padding: 20px 0;
}
.paymock div.centered button {
    margin: 0 10px;
}
#cc-fill {
    padding: 2% 3%;
    border-radius: 15px;
    border: 2px solid #74B446;
}
#cc-fill i {
    font-size: 2.5em;
    opacity: 0.6;
}
#cc-fill img {
    height: 32px;
    width: auto;
}
#cc-fill button {
    float: right;
    margin: 5px 15px 0 0;
}

/* login screen */
div.login {
    background: #F1F1F1;
}
#login {
    max-width: 400px;
    margin: 0 auto;
    padding: 50px 0;
}
#login h1 {
    text-align: center;
    text-shadow: 0 0 2px #256D04;
}
#login h1 img {
    margin: 0 auto;
}
#login h2 {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0;
}
#login h4.center {
    text-align: center;
}
#login form,
#login .fill {
    background-color: #FFF;
    padding: 20px 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}
#login form .form-group {
    padding: 0;
    margin: 10px 0;
}
#login form label {
    font-weight: normal;
    font-size: 1.3em;
    color: #5F5F5F;
    opacity: 0.8;
}
#login form .form-control {
    line-height: 1.7;
    border: 1px solid #5F5F5F;
    border-radius: 2px;
    height: inherit;
    font-size: 17px;
    letter-spacing: 1px;
    color: #5F5F5F;
}
#login .serial {
    margin: 7px 0 0 0;
}
#login button {
    padding: 5px 25px;
    margin: 0;
    color: #5F5F5F;
    border-radius: 25px;
    background-color: transparent;
    border: 2px solid #5F5F5F;
}
#login button::before {
    content: none;
}
#login button:hover,
#login button:focus {
    background-color: #74B446;
    border: 2px solid #74B446;
    color: #FFF;
    transition: 0.2s linear;
}
#login button i,
#login ul li a i {
    padding-right: 10px;
}
#login ul {
    margin: 10px 0 0 0;
}
#login ul li {
    margin: 5px 0;
    padding: 0;
}
#login ul li a {
    color: #5F5F5F;
}
#login ul li a:hover {
    color: #74B446;
}
#login p {
    margin-bottom: 0;
}
#login form.login-form-1 {
    background: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
}
#login .fill {
    padding: 15px;
}
#login .reset {
    margin-top: 15px;
}
a.login-button {
    display: inline-block;
    padding: 7px 15px;
    border: 2px solid #FFF;
    border-radius: 4px;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    color: #FFF;
    right: 0;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    transition: background-color 0.3s, border 0.3s;
}
a.login-button:hover,
a.login-button:focus {
    background-color: #ffac1c;
    border: 2px solid #ffac1c;
    color: #FFF;
    text-decoration: none;
}

/* prompt box */
section.initial-hi {
    box-shadow: 0px 0px 5px 2px #BDBDC8;
    border: 1px solid #7B7B82;
    margin: 25px 0;
    background: url('../images/paper-texture-02.png') left top;
    background-color: #FFF;
}
section.initial-hi header {
    text-align: center;
    background: none;
    margin: 0 0 20px 0;
}
section.initial-hi h2 {
    margin: 20px 0;
}
section.initial-hi h2:first-child {
    font-weight: 300;
    font-style: italic;
    text-align: left;
}
section.initial-hi .welcome-name {
    color: #337ab7;
    font-style: normal;
}
section.initial-hi h2:nth-child(2) {
    font-size: 2.5em;
    font-weight: 300;
}
section.initial-hi h4 {
    font-weight: 300;
}
section.initial-hi h4 span {
    font-weight: bold;
}
section.initial-hi a.initial-hi {
    margin: 20px auto;
    display: inline-block;
    padding: 10px 28px;
    color: #fff;
    background-color: #E69B19;
    border: 2px solid #E69B19;
    text-shadow: 1px 1px 1px #7B7B82;
    font-size: 1.1em;
}
section.initial-hi a.initial-hi:hover,
section.initial-hi a.initial-hi:active {
    background-color: #FFAC1C;
    border: 2px solid #FFAC1C;
}
section.initial-hi ul {
    list-style-type: disc;
    padding-left: 25px;
    margin: 10px 0;
}
section.initial-hi ul li {
    padding: 0 0 5px 5px;
}

/* checkboxes and radios */
.serial {
    margin: 0 0 0 10px;
}
.login .serial {
    margin: 10px 0;
}
.serial input {
border: none;
float: left;
}
.serial label {
    padding-left: 15px;
}
.maintable td.radio-check .serial {
    padding: 0;
    margin: 0;
    position: relative;
}
.maintable td.radio-check .serial input {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1.2);
}
.maintable td .serial label {
    padding: 0 0 0 20px;
    margin: 0;
}
input[type=checkbox] {
    -webkit-appearance:checkbox;
    -moz-appearance: checkbox;
    appearance:checkbox;
    transform: scale(1.2);
}
input[type=radio] {
    -webkit-appearance:radio;
    -moz-appearance: radio;
    appearance: radio;
    transform: scale(1.2);
}
.radio input[type="radio"] {
    margin-left: 15px;
    position: static;
    float: left;
}
/* Right radio is largely for sales listings */
.right-radio input[type="radio"] {
    margin-left: 15px;
    position: static;
    float: right;
}
.radio.inline {
    display: inline-block;
    margin: 0 10px;
}
.radio.inline label {
    padding-left: 7px;
}
.voting {
    position: relative;
}
div.vote {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0,-50%);
    text-align: center;
}
div.vote label {
    display: block;
    padding: 0;
}
div.vote input {
    float: none;
}
div.checkbox {
    margin: 10px 0 10px 10px;
    padding-left: 20px;
}
div.checkbox label {
    padding-left: 10px;
    margin-top: -5px;
    margin-bottom: 10px;
    font-weight: bold;
}
li div.checkbox {
    margin: 0;
}

/* totals box */
.totals {
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 20px 0;
    padding: 0;
}
#event_entries_section aside.totals:last-of-type {
    margin: 0;
}
.totals p {
    padding: 5px 0;
    margin: 0;
}
.totals p:last-child {
    border-top: 1px solid #5f5f5f;
}
.totals span.sum {
    float: right;
}
span.subscript {
    font-size: 0.8em;
    display: block;
    font-weight: normal;
}
.totals div:last-child {
    border-top: 1px solid #808080;
}
.totals.v2 div:last-child {
    border-top: 1px solid #DDD;
}
.express tr > td.item, .express tr > td.cost {
    vertical-align: middle;
}
.express tr > td.remove {
    text-align: right;
}
ul#by_request_only,
ul.points {
    list-style-type: circle;
    padding-left: 30px;
    margin: 5px 0 20px 0;
}
ul#by_request_only li {
    padding: 3px 0;
}

#termsModal ul.dotpoints li {
    margin: 7px 0;
}
#termsModal ul.dotpoints li.bold, ul.dotpoints li.parent-points {
    list-style-type: none;
}
/*** dpae roles aside ***/
aside.dpae-roles {
    margin: 0;
    padding: 0;
    background-color: #e8e8e8;
    border-radius: 4px;
}
aside.dpae-roles h3 {
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 5px 0;
    background-color: #F6F6F6;
    margin: 15px auto;
    display: inline-block;
    width: 70%;
}
aside.dpae-roles ul label {
    font-weight: normal;
}

/***| progress breadcrumbs in workflows |***/
.progression {
    padding: 2%;
}
.progression p {
    text-align: center;
    margin: 15px 0;
}
.tracking {
    list-style-type: none;
    text-align: center;
    padding: 0 0 3px 0;
    margin: 0 20%;
}
.tracking *[title] {
    text-decoration: none;
}
.tracking li {
    display: inline-block;
    padding: 5px 0;
}
.tracking li a,
.tracking li span {
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid #CCC;
}
.tracking li abbr {
    border-bottom: none;
}
.tracking li del {
    position: relative;
    border-radius: 20px;
    padding: 5px 10px;
    text-decoration: none;
    border-bottom: none;
    opacity: 0.7;
}
.tracking li del::before {
    content: "\e090";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2em;
    opacity: 0.5;
}
.tracking li a { /* 2nd declaration for seperate color property declaration */
    font-weight: bold;
    background-color: #F6F6F6;
    transition: all 0.2s;
}
.tracking li a:hover {
    background-color: #74B446;
    border: 1px solid #74B446;
    color: #FFF;
    text-decoration: none;
}
.progression .covered,
.progression2 .covered {
    color: #0033CC;
}
.progression .current {
    font-weight: bold;
    padding: 0 10px;
    font-size: 1.1em;
}

/***| major page sections |***/
.fill {
    padding: 2% 3%;
    margin: 0 0 12px 0;
}
/* a variant of the above with less padding */
.slimfill {
    padding: 1%;
    margin-bottom: 25px;
}
/* universal declarations for commonly contained elements */
.fill ul {
    padding: 0;
}
.fill ul.dotpoints, .fill .dotpoints {
    padding-left: 25px;
}
.dotpoints ol {
    list-style-type: decimal;
    padding-left: 25px;
}
.view hr {
    margin: 20px 0;
}
div.tab-pane .fill,
.fill.admin {
    padding: 0 2%;
    margin: 0;
}
.fill.admin {
    margin-bottom: 25px;
}
.admin .typeahead__field input {
    border-radius: 4px;
}
.container header {
    background-color: transparent;
}
.trac h2 {
    margin-top: 0;
    color: #884444;
}
.trac h3 {
    color: #000;
}
.trac h5 {
    border-bottom: 1px solid #ddd;
}
.trac .trac-details {
    width: 90%;
    margin: 20px auto;
    text-align: left;
}
.trac .trac-details tr:last-child td {
    border-bottom: 1px solid #ddd;
}
.trac p.description span.italic {
    display: block;
    font-weight: bold;
    margin-top: 10px;
    text-decoration: underline;
}
/* index page condensed view */
/* The following sections were conceived of as replacement to button panels (in events), which get messy when there are too many buttons. It's a simple, organised link list */
.link-list {
    border-right: 1px solid #DDD;
    padding: 0 25px 0 35px;
    margin: 15px 0;
}
.link-list:nth-child(3),
.link-list:last-child {
    border: none;
}
.link-list header {
    padding: 0 0 10px 0;
}
.link-list header h4 {
    padding: 0 0 5px 0;
    margin-bottom: 5px;
}
.link-list header time {
    font-weight: bold;
}
.link-list label {
    margin-top: 10px;
    border-bottom: 1px solid #808080;
}

/* other */
/* .tab-content .tab-pane ul {
    padding: 25px 0;
} */
.tab-content .tab-pane ul:last-child {
    padding-bottom: 0;
}
.tab-content .tab-pane ul li {
    padding: 0;
    text-align: center;
}
.sire-search ul li {
    text-align: left !important;
}
#basic_search ul li {
    text-align: left; /* specific override to above */
}
.debug-typeahead::before {
    content: "DEBUG: ";
    color: #ff0000;
    padding: 0 0 0 25px;
}
.tab-content .tab-pane ul li .form-group,
.tab-content .tab-pane ul li h3 {
    text-align: left;
}
.dashboard_debug {
    padding: 10px 0;
}
.spacing {
    margin: 25px 0 15px;
}
.success_header {
    text-align: center;
    /* padding: 30px; */
}
.success_header h2 {
    margin: 20px 0 0 0;
    padding-bottom: 25px;
    color: #74B446;
    font-weight: 200;
    font-size: 3em;
    border-bottom: 1px solid #E2E2E2;
}
.fill .result {
    margin: 0;
    font-size: 1.2em;
}
.result a {
    text-decoration: underline;
}
.result a.button {
    text-decoration: none; /* specific override to above */
}
div.edit {
    text-align: center;
}
.stat-check {
    text-align: center;
    margin: 25px 0;
}
.stat-check ul {
    margin: 0 auto;
    display: inline-block;
    padding: 20px 25px;
    border-radius: 20px;
    border: 1px solid #808080;
    text-align: left;
    box-shadow: 0 0 3px 2px #CCC inset;
}
.stat-check-result {
    line-height: 40px;
    vertical-align: middle;
}
.tickcross {
    float: left;
    font-size: 2em;
    margin-right: 20px;
    padding-top: 5px;
}
.tickcross.glyphicon-ok {
    color: #74B446;
}
.tickcross.glyphicon-remove {
    color: #F45D5D;
}
.align-lg {
    padding-top: 6px;
}
p.profile-version {
    margin: 15px 0 -15px 0;
}
#my_animals form p:first-child,
section[id*="_search"] form p:first-child, div[id*="_search"] form p:first-child {
    padding: 5px 10px 5px 40px;
    border-radius: 0 4px 4px 4px;
    background-color: #FAFAFA;
    display: inline-block;
    position: relative;
    box-shadow: 2px 2px 2px #828282;
    font-style: italic;
}
#my_animals form p:first-child i,
section[id*="_search"] form p:first-child i, div[id*="_search"] form p:first-child i {
    position: absolute;
    top: -50%;
    left: 10px;
    font-size: 2.5em;
    text-shadow: 0 1px 1px #828282;
    opacity: 0.8;
}



/* target placeholder text with browser prefixes :-(  */
/* https://css-tricks.com/almanac/selectors/p/placeholder/ */
:focus:::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    transition: opacity 0.5s 0.5s ease;
    opacity: 0;
}
:focus:::-moz-placeholder { /* Firefox 19+ */
    transition: opacity 0.5s 0.5s ease;
    opacity: 0;
}
:focus::-ms-input-placeholder { /* IE 10+ */
    transition: opacity 0.5s 0.5s ease;
    opacity: 0;
}
:focus::-moz-placeholder { /* Firefox 18- */
    transition: opacity 0.5s 0.5s ease;
    opacity: 0;
}
:focus::placeholder {
    transition: opacity 0.5s 0.5s ease;
    opacity: 0;
}
/***| display utility classes |***/
.no-padding {
    padding: 0; /* created to override Bootstrap auto-padding added to form-group elements */
}
.no-margin {
    margin: 0 !important;
}
.no-top-margin {
    margin-top: 0;
}
/* convert all existing name and address fields to uppercase */
input.form-control[name*="name"],
input.form-control[name*="address"],
/* td.address, */
input.form-control[name*="herd_prefix"], input.form-control[name*="herd_code"],
input.form-control[id*="herd_prefix"], input.form-control[id*="herd_code"],
input.form-control[id*="_pic"], input.form-control[name*="_pic"] {
    text-transform: uppercase;
}
input.form-control[name*="username"],
input.form-control[name=item_name],
input.form-control[name=award_name],
input.form-control[name=member_name_or_email],
input.form-control[name=class_name],
input.form-control[id=event_name] {
    text-transform: none;
}
.input-group-addon:not([hidden]) + .typeahead__query input[type=search] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* specific small version of the input field for low numbers */
.form-control.narrow-field {
    width: 85px;
}

/* join ealpaca */
ul.benefit {
    list-style-type: circle;
    margin: 0 10px 10px 25px;
    font-size: 1.1em;
}
section.join,
section.landing-page {
    padding: 3% 5%;
}
section.join h1,
section.landing-page h1 {
    text-align: center;
    font-size: 3em;
    font-weight: 200;
    margin: 30px 0 20px 0;
    color: #5f5f5f;
    border-bottom: 1px solid #808080;
    padding: 0 0 20px 0;
}
section.join h1 span,
section.landing-page h1 span {
    color: #74b446;
    font-weight: 300;
    font-size: 1.1em;
    font-style: italic;
}
section.join a.button {
    background: #F6F6F6;
}
section.join a.button:hover,
section.join a.button:focus {
    background: #74b446;
}
#fun_fact {
    box-shadow: 2px 2px 2px #CCC;
    border-radius: 4px;
    background-color: #EFEFEF;
    margin: 20px 0;
    padding: 0;
}
#fun_fact header {
    padding: 20px 40px 0 85px;
    text-align: center;
}
#fun_fact header h4 {
    font-size: 1.5em;
    font-weight: 400;
    border-bottom: 1px solid #CCC;
    padding: 0 0 5px 0;
    letter-spacing: 2px;
}
#fun_fact main {
    position: relative;
    padding: 0 40px 40px 85px;
}
#fun_fact img {
    float: left;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-35%,-80%);
    box-shadow: 1px 1px 1px #CCC;
}
#fun_fact q {
    font-size: 1.1em;
    font-style: italic;
}
#aaa_logo {
    float: right;
    padding: 15px;
    text-align: right;
}
/* more visible warnings */
.alert.bright-warning,
.fill .alert-warning {
    border: 2px solid #ffac1c;
    display: inline-block;
}
.alert.bright-warning a {
    color: blue;
    transition: 0.25s ease-in-out;
}
.alert.bright-warning a:hover, .alert.bright-warning a:active {
    color: #ffac1c;
}
section.landing-page > p {
    font-size: 1.2em;
}
#shadow {
    background: #beef97;
    border-radius: 30px;
    padding: 15px;
    display: inline-block;
    text-align: center;
}
#shadow a {
    transition: 0.25s;
}
#shadow a:hover {
    box-shadow: 0 0 0 3px #578730;
}

/* section sorting draggable elements */
.section-sorting li span.ui-icon.ui-icon-arrow-4 {
    display: inline-block;
    position: relative;
    top: 2px;
}
.section-sorting li span.col1 {
    width: 74%;
}
.section-sorting .ui-icon {
    display: inline-block;
}
.section-selection > div > div {
    margin: 0 0 15px 0;
}
.section-selection ul {
    padding-left: 20px;
}

/* modal window for help */
.modal-header,
.modal-footer {
    background-color: #e5e5e5;
}
.modal-header {
    border-radius: 6px 6px 0 0;
}
.modal-header h2 {
    font-weight: 300;
    font-size: 2em;
}
.modal-body.aas ul, .modal-body.aas ol {
    padding-left: 20px;
}
.modal-body.aas > ul {
    list-style-type: disc;
}
.modal-body.aas > ul li > ul {
    list-style-type: circle;
}
.modal-body.aas > ul li > ul li > ul {
    list-style-type: square;
    margin: 7px 0;
}
.modal-body.aas > ul li > ul li > ol {
    margin: 7px 0;
}
.modal-body.aas ol {
    list-style-type: lower-roman;
}
.modal-body.aas > ul > li {
    font-weight: bold;
    margin-top: 15px;
}
.modal-body.aas > ul.standard > li {
    font-weight: normal;
}
.modal-body.aas > ul > li:first-of-type {
    margin-top: 0;
}
.modal-body.aas > ul li.parent ul li {
    font-weight: normal;
    margin-top: 0;
}
.modal-body.aas > ul li.parent {
    list-style-type: none;
    margin-top: 5px;
}
.modal-body p {
    margin: 0 15px 15px 15px;
}
.modal-body.help p.bold {
    margin-bottom: 0;
}
.modal-footer {
    border-radius: 0 0 6px 6px;
}
/* pedigree carousel */
/* general */

#sire_gen_1, #dam_gen_1, #sire_gen_2, #dam_gen_2, #sire_gen_3, #dam_gen_3 {
    position: relative;
}

.pedigree2 {
    font-family: Roboto, sans-serif;
}
.pedigree2.fill {
    padding: 0 30px;
}
.pedigree2 .pedigree-card {
    width: 300px;
    height: 210px;
    margin: auto;
    border-radius: 2px;
    background-color: #EAEAEA;
    padding: 0 0 20px 0;
    border: 1px solid #DBDBDB;
    position: relative;
}
.pedigree2 .pedigree-card h5 {
    font-weight: normal;
    font-size: 1.4em;
    color: #74B446;
    text-transform: uppercase;
    background-color: #FFF;
    border-bottom: 1px solid #DBDBDB;
    margin: 0;
    position: relative;
    height: 68px;
}
.pedigree2 .pedigree-card h5 a {
    color: #74B446;
    display: block;
    padding: 15px 20px 10px 20px;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}
.pedigree2 .pedigree-card h5 a:hover,
.pedigree2 .pedigree-card h5 a:active {
    text-decoration: underline;
}
.pedigree-card:not([data-ea-animal-id])::after {
    content: "/";
    font-size: 3em;
    color: #5f5f5f;
    opacity: 0.25;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pedigree-card:not([data-ea-animal-id]):hover {
    box-shadow: none;
    transition: none;
}
.pedigree-card > a {
    color: #5f5f5f;
}
.pedigree-card > a:hover,
.pedigree-card > a:active {
    text-decoration: none;
    color: #5f5f5f;
}
.pedigree-card ul {
    padding: 0;
    margin: 0;
}
.pedigree-card ul li {
    padding: 0 20px;
    margin: 5px 0;
}
.generation-3 ul li.one-line {
    padding: 0;
}
.pedigree2 .pedigree-card ul li span {
    line-height: 1em;
    font-size: 14px;
}
.pedigree-card img.breed {
    height: 30px;
    width: auto;
}
.pedigree2 .pedigree-card ul li > span:nth-child(2),
.pedigree2 .pedigree-card ul li > span:nth-child(3) {
    margin-left: 10px;
}
.pedigree-card:hover {
    box-shadow: 0 0 24px -3px rgba(0,0,0,0.75);
    transition: all ease-in-out .3s;
}
.pedigree2 .pedigree-card li.stripe {
    position: absolute;
    height: 40px;
    display: flex;
    align-items: center;
    bottom: 0;
}
.pedigree-card .stripe div {
    opacity: 0.7;
}
.pedigree-card .stripe div.col-xs-6 {
    text-align: center;
}
.pedigree-card .status {
    padding: 2px 5px;
    border-radius: 5px;
    color: #FFF;
    text-transform: uppercase;
}
.pedigree-card .status.active {
    background-color: #74B446;
}
.pedigree-card .status.dead {
    background-color: #74B446;
}
.pedigree-card .status.inactive,
.pedigree-card .status[class*="incomplete"] {
    background-color: #999999;
}
.pedigree-card .status.dead {
    background-color: #B44650;
}

.generation-0, .generation-1, .generation-2, .generation-3 {
    padding: 0;
}

/* Generation 0 */
.gen-zero-case.generation-0 .pedigree-card {
    margin-top: 445px;
    background-color: #DEDEDE;
    padding: 0 0 20px 0;
    border: 1px solid #BBBBBB;
}
.gen-zero-case.generation-0 .pedigree-card h5 {
    background-color: #F6F6F6;
    font-weight: bold;
}

/* Normal generation 1 */
.generation-1 .pedigree-card {
    margin-top: 180px;
}
.generation-1 div:nth-child(2) .pedigree-card {
    margin-top: 410px;
}

/* Generation 1 when generation 0 is displayed */
.gen-zero-case.generation-1 .pedigree-card {
    margin-top: 180px;
}
.gen-zero-case.generation-1 div:nth-child(2) .pedigree-card {
    margin-top: 320px;
}

/* Normal generation 2 */
.generation-2 .pedigree-card:first-child {
    margin-top: 75px;
    margin-bottom: 20px;
}
.generation-2 div:nth-child(2) .pedigree-card:first-child {
    margin-top: 180px;
    margin-bottom: 20px;
}

/* Generation 2 when generation 0 is displayed */
.gen-zero-case.generation-2 .pedigree-card:first-child {
    margin-top: 45px;
    margin-bottom: 40px;
}
.gen-zero-case.generation-2 div:nth-child(1) .pedigree-card:first-child {
    margin-top: 40px;
    margin-bottom: 40px;
}
.gen-zero-case.generation-2 div:nth-child(1) .pedigree-card:nth-child(2) {
    margin-top: 55px;
    margin-bottom: 40px;
}
.gen-zero-case.generation-2 div:nth-child(2) .pedigree-card:first-child {
    margin-top: 45px;
    margin-bottom: 40px;
}
.gen-zero-case.generation-2 div:nth-child(2) .pedigree-card:nth-child(2) {
    margin-top: 70px;
    margin-bottom: 40px;
}

/* Normal generation 3 */
.generation-3 .pedigree-card:first-child {
    margin-top: 20px;
}
.generation-3 .pedigree-card:nth-child(3),
.generation-3 .pedigree-card:nth-child(7) {
    margin-top: 65px;
}
.generation-3 .pedigree-card:nth-child(4) {
    margin-bottom: 60px;
}
.generation-3 .pedigree-card {
    height: 112px;
    margin-bottom: 20px;
}
.generation-3 .pedigree-card h5 {
    height: 53px;
    font-size: 1.3em;
}
.generation-3 .pedigree-card h5 a {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.generation-3 .pedigree-card li {
    margin: 0;
}
.generation-3 .pedigree-card li.one-line {
    padding-top: 2px;
}
.generation-3 .pedigree-card li.stripe {
    transform: scale(1,0.7);
}
.generation-3 .pedigree-card li.stripe > div {
    transform: scale(0.7,1);
}
.generation-3 .pedigree-card li.one-line {
    text-align: center;
}
.generation-3 .pedigree-card li.one-line span {
    padding-right: 5px;
}

/* new pedigree navigation buttons */
#pedigree {
    position: relative;
}
.ped-nav {
    position: absolute;
    padding: 25px 0;
    border-radius: 20px;
    background-color: #FFF;
    font-size: 2.5em;
    border: 2px solid #4fabc6;
    z-index: 1001;
    color: #4fabc6;
    opacity: 0.6;
}
.ped-nav i {
    padding: 0 0 10px 0;
    font-size: 80%;
    vertical-align: middle;
}
.ped-left {
    left: 0;
    top: 50%;
    transform: translate(-50%,-50%);
}
.ped-right {
    right: 0;
}
.ped-up {
    top: 25%;
    transform: translate(50%,-50%);
}
.ped-down {
    top: 75%;
    transform: translate(50%,-50%);
}
.ped-nav:hover,
.ped-nav:focus,
.ped-nav:active {
    background-color: #4fabc6;
    color: #FFF;
    transition: all 0.25s linear;
    opacity: 1;
}
.ped-up[disabled], .ped-down[disabled] {
    opacity: 0.1;
}
button.ped-nav.ped-left[disabled] {
    opacity: 0.1 !important;
}
.ped-up[disabled]:hover, .ped-down[disabled]:hover {
    color: #4fabc6;
    background-color: #FFF;
    transition: none;
    opacity: 0.1;
}
button.ped-nav.ped-left[disabled]:hover {
    background-color: #FFF !important;
    color: #4fabc6 !important;
    transition: none;
    opacity: 0.1 !important;
}
.pedigree_block a:link, a:hover, a:visited, a:active { /* TODO: This doesn't seem to work? */
  text-decoration:none;
  /* color: #5f5f5f;  was causing too many overrides */
}

/* ----- end pedigree2 styles ----- */

#progeny {
    padding-bottom: 0;
}
#progeny p {
    padding: 20px 30px;
}
#progeny table {
    margin-bottom: 0;
}
.green {
    color: #74B446;
}
.orange {
    color: #ffac1c;
}
.no-tab.green {
    font-weight: 500 !important;
    border-bottom: 1px solid #f3f3f3;
    padding: 0 0 15px 0;
    margin: 0 auto;
}
.modal-dialog {
    width: 60%;
    margin: 50px auto 0 auto;
}
pre {
    padding: 10px 20px;
    background-color: #FCFCFC;
    border-radius: 2px;
}

/** validation states, alerts **/
.alert ul {
    list-style-type: disc;
    padding-left: 20px;
}
.form-group .alert {
    margin: 5px 0;
}
/* CSS sprites - Country of origin flags */
/* Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */
.flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../images/flags.png') no-repeat;
}
.flag.flag-gb { background-position: -96px -32px;}
.flag.flag-bo { background-position: -64px 0;}
.flag.flag-ec { background-position: -64px -32px;}
.flag.flag-py { background-position: -32px -96px;}
.flag.flag-pe { background-position: -64px -64px;}
.flag.flag-us { background-position: -64px -96px;}
.flag.flag-nz { background-position: -32px -64px;}
.flag.flag-ca { background-position: -96px 0;}
.flag.flag-cl { background-position: 0 -32px;}
.flag.flag-ar { background-position: 0 0;}
.flag.flag-au { background-position: -32px 0;}
.flag.flag-nl { background-position: 0 -64px;}
.flag.flag-pk { background-position: 0 -96px;}
.flag.flag-co { background-position: -32px -32px;}
.flag.flag-pg { background-position: -96px -64px;}

/* bulk declaration of common properties */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote,th,td,
.header_in, .dashboard, .slidebar, .slidebar ul, .slidebar ul li a,
.header_rgt ul, .header_rgt ul li a, .header_rgt ul li em,
.logo, .logo a, .logo a img,
.search_button,
.dashboard_in, .dashboard_nav, .dashboard_nav ul li a, .dashboard_nav ul li.last,
.top_icons, .top_icons ul li, .top_icons ul li a, .top_icons ul li a div,
.upadates_lft, .upadates_lft h2, .upadates_rgt, .upadates_rgt h2,
.content, .content_in, .content_in h4, .tab_in,
.tab_nav ul,
.event_history_in ul li, .event_history .details ul li, .event_history .details ul li a, .tot_reg_top ul, #progress-bar,
.menu_icon, .chart, .col-xs-12 .member_details ul li a {
    margin: 0;
    padding: 0;
}
.header_in {
    position: relative;
}
hr {
  border-top: 1px solid #ccc;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style-type:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
}
/* alternative to the 'tabbed' heading */
h3.borderline, h4.borderline {
   border-bottom: 1px solid #f3f3f3;
   padding-bottom: 5px;
   margin: 10px 0;
}
q:before,q:after {
  content:'';
}
abbr,acronym {
  border:0;
}
.clear {
  clear:both;
  font-size:1px;
  line-height:1px;
  display:block;
  height:0;
}

/* No Safari, we do NOT want your little contacts insertion on our non-contact inputs */
/* TODO: Need to work out how to turn this on for contact fields #notprod */
input[autocomplete="off"]::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

/**************************************************************************************/
a {
    color: #5f5f5f;
    text-decoration: none;
}
a:hover {
    color: #74B446;
  text-decoration: underline;
  cursor:pointer;
}
h1 {
    padding: 0 0 12px;
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 20px;
    color: #74b446;
    font-weight: 500;
    border-bottom: 1px solid #f3f3f3;
}
h1 span {
    color: #5f5f5f;
}
h2 { font-size:22px; }
h3 { font-size:18px; } /* yes, these are the same size */
h4 { font-size:18px; } /* yes, these are the same size */
h5 { font-size:14px; }
h6 { font-size:12px; }

/*----------------------------------------------------------------------------------*/

body {
  color: #5f5f5f;
  font-family: Roboto, 'Open Sans', sans-serif;
  font-size:14px;
}
p {
    margin: 0 0 10px;
}


/* --------layout-------*/
.wrapper {
    margin: 0 auto;
    width: 100%;
}
.container {
    margin: 0 auto;
}

/* ----- HEADER-SECTION ------*/
header {
    margin: 0;
    display: block;
    background: #74b446;
}
.logo {
    padding: 10px 0px 0 0;
    display: inline-block;
}
.logo img {
    width: 170px;
    height: auto;
    display: block;
}
.logo-caption {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: serif;
    color: #FFF;
    font-size: 1em;
    padding: 1px 0;
    width: 170px;
    text-align: right;
    border-top: 1px solid #FFF;
    line-height: 0.8;
    margin: -7px 0 0 0;
}
.logo a:hover {
    color: #FFF;
    text-decoration: none;
}
.header_rgt {
    float: right;
    display: inline-block;
    margin: 0;
}
.header_rgt ul li {
    display: inline-block;
}
.nav-item img {
    transition: background-color 0.2s ease-in 0s;
}
.header_rgt ul li a {
    display: inline-block;
    position: relative;
}

.fill .panel {
    background-color: transparent;
    margin: 20px 0 20px 15px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.fill .panel-heading {
    padding: 0;
    border: none;
}
.fill .panel-heading h4 {

}
.fill .panel-heading a.collapsed {
    display: block;
    color: #808080;
    transition: 0.25s linear;
}
.fill .panel-heading a:hover, .fill .panel-heading a:active, .fill .panel-heading a {
    text-decoration: none;
    color: #74B446;
}
.fill .panel-body ul, .fill .panel-body ul li {
    padding: 0;
}


/* -------BANNER-SECTION--------*/
.dashboard {
  display:block;
  position:relative;
}
.slidebar {
  float:none;
  position:absolute;
  top:52px;
  left:14px;
  width:auto;
  z-index:999;
}
.slidebar ul {
  display:block;
  float:left;
  text-align:center;
}
.slidebar ul li {
  padding: 0 0 10px 0;
  display:block;
}
.slidebar ul li a {
  display:inline-block;
  text-decoration:none;
}
.slidebar ul li a span {
    padding: 10px 0;
    margin: 0;
    display: inline-block;
    background: #74b446;
    border-radius: 5px;
    width: 55px;
    height: 53px;
    position: relative;
}
.slidebar ul li.members a span {
    padding-top: 14px;
}
.slidebar ul li.help a span {
    padding-top: 7px;
}
.slidebar ul li a span img {
  margin:0 auto;
  display:block;
}
.slidebar ul li a small {
  font-size:12px;
  line-height:16px;
  color:#272727;
  font-weight:400;
  text-align:center;
  display:block;
  padding:0;
}
.slidebar ul li a span:hover,.slidebar ul li a span.active {
  background:#ffac1c;
}
.dashboard_in {
  display:block;
}
.dashboard_debug ul {
    margin: 0;
    float: left;
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    color: #f00;
    font-weight: 400;
    text-decoration: none;
}
.dashboard_nav ul {
    padding: 15px 0 0;
    margin: 0;
    float: right;
    display: inline-block;
}
.dashboard_nav ul li {
    padding: 0 10px 0 0;
    margin: 0 8px 0 0;
    float: left;
    display: inline-block;
    background: url(../images/arrow-right.png) no-repeat right center;
}
.dashboard_nav ul li a {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    color: #272727;
    font-weight: 400;
    text-decoration: none;
}
.dashboard_nav ul li a:hover,.dashboard_nav ul li a.active {
    color: #74b446;
}
.dashboard_nav ul li.last {
    background: none;
}
#pagination {
    display: inline-block;
    margin: 0;
}
#pagination p {
    font-size: 1.1em;
    font-weight: bold;
    border-left: 2px solid #CCC;
    border-right: 2px solid #CCC;
    display: inline-block;
    padding: 0 10px;
    margin: 0;
}
#pagination p span {
    color: #999999;
}
.top_bg {
  padding:23px 0 20px;
  display:block;
  background:#f6f6f6;
  border-bottom:2px solid #efefef;
  border-radius:5px;
}
.top_icons ul {
  display:inline-block;
  margin: 0 auto;
  padding:0 0 0 40px;
}
.top_icons ul li {
  float:left;
  display:inline-block !important;
}
.top_icons ul li a {
    display: inline-block;
}
.top_icons > ul.center {
    padding: 0;
}
.top_icons ul.center li {
    width: 50%;
    display: block;
}
.top_icons ul.center li a {
    display: block;
    margin: 0 auto;
}

.top_icons ul.center li a.lhs,
.top_icons ul.center li a.rhs {
    margin: 0 0 0 20%;
}
.top_icons ul.center li a.lhs small,
.top_icons ul.center li a.rhs small {
      left: 23%;
      max-width: 300px;
}
.top_icons ul li a div {
  width:60px;
  height:60px;
  border-radius:100%;
  background:#5f5f5f;
  display:table;
  position:relative;
  z-index: 999;
}
.top_icons ul li a div figure {
  display:table-cell;
  vertical-align:middle;
}
.top_icons ul li a div img {
  display:block;
  margin:0 auto;
}
.top_icons ul li a small {
  padding: 4px 0 4px 18px;
  border: 3px solid #ececec;
  width: 55%;
  display:block;
  position: absolute;
  z-index: 998;
  top: 50%;
  left: 35px;
  transform: translate(0, -50%);
  text-align:center;
  font-size:14px;
  line-height:16px;
  color:#272727;
  font-weight:400;
  text-decoration:none;
  background:#ececec;
  border-radius:5px;
  box-shadow: 0px 0px 2px 1px #5F5F5F;
}
.top_icons ul li.last {
  margin:0;
}

/* updates redesign */
section.update,
aside.poll {
    margin: 30px 0;
}
.update > section,
.update .centre-strip > div {
    padding: 0;
    text-align: center;
}
.update h3 {
    text-transform: uppercase;
    font-size: 15px;
    color: #5F6381;
    font-weight: 500;
    letter-spacing: 1px;
}
.update .button {
    margin: 15px 0;
    border:2px solid #b9b9b9;
    box-shadow: 0px 0px 2px #5F5F5F;
}
.update .centre-strip > div > a {
    display: block;
    width: 100%;
    color: #74B446;
    text-decoration: none;
    transition: 0.25s ease;
}
.update .centre-strip > div > a:hover {
    color: #FFAC1C;
    text-decoration: underline;
}
.update .integer {
    font-size: 4em;
    letter-spacing: -5px;
    text-align: right;
    width: 40%;
    float: left;
}
.update .integer p {
    margin: -20px 0 0 0;
    vertical-align: text-top;
    padding: 15px 10px 0 0;
}
.update .integer-text {
    color: #5f5f5f;
    position: relative;
    float: left;
    text-align: left;
    width: 60%;
    height: 70px;
}
.update .integer-text span {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0,-50%);
}

/* -------CONTENT-SECTION --------*/
.content_in h4 {
  font-size:20px;
  line-height:24px;
  color:#74b446;
  border-bottom:2px solid #f3f3f3;
}
.tab_section {
  margin:0;
  padding: 0;
}
.tab_cont .anim_prof_in ul li {
    float: none;
    text-align: left;
}
.tab_nav {
  margin:0 0 21px;
  padding:0;
  border-bottom:solid 2px #f3f3f3;
}
.tab_nav ul {
  display:inline-block;
}
.tab_nav ul li {
  float:left;
  display:inline-block;
  margin:0 31px 0 0;
  padding:0;
}
.tab_nav ul li a {
  font-size:18px;
  color:#cececd;
  font-weight:500;
  display:inline-block;
  border-bottom: solid 2px #FFF;
}
.tab_nav ul li a:hover,
.public-search .tab_nav ul li a:hover,
.public-search .tab_nav ul li.active a {
  color:#74b446;
  border-bottom:solid 2px #74b446;
}
.search .tab_cont {
    padding: 2% 4%;
}
.public-search .tab_nav ul li a {
    border-bottom: solid 2px #CCC;
}

/* homepage financial reports section */
.index-tabs .tab_cont {
    padding: 0 3% 2% 3%;
}
#financial a {
    font-weight: 300;
    font-size: 1em;
    transition: 0.25s linear;
    opacity: 0.8;
    color: #808080;
}
#financial a:hover, #financial a:active {
    opacity: 1;
    color: #74B446;
    text-decoration: none;
}
#financial a p {
    margin: 0;
    text-transform: uppercase;
    font-weight: bold;
}
.button.search {
    position: absolute;
    bottom: 15px;
}
.button.search2 {
    display: block;
}
.nav-tabs {
  border:none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border:none;
  color:#74b446;
  border-bottom:solid 2px #74b446;
}
.nav-tabs > li > a:hover {
  border:none;
}
.nav > li > a:hover,.nav > li > a:focus {
  background:none;
}
.nav-tabs > li > a {
  border:none;
  margin:0;
}
.last1 {
  margin-right:0!important;
}

/* ---------FOOTER-SECTION ----------*/
footer {
  padding:36px 0 0;
  margin:0;
  display:block;
}
.footer_in {
  padding:23px 0 20px;
  border-top:solid 3px #f6f6f6;
}
.footer_in p {
  color:#c0c0c0;
  text-align:center;
}

/* ------------------------ Profile page HERE --------------*/
.anim_prof {
    margin-top: 24px;
    padding: 0;
}
.anim_prof h4 {
    font-size: 20px;
    color: #74b446;
    padding: 0 0 6px;
    margin: 0 0 19px;
    font-weight: 500;
    line-height: 20px;
    border-bottom: 2px solid #f3f3f3;
}
#upcoming h4,
#recent h4 {
    color: #74b446;
}
.schedule {
  width:330px;
  margin:0 auto;
  display:block;
  text-align:center;
}
.menu_icon {
  display:none;
  position:absolute;
  top:50px;
  left:10px;
  cursor:pointer;
}
.menu_icon a {
  display:inline-block;
}
.tab_heading {
  margin:0 0 -1px 0;
  padding:60px 0 0;
}
h2.tab_heading {
  padding:10px 35px 10px 20px;
  font-size:1.5em;
  line-height:20px;
  color:#74B446;
  font-weight:bold;
  background:#f6f6f6;
  display:inline-block;
}

/* Start styling of jquery typeahead widget */
.typeahead__result {
    max-height: 280px; /* #notprod Using this may break on mobile devices; issue with max-height */
    overflow-y: auto;
}
.typeahead__container {
    font-size: 16px;
    padding: 0;
}
.typeahead__dropdown, .content .typeahead__list {
    position: relative;
}
.typeahead__item strong {
    font-weight: bold;
}
ul.typeahead__list > li.typeahead__item > a {
    text-align: left;
    margin: inherit;
    font-size: 0.9em;
    line-height: inherit;
    border: inherit;
    background: inherit;
    text-decoration: none;
    border-radius: inherit;
    float: none;
    display: inherit;
    border: medium none;
    color: #5f5f5f;
    font-weight: normal;
    outline: medium none;
    padding: 10px 3%;
    width: 100%;
}
ul.typeahead__list > li.typeahead__item > a:hover {
    border: none;
    background: inherit;
    transition: inherit;
    background-color: #f5f5f5;
    color: #3c3c3c;
}
ul.typeahead__list > li.active > a {
    background-color: #f5f5f5;
    color: #3c3c3c;
}
ul.typeahead__list > li.typeahead__item {
    margin-bottom: 0;
}
/* typeahead input field styling overrides */
#ps_prefix {
    border-radius: 4px 0 0 4px;
}
.typeahead__field input {
    border-radius: 4px;
}
.input-group .typeahead__field input.form-control {
    border-radius: 0 4px 4px 0 !important;
}
/* dev environment only - database last updated strip */
#last_db_update {
    margin: 0;
    display: block;
    background-color: #BDE59E;
    padding: 5px 0;
}


/* get rid of the number 'spinner' for input[type=number] */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
input[type=number] {
    -moz-appearance: textfield;
}

/** overrides and styling for tables **/
.view table.express td {
    background-color: #FFFFFF;
}
/* alignment */
td, th,
.group-heading th {
    text-align: center !important; /* setting default alignment for tables */
}
th.cria_name, td.cria_name,
th.dam_name, td.dam_name,
th.sire_name, td.sire_name,
th.name, td.name,
th.member_name, td.member_name,
th.animal_name, td.animal_name,
th.animal_owner, td.animal_owner,
th.member_name, td.member_name,
th.description, td.description,
th.details, td.details,
th.address, td.address,
th.number, td.number,
.deets table th, .deets table td,
.dna table th, .dna table td,
.item,
.profile-table td,
.transparent-lined td {
    text-align: left !important; /* exceptions to the centering rule */
}
.profile-table td.bold,
td.right, th.right,
.dna table th:last-child, .dna table td:last-child,
.cost,
.row_cost,
.row_cost,
.cost,
.fee,
.text-right {
    text-align: right !important; /* exceptions to the centering rule */
}
.table-bordered > thead > tr > th.cost,
.table-bordered > thead > tr > th.row_cost,
.table-bordered > thead > tr > th.fee,
.table > thead > tr > th.cost,
.table > tbody > tr > td.row_cost,
.table > tbody > tr > td.cost,
.table > tbody > tr > td.fee {
    padding-right: 20px;
}
.maintable th.half, .maintable td.half {
    width: 50%;
}
td.cria_name,
td.animal_name,
td.name {
    background: #f6f6f6;
    min-width: 170px;
    width: 25%;
    padding-left: 5px !important;
}
.entry_table td.animal_name,
#sire_authority_table .animal_name {
    width: auto;
}

/* generic handling of input fields in tables */
td .form-control {
    width: auto;
    margin: 0 auto; /* centering of input fields by default. Consistent with default td centering in general */
}
td.region_name .form-control {
    width: 80%;
}
/* specific overrides - left aligning */
td.item .form-control,
td.email .form-control {
    margin: 0;
    width: 100%;
}
/* control the width of input groups in tables - right aligned for costs */
td.cost .input-group,
td.fee .input-group {
    width: 110px;
    float: right;
}
/* Control width of input[type=number] field on change_fees page */
#change_fees table td.age input[type=number],
#change_fees table td.count input[type=number] {
    width: 50px;
}
td.cost input.form-control::before {
    content: "$";
}
#change_fees table td.fee input[type=number] {
    width: 70px;
}
#change_fees table td.external-gl-code input {
    width: 100px;
}
#change_fees table th.description,
#change_fees table td.description {
    width: 30%;
}
/* admin animal edit table */
table.table-striped tbody > tr.edited {
    color: #3c763d;
    background-color: #dff0d8;
}

#admin_animal_edit_table .edit > div:first-child {
    padding-left: 0;
}
#admin_animal_edit_table .edit > div:last-child {
    padding-right: 0;
}
#admin_animal_edit_table .edit .form-control {
    width: 100%;
}
#admin_animal_edit_table .edit .input-group-addon {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
table.maintable th {
  background-color:#f6f6f6;
  margin:0;
  font-size:14px;
  line-height:16px;
  color:#5f5f5f;
  font-weight:500;
  height:44px;
}
.dna th {
    color: #000;
}
tr.green th {
  color:#74b446;
}
.herd tbody td,
.maintable tbody td {
  color:#5f5f5f;
}
th.remove .tablesorter-header-inner,
th.remove_col .tablesorter-header-inner,
th.actions .tablesorter-header-inner {
    display: none;
}
tr.highlighted > td {
    background-color: #DFF0D8;
}
.maintable td {
  font-weight:500;
  vertical-align:middle !important;
  height:44px;
}
.radio-check,
.first_th {
    background: #DDD !important;
    border: none;
    width: 3%;
    padding: 0;
}
td.namespace,
th.herd-code,
td.herd-code {
    min-width: 170px;
    width: 25%;
}
table.sire_authority td.sire_name {
    min-width: 170px;
    width: 25%;
}
.cria_et,
.cria_sex,
.reg_cost {
    width: 2%;
}
.cria_iar,
.cria_birth_date,
.cria_breed,
.cria_colour,
.dam_iar,
.sire_iar,
.sire_n_o,
.reg_info,
.edit_col,
.cancel_col,
.request-in-progress .ref-no {
     width: 5%;
}
.dam_name,
.sire_name,
.request-in-progress .status,
.request-in-progress .await-from,
.request-in-progress .next-action,
.request-in-progress .last-updated {
    width: 10%;
}
table.halter-fleece td.cria_name,
th.details, td.details
 {
    width: 40%;
}
.shearing, .fleece, .cria_age {
    /* width: 70px; */
    min-width: 50px;
}
.cria_birth_date,
.cria_breed,
.cria_colour,
.sire_n_o {
    padding: 0 5px 0 0;
}
.registration,
.reg_cost,
.dam_name,
.sire_name,
.group-heading .cria,
.group-heading .dam,
.group-heading .sire,
#registration-summary .cost {
    border-left: 2px solid #EBEBEB;
}
th.dam {
    border-left:2px solid #EBEBEB;
    border-right:2px solid #EBEBEB;
}
.group-heading .cria,
.group-heading .dam,
.group-heading .sire,
.group-heading .registration {
    background-color: #eaeaea;
}
table .row_cost,
table .cost,
table .cost_3,
table th.remove, table td.remove,
table th.quantity, table td.quantity {
    min-width: 70px;
}
th.nominee, td.nominee,
th.animal_sex, td.animal_sex,
th.animal_status, td.animal_status {
    width: 100px;
}
th.voting, td.voting {
    width: 130px;
}
table th.quantity,
table td.quantity {
    width: 10%;
}
td.quantity .form-control {
    width: 70px;
}
table th.remove, table td.remove {
    min-width: 100px;
}
th.admin_edit_name, td.admin_edit_name {
    width: 15%;
}
th.admin_edit_sex,
td.admin_edit_sex {
    width: 7%;
}
th.admin_edit_event_type, td.admin_edit_event_type,
th.admin_edit_class_type, td.admin_edit_class_type,
th.admin_edit_fleece_type, td.admin_edit_fleece_type,
th.admin_edit_colour1, td.admin_edit_colour1,
th.admin_edit_colour2, td.admin_edit_colour2,
th.admin_edit_ages, td.admin_edit_ages,
th.admin_edit_active, td.admin_edit_active {
    width: 11%;
}
table.admin_edit_classes th {
    background-color: #EFFAE8;
    text-align: center;
}
table.table-embedded {
    background-color: #FFF;
    border-top: 2px solid #DDD;
}
table.herd-table-embedded {
    border-left: none !important;
    border-right: none !important;
    background-color: #FFF;
}
table.herd-table-embedded th {
    background-color: #F9F9F9;
}

table.maintable {
    border: 1px solid #ddd;
    overflow: scroll;
}
 .table > tbody > tr > td.remove,
.table > tbody > tr > td.add {
    text-align: right;
    vertical-align: middle;
}
#event_entries_summary th.bold,
#event_entries_summary td.bold,
.event-entry-halter {
    border-right: 1px solid #ddd;
}
#event_entries_summary td:first-child {
    text-align: left; /* specific override for the above */
}
#event_content tr td:first-child {
    width: 20%;
    min-width: 150px;
}
/* Override Bootstrap table-striped stripe order */
.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #fff;
}
.table-striped > tbody > tr:nth-of-type(2n+2) {
    background-color: #f9f9f9;
}
.exhibits input {
    max-width: 70px;
    margin: 0 auto;
}
thead tr.green th {
    color: #74b446;
    font-weight: bold;
}
table.herd {
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}
table.sire-authority {
    border-top: 2px solid #ddd;
}
table.sire-authority tbody > tr > td,
.my-animals table tbody > tr > td,
.warning-line > td {
    vertical-align: middle;
}
.warning-line > td > p {
    margin: 0;
    padding: 0;
    color: #a94442;
}
.radio-check {
    background-color: #EFEFEF;
}
.first_th {
    background-color: #EFEFEF;
}
td.animal_id p:nth-child(2) {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 34px;
}
td.animal_id p:nth-child(3) {
    letter-spacing: 0.5px;
}
td.animal_id p:nth-child(4) {
    font-style: italic;
}
.table.authority,
table.summary td:nth-child(2) {
    background-color: #FFF;
}
table.summary {
    width: auto;
    margin: 20px 0;
}
.entry_table .table-h th {
    font-size: 1.2em;
    text-align: center;
    background-color: #E8E8E8;
}
.entry_table .table-h th span {
    color: #ffac1c;
    text-transform: uppercase;
}
.entry_table td.animal_name {
    vertical-align: middle;
    background-color: #E8E8E8;
}
.deets table tr > td:first-child {
    width: 20%;
}
.view .deets .table > thead > tr > th,
.view .deets .table > tbody > tr > th,
.view .deets .table > tfoot > tr > th,
.view .deets .table > thead > tr > td,
.view .deets .table > tbody > tr > td,
.view .deets .table > tfoot > tr > td {
    border-top: none;
}
/* save horizontal space for animal register tables */
.animal_register.table > thead > tr > th,
.animal_register.table > tbody > tr > th,
.animal_register.table > thead > tr > td,
.animal_register.table > tbody > tr > td {
    padding: 8px 2px;
}

.table_parent.col-xs-12 {
    margin: 30px 0;
}
.table_parent.col-sm-10 {
    margin: 0 auto;
}
#upcoming .table_parent.col-xs-12 {
    margin: 10px 0;
}
.table_parent.nospace,
.table_parent.nospace table {
    margin: 0;
}
.table_parent {
    padding: 0;
    float: none;
}
table.payment .sum {
    width: 10%;
    min-width: 100px;
    border-left: 1px solid #DDD;
    text-align: right;
}
table.payment td.sum {
    font-weight: bold;
}
.dna table {
    margin-bottom: 40px;
}

.dna table thead th {
    background-color: #D3D3D3;
}
div.tablesorter-header-inner:hover {
    cursor: pointer;
}
div.tablesorter-header-inner::after {
    font-family: 'Glyphicons Halflings';
    padding-left: 5px;
    font-size: 0.8em;
    content: "\e252";
}
.tablesorter-headerUnSorted div::after {
    color: #B5B5B5;
}
.tablesorter-headerDesc div::after {
    color: #FFAC1C;
}
.tablesorter-headerAsc div::after {
    font-family: 'Glyphicons Halflings';
    padding-left: 5px;
    font-size: 0.8em;
    content: "\e253";
    color: #FFAC1C;
}

.sorter-false > div.tablesorter-header-inner::after{
    content:none;
}

.sorter-false > div.tablesorter-header-inner:hover{
    cursor: text !important;
}

/* animal profile table (orginally designed for this) */
.profile-table {
    margin: 20px 0;
}
.summary-table:nth-child(2) td.bold {
    width: 150px;
}
.profile-table td {
    border: none !important;
    vertical-align: middle !important;
}
tr.import-from td:last-child span {
    vertical-align: middle;
}
div.fail_wrap       {  border: 2px solid #E0163B;  }
div.warning_wrap    {  border: 2px solid #FFAC1C;  }
div.success_wrap    {  border: 2px solid #74B446;  }
div[class*="_wrap"] {
    margin-top: 10px;
    margin-bottom: 25px;
    min-width: 990px;
}
div[class*="_wrap"] .alert {
    margin: 0;
}
div.warning_wrap table tr.green th {
    color: #d68a08; /* this colour is not green but burnt orange */
}
table.warning-table,
table.success-table,
.zeromargin,
.table_parent.col-xs-12.zeromargin {
    margin: 0;
}
/*table.success-table .tablesorter-header div::after {
    display: none;
}*/
.table_parent > .success-table {
    margin-top: 25px;
}
/* system table */
table.system {
    border: 1px solid #5F5F5F;
}
tr.pink-bg {
    background-color: #F7EDED;
}
table.system td.address {
    border-top: 1px solid #5F5F5F;
}
table.system td.method,
table.system td.route {
    color: #888896;
    padding-left: 30px;
    font-weight: 400;
}

/* temporary */
table.system td.redtext {
    color: #D6403E;
    font-weight: bold;
}

/* results search & event results tables */
#results_table_class .class_name_row {
    background-color: ;
}
#results_table_class .event_class_ages {
    font-weight: normal;
}
#results_table_class .animal_name {
    width: 30%;
}
#results_table_class td.animal_name {
    background: none;
}
table.event-result td.event_dates {
    padding-left: 20px;
    background:url(../images/calender.png) no-repeat center left;
}

/* misc table related */
#sortable {
    padding: 15px;
}
#sortable .ui-sortable-handle {
    padding: 5px;
    margin: 5px;
    border-radius: 4px;
    border: 1px solid #DDD;
    transition: background-color .25s;
}
#sortable .ui-sortable-handle:hover {
    background-color: #EEE;
    cursor: move;
}
#sortable .special_classes { /* @rowan - pls fix :) */
    background-color: #CCE4FF;
}
.name a:hover {
    text-decoration: underline;
    color: #74B446;
}
.manual_stripe_1 {
    background-color: #f9f9f9;
}
.manual_stripe_2 {
    background-color: #fff;
}
.manual_stripe_2 td.cria_name {
    background-color: #FFF;
}

.manual_stripe_1.dirty-row, .manual_stripe_2.dirty-row {
    background-color: #fbf9e5;
}
.manual_stripe_1.row-error.dirty-row, .manual_stripe_2.row-error.dirty-row {
    background-color: #ffdbdb;
    box-shadow: 0 0 3px 2px #fc0202 inset;
}
.row-error .has-error .form-control {
    box-shadow: 0 0 2px 2px #fc0202 inset;
}
.fail_wrap .manual_stripe_1,
.fail_wrap .manual_stripe_2 {
    border-top: 1px solid #DDD;
}
.fail_wrap tr:nth-child(2n+0) td {
    border-bottom: 1px solid #595959;
}
td.tick i {
    padding-left: 15px;
}
.nominee {
    width: 20%;
    min-width: 80px;
}
.request-in-progress .date-created {
    width: 15%;
}
.request-in-progress .type {
    width: 14%;
}
.request-in-progress .description {
    width: 20%;
}
.request-in-progress .edit-col {
    width: 6%;
}

/* help/sitemap page */
.fill.help {
    padding-left: 7%;
}
.help ul {
    padding-left: 5px;
}
.help ul li {
    margin: 0 0 12px;
    padding: 0 0 0 15px;
}
.help li a {
    color: #1D359A;
    text-decoration: none;
}
.help li:not(:has(hr))::before {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    font-size: 0.8em;
    padding-right: 10px;
    display: inline-block;
    width: 1em; /* consistent spacing */
}
.help li a.intext-sitemap::before {
    display: none;
}
.help li a:hover,
.help li a:focus {
    color: #74B446;
}

/* miscellaneous */
ul.transaction_details_list {
    padding-left: 20px;
}
.transaction_details_list li {
    padding: 5px 0;
}
.table_animal_transfer_buyer tr td:nth-child(2) {
  padding-left: 20px;
  font-weight: bold;
}
.table_parent .authority th {
  background-color: pink;
}
.heads-up {
    bottom: 0;
    left: 15px;
    border: 1px solid #BBB;
    background: #CCC;
    border-radius: 0 0 3px 3px;
    padding: 3px 10px;
    display: inline-block;
}
.heads-up span {
    font-weight: bold;
}

/* linebreeding calculator */
.co-efficient {
    padding: 20px;
    font-size: 1.1em;
}
.co-efficient .pre {
    font-size: 1.3em;
    letter-spacing: 1px;
    text-decoration: underline;
}
.co-efficient .pre span {
    font-weight: bold;
}
.co-efficient li {
    vertical-align: middle;
}
.co-efficient li {
    font-weight: 400;
    font-size: 1.1em;
}
.co-efficient .percentage {
    font-size: 1.5em;
}
.co-efficient .percentage.red {
    color: #b00202;
}
.co-efficient .percentage.green {
    color: #74B446;
}
.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile + label {
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    color: #d3394c;
    font-size: 16px;
    height: 28px;
    line-height: 16px;
    outline: medium none;
    padding: 0 !important;
    margin-bottom: 12px;
    width: 240px;
    font-weight: normal !important;
    border: 2px solid #b9b9b9;
    background-color: #fcfcfc;
}
.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}
.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
    border-color: #722040;
    border: 2px solid #b9b9b9;
}
.inputfile + label span {
    width: 8em;
    min-height: 28px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    padding: 6px 0 4px 5px;
}
.inputfile + label strong {
    color: #f1e5e6;
    display: inline;
    width: 120px;
    line-height: 26px;
    height: 26px;
    padding: 4px 18px 4px 8px;
    background-color: #74b446;
}
.inputfile:focus + label strong,
.inputfile.has-focus + label strong,
.inputfile + label:hover strong {
    background-color: #ffac1c;
}

/* Alertify customizations */
.alertify.my-breed {
    border: 2px solid #b9b9b9;
    border-radius: 8px;
    color: #808080;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.alertify.my-breed .alertify-dialog {
    padding: 20px;
}
.col-xs-12 .member_details ul li {
  padding: 20px 0 0 0;
  color: #5f5f5f;
  font-size: 15px;
}
button.loginButton {
    padding: 0.2em 1em;
}
.login h1 {
    border-radius: 3px;
    font-size: 2.1em;
    padding: 0.4em 0.8em 0.2em;
    background: #74b446;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.login h1 span {
    margin-bottom: 0.5em;
    display: inline-block;
    font-size: 1.1em;
    color: #fff;
}
.login h1 img {
    display: block;
    padding-bottom: 0.6em;
}

form[name="animal-register-new-form"] .recipient-dam-fields {
    display: none;
}
.app-error h2 {
    color: #74b446;
    font-size: 16px;
    margin-bottom: 12px;
}
.app-error div {
    display: block;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    padding: 0 0 8px;
}
#server-error {
    display: none;
}
#system_trac {
    text-align: center;
}
#system_trac #wrapper {
    float: left;
    display: inline-block;
    padding: 0 15px;
    text-align: center;
}
#system_trac .numberCircle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 4px solid #666;
    vertical-align: middle;
    position: relative;
    transition: background-color 0.3s linear;
}
#system_trac a:hover .numberCircle {
    background-color: #F45D5D;
    border: 4px solid #666;
    color: #FFF;
}
#system_trac .numberCircle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#system_trac .name {
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 300;
    transition: font-weight 0.3s linear;
}
#system_trac a:hover .name {
    font-weight: bold;
    color: #666;
}

/* privacy settings box */
.privacy {
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
}
.privacy > label::before {
    font-family: 'Glyphicons Halflings';
    content: "\e033";
    padding-right: 10px;
    opacity: 0.7;
}
.privacy-sm {
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    display: inline-block;
}
.privacy-sm i {
    float: left;
    padding-right: 10px;
    opacity: 0.7;
    font-size: 1.2em;
}
.privacy-sm .radio-inline label {
    margin: 0;
}

/* Start styling of jquery tablesorter widget (https://mottie.github.io/tablesorter/docs/index.html) */

/* From theme.default.css */

/* header */
.tablesorter-default th,
.tablesorter-default thead td {
    font-weight: bold;
    color: #000;
    background-color: #fff;
    border-collapse: collapse;
    border-bottom: #ccc 2px solid;
    padding: 0;
}
table#fixTable.tablesorter thead tr th.first_th {
        background-image: inherit;
}
.tablesorter-default tfoot th,
.tablesorter-default tfoot td {
    border: 0;
}

/* tfoot */
.tablesorter-default tfoot .tablesorter-headerSortUp,
.tablesorter-default tfoot .tablesorter-headerSortDown,
.tablesorter-default tfoot .tablesorter-headerAsc,
.tablesorter-default tfoot .tablesorter-headerDesc {
    border-top: #000 2px solid;
}
/* Zebra Widget - row alternating colors */
.tablesorter-default tr.odd > td {
    background-color: #dfdfdf;
}
.tablesorter-default tr.even > td {
    background-color: #efefef;
}

/* Column Widget - column sort colors */
.tablesorter-default tr.odd td.primary {
    background-color: #bfbfbf;
}
.tablesorter-default td.primary,
.tablesorter-default tr.even td.primary {
    background-color: #d9d9d9;
}
.tablesorter-default tr.odd td.secondary {
    background-color: #d9d9d9;
}
.tablesorter-default td.secondary,
.tablesorter-default tr.even td.secondary {
    background-color: #e6e6e6;
}
.tablesorter-default tr.odd td.tertiary {
    background-color: #e6e6e6;
}
.tablesorter-default td.tertiary,
.tablesorter-default tr.even td.tertiary {
    background-color: #f2f2f2;
}

/* caption */
caption {
    background-color: #fff;
}

/* filter widget */
.tablesorter-default .tablesorter-filter-row {
    background-color: #eee;
}
.tablesorter-default .tablesorter-filter-row td {
    background-color: #eee;
    border-bottom: #ccc 1px solid;
    line-height: normal;
    text-align: center; /* center the input */
    -webkit-transition: line-height 0.1s ease;
    -moz-transition: line-height 0.1s ease;
    -o-transition: line-height 0.1s ease;
    transition: line-height 0.1s ease;
}

/* optional disabled input styling */
.tablesorter-default .tablesorter-filter-row .disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: not-allowed;
}

/* hidden filter row */
.tablesorter-default .tablesorter-filter-row.hideme td {
    /*** *********************************************** ***/
    /*** change this padding to modify the thickness     ***/
    /*** of the closed filter row (height = padding x 2) ***/
    padding: 2px;
    /*** *********************************************** ***/
    margin: 0;
    line-height: 0;
    cursor: pointer;
}
.tablesorter-default .tablesorter-filter-row.hideme * {
    height: 1px;
    min-height: 0;
    border: 0;
    padding: 0;
    margin: 0;
    /* don't use visibility: hidden because it disables tabbing */
    opacity: 0;
    filter: alpha(opacity=0);
}

/* filters */
.tablesorter-default input.tablesorter-filter,
.tablesorter-default select.tablesorter-filter {
    width: 95%;
    height: auto;
    margin: 4px auto;
    padding: 4px;
    background-color: #fff;
    border: 1px solid #bbb;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: height 0.1s ease;
    -moz-transition: height 0.1s ease;
    -o-transition: height 0.1s ease;
    transition: height 0.1s ease;
}

/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
    display: none;
}

/* End styling of jquery tablesorter widget */


/* #15: Z order between mating date and sire name */

#ui-datepicker-div.ui-datepicker {
    z-index: 2 !important;
}

/* .ui-widget-header sets color:#fff for its own orange background, and that white text colour inherits into the changeMonth/
   changeYear <select> elements in the header; a <select> keeps its own native white background since background doesn't
   inherit, so without an explicit colour here the month/year text renders white on white and is unreadable. */
#ui-datepicker-div.ui-datepicker .ui-datepicker-header select {
    color: #333;
}

/* #11: Missing data fields aren't highlighted in red */

input:required.need-input,
.form-group .need-input {
    border: 1px solid #ff0000 !important;
}
/* Waybill (views/event/waybill.tt): same #11 need-input convention, but the class lands on the field's own wrapper
   (.ea-field for a .ea-seg radio group with no single input to outline, .checkbox for a declaration checkbox) rather
   than on an <input> directly, since a plain border on a tiny checkbox or a hidden radio input isn't visible at all. */
.ea-field.need-input,
.checkbox.need-input {
    border: 1px solid #ff0000;
    border-radius: 4px;
    padding: 8px;
    margin: -8px -8px 8px;
}
.ea-field-input.need-input {
    border: 1px solid #ff0000 !important;
}
/* input:required.js-typeahead { */
    /* box-shadow: none; */
/* }
input:required.js-typeahead.need-input {
    border: 1px solid #ff0000 !important;
}
*/
.typeahead-tests h1 {
    padding-bottom: 10px;
    margin-bottom: 0px;
}
.typeahead-tests h2 {
    font-size: 122%;
    color: #888;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
/* TODO: this is inefficient, single instance code (refactor as per name column width statements) */
form.select-herd select[name="owning_herd_code"],
form#animal-transfer-of-shares select[name="herd_code"] {
    margin-bottom: 1em;
}
form#animal-transfer-of-shares section.select-owners table th.herd-code {
    /*width: 20%; */
}
form#animal-transfer-of-shares section.select-owners table th.share-percentage {
    width: 13%;
}
form#animal-transfer-of-shares section.select-owners table th.nominee-owner {
    width: 11%;
}
form#animal-transfer-of-shares section.select-owners table th.remove-owner {
    width: 14%;
}
form#animal-transfer-summary section.select-owners table .herd-code,
form#animal-transfer-summary section.select-owners table .members-names {
    padding-left: 0.6em;
    text-align: left !important;
}
form#animal-transfer-summary section.select-owners table .cost {
    padding-right: 0.6em;
    text-align: right !important;
}
table.total-cost {
    float: right;
}
table.total-cost td {
    padding: 0 0.4em;
}
.colour-tab {
    font-size: 1.1em;
    padding: 2px 8px;
    background: #ddd;
    color: #000;
}

/** Poll component **/
.poll {
    width: 47%;
    padding: 0;
}
.poll header {
    text-align: center;
    background-color: #DFF0D8;
    border-radius: 10px 10px 0 0;
}
.poll header h4 {
    color: #5F5F5F;
    font-size: 1.5em;
    font-weight: 400;
    padding: 5px 0;
    margin: 0;
}
.poll main {
    padding: 0 25px 15px 25px;
}

/** For listings 'example' watermark **/
#watermark {
  color: #DFF0D8;
  font-size: 125pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #D0D0D0;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: +1;
  top: 300px;
  /*
  margin: 150;
  */
}

/** DEV menu **/
#development_menu {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translate(0,-50%);
    border: 2px solid #5F5F5F;
    text-align: center;
    transition: .25s;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
    /* display: none; */
}
#development_menu:hover, #development_menu:focus {
    opacity: 1;
}
#development_menu .panel-heading {
    padding: 0;
    margin: 0;
    background-color: #5F5F5F;
}
#development_menu .panel-heading > a {
    display: block;
    width: 100%;
    border-radius: 100%;
    padding: 5px 10px;
    color: #FFF;
    /* color: #FFAC1C; */
    font-weight: bold;
}
#development_menu a:hover, #development_menu a:focus, #development_menu a:active {
    text-decoration: none;
}
#development_menu i {
    display: block;
    font-size: 1.2em;
    padding-right: 0;
}
#development_menu .panel-body {
    padding: 0;
}
#dev_menu_options li {
    width: 100%;
}
#dev_menu_options a {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}
#dev_menu_options a:hover, #dev_menu_options a:active {
    color: #FFF;
    background-color: #FFAC1C;
}

/*** EXTRA BREAKPOINT REFINEMENTS ***/
@media(max-width:1299px) {
    .top_icons ul li a small {
        font-size: 12px;
    }
}
/*** BOOTSTRAP RESPONSIVE BREAKPOINT OVERRIDES ***/
/* Note: For the Bootstrap breakpoints to work 'mobile first', the smallest, mobile breakpoint 'XS' must come last so that preference can flow to rules declared later in the document without resorting to more specific selectors */
/* LG */

/* MD */
@media (max-width: 1199px) {
.logo-caption {
    width: 110px;
    font-size: 10pt;
    margin: -4px 0 0 0;
    padding: 2px 0;
}
.generation-2 .pedigree-card:first-child {
    margin-top: 0;
}
.top_icons ul li a small {
    width: 65% !important;
    font-size: 12px;
}
.tracking {
    margin: 0 15%;
}
.link-list {
    border-right: none;
}
.long-button {
    margin: 10px 0;
}
.update .integer {
    font-size: 3.5em;
    width: 50%;
}
.update .integer-text {
    width: 50%;
    height: 60px;
}
}
/* SM */
@media (max-width: 991px) {
.top_icons ul li a small {
    font-size: 12px;
}
.top_icons ul li a small {
    width: 80%;
}
.modal-dialog {
    width: 80%;
    margin: 15px auto;
}
.tracking {
    margin: 0 10%;
}
a.search, button.search {
    position: static;
}
p.profile-version {
    margin: 15px 0 0 0;
}
.events ul.heading,
.events ul.details {
    font-size: 0.95em;
    padding: auto 0;
}
.link-list {
    border-right: none;
}
.long-button {
    margin: 10px 0;
}
#aaa_logo {
    float: none;
    text-align: center;
}
#development_menu {
    display: none;
}
}
/* XS */
@media (max-width: 767px) {
.logo-caption {
    width: 150px;
    font-size: 10pt;
    text-align: center;
    margin: -3px auto 0 auto;
}
.logo {
    text-align: center;
}
.landing-page {
    text-align: center;
}
#fun_fact {
    float: none !important;
    position: static;
    margin: 20px auto;
    clear: both;
}
/* show the mobile version and hide the desktop version */
#acting_as_mobile {
    display: block;
}
#acting_as_member {
    display: none;
}
.slidebar {
    display: block;
}
.generation-1 .pedigree-card:first-child {
margin-top: 0;
margin-bottom: 20px;
}
#development_menu {
    display: none;
}
.top_icons ul li {
    margin: 20px 0;
}
.tab_cont ul li .button.search {
    position: static;
    margin: 10px 0;
}
.poll {
    margin: 0 auto 10px auto;
    width: 100%;
}
.poll header {
    padding: 0;
}
.poll main {
    padding: 15px 25px 10px 25px;
}
#primary_search {
    width: 70%;
    margin: 0 auto;
}
.logo {
    margin: 0 0 0 30px;
    padding: 14px 0 0 0;
}
.logo a img {
    margin: 0 auto;
}
#aaa_logo {
    float: none;
    text-align: center;
}
a.login-button {
    position: relative;
    display: block;
    transform: none;
    width: 120px;
    margin: 15px auto 0 auto;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
}
#login form {
    padding: 10px 20px;
}
#login {
    padding: 20px 0;
}
#login h1 {
    font-size: 1.25em;
    margin-bottom: 15px;
}
#login form label {
    font-size: 1em;
}
#login button {
    padding: 2px 10px;
    margin-top: 10px;
}
#login .serial input {
    margin-top: 5px;
}
#login form ul {
    margin: 10px 0;
}
.landing-splash {
    width: 100%;
}
.landing-splash .whitebox {
    margin: 0;
    padding: 10px;
}
.flex-menu {
    flex-direction: column;
}
.flex-menu a.menu-item {
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.flex-menu a.menu-item:last-child {
    /* border: none; */
}
.flex-menu a.menu-item:hover, .flex-menu a.menu-item:active {
    width: 100%;
    border-bottom: 1px solid #74b446;
}
.landing-splash h1 {
    font-size: 2.5em;
    line-height: 40px;
}
.update .integer {
    width: 40%;
}
.form-group {
    margin: 0 0 10px 0;
}
.button {
    margin-top: 10px;
    margin-bottom: 10px;
}
.actions .button {
    margin: 3px 0;
}
br {
    display: none;
}
hr {
    margin: 4px 0;
}
label:not(.radiogroup label) {
    margin: 5px 0 0 0;
}
.serial label, .radio label {
    margin: 0;
}
.fill {
    padding: 5px;
}
.radio, .checkbox {
    margin-top: 3px;
    margin-bottom: 0;
}
.top_icons ul li a small {
    max-width: 90%;
    font-size: 12px;
    padding:4px 0 4px 7px;
}
.top_icons ul.center li a {
    margin: 0 !important;
    width: 100% !important;
    position: relative;
}
.top_icons ul.center li a small {
    position: absolute;
    padding: 10px 0 10px 7px;
    left: 18%;
}
.create-event {
    clear: both;
    width: 60%;
    position: static;
    float: left;
    margin: 15px 0;
    text-align: center;
}
.modal-dialog {
    width: 95%;
    margin: 15px auto;
}
.tracking {
    margin: 0;
}
.stat-check ul {
    width: 100%;
}
p.profile-version {
    margin: 15px 0 0 0;
    font-size: 0.9em;
}
sectin.join h1,
section.landing-page h1 {
    font-size: 200%;
}
.button.search {
    position: static;
}
.btn {
    height: 25px;
    padding-top: 2px;
}
.edit-btn {
    position: relative;
    float: right;
    clear: both;
    margin: 10px 0 0 0;
    z-index: 1003;
    text-align: center;
}
.waybill-actions {
    position: relative;
    float: right;
    clear: both;
    margin: 10px 0 0 0;
    display: flex;
    gap: 10px;
}
#dna-certification .slimfill,
#dna-certification .slimfill ul > li {
    padding: 5px 0;
    background-color: #FFF;
    margin-bottom: 10px;
}
.bottom-button-section {
    margin: 5px 0;
}
.dna {
    width: 100%;
    padding: 0;
}
.dna table {
    margin-bottom: 5px;
    border-bottom: 1px solid #DDD;
}
.link-list {
    border-right: none;
    padding: 0 5px 0 15px;
    margin: 15px 0;
}
section.landing-page #alpaca_landing {
    float: none;
    margin: 0 auto 20px auto;
    width: 299px;
    height: 234px;
}
th.details, td.details {
    width: 55%;
}
.profile-table td,
.profile-table td.bold {
    text-align: left !important;
    float: left;
}
div.radio {
    clear: both;
    padding: 5px 0;
}

.acting-as .container {
    text-align: center;
}
.acting-as .button {
    float: none !important;
}
.dashboard_nav ul {
    float: none;
}
li.voting div.voting,
.dashboard_nav {
    text-align: center;
}
}

/* === ea-welcome banner (Part 1) === */
.ea-welcome {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ea-welcome-avatar {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: #0f5c3f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
}
.ea-welcome-avatar.ea-welcome-avatar-coded { flex-direction: column; gap: 1px; padding-bottom: 5px; }
.ea-welcome-avatar.ea-welcome-avatar-coded svg { width: 26px; height: 26px; }
.ea-welcome-avatar-label { font-size: 10px; font-weight: 900; color: #fff; letter-spacing: .5px; line-height: 1; font-family: 'Lato', sans-serif; }
.ea-welcome-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #e6e9eb;
    border-radius: 12px;
    box-sizing: border-box;
}
.ea-welcome-avatar svg {
    width: 32px;
    height: 32px;
}
/* min-width gives the greeting a guaranteed width so the flex line breaks
   (wrapping .ea-welcome-actions to its own row) only when the pills can't fit
   alongside the name -- rather than the name being squeezed to make room. */
.ea-welcome-body { flex: 1; min-width: 220px; }
.ea-welcome-greeting {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 23px;
    color: #34383d;
    line-height: 1.1;
    margin: 0;
}
.ea-welcome-herds {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
}
.ea-welcome-herds-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #6b7177;
}
.ea-herd-chip {
    background: #eef3e6;
    color: #5d8f2c;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    border-radius: 6px;
    padding: 3px 9px;
    text-decoration: none;
}
.ea-herd-chip:hover { background: #daebc8; color: #4a7520; text-decoration: none; }
.ea-welcome-entries {
    margin-top: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}
.ea-welcome-entries a {
    color: #b5660f;
    font-weight: 700;
    text-decoration: none;
}
.ea-welcome-entries a:hover { text-decoration: underline; }
.ea-welcome-spacer { flex: 0 0 auto; }
.ea-attention {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff3e0;
    border: 1px solid #f3d4a6;
    color: #b5660f;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-radius: 11px;
    padding: 11px 16px;
    text-decoration: none;
    white-space: nowrap;
}
.ea-attention:hover {
    background: #fde8c4;
    box-shadow: 0 2px 8px rgba(232,134,46,.15);
    color: #b5660f;
    text-decoration: none;
}
.ea-attention-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8862e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* === ea-office-panel: muted admin/office-only aside, for content that's usually irrelevant noise (eg. failed payment
   attempts) and shouldn't compete for attention the way the orange ea-attention accent does. Deliberately recessive,
   using the same de-emphasized grey/muted pair as .ea-steps-num's not-yet-reached state === */
.ea-office-panel {
    background: #eef0f2;
    border: 1px solid #e6e9eb;
    border-radius: 11px;
    padding: 11px 16px;
    margin-top: 10px;
}
.ea-office-panel-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #9aa0a6;
}
.payment-attempts-list {
    list-style: disc;
    margin: 8px 0 0 20px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #5a6066;
}
.payment-attempts-list li { margin-bottom: 4px; }

/* Same subtle bordered-pill shape/weight as .ea-add-btn (views/animal_transfer.tt's '+ Add'), but in the info-blue tone
   rather than add-green: this generates a document, it isn't an add action, and it's used rarely enough that it
   shouldn't compete with the page's actual content for attention. */
.ea-tax-invoice-btn {
    display: inline-block;
    border: 1px solid #d4e0ec; background: #eef3f8; color: #3a6ea5; font: 700 13.5px Roboto, sans-serif;
    border-radius: 10px; padding: 11px 16px; text-decoration: none; white-space: nowrap;
}
.ea-tax-invoice-btn:hover { background: #dce9f4; color: #3a6ea5; text-decoration: none; }
.ea-tax-invoice-spacer { margin-top: 6px; }

/* === ea-show-pill: show(s) the member is convening, inline in the welcome bar === */
/* Right-hand cluster groups the convenor show pill(s) with the attention pill. */
.ea-welcome-actions {
    /* Sit inline to the right of the greeting when there's room (a single
       "transactions waiting" / "manage show" button fits easily); only when the
       pills can't fit alongside the name do we wrap to a clean new row.
       Mobile (<=767px) forces a full-width row -- see the media query below. */
    flex: 0 1 auto;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ea-welcome-actions .ea-attention { margin-left: 0; }
.ea-show-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 340px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 9px 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.ea-show-pill:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20,30,20,.12); }
.ea-show-pill .glyphicon { font-size: 13px; }
.ea-show-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.ea-show-pill-tag { font-weight: 400; opacity: .85; }
.ea-show-pill-tag::before { content: "\00b7"; margin: 0 6px 0 4px; opacity: .55; }
.ea-show-pill-badge {
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex: none;
}
/* Phase accents -- same palette as the welcome bar / admin dashboard */
.ea-show-pill-draft   { background: #eef0f2; border-color: #dde1e4; color: #5f656b; }
.ea-show-pill-pending { background: #fdf1e0; border-color: #f0dcb8; color: #9a6a14; }
.ea-show-pill-ready   { background: #eef6e4; border-color: #d9e9c6; color: #4a7520; }
.ea-show-pill-open    { background: #e3f1ea; border-color: #bcdcc9; color: #0f5c3f; }
.ea-show-pill-open .ea-show-pill-badge { background: #0f5c3f; }
.ea-show-pill-closed  { background: #fff3e0; border-color: #f3d4a6; color: #b5660f; }

/* === Shows list: condensed "summary of entries" line under a show row === */
.event-entry-summary-row td.event-entry-summary {
    background: #fbfcfa;
    padding: 7px 14px 9px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4a5568;
    line-height: 2;
    border-top: none;
}
.event-entry-summary-row.highlighted td.event-entry-summary { background: #f4f8ee; }
.event-entry-summary-total { font-weight: 700; color: #0f5c3f; margin-right: 4px; }
/* Shows list status column: just the entries count, no colour chips (large shows made the row too long) */
.event-status-entry-count { font-weight: 700; color: #0f5c3f; font-size: 11px; }
.event-entry-summary-new {
    font-weight: 700;
    color: #5d8f2c;
    background: #eef3e6;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 2px;
}
.event-entry-summary-split { color: #6b7177; }
.event-entry-summary-split::before { content: "\00b7"; margin: 0 8px 0 2px; opacity: .5; }
.event-entry-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 20px;
    padding: 2px 9px 2px 6px;
    margin: 0 4px 2px 6px;
    white-space: nowrap;
}
.event-entry-chip-count { font-weight: 700; color: #34383d; }
.event-entry-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18);
    flex: none;
}
.event-entry-dot-white            { background: #ffffff; }
.event-entry-dot-light-fawn       { background: #e7d3b1; }
.event-entry-dot-medium-dark-fawn { background: #b07f4e; }
.event-entry-dot-brown            { background: #6b4226; }
.event-entry-dot-roan             { background: #c9b9bd; }
.event-entry-dot-grey             { background: #9097a0; }
.event-entry-dot-black            { background: #2a2a2a; }
.event-entry-dot-fancy            { background: conic-gradient(#e7574c, #e7c84c, #6fcf5f, #4cc6e7, #b94ce7, #e7574c); }
.event-entry-dot-none             { background: #fff; border-style: dashed; }

/* fleece_history.provenance -- data-quality tier: User (self-reported) < Show
   (event/catalogue-derived) < Vendor (direct from testing lab/assessor). */
.fleece-provenance-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18);
    vertical-align: middle;
}
.fleece-provenance-dot-vendor { background: #4a7520; }
.fleece-provenance-dot-show   { background: #3a6ea5; }
.fleece-provenance-dot-user   { background: #9097a0; }
.fleece-provenance-legend { font-size: 12px; color: #4a5568; }
.fleece-provenance-legend .fleece-provenance-dot { margin-left: 4px; }
.fleece-provenance-row-user td { background: #f7f7f5; } /* lowest-confidence tier gets a faint tint */
.fleece-value-headline { font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; color: #4a7520; margin: 4px 0 10px; }

/* Non-animal entry types (paraders, judges) and the attendee lead use a small
   line icon where animal entries use a colour dot. */
.event-entry-chip-role { background: #fbfbf8; }
.event-entry-role-icon {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.event-entry-icon {
    width: 13px;
    height: 13px;
    color: #5a6b7b;
}
.event-entry-icon-wide { width: 17px; }
.event-entry-summary-total .event-entry-icon {
    color: #0f5c3f;
    margin-right: 5px;
    vertical-align: -2px;
}
/* Attendee-only bar: take the full line and align left so it stays under the show
   name, overriding the welcome bar's right alignment (where it would be stranded). */
.event-entry-attendee-lead { display: block; text-align: left; }

/* The same summary bar, shown inline in the dashboard welcome bar for single-show convenors */
.ea-welcome-entrybar {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 6px;
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4a5568;
    line-height: 2.1;
}

/* === Herd composition bar (top of My Animals) === */
.ea-comp {
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
}
.ea-comp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.ea-comp-total { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 18px; color: #34383d; }
.ea-comp-breed { font-family: 'Roboto', sans-serif; font-size: 13px; color: #6b7177; }
.ea-comp-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef0f2;
}
.ea-comp-seg { height: 100%; min-width: 2px; }
.ea-comp-seg:not(:last-child) { box-shadow: inset -1px 0 0 rgba(255,255,255,.65); }
/* Pure white is invisible against the white card -- give the white bar segment a faint
   grey so it reads (the bordered chip dots below already show fine, so they keep #fff). */
.ea-comp-seg.event-entry-dot-white { background: #e6e9eb; }
.ea-comp-chips { margin-top: 10px; font-family: 'Roboto', sans-serif; font-size: 12px; color: #4a5568; line-height: 2.1; }

/* === Ribbon rack (animal show record) === */
.ea-ribbons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
}
.ea-ribbons-label { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; color: #34383d; }
.ea-ribbons-meta { font-family: 'Roboto', sans-serif; font-size: 12px; color: #6b7177; }
.ea-rosette { display: inline-flex; align-items: center; gap: 5px; }
.ea-rosette-disc {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 12px;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ea-rosette-n { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; color: #34383d; }
.ea-rosette-n::before { content: "\00d7"; opacity: .5; margin-right: 1px; }
.ea-rosette-champion .ea-rosette-disc { background: #b8860b; }
.ea-rosette-reserve  .ea-rosette-disc { background: #8a8f96; }
.ea-rosette-first    .ea-rosette-disc { background: #2f6db0; }
.ea-rosette-second   .ea-rosette-disc { background: #c0392b; }
.ea-rosette-third    .ea-rosette-disc { background: #fff; color: #34383d; border: 1px solid #cfd4d8; box-shadow: none; }

/* === Animal status chips (DNA / certification / registration) === */
.ea-status-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
    /* Indent the pills so they line up with the animal name and the colour-pedigree
       content below (the ribbon has 18px of inner padding); without this the col-xs-12
       gutter is zeroed and the row sits flush-left, out-dented from everything else. */
    padding: 0 0 0 18px;
}
.ea-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    border-radius: 20px;
    padding: 4px 12px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ea-status-chip .glyphicon { font-size: 11px; }
/* Modifier for use as a block-level status banner rather than a short inline pill: the base rule's
   white-space: nowrap clips anything longer than a couple of words, so this switches back to normal
   wrapping and gives the banner its own block box. */
.ea-status-chip--block { display: block; white-space: normal; padding: 10px 14px; }
.ea-status-good    { background: #eef3e6; border-color: #d3e6bd; color: #4a7520; }
.ea-status-info    { background: #eef3f8; border-color: #d4e0ec; color: #3a6ea5; }
.ea-status-special { background: #fdf4e3; border-color: #ecd9ad; color: #9a6a14; }
.ea-status-bad     { background: #fbeceb; border-color: #f0cfcb; color: #a34a3f; }
.ea-status-muted   { background: #f4f5f6; border-color: #e2e5e8; color: #8a9099; }

/* === Registry colour donut (dashboard widget) === */
.ea-donut-widget {
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
}
.ea-donut-head { margin-bottom: 14px; }
.ea-donut-title { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 18px; color: #34383d; }
.ea-donut-sub { display: block; font-family: 'Roboto', sans-serif; font-size: 13px; color: #6b7177; margin-top: 2px; }
.ea-donut-body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ea-donut {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex: none;
    position: relative;
    box-shadow: 0 1px 3px rgba(20,30,20,.12);
}
.ea-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    background: #fff;
    border-radius: 50%;
}
.ea-donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    flex: 1;
    min-width: 200px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4a5568;
}
.ea-donut-leg { display: inline-flex; align-items: center; gap: 6px; }
.ea-donut-leg-pct { font-weight: 700; color: #34383d; }

/* === Sale listings colour facet bar === */
.ea-facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.ea-facets-label { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; color: #34383d; margin-right: 4px; }
.ea-facet-chip { color: #34383d; text-decoration: none; transition: box-shadow .12s; }
.ea-facet-chip:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20,30,20,.12); }
.ea-facet-cert { color: #9a6a14; }
.ea-facet-cert .glyphicon { font-size: 12px; margin-right: 2px; }

/* === Pedigree colour ribbon (animal profile) === */
.ea-pedi-ribbon:empty { display: none; }
.ea-pedi-ribbon {
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
}
.ea-pedi-title { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; color: #34383d; display: block; margin-bottom: 8px; }
.ea-pedi-track { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ea-pedi-col { display: flex; flex-direction: column; gap: 6px; }
.ea-pedi-col-label { font-family: 'Roboto', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #9aa0a6; }
.ea-pedi-line { display: flex; gap: 6px; }
.ea-pedi-dot { display: inline-block; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ea-pedi-big { width: 30px; height: 30px; }
.ea-pedi-mid { width: 22px; height: 22px; }
.ea-pedi-sml { width: 16px; height: 16px; }
.ea-pedi-empty { background: #fff !important; border-style: dashed; box-shadow: none; }
.ea-pedi-sep { color: #cfd4d8; font-size: 22px; line-height: 1; }
/* Named-colour key under the ribbon -- reuses the show colour band's chips so
   each colour (incl. the rainbow "Fancy" swatch) reads at a glance. */
.ea-pedi-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f4;
    font-size: 12px;
}

/* === Sire suggester (dashboard widget) === */
.ea-sire-suggester {
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
}
.ea-sire-title { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 18px; color: #34383d; margin: 0 0 12px; }
.ea-sire-group { margin-top: 12px; }
.ea-sire-group-label { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; color: #4a5568; margin-bottom: 8px; }
.ea-sire-group-sub { font-weight: 400; color: #9aa0a6; }
.ea-sire-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ea-sire-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 170px;
    flex: 1 1 170px;
    max-width: 230px;
    background: #fbfcfa;
    border: 1px solid #e6e9eb;
    border-radius: 10px;
    padding: 10px 12px;
    text-decoration: none;
    transition: box-shadow .12s;
}
.ea-sire-card:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20,30,20,.12); border-color: #d9e9c6; }
.ea-sire-head { display: flex; align-items: center; gap: 7px; }
.ea-sire-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }
.ea-sire-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; color: #34383d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-sire-meta { font-family: 'Roboto', sans-serif; font-size: 11px; color: #6b7177; }
.ea-sire-stats { font-family: 'Roboto', sans-serif; font-size: 12px; color: #4a7520; }
.ea-sire-stats b { color: #34383d; }

/* === Proven-sire scorecard (animal profile) === */
.ea-scorecard:empty { display: none; }
.ea-scorecard {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #fbfcfa;
    border: 1px solid #e6e9eb;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 4px 0 16px;
}
.ea-scorecard-label { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; color: #34383d; }
.ea-scorecard-stat { font-family: 'Roboto', sans-serif; font-size: 13px; color: #4a5568; }
.ea-scorecard-stat b { font-size: 16px; color: #0f5c3f; }
.ea-scorecard-spread { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: 'Roboto', sans-serif; font-size: 12px; }

/* === ea-panel: activity + events (Part 2) === */
.ea-panel {
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
    margin-bottom: 18px;
}
.ea-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
}
.ea-panel-head--green {
    background: #eef6e4;
    border-bottom: 1px solid #d9e9c6;
}
.ea-panel-head--orange {
    background: #fdf1e6;
    border-bottom: 1px solid #f3e1cd;
}
.ea-panel-head-text { flex: 1; }
.ea-panel-head-outcome { flex: none; text-align: right; }
.ea-panel-title {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 17px;
    color: #34383d;
}
.ea-panel-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
}
.ea-panel-subtitle--green { color: #5d7a3e; }
.ea-panel-subtitle--orange { color: #8a6a45; }
.ea-panel-body { padding: 18px 20px; }
.ea-icon-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #fff;
    font-size: 16px;
}
.ea-icon-tile--green { background: #79b23c; }
.ea-icon-tile--orange { background: #e8862e; }
.ea-stats-row {
    display: flex;
    gap: 12px;
}
.ea-stat {
    flex: 1;
    border-radius: 10px;
    padding: 15px 16px;
    text-decoration: none;
    display: block;
}
.ea-stat:hover { text-decoration: none; }
.ea-stat--green {
    background: #f7faf3;
    border: 1px solid #e6efd9;
}
.ea-stat--green:hover { background: #eef6e4; }
.ea-stat--orange {
    background: #faf7f3;
    border: 1px solid #efe7dc;
}
.ea-stat--orange:hover { background: #fdf1e6; }
.ea-stat__num {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
}
.ea-stat__num--green { color: #5d8f2c; }
.ea-stat__num--orange { color: #e8862e; }
.ea-stat__label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #5a6066;
    margin-top: 5px;
}
.ea-panel-more {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}
.ea-panel-more--green { color: #5d8f2c; }
.ea-panel-more--green:hover { color: #4a7222; }
.ea-panel-more--orange { color: #b5660f; }
.ea-panel-more--orange:hover { color: #8a4e0c; }
/* Red/danger variant of the green/orange panel-head, stat-tile and icon-tile pattern above -
   this app otherwise avoids red for status (favouring green/orange/blue), but a test-failure
   dashboard is the one place universal QA convention (red = failing) should win out. Kept as
   muted/desaturated as the rest of the palette rather than a jarring pure red. */
.ea-panel-head--red { background: #fbeceb; border-bottom: 1px solid #f0cfcb; }
.ea-panel-subtitle--red { color: #a34a3f; }
.ea-panel-more--red { color: #b5453a; }
.ea-panel-more--red:hover { color: #8f3830; }
.ea-icon-tile--red { background: #d0564a; }
.ea-stat--red { background: #fbf2f1; border: 1px solid #f2ded9; }
.ea-stat--red:hover { background: #fbeceb; }
.ea-stat__num--red { color: #c0392b; }
/* Neutral/muted variant - skipped, xfailed, not-yet-run: informational, not a status judgement. */
.ea-stat--muted { background: #f6f7f8; border: 1px solid #e6e9eb; }
.ea-stat__num--muted { color: #8a9099; }
.ea-open-tag {
    background: #fff;
    border: 1px solid #f0d3ad;
    color: #b5660f;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    border-radius: 20px;
    padding: 4px 11px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .ea-welcome { gap: 14px; }
    .ea-welcome-actions { width: 100%; justify-content: stretch; }
    .ea-welcome-actions > a { width: 100%; }
    .ea-attention { width: 100%; justify-content: center; }
    .ea-show-pill { max-width: none; justify-content: center; }
    .ea-show-pill-name { max-width: none; }
    .ea-stats-row { flex-direction: column; }
}

/* === Admin dashboard (ea-admin-*) === */
.ea-admin-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px 48px; }

/* Title row */
.ea-admin-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.ea-admin-h1 { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 27px; color: #34383d; margin: 0; }

/* Logged-in identity badge (breadcrumb bar) -- matches admin dashboard pill */
.ea-identity-badge { display: inline-flex; align-items: center; gap: 8px; background: #eef3f8; border: 1px solid #d4e0ec; border-radius: 20px; padding: 5px 13px; }
.ea-identity-badge span { font-size: 13px; color: #3a6ea5; font-weight: 600; }

/* Hero grid */
.ea-admin-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 24px; }
@media (max-width: 900px) { .ea-admin-hero { grid-template-columns: 1fr; } }

/* Cards */
.ea-admin-card { background: #fff; border: 1px solid #e6e9eb; border-radius: 16px; padding: 24px 26px; box-shadow: 0 1px 3px rgba(20,30,20,.05); display: flex; flex-direction: column; }
.ea-admin-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ea-admin-card-title { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 19px; color: #34383d; line-height: 1.05; }
.ea-admin-card-sub { font-size: 13px; color: #7a7f84; }

/* Icon tiles */
.ea-admin-icon-tile { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.ea-admin-icon-tile-sm { width: 34px; height: 34px; border-radius: 9px; }

/* Field label */
.ea-admin-field-label { font-size: 12.5px; color: #8a9099; font-weight: 600; margin-bottom: 7px; }

/* Search row */
.ea-admin-search-row { display: flex; gap: 11px; }
.ea-admin-search-box { flex: 1; display: flex; align-items: center; gap: 10px; background: #f4f6f7; border: 2px solid #dfe3e6; border-radius: 11px; padding: 13px 15px; transition: border-color .15s; position: relative; }
.ea-admin-search-box:focus-within { border-color: #79b23c; box-shadow: 0 0 0 3px rgba(121,178,60,.15); }
.ea-admin-big-input { flex: 1; width: 100%; border: none; background: none; font-family: 'Roboto', sans-serif; font-size: 14.5px; color: #34383d; outline: none; }
.ea-admin-big-input::placeholder { color: #9aa0a6; }

/* Buttons */
.ea-admin-btn { border: none; border-radius: 11px; padding: 0 22px; font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: 'Roboto', sans-serif; display: flex; align-items: center; gap: 9px; height: 50px; transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.ea-admin-btn:active { transform: translateY(1px); }
.ea-admin-btn-green { background: #79b23c; color: #fff; }
.ea-admin-btn-green:hover { background: #6a9e33; }
.ea-admin-btn-outline { background: #fff; border: 1.5px solid #79b23c; color: #5d8f2c; }
.ea-admin-btn-outline:hover { background: #f3f7ee; }
.ea-admin-btn-sm { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; }

/* Quick membership report (inside the Reports category card) */
.ea-admin-report-quick { display: flex; align-items: center; gap: 8px; padding: 8px; flex-wrap: wrap; }
.ea-admin-report-quick-label { font-size: 13.5px; font-weight: 600; color: #34383d; }
.ea-admin-select-sm { border: 1px solid #dfe3e6; background: #f4f6f7; border-radius: 8px; padding: 6px 10px; font-family: 'Roboto', sans-serif; font-size: 13.5px; color: #34383d; height: 34px; box-sizing: border-box; }
.ea-admin-select-sm:focus { outline: none; border-color: #79b23c; }

/* Recent member chips */
.ea-admin-recent-row { display: flex; align-items: center; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.ea-admin-recent-label { font-size: 12.5px; color: #9aa0a6; }
.ea-admin-chip { background: #eef3e6; color: #5d8f2c; font-size: 12.5px; font-weight: 600; border-radius: 18px; padding: 5px 13px; cursor: pointer; text-decoration: none; transition: background .12s; }
.ea-admin-chip:hover { background: #e3efd5; color: #4a7222; text-decoration: none; }

/* Lookup input */
.ea-admin-lookup-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.ea-admin-in { width: 100%; border: 1px solid #dfe3e6; background: #f4f6f7; border-radius: 11px; padding: 13px 100px 13px 15px; font-family: 'Roboto', sans-serif; font-size: 14.5px; color: #34383d; height: 50px; box-sizing: border-box; }
.ea-admin-in:focus { outline: none; border-color: #79b23c; }
.ea-admin-lookup-tag { position: absolute; right: 11px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.ea-tag-txn { background: #eef3f8; color: #3a6ea5; }
.ea-tag-pay { background: #fdf1e6; color: #b5660f; }
.ea-admin-lookup-hint { font-size: 11.5px; color: #9aa0a6; margin-top: 9px; }

/* Section label (Needs action today) */
.ea-admin-section-label { display: flex; align-items: center; gap: 9px; margin: 0 2px 10px; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; color: #34383d; }
.ea-admin-section-rule { flex: 1; height: 1px; background: #e3e6e8; }

/* Queue tiles */
.ea-admin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px; }
@media (max-width: 900px) { .ea-admin-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ea-admin-tiles { grid-template-columns: 1fr; } }
.ea-admin-tile { text-decoration: none; background: #fff; border: 1px solid #e6e9eb; border-left-width: 3px; border-radius: 12px; padding: 13px 15px; box-shadow: 0 1px 2px rgba(20,30,20,.05); display: flex; align-items: center; gap: 12px; transition: box-shadow .15s, transform .15s; }
.ea-admin-tile:hover { box-shadow: 0 5px 15px rgba(30,50,20,.10); transform: translateY(-2px); text-decoration: none; }
.ea-admin-tile-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.ea-admin-tile-body { flex: 1; min-width: 0; }
.ea-admin-tile-name { font-size: 13px; font-weight: 700; color: #34383d; line-height: 1.15; }
.ea-admin-tile-sub { font-size: 11.5px; color: #7a7f84; }
.ea-admin-tile-count { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 25px; line-height: 1; }
.ea-count-orange { color: #e8862e; }
.ea-count-green  { color: #5d8f2c; }
.ea-count-blue   { color: #3a6ea5; }
.ea-count-grey   { color: #7a7f84; }
.ea-count-muted  { color: #c2c7cc; }

/* Divider */
.ea-admin-divider { height: 1px; background: #e3e6e8; margin: 4px 2px 24px; }

/* Function library: CSS masonry */
.ea-admin-cats { column-count: 3; column-gap: 20px; }
@media (max-width: 1100px) { .ea-admin-cats { column-count: 2; } }
@media (max-width: 680px)  { .ea-admin-cats { column-count: 1; } }
.ea-admin-cat { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; background: #fff; border: 1px solid #e6e9eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(20,30,20,.05); margin-bottom: 20px; overflow: hidden; display: inline-block; width: 100%; }
.ea-admin-cat-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #eef0f2; }
.ea-admin-cat-title { flex: 1; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 16px; color: #34383d; }
.ea-admin-cat-body { padding: 8px 10px; }
.ea-admin-subhead { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #9aa0a6; margin: 12px 8px 3px; }

/* Function links */
.ea-admin-fn { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 8px; text-decoration: none; transition: background .12s; }
.ea-admin-fn:hover { background: #f3f7ee; text-decoration: none; }
.ea-admin-fn:hover .ea-admin-ar { transform: translateX(2px); }
.ea-admin-fn span:nth-child(2) { flex: 1; font-size: 13.5px; color: #2f6db0; font-weight: 500; line-height: 1.35; }
.ea-admin-ar { color: #79b23c; font-weight: 700; transition: transform .12s; line-height: 1.4; }
.ea-fn-note { color: #9aa0a6; font-weight: 400; }

/* Badges */
.ea-badge-paid { background: #eef3e6; color: #5d8f2c; font-weight: 700; font-size: 11px; border-radius: 5px; padding: 1px 6px; flex: none; align-self: flex-start; margin-top: 2px; }
.ea-badge-sa { background: #fdeede; color: #b5660f; font-weight: 700; font-size: 11px; border-radius: 5px; padding: 1px 6px; flex: none; align-self: flex-start; margin-top: 2px; }

/* Legacy card */
.ea-admin-cat-legacy { background: #fafafa; border-style: dashed; }
.ea-admin-cat-head-legacy { border-bottom-color: #ededed; }
.ea-admin-deprecated { background: #ececec; color: #8a9099; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; margin-left: 6px; }
.ea-admin-legacy-caret { color: #9aa0a6; font-size: 14px; margin-left: auto; }
.ea-admin-fn-legacy span:nth-child(2) { color: #6a7178; }
.ea-admin-ar-legacy { color: #aab0b5; }
.ea-badge-sa-muted { background: #ececec; color: #8a9099; }

/* Sidebar admin tools box: override .slidebar ul li float/width rules */
li.ea-admin-tools-box { list-style: none !important; float: none !important; width: auto !important; margin: 0 8px 10px !important; background: #eef0f2; border: 1px solid #e1e5e8; border-radius: 13px; padding: 9px 5px 11px !important; display: flex !important; flex-direction: column !important; gap: 3px; box-sizing: border-box; }
.ea-admin-tools-label { font-size: 9px; font-weight: 700; letter-spacing: .7px; color: #9aa0a6; text-align: center; text-transform: uppercase; margin: 1px 0 5px; }
a.ea-admin-tool { text-decoration: none; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px; padding: 8px 2px !important; border-radius: 9px; color: #5a6066; transition: background .12s; }
a.ea-admin-tool:hover { background: #e9edf0; text-decoration: none; }
a.ea-admin-tool small { font-size: 10.5px; font-weight: 600; }
.ea-admin-tool-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }

/* DYK pilot tip cards -- #notprod remove once pilot complete */
aside.ea-pilot-dyknow { background: #eef6e4; border: 1px solid #d9e9c6; border-radius: 14px; padding: 22px 24px; box-sizing: border-box; }
aside.ea-pilot-dyknow h4 { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 20px; color: #4a6b2c; text-align: center; margin: 0 0 16px; }
.ea-dyknow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ea-tip-slot { display: flex; }
.ea-tip-card { flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e9eb; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(20,30,20,.05); }
.ea-tip-card-cat { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #9aa0a6; margin-bottom: 4px; }
.ea-tip-card-value { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 21px; color: #5d8f2c; line-height: 1.1; margin-bottom: 4px; }
.ea-tip-card-label { font-size: 12.5px; font-weight: 700; color: #34383d; margin-bottom: 6px; }
.ea-tip-card-detail { font-size: 12px; color: #5a6066; line-height: 1.45; margin: 0 0 8px; flex: 1; }
a.ea-tip-card-link { font-size: 13px; font-weight: 600; color: #5d8f2c; text-decoration: none; margin-top: auto; }
a.ea-tip-card-link:hover { color: #4a6b2c; text-decoration: underline; }
.ea-tip-slot-loading { color: #b0b7be; font-size: 12px; padding: 8px 0; text-align: center; }

/* National Show livestream promo card, shown below the DYK grid (both pilot and non-pilot). */
.ea-tip-livestream { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 16px; background: #fff; border: 1px solid #e6e9eb; border-radius: 10px; box-shadow: 0 1px 3px rgba(20,30,20,.05); }
.ea-tip-livestream-thumb { flex: none; width: 64px; height: 48px; border-radius: 6px; display: block; }
.ea-tip-livestream-body { flex: 1; min-width: 0; }

/* Complex tips (Tips.pm's _complex_tip_* methods) -- rendered as raw html rather
   than through the standard label/value/detail card fields. */
.ea-tip-card-complex { padding-bottom: 10px; }
.ea-chart-wrap { padding: 4px 0 2px; }
svg.ea-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ea-chart-axis-label { font-size: 9px; fill: #9aa0a6; }
.ea-chart-legend { display: flex; gap: 12px; font-size: 11px; color: #5a6066; padding: 4px 0 0; }
.ea-chart-legend-item { display: inline-flex; align-items: center; }
.ea-chart-legend-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }

/* === ea-datenav: GL report day stepper === */
.ea-datenav {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.ea-datenav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d9e9c6;
    border-radius: 11px;
    padding: 10px 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #3f7a2e;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
    white-space: nowrap;
}
.ea-datenav-btn:hover,
.ea-datenav-btn:focus {
    background: #eef6e4;
    color: #3f7a2e;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(63,122,46,.15);
}
.ea-datenav-btn .glyphicon { font-size: 12px; top: 0; }
.ea-datenav-disabled,
.ea-datenav-disabled:hover,
.ea-datenav-disabled:focus {
    color: #c2c7cc;
    border-color: #e6e9eb;
    background: #f7f8f9;
    box-shadow: none;
    cursor: default;
}
.ea-datenav-current {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e6e9eb;
    border-radius: 11px;
    padding: 8px 16px;
    box-shadow: 0 1px 3px rgba(20,30,20,.05);
}
.ea-datenav-range {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 17px;
    color: #34383d;
    line-height: 1.2;
}
.ea-datenav-summary {
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    color: #6b7177;
    margin-top: 2px;
}

/* Engine 3: shortlist star + compare metrics (placeholder styling -- design to re-skin) */
.ea-shortlist-star {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 10px;
    margin-left: 12px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    vertical-align: middle;
    color: #6b7177;
}
.ea-shortlist-star:hover {
    border-color: #ef7d00;
    color: #ef7d00;
}
.ea-shortlist-star.is-shortlisted {
    color: #ef7d00;
    border-color: #ef7d00;
}
.ea-shortlist-star .glyphicon {
    margin-right: 4px;
}
.ea-shortlist-star .ea-shortlist-label {
    font-size: 13px;
}
.ea-shortlist-count {
    margin-left: 10px;
    color: #6b7177;
}
td.ea-metric-strong {
    font-weight: bold;
}

/* ============================================================================
   Animal transfer / lease / sale / export - reactive screen 1 (2026 redesign)
   Card-based "what / who / when" flow. Reuses the shared .ea-panel, .ea-icon-tile,
   .ea-status-chip families; the classes below are the transfer-specific additions.
   ============================================================================ */
.ea-tx-main { max-width: 760px; }
/* Wider variant for screens whose cards hold multi-column content (address rows, joint-member name pairs, herd/summary tables): the
   plain 760px width above was sized for the transfer flow's narrow single-column card stack and is too cramped for those. Used by the
   member registration/renewal/herd-creation templates. */
.ea-tx-main--wide { max-width: 1100px; }
.ea-tx-title { font-family: Lato, sans-serif; font-weight: 900; font-size: 27px; color: #34383d; margin: 4px 0 4px; }
.ea-tx-lead { font-family: Roboto, sans-serif; font-size: 14px; color: #6b7177; margin: 0 0 22px; }
.ea-tx-panel { display: block; }

/* step number bubble in the panel header */
.ea-tx-step-no {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    color: #4a4f54; font: 900 14px Lato, sans-serif;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.ea-panel-head--green  .ea-tx-step-no { color: #4a7520; }
.ea-panel-head--orange .ea-tx-step-no { color: #b5660f; }
.ea-panel-head--blue   .ea-tx-step-no { color: #3a6ea5; }
.ea-panel-head--grey   .ea-tx-step-no { color: #5f656b; background: rgba(255,255,255,.7); }

/* extra panel-header colour families (blue + grey) to match green/orange */
.ea-panel-head--blue { background: #eef3f8; border-bottom: 1px solid #d4e0ec; }
.ea-panel-head--grey { background: #f6f7f8; border-bottom: 1px solid #e6e9eb; }
.ea-icon-tile--blue { background: #3a6ea5; }
.ea-icon-tile--grey { background: #7a7f84; }
.ea-panel-subtitle--blue { color: #4a6a8a; }
.ea-panel-subtitle--grey { color: #6b7177; }

/* the list of animals in the draft */
.ea-animal-list { display: flex; flex-direction: column; gap: 10px; }
.ea-animal-row {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid #e6e9eb; border-radius: 12px; padding: 12px 14px; background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.ea-animal-row:hover { border-color: #d3e6bd; box-shadow: 0 1px 4px rgba(20, 30, 20, .06); }
.ea-animal-thumb {
    width: 42px; height: 42px; border-radius: 10px; flex: none;
    background: #eef3e6; color: #5d8f2c; font: 900 16px Lato, sans-serif;
    display: flex; align-items: center; justify-content: center;
}
.ea-animal-row-main { flex: 1 1 auto; min-width: 0; }
.ea-animal-row-name { font-family: Lato, sans-serif; font-weight: 900; font-size: 16px; color: #34383d; line-height: 1.15; }
.ea-animal-row-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ea-animal-row-meta .ea-status-chip { font-size: 11.5px; padding: 2px 9px; }
.ea-animal-remove {
    border: none; background: transparent; color: #b03a3a; font: 700 13px Roboto, sans-serif;
    cursor: pointer; padding: 6px 8px; border-radius: 8px; flex: none;
}
.ea-animal-remove:hover { background: #fbeaea; }
.ea-animal-empty { text-align: center; padding: 22px 10px; border: 1px dashed #d5dade; border-radius: 12px; }
.ea-animal-empty-title { font-family: Lato, sans-serif; font-weight: 900; font-size: 15px; color: #6b7177; }
.ea-animal-empty-sub { font-family: Roboto, sans-serif; font-size: 13px; color: #9aa0a6; margin-top: 4px; }

/* add-another-animal row */
.ea-add-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.ea-add-input-wrap { flex: 1 1 auto; min-width: 0; }
.ea-add-input {
    width: 100%; box-sizing: border-box; border: 1px solid #cdd3d7; border-radius: 10px;
    padding: 11px 14px; font: 400 14px Roboto, sans-serif; color: #34383d; background: #fff;
}
.ea-add-input::placeholder { color: #9aa0a6; }
.ea-add-btn {
    border: 1px solid #cfe0bb; background: #f3f8ec; color: #4a7520; font: 700 13.5px Roboto, sans-serif;
    border-radius: 10px; padding: 11px 16px; cursor: pointer; white-space: nowrap; flex: none;
}
.ea-add-btn:hover { background: #e9f3da; }
.ea-add-whole {
    background: transparent; border: none; color: #5d8f2c; font: 700 13px Roboto, sans-serif;
    cursor: pointer; margin-top: 10px; padding: 4px 2px;
}
.ea-add-whole:hover { text-decoration: underline; }

/* generic fields used inside the cards */
.ea-field { margin-bottom: 16px; }
.ea-field:last-child { margin-bottom: 0; }
.ea-field-label { display: block; font: 700 13px Roboto, sans-serif; color: #5a6066; margin-bottom: 6px; }
.ea-field-input {
    width: 100%; box-sizing: border-box; border: 1px solid #cdd3d7; border-radius: 10px;
    padding: 11px 14px; font: 400 14px Roboto, sans-serif; color: #34383d; background: #fff;
}
.ea-field-input--found { border-color: #cfe0bb; background: #f7faf3; }
.ea-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ea-field-row > .ea-field { flex: 1 1 200px; }

/* segmented (radio) control */
.ea-seg { display: inline-flex; border: 1px solid #cdd3d7; border-radius: 10px; overflow: hidden; }
.ea-seg label { margin: 0; padding: 10px 18px; font: 700 13.5px Roboto, sans-serif; color: #5a6066; cursor: pointer; background: #fff; }
.ea-seg label + input + label, .ea-seg input + label + input + label { border-left: 1px solid #cdd3d7; }
.ea-seg input:checked + label { background: #eef6e4; color: #4a7520; }

/* Waybill form only: a gentle orange border and fill help the exhibitor spot which segmented (Yes/No -style) fields
   still need an answer, switching to the plain grey/white look (plus the existing green highlight on whichever
   option is checked) once a choice is made. Each rule below is deliberately scoped to out-specificity the one
   before it, since .ea-seg label/.ea-seg input:checked + label above would otherwise tie with it. */
form[name="waybill"] .ea-seg { border-color: #f3d4a6; }
form[name="waybill"] .ea-seg label { background: #fff3e0; }
form[name="waybill"] .ea-seg:has(input:checked) { border-color: #cdd3d7; }
form[name="waybill"] .ea-seg:has(input:checked) label { background: #fff; }
form[name="waybill"] .ea-seg input:checked + label { background: #eef6e4; color: #4a7520; }

/* bottom action bar (the only summary on screen 1; fee + final confirm live on screen 2) */
.ea-tx-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding-top: 6px; }
.ea-tx-cancel {
    color: #7a7f84; font: 600 14px Roboto, sans-serif; text-decoration: none; padding: 10px 4px;
    border: none; background: none; cursor: pointer;
}
.ea-tx-cancel:hover { color: #34383d; }
.ea-tx-action-main { text-align: right; }
.ea-confirm-btn {
    display: inline-block; border: none; border-radius: 11px; padding: 14px 30px;
    font: 900 16px Lato, sans-serif; color: #fff; background: #79b23c; cursor: pointer;
}
.ea-confirm-btn:hover { background: #6aa033; }
.ea-confirm-btn[disabled] { background: #d3d8db; color: #fbfdfb; cursor: not-allowed; }
.ea-confirm-hint { font: 600 12.5px Roboto, sans-serif; color: #9aa0a6; margin-top: 8px; }
.ea-confirm-hint.blocked { color: #b5660f; }

.no-bullets { list-style: none; padding-left: 0; margin: 0; }

@media (max-width: 600px) {
    /* .ea-field-row > .ea-field's "flex: 1 1 200px" sets a 200px flex-basis along the row's
       main axis (a min-width at desktop) - once flex-direction flips to column here, the main
       axis becomes vertical, so that same 200px is read as a preferred *height*, and flex-grow
       then stretches each field to fill the column. Reset it here so fields keep their natural
       height when stacked. */
    .ea-field-row { flex-direction: column; gap: 0; }
    .ea-field-row > .ea-field { flex: 1 1 auto; }
    .ea-tx-actions { flex-direction: column-reverse; align-items: stretch; }
    .ea-tx-action-main { text-align: center; }
    .ea-confirm-btn { width: 100%; }
    .ea-tx-cancel { text-align: center; }
    .ea-panel-head { flex-wrap: wrap; }
    .ea-panel-head-outcome { flex-basis: 100%; text-align: left; margin-left: 48px; }
}

/* Animal transfer summary (screen 2) - "Your transfer" facts panel */
.ea-sum-panel { max-width: 760px; }
.ea-sum-facts { display: flex; flex-direction: column; }
.ea-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
.ea-sum-row + .ea-sum-row { border-top: 1px solid #f1f3f4; }
/* Runs the label and value inline, immediately adjacent (eg. "Herd health status: Alpaca CheQA (Secure)"),
   rather than spread to opposite ends of the row like the default .ea-sum-row layout above. */
.ea-sum-row--inline { display: block; }
.ea-sum-label { font: 400 13.5px Roboto, sans-serif; color: #6b7177; }
.ea-sum-val { font: 700 14px Roboto, sans-serif; color: #34383d; text-align: right; }

/* .ea-panel sets display:flex, which defeats the plain [hidden] attribute; restore it so
   cards (e.g. the pregnancy card) stay hidden until they are relevant. */
.ea-panel[hidden], .ea-tx-panel[hidden] { display: none !important; }

/* ============================================================================
   Member registration / renewal / herd-creation - step tracker (2026 redesign)
   Local to the member-registration flow (views/member/registration_steps.tt) - deliberately
   not a change to views/member/steps_component.tt, which is also shared by unrelated Event and
   QAlpaca wizards.
   ============================================================================ */
.ea-steps { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; margin: 0 0 24px; padding: 0; }
.ea-steps-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }
.ea-steps-item:not(:last-child)::after {
    content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px;
    background: #e2e6e8; z-index: 0;
}
.ea-steps-item--done:not(:last-child)::after { background: #a9cf85; }
.ea-steps-item a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.ea-steps-num {
    position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 900 14px Lato, sans-serif; background: #eef0f2; color: #9aa0a6; border: 2px solid #fff;
}
.ea-steps-item--done .ea-steps-num { background: #79b23c; color: #fff; }
.ea-steps-item--current .ea-steps-num { background: #fff; color: #4a7520; border: 2px solid #79b23c; }
.ea-steps-label { margin-top: 8px; font: 700 12px Roboto, sans-serif; color: #9aa0a6; }
.ea-steps-item--done .ea-steps-label, .ea-steps-item--current .ea-steps-label { color: #34383d; }
.ea-steps-item a:hover .ea-steps-label { text-decoration: underline; }

/* .ea-seg with a disabled option (eg. "Organisation" while a Youth Educational individual is
   selected) - the input is visually hidden, so grey the label instead of relying on native
   disabled-radio styling that would otherwise be invisible. */
.ea-seg input:disabled + label { opacity: .45; cursor: not-allowed; }

@media (max-width: 600px) {
    .ea-steps-label { display: none; }
    .ea-steps-num { width: 24px; height: 24px; font-size: 12px; }
    /* .ea-seg is inline-flex with non-wrapping content - fine for the short (Yes/No -style)
       options it was built for, but a longer option label (eg. "Organisation") can force the
       whole page wider than the viewport on a phone. Go full-width and let labels wrap. */
    .ea-seg { display: flex; width: 100%; }
    .ea-seg label { flex: 1 1 0; min-width: 0; text-align: center; }
}

/* Wide tables (eg. the membership-type comparison) inside a card must scroll in place rather
   than pushing the whole page wider - see docs/redesign/UX_PATTERNS.md. Scoped to .ea-panel-body
   rather than the shared .table_parent, which is used site-wide and is out of scope here. */
.ea-panel-body .table_parent { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Plain `.table` carries no cell padding anywhere in this stylesheet (confirmed by grep - the only
   padded variants are narrowly scoped, eg. `.view .deets .table`), so every plain data table dropped
   into a redesigned `.ea-panel-body` renders with its cells jammed edge-to-edge. Scoped here rather
   than added to the shared `.table` rule, which is used site-wide on Perl-rendered pages this redesign
   pass hasn't touched and is out of scope to change. */
.ea-panel-body table.table th, .ea-panel-body table.table td { padding: 8px 12px; border-bottom: 1px solid #eef0f1; }
.ea-panel-body table.table thead th { font-weight: 700; color: #5a6066; }

/* Transfer history reconciler evidence (views/admin/transfer_history_reconciler.tt): each DB row
   renders as its own vertical field:value list (mysql client's "\G" record output) rather than a
   wide multi-column table, since a transfer_history row alone has ~18 columns. Field names are
   right-aligned and muted, like mysql's own \G output; values stay on one line, with the
   .table_parent scrollbar above as a fallback for a genuinely long value. */
.ea-reconciler-record { width: auto; margin-bottom: 0; }
.ea-reconciler-record th { text-align: right; white-space: nowrap; color: #777777; font-weight: normal; padding-right: 10px; }
.ea-reconciler-record td { white-space: nowrap; }
.ea-reconciler-record-sep { margin: 10px 0; }

/* Transfer history "Ownership history" style view (Date/Type/Provider/Recipient/Last modified):
   a whole-row highlight for an old row removed / current row added / recommended row changed, and
   a per-cell highlight for a column that disagrees with its matched counterpart. First-draft
   colours, pending review alongside the layout itself. */
.ea-reconciler-th-table td.ea-reconciler-cell-diff { background-color: #fff3b0; }
.ea-reconciler-th-table td.ea-reconciler-row-removed { background-color: #f8d7da; }
.ea-reconciler-th-table td.ea-reconciler-row-added { background-color: #d4edda; }
.ea-reconciler-th-table td.ea-reconciler-row-changed { background-color: #fde3b8; }

/* The combined old|current table (th_aligned_table): a vertical divider between the two 5-column
   groups, and a blank filler cell where one side has no row at this aligned position. */
.ea-reconciler-th-aligned th:nth-child(6), .ea-reconciler-th-aligned td:nth-child(6) { border-left: 2px solid #ddd; }
.ea-reconciler-th-aligned td.ea-reconciler-th-blank { background-color: #fafafa; }

/* The current|recommended animal_recent_owner table (aro_aligned_table): same idea as
   ea-reconciler-th-aligned above, but its two column groups are 4 wide (From/To/Herd/Owner), not 5,
   so the divider sits one column earlier. */
.ea-reconciler-th-aligned-4col th:nth-child(5), .ea-reconciler-th-aligned-4col td:nth-child(5) { border-left: 2px solid #ddd; }

/* Old (left) and current (right) evidence side by side, so the same row is easy to eyeball across
   both; recommended (expected) sits full width below since it's usually the thing being reviewed
   in most detail. Each column keeps its own .table_parent scrollbar (above) rather than the pair
   ever forcing the page itself wider. */
.ea-reconciler-panel-row { display: flex; gap: 20px; align-items: flex-start; }
.ea-reconciler-panel-col { flex: 1 1 0; min-width: 0; }
.ea-reconciler-panel-full { margin-top: 15px; }

/* === Interstate movement waybill (views/event/waybill.tt) === */
/* A small uppercase label sitting above each .ea-panel, naming the source form's section number
   so the on-screen layout stays traceable back to the printed National South American Camelid
   Declaration and Waybill while the cards themselves follow the app's own information order. */
.ea-wb-eyebrow {
    font: 700 11.5px Roboto, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa0a6;
    margin: 22px 0 8px;
}
.ea-wb-eyebrow:first-child { margin-top: 0; }
.ea-wb-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Waybill form only: same gentle orange nudge as .ea-seg above, on the co-grazing checkbox group - a rounded
   orange box until at least one box is checked, then the border/fill go transparent (padding stays fixed so
   nothing shifts on toggle). */
form[name="waybill"] .ea-wb-checks { border: 1px solid #f3d4a6; background: #fff3e0; border-radius: 10px; padding: 10px 14px; }
form[name="waybill"] .ea-wb-checks:has(input:checked) { border-color: transparent; background: transparent; }
/* Same nudge again, around Section 8's cattle tick declaration radios - its panel head stays blue (not orange)
   precisely so it doesn't get lost among these unanswered-field nudges. */
form[name="waybill"] .ea-wb-declare-box { border: 1px solid #f3d4a6; background: #fff3e0; border-radius: 10px; padding: 10px 14px; }
form[name="waybill"] .ea-wb-declare-box:has(input:checked) { border-color: transparent; background: transparent; }
/* Section 7's final declaration: unlike the boxes above, this one requires EVERY checkbox checked (not just one)
   before it clears, since a half-signed declaration isn't actually valid yet. */
form[name="waybill"] .ea-wb-declaration-box { border: 1px solid #f3d4a6; background: #fff3e0; border-radius: 10px; padding: 14px 16px; }
form[name="waybill"] .ea-wb-declaration-box:not(:has(input:not(:checked))) { border-color: transparent; background: transparent; }
.ea-wb-treatment-table td .ea-field-input { padding: 7px 10px; margin: 0; }
.ea-wb-skip-note {
    font: 400 13.5px Roboto, sans-serif;
    color: #9aa0a6;
    margin: 22px 0 18px;
}
.ea-wb-skip-note .glyphicon { margin-right: 6px; }

/* Section 8/9 required-vs-optional badge (state-derived, see get_waybill_data's is_tick_declaration_required / is_s9_required) and
   the click-to-expand explanatory text toggle next to it. Both sections stay visible and fillable regardless of the badge, per
   waybill-implementation-plan.md: eAlpaca can't compute the real cattle-tick/interstate-movement trigger precisely, so the badge
   is a default, not a hard gate. */
.ea-wb-badge {
    display: inline-block;
    font: 700 11px Roboto, sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
}
.ea-wb-badge--required { background: #fde8e8; color: #b13a3a; }
.ea-wb-badge--optional { background: #eef1f2; color: #7a7f84; }
.ea-wb-explain-toggle { font: italic 400 12.5px Roboto, sans-serif; }
.ea-wb-explain { margin: 10px 0 18px; }
.ea-wb-explain p:first-child { margin-top: 0; }
.ea-wb-explain ul:last-child { margin-bottom: 0; }

/* === Waybill printable output (views/event/waybill_print.tt) === */
/* On screen this renders inside the normal site chrome; @media print below isolates just .ea-wb-print, the standard "print only
   this element" trick (hide everything, then re-show the target subtree), rather than enumerating every header/nav/footer
   selector individually. */
.ea-wb-print-toolbar { margin-bottom: 18px; }
.ea-wb-print-toolbar .button { margin-right: 8px; }
.ea-wb-print-title { font: 900 22px Lato, sans-serif; margin: 0 0 4px; }
.ea-wb-print-sub { font: 400 14px Roboto, sans-serif; color: #7a7f84; margin: 0 0 18px; }
.ea-wb-print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .ea-wb-print-grid { grid-template-columns: 1fr; } }
.ea-wb-print-box { border: 1px solid #d8dcde; border-radius: 4px; padding: 12px 16px; margin-bottom: 14px; }
.ea-wb-print-box-title { font: 700 12.5px Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.03em; color: #34383d; margin-bottom: 8px; }
.ea-wb-print-kv { width: 100%; font: 400 13px Roboto, sans-serif; border-collapse: collapse; }
.ea-wb-print-kv th { text-align: left !important; font-weight: 400; color: #7a7f84; padding: 3px 10px 3px 0; vertical-align: top; white-space: nowrap; }
.ea-wb-print-kv td { text-align: left !important; padding: 3px 0; }
.ea-wb-print-animals { width: 100%; font: 400 13px Roboto, sans-serif; border-collapse: collapse; margin-top: 8px; }
.ea-wb-print-animals th, .ea-wb-print-animals td { text-align: left !important; border-bottom: 1px solid #eef1f2; padding: 4px 8px 4px 0; }
.ea-wb-print-sig-row { display: flex; gap: 32px; margin-top: 14px; font: 400 13px Roboto, sans-serif; }
.ea-wb-print-sig-line { display: inline-block; min-width: 160px; border-bottom: 1px solid #34383d; }
/* A blank underline for a value that's only ever completed on the paper copy, not captured online, with a tiny
   caption naming what goes on it so a blank kv-table cell doesn't just look like unexplained whitespace. */
.ea-wb-print-fill { display: inline-block; min-width: 140px; }
.ea-wb-print-fill-line { display: block; min-width: 140px; height: 12px; border-bottom: 1px solid #34383d; }
.ea-wb-print-fill-hint { display: block; font: 400 4pt Roboto, sans-serif; color: #9aa0a6; margin-top: 1px; }
/* A field made only of hand-fill values (Section 8/9): one row per field so the blank line sits right after its
   own label, the same way "Signature: ____" already does, rather than sharing a table column with every other
   row's (possibly much longer) label. */
.ea-wb-print-fill-rows { font: 400 13px Roboto, sans-serif; }
.ea-wb-print-fill-row { margin: 6px 0; }
.ea-wb-print-fill-row-label { color: #7a7f84; margin-right: 6px; }
@media print {
    body * { visibility: hidden; }
    .ea-wb-print, .ea-wb-print * { visibility: visible; }
    .ea-wb-print { position: absolute; top: 0; left: 0; width: 100%; }
    .no-print { display: none !important; }
    .ea-wb-print-box { break-inside: avoid; }
}

/* === Python test dashboard (views/system/python_tests.tt) === */
.ea-testdash-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px 48px; }

.ea-testdash-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.ea-testdash-h1 { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 27px; color: #34383d; margin: 0; }
.ea-testdash-sub { font-family: 'Roboto', sans-serif; font-size: 13.5px; color: #7a7f84; margin: 0 0 22px; }
.ea-testdash-sub code { background: #f4f6f7; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }

/* Hero: status + donut on the left, stat tiles + layer breakdown on the right */
.ea-testdash-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 20px; }
@media (max-width: 900px) { .ea-testdash-hero { grid-template-columns: 1fr; } }

.ea-testdash-status-row { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.ea-testdash-status-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex: none; color: #fff; font-size: 24px;
}
.ea-testdash-status-icon--pass { background: #79b23c; }
.ea-testdash-status-icon--fail { background: #d0564a; }
.ea-testdash-status-headline { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 21px; color: #34383d; line-height: 1.15; }
.ea-testdash-status-meta { font-family: 'Roboto', sans-serif; font-size: 13px; color: #7a7f84; margin-top: 3px; }
.ea-testdash-status-meta b { color: #4a5568; }

.ea-testdash-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.ea-testdash-btn {
    border: none; border-radius: 10px; padding: 0 16px; height: 38px;
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; white-space: nowrap; transition: background .15s, transform .05s;
}
.ea-testdash-btn:active { transform: translateY(1px); }
.ea-testdash-btn-primary { background: #79b23c; color: #fff; }
.ea-testdash-btn-primary:hover { background: #6a9e33; color: #fff; text-decoration: none; }
.ea-testdash-btn-outline { background: #fff; border: 1.5px solid #dfe3e6; color: #5a6066; }
.ea-testdash-btn-outline:hover { background: #f4f6f7; color: #34383d; text-decoration: none; }

/* Trend strip - one bar per historical run, most-recent on the right, like a CI build-history
   strip. Deliberately a lightweight visual signal (native `title` tooltip for the exact numbers
   on hover), not a link to per-run drill-down - the underlying log only keeps the latest run's
   full output, so there's nothing to link a past bar to yet (see get_python_test_history's
   docstring if that changes). */
.ea-trend-strip {
    display: flex; align-items: flex-end; gap: 3px; height: 44px;
    margin: 14px 0 4px; padding: 0 2px;
}
.ea-trend-bar {
    flex: 1 1 0; min-width: 3px; max-width: 14px; border-radius: 3px 3px 1px 1px;
    cursor: default; transition: opacity .1s;
}
.ea-trend-bar:hover { opacity: .75; }
.ea-trend-bar--healthy { background: #79b23c; }
.ea-trend-bar--warn    { background: #e8862e; }
.ea-trend-bar--bad     { background: #d0564a; }
.ea-trend-empty { font-family: 'Roboto', sans-serif; font-size: 12.5px; color: #9aa0a6; padding: 12px 2px; }
.ea-trend-caption { display: flex; justify-content: space-between; font-family: 'Roboto', sans-serif; font-size: 11px; color: #9aa0a6; padding: 0 2px; }

/* Per-layer (schema/api/ui) breakdown rows */
.ea-testdash-layers { display: flex; flex-direction: column; gap: 12px; }
.ea-testdash-layer-row { display: flex; align-items: center; gap: 12px; }
.ea-testdash-layer-label { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; color: #34383d; width: 62px; flex: none; text-transform: capitalize; }
.ea-testdash-layer-bar { flex: 1; height: 9px; border-radius: 5px; background: #eef0f2; overflow: hidden; display: flex; }
.ea-testdash-layer-seg--pass { background: #79b23c; height: 100%; }
.ea-testdash-layer-seg--fail { background: #d0564a; height: 100%; }
.ea-testdash-layer-pct { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; width: 40px; flex: none; text-align: right; }
.ea-testdash-layer-pct--good { color: #4a7520; }
.ea-testdash-layer-pct--bad { color: #a34a3f; }
.ea-testdash-layer-count { font-family: 'Roboto', sans-serif; font-size: 11.5px; color: #9aa0a6; width: 64px; flex: none; }

/* Failures list */
.ea-testdash-failure-name { font-family: 'Roboto Mono', 'Menlo', monospace; font-size: 13px; font-weight: 700; color: #34383d; word-break: break-all; }
.ea-testdash-failure-trace {
    font-family: 'Roboto Mono', 'Menlo', monospace; font-size: 12px; line-height: 1.5;
    background: #fbfbfb; border-top: 1px solid #f0cfcb; margin: 0; padding: 12px 16px;
    white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; color: #52302b;
}

/* Grouped, collapsible per-file test listing */
.ea-testdash-filter-row { display: flex; align-items: center; gap: 8px; margin: 26px 0 14px; flex-wrap: wrap; }
.ea-testdash-filter-chip {
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12.5px;
    border: 1px solid #dfe3e6; background: #fff; color: #5a6066;
    border-radius: 18px; padding: 5px 14px; cursor: pointer; transition: background .12s, border-color .12s;
}
.ea-testdash-filter-chip.is-active { background: #eef6e4; border-color: #d9e9c6; color: #4a7520; }
.ea-testdash-filter-chip:hover { border-color: #c7ccd1; }

.ea-testfile { border: 1px solid #e6e9eb; border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.ea-testfile[open] { box-shadow: 0 1px 3px rgba(20,30,20,.05); }
.ea-testfile-summary {
    display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer;
    list-style: none; font-family: 'Roboto', sans-serif;
}
.ea-testfile-summary::-webkit-details-marker { display: none; }
.ea-testfile-summary::before {
    content: "\25B8"; display: inline-block; font-size: 12px; color: #9aa0a6;
    transition: transform .12s; width: 10px; flex: none;
}
.ea-testfile[open] > .ea-testfile-summary::before { transform: rotate(90deg); }
.ea-testfile-path { font-family: 'Roboto Mono', 'Menlo', monospace; font-size: 12.5px; color: #34383d; flex: 1; }
.ea-testfile-summary.ea-testfile-summary--fail .ea-testfile-path { color: #a34a3f; }
.ea-testfile-mini-bar { width: 60px; height: 6px; border-radius: 3px; background: #eef0f2; overflow: hidden; flex: none; display: flex; }
.ea-testfile-count { font-family: 'Roboto', sans-serif; font-size: 11.5px; color: #9aa0a6; flex: none; }
.ea-testfile-body { border-top: 1px solid #eef0f2; padding: 4px 0; }
.ea-testrow { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 34px; font-family: 'Roboto Mono', 'Menlo', monospace; font-size: 12px; }
.ea-testrow:hover { background: #fafbfb; }
.ea-testrow-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ea-testrow-dot--pass  { background: #79b23c; }
.ea-testrow-dot--fail  { background: #d0564a; }
.ea-testrow-dot--muted { background: #cfd4d8; }
.ea-testrow-name { color: #4a5568; }
.ea-testrow--fail .ea-testrow-name { color: #a34a3f; font-weight: 700; }

.ea-testdash-rawlog summary { cursor: pointer; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13.5px; color: #5a6066; padding: 10px 2px; }
.ea-testdash-rawlog pre {
    font-family: 'Roboto Mono', 'Menlo', monospace; font-size: 11.5px; line-height: 1.5;
    background: #292d33; color: #d4d8dc; border-radius: 10px; padding: 16px;
    max-height: 560px; overflow: auto; margin-top: 6px;
}

.ea-testdash-empty {
    text-align: center; padding: 60px 20px; color: #7a7f84; font-family: 'Roboto', sans-serif;
}
.ea-testdash-empty .glyphicon { font-size: 40px; color: #cfd4d8; margin-bottom: 14px; display: block; }

/* === Convenor reports (views/event/convenor/reports.tt) ===
   A menu of report downloads/views, grouped into .ea-panel sections by theme rather than the flat
   grid of Bootstrap tiles it replaces. Reuses the shared .ea-panel/.ea-panel-head/.ea-icon-tile
   family (public/css/style.css, search '.ea-panel') for the section shells; only the row layout
   inside each panel body and the pill-style download/view buttons are new here. Playwright's
   ReportsPage (tests/helpers/pages/event/manage_event_page.py) locates rows by 'a.btn-dload' /
   'a.document' and reads the plain 'disabled' attribute for a disabled report, so both of those
   markers stay on the link element itself, alongside the new ea-reports-btn* classes. */
.ea-reports-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.ea-reports-h1 { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 27px; color: #34383d; margin: 0; }
.ea-reports-h1 span { color: #4a7520; }

/* Classic/new-look toggle (views/event/convenor/reports.tt keeps the classic view's markup live
   in the DOM and the new look's inert inside a <template>, cloning it in only on first switch -
   see the template's own comment for why: it stops the new look's identical hrefs from ever
   sitting in the DOM alongside the classic view's and breaking Playwright's strict-mode locators).
   Deliberately NOT given the sitewide '.button' class - '.fill .button' (style.css ~line 451)
   would out-specificity this rule's border/background/padding since both are single-class
   selectors but '.fill .button' also matches via its extra ancestor class. float:right replaces
   the '.button-section .button.right' float utility that class would otherwise have opted into. */
.ea-reports-toggle-btn {
    float: right; border: 1.5px solid #dfe3e6; background: #fff; color: #5a6066;
    border-radius: 20px; padding: 0 16px; height: 34px;
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12.5px;
    cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.ea-reports-toggle-btn:hover { background: #f4f6f7; color: #34383d; border-color: #c7ccd1; }

.ea-reports-notice {
    background: #f6f7f8; border: 1px solid #e6e9eb; border-radius: 10px;
    padding: 12px 16px; margin: 10px 0 20px; font-family: 'Roboto', sans-serif; font-size: 13.5px; color: #5a6066;
}
.ea-reports-notice p { margin: 0; }
.ea-reports-notice p.italics { margin-top: 5px; font-style: italic; color: #6b7177; }

.ea-reports-list { display: flex; flex-direction: column; }
.ea-reports-row { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid #eef0f1; }
.ea-reports-row:last-child { border-bottom: none; }
.ea-reports-row-icon {
    width: 34px; height: 34px; border-radius: 9px; background: #f4f6f7; color: #6b7177;
    display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px;
}
.ea-reports-row-text { flex: 1; min-width: 0; }
.ea-reports-row-name { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 14px; color: #34383d; }
.ea-reports-row-format {
    font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 11px; color: #9aa0a6;
    text-transform: uppercase; letter-spacing: .03em; margin-left: 8px;
}
.ea-reports-row-note { font-family: 'Roboto', sans-serif; font-size: 12px; color: #9aa0a6; margin-top: 2px; }

.ea-reports-row-actions { display: flex; gap: 8px; flex: none; }

/* Icon comes from the shared 'a.btn-dload::before'/'a.document::before' rule (search
   'button.btn-dload::before' in this file) - these classes stay on the link for the Playwright
   locators noted above, so no separate glyphicon markup is added here (that would double the icon). */
.ea-reports-btn {
    border-radius: 9px; padding: 0 16px; height: 34px; flex: none;
    display: inline-flex; align-items: center;
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12.5px;
    text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
/* 'a.' prefix (not just '.ea-reports-btn--dl') is deliberate: these links sit inside <section
   class="fill">, and 'style.css' ~line 422's '.fill a { color: #74B446 }' otherwise outranks a
   bare single-class selector on specificity (two classes vs one) and silently wins the colour,
   even though this rule is declared later in the file. Matching its own specificity plus source
   order restores the intended colour - confirmed live via getComputedStyle before this fix, the
   icon and text were rendering '.fill a's green regardless of which colour was set here. */
a.ea-reports-btn--dl { background: #eef6e4; color: #4a7520; }
a.ea-reports-btn--dl:hover { background: #e3efd5; color: #3d6019; text-decoration: none; }
a.ea-reports-btn--view { background: #eef3f8; color: #3a6ea5; }
a.ea-reports-btn--view:hover { background: #dce9f4; color: #2c5883; text-decoration: none; }
.ea-reports-btn[disabled] { background: #f4f6f7; color: #b6bbc0; cursor: not-allowed; pointer-events: none; }
.ea-reports-row--disabled .ea-reports-row-name { color: #9aa0a6; }
.ea-reports-row--disabled .ea-reports-row-icon { color: #b6bbc0; }

@media (max-width: 640px) {
    .ea-reports-row { flex-wrap: wrap; }
    .ea-reports-btn, .ea-reports-row-actions { margin-left: 48px; }
}

/* Design B: same panels/colours/conditions as design A above, laid out as a card grid (up to 4
   per row, like the original Bootstrap tile grid this page had before either redesign) instead
   of A's stacked row list. */
.ea-reports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 980px) { .ea-reports-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ea-reports-grid { grid-template-columns: 1fr; } }

.ea-reports-card {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid #e6e9eb; border-radius: 12px; padding: 13px 14px; background: #fff;
}
.ea-reports-card-icon {
    width: 32px; height: 32px; border-radius: 9px; flex: none; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.ea-reports-card-icon--green { background: #eef6e4; color: #4a7520; }
.ea-reports-card-icon--orange { background: #fdf1e6; color: #b5660f; }
.ea-reports-card-icon--blue { background: #eef3f8; color: #3a6ea5; }

.ea-reports-card-body { flex: 1; min-width: 0; padding-right: 40px; }
.ea-reports-card--dual .ea-reports-card-body { padding-right: 108px; }
.ea-reports-card-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* font-size matches the classic view's '.t_text' heading (computed 16.8px live, from its
   1.2em/14px-base rule) - kept bold here since the card also carries badges and a description
   beneath it, unlike '.t_text's plain 400-weight tile label. */
.ea-reports-card-name { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16.8px; color: #34383d; }
.ea-reports-card-desc { font-family: 'Roboto', sans-serif; font-size: 11.5px; color: #9aa0a6; line-height: 1.4; margin-top: 4px; }

.ea-reports-card-lock {
    display: inline-flex; align-items: center; gap: 4px; background: #f4f6f7; color: #8a9099;
    font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .02em;
    border-radius: 10px; padding: 2px 8px 2px 6px;
}
.ea-reports-card-lock .glyphicon { font-size: 8px; }

/* Stretched-link pattern: for a single-action card, the <a> covers the WHOLE card (inset:0,
   transparent, z-index above the icon/text) so clicking anywhere in the cell downloads/views -
   its ::before icon glyph (the actual download/document icon, same source as .ea-reports-btn
   above - search 'button.btn-dload::before') is then styled as its own absolutely-positioned
   circle badge top-right, purely visual. This keeps it ONE <a> per card (same element Playwright
   locates by href/'disabled' - tests/helpers/pages/event/manage_event_page.py's ReportsPage),
   just re-shaped, rather than adding a second overlay link alongside the visible one.
   Icon glyph is 13.2px/circle 33px (both +10% from the original 12px/30px). */
.ea-reports-card-action {
    position: absolute; inset: 0; z-index: 1; text-decoration: none;
}
.ea-reports-card-action::before {
    position: absolute; top: 12px; right: 12px; width: 33px; height: 33px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13.2px;
    padding-right: 0 !important; transition: background .15s, color .15s;
}

/* Event catalogue's two format buttons (CSV/DOCX) are the one exception: kept icon-click-only,
   NOT stretched to the whole card - two downloads on one cell would make a whole-cell click
   ambiguous. .ea-reports-card-actions overrides the stretched positioning back to two small
   boxes, each independently clickable, icon+label both inside the one <a> (so the label is part
   of the click target too) with a light grey border on hover of that specific box only - the
   whole-card hover affordance further below is deliberately skipped for this card. */
/* top:9px + the box's own 3px top padding = 12px to the icon, matching the stretched-link icon's
   'top:12px' on every other card exactly - a wider top box padding (as this had before) pushed
   the icon visibly lower than the rest of the row. right:12px (not 10px) plus the tighter padding
   below keeps the hover border clear of the card's own 12px corner radius instead of crowding it. */
.ea-reports-card-actions { position: absolute; top: 9px; right: 12px; display: flex; gap: 6px; z-index: 1; }
.ea-reports-card-actions .ea-reports-card-action {
    position: static; width: auto; height: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 3px 6px 5px; border-radius: 8px; border: 1px solid transparent; transition: border-color .15s;
}
.ea-reports-card-actions .ea-reports-card-action:hover { border-color: #c7ccd1; }
.ea-reports-card-actions .ea-reports-card-action::before {
    position: static; width: 33px; height: 33px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13.2px;
    padding-right: 0 !important;
}
.ea-reports-card-action-label {
    font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 9.5px; color: #9aa0a6;
    text-transform: uppercase; letter-spacing: .03em;
}

/* Same format label as the catalogue's two-icon stack above, but for the single-download cards:
   the icon here is the stretched-link <a>'s ::before pseudo-element (not a real element to put a
   flex sibling under), so this is placed independently, positioned to sit directly under that
   33px circle (top:12px + 33px + 4px gap = 49px). pointer-events:none lets a click on the label
   fall through to the stretched <a> beneath it rather than landing on inert text. */
.ea-reports-card-format-label {
    position: absolute; top: 49px; right: 12px; width: 33px; text-align: center; z-index: 1;
    font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 9.5px; color: #9aa0a6;
    text-transform: uppercase; letter-spacing: .03em; pointer-events: none;
}

/* 'a.' prefix - same '.fill a' specificity collision as 'a.ea-reports-btn--dl' above. The colour
   always lives on '::before' now (the icon glyph's own circle), for both shapes: the stretched
   (whole-card) case and the compact (.ea-reports-card-actions) case - only the box AROUND it
   differs (full-card overlay vs. a small bordered-on-hover box). */
a.ea-reports-card-action--green::before { background: #eef6e4; color: #4a7520; }
a.ea-reports-card-action--green:hover::before { background: #e3efd5; color: #3d6019; }
a.ea-reports-card-action--orange::before { background: #fdf1e6; color: #b5660f; }
a.ea-reports-card-action--orange:hover::before { background: #f7e4c8; color: #8a4e0c; }
a.ea-reports-card-action--blue::before { background: #eef3f8; color: #3a6ea5; }
a.ea-reports-card-action--blue:hover::before { background: #dce9f4; color: #2c5883; }
.ea-reports-card-action[disabled]::before { background: #f4f6f7; color: #c3c8cc; }
.ea-reports-card-action[disabled] { cursor: not-allowed; pointer-events: none; }

/* Whole-card hover affordance - fires naturally since the stretched <a> is the same size as the
   card, no :has() needed. Skipped for the catalogue's compact/non-stretched card (no single click
   target to hint at) and for disabled cards (pointer-events:none already signals non-interactive). */
.ea-reports-card:not(.ea-reports-card--dual):not(.ea-reports-card--disabled):hover {
    border-color: #c7ccd1; box-shadow: 0 2px 8px rgba(20,30,20,.08);
}

.ea-reports-card--disabled .ea-reports-card-name,
.ea-reports-card--disabled .ea-reports-card-desc { color: #b0b5ba; }
.ea-reports-card--disabled .ea-reports-card-icon { opacity: .55; }