/*NEW HEX CODES
Red ef1f2e
Yellow fefe00
Black 242424
 */

 @import url("https://use.typekit.net/fvv5pca.css");



 @font-face {
  font-family: Body;
  src: url(../../css/fonts/opensans/static/OpenSans/OpenSans-Regular.ttf);
}

@font-face {
  font-family: Heading;
  src: url(../../css/fonts/opensans/static/OpenSans/OpenSans-Bold.ttf);
}

@font-face {
  font-family: Description;
  src: url(../../css/fonts/lora/static/Lora-Regular.ttf);
}

/* Changes the Body Font*/
body {
  font-family: Body;
  color: #242424;
  letter-spacing: .5px;
  font-weight: 200;
}

/* CHANGE - Changes the majority of the ACCENTS buttons small print details and arrow */
.positive {
  color: #ef1f2e;
}

/* MENU-------------------------------------------------------------------------

  /* Changes the menu groups box */
.MenuGroup {
  background: #ef1f2e;
  /* was f5f5f5*/
}

/* Changes the menu groups arrow */
.menu-group-box {
  color: #ffffff;
  font-family: Heading;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 3px;
}

.menu-group-name {
  color: #ffffff;
  font-family: Vista Slab OTCE Reg;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.menu-group-description {
  color: #ffffff;
  font-size: 14px;
  font-family: Body;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .5px;
}

/* Changes Bikini Bottom*/
.menuItemName {
  color: #242424;
  font-size: 16px;
  font-weight: 600;
  line-height: 95%;
  position: static;
  /*position: absolute;
      top: 0;*/
  letter-spacing: .5px;
}

/* Changes Menu Group Description*/
.MenuItemDescription {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
  position: static;
  padding-top: 5px;
  color: #242424;
  font-family: Body;
  letter-spacing: 0px;
}

.item p {
  color: #242424;
}

/* Changes Price*/
.menu-item-cost {
  color: #242424;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
}

/* Changes Price*/
.MenuItemCost {
  color: #242424;
  font-size: 13px;
  font-weight: 800;
  margin-top: 10px;
}

.item .item-divider {
  color: #242424;
  font-family: Heading;
  text-transform: uppercase;
}

.MenuItem-placeholder
{
  background-color: #ffe001;
}



#per-person.ng-binding {
  font-size: 15px;
  font-weight: 800;
}

.col.center.MenuItemDescription p{
font-size: 13px !important;
}

/* TOP BAR-------------------------------------------------------------------------
  
  /* Changes the Shopping Cart Icon change the color code below */
.bar-dark .button.button-icon {
  color: #ffffff;
}

.bar-dark .button.button-icon:hover {
  color: #ffffff;
}

/* Changes hover color for top bar buttons */
.bar-business .button:hover {
  color: #ffffff;
}

/* Change "To Go Menu" Button to get out of a menu item*/
.bar-dark .button.button-clear {
  text-transform: uppercase;
  font-family: Heading;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 16px;
}

/* Changes the top bar */
.bar.bar-dark {
  background-color: #96bc34;
  border-color: #96bc34;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  color: #ffffff;
  font-family: Heading;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 16px;
}

/* Changes the "Views" font color */
.bar.bar-dark .title {
  background-color: #96bc34;
  color: #ffffff;
  font-family: Heading;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}

/* Changes color around "Views" */
.bar.bar-left {
  background-color: #96bc34;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  color: #ffffff;
  letter-spacing: 1px;
  font-family: Heading;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
}

/* Changes the border around the "Order" popout */
.bar.bar-right {
  background-color: #96bc34;
  border-color: #96bc34;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 1px;
  font-family: Heading;
  text-transform: uppercase;
  font-weight: 600;
}

/* Might be the one that actually changes the top bar color etc.*/
.bar.bar-dark {
  border-color: #96bc34;
  background-color: #96bc34;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  background-image: none;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  font-family: Heading;
  font-weight: 600;
  letter-spacing: 1px;
}

/*Menu Item Page - Top Bar - < Menu*/
.button.back-button.buttons.button-clear.header-item {
  color: #ffffff;
  font-size: 16px;

}

