@charset "utf-8";
@font-face {
  font-family: 'Roboto';
  src: url('https://www.ttt4.com/images/fonts/Roboto_Condensed-Regular.woff2'),
       url('https://www.ttt4.com/images/fonts/Roboto_Condensed-Regular.woff'),
       url('https://www.ttt4.com/images/fonts/Roboto_Condensed-Regular.ttf');
	   font-display: swap;
}

:root{
  --font-family: Roboto, Verdana, sans-serif;
  --font-size:0.9rem;
  --font-size-cats:1rem;
  --align: left;
  --direction:ltr;
  --c_pad_440_l:calc(10px + 185px);
  --c_pad_440_r:10px;
  --fixed_dw:180px;
  --float_left:left;
  --float_right:right;
  direction:var(--direction);
}

.dark{
	  --themeicon: "\1F319";
	  --color1: #0f0f0f;
      --color2: #0f0f0f;
	  --color3: #272727;
      --color4: #272727;
      --color5: #fff;

      --color7: #ffff00;	  
      --color8: #cbfdea;	
      --color9: #303030;
	  --color10: #ffff00;		
	  --color11: #929292;
	  --color12: #fff;
	  --color13: #b3c8dd;
	  --color14: #878787;
	  --color15: #e6edf4;
	  --color16: #FFA500;
      --color17: #fff;
	  --color18: #f1f1f1;
	  --color19: #cfcfcf;
      --color20: #575757;
	  --color21: #3f3f3f;
	  --color22: #3f3f3f;

	  --color24: #0b0b0b;
	  --color25: #272727;
	  --color26: #3f3f3f;
	  --color27: #f1f1f1;
	  --color28: #9f9f9f;
	  --color29: #fb5767; 
	  --color30: #8AFF8A; 
	  --color31: #CEE7FF;
}

.light{
	  --themeicon: '\1F31E';
	  --color1: #030711;
      --color2: #fff;
	  --color3: #1c2029;
      --color4: #cdcdcf;
	  --color5: #fff;

      --color7: #353941;	  
      --color8: #00F;	
      --color9: #353941;
	  --color10: #ffff00;		
	  --color11: #686a70;
	  --color12: #000;  
	  --color13: #002b56;
	  --color14: #b3b5b8;
	  --color15: #00478f;
	  --color16: #FF0000;
      --color17: #000;
	  --color18: #e6e6e7;
	  --color19: #030711;
      --color20: #b3b5b8;
	  --color21: #353941;
	  --color22: #b3b5b8;

	  --color24: #fff;
	  --color25: #e8e8e8;
	  --color26: #dadada;
	  --color27: #000;
	  --color28: #666666;
	  --color29: #79030e;
	  --color30: #008000;
	  --color31: #0000FF;  
}
:fullscreen {
  text-align:center;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  touch-action: none;
}
body{
  overflow-y: scroll;
  margin: 0; 
  padding: 0;
  color: var(--color17);
  text-align:justify;
  background-color: var(--color2);
  font-family: var(--font-family);
  font-size: var(--font-size);
}

a{text-decoration:none;}
a:link{color:var(--color15);}
a:visited{color:var(--color13);}
a:hover{color:var(--color16);}

h1{
   font-size: 1.5rem;
   text-shadow: 1px 1px var(--color20);
}
h3{
   font-size: 1.2rem;
   text-shadow: 1px 1px var(--color20);
}

