@import url('https://fonts.googleapis.com/css?family=Alkatra:300,400,500,600|Tinos:300,400,500,600|Share+Tech+Mono:400');.font-primary, body { font-family: Tinos, sans-serif !important; }.font-secondary { font-family: Alkatra, sans-serif !important; }.font-tertiary { font-family: Share Tech Mono, monospace !important; }.primary-bg-color { background-color: rgb(255, 255, 255)!important; }.btn-choice:not(.active):hover { background-color: rgb(255, 255, 255)!important; }.primary-bg-border-color { border-color: rgb(255, 255, 255)!important; }.popover.top > .arrow { border-top-color: rgb(255, 255, 255)!important; }.popover.left > .arrow { border-left-color: rgb(255, 255, 255)!important; }.popover.right > .arrow { border-right-color: rgb(255, 255, 255)!important; }.popover.bottom > .arrow { border-bottom-color: rgb(255, 255, 255)!important; }.primary-border-color { border-color: rgb(255, 255, 255)!important; }.primary-text-color { color: rgb(51, 51, 51)!important; }.primary-text-border-color { border-color: rgb(51, 51, 51)!important; }.secondary-bg-color { background-color: rgb(78, 69, 64)!important; }.secondary-text-inverse-color { color: rgb(78, 69, 64)!important; }.secondary-text-color { color: rgb(255, 255, 255)!important; }.secondary-bg-inverse-color { background-color: rgb(255, 255, 255)!important; }.secondary-bg-inverse-color:before { background-color: rgb(255, 255, 255)!important; }.secondary-bg-inverse-color:after { background-color: rgb(255, 255, 255)!important; }.action-bg-color { background-color: rgb(239, 55, 62)!important; fill: rgb(239, 55, 62)!important }.action-text-color { color: rgb(239, 55, 62)!important; }.action-border-color { border-color: rgb(239, 55, 62)!important; }.action-inverse-bg-color { background-color: rgb(255, 255, 255)!important; fill: rgb(255, 255, 255)!important }.action-inverse-text-color { color: rgb(255, 255, 255)!important; }.action-inverse-border-color { border-color: rgb(255, 255, 255)!important; }.selection-bg-color { background-color: rgb(239, 55, 62)!important; fill: rgb(239, 55, 62)!important }.selection-text-color { color: rgb(239, 55, 62)!important; }.selection-border-color { border-color: rgb(239, 55, 62)!important; }.btn:hover .tab-icon.filled {background-color: rgb(239, 55, 62)!important; }.btn:active .tab-icon.filled {background-color: rgb(239, 55, 62)!important; }.btn.active .tab-icon.filled {background-color: rgb(239, 55, 62)!important; }.selection-inverse-bg-color { background-color: rgb(255, 255, 255)!important; fill: rgb(255, 255, 255)!important }.selection-inverse-text-color { color: rgb(255, 255, 255)!important; }.selection-inverse-border-color { border-color: rgb(255, 255, 255)!important; }.secondary-bg { background-color: rgb(153, 108, 0)!important; }.secondary-text { color: rgb(255, 255, 255)!important; }.intro-highlight-bg-color { background-color: rgb(239, 55, 62)!important; }.intro-highlight-text-color { color: rgb(239, 55, 62)!important; }.intro-highlight-inverse-bg-color { background-color: rgb(255, 255, 255)!important; }.intro-highlight-inverse-text-color { color: rgb(255, 255, 255)!important; }.leftMenuBg,.rightMenuBg,.tabs-menu,.overlay-menu,.order-tree-slider-wrapper,.sticky-group-name { background-color: rgb(255, 255, 255)!important; }.main-footer { background-color: rgb(255, 255, 255)!important; }.home-info-bg-fix { opacity: 0.5 !important; }:root {
  --font-family: BurbankBigRegular-Bold;
  --brown-color: #4E4540;
  --yellow-color: #FDB913;
  --red-color: #EF273E;
  --white-color: #FFFFFF;
  --font-size-large: 45px;
  --font-size-medium: 35px;
  --font-size-small: 18px;
}

