/* +----------------------------------------------------------------------+
// | Copyright (c) 2006-2021 The Breed Archive                            |
// +----------------------------------------------------------------------+
*/

.textCenter {text-align: center;}
.textRight {text-align: right;}
.textLeft {text-align: left;}
.verticalTop {vertical-align: top;}

.multilineText, .itemBox .profileData .textEntry span {
    white-space: pre-wrap;
    word-break: break-word;
}

.block {display: block;}
.inlineBlock {display: inline-block;}
.inlineBlock:empty, .block:empty {display: none;}
.flex {
    display: flex;
    gap: 5px;
}

.flexWrap {
    flex-wrap: wrap;
}

.flexBoxContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    gap: 10px;
}

.justifyCenter {
  justify-content: center;
}

.contentFlexStart {justify-content: flex-start;}
.contentFlexEnd {justify-content: flex-end;}
.contentSpaceBetween, .buttonBottom.contentSpaceBetween {  justify-content: space-between;}
.contentCenter {align-items: center;}
.selfFlexEnd {align-self: flex-end;}
.flexColumn {flex-direction: column;}

table td span[class^="icon-"], table td span[class*=" icon-"] {font-size: 16px;  }

.splitSection {
    max-width: 1144px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.splitSectionLeft, .splitSectionRight {
    box-sizing: border-box;
    width: 100%;
    display: block;
}

.adContainer {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
}

.adContainer.adsbygoogle[data-ad-status='filled'] {
    margin: 10px auto;
    padding: 30px 0;
    background-color: var(--lightblue);
}

.adContainer.adsbygoogle .altAd {
    display: none;
}

.adContainer.adsbygoogle[data-ad-status='unfilled'] {
    background-image: url("../images/banner_facebook.jpg?version=1.0.0");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    min-height: 120px;
    margin: 20px auto;
}

.adContainer.adsbygoogle[data-ad-status="unfilled"] .altAd {
    display: flex !important;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    color: var(--alternate-text-color);
    text-align: center;
}

.adContainer.adsbygoogle[data-ad-status='filled']:after {
    text-transform: uppercase;
    color: var(--salmon-variant);
    display: flex;
    justify-content: center;
    font-weight: 600;
}

.adContainer.adsbygoogle[data-ad-status='filled']:lang(de):after {
    content:'Werbung';
}

.adContainer.adsbygoogle[data-ad-status='filled']:lang(en):after {
    content:'Advertisement';
}

.adContainer.adsbygoogle[data-ad-status='filled']:lang(fr):after {
    content:'Publicité';
}

.adContainer.adsbygoogle[data-ad-status='filled']:lang(es):after {
    content:'Publicidad';
}

.frozenSemen, .approvedForBreeding {padding-right: 5px;}
.initialName {color: var(--grey-variant);}

#container {
    min-height: 100%; /* needed to tap close mobile menu in case content has been scrolled */
    position: relative;
    width: 100%;
    min-width: 320px;
    background-color: var(--primary-background-color);
    transition: transform 0.4s ease 0s;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main, .mainArea, .mainContent, .footerContainer {
    box-sizing: border-box;
}

.mainArea.fixContent {
    position: fixed;
    width: 100%;
}

.main {
    transition: transform 0.4s ease 0s;
    background-color: var(--primary-background-color);
    position: relative;
    min-height: calc(100vh - 90px - 576px);
}

.footerContainer {
    width: 100%;
    max-width: 1144px;
    margin: 0 auto;
    padding: 60px 10px;
    text-align: center;
    position: relative;
    bottom: 0;
}

.footerLinks {
    margin-top: 60px;
    letter-spacing: 1px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer a {
    font-weight: normal;
    text-transform: uppercase;
    margin: 10px 0;
    width: 100%;
}

.facebook {
    margin-top: 20px;
    display: inline-block;
}

.facebook a {
    color: var(--alternate-text-color);
}

.facebook span {
    color: var(--facebook-color);
    font-size: 30px;
    background-color: var(--white);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landingContainer {
    background: var(--primary-landing-bg);
    background: var(--primary-landing-bg-gradient);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
}

.landingContainer * {
    color: var(--primary-landing-text-color);
}

.landingContainer.lightbrown {
    background: var(--landing-bg-lightbrown);
    background: var(--landing-bg-lightbrown-gradient);
}

.landingContainer.lightbrown * {
    color: var(--landing-bg-lighbrown-text-color);
}

.landingContainer.lightblue {
    background: var(--landing-bg-lightblue);
    background: var(--landing-bg-lightblue-gradient);
}

.landingContainer.darkbrown {
    background: var(--landing-bg-darkbrown);
    background: var(--landing-bg-darkbrown-gradient);
}

.landingContentContainer {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.landingTextContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 10px 35px;
    width: 100%;
    z-index: 1;
    position: relative;
    right: 0;
}

.landingTitle {
    margin-bottom: 20px;
}

.landingContentContainer * {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    -webkit-hyphens: none;
    hyphens: none;
}

.landingContentContainer h1 {
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
}

.landingContentContainer h1 span {
    white-space: normal;
}

.landingContentContainer h1 span.long {
    font-size: 80%;
}

.landingContentContainer h1 span.extraLong {
    font-size: 72%;
}

.landingContentContainer h1 span.superLong {
    font-size: 64%;
}

.landingContentContainer h2, .landingNumbers {
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 14px;
}

.animalCount {
    font-weight: 500;
    font-size: 32px;
    display: block;
}

.landingMobilePicture {
    background-image: url("../images/breed_photo_mobile_small.jpg?version=1.0.0");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    width: 100%;
    height: calc(100vw / 3 * 2);
}

.landingPictureContainer {
    display: none;
}

.wave {
    background-image: url("../images/bg-wave.svg");
    width: 100%;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    bottom: -1px;
    left: 0;
}

.waveAlt {
    background-image: url("../images/bg-wave-grey.svg");
    width: 100%;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    top: -15px;
    left: 0;
}

.landingFactContainer {
    width: 100%;
    max-width: 1144px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
    padding: 40px 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
    text-align: center;
}

.landingFactContainer h3, .tbaClaim {
    -webkit-hyphens: none;
    hyphens: none;
}

.tbaClaim {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    width: 100%;
    font-weight: 300;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.claimText {
    margin-bottom: 30px;
    -webkit-hyphens: none;
    hyphens: none;
}

.claimAuthor {
    background-image: url("../images/signature.png");
    width: 224px;
    height: 28px;
    display: block;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-right: 4px;
}

.claimInfo {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.factsContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.factsContainer > div {
    width: 100%;
    margin-bottom: 40px;
}

.factsContainer .factsContainerButton {
    width: 100%;
    display: block;
    text-align: center;
}

.factsContainerButton .button.alternative {
    margin-bottom: 10px;
}

.factsContainer h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.factsContainer .factIcon {
    color: var(--maincolor);
    font-size: 28px;
    vertical-align: baseline;
}

.fact {
    color: var(--darkgrey);
    font-size: 14px;
    font-weight: 300;
    line-height: 170%;
}

.infoIcon {
    color: var(--darkgrey);
}

.landingNewsContainer {
    background-color: var(--secondary-background-color);
    position: relative;
    padding: 50px 10px;
    box-sizing: border-box;
}

.landingNewsInnerContainer {
    width: 100%;
    max-width: 1124px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.landingNewsInnerContainer > div {
    background-color: var(--primary-background-color);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    margin: 20px 0;
}

.landingButtonContainer {
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.browseHeaderBox {
    text-align: center;
}

.browseHeaderBox .browseNumbers {
    font-family: 'Montserrat', sans-serif;
    color: var(--maincolor);
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
}

.browseHeaderBox .animalCount {
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    font-weight: 600;
    margin: -4px 0;
    color: var(--primary-text-color);
}

.browseHeaderBox .browseText {
    color: var(--darkgrey);
    font-size: 14px;
    margin: 22px 20px 0 20px;
    padding: 0 10px 22px 10px;
    border-bottom: 1px solid var(--lightgrey);
    -webkit-hyphens: none;
    hyphens: none;
}

.browseAnimalBox {
    margin: 12px 0 0 0;
}

.browseAnimalBox .itemBox {
    border-bottom: 1px solid var(--lightgrey);
    border-radius: 0;
    padding: 12px 5px;
}

.browseAnimalBox .itemBox:hover .link  {
    color: var(--maincolor);
}

.browseAnimalBox .itemBox .profileData {
    overflow: hidden;
    margin: 0 5px 0 15px;
}

.browseAnimalBox .itemBox .profileData div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.landingBlogContainer .blogContent {
    content-visibility: auto;
    display: block;
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    background-size: cover;
    background-position: top center;
    box-sizing: border-box;
    margin: 0 auto 20px auto;
    padding-top: 34px;
}

.landingBlogContainer .blogContent .blogInnerContainer {
    height: 100%;
    width: 100%;
    background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.7) );
    color: var(--alternate-text-color);
    padding: 60px 10px 0 10px;
    box-sizing: border-box;
    border-radius: 10px;
    z-index: 1;
    position: relative;
}

.landingBlogContainer .blogContent .blogInnerContainer:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient( rgba(0,0,0,0.0), rgba(255,255,255,0.08) );
    transition: opacity 0.4s ease;
}

.landingBlogContainer .blogContent:hover .blogInnerContainer:before {
    opacity: 1;
}

.landingBlogContainer h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 180%;
    color: var(--alternate-text-color);
}

.blogInfo {
    color: var(--maincolor);
    font-size: 14px;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.landingBlogContainer .blogInfo {
    color: var(--alternate-button-color);
}


.landingBlogContainer .blogTeaserImageContainer img {
    height: auto;
    opacity: 0.2;
}

.landingCommunityContainer {
    height: 100%;
    position: relative;
    width: 100%;
    background-image: url("../images/community_bg.jpg");
    background-repeat: repeat;
    content-visibility: auto;
}

.communityBackground {
    background: linear-gradient(to top, #1d2937, #324052), linear-gradient(to bottom, #e70a0a, #e70a0a);
    width: 100%;
    height: 100%;
    opacity: 0.9;
    position: absolute;
}

.communityHighlight, .communityQuote {
    color: var(--alternate-text-color);
    width: 100%;
    position: relative;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.communityHighlight {
    background-color: rgba(59, 170, 227, 0.45);
    bottom: 0;
    padding: 35px 0;
}

.communityQuote {
    top: 0;
    padding: 73px 0;
}

.highlightInnerContainer {
    width: 100%;
    max-width: 1144px;
    padding: 0 10px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.highlightMessage:only-child {
    width: 100%;
}

.highlightInnerContainer > div {
    margin: 10px 0;
    flex-shrink: 0;
}

.quoteInnerContainer {
    width: 100%;
    max-width: 1144px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
    font-weight: 300;
    text-align: center;
}

.quoteIcon {
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
}

.quoteIcon.reverse {
	transform: rotate(180deg);
}

.quoteTextContainer {
    margin: 0 auto;
    max-width: 748px;
    box-sizing: border-box;
    -webkit-hyphens: none;
    hyphens: none;
}

.quoteAuthor {
    text-align: right;
    margin-top: 50px;
}
.authorName {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.highlightMessage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.highlightMessageText, .quoteText {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 300;
     -moz-hyphens: none;
    hyphens: none;
    text-align: center;
}

.quoteText {
    line-height: 140%;
    margin: 0 5px;
}

.highlightMessageIcon {
    font-size: 70px;
    margin-right: 16px;
}

.buildInfo { position: absolute; width: 100%; bottom: 10px; left: 0;}
.generalInfo {width: 100%;}
.generalInfo, .profileMainData {display: block; vertical-align: top;}

.tabMenu {
    max-width: 1144px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0 auto;
}

#cookie_info {
    z-index: 100;
    background-color: rgba(0,0,0,0.9);
    padding: 25px;
    color: var(--alternate-text-color);
    font-size: 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.cookieContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cookieText {
    width: 100%;
    margin-bottom: 20px;
}

.cookieSettingsButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
}

#cookie_settings_dialog h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

#cookie_settings_dialog table {
    font-size: 12px;
    width: 100%;
}

#cookie_settings_dialog .buttonPane {
    flex-wrap: wrap;
}

#cookie_settings_dialog label.switch-light {
    width: auto;
    margin-right: 0;
}

.selectionOption {
	padding: 0 10px 4px 10px;
	text-align: center;
	cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    transition: color 0.4s ease;
	font-weight: 400;
	color: var(--maincolor);
    font-size: 16px;
}

.selectionOption.selected, .selectionOption:hover {
    color: var(--maincolor);
    border-bottom: 2px solid var(--maincolor);
}

.selectionOption.selected {
    cursor: text;
}

.tabHeader {
	padding: 12px 22px;
	text-transform: uppercase;
	display: inline-block;
	color: var(--maincolor);
	cursor: pointer;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.fivetabItems .tabHeader {
    padding: 10px 14px;
}

.tabHeader.tabDisabled, .tabHeader.tabDisabled:hover {color: var(--grey-variant); cursor: not-allowed;}
.tabHeader.tabDisabled:hover {background-color: transparent;}
.tabHeader:hover, .tabHeader.selected {background-color: var(--secondary-background-color); color: var(--maincolor-variant);}
.tabHeader.selected  {cursor: text;}

.tabHeaderIcon {display: inline-block; font-size: 20px;}
.tabHeaderName {display: none;}

/* END: Layout styles */

/* START: Form styles */

input.hasDatepicker {/*width: 83px;*/width: 135px;}
input.hours, input.minutes {width: 30px; font-size: 90%;}
input.year {width: 50px;}

label.autoWidth, .autoWidth label, .autoWidth .textLabel {width: auto !important;}
.autoWidth .textDescription {width: 100%;}
input.error, textarea.error {border: 2px solid var(--error-color);}
.error_wrapper div {color: var(--error-color);}

.numberSelect {width: 100px;}
.smallSelect {max-width: 195px;}
.selectDates {max-width: 90px;}

.icon-lock, .icon-cancel.removed {
    background-color: var(--error-color);
    color: var(--white);
    padding: 1px;
    border-radius: 50%;
}

.icon-lock {
    padding: 2px;
    margin-left: 2px;
}

.statusRemove {
    position: absolute;
    padding: 10px;
    top: 0;
    right: 0;
    cursor: pointer;
}

.icon-cancel.removed {
    border-radius: 0;
}
.locked, .locked.pageHeadContainer {
    background-color: var(--error-background-color);
}
.lockedMessage {
    color: var(--error-color);
    font-weight: 600;
    font-size: 16px;
    margin: 5px;
}

.lockedMessageWrapper {
    background-color: #f2f2f2;
    padding: 10px;
    margin-top: 5px;
}

.formContainer, .contentSectionWrapper {
    padding: 10px;
    max-width: 1144px;
    box-sizing: border-box;
    margin: 0 auto;
    gap: 10px;
}
.contentRight, .contentLeft {
    display: inline-block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    vertical-align: top;
    box-sizing: border-box;
}

.bottomAlign {vertical-align: bottom;}

.textEntry {padding: 5px 0;}

.formRow, .textRow {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
}
.formRow {min-height: 40px; padding-bottom: 5px;}
.formRow textarea {margin-bottom: 5px;}
.textRow {padding: 5px 0;}
.formRow.noBreak, .textRow.noBreak, .noBreak .formRow, .noBreak .textRow {
    display: flex;
}

.textDescription:empty, .formField:empty {display: none;}
.formRow.topAlign, .textRow.topAlign {align-items: flex-start;}
.formRow.contentStart, .textRow.contentStart {justify-content: flex-start;}
.formField, .textDescription {width: 100%;}
.noBreak label, .noBreak .textLabel {width: 34%;}
.noBreak .formField, .noBreak .textDescription {width: 64%;}

input.decimal {width: 50px;}
input.clearSelection, div.clearSelection, textarea.clearSelection, select.clearSelection {width: 90%; vertical-align: middle;}

.clearSelectionIcon {
    background: var(--primary-button-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    width: 25px;
    font-size: 10px;
    color: var(--primary-button-text-color);
	transition: all 0.4s ease;
    flex-shrink: 0;
}

.clearSelectionIcon:after {
    font-family: 'tba';
    content: "\e604";
}

.clearSelectionIcon:hover {background-color: var(--primary-button-hover-color);}

.horizontalRadios {display: inline-block;}
.horizontalRadios label {width: auto; font-weight: normal;}

.pointer {cursor: pointer;}

.listIcon {
	font-size: 12px;
	transform: rotate(90deg);
	transition: all 0.1s linear;
	margin-right: 2px;
}
.selected .listIcon {
	transform: rotate(135deg);
}

.icon-sort.desc {
	font-size: 12px;
    margin-left: 3px;
	transform: rotate(180deg);
}

/* END: Form styles */

/* START: Revision styles */

.revisionSelection tbody tr:not(.selectableRevision), .revisionSelection tbody tr:not(.selectableRevision) a {
    color: var(--grey-variant);
}
.revisionSelection .selectableRevision {cursor: pointer;}

.revisionChanges tbody tr td:first-child,
.duplicateMerge tbody tr td:first-child {
    font-weight: 600;
}
table.revisionChanges.fixedHeader th,
table.duplicateMerge.fixedHeader th {
    background-color: var(--secondary-background-color);
}
table.dataTable.revisionChanges.fixedHeader tbody td,
table.dataTable.duplicateMerge.fixedHeader tbody td {
    border-left: none;
}

.revisionChangeEntry {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.valueChanged {background-color: var(--error-background-color);}
.valueMerged, .mergedField {background-color: var(--confirmation-background-color);}

.valueChanged.valueMerge {background-color: transparent;}

.revertMergedValue, .mergeValueOther {
    transform: scaleX(-1);
  }

.mergeValue.standardButton, .revertMergedValue.standardButton {
    margin: 0;
}

.revisionChanges tr.noBackground, .revisionChanges tr.noBackground:hover { background-color: var(--secondary-background-color);}

table.dataTable.duplicateMerge tr td {
    box-sizing: border-box;
    height: 100%;
}

table.dataTable.duplicateMerge tr td:nth-child(4) {
    background-color: var(--lightgrey-variant);
}

.identicalValues {
    color: var(--grey-variant);
}

.separator.identicalValues, .separator {
    color: var(--maincolor);
    text-transform: uppercase;
}

.separator td {
    background-color: var(--lightgrey-variant) !important;
    border-bottom: 1px solid var(--maincolor);
}

/* END: Revision styles */


.profileInfo .noPhoto {
    height: 140px;
    background-color: var(--secondary-background-color);
}


.profileInfo .noPhoto [class^="icon-"] {
    font-size: 90px;
}


.ancestorPhoto .virtualAnimal.noPhoto {
    max-width: 190px;
}

.virtualAnimal.noPhoto /*virtual animal in pedigree*/
{
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
}

.virtualAnimal.noPhoto, .virtualAnimal .noPhoto {
    min-height: 65px;
}

.smallProfile .virtualAnimal.noPhoto [class^="icon-"], .resultProfile .noPhoto [class^="icon-"] {
    font-size: 34px;
}

.virtualAnimal .litterMatingPartner {
    margin-bottom: 30px;
}

.virtualAnimalProfile {
    text-align: center;
    font-weight: 300;
    margin-bottom: 20px;
    width: 100%;
    font-size: 22px;
    border-bottom: 1px solid var(--lightgrey);
    padding: 10px;
}

.virtualAnimalProfile .coiInfo {
    font-size: 14px;
}

/* START: Photo Dog Detail */

.setPrimaryImage {position: relative; height: 60px; text-align: center;}

.photoWrapper {
    display: flex;
    position: relative;
}

.activePhotoContainer, .activePhoto {
    position: relative;
}

.activePhotoContainer {
    width: 200px;
    height: auto;
    padding-right: 10px;
    flex-shrink: 0;
}

.photoThumbWrapper {
    box-sizing: border-box;
    padding-left: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: absolute;
    top: 90px;
    width: 100px;
    max-height: 350px;
    overflow: scroll;
    right: 0;
}

.photoThumbnail {
    width: 75px;
    height: 75px;
    box-sizing: border-box;
    margin: 0 5px 5px 0;
    position: relative;
    cursor: pointer;
}

.photoThumbnail.selected {
    border: 2px solid var(--salmon);
}

.photoThumbnail.photoDraggingOver img {
    opacity: 0.2;
}

.activePhoto {
    height: 200px;
}

.activePhoto img {
    margin: 0 auto;
    display: block;
    max-height: 100%;
}

.noActivePhoto {
    height: 250px;
}

.primaryImage {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 14px;
    color: var(--salmon);
    background-color: var(--white);
    padding: 4px;
    border-radius: 100%;
}


.photoUploadButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    border: 2px dashed var(--grey-variant);
    color: var(--grey-variant);
    font-size: 10px;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0 5px 5px 0;
    text-align: center;
}

.photoUploadButton.uploadEnd {
    display: none;
}

.photoUploadButton.uploadStart {
    position: absolute;
    top: 10px;
    right: 10px;
}

.photoUploadButton:hover {
    border-color: var(--maincolor);
    color: var(--maincolor);
}

.photoUploadButton span {
    font-size: 16px;
}


/* END: Photo Dog Detail */

/* START: Text styles */

.healthResult {color: var(--error-color);}
.prefixTitles, .suffixTitles {color: var(--title-color); font-weight: 400; font-size: 12px;}
.titleText {color: var(--title-color);}
span.error {color: var(--error-color); display: block;}

.smallText {font-size: 80%;}
.info {font-size: 12px;}
.upperCase {text-transform: uppercase;}
.normalFont {font-weight: normal;}
.bold {font-weight: 600;}
.italic {font-style: italic;}

.statusMessages:not(:empty) {
    background-color: var(--confirmation-background-color);
    opacity: 0.98;
    z-index: 120;
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
}

.statusMessage {
    color: var(--confirmation-color);
    font-weight: 600;
    font-size: 16px;
    padding: 5px;
}

.statusMessage a {
    font-weight: 400;
}

/* END: Text styles */

/* START: Links and Buttons */

.link, .tippy-box a, .passiveLink {
    color: var(--primary-link-color);
    cursor: pointer;
    transition: all 0.2s linear;
}
.link:hover, .tippy-box a:hover{
  color: var(--primary-link-hover-color);
}

.link.buttonLink {
    font-size: 16px;
    margin: 10px 0;
    padding: 5px;
}

a.button:hover {color: var(--alternate-text-color);}

.searchButton {
    display: inline-block;
    text-align: right;
    box-sizing: border-box;
    padding: 0;
    margin-left: 10px;
}
.buttonBottom {
    display: flex;
    padding: 15px 0 0 0;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 18px;
}

.buttonBottom button, .buttonBottom .button {
    height: 36px;
    font-size: 18px;
}

.buttonBottom a, .buttonBottom .link {
    text-decoration: underline;
}

.buttonBottom a:hover, .buttonBottom .link:hover {
    text-decoration: none;
}

.saveAction {
    display: flex;
    align-items: center;
    gap: 30px;
}


.searchResults, .searchResultButtons, .sortButton, .filterButton {
    box-sizing: border-box;
    display: flex;
    padding: 5px 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
}

.searchResultButtons {
    width: 100%;
}

.searchResultButtons.disabled {
    opacity: 0.3;
}

.searchResultsInfo {
    width: 100%;
    text-align: center;
    font-weight: 600;
}

.searchResults.noResults .searchResultButtons, .searchResults.noResults .searchResultsInfo {
    width: auto;
}

.sortButton, .filterButton {
    cursor: pointer;
    background-color: var(--primary-background-color);
    border-radius: 4px;
    border: 1px solid var(--grey);
    position: relative;
}

.filterRow {
    padding: 12px 38px 12px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.filterRow.inputFilter {
    align-items: center;
}

.filterRow label {
    width: 100%;
    margin: 0 0 0 4px;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filterButton {margin-left: 2px;}

.searchFilterCount {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black-variant);
    color: var(--alternate-text-color);
    font-size: 12px;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 2px;
    right: 2px;
}

.sortButton .sortDirection, .sortButton .sortOption, .filterButton .filterOption {
    padding: 5px 10px;
    color: var(--black-variant);
    display: flex;
    align-items: center;
}

.sortButton .sortOption {
    border-right: 1px solid var(--grey);
    width: 152px;
    display: block;
    text-align: center;
}

.sortButton .sortOption.plain {
    border: none;
}


/* Dropdown Menu styling */

.sortButton .tippy-box {
    background-color: var(--primary-background-color);
    border: 1px solid var(--grey);
    margin-top: -6px;
    border-radius: 0;
    width: 208px;
}

.sortButton .tippy-box li a {
    color: var(--primary-text-color);
    padding: 8px 4px;
}

.sortButton .tippy-box li a:hover {
    background-color: var(--lightgrey-variant);
    color: var(--primary-text-color);
}

.buttonBottom:empty {padding: 0;}

.buttonContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
    max-width: 1440px;
    margin: 0 auto;
    gap: 18px;
}

.buttonContainer .buttonElement {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buttonContainer .buttonElement button {
	padding: 10px 5px;
	background-color: var(--secondary-background-color);
	border-top: 3px solid var(--maincolor);
	word-wrap: break-word;
	cursor: pointer;
    border-radius: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 91px;
    color: var(--black-variant);

    transition: all 300ms ease;
}

.buttonContainer .buttonElement button:disabled {
    border-top-color: var(--grey-variant);
    cursor: text;
    background-color: transparent;
    color: var(--grey-variant);
    opacity: 0.4;
}

.buttonContainer .buttonElement button:hover:not(:disabled) {
    color: var(--primary-button-color);
    border-color: var(--primary-button-color);
}

.buttonElementHeader {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 0 0 5px 0;
    font-size: 16px;
}

.buttonElementInfo {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.buttonContainer .buttonElement a {
    font-size: 18px;
    text-align: center;
}

.buttonElementLink {
    display: block;
    text-align: center;
}

.confirmationText {
    color: var(--maincolor);
    text-transform: uppercase;
    display: inline-block;
    margin: 5px 0;
    letter-spacing: 1px;
}

.icon-refresh.animate {
  animation: rotating 1s linear infinite;
}


@keyframes rotating {
  from {  transform: rotate(0deg);  }
  to {  transform: rotate(360deg);  }
}

.menuBarButtons {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

.menuBarButton {
    display: inline-block;
    padding: 9px 10px;
    color: var(--primary-button-color);
    cursor: pointer;
    font-size: 30px;
    text-align: right;
    position: relative;
    transition: visibility 0.3s ease 0.3s;
}

.menuBarButton a {
    transition: none;
}

.menuBarButton.disabled {
    color: rgba(39,121,170,0.2);
}

.menuBarButton a {
    color: var(--primary-link-color);
}

.menuBarButton.hideContent {
    visibility: hidden;
}

/* END: Links and Buttons */

/* START: List styles */

.styledList li {list-style-type: disc;}


/* END: List styles */


/* START: Header styles */

header {
    width: 100%;
	z-index: 98;
    transition: all 300ms ease;
    min-width: 320px;
    background-color: var(--primary-background-color);
    top: -20px; /* sticky header transition helper */
}

.headerTopContainer {
    width: 100%;
	z-index: 99;
    height: 30px;
    background-color: var(--maincolor);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--alternate-text-color);
    position: relative;
}

.headerTopContent {
    max-width: 1144px;
    display: flex;
    align-items: center;
	justify-content: space-between;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    height: 100%;
}

.mainHeader {
    position: relative;
    z-index: 1;
}

.breadcrumb {
    line-height: 1;
}

.breadcrumb a {
    color: var(--alternate-text-color);
}

.breadcrumb span {
    color: var(--secondary-light-blue);
}

.headerMeta {
    display: none;
}

.headerContext > div {
    display: inline-block;
    color: var(--alternate-text-color);
    cursor: pointer;
}

a.headerLink {
    color: var(--alternate-link-color);
    margin-left: 18px;
}

a.headerLink:hover {
    color: var(--alternate-link-hover-color);
}

.loginLink {
    margin-left: 70px;
}

/* END: Header styles */

/** START: Menu */

.tbaLogoContainer {
    color: var(--maincolor);
    display: flex;
    justify-content: space-between;
    width: 153px;
    position: relative;
    flex-shrink: 0;
}

.tbaLogo {
    font-size: 33px;
}

footer .tbaLogo {
    font-size: 50px;
}

.breedLogo {
    position: absolute;
    right: 0;
    top: 0;
}

.breedLogo span:first-child {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 26px;
}
.breedLogo span:nth-child(2) {
    position: relative;
    font-size: 33px;
    left: 2px;
    bottom: 1px;
}

.largeButton {
    font-size: 18px;
    min-width: 175px;
    height: 36px;
}

#primary_menu {
    width: 100%;
    font-weight: 600;
    display: none;
}

.landingPage #primary_menu_main {
    height: 128px;
}

#primary_menu_main {
    margin: 0 auto;
    max-width: 1144px;
    display: flex;
    align-items: center;
	justify-content: space-between;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: left;
    text-transform: uppercase;
    color: var(--primary-text-color);
    box-sizing: border-box;
    height: 80px;
}

#primary_menu_main, #primary_menu_sub {
    transition: all 0.4s ease;
    padding: 0 10px;
}
#primary_menu_main a {
    color: var(--primary-text-color);
    transition: all 0.4s ease;
    display: inline-block;
    margin-right: 32px;
}

.landingPage #primary_menu_main a {
    margin-right: 24px;
}

#primary_menu_main a.active, #primary_menu_main a:hover {color: var(--primary-link-color);}
#primary_menu_main .menuSearch {
    box-sizing: border-box;
}
#primary_menu .menuIcon {font-size: 30px; position: relative; top: 5px; margin-left: 10px; color: var(--alternate-text-color);}


#primary_menu_sub {background-color: var(--secondary-background-color); height: 36px; }
#primary_menu_sub:empty {display: none;}
.subMenuContainer {
    height: 100%;
    display: flex;
    align-items: center;
	justify-content: flex-end;
    font-size: 14px;
    margin: 0 auto;
    padding: 0 10px;
    max-width: 1144px;
    letter-spacing: 1px;
    box-sizing: border-box;
}

#primary_menu_sub a {
    transition: all 0.4s ease;
    border-bottom: 3px solid transparent;
    padding: 0 10px 0 5px;
    margin-left: 38px;
    color: var(--primary-link-color);
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
#primary_menu_sub a.active, #primary_menu_sub a:hover {
    border-bottom: 3px solid var(--primary-link-hover-color);
    color: var(--primary-link-hover-color);
}

