:root {
  /*Placeholders*/
  --main-accent: #B73225;
  --secondary-accent: #424242;
  --background-accent: #383838;
  --dark-main: #151515;
  --light-main: #eaeaea;
  --mid-tone: #cdcdcd;
  --dark-lighter: #242424;
  --dark-darker: #050505;
  --light-darker: #383838;
  --small: 15px;
  --medium: 30px;
  --large: 100px;
}

/*Payment method card animations*/
.card-anim-in{
  animation-name:card-anim-in;
  animation: card-anim-in 1000ms;
}
@keyframes card-anim-in{
  0%, 50%{
    transform:translateX(-200px);
    opacity: 0%;
  }
  100%{
    transform:translateX(0px);
    opacity: 100%
  }
}

/*Leaflet map styling*/
.leafmap-popup > .leaflet-popup-content-wrapper{
  border-radius: 0px;
}

/*Top Dog Styling*/
.od-sample-parent{
  background-color:;
}
.od-sample-base{
  position:relative;
  z-index:1;
}
.od-dog-tags{
  position: absolute;
  top: 20%;
  left: 6%;
  transform: scale(0.44) rotate(-6deg);
  z-index: 0;
}
.od-dog-tags-2{
  position: absolute;
  top: 40.7%;
  left: 5%;
  transform: scale(0.36) rotate(-7deg) skew(8deg);
  z-index: 0;
}
.od-jelly-beans{
  position: absolute;
  top: 26.3%;
  left: 11.2%;
  transform: scale(0.56) rotate(-2deg) skew(2deg);
  z-index: 0;
}
.od-air-fresh{
  position: absolute;
  top: 25.1%;
  left: 17.7%;
  transform: rotate(-27.3deg) scale(0.28,0.9) skew(0deg);
  z-index: 0;
}


/* This has been replaced with SASS in variables.css*/
/* Color matches red to accent color (done in javascript, pls don't remove)*/
/*.color-match-filter{}*/

[hide="true"]{
  display:none;
}

.halfbg-1 {
  background: #383838;
}

.halfbg-2 {
  background: #151515;
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
  .halfbg-1 {
    background: rgb(21, 21, 21);
    background: linear-gradient(
      90deg,
      var(--background-accent) 50%,
      var(--main-accent) 50%
    );
  }

  .halfbg-2 {
    background: rgb(21, 21, 21);
    background: linear-gradient(
      90deg,
      var(--main-accent) 50%,
      var(--background-accent) 50%
    );
  }
}

@media (min-width: 1200px) {
  .halfbg-1 {
    background: rgb(21, 21, 21);
    background: linear-gradient(
      90deg,
      var(--background-accent) 50%,
      var(--main-accent) 50%
    );
  }

  .halfbg-2 {
    background: rgb(21, 21, 21);
    background: linear-gradient(
      90deg,
      var(--main-accent) 50%,
      var(--background-accent) 50%
    );
  }
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--accent-text);
  background: var(--main-accent);
}

::selection {
  color: var(--accent-text);
  background: var(--main-accent);
}

/*Makes transitioning between pages a bit nicer, rather than default white flashes*/
html {
  background-color: #242424;
}

body, p, a, .yee {
  font-family: Roboto!important;
}

.behind-accent-text {
  background: #B73225;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Poppins!important;
}

h1 i,
h2 i,
h3 i {
  font-style: inherit;
  color: var(--main-accent);
}

.card,
.card-body,
.card-header {
  border-radius: var(--border-radius);
}

.btn {
  background-color: #B73225;
  border-radius: calc(var(--border-radius) / 1.5);
}

.btn-primary {
  background-color: var(--main-accent);
}

.accent-color {
  color: var(--main-accent);
}

.accent-color-important {
  color: var(--main-accent) !important;
}

.accent-bg {
  background-color: var(--main-accent);
}

.text-secondary-accent {
  color: var(--secondary-accent);
}

.accent-text {
  color: #B73225;
}

.accent-text-important {
  color: #B73225 !important;
}

.hidden {
  display: none !important;
}

.border-underline {
  border-bottom-width: 4px;
  border-bottom-color: var(--main-accent);
  border-bottom: solid;
}

.maxwidth {
  width: 100%;
}

