/* vyhladavanie fix a aby bol pod logom*/
#NavbarSearchInputItem {
    top: 150%;
    left: 1em;
    right: 1em;
    width: calc(100% - 2em);
    transition: .5s all ease-in-out;
}

/* toto len robi peknu animaciu Textu ktory je vo vyhladavacom inpute*/
#NavbarSearchInputItem .form-label {
    opacity: 1;
    transition: .5s all;
}
#NavbarSearchInputItem:focus-within .form-label {
    opacity: 0;
    left: 25%;
}
/* tato vyska prisposoby ostatok na novy vysku hlavicky ktora sa robi podla JS*/
.slides-container, #NavbarCategoriesItem, #scrollDIV {
    height: 100% !important;
}
/* pridava podporu 3 a 4 ROWU kategorii*/
.NavbarGenresItem .row3,
.NavbarGenresItem .row4 {
padding-right: 15px;
display: table !important;
}
.NavbarCarousel.slim-version .NavbarGenresItem .nav-link {
    margin: 4px 10px 3px 0;
}

/* veci iba pre mobil verziu*/
@media (max-width: 768px) {
    /* toto zvetsi vyhladavaci input v mobile ked je kliknuty nan*/
    #NavbarSearchInputItem:focus-within {
        width: 200%;
    }
    /* spravi aby sa logo prisposobovalo novej sirke*/
    .navbar-brand {
        width: 100% !important;
    }
    /* nova sirka loga trocha vetsia od originalu*/
    .NavbarCarousel .button-logo-container {
        width: 80px;
    }
    /* da vyhladavanie trocha blizsie ku stene*/
    #NavbarSearchInputItem {
        left: .5em;
        width: calc(100% - .1em);
    }
}
/* opravi aby Xko vo vyhladavani malo kursor myski z prstom*/
.fa-x {
    cursor: pointer;
}

/* spravi pekne kockove nahladi hier */
#grid-game {
    display: grid;
	width: auto;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: auto;
	grid-gap: 1rem;
}
.card-img-top {
    object-fit: cover;
    object-position: center;
}
/* spravi peknu animaci pre title hier */
.GameTile.title-hover .card-body {
    width: 100% !important;
    display: block !important;
    opacity: 0;
    transition: .25s all;
    bottom: -20px
}
.GameTile.title-hover:hover .card-body {
    opacity: 1;
    bottom: 10px
}
/* spinner aby bol na celu sirku  a nebol cel cely web*/
#spinner-wrapper, .Button.btn {
    grid-column: 1/-1;
}

#spinner {
    text-indent: 0;
}

/* obrazok v hrach aby zakryl */
.img-icon {
    object-fit: cover;
}
/* iconky pod hour aby boli pekne */
.fa-eye {
    margin-right: .2em;
}
.fa-eye::before {
    transition:all .25s ease-in-out;
}

.card-body i:hover::before {
    color: yellow !important;
}
 
.vote-container > p{
    display: flex !important;
    align-items: center;
}

.fa-expand::before {
    opacity: .8;
    transition: all .25s ease-in-out;
}
.fa-expand:hover::before {
    opacity: 1;
}
/* prehravac hier aby bol v sdtrede a by sa objavil */
ruffle-player {
    z-index: 1;
    width: 100%;
    height: 100%;
}
.game-info-container, .blur-cover {
    z-index: 2;
}


/* vlajky yay */
.flag-sprite {
    background-image: url(../../images/flags.png);
}
.flag-en {
    background-position: -31px -86px;
}
.flag-default {
    background-position: -89px -86px;
}

#LanguagesMenu {
    overflow: hidden;
}

#langList {
    display: block !important;
    height: 0px;
    opacity: 0;
    transition: .25s all ease-in-out;
    padding: 0;
    z-index: -1;
    left: 100%;
}

#LanguagesMenu:hover,
#LanguagesMenu:focus-within {
    overflow: visible;
}

#LanguagesMenu:hover > #langList,
#LanguagesMenu:focus-within > #langList,
#LanguagesMenu #langList:hover,
#LanguagesMenu #langList:focus {
   opacity: 1;
   height: auto;
   padding: 20px 0;
   z-index: auto;
   left: auto;
}

#LanguagesMenu:hover,
#LanguagesMenu:focus-within {
    border-radius: 0 0 20px 20px;
}


