/* cmsms stylesheet: default_tablet modified: 07/16/25 10:30:05 */
/* cmsms stylesheet: default_tablet modified: 07/16/25 10:27:37 */
/* cmsms stylesheet: default_tablet modified: 03/04/25 10:58:14 */
body {
	font-family: darkmode-off-cc, sans-serif;
	font-size: 95%;
	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: 28px;
}

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

#mobileSocials {
	display: flex;
	gap: 10px;
	padding: 0px 0px;
	width: 60px;
	position: absolute;
	left: 206px;
	top: 27px;
	box-sizing: border-box;
}

#mobileSocials a:link,
#mobileSocials a:visited {
	background-color: #fc611f;
	width: 36px;
	height: 36px;
	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;
}

#mobileSocials a:hover {
	top: -5px;
	background-color: #462f9d;
}

#mobileSocials a img {
	position: relative;
	top: 0px;
	left: 0px;
}

#menuShow {
	position: absolute;
	right: 0px;
	top: 90px;
	width: 121px;
	box-sizing: border-box;
	height: 42px;
	background-color: #462f9d;
	font-size: 110%;
	line-height: 100%;
	padding: 12px 30px 0px 30px;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	transition: background-color 0.4s;
}

#menuText {
	position: absolute;
	left: 20px;
	top: 11px;
	font-size: 120%;
	color: #ffffff;
	cursor: pointer;
	transition: color 0.4s;
}

.hamburgerMenu {
	position: absolute;
	right: 18px;
	top: 9px;
}

.hamburgerMenu .bar {
	display: block;
	background-color: #ffffff;
	width: 19px;
	height: 4px;
	margin-bottom: 5px;
	transition: background-color 0.4s;
}

#menuShow:hover {
	background-color: #a7a2a9;
}

#menuShow:hover #menuText {
	color: #462f9d;
}

#menuShow:hover .hamburgerMenu .bar {
	background-color: #462f9d;
}

#menuBack {
		position: fixed;
		background-color: #ffffffb3;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		z-index:  99;
		display: none;
}

#actualMenu {
	position: fixed;
	right: -320px;
	top: 0px;
	bottom:  0px;
	width:  300px;
	background-color: #a7a2a9;
	z-index: 999;
	box-sizing:  border-box;
	padding-top: 50px;
	box-sizing:  border-box;
	border-left: 10px solid #462f9d;
	transition: right 0.4s;
}

.menuOn {
	right: 0px !important;
}

#mobileExtrasClose {text-align: right;padding-right: 30px;padding-bottom: 30px;font-size: 90%;cursor: pointer; width: 100px;margin-left: auto;}

#mobileExtrasClose:hover {color: #ffffff;}

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

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

#actualMenu ul li a:link,
#actualMenu ul li a:visited {
	display: block;
	box-sizing: border-box;
	height: 46px;
	width: 160px;
	text-align:  center;
	font-size: 110%;
	line-height: 100%;
	padding: 15px 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, left 0.4s;
	margin:  0px auto;
	position: relative;
	left: 0px;
}

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

#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: -250px;
}

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

#heroContent h2 {
	font-size: 210%;
	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 {
         display: none;
}

.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: 160px;
	height: 160px;
	margin: 0px auto;
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	border-radius: 80px;
	box-sizing: border-box;
	border: 1px solid #ffffff;
	transition: border-color 0.4s;
	position: relative;
}

#petCategories .categoryImage img {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 160px;
	height:  auto;
}

#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: 100px;
	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: 24px;
	left: 24px;
}

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

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

#mainFooter .threeColumn {
	width: 100% !important;
	/* text-align: center; */
	flex:  1;
}

#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: 980px;
	margin: 0 auto;
}

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

.actionButton {
	display: inline-block;
	height: 38px;
	width: 170px;
	font-family: khula, sans-serif;
	font-weight: 800;
	text-decoration: none;
	box-sizing: border-box;
	line-height: 100%;
	padding: 8px 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%;
}

:root {
	--column-unit: 44px;
	--gap: 28px;
}

.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: 150px;
}

.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;
}

.fullPadded {
	padding: 20px;
}

.noSidePadded {
	padding: 24px 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(3, 1fr);
	gap: 10px;
	flex: 1;
}

.adColumn {
	width: 120px;
}

    .petGrid {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
    }
}

.petSummary {
	margin-bottom: 0px;

}

#petBrowser .threeColumn {
	width: 210px !important;
	height: 390px;
	margin-bottom: 28px;
}

.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: 210px;
	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 */
	width: 110%;
	height:  auto;
}


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

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

.petSummaryText {
padding: 10px;
        position: relative;
        line-height: 120%;
        height: 117px;
}

.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;
	font-size: 120%;
}

.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%;
}

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

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

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

.hugeButton h3 {
	color: #000000;
}

#imageBank {
	position: relative;
	height: 580px;
}