.dialogSearch {
    position: relative;
    z-index: 90;
    height: auto;
}

.standardSearch input{
    width: 100%;
    height: 100%;
    padding: 0 14px;
    color: var(--maincolor);
    border: 0;
	border-radius: 10px;
    background-color: var(--lightgrey);
}

.standardSearch span, .dialogSearch span {
    position: absolute;
    right: 4px;
    top: 10px;
    color: var(--maincolor);
    font-size: 20px;
}

.dialogSearch span {
    top: 5px;
}

.standardSearch.menuSearch.mobileMenuOnly.activeMenuSearch input {
    width: 250px;
}

/* END: Menu */

.tippy-arrow:before {
    color: var(--alternate-text-color);
}

.tippy-box {
    background-color: var(--primary-background-color);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    padding: 5px;
    min-width: 150px;
    box-sizing: border-box;
}

.tippy-box div {
    color: var(--primary-text-color);
}

.tippy-box .tippy-content {padding: 0;}

.tippyTitle {
    font-weight: 600;
    padding-bottom: 10px;
}

.tippy-box ul, .tippy-box li {
    padding: 0;
    list-style-type: none;
    cursor: pointer;
    white-space: normal;
}
.tippy-box li {
    border: 0;
    padding: 2px 0;
    position: relative;
}


