/* Global & reset */

body {
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    position: relative; /* To position footer */
}

#content {
    background: none;
    overflow: unset; /* Fixes glitches when shrinking */
}

#content::after {
    content: "";
    display: block;
    height: 280px; /* Footer space */
}

a:link { transition: none !important }

#container { padding-top: 130px }

#content > .wrapper,
.menu,
.header .wrapper {
    max-width: 990px;
}

select { max-width: unset }

/* Modals */

.modal {
	width: 100%;
	max-width: 400px;
}

.blocker { z-index: 20000 }

.modal .avatar img {
	border-radius: 32px;
	object-fit: cover;
}	

/* Tables and frames */

.navigation,
.thead {
    background-image: none;
    text-shadow: none;
    font-size: 18px;
}

.tborder,
.tfoot {
    border : none
}

td[width="220"] { min-width: 220px }

/* Typography */

.thead,
nav a,
.navigation,
h3, h4 {
    font-family: Sniglet, sans-serif;
}

h1, h2 {
	font-size: inherit;
	margin: unset;
}

.thead strong { font-weight: inherit } /* Fixes font in chrome */

h1, h2, h3, h4 { font-weight: normal }

body,
table,
.wrapper,
#wrapper2 {
    font-family: 'Open Sans', sans-serif;
}

/* Header */

.header {
    height: 130px;
    line-height: 100px;
    background: url(../../../images/psychov3/banner_mobile.jpg);
    background-size: cover;
    background-position: center;
    transition: height .1s;
}

@media only screen and (min-width: 421px) {
    .header { background-image: url(../../../images/psychov3/banner.jpg) }
}

.logo img {
    height: 80px;
    padding: 25px 0;
    filter: drop-shadow(0px 3px 3px rgba(1, 1, 1, 0.8));
}

.header.shrink .logo { padding-top: 8px }

.header.shrink .logo img {
    width: 200px;
    padding-top: 0;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    -o-transition: all .1s;
    -ms-transition: all .1s;
    transition: all .1s;
}

.searchhere { padding-top: 44px }

/* Menu */

/* Needed when shrinking */
nav { height: 47px !important }

.menu { margin: auto }

li.alerts { display: inline }

.user-actions a {
    padding-left: 12px;
    padding-right: 12px;
    position: relative; /* For positionning notification count */
}
.user-actions i { font-size: 20px }

.user-actions i.fa-user-circle { font-size: inherit }

.user-actions .pmbg {
    float: right;
    border-radius: 3px;
    position: absolute;
    top: 8px;
    right: 6px;
}

/* Mobile menu */

#menu_button i {
    font-size: 23px;
}

#mobile_menu {
    display: none;
}

input[id="drop"]:checked + #mobile_menu {
    display: block;
}

#mobile_menu li {
    display: block;
    width:100%;
}

@media only screen and (max-width: 768px) {
    #menu_button {
        background: none;
        display: block;
    }

    ul.menu {
        display: block;
    }

    nav ul li,
    .dropdown a {
        display: none;
        width: auto;
    }

    nav ul li.mobile_item {
        display: block;
    }
}

/* Guest menu */

.header .welcome a {
	padding: 8px;
	background: rgba(.5, .5, .5, 0);
	transition: all ease-in-out .15s !important;
}

.header .welcome a:hover {
	color: #FFF;
	background-color: rgba(.5, .5, .5, .5);
}

/* Floating menu */

.header.shrink .searchhere { display: none }

/* @media only screen and (min-width: 769px) {
    .header.shrink + #container nav::after {
        content: "";
        display: block;
        height: 47px;
    }
} */

.header.shrink + #container nav .menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11000;
    max-width: 990px;
    /* width: 100%; */
    margin: auto;
	pointer-events: none;
}

.header.shrink + #container nav .menu a {
    height: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border: none;
	pointer-events: all;
}

/*.header.shrink + #container nav .menu .user-actions { pointer-events: all }*/

.header.shrink + #container nav .menu a:hover {
    background: rgba(50, 50, 50, 0.5);
}

.header.shrink + #container nav .menu > li { visibility: hidden }

@media only screen and (max-width: 768px) {
    .header.shrink + #container nav li.mobile_item {
        visibility: hidden;
    }

    #mobile_menu {
        float: right; 
    }
}

/* Announce */

.red_alert { border: none }

/* Nav */

.navigation .active { font-size: inherit }

#breadcrumb_multipage { display: none }

@media only screen and (max-width: 830px) {
    .navigation .Search { display: none }
}

