/*
    Theme URI: https://github.com/MominRaza/Mayro
	Theme Version: 1.2
    Theme Date: 2020-10-4
    Theme Author: Momin Raza
    Theme Author URI: https://github.com/MominRaza
    Theme License: GPLv3
    Theme Update Check URI: https://github.com/MominRaza/Mayro/releases
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* color variables 
	you can change primary-rgb, primary-dark, primary-light, on-primary,
	secondary, secondary-dark, secondary-light, on-secondary colors only.
	find them from here https://material.io/resources/color
*/

:root {
    /* --primary: #a85102; */
    --secondary-light-rgb: 234, 232, 209;
    --primary-rgb: 168, 81, 2;
    --primary: rgb(var(--primary-rgb));
    /* primary dark used in manifest file as theme_color */
    --primary-dark: #8c450a;
    --primary-light: #bf6514;
    --secondary: #cead5b;
    --secondary-dark: #af821c;
    --secondary-light: #eae8d1;
    --background: #EEEEEE;
    --surface: #FFFFFF;
    --error: #B00020;
    --on-primary: #FFFFFF;
    --on-secondary: #000000;
    --on-background: #000000;
    --on-surface: #000000;
    --on-error: #FFFFFF;
    --link: #a85102;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--background);
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    color: var(--link);
    text-decoration: none;
}

input[type='text'],
input[type='submit'],
input[type='password'],
select,
textarea {
    width: 100%;
    padding: 5px 10px;
    font-size: 1.2em;
    border-radius: 4px;
}

input[type='checkbox'],
input[type='radio'] {
    margin-right: 10px;
}

input[type='submit'] {
    width: auto;
}

select {
    margin-top: 10px;
}


/* header */

.qa-header-clear {
    height: 56px;
}

.qa-logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    padding-top: 13px;
    /* background-color: var(--primary); */
    background: linear-gradient(269.51deg, #a85102 0.02%, #cead5b 99.98%);
    box-shadow: 0 2px 3px gray;
    z-index: 4;
}

.qa-logo-link {
    margin-left: 60px;
    font-size: 24px;
    color: var(--on-primary);
}

#menu-toggle {
    position: fixed;
    top: 27px;
    left: 10px;
    color: var(--on-primary);
    font-size: 30px;
    cursor: pointer;
    z-index: 4;
}

#search-toggle {
    position: fixed;
    top: 27px;
    right: 56px;
    color: var(--on-primary);
    font-size: 30px;
    z-index: 5;
    cursor: pointer;
}

#user-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    color: var(--on-primary);
    font-size: 30px;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--on-primary);
    cursor: pointer;
    z-index: 4;
}

#user-toggle img {
    width: 100%;
    height: auto;
}

#user-toggle i {
    font-size: 36px;
    margin-left: -2px;
}

#search-toggle.active {
    left: 10px;
}

.qa-nav-user,
.qa-search,
.qa-nav-main {
    display: none;
}

.qa-nav-user {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--surface);
    border-radius: 4px;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
    max-height: 360px;
    min-width: 240px;
    max-width: 240px;
    z-index: 4;
    padding: 10px 0;
}

#qa-nav-user.active {
    z-index: 5;
    background-color: rgba(0, 0, 0, .32);
    position: fixed;
    height: 100vh;
    width: 100%;
}

#qa-nav-user.active .qa-nav-user {
    display: block;
}

.qa-nav-user .qa-logged-in {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: .0125em;
    padding: 10px 24px;
}

.qam-logged-in-points {
    padding: 10px;
    padding-left: 64px;
}

.qam-logged-in-points::before {
    font-family: "Material Icons";
    font-size: 24px;
    position: absolute;
    margin-left: -41px;
    margin-top: -3px;
    content: 'payments';
}

.qa-nav-user-list {
    list-style: none;
}

.qa-nav-user-item {
    padding: 0;
}

.qa-nav-user-link {
    display: block;
    padding: 10px 0 10px 64px;
    color: var(--on-surface);
}

.qa-nav-user-link.qa-nav-user-selected {
    background-color: rgba(var(--primary-rgb), .12);
    color: var(--primary);
}

.qa-nav-user-link:hover {
    background-color: rgba(var(--primary-rgb), .12);
}