.tippy-box li a, .tippy-box li div {
    color: var(--primary-link-color);
    padding: 4px;
    display: block;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}
.tippy-box li a:hover, .tippy-box li div:hover {
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
}

.tippy-box li.menuItemSeparator {
    margin: 5px 1px 6px;
	border: none;
	background-color: transparent;
	padding: 0;
    border-bottom: 1px solid var(--lightblue);
}

.tippy-box li.active, .tippy-box li.active a, .tippy-box li.active a:hover {
    background-color: var(--secondary-background-color);
    cursor: text;
    color: var(--secondary-light-blue);
}

.tippy-box.filter li div.selected {font-weight: 600;}

/* START: Account Nav */
#account_menu, #mobile_menu_profile {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    letter-spacing: initial;
    text-transform: none;
}

#account_menu {
    margin-left: 10px;
}

#account_menu_logout span {
    vertical-align: middle;
    font-size: 18px;
}

#mobile_menu_profile {
    padding: 12px 18px;
    font-size: 18px;
}

#account_menu img, #mobile_menu_profile img {
    border-radius: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

#mobile_menu_profile img {
    height: 56px;
    width: 56px;
    margin-right: 14px;
}

#account_menu .icon-user , #mobile_menu_profile .icon-user {
    font-size: 34px;
    width: 56px;
    height: 56px;
    margin-right: 14px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--lightgrey-variant);
    padding: 0;
    color: var(--primary-text-color);
}

#account_menu .icon-user {
    width: 40px;
    height: 40px;
    font-size: 26px;
}

#mobile_menu_list li a.menuMessageIndicator {
    display: flex;
}

nav {
    white-space: nowrap;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
    height: 60px;
}

div.newMessageIndicator {
    left: 54px;
    position: absolute;
    top: 22px;
}

.newMessageIndicator {
	font-size: 11px;
	color: var(--alternate-text-color);
	background-color: var(--highlight-color);
	border-radius: 100%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
}


.faqTemplateGroup {
    font-weight: 600;
    font-size: 16px;
}

.faqTemplate {
    margin-bottom: 5px;
}

.faqTemplate.selected .selectableCategory {
    font-weight: 600;
}

.faqTemplate .separator {
    text-align: center;
    display: block;
    font-weight: 600;
}

.faqTemplateAnswer {
    padding: 0 24px 5px;
    cursor: pointer;
}

.faqTemplateAnswer:hover {
    background-color: var(--lightgrey-variant);
}

/* Watch List */

.groupHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin: 5px;
    font-size: 18px;
    color: var(--maincolor);
    border-bottom: 1px solid var(--maincolor);
}

.groupHeaderName {
    cursor: pointer;
}

.groupHeaderName:hover, .groupHeaderMenu:hover {
    color: var(--maincolor);
}

.tippy-box li .watchListOption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250px;
}

.icon-arrow-single {
	transition: all 0.2s linear;
    padding: 0 4px;
}

.icon-arrow-single.small {
    font-size: 10px;
}

.icon-arrow-single.open {
	transform: rotate(180deg);
}

.customSearchText {
	letter-spacing: 1px;
	border: none;
}

input.customSearchText:focus {
    border: none;
    background-color: transparent;
}

.customSearch {
    position: relative;
    max-width: 500px;
    width: 100%;
}

.customSearch span {
    position: absolute;
    right: 0;
    top: 8px;
    color: var(--primary-text-color);
    opacity: 0.3;
    font-size: 16px;
}

.customSearch hr {
	border: none;
	height: 2px;
	background-color: var(--black-variant);
	margin-top: 0;
	width: 100%;
    opacity: 0.3;
}