h4{
   font-size: 1rem;
}
h1,h2,h3,h4{
	margin:0;
	padding:7px;
	color:var(--color19);
}
img{border:0px;}
.center{margin-left:auto;margin-right:auto;text-align: center;}
.center2{margin-left:auto;margin-right:auto;text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
.floatleft {float:var(--float_left);}
.floatright {float:var(--float_right);}

.clear {clear:both;}

.hr90 {border:none 0;border-top: 1px solid var(--color22);width:90%;height:1px;}
.hidden{display:none;}
a:link {text-decoration: none}
.external:link,.external:visited{color:var(--color8);}
.external:hover{color:var(--color16);}
.external:after{
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
.text{
	word-spacing:1px;
	line-height: 150%;
	text-align: justify;
	padding-right:5px;
	padding-left:5px;
}
.btnnostyle{
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.page{
  color: var(--color17);
  background-color: var(--color2);
  min-width:320px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.header{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    background-color: var(--color1);
	position:sticky;
	top:0;
	display: block;
	width:100%;
	z-index:3;
}

.header_content{
    height:60px;
	width:100%;
}

.top_logo_svg{display: inline-block;position:absolute;top:16px;left:44px;}

.svglogo2 text{ 
    font-size:26px;
	font-weight:600;
	translate: 5px 23px;
	fill:var(--color5);
	font-family:var(--font-family);
}
.search_div{
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 140px;
}
#Search_Text_Form{
  height: 36px;
}
#Search_Text_Form button{
  position: absolute;
  right: 9px;
  top: 4.5px;
  bottom: 4.5px;
}
#Search_Text_Form button svg{
  fill: var(--color11);
  height: 27px;
  width: 27px;
}
#Search_Text_Box{
  background-color:var(--color1);
  border: 1px solid var(--color9);
  border-radius: 18px;
  height: 100%;
  width: 100%;
  -webkit-appearance: none;
  color: var(--color5);
  padding-right: 49px;
  padding-left: 9px;
  font-family:Tahoma, Geneva, sans-serif;
  font-size: var(--font-size);
}
#Search_Text_Box::placeholder{
  color: var(--color11);
  opacity: 1;
}
#Search_Text_Box::-webkit-search-decoration{
  -webkit-appearance: none;
}
#Search_Text_Box:focus{
  border-color: var(--color9);
  box-shadow: 0px 0px 5px var(--color14);
  outline: 1px solid transparent; 
}
#Search_Text_Box::-webkit-search-cancel-button{
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(148, 148, 148)' %3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' /%3E%3C/svg%3E%0A");
  height: 18px;
  width: 18px;
}

input[type='search']{
  -webkit-tap-highlight-color: transparent;
}

#righttopdiv{
	display: inline-block;
	position:absolute;
	top:12px;
	right:12px;	 
}

#righttopdiv input[type='checkbox']{display:none;}
#change_theme, #play_history{
	display:inline;margin-left:8px;margin-right:8px;
}
#theme-links, #history-links{
	display:none;
	position: absolute;
	right:0;
	margin-top:2px;
    padding-top:8px;
	padding-bottom:8px;
	border-radius: 8px;
	background-color:var(--color3);
	min-width:180px;
}
#theme-links ol, #history-links ol{list-style: none;margin:0;padding:0;}
#change_theme_checkbox:checked ~ div #theme-links, #play_history_checkbox:checked ~ div #history-links{
    display:block;
}

#theme-links ol li, #history-links ol li{
	display:block;
    list-style: none;
    text-align: var(--align);
}

#theme-links ol li button, #history-links ol li a{
    display: block;
	border: 0;
	border-radius: 0;
 	padding:8px;
	color: var(--color18);
	background-color:var(--color3);
	cursor: pointer;
	text-align: var(--align);
}
#theme-links ol li button{width:100%;}
#history-links ol li a,#theme-links ol li button{
	font-size:13px;
	font-family:Tahoma, Geneva, sans-serif;
	
}
#theme-links ol li button:hover, #history-links ol li a:hover{
	color: var(--color5);
	background-color:var(--color21);
}

