/*
Theme Name: Xbox Guide
Template: generatepress
Sheet: widgets.css */
@media screen and (max-width: 768px) {
    img.header-image.is-logo-image {
        width: auto; /* Make the image responsive */
        height: 100%; /* Ensure the height adjusts automatically */
        display: block; /* Make the image a block element */
        margin: 0 auto; /* Center the image horizontally */
    }
}

@media screen and (max-width: 680px) {
    img.header-image.is-logo-image {
        width: auto; /* Make the image responsive */
        height: 100%; /* Ensure the height adjusts automatically */
        display: block; /* Make the image a block element */
        margin: 0 auto; /* Center the image horizontally */
    }
}

@media screen and (max-width: 580px) {
    img.header-image.is-logo-image {
        width: auto; /* Make the image responsive */
        height: 100%; /* Ensure the height adjusts automatically */
        display: block; /* Make the image a block element */
        margin: 0 auto; /* Center the image horizontally */
    }news-
}

@media screen and (max-width: 480px) {
    img.header-image.is-logo-image {
        width: auto; /* Make the image responsive */
        height: 100%; /* Ensure the height adjusts automatically */
        display: block; /* Make the image a block element */
        margin: 0 auto; /* Center the image horizontally */
    }
}

@media screen and (max-width: 380px) {
    img.header-image.is-logo-image {
        width: auto; /* Make the image responsive */
        height: 100%; /* Ensure the height adjusts automatically */
        display: block; /* Make the image a block element */
        margin: 0 auto; /* Center the image horizontally */
    }
}


.game-list {
    text-align: center;
}

.game-list li {
    display: inline-block;
    margin: 0 10px;
}

.view-more {
    text-align: center;
}

#widget-cycle-container {
    position: relative;
    padding: 10px; /* Add padding between the widget and its content */
}

#widget-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.widget-list {
    display: none;
    width: 100%;
}

/* Define a CSS variable for the container width minus 20px */
:root {
  --container-width: calc(100vw - 200px);
}

.widget-title-home {
    align-items: center;
	margin-bottom: 5px;
}

.widget-title-home .arrow {
    margin-right: 2px; /* Adjust as needed */
    flex-grow: 1;
    cursor: pointer;
	font-size: calc(var(--container-width) * 0.015); /* Set font size to 3% of the container width minus 20px */
}



.widget-title-home .title {
    white-space: nowrap;
    flex-grow: 1; /* Allow title to grow to fit available space */
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
    font-size: calc(var(--container-width) * 0.015); /* Set font size to 3% of the container width minus 20px */
}


.arrow {
    cursor: pointer;
    padding: 0 5px;
}

.title-container {
    display: flex;
    align-items: center;
}

.title-container span {
    white-space: nowrap;
    margin-right: 10px; /* Adjust as needed */
}

/* News Alligator */
.news-grid {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 5px;
}
.news-item {
    position: relative;
    overflow: hidden; /* Ensure text doesn't overflow outside the image */
}

/* Apply the aspect ratio only to images that are NOT inside .branding-container */
.news-item img:not(.branding-container img) {
    width: 100%; /* Full width of the container */
    aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */
    object-fit: cover; /* Fill the space, cropping if necessary */
    display: block;
}



/* Mobile Styles */
@media (max-width: 767px) {
    .news-grid {
        display: block; 
        grid-template-columns: 1fr; /* One column for mobile */
        grid-template-rows: auto; /* Allow automatic height for all rows */
    }

    .news-item {
        height: auto; /* Auto height for all items to fit the content */
        margin-bottom: 5px; /* Space between items */

    }

    /* Make items 2-5 half height */
    .news-item:nth-child(n+2) {
        height: 10em; /* Half height, minus margin */
    }
	
	
.branding-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1; /* Ensure the branding image appears above the news item */
    width: 15%; /* Set the width to 15% of the news item container */
}

.news-item:first-child .branding-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1; /* Ensure the branding image appears above the news item */
    width: 10%; /* Set the width to 10% of the news item container */
}

