/*****************************************************************************/
/*********************************FullHD 1440**********************************/
/*****************************************************************************/

.top_details {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
font-weight:normal;
color:#4B8ABF;
text-align:left;
text-decoration:none;
color:#666666;
white-space:nowrap;
padding-right:0.5em;
margin-bottom:1em;
}

.top_details a {
color:#4B8ABF;
}

.top-item {
display:block;
margin-bottom:0.7em;
margin-top:0.7em;
text-align:left;
}

.position {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
float: left; 
width: 2.9em;
height: 1.5em;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #666666;
font-weight: bold;
border: 1px solid #70A0CD;
background-color: #FFFFFF;
}

.ua {
background: url(../images/uaflag.gif);
background-size:cover;
border-color:#CCCCCC;
}


.item-title {
box-sizing: border-box; /*div will include padding and border*/
height:1.3em;
vertical-align:middle;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
color: #4B8ABF;
text-align: left;
font-weight: bold;
background-color:#F7F7F7;
padding-top:0.1em;
white-space: nowrap; /* for mobile */
overflow: hidden; /* for mobile */
}

.item-title a, .item-title a:visited{
color: #4B8ABF;
text-decoration:none;
margin-left:0.5em;
}

.item-image {
float:left;
position: relative; /*for platform icons*/
margin-right:0.7em;
margin-top:0.5em;
margin-bottom:0.7em;
width:300px;
background-color:#F5F5F6;
text-align:center;
}

.item-image img {
max-height:300px;
}

.item-description {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin-top:0.5em;
margin-bottom:0.7em;
text-align:justify;
display: table;
}

.item-description a { /*for profile description link*/
color: #4B8ABF;
font-weight:normal;
text-decoration:underline;
}

.item-comments {
margin-bottom:2em;
}

.seemore{
box-sizing: border-box; /*div will include padding and border*/
font-size:1em;
text-align:left;
}

.seemore a{
background: #f4f4f4;
text-decoration:none;
border:1px solid #ccc;
color:#666666;
padding:0.3em;
margin:0.3em;
}

.seemore a:hover{
 background: #fff;
 color:#666666; 
 border:1px solid #aaa; 
}


.vote {
float:left;
width:30px;
height:30px;
background:transparent url(../images/vote.gif) no-repeat left top;
cursor:pointer;
margin-left:5px;
margin-top: 5px;
margin-right:5px;
}

.vote:hover {
background:transparent url(../images/vote-active.gif) no-repeat left top;
cursor:pointer;
}

.voted a {
clear:left;
float:left;
width:30px;
height:30px;
background:transparent url(../images/vote-active.gif) no-repeat left top;
cursor:pointer;
margin-left:5px;
margin-top: 5px;
margin-right:5px;
}

/*********************************TOOL*********************************/

.intro {
background-color:#F9F9F9;
padding:0.7em;
font-size:1em;
text-align:justify;
margin-bottom:1em;
margin-top:0.5em;
}

.intro a {
color:#4B8ABF;
text-decoration:underline;}

.intro img { /*Used in tool reviews, tag-content*/
max-width:100%;
}


/*TOOL*/

.item_link {
background-color:#F9F9F9;
padding:0.7em;
font-size:1em;
text-align:justify;
white-space: nowrap; /* for mobile */
overflow: hidden; /* for mobile */
}

.item_link a {
color:#4B8ABF;
text-decoration:underline;}

.tool-image { /*used in profile*/
float:left;
margin-right:10px;
margin-top:0px;
margin-bottom:10px;
}

.tool-description {
font-size: 0.8em;
margin-top: 5px;
margin-bottom:20px;
text-align:justify;
display:table;
}

.tool-description a {
color:#4B8ABF;
text-decoration:underline;}

.tool-video {
margin-top:10px;
margin-bottom:20px;
}

.tool_vs {
text-align:left;
margin-bottom:20px;
margin-top:10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#999999;
}

.tool_vs a{
color:#999999;
}

/*Zoom Image*/

.modal {
display: none; /* hidden by default */
position: fixed; /* modal window fixes on screen */
z-index: 200; /* show on top of everything */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7); /* black-transparent background */
}

.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90vh; /* fit image height to screen */
}

