/* cmsms stylesheet: interfaces_wide modified: 07/16/25 12:51:52 */
.interfaceButton {
display: block !important;
margin-bottom: 20px;
flex:1;
text-align: center;
}

#mobileContextMenu {
    display: none;
}

#contextMenu {
position: fixed;
left: 0px;
z-index: 999;
font-size: 90%;
background-color: #462f9d;
        display: flex;
        gap: 16px;
        flex-direction: column;
        padding: 40px 0px;
        width: 60px;
        right: 0px;
        top: 210px;
        box-sizing: border-box;
        -webkit-border-top-right-radius: 40px;
        -webkit-border-bottom-right-radius: 40px;
        -moz-border-radius-topright: 40px;
        -moz-border-radius-bottomright: 40px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
}

#contextMenu ul {
margin: 0px;
padding: 0px;
display: flex
;
        gap: 16px;
        flex-direction: column;
}

#contextMenu ul li {
margin: 0px;
padding: 0px;
list-style: none;
}

#contextMenu ul li a:link, #contextMenu ul li a:visited {
        display: block;
        box-sizing: border-box;
        background-color: #fc611f;
        width: 34px;
        height: 34px;
        border: 1px solid #fc611f;
        margin-left: 15px;
        line-height: 100%;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
        position: relative;
        transition: top 0.2s, background-color 0.4s, width 0.4s, height 0.4s;
        top: 0px;
        overflow: hidden;
    }
    
#contextMenu ul li a img {
    position: relative;
    top: 1px;
    left: 1px;
    transition: top 0.4s, left 0.4s;
}

#contextMenu ul li a:hover {
	top: -5px;
	background-color: #462f9d;
	border: 1px solid #fc611f;
	width: 200px;
	height: 39px;
	color: #ffffff;
}

#contextMenu ul li a:hover img {
    top: 3px;
    left: 3px;
}

#contextMenu ul li a span{
        padding: 11px;
	    display: inline-block;
	float: right;
}

#shelterSummary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        flex: 1;
}

.shelterItem a:link, .shelterItem a:visited {
color: #ffffff;
}

.shelterItem a:hover {
    color: #fc611f;
}

#petControlBar h5 {
	color: #462f9d;
	font-size: 120%;
	margin: 10px 0px 0px 0px;
}

#petControlBarRight{
  align-items: center;     /* Aligns items vertically in the middle */
  justify-content: flex-end; /* Pushes items to the right horizontally */
  gap: 10px;
}

.editInfoBank #editInfoBankleft, .editInfoBank #editInfoBankRight  {
	flex:1;
}

.editInfoBank .infoBankEntry {
	padding-left: 0px;

}

.editInfoBank .infoBankEntry strong {
	width: 200px;
}

#movedPhotoGallery {
    position: absolute; 
}

.upload-box {
    border: 2px dashed #aaa;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.hidden-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
top: 0px;
left: 0px;
}

.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-left-color: #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.editGallery {display:  flex; gap: 20px;}

.editImg {flex: 0 0 calc((100% - (5 * 20px)) / 6); /* Adjust for gap */}

.editImgImageContainer {
    width:  100%;
    height: 130px;
    overflow: hidden;
    position:  relative;
}

.editImgImageContainer .portraitImage {
	width: 100%;
	height:auto;
}

.editImgImageContainer .landscapeImage {height: 100%;width: auto;position:  absolute;}

.editImgControls {
font-size: 80%;
}

a.deleteImage, a.heroImage {
        display: block;
        box-sizing: border-box;
        height: 30px;
        line-height: 100%;
        padding: 8px;
        -webkit-border-radius: 23px;
        -moz-border-radius: 23px;
        border-radius: 23px;
        text-decoration: none;
        text-align: center;
        transition: background-color 0.4s, color 0.4s, top 0.4s;
        margin-top: 5px;
}

.statusSwatch {

    color: black; 
    text-align: center; 
    transform: rotate(-45deg); 
    position: absolute; 
    top: 31px; 
    left: -50px; 
    transform-origin: center;
    white-space: nowrap; 
    display: inline-block; 
    z-index: 9999;
    width: 200px;
    height: 34px;
    box-sizing: border-box;
}

.draftStatus {
        background-color: #a7a2a9;
        color: #462f9d;
}

.liveStatus {
        background-color: #06D6A0;
        color: #462e9c;
}

.inAdoptionStatus {
        background-color: #3e8f00;
        color: #ffffff;
}