.branding-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1; /* Ensure the branding image appears above the news item */
    width: 10% !important; /* Set the width to 15% of the news item container */
}
	
}


.news-item .title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* Full width */
background-color: rgba(0, 0, 0, 0.7); /* Black background with 70% opacity */
    color: white;
    padding: 1%;
	padding-left: 4%;
	padding-right: 4%;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Liberation Sans, Arial, sans-serif;
margin: auto;
	
}



.news-item .title-cont {
	height: 100%;
background-color: rgba(0, 0, 0, 0); /* Black background with 70% opacity */
	overflow: hidden;
margin: auto;

}


.news-item .title-overlay h3 {
    font-size: 0.8em;
    line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
		   -webkit-box-align: center; /* Center items vertically */
   -webkit-box-orient: vertical;
   margin: auto;
}


/* Set the default font size */
.news-item:first-child .title-overlay h3 {
    font-size: 6vw !important;
}


/* Define a maximum font size using a media query */
@media screen and (min-width: 500px) {
    .news-item:first-child .title-overlay h3 {
        font-size: 1.1em !important; /* Maximum font size for larger screens */
    }
}

@media screen and (max-width: 768px) {
.news-item:first-child .title-overlay h3 {
    font-size: 0.8em !important;
	}}

/*
@media screen and (max-width: 768px) {
 .news-item:first-child .title-overlay h3 {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 480px) {
 .news-item:first-child .title-overlay h3 {
        font-size: 12px !important; 
    }
}

/* Override font size for h3 elements inside .title-overlay on smaller screens for long titles
@media screen and (max-width: 768px) {
 .news-item .title-overlay.long-title h3 {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 480px) {
 .news-item .title-overlay.long-title h3 {
        font-size: 8px !important; 
    }
}



/* Make the first news item larger */
.news-item:first-child {
    grid-column: span 2;
}

.branding-image {
    width: 100%; /* Set the width to 100% of the branding container */
    height: auto; /* Allow the height to adjust automatically based on the width */
    max-width: 128px; /* Set a maximum width of 128px */
    max-height: 128px; /* Set a maximum height of 128px */
}

/* Apply margin adjustment only on mobile devices */
@media only screen and (max-width: 768px) {
    .news-widget {
        margin-left: 0px;
    }
}

/* Apply margin adjustment only on mobile devices */
@media only screen and (max-width: 768px) {
    .right-sidebar-news {
        margin-left: 10px;
    }
}



.widget-area .widget {
	padding-bottom: 0px !important;
	padding-top: 0px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	margin-top: -5px !important;
}


.widget-area .widget:not(:first-child) {
	padding-left: 20px !important;
	padding-top: 0px !important;
}

@media (max-width: 767px) {
.widget-area .widget:not(:first-child) {
	padding-left: 0px !important;
	padding-top: 0px !important;
}}


@media (max-width: 767px) {
.widget-area .widget {
	padding-left: 0px !important;
	padding-right: 0px !important;
	}}



.news-widget .news-item {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Align items vertically */
    margin-bottom: 10px; /* Add margin between news items */
}

.news-widget .news-item-list {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Align items vertically */
    margin-bottom: 10px; /* Add margin between news items */
}

.news-widget .branding-image {
    width: 50px; /* Adjust image width as needed */
    height: auto; /* Ensure aspect ratio is maintained */
  /*  margin-right: 10px; /* Add spacing between image and text */
}

.news-widget .news-title {
    flex: 1; /* Allow the text to fill remaining space */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Set text color */
	font-size: 85%;
	padding-left: 10px;
	font-weight: semi-bold;
	 font-family: 'Roboto', Arial, sans-serif;
	 }
	 
	 .news-widget .news-title:hover {
	text-decoration: underline;
}
.widget_news_articles_widget {
    padding: 20px 20px 0px 20px !important;
	
}

.widget-title {
    display: flex;
    align-items: center;
	margin-bottom: 10px !important;
}

.more-news {
    font-size: 1.5em; /* Adjust the font size of "More News" */
}