.addFavorite input {
    height: 35px;
    margin-top: 5px;
}

/* END: Account Nav */


/* Login Form, Password Form specifics */
.centeredForm {margin: 0 auto; max-width: 512px;}
.errorContainer, .confirmationContainer, .infoContainer {
	background-color: var(--error-background-color);
	padding: 10px;
	clear: both;
	border-radius: 3px;
    box-sizing: border-box;
	margin-bottom: 10px;
	}

.confirmationContainer {
    background-color: var(--confirmation-background-color);
}

.infoContainer {
    background-color: var(--lightblue);
    display: flex;
    align-items: center;
    gap: 20px;
}

.infoContainer span {
    font-size: 28px;
    color: var(--maincolor);
}

.infoMessage {
	color: var(--maincolor);
    font-weight: 600;
}

.passwordScore  {
  font-weight: 600;
  text-align: right;
  font-size: 13px;
}

.score0 {color: var(--score0);}
.score1 {color: var(--score1);}
.score2 {color: var(--score2);}
.score3 {color: var(--score3);}
.score4 {color: var(--score4);}

.passwordScoreIndicator {
	display: flex;
	justify-content: space-between;
    width: 100%;
    margin-top: 2px;
    height: 5px;
}
.passwordScoreIndicator span {width: 19%; background-color: var(--grey);}
.score0 .passwordScoreIndicator span:first-child {background-color: var(--score0);}
.score1 .passwordScoreIndicator span:nth-child(-n+2) {background-color: var(--score1);}
.score2 .passwordScoreIndicator span:nth-child(-n+3) {background-color: var(--score2);}
.score3 .passwordScoreIndicator span:nth-child(-n+4) {background-color: var(--score3);}
.score4 .passwordScoreIndicator span:nth-child(-n+5) {background-color: var(--score4);}

.togglePasswordVisibility {
    position: absolute;
    padding: 6px 10px;
    top: 0;
    right: 0;
}

/* START: Profile */
.profileInfo {
	display:block;
    width: 100%;
    position: relative;
}

.pageHeadContainer .modifiedInfo {
    font-size: 13px;
    margin-bottom: 10px;
}

.modifiedInfoByAt {padding: 2px 0}

.linkedUserEntry:not(:last-of-type) {border-bottom: 1px solid var(--grey);}

.profileInfo {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.smallProfileTooltip {
  display:none;
  text-align:center
}

.tip {
    color: var(--maincolor);
    background-color: var(--secondary-background-color);
    border: 1px solid var(--maincolor);
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    padding: 3px;
}

table td span[class^="icon-"].tip, table td span[class*=" icon-"].tip {
    font-size: 12px;
}

.tip:hover {
    color: var(--maincolor-variant);
    border-color: var(--maincolor-variant);
}

/* END: Profile */

/** START Healthinfo & Titles */
.titleFilter {margin-bottom: 10px;}
.addTitleInfo {color: var(--darkgrey); font-size: 12px;}

.selectableCategory, .selectableSubCategory > div, .titleCategory {
	cursor: pointer;
	padding: 5px;
}

.selectableCategory.selected, .selectableSubCategory .selected {color: var(--maincolor); font-weight: 600;}

.selectableSubCategory {padding-left: 20px; cursor: pointer;}
.selectableSubCategory > div:hover, .titleCategory:hover {background-color: var(--secondary-background-color);}

.select2-container--default {
    margin: 4px 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
    color: var(--primary-text-color);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 25px;
}

.select2-container--default .select2-selection--single {
    height: 25px;
    border: 1px solid var(--grey);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--lightgrey-variant);
}

.missingEntry {padding: 15px 5px;}
.titlePreview {padding: 0 10px 25px 0; font-size: 18px;}
.titleEntryRow {padding: 10px 0; border-bottom: 1px solid var(--lightgrey);}
.titleEntry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.titleShortName {flex-shrink: 0;}
.removeTitle {margin-top: 10px;}
.moveEntryButtons {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.healthinfo .icon-edit {padding: 6px; vertical-align: middle;}
.healthinfoName .icon-healthinfo {font-size: 16px;}

.contentLeft.disabled, .contentRight.disabled {
    opacity: 0.3;
}

.healthinfoEntry div:empty {display: none;}

.contentSectionWrapper .healthinfoEntry {
    padding: 0 0 10px 0;
}

.healthinfoView .healthinfoEntry .healthinfoName {font-weight: 600;}

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

.titleCategory {
    padding-right: 20px;
}

.titleCategory .icon-check {
    color: var(--darkgrey);
}

.titleCategory .icon-eye:hover {
    color: var(--maincolor);
    cursor: text;
}

.titleCategory .icon-edit, .titleCategory .icon-eye {
    display: none;
}

.titleCategory:hover .icon-edit, .titleCategory:hover .icon-eye {
    display: block;
}

.titleCategoryDetail {
    font-size: 85%;
}

.titleUsageIndicator {
    background-color: var(--confirmation-background-color);
    border-radius:15px;
    padding: 2px 10px;
    font-size: 85%;
    color: var(--primary-text-color);
    display: inline-block;
}

/*  Health analysis */

.pedigreeFilter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.healthAnalysis {
    float: right;
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
    padding-right: 20px;
}
.healthAnalysisNotes {font-style: italic; font-size: 12px;}

.dataTable tr.tableHeader {
    background-color: whitesmoke;
    font-weight: 600;
}

/* END: Healthinfo */


/** Start: Mobile Menu CSS new **/
.mobileMenuButton {
    position: absolute;
    left: 0;
    top: 0;
    padding: 16px 11px;
    cursor: pointer;
}

.mobileMenuButton span {
    border-radius: 1px;
    display: block;
    height: 4px;
    width: 28px;
    margin: 4px 0;
    background-color: var(--maincolor);
}

.mobileMenuButton span:nth-child(2) {
    width: 20px;
}

#mobile_menu_wrapper {
    display: block !important;
    width: 280px;
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    background-color: var(--primary-background-color);
    z-index: 0;
}

#mobile_menu_wrapper:after {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    content: "";
    display: block;
    height: 120%;
    left: 100%;
    right: auto;
    position: absolute;
    top: -10%;
    width: 20px;
    z-index: 99;
}


.openMenu #mobile_menu_wrapper {
    position: fixed;
    top: 90px;
}

.mobileNavbar {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--lightgrey);
}

.logoMobileMenu {
    font-size: 36px;
    padding: 6px;
    color: var(--primary-text-color);
}

#mobile_menu {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-transform: capitalize;
}


#mobile_menu_list, #mobile_menu_list li ul, #mobile_menu_list li ul li {
    padding: 0;
}

#mobile_menu_list li {
    list-style: none;
    border-bottom: 1px solid var(--lightgrey);
}

#mobile_menu_list a.active
{
    font-weight: 400;
}

#mobile_menu_list a.hasSubmenu:hover, #mobile_menu_list a.active.hasSubmenu{
    background-color: transparent;
}

#mobile_menu_list li:last-child {
    border-bottom: none;
}

#mobile_menu_list li .toggleIndicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--maincolor);
}

#mobile_menu_list li a {
    text-decoration: none;
    display: block;
    padding: 12px 18px;
    font-size: 24px;
    font-weight: 300;
    color: var(--primary-link-color);
    text-transform: uppercase;
}

#mobile_menu_list li.mobileLanguageSelector {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mobile_menu_list li.mobileLanguageSelector a {
    font-size: 19px;
    color: var(--primary-text-color);
    background-color: transparent;
}

.mobileLanguageSeparator {
    font-size: 19px;
    color: var(--maincolor);
}

.mobileLanguageSeparator:last-child {
    display: none;
}

#mobile_menu_list li.mobileLanguageSelector .active a {
    color: var(--primary-link-color);
}

#mobile_menu_list li ul li a {
    display: flex;
    align-items: center;
    text-transform: none;
    font-size: 20px;
    padding: 15px 0 15px 24px;
}

#mobile_menu_list .icon-arrow-single {
    padding: 0 20px 0 10px;
}

#mobile_menu_list .button {
    margin: 10px;
    padding: 12px 36px;
    font-size: 16px;
}

.mobileLogin .registerLink {
    padding: 15px;
    text-decoration: underline;
}

.open .icon-arrow-single {
	transition: all 0.2s linear;
}

.open .icon-arrow-single {
	transform: rotate(180deg);
}

/** End: Mobile Menu CSS **/

/* Litter START */
.litterInfo {
	text-align: center;
	width: 100%;
	margin-bottom: 5px;
	font-size: 12px;
}

.litterOffspring {
	width: 100%;
    margin-right: 20px;
}

.litterDialogOpener {
	position: absolute;
	right: 5px;
	top: 5px;
	font-size: 20px;
}

.dialogHeadSection {padding: 10px;}

.litterDialogHeader {
	font-weight: 600;
	display: block;
	text-align: center;
	margin-bottom: 8px;
}
.litterMatingPartner {
	display: flex;
    justify-content: space-between;
    width: 100%;
}

.litterMatingPartner .profileData {
    width: 100%;
}

.litterMatingPartner .smallProfile .profilePhoto, .litterMatingPartner .smallProfile .pictureContainer {
    align-self: flex-start;
}
.smallProfileMatingSire, .smallProfileMatingDam {
	width: calc((100% - 10px) / 2);
    height: 100%;
}
.smallProfileMatingSire {text-align: right;}

.smallProfileMatingDam .noPhoto .icon-animal-standing-right {
    transform: rotateY(180deg);
}

/** Add Litter **/

.litterParentsContainer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.litterEditAnimal {
    padding-bottom: 10px;
}

/* Litter End */

/* START: Statistics */

.statisticSection h2 {
    font-size: 20px;
    text-transform: none;
}

.statisticSection table td:last-child, .statisticSection table th:last-child {text-align: right;}

.mapChart {width: 100%; height: 300px; margin-bottom: 10px; display: inline-block; vertical-align: top;}

.pieChart  {width: 100%; height: 280px;}
.lineChart {width: 100%; height: 400px;}

.statisticsColorGroup {
    font-weight: 600;
}
.statisticsColorGroupColor:after {content: ', ';}
.statisticsColorGroupColor:last-child:after {content:'';}

.statisticSection .userInfo {max-width: 125px;}

/* END: Breeding Statistic */

/* Siblings START */

.profileDetails {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
	width: 100%;
    font-size: 13px;
}

.fullProfile .profileDetails {
    font-size: 14px;
}

.profileData {
    margin: 0 5px;
    color: var(--primary-text-color);
}

.profileData .registeredNameLink {
    font-size: 16px;
}

.profileData, .profileData span {
    word-wrap: break-word;
    word-break: break-all;
}

.itemBox .profileData, .itemBox .profileData span {
    word-wrap: normal;
    word-break: normal;
}