.maxheight {
  height: 100%;
}

.zero-padding {
  padding: 0px;
}

.zero-margin {
  padding: 0px;
}


.dodgelink {
  transition: transform 0.2s ease-in-out;

  position: relative;
}

.dodgelink:hover {
  transform: scale(1.02);
  transform-origin: center;
}

.outerlinks,
.outerlinks:hover {
  color: inherit;
}

.dark-text {
  color: var(--dark-main, #151515) !important;
}

.dark-bg {
  background-color: var(--dark-lighter) !important;
}

.darker-bg {
  background-color: var(--dark-main);
}

.light-text {
  color: var(--light-main, #eaeaea) !important;
}

.light-bg {
  background-color: var(--light-main, #eaeaea) !important;
}

/*Dark mode stuff*/
/*@media (prefers-color-scheme: dark) {

	.hide-on-darkmode{
		display: none;
	}
	.hide-on-lightmode{
		display: inherit;
	}
	.dark-text {
		color: var(--light-main, #eaeaea)!important;
	}

	.light-text {
		color: var(--light-main, #eaeaea)!important;
	}

	.darker-bg {
		background-color: var(--dark-darker, #101010)!important;
	}
	.dark-bg{
		background-color:var(--dark-main)!important;
	}
	.light-bg {
		background-color: var(--light-darker, #383838)!important;
	}
}*/

.hover-enlarge {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.hover-enlarge:hover {
  transform: scale(1.02);
  transform-origin: center;
}

.s-v-margin {
  margin-top: var(--small);
  margin-bottom: var(--small);
}

.s-h-margin {
  margin-left: var(--small);
  margin-right: var(--small);
}

.s-margin {
  margin: var(--small);
}

.m-v-margin {
  margin-top: var(--medium);
  margin-bottom: var(--medium);
}

.m-h-margin {
  margin-left: var(--medium);
  margin-right: var(--medium);
}

.m-margin {
  margin: var(--medium);
}

.l-v-margin {
  margin-top: var(--large);
  margin-bottom: var(--large);
}

.l-h-margin {
  margin-left: var(--large);
  margin-right: var(--large);
}

.l-margin {
  margin: var(--large);
}

.s-v-padding {
  padding-top: var(--small);
  padding-bottom: var(--small);
}

.s-h-padding {
  padding-left: var(--small);
  padding-right: var(--small);
}

.s-padding {
  padding: var(--small);
}

.m-v-padding {
  padding-top: var(--medium);
  padding-bottom: var(--medium);
}

.m-h-padding {
  padding-left: var(--medium);
  padding-right: var(--medium);
}

.m-padding {
  padding: var(--medium);
}

.l-v-padding {
  padding-top: var(--large);
  padding-bottom: var(--large);
}

.l-h-padding {
  padding-left: var(--large);
  padding-right: var(--large);
}

.l-padding {
  padding: var(--large);
}

/*Image filters*/

.monodark {
  filter: grayscale(100%) contrast(0%) brightness(20%);
}

.monolight {
  filter: grayscale(100%) contrast(0%) brightness(200%);
}

.invert {
  filter: invert(1);
}

.colorinvert .accent-color {
  color: var(--accent-text) !important;
}

.colorinvert .accent-bg {
  background-color: #B73225;
}

.colorinvert .accent-text {
  color: var(--main-accent) !important;
}

.colorinvert .fa-inverse {
  color: var(--main-accent) !important;
}

/*Checkbox everything css*/
[odcheck] {
  cursor: pointer;
  transition: 300ms;
  border: solid 3px rgba(0, 0, 0, 0);
}

.odcheck-selected {
  border: solid 3px #B73225;
}

.em1p5 {
  font-size: 2.5rem !important;
}

.svg-fallback {
  background-color: var(--main-accent);
  height: calc(0.8 * 80px);
  width: calc(0.8 * 100px);
  -webkit-mask-size: 100% !important;
  mask-size: 100%;
  margin-left: auto;
  margin-right: auto;
}

.fa-2x .svg-fallback {
  transform: scale(2);
}

.colorinvert .svg-fallback {
  background-color: #B73225;
}

.black-btn {
  background-color: #212121;
}

.btn-alt {
  background-color: rgba(33, 33, 33, 0.5);
}