.archiveStatus {
        background-color: #462e9c;
        color: #a49bc5;
}

/* applications stuff */
/* cmsms stylesheet: default_wide modified: 07/16/25 12:51:52 */
body {
	font-family: darkmode-off-cc, sans-serif;
	font-size: 110%;
	font-weight: 400;
	line-height: 180%;
	color: #000000;
	margin: 0px;
	padding: 0px;
}

h1 {
	font-family: khula, sans-serif;
	font-weight: 800;
	font-size: 200%;
	line-height: 120%;
	margin: 0px 0px 10px 0px;
}

h2 {
	font-family: khula, sans-serif;
	font-weight: 800;
	font-size: 160%;
	line-height: 120%;
	margin: 0px 0px 10px 0px;
	color: #462f9d;
}

h3 {
	font-family: khula, sans-serif;
	font-weight: 800;
	font-size: 140%;
	line-height: 120%;
	margin: 0px 0px 10px 0px;
}

h4 {
	font-family: khula, sans-serif;
	font-weight: 800;
}

h5 {
	font-family: khula, sans-serif;
	font-weight: 800;
	font-size: 100%;
	line-height: 120%;
	margin: 0px 0px 10px 0px;
}

h6 {
	font-family: khula, sans-serif;
	font-weight: 800;
	font-size: 100%;
	line-height: 120%;
	margin: 0px 0px 10px 0px;
}

p {
	margin: 0px 0px 19px 0px;
}

#mainHeader {
	height: 173px;
}

#actionButtons {
	position: absolute;
	top: 0px;
	right: 0px;
	display: flex;
	gap: 30px;
}

#logo {
	position: absolute;
	top: 33px;
	left: 0px;
}

#mobileSocials {
display: none;
}

#menuShow, #mobileExtras {
	display: none;
}

.hamburgerMenu .bar {}

 

#actualMenu {
	position: absolute;
	right: 0px;
	top: 90px;
}

#actualMenu ul {
	margin: 0px;
	padding: 0px;
	display: flex;
	gap: 30px;
}

#actualMenu ul li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#actualMenu ul li a:link,
#actualMenu ul li a:visited {
	display: inline-block;
	box-sizing: border-box;
	height: 46px;
	font-size: 110%;
	line-height: 100%;
	padding: 12px 30px 0px 30px;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	text-decoration: none;
	background-color: #462f9d;
	color: #ffffff;
	transition: background-color 0.4s, color 0.4s, top 0.4s;
position: relative;
top: 0px;
}

#actualMenu ul li a:hover {
	background-color: #fc611f;
	color: #ffffff;
top: -5px;
}

#heroSection {
	height: 450px;
}

#heroImage {
	position: absolute;
	top: 0px;
	;
	left: 0px;
	right: 0px;
	height: 450px;
	overflow: hidden;
	text-align: right;
	line-height: 0px;
}

#heroImage img {
    position: absolute;
	top: 0px;
	right: 0px;
}

#heroContent {
	margin-top: 60px;
	height: 360px;
	position: relative;
}

#heroContent h2 {
	font-size: 230%;
	line-height: 120%;
	margin: 0px 0px 10px 0px;
}

#heroContent h2 span {
	color: #fb9f78;
}

#heroContent p {
	font-size: 110%;
}

#heroContent .blockButton {
	position: absolute;
	bottom: 30px;
	right: 30px;
}

#socialsContainer {}

#socials {
	background-color: #462f9d;
	display: flex;
	gap: 16px;
	flex-direction: column;
	padding: 40px 0px;
	width: 60px;
	position: absolute;
	right: 0px;
	top: 40px;
	box-sizing: border-box;
	-webkit-border-top-left-radius: 40px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-topleft: 40px;
	-moz-border-radius-bottomleft: 40px;
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
}

#socials a:link,
#socials a:visited {
	background-color: #fc611f;
	width: 34px;
	height: 34px;
	border: 1px solid #fc611f;
	margin-left: 15px;
	line-height: 0px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	position: relative;
	transition: top 0.2s, background-color 0.4s;
	top: 0px;
}

#socials a:hover {
	top: -5px;
	background-color: #462f9d;
	border: 1px solid #fc611f;
}

#socials a img {
	position: relative;
	top: -1px;
	left: -1px;
}

.textBox h1 {
	color: #fc611f;
}

#searchForm {
	line-height: 0px;
}

#searchForm h3 {}

#petCategories a:link,
#petCategories a:visited {
	text-align: center;
	display: block;
	margin-bottom: 40px;
	text-decoration: none;
}