.profilePhoto, .pictureContainer, .noPhoto {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.noPhoto {
    align-self: center;
}

.profilePhoto {
    text-align: center;
}

.pictureContainer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pictureContainer:empty {display: none !important;}

.noPhoto, a.noPhoto {
    margin: 0;
	border-radius: 4px;
	text-align: center;
	color: var(--maincolor);
}

.noPhoto [class^="icon-"] {
    font-size: 34px;
}

.noPhoto .icon-tba-logo {
    font-size: 20px !important;
}

.userProfile .noPhoto {
    color: var(--primary-text-color);
    height: 200px;
}

.noPhoto .icon-user {
    color: var(--primary-text-color);
}

.smallProfile .profilePhoto, .smallProfile .pictureContainer {
    width: 100px;
    height: 100%;
    justify-content: flex-start;
    align-self: center;
    content-visiblity: auto;
}

.smallProfile .pictureContainer img {
    max-height: 80px;
}

.fullProfile .profilePhoto, .fullProfile .pictureContainer {
    width: 120px;
    height: 100%;
    justify-content: center;
    align-self: center;
    content-visiblity: auto;
}

.fullProfile .pictureContainer img {
    max-height: 100px;
}

.pictureProfileContainer {
    width: 230px;
    flex-shrink: 0;
    background-color: var(--box-background);
    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
}

.pictureProfileContainer .pictureContainer img {
    border-radius: 0;
    width: 230px;
    max-height: 280px;
    object-fit: cover;
}

/* more width for container on animal view page */
.profileMainData .pictureProfileContainer {
    width: 260px;
}
.profileMainData .pictureProfileContainer .pictureContainer img {
    transition: transform 1s ease;
    transform-origin: center center;
    width: 260px;
}

.pictureProfileContainer .profileData {
    cursor: pointer;
    margin: 0;
    padding: 12px 8px;
}

.profileMainData .pictureProfileContainer .profileData {
    cursor: default;
}


.profileMainData .profilePhoto:hover img {
    transform: scale(1.1);
}


.pictureProfileContainer .itemBox {
    padding: 0;
    margin: 0;
}

.pictureProfileContainer .resultProfile .profilePhoto, .pictureProfileContainer  .resultProfile .pictureContainer  {
    width: 100%;
    display: block;
    padding: 0;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.pictureProfileContainer .resultProfile .noPhoto {
    height: auto;
    padding: 30px 0 10px 0;
}

.pictureProfileContainer .noPhoto [class^="icon-"] {
    font-size: 86px;
}

.pictureProfileButtons {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 18px;
    display: flex;
    gap: 8px;
    color: var(--primary-button-color);
}

.pictureProfileButtons > div {
    cursor: pointer;
    height: 28px;
    width: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pictureProfileButtons .isFavorite {
    background-color: var(--white);
}

.pictureProfileButtons > div > span {
    /*correctly align the icon within the background circle*/
    position: relative;
    left: 0;
    top: 1px;
}

.browseAnimalBox .smallProfile .profilePhoto,
.browseAnimalBox .smallProfile .pictureContainer,
.browseAnimalBox .smallProfile .noPhoto {
    background-color: transparent;
    padding: 0;
    align-self: center;
    width: 75px;
    height: 75px;
    content-visiblity: auto;
}

.browseAnimalBox .smallProfile .pictureContainer {
    justify-content: center;
    align-items: center;
}

.fullProfile .pictureContainer {
    align-items: center;
     padding: 5px;
}

.resultProfile.itemBox {
    background-color: var(--box-background);
    border-radius: 4px;
    margin-bottom: 4px;
}

.resultProfile .profilePhoto, .resultProfile .pictureContainer  {
    width: 80px;
    height: 100%;
    align-self: center;
}

.resultProfile .pictureContainer {
    padding: 2px;
}

.resultProfile .noPhoto {
    height: 60px;
    background-color: transparent;
}

.resultProfile .primaryProfileData {
    width: 100%;
    display: flex;
}

.resultProfile .secondaryProfileData {
    width: auto;
    display: none;
    text-align: right;
}

.litterMatingPartner .profileDetails {
    flex-wrap: wrap;
}

.smallProfileMatingSire .profileDetails {
    flex-direction:row-reverse;
}
.smallProfileMatingSire .pictureContainer {
    justify-content: flex-end;
}

.pictureContainer img, .noPhoto {
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 4px;
}

.pedigreeLevel0 .noPhoto [class^="icon-"],
.pedigreeLevel1 .noPhoto [class^="icon-"] {
    font-size: 60px;
    }

.pedigreeLevel2 .noPhoto [class^="icon-"],
.pedigreeLevel3 .noPhoto [class^="icon-"] {
    font-size: 50px;
    }

.pedigreeLevel4 .noPhoto [class^="icon-"] {
    font-size: 40px;
    }

.virtualPedigreeAnimal.pedigreeLevel1 .noPhoto [class^="icon-"],
.virtualPedigreeAnimal.pedigreeLevel2 .noPhoto [class^="icon-"] {
    font-size: 30px;
}

.virtualPedigreeAnimal.pedigreeLevel3 .noPhoto [class^="icon-"],
.virtualPedigreeAnimal.pedigreeLevel4 .noPhoto [class^="icon-"] {
    font-size: 25px;
    }

.litterInfo .icon-animal-mating-partners {
	font-size: 25px;
    color: var(--darkgrey);
}

.profileData .icon-animal-mating-partners, .litterParentsContainer .icon-animal-mating-partners {
    font-size: 14px;
    color: var(--darkgrey);
}

/*Siblings END */

/* Copyright violation START */

.copyrightViolation {
	border: 2px solid var(--error-color);
}

.askConfirmation {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.askConfirmation label {
    flex-grow: 2;
}
/* Copyright violation END */

/* Pedigree START */
#pedigreeContainer, #descendantsContainer {
    width: 100%;
    overflow: auto;
    display: block;
    box-sizing: border-box;
    padding: 10px;
}

.printPedigree #pedigreeContainer {
    padding: 0;
}

.testMating #descendantsContainer, .testMating #pedigreeContainer, .testMating .pedigreeOccurrenceInfo {
    background-color: var(--secondary-background-color);
}

.testMating h3 {
    padding-top: 20px;
}

#descendantsContainer {
    position: relative;
}

#pedigreeContainer .dropdownMenu {
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 1px 1px 1px;
	z-index: 1;
	}


.pedigreeEntry, .descendantContainer {
	padding: 3px;
    background-color: var(--primary-background-color);
	border-radius: 10px;
	box-sizing: border-box;
    position: relative;
}

.pedigreeEntry.emptyAncestor {display: none;}
.pedigreeEntry.missingAncestor {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

#pedigree {
	text-align: center;
}

#descendantsWrapper {
    overflow: hidden;
    width: 100%;
	margin: 0 auto;
}

.foundationPedigreeAnimal, .unregisteredPedigreeAnimal {background-color: var(--lightgrey-variant);}

.descendantGeneration {font-weight: 600; margin-right: 5px;}

.scrollDescendantsLeft, .scrollDescendantsRight {
	position: absolute;
	height: 105px;
    background-size: 25px auto;
    width: 40px;
	bottom: 10px;
	cursor: pointer;
	z-index: 1;
    background-color: rgba(255, 255, 255, 0.85);
    background-repeat: no-repeat;
    background-position: center;
}
.scrollDescendantsLeft {
	background-image: url("../images/prev.png");
	left: 0;
}
.scrollDescendantsRight {
	background-image: url("../images/next.png");
	right: 0;
}

.scrollDescendantsLeft:hover, .scrollDescendantsRight:hover {
	opacity: 0.9;
}

.descendantContainer {
	width: 230px;
	float:left;
	font-size: 12px;
	height: 105px;
	transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.descendantLinkMale::before, .descendantLinkFemale::before {
	float: left;
	position: relative;
	top: 22px;
	left: 0;
	width: 16px;
}
.descendantLinkMale::before	{
	content: url("../images/descendant_link_male.png");
}
.descendantLinkFemale::before {
	content: url("../images/descendant_link_female.png");
}


.pedigreeInnerContainer .registeredNameLink,
.pedigreeInnerContainer .ancestorHeader,
.pedigreeInnerContainer .ancestorColor,
.pedigreeInnerContainer .suffixTitles,
.pedigreeInnerContainer .ancestorBirthInfo,
.descendant .registeredName,
.descendant .ancestorBirthInfo {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pedigreeInnerContainer .registeredNameLink {
    display: inline-block;
    max-width: 190px;
    width: 100%;
}

.pedigreeContainerLevel3 .pedigreeInnerContainer .ancestorHeader,
.pedigreeContainerLevel3 .pedigreeInnerContainer .registeredNameLink,
.pedigreeContainerLevel3 .pedigreeInnerContainer .pedigreeMetaData {
    max-width: 158px;
}
.pedigreeContainerLevel4 .pedigreeInnerContainer .ancestorHeader,
.pedigreeContainerLevel4 .pedigreeInnerContainer .registeredNameLink,
.pedigreeContainerLevel4 .pedigreeInnerContainer .pedigreeMetaData {
    max-width: 160px;
}
.pedigreeContainerLevel5 .pedigreeInnerContainer .registeredNameLink {
    max-width: 225px;
    padding-top: 4px;
}

.pedigreeInnerContainer .ancestorHeader:not(:empty) {height:22px;}
.pedigreeInnerContainer .pictureContainer {
    align-items: center;
}
.pedigreeContainerLevel3 .pedigreeInnerContainer .ancestorHeader:not(:empty),
.pedigreeContainerLevel4 .pedigreeInnerContainer .ancestorHeader:not(:empty) {
    height: 18px;
}
.pedigreeMetaData {font-size: 13px; line-height: 120%;}
.pedigreeMetaData .registeredNameLink {font-size: 14px; font-weight: 600; line-height: 140%;}

.showScrollModeEdge .pedigreeLevel0:before {
    background: url("../images/scrollpedigree_edge.png") no-repeat;
    background-size: auto 220px;
	height: 220px;
	width: 40px;
	content: "";
	position: absolute;
	left: -14px;
	top: 0;
}

.showScrollModeEdge .pedigreeInnerContainer {padding-left: 8px;}
.showScrollModeEdge .pedigreeLevel0 .ancestorPhoto .pictureContainer {width: 180px;}

.showScrollModeEdge .pedigreeInnerContainer .registeredNameLink {max-width: 184px;}

#summary_div {margin-top: 10px; margin-bottom: 10px;}
#summary_div tr:nth-child(even) {background-color: var(--secondary-background-color);}

#pedigreeContainer > div {
    margin: 0 auto;
}

#pedigreeContainer .generations2 {width: 460px;}
#pedigreeContainer .generations3 {width: 700px;}
#pedigreeContainer .generations4 {width: 990px;}
#pedigreeContainer .generations5 {width: 1280px;}
#pedigreeContainer .generations6 {width: 1570px;}

#pedigree_level_0, #pedigree_level_1, #pedigree_level_2, #pedigree_level_3, #pedigree_level_4, #pedigree_level_5 {
	float: left;
	position: relative;
	display: block;
}

#pedigree_level_0 {width: 200px;}
#pedigree_level_1, #pedigree_level_2  {width: 240px;}
#pedigree_level_3, #pedigree_level_4, #pedigree_level_5{width: 290px;}

#pedigree_level_5 .showPedigreeLines::before{
	content: url("../images/pedigree_level_5.png");
	float: left;
	position: relative;
	top: 19px;
	left: 0;
}

#pedigree_level_4 .showPedigreeLines::before{
	content: url("../images/pedigree_level_4.png");
	float: left;
	position: relative;
	top: 38px;
	left: 0;
}

#pedigree_level_3 .showPedigreeLines::before{
	content: url("../images/pedigree_level_3.png");
	float: left;
	position: relative;
	top: 76px;
	left: 0;
}

#pedigree_level_2 .showPedigreeLines::before{
	content: url("../images/pedigree_level_2.png");
	float: left;
	position: relative;
	top: 152px;
	left: 0;
}

#pedigree_level_1 .showPedigreeLines::before{
	content: url("../images/pedigree_level_1.png");
	float: left;
	position: relative;
	top: 304px;
	left: 0;
}

.pedigreeContainerLevel0, .pedigreeContainerLevel1, .pedigreeContainerLevel2,
.pedigreeContainerLevel3, .pedigreeContainerLevel4, .pedigreeContainerLevel5{
	display: -webkit-box;
	display: flex;
	justify-content: center;
	white-space: nowrap;
	flex-direction: column;
}

.pedigreeContainerLevel0 {height: 1216px;}
.pedigreeContainerLevel1 {height: 608px; }
.pedigreeContainerLevel2 {height: 304px; }
.pedigreeContainerLevel3 {height: 152px; }
.pedigreeContainerLevel4 {height:76px;}
.pedigreeContainerLevel5 {height:38px;}

