/* Added to match profile page height */
/*
main .page {
    min-height: 108px;
}
*/

textarea {
    height: 80px;
}

.post {
    position: relative;
    padding: 1rem;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 78px;
    overflow-wrap: break-word;
}
.post.flag {
    padding-left: 1.5rem;
}
.post:after {
    content: '';
    display: table;
    clear: both;
}
main .post {
    background: #ffffff;
    box-shadow: 0 6px 14px 0 #0000001a;
    margin-top: 32px;
    margin-bottom: 32px;
}

main .pagination {
    position: relative;
    padding: 1rem;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 32px;
    text-align: right;
}

.meta:after {
    content: '';
    display: table;
    clear: both;
}
.meta .profile {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-block;
    background: #FF304F;
    color: #fff;
    font-weight: bold;
    font-size: 32px;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    text-align: center;
    background: transparent;
}
.meta .profile img {
    /*
    border-radius: 50%;
    */
}
.page_account .profile {
    margin-bottom: 1rem;
}
.page_account .profile img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    vertical-align: middle;
}
.page_account .profile .file {
    opacity: 0;
    width: 0;    
    height: 0;    
}
.meta .name {
    font-weight: bold;
}
.meta .username {
    /*
    text-decoration: underline;
    */
}
.meta .published_at {
    float: right;
    /*
    text-decoration: underline;
    */
}

.meta a {
    text-decoration: none;
}
.meta a:hover {
    text-decoration: underline;
}

/* BOF: Page Specific Styles */
.page_api-key_add table td {
    overflow-wrap: break-word;
}
/* EOF: Page Specific Styles */


/* BOF: Columns */
.sidebars {
    position: relative;
    margin-top: 32px;
}
.sidebars menu li {
    display: block;
    margin: 1rem;
    font-size: 18px;
}
/* EOF: Columns */

/* BOF: Two Columns */
#app.columns_2 {
    display: grid;
    grid-template-columns: auto 280px 600px 320px auto;
}
#app.columns_2 > header {
    grid-column: 1 / 6;
}
#app.columns_2 > #sidebar_left {
    grid-column: 2 / 3;
}
#app.columns_2 > main {
    grid-column: 3 / 5;
}
#app.columns_2 > footer {
    grid-column: 1 / 6;
}
/* EOF: Two Columns */



/* BOF: Documentation */
.page_documentation main .page {
    margin-bottom: 48px;
    min-height: 564px; 
}

.page_documentation h3 {
    margin: 1rem 0 .5rem;
}
.page_documentation h4 {
    margin: 2rem 0 .5rem;
}
.page_documentation h4:after {
    content: ':';
}

.code {
    /*
    position: sticky;          
    */
    top: 1rem;                    
    margin-top: 1rem;
    margin-bottom: 1rem;
} 
.code code,
.code pre {
    display: block;            
    padding: 1rem;
    overflow-wrap: break-word; 
    white-space: pre-wrap;
}
/* EOF: Documentation */

