/* General container css */
:root {
    --bs-font-sans-serif: "Google Sans Text", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Google Sans", "Roboto", "Open Sans", "Helvetica", "Arial", sans-serif;
}

.fs-7 {
    font-size: .85rem;
}

.plain-link-underlined {
    color: var(--bs-body-color);
}

.plain-link {
    text-decoration: none;
    color: var(--bs-body-color);
}

.plain-link-no-hover:hover {
    text-decoration: none;
    color: var(--bs-body-color) !important;
}

.btn-xs {
  padding: 0.15rem 0.3rem;
  font-size: 0.7rem;
  line-height: 1.2;
  border-radius: 0.2rem;
}

.insight-container {
    min-height: 700px;
}

.insight-block {

}

.insight-content img {
    display: none;
    max-width: 100%;
}

.insight-vendor-logo {
    max-width: 150px;
    max-height: 48px;
}

.img-thumbnail {
    width: 180vh;
}

.insight-avatar {
    object-fit: cover;
    height: 3rem;
    width: 3rem;
}

.small-avatar {
    object-fit: cover;
    height: 2.5rem;
    width: 2.5rem;
}

.insight-avatar-vendor-logo {
    max-width: 8em;
}

.cover_image {
  width: 100%;
  object-fit: cover;
  object-position: 0 -30px;
  max-height: 12em;
}
.cover_image_text_overlay {
  z-index: 1;
  position: absolute;
  top: 25%;
  left: 5%;
  color: white;
}
@media (max-width: 768px) {
  .cover_image {
    object-position: top;
  }
  .cover_image_text_overlay {
    top: 35%;
  }
}

/* Section Banner */
.page-banner {
    align-items: center;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    min-height: 150px;
    padding: 1rem 0;
    position: relative;
}

.page-banner * {
    position: relative;
    z-index: 3;
}

.page-banner .banner-content {
    width: 80%;
}

.page-banner h2,
.page-banner p {
    color: #fff;
}

.page-banner h2 {
    font-family: 'Open Sans', sans-serif!important;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 5px;
}

.page-banner p {
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    line-height: 1.6875rem;
    margin-bottom: 0px;
}

.page-banner .banner-button {
    background-color: #ff7414;
    border-color: #ff7414;
    border-radius: 100px;
    color: #fff;
    font-family: 'Roboto', sans-serif!important;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 10px;
    padding: 9px 27px;
}

.page-banner .banner-button:hover {
    background-color: #E65B00;
    border-color: #E65B00;
}

@media (min-width: 768px) {
    .page-banner .banner-content {
        width: 90%;
    }
}

@media (min-width: 1024px) {
    .page-banner .banner-content {
        width: 93%;
    }
}

@media (min-width: 1280px) {
    .page-banner {
        min-height: 239px;
    }

    .page-banner .banner-content {
        width: 1320px;
    }

    .page-banner h2 {
        font-size: 35px;
    }

    .page-banner h2 {
        margin-bottom: 20px;
    }

    .page-banner p {
        font-size: 20px;
    }

    .page-banner .banner-button {
        font-size: 1.125rem;
        margin-top: 24px;
        padding: 9px 27px;
    }
}

/* Footer css */

footer.main-footer {
    padding: 20px 0 0 0;
    background: #002a3d;
}

footer .footer-row {
    width: 80%;
    margin: 0 auto;
    padding: 0 2em 2em 2em;
    display: grid;
    gap: 1em;
}

@media (min-width: 1600px) {
    .footer-row .footer-column:first-child {
        padding-left: 110px;
    }
}

.footer-row .rounded-pill {
    margin-top: 10px;
    padding: 10px 20px;
}