@media screen and (max-width:870px) { 
    .navbar-nav {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .Footer .LanguagesMenu .lang-list {
        left: unset;
        transform: unset;
        border-radius: 20px 20px 0 20px !important;
    }
}

.GameFrameContainer .bottom-bar-game-frame i::before { 
    cursor: default;
}

/* vyska pre hlavicku aby nemusel byt tam javascript zbytocny :3*/
.NavbarCarousel.slim-version > .container-fluid:first-of-type {
    height: 150px;
}
@media (min-width: 768px) {
    .NavbarCarousel.slim-version > .container-fluid:first-of-type {
        height: 170px;
    }
}

/* toto tam je ze ked tam nieje footer menu aby jazyl bol uplne napravo*/
.navbar-nav {
    display: grid !important;
    place-items: center;
    height: 100%;
}
.navbar-nav > li {
    margin-left: auto;
    margin-right: 3em;
}
.Footer .LanguagesMenu {
    margin: 0 0 0 auto !important;
}
@media (max-width: 768px) {
    .navbar-nav > li {
        margin-right: 0 !important;
    }
}
/*toto aby text 'novinky' neol zakrity headerom*/
.NavbarCarousel > .container-fluid {
    margin-bottom: 2em;
}

/* fix stranky v hre coje neviem preco toje pokazene*/
#TextBox {
    box-shadow: unset;
    background-color: unset;
    height: auto;
    padding: 0 !important;
    z-index: 1;
}
#NavbarMain {
    margin-bottom: 3em;
}

.card-body i::before {
    color: #0b5767 !important;
}

/* hlavicka ked som skryl to + co bolo napravo v hlavicke tak aby sa kateogire natiahly az do konca*/
@media (max-width: 768px) {
    .NavbarCarousel .slides-container {
        width: calc(100% - 65px );
        left: 65px;
    }
}

/* neviem preco ale na mobile ked je tato hodnota menej ako 200px pokazi sa title pre hry na hernej stranke*/
.GameFrameContainer .bottom-bar-game-frame .card-title {
    max-width: calc(100% - 200px);
}

.Footer {
    position: unset;
}

/* Zmena temy*/

/* aby neboly loga falosne v pozadi*/

:root {
    --color1: #0b5767;
    --color2: #039e9c;
    --shadow:#097780;
}


body,html {
    background-image: none;
    background-color: var(--color1);
    margin-bottom: 0;
}

.NavbarCarousel .navbar-brand,
.NavbarCarousel .button-container-box {
    background-image: linear-gradient(to bottom, #18ded6, #04c0b7 100%);
}
.NavbarCarousel > .container-fluid {
    box-shadow: 0 3px 0 0 var(--shadow), 0 15px 20px 0 rgba(4, 3, 61, 0.3);
    background-color: #0d8c92;
}
.NavbarCarousel .input-group {
    box-shadow: 0 2px 3px 0 rgba(34, 75, 140, 0.26), 0 2px 5px 0 rgba(255, 255, 255, 0.06), inset 0 4px 7px 0 rgba(0, 14, 54, 0.52);
    border: solid 1px rgba(151, 151, 151, 0.16);
    background-image: linear-gradient(to bottom, var(--color2) -8%, #04c0b7 122%);
}
.NavbarCarousel .form-control + .form-label,
.NavbarCarousel .input-group-text {
    color: #18ded6;
}

.ButtonGenre {
    box-shadow: 0 4px 7px 0 rgba(0, 7, 92, 0.4);
    border: solid 2px #09b6b4;
    background-color: #005e73;
}

.NavbarCarousel .button-container-box {
    box-shadow: -2px -5px 15px 0 var(--shadow);
}
.NavbarCarousel .button-option {
    background-color: var(--color2);
}
.GameTile.title-hover .card-body {
    background-image: linear-gradient( to bottom, rgba(11, 33, 103, 0), var(--shadow) 80% );
}
.GameTile .card-title {
    color: #84cbf2;
}
.GameFrameContainer .play-button-container {
    background-color: var(--color1);
}

.GamesList .Button.full-width,
.GameFrameContainer .play-button-container .Button {
    background-color: #a0e325 !important;
    box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.38), inset 0 -3px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 15px 0 rgba(0, 14, 54, 0.52), 0 -20px 20px 0 rgba(255, 255, 255, 0.06);
}
.Button {
    color: var(--color1);
}
.Footer {
    background-color: #04b5ab;
    background-image:none;
}
.Footer a:hover {
    color: #f9ea00;
}
.bg-logo {
    background-image: none;
}
.Footer .LanguagesMenu {
    background-color: #1fd6cf;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09), inset 0 1px 3px 0 rgba(255, 255, 255, 0.08);
}
.LanguagesMenu .lang-list {
    background-color: var(--color2);
}
.GameFrameContainer .bottom-bar-game-frame {
    background-image: linear-gradient(to bottom, #18ded6, #04c0b7 100%);

}
.TextBox > div,
.BoxTag > button {
    box-shadow: 0 6px 12px 0 var(--shadow),inset 0 4px 10px 0 rgba(0,31,71,.23);
    border-color: var(--color2);
    background-color:#0d8c92 ;
}
.BoxGenre button:hover, .BoxTag button:hover {
    background-color: var(--color1);
}
.CollapseDiv .collapse-content {
    background-color: #0b5767;
}
.CollapseDiv h3 {
    background-color:#039e9c;
}