#petCategories .categoryImage {
	overflow: hidden;
	display: block;
	width: 200px;
	height: 200px;
	margin: 0px auto;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	box-sizing: boredr-box;
	border: 1px solid #ffffff;
	transition: border-color 0.4s;
	position: relative;
}

#petCategories .categoryImage img {
	position: absolute;
	left: 0px;
	top: 0px;
}

#petCategories .categoryText {
	display: block;
	font-weight: 600;
	padding-top: 10px;
	font-size: 120%;
	color: #462f9d;
	transition: color 0.4s, top 0.4s;
	position: relative;
	top: 0px;
}

#petCategories a:hover .categoryImage {
	border-color: #fc611f;
}

#petCategories a:hover .categoryText {
	color: #fc611f;
	top: -8px;
}

#infoSection .infoBox {
	height: 300px;
	position: relative;
}

#infoSection .pictureBack {
	overflow: hidden;
}

#infoSection .pictureBack img {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#infoSection .pictureBack div {
	position: relative;
	z-index: 2;
	padding-right: 200px;
	height: 240px;
}

#infoSection .infoBox h2 {
	margin: 0px 0px 20px 0px;
	color: #fc611f;
}

#infoSection .pictureBack h2 {
	color: #462f9d !important;
}

#infoSection .pictureBack p {
	font-weight: 600;
}

.infoBox .blockButton {
	position: absolute;
	bottom: 30px;
	left: 30px;
}

.noSidePadded  .blockButton {
	position: absolute;
	bottom: 30px;
	left: 0px;
}

.pictureBack .blockButton {
	bottom: 0px;
	left: 0px;
}

#mainFooter {
	color: #ffffff;
	font-size: 80%;
}

#footerLinks {
	color: #fc611f
}

#footerLinks a {
	display: inline-block;
	padding: 0px 10px;
}

#mainFooter a:link,
#mainFooter a:visited {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.4s;
}

#mainFooter a:hover {
	color: #fc611f
}

#developerCredit {
	text-align: right;
}

.outer {
	position: relative;
}

.outerColumnContainer {
	display: flex;
	gap: 0px;
}

.outerColumnContainer aside {
	flex: 1;
}


.inner {
	position: relative;
	width: 1594px;
	margin: 0 auto;
}

.blockButton {
	display: inline-block;
	box-sizing: border-box;
	height: 46px;
	line-height: 100%;
	padding: 13px 30px 0px 30px;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	text-decoration: none;
}

.actionButton {
	display: inline-block;
	height: 46px;
	width: 202px;
	font-family: khula, sans-serif;
	font-weight: 800;
	text-decoration: none;
	box-sizing: border-box;
	line-height: 100%;
	padding: 10px 30px 0px;
	font-size: 145%;
	-webkit-border-bottom-right-radius: 46px;
	-webkit-border-bottom-left-radius: 46px;
	-moz-border-radius-bottomright: 46px;
	-moz-border-radius-bottomleft: 46px;
	border-bottom-right-radius: 46px;
	border-bottom-left-radius: 46px;
	text-align: center;
}


.bigButton {
	height: 60px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	padding: 20px;
	font-family: khula, sans-serif;
	font-weight: 800;
	font-size: 150%;
}

.purpleBack,
a.purpleBack:link,
a.purpleBack:visited {
	background-color: #462f9d;
	color: #ffffff;
	transition: background-color 0.4s, color 0.4s;
}

.purpleBack h2,
.purpleBack h4,
.purpleBack h5 {
	color: #ffffff;
}

.purpleBack h1,
.purpleBack h3 {
	color: #fc611f
}

.purpleBack h6 {}

.purpleBack a:link, .purpleBack a:visited {
    color: #ffffff;
}

.purpleBack a:hover {
    color: #fc611f;
}

.orangeBack,
a.orangeBack:link,
a.orangeBack:visited {
	background-color: #fc611f;
	color: #ffffff;
	transition: background-color 0.4s, color 0.4s;
}

.lightGreyBack {
	background-color: #e4e8e2;
}

.greyBack {
	background-color: #a7a2a9;
}

.greyBack h1, .greyBack h3 {
	color: #462f9d;
}

a.greyBack:link,
a.greyBack:visited {
	background-color: #a7a2a9;
	color: #462f9d;
	transition: background-color 0.4s, color 0.4s;
}

.darkGreyBack {
	background-color: #313131;
}