/*BOTTOM BAR -------------------------------------------------------------------
  /* Changes the bottom bar */
.tabs-striped.tabs-business .tabs {
  color: #96bc34;
}

.tabs-striped.tabs-dark .tab-item {
  color: #ffffff;
}

/* Changes the bottom bar color */
.tabs-striped.tabs-dark .tabs {
  background-color: #96bc34;
}

/* Changes tab items at the bottom of screen */
.tabs-striped.tabs-business .tab-item {
  color: #ffffff;
  border-top-width: 1px;
}

/* Changes the active items in the bottom bar */
.tabs-striped.tabs-business .tab-item-active {
  color: #ffffff;
  border-top-width: 1px;
}

.tabs-striped.tabs-dark .tab-item.activated,
.tabs-striped.tabs-dark .tab-item.active,
.tabs-striped.tabs-dark .tab-item.tab-item-active {
  margin-top: -2px;
  color: #ffffff;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-color: #ffffff;
}

/* DASHBOARD-------------------------------------------------------------------------
  
  /* Changes menu group colors and tabs under "VIEWS" */
.item-divider {
  color: #242424;
}

.item-divider.item.active {
  background: #d9d9d9;
  color: #242424;
}

.row .item .item-divider .MenuGroup .activated {
  background: #f5f5f5;
  color: #242424;
}

/* DASHBOARD-------------------------------------------------------------------------
  
  /* Changes font color of Tabs under "Views" */
.item .item-content.activated,
.item .item-content.activated.item-complex > .item-content,
.item .item-content.active,
.item .item-content.active.item-complex > .item-content,
.item-complex.activated .item-content,
.item-complex.activated .item-content.item-complex > .item-content,
.item-complex.active .item-content,
.item-complex.active .item-content.item-complex > .item-content,
.item.activated,
.item.activated.item-complex > .item-content,
.item.active,
.item.active.item-complex > .item-content {
  background: #d9d9d9;
  /* color:#8daf3d; */
}

#splash {
  position: fixed;
  z-index: 99999999;
  padding-top: 32px;
  text-align: center;
  width: 100%;
  background-color: #fff;
  height: 10000px;
}

/*
  .taptapeat{
    color:#FFFFFF;
    font-weight: 700;
  }
  */

/*
  MENU ITEM PAGES—--------------------
  
  
  /* controls the "To Go" button when clicked */
.bar .button.back-button.activated {
  color: white;
}

/* CHANGE - checkbox when it is checked CLICKED */
.checkbox input:checked + .checkbox-icon:before {
  border-color: #ef1f2e;
  background: #ef1f2e;
}

/* CHANGE - colors the checkbox before it is checked  */
.checkbox-square .checkbox-icon:before {
  border-color: #b2b2b2;
}

/* NO YES XTRA Buttons*/
.button.button-small.button-stable.button-positive {
  background-color: #ef1f2e;
  color: #fff;
  border-color: #ef1f2e;
}

/* CHANGE - No lite reg extra when idle POSITIVE buttons */
.button.button-positive {
  background-color: #ffe001;
  color: #242424;
  
}

/* Hover effect for the positive button */
.button.button-positive:hover {
  background-color: #ffe001; /* Change the background to black on hover */
  color: #242424;            /* Optionally, make the text white for better contrast */
}

/* CHANGE - color of no lite reg extra while clicked POSITIVE */
.button.button-positive.activated {
  background-color: #ef1f2e;
  border-color: #ef1f2e;
}

/* CHANGE - Changes "Order Info" button when idle positive buttons */
.button.button-positive.button-outline {
  border-color: #ef1f2e;
  color: #ef1f2e;
  font-weight: normal;
}

/* BUTTON - Changes the add to BACK order button BALANCED*/
.button.button-balanced {
  background-color: #ef1f2e;
  color: #ffffff;
}

.button.button-balanced.activated {
  background-color: #ef1f2e;
  border-color: #ef1f2e;
  color: #ffffff;
}