.qa-search {
    position: fixed;
    top: 1px;
    left: 0;
    width: 100%;
    background-color: var(--primary);
    height: 55px;
    z-index: 4;
}

#qa-search.active .qa-search {
    display: block;
}

.qa-search-field,
.qa-search-button {
    padding: 10px !important;
    margin-top: 10px;
    border: none;
}

.qa-search-field {
    margin-top: 5px;
    margin-left: 45px;
    width: calc(100% - 99px) !important;
    background-color: unset;
    font-size: 20px;
    color: var(--on-primary);
}

.qa-search-field::placeholder {
    color: #9E9E9E;
}

.qa-search-button {
    width: 30px;
    background-color: unset;
    color: var(--on-primary);
}

.qa-search-button i {
    font-size: 30px;
}

@media(min-width:1024px) {
    .qa-search {
        left: unset;
        right: 56px;
        width: 600px;
    }
    .qa-search-field {
        width: calc(100% - 44px) !important;
        background-color: var(--surface);
        margin-left: 0;
        padding-bottom: 7px !important;
        color: var(--on-surface);
    }
    #search-toggle.active {
        left: unset;
        top: 28px;
        right: 105px;
        color: #9E9E9E;
    }
}

.qa-nav-main {
    z-index: 5;
    position: fixed;
    top: 56px;
    left: 0;
    width: 300px;
    height: 100vh;
    background-color: var(--surface);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    overflow: hidden;
    overflow-y: auto;
}

#qa-nav-main .qa-logo {
    display: none;
}

@media(max-width: 1023px) {
    .qa-nav-main {
        top: 0;
        box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
        padding-top: 56px;
    }
    .menu-active #qa-nav-main {
        z-index: 5;
        background-color: rgba(0, 0, 0, .32);
        position: fixed;
        height: 100vh;
        width: 100%;
    }
    .menu-active #qa-nav-main .qa-logo {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 56px;
        padding-top: 13px;
        background-color: var(--surface);
        box-shadow: unset;
        z-index: 6;
    }
    .menu-active #qa-nav-main .qa-logo .qa-logo-link {
        color: var(--on-surface);
        margin-left: 16px;
    }
}

.menu-active .qa-nav-main {
    display: block;
}

.qa-nav-main-list {
    margin-top: 10px;
    list-style: none;
    width: 100%;
}

.qa-nav-main-item {
    /* margin: 0; */
    width: 100%;
}

.qa-nav-main-link {
    display: block;
    padding: 15px 0 15px 60px;
    width: 100%;
    color: #8f8f8f;
}

.qa-nav-main-link.qa-nav-main-selected {
    color: var(--primary);
    background-color: rgba(var(--secondary-light-rgb), 9);
}

.qa-nav-main-link:hover {
    background-color: rgba(var(--secondary-light-rgb), 9);
}

.qa-nav-main-link::before {
    font-family: "Material Icons";
    font-size: 24px;
    position: absolute;
    margin-left: -46px;
    margin-top: -3px;
    content: "link";
}

.qa-nav-main- .qa-nav-main-link::before {
    content: "home";
}

.qa-nav-main-activity .qa-nav-main-link::before {
    content: "bar_chart";
}

.qa-nav-main-qa .qa-nav-main-link::before {
    content: "question_answer";
}

.qa-nav-main-questions .qa-nav-main-link::before {
    content: "chat";
}

.qa-nav-main-hot .qa-nav-main-link::before {
    content: "local_fire_department";
}

.qa-nav-main-unanswered .qa-nav-main-link::before {
    content: "speaker_notes_off";
}

.qa-nav-main-tag .qa-nav-main-link::before {
    content: "local_offer";
}

.qa-nav-main-categories .qa-nav-main-link::before {
    content: "category";
}

.qa-nav-main-user .qa-nav-main-link::before {
    content: "groups";
}

.qa-nav-main-ask .qa-nav-main-link::before {
    content: "live_help";
}

.qa-nav-main-admin .qa-nav-main-link::before {
    content: "admin_panel_settings";
}

.qa-nav-main-custom-3 .qa-nav-main-link::before {
    content: "admin_panel_settings";
}

.qa-nav-user-link::before {
    font-family: "Material Icons";
    font-size: 24px;
    position: absolute;
    margin-left: -41px;
    margin-top: -3px;
}

