html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

/*
  "local" weird chars below are to prevent an existing font named SkyRegular
  on the local machine being used instead of our font
  https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
*/
@font-face {
  font-family: SkyRegular;
  src: url('./fonts/skyreg-webfont.eot');
  src: local('☺'), url('./fonts/skyreg-webfont.woff') format('woff'),
      url('./fonts/skyreg-webfont.ttf') format('truetype'),
      url('./fonts/skyreg-webfont.svg#SkyRegular') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: SkyMedium;
  src: url('./fonts/skymed-webfont.eot');
  src: local('☺'), url('./fonts/skymed-webfont.woff') format('woff'),
      url('./fonts/skymed-webfont.ttf') format('truetype'),
      url('./fonts/skymed-webfont.svg#SkyMediumRegular') format('svg');
      font-weight: bold;
      font-style: normal;
}.notificationsContainer {
    display: flex;
    flex-grow: 1;
    padding: 0 12px;
    
    background: #f5f5f5;
    
    font-family: "SkyRegular", Arial, sans-serif;
    color: #444444;
    font-size: 14px;
    line-height: 20px;
}

.notificationsHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 12px;
    
    background-color: #f5f5f5;
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    
    font-size: 20px;
    
    /* Some horrible hack to fix a bug in safari where the header doenst render: GNS-830 */
    transform: translatez(0);
}

.notificationsHeader__close {
    line-height: 0;
}

.notificationsHeader__text {
    margin: 0;
}
/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/* 
    The main container
    This is where the fonts and background colour are set
*/
.skycasinoTheme.notificationsContainer {
}

/* 
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.skycasinoTheme .notificationsHeader {
}

.skycasinoTheme .notificationsHeader__text {
}

.skycasinoTheme .closeButton {
}

.skycasinoTheme .closeButton .icon--cross {
}

/* 
    Notifications list
*/
.skycasinoTheme .notificationList {
}

.skycasinoTheme .notificationList--empty {
}

.skycasinoTheme .notificationList--empty .icon--bell {
}

/* 
    Notification
*/
.skycasinoTheme .notification  {
}

.skycasinoTheme .notification--highlighted {
}

.skycasinoTheme .notification--clickable {
}

.skycasinoTheme .notification--clickable:hover {
}

.skycasinoTheme .notification__iconWrapper {
    background: green;
}

.skycasinoTheme .notification--typePromotion .notification__iconWrapper {
}

.skycasinoTheme .notification--typeInfo .notification__iconWrapper {
}

.skycasinoTheme .notification--typeGameLaunch .notification__iconWrapper {
}

.skycasinoTheme .notification--typePayment .notification__iconWrapper {
}

.skycasinoTheme .notification__iconWrapper .icon {
}

.skycasinoTheme .notification__bodyWrapper {
}

.skycasinoTheme .notification__title  {
}

.skycasinoTheme .notification__body {
}

.skycasinoTheme .notification__timestamp  {
}/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/* 
    The main container
    This is where the fonts and background colour are set
*/
.skyvegasTheme.notificationsContainer {
}

/* 
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.skyvegasTheme .notificationsHeader {
}

.skyvegasTheme .notificationsHeader__text {
}

.skyvegasTheme .closeButton {
}

.skyvegasTheme .closeButton .icon--cross {
}

/* 
    Notifications list
*/
.skyvegasTheme .notificationList {
}

.skyvegasTheme .notificationList--empty {
}

.skyvegasTheme .notificationList--empty .icon--bell {
}

/* 
    Notification
*/
.skyvegasTheme .notification  {
    background-color: #ffffff;
}

.skyvegasTheme .notification--highlighted {
    background-color: #FFF3F3;
}

.skyvegasTheme .notification--clickable {
}

.skyvegasTheme .notification--clickable:hover {
}

.skyvegasTheme .notification__iconWrapper {
}

.skyvegasTheme .notification--typePromotion .notification__iconWrapper {
    background: #fe8000;
}

.skyvegasTheme .notification--typeInfo .notification__iconWrapper {
    background: #4a7dc6;
}

.skyvegasTheme .notification--typeGameLaunch .notification__iconWrapper {
    background: #9d4590;
}

.skyvegasTheme .notification--typePayment .notification__iconWrapper {
    background: #0baeb0;
}

.skyvegasTheme .notification--typeLoyalty .notification__iconWrapper {
    background: #0d2051;
}

