:root {
    --herdboss-blue: #1e509a;
    --herdboss-blue-bright: #2769cc;
    --herdboss-blue-brightest: #3083ff;
    --color-gentle-background: #bddeff;
    --color-gentle-background-translucent: #bddeff33;
    --color-active-sort: #11ef6a3d;
    --color-gentle-background-green: #d0efd5;
    --color-row-odd: #bddeff47;
    --gradient-header: linear-gradient(to bottom, var(--herdboss-blue), #1b498f);
    --color-placeholder: #ccc;
    --color-subtle: #72777c;
    --herdboss-button-disabled: #7a8799;
    --translucent-white: #fffa;
    --orange-highlight: #d45c00;
    --error-border: #d45c00;
    --error-text: #d45c00;
    --message-highlight-warning: #d45c00;
    --delete-red: #900;
    --delete-red-bright: #c00;
    --negative: #900;
    --positive: #060;
    --deactivated-red-background: #ffe6f2;
}

/*
    When setting the primary font stack, apply it to the Pure grid units along
    with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
    specific font stacks to ensure the greatest OS/browser compatibility.
    */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: "Open Sans", Verdana, Geneva, sans-serif !important;
    font-size: 5vw;
}

hr {
    border: 0.5px solid silver;
}

h1 {
    font-size: 7vw !important;
    font-weight: 600;
}

h3 {
    font-weight: 600;
}

p, div, li, tr, th, td {
    margin: 0;
    padding: 0;
}

body {
    background-color: #555;
}

#menu-background-overlay {
    display: none;
}

#section-content {
    background-color: #fff;
    position: relative;
}

.index #section-content {
    z-index: 0;
}

.subtle {
    color: #999;
}

a:link,
a:visited {
    color: var(--herdboss-blue);
}

a.big-button:link,
a.big-button:visited,
a.medium-button:link,
a.medium-button:visited
{
    color: #fff;
}

.big-button-container {
    text-align: center;
    margin-top: 20px;
}

.big-button, .medium-button {
    background-color: var(--herdboss-blue-bright);
    color: white;
    display: inline-block;
    border: none;
}

.big-button.standard-blue {
    background-color: var(--herdboss-blue);
}

.big-button:disabled, .medium-button:disabled {
    background-color: var(--herdboss-button-disabled);
}

.big-button {
    border-radius: 1vw;
    padding: 2vw;
}

.medium-button {
    border-radius: 0.5vw;
    padding: 1vw;
}

.big-button:hover:enabled,
.medium-button:hover:enabled
{
    text-decoration: none;
    background-color: var(--herdboss-blue-brightest);
}

.meet-herdboss-container .big-button {
    padding: 10px 60px;
}



.localhost-server .header-bar {
    background-image: none;
    background-color: #500b67;
}

.dev-server .header-bar {
    background-image: none;
    background-color: #3b663a;
}

.header-bar a {
    color: white;
}

#logo {
    width: 70%;
}

.header-user-links {
    text-align: center;
    margin-bottom: 3vw;
}

.header-user-links-spacer {
    margin: 0 10px;
}

.hamburger-menu {
    vertical-align: middle;
    text-align: center;
}

.hamburger-menu img {
    width: 50%;
    vertical-align: middle;
    display: inline;
    margin-top: 7%;
}

.valign-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#header-nav {
    /*display: none;*/
}

#header-menu {
    margin: 10px 0 10px 0;
}

#header-menu li {
    text-align: center;
    /*font-weight: bolder;*/
    margin-bottom: 1vw;
}

.header-signup-button {
    background-color: var(--herdboss-blue-brightest);
    color: #fff;
    padding: 0.8vw 4vw;
    border-radius: 1vw;
    margin-top: 0.1vw;
    display: inline-block;
    margin-right: 1vw;
}

.header-signup-button:link,
.header-signup-button:visited {
    color: #fff;
}

.signup-breadcrumbs {
    margin-top: 1em;
}

.signup-species-grid {
    padding: 0.5vw;
}

.signup-species-grid-item {
    text-align: center;
    padding-bottom: 0.5em;
}

.signup-species-container {
    padding-top: 100%;
    position: relative;
}

.signup-species-gutter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0.5vw;
}

.signup-species-content {
    background: #d6d7d7;
    width: 100%;
    height: 100%;
}

.signup-species-content:hover {
    cursor: pointer;
}

.signup-species-content.selected {
    background: var(--herdboss-blue);
}

#section-footer {
    padding-top: 30px;
    padding-bottom: 30px;
    color: #fff;
}

#section-footer a:link,
#section-footer a:visited {
    color: #fff
}

#section-footer .socialmedia {
    text-align: center;
}

#section-footer .socialmedia .social-icon {
    padding-left: 29px;
    padding-right: 29px;
    max-height: 33%;
}

#section-footer .socialmedia .social-icon.youtube {
    padding: 0;
}

#section-footer .supportlink {
    text-align: center;
}

#section-footer .copyright {
    font-size: 4vw;
    text-align: center;
    padding-top: 1vw;
}

#section-content {
    padding-bottom: 60px;
}

.index #section-content {
    padding-bottom: 0;
}

#section-content .content {
    /*background-color: #fff;*/
    padding: 0 0;
    box-sizing: border-box;
    min-width: 60%;
}

.how-to #section-content p,
.how-to #section-content h1,
.how-to #section-content h3 {
    margin-bottom: 1em;
}

.how-to #section-content p {
    margin-bottom: 1em;
}

.how-to #section-content h1 {
    font-size: 6.5vw !important;
    margin-bottom: 2vw;
}

.how-to #section-content h3 {
    font-size: 5vw !important;
    border-top: 1px solid var(--herdboss-blue-bright);
    padding-top: 3vw;
    background-size: 4vw !important;
}

.how-to #section-content h3:hover {
    cursor: pointer;
}

.how-to #section-content h3.closed {
    background: url(/images/icon_sort_asc.png) center right no-repeat;
}

.how-to #section-content h3.open {
    background: url(/images/icon_sort_desc.png) center right no-repeat;
}

.image-panel h1 {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 8vw;
    font-weight: normal;
    color: var(--herdboss-blue);
    background-color: var(--translucent-white);
    padding: 10px;
    text-align: center;
}

.about h1 {
    font-size: 8vw !important;
}

.about h2 {
    margin-top: 1em !important;
    border-bottom: 1px solid silver;
}

.about .staff-item-column:first-child {
    padding-right: 1em;
}

.about .staff-item-column:last-child {
    padding-left: 1em;
}

.image-panel h1 strong {
    font-weight: bolder;
}

.image-panel h2 {
    margin-top: 3vw;
    margin-bottom: 0;
    font-weight: bolder;
    padding: 3vw;
    text-transform: none;
}

.index .feature-list-container p {
    padding-left: 4vw;
    padding-bottom: 1vw;
}

.index .image-panel .top-content {
    margin-top: 2vw;
}

.index .image-panel .top-content-apps {
    margin-top: 5vw;
}

.index .image-panel .top-content-apps img {
    max-width: 80%;
}

.index .top-content .big-button {
    font-size: 7vw;
}

.image-panel .subheading {
    font-size: 4.5vw;
    text-align: center;
    background-color: var(--translucent-white);
    padding-bottom: 20px;
}


.features .hello-icon {
    /*width: 5vw;*/
    border-radius: 12px;
}

.features .hello-icon-container {
    padding: 4px;
}

.features .hello-bubble {
    margin-bottom: -1vw;
    /*width: 5vw;*/
}

.features h1 {
    text-align: center;
    font-weight: bolder;
    margin-top: 2vw;
    margin-bottom: 0;
}

.features h2,
.about h2 {
    text-align: center;
    font-size: 4.5vw !important;
    font-weight: bolder;
    margin-top: 0;
    color: var(--herdboss-blue-bright);
}

.about h2 {
    font-size: 6vw !important;
}

.features h3 {
    text-align: center;
    font-size: 4vw !important;
    font-weight: bolder;
    margin-top: 0;
    margin-bottom: 0;
    color: #fc6000;
}

.features .feature-item {
    margin-top: 90px;
}

.features .feature-screenshot {
    padding: 0 2vw;
}

.feature-text ul {
    margin: 0 0 2vw 0;
}

.feature-text li {
    font-size: 3.2vw;
    list-style: none;
    /*list-style-image: url(/images/checkmark.png);*/
    list-style-image: url(/images/checkmark-no-padding.svg);
}