.qa-nav-user-updates .qa-nav-user-link::before {
    content: "update";
}

.qa-nav-user-logout .qa-nav-user-link::before {
    content: "logout";
}

.qa-nav-user-login .qa-nav-user-link::before {
    content: "login";
}

.qa-nav-user-register .qa-nav-user-link::before {
    content: "person_add";
}

.qa-favorite-image {
    padding: 3px;
}

.qa-favorite-image::before {
    font-family: "Material Icons";
    color: var(--link);
    position: absolute;
    margin-left: -6px;
    margin-top: 2px;
    content: "star_border";
}

.qa-nav-sub-clear {
    height: 42px;
}

.qa-nav-sub-list {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    background-color: var(--primary);
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    overflow: hidden;
    overflow-x: auto;
    list-style: none;
    box-shadow: 0 2px 3px gray;
    z-index: 4;
}

.qa-nav-sub-list::-webkit-scrollbar,
.qa-q-item-tag-list::-webkit-scrollbar,
.qa-nav-main::-webkit-scrollbar {
    display: none;
}


/* no need of scrollbar becouse of touch screens, precision touchpad and mouse. */


/* @media(min-width:768px){
	.qa-nav-sub-list::-webkit-scrollbar,
	.qa-q-item-tag-list::-webkit-scrollbar{
		display: block;
		height: 3px;
	}
	.qa-nav-main::-webkit-scrollbar{
		display: block;
		width: 3px;
	}
	.qa-nav-sub-list::-webkit-scrollbar-thumb,
	.qa-q-item-tag-list::-webkit-scrollbar-thumb,
	.qa-nav-main::-webkit-scrollbar-thumb{
		background-color: var(--secondary-light);
	}
} */

.qa-nav-sub-item {
    min-width: max-content;
    padding: 10px 0 13px 0;
    font-size:8px;
}

.qa-nav-sub-link {
    min-width: max-content;
    padding: 10px;
    color: var(--on-primary);
}

.qa-nav-sub-link.qa-nav-sub-selected {
    border-bottom: 3px solid var(--on-primary);
}


/* sidepanel */

.qa-sidebar,
.qa-widget-side,
.qa-suggest-next,
.qa-part-custom,
.qa-part-form-activity,
.qa-part-message-list,
.qa-part-form-profile,
.qa-part-form-password {
    margin: 10px 0;
    background-color: var(--surface);
    padding: 16px 16px 8px 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
}

.qa-part-form,
.qa-part-form-2 form,
.qam-admin-plugins .qa-form-tall-table {
    margin: 10px 0;
    background-color: var(--surface);
    padding: 4px 16px 16px 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
}

.qa-part-form-plugin-options {
    margin: 0 8px 20px;
}

.qa-part-form-plugin-options .qa-form-tall-table {
    background-color: rgba(255, 255, 255, 0.5);
}

.qam-admin-plugins .qa-part-form {
    background-color: unset;
    box-shadow: unset;
    padding: unset;
}

@media(max-width: 768px) {
    .qa-main {
        margin-bottom: 40px;
    }
}

@media(min-width:1024px) {
    .qa-part-form-profile {
        width: calc(60% - 10px);
        margin-right: 10px;
        float: left;
    }
    .qa-part-form-activity,
    .qa-part-form-password {
        width: 40%;
        float: right;
    }
    .qa-part-message-list {
        width: 40%;
        float: right;
        margin-top: 0;
    }
    .menu-active .qa-part-form-profile,
    .menu-active .qa-part-form-activity,
    .menu-active .qa-part-form-password,
    .menu-active .qa-part-message-list {
        width: unset;
        float: unset;
        margin: 10px 0;
    }
    .qam-user-wall-message .qa-part-message-list {
        width: unset;
        float: unset;
        margin: 10px 0;
    }
}

@media(min-width:1440px) {
    .menu-active .qa-part-form-profile {
        width: calc(60% - 10px);
        margin-right: 10px;
        float: left;
    }
    .menu-active .qa-part-form-activity,
    .menu-active .qa-part-form-password {
        width: 40%;
        float: right;
    }
    .menu-active .qa-part-message-list {
        width: 40%;
        float: right;
        margin-top: 0;
    }
    .menu-active .qam-user-wall-message .qa-part-message-list {
        width: unset;
        float: unset;
        margin: 10px 0;
    }
}

