﻿html {
    font-size: 15px;
}

body {
    font-family: 'Open Sans', sans-serif;
    /*background-color: #ebebeb;    */
}

.bg-gray {
    background-color: #e5e5e5;
}

.bg-lightgray {
    background-color: #efefef;
}

.bg-light-yellow {
    background-color: lightyellow;
}

/* Limit Width */

.limit-width-center {
    max-width: 625px;
}

.limit-width-right {
    max-width: 500px;
}

.limit-width-left {
    max-width: 300px;
}

.border-bottom-gray {
    border-bottom: solid;
    border-width: thin;
    border-color: #e5e5e5;
}

/* --- Limit Width --- */

.anchor-target {
    scroll-margin-top: 50vh;
}

/* Bootstrap overrides */

/* Softer outline-light */
.btn-outline-light {
    color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

    .btn-outline-light:hover,
    .btn-outline-light:focus,
    .btn-outline-light:active {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
    }

.btn-outline-secondary {
    color: #495057;
    border-color: #495057;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        color: #fff;
        background-color: #6c757d; /* Bootstrap secondary base */
        border-color: #6c757d;
    }

/* --- Bootstrap overrides --- */

/* Common styles */

.overflow-hidden {
    overflow-x: hidden;
}

.orange {
    color: orange;
}

.bordered-block {
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
    border-radius: 5px;
}

.line-breaks {
    white-space: pre-line;
}

div.spacing, p:not(:last-child) {
    margin-bottom: 0.6rem;
}

p:last-child {
    margin-bottom: 0;
}

a, a:hover {
    text-decoration: none !important;
}

a, a:hover {
    color: unset;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.link-blue {
    color: #428bca;
}

.link-dashed {
    border-bottom: dashed;
    border-width: thin;
}

.pointer {
    cursor: pointer;
}

@media (hover: hover) {
    .link-highlight:hover {
        color: orange;
        transition: 0.15s;
        -webkit-transition: 0.15s;
    }
}

.text-right {
    text-align: right;
}

.meta .meta-bg-gray {
    background-color: lightgray;
}

.meta {
    font-size: 0.9rem;
    color: #494949;
}

div.line {
    border-bottom: solid;
    border-width: thin;
    border-color: lightgray;
}

.border-radius-5 {
    border-radius: 5px;
}

img.size-70 {
    height: 70px;
    width: 70px;
    border-radius: 35px;
}

img.size-50 {
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

.font-size-105 {
    font-size: 1.05rem;
}

.border-red {
    border-style: solid;
    border-width: 3px;
    border-color: brown;
}

/* Main logo */

.main-logo-container {
    /*padding: 1.5rem 3rem;*/
    color: #4d4d4d;
}

.main-logo-text {
    background-color: white;
    font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
}

    .main-logo-text span {
        color: orange;
        margin-right: 2px;
    }

.main-logo-caption {
    text-transform: lowercase;
    font-size: 1.25rem;
    margin-top: -1rem;    
}

/* --- Main logo --- */

/* Hidden logo */

.hidden-logo {
    font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: bolder;
    text-transform: uppercase;
    color: orange;
}

/* --- Hidden logo --- */

/* Navigation */

nav.navbar {
    border-bottom: solid;
    border-width: 3px;
    border-color: orange;
}

.nav-link {
    color: lightgray;
}

    .nav-link:focus, .nav-link:hover {
        color: white;
    }

.nav-item:focus, .nav-item:hover {
    background-color: orange;
    color: white;
}

.navbar-brand {
    font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
    text-transform: uppercase;
    color: orange;
    font-weight: 700;
    font-size: 2rem;
}

    .navbar-brand span {
        color: #e2e2e2;
    }

/* Status Bar Mobile */

.status-bar-mobile {
    
}

/* --- Status Bar Mobile --- */

/* --- Navigation */

/* Breadcrumbs */

.breadcrumbs-container {
    padding: 0.7rem;
    font-size: 0.9rem;
    background-color: #f8f8f8;
    border-bottom: solid;
    border-width: thin;
    border-color: #e5e5e5;
    color: #808080;
}

.custom-breadcrumbs .separator {
    color: darkgray;
}

.permanent-address-container {
    color: #808080;
}

    .permanent-address-container .address {
        border-bottom: solid;
        border-width: thin;
        border-color: lightgray;
        white-space: nowrap;
    }


/* --- Breadcrumbs --- */

/* --- Common styles --- */

/* Custom headers */

.header-double-underlined {
    border-bottom: solid;
    border-width: thin;
    border-color: lightgray;
    padding-bottom: 7px;
}

.header-border-thick {
    border-bottom: solid;
    border-width: 2px;
    border-color: lightgray;
    padding-bottom: 7px;
}

.header-underlined {
    margin-bottom: 30px;
}

.header-underlined span, .header-double-underlined span {
    border-bottom: solid;
    border-width: 3px;
    border-color: orange;
    padding-bottom: 5px;
}

.mb-1px {
    margin-bottom: 1px;
}

.mt-1px {
    margin-top: 1px;
}

.mb-2px {
    margin-bottom: 2px;
}

.mt-2px {
    margin-top: 2px;
}

/* --- Custom headers --- */

/* Home Categories */

.category-tile .img-container {
    overflow: hidden;
}

.category-tile div.category-image {
    height: 280px;
    transition: transform .2s;
}

    .category-tile div.category-image:hover {
        -ms-transform: scale(1.05); /* IE 9 */
        -webkit-transform: scale(1.05); /* Safari 3-8 */
        transform: scale(1.05);
    }


/* --- Home Categoreis --- */





/* Group */

.group-info {
}

.group-info img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}

.group-info h1 {
    line-height: 1.8rem;
}

.group-info h2 {
    line-height: 1.4rem;
}

/* --- Group --- */

/* Post */

.post-content {
    overflow-x: hidden;
}

.post-header .group-title {
    color: #636363;    
}


.post-header img {    
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}

.post-meta {
    font-size: 0.9rem;
    color: #636363;
}

/* --- Post --- */

/* Block Footer */

/*.block-footer i {
    font-size: 1.5rem;
}*/

.block-footer {
    color: #808080;
}


/* Repost */

.repost-container {
    border-top: solid;
    border-width: thin;
    border-color: lightgray;
}

/* --- Repost --- */
/* --- Block Footer --- */

/* Attachments */

.attachments {
    overflow-x: hidden;
}

/* --- Attachments --- */

/* Video */

/*.video-container {
    margin-bottom: 2rem;
}*/

.video-title-container {
    background-color: #171717;
    color: lightgray;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.video-title-flex {
    display: flex;
    align-items: center;
}

.video-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 1.05rem;
}

.video-title-flex i {
    font-size: 1.5rem;
}

.video-image {
    width: 100%
}

/* --- Video --- */

/* Document */

.doc .doc-title {
    margin-bottom: 0.7rem;
}

.doc .doc-download {
    flex-shrink: 0
}

/* --- Document --- */

/* Sidebar Posts */

.sidebar-post .post-meta {
    font-size: 0.9rem;
}

.sidebar-post {
    overflow-x: hidden;
}

/* --- Sidebar Posts --- */

/* Group Tiles */

.category-main .group-tile {
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
    border-radius: 5px;
    padding: 0.5rem;
    box-shadow: 1px 1px lightgray;
}

.sidebar-groups .group-tile:not(:last-child) {
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: solid;
    border-width: thin;
    border-color: lightgray;
}

.category-main .group-tile:hover {
    background-color: #f6f6f6;
}

.group-tile .group-avatar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}

.group-tile .group-info {
    padding-top: 2px;
    height: 43px;
    overflow: hidden;
}

.group-tile .group-title {
    font-size: 1.02rem;
    max-height: 38px;
    overflow: hidden;
    line-height: 19px;
}

.group-tile .group-status {
    font-size: 0.9rem;
    color: #494949;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Group Tiles --- */

/* Random posts */

.random-post .post-thumb {
    width: 100px;
    height: 70px;
    border: solid;
    border-width: thin;
    border-color: #e5e5e5;
}

/* --- Random posts --- */

/* Sidebar Categories */

.sidebar-categories {
    background-color: #f8f8f8;
    font-size: 0.9rem;
}

.sidebar-category {
    line-height: 1.3rem;
    margin-bottom: 0.6rem;
}

/* --- Sidebar Categories --- */

/* Custom Forms */

.custom-form {
    background-color: #f5f5f5;
}

.custom-form input::placeholder, .custom-form textarea::placeholder {
    font-style: italic;
    color: gray;
}

/* --- Custom Forms --- */

/* Comments */

.comments-section .header {
    margin-bottom: 2rem;
}

.comment-header {    
    border-radius: 5px;
}

.comment-header .comment-date {
    font-size: 0.9rem;
    color: #494949;
}

.comment-likes {
    font-size: 0.9rem;    
    flex-shrink: 0;
}

.comment-likes span {
    color: #494949;
}

.comment-likes i {
    color: brown;
}

.comment:not(:last-child), .thread-container {
    border-bottom: solid;
    border-color: lightgray;
    border-width: thin;
}

.comment-text {
    overflow-x: hidden;
}

.reply-comment {
    border-left: solid;
    border-width: thin;
    border-color: lightgray;
}

.comment-footer {
    font-size: 0.85rem;
    align-items: end;
}

.comment-footer i {
    
}

.thread-comment {
    border-left: solid;
    border-width: 15px;
    border-color: #f6f6f6;    
    
}

.comment-form {
    background-color: #fffdf6;
}

.comment-form .hint {
    font-size: 0.85rem;    
    line-height: 1.2rem;
}

.comment-form input::placeholder, .comment-form textarea::placeholder {
    font-style: italic;
    color: gray;
}

.comment-form input:focus::placeholder, .comment-form textarea:focus::placeholder {
    color: lightgray;
} 

#fixed-comment-button {
    position: fixed;
    right: 10px;
    bottom: 30%;
    border-radius: 5px;
    border: solid;
    border-width: thin;
    border-color: lightgray;  
    text-align: center;
}

#fixed-comment-button .caption {
    font-size: 0.7rem;    
}