@font-face {
  font-family: 'BurbankBigRegular-Bold';
  src: url('https://johnnysph.com/fonts/Burbank/BurbankBigRegular-Bold.woff2') format('woff2'),
    url('https://johnnysph.com/fonts/Burbank/BurbankBigRegular-Bold.woff') format('woff');
}

@font-face {
  font-family: '216Kefa-II-Pro-Regular';
  src: url('https://johnnysph.com/fonts/Kefa%20II%20Pro/kefa_ii_pro_book-webfont.woff2') format('woff2'),
    url('https://johnnysph.com/fonts/Kefa%20II%20Pro/kefa_ii_pro_book-webfont.woff') format('woff');
}



/* General Section Styles */
.alert.alert-info {
  background-color: var(--yellow-color) !important;
  color: var(--brown-color) !important;
}

.font-secondary {
  font-family:'BurbankBigRegular-Bold'!important;
}

.font-primary {
  font-family:'216Kefa-II-Pro-Regular'!important;
}

/* Main background color */
main.overlay {
  background: var(--white-color) !important;
}

/* Header Section */
fts-hamburger-button button.secondary-bg-color {
  color: var(--yellow-color) !important;
  font-size: 1.5rem;
}

.right-container button.account-button fa-icon svg {
  color: var(--red-color) !important;
}

.right-container fts-menu-link button.rendered-in-minified {
  position: relative;
}

.right-container .header-link {
  position: relative;
}

.right-container .header-link.store-info-btn {
  position: unset;
}

.right-container fts-menu-link button.rendered-in-minified::after {
  content: ""
  position: absolute;
  width: 2.5rem;
  height: 2px;
  background: var(--yellow-color) !important;
  color: var(--yellow-color) !important;
  -webkit-transform: rotate(90deg);
  top: 40%;
  right: -30px;
}

.right-container .header-link::after {
  content: "";
  position: absolute;
  width: 2.5rem;
  height: 2px;
  background: var(--yellow-color) !important;
  color: var(--yellow-color) !important;
  -webkit-transform: rotate(90deg);
  top: 40%;
  right: -30px;
}

@media screen and (max-width: 990px) {
  .right-container .header-link:nth-child(1)::after {
    display: none;
  }
}

@media screen and (max-width: 1100px) {
  .right-container #header-link-loyalty::after {
    display: none;
  }
}

.right-container .header-link.store-info-btn::after {
  display: none;
}

.right-container .header-link.store-info-btn::before {
    content: url("https://johnnyspizzahouse12.foodtecsolutions.com/Image?name=location-icon");
  margin-right: 5px;
}

fts-cart-button {
  content: url("https://johnnyspizzahouse12.foodtecsolutions.com/Image?name=cart-iconv2");
  height:28.52px!important;
  display: flex; 
}



.right-container .header-link.store-info-btn {
 display: flex;
  align-items: center;
}

.right-container .header-link {
  font-size: var(--font-size-small) !important;
}

.right-container fts-menu-link .rendered-in-minified {
  font-size: var(--font-size-small) !important;
}

#header-link-loyalty::before {
  content: url("https://johnnyspizzahouse12.foodtecsolutions.com/Image?name=perks-icon");
  color: var(--yellow-color) !important;
  margin-right: 5px;
}

#header-link-loyalty {
  display: flex!important;
  align-items: center!important;
}


/* Tiled Menu Page Section */
.index-wrapper {
  margin-left: 5rem;
  margin-right: 5rem;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  overflow: auto;
  filter: drop-shadow(0.9px 0.9px 0.9px rgba(0, 0, 0, 0.75));
}

fts-tiled-menu-index #tiledMenuIndex {
  font-family: 'BurbankBigRegular-Bold'!important;
  background-color: var(--red-color) !important;
}