.qa-sidebar,
.qa-suggest-next {
    background-color: var(--secondary-light);
    color: var(--on-secondary);
}

.qa-activity-count {
    display: flex;
    flex-wrap: wrap;
}

.qa-activity-count-item {
    flex: 1;
    margin: 10px;
    text-align: center;
}

.qa-activity-count-item span {
    display: block;
    font-size: 1.3em;
    font-weight: 500;
}


/* qa-main */

.qa-sidepanel,
.qa-main {
    padding: 0 10px;
}

@media(min-width: 768px) {
    .qam-main-sidepanel {
        display: flex;
        justify-content: center;
    }
    .qa-main {
        width: calc(100% - 300px);
        max-width: 1000px;
    }
    .qa-sidepanel {
        width: 300px;
    }
}

@media(min-width: 1024px) {
    .qa-nav-main {
        z-index: 4;
    }
    .menu-active .qa-nav-sub-list {
        margin-left: 300px;
        width: calc(100% - 300px);
    }
    .menu-active .qam-main-sidepanel {
        margin-left: 300px;
    }
    .menu-active .qa-footer,
    .menu-active .qa-widgets-full {
        margin-left: 300px;
    }
}

@media(min-width: 1440px) {
    .qa-nav-main {
        display: block;
    }
    .menu-active .qa-nav-main {
        display: none;
    }
    .qa-nav-sub-list {
        margin-left: 300px;
        width: calc(100% - 300px);
    }
    .menu-active .qa-nav-sub-list {
        margin-left: 0;
        width: 100%;
    }
    .qam-main-sidepanel {
        margin-left: 300px;
    }
    .menu-active .qam-main-sidepanel {
        margin-left: 0;
    }
    .qa-footer,
    .qa-widgets-full {
        margin-left: 300px;
    }
    .menu-active .qa-footer,
    .menu-active .qa-widgets-full {
        margin-left: 0;
    }
    .qa-main {
        width: calc(100% - 400px);
    }
    .qa-sidepanel {
        width: 400px;
    }
}

.qa-main-heading {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.qa-main-heading h1 {
    width: 100%;
    color: #333333;
}

.qa-main-heading,
#a_list_title,
.qa-widget-main h2,
.qa-part-form-2 h2 {
    margin-top: 20px;
    margin-bottom: 10px;
}


/* questions list */

.qa-q-list-item {
    margin: 10px 0;
    background-color: var(--surface);
    padding: 16px 16px 0 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
}

.qa-q-item-title {
    font-size: 1rem;
    /* line-height: 2rem; */
    font-weight: 600;
    letter-spacing: 0.0125em;
    margin-bottom: 5px;
    /* margin-left: 50px; */
}

.qa-q-item-title a {
/*    color: var(--on-surface); */
    color: var(--link);
}

.qam-q-post-meta {
    min-height: 60px;
    padding-left: 56px;
}

.qa-q-view-main>.qam-q-post-meta {
    min-height: 70px;
    padding-left: 70px;
}

.qam-q-a-a .qam-q-post-meta {
    min-height: 30px;
    padding-left: 0;
}

.qa-q-item-avatar-meta,
.qa-q-view-avatar-meta,
.qa-a-item-avatar-meta {
    font-size: 0.9rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.03125em;
}

.qa-q-item-avatar-meta .qa-avatar-link,
.qa-q-view-avatar-meta .qa-avatar-link,
.qa-a-item-avatar-meta .qa-avatar-link,
.qa-message-avatar-meta .qa-avatar-link,
.qa-c-item-avatar-meta .qa-avatar-link {
    position: absolute;
    height: 46px;
    width: 46px;
    margin-left: -56px;
    border-radius: 50%;
    overflow: hidden;
}

.qa-q-view-avatar-meta .qa-avatar-link {
    position: absolute;
    height: 60px;
    width: 60px;
    margin-left: -70px;
}

.qa-part-form-profile .qa-avatar-link {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%);
}

.qa-avatar-image {
    width: 100%;
    height: auto;
}

.qa-q-item-when,
.qa-q-item-where-data,
.qa-q-item-who-data {
    font-weight: 500;
}