.skyvegasTheme .notification__iconWrapper .icon {
}

.skyvegasTheme .notification__bodyWrapper {
}

.skyvegasTheme .notification__title  {
}

.skyvegasTheme .notification__body {
}

.skyvegasTheme .notification__timestamp  {
    color: #8C8C8C;
}
/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/*
    The main container
    This is where the fonts and background colour are set
*/
.skybingoTheme.notificationsContainer {
    background-color: #ffffff;
}

/*
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.skybingoTheme .notificationsHeader {
    background-color: #ffffff;
}

.skybingoTheme .notificationsHeader__text {
}

.skybingoTheme .closeButton {
    height: 20px;
    margin: 0;
    padding: 0;
    width: 20px;
}

.skybingoTheme .closeButton .icon--cross {
}

/*
    Notifications list
*/
.skybingoTheme .notificationList {
    margin-top: 52px;
}

.skybingoTheme .notificationList--empty {
}

.skybingoTheme .notificationList--empty .icon--bell {
}

/*
    Notification
*/
.skybingoTheme .notification  {
    background-color: #ffffff;
}

.skybingoTheme .notification--highlighted {
    background-color: #FAF3FF;
}

.skybingoTheme .notification--clickable {
}

.skybingoTheme .notification--clickable:hover {
}

.skybingoTheme .notification__iconWrapper {
}

.skybingoTheme .notification--typePromotion .notification__iconWrapper {
    background: #fe8000;
}

.skybingoTheme .notification--typeInfo .notification__iconWrapper {
    background: #4a7dc6;
}

.skybingoTheme .notification--typeGameLaunch .notification__iconWrapper {
    background: #9d4590;
}

.skybingoTheme .notification--typePayment .notification__iconWrapper {
    background: #0baeb0;
}

.skybingoTheme .notification--typeLoyalty .notification__iconWrapper {
    background: #0d2051;
}

.skybingoTheme .notification__iconWrapper .icon {
}

.skybingoTheme .notification__bodyWrapper {
}

.skybingoTheme .notification__title  {
}

.skybingoTheme .notification__body {
}

.skybingoTheme .notification__timestamp  {
    color: #8C8C8C;
}
/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/*
    The main container
    This is where the fonts and background colour are set
*/
.skybetTheme.notificationsContainer {
	background-color: #ffffff;
	color: #3c3c3c;
	padding: 8px;
}

/*
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.skybetTheme .notificationsHeader {
	padding: 8px 12px;
    background-color: #ffffff;
	border-bottom: 1px solid #b4bfd3;
}

.skybetTheme .notificationsHeader__text {
	font-size: 16px;
	line-height: 32px;
}

.skybetTheme .closeButton {
	padding: 12px;
    margin-right: -8px;
}

.skybetTheme .closeButton .icon--cross {
	fill: #909db4;
}

/*
    Notifications list
*/
.skybetTheme .notificationList {
	margin-top: 52px;
}

.skybetTheme .notificationList--empty {
	color: #3c3c3c;
    display: inline-block;
	margin-top: 175px;
}

.skybetTheme .notificationList--empty .icon--bell {
	display: none;
}

/*
    Notification
*/
.skybetTheme .notification  {
	background: white;
	border: 1px solid #dce3ed;
	margin-bottom: 8px;
	padding: 12px;
}

.skybetTheme .notification--highlighted {
	background-color: #F6F8FB;
}

.skybetTheme .notification--clickable {
}

.skybetTheme .notification--clickable:hover {
}

.skybetTheme .notification__iconWrapper {
    background: blue;
}

.skybetTheme .notification--typePromotion .notification__iconWrapper {
	background-color: #e48213;
}
.skybetTheme .notification--typeLoyalty .notification__iconWrapper {
    background-color: #0d2051;
}
.skybetTheme .notification--typeInfo .notification__iconWrapper {
	background-color: #4a7dc6;
}

.skybetTheme .notification--typeGameLaunch .notification__iconWrapper {
	background-color: #9d4590;
}

.skybetTheme .notification--typePayment .notification__iconWrapper {
	background-color: #4a7dc6;
}

.skybetTheme .notification__iconWrapper .icon {
}

.skybetTheme .notification__bodyWrapper {
}

.skybetTheme .notification__title  {
	display:none;
}

.skybetTheme .notification__body {
	margin-bottom: 0;
}