.pedigreeLevel0 {height: 220px;width: 200px;}
.pedigreeLevel1 {height: 240px;width: 200px;}
.pedigreeLevel2 {height: 196px;width: 200px;}
.pedigreeLevel3 {height: 100px;width: 250px;}
.pedigreeLevel4 {height: 72px;width: 250px;}
.pedigreeLevel5 {height: 36px;width: 250px;}

.pedigreeContainerLevel5 .ancestorHeader {height: auto !important; width: 93%;}

.pedigreeLevel0 .ancestorPhoto .pictureContainer, .pedigreeLevel1 .ancestorPhoto .pictureContainer, .pedigreeLevel2 .ancestorPhoto .pictureContainer {
    height: 100px;
    width: 194px;
}
.pedigreeLevel2 .ancestorPhoto .pictureContainer{height: 70px;}
.pedigreeLevel3 .ancestorPhoto .pictureContainer{width: 80px; height: 92px;}
.pedigreeLevel4 .ancestorPhoto .pictureContainer{width: 75px; height: 64px;}

.pedigreeLevel3 .ancestorPhoto, .pedigreeLevel4 .ancestorPhoto {display: inline-block;}
.pedigreeLevel3 .ancestorData, .pedigreeLevel4 .ancestorData {display: inline-block; vertical-align: top;}
.pedigreeLevel3, .pedigreeLevel4, .pedigreeLevel5 {text-align: left;}

.multipleOccurrence {background: var(--lightblue);}
.markedMultipleOccurrence {background: var(--secondary-light-blue);}


.generations2 .pedigreeContainerLevel0 {height: 488px;}
.generations2 .pedigreeContainerLevel1 {height: 244px;}
.generations3 .pedigreeContainerLevel0 {height: 800px;}
.generations3 .pedigreeContainerLevel1 {height: 400px;}
.generations3 .pedigreeContainerLevel2 {height: 200px; }
.generations4 .pedigreeContainerLevel0{height: 832px;}
.generations4 .pedigreeContainerLevel1{height: 416px;}
.generations4 .pedigreeContainerLevel2{height: 208px;}
.generations4 .pedigreeContainerLevel3{height: 104px;}

.generations2 #pedigree_level_1 .showPedigreeLines::before{
	content: url("../images/pedigree_level_1_generations2.png");
	top: 122px;
}

.generations3 #pedigree_level_1 .showPedigreeLines::before {
    content: url("../images/pedigree_level_1_generations3.png");
    top: 200px;
}

.generations3 #pedigree_level_2 .showPedigreeLines::before {
    content: url("../images/pedigree_level_2_generations3.png");
    top: 100px;
}

.generations4 #pedigree_level_1 .showPedigreeLines::before {
    content: url("../images/pedigree_level_1_generations4.png");
    top: 208px;
}

.generations4 #pedigree_level_2 .showPedigreeLines::before {
    content: url("../images/pedigree_level_2_generations4.png");
    top: 104px;
}

.generations4 #pedigree_level_3 .showPedigreeLines::before {
    content: url("../images/pedigree_level_3_generations4.png");
    top: 52px;
}

.coiInfo {
    color: var(--darkgrey);
}

.incompletePedigree {
	color: var(--error-color);
}

.saveAncestor {
	position: absolute;
	right: 0;
	bottom: 0;
    border-radius: 0 0 10px 0;
    font-size: 16px;
	transition: all 0.4s ease;
	padding: 5px 10px;
	margin: 0;
}

.pedigreeLevel3.addAncestor input {width: 155px;}
.pedigreeLevel4.addAncestor input {width: 163px;}

/* Pedigree END */

/* Print Pedigree START */

.printPedigree table td {
    border: 2px solid var(--alternate-text-color);
    padding: 5px;
    width: auto;
    text-align: center;
}

.pedigreeInfo {display: none; text-align: center;}
.pedigreeInfo {
    font-size: 12px;
    font-weight: 600;
}

.pedigreeDisclaimer {
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
}

.printPedigree .pictureContainer img {
    max-width: 100px;
}

/* Print Pedigree END */

/* Reverse Pedigree Start */

.rootContainer {
    overflow-x: auto;
    min-height: 300px;
}

.descendantLitterInfo {
    color: var(--primary-link-color);
    font-weight: 600;
}

.descendantLitterInfo:hover {
    color: var(--primary-link-hover-color);
}

.animalContainer {
    padding: 0 0 0 42px;
}

.litterContainer {
    padding: 4px 0 4px 20px;
}

.rootContainer > .litterContainer {
    padding: 4px 0;
}

.litterContainer, .animalContainer {
    cursor: pointer;
    position: relative;
}

.animalContainer {
    line-height: 180%;
}

.litterContainer {
    line-height: 140%;
}

.descendantLeafNode, .revpedNodeHeader .descendantLeafNode .registeredNameLink,
.revpedNodeHeader .descendantLeafNode .registeredNameLink:hover {
    color: var(--primary-text-color);
    cursor: text;
}

.revpedNodeHeader {
    display: flex;
    white-space: nowrap;
}

.revpedNodeHeader .registeredNameLink {
    color: var(--primary-link-color);
    cursor: pointer;
}

.revpedNodeHeader .registeredNameLink:hover {
    color: var(--primary-link-hover-color);
}

.revpedNodeHeader div {
    flex-shrink: 0;
}

.descendantConnectionTop, .descendantConnectionBottom {
    position: relative;
}

.descendantConnectionTop {
    border-left: 1px solid var(--maincolor);
}

.descendantConnectionBottom {
    border-bottom: 1px solid var(--maincolor);
    width: 12px;
    height: 13px;
    margin-right: 4px;
}

.animalContainer.revpedLastContainer > div.revpedNodeHeader .descendantConnectionTop {
    height: 14px;
}

.litterContainer.expandedNode, .animalContainer.expandedNode .litterContainer {
    border-left: 1px solid var(--maincolor);
}

.expandedNode.revpedLastContainer > div.litterContainer {
    border-left: none;
}

.highlightedNode {
    background-color: var(--secondary-background-color);
}


/* Reverse Pedigree End */

/* message START */
.unreadMessage {
	font-weight: 600;
}

.issueStatus, .issueMessageStatus {font-weight: 600;}
.statusClosed {color: var(--score4);}
.statusOpen {color: var(--score1);}
.statusReopened {color: var(--score0);}
.statusConfirmed {color: var(--maincolor);}

.unansweredIssue::before {
    background-color: var(--maincolor);
    border-radius: 3px;
    color: var(--alternate-text-color);
    content: "new";
    font-size: 10px;
    font-weight: 600;
    margin-right: 2px;
    padding: 3px;
    vertical-align: middle;
}
.closedIssue, .closedIssue a {color: var(--grey-variant);}
.historyEntry:not(:last-child) {border-bottom: 1px solid var(--alternate-text-color);}
.historyEntry .textDescription, .historyEntry .textLabel {
    display: flex;
    align-items: center;
}
 .historyEntry .textLabel {
     flex-wrap: wrap;
     margin-right: 10px;
 }
/** Message General **/
.messagePage footer {display: none !important;}

.messageSectionWrapper {
    max-width: 1124px;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: var(--primary-background-color);
    border-radius: 4px;
}

.messageThreadListFooter, .messageThreadHeader {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
}

.messageThreadList, .messageThread {
    width: 100%;
    box-sizing: border-box;
}


/* List Entry */
.messageThreadListElement {
    border-bottom: 1px solid var(--secondary-background-color);
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
}

.messageThreadListElement.hasUnreadMessage {
    border-left: 3px solid var(--maincolor);
}

.messageThreadListElement.selected {
    background-color: var(--lightblue);
}

.messageThreadListElement .messageUserProfile img {
    height: 50px;
    width: auto;
}

.messageThreadListElement .messageUserProfile .icon-user{
    font-size: 34px;
}

.messageThreadListElement .profilePhoto, .messageThreadListInfo {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 66px);
    margin: 0;
}

.messageThreadListElement .profilePhoto {
    width: 60px;
}

.messageThreadListElement .messageThreadMetaData {
    font-size: 90%;
    color: var(--darkgrey);
}

.messageThreadListElement .profileData {
    width: auto;
    font-size: 90%;
}
.messageSubject {
    font-weight: 600;
}
/** Message Thread **/

.messageThread {
    height: calc(100vh - 90px);
}

.messageThreadHeader {
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.messageThreadHeader .cancelButton {
    cursor: pointer;
    color: var(--maincolor);
    padding: 0 5px 5px 5px;
}

/** Visibility **/

.textMarker {
    border: 1px solid var(--maincolor);
    color: var(--maincolor);
    border-radius: 16px;
    padding: 2px 8px;
    margin-right: 2px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
          user-select: none;
}

.textMarker.selected {
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
}

a .textMarker {
    background-color: var(--alternate-button-color);
    color: var(--alternate-button-text-color);
    font-size: 12px;
    margin-left: 5px;
    border: none;
}

/** Message **/

.messageThreadContentContainer {
    width: 100%;
    background-color: var(--primary-background-color);
    overflow-y: scroll;
    height: calc(100% - 105px);
}

.adminUser.messageThreadContentContainer {
    height: calc(100% - 130px);
}

.messageContainer {
    align-items: flex-end;
    margin: 5px;
}

.messageContainer.messageRight {
    flex-direction: row-reverse;
}

.messageThreadHeaderContainer {
    display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

/** Message Content **/

.messageContainer img {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    max-width: inherit;
}

.messageContainer .avatarImage {
    height: 36px;
    padding: 0 5px;
}

.messageContainer .avatarDefault {
    height: 26px;
    padding: 0 5px;
}

.messageContainer .icon-user {
    font-size: 26px;
    padding: 0;
    border: none;
    background-color: transparent;
}

.messageThreadText {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    padding: 8px 16px;
    box-sizing: border-box;
    max-width: 75%;
}

.messageLeft .messageThreadText {
    border-bottom-right-radius: 8px;
    background-color: var(--lightgrey);
    border: 1px solid var(--lightgrey);
}

.messageRight .messageThreadText {
    border-bottom-left-radius: 8px;
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
}

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

/** New message **/
.newMessage {
    border: 1px solid var(--maincolor);
    max-height: 150px;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--primary-background-color);
    position: fixed;
}

.newMessage textarea, .newMessage textarea:focus {
    border: none;
    max-height: 140px;
    overflow: auto;
    background-color: var(--primary-background-color);
}

.newMessage button, .newMessage button:hover {
    background-color: transparent;
    font-size:24px;
    border: none;
    min-width: auto;
    padding: 8px 12px;
}

.newMessage button[disabled], .newMessage button[disabled]:hover {
    cursor: text;
    color: var(--standardbutton-disabled-color);
}

.newMessage button {
    color: var(--primary-button-color);
}

.newMessage button:hover {
    color: var(--primary-button-hover-color);
}
/* message END */

/* Browse */

.browseContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.browseContainerElement .fotogalleryContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    height: 225px;
    overflow: hidden;
}

.fotogalleryContainer .carouselPreviewContainer {
    width: 280px;
    height: 225px;
}