.button.button-outline.button-balanced {
  border-color: #b2b2b2;
  color: #ffffff;
}

.button.button-block.button-positive.button-outline {
  border-color: #ef1f2e;
  color: #ef1f2e;
}

/* BUTTON - Changes the "order info button when clicked */
.button.button-positive.button-outline.active,
.button.button-positive.button-outline.activated {
  background-color: #ef1f2e;
  color: #ffffff;
  font-weight: normal;
}

/* CHANGE -  unsure what these are changing */
.button.button-assertive {
  background-color: #242424;
  color: white;
}

/* CHANGE - Unsure what this is changing */
.button.button-assertive.activated {
  background-color: #242424;
  color: white;
}

/* CHANGE - Changes the cancel and back buttons */
.button.button-assertive.button-outline {
  border-color: #242424;
  color: #242424;
}

.button.button-assertive.button-outline.activated {
  background: #242424;
  color: #ffffff;
}

.button.button-positive.button-clear {
  border-color: transparent;
  background: 0 0;
  box-shadow: none;
  color: #242424;
}


/* BUTTON - ENERGIZED*/
.button.button-energized{
  background-color: #ef1f2e;
  color: #ffffff;
}

.button.button-energized.activated {
  background-color: #ef1f2e;
  border-color: #ef1f2e;
  color: #ffffff;
}

.button.button-outline.button-energized{
  border-color: #ef1f2e;
  color: #ffffff;
}

.button.button-block.button-positive.button-outline {
  border-color: #ef1f2e;
  color: #ef1f2e;
}

/*Changes the Day/Week/Month on cashier orders*/
.button-clear.button-positive.fw600 {
  color: #000;
}

.button-clear.button-positive.fw600::after {
  color: #000;
}

/* CHANGE - Changes the quantity number */
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  color: #242424;
}

.ng-dirty.ng-invalid {
  color: #ef1f2e;
  display: inline;
}

.ng-not-empty .ng-valid {
  color: #ef1f2e;
}

.fw600 {
  font-weight: 600;
  /* font-size: 16px; */
}

.fs12 {
  font-size: 12px;
}

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs24 {
  font-size: 24px;
}

.taRight {
  text-align: right;
}

.customer-template {
  /* background:#A9A296; */
  background: rgba(255, 255, 255, 0.96);
  background: #dbd9c5;
  background: #ffffff;
}

.custom-toggle.toggle-checked {
  background-color: #ffffff;
}

/* for the toggle Pin */
/*CHANGE - */
.custom-toggle.toggle-checked .toggle-inner {
  background-color: #ef1f2e;
}

.pac-container {
  /*hides the google address complete */
}

.has-footer.has-tabs {
  bottom: 93px;
}

.sub-footer {
  bottom: 50px !important;
  position: fixed;
}

/*hasn't fixed it yet */

.item-radio input:checked ~ .item-content {
  background: #ef1f2e;
}

.ion-arrow-left-b:before {
 transform: rotate(180deg);
}

/* CHANGE - Change dot in middle of radio button */
.radio-positive .radio-icon:after {
  background: #ef1f2e !important;
}

/* CHANGE - Change radio button before */
.radio-positive .radio-icon:before {
  border-color: #b2b2b2 !important;
}

.item-radio input:checked + .radio-content .radio-icon:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* CHANGE whole and half when selected - */
.circle-positive {
  border-color: #ef1f2e;
  background: #ef1f2e;
}

/* CHANGE whole and half not selected - */
.circle-negative {
  border-color: #b2b2b2;
}


/*LOCATION PAGE CUSTOM CODE - SIMILAR TO BILLY SIMS LOCATION PAGE*/

/* PIN COLOR */

  .custom-toggle.toggle-checked .toggle-inner{
  background-color: #fefe00 !important;
  }

.tte-location-name {
font-size: 16px;
}

.tte-location-address {
font-size: 14px;
} 

.tte-location-phonenum {
font-size: 14px;
}

.location-pin {
 filter: invert(30%) sepia(57%) saturate(2547%) hue-rotate(345deg) brightness(91%) contrast(93%) !important; 
}