/* @import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap'); */
/* 
*{
  box-sizing: border-box;
} */
/*
body {
  font-family: Arial, Helvetica, sans-serif;
}
*/

html, body {
    margin: 0;  
    padding: 0;
    overflow-x: hidden;  
      overflow-y: hidden;  
}
 
select{  
  border-radius: 4px; 
  font-size: 0.8rem;    
  width: 58%;    
}

select:focus{
  outline:none;
}

header {
  background-color: #777;
  padding: 7px;
  text-align: center;
  color: white; 
  height: 30px;  
/*  background: #1abc9c; */
  background: #2d2d2d;
  font-size: 14px;  
}

footer {
  background-color: white;
  margin-top: -2px;   /* For adjusting footer top and bottom    */
  text-align: left;
  color: black;
  height: 20px; /* For adjusting footer top and bottom    */
  font-size: 8px;  
  font-family: 'Montserrat', sans-serif; 
}
 
/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Style the navigation menu */
nav {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 0;
/*  background: #ccc; */
  background: white;
  padding: 0px;                                  /* 1   Change here*/ 
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 1;
  background-color: #f1f1f1;
  padding: 10px;
  height: 700px;   
  width: 700px;   /* 700   */
}



/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
/*
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

*/

table {  
  text-align: center;
  color: white;    
/*background: #1abc9c;  */
  background: #2d2d2d;
  font-size: 14px;
  height: 29px;
  width: 1242px;  /* 1242  A */    
  border: 0px solid #1abc9c; 
  font-family: 'Montserrat', sans-serif;
}

th { 
	border: 0px solid;
 /*	border-style: dotted; 
 	border-color: #96D4D4; */
 	border-collapse: collapse;
 	background-color: #1abc9c;
 	border-radius: 10px;
 	font-size: 13px;
}

	/* 	 
	button{
	border: 1px solid;
	border-color: #96D4D4;
	background-color: #1abc9c;
 	border-radius: 10px;
 	color: white;
 	height: 30px;
 	width: 80px;
}
*/

 .fa {
  padding: 20px;                     /* To add 1 more trending item on left */ /* 12 */
  font-size: 30px;
  width: 72px;
  text-align: center;
  text-decoration: none;
  margin: 0px 0px;
  border-radius: 50%;
  border: none; 
}

.fa:hover {
    opacity: 0.5;
}

.fa-home{
/* 	 background: #bb0000;
 	 background: silver;
 	 color: white;  */
 	 background: white;
 	 color: red;
 	 padding-top: 3px;
}

.fa-youtube {
/*background: #bb0000; 
  color: white;*/
  background: white;  
  color: red;
}

.fa-youtubee {
/*background: #bb0000; 
  color: white;*/
  background: white;  
  color: green;
}

.fa-google {
/*  background: #dd4b39; 
  background: silver;
  color: white; */
  background: white; 
  color: red;
   margin-left: -1px;
}

.fa-netflix {
  background: #ffffff;  
  color: red;
  font-size: 14px;
  font-weight: 550; 
  text-align: center; 
  border: none;   
  width: 85px;  
/*  padding-top: 15px;  */ /* 29 */
   padding: 20px;  /* To add 1 more trending item on left */ /* 12 */
   margin-left: -1px; 
   
}

.fa-netflix:hover {
    opacity: 0.5; 
}

.fa-primeVideo {
  background: #ffffff;  
  color: red;
  font-size: 14px;
  font-weight: '550'; 
  text-align: center; 
  border: none;   
  width: 85px;
/*  padding-top: 17px; */ /* 31  */
  padding: 20px; /* To add 1 more trending item on left */ /* 12 */
}

.fa-primeVideo:hover {
    opacity: 0.5;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  font-size: 20px;
  width: 12px;
  height: 12px;
  text-align: center;
/*  border-radius: 200%;
  border: none;
 */  
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-blog{
 	 background: white;
 	 color: red;
}


.tooltip {
    position: relative;
    display: inline-block;
/*  border-bottom: 1px dotted black; */
}
.tooltip .tooltiptext {
   	visibility: hidden;
   	font-size: 14px;            /* 12  */
/*  font-family: 'Montserrat', sans-serif;  12 */
   	font-family: Calibri;
    width: 144px;           /* 144 200 */
    background-color: white;
  	color: red;
    text-align: left;
    border-radius: 6px;
    padding: 0px 0;
    position: absolute;
    z-index: 1;
    top: 9px;                          /* Adjust for tooltip message positioning */
    left: 100%;
   
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.image-container-netflix {
    width: 37px; /* Set the desired width */
    height: 35px; /* Set the desired height */
    overflow: hidden; /* Ensures that any overflow is hidden */
    display: flex; /* Centers the image */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    margin-left: 3px;
}

.image-container-netflix img {
    width: auto; /* Maintain aspect ratio */
    height: 100%; /* Make the image fill the height of the container */
    max-width: none; /* Prevent the image from scaling down */
}

.image-container-prime {
    width: 49px; /* Set the desired width */
    height: 51px; /* Set the desired height */
    overflow: hidden; /* Ensures that any overflow is hidden */
    display: flex; /* Centers the image */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    margin-left: -3px;
}

.image-container-prime img {
    width: auto; /* Maintain aspect ratio */
    height: 100%; /* Make the image fill the height of the container */
    max-width: none; /* Prevent the image from scaling down */
}