/* tags */

.qa-q-item-tag-list,
.qa-q-view-tag-list {
    list-style: none;
    display: flex;
    margin-top: 14px;
    margin-bottom: 20px;
    overflow: hidden;
    overflow-x: auto;
}

.qa-q-item-tag-item,
.qa-q-view-tag-item {
    background-color: var(--secondary);
    border-radius: 20px;
    width: min-content;
    padding: 6px 0;
    margin-right: 8px;
    height: 32px;
    min-width: max-content;
}

.qa-tag-link {
    padding: 6px 12px;
    border-radius: 20px;
    color: var(--on-secondary);
    font-size: .9em;
}

.qa-q-item-stats {
    width: calc(100% + 20px);
    display: flex;
    text-transform: uppercase;
    color: var(--link);
    min-height: 40px;
    margin: 0;
    /* padding: 8px; */
    border-top: 1px solid transparent;
}

.qa-voting {
    display: flex;
    padding-right: 10px;
}

.qa-q-list-vote-disabled .qa-voting {
    display: none;
}

.qa-a-count,
.qa-view-count {
    padding: 10px;
}

.qam-q-a-a.a .qa-a-count,
.qam-q-a-a.a .qa-view-count {
    padding-left: 0;
    padding-right: 20px;
}

.qa-suggest-next {
    margin-bottom: 20px;
}


/* question page */

.qa-main-heading h1 {
    font-size: 24px;
}


/* fab */

.qam-ask {
    z-index: 4;
    background-color: var(--secondary-dark);
    color: #fff;
    border-radius: 20px;
    padding: 10px 0;
    position: fixed;
    bottom: 15px;
    right: 15px;
    box-shadow: 1px 1px 10px gray;
}

.qam-ask:hover {
    background-color: var(--secondary);
}

.qam-ask-link {
    padding: 10px 15px;
    border-radius: 20px;
    color: #fff;
}

.qam-ask .material-icons {
    margin-right: 5px;
}


/* footer */

.qa-footer {
    margin-top: 20px;
    padding: 10px;
}

.qa-nav-footer-list {
    display: flex;
    list-style: none;
}

.qa-nav-footer-item {
    margin-right: 10px;
    margin-bottom: 10px;
}

.qa-attribution {
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
}

@media(min-width:768px) {
    .qa-attribution {
        margin-bottom: 10px;
    }
    .qa-attribution:nth-child(3) {
        padding-left: 10px;
        border-left: 1px solid var(--on-surface);
    }
}


/* form */

.qa-form-tall-table,
.qa-top-tags-table,
.qa-top-users-table,
.qa-form-wide-table {
    width: -webkit-fill-available;
    border-spacing: 0;
}

.qa-form-wide-table td {
    padding: 10px 0 5px 0;
}

.qa-form-tall-label {
    padding-top: 20px;
}

.qa-form-tall-ok {
    background-color: var(--primary-dark);
    color: var(--on-primary);
    margin-top: 10px;
    display: block;
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
}

.qa-form-tall-data {
    padding-top: 10px;
}

.qa-form-tall-note {
    margin-top: 5px;
}

.qa-form-tall-buttons {
    padding-top: 10px;
}

.qa-form-tall-error {
    color: var(--error);
}

.qa-form-tall-data ul {
    margin-left: 20px;
}