.comment-quote-title {
    font-size: 0.9rem;
    background-color: #cacaca;
    text-align: center;
    margin-top: 10px;
}

.comment-quote {    
    background-color: #e5e5e5;
    padding: 10px;    
    margin-bottom: 10px;
}

.comment-quote-header {
    background-color: #cfcfcf;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    margin-bottom: 8px;
}

.comment-quote-author {
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 4px;
}

.comment-quote-date {
    font-size: 0.7rem;
}

.comment-quote-text {
    font-size: 0.8rem;
}


/* --- Comments --- */
/* Share */
.share .share-icon {
    margin-right: 0.1rem;
}

/* --- Share --- */


/* Main Footer */

.main-footer {
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.75rem;
}

.footer-content {
    border-bottom: solid;
    border-width: thin;
    border-color: #808080;
}

.main-footer .header-double-underlined {
    border-color: #494949;
}

.footer-category {
    background-color: #4a4a4a;
}

.footer-category:hover {
    color: #333333;
    background-color: #f5f5f5;
    transition: 0.15s;
    -webkit-transition: 0.15s;
}

.footer-content .footer-text {
    line-height: 1.6rem;
}

.footer-link {
    color: #d9d9bc;
}

.footer-link:hover {
    transition: 0.15s;
    -webkit-transition: 0.15s;
}