fts-tiled-menu-index #tiledMenuIndex fts-nav-link button {
  color: var(--white-color) !important;
  background-color: transparent !important;
}

fts-tiled-menu-index #tiledMenuIndex fts-nav-link button span {
  font-size: var(--font-size-small) !important;
}

/* Tiled Menu Page - Heading Section */
.tiled-menu-heading {
  color: var(--red-color) !important;
  font-size: var(--font-size-large) !important;
}

/* Tiled Menu Page - Category Item Section */
.tiled-category-links-wrapper .button-wrapper button {
  background-color: transparent !important;
  box-shadow: none !important;
  font-family: 'BurbankBigRegular-Bold'!important;
}

.tiled-category-links-wrapper .button-wrapper button span {
  color: var(--brown-color) !important;
  font-size: var(--font-size-medium) !important;
}

/* Login Page Section */
main .overlay {
  background: var(--white-color) !important;
}

fts-login div section {
  text-align: center;
}

fts-login div section hr {
  display: none;
}

fts-login div section h2 {
  font-size: var(--font-size-large) !important;
  color: var(--red-color) !important;
  text-transform: uppercase;
}

fts-login div section:nth-child(1) {
  position: relative;
}

fts-login div section:nth-child(1)::after {
  content: "";
  position: absolute;
  width: 10rem;
  height: 2px;
  background: var(--yellow-color) !important;
  color: var(--yellow-color) !important;
  -webkit-transform: rotate(90deg);
  top: 40%;
  right: -80px;
}

@media screen and (max-width: 767px) {
  fts-login div section:nth-child(1)::after {
    display: none;
  }
}

fts-login div section:nth-child(1) div button {
  width: 100%;
}

fts-login div section:nth-child(2) .body div button {
  width: 50%;
}

@media screen and (max-width: 767px) {
  fts-login div section:nth-child(2) .body div button {
    width: 100%;
  }
}

fts-login div section button {
  border-radius: 10px !important;
}


.wrapper {
    background-color: white;
}

.group-name .heading {
    margin: auto;
}

.calories-display {
    margin: auto;
color: #4E4540 !important;
}


fts-card-menu-item-header {
    margin: auto;
  font-size: 35px!important;
	color: #4E4540 !important;
}

fts-card-menu-item-header span {
  font-size: 35px!important;
  color: #4E4540 !important;
}
div .item-wrapper {
  overflow:inherit!important;
}


.primary-text-color {
    font-size: 14px;
	color: #4E4540 !important;
 	line-height: 20px !important;
}



.add-to-order-btn {
font-size: 16px;
border-radius: 12px;
background-color: #EF373E!important;
color: #EF373E;
border: 2px solid #EF373E;
}


.customize-btn{
font-size: 16px!important;
border-radius: 12px!important;
background-color: #fff!important;
color: #EF373E !important;
border: 2px solid #EF373E!important;
}

.add-to-order-btn{
font-size: 16px!important;
border-radius: 12px!important;
background-color: #EF373E!important;
color: #fff !important;
border: 2px solid #EF373E!important;
}


.item-name,
.ingredient-description-list,
.calories{
    text-align: center;
line-height: 35px !important;
  background:none!important;
}


.action-btn{
font-size: 17px!important;
border-radius: 12px;
background-color: #EF373E!important;
color: #fff!important;
border: 2px solid #EF373E !important;
}

.ingredient-choice
{
border-radius: 12px;
background-color: #EF373E!important;
color: #fff!important;
border: 2px solid #EF373E !important;
}


.ingredient-group-btn
{
border-radius: 12px;
background-color: #EF373E!important;
color: #fff!important;
border: 2px solid #EF373E !important;
}

div .ingredient-options, .item-size-options{
font-size: 14px!important;
background-color: #fff!important;
color: #4E4540 !important;
text-align: center;

}

.tag {
  display:none!important;
}