.helpful-reports-container .feature-text li {
    font-size: 2.5vw;
}

.made-for-you {
    margin-bottom: 35px;
    padding-left: 25px;
}

.made-for-you strong {
    font-size: 1.1em;
}

.made-for-you-container h1 {
    margin-bottom: 1em;
}

.feature-item-right .feature-text {
    padding-left: 0;
}

.feature-item .filters {
    padding-left: 1vw;
    /*background: url(/images/features/filter-icon.png) no-repeat right bottom;*/
    background-size: 4vw;
}

.feature-item .filters h3 {
    margin-bottom: 0;
}

.feature-item .sales-buyers {
    font-size: 4vw;
}

.features .notdoing {
    margin-top: 3vw;
}

.features .notdoing h1 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 6vw !important;
}

.features .notdoing h1 em {
    color: red;
    font-style: normal;
    clear: left;
    display: inline-block;
}

.features .notdoing .wont-be-doing {
    margin-top: 0;
}

.index .feature-list {
    margin: 0 0 0 2vw;
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 4vw;
    padding-left: 10px;
}

.index .feature-list li {
    list-style-type: none;
    background: url(/images/checkmark-no-padding.svg) no-repeat left center;
    background-size: 4vw;
    padding-left: 5vw;
}

.index .trusted {
    text-align: center;
    font-weight: bolder;
    font-size: 4.5vw !important;
}

.index .quote-image {
    text-align: center;
}

.index .quote-image img {
    clip-path: circle(50% at center);
    -webkit-clip-path: circle(50% at center);
}

.index .quoteblock .quote blockquote {
    font-family: Garamond, "Courier New", serif;
    margin: 0 0 3vw 0;
}

.index .quoteblock .quote1 blockquote,
.index .quoteblock .quote2 blockquote {
    margin-bottom: 5vw;
}

.index .quoteblock .quote-name {
    font-weight: bolder;
}

.index .quoteblock .quote-name .business-name {
    font-size: 4vw;
}

.index .quoteblock {
    border-radius: 3vw;
    padding: 2vw;
    background-color: #f3f3f3;
    /*margin-bottom: 30px;*/
    margin: 2vw;
}

.index .quoteblock .five-stars {
    text-align: center;
    margin-bottom: 1vw;
}


.index .quoteblock .five-stars img {
    width: 50%;
}

.index .calltoaction h1 {
    font-size: 6vw;
    text-align: center;
}

.index .calltoaction h1 em {
    color: red;
    font-style: normal;
}

.index .calltoaction h2 {
    text-align: center;
    font-size: 8.5vw;
    text-transform: none;
}

.meet-herdboss-container {
    margin-top: 20px;
}

.features .meet-herdboss {
    font-family: 'Open Sans', sans-serif !important;
    padding-left: 3vw;
    padding-top: 3vw;
}

.features .meet-herdboss strong {
    color: var(--herdboss-blue-bright);
    font-weight: bold;
}

.features .notdoing-items {
    margin-top: 1em;
}

.features .notdoing-item {
    margin-top: 2vw;
    background: url(/images/features/x.png) no-repeat left 1.5vw;
    background-size: 5.5vw;
    padding-left: 8.5vw;
    min-height: 3vw;
}

.features .notdoing-item strong {
    font-family: 'Open Sans', sans-serif !important;
}

.features .notdoing-icon {
    width: 24px;
}

.features .notdoing .finally-delivers {
    margin-top: 8vw;
    font-size: 6vw !important;
    color: var(--herdboss-blue-bright);
}

.features .productivity h1 {
    margin-bottom: 3vw;
    margin-top: 5vw;
    font-family: 'Roboto', sans-serif !important;
}

.features .productivity-item {
    margin-bottom: 4vw;
    padding-left: 17vw;
    background-size: 12vw !important;
}

.features .productivity-item strong {
    font-weight: bolder;
    color: var(--herdboss-blue-bright);
}

.features .productivity-item-access {
    background: url(/images/features/map-icon.png) no-repeat left center;
}

.features .productivity-item-teams {
    background: url(/images/features/team-icon.png) no-repeat left center;
}

.features .productivity-item-switch {
    background: url(/images/features/switch-icon.png) no-repeat left center;
}

.features .anywhere {
    margin-top: 8vw;
}

.features .anywhere .any-block {
    margin-top: 1em;
}

.features .anywhere .any-block.anys {
    text-align: right;
    padding-right: 2vw;
}

.features .anywhere .any-block strong {
    color: var(--herdboss-blue-bright);
}

.features .anywhere .mac {
    margin-top: 26px;
}

.features .anywhere .android {
    margin-top: 14px;
}

.features .old-vs-new {
    margin-top: 20px;
}

.features .badges-block .badge,
.signup-complete .badges-block .badge
{
    height: 13vw;
    width: auto;
}


.right {
    text-align: right;
}

.signup-complete p {
    line-height: 1.4em;
    text-align: justify;
}

.features .feature-item .badges-block .badge {
    height: 8vw;
    width: auto;
}

.pricing-text h2 {
    font-size: 2vw !important;
    text-align: center;
}

.pricing p {
    margin-bottom: 7vw !important;
}

body.admin {
    background: #fff !important;
}

#admin-header {
    background-color: #000;
    color: #fff;
}

#admin-header a:link,
#admin-header a:visited {
    color: #fff;
}

#admin-header ul {
    margin: 0;
    padding: 4px 10px;
}

#admin-header ul li {
    list-style-type: none;
    display: inline-block;
    margin-right: 1em;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*
h2 {
    text-transform: uppercase;
}

h3 {
    margin-top: 20px;
    margin-bottom: 5px;
}
*/

.filename-char-warning {
    font-size: 1.1vw !important;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

.template {
    display: none;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.center-innercontent {
    text-align: center;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-placeholder);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color-placeholder);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color-placeholder);
}

.header-bar {
    background-image: var(--gradient-header);
    color: white;
    padding: 0 20px;
}

.subheader-bar {
    background-image: var(--gradient-header);
    color: white;
    min-height: 63px;
}

.subheader-bar .app-store-badge img {
    /*max-height: 53px !important;*/
    /*height: 100%;*/
    max-height: 53px !important;
    /*max-width:  !important;*/
    box-sizing: border-box;
    margin: 5px auto;
    display: block;
}

.subheader-bar .manage-declaration {
    font-size: 33px;
    line-height: 63px;
    text-align: center;
}

.front-carousel .images {
    position: relative;
    /*height: 480px;*/
    /* percentage padding for top/bottom is based on the width (weirdly). So we can use this as an aspect ratio */
    padding-bottom: 51%;
}

.front-carousel img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.front-carousel .caption {
    text-align: center;
    font-size: 1.5em;
    padding: 10px 3px;
    margin: 6px 0;
}

.front-carousel .caption:first-child {
    padding-left: 0;
}

.front-carousel .caption:first-child .inner-caption {
    border-radius: 18px 5px 5px 18px;
    color: var(--herdboss-blue);
    background-color: white;
}

.front-carousel .caption:last-child {
    padding-right: 0;
}

.front-carousel .caption:last-child .inner-caption {
    border-radius: 5px 18px 18px 5px;
    color: var(--herdboss-blue);
    background-color: white;

}

.front-carousel .inner-caption {
    border: 1px solid silver;
    border-radius: 5px;
    color: white;
    background-color: var(--herdboss-blue);

}

.front-carousel .caption:first-child {
}

.front-carousel .caption em {
    font-size: 1.5em;
    font-weight: 900;
    text-transform: uppercase;
    font-style: normal;
    font-family: sans-serif;
}

.ui-widget-header {
    background-image: var(--gradient-header) !important;
    color: white !important;
}

.ui-datepicker select {
    color: #000;
}

.ui-widget-overlay {
    background: #666 !important;
}


.missing-required-field {
    outline: 1px solid var(--error-border);
}

.xdebug-error {
    font-size: 14px;
}

.xdebug-error th, .xdebug-error td {
    padding: 3px;
}

ul.menu {
    display: flex;
    flex-wrap: wrap;
}

#main-nav {
    justify-content: center;
}

#main-menu {
    margin-top: 30px;
    margin-bottom: 30px;
    letter-spacing: normal;
    font-size: 22px;
}

#main-menu li {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

#main-menu li.first a {
    border-left: 1px solid #ccc;
    border-radius: 8px 0 0 8px;
}

#main-menu li.last a {
    border-right: 1px solid #ccc;
    border-radius: 0 8px 8px 0;
}

