/* 18/03 Andreani S. */
/* casino */

app-casino-tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: left;
}
.casino-header {
  background-color: var(--c-primary-b);
  display: flex;
  padding: 0 8px;
}
#root .casino-header app-widget-host {
  flex-direction: row;
  justify-content: space-between;
}
#root .casino-header .casino-filter {
  margin: 8px 0;
  width: 188px;
}
#root .casino-shortcuts-tabs .window-tab.casino-shortcut-tab {
  align-items: center;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  justify-content: center;
  padding: 0 16px;
}
#root .casino-shortcuts-tabs {
  height: 100%;
  margin-top: 0;
}
#root .casino-shortcuts-tabs .window-tab.casino-shortcut-tab.tab-selected {
  background-color: transparent;
  border-bottom: 4px solid var(--c-emphasis);
}
.casino-container .brands-menu {
  display: inline;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px;
  flex: 0 0 200px;
}
#root .casino-container .casino-tab-button.selected-provider {
  background-color: var(--c-emphasis);
  color: var(--c-background);
}
#root .casino-container .casino-tab-button {
  box-shadow: none;
  margin: 2px 0 2px 4px;
  text-align: left;
  background-color: var(--c-shade);
  border: 1px solid var(--c-shade);
}
.casino-container .games {
  display: flex;
  flex-direction: row;
  flex: 1 1 100%;
  flex-wrap: wrap;
  padding: 0;
  height: auto;
  justify-content: flex-start;
  overflow-y: auto;
}

#root .desktop app-casino-games-desktop .games .casino-group,
#root .desktop .subs-menu + app-casino-games-desktop .games,
#root .desktop .brands-menu + app-casino-games-desktop .games,
#root .desktop.view-page-tvgames  app-casino-games-desktop .games {
  max-width: 100%;
  margin: 0 5px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  overflow-x:hidden;
}

#root .desktop app-casino-games-desktop .games .casino-group .casino-title {
  grid-column: 1 / -1;
  
}

.casino-container .games .game {
  background-color: var(--c-shade-b);
  border: solid 1px var(--c-tint);
  height: auto;
  border-radius: var(--r-b);
  cursor: pointer;
  display: block;
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 380px;
  margin: 2px;
  /* opacity: 1; */
  /* filter: grayscale(0); */
  overflow: hidden;
  text-align: center;
  transition: opacity .25s;
  padding: 1px;
}
.casino-container .games .casino-group {
  display: flex;
  flex-wrap: wrap;
  padding-top: 8px;
}
.casino-container .games .casino-group .casino-title {
  background-color: var(--c-primary-b);
  border: solid 1px var(--c-tint);
  border-radius: var(--r-b);
  color: var(--c-emphasis);
  font-size: 16px;
  margin-bottom: 8px;
  padding: 8px;
  width: 100%;
}
.casino-container .games .game:hover {
  /* opacity: 1; */
  /* filter: grayscale(1); */
}
.casino-container .games .game p {
  color: var(--c-paper);
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
}

.desktop .casino-container .games .game p:after {
  content:'\APLAY NOW';
  white-space: pre;
  width: 100%;
  font-size: 24px;
  line-height: 16px;
  text-decoration: overline;
  font-weight:  400;
  display:  block;
  width: auto;
}
.casino-container .games .game:hover p {
  color: var(--c-emphasis);
}
.casino-container .games .game-image {
  display: block;
  height: auto;
  width: 100%;
  object-fit: cover;
}
.casino-container .subs-menu {
  display: flex;
  justify-content: center;
}
.show-games-wrapper {
  width: 100%;
}
.show-games-wrapper button {
  border-radius: var(--r-b);
  padding: 1em;
}

/* casino mobile */

.mobile .casino-filter {
  background-color: var(--c-primary-b);
  border-top: 1px solid var(--c-tint);
  border-bottom: 1px solid var(--c-tint);
  /* margin-bottom: 8px; */
  padding: 8px;
}
.mobile .casino-filter input {
  width: 100%;
}
.mobile .casino-container .games {
  padding: 0 8px;
}
.mobile.portrait .casino-container .games .game {
  flex: 0 0 100%;
}
.mobile .casino-container .brands-menu {
  padding: 0;
}
.mobile .casino-container .brands-menu ul {
  margin: 0;
  padding: 0;
}
.mobile app-casino-tabs {
  box-sizing: border-box;
  padding: 0 8px;
  width: 100%;
}
.mobile.portrait .brands-menu {
  width: 100%;
}
.mobile.landscape .brands-menu {
  /* width: 30%; */
}
.mobile .brands-menu .casino-menu {
  width: 100%;
}
.mobile .brands-menu .casino-menu li {
  border-radius: var(--r);
  border: solid 1px var(--c-tint);
  display: block;
  margin-bottom: 8px;
}
.mobile .brands-menu .casino-menu li.selected {
  color: var(--c-emphasis);
}
.mobile .brands-menu .casino-menu li > span {
  align-items: center;
  display: flex;
  font-size: 16px;
  min-height: 24px;
  min-width: 24px;
  padding: 1em .5em 1em 1em;
}
.mobile .brands-menu .casino-menu li > span:after {
  align-items: center;
  color: var(--c-white);
  content: '+';
  display: flex;
  font-size: 24px;
  height: 16px;
  justify-content: center;
  margin-left: auto;
  width: 24px;
}
.mobile.portrait .brands-menu .casino-menu.has-selection li {
  display: none;
}
.mobile.portrait .brands-menu .casino-menu.has-selection li.selected {
  display: block;
}
.mobile .brands-menu .casino-menu.has-selection li.selected > span:after {
  color: var(--c-emphasis);
  content: '-';
}
.mobile.landscape .brands-menu .casino-menu .games {
  /* bottom: 8px; */
  /* display: block; */
  /* padding: 0 0 8px; */
  /* position: absolute; */
  /* right: 8px; */
  /* top: 54px; */
  /* width: calc(70% - 16px); */
}
.mobile.landscape .brands-menu .casino-menu .games .game {
  display: block;
  width: 100%;
}
#root .app-body .mobile .content {
  min-height: calc(100% - 54px) !important;
}


