.container.grid {
    position: relative;
    display: grid;
    margin-bottom: 30px;
}

.card-hp:hover .game-image,
.card:hover .game-image { /* IE 9 */ /* Safari 3-8 */
    transform: scale(1.3);
}

.card-hp:hover .btn-play-kazi-real-rd,
.card:hover .btn-play-kazi-real-rd { /* IE 9 */ /* Safari 3-8 */
    transform: scale(1.3);
    background: linear-gradient(180deg, #23AAE2 0%, #80D6FA 100%);

}

.btn-play-kazi-real-rd {
    transition: 0.6s,background 0.6s;
}

.all-games-link {

    width: 37%;
    margin-top: 11px;
    text-align: end;
    padding-right: 35px;
}

.all-games-link  a {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.47px;
    color: #005C95;
}

.grid .wrapper {
    display: grid;
    grid-template-columns: minmax(160px, 160px);
    /*gap: 10px; */
    grid-row-gap: 5px;
    grid-auto-columns: 160px;
    grid-auto-flow: column;
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    cursor: grab;
}

.grid .wrapper-hp {
    display: grid;
    grid-template-columns: minmax(199px, 199px);
    /*gap: 10px; */
    grid-row-gap: 5px;
    grid-auto-columns: 199px;
    grid-auto-flow: column;
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    cursor: grab;
}

.flat {
    grid-template-rows: 210px;
    grid-column-gap: 20px;
}
.flat-hp {
    grid-template-rows: 210px;
    grid-column-gap: 12px;
}
.comp{
	grid-template-rows: 160px 160px;
	grid-column-gap: 7.69px;
}
.comp-hp{
	grid-template-rows: 199px 199px;
	grid-column-gap: 12px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.wrapper::-webkit-scrollbar {
    display: none;
}
.wrapper-hp::-webkit-scrollbar {
    display: none;
}

.card-hp {
    height: 199px;
    width: 199px;
    position: relative;
    border-radius: 16px;
    z-index: 0;
    overflow: hidden;
}
.card {
    height: 160px;
    width: 160px;
    position: relative;
    border-radius: 16px;
    z-index: 0;
    overflow: hidden;
}

.card-sq {
    grid-column-end: span 2;
    grid-row-end: span 2;
    border-radius: 16px;
    height: 327px;
    width: 327px;
}
.card-sq-hp {
    grid-column-end: span 2;
    grid-row-end: span 2;
    border-radius: 16px;
    height: 404px;
    width: 404px;
}
.rect-card {
    grid-column-end: span 2;
    border-radius: 16px;
    height: 160px;
    width: 330px;
}
.rect-card-hp {
    grid-column-end: span 2;
    border-radius: 16px;
    height: 199px;
    width: 404px;
}
.flat .card {
    width: 172px;
    height: 210px;
    overflow:hidden;
}
.flat-hp .card-hp {
    width: 199px;
    height: 199px;
    overflow:hidden;
}
.grid .card-hp:after,
.grid .card:after {
    content:'';
    position:absolute;
    left:0; top:60%;
    width:100%; height:40%;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    display:inline-block; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.game-image {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    transition: 0.6s;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.grid .row {
	position: relative;
    margin-left: 0;
    margin-right: 0;

}
 .title {
    font-family: 'DM Sans';
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    font-size: 29.98px;
    line-height: 38px;
    /* Secondary 500 */
    color: #005C95;
    float: left;
}

.title-div {
     width: 60%;
}

.kk-title {
    font-family: 'DM Sans';
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    font-size: 29.98px;
    line-height: 38px;
    color: #005C95;
    float: left;
    margin-bottom: 8px;
}
.kk-arrows {
    cursor: pointer;
    display: inline-block;
	width: 14px;
	height: 14px;
	position: absolute;
    bottom: 14px !important;
    right: 10px;
}

.arrow-right.active, .arrow-left.active {
	border-bottom: 2px solid #3376C5;
    border-left: 2px solid #3376C5;
}
.arrow-right {
	border-bottom: 2px solid lightgrey;
    border-left: 2px solid lightgrey;
	transform: rotate(-135deg);
}
.arrow-left {
	border-bottom: 2px solid lightgrey;
    border-left: 2px solid lightgrey;
	transform: rotate(45deg);
    margin-right: 20px;
}
h3 {
    font-family: 'DM Sans';
    font-style: normal;
    font-size: 22px;
    font-weight: 500;
}

.card-hp p,
.card p {
    width: -moz-min-content;
    width: min-content;
    height: 26px;
    border-radius: 12px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 24px;
    margin-bottom: 1px;
    /* identical to box height, or 133% */
    text-align: center;
    color: #FFFFFF;
    padding-left: 16px;
    padding-right: 16px;
}

.orange-label {
    width:-moz-min-content;
    width:min-content;
    position:relative;
    background: linear-gradient(180deg, #FF5100 0%, #FC996B 100%);
    margin-bottom:2px;
    margin-top:2px;
}
.blue-label {
    width:-moz-min-content;
    width:min-content;
    position:relative;
    background: linear-gradient(90deg, #07C9F1 0%, #0398DF 100%);
    border-radius: 12px;
    margin-bottom:2px;
    margin-top:2px;
}
.yellow-label {
    width:-moz-min-content;
    width:min-content;
    position:relative;
    background: linear-gradient(267.08deg, #ECFB3E 5%, #FAC91C 105.01%);
    border-radius: 12px;
    margin-bottom:2px;
    margin-top:2px;
}
.labelsBox {
    position: absolute;
    left: 8px;
    top: 9px;
}
.game-favourite path {
    fill: #23AAE2;
    fill-opacity:100%;
}

.buttons {
	display:flex;
   	justify-content:center;
    position:absolute;
    margin-left: auto;
	margin-right: auto;
    left: 0;
	right: 0;
    bottom:15px;
}

.grid .kk-card-link {
    z-index: 2;
	margin-left:10%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */
    display: flex;
    align-items: center;
    text-align: center;
    /* White */
    color: #FFFFFF;
    background: linear-gradient(360deg, #23AAE2 100%, #23AAE2 100%);
    border-radius: 15px;
    padding: 5px 10px;
    text-decoration:none;
    border: none;
}

.grid .kk-card-link:hover {
  color: #212529;
}

.grid .btn-play-kazi-fun-rd {
    z-index: 2;
	margin-top:4px;
    color: #FFFFFF;
    font-size: 14px;
    text-decoration: underline;
    background: none;
    border: none;
}

.btn-play-kazi-fun-rd:hover {
  color: #212529;
}

.modalCarouselGrid {
    display: none;
}

.modal-backdrop {
    display: block;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,0.5);
    z-index:11;
    overflow: scroll;
}
.search-modal {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: auto;
    margin-right: auto;
    height: 735px;
    width: 605px;
    background-color: #FFFFFF;
    border: none;
    border-radius: 11px 11px 10px 10px;
    /* overflow-y:scroll; */
    overflow:hidden;
    z-index: 2;
}
.search-modal::-webkit-scrollbar {
    display: none;
}

.search-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background-color: #0173B9;
    height: 90px;
    width: 100%;
    padding: 24px 37px;
    border-radius: 10px 10px 0 0;
    position: sticky;
    top:0;
    z-index: 1500;
}

.search-title .search-title-text {
    font-family: 'DM Sans';
    font-style: normal;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 0px;

}

.search-title img {
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.search-body {
    padding: 26px 24px 0px 24px;
}
.search-input {
    margin: 0px 0 27px 10px;
    padding: 0 16px 0 16px;
    height: 40px;
    width: 354px;
    position: sticky;
    top: 120px;
    z-index: 2;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
}
::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #DFDFDF;
  opacity: 1; /* Firefox */
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #DFDFDF;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #DFDFDF;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #DFDFDF;
}

.search-icon {
    position: absolute;
    height: 23px;
    width: 23px;
    right: 230px;
    top: 129px;
    z-index: 3;
}

.search-modal .not-found {
    display: none;
    height: 76.08px;
    width: 72px;
    margin: 0px auto 11px auto;
}

.search-modal .not-found-text {
	margin-bottom: 50px;
	display: none;
	text-align: center;
	color: #9B9B9B;
	font-size: 20px;
	font-weight: 400;
}

@media only screen and (max-height: 415px) {
    /* CSS rules for viewport height greater than or equal to 800px */
    .flat-hp,
    .flat {
        grid-template-rows: 160px;
    }
    .flat-hp .card-hp,
    .flat .card {
        height: 160px;
    }
    .arrows-container{
        display:none;
    }
    .all-games-link {
        margin-top: 0px;
        padding-right: 0px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
    .search-modal {
        width:102vw;
        height:100vh;
        overflow: scroll;
    }
    .search-input{
        position: unset;
        width: 50%;
    }
    .search-icon {
        top: 35px;
        left: 46%;
    }
    .search-body {
        position: relative;
    }
}

@media (max-width: 480px) {
    .arrows-container{
        display:none;
    }
    .all-games-link {
        margin-top: 0px;
        padding-right: 0px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
    .flat-hp,
    .flat {
        grid-template-rows: 210px;
    }
    .flat-hp.filtered,
    .flat.filtered {
        grid-template-rows: 160px;
    }
    .flat-hp.card-hp,
    .flat.card {
        height: 210px;
    }

    .flat-hp.filtered > .card-hp,
    .flat.filtered > .card {
        height: 160px;
    }
    .search-body {
        padding: 0px;
        position: relative;
        margin-left: 20px;
        margin-right: -10px;
        margin-top: 25px;
    }
    .search-modal {
        position:fixed;
        top: 60%;
        left: 49%;
        width: 100vw;
        height:100vh;
        border-radius: 0px 0px 0px 0px;
    }
    .search-title{
        border-radius: 0px 0px 0px 0px;
    }
    .search-input {
        margin: 0px 0px 20px;
        padding: 0 16px 0 16px;
        height: 40px;
        width: 95%;
        top: 120px;
    }
    .search-icon{
        right: 30px;
        top: 15px;
    }
    .container.grid {
        width: 100%;
    }
	.search-modal .not-found-text {
    	margin-bottom: 45px;
    	font-size: 16px;
    }

    .card-hp:hover .game-image,
    .card:hover .game-image { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
    }

    .card-hp:hover .btn-play-kazi-real-rd,
    .card:hover .btn-play-kazi-real-rd { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
        background: linear-gradient(360deg, #23AAE2 100%, #23AAE2 100%);

    }
}

@media (max-width: 767px) {
    .title {
        font-size: 22px;
        line-height: 26px;
    }
    .arrows-container{
        display:none;
    }
    .all-games-link {
        margin-top: 0px;
        padding-right: 0px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }

    .card-hp:hover .game-image,
    .card:hover .game-image { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
    }

    .card-hp:hover .btn-play-kazi-real-rd,
    .card:hover .btn-play-kazi-real-rd { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
        background: linear-gradient(360deg, #23AAE2 100%, #23AAE2 100%);

}
}

@media (max-width: 779.99px) {
    .search-modal .grid {
        margin: 0px -5px 25px;
    }
    .all-games-link {
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
    .card-hp:hover .game-image,
    .card:hover .game-image { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
    }

    .card-hp:hover .btn-play-kazi-real-rd,
    .card:hover .btn-play-kazi-real-rd { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
        background: linear-gradient(360deg, #23AAE2 100%, #23AAE2 100%);
    }
}

@media screen and (min-width: 767px) and (max-width: 1030px) {
    .grid {
        margin: 0px 20px 25px;
    }
    .container.grid {
        width: auto;
    }
    .all-games-link {
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
    .search-modal .grid {
        margin: 0px -5px 25px;
    }
}

@media screen and (min-width: 1044px) {
    .search-modal .grid {
        margin: 0px -5px 25px;
    }
    .all-games-link {
        margin-top: 13px;
        padding-right: 35px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
}

/* Listing view in tabs */
@media screen and (min-width: 1044px) {
    .grid .wrapper.filtered {
        grid-template-columns: repeat(5, minmax(160px,160px));
        grid-auto-rows: minmax(160px,210px);
        grid-column-gap : 35px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
    .grid .wrapper-hp.filtered {
        grid-template-columns: repeat(5, minmax(199px,199px));
        grid-auto-rows: minmax(160px,210px);
        grid-column-gap : 35px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
}

@media screen and (min-width: 880px) and (max-width: 1043px) {
    .grid .wrapper.filtered {
        grid-template-columns: repeat(5, minmax(172px,210px));
        grid-auto-rows: minmax(172px,210px);
        grid-column-gap : 20px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
    .grid .wrapper-hp.filtered {
        grid-template-columns: repeat(5, minmax(172px,210px));
        grid-auto-rows: minmax(172px,210px);
        grid-column-gap : 20px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
}

@media screen and (min-width: 725px) and (max-width: 880px) {
    .grid .wrapper.filtered {
        grid-template-columns: repeat(4, minmax(172px,210px));
        grid-auto-rows: minmax(172px,210px);
        grid-column-gap : 15px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
    .grid .wrapper-hp.filtered {
        grid-template-columns: repeat(4, minmax(172px,210px));
        grid-auto-rows: minmax(172px,210px);
        grid-column-gap : 15px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
}

@media screen and (min-width: 545px) and (max-width: 724px) {
    .grid .wrapper.filtered {
        grid-template-columns: repeat(3, minmax(172px,210px));
        grid-auto-rows: minmax(172px,210px);
        grid-column-gap : 7.69px;
        grid-row-gap: 20px;
        grid-auto-flow: unset;
        overflow-y: unset;
        overflow-x: unset;
    }
    .flat-hp,
    .flat {
        grid-template-rows: 210px;
    }
    .arrows-container{
        display:none;
    }
    .all-games-link {
        margin-top: 0px;
        padding-right: 0px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
    .flat-hp.filtered,
    .flat.filtered {
        grid-template-rows: 210px;
    }
    .flat-hp.card-hp,
    .flat.card {
        height: 210px;
    }
    .flat-hp.filtered > .card-hp,
    .flat.filtered > .card {
        width: 172px;
    }

    .card-hp:hover .game-image,
    .card:hover .game-image { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
    }

    .card-hp:hover .btn-play-kazi-real-rd,
    .card:hover .btn-play-kazi-real-rd { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
        background: linear-gradient(360deg, #23AAE2 100%, #23AAE2 100%);
    }
}

@media screen and (max-width: 544px) {
    .grid .wrapper.filtered {
        grid-template-columns: repeat(2, minmax(160px,160px));
        grid-auto-rows: minmax(160px,160px);
        grid-column-gap : 15px;
        grid-auto-flow: unset;
        grid-row-gap: 20px;
        overflow-y: unset;
        overflow-x: unset;
    }
    .grid .wrapper-hp.filtered {
        grid-template-columns: repeat(2, minmax(160px,160px));
        grid-auto-rows: minmax(160px,160px);
        grid-column-gap : 15px;
        grid-auto-flow: unset;
        grid-row-gap: 20px;
        overflow-y: unset;
        overflow-x: unset;
    }
    .flat-hp,
    .flat {
        grid-template-rows: 210px;
    }
    .arrows-container{
        display:none;
    }
    .all-games-link {
        margin-top: 0px;
        padding-right: 0px;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.5px;
    }
    .flat-hp.filtered,
    .flat.filtered {
        grid-template-rows: 160px;
    }
    .flat-hp.card-hp,
    .flat.card {
        height: 210px;
    }
    .flat-hp.filtered > .card-hp,
    .flat.filtered > .card {
        height: 160px;
    }

    .card-hp:hover .game-image,
    .card:hover .game-image { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
    }

    .card-hp:hover .btn-play-kazi-real-rd,
    .card:hover .btn-play-kazi-real-rd { /* IE 9 */ /* Safari 3-8 */
        transform: scale(1);
        background: linear-gradient(360deg, #23AAE2 100%, #23AAE2 100%);
    }
}