#uploadedImage {
    width: 300px;
    height: auto;
    margin-top: 10px;
    border-radius: 10px;
}

.textboxTitle {
    display: inline-block;
    margin-right: 15px;
    /*margin-left: 120px;*/
}

.textboxInput {
    display: inline-block;
    float: right;
    /*margin-right: 120px;*/
}

.inputRowDivider {
}

.inputRow {
}

.registerHeader {
    text-align: center;
}

.profilePictureSection {
    margin-left: 30px;
}

/*.form{
    max-height: 400px;
    overflow:auto;
}*/

.formBtn {
    margin-top: 15px;
    float: right;
}

.agreementCheckBox {
    float: right;
}

@media(max-width: 490px) {
    #textbox {
        width: 200px;
    }
}

@media(max-width: 422px) {
    #textbox {
        width: 150px;
    }
}

@media(max-width: 440px) {
    .title {
        font-size: 12px;
    }
}

@media(max-width: 332px) {
    .title {
        font-size: 10px;
    }

    #textbox {
        width: 130px;
    }
}

#footerSection {
    position: absolute;
    bottom: 0;
    width: 100%;
}



@media(max-width: 990px) {
    .navbar-fixed-bottom {
        position: absolute;
    }
}

#accountBlock {
    border-left: solid black 1px;
}

@media(max-width: 992px) {
    #footerSection {
        position: static;
    }

    #accountBlock {
        border-left: none;
    }
}





.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* The actual popup */
    .popup .popuptext {
        visibility: hidden;
        width: 175px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

        /* Popup arrow */
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    /* Toggle this class - hide and show the popup */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}




/*CUSTOM STYLING by Megan O'Brien*/
.postTextBox {
    width: 100%;
    height: 200px !important;
    max-height: 400px;
    min-height: 100px;
    resize: none;
}

.btnPostComment {
    display: inline-block;
    float: right;
    width: 100px;
}

#imgDiv {
    max-width: 500px;
    max-height: 500px;
    overflow: hidden;
}

.commentTextBox {
    width: 80%; 
    resize: vertical; 
    min-height: 50px; 
    max-height: 250px; 
    overflow-y:auto;
    display: inline-block;
}

#postHeader {
    display: inline-block;
    width: 100%;
}

#popupImage {
    max-width: 800px;
    height: auto;
    display: block;
    margin: auto;
}

#companyName {
    font-style: italic;
    font-size: 12px;
    display: inline-block;
}

@media screen and (max-width: 310px) {
    .commentTextBox {
        width: 70% !important;
    }
}

@media screen and (max-width: 320px) {
    .k-upload .k-upload-button {
        min-width: 0em;
    }

    .username {
        font-size: 10px !important;
    }

    #companyName {
        font-size: 10px !important;
    }
}

@media screen and (max-width: 335px) {
   .dropdown-menu{
       min-width: 90px !important;
   }
}

@media screen and (max-width: 365px) {
    .k-upload .k-upload-button {
        min-width: 0em;
    }

    .k-file {
        width: 90px;
    }

    .user-block .username {
        font-size: 12px;
    }

    .username {
        font-size: 12px;
    }

    #postTime {
        font-size: 9px !important;
    }

    .commentTextInfo {
        margin-top: 20px !important;
    }
}

@media screen and (max-width: 375px){
    .btnPostComment{
        float: none;
    }
}

@media screen and (max-width: 400px) {
    .commentTextBox {
        width: 60%;
    }


    .commentTextInfo {
        white-space: pre-line;
        font-size: 12px;
    }
}

@media screen and (max-width: 500px) {
    #imgDiv {
        margin: auto;
    }

    #postTime {
        font-size: 10px;
    }
}

@media screen and (max-width: 540px) {
    .postToWhomBtn {
        width: 100px;
    }

    .postTextBox {
        height: 100px !important;
    }
}

@media screen and (max-width: 1060px) {
    #popupImage {
        max-width: 100%;
    }
}

/* ===========================================================================
   Newsfeed modernization (2026-07).
   Scoped to the pages that LINK this stylesheet (Newsfeed Member + DisplayPost,
   Groups, User profile). This sheet loads AFTER the timeline.css bundle, so the
   rules below intentionally override the legacy AdminLTE card chrome to give the
   feed a cleaner, modern social-card look. Visual polish ONLY — no DOM changes,
   no Kendo-widget changes, and the float-based avatar/text layout that
   timeline.css sets (avatar float:left + text margin-left:50px) is left intact.
   No overflow:hidden on the card so the post/comment "..." dropdowns never clip.
   =========================================================================== */

/* --- Post + compose cards: soft rounded, real border, modern shadow --- */
.box.box-widget,
.box.profile-info {
    border: 1px solid #e5e8ef;
    border-top: 1px solid #e5e8ef;   /* replace the flat dark-gray top accent bar */
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    margin-bottom: 18px;
    transition: box-shadow .18s ease;
}

    .box.box-widget:hover {
        box-shadow: 0 6px 18px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);
    }

/* The whole post nests inside .box-header, so rounding + whitening it turns the
   dated gray band into one clean white card face that follows the card corners. */
.box-widget .box-header,
.profile-info .box-header {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 14px 16px 6px;
}

.box-widget .box-header.with-border {
    border-bottom: 0;
}

/* --- Avatar: subtle white ring so it lifts off the card --- */
.img-circle-newsfeed {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e5e8ef;
}

/* --- Author / meta typography --- */
.user-block .username a {
    color: #1f2a44;
    text-decoration: none;
}

    .user-block .username a:hover {
        color: #2563eb;
        text-decoration: underline;
    }

#companyName {
    color: #6b7280;
}

.user-block .description {
    color: #98a1b3;
    margin-top: 2px;
}

/* --- Post body: comfortable padding, readable line height --- */
.box-widget .box-body {
    padding: 6px 16px 14px;
    line-height: 1.5;
}

/* --- Comment thread: soft tinted, rounded panel (stays inset per inline width) --- */
.box-widget .box-comments {
    background: #f6f8fb !important;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    padding: 4px 12px;
}

.box-comments .box-comment {
    border-bottom: 1px solid #e9edf3;
}

    .box-comments .box-comment:last-child {
        border-bottom: 0;
    }

/* --- Compose + comment textareas: softer border and a clear focus ring.
       (Radius intentionally left to forms.css's app-wide 3px input standard.) --- */
textarea.postTextBox,
textarea.commentTextBox {
    border: 1px solid #dfe3ea;
}

    textarea.postTextBox:focus,
    textarea.commentTextBox:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
        outline: none;
    }