#main-menu li a {
    padding: 12px 16px;
    text-decoration: none;
    background-color: #000;
    color: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
    font-size: 0.8em;
}

#main-menu li a:hover {
    color: #000;
    background-color: #fff;
}

#main-menu li.active a {
    color: #2057a8 !important;
    background-color: #fff;
}

.clearfix:after {
    font-size: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.hidden {
    display: none;
}

.colhidden {
    visibility: collapse;
}

ul.inline {
    padding: 0;
}

ul.inline li {
    list-style-type: none;
}

ul.inline > li {
    display: inline;
    list-style-type: none;
}

.login #section-content .content,
.signup #section-content .content {
    min-width: auto;
}

.login-signup h1 {
    margin-top: 0;
}

.login-signup label {
    color: var(--color-subtle);
}

.login-signup input[type="text"],
.login-signup input[type="email"],
.login-signup input[type="password"] {
    margin: 4px 0 15px 0;
    background-color: #fbfbfb;
    font-size: 1.2em;
    width: 93%;
}

.login-signup .remember-me {
    font-size: 0.9em;
    white-space: nowrap;
}

.login-signup .remember-me,
.login-signup .login-signup-button {
    /*height: 3em;*/
    padding-top: 6px;
}

.login-signup .remember-me input,
.login-signup .remember-me label {
    vertical-align: middle;
}

.login-signup .login-signup-button {
    text-align: right;
}

.login-signup .disclaimer,
.account .disclaimer,
.admin-account .disclaimer
{
    color: var(--color-subtle);
    font-size: 0.8em;
    margin-bottom: 25px;
    display: inline-block;
}

.plancheckbox {
    position: absolute;
    top: 1em;
    left: 1em;
}

.pre-selected-plan {
    margin-bottom: 1.5em;
}

.pre-selected-plan img,
.pre-selected-plan span {
    vertical-align: middle;
}

.remember-me > input {
    width: 4vw;
    min-height: 3vw;
}

.account .disclaimer,
.admin-account .disclaimer
{
    padding-left: 40px;
    padding-right: 40px;
}

.account .password-field,
.admin-account .password-field
{
    width: 85%;
}

.account-section-header h5 {
    color: #666;
    /*font-size: 1.5vw;*/
    font-weight: lighter;
    margin: 0;
    line-height: 3vw;
}

.account-item {
    line-height: 1.2em;
}

.account-item-with-spacing {
    padding-bottom: 1em;
}

.account h1 {
    margin-top: 4px;
    margin-bottom: 24px;
}

.storage-units-free-notification {
    margin-top: 0 !important;
    margin-bottom: 1em !important;
}

.planbox,
.files-upgrade-box
{
    border: 0.3vw solid #ccc;
    border-radius: 3px;
    margin: 15px 0;
    position: relative;
    cursor: pointer;
}

.planbox.active {
    border: 0.3vw solid var(--herdboss-blue-bright);
}

.account-subscribe-after-trial .planbox {
    padding-top: 1em;
    padding-bottom: 1em;
}

.planboxsection
{
    min-height: 120px;
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
}

.planbox.free-notallowed {
    opacity: 0.5;
}

.planbox .selectedplan {
    display: none;
    position: absolute;
    left: -30px;
    top: 28px;
}

.account-subscribe-after-trial .planbox .selectedplan {
    width: 50px;
    left: -27px;
    top: -13px;
}


.planbox.active .selectedplan {
    display: inline-block;
}

.plannamecontainer {
    background: #ddd;
    line-height: 1.4em;
    text-align: center;
}


.planbox.active .plannamecontainer {
    background: var(--color-gentle-background);
}


.planboxsection-inner {
    width: 100%;
}

.planbox .currentplan,
.planbox .freetrialmessage,
.planbox .filescost,
.files-upgrade-box .filescost
{
    /*font-size: 0.7em;*/
    font-weight: bold;
}

.planbox .filescost,
.files-upgrade-box .filescost {
    margin-top: 0.3em;
    line-height: 1.2em;
}

.estimated-cost {
    font-size: 0.7em;
    margin-top: 0.8em;
    margin-bottom: 1em;
    line-height: 1.2em;
}

.planbox .plannamecontainer .freetrialmessage {
    line-height: 1.2em;
    margin-top: 1em;
}

.planbox .plannamecontainer .planname {
    font-weight: 600;
    text-transform: uppercase;
}

.files-upgrade-box {
    padding: 1em;
}

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

.storage-reduction-options {
    margin-top: 1em;
}

.cancellation-progress-container {
    margin-top: 2em;
}

#free-notallowed-explanation {
    display: none;
}

.usd-notice {
    text-align: center;
    color: #999;
}

.usd-notice {
    margin-top: 1em;
    font-size: 1.1vw !important;
}

.cancel-separator {
    margin: 40px 0;
}

#cancel-reason {
    height: 4em;
    margin-bottom: 1em;
}

#destructive-button {
    background-color: var(--delete-red);
}

#destructive-button:active {
    background-color: var(--delete-red-bright);
}

#destructive-button[disabled] {
    color: #000 !important;
    background-color: var(--color-placeholder);
}


body.account-cancel-start .button-submit-container {
    text-align: start;
    margin-top: 1em;
}

.checkmark {
    padding-left: 5px;
}

.login .sign-up,
.login .forgot-password {
    text-align: center;
    margin-top: 10px;
}

.login .sign-up a,
.login .forgot-password a {
    text-decoration: underline;
}

.splitlist-section-header {
    padding-top: 1em;
    padding-bottom: 0.5em;
    font-size: 1em !important;
    font-weight: bold;
}


.herdboss-app-iphone-android .screenshot-link {
    padding: 5px;
}

.herdboss-app-iphone-android .screenshot {
    /*height: 235px;*/
    /*width: auto;*/
    margin: 5px;
    border: 1px solid black;
}

.badges-block .main-screenshot {
    /*width: 320px;*/
    /*height: auto;*/
    border: 1px solid black;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
}

.badges-block .badge {
    margin-top: 0;
    margin-bottom: 40px;
    max-width: 100%;
    width: 100%;
}

.content p {
    margin-bottom: 10px;
}

.content a {
    color: #1e509a;
}

.herd-sheep h1.name {
    margin-top: 0;
}

.jump-to-container {
    float: right;
}

.jump-to-container input {
    width: 100%;
}

.herd-reports .back-to-report-list {
    margin-top: 1em;
}

.herd-reports h1 {
    font-size: 1.5vw !important;
}

.reports li {
    padding-bottom: 10px;
}

.nobreak {
    white-space: nowrap;
}

table.sales {
    /*width: 100%;*/
    overflow-x: scroll;
    margin: 0 0.5vw;
}

table.sales td, table.sales th {
    padding: 5px 10px;
}

table.sales tr.even,
table.sales tr.odd {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 0.1em 0.6em;
}

table.sales tr.odd {
    background-color: #f7f7f7;
}

.account .emailverify {
    background-color: #ffffcc;
    border: 1px solid silver;
    padding: 20px;
    margin-bottom: 2em;
}

.herd-listing-title {
    margin-top: 0;
    padding-left: 0.5em;
}

.record-count {
    padding-right: 0.5em;
    text-align: right;
}

.herd-listing {
    overflow-x: scroll;
    position: relative;
}

.herd-listing td,
.herd-listing th
{
    font-size: 18px;
    white-space: nowrap;
}

.herd-listing th.sort-selected {
    font-weight: bold;
}

.herd-listing td.column-address {
    white-space: normal;
}

.herd-title-chooser-link-container {
    font-size: 0.6em;
    font-weight: normal;
    margin-left: 1em;
}

.current-page-highlight {
    border: 1px solid silver; padding: 0 2px;
}

.bulk-actions-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.bulk-actions-menu li {
    margin-top: 8px;
    padding: 4px;
}

.bulk-action-steps {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.bulk-action-steps > li {
    margin-bottom: 12px;
}

.bulkaction-list {
    border-collapse: collapse;
}

.bulkaction-list td,
.bulkaction-list th
{
    padding: 4px 10px;
    border: 1px solid silver;
}

.radio-label {
    display: inline-block;
}

.radio-group {
    padding-left: 2em;
}

.space-above {
    margin-top: 1em !important;
}

.space-after {
    margin-right: 1em !important;;
}

.space-below {
    margin-bottom: 1em !important;;
}

.litter-header {
    border-bottom: 1px solid silver;
    width: 80%;
    margin-bottom: 0.5em;
    margin-top: 1em;
}


.big-space-below {
    margin-bottom: 2em !important;
}

.subscription-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #eee8;
    z-index: 1000;
}