.qa-form-tall-button,
.qa-form-wide-button,
.qa-form-basic-button,
.qa-form-light-button {
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.qa-form-tall-button-save,
.qa-form-wide-button-save,
.qa-form-wide-button-saverecalc,
.qa-form-wide-button-dosave,
.qa-form-tall-button-0,
.qa-form-tall-button-ask,
.qa-form-tall-button-login,
.qa-form-tall-button-register,
.qa-form-wide-button-setbonus,
.qa-form-tall-button-post,
.qa-form-wide-button-edit,
.qa-form-wide-button-unblock,
.qa-form-wide-button-change,
.qa-form-tall-button-saveview,
.qa-form-wide-button-account,
.qa-form-tall-button-comment,
.qa-form-tall-button-answer,
.qa-form-light-button-answer,
.qa-form-light-button-follow,
.qa-form-tall-button-send {
    margin-top: 10px;
    background-color: var(--primary-dark);
    color: var(--on-primary);
}

.qa-form-tall-button-reset,
.qa-form-wide-button-reset,
.qa-form-tall-button-addpage,
.qa-form-tall-button-addlink,
.qa-form-wide-button-showdefaults,
.qa-form-basic-button,
.qa-form-tall-button-add,
.qa-form-tall-button-cancel,
.qa-form-wide-button-block,
.qa-form-wide-button-hideall,
.qa-form-light-button-comment,
.qa-form-light-button-close,
.qa-form-light-button-flag {
    margin-top: 10px;
    background-color: var(--secondary);
    color: var(--on-secondary);
}

.qa-form-wide-button-delete_expired,
.qa-form-wide-button-delete_all,
.qa-form-wide-button-delete,
.qa-form-light-button-delete,
.qa-form-light-button-hide,
.qa-form-basic-button-delete_hidden {
    margin-top: 10px;
    background-color: var(--error);
    color: var(--on-error);
}

.qa-form-basic-button {
    margin-top: 20px;
}


/* question view */

.qa-part-q-view,
.qa-a-list-item,
.qa-message-item,
.qa-c-list-item {
    margin: 10px 0;
    background-color: var(--surface);
    padding: 16px 16px 8px 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
}

.qa-a-list-item-selected {
    border: 3px solid var(--primary-dark);
    border-top-width: 8px;
}

.qam-stats-buttons {
    display: flex;
    flex-wrap: wrap;
}

.qam-stats-buttons .qa-voting {
    margin-top: 8px;
    margin-right: 10px;
}

.qam-stats-buttons .qa-view-count {
    padding: 16px;
    padding-left: 2px;
    text-transform: uppercase;
    color: var(--link);
}

.qa-a-selection input {
    position: absolute;
    z-index: 4;
    opacity: 0;
    width: 30px;
    height: 30px;
}

.qa-a-selection i {
    margin-top: 5px;
    font-size: 30px;
}

.qa-a-selection i.unselect {
    color: var(--error);
}

.qa-a-selection i.select {
    color: var(--primary);
}

.qa-a-selection i.selected {
    color: var(--primary-dark);
    font-size: 40px;
}


/* post content */

.qa-post-content {
    padding: 10px 0;
    line-height: 1.5em;
    font-size: 1.2em;
}

.qa-post-content p,
.qa-part-custom p {
    padding-bottom: 5px;
}

.qa-post-content img {
    max-width: 100%;
    height: auto !important;
}

.qa-post-content li,
.qa-part-custom li {
    margin-left: 20px;
}

.qa-post-content blockquote {
    background-color: rgba(var(--primary-rgb), .12);
    padding: 5px;
    padding-left: 20px;
    border-left: 5px solid var(--primary-light);
}


/* related question */

.qa-c-item-link {
    display: block;
    padding: 10px 0;
    line-height: 1.4em;
    font-size: 1.2em;
}


/* error */

.qa-error {
    background-color: var(--error);
    color: var(--on-error);
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
}

.qa-error a {
    color: var(--primary-light);
}


/* user */

.qa-form-wide-label {
    font-weight: bold;
    display: block;
    margin-right: 10px;
}

.qa-form-tall-image {
    text-align: center;
    min-height: 200px;
}


/* category */

.qa-browse-cat-list,
.qa-nav-cat-list {
    list-style: none;
}

.qa-browse-cat-list-2,
.qa-browse-cat-list-3,
.qa-nav-cat-list-2,
.qa-nav-cat-list-3 {
    margin-top: 10px;
}

.qa-browse-cat-item,
.qa-nav-cat-item {
    padding: 10px;
    margin: 5px 0;
    background-color: var(--surface);
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    display: flex;
}

.qa-nav-cat-item {
    display: block;
    background-color: rgba(0, 0, 0, 0.025);
}

.qa-browse-cat-open {
    background-color: rgba(0, 0, 0, 0.075);
    display: block;
    padding-bottom: 1px;
}

.qa-browse-cat-note a {
    min-width: max-content;
}

.qa-browse-cat-link {
    margin-left: 20px;
    margin-right: auto;
}

.qa-browse-cat-link::before {
    font-family: "Material Icons";
    font-size: 24px;
    position: absolute;
    margin-left: -26px;
    margin-top: -3px;
}

.qa-browse-cat-nolink {
    margin-right: auto;
}

.qa-browse-cat-closed .qa-browse-cat-link::before,
.qa-browse-cat-open .qa-browse-cat-closed .qa-browse-cat-link::before {
    content: "expand_more";
}

.qa-browse-cat-open .qa-browse-cat-link::before {
    content: "expand_less";
}


/* tags */

.qa-top-tags-table tbody {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 5px));
    column-gap: 10px;
}