/* Index */

.forum {
    width: 70%;
    margin-right: 18px;
}

@media only screen and (max-width: 420px) {
    .forum {
        margin: none;
        width: 100%;
    }
}

.columns li:only-child { width: unset }

.forum_status { background-position: unset }

.forum_off { background: url(../../../images/psychov3/forum_icon.svg) }

.forum_on { background: url(../../../images/psychov3/forum_icon_new.svg) }

.forum_offlink { background: url(../../../images/psychov3/forum_icon_link.svg) }

.forum_offclose,
.forum_offlock { 
    background: url(../../../images/psychov3/forum_icon_lock.svg)
}

.sidebar table td { max-width: 0 }

.sidebar .lastposts td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .avatar {
    display: block !important; /* Overrides some mods in plugin files */
    float: left;
    height: 40px;
    width: 40px;
    padding: 4px;
    object-fit: cover;
    border-radius: 100px;
}

.whosonline tbody td,
.quickstats tbody td {
	padding: 12px
}

.whosonline br {
	display: block;
	margin: 4px 0;
}

.quickstats ul {
    list-style: none;
    padding: 0;
}

.quickstats li {
    margin: 8px 0;
    text-transform: capitalize;
}

.quickstats .number {
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 14px;
}

/* Threads */

.navigation + .smalltext { display: none } /* Users browsing this forum */

.inline_row > td.forumdisplay_regular:nth-child(2) { max-width: 0 } /* Topic title */

.inline_row > td.forumdisplay_regular:nth-child(2) a {
    /* display: block; */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

a.go_to_unread {
	font-size: 16px;
	position: relative;
	top: 2px;
}

@media only screen and (max-width: 768px) {
    tr td:nth-child(8) { /* Mod checkboxes */
        display: table-cell;
        visibility: unset;
    }

    tr td.tcat:nth-child(2) { width: unset !important }
}

.tfoot select[name="datecut"] { display: none }

/* Buttons */

a.button:link,
a.button:visited,
a.button:active {
    margin: 8px 0;
	transition: all ease-in-out .15s !important;
}

a.button:hover {
    transform: translateY(-3px);
    -webkit-box-shadow: 0 2px 7px 0 rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0 2px 7px 0 rgba(50, 50, 50, 0.5);
    box-shadow: 0 2px 7px 0 rgba(50, 50, 50, 0.5);
}

/* Default sprite icon reset */
a.button span,
a.button.new_reply_button span,
a.button.new_thread_button span {
    background: none;
    padding: unset;
}

a.button.new_reply_button span::before,
a.button.new_thread_button span::before {
    font-family: "Font Awesome 5 Free";
    content: "\f27a";
    padding-right: 4px;
}

/* Paginators */

.pagination .pages { display: none }

.pagination a, .pagination .pagination_current {
	border-radius: 7px;
	border: none;
	margin: 0 3px 3px 0;
	font-weight: normal;
}

/* Postbits buttons */

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
    background: none;
    border: none;
}

.postbit_buttons a span,
.thread_buttons a span {
    background: none !important; /* important! overrides tyl plugin styles */
    padding: 4px;
    font-size: 15px;
    transition: all ease-in-out .3s;
}

.postbit_buttons a.postbit_multiquote_on span {
    background: #555 !important;
    color: #FFF !important;
}

/* Footer */

#debug {
	float: unset;
	text-align: center;
}

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

#footer2,
#footer .wrapper {
	max-width: 1400px
}

.footerFloat {
	padding-left: 40px;
    width: 22%;
    float: left;
	box-sizing: border-box;
}

.footerFloat:first-child {
	width: 34%;
	padding-left: 0;
}

.footerFloat ul { padding-left: 0 }

#wrapper2 li a { text-shadow: none }

.footerFloat li a:hover,
.footerFloat li a:active {
    text-decoration: underline;
}

.footerFloat li a i {
    width: 15px;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    #copyright p {
        float: none;
        text-align: center;
    }
}

@media only screen and (max-width: 420px) {
	#footer .upper { padding: 12px 0 }
	
    #footer .upper .language,
	#footer .upper ul.bottom_links {
        float: none;
        text-align: center;
		margin: 6px auto;
    }
}

/* Extra important stuff */

a[href="User-GaetanCz"] img { transform: rotateZ(165deg) }

@keyframes rotation {
	from { transform: rotate(0deg) }
	to { transform: rotate(360deg) }
}

@keyframes wiggle {
	from { transform: rotate(-10deg) }
	to { transform: rotate(10deg) }
}