.fotogalleryContainer img {
    transition: all 0.3s ease;
    border-radius: 3px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.fotogalleryContainer .browseClick {
    transition: all 0.3s ease;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;
    background-color: rgba(255,255,255,0.7);
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fotogalleryContainer .browseClick:hover {
    opacity: 1;
}

.fotogalleryContainer .carouselBackground {
    position: absolute;
    width: 280px;
    height: 210px;
    border-left: 12px solid var(--darkgrey);
    border-right: 12px solid var(--darkgrey);
    border-radius: 3px;
}

.fotogalleryContainer .carouselBackground2 {
    position: absolute;
    width: 284px;
    height: 200px;
    border-left: 16px solid var(--grey);
    border-right: 16px solid var(--grey);
    border-radius: 3px;
}

.fotogalleryCaptionName {
    font-size: 18px;
}


/* New Ribbon */

.ribbon {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

.ribbon .bannerText, .ribbon .banner {
	margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;
}
.ribbon .banner{
	transform:rotate(-45deg);
	color: var(--alternate-text-color);
	-webkit-font-smoothing:antialiased;
	display:block;
	float:right;
	position:relative;
	left: -7px;
	top:16px;
	width:65px;
}

.ribbon .banner:after, .ribbon .banner:before {
	background-color: var(--maincolor);
	content: '';
    height: 6px;
    position: absolute;
    width: 20px;
	opacity: 0.8;
	display: block;
}

.ribbon .banner:before {
    transform: skewY(-45deg) translate(50%, 15px);
    transform-origin: 100% center;
	top: -5px;
	left: -30px;
}
.ribbon .banner:after{
    transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
    transform-origin:0 center;
	top:18px;
	right: -12px;
}


.ribbon .bannerText {
	font-size: 11px;
    font-weight: 600;
    padding: 3px 0;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
	text-align: center;
}

.ribbon .bannerText:before{
	transform: translateX(-15%) skewX(-45deg);
}

.ribbon .bannerText:after {
	transform: translateX(15%) skewX(45deg);
}

.ribbon .bannerText:after, .ribbon .bannerText:before {
	content: "";
    display: block;
    height: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
	background-color: var(--maincolor);
}


/* End ribbon */

.itemBox {
	padding: 5px;
	background-color: var(--primary-background-color);
	width: 100%;
	border-radius: 10px;
	position: relative;
	box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: all 0.3s ease;
}

.itemBox.fullProfile {
    margin-bottom: 4px;
}

.itemBox.matingProfile {
    background-color: var(--box-background);
}

.itemBox.selectAnimal {
    border: 2px solid var(--alternate-text-color);
}

.itemBox.selectAnimal.selected {
    border: 2px solid var(--maincolor);
}

.itemBox .deleteEntry {
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    color: var(--primary-link-color);
    font-size: 18px;
    padding: 5px;
}

.itemBox .deleteEntry:hover {
    color: var(--primary-link-hover-color);
}

.testimonialText {
    font-style: italic;
}
.testimonialWriter {
    font-weight: 600;
    padding-bottom: 5px;
}

.recordInfo {
	font-size: 12px;
	text-align: left;
    margin-top: 5px;
}

.dateModified {margin-top: 0;}
.infoModifier div {display: inline-block; width: 100%;}

.userInfo .icon-badge {font-size: 18px !important;}
.userInfo  .icon-crown, .crownHeader.icon-crown {color: var(--primary-text-color); border-radius: 50%; padding: 3px; font-size: 14px; vertical-align: top;}
.userInfo  .icon-crown.silversponsor, .crownHeader.icon-crown.silversponsor {background-color: var(--grey);}
.userInfo  .icon-crown.goldsponsor, .crownHeader.icon-crown.goldsponsor {background-color: var(--gold);}

    /* crown design on overview page */

.crownHeader.icon-crown {
    font-size: 40px !important;
    padding: 15px;
    display: inline-block;
    transform: translate(0, -70%);
}

/* crown design for sponsor activation confirmation page */

.sponsorshipActivation .icon-crown {
    font-size: 25px;
    padding: 10px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.sponsorshipActivation {
    display: flex;
    align-items: center;
}

.contentSection {position: relative; }
.contentSection.sectionBackground {
    background-color: var(--secondary-background-color);
}

.scrollToTop {
  position: fixed;
  bottom: 45px;
  right: 5px;
  background-color: rgba(255,255,255,0.8);
  z-index: 100;
  cursor: pointer;
  padding: 10px;
  transition: all 0.4s ease;
  border-radius: 3px;
}

.scrollToTop .icon-arrow-line-up {
  font-size: 25px;
  font-weight: 600;
}

.pageHeadContainer {
    padding: 20px;
    max-width: 1164px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* MEMBERS */

.memberContainer {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	background-color: var(--secondary-background-color);
	text-align: center;
    border-radius: 10px;
    margin-top: 10px;
    position: relative;
}
.memberDetail, .sponsorDetail {
	padding: 16px 8px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.memberDetail {
    padding-bottom: 50px;
}

.memberHighlight {
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -40px;
    text-transform: uppercase;
    font-weight: 600;
    width: calc(100% + 2px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.sponsorDetail {
    background-color: var(--primary-background-color);
    position: relative;
    border-radius: 10px;
}
.memberDetail .button, .sponsorDetail .button {padding: 8px; min-width: 200px; margin-top: 15px;}
.memberDetail .button a, .sponsorDetail .button a {color: var(--alternate-text-color);}
.memberDetail:nth-child(2) {border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey);}
.memberDetailList, .sponsorDetailList {margin-top: 10px;}
.memberDetailList div, .sponsorDetailList div {padding: 5px 0;}
.memberDetail .memberTitle, .sponsorContainer .sponsorName {font-size: 20px; font-weight: 600; margin-top: 0;margin-bottom: 0;}
.memberPlan, .sponsorContribution {font-size: 24px; font-weight: 600; color: var(--confirmation-color); }
.memberPlanInfo, .sponsorContributionInfo {color: var(--grey-variant);}
.sponsorContainer > div {text-align: center; margin-top: 40px;}
.sponsorDetailWrapper {position: relative;}
.sponsorDetail.standard {border: 7px solid var(--maincolor);}
.sponsorDetail.silver {border: 7px solid var(--silver);}
.sponsorDetail.gold {border: 7px solid var(--gold);}
.sponsorDetailContent {margin-top: -40px;}

.sponsorMemberContainer .sponsorDetail {
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 15px;
    margin-top: 24px;
    width: 100%;
}

.sponsorCaption {
    position: relative;
    max-width: 1024px;
    margin: 60px auto;
    box-sizing: border-box;
    text-align: center;
}

.sponsorCaption .whiteOverlay {
    padding: 10px;
}

.sponsorCaption img {
    min-height: 140px;
}

.sponsorDetail .sponsorHeader {
    position: absolute;
    top: -22px;
    padding: 5px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
}

.gold .sponsorHeader {
    background-color: var(--gold);
}

.silver .sponsorHeader {
    background-color: var(--silver);
}

.standard .sponsorHeader {
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
}

.sponsorMemberContainer .sponsorContent {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sponsorMemberContainer .member .icon-crown {
    font-size: 40px;
}

.sponsorMemberContainer .member {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.sponsorMemberContainer .gold .member {
    background-color: var(--gold);
}

.sponsorMemberContainer .silver .member {
    background-color: var(--silver);
    animation-delay: 0.6s;
}

.offerContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.offerBadge {
    background-color: var(--maincolor);
    color: var(--alternate-text-color);
    width: 100px;
    height: 100px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-25deg);
    font-weight: 600;
    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
    flex-shrink: 0;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-4-26 14:15:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-fwd
 * ----------------------------------------
 */
@keyframes bounce-in-fwd {
  0% {
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: scale(0.7);
    animation-timing-function: ease-in;
  }
  72% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  81% {
    transform: scale(0.84);
    animation-timing-function: ease-in;
  }
  89% {
        transform: scale(1);
        animation-timing-function: ease-out;
  }
  95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
  }
  100% {
        transform: scale(1);
        animation-timing-function: ease-out;
  }
}

.sponsorUserInfo {
    display: inline-block;
    margin: 10px;
}

.sponsorSeparator:not(:last-child) {
    border-right: 1px solid var(--grey);
}

.stars {
	background-repeat: no-repeat;
    background-position: right center;
	background-size: auto 100%;
	height: 16px;
	display: inline-block;
	}

.stars1 {
    background-image: url("../images/star1.png");
    width: 20px;
}
.stars2 {
    background-image: url("../images/star2.png");
    width: 24px;
}
.stars3 {
    background-image: url("../images/star3.png");
    width: 30px;
}

.paymentMethods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 8px;
}

.payment {
    border: 2px solid transparent;
    cursor: pointer;
    background-color: var(--secondary-background-color);
    box-sizing: border-box;
    width: 164px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.allPaymentsAvailable .payment {
    width: 160px;
}

.paypal {
    background-image: url("../images/paypal-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px auto;
}

.stripe {
    background-image: url("../images/stripe_credit_cards.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130px auto;
}

.cash {
    text-align: center;
    font-size: 18px;
    color: var(--maincolor);
    padding: 10px;
    line-height: 1;
}

.selectedPayment {
    border: 2px solid var(--maincolor);
    border-radius: 3px;
}

#payments_wrapper table.dataTable.no-footer {
    border-bottom: 0;
}

.previewScreenshot {
    width: 300px;
    margin: 0 auto;
    position: relative;
}

.previewScreenshot .screenshot {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    position: relative;
    width: 300px;
}

.previewScreenshot .offspring {
    background-image: url("../images/screenshot_litter.jpg");
    height: 220px;
}

.previewScreenshot .scrollPedigree {
    background-image: url("../images/screenshot_scrollpedigree.jpg");
    height: 358px;
}

.previewScreenshot .markMultipleOccurrences {
    background-image: url("../images/screenshot_markoccurrence.jpg");
    height: 250px;
}

.previewScreenshot .breederStatistics {
    background-image: url("../images/screenshot_breederstatistics.jpg");
    height: 250px;
}

.previewScreenshot .notifyOnChange {
    background-image: url("../images/screenshot_watchlist_notification.jpg");
    height: 220px;
}

.previewScreenshot .virtualAnimal {
    background-image: url("../images/screenshot_breedingplan.jpg");
    height: 430px;
}

.previewScreenshot .reverse_pedigree {
    background-image: url("../images/screenshot_reverse_pedigree.jpg");
    height: 280px;
}

.previewScreenshot .matematcher {
    background-image: url("../images/screenshot_matematcher.jpg");
    height: 480px;
}

.imageOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
}

.previewScreenshot .watermark {
    text-transform: uppercase;
    position: absolute;
    text-align: center;
    color: var(--alternate-text-color);
    font-size: 35px;
    font-weight: 600;
    top: 45%;
    left: 0;
    transform: rotate(-45deg);
    width: 100%;
    z-index: 1;
}

.personStatistics {
    background-color: var(--primary-background-color);
}

.repeatBreeding {position: relative;}
.repeatBreedingCount {
    position: absolute;
    left: 0;
    top: 2px;
    border-radius: 50%;
    text-align: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--maincolor);
    color: var(--maincolor);
    background-color: var(--secondary-background-color);
}
.repeatBreedingHeader {
	width:100%;
	text-align:center;
}
.repeatBreedingMatingPartner {
	display:flex;
	justify-content: space-between;
	padding-bottom: 20px;
}
.repeatBreedingSire, .repeatBreedingDam {
	width:47%;
}
.repeatBreedingSire {
	text-align: right;
}

/* slider */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    max-height: 130px;
    min-height: 110px;
    border: 0;
    border-radius: 3px;
}

.welcomeContainer {
    position: relative;
    box-sizing: border-box;
}

.welcomeContainer .sliderContainer {
     background-image: url("../images/TBA_header_marley.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px;
    display: flex;
    justify-content: center;
    height: 350px;
    color: var(--alternate-text-color);
}

.sliderTextContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 60px 20px;
    color: var(--alternate-text-color);
}

.welcomeContainer .rslides img {
    max-height: 210px;
    height: 210px;
    width: auto;
}

.welcomeContainer .caption {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    text-align: center;
    color: var(--alternate-text-color);
    height: auto;
    margin: 0;
    top: auto;
}

.captionTitle {
    font-size: 16px;
    font-weight:600;
}

.sliderContent_tabs {
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 5px;
}


.sliderContent_tabs a {
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    display: inline-block;
}
.sliderContent_here a {
    background-color: var(--maincolor);
}

.caption {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.captionInnerContainer {max-width: calc(100% - 60px); font-size: 12px;}
.captionInnerContainer .button {margin-top: 5px;}
.whiteOverlay {background-color: rgba(255, 255, 255, 0.8); padding: 3px; }
.whiteOverlay h2 {font-size: 20px;}


.sliderContent_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,71,100,0);
    background-size: 35px auto;
    width: 30px;
    height: calc(100% - 32px);
	cursor: pointer;
	z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    top: 0;
    opacity: 0.8;
}

.sliderContent_nav:hover {opacity: 1;}

.sliderContent_nav.prev {
	background-image: url("../images/prev.png");
	left: 0;
}

.sliderContent_nav.next {
	background-image: url("../images/next.png");
	right: 0;
}

/* Slider end */


.sectionMenu .sectionHeader {
    display: inline-block;
    padding: 5px;
    margin: 5px 0;
    text-transform: uppercase;
    font-size: 14px;
}

.sectionMenu .sectionHeader.selected {
    font-weight: 600;
}

/* Align with new Search Design */
.searchIndexPage.openMenu .searchBoxContainer {
    position: relative;
}
/**/

.searchBoxContainer {
    background-color: var(--primary-background-color);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.searchBox {
    background-color: var(--primary-background-color);
}

.searchBoxHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 3;
    width: 100%;
    background-color: var(--primary-background-color);
    padding: 12px 10px;
    position: sticky;
    top: 0;
}

.searchBoxTitle {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
}

.searchLabel, .selectLabel {
    position: absolute;
    left: 5px;
    color: var(--label-search);
    text-overflow: ellipsis;
    width: auto;
    background-color: var(--primary-background-color);
}

.selectLabel {  left: 8px;  }

.searchBox .searchLabel, .searchBox input {
    transition: transform 0.2s ease;
}

.yearTextInput {
    width: 80px;
    margin-left: 5px;
    position: relative;
    display: flex;
    align-items: center;
}

.searchFilters {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

.searchFilterLinks {
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px 0;
}

.searchFilterLinks .link {
    text-decoration: underline;
}

.searchFilterLinks .link:hover {
    text-decoration: none;
}

.smallIconLink {
    font-size: 9px;
    color: var(--primary-link-color);
}

.searchBox .hasFocus .searchLabel {
    padding: 0 5px;
    color: var(--maincolor);
    transform: scale(.8) translatey(-24px);
    z-index: 2;
}

.searchBox input[type="text"] {
    height: 40px;
    background: transparent;
    border: 1px solid var(--input-searchbox-border-color);
    z-index: 1;
    border-radius: 4px;
    padding: 5px;
}

.searchBox input:focus {
    border: 2px solid var(--input-border-focus-color);
    padding: 4px;
}

.searchBox .select {
    margin: 0;
    height: 40px;
    width: 100%;
    background-color: var(--primary-background-color);
    border: 1px solid var(--input-searchbox-border-color);
    border-radius: 4px;
    outline: none;
    position: relative;
    box-sizing: border-box;
}

.searchBox .select select {
    margin: 0;
    -webkit-appearance: none;
    appearance:         none;
    position: absolute;
    border: none;
    width: 100%;
    outline: none !important;
    top: 0;
    left: 0;
    padding: 0 5px;
    background: none;
    height: 40px;
    z-index: 1;
}

/*Remove dotted outline border on Firefox */
.searchBox .select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.searchBox .select .icon-sort {
    position: absolute;
    right: 6px;
    top: 15px;
    z-index: 0;
}

.searchBox .select .selectLabel {
    font-size: 80%;
    top: -8px;
    padding: 0 5px;
    color: var(--maincolor);
}

.searchBox .formRow {
    display: flex;
    padding: 0 0 10px 0;
}

.textMarkerContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.textMarkerContainer .textMarker {margin: 5px;}

/* Person profile display */
.anonymousUser .personName, .personName {
    width: 100%;
}

/* Blog styles */

.blogContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    padding: 20px 10px;
    gap: 20px;
}

.showMore {
	display: flex;
	justify-content: center;
	padding: 14px;
    margin: 5px 0;
}

.blogActionButtonSeparator {
	height: 2px;
	background-color: var(--maincolor);
	width: 100%;
	position: absolute;
	top: 20px;
}

.blogActionButtonContainer {
	position: absolute;
	display: flex;
	justify-content: center;
	top: -20px;
	left: 0;
	width: 100%;
}

a.blogActionButton {
	background-color: var(--primary-link-color);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	transition: background-color 0.4s;
	width: 40px;
	height: 40px;
	cursor: pointer;
	color: var(--alternate-text-color);
	z-index: 1;
}

a.blogActionButton:hover {
	background-color: var(--primary-link-hover-color);
}

.blogTeaserContainer {
	position: relative;
	width: 320px;
	box-sizing: border-box;
	box-shadow: 0 0 3px var(--grey);
	border-radius: 3px;
	background-color: var(--primary-background-color);
	transition: all 0.3s ease;
}

.blogTeaserContainer:hover {
	box-shadow: 0 0 2px var(--grey-variant);
}

.blogTeaserImageContainer {
	position: relative;
}

.blogTeaserHeader {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 50px 5px 5px 5px;
	color: var(--alternate-text-color);
	font-weight: 600;
	box-sizing: border-box;
	font-size: 20px;
	background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.9) );
}

.blogTeaserImageContainer img {
	width: 100%;
	display: block;
	border-radius: 3px;
	height: 200px;
}

.blogTeaserTextContainer {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.blogTeaserText {
	color: var(--primary-text-color);
	box-sizing: border-box;
	padding: 5px;
	font-size: 16px;
	margin-bottom: 30px;
}

.draftSeparator {
	height: 1px;
	width: 100%;
	background-color: var(--alternate-text-color);
	display: block;
}

.blogTeaserTextContainer .blogInfo {
	display: flex;
	justify-content: space-between;
	padding: 0 5px;
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	bottom: 0;
    font-size: 13px;
}

/* Mate Matcher */
.mateMatcherSearchContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

.mateMatcherSearchItem {
    border: 1px solid var(--lightgrey);
    border-radius: 4px;
    background-color: var(--primary-background-color);
    box-sizing: border-box;
    width: 100%;
}

.mateMatcherSearchContainer .searchTitle {
    background-color: var(--lightblue);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--maincolor);
    font-size: 18px;
    font-weight: 400;
}

.mateMatcherSearchContainer .searchTitle > span {
    font-size: 22px;
}

.mateMatcherSearchContainer .searchContent, .mateMatcherSearchContainer .searchContent label  {
    padding: 12px 16px;
    line-height: 30px;
    font-weight: 400;
    margin: 0;
}

.mateMatcherSearchHistory {
    padding: 10px 16px;
}

.mateMatcherSearchHistory .searchHistoryTitle {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mateMatcherArea .searchResults {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#map:empty {display: none;}


.mateMatcherMetaData {
    display: flex;
    margin-bottom: 2px;
}

.mateMatcherMetaData .metaDataIcon {
    padding: 2px 6px 0 0;
}

.metaDataIcon.matingIcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.mateMatcherDialog .noPhoto {
    height: auto;
}

.mateMatcherDialog .noPhoto [class^="icon-"] {
    font-size: 86px;
}

.mateMatcherDialogButton {
    color: var(--primary-button-color);
    font-size: 20px;
    cursor: pointer;
}

.editBaseSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    flex-wrap: wrap;
}

.editBaseSearch > div {
    display: flex;
    flex-wrap: wrap;
}

.filterCategories {
    padding: 6px 0 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filterCategory {
    padding: 3px 8px;
    display: inline-block;
    color: var(--maincolor);
    border: 1px solid var(--maincolor);
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 300ms ease;
}

.filterCategory:hover {
    background-color: var(--lightblue);
}

.toggleFilterCategory, .toggleFilterSubCategory {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: all 300ms ease;
}

.toggleFilterCategory {
    background-color: var(--box-background);
}

.toggleFilterCategory .icon-arrow-single {
    font-weight: 800;
    color: var(--maincolor);
}

.toggleFilterCategory.open, .toggleFilterCategory:hover {
    background-color: var(--lightblue);
}

.toggleFilterCategory.noResults, .toggleFilterSubCategory.noResults, .noResults label,
.toggleFilterCategory.noResults .icon-arrow-single
{
    color: var(--darkgrey);
    cursor: initial;
    font-weight: 300;
}

.toggleFilterCategory.noResults:hover {
    background-color: var(--box-background);
}

.toggleFilterSubCategory {
    font-weight: normal;
    padding: 12px;
}


.hiddenResult {
    position: relative;
}

.hiddenResult .itemBox {
    opacity: 0.2;
}

.showHiddenAnimal {
    display: none;
}

.hiddenResult:hover .showHiddenAnimal {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 40px;
    cursor: pointer;
    z-index: 1;
    color: var(--maincolor);
}

.hiddenResult:hover .showHiddenAnimal span {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 100%;
    padding: 10px;
}


.mateMatcherDialog .standardDialog .profilePhotoContainer {
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    box-sizing: border-box;
}

.galleryContainer {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* Detail Dialog */

.mateMatcherDialog .standardDialog {
    max-width: 1024px;
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    display: block;
}

.dialogContainerActive.mateMatcherDialog {
    overflow-y: auto;
    background-color: var(--primary-background-color);
}



.mateMatcherDialog .standardDialog .dialogClose {
    position: relative;
    color: var(--primary-link-color);
    font-size: 14px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.mateMatcherDialog .standardDialog .dialogClose > span { /* the icon */
    padding: 20px;
}


.mateMatcherDialog .standardDialog .profilePhotoContainer img {
    cursor: pointer;
    object-fit: cover;
    width: 100%;
    max-height: 400px;
    transition: transform 1s ease;
    transform-origin: center center;
}

.mateMatcherDialog .standardDialog .profilePhotoContainer:hover img {
    transform: scale(1.1);
}
.mateMatcherDialog .standardDialog .mateMatcherProfileDetails {
    width: 100%;
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
}

.mateMatcherDialog .standardDialog .mateMatcherProfileDetails .pictureProfileButtons {
    position: relative;
    font-size: 16px;
    top: 0;
    right: 0;
}

.mateMatcherDialog .standardDialog .mateMatcherProfileDetails .mateMatcherMetaDataContainer {
    gap: 50px;
    padding: 15px 0;
    border-bottom: 1px solid var(--lightgrey);
}

.mateMatcherDialog .standardDialog .mateMatcherDialogDetail {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    width: 100%;
}

.mateMatcherDialog .standardDialog .mateMatcherDialogDetail:first-of-type {
    padding-top: 15px;
}

.mateMatcherDialog .standardDialog .mateMatcherDialogDetail .textRow {
    width: calc((100% / 2) - 10px);
    align-items: flex-start;
}

.detailNavigation {
    position: absolute;
    display: flex;
    cursor: pointer;
    align-self: center;
}

.detailNavigation.prev {left: 20px;}
.detailNavigation.next {right: 20px;}

.detailNavigation span {
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--primary-button-color);
    border-radius: 100%;
    font-size: 22px;
    padding: 8px;
    z-index: 1080;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feragenReferrer {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-text-color);
    margin: 20px 0;
}

.feragenReferrer:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.splitSection.feragenLanding {
    font-size: 18px;
    padding: 0;
}

.feragenLanding .splitSectionLeft {
    padding: 0 20px;
    hyphens: initial;
}

.feragenLanding h1 {
    font-family: 'Montserrat', sans-serif;
    color: var(--white);
    position: absolute;
    width: 100%;
    padding: 20px;
    top: 0;
    left: 0;
    text-align: center;
    box-sizing: border-box;
}

.feragenButton {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.feragenButton a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--standardbutton-text-color);
    padding: 18px;
    font-size: 18px;
    border-radius: 4px;
    white-space: normal;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.feragenButton a:hover {
    box-shadow: none;
}

.feragenImageContainer {
    background-image: url("../images/feragen_background.jpeg");
    position: relative;
    height: 400px;
    background-position: center;
}

.feragenResultOverview {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 400px;
}