@charset "UTF-8";

:root {
  --red: #C50000;
  --light-red: #c90606;
  --subtle-red: #FF7979;
  --grey: #F5F6F7;
  /*--black: #16191C;*/
  --black: #000000;
  --light-grey: #d9d3d8;
  --dark-grey: #959094;
  --mod-dark-grey: #8e8a8d;
  --super-dark-grey: #252A2F;
  --white: #FFFFFF;
}

@media (min-width: 992px) {
	.rec-items {
    position:relative;
    overflow: hidden;
		padding: 10px;
		margin: 0 0 10px 0;
    box-shadow: 0 0 15px -2px rgba(0,0,0,.2);
    display: flex;
		align-items: center;
    border-radius: 4px;
	}
}

@media (max-width: 992px) {
	.rec-items {
    position:relative;
    overflow: hidden;
		padding: 15px;
		margin: 0 0 20px 0;
    box-shadow: 0 0 15px -2px rgba(0,0,0,.2);
    display: flex;
		align-items: center;
		text-align: center;
	}
}

.fixture {
	font-size: 14px;
    font-weight: 500;
}

.league {
	font-size: 11px;
    font-weight: 300;
    color: var(--mod-dark-grey);
}

.selection {
	margin: 10px 0 10px 0;
}

.kickoff {
	padding: 5px 15px 5px 15px;
    border-radius: 5px;
    box-shadow: 0 0 15px -2px rgba(0,0,0,.3);
    background-color: var(--white);
    color: var(--red);
    font-weight: 300;
    font-size: 14px;
}

.market {
	padding: 5px 7px 5px 7px;
    border-radius: 5px;
    box-shadow: 0 0 15px -2px rgba(0,0,0,.3);
    background-color: var(--white);
    color: var(--red);
    font-weight: 300;
    font-size: 11px;
}

@media (min-width: 992px) {
  .bet {
  	padding: 5px 10px 5px 10px;
      border-radius: 5px;
      background-color: var(--red);
      color: var(--white);
      font-weight: 600;
      font-size: 13px;
  	 display: inline-block;
  }
}

@media (max-width: 992px) {
  .bet {
    padding: 5px 15px 5px 15px;
      border-radius: 5px;
      background-color: var(--red);
      color: var(--white);
      font-weight: 600;
      font-size: 11px;
     display: inline-block;
  }
}

#toast-container>.toast-error {
  background-image: url('/static/images/logo-white-transparent-35.png')!important;
}


.ribbon {
  margin: 4px;
  padding: 0;
  background: var(--red);
  color: var(--white);
  padding: 3px 2px;
  position: absolute;
  top:0;
  right:0;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;
  font-size: 10px;
  font-weight: 600;
}
.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  top:0;
  margin: 0 -1px; /* tweak */
  width: 150%;
  height: 100%;
  background: var(--red);
}
.ribbon:before {
  right:100%;
}

.ribbon:after {
  left:100%;
}