.subscription-overlay-content {
    background-color: #fff;
    margin-top: 5em;
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
    -moz-box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
    box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
    padding: 2em;
}

.subscription-overlay-content .overlay-icon-container {
    position: relative;
}

.subscription-overlay-content .overlay-icon {
    position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
}

.herd-menu-container {
    padding-right: 20px;

}

#herd-menu,
#payments-menu
{
    margin-top: 10px;
    margin-bottom: 20px;
}

#account-menu {
    margin-top: 20px;
    margin-bottom: 0;
}

#herd-menu li,
#payments-menu li,
#account-menu li
{
    padding-right: 55px;
    font-size: 0.9em;
    line-height: 1.8em;
}

#herd-menu li.first,
#account-menu li.first
{
    margin-left: 5px;
}

#payments-menu li,
#account-menu li
{
    margin-bottom: 10px;
    display: block;
}

#herd-menu li.active a,
#payments-menu li.active a,
#account-menu li.active a
{
    text-decoration: underline;
}

#payment-form {
    margin-top: 2em;
}

#content-container {
    position: relative;
}

.herd .column {
    /*outline: 1px solid red;*/
}

.account #section-content,
.account #section-content .content {
    background-color: #f3f3f3;
    font-size: 20px !important;
}

.account .account-field-label,
.account .account-field-value
{
    line-height: 2em;
}

.account .account-field-value input[type="text"],
.account .account-field-value input[type="email"],
.account .account-field-value input[type="password"]
{
    padding: 10px;
    width: 100%;
}


.account .account-field-label {
    color: #666;
}

.account-field-label.forgot-password {
    /*text-align: right;*/
    margin-bottom: 1em;
}


.top-spacer {
    margin-top: 20px;
}

.witness-me {
    max-width: 100%;
    height: auto;
}

.herd .label,
.account .label,
.all-sales .label,
.admin-account .label
{
    text-align: right;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.herd .label::after {
    content: ":";
}

.herd .label.noafter::after {
    content: "";
}

.herd .value,
.account .value,
.admin-account .value,
.all-sales .value {
    font-weight: 600;
    padding-top: 4px;
    padding-bottom: 4px;
}

.if-cookie-consent-is-missing {
    padding-top: 2em;
    font-size: 0.8em !important;
    color: var(--color-subtle);
    display: none;
}

button, input, optgroup, select, textarea {
    font-weight: normal;
}

#isfavoritebutton {
    cursor: pointer;
    width: 2vw;
}

.near-paid-quota-warning {
    margin-top: 0 !important;
    margin-bottom: 1em !important;
}

#agree-to-tos {
    margin-left: 0.5em;
}

.agree-to-tos-message.user-message {
    margin-bottom: 1em;
    margin-top: 0;
}

.download-link-container {
    margin-bottom: 1em !important;
}

.storage-bar {
    background: var(--herdboss-blue);
    height: 30px;
    outline: 1px solid #808080;
    margin-top: 7px;
}
.storage-bar-label {
    height: 30px;
    margin-top: 7px;
    padding-left: 5px;
    display: inline-block;
}

.storage-bar-used {
    background-color: var(--message-highlight-warning);
    text-align: center;
    display: inline-block;
}

.storage-bar-used-inner {
    background: url('/images/hashtile.svg') repeat-x;
    background-size: auto 100%;
    width: 100%;
    display: inline-block;
    height: 100%;
}

.storage-bar-used-inner-label {
    background-color: var(--message-highlight-warning);
    margin-top: 3px;
    display: inline-block;
    border-radius: 3px;
}

.storage-bar-available,
.storage-bar-used
{
    height: 100%;
    vertical-align: middle;
    color: white;
}

.storage-bar-available {
    /*background-color: #00aa00;*/
}

optgroup {

}

.herd-edit .label,
.herd-edit .value,
.account .label,
.account .value,
.admin-account .label,
.admin-account .value,
.all-sales .label,
.all-sales .value
{
    /*line-height: 27px;*/
    line-height: 1.5em;
}

.all-sales .value input {
    width: 100%;
}

.all-sales .all-sales-nav-list  {
    list-style-type: none;
    display: inline;
    padding-left: 0.5em;
}
.all-sales .all-sales-nav-list li {
    display: inline-block;
}

.all-sales .all-sales-nav-list li::after {
    content: " | ";
}

.all-sales .all-sales-nav-list li:last-child::after {
    content: none;
}

.all-sales-other-species {
    text-align: right;
    margin-top: 0.75em;
}

.account-payment-history .rowitem {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.account-payment-history .rowitem.pale {
    color: #999;
}

.account-payment-history .payment-spacer {
    margin-top: 1em;

}

.account-payment-history .odd {

}

.account-payment-history .even {
    background-color: #eee;
}


.herd .examplebox {
    border: 1px solid grey;
    height: 30px;
}

.herd #section-content .isownedbyme-banner {
    padding: 4px;
    background-color: var(--color-gentle-background);
    border-bottom: 1px solid silver;
    margin-bottom: 10px;
}

.herd #section-content h1 .link {
    font-weight: normal;
    font-size: 0.7em;
    margin-left: 0.5em;
}

.herd #section-content h2 .link {
    font-weight: normal;
    font-size: 0.7em;
    text-transform: none;
    margin-left: 0.5em;
}

.herd #section-content h3 .link {
    font-weight: normal;
    font-size: 0.8em;
    margin-left: 0.5em;
}

.herd-add-link {
    text-transform: capitalize;
    margin-bottom: 12px;
    padding-left: 5px;
    vertical-align: middle;
    line-height: 1.8em;

}

.pager {
    text-align: right;
    margin-bottom: 0.5em;
}

.herd #section-content .related-records {
    padding: 0 5px;
}

.admin .user-search-container {
    overflow-x: scroll;
}

.admin .user-search .inactive td {
    background-color: #fee;
}

.tinythumbnail {
    width: 50px;
}


td.tinythumbnail {
    height: 42px;
}

.related-records.files .tinythumbnail,
.related-records.files .tinythumbnail-heart
{
    width: 30px;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -3px;
}

.related-records.files .tinythumbnail-heart {
    width: 20px;
}

.tinythumbnailpadding {
    padding: 0 10px;
}

.herd-list-file td.column-isfavorite {
    padding-left: 0;
    padding-right: 0;
}

.search-fields {
    margin-bottom: 0.5em;
    vertical-align: middle;
    line-height: 1.8em;

}

.search-fields input[type="text"] {
    width: 100%;
}

.search-fields.clear-search {
    padding-left: 1em;
}



#section-content .related-records .record-container {
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}

/*.herd #section-content .related-records .record-container.first {*/
/*    border-top: 1px solid silver;*/
/*}*/

#section-content .related-records .record {
    padding: 5px 0;
}

#section-content .related-records .record:first-child {
    /*border-top: 1px solid silver;*/
}

#section-content .related-records .record:last-child {
}

#section-content .related-records .record.odd {
    background-color: var(--color-row-odd);
}

#section-content .related-records .record > div.edit,
#section-content .related-records .record > div.delete
{
    padding: 0 5px;
}

#section-content #photosblock .edit {
    font-size: 1.17vw;
    text-align: center;
    padding-bottom: 4px;
    padding-right: 4px;
    position: relative;
}

#section-content #photosblock .photo-web-overlay {
    position: absolute;
    bottom: 5px;
    left: 5px;
    /*background: url() no-repeat left bottom;*/
}

.record-details .filename img {
    vertical-align: middle;
}

#section-content .related-records .record div {
    font-size: 1.17vw;
}

#section-content .related-records .record .dosage,
#section-content .related-records .record .filesize,
#section-content .related-records .record .weightvalue
{
    text-align: right;
}

#section-content .related-records .record .famacha,
#section-content .related-records .record .bodycondition {
    text-align: center;
}

#section-content .related-records .record .filesize {
    padding-right: 5px;
}

/*.herd-edit .famacha select {*/
/*    padding-left: 1em;*/
/*    padding-right: 1em;*/
/*}*/

input[type="number"].rightalign
{
    text-align: right;
}

input[type="number"].rightalign::-webkit-outer-spin-button,
input[type="number"].rightalign::-webkit-inner-spin-button
{
    margin-left: 0.5em;
}

#section-content .notes .record-container .notetext {
    line-height: 1.3em;
}