.close {
position: absolute;
top: 20px;
right: 35px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

/*********************************Top Widget*********************************/

H4 {
/*Used: tool-subtitle*/
color:#1F9C3E;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.3em;
font-weight:normal;
margin-bottom:0px;
margin-top:0px;
}

H4 a {
color:#1F9C3E;
text-decoration:underline;
}

H4 a:hover {
color:#4B8ABF;
}

.sidebar-top {
margin-top:0em;
font-size:1em;
margin-bottom:1.4em;
}

.sidebar-top H4 {
max-width:100%;
}

.top_widget {
display: grid;
grid-template-columns: 2em 1fr;
font-family: system-ui, sans-serif;
font-size: 1.1em;
overflow: hidden;
grid-auto-rows: 2.6em; 
align-items: stretch; /* cells stretch to whole line height*/
max-width: 100%;
}

.top_widget_n {
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-weight: 600;
border-bottom: 1px solid #ddd;
background: linear-gradient(to bottom, #fffbe6 0%, #fff3b0 100%);
}

.top_widget_tool {
  display: flex;
  align-items: center;
  padding: 0 0.6em;
  border-bottom: 1px solid #ddd;
}

.top_widget_tool a {
  color: #2b6fa0;
  text-decoration: none;
}


.top_widget_tool a:hover {
  text-decoration: underline;
}


/*SIDEBAR RATINGS*/

.sidebar_tops {
margin: 1.2em 0 1.4em;
display: grid;
}

.sidebar_item {
display: grid;
grid-template-columns: 40px 1fr;
align-items: center;
gap: 0.8em;
padding: 0.4em 0;
}

.sidebar_item img {
width: 40px;
height: 40px;
background-color: #eee;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.sidebar_item a {
font-size: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #888;
text-decoration: none;
transition: color 0.2s ease;
}

.sidebar_item a:hover {
color: #1E9B3D;
}

.sidebar_item.active a {
color: #1E9B3D;
}

/*ICONS*/

.platform_icons {
position: absolute;
left:5px;
bottom:5px;
}

/*AUTHOR*/

.author_block {
clear:left;
display:block;
margin-bottom:0.7em;
margin-top:0.7em;
background-color:#EEEEEE;
padding:1em;
border:1px solid #e3e3e3;
vertical-align:middle;
}

.author_photo {
float:left;
display:inline-block;
vertical-align:middle;
border-radius: 50%; /* Radius */
border:1px solid #e3e3e3;	
height:100px; /* For CLS */
width:100px; /* For CLS */
overflow: hidden;
margin-right:15px;
}

.author_photo img {
object-fit: cover;
}



.author_description {
display:table-cell;
vertical-align:middle;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333333;
}

.author_title {
text-align:left;
margin-bottom:4px;
font-size: 1.3em;
}

.author_text {
font-size:0.9em;
text-align:justify;
}


/*Alternatives*/

#alternatives_mosaic {
width:100%;
text-align:justify;
margin-top:1em;
}

.alternative_block {
display:inline-block;
box-sizing: border-box;
text-align:left;
vertical-align:top;
overflow: hidden;
width:49%;
height:10em;
padding:0.65em;
margin-bottom:1em;
border:1px solid #CCCCCC;
background-color:#FCFCFC;
}

.alternative_block_title {
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.3em;
font-weight:normal;
margin-bottom:0.5em;
margin-top:0px;
}

.alternative_block_title a {
text-decoration:underline;
color:#4B8ABF;
}

.alternative_block_title a:hover {
color:#FF3300;
}

.alternative_block_votes {
font-size:14px;
margin-bottom:10px;
font-weight:bold;
}

.alternative_block_screenshot {
position: relative;
display: inline-block;
}

/*for empty blocks in mosaic with justify*/
/*should be under all mosaic styles*/
.empty {
height:0;
border:0;
margin:0;
padding:0;
}



/*****************************************************************************/
/*******************************MOBILE****************************************/
/*****************************************************************************/


@media only screen and (max-width: 700px) {

.item-image {
float:none;
}

/*AUTHOR*/

.author_block {
display:block;
margin-top:1em;
padding: 0.6em 0p 1em 0px;
text-align:center;
}

.author_photo, .author_description {
display:block;
padding-right:0;
}

.alternative_block {
display:block;
width:100%;
}

}