.skybetTheme .notification__timestamp  {
	font-size: 12px;
	line-height: 16px;
	color: #6e6e6e;
	font-style: normal;
}/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/*
    The main container
    This is where the fonts and background colour are set
*/
.skylottoTheme.notificationsContainer {
    background-color: #ffffff;
}

/*
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.skylottoTheme .notificationsHeader {
    background-color: #fff;
}

.skylottoTheme .notificationsHeader__text {}

.skylottoTheme .closeButton {}

.skylottoTheme .closeButton .icon--cross {}

/*
    Notifications list
*/
.skylottoTheme .notificationList {}

.skylottoTheme .notificationList--empty {}

.skylottoTheme .notificationList--empty .icon--bell {}

/*
    Notification
*/
.skylottoTheme .notification {
}

.skylottoTheme .notification--highlighted {
    background-color: #ECFFFA
}

.skylottoTheme .notification--clickable {}

.skylottoTheme .notification--clickable:hover {}

.skylottoTheme .notification__iconWrapper {
    background: #01C18F;
}

.skylottoTheme .notification--typePromotion .notification__iconWrapper {
    background: #FF8B00;
}

.skylottoTheme .notification--typeInfo .notification__iconWrapper {
    background: #4a7dc6;
}

.skylottoTheme .notification--typeGameLaunch .notification__iconWrapper {
    background: #9d4590;
}

.skylottoTheme .notification--typePayment .notification__iconWrapper {
    background: #0baeb0;
}

.skylottoTheme .notification--typeLoyalty .notification__iconWrapper {
    background: #0d2051;
}

.skylottoTheme .notification__iconWrapper .icon {}

.skylottoTheme .notification__bodyWrapper {
    color: #333333;
}

.skylottoTheme .notification__title {
    display: none;
}

.skylottoTheme .notification__body {}

.skylottoTheme .notification__timestamp {
    color: #8C8C8C;
}
/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/*
    The main container
    This is where the fonts and background colour are set
*/
.fantasyfootballTheme.notificationsContainer {
  background-color: #f7f7f7;
  color: #0f3359;
  padding: 8px;
}

/*
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.fantasyfootballTheme .notificationsHeader {
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #0b1180 0%, #0a0c39 100%);
  color: #fff;
}

.fantasyfootballTheme .notificationsHeader__text {
  font-size: 16px;
  line-height: 32px;
}

.fantasyfootballTheme .closeButton {
  padding: 12px;
  margin-right: -8px;
}

.fantasyfootballTheme .closeButton .icon--cross {
  fill: #fff;
}

/*
    Notifications list
*/
.fantasyfootballTheme .notificationList {
  margin-top: 54px;
}

.fantasyfootballTheme .notificationList--empty {
  color: #0f3359;
  padding: 0;
}

.fantasyfootballTheme .notificationList--empty .icon--bell {
  display: none;
}

/*
    Notification
*/
.fantasyfootballTheme .notification {
  background: white;
  border: 1px solid #f7f7f7;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px 0px;
  margin-bottom: 8px;
  padding: 12px;
}

.fantasyfootballTheme .notification--highlighted {
  background-color: #eef0ff;
  border: 1px solid #eef0ff;
  border-left: 4px solid #2b3990;
}

.fantasyfootballTheme .notification--clickable {
}

.fantasyfootballTheme .notification--clickable .notification__body {
}

.fantasyfootballTheme .notification--clickable:hover {
  background-color: #f2f4ff;
}

.fantasyfootballTheme .notification__iconWrapper {
  background: #01C18F;
}

.fantasyfootballTheme .notification--typePromotion .notification__iconWrapper {
  background: #FF8B00;
}

.fantasyfootballTheme .notification--typeInfo .notification__iconWrapper {
  background: #4a7dc6;
}

.fantasyfootballTheme .notification--typeGameLaunch .notification__iconWrapper {
  background: #9d4590;
}

.fantasyfootballTheme .notification--typePayment .notification__iconWrapper {
  background: #0baeb0;
}

.fantasyfootballTheme .notification--typeLoyalty .notification__iconWrapper {
  background: #0d2051;
}

.fantasyfootballTheme .notification__iconWrapper .icon {
}

.fantasyfootballTheme .notification__bodyWrapper {
}

.fantasyfootballTheme .notification__title {
  display: none;
}

.fantasyfootballTheme .notification__body {
  margin-bottom: 0;
}