.news-date {
    text-transform: uppercase; /* Convert text to uppercase */
    color: #888888; /* Mid-grey color */
    font-size: 14px; /* Customize the font size for the date header */
    margin-bottom: 15px; /* Add margin below the date header */
    font-weight: bold;
}
}

}

.news-widget .more-news-link {
    display: block;
    text-align: center;
	 font-family: "Helvetica Neue", Helvetica, Liberation Sans, Arial, sans-serif;
    font-weight: bold;
    color: #0e7a0d;
    margin-top: 20px; /* Adjust margin as needed */
}

/* Separate CSS for News Main Page formatting */

.news-date-group {
    margin-bottom: 20px; /* Add margin between date groups */
}



.news-container {
    display: grid;
    grid-template-columns: 1fr; /* Define grid with one column */
    gap: 20px; /* Add gap between grid items */
}

.news-article {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Define grid columns for each news item */
    gap: 20px; /* Add gap between grid items */
    align-items: center; /* Center items vertically */
}

.website-logo {
    width: 50px; /* Set width for the website logo container */
}

.website-logo img {
    width: 100%; /* Ensure the logo fills its container */
    height: auto; /* Maintain aspect ratio */
}

.news-article {
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    margin-bottom: 20px; /* Add margin between articles */
    align-items: center; /* Center items vertically */
}

.title {
    font-size: 20px; /* Customize the font size for the article title */
    text-align: left; /* Ensure the title is always left-aligned */
    margin: 0; /* Remove any default margin */
    flex: 1; /* Allow the title to take up remaining space */
}



.news-image {
    width: 150px; /* Set the width for the news image container */
}

.news-image img {
    width: 100%; /* Ensure the image fills its container */
    height: auto; /* Maintain aspect ratio */
}


/* CSS Styles */
.news-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Adjust margin as needed */
}

/* CSS Styles */
.news-header-cs {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Adjust margin as needed */
	margin-top: 25px;
}

.news-header-cs-main {
    display: flex;
    align-items: center;
    margin-bottom: 0px; /* Adjust margin as needed */
	margin-top: 0px;
}

.latest-text {
    font-weight: bold;
	margin-right: 8px;
	font-size: 24px;
    position: relative; /* Required for positioning the pseudo-element */
}

.latest-text::after {
    content: ''; /* Required for pseudo-element */
    position: absolute;
    bottom: -5px; /* Adjust the position of the line */
    left: 0;
   width: 200px; /* Set the width of the line */
    height: 1%; /* Adjust the height of the line */
    background-color: #0e7a0d; /* Color of the line */
}



.pipe {
    display: inline-block;
    width: 4px; /* Adjust width to change pipe thickness */
    height: 25px; /* Adjust height to change pipe length */
    background-color: #0e7a0d; /* Color for pipes */
    margin-right: 2px; /* Adjust margin as needed */
}

.pipe-offset {
    display: inline-block;
    width: 4px; /* Adjust width to change pipe thickness */
    height: 25px; /* Adjust height to change pipe length */
    background-color: #0e7a0d; /* Color for pipes */
    margin-top: -5px; /* Adjust offset as needed */
}


.center-button {
    text-align: center; /* Center align the content */
    margin-top: 2px; /* Adjust as needed */
}.more-news-button {
    display: inline-block; /* Change display to inline-block */
    padding: 8px 20px; /* Adjust padding for height and width */
    background-color: #333; /* Dark grey background */
    color: #fff; /* White text */
    text-decoration: none;
    border: none;
	width: 100%;
    border-radius: 0; /* Square corners */
    text-align: center; /* Center the text */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transition */
}

.more-news-button-container {
    text-align: left; /* Center align the button */
    margin-top: 20px; /* Optional: add some margin for spacing */
}

.more-news-button:hover {
    background-color: #0a5a08 !important; /* Green background on hover */
    color: #fff; /* White text on hover */
}

.more-news-button:visited {
    background-color: #333; /* Keep the same background as the default */
    color: #fff; /* Keep the text white after visit */
}

.more-news-button:active {
    background-color: #0a5a08; /* Darker green background when the button is clicked */
    color: #fff; /* Keep the text white during the click */
}