#photosblock {
    padding-bottom: 0.5em;
}

.photo-thumb-preload {
    /*width: 100%;*/
    /*outline: 1px solid silver;*/
}

/* -start- added by wkh 2024-01-23 & 24 & 25 */
/*
    These classes were just undoing a different class that was intentionally adding
    padding between "sections" in the data, mimicking how the app data is arranged. -Kenny, 2024-01-25

    But that was only true on one of the several pages on which these classes are used.  The other places,
    the spacing is very large and makes the page look unbalanced.  It looks correct and per design on the one page,
    but incorrect on the others.  On these, there are subsequent elements that also have large vertical margins, making the
    section header closer to the previous section than to the content for which it's a header.  - wkh 2024-01-26
 */
.herd .noteshort.tight-v,
.herd .scrapietagprefix.tight-v {
    margin-top: 0;
}
.herd .noteshort.tight-v .label {
    padding-top: 4px;
}
.herd .noteshort .value {
    font-weight: normal;
}
#section-content .related-records h3.sublistheader {
    margin-bottom:0;
}

.small {
    font-size: 0.8em;
}
.nonbold {
    font-weight: normal;
}
.heavy {
    font-weight: 600;
}
.herd-listing td.small {
    font-size: 16px;
}
.tinythumbnail img {
    max-height: 30px;
}
/* -end- added by wkh 2024-01-23 etc */

.herd .noteshort,
.herd .scrapietagprefix {
    margin-top: 1em;
}

.herd-edit-settings .scrapietagprefix {
    margin-top: 0;
}


.herd .noteshort .label {
    padding-top: 0;
}

.herd #section-content .flushes .flush-details {
    border-bottom: 1px solid silver;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
}

.herd #section-content .flushes .recip-header {
    font-weight: 600;
}

.hr {
    border-bottom: 1px solid silver;
    padding-bottom: 5px !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

.herd #section-content .flushes .recip-details {
    line-height: 1.35em;
}

.herd #section-content .flushes .record-container {
    margin-bottom: 2em;
}

.herd-edit #section-content .edit-item {

}

.herd-edit #section-content .edit-item .item-name.removed {
    text-decoration: line-through;
    color: #666;
}

.herd-edit #section-content .edit-item button.item-action {
    background: none;
    border: 0;
}

.herd-edit #section-content .edit-item button.item-action.re-add {
    display: none;
}

.herd-edit #section-content .edit-item button.remove:hover {
    color: #f00;
}

.herd-edit #section-content .edit-item button.re-add:hover {
    color: #0a0;
}

.herd-edit div[class *= "pure-u"] input[type="text"],
.herd-edit div[class *= "pure-u"] input[type="email"],
.herd-edit div[class *= "pure-u"] input[type="number"],
.herd-edit div[class *= "pure-u"] input[type="tel"],
.herd-edit div[class *= "pure-u"] textarea,
.account div[class *= "pure-u"] input[type="text"],
.account div[class *= "pure-u"] input[type="email"],
.admin-account div[class *= "pure-u"] input[type="text"],
.admin-account div[class *= "pure-u"] input[type="email"],
.account div[class *= "pure-u"] textarea,
.admin-account div[class *= "pure-u"] textarea
{
    width: 100%;
    border: 1px solid #d7d7d7;
    padding: 2px;
}


.herd-edit div[class *= "pure-u"] input[type="text"]:focus,
.herd-edit div[class *= "pure-u"] input[type="email"]:focus,
.herd-edit div[class *= "pure-u"] input[type="number"]:focus,
.herd-edit div[class *= "pure-u"] input[type="tel"]:focus,
.herd-edit div[class *= "pure-u"] textarea:focus,
.account div[class *= "pure-u"] input[type="text"]:focus,
.account div[class *= "pure-u"] input[type="email"]:focus,
.admin-account div[class *= "pure-u"] input[type="text"]:focus,
.admin-account div[class *= "pure-u"] input[type="email"]:focus,
.account div[class *= "pure-u"] textarea:focus,
.admin-account div[class *= "pure-u"] textarea:focus
{
    border: 1px solid var(--herdboss-blue-brightest);
}


.herd-edit input[type="text"].autocomplete-animal::placeholder {
    font-size: 0.9em;
}

.herd-edit .autocomplete-warning {
    font-weight: normal;
    color: #c00;
}

.herd-edit div[class *= "pure-u"].littersize input[type="number"] {
    width: 50px;
}

.button-submit-container input[disabled],
.edit-buttons-container input[disabled] {
    color: #999 ;
    background-color: var(--color-placeholder) !important;
}

.button-submit-container {
    text-align: center;
}

.button-submit {
    background-color: var(--herdboss-blue);
    color: white !important;
    border: none;
    border-radius: 0.5vw;
    padding: 0.7vw;
    white-space: pre-wrap;
}

.button-submit-no-delete {
    text-align: right;
}

.button-submit:active {
    background-color: var(--herdboss-blue-bright);
}


.button-submit.fake-disabled,
.button-submit[disabled]
{
    opacity: 0.3;
    color: #ccc !important;
}

.button-submit.button-delete {
    background-color: var(--delete-red);
}

.button-submit.button-delete:active {
    background-color: var(--delete-red-bright);
}


.button-cancel {
    background-color: #e6e6e6;
    color: #000;
    border-radius: 0.5vw;
    padding: 0.7vw;
}

.button-cancel-container {
    text-align: left;
}

.submit-error {
    margin-top: 1em;
    color: var(--error-text);
}

#button-submit-error {
    margin-left: 1em;
}

.input-error {
    outline: 2px solid var(--error-border);
}

.link-delete-container {
    text-align: right;
    padding-top: 0.6em;
}

.link-delete,
.link-delete:link {
    color: #c00;
}

.subscription-overlay .link-button-container {
    text-align: center;
}

.link-button {
    background-color: var(--herdboss-blue);
    color: #fff !important;
    border-radius: 0.5vw;
    padding: 0.7vw;
}

.edit-buttons-container {
    margin-top: 30px;
}

.herd-edit .animal-remove {
    color: #aaa;
}

.herd-edit .animal-remove:hover {
    color: #900;
}

.herd-edit .motherfather-explanation {
    color: var(--herdboss-blue);
    margin-top: 40px;
    text-align: right;
}

.admin-message {
    background: #FFFF99;
    padding: 20px;
    border: 1px solid var(--error-border);
}

.user-message {
    background: #dfffd3;
    padding: 20px;
    border: 1px solid #060;
    margin: 25px auto 0;
    /*opacity: 0;*/
}

.user-message.error {
    background: #ffe3e3;
    border: 1px solid #900;
}

.warning {
    color: var(--message-highlight-warning);
}

.mimic-warning {
    padding: 10px;
    background-color: lightyellow;
    text-align: center;
    margin-bottom: 20px;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-color: var(--herdboss-blue);
    border-top-style: solid;
    border-bottom-style: solid;
}

.transplant-container {
    border: 1px solid red;
}

.textcenter {
    text-align: center;
}

.ui-tabs-tab.ui-state-active {
    background-color: #4298ef;
}

input.form-file {
    margin-top: 10px;
}

.about strong {
    font-weight: bolder;
    font-family: 'Open Sans', sans-serif !important;
}

.about .promise-container {
    margin-top: 2em;
}

.about .promise-text {
    font-size: 4.5vw;
}

.about .promise-list {
    padding-top: 4vw;
}

.about .promise-list ul {
    list-style-type: decimal;
    margin-top: 0;
    margin-bottom: 0;
}

.about .promise-list li {
    font-size: 5vw;
    margin-bottom: 1em;
}

.about .staff-item-box {
    background: #eee;
    padding: 2vw;
    margin-bottom: 2vw;
    height: 14vw;
}

.staff-photo img {
    width: 30vw;
    clip-path: circle(50% at center);
    -webkit-clip-path: circle(50% at center);
}

.staff-name {
    font-size: 10vw !important;
    padding-top: 8vw;
    padding-left: 7vw;
    line-height: 7vw;
}

.staff-name em {
    font-size: 4.5vw !important;
    color: var(--herdboss-blue-bright);
}

.herd-bulkupload input[type="file"] {
    margin-top: 1em;
}

.all-sales h2 {
    font-size: 3vw !important;
    margin-top: 0;
    margin-bottom: 2vw;
}

.all-sales #search-text {
    outline: 1px solid silver;
    padding: 0.6vw;
    /*margin-bottom: 2vw;*/
}