@media(min-width: 1024px) {
    .qa-top-tags-table tbody {
        grid-template-columns: repeat(3, calc(33.3% - 7px));
    }
    .menu-active .qa-top-tags-table tbody {
        grid-template-columns: repeat(2, calc(50% - 5px));
    }
}

@media(min-width: 1440px) {
    .qa-top-tags-table tbody {
        grid-template-columns: repeat(3, calc(33.3% - 6.6px));
    }
    .menu-active .qa-top-tags-table tbody {
        grid-template-columns: repeat(4, calc(25% - 7.5px));
    }
}

.qa-top-tags-table tr {
    margin: 5px 0;
    background-color: var(--surface);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    display: flex;
}

.qa-top-tags-count {
    margin: -10px 0 -10px -10px;
    padding: 10px 0 10px 10px;
    border-radius: 4px 0 0 4px;
    min-width: 50px;
    background-color: var(--primary-light);
    color: var(--on-primary);
}


/* user-list */

.qa-top-users-table tbody {
    display: grid;
    grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3));
    gap: 5px;
}

.qa-top-users-table tr {
    height: 120px;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.qa-top-users-label {
    width: 100%;
}

.qa-avatar-link span {
    display: block !important;
    padding: 0 !important;
    width: 100%;
    height: 120px;
}

.qa-top-users-table .qa-user-link {
    position: absolute;
    margin-top: -48px;
    text-align: center;
    width: calc(100% / 3 - 30px / 3);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 0 20px 0;
    font-size: 1.25em;
    color: white;
    overflow: hidden;
}

.qa-top-users-score {
    position: absolute;
    width: calc(100% / 3 - 30px / 3);
    text-align: center;
    margin-top: 100px;
    color: white;
}

@media(max-width: 400px) {
    .qa-top-users-table tr,
    .qa-avatar-link span {
        height: 100px;
    }
    .qa-top-users-score {
        margin-top: 80px;
    }
}

@media(min-width: 515px) {
    .qa-top-users-table tbody {
        grid-template-columns: repeat(4, calc(100% / 4 - 15px / 4));
    }
    .qa-top-users-table .qa-user-link,
    .qa-top-users-score {
        width: calc(100% / 4 - 35px / 4);
    }
}

@media(min-width: 768px) {
    .qa-top-users-table tbody {
        grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3));
    }
    .qa-top-users-table .qa-user-link,
    .qa-top-users-score {
        width: calc(100% / 3 - 330px / 3);
    }
}

@media(min-width: 1024px) {
    .qa-top-users-table tbody {
        grid-template-columns: repeat(4, calc(100% / 4 - 15px / 4));
    }
    .qa-top-users-table .qa-user-link,
    .qa-top-users-score {
        width: calc(100% / 4 - 335px / 4);
    }
    .menu-active .qa-top-users-table tbody {
        grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3));
    }
    .menu-active .qa-top-users-table .qa-user-link,
    .menu-active .qa-top-users-score {
        width: calc(100% / 3 - 630px / 3);
    }
}

@media(min-width: 1300px) {
    .qa-top-users-table .qa-user-link,
    .qa-top-users-score {
        width: calc(1000px / 4 - 35px / 4);
    }
    .qa-top-users-table tr,
    .qa-avatar-link span {
        height: 180px;
    }
    .qa-top-users-score {
        margin-top: 160px;
    }
}

@media(min-width: 1440px) {
    .qa-top-users-table .qa-user-link,
    .qa-top-users-score {
        width: calc(100% / 4 - 735px / 4);
    }
    .menu-active .qa-top-users-table tbody {
        grid-template-columns: repeat(5, calc(100% / 5 - 20px / 5));
    }
    .menu-active .qa-top-users-table .qa-user-link,
    .menu-active .qa-top-users-score {
        width: calc(1000px / 5 - 40px / 5);
    }
}