.fantasyfootballTheme .notification__timestamp {
  font-size: 12px;
  line-height: 16px;
  color: #5b5b5b;
  font-style: normal;
}
/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/*
    The main container
    This is where the fonts and background colour are set
*/
.itv7Theme.notificationsContainer {
  background-color: #ebebeb;
  color: #19262a;
  padding: 8px;
}

/*
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.itv7Theme .notificationsHeader {
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #faa526 0%, #f3a10a 100%);
  color: #fff;
}

.itv7Theme .notificationsHeader__text {
  font-size: 16px;
  line-height: 32px;
}

.itv7Theme .closeButton {
  padding: 12px;
  margin-right: -8px;
}

.itv7Theme .closeButton .icon--cross {
  fill: #fff;
}

/*
    Notifications list
*/
.itv7Theme .notificationList {
  margin-top: 54px;
}

.itv7Theme .notificationList--empty {
  color: #19262a;
  padding: 0;
}

.itv7Theme .notificationList--empty .icon--bell {
  display: none;
}

/*
    Notification
*/
.itv7Theme .notification {
  background: white;
  border: 1px solid #eaeaeb;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px 0px;
  margin-bottom: 8px;
  padding: 12px;
}

.itv7Theme .notification--highlighted {
  background-color: #fff8ee;
  border: 1px solid #fff8ee;
  border-left: 4px solid #faa526;
}

.itv7Theme .notification--clickable {
}

.itv7Theme .notification--clickable .notification__body {
}

.itv7Theme .notification--clickable:hover {
  background-color: #fffdfb;
}

.itv7Theme .notification__iconWrapper {
  background: #01C18F;
}

.itv7Theme .notification--typePromotion .notification__iconWrapper {
  background: #FF8B00;
}

.itv7Theme .notification--typeInfo .notification__iconWrapper {
  background: #4a7dc6;
}

.itv7Theme .notification--typeGameLaunch .notification__iconWrapper {
  background: #9d4590;
}

.itv7Theme .notification--typePayment .notification__iconWrapper {
  background: #0baeb0;
}

.itv7Theme .notification--typeLoyalty .notification__iconWrapper {
  background: #0d2051;
}

.itv7Theme .notification__iconWrapper .icon {
}

.itv7Theme .notification__bodyWrapper {
}

.itv7Theme .notification__title {
  display: none;
}

.itv7Theme .notification__body {
  margin-bottom: 0;
}

.itv7Theme .notification__timestamp {
  font-size: 12px;
  line-height: 16px;
  color: #5b5b5b;
  font-style: normal;
}
/*
    This stylesheet will be used to override the base styles in the components repo.
 */

/*
    The main container
    This is where the fonts and background colour are set
*/
.super6Theme.notificationsContainer {
  background-color: #eaeaeb;
  color: #132773;
  padding: 8px;
}

/*
    The header, which contains:
    * the title text "Notifications"
    * the close button
*/
.super6Theme .notificationsHeader {
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #132774 0, #041456);
  color: #fff;
}

.super6Theme .notificationsHeader__text {
  font-size: 16px;
  line-height: 32px;
}

.super6Theme .closeButton {
  padding: 12px;
  margin-right: -8px;
}

.super6Theme .closeButton .icon--cross {
  fill: #fff;
}

/*
    Notifications list
*/
.super6Theme .notificationList {
  margin-top: 54px;
}

.super6Theme .notificationList--empty {
  color: #0f3359;
  padding: 0;
}

.super6Theme .notificationList--empty .icon--bell {
  display: none;
}

/*
    Notification
*/
.super6Theme .notification {
  background: white;
  border: 1px solid #eaeaeb;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px 0px;
  margin-bottom: 8px;
  padding: 12px;
}

.super6Theme .notification--highlighted {
  background-color: #eef0ff;
  border: 1px solid #eef0ff;
  border-left: 4px solid #2b3990;
}

.super6Theme .notification--clickable {
}

.super6Theme .notification--clickable .notification__body {
}

.super6Theme .notification--clickable:hover {
  background-color: #f2f4ff;
}

.super6Theme .notification__iconWrapper {
    background: #01C18F;
}

.super6Theme .notification--typePromotion .notification__iconWrapper {
    background: #FF8B00;
}

.super6Theme .notification--typeInfo .notification__iconWrapper {
    background: #4a7dc6;
}