.whiteBack,
a.whiteBack:link,
a.whiteBack:visited {
	background-color: #ffffff;
	color: #fc611f;
	transition: background-color 0.4s, color 0.4s;
}

a.orangeBack:hover,
a.purpleBack:hover,
a.greyBack:hover {
	background-color: #ffffff;
	color: #462f9d;
}

a.whiteBack:hover {
	background-color: #fc611f;
	color: #462f9d;
}

.whiteBack a.purpleBack:hover,
.whiteBack a.orangeBack:hover {
	background-color: #a7a2a9;
	color: #462f9d;
}

:root {
	--column-unit: 86px;
	--gap: 30px;
}

.columnContainer {
	display: flex;
	gap: var(--gap);
	box-sizing: border-box;
}

.columnContainer>* {
	box-sizing: border-box;
}

.stretchyColumns {
	justify-content: space-between;
}

.equalColumns div {
flex: 1;
}

.equalColumns div strong {
display: inline-block;
width: 250px;
}

.oneColumn {
	flex: 0 0 calc(var(--column-unit));
	width: calc(var(--column-unit));
}

.twoColumn {
	flex: 0 0 calc((var(--column-unit) * 2) + var(--gap));
	width: calc((var(--column-unit) * 2) + var(--gap));
}

.threeColumn {
	flex: 0 0 calc((var(--column-unit) * 3) + (var(--gap) * 2));
	width: calc((var(--column-unit) * 3) + (var(--gap) * 2));
}

.fourColumn {
	flex: 0 0 calc((var(--column-unit) * 4) + (var(--gap) * 3));
	width: calc((var(--column-unit) * 4) + (var(--gap) * 3));
}

.fiveColumn {
	flex: 0 0 calc((var(--column-unit) * 5) + (var(--gap) * 4));
	width: calc((var(--column-unit) * 5) + (var(--gap) * 4));
}

.sixColumn {
	flex: 0 0 calc((var(--column-unit) * 6) + (var(--gap) * 5));
	width: calc((var(--column-unit) * 6) + (var(--gap) * 5));
}

.sevenColumn {
	flex: 0 0 calc((var(--column-unit) * 7) + (var(--gap) * 6));
	width: calc((var(--column-unit) * 7) + (var(--gap) * 6));
}

.eightColumn {
	flex: 0 0 calc((var(--column-unit) * 8) + (var(--gap) * 7));
	width: calc((var(--column-unit) * 8) + (var(--gap) * 7));
}

.nineColumn {
	flex: 0 0 calc((var(--column-unit) * 9) + (var(--gap) * 8));
	width: calc((var(--column-unit) * 9) + (var(--gap) * 8));
}

.tenColumn {
	flex: 0 0 calc((var(--column-unit) * 10) + (var(--gap) * 9));
	width: calc((var(--column-unit) * 10) + (var(--gap) * 9));
}

.elevenColumn {
	flex: 0 0 calc((var(--column-unit) * 11) + (var(--gap) * 10));
	width: calc((var(--column-unit) * 11) + (var(--gap) * 10));
}

.twelveColumn {
	flex: 0 0 calc((var(--column-unit) * 12) + (var(--gap) * 11));
	width: calc((var(--column-unit) * 12) + (var(--gap) * 11));
}

.thirteenColumn {
	flex: 0 0 calc((var(--column-unit) * 13) + (var(--gap) * 12));
	width: calc((var(--column-unit) * 13) + (var(--gap) * 12));
}

.fourteenColumn {
	flex: 0 0 calc((var(--column-unit) * 14) + (var(--gap) * 13));
	width: calc((var(--column-unit) * 14) + (var(--gap) * 13));
}


.leftSubColumn {
	margin-right: auto
}

.rightSubColumn {
	margin-left: auto;
}

.roundedFull {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.roundedMax {
	-webkit-border-radius: 65px;
	-moz-border-radius: 65px;
	border-radius: 65px;
}

.endLayout {
float: right;
}

.fullPadded {
	padding: 30px;
}

.halfPadded {
	padding: 15px;
}

.noSidePadded {
	padding: 30px 0px;
}

.verticalPadder {
	padding: 60px 0px;
}

.smallVerticalPadder {
	padding: 30px 0px;
}

.topPadder {
	padding-top: 60px;
}

.bottomPadder {
	padding-bottom: 60px;
}

.smallTopPadder {
	padding-top: 30px;
}

.smallBottomPadder {
	padding-bottom: 30px;
}


.variableColumn {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	flex: 1;
}

.adColumn {
	width: 120px;
	background-color: #cccccc;
}

.petGrid {
	display: grid;
	grid-template-columns: auto auto auto;
	/* Three columns with flexible width */
	gap: 0;
	/* No fixed gap, space auto-distributes */
	justify-content: space-between;
	/* Align left, center, right */
	width: 100%;
}

.petSummary {
	margin-bottom: 60px;
}

.petSummaryPhoto {
	display: block;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow: hidden;
	height: 270px;
	position: relative;
}

.petSummaryPhoto img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Centers the image */
	max-width: none;
	/* Ensures the image doesn’t shrink */
	max-height: none;
	/* Ensures the image can overflow if needed */
}