@media (min-width: 900px) {
    footer .footer-row {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

@media (max-width: 900px) {
    footer .footer-row {
        width: 98%;
        padding: 0 1em 1em 1em;
    }
}

.footer-column ul {
    padding-left: 2em;
    list-style: none;
}

@media (max-width: 900px) {
    .footer-column ul a p {
        padding-left: 1em;
    }
}

.footer-column li {
    margin-bottom: 0.5em;
}

.footer-column li a {
    color: #ffffff;
    white-space: nowrap;

    text-decoration: none;
}

.footer-column li a:hover {
    color: #0d96d4;
}

.footer-column .icon {
    margin-right: 0.5em;
}

.footer-column h5 {
    margin-bottom: 1em;
}

.footer-column p {
    margin-bottom: 1em;
    /* font-size: 0.85em; */
    font-size: .95em;

}

.footer-column .btn-warning {
    background-color: #FF7413;
    color: white;
    border-color: #FF7413;
}


@media screen and (min-width: 900px) {
    .footer-column-bordered {
        border-left: 1px solid #eeeeee56;
        padding-left: 3em;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.row.footer-row {
        display: flex;
        flex-direction: row;
	}

    .footer-row > * {
        width: unset;
    }

    .footer-column:nth-child(4) {
        margin-top: -210px;
    }
}

.typo-light h6 {
    margin-bottom: 1.2em;
    margin-top: 0.8em;
}

.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small {
    color: #fff;
}

.footer-copyright-container {
    color: white;
    font-size: 0.75em;
}

main {
    min-height: 750px;
}

.text-small {
    font-size: 0.875em;
}

/* Brand colour vars */

:root {
    --psn-brand-colour--insight-members-only: palegreen;
    --psn-brand-colour--insight-premium: gold;
    --psn-brand-colour--insight-public: lightskyblue;
}

/* End brand colour vars */

.feature-image-listing {
    filter: grayscale(100%);
    opacity: 0.9;
}



.main-gradient {
    background: rgb(229,255,255);
    background: linear-gradient(90deg, rgba(229,255,255,1) 0%, rgba(0,150,214,1) 100%);
}

/* Marketplace CSS */

.vendor-logo {
    background-color: #FFF;
    max-height: 12em;
}

.bg-psn-gradient {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 149, 215, 0.2));
}

@media only screen and (max-width: 768px) and (min-width: 0px) {
    .bg-psn-gradient {
        background: none;
    }
}

@media only screen and (max-width: 575px) and (min-width: 0px) {
    .responsive-font-size {
        font-size: 0.8em;
    }
}

.flag-icon {
    height: 1.5em;
    opacity: 75%;
}

.vendor-logo-card {
    height: 10vh;
    width: 100%;
    object-fit: contain;
}

@media only screen and (max-height: 820px) and (min-height: 401px) {
    .vendor-logo-card {
        height: 16vh;
    }
}

@media only screen and (max-height: 400px) and (min-height: 0px) {
    .vendor-logo-card {
        height: 20vh;
    }
}

/* Menu CSS */

.avatar-menu {
    list-style: none;
}

.nav-item .dropdown-menu-right {
    right: 0;
    left: auto;
}

/* Groups CSS */

.group-logo-card {
    height: 10vh;
    width: 100%;
    object-fit: contain;
}

@media only screen and (max-height: 820px) and (min-height: 401px) {
    .group-logo-card {
        height: 16vh;
    }
}

@media only screen and (max-height: 400px) and (min-height: 0px) {
    .group-logo-card {
        height: 20vh;
    }
}

.group-avatar-overlay-card-img-top {
    max-height: 5vh;
    position: absolute;
}

/* Uncomment when deploying Groups layout changes */
/* .group_image_container {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

@media (min-width: 992px) {
    .group_image_container {
        border-top-right-radius: 0;
        border-bottom-left-radius: 8px;
    }
}

.group_image_container .card-img {
    width: 100px;
}

@media (min-width: 768px) {
    .h-md-100 {
        height: 100%;
    }
} */

/* Comments CSS */
div.fr-element.fr-view {
  min-height: 200px !important;
}
.comment-list {
  max-width: 950px;
}

.comment-list li {
  list-style: none;
}

.comment-list .fr-box.fr-basic.fr-top {
  width: 100% !important;
}

.container__comment-replies {
    margin-left: 50px;
    margin-right: 10px;
}

@media (max-width: 900px) {
    .container__comment-replies {
        margin-left: 10px;
        margin-right: 5px;
    }
}