/*
.news-widget.fixed-height  {
    max-height: 730px !important;
	    overflow: hidden !important; 
}

.widget_news_articles_widget {
    height: 767px !important; 
    overflow: hidden !important;
}
*/

.horizontal-bar {
    width: 90%;
    height: 1px;
    background-color: #d3d3d3; /* very light grey */
    margin: 20px auto 0px auto; /* adjust margin as needed */
}


/* CSS for the Game Pass Metrics Box */
.game-pass-metrics-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0px;
	margin-bottom: 0px !important;
}

.game-pass-metric-box {
    background-color: #0e7a0d;
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-weight: normal;
}

.game-pass-metric-box.default {
    flex: 1 1 calc(30% - 20px); /* Adjust width as needed */
}

.game-pass-metric-box.single {
    flex: 1 1 calc(100% - 20px); /* Adjust width as needed */
}


.game-pass-metric-box.avg-value {
    flex: 1 1 calc(40% - 20px); /* Adjust width as needed */
}

.game-pass-metric-box.total-value {
    flex: 1 1 calc(50% - 20px); /* Adjust width as needed */
}

.game-pass-metric-box strong {
    font-weight: bold;
}

.about-metrics-link {
    display: inline-block;
    margin-top: 0px;
    margin-left: 0px;
	font-size: 13px;
    color: #0e7a0d;
    text-decoration: underline;
}

.about-metrics {
    margin-top: -10px !important;
    margin-left: 0px;
	margin-bottom: 5px !important;
	font-size: 13px;
    color: #888;
}

.about-metrics-home {
    margin-top: -10px !important;
    margin-left: 0px;
	margin-bottom: 5px !important;
	padding-bottom:10px;
	font-size: 13px;
    color: #888;
}

.tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    margin-top: 5px;
}

.tooltip.visible {
    display: block;
}

/* Ensure the boxes adjust for smaller screens */
@media (max-width: 768px) {
    .game-pass-metric-box.default {
        flex: 1 1 calc(50% - 20px); /* Two boxes per row on medium screens */
    }
    .game-pass-metric-box.avg-value,
    .game-pass-metric-box.total-value {
        flex: 1 1 100%; /* One box per row on medium screens */
    }
}

@media (max-width: 480px) {
    .game-pass-metric-box {
        flex: 1 1 100%; /* One box per row on small screens */
    }
}

.right-sidebar-news {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
    padding-left: 0px !important;
    padding-right: 20px !important;
	
}
.right-sidebar-news p {
    margin-bottom: 0em !important; }
	






.branding-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1; /* Ensure the branding image appears above the news item */
    width: 15%; /* Set the width to 15% of the news item container */
}

.news-item:first-child .branding-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1; /* Ensure the branding image appears above the news item */
    width: 10%; /* Set the width to 10% of the news item container */
}

.branding-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1; /* Ensure the branding image appears above the news item */
    width: 15%; /* Set the width to 15% of the news item container */
}


.branding-container-sidebar {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1; /* Ensure the branding image appears above the news item */
   /* width: 15%; /* Set the width to 15% of the news item container */
}

.open-new-tab-container-main {
    position: absolute; /* Keep it absolute to position it within the branding-container */
    top: 40%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to be truly centered */
    display: flex;
    align-items: center; /* Center the icon vertically within the container */
    justify-content: center; /* Center the icon horizontally within the container */
    z-index: 1000; /* Ensure it appears above other elements */
}

.open-new-tab-container {
    position: absolute;
    top: 40%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to be truly centered */
    margin-right: 5px; /* Adjust position as needed */
	 z-index: 1000; /* Ensure it appears above other elements */
	
}

.open-new-tab-icon {
    font-size: 1.2em; /* Default icon size */
    text-decoration: none; /* Remove underline from the link */
    transition: color 0.3s; /* Smooth transition for color changes */
}

/* Define specific colors for each branding */
.open-new-tab-icon.color-dark-grey {
    color: rgba(0, 0, 0, 0.4); /* Dark grey with 80% transparency */
}