#theme-links ol li button::before, #history-links ol li a::before{
  margin-right:5px;
  font-size:18px;
}
.dark-btn::before{content: "\1F319";}
.light-btn::before{content: "\1F31E";}
.device-btn::before{content: "\1F4BB";}
.play_again_link::before{content: "\21BA";}
.liked_games_link::before{content: "\2764";} 
.play_history_label, .change_theme_label{
  font-size:24px; 
  padding:7px;
  cursor: pointer;
  color:var(--color10);
}
.change_theme_label:before {content: var(--themeicon);}
.play_history_label:before {content: "\1F49B";}

.body_content{
	width: 100%;  
}

#left_menu{
		display: block;
		position:fixed;
        bottom:0;
		height:100%;
		width:var(--fixed_dw);
		overflow:scroll;
		scrollbar-width: thin;
		scrollbar-color:var(--color2) var(--color2);
	    transition: scrollbar-color 0.2s;
		z-index:2;
} 
 
#left_menu:hover{
	overflow:scroll;
	scrollbar-color:var(--color4) var(--color2);
}
#cats{
	padding-top:65px;
}

label.jm-label{
  color: var(--color5);
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  cursor: pointer;
  font-size:26px; 
}

#cats_checkbox{display: none;}
#cats_checkbox:checked ~ #left_menu{display: none;}
#cats_checkbox:checked ~ .mid_content{padding-left:5px;padding-right:5px;}

#catsul, div#left_new ul{list-style: none; margin:0;padding:0;}
#catsul li, div#left_new ul li{
	font-size:var(--font-size-cats);
	display:block;
    margin-left:10px;
	margin-right:10px;
}

#catsul li a::before{
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -20%;
  margin-right:10px;
}

#catsul li a, #left_new ul li a{
 color:var(--color12);
 display: block;
 padding:7px;
 transition: color 0.5s;
 cursor: pointer;
}

#catsul li a:hover, #left_new ul li a:hover{ 
  background-color:var(--color4);
  color:var(--color7);
}