.all-sales .get-listed {
    margin-top: 2vw;
}

.all-sales #search-button,
.all-sales #search-clear
{
    /*border: 1px solid silver;*/
    border-color: #d8d8d8 #d1d1d1 #bababa #d1d1d1;
    border-style: solid;
    border-width: 1px;
}

.all-sales #search-text,
.all-sales #search-button,
.all-sales #search-clear {
    height: 3vw;
}

.all-sales table.sales td {
    font-size: 1.5vw;
}

.all-sales td.title,
.all-sales td.breedername {
    /*white-space: nowrap;*/
}

.link-logout-container {
    text-align: right;
}

.account-plan-edit .link-logout-container {
    margin-top: 14px;

}

.link-cancel-account-container {
    margin-top: 2em;
    text-align: right;
}

.subscription-plan {
    margin: 10px;
    padding: 10px 20px;
}

.subscription-plan h3 label {
    color: #000 !important;
}

.subscription-plan label {
    vertical-align: middle;
}

.subscription-plan input[type="radio"] {
    margin-right: 10px;
}

.subscription-plan-free {
    background: #efefef;
    border: 1px solid #666;
}

.subscription-plan-standard {
    background: #d9f1ff;
    border: 1px solid var(--color-gentle-background);
}

.subscription-plan-premium {
    background: var(--color-gentle-background-green);
    border: 1px solid #3ac96e;
}

.subscription-plan .price {
    text-align: center;
}

.subscription-comparison {
    margin-bottom: 20px;

}

.subscription-comparison td,
.subscription-comparison th
{
    border: 1px solid silver;
    padding: 5px 5px 10px 5px;
}

.subscription-comparison .feature-item {
    width: 8vw;
    text-align: center;
}

.subscription-comparison .feature-item.checkmark {
    background-image: url(/images/checkmark-no-padding.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.2vw;
}

.subscription-comparison .choose-row {
    text-align: right;
}

.subscription-comparison .free-notallowed {
    background-color: #ddd;
}

.subscription-comparison .free-notallowed.checkmark {
    background-image: url(/images/checkmark-no-padding-grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.2vw;
}

.explanation.free-notallowed {
    margin-bottom: 20px;
    color: var(--message-highlight-warning);
    background-color: unset;
}


.subtle-explanation, .file-explanation {
    font-size: 0.8em;
    color: #666;
}

.free-trial-warning {
    padding: 10px;
    background: #fdffc1;
    border: 1px solid #ffe87e;
    margin-bottom: 10px;
}

.account-need-verification-before-subscription .email-subject {
    font-family: "American Typewriter", "Times New Roman", serif !important;
    margin-left: 0.5em;
}


.toggle-herd-menu,
.toggle-header-menu {
    display: none;
}

.forgot-password .email {
    margin-top: 1em;
}

.show-only-on-mobile {
    display: none;
}

.ancestor-chart-link-container {
    margin-top: 1em;
}

.ancestor-chart-container {
    border: 1px solid silver;
    /*min-height: 3em;*/
    display: none;
}

#ancestorchart svg {
    max-width: 100%;
}


form.dropzone {
    background-color: var(--color-gentle-background-translucent);
    border-style: dashed;
    border-radius: 15px;
    border-color: var(--herdboss-blue);
}

.herd-data-export .download-data-link {
    margin-top: 2em;
}

.herd-data-export .download-data-link a,
.herd-data-export .download-data-link button
{
    margin-bottom: 1em;
}

.herd-data-export .zipping-progress-container {
    margin-top: 1em;
}

.zipping-progress-container .step-error {
    margin-top: 5px;
}

.herd-radio {
    height: 1em;
    width: 1em;
    vertical-align: middle;
}

.herd-selector-label {
    vertical-align: middle;
}

#numanimalstomovebasedonconfig, #numrelatedanimals, .herd-primaryname-em {
    color: var(--herdboss-blue);
    font-weight: bold;
}

ul.ui-autocomplete li {
    padding-left: 1em;
}

ul.ui-autocomplete li.ui-menu-item:nth-child(2) {
    padding-left: 0;
}

ul.ui-autocomplete li.animal-grouped-header {
    font-weight: bold;
    padding-left: 0.5em;
    border-top: 1px solid silver;
    /*border-bottom: 1px solid silver;*/
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.5em;
}

.pure-g [class*=pure-u] select {
    max-width: 100%;
}

.text-after-value {
    line-height: 1.5em;
    text-align: left !important;
    padding-left: 5px;
}

.settings-ancestor-report {
    /*text-align: right;*/
    /*color: var(--herdboss-blue);*/
    margin: 0.5em;
    /*border-bottom: 1px solid silver;*/
}

.herd-edit-settings h3 {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid silver;
}

.youtube-preview {

}

.youtube-preview-size {
    width: min(800px, 100%);
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}

.privacy-policy {
    font-size: 1em;
    text-align: justify;
    line-height: 1.2em;
}

.privacy-policy p {
    margin-bottom: 1em;
}

.privacy-policy .big-button {
    font-size: 1em;
    padding: 0.5em;
}

#consent-banner-container {
    position: fixed;
    bottom: 2px;
}

#consent-banner {
    background-color: #ddd;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3em;
    outline: 2px solid var(--herdboss-blue);
}

#consent-banner .big-button-container {
    margin: 0;
}

#consent-banner .big-button {
    font-size: 1.5vw;
    margin-top: 1em;
    margin-bottom: 1em;
    white-space: nowrap;
}

.consent-description {
    padding: 1em;
}

.consent-block {
    background-color: var(--herdboss-blue);
    color: #fff;
    text-align: center;
    font-size: 1.2em;
}

.consent-block-content {
    padding: min(2em, 5%);
    overflow-y: hidden;
}

.consent-block a:link,
.consent-block a:visited {
    color: #fff;
    text-decoration: underline;
}


.consent-button {
    padding: 1em;
    border: 2px solid white;
}

.rememberchoiceexplanation {
    margin-top: 1em;
    font-size: 0.6em;
}

.newflag {
    color: var(--message-highlight-warning);
    font-variant: small-caps;
}

.semenstraw-action {
    margin: 0;
}

.semenstraw-action li {
    display: inline;
    border-right: 1px solid silver;
    padding-right: 0.25em;
    margin: 0;
}

.semenstraw-action li:last-child {
    border-right: 0;
    padding-right: 0;
}

.semenstraw-history-detail {
    width: auto;
}

.semenstraw-history-detail td {
    border: 0;
}

.negative {
    color: var(--negative);
}

.positive {
    color: var(--positive);
}

/*.plancostdetails {*/
/*    font-size:0.7em;*/
/*}*/

.discount.peryear {
    color: var(--orange-highlight);
    margin-top: 0.25em;
}

/*.pricing-notice,*/
.pricing-notice a
{
    color: var(--orange-highlight);
    margin-top: 0.25em;
    font-size: 0.9em;
}

#error-message, .error-message {
    color: var(--error-text);
}

.round-icon-item {
    padding: 0 0.5em;
}

.coverphoto img {
    width: 100%;
}

.coverphoto {
    background-color: #000;
    /*background-image: url(/images/index/homepage-goats-shaded.jpg);*/
    background-image: url(/images/index/homepage-goats-1024.jpg);

    background-repeat: no-repeat;
    background-size: cover;
    height: 50vw;
    position: relative;
}

.coverphoto .coverphoto-shape {
    height: 5vw;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
}

.get-started-step-3 {
    margin-bottom: 3vw;
}

.index .whatspecies,
.index .good-company {
    font-family: "Poppins", sans-serif !important;
}

.good-company h1, .good-company h2 {
    text-align: center;
}

.good-company h1 {
    font-weight: bold;
    font-size: 4.5vw !important;
    margin-bottom: 0;
}

.good-company h2 {
    margin-top: 1vw;
    font-weight: normal;
    font-size: 2.1vw !important;
    color: var(--orange-highlight);
}


.index .whatspecies {
    background-color: var(--herdboss-blue);
    color: #fff;
    text-align: center;
    padding-bottom: 8vw;
}

.index .whatspecies .species a.button {
    display: inline-block;
    background-color: #fff;
    padding: 1vw;
    width: 80%;
    border-radius: 0.75vw;
    background-image: url(/images/arrow.right.circle.fill.svg);
    background-size: 1.5vw;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 95%;
}


.whatspecies a:link,
.whatspecies a:visited {
    color: #000 !important;
}