.open-new-tab-icon.color-white {
    color: rgba(255, 255, 255, 0.6); /* White with 80% transparency */
}

.open-new-tab-icon.color-default {
    color: rgba(255, 255, 255, 0.6); /* Default color with 90% opacity */
}

/* Optional hover effect */
.open-new-tab-icon:hover {
    color: #FFF; /* Change to white on hover if desired */
}



.count-icon:hover .count {
    color: white; /* Color when hovered */
}


.open-new-tab-icon i {
    vertical-align: middle; /* Vertically align the icon */
}



.count-icon {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 1.5em; /* Adjust the icon size */
  color: hsla(0, 0%, 100%, 0.8); /* 90% white transparency */
  z-index: 1000;
}

.count-icon:hover {
  color: hsla(0, 0%, 100%, 0.8); /* 90% white transparency */
}


.count-icon i {
  font-size: 1.2em; /* Inherits the font size from .count-icon */
  vertical-align: middle; /* Aligns the icon vertically */
 /*text-shadow: 0 0 3px #000; If we want a border at a later date*/

}

.count {
  position: absolute;
  top: 12px;
  right: 7px;
  height: 16px;
  width: 16px;
  color: #575760;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  font-weight: bold;
}

.news-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding-right: 10px;
    width: 100%;
}

/* Sidebar comment icon styles */
.sidebar-count-icon {
    display: inline-block;
    font-size: 0.8em; /* Adjust the icon size */
    color: hsla(0, 0%, 50%, 0.8); /* 50% grey transparency */
    position: relative;
	margin-left: 5px;

}


.sidebar-count-icon .count {
    color: hsla(0, 0%, 100%, 0.8); /* 90% white transparency */
	  font-size: 10px;
	  top: 4px;
	  right: 5px;
}
.sidebar-count-icon:hover .count {
    color: hsla(0, 0%, 50%, 0.8); /* 50% grey transparency */
}


.sidebar-count-icon:hover {
   color: hsla(0, 0%, 50%, 0.8); /* 50% grey transparency */
   
}

.coming-soon-gp-intro-paragraph {
	
	padding-top: 20px;
	
}

.sidebar {
	
	padding: 0px !important;
	
}

.inside-right-sidebar {
	
	margin-top: 0px !important;
	padding: 0px !important;
	
}

.news-item-sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensure the comment count goes to the far right */
    height: auto;
}

.horizontal-divider {
    width: 40%; /* Set the width to 50% of the container */
    height: 1px; /* Thin line */
    background-color: #d3d3d3; /* Light grey color */
    margin: 3px auto; /* Center the divider horizontally */
}

.horizontal-divider-sl {
    width: 40%; /* Set the width to 50% of the container */
    height: 1px; /* Thin line */
    background-color: #d3d3d3; /* Light grey color */
    margin: 3px auto; /* Center the divider horizontally */
	margin-top: 40px;
	margin-bottom: 30px;
}

.horizontal-divider-posts-home {
    width: 40%; /* Set the width to 50% of the container */
    height: 1px; /* Thin line */
    background-color: #d3d3d3; /* Light grey color */
    margin: 3px auto; /* Center the divider horizontally */
	margin-top: 20px !important;
	margin-bottom: 10px !important;
}

.horizontal-divider-posts-home-thin {
    width: 40%; /* Set the width to 50% of the container */
    height: 1px; /* Thin line */
    background-color: #d3d3d3; /* Light grey color */
    margin: 3px auto; /* Center the divider horizontally */
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube-video {
    max-width: 100%; /* Ensure it doesn't exceed its container's width */
    overflow: hidden; /* Hide any overflow that could cause issues */
	
}

.video-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
	margin-bottom: 1em;
}

.video-date {
	margin-bottom: 1em;
}



div#custom-sidebar {
    max-width: 40%;
}

/* Media query for screen sizes below 768px (adjust as needed) */
@media (max-width: 768px) {
    div#custom-sidebar {
        max-width: 100%;
    }
}

/* Apply top padding to the 2nd and subsequent .news-date elements */
.news-date:nth-of-type(n+2) {
    padding-top: 10px;
}