._cs15::before{content: url(https://www.ttt4.com/images/icons/cats/car.svg);}
._cs8::before{content: url(https://www.ttt4.com/images/icons/cats/sport.svg);}
._cs1::before{content: url(https://www.ttt4.com/images/icons/cats/puzzle.svg);}
._cs2::before{content: url(https://www.ttt4.com/images/icons/cats/war.svg);}
._cs24::before{content: url(https://www.ttt4.com/images/icons/cats/zombie.svg);}
._cs16::before{content: url(https://www.ttt4.com/images/icons/cats/skill.svg);}
._cs7::before{content: url(https://www.ttt4.com/images/icons/cats/thinking.svg);}
._cs21::before{content: url(https://www.ttt4.com/images/icons/cats/bike.svg);}
._cs6::before{content: url(https://www.ttt4.com/images/icons/cats/action.svg);}
._cs12::before{content: url(https://www.ttt4.com/images/icons/cats/kids.svg);}
._cs9::before{content: url(https://www.ttt4.com/images/icons/cats/girl.svg);}
._cs4::before{content: url(https://www.ttt4.com/images/icons/cats/funny.svg);}
._cs3::before{content: url(https://www.ttt4.com/images/icons/cats/arcade.svg);}
._cs14::before{content: url(https://www.ttt4.com/images/icons/cats/adventure.svg);}

._cs10::before{content: url(https://www.ttt4.com/images/icons/cats/fighting.svg);}
._cs5::before{content: url(https://www.ttt4.com/images/icons/cats/racing.svg);}
._cs28::before{content: url(https://www.ttt4.com/images/icons/cats/flash.svg);}
._cs29::before{content: url(https://www.ttt4.com/images/icons/cats/wheely.svg);}
._cs30::before{content: url(https://www.ttt4.com/images/icons/cats/adam.svg);}
._cs20::before{content: url(https://www.ttt4.com/images/icons/cats/aircraft.svg);}
._cs26::before{content: url(https://www.ttt4.com/images/icons/cats/soccer.svg);}
._cs17::before{content: url(https://www.ttt4.com/images/icons/cats/mario.svg);}
._cs27::before{content: url(https://www.ttt4.com/images/icons/cats/spongebob.svg);}
._cs25::before{content: url(https://www.ttt4.com/images/icons/cats/billiards.svg);}
._cs13::before{content: url(https://www.ttt4.com/images/icons/cats/memory.svg);}
._cs19::before{content: url(https://www.ttt4.com/images/icons/cats/card.svg);}
._cs22::before{content: url(https://www.ttt4.com/images/icons/cats/celebrity.svg);}
._cs23::before{content: url(https://www.ttt4.com/images/icons/cats/dressup.svg);}
._cs18::before{content: url(https://www.ttt4.com/images/icons/cats/cooking.svg);}
._cs31::before{content: url(https://www.ttt4.com/images/icons/cats/mobile.svg);}
._cs32::before{content: url(https://www.ttt4.com/images/icons/cats/chess.svg);}
._cs33::before{content: url(https://www.ttt4.com/images/icons/cats/3d.svg);}
._cs34::before{content: url(https://www.ttt4.com/images/icons/cats/2player.svg);}
._cs35::before{content: url(https://www.ttt4.com/images/icons/cats/multiplayer.svg);}
._cs36::before{content: url(https://www.ttt4.com/images/icons/cats/strategy.svg);}
._cs37::before{content: url(https://www.ttt4.com/images/icons/cats/run.svg);}

._cs_all::before{content: url(https://www.ttt4.com/images/icons/cats/allcats.svg);}

._cs_new::before{content:'\2B50';  margin-right:7px;}
._cs_best::before{content:'\26A1';  margin-right:7px;}

#div_langs{
 border-radius: 8px;
 background-color: rgba(0, 0, 0, 0.1);
 vertical-align: middle;
 padding: 12px;
 width:100px;
}
#select_lang{
	font-size:1.2rem;
	font-family: Tahoma, sans-serif;
}
#select_lang option{
	width:100px;
	padding:3px;
}
.mid_content{
	padding-left:calc(10px + var(--fixed_dw));
	padding-right:10px;
}
.page_title_links{
	display: inline-block;
	padding:10px 8px 4px 8px;
}
.page_title_links ul{list-style: none; margin:0;padding:0 0 3px 0;border-bottom:1px solid var(--color4);}
.page_title_links ul li{display:inline;}
.page_title_links li + li:before{
	font-size: 24px;
	margin-left:10px;
	margin-right:10px;
	color:var(--color22);
	vertical-align: -8%;
    content: "\00BB";
}
div.games_listing{padding-top:10px;margin-left:auto;margin-right:auto;text-align: center;}
div.games_listing ul{
  list-style: none; margin:0;padding:0;
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(150px, 1fr));
  gap: 1.5em;
}
div.games_listing ul li{
	align-self: center;
    justify-self: center;
	min-width: 150px;
    max-width: 180px;
	vertical-align:top;
	position: relative;
	display:list-item;
	padding:0;
	border-radius:8px;
}
div.games_listing ul li p{
    margin:0;
	padding-bottom:5px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	width: 149px;
}
div.games_listing ul li p.new_game:after{
	content:'';
	background-image:url(https://www.ttt4.com/images/new.png);
	background-repeat:no-repeat;
	background-size:50px;
	width: 50px;
    height: 50px;
	position: absolute;
    right: 0;
    top: 0;
}

div.games_listing ul li a img{
 width: 100%;
 height: auto;
 aspect-ratio: 75/56;
 border-radius:8px; 
}
.tags_list ul{list-style: none;margin:0;padding:0;}
.tags_list ul li{
  display:inline-block;
  margin:5px;
}
.tags_list li a{
 display: block;
 color:var(--color27);
 background-color:var(--color25);
 border-radius:8px;
 padding:5px 10px 5px 5px;
 transition: background-color 0.2s;
}
.tags_list li a:hover{
  background-color:var(--color26);
}
.tags_list li a::before{
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -20%;
  margin-right:10px;
}
.paging{margin-left:auto;margin-right:auto;text-align:center;padding:10px 2px;}
.paging p span, .paging p a{
	margin-left: 3px;
    margin-right: 3px;
    padding: 5px 14px;
    text-decoration: none;
    border-radius: 5px;
    background-color: var(--color25);
}
.paging p span{color:var(--color27)}
.paging p a:hover {background-color:var(--color26)}
.related_cats{padding:7px 2px;}
.related_cats ul li{
  display:inline-block;
  margin:5px;
}
.related_cats ul li p{
  text-align:center;
  margin:0;
}
.related_cats ul li a img{
	border-radius: 5px;
	width:100px;
	height:80px;
}
.footer{
 padding-top:8px;

}

.footer ul{list-style: none; margin:0;padding:0;}
.footer ul li{display:inline;font-size: 14px;}
.footer ul li + li:before{
	content: "|";
	margin:8px;	
}
.copyrights{font-size:14px;padding-top:20px;}
#main_div_game{
	padding-top:1px;
	margin-right:auto;margin-left:auto;text-align:center;
}
 .d1 {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
 .d2{ 
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
  }
 .d3{
   display: flex;
   justify-content: center;
   position: relative;
   overflow: hidden;
   align-self: center;
   max-width: 800px;
   width: 100%;	
   border-radius:10px;
 }
 .d4{
   height: 450px;
   width:100%;
   background-repeat:no-repeat;
   background-position: center center;
   background-size:100% 100%;
  }
 .d4 img{
   align-self: center;
   border-radius: 5px;
   border: 3px white solid;	
}	
 .d5{
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
 }
 .d6{
   display: contents;
 }
 .d8{	
  padding: 10px 16px;
  border-radius: 5px;
  background:var(--color1);
  color: #fff;
  font-size: 1.4em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 auto;
  white-space: nowrap;
  border: 3px white solid;
  }
.glow{
   filter: blur(20px);	
}
#third_div_game{
  text-align:var(--align);
  min-width:640px;
  width:70%;
  margin-right:auto;
  margin-left:auto;
}
#game{
 min-width:310px; 
 max-width:100%;
 box-sizing: border-box;
}
#game_tools{
	line-height:0;
    border-bottom:1px solid var(--color22);
	margin-bottom:20px;
	text-align:center;
}
#game_tools div{
	display:inline-block;
}
#game_tools svg{
 width: 36px;
 height: 36px;
 cursor: pointer;
 vertical-align:bottom;
 fill:var(--color17);
 transition: background-color 0.2s;
}
#game_tools svg:hover{
	background-color:var(--color25);
}
.hr-agg{
	border-bottom:1px solid var(--color22);
	color:var(--color28);
	padding-bottom:4px;
}
#sv24yes, #sv24no{
vertical-align:bottom;
width: 24px;
height: 24px;
fill:var(--color28);
padding-right:4px;
padding-left:4px;
transition: fill 0.2s;
}
#onclick_yes, #onclick_no{
	padding:4px;
	border-radius:6px;
	cursor: pointer;
	transition: background-color 0.2s;
}
#onclick_yes:hover, #onclick_no:hover{
	background-color:var(--color25);
}
#date_votes{
position:absolute;
left:0;
bottom:0;
}
#vote_div_s{
position:absolute;
right:0;
bottom:0;
display:inline-block;
}
.vote_div{
 min-width:70px;
 display:inline-block;
 text-align:center;
}
.date_vote_con{
height:25px;
position:relative;
}
.game_des{ 
line-height:180%;
padding:6px;
}
.sv25{
  width: 36px;
  height: 36px;
  padding:8px;
}
#report_problem, #game_share, #qr_code{
	position:absolute;overflow:auto;right:0;bottom:2px;border:8px solid var(--color22);
	background-color:var(--color2);border-radius: 8px;z-index:10;text-align: var(--align);
	font-size:var(--font-size);padding:6px;width:300px;height:auto;
}
#game_share, #qr_code{
right:auto;bottom:auto;
top: 50%;left: 50%;
transform: translate(-50%,-50%);
width:300px;height:auto;
}
#qrcode{
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background:#fff;
  padding:6px;
}
#report_problem ul{
 list-style: none; margin:10px;padding:0;
}
#report_problem ul li{
 padding:5px;
}
#LightBoxClose{
	float:var(--float_right);
	cursor: pointer;
	width: 26px;
    height: 26px;
}
#no_flash{
	display:none;
	color:var(--color29);
	font-size:1.5rem;
	padding:4px;
	line-height:150%;
}
.game_img_div{
	float:var(--float_right);
	text-align:center;
	margin:0 6px 6px 6px;
}
.game_img{
	width:150px;
	height:112px;
	border-radius:6px;
}
.more_game_info{border:0;}
.more_game_info tr td{padding:2px;}
.search_results_page{padding:10px;}
div.gsc-control-cse{
	 background-color:var(--color2) !important;
	 border:0 !important;
}
div.gsc-control-cse div{
	 background-color:var(--color2) !important;
     border:0 !important;
     color:var(--color17) !important;
}
div.gsc-control-cse div a{color:var(--color31) !important;}
div.gsc-control-cse div a:hover{color:var(--color16) !important;}
.gs-webResult div.gs-visibleUrl {color:var(--color30) !important;}

#cpmstar-ad{
	 border: 0px; 
	 overflow: hidden;
	 width:728px;
	 height:90px;
}

/***************** media screen ********************/

@media screen and (max-width: 950px) {
 #cpmstar-ad{
	 border: none; 
	 overflow: hidden;
	 width:300px;
	 height:250px;
 }
}

@media (min-width: 723px) and (max-width: 848px) {
#third_div_game{
  min-width:500px;
  width:100%;
}
}

@media (min-width: 650px) and (max-width: 723px) {
.search_div{
	display:none;
}
#left_menu{
    display: none;
}
#cats_checkbox:checked ~ #left_menu{
    display: block;
}
#cats_checkbox:checked ~ .mid_content{
    padding-left:var(--c_pad_440_l);
	padding-right:var(--c_pad_440_r);
}
.mid_content{
	padding-left:5px;padding-right:5px;
}
#third_div_game{
  min-width:430px;
  width:100%;
}
}

@media (min-width: 524px) and (max-width: 650px) {
.search_div{
	display:none;
}
#left_menu{
    display: none;
}
#cats_checkbox:checked ~ #left_menu{
    display: block;
	width:100%;
	background-color:var(--color2);
	z-index:1;
}

.mid_content{
	padding-left:5px;padding-right:5px;
}
#third_div_game{
  min-width:430px;
  width:100%;
}
}

@media (min-width: 440px) and (max-width: 524px) {
.search_div{
	display:none;
}
#left_menu{
    display: none;
}
#date_votes{
    display: none;
}
#cats_checkbox:checked ~ #left_menu{
        display: block;
	width:100%;
	background-color:var(--color2);
	z-index:1;
}

.mid_content{
	padding-left:5px;padding-right:5px;
}
#third_div_game{
  min-width:400px;
  width:100%;
}
.game_img_div{
	display: none;
}
}

@media (max-width: 440px) {
.search_div{
	display:none;
}
.svglogo2{
	display:none;
}
#left_menu{
    display: none;
}

#date_votes{
    display: none;
}
#cats_checkbox:checked ~ #left_menu{
    display: block;
	width:100%;
	background-color:var(--color2);
	z-index:1;
}

.mid_content{
	padding-left:2px;padding-right:2px;
}
#third_div_game{
  min-width:300px;
  width:100%;
}
#vote_stars, #date_votes{
    display: none;
}

.game_img_div{
	display: none;
}
}