.whatspecies a:hover {
    text-decoration: none;
}

.index .whatspecies h1 {
    margin-top: 0;
}

.index .whatspecies .species {
    padding: 0 4vw;
}

.index .whatspecies .arrow-on-button {
    width: 1vw;
}

.coverphoto h2 {
    color: white;
    font-size: 5vw;
    font-weight: 600;
    font-family: "Poppins", sans-serif !important;
    margin-bottom: 2vw;
}

.coverphoto ul {
    margin-top: 0;
    padding-left: 0;
}

.coverphoto li {
    color: white;
    line-height: 2em;
    font-weight: 600;
    list-style-type: none;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(/images/checkmark-no-padding-herdboss-blue-bright.svg);
    background-size: 1.5vw;
    padding-left: 2vw;
}

.get-started, .get-started div {
    text-align: center;
    font-size: 2vw !important;
    font-weight: 600;
}

.get-started img {
    height: 12vw;
}

.background-angle {
    width: 100%;
    height: 12vw;
}

.get-the-app {
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 5vw;
}

img.google-calendar-icon {
    width:0.9em;
    height:0.9em;
    margin:auto 6px;
}

/* pure-u-sm */
@media screen and (min-width: 35.5em) {
    /*#section-content {*/
    /*    background-color: #f00;*/
    /*}*/
}

/* pure-u-md */ /* iPhones */
@media screen and (max-device-width: 812px) {
    /*#section-content {*/
    /*    background-color: #0f0;*/
    /*}*/

    #section-content {
        overflow: hidden;
    }

    .coverphoto {
        height: auto;
        background-color: #fff;
        background-image: none;
        padding-bottom: 5vw;
    }

    .coverphoto,
    .coverphoto li,
    .coverphoto h2 {
        color: #000;
    }

    .coverphoto h2 {
        font-size: 7vw;
        margin-bottom: 7vw;
    }

    .coverphoto li {
        background-position: left 1vw;
        background-size: 5.5vw;
        padding-left: 7vw;
        font-size: 5.5vw;
        line-height: 7vw;
        padding-bottom: 3vw;
    }

    .coverphoto .header-signup-button {
        font-size: 8vw;
    }

    .good-company h1 {
        font-size: 7vw !important;
    }

    .good-company h2 {
        font-size: 6vw !important;
    }

    .get-started img {
        height: auto;
        width: 50vw;
    }

    .get-started, .get-started div {
        font-size: 6vw !important;
    }


    .get-started-step {
        margin-bottom: 3vw;
    }

    .background-angle {
        margin-top: 7vw;
    }

    #section-footer .socialmedia .social-icon {
        max-height: 100%;
    }

    #consent-banner .big-button-container {
        margin-top: 0;
        margin-bottom: 3vw;
    }

    #consent-banner .big-button {
        font-size: 3.5vw;
        white-space: nowrap;
    }

    .jump-to-container {
        margin-bottom: 1em;
    }
    .storage-bar {
        height: 70px;
    }
    .storage-bar-label {
        height: 70px;
    }


    .witness-me {
        max-height: 1em;
    }

    .account-storage-edit h1 {
        font-size: 6vw !important;
    }

    .show-only-on-mobile {
        display: inherit;
    }

    /*
    #logo {
        width: 50%;
    }
    */

    .all-sales-edit .edit-row {
        margin-bottom: 0.5em;
    }
    .all-sales-edit .edit-row .label {
        padding-right: 0.25em;
    }

    #section-footer .socialmedia .social-icon {
         padding: 0 10px;
    }

    .login-signup .login-signup-button {
        text-align: center;
        margin-top: 1em;
    }


    .admin-search .search-fields .link-button {
        margin-top: 1em;
    }

    input[type="checkbox"] {
        width: 1em;
        height: 1em;

    }

    .about .staff-item-box {
        height: 34vw;
    }

    .about .staff-item-column:first-child {
        padding-right: 0;
    }

    .about .staff-item-column:last-child {
        padding-left: 0;
    }



    .about h2 {
        font-size: 5.5vw !important;
    }

    .how-to #section-content h3 {
        padding-right: 5vw;
    }

    .pricing-text h2 {
        font-size: 6vw !important;
    }

    .image-panel h2 {
        font-size: 4.5vw;
    }

    .index .feature-list-container p {
        font-size: 4vw;
    }

    .index .calltoaction h2 {
        font-size: 7.5vw;
        font-weight: 100;
    }

    .plancheckbox {
        width: 1em;
        height: 1em;
    }

    .account-subscribe-after-trial h1 {
        font-size: 8vw !important;
    }

    .account-need-verification-before-subscription h1 {
        font-size: 6vw !important;
    }

    .account p,
    .signup-complete p
    {
        margin-bottom: 1em;
    }


    .herd #section-content .flushes .recip-header {
        padding-top: 25px !important;
    }

    .herd #section-content .related-records .record div {
        font-size: 4.5vw;
    }

    .herd #section-content .related-records .record.details {
        line-height: 1.3em;
    }

    .herd #section-content .related-records .record .dosage {
        text-align: start;
    }

    .herd .label,
    .herd .value {
        line-height: 1.5em;
    }

    .herd .value {
        padding-left: 0.3em;
    }

    .pager {
        text-align: start;
        font-size: 4.5vw !important;
    }


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

    #menu-background-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        left: 0;
        top: 0;
        background-color: #000;
        opacity: 0.2;
    }

    .toggle-herd-menu {
        display: block;
        text-align: right;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    #herd-menu {
        display: none;
    }

    #herd-menu li {
        display: block;
        line-height: 2.5em;
    }

    #herd-menu {
        width: 50%;
        position: absolute;
        right: 0;
        z-index: 1000;
        padding-left: 1em;
        padding-top: 0.5em;
        padding-bottom: 1em;

        background-color: #fff;
        border-radius: 5px;
        -webkit-box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
        -moz-box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
        box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
    }

    #herd-menu-container {
        position: relative;
    }


    .toggle-header-menu {
        display: block;
        text-align: right;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    #header-menu {
        display: none;
    }

    #header-menu li {
        display: block;
        line-height: 2.5em;
    }

    #header-menu {
        width: 50%;
        position: absolute;
        right: 0;
        z-index: 1000;
        padding-left: 1em;
        padding-top: 0.5em;
        padding-bottom: 1em;

        background-color: var(--herdboss-blue);
        border-radius: 5px;
        -webkit-box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
        -moz-box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
        box-shadow: 0 10px 35px -5px rgba(153, 153, 153, 1);
    }

    #header-menu-container {
        position: relative;
    }
    
    
    


    .plandetails .planboxsection-inner {
        font-size: 4.5vw;
    }

    .planbox .plannamecontainer .freetrialmessage {
        font-size: 0.9em;
        line-height: 1.1em;
        margin-top: 0.5em;
    }

    .account-subscribe-after-trial .planbox .selectedplan {
        width: 25px;
        left: -13.5px;
        top: -7.5px;
    }

    input[type="number"] {
        outline: 1px solid silver;
        min-width: 5em;
    }

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


    .planbox, .planbox.active {
        border-width: 1vw;
    }

    .edit-buttons-container {
        margin-top: 90px;
    }

    #rememberme {
        width: 7vw;
        height: 7vw;
    }

    .subscription-overlay-content {
        margin-top: 1em;
        padding: 1em;
    }

    .subscription-overlay-content .overlay-icon-container {
        display: none;
    }

    .link-button, .button-submit, .button-cancel {
        border-radius: 1.5vw;
        padding: 2.7vw;
    }

    .herd-reports h1 {
        font-size: 5.5vw !important;
    }

    .herd-listing td,
    .herd-listing th
    {
        font-size: 46px;
        line-height: 1.5em;
    }


    .herd-add-link {
        /*padding-left: 1em;*/
    }

    .search-fields {
        /*padding-left: 1em;*/
    }


    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"] {
        outline: 1px solid silver;
    }



    .all-sales h2 {
        font-size: 6vw !important;
    }

    .all-sales #search-text {
        outline: none;
        padding: 1px;
        margin-bottom: 0;
        height: 80px;
    }

    .all-sales #search-button,
    .all-sales #search-clear
    {
        height: 120px;
    }


    .all-sales table.sales td,
    .all-sales table.sales th
    {
        font-size: 2.5vw;
    }

    .all-sales td.title,
    .all-sales td.breedername {
        white-space: normal;
    }

    .all-sales #search-text {
        border: 1px solid silver;
        margin-bottom: 25px;
    }

    .all-sales #search-button,
    .all-sales #search-clear
    {
        background-color: var(--herdboss-blue);
        border-radius: 2vw;
        color: #fff;
    }

    .account-section-header h5 {
        font-size: 4.5vw;
        padding-bottom: 1em;
    }


    select {
        border-radius: 5px !important;
        border: 1px solid silver !important;
        background-color: rgb(248, 248, 248) !important;
    }



}