/* DiS Changes */

#root .casino-container {
  background-color: var(--c-primary-d);
  display:  flex;
  flex-direction:  row;
  align-items: start;
  height: calc(100vh - 172px);
}

#root .casino-container .game {
  position:  relative;
  background-color: var(--c-black);
  min-height: 160px;
}

#root .casino-container .game:hover .game-name {
  color: var(--c-white-e);
}

#root .casino-container .game .game-name{padding: 0;position:  absolute;width:  100%;font-size: 24px;font-weight: 600;top: calc(50% - 41px);color: transparent;}
#root .casino-container .game-image {
  filter: blur(0px);
  opacity: 1;
  transform: scale(1);
  transition: all 200ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
#root .casino-container .game-image:hover{
  filter: blur (2px);
  opacity: 0.1;
  transform: scale(1.15);
  transition: all 300ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

#root .mobile .casino-container .game {flex: 1 1 200px;max-width: 400px;min-width: 200px;}
#root .casino-container .game .game-name{padding: 0;position:  absolute;width:  100%;font-size: 20px;font-weight: 600;line-height: 20px;/* top: 0px; */color: transparent;}

#root app-casino-games-desktop {
  display: inline-flex;
  flex: 1 1 100%;
  flex-direction:  row;
  align-items: start;
  height: auto;
  height: 100%;
  overflow-y: auto;
  padding: 2px;
}

#root .casino-wrapper {
}

#root .mobile .casino-container {
  flex-direction: column;
}
#root .mobile .casino-container .brands-menu {
  flex: 0 0 auto;
}

#root .mobile .brands-menu app-casino-tabs {
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#root .mobile app-casino-games-desktop .games {
  
}
#root .mobile .casino-container .game {
  min-height: 80px;
}
#root .mobile .casino-container .casino-tab-button {
  flex: 1 0 auto;
  text-align: center;
  max-width:160px;
}

.wallet-container {
  padding: 8px 0 8px 8px;
}
.wallet-container .user-balance-wrapper,
.wallet-container .provider-balance-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wallet-container .provider-deposit,
.wallet-container .provider-withdraw {
  box-sizing: border-box;
  margin: 8px 0;
  padding: 8px;
  /* width: 100%; */
}
#root .wallet-container .numeric-input-wrapper {
  position: relative;
}
#root .wallet-container .numeric-input-wrapper input {
  border: 1px solid rgba(0,0,0,.25);
  height: auto;
  position: relative;
  width: auto;
}
#root .wallet-container .label-value-container label {
  align-items: center;
  display: flex;
}
.game-iframe-open {
  overflow:hidden;
}
.game-iframe-open .casino-container .casino-iframe{
  position:fixed;
  width:100%;
  height:calc(100% - 36px);
  min-height:unset;
  top:36px;
  left:0px;
  z-index:10000;
  background-image:unset!important;
  background-color:var(--c-background)
}
.game-iframe-open .casino-container .close-game-iframe {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:36px;
  padding:0px 8px;
  padding-left:36px;
  text-align:left;
  background-color:var(--c-primary);
   z-index:10000;
  background-image:url(/v2.09/r/images/site/icons/back-arrow.svg);
  background-repeat:no-repeat;
  background-position:4px center;
}
.game-iframe-open .casino-container .casino-iframe iframe {
  position:absolute;
  min-height:unset;
  height:100%;
  width:100%;
}
#root .single-game-lobby .casino-iframe {
  min-height:unset;
  position:fixed;
  width:100%;
  height:calc(100% - 36px);
  top:36px;
  left:0px;
}
#root .single-game-lobby .casino-iframe iframe {
  position:absolute;
  min-height:unset;
  height:100%;
  width:100%;
}
#root .casino-back-header {
  position:fixed;
  top:0px;
  height:36px;
  left:0;
  width:100%;
}
#root .casino-back-header > app-widget-host {
  display:flex;
  align-items:center;
  flex-direction:row;
  height:100%;
  padding:0px 15px;
}
#root .casino-back-header .back-button {
  display:flex;
  align-items:center;
}
.mobile-game-carousel .slideshow-container {
    position: relative;
    height: auto !important;
    width: 100%;
    padding-bottom: 25%;
}
.casino-block.casino-showcase {
  display:block;
  padding:10px;
}
#root .casino-showcase .casino-type-top > app-widget-host{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  padding:0px 5px;
}
#root .casino-block.casino-showcase .casino-container {
  min-height:unset;
  background-color:transparent;
  padding-top:0px;
}
#root .casino-block.casino-showcase .casino-container .games {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:0;
}
#root .casino-block.casino-showcase .casino-container .games .game {
 height:80px;
  
  flex:unset
}

#root .casino-block.casino-showcase.easygames .casino-container .games .game  {
  min-width: 150px;
}
#root .casino-block.casino-showcase .category-link div {
  padding:2px 10px;
  background-color:var(--c-emphasis-b);
  border-radius:10px;
  font-size:11px
}
.game-iframe-open iframe#launcher {
  display:none;
}