/* Mobile
------------------------------------------------------------------ */


@media screen and (max-device-width: 580px) {
    
    
    /* General */
    
    html {
        padding: var(--80) 0 0 !important;
    }
    
    html #pun {
        width: unset;
		margin: var(--punMargin-mobile);
    }
    
    html .punbb {
        padding: var(--16);
        border-radius: var(--punbbRadius-mobile);
		background: var(--header-bg-mobile);
    }
	
	html .punbb::before {
	content: '';
	display: block;
	height: var(--head-h-mobile);
}
    
    html .jGrowl.top-right,
    html .jGrowl.top-left {
        top: var(--64);
    }    
    
    /* Hide elements */
    
    html .post-author .pa-ip,
    html #pun-viewforum thead,
    html #pun-modviewforum thead,
    html #pun-searchtopics thead,
    html #pun-messages thead,
    #pun-navlinks::-webkit-scrollbar,
    #pun-ulinks::-webkit-scrollbar,
    html #announcements .inner::-webkit-scrollbar,
    html #form-buttons tr::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Menu */
    
    html #pun-navlinks {
        overflow: auto hidden;
        padding: var(--2) var(--8);
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 !important;
    }
    html #pun-navlinks .profilemenu,
    html #pun-navlinks .adminmenu {
        display: none;
    }
    html #pun-ulinks {
        overflow: auto hidden;
        padding: 0 var(--8);
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--32) + var(--2));
        box-shadow: 0 var(--8) var(--32) rgb(var(--dark900c) / .2);
        margin: 0 !important;
    }
    #pun-navlinks .container,
    #pun-ulinks .container {
        white-space: nowrap;
    }
	
	/* Header table */
	
	#header_table {top: 3.5em;}
	
	#header_table .header_left, #header_table .header_right {
		display: grid;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		gap: .5em;
	}
	
	#header_table h3 {font-size: 2.2em; grid-column: 1 / -1;}
	#header_table h3::first-letter {font-size: .7em;}
	#header_table img {margin: 1.5em .6em 0;}
    
    /* Announcements */
    
    #announcements .inner {
        margin: var(--8) 0 0;
        padding: 0;
    }
    
    
    /* Status */
    
    #pun-status .item3 {
        padding-top: var(--8);
        float: left !important;
    }
    
    
    /* Categories */
    
    html #pun-index .category tbody {
        padding: 0 var(--16);
        border-radius: 1rem;
    }
    
    html #pun-index .category tr {
        flex-direction: column;
        align-items: start;
        padding: var(--16) 0;
    }
    html #pun-index .category .tcl,
    html #pun-index .category tr .tcr {
        width: 100%;
    }
    html #pun-index .category tr .tcr {
        align-items: start;
        padding-left: calc(var(--32) + var(--8));
    }
    
    
    /* Banners */
    
    #banners {
        padding: var(--16);
        border-radius: 1rem;
    }
    
    
    /* Statistics */
    
    html #pun-stats .container {
        padding: var(--16);
        border-radius: 1rem;
    }
    html #pun-stats .statsinfo {
        flex-direction: column;
        gap: var(--4);
    }
    
    
    /* User Avatar */
    
    #pun .user-avatar {
        width: var(--32) !important;
        height: var(--32) !important;
    }
    
    
    /* Tables */
    
    html .punbb:not(.punbb-admin) th {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden;   
    }
    html td,
    html th {
        padding: var(--16);
    }
    #pun-viewforum tr,
    #pun-modviewforum tr,
    #pun-searchtopics tr,
    #pun-userlist tr,
    #pun-statistic tr,
    #pun-respect tr,
    #pun-positive tr,
    .profile-awards-container tr {
        flex-flow: wrap;
    }
    html #pun-viewforum tr .tcr,
    html #pun-modviewforum tr .tcr,
    html #pun-searchtopics tr .tcr,
    html #pun-userlist tr .tcl,
    html #pun-viewforum tr .tcl .intd,
    html #pun-modviewforum tr .tcl .intd,
    html #pun-searchtopics tr .tcl .intd,
    html #pun-userlist tr .tcl .intd {
        gap: var(--8);
    }
    
    
    /* Viewforum tables */

    html .punbb table .tcl {
        box-sizing: border-box;
    }

    html .punbb:not(#pun-index) div.icon {
        flex-shrink: 0;
        align-self: start;
        margin: 0 !important;
    }
    
    html .punbb:not(#pun-index, #pun-mod, #pun-online, #pun-statistic, .punbb-admin) .tcl {
        width: unset;
        width: 50%;
        flex-grow: 1;
    }
    html .punbb:not(#pun-index, #pun-mod, #pun-searchtopics, #pun-statistic, #pun-userlist, .punbb-admin) .tc2,
    html .punbb:not(#pun-index, #pun-mod, #pun-searchtopics, #pun-statistic, #pun-userlist, .punbb-admin) .tc3 {
        text-align: right;
        width: 15% !important;
    }
    html .punbb:not(#pun-index, #pun-mod, #pun-online, #pun-statistic, .punbb-admin) .tcr {
        border-top: 1px solid rgb(var(--mainBG) / .38);
        align-items: start;
        width: 100%;
    }
    html .punbb:not(#pun-index, #pun-mod, #pun-online) .tcr div {
        width: 100%;
        align-self: stretch;
    }
    
    
    /* Searchtopics tables */

    .punbb#pun-searchtopics .tc3 {
        width: 20% !important;
        text-align: right;
    }
    
    
    /* Userlinst tables */
    
    html #pun-userlist tr td,
    html #pun-userlist tr th {
        box-sizing: border-box;
    }
    html #pun-userlist tr .username {
        width: 40% !important;
    }
    html #pun-userlist tr .title,
    html #pun-userlist tr .user_title {
        width: 60% !important;
    }
    html #pun-userlist tr .relation,
    html #pun-userlist tr .posts,
    html #pun-userlist tr .num_posts {
        width: 20% !important;
        flex-grow: 1 !important;
    }
    html #pun-userlist tr .registered,
    html #pun-userlist tr .last_visit {
        width: 30% !important;
        flex-grow: 1 !important;
        text-align: left !important;
    }
    html #pun-userlist tr .relation,
    html #pun-userlist tr .posts,
    html #pun-userlist tr .num_posts {
        text-align: left !important;
    }


    /* Statistic page tables */

    #pun-statistic tr th,
    #pun-statistic tr td {
        box-sizing: border-box;
    }

    #pun-statistic tr .tcl {
        width: 33% !important;        
    }
    
    #pun-statistic tr .tc2 {
        width: 66% !important;
        text-align: right;
    }

    #pun-statistic tr .tc3 {
        width: 33% !important;
    }

    #pun-statistic tr .tc3:last-child {
        text-align: right;
    }

    #pun-statistic #most_viewed_topics .tcl,
    #pun-statistic #most_viewed_topics .tc2,
    #pun-statistic #most_replied_topics .tcl,
    #pun-statistic #most_replied_topics .tc2 {
        width: 30% !important;
    }

    #pun-statistic #most_viewed_topics .tc3,
    #pun-statistic #most_replied_topics .tc3 {
        width: 20% !important;
    }
    
    
    /* Icons */
    
    html .punbb div.icon::after {
        margin: 0;
    }
    
    
    /* Other buttons */
    
    html #topic-modmenu span,
    html .forum ~ .modmenu span {
        float: none;
        display: block;
        margin-top: var(--8);
    }
    .forum ~ .modmenu strong {
        display: block;
    }
    .forum ~ .modmenu input:last-child {
        margin-top: 0;
    }
    
    
    /* Paginator */
    
    html #pun-viewforum .pagelink,
    html #pun-modviewforum .pagelink,
    html #pun-searchtopics .pagelink,
    html .punbb:not(.punbb-admin) .pagelink {
        display: flex;
        justify-content: center;
    }
    html .punbb:not(.punbb-admin) .pagelink {
        margin-bottom: var(--16);
    }
    html .punbb:not(.punbb-admin) .pagelink .prev {
        margin-right: auto;
    }
    html .punbb:not(.punbb-admin) .pagelink .next {
        margin-left: auto;
    }
    
    
    /* Topic bottom */
    
    html #pun-viewtopic .linksb {
        display: block;
    }
    html #s-block {
        float: none;
        margin-bottom: var(--16);
    }
    
    
    /* Reply form */

    html #main-reply {
        padding: var(--12);
        font-size: 1.2rem !important;
    }
    
    html #form-buttons table {
        width: unset !important;
        display: flex;
    }
    html #form-buttons tr {
        white-space: nowrap;
        overflow-x: auto;
    }
    html #form-buttons td {
        flex-shrink: 0;
    }
    html #pun #tags .container {
        box-sizing: border-box;
        max-width: calc(100vw - var(--32));
    }
    
    
    /* Post */
    
    html .post h3 {
        float: none;
        width: unset;
    }
    html .post h3:has(#fntSlider) strong {
        padding-top: var(--32)
    }
    html #fntSlider {
        display: block;
    }
    html .punbb:not(#pun-messages) #fntSlider {
        float: none;
        width: 100%;
        margin: 0 0 var(--12);
    }
    html .post .container {
        flex-flow: nowrap;
        flex-direction: column;
    }
    html .post-body {
        width: unset;
        padding: 0;
    }
    html .post .bookmark {
        right: calc(var(--16) * -1);
    }
    
    
    /* Post links */
    
    .punbb .post-links li a {
        font-size: 0;
    }    
    .punbb .post-links li a::before {
        content: '';
        font: 400 1.4rem/100% var(--fa);
        background: rgb(var(--mainBG) / .38);
        padding: var(--6) var(--8);
        border-radius: 0.8rem;
    }
    .punbb .post-links .pl-email.block a::before {
        content: '\f05e';
    }
    .punbb .post-links .pl-email.profile a::before {
        content: '\f007';
    }
    .punbb .post-links .pl-email.pm a::before {
        content: '\f0e0';
    }
    .punbb .post-links .pl-email.email a::before,
    #pun-messages .post-links .pl-email a::before {
        content: '\40';
    }
    .punbb .post-links .pl-website.website a::before {
        content: '\f0ac';
    }
    .punbb .post-links .pl-email.social-telegram a::before {
        content: '\f1d8';
    }
    .punbb .post-links .pl-delete a::before {
        content: '\f2ed';
    }
    .punbb .post-links .pl-edit a::before {
        content: '\f304';
    }
    .punbb .post-links .pl-quote a::before {
        content: '\f3e5';
    }
    #pun-searchposts .post-links a::before {
        content: '\f08e';
    }
    
    
    /* Post profile */
    
    html .post-author {
        margin-top: 0;
        width: unset;
        align-self: unset;
        margin-bottom: 0 !important;
        padding: var(--16);
    }
    
    html .post-author ul {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: max-content max-content 1fr max-content;
        grid-template-areas:
          "avatar author"
          "avatar title"
          "avatar parow";
    }
    
    html .post-author .pa-row1 {
        grid-area: parow;
        padding-bottom: 0;
        padding-right: 0;
        margin-top: auto;
    }
    html .post-author .pa-row1 li {
        padding-bottom: 0;
    }
    html .post-author .pa-author {
        grid-area: author;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
        padding-right: 0;
    }
    html .post-author .pa-author a,
    html .post-author .pa-author strong {
        font-size: 1.2rem;
    }
    
    html .post-author .pa-title {
        grid-area: title;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
        padding-right: 0;
    }
    
    html .post-author .pa-avatar {
        grid-area: avatar;
        padding: 0;
        margin: 0;
    }
    
    html .post-author .pa-avatar img {
        border-radius: 0.5rem;
        height: 100px;
        width: 100px;
        object-fit: cover;
        display: block;
    }
    
    
    /* Profile page */
    
    html #viewprofile-next {
        flex-direction: column;
        gap: 0;
    }
    html #pun-profile #profile .container {
        padding-left: 0 !important;
    }
    html #profilenav {
        width: unset !important;
        display: block;
        float: none !important;
        margin: 0 0 var(--16) 0 !important;
    }
    html #profilenav li {
        display: inline-block;
    }
    html #viewprofile .container tr {
        flex-direction: column;
        gap: var(--16);
    }
    html #profile-left {
        width: unset !important;
    }
    html #profile-right {
        width: unset;
    }
    html #profile-right li {
        padding: var(--8) var(--16);
        border-radius: 1rem;
        background: rgb(var(--mainBG) / .2);
        margin-bottom: var(--8);
        list-style: none;
    }
    html #profile-right li > strong {
        display: block;
        padding: 0;
    }
    html #profile-right li > span {
        min-width: unset;
    }
    
    
    /* Messages page */

    html #pun-messages .hasicon tr {
        flex-flow: wrap;
    }

    html #pun-messages .tcl.pmtcl1 {
        border-bottom: 1px solid rgb(var(--mainBG) / .38);
        width: 100% !important;
        text-align: left;
    }

    html #pun-messages .tc2.pmtc22 {
        box-sizing: border-box;
        width: 50% !important;
        text-align: left;
    }
    
    html #pun-messages .tc3.pmtc33 {
        box-sizing: border-box;
        width: 40% !important;
        text-align: left;
    }
    
    html #pun-messages .tc2.pmtc24 {
        box-sizing: border-box;
        width: 10% !important;
        text-align: right;
        padding: var(--8) !important;
    }

    html #pun-messages #profilenav {
        display: block;
    }

    html #pun-messages #profilenav ul {
        margin-bottom: var(--8) !important;
    }

    html #pun-messages .post .container {
        padding: var(--16) 0 !important;
    }
    
    
    /* Awards page */

    html .fr {
        float: none;
    }


    /* Reactions */

    html .reaction-picker {
        position: unset;
    }

    html .topic .reaction-picker-panel {
        top: unset;
        left: unset;
        right: 0;
        transform: none;
        z-index: 7;
    }

    html .reactions-root .emoji-mart {
        width: unset !important;
    }
    
    
    /* Admin pages */

    html .adminmain {
        padding: 0;
    }

    html #pun-adnav {
        float: none;
        width: unset;
        display: block;
        margin: 0;
        background: rgb(var(--punbbBG));
        z-index: 7;
        position: relative;
        top: 0;
    }
    html #adnav-standard > ul {
        -webkit-column-count: 2;
        column-count: 2;
    }
    html #pun-adnav ul.adsubnav li {
        padding: 0 !important;
    }
    html #pun-adnav ul.adsubnav li a {
        display: inline-block;
        padding-bottom: var(--4)
    }
    html #pun-admain .adsubmit {
        display: block;
        position: relative !important;
        top: unset !important;
        left: unset !important;
        width: unset !important;
        padding: 1em;
    }
    html #pun-admain .adcontainer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html #pun-admain fieldset {
        min-inline-size: auto;
    }
    html #pun-admain fieldset .handle,
    html #pun-admain fieldset p {
        border: none;
    }
    html #pun-admain .adlabel,
    html #pun-admain .adinput {
        display: block;
        padding-bottom: var(--8);
        float: none;
        margin: 0;
    }
    html #pun-admin_index #pun-admain .adformal div ul,
    html #pun-admin_index #pun-admain div p {
        padding-top: 0.8em;
    }
    html #pun-admain2 fieldset .subforums {
        margin-left: 2em;
    }
    html:has(#pun-admain) .jGrowl.top-right,
    html:has(#pun-admain) .jGrowl.top-left {
        display: none;
    }
    html #pun-admain .submittop {
        position: relative;
        top: unset;
        background: transparent;
        z-index: unset;
    }
    html #pun-admain .submitend {
        margin: 0 calc(var(--16) * -1);
        background: rgb(var(--punbbBG));
        position: sticky;
        bottom: 0 !important;
        padding: var(--8) var(--16);
        z-index: 6;
    }

    html #pun-admain .adfs-box:has(#filetable, #domcontainer),
    html #pun-admin_logs .adformal {
        overflow-x: auto;
    }
    
    html #pun-admain #filetable .tcl {
        width: 88px !important;
    }
     
    html #pun-admain #domcontainer .tcl,
    html #pun-admin_logs table .tc2,
    html #pun-admin_logs table .tc3,
    html #pun-admin_logs table .tcr {
        width: 120px !important;
    }
    
    html #pun-admain #filetable .tc2,
    html #pun-admin_logs table .tcl {
        width: 80px !important;
    }
    
    html #pun-admain #domcontainer .tc2 {
        width: 120px !important;
    }
    
    html #pun-admain #filetable .ft-tags {
        width: 32px !important;
    }
    
    html #pun-admain #filetable .tc3, 
    html #pun-admain #domcontainer .tc3 {
        width: 48px !important;
    }
    
    html #pun-admain #filetable .tcr, 
    html #pun-admain #domcontainer .tcr {
        width: 180px !important;
    }
    
    html #pun-admain #filetable .checker {
        width: 24px !important;
    }


    /* Theme switcher */

    html #theme_switcher li:not(:last-child) input {
        margin-right: var(--16) !important;
    }
}


@media screen and (max-width: 1366px) {

    /* Up & Down arrows */
    
    .go-up,
    .go-down {
        top: unset;
        left: unset;
        right: calc(var(--coeffMobile) * 1);
        width: calc(var(--coeffMobile) * 4);
        height: calc(var(--coeffMobile) * 4);
    }
    .go-up {
        bottom: calc(var(--coeffMobile) * 6 + env(safe-area-inset-bottom));
    }
    .go-down {
        bottom: calc(var(--coeffMobile) * 1 + env(safe-area-inset-bottom));
    }
    .go-up .inside,
    .go-down .inside {
        align-items: center;
        background: rgb(var(--punbbBG));
        border-radius: 0.8rem;
        box-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .38);
    }
    .go-up .inside:hover,
    .go-down .inside:hover {
        background: rgb(var(--mainLinks));
    }
    .go-up .inside:before,
    .go-down .inside:before {
        padding: 0;
        color: var(--mainText);
    }
    .go-up .inside:hover:before,
    .go-down .inside:hover:before {
        color: rgb(var(--punbbBG));
    }
}


@media screen and (min-width: 768px) and (max-width: 1366px) {
    :root {
        --coeffMobile: calc((2vw + 0.5vh) / 2) !important;
    }
}