.leftImageBank {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.rightImageBank {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.leftImageBank,
.rightImageBank {
	width: 282px;
	/* overflow: hidden; */
	display: flex;
	gap: 14px;
}
#imageBankLeftControl, #imageBankRightControl {position:  absolute;top:  0px;overflow: hidden;width: 54px;top: 180px;z-index:  99;}
#imageBankLeftControl {
    left: 20px;
    /* padding-right: 20px; */
}
#imageBankRightControl {right: 20px;}

#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: 94px;
	height: 114px;
	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%);
}

.centralImageBank {
	overflow: hidden;
	height: 420px;
	width: 508px;
	margin: 0px auto;
}

    .centralImageBank img {
        display: none;
    }

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

#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: 94px;
	height: 114px;
	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%);
}

.centralImageBank {
	overflow: hidden;
	height: 420px;
	width: 508px;
	margin: 0px auto;
}

    .centralImageBank img {
        display: none;
    }

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



.hiddenImageBank {
	display: none;
}

.rightImageBank>span,
.leftImageBank>span {
	width: 86px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

.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%;
}

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

/* 
font-family: khula, sans-serif; 800
font-family: darkmode-off-cc, sans-serif; 400 500 600 700 
*/
/* cmsms stylesheet: interfaces_tablet modified: 07/16/25 10:27:37 */
.interfaceButton {
display: block !important;
margin-bottom: 20px;
max-width: 272px;
}

#mobileContextMenu {
display: table;
margin-left: auto;
}

#contextMenu {
    display: none;

}

#mobileContextMenu {
display: table;
margin-left: auto;
}

#contextMenu {
    display: none;

}

#mobileContextMenu ul {
margin: 0px;
padding: 0px 0px 10px 0px;
display: flex;
        gap: 16px;
}

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

#mobileContextMenu ul li a:link, #mobileContextMenu ul li a:visited {
        display: block;
        box-sizing: border-box;
        background-color: #fc611f;
	color: #ffffff;
        height: 40px;
        line-height: 100%;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        position: relative;
        transition: top 0.2s, background-color 0.4s, width 0.4s, height 0.4s;
        top: 0px;
        overflow: hidden;
        padding: 11px;
        text-decoration: none;
    }
    
#mobileContextMenu ul li a img {
    display: none;
}

#mobileContextMenu ul li a:hover {
	top: -5px;
	background-color: #462f9d;
	color: #ffffff;
}

#editPetBrowser {
        display: grid;
        grid-template-columns: auto auto auto auto;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
    }
   
#editPetBrowser .threeColumn {
        width: 260px !important;
    }
    
    #shelterSummary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        flex: 1;
    }

.shelterItem {

}

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

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

.shelterItem h3 {

}

.innerShelterItem {

}

.shelterItemContacts {

}

.shelterStreetAddress {
    
}

.shelterPetsSheltered {

}

.editInfoBank {
	display: block
}

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

.editInfoBank .infoBankEntry {
	padding-left: 0px;
	padding-bottom: 5px;
}

.editInfoBank .infoBankEntry strong {
	width: 300px;
	font-size:  100%;
}

#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;
}

#existingPhotosInterface {

}

.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: grid;
  grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.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;
}

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

#petControlBarRight{
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.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;
}

.archiveStatus {
        background-color: #462e9c;
        color: #a49bc5;
}
/* cmsms stylesheet: interfaces_tablet modified: 07/16/25 10:30:06 */
.interfaceButton {
display: block !important;
margin-bottom: 20px;
max-width: 272px;
}

#mobileContextMenu {
display: table;
margin-left: auto;
}

#contextMenu {
    display: none;

}

#mobileContextMenu {
display: table;
margin-left: auto;
}

#contextMenu {
    display: none;

}

#mobileContextMenu ul {
margin: 0px;
padding: 0px 0px 10px 0px;
display: flex;
        gap: 16px;
}

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

#mobileContextMenu ul li a:link, #mobileContextMenu ul li a:visited {
        display: block;
        box-sizing: border-box;
        background-color: #fc611f;
	color: #ffffff;
        height: 40px;
        line-height: 100%;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        position: relative;
        transition: top 0.2s, background-color 0.4s, width 0.4s, height 0.4s;
        top: 0px;
        overflow: hidden;
        padding: 11px;
        text-decoration: none;
    }
    
#mobileContextMenu ul li a img {
    display: none;
}

#mobileContextMenu ul li a:hover {
	top: -5px;
	background-color: #462f9d;
	color: #ffffff;
}

#editPetBrowser {
        display: grid;
        grid-template-columns: auto auto auto auto;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
    }
   
#editPetBrowser .threeColumn {
        width: 260px !important;
    }
    
    #shelterSummary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        flex: 1;
    }

.shelterItem {

}

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

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

.shelterItem h3 {

}

.innerShelterItem {

}

.shelterItemContacts {

}

.shelterStreetAddress {
    
}

.shelterPetsSheltered {

}

.editInfoBank {
	display: block
}

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

.editInfoBank .infoBankEntry {
	padding-left: 0px;
	padding-bottom: 5px;
}

.editInfoBank .infoBankEntry strong {
	width: 300px;
	font-size:  100%;
}

#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;
}

#existingPhotosInterface {

}

.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: grid;
  grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.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;
}

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

#petControlBarRight{
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.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;
}

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