/* --- Main Footer --- */

.sticky-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;    
}

/* Dating */

.option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .option-buttons .btn {
        justify-content: center;
        white-space: nowrap;
    }

/* --- Dating --- */

.custom-fixed-top-spacer {
    height: 0;
}

.pill {
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: orange;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* Subscriptions */

.pricing-card { 
    border-radius: 10px;
}

    /* Ensure the header follows the same rounding */
    .pricing-card .card-header {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

.features {
    margin-bottom: 20px;
}

/* Header color for all pricing cards */
.card-header {
    background-color: orange !important;
    color: white;
}

/* Column width cap */
.card-column {
    max-width: 300px;
}

/* Base pricing card */
.pricing-card {
    border-radius: 10px;
    margin: 0 auto; /* center the card inside the column */
    border: 2px solid orange; /* default: orange 2px */
    box-shadow: 0 1px 15px 1px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
    transition: box-shadow .15s ease-in, border-color .15s ease-in;
}

    /* Hover shadow for any card */
    .pricing-card:hover {
        box-shadow: 0 10px 16px rgba(0, 0, 0, .2);
    }

    /* Remove header bottom line */
    .pricing-card .card-header {
        border-bottom: none;
    }

/* Featured card: blue border (still 2px so alignment stays perfect) */
.pricing-card-featured {
    border-color: #0d6efd !important; /* Bootstrap primary blue */    
    border-width: 4px;
}

/* Badge on featured card header */
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d6efd;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    line-height: 1;
    z-index: 1;
}

/* Price typography */
.price .currency {
    font-size: 2rem;
}

.price .big-number {
    font-size: 3rem;
}

/* Spacing between feature rows */
.card-body .features div.d-flex {
    margin-bottom: 15px;
}

/* Check icon color */
.features i {
    color: dodgerblue;
}

/* --- Subscriptions --- */