.petSummaryPhoto .portrait {
	min-width: 100%;
}

.petSummaryPhoto .landscape {
	min-height: 100%;
}

.petSummaryText {
	padding: 30px;
	position: relative;
}

.petSummaryText h3 {

	color: #ffffff;

	font-size: 160%;
}

.petSummaryText .pullDown {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -21px;
}

#infoBank h1 {
	color: #ffffff;
	margin-bottom: 0px;
}

#infoBank h3 {
	color: #ffffff;
}

.bottomMargin {
	margin-bottom: 30px
}

#infoBankleft {
	width: calc(50% - 15px);
	position: relative;
}

#infoBankRight {
	width: calc(50% - 15px);
	position: relative;
}

.sideText {
	display: inline-block;
	transform: rotate(-90deg);
	transform-origin: bottom right;
	line-height: 0px;
	position: absolute;
	left: -40px;
	top: 7px;
	font-size: 80%;
}

#infoBankRight .sideText {
	left: -50px;
}

.infoBankEntry {
	padding-left: 23px;
}

.infoBankEntry strong {
	font-weight: 400;
	display: inline-block;
	width: 110px;
	color: #fc611f;
}

a.hugeButton:link,
a.hugeButton:visited {
	height: 181px !important;
	line-height: 100%;
width: 100%;
}

a.hugeButton:hover {
	background-color: #462f9d !important;
	color: #ffffff !important;
}

.hugeButton h2 {
	margin-bottom: 14px !important;
	color: #000000;
}

.hugeButton p {
	margin-bottom: 20px !important;
}

.hugeButton h3 {
	color: #000000;
}

#imageBank {
	display: flex;
	justify-content: space-between;
position: relative;
}

.leftImageBank,
.rightImageBank {
	width: 118px;
	/* overflow: hidden; */
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.centralImageBank {
	overflow: hidden;
	height: 492px;
	width: 550px;
}

.centralImageBank img {
	display: none
}

.centralImageBank img.mainPhotoOn  {
	display: block;
	margin: auto;
}


#imageBankLeftControl, #imageBankRightControl {position:  absolute;top:  0px;overflow: hidden;width: 54px;top: 235px;z-index:  99;}
#imageBankLeftControl {
    left: 168px;
    /* padding-right: 20px; */
}
#imageBankRightControl {right: 170px;}

#imageBankLeftControl span, #imageBankRightControl span {cursor: pointer;display:  block;box-sizing:  border-box;font-size: 220%;width:  80px;height:  80px;padding-top: 24px;-webkit-border-radius: 45px;-moz-border-radius: 45px;border-radius: 45px;text-align: center;}

#imageBankLeftControl span {
    padding-right: 26px;
}

#imageBankLeftControl span.purpleBack:hover, #imageBankRightControl span.purpleBack:hover {
	background-color: #fc611f;
}

#imageBankRightControl span {position: relative;left: -26px;padding-left:  26px;}

.hiddenImageBank {
	display: none;
}

.rightImageBank>span,
.leftImageBank>span {
	width: 118px;
	height: 144px;
	overflow: hidden;
	position: relative;
	outline: 1px solid transparent;
	transition: outline-color 0.4s;
}

.rightImageBank>span:hover,
.leftImageBank>span:hover {
outline: 1px solid #ffffff;
	
	cursor: pointer;
}

.rightImageBank>span img,
.leftImageBank>span img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.landscapeImage {
	width: auto;
	height: 100%;
}

.portraitImage {
	width: 100%;
	height: auto;
}

.centralImageBank .landscapeImage {
	width: 100%;
	height: auto;
}

.centralImageBank .portraitImage {
	width: auto;
	height: 100%;
}


/* 
font-family: khula, sans-serif; 800
font-family: darkmode-off-cc, sans-serif; 400 500 600 700 
*/