.tiled-menu-back-link { 
  color: #EF373E!important;
  font-family:'BurbankBigRegular-Bold'!important;
}

.alert.alert-danger.choice-error {
  font-size: 18px!important;
  background-color:#FDB913!important;
  color:black!important;
  border-radius: 12px;
  border: 2px solid #FDB913 !important;
}

button.btn-choice.ingredient-choice {
 border-radius: 12px!important;
 color:black!important;
 background-color:white!important;
}

button.ingredient-choice.active {
 color:white!important;
     background-color: #EF373E!important;
  border-radius: 12px!important;
}

.custom-checkbox-indicator.selection-bg-color.selection-inverse-text-color {
      background-color: #EF373E!important;
}

div.price-wrapper { 
  margin:auto!important;
}

button.btn.ingredient-group-btn, button.btn.action-btn, button.btn-linkm, button.dismiss-btn, button.btn  {
  border-radius: 12px!important;
}

button.btn.ingredient-group-btn.selection-bg-color {
 border-radius: 12px!important;
 color:white!important;
 background-color:#EF373E!important;
}

button.btn.ingredient-group-btn {
 border-radius: 12px!important;
 color:black!important;
 background-color:white!important;
}

div.single-size>div.price {
  text-align: center;
}

.tab-icon {
  display:none;
}

.instructions-btn {
    font-family:'216Kefa-II-Pro-Regular'!important;
  font-weight: 600!important;
  font-size: 17px
}

fts-ingredient {
  border: 1px solid #000 !important;
}

fts-quantity-selector button.quantity-decrease , button.quantity-increase, input.quantity-input {
    border: 1px solid #000 !important;
  border-radius: 0px!important;
}

button.dropdown-toggle {
  border-radius: 0px!important;
    height: 37px!important;
  border: 1px solid #000 !important;
}

select.ingredient, select.item-size-options, #sizeInput, label.form-control.quantity-label {
    border: 1px solid #000 !important;
  font-size:16px!important;
}

fts-card-menu-item-description.panel-item-description {
  text-align: center;
}

button.ingredient-qualifier-btn {
  background-color:white!important;
}

button.ingredient-qualifier-btn>span {
  color:black!important;
}

div.card-menu-item {
  border: 0.2px solid #98928b;
}

div.order-notification {
  top: 120px!important;
}

fts-cart-button:hover{
  cursor:pointer;
}


p.ingredient-name, span.fit-qualifier-arrow { 
  font-size: 18px!important;
}

fa-icon.sort-icon {
  display: none;
}

div.description-and-controls-panel {
  margin-top: 30px!important;
}

h2.item-name { 
  margin-top:29px!important;
}

div.price {
  line-height: 33px;
}

div.item-description { 
  font-size:16px;
}

.select.select-dropdown select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

button.btn-block:not(.btn-lg) {
  padding-top: 9px !important;
}

button.action-bg-color:not(.btn-lg) {
padding-top: 9px !important;
}

div.image-contianer-three-rows > img { 
  height: 250px;
  width: 250px;
  @media screen and (min-width: 768px) {
    height: 350px;
  width: 350px;
  }
}

fts-loyalty-progress-builder > div#container {
  grid-auto-rows: auto!important;
  @media screen and (min-width: 768px) {
    grid-auto-rows: 1fr!important;
  } 
}

fts-loyalty-progress-builder > div fa-icon {
  display:none!important;
  
}

#title-container {
  font-family: 'BurbankBigRegular-Bold';

}
 #title-container::before {
content: url("https://johnnyspizzahouselab.foodtecsolutions.com/Image?name=perks-icon");

}

h3#name { 
  font-size: 20px;
  font-weight: 1000!important;
  line-height: 18px;
}

div.sub-header {
  margin-top: 15px!important;
}

fts-size-prices > div > select, fts-size-prices > div > div {
  font-weight: 800!important;
}

p.ingredient-description-list {
  line-height: 1px!important;
}

