/*Remove tap highlight on iOS/ANdroid */
* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-overflow-scrolling: touch;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	min-height: 100vh;
}

body {
	background: #ffffff;
	color: #333333;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
    font-family: 'Open Sans', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

p, blockquote, li {
	font-size: 18px;
}

input, select, textarea {
	outline: none;
	width: 100%;
}

input[type="checkbox"], input[type="radio"] {
	width: auto;
}

input[type="file"] {
	border: none;
}

input, textarea {
	border: 1px solid #cccccc;
	font-size: 16px;
	padding: 3px;
}

.multilineText { white-space: pre-wrap; }

input.error {border: 2px solid #ff0000;}

#container {
	min-width: 320px;
	min-height: 100vh;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.mainContent {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-flex-grow: 1;
	flex-grow: 1;

}

a:link, a:visited, a:active, .link {
	text-decoration: none;
    color: #2779AA;
    cursor: pointer;
    display: inline;
	transition: color 0.4s ease;
	-moz-transition: color 0.4s ease;
	-webkit-transition: color 0.4s ease;
}
a:hover, .link:hover {
    color: #3BAAE3;
}

img { max-width: 100%; }
a img {border: 0;}

.bold, strong {font-weight: 600;}
.textCenter {text-align: center;}
.info { font-size: 14px; line-height: normal; }

h1, h2, h3, h4 {
	margin: 0;
	text-align: center;
	font-weight: 600;
	line-height: normal;
}

h1 {
	padding: 10px 0 10px;
	font-weight: 800;
	font-size: 28px;
}

h2 {
	font-size: 24px;
	font-weight: 300;
}

h3, .blogContent h2 {
	font-size: 24px;
	font-weight: 400;
}

.blogContent h3 {
	font-size: 22px;
}
h4 {font-size: 20px;}

h5 {
	font-weight: 600;
	font-size: 18px;
	margin: 20px 0 0 0;
}

blockquote, .quote {
	font-style: italic;
	clear: both;
}

.blogContent blockquote {
	padding: 5px 5px 5px 17px;
	margin: 20px 20px 20px 0;
	border-left: 3px solid #333333;
}

.inlineBlock {
	display: inline-block;
}

.flexBox {
	display: -webkit-flex;
	display: flex;
	gap: 5px;
}

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

/* Header */
header {
	-webkit-box-shadow: 0 0 5px 0 #000000;
	box-shadow:0 0 5px 0 #000000;
}

.logo {
	background-image: url('../images/TBA_logo_white.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 175px;
	height: 50px;
	background-position: center;
}

nav {
	padding: 10px;
	position: relative;
	text-align: right;
	height: 140px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	z-index: 2;
	margin: 0 auto;
}

.navItem {
	margin: 0 10px;
}

.navItem, .navItem a {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 2px;
	cursor: pointer;
	color: #3BAAE3;
	transition: color 0.4s ease;
	-moz-transition: color 0.4s ease;
	-webkit-transition: color 0.4s ease;
}

.navItem:hover, .navItem a:hover {
	color: #ffffff;
}
.bgImg {
	background-image: url("../images/TBA_header_marley_small.png");
	background-size: cover;
    background-repeat: no-repeat;
	top: -200px;
	height: 340px;
	bottom: 0;
    position: absolute;
    width: 100%;
	z-index: 1;
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Landing page */

.title {
	position: relative;
	padding: 10px 10px 30px;
	width: 100%;
	color: #ffffff;
	z-index: 1;
}

.title > * {
	text-align: right;
}

.trigger {
	position: fixed;
	bottom: 5%;
	right: 5%;
	z-index: 10;
	padding: 10px;
	font-size: 1.8em;
	cursor: pointer;
	color: #ffffff;
}

.introEffect .trigger {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.introEffect.modify .trigger {
	opacity: 0;
	pointer-events: none;
}

.introEffect .title
{
	-webkit-transition: color 1s ease;
	transition: color 1s ease;
}

.introEffect.modify .title {
	color: #333333;
}

.introEffect .logo,  .introEffect .navItem {
	opacity:0;
	-webkit-transition: opacity 0.8s ease;
	transition: opacity 0.8s ease;
}

.introEffect.modify .logo, .introEffect.modify .navItem {
	opacity:1;
}

.introEffect .bgImg {
	top: 0;
	height: 100vh;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.introEffect.modify .bgImg {
	top: -200px;
	height: 340px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.introEffect.modify header {
	height: 140px;
}

/* Search box */
.searchBox {
	background-color: #2779aa;
}

.searchBox hr {
	border: none;
	height: 2px;
	background-color: #ffffff;
	margin-top: 0;
	width: 100%;
}

.searchIcon {
	font-size: 30px;
	color: #ffffff;
	position: absolute;
	right: 20px;
	top: 20px;
	margin: 5px;
}

.searchTextbox {
	color: #ffffff;
	background-color: #2779aa;
	font-size: 25px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	border: none;
	width: calc(100% - 34px);
	outline: none;
}

.searchTextbox::placeholder {
	color: #f2f5f7;
}

.generalInfo {
	color: #ffffff;
	background-color: #3baae3;
}

.breeds, .news  {
	background-color: #f2f5f7;
}

.news {
	color: #333333;
}

.breeds h3 {
	color: #2779aa;
}

.contact {
	color: #ffffff;
	background-color: #2779aa;
}

.breedContainer {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	gap: 14px;
}

a.breedSummary {
	color: #333333;
	padding: 5px;
	background-color: #FFFFFF;
	border-bottom: 2px solid #D7EBF9;
	width: 100%;
	border-radius: 3px;
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

a.breedSummary:hover, a.breedSummary.hover {
	background-color: #D7EBF9;
	border-bottom: 2px solid transparent;
}

/* flip the pane when hovered */
a.breedSummary:hover .flipper, a.breedSummary.hover .flipper {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flipContainer, .flipperFront, .flipperBack {
	width: 100px;
	height: 100px;
}

.flipContainer {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.flipper {
	-webkit-transition: 0.5s linear;
	transition: 0.5s linear;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.flipperFront, .flipperBack {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.flipperFront {
	z-index: 2;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flipperBack {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.breedLogoIcon {
    width: 100px;
	height: 100px;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	-webkit-justify-content: center;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	font-size: 60px;
	background-color: #FFFFFF;
	color: #2779aa;
}

.breedInfo {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-direction: column;
	flex-direction: column;
	width: calc(100% - 110px);
}

.breedInfo [class^="icon-"], [class*=" icon-"] {
	opacity: 0.8;
	vertical-align: text-top;
	font-size: 18px;
}

.breedInfoHeader {
	font-size: 12px;
	margin-bottom: 10px;
	font-weight: 300;
}
.breedInfoHeader .breedTitle {
	font-size: 20px;
	font-weight: 600;
	color: #2779aa;
	line-height: 120%;
}

.breedInfoContent {
	font-size: 14px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}

.formRow {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-bottom: 5px;
	clear: both;
	width: 100%;
}
.formField {
	width: 59%;
}

.teaserImage .formField img {
	max-height: 200px;
	width: 320px;
}

.tbaForm label {
	width: 39%;
	cursor: pointer;
}

.error {font-size: 14px;}

textarea {resize: vertical;}
.submitButton, .standardButton, a.standardButton {
	background-color: #3BAAE3;
	color: #ffffff;
	border: none;
	font-weight: 600;
	padding: 5px;
	cursor: pointer;
	text-align: center;
	display: inline-block;
	-webkit-transition: background-color 0.4s;
	transition: background-color 0.4s;
}

.submitButton:hover, .standardButton:hover, a.standardButton:hover {
	background-color: #58B6E7;
	color: #ffffff;
}

.tbaForm .submitButton {
	width: 100%;
}

.buttonPane {
	margin-top: 10px;
}

/* Landing Page End */

.contentContainer {
	position: relative;
	background-color: #f2f5f7;
	color: #333333;
	flex-grow: 1;
	border-bottom: 2px solid #2779aa;
}

.contentContainer.blog, .blogContent {
	background-color: #ffffff;
}

.singleContent {
	padding: 20px;
	margin: 0 auto;
	max-width: 768px;
	width: 100%;
	position: relative;
}

.wideContent {
	padding: 20px;
	margin: 0 auto;
	max-width: 1280px;
	width: 100%;
	position: relative;
}

.blogIndex {
	padding: 20px;
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
	position: relative;
}


.columnGrid {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 10px;
}

.columnGrid > div {
	width: 100%;
}

footer {
    background-color: #FFFFFF;
    padding: 20px 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	text-transform: uppercase;
	letter-spacing: 2px;
	width: 100%;
	margin: 0 auto;
}

footer a {
	margin-right: 20px;
}

footer .copyright {
	text-transform: none;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
}

footer .facebook {
	font-size: 32px;
}

/* Account menu panel */

.accountMenuWrapper ul, .accountMenuWrapper li {
	list-style: none inside;
	padding: 0;
	margin: 0;
	-webkit-transition: background-color 0.4s;
	transition: background-color 0.4s;
}

.accountMenuWrapper ul {
	padding: 5px 2px;
}

.accountMenuWrapper li a {
	padding: 6px;
	display: block;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	text-transform: initial;
	letter-spacing: initial;
}

.accountMenuWrapper li:hover {
	background-color: #444444;
}

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

/* End Account menu panel */

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

.score0 {color: #FF3B30;}
.score1 {color: #FF7000;}
.score2 {color: #FFA521;}
.score3 {color: #86a556;}
.score4 {color: #64AB4B;}

.passwordScoreIndicator {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100%;
	margin-top: 2px;
	height: 5px;
}
.passwordScoreIndicator span {width: 19%; background-color: #CCCCCC}
.score0 .passwordScoreIndicator span:first-child {background-color: #FF3B30;}
.score1 .passwordScoreIndicator span:nth-child(-n+2) {background-color: #FF7000;}
.score2 .passwordScoreIndicator span:nth-child(-n+3) {background-color: #FFA521;}
.score3 .passwordScoreIndicator span:nth-child(-n+4) {background-color: #86a556;}
.score4 .passwordScoreIndicator span:nth-child(-n+5) {background-color: #64AB4B;}

.togglePasswordVisibility {
    position: absolute;
    padding: 5px 10px;
    top: 0;
    right: 0;
	font-size: 14px;
}

/* Cookie settings */
#cookie_info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0,0,0,0.9);
    padding: 25px;
    color: #ffffff;
    font-size: 16px;
}

.cookieContainer {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	max-width: 768px;
	margin: 0 auto;
}

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

.cookieSettingsButtons {
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
    justify-content: space-between;
    width: 220px;
	margin: 0 auto;
}

.cookieDialog .cookieSettingsButtons {
	width: 160px;
}

.dialogContainerActive {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 115;
	background: rgba(0,0,0,0.7);
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}


#cookie_settings_dialog h3 {
    margin-top: 20px;
    margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

#cookie_settings_dialog table {
    text-align: left;
	width: 100%;
}

#cookie_settings_dialog label.switch-light {
    font-size: 16px;
	cursor: pointer;
}


/* Issues  */

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

.tbaTable .dataTables_wrapper {
	padding: 10px;
	font-size: 16px;
}

.tbaTable .dataTables_wrapper select {
	width: auto;
}

#issues .icon-user {
	font-size: 12px;
}

.icon-user.hasAdmin {
	opacity: 0.3;
}

.issueStatus, .issueMessageStatus {font-weight: 600;}
.statusClosed {color: #4F8A10;}
.statusOpen {color: #FF7000;}
.statusReopened {color: #FF3B30;}
.statusConfirmed {color: #1F42FC;}

.unansweredIssue::before {
    background-color: #3baae3;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #fff;
    content: "new";
    font-size: 10px;
    font-weight: 600;
    margin-right: 2px;
    padding: 3px;
    vertical-align: middle;
}

table.dataTable thead th {
    position: relative;
    background-image: none !important;
	text-align: left;
}

.tbaTable .dataTables_wrapper table.dataTable thead th, .tbaTable .dataTables_wrapper table.dataTable thead td,
.tbaTable .dataTables_wrapper table.dataTable tbody th, .tbaTable .dataTables_wrapper table.dataTable tbody td {
	padding: 8px;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 8px;
    display: block;
    font-family: 'portal';
	font-size: 0.8em;
}

table.dataTable thead th.sorting:after {
    content: "\e806";
    color: #ddd;
}

table.dataTable thead th.sorting_asc:after {
    content: "\e805";
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
table.dataTable thead th.sorting_desc:after {
    content: "\e805";
}

.tbaTable .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.tbaTable .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: #ffffff;
}

.tbaTable .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #3BAAE3;
	border-color: #3BAAE3;
}

.tbaTable .dataTables_wrapper .dataTables_length {
	float: right;
}

.tbaTable .dataTables_wrapper .dataTables_length select {
	padding: 0;
}

.closedIssue, .closedIssue a {color: #aaaaaa;}

.historyEntry, .textRow {
	display: -webkit-flex;
	display: flex;
	 align-items: flex-start;
    -webkit-align-items: flex-start;
	padding: 5px 0;
	font-size: 14px;
}

.textRow {
	padding: 0 0 5px 0;
}

.historyEntry:not(:last-child), .paymentEntry:not(:last-child) {
	border-bottom: 1px solid #cccccc;
}

.historyEntry .textDescription, .textLabel {
    display: flex;
    display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}
.textLabel {
	 -webkit-flex-wrap: wrap;
     flex-wrap: wrap;

     margin-right: 30px;
	 width: 34%;
	font-weight: 600;
 }

.textDescription {
	width: 64%;
}

/* Breed Request */
.breedRequestStatus {
	font-weight: 600;
	cursor: pointer;
}

.breedRequestStatus:hover, .breedRequestStatusPopup .statusSelector:not(.statusActive):hover {
	opacity: 0.8;
}
.breedRequestStatus1, .breedRequestStatusPopup .statusSelector.statusActive.breedRequestStatus1  {color: #2779AA;}
.breedRequestStatus2, .breedRequestStatusPopup .statusSelector.statusActive.breedRequestStatus2 {color: #4F8A10;}
.breedRequestStatus3, .breedRequestStatusPopup .statusSelector.statusActive.breedRequestStatus3 {color: #FF3B30;}

.breedRequestStatusPopup .statusSelector {
	display: inline-block;
	margin: 5px;
	cursor: pointer;
	color: #ffffff;
	padding: 2px 4px;
}

.breedRequestStatusPopup .statusSelector.statusActive {
	cursor: initial;
	border-radius: 16px;
	background-color: #ffffff;
	color: #333333;
}

/* Blog styles */

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

.showMore {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 20px;
}

.showMore .standardButton {
	width: 200px;
	text-align: center;
}

.blogActionButtonSeparator {
	height: 2px;
	background-color: #2779AA;
	width: 100%;
	position: absolute;
	top: 20px;
}

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

a.blogActionButton {
	background-color: #3BAAE3;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	border-radius: 100%;
	-webkit-transition: background-color 0.4s;
	transition: background-color 0.4s;
	width: 40px;
	height: 40px;
	cursor: pointer;
	color: #ffffff;
	z-index: 1;
	text-decoration: none;
}

a.blogActionButton:hover {
	background-color: #58B6E7;
}

.blogTeaserContainer {
	position: relative;
	width: 320px;
	/*box-shadow:0 4px 12px rgba(2,20,31,0.25);*/
	-webkit-box-shadow: 0 4px 24px -16px rgba(0,0,0,0.75);;
	box-shadow: 0 4px 24px -16px rgba(0,0,0,0.75);
	border-radius: 3px;
	background-color: #ffffff;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.blogTeaserContainer:hover {
	-webkit-box-shadow: 0 24px 24px -40px rgba(0,0,0,0.75);
	box-shadow: 0 24px 24px -40px rgba(0,0,0,0.75);
}

.blogTeaserImageContainer {
	position: relative;
}

.blogTeaserHeader {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 50px 5px 5px 5px;
	color: #ffffff;
	font-weight: 600;
	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: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.blogTeaserText {
	color: #333333;
	padding: 5px;
	font-size: 16px;
	margin-bottom: 30px;
}

.draftSeparator {
	height: 1px;
	width: 100%;
	background-color: #58B6E7;
	display: block;
	margin: 10px 0;
}

.blogMetaInfo {
	color: #333333;
	font-size: 13px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 0 5px;
	position: absolute;
	width: 100%;
	bottom: 0;
}

.blogMetaDate {
	display: -webkit-flex;
	display: flex;
	-webkit-align-self: flex-end;
	align-self: flex-end;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin-right: 5px;
}

.blogCategoryName {
	font-weight: 600;
	color: #3baae3;
}

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

.tbaForm .ql-toolbar.ql-snow {
	background-color: #ffffff;
}

.blogViewNav {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 20px 0;
	clear: both;
}

.blogViewNav a {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.blogInfo {
	display: inline-block;
	padding: 10px;
	color: #ffffff;
	font-weight: 600;
	background-color: #f45e5e;
	position: absolute;
	left: 10px;
	top: 164px;
}

.blogInfo.published {
	background-color: #57cb85;
}
.switch-material.switch-light.unpublish input:checked ~ span a {
	background: #f45e5e;
}

.switch-material.switch-light.unpublish input:checked ~ span {
	background: rgba(294,94,94,0.3);
}

/* Quill editor */
#editor_container {
	height: 710px;
}

#editor_container .ql-snow .ql-tooltip {
	background-color: #333333;
	color: #ffffff;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
	padding: 5px 9px;
	border-radius: 4px;
	font-size: 14px;
}

#editor_container .ql-snow .ql-tooltip a {
	color: #3baae3;
}

#editor_container .ql-snow .ql-tooltip a:hover {
	color: #ffffff;
}

#editor blockquote {
	padding-left: 17px;
	border-left: 3px solid #333333;
	margin: 20px 0;
}

.popupIcon {
	fill: #ffffff;
	width: 28px;
	height: 24px;
	cursor: pointer;
	padding: 3px 5px;
}

.selected .popupIcon {
	fill: #3baae3;
}

.blogContent h2, .blogContent h3, .blogContent p,
#editor .ql-editor h2, #editor .ql-editor h3, #editor .ql-editor p {
	margin: 0 0 20px 0;
}

.blogContent ol, .blogContent ul {
	margin: 0 0 20px -20px;
	position: relative;
	left: 20px;
}

#editor .ql-editor ol, #editor .ql-editor ul {
	margin: -20px 0 20px 0;
	padding: 0;
	overflow: hidden;
}

#editor .ql-editor a {
	text-decoration: none;
	color: #2779AA;
}

#editor .ql-editor a:hover {
	color: #3baae3;
}

#editor .ql-editor h2 {
	font-size: 32px;
	font-weight: 400;
}
#editor .ql-editor h3 { font-size: 24px;}

/* Editor end */

.textMarker {
    border: 1px solid #2779AA;
    color: #2779AA;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    padding: 2px 12px;
    cursor: pointer;
	font-size: 16px;
	margin-bottom: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.textMarker.selected {
    background-color: #3baae3;
	color: #ffffff;
	border: 1px solid #3baae3;
}

img.displayLeft {
	clear: both;
	margin: 5px 20px 20px 0;
}

img.displayBlock {
	display: block;
	margin: 0 auto;
	clear: both;
	margin-bottom: 20px;
}

.blogContent img.imageShadow {
	-webkit-box-shadow: 0 0 8px #CCCCCC;
	-moz-box-shadow: 0 0 8px #CCCCCC;
	box-shadow: 0 0 8px #CCCCCC;
}

/* Draft 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{
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
	color:#fff;
	-webkit-font-smoothing:antialiased;
	display:block;
	float:right;
	position:relative;
	left: -7px;
	top:16px;
	width:65px;
}

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

.ribbon .banner:before{
	-webkit-transform:skewY(-45deg) translate(50%, 17px);
	-moz-transform:skewY(-45deg) translate(50%, 17px);
	-ms-transform:skewY(-45deg) translate(50%, 17px);
	-o-transform:skewY(-45deg) translate(50%, 17px);
	-webkit-transform-origin:100% center;
	-moz-transform-origin:100% center;
	-ms-transform-origin:100% center;
	-o-transform-origin:100% center;
	top: -5px;
	left: -30px;
}
.ribbon .banner:after{
	-webkit-transform:translate(100%, -100%) skewY(45deg) translateX(-58%);
	-moz-transform:translate(100%, -100%) skewY(45deg) translateX(-58%);
	-ms-transform:translate(100%, -100%) skewY(45deg) translateX(-58%);
	-o-transform:translate(100%, -100%) skewY(45deg) translateX(-58%);
	-webkit-transform-origin:0 center;-moz-transform-origin:0 center;
	-ms-transform-origin:0 center;
	-o-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;
	color: #ffffff;
}

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

.ribbon .bannerText:after {
	transform: translateX(15%) skewX(45deg);
	-webkit-transform: translateX(15%) skewX(45deg);
	-moz-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: #f45e5e;
}

/* End ribbon */

/** Advertising **/

.adContainer:not(:empty) {
	margin: 10px auto;
	padding: 30px 0;
    background-color: #E8F0F6;
	text-decoration: none;
	box-sizing: content-box;
}

.verticalBanner {
	width: 160px;
}

.verticalBanner .adContainer {
	position: -webkit-sticky;
	position: sticky;
	right: 0;
	top: 20px;
}

.adContainer:not(:empty):after {
    text-transform: uppercase;
    color: #df8e73;
    display: flex;
    justify-content: center;
    font-weight: 600;
	content:'Advertisement';
}


/* Statistics */
.selector {
	font-size: 14px;
	text-align: center;
}

/* Dialog styles */

.standardDialog {
    background-color: #ffffff;
    z-index: 111;
	max-width: 700px;
    min-width: 320px;
    height: auto;
    position: fixed;
	font-size: 14px;
	max-height: 100%;
	overflow: auto;
}

.standardDialog .dialogContent {
  	height: calc(100% - 180px);
  	padding: 10px;
  	overflow-y: auto;
	overflow-x: hidden;
}

.standardDialog .titleArea {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  background-color: #2779aa;
  padding: 10px;
}

.standardDialog.errorDialog .titleArea {
    background-color: #ffbdbd;
    color: #333333;
}

.standardDialog.errorDialog .buttonPane {
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-end;
    justify-content: flex-end;
	padding: 10px;
}

.standardDialog .dialogTitle {
  width: calc(100% - 35px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standardDialog .dialogClose {
  cursor: pointer;
  padding: 10px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

.standardDialog .buttonPane  {
	margin: 10px auto;
	text-align: center;
}

.backgroundOverlay {
    position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background: rgba(0,0,0,0.7);
}
.hideContent {display: none;}

.loadingIndicator {
	background-color: rgba(0,0,0,0.8);
    background-image: url("../images/ajaxload.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px auto;
    left: 0;
    position: absolute;
    width: 100%;
	z-index: 2;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.fullPageContent.loadingIndicator {
	top:0;
	height: 100%;
	z-index: 1000;
	position: fixed;
}

.loadingIndicator.transparentBackground {
	background-color: transparent;
}

.mainContent .loadingIndicator {
	top: 0;
	height: 50px;
	position: relative;
	margin: 5px 0;
}

table.dataTable.paymentTable td:not(:first-child),
table.dataTable.paymentTable th:not(:first-child)
{
	text-align: right;
}

table.dataTable.paymentTable:first-of-type tr:not(:first-child) td:first-child {
	padding-left: 10px;
}

/**********************************************************************************/


/* Media Queries */

@media screen and (min-width: 640px) {
	h1 {font-size: 38px;}
	h2, h3, .blogContent h2 {font-size: 32px;}
	.blogContent h3 {font-size: 24px;}
	p, blockquote, .quote, li {  font-size: 20px;}
	.searchIcon {background-size: 80%;}
	nav {padding: 20px 10px;}
	.navItem {display: inline-block; font-size: 24px;}
	.blogViewNav a {max-width: 250px;}
}

@media screen and (min-width: 768px) {
	.bgImg { background-image: url("../images/TBA_header_marley.png"); }
	.columnGrid > div {width: 49%;}
	a.breedSummary { width: 49%; }
	img.displayLeft {float: left;}
}

@media screen and (max-width: 979px) {
	.verticalBanner {display: none;}
}

@media screen and (min-width: 980px) {
	h1 {font-size: 50px;}
	.blogContent {
		display: -webkit-flex;
		display: flex;
	}
}

@media screen and (min-width: 1124px) {
	.bgImg, .introEffect.modify .bgImg {
		top: -350px;
		height: 490px;
	}
	.blogContent img.displayLeft {
		margin-left: -150px;
	}
	a.breedSummary {width: 32%;}
	.blogContent {
		padding-left: calc((100% - 768px)/2);
	}
	.blogContent blockquote {
		margin: 20px 20px 20px -20px;
	}
}

@media screen and (min-width: 1440px) {
	.verticalBanner {width: 300px;}
}