/* pure-u-lg */
@media screen and (min-device-width: 813px) {
    html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
        font-size: 20px;
    }

    .ui-dialog button,
    .ui-dialog input,
    .ui-dialog select,
    .ui-dialog textarea,
    .ui-dialog .pure-g [class *= "pure-u"]
    {
        font-size: 20px !important;
    }

    h1 {
        font-size: min(3vw, 40px) !important;
    }

    .header-user-links {
        text-align: right;
        margin-bottom: 0;
        margin-top: 1vw;
    }

    body.logged-in .logout-container {
        /*display: inline;*/
    }

    #section-footer .copyright {
        font-size: 1.5vw;
        text-align: right;
        padding-top: 0;
    }

    .image-panel {
        height: 790px;
        position: relative;
    }

    .image-panel:after {
        opacity: 0.5;
        content: "";
        background: #2b4000 url(/images/sheep-in-field.jpg) no-repeat top center !important;
        background-size: cover !important;
        height: 790px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
    }

    .image-panel h1,
    .about h1 {
        margin-top: 40px;
    }

    .image-panel .subheading {
        font-size: 1.65vw;
    }

    .index .image-panel .top-content-text {
        white-space: nowrap;
    }

    .big-button {
        font-size: 2.5vw;
    }

    .medium-button {
        font-size: 1.5vw;
    }

    .index .image-panel .top-content-apps img {
        width: 350px;
        max-width: 100%;
    }

    .index .image-panel .top-content-apps {
        margin-top: 0;
    }

    .index .top-content .big-button {
        font-size: min(2.5vw, 36px);
    }

    .image-panel h2 {
        font-size: min(3vw, 30px);;
        margin-top: 0;
        background-color: var(--translucent-white);
        padding: 1vw;
    }

    .index .feature-list {
        background-color: var(--translucent-white);
        margin: 0;
    }

    .big-button {
        border-radius: min(1vw, 15px);
        padding: min(2vw, 30px);
    }

    .index .feature-list li {
        line-height: min(3vw, 34px);
        padding-left: 3vw;
        font-size: min(1.9vw, 26px);
        background-size: 2vw;
    }

    .index .feature-list-container p {
        background-color: var(--translucent-white);
        font-size: min(1.9vw, 26px);
    }

    .index .quoteblock .quote blockquote {
        font-size: 1.7vw;
    }

    .index .quote-image img {
        width: 7vw;
    }

    .index .quoteblock .quote-name {
        font-size: 2vw;
        padding-top: 1vw;
    }

    .index .quoteblock .quote-name .business-name {
        font-size: 1.5vw;
    }

    .index .calltoaction h1 {
        font-size: 4vw;
    }

    .index .calltoaction h2 {
        font-size: 2vw;
    }

    .index .trusted {
        font-size: 3vw !important;
    }

    .features .meet-herdboss {
        padding-top: 0;
    }

    .features .meet-herdboss strong {
        color: var(--herdboss-blue-bright);
        font-weight: bold;
        font-size: 2.5vw;
    }

    .features .meet-herdboss,
    .features .made-for-you {
        padding-left: 3vw;
        font-size: 2vw;
    }

    .features .badges-block .badge,
    .signup-complete .badges-block .badge
    {
        height: 6vw;
    }

    .features .feature-item .badges-block .badge,
    .signup-complete .feature-item .badges-block .badge
    {
        height: 6vw;
    }

    .features h1 {
        font-size: 5vw;
    }

    .features .made-for-you {
        font-size: 1.7vw;
    }

    .features h2,
    .about h2 {
        font-size: 2.5vw !important;
    }

    .feature-text li {
        font-size: 2.2vw;
    }

    .features .feature-screenshot {
        max-width: 290px;
    }

    /*.feature-item-right .feature-text {*/
    /*    padding-left: 4em;*/
    /*}*/

    .features h3 {
        font-size: 2vw !important;
    }

    .feature-item .sales-buyers {
        font-size: 1.8vw;
    }

    .features .productivity h1 {
        font-size: 2.5vw !important;
    }

    .features .productivity-item {
        font-size: 1.6vw;
    }

    .features .productivity-item strong {
        font-size: 2vw;
    }

    .features .productivity-item {
        background-size: 4vw !important;
    }

    .features .productivity-item {
        margin-bottom: 4vw;
        padding-left: 7vw;
    }

    .features .anywhere {
        margin-top: 4em;
    }

    .features .anywhere .any-block {
        font-size: 2vw;
    }

    .features .anywhere .any-block.anys {
        padding-right: 1vw;
    }

    .features .notdoing h1 {
        font-size: 2.3vw !important;
    }

    .features .notdoing-item {
        background-size: 1.5vw;
        padding-left: 2.5vw;
        font-size: 1.5vw;
    }

    .features .notdoing .finally-delivers {
        font-size: 3vw !important;
        margin-top: 3vw;
    }

    .pricing-text h2 {
        font-size: 3vw;
    }

    .pricing p {
        font-size: 1.5vw;
        margin-bottom: 2vw !important;
        padding-right: 3vw;
    }

    .how-to #section-content h1 {
        font-size: 2.5vw !important;
    }

    .how-to #section-content h3 {
        font-size: 1.5vw !important;
        background-size: 1.5vw !important;
    }

    .about h1 {
        font-size: 3vw !important;
    }

    .about .promise-list li {
        font-size: 1.5vw;
    }

    .about .promise-list {
        padding-right: 2em;
        padding-top: 0;
    }

    .about .staff-item-box {
        padding: 1em;
        margin-bottom: 1em;
    }

    /*.about .staff-item-container:nth-child(odd) {*/
    /*    padding-right: 0.5em;*/
    /*}*/
    /**/
    /*.about .staff-item-container:nth-child(even) {*/
    /*    padding-left: 0.5em;*/
    /*}*/

    .staff-photo img {
        width: 160px;
    }

    .staff-name {
        font-size: 3vw !important;
        padding-top: 2.5vw;
        padding-left: 1vw;
        line-height: 3vw;
    }

    .staff-name em {
        font-size: 1.75vw !important;
    }


    table.sales {
        overflow-x: auto;
    }

    .herd-listing {
        overflow-x: auto;
    }


    .remember-me > input {
        width: auto;
    }

}

/* pure-u-xl */
@media screen and (min-width: 80em) {

}

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

.report-printer img {
    vertical-align: middle;
    width: 30px;
}

@media print {

    /*body {*/
    /*    margin: 0 !important;*/
    /*}*/

    html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
        /* Set your content font stack here: */
        font-family: "Open Sans", Verdana, Geneva, sans-serif !important;
        font-size: 1.3vw;
    }

    td, th {
        font-size: 12pt !important;
        white-space: normal !important;
    }

    td.datevalue {
        white-space: nowrap !important;
    }

    h1 {
        font-size: 3vw !important;
    }

    .pure-u-lg-1-3.column {
        width: 33%;
    }

    .pure-u-lg-1-2.column {
        width: 50%;
    }

    .pure-u-lg-2-3.column {
        width: 66%;
    }

}


@media screen and (max-device-width: 812px) {
    .pure-u-md-0 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-md-0 {
        display: none;

    }
}

.spinner {
    font-size: 10px;
    margin: 0 auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: var(--herdboss-blue);
    background: -moz-linear-gradient(left, #1e509a 10%, rgba(30,80,154, 0) 42%);
    background: -webkit-linear-gradient(left, #1e509a 10%, rgba(30,80,154, 0) 42%);
    background: -o-linear-gradient(left, #1e509a 10%, rgba(30,80,154, 0) 42%);
    background: -ms-linear-gradient(left, #1e509a 10%, rgba(30,80,154, 0) 42%);
    background: linear-gradient(to right, var(--herdboss-blue) 10%, rgba(30,80,154, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner.inline {
    display: inline-block;
}
.spinner:before {
    width: 50%;
    height: 50%;
    background: var(--herdboss-blue);
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}
.spinner:after {
    background: #fff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.account .spinner:after {
    background: #f3f3f3;
}

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}