.super6Theme .notification--typeGameLaunch .notification__iconWrapper {
    background: #9d4590;
}

.super6Theme .notification--typePayment .notification__iconWrapper {
    background: #0baeb0;
}

.super6Theme .notification--typeLoyalty .notification__iconWrapper {
    background: #0d2051;
}

.super6Theme .notification__iconWrapper .icon {
}

.super6Theme .notification__bodyWrapper {
}

.super6Theme .notification__title {
  display: none;
}

.super6Theme .notification__body {
  margin-bottom: 0;
}

.super6Theme .notification__timestamp {
  font-size: 12px;
  line-height: 16px;
  color: #5b5b5b;
  font-style: normal;
}
.closeButton {
   height: 36px;
   width: 36px;
   padding: 10px;
   margin-right: -10px;
}

.closeButton .icon--cross {
   cursor: pointer;
   
   fill: #cdcdcd;
}

.closeButton .icon--cross:hover {
   fill: black;
}

.notification {
    display: flex;
    align-items: center;
    height: auto;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;

    font-size: 14px;
    line-height: 20px;
}

.notification--highlighted {
    background-color: beige;
}

.notification--clickable {
    cursor: pointer;
}

.notification__iconWrapper {
    height: 56px;
    width: 56px;
    padding: 16px;
    border-radius: 50%;

    background: gray;
}

.notification__iconWrapper .icon {
    width: 24px;
    height: 24px;
    fill: white;
}

.notification__bodyWrapper {
    margin: 0 0 0 16px;
}

.notification__body {
    margin-bottom: 5px;
    width: 100%;
}

.notification__title {
    margin: 5px 0;
    font-family: SkyMedium, Arial, sans-serif;
    font-size: 16px;
}

.notification__timestamp {
    font-size: 0.8em;
    font-style: italic;
}

.notificationList {
   width: 100%;
   margin-top: 68px;
   
   position: relative;
   display: none;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 600ms, visibility 600ms;
   transition: opacity 600ms, visibility 600ms;
}
 
.notificationList--shown {
   display: block;
   visibility: visible;
   opacity: 1;
   animation: fade 1s;
 }
 
.notificationList--empty {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   
   text-align: center;
   color: #989898;
}

.notificationList--empty .icon--bell {
   width: 50px;
   
   fill: #cdcdcd;
}

.animated {
  animation: placeholderShimmer 2s linear 0s infinite normal forwards;
  background: linear-gradient(to right, #e9e9e9 8%, #e3e3e3 18%, #e9e9e9 33%);
}

.placeholder__spacer {
  height: 12px;
  background: #fff;
}

.shimmer__placeholder {
  position: relative;
  height: 12px;
}

.shimmer__placeholder:after {
  position: absolute;
  right: 0;
  content: '';
  background: #fff;
  height: 12px;
}

.shimmer__placeholder.title__loader:after {
  width: 20%;
  height: 14px;
}

.shimmer__placeholder.timestamp__loader:after {
  width: 90%;
}

.shimmer__placeholder.body__loader {
  height: 14px;
}

.shimmer__placeholder.body__loader:after {
  width: 40%;
  height: 14px;
}

.notification__iconWrapper {
  height: 56px;
  width: 56px;
  padding: 16px;
  border-radius: 50%;
  background-color: #f6f6f6;
}

.icon__image__container {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: 56px;
  border-bottom: 15px solid #fff;
  border-top: 15px solid #fff;
}

.icon__image {
  height: 56px;
  width: 56px;
  border-radius: 50%;
}

.loading__placeholder__container {
  width: 100%;
  margin-top: 68px;
  /* position: relative; */

  position: fixed;
  top: 0;
  bottom: 0;
  padding-right: 30px;

  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}

.loading__placeholder__container--shown {
  display: block;
  visibility: visible;
  opacity: 1;
  animation: fade 1s;
}

.loading__placeholder__notification {
  display: flex;
  align-items: center;
  height: auto;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
}

.loading__placeholder__notification--shown {
  display: block;
  visibility: visible;
  opacity: 1;
  animation: fade 1s;
}

.loading__container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  background-color: #ffff;
  box-sizing: border-box;
}

.icon__container {
  display: flex;
  width: 57px;
}

.fields__container {
  border-left: 20px solid #fff;
  width: 100%;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes placeholderShimmer {
  0% {
    background-position: -500px 0;
  }
  100% {
    background-position: 500px 0;
  }
}