@media(min-width: 1700px) {
    .qa-top-users-table tbody {
        grid-template-columns: repeat(5, calc(100% / 5 - 20px / 5));
    }
    .qa-top-users-table .qa-user-link,
    .qa-top-users-score {
        width: calc(1000px / 5 - 40px / 5);
    }
}

.qa-ranking-users-level tr {
    height: unset;
}

.qa-ranking-users-level .qa-user-link {
    margin-top: 0;
    position: relative;
    width: 100% !important;
    text-align: center;
    display: block;
    color: var(--link);
    background-color: var(--surface);
    padding: 10px 0 40px 0;
}

.qa-ranking-users-level .qa-top-users-score {
    color: var(--on-surface);
    margin-top: 38px;
    line-height: 0.9em;
}


/* favorites */

.qa-part-q-list h2,
.qa-part-ranking-users h2,
.qa-part-ranking-tags h2,
.qa-part-nav-list-categories h2 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.qa-c-form h2,
.qa-a-form h2 {
    padding-top: 76px;
    margin-bottom: 10px;
}

.qa-part-form-activity h2,
.qa-part-message-list h2,
.qa-part-form-password h2 {
    margin-bottom: 10px;
}

.qa-part-nav-list-categories .qa-browse-cat-item {
    background-color: var(--surface);
}

.qa-part-nav-list-categories .qa-browse-cat-open {
    padding-bottom: 10px;
}

.qa-favoriting input {
    position: absolute;
    z-index: 4;
    opacity: 0;
    width: 30px;
    margin-left: -2px;
    cursor: pointer;
    height: 30px;
}

.qa-favoriting i {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 30px;
    color: var(--link);
}

.qa-waiting {
    display: none !important;
}


/* pagination */

.qa-page-links .qa-page-links-label {
    display: none;
}

.qa-page-links-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 20px 0;
}

.qa-page-links-item {
    margin: 2px;
    padding: 5px 0;
}

.qa-page-prev,
.qa-page-link,
.qa-page-next,
.qa-page-selected {
    padding: 5px 10px;
    border-radius: 2px;
}

.qa-page-prev,
.qa-page-next {
    background-color: var(--primary);
    color: var(--on-primary);
}

.qa-page-link {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

.qa-page-selected {
    background-color: var(--primary-dark);
    color: var(--on-primary);
}


/* votes */

.qa-vote-buttons input {
    /* border: 0; */
    position: absolute;
    z-index: 4;
    opacity: 0;
    cursor: pointer;
    width: 60px;
}

.qa-vote-buttons i {
    margin: 5px;
    margin-top: 12px;
    color: gray;
}

.qa-vote-buttons i.enabled {
    color: black;
}

.qa-vote-buttons i.voted_up {
    color: var(--link);
}

.qa-vote-buttons i.voted_down {
    color: var(--error);
}


/* .qa-downvote-count{
	margin-left: 10px;
} */

.qa-upvote-count-pad,
.qa-downvote-count-pad {
    display: none;
}

.qa-upvote-count.disabled,
.qa-downvote-count.disabled {
    color: gray;
}

.qa-upvote-count.enabled,
.qa-downvote-count.enabled {
    color: black;
}

.qa-upvote-count.selected {
    color: var(--link);
}

.qa-downvote-count.selected {
    color: var(--error);
}


/* login register */

.qam-login-register .qa-main {
    max-width: 400px;
    min-height: 75vh;
    margin: 10px auto;
}

.qam-login-register .qa-sidepanel {
    display: none;
}


/* widgets */

.qa-ask-box input {
    width: 100% !important;
}

.qa-related-qs .qa-related-q-list,
.qa-ask-similar .qa-q-title-list {
    margin-left: 0;
    /* margin-top: 10px; */
    list-style: none;
}

.qa-related-qs .qa-related-q-item,
.qa-ask-similar .qa-q-title-item {
    padding: 8px 0;
    display: block;
    border-bottom: 0.1px solid var(--on-surface);
}

.qa-related-qs .qa-related-q-item:last-child,
.qa-ask-similar .qa-q-title-item:last-child {
    border-bottom: none;
}