div.calories {
  margin-bottom: -1px!important;
}

fts-card-menu-item-header > div.sub-header  {
  flex-direction: column!important;
	font-size:15px;
  text-align:center;
}

fts-recently-ordered-item-controls > div { 
  font-weight:800!important;
  text-align: center;
}





fts-track-order-btn > a.rendered-in-minified {
  font-size:1.1rem!important;
    display: flex!important;
  align-items: center!important;
}

div.image-contianer-two-rows { 
  grid-row: span 2!important;
}

div#information-container > div > div > div > ol, div.history-record, div.loyalty-notifications {
    font-size: 18px;
  font-weight:600;
}

div#information-container {
  background-color: rgba(147,148,140,255); 
  padding-bottom:15px;
}

h3.loyalty-rules-heading, fts-register-or-login > div > h3,  fts-loyalty-notifications > h3, fts-reward-component > h3 {
   font-family:'BurbankBigRegular-Bold'!important;
  text-transform:uppercase;
    text-align:center;
  font-size: 1.9rem!important;
  color:white;
  text-align:center!important;
}


fts-register-or-login > div > div > div {
  text-align:center;
}

svg.fa-chevron-left{
    font-size: smaller;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

button#forgot-password-link {
border-bottom:none!important;
}

span.padded-left.padded-right.lead.or-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10px 0;
}

button.half-selection > div.my-center, button.half-selection > div.my-left, button.half-selection > div.my-right { 
  display:flex;
  justify-content:center;
  align-items:center;
}

div.checkmark-container {
  padding-top:0em!important;
}

div.half-text {
  display:none!important;
}

fts-minified-header > div > nav > div > div:nth-child(2) > fts-grouporder-button {
  @media screen and (min-width: 768px) {
     margin-right: 15px!important;
  } 
}

fts-minified-header > div > nav > div > div:nth-child(2) > fts-grouporder-button > span {
   @media screen and (max-width: 768px) {
  font-size: 0.8rem!important;
  }
}

fts-menu-tab .card-items-container {
  display:flex;
  justify-content: center;
}

.fw-500 {
font-size: 26px;
}

#loyalty-builder-image
{height: 90% !important;
width: 90% !important;
}



fts-cart-button {
  content: none !important;
}
fts-cart-button button {
    padding-inline: 0px !important;
}
fts-cart-button fa-icon {
  content: url("https://johnnyspizzahouse12.foodtecsolutions.com/Image?name=cart-iconv2");
  height:28.52px!important;
  display: box !important;
}

fts-cart-button span {
  position:absolute !important;
  top: -15px;
  right: -15px;
  font-weight: 600 !important;
  padding: 3px 7px;
  font-family: 'BurbankBigRegular-Bold' !important;
  border-radius: 20px;
  color: white;
  background-color: var(--red-color) !important;
}


@media (max-width: 767px) {
  fts-cart-button span {
    top: 0px !important;
    right: 36px !important;
}
}

div.tiled-header-wrapper {
  display: flex!important;
  flex-direction: column!important;
}

div.tiled-header-wrapper::after  {
content: "";
  width: 100%;
  display: block;
  grid-column: 1!important;
  grid-row: 2!important;
  object-fit: contain;
  background-image: url("/webfile?name=CaulPizzaBanner&hash=1747672091000");
  height: auto;
  aspect-ratio: 5/1;
  object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.alert-form.alert-danger, .alert.alert-danger { background-color: rgb(239, 55, 62) !important; }.error-bg-color { background-color: rgb(239, 55, 62)!important; }.alert-form.alert-danger, .alert.alert-danger { color: rgb(255, 255, 255) !important; }.notifications { background-color: rgb(239, 55, 62) !important; }.notifications { color: rgb(255, 255, 255) !important; }.text-danger { color: rgb(239, 55, 62) !important; }.special-indicator { color: rgb(239, 55, 62) !important; }