.game-search {
    position: relative;
    width: 100%;
}

.game-search * {
    box-sizing: border-box;
    position: relative;
    font-size: 14px;
    color: #ddd;
    letter-spacing: 1px;
}

.game-search-menu {
    /*overflow: auto;*/
}

.search-input {
    width: 60%;
    float: left;
}

.search-input-box {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 5px 65px 5px 5px;
    background: #444444;
}

.search-input-box:focus {
    background: #333;
}

.search-input-clear {
    display: none;
    position: absolute;
    top: 0;
    right: 30px;
    width: 30px;
    height: 30px;
    background: #444 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5JREFUSIntlL1Ow0AQBmcjkA0WpKdE0dH5EQh1LBB5UYIUmTr2I7impqJCMoqRyNIgsOMfbSKXN+Xe6pvbO92Bx+PxHIlYmvSaKSesgS0hSykoG+sxEVueEU755kFe+Rhld+rI1aHqUL1hozFRXaqO7G/dkVkyJ0Z39b8L5lSkGhP9TvoC3Hb2DmA76i6BkKFIqxaQ7F/F0eJeeTPJLD1IPCg/UAr2O65LtFXbobx31AdjjGhMREWKMu9uYENJIm98WvJME/dIc6T2dIQ7IlK94nw0MRVPLWnIgoAEyBvyC1bjiZWzfakUlFJQErJoyCGwRNre8YxLJqyBL0Iee77MFRCw4360L9Pj8Xi6+AHWf2hpJgSftwAAAABJRU5ErkJggg==") no-repeat center;
    font-size: 12px;
    color: red;
    cursor: pointer;
}

.search-input-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: #444 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAolJREFUSIntlj1oVEEQx3+z52ERrwqIghjy3sudGlC5mErUxoiIlVorImohfjSSRhsVBAsV1KSIIBgIlmIn2qiN+IUmKMGX3QPBUhQ5jOhlx8J3+gh357tTG/HfvJ1hZn6zw7L74L/+dUmWIGvtNmADsA4YAN4Bj4Enc3NzN4vFovuj4EqlssR7PwZsbxH2SUSGe3t7r4iI/jbYObcFmFDV7sRVA14Cz1S1W0QGgaWplLve+519fX0fOwbPzMwsNsa8qkNVdTyfzx/t6el5P6+5jcA1VQ2SuLEoig5kAZuG3YiMpqB7oijaPR8KEATB/dnZ2TXAnSRvv3NuqCNwkrgjgY5HUXS9VYH+/v5qrVbbC3xIckY7AnvvNyXLL/l8/miWIqVS6a2InEnMMI7jZW2DjTEDyXKy0XibSVXvpcyBpoHNwKo6ACAiz7JCAbz3U8BXAGNMuW0w8Dn5LmwHXCgUFgC5rPGNwE/h586zqlqtrk3Ve902WFXrI15prV2eFWyM2Vpfi8hU22BjzG1A+T62q1mgcRyvUtXjifkgCILJtsFBEDwCRhJzyDl3WlUbXjQA1trlxpgJkjOhqmezNNuwYFdX1zBQSQqdcM49iOO4nG5genq64JzbB0wBa+p+Edmlqr989Vo9Equ99zdEZGXKXQVeAN1AqVm+qo6FYXiw1WvVdIRBEEzmcrkycB7wiXsRsB5YkYK+ADar6kG+n436nT3SaudZfwSKCXAQKKvqBxF5rqoPwzC8JSIewDl3SFUvp1JHwjA81DG4HVlrjwEXfgBELgVBcGR+XNNRd6owDC+q6nDdVtXD1tqLfx0MEEXROVU9mXK9+RucpnLOnbLWDv868r/+RX0D1YkKyx/wi1kAAAAASUVORK5CYII=") no-repeat center;
    cursor: pointer;
}

.search-input-clear:hover, .search-input-btn:hover {
    background-color: #333;
}

.search-input-btn:active {
    background-color: black;
}

.search-suggest {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow: auto;
    z-index: 1;
    background: rgba(68, 68, 68, .9);
}

.search-suggest-item {
    padding: 7px;
    cursor: pointer;
}

.search-suggest-item.active {
    background: #222;
}

.search-suggest-item:hover {
    background: #222;
}

.search-suggest-item:active {
    background: black;
}

.search-sort {
    width: 39%;
    float: right;
}

ul.search-sort {
    background: #444;
    text-align: center;
}

ul.search-sort li {
    padding: 7px;
}

li.search-sort-title {
    width: 32%;
    float: left;
}

li.search-sort-options {
    width: 34%;
    float: left;
    cursor: pointer;
}

li.search-sort-options:hover {
    background-color: #333;
}

li.search-sort-providers {
    width: 34%;
    float: left;
    cursor: pointer;
}

li.search-sort-providers:hover {
    background-color: #333;
}

ul.search-sort ul {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 1;
    width: 100%;
    background: rgba(68, 68, 68, .9);
}

li.search-sort-options:hover ul, li.search-sort-providers:hover ul {
    display: block;
}

ul.search-sort ul li:hover {
    background: #222;
}

ul.search-sort ul li:active {
    background: black;
}

.search-games-header {
    display: table;
    top: 10px;
    width: 100%;
    height: 30px;
    padding: 5px;
    font-size: 17px;
    background: #444;
}

.search-games-list {
    top: 15px;
}

.search-game-wrap {
    width: 25%;
    height: auto;
    float: left;
    padding: 5px;
}

.search-game-image-wrap {
    background: #444;
    border: 1px solid #666;
}

.search-game-img {
    display: block;
    width: 100%;
    height: auto;
}

.search-game-jackpot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    background: rgba(0, 0, 0, .8);
    text-align: center;
    text-transform: uppercase;
}

.search-game-title-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    text-transform: uppercase;
}

.search-game-title {
    padding: 5px;
    text-align: center;
}

.search-game-description {
    display: none;
}

.search-game-actions-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;    
    transition: opacity 0.2s ease-in-out;
}

.search-game-actions-wrap:hover {
    opacity: 1;
}

.search-game-actions-btn {
    width: 80%;
    padding: 8px;
    background: #ffd200;
    font-family: tex, Arial, Helvetica, sans-serif;
    font-weight:bold;
    color: black;
    text-transform: uppercase;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0px 0px 5px black;
    -webkit-box-shadow: 0px 0px 5px black;
    box-shadow: 0px 0px 5px black;
    cursor: pointer;
}

.search-game-actions-btn:hover {
    background: #e5bd00;
}

.search-game-actions-btn:active {
    background: black;
    color: #ddd;
}

.search-game-actions-btn.play-real {
    margin: 38px 0 0 0;
}

.search-game-actions-btn.play-fun {
    margin: 10px 0 0 0;   
}