/* BOF: Pricing */
.columns {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.columns h2 {
    margin: 0;
}
.columns > li {
    margin: 0;
    padding: 1rem;
    width: 100%;
    list-style-type: none;
}
.columns > li ul {
    list-style-type: disc;
    margin: 0;
    padding: 1.5rem;
}
/* EOF: Pricing */

/* BOF: Login */
.page_login main .page {
    display: grid;             
    grid-auto-columns: 1fr;     
    grid-column-gap: 1rem;
}     
.page_login main .page > :nth-child(1) {         
    grid-column: 1 / 5;        
}     
.page_login main .page > :nth-child(2) {         
    grid-column: 1 / 3;        
}     
.page_login main .page > :nth-child(3) {         
    grid-column: 3 / 5;        
} 
/* EOF: Login */

/* BOF: Profile */
.sidebar_profile {
    margin-bottom: 2rem;
    padding: 0 1rem 1rem;
}
.sidebar_profile .meta {
    position: relative;
    padding-left: 78px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    min-height: 74px;
}
.sidebar_profile .follow {
    width: 100%;
    margin-bottom: 1rem;
}
.sidebar_profile .follow button {
    width: 100%;
}
/* EOF: Profile */


/* BOF: Actions post_actions */
.actions:after {
    content: '';
    display: table;
    clear: both;
}
.actions > * {
    display: inline-flex;
    width: 40px;
    justify-content: space-between;
    align-items: center;
    margin-right: 16px;
}
.actions a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.actions a:hover {
    border-bottom: 1px solid currentColor;
}
.actions a[data-value="0"] {
    opacity: 0;
}
.actions .flagged,
.actions .unflagged {
    float: right;
    margin-right: 0;
    width: auto;
}

.actions .flag,
.actions .unflag {
    display: none;
}
.actions .flagged .unflag {
    display: block;
}
.actions .unflagged .flag {
    display: block;
}

.actions .star,
.actions .unstar {
    display: none;
}
.actions .starred .unstar {
    display: block;
}
.actions .unstarred .star {
    display: block;
}
/* EOF: Actions post_actions */

/* BOF: Notices */
main > .notice {
    max-width: calc(1200px - 2rem);
    margin: 0 auto;
}
/* EOF: Notices */

/* BOF: Threads */
.depth {
    padding-left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.depth_1 {
    padding-left: 45px;
}
.depth_2 {
    padding-left: 90px;
}
.depth_3 {
    padding-left: 135px;
}
.depth_4 {
    padding-left: 180px;
}
.depth_5 {
    padding-left: 225px;
}
.depth_6 {
    padding-left: 270px;
}
.depth_7 {
    padding-left: 315px;
}
.depth_8 {
    padding-left: 360px;
}
.depth_9 {
    padding-left: 405px;
}
.depth_10 {
    padding-left: 450px;
}
/* EOF: Threads */

/* BOF: Notifications */
.notification_count[data-count="0"] {
    display: none;
}
.notification {
    border-left: 5px solid #cbcbcb;
    margin-left: 10px;
    width: 100%;
    max-width: 900px;
    width: 100%;
    width: calc(100% - 20px);
    max-width: 900px;
    padding-left: 10px;
    box-sizing: border-box;
}
.notification.unread {
    border-left: 5px solid #118DF0aa;
}
.notification.unread .mark_unread {
    display: none;
}
.notification.read .mark_read {
    display: none;
}
.page_notifications .page h2 {
    margin: 0;
}
.page_notifications .page button {
    position: absolute;
    top: 1.5rem;
    right: 1rem;
}
.page_notifications .post button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}
.mark_unread button {
    background: #cbcbcb;
    --current-color: #cbcbcb;
}
/* EOF: Notifications */


/* BOF: Attachments */
.attachment_text {
    position: relative;
    border: 1px solid #343541;
    padding: 1rem;
    padding-top: calc(24px + 1rem);
    margin-bottom: 1rem;
    transition: all .3s;
}

.attachment_text button:hover {
    background: #2898f1;
    opacity: 1;
}
.attachment_text button.show {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    padding: 0;
    padding-left: 1rem;
    text-align: left;
    /*
    background: #343541;
    */
    z-index: 1;
}
.attachment_text button.show:after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    mask: url(/mavoc/images/tabler-icons/triangle-inverted.svg) no-repeat;
    mask: url(/mavoc/images/tabler-icons/triangle-inverted-filled.svg) no-repeat;
    mask-size: cover;
    width: 16px;
    height: 16px;
    display: block;
    background: #fff;
    transform: rotate(-90deg);
}
.attachment_text button.hide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    padding: 0;
    padding-left: 1rem;
    text-align: left;
    /*
    background: #343541;
    */
    z-index: 1;
}
.attachment_text button.hide:after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    mask: url(/mavoc/images/tabler-icons/triangle-inverted.svg) no-repeat;
    mask: url(/mavoc/images/tabler-icons/triangle-inverted-filled.svg) no-repeat;
    mask-size: cover;
    width: 16px;
    height: 16px;
    display: block;
    background: #fff;
}

.attachment_text.hidden {
    height: 24px;
    overflow-y: hidden;
    padding: 0;
    border: 0;
}

.attachment_text.shown button.show {
    display: none;
}
.attachment_text.shown button.hide {
    display: block;
}
.attachment_text.hidden button.show {
    display: block;
}
.attachment_text.hidden button.hide {
    display: none;
}
/* EOF: Attachments */

/* BOF: Attachments Create */
form .attachment {
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    margin: 1rem 0;
    padding: 1rem 0;
}
.attachment_type_text textarea {
    height: 280px;
}
/* EOF: Attachments Create */

/* BOF: Misc */
.logo {
    width: 30px;
}
input[type=submit], button, .button {
    background: #5fb266;
}
input[type=submit]:hover, button:hover, .button:hover {
    background: #5fb266;
    opacity: 0.9;
}
textarea.bio {
    height: 200px;
}
/* EOF: Misc */

@media (min-width: 1200px) {
    .page_documentation #sidebar_left menu.desktop {
        position: sticky;
        top: calc(100vh - 700px);
        padding-bottom: 2rem;
    }
}

@media (max-width: 1199px) {
    #app.columns_2 {
        display: block;
    }
    #app.columns_2 > #sidebar_left {
        margin: 0 auto;
        max-width: 900px;
    }

    /* BOF: Pricing */
    .columns {
        display: block;
    }
    /* EOF: Pricing */

    /* BOF: Threads */
    .depth_1 {
        padding-left: 5%;
    }
    .depth_2 {
        padding-left: 10%;
    }
    .depth_3 {
        padding-left: 15%;
    }
    .depth_4 {
        padding-left: 20%;
    }
    .depth_5 {
        padding-left: 25%;
    }
    .depth_6 {
        padding-left: 30%;
    }
    .depth_7 {
        padding-left: 35%;
    }
    .depth_8 {
        padding-left: 40%;
    }
    .depth_9 {
        padding-left: 45%;
    }
    .depth_10 {
        padding-left: 50%;
    }
    /* EOF: Threads */
}