:root {
    --v4dark0: rgb(17, 17, 20);
    --v4grey1: rgb(26, 27, 31);
    --v4grey2: rgb(35, 39, 42);
    --v4grey3: rgb(51, 53, 61);
    --v4grey4: rgb(30, 33, 36);
    --v4midgrey: rgb(84, 86, 93);
    --v4lightgrey: rgb(186, 190, 196);
    --v4green: rgb(124, 197, 118);/*rgb(60, 184, 130);*/
    --v4green-second: rgb(60, 184, 170);
    --v4red: rgb(243, 90, 90);
    --v4red-second: rgb(250, 120, 95);
    --v4blue: rgb(49, 154, 215);
    --v4blue-second: rgb(49, 180, 225);
    --v4yellow: rgb(243, 214, 90);
    --v4yellow-second: rgb(250, 240, 130);
    --v4orange: rgb(255, 149, 20);
    --v4orange-second: rgb(250, 179, 40);
    --v4purple: rgb(148, 60, 184);
    --v4purple-second: rgb(182, 76, 226);
    --mainColorHex: #7cc576;
}

.ucp-main {
    width: 100%;
    background-color: var(--v4grey1);
    color: white;
    font-family: Poppins, sans-serif;
    padding-top: 100px; /*Ez nem kell ha van már menü csinálva*/
}

.ucp-content {
    width: 70%;
    min-height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.ucp-news {
    width: calc(100% - 280px - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ucp-news h2 {
    margin: 0;
    font-size: 1.5em;
    padding-left: 5px;
}

.ucp-new-element {
    padding: 10px;
    border-radius: 10px;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.ucp-new-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 15;
    line-height: 1.5em;
}

.ucp-morenews {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ucp-morenews {
    color: var(--mainColorHex);
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
}

#ucp-morenews:hover {
    cursor: pointer;
}

.ucp-login {
    width: calc(280px);
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 1px 15px;
    margin-left: 10px;
    margin-bottom: 15px;
}

.ucp-login hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.ucp-login h2 {
    font-size: 1em;
}

.ucp-login-form {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-login-input-bg {
    background-color: white;
    color: black;
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    background: #f2f2f2;
    padding: 10px 10px;
    border-radius: 5px;
}

.ucp-login-input-bg span {
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.ucp-login-input-bg input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: Poppins, sans-serif;
}

.ucp-login-button-submit {
    background-color: var(--mainColorHex);
    border-color: transparent;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-family: Poppins, sans-serif;
}

.ucp-login-button-submit:hover {
    cursor: pointer;
}

.ucp-login-form a {
    font-size: 0.8em;
    margin-bottom: 10px;
    color: var(--v4blue);
}

@media (max-width: 1200px) {
    .ucp-content {
        width: 85%;
    }
}

@media (max-width: 1000px) {
    .ucp-content {
        flex-direction: column-reverse;
    }
}

@media (max-width: 850px) {
    .ucp-content {
        flex-direction: column-reverse;
    }
    .ucp-news {
        width: 100%;
    }
    .ucp-login {
        width: calc(100% - 30px);
        margin-left: 0px;
    }
    .ucp-login-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
}

.ucp-footer-main {
    background-color: var(--v4dark0);
}

.ucp-footer {
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 70%;
    font-family: Poppins, sans-serif;
    color: white;
}

.ucp-footer-inline {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.ucp-footer hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: .25;
}

.ucp-footer h2 {
    margin: 0px;
}

.ucp-footer a {
    font-family: Poppins, sans-serif;
    color: white;
    text-decoration: none;
    margin: 0px 8px;
}

.ucp-footer a:hover {
    color: var(--mainColorHex);
    text-shadow: 0px 0px 6px var(--mainColorHex);
}

@media (max-width: 1200px) {
    .ucp-footer {
        width: 95%;
    }
}

@media (max-width: 850px) {
    .ucp-footer-inline {
        flex-direction: column;
    }
    .ucp-footer-inline span {
        text-align: center;
    }
    .ucp-footer-inline div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ucp-footer a {
        text-align: center;
    }
}

.ucp-dropdown {
    position: relative;
    display: inline-block;
    padding: 10px 0px;
}

.ucp-dropBtn {
    color: #d8d8d8;
    text-decoration: none;
    padding: 0 15px;
    transition: .5s;
}

.ucp-dropBtn:hover {
    color: #fff;
}

/* --- DROPDOWN ANIMÁCIÓVAL --- */
.ucp-dropdown-content {
    position: absolute;
    right: 15px;
    background: rgba(0,0,0,0.9);
    /*min-width: 160px;*/
    border-radius: 6px;
    flex-direction: column;
    top: 40px;
    z-index: 20;
    padding: 10px 0;

    /* animáció alap */
    opacity: 0;
    display: none;
    transform: translateY(10px);
    pointer-events: auto;
    transition: opacity .35s ease, transform .35s ease;
}

@media (min-width: 1000px) {
    .ucp-dropdown:hover .ucp-dropdown-content {
        opacity: 1;
        display: flex;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* --- LINK STÍLUSOK --- */
.ucp-dropdown-content a {
    position: relative;
    display: flex;
    padding: 10px 15px;
    color: #e9e9e9;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
    align-items: center;
}

/* --- ANIMÁLT ALSÓ VONAL --- */
.ucp-dropdown-content a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 6px;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
    opacity: .8;
}

.ucp-dropdown-content a:hover {
    color: #fff;
}

.ucp-dropdown-content a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.ucp-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 6px 0;
}

/* Kijelentkezés külön stílusa */
.ucp-dropdown-content .ucp-logout {
    color: #ff7777;
    font-weight: 600;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Hover effekt: piros shadow */
.ucp-dropdown-content .ucp-logout:hover {
    color: #ff5555;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

.ucp-dropdown-content .ucp-logout::after {
    background: #ff5555 !important;
}

/* Legördülő menü alapból rejtve */
#lenyilo.active-menu-ucp {
    display: contents;
}

.ucp-login-main {
    width: 100%;
    background-color: var(--v4grey1);
    color: white;
    font-family: Poppins, sans-serif;
    padding-top: 100px; /*Ez nem kell ha van már menü csinálva*/
}

.ucp-login-content {
    min-height: calc(100vh - 254px);
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.ucp-login-login {
    width: calc(500px);
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 0px 15px;
    margin-top: 70px;
    margin-bottom: 40px;
}

.ucp-login-login h2 {
    font-size: 1em;
}

.ucp-login-login-form {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-login-login-input-bg {
    background-color: white;
    color: black;
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    background: #f2f2f2;
    padding: 10px 10px;
    border-radius: 5px;
}

.ucp-login-login-input-bg span {
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.ucp-login-login-input-bg input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: Poppins, sans-serif;
}

.ucp-login-login-button-submit {
    background-color: var(--mainColorHex);
    border-color: transparent;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-family: Poppins, sans-serif;
}

.ucp-login-login-form a {
    font-size: 0.8em;
    margin-bottom: 10px;
    color: var(--v4blue);
}

@media (max-width: 600px) {
    .ucp-login-login {
        width: 280px;
    }
}

.ucp-profile {
    width: calc(280px);
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 1px 15px;
    margin-left: 10px;
    margin-bottom: 15px;
}

.ucp-profile hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.ucp-profile h2 {
    font-size: 1em;
}

/* Fejléc név */
.card-content .username {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Separator */
.card-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 10px 0 14px 0;
}

/* Container sorok */
.tags.has-addons {
    display: flex;
    margin-bottom: 10px;
}

.tags.has-addons-serial {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.tags.has-addons-serial span {
    font-size: 0.8em !important;
    border-radius: 5px !important;
    margin: 5px 0px;
}

/* Bal oldali cím */
.tag.is-dark {
    padding: 5px;
    border-radius: 5px 0px 0px 5px;
    margin-left: 0px;
    font-size: 0.8rem;
    color: var(--tag-text);
    white-space: nowrap;
    background-color: var(--v4grey3);;
}

/* Jobb oldali érték */
.tag.is-info {
    font-size: 0.8rem;
    color: var(--tag-text);
    white-space: nowrap;
    background-color: var(--mainColorHex);
    padding: 5px;
    border-radius: 0px 5px 5px 0px;
}

.tag.no-rot {
    border-radius: 0px;
}

.tag.last-info {
    border-radius: 0px 5px 5px 0px;
    background-color: var(--v4orange-second);
    display: flex;
    text-align: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-profil-oldal {
    color: var(--mainColorHex);
    margin: 0px 0px 10px 0px;
    text-align: center;
}

.ucp-profilom {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-karakter-oldal {
    color: var(--mainColorHex);
    margin: 0px 0px 10px 0px;
    text-align: center;
}

.ucp-karakterem {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

@media (max-width: 850px) {
    .ucp-profile-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
}

.ucp-character-content {
    width: 70%;
    min-height: 100vh;
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.ucp-character-head {
    width: 70%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-bottom: 20px;
}

.ucp-character-head h2 {
    margin: 0px;
}

.ucp-character-head span {
    color: var(--v4lightgrey);
}

.ucp-profile-character {
    width: calc(280px);
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 1px 15px;
    margin-right: 10px;
    margin-bottom: 15px;
}

.ucp-profile-character hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.ucp-profile-character h2 {
    font-size: 1em;
}

.ucp-profilom-character {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-character-more-stat {
    /*width: 50%;*/
    height: 10px;
    border-radius: 3px;
}

.ucp-character-hp-stat-bg {
    width: 100%;
    height: 10px;
    background-color: var(--v4grey3);
    border-radius: 3px;
    margin: 5px 0px;
}

.ucp-character-inline-stat {
    width: 100%;
    height: 10px;
    display: flex;
    margin-bottom: 10px;
}

.ucp-character-more-stat-bg {
    width: 100%;
    height: 10px;
    background-color: var(--v4grey3);
    border-radius: 3px;
    margin: 5px 0px;
}

.ucp-character-hunger-stat-bg {
    margin-left: 0px;
    margin-right: 10px;
}

.ucp-character-thirst-stat-bg {
    margin-left: 10px;
    margin-right: 0px;
}

.ucp-character-hp-stat {
    background-color: var(--mainColorHex);
}

.ucp-character-hunger-stat {
    background-color: var(--v4yellow-second);
}

.ucp-character-thirst-stat {
    background-color: var(--v4blue-second);
}

.ucp-stats {
    width: calc(100% - 280px - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ucp-stats h2 {
    margin: 0;
    font-size: 1.5em;
    padding-left: 5px;
}

.ucp-stat-element {
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0px;
    margin-bottom: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: white;
    background-color: var(--v4dark0);
}

.ucp-stat-element hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: 10px 0 14px 0;
}

.ucp-stat-element-table-div {
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
}

.ucp-stat-element-table {
    border: none;
    border-collapse: collapse;
    border-radius: 10px;
    width: 100%;
    border-collapse: collapse;
}

.ucp-stat-element-table th, .ucp-stat-element-table td {
    border: none;
}

.ucp-stat-element-table-head {
    text-align: left;
}

.ucp-stat-element-table thead th, .ucp-stat-element-table tbody td {
    padding: 5px 10px;
    margin: 0px;
}

.ucp-stat-element-table thead th {
    background-color: var(--v4grey2);
}

.ucp-stat-element-table tbody tr {
    background-color: var(--v4grey1);
}

.ucp-stat-element-table .ucp-stat-element-table-button {
    text-align: right;
}

.ucp-stat-element-gray {
    color: var(--v4midgrey);
}

.ucp-stat-element-red {
    color: var(--v4red);
}

.ucp-content-profile {
    width: 70%;
    min-height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
}

.ucp-profile-head h2 {
    margin: 0px;
}

.ucp-profile-head span {
    color: var(--v4lightgrey);
}

.ucp-profile-head {
    width: 70%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-bottom: 20px;
}

.ucp-profile-info {
    width: calc(280px);
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 1px 15px;
    margin-right: 10px;
    margin-bottom: 15px;
}

.ucp-profile-info hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.ucp-profile-info h2 {
    font-size: 1em;
}

.ucp-stat-element-inventory-table-title {
    text-align: center;
    padding: 5px;
    background-color: var(--v4grey2);
}

.ucp-stat-element-inventory-table-title span {
    padding: 5px;
}

.ucp-stat-element-inventory-table-title span:hover {
    cursor: pointer;
    color: var(--mainColorHex);
}

.ucp-stat-element-inventory-table-div {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-stat-element-inventory-table {
    padding: 0px
}

.ucp-stat-element-inventory-table-div-content {
    background-color: var(--v4grey3);
}

.ucp-inventory-box {
    width: 35px;
    height: 35px;
}

.ucp-inventory-box div{
    width: 35px;
    height: 35px;
    background-color: var(--v4grey2);
}

.ucp-inventory-item-img {
    position: absolute;
    z-index: 5;
    width: 35px;
    height: 35px;
}

.ucp-inventory-item-img-transparent {
    opacity: 0;
}

.ucp-inventory-item-count {
    position: relative;
}

.ucp-inventory-item-count span {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    height: 16px;
    font-size: 0.8em;
}

@media (max-width: 550px) {
    .ucp-inventory-box {
        width: 25px;
        height: 25px;
    }
    .ucp-inventory-box div{
        width: 25px;
        height: 25px;
    }
    .ucp-inventory-item-img {
        width: 25px;
        height: 25px;
    }
    .ucp-inventory-item-count span {
        font-size: 0.7em;
        height: 13px;
    }
}

@media (max-width: 430px) {
    .ucp-inventory-box {
        width: 20px;
        height: 20px;
    }
    .ucp-inventory-box div{
        width: 20px;
        height: 20px;
    }
    .ucp-inventory-item-img {
        width: 20px;
        height: 20px;
    }
    .ucp-inventory-item-count span {
        font-size: 0.5em;
        height: 10px;
    }
}

@media (max-width: 370px) {
    .ucp-inventory-box {
        width: 15px;
        height: 15px;
    }
    .ucp-inventory-box div{
        width: 15px;
        height: 15px;
    }
    .ucp-inventory-item-img {
        width: 15px;
        height: 15px;
    }
    .ucp-inventory-item-count span {
        font-size: 0.3em;
        height: 7px;
    }
}

@media (max-width: 1000px) {
    .ucp-profile-info, .ucp-profile-character {
        margin-right: 0px;
        margin-left: 0px;
        width: calc(100% - 30px);
    }
    .ucp-character-head, .ucp-profile-head {
        align-items: center;
    }
    .ucp-character-content {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
    }
    .ucp-content-profile {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
    }
    .ucp-stats {
        width: 100%;
        margin-left: 0px;
    }
    .ucp-profile-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
}

@media (max-width: 1200px) {
    .ucp-content-profile, .ucp-profile-head {
        width: 85%;
    }
    .ucp-character-content, .ucp-character-head {
        width: 85%;
    }
}

@media (max-width: 600px) {
    .ucp-stat-element-table {
        font-size: 0.6em;
    }
}

@media (max-width: 420px) {
    .ucp-stat-element-table {
        font-size: 0.4em;
    }
}

.ucp-vehicle-data-container {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 90%;
    border-radius: 10px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ucp-vehicle-data-content {
    border-radius: 10px;
    background-color: var(--v4grey1);
}

.ucp-vehicle-data-list {
    margin: 0px 60px 0px 10px;
    display: flex;
    width: 50%;
    flex-direction: column;
}

.ucp-vehicle-datas-list, .ucp-vehicle-tuning-datas-list {
    padding: 10px;
    display: flex;
    background-color: transparent;
}

.ucp-vehicle-data-head {
    padding: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

.ucp-vehicle-data-head span {
    color: var(--v4lightgrey);
}

.ucp-vehicle-data-gray {
    color: var(--v4midgrey);
}

.ucp-vehicle-data-title {
    font-weight: bold;
    background-color: var(--v4dark0);
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ucp-vehicle-data-title a:hover {
    color: var(--v4red);
}

.ucp-vehicle-data-head h2 {
    font-size: 1em;
    margin: 0px;
}

.ucp-vehicle-data-list h5 {
    margin-bottom: 10px;
}

.ucp-vehicle-data-container-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 150vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 900;
}

@media (max-width: 1000px) {
    .ucp-vehicle-datas-list, .ucp-vehicle-tuning-datas-list {
        flex-direction: column;
    }
}

.ucp-news-content {
    width: calc(70%);
    /*min-height: 100vh;*/
    min-height: calc(100vh - 334px);
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.ucp-news-head {
    width: 70%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-bottom: 20px;
}

.ucp-news-head h2 {
    margin: 0px;
}

.ucp-news-head span {
    color: var(--v4lightgrey);
}

.ucp-news-table-div {
    display: flex;
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-news-table {
    width: 100%;
}

.ucp-stat-element hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: 10px 0 14px 0;
}

.ucp-news-table-div {
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
}

.ucp-news-table {
    border: none;
    border-collapse: collapse;
    border-radius: 10px;
    width: 100%;
    border-collapse: collapse;
}

.ucp-news-table th, .ucp-news-table td {
    border: none;
}

.ucp-news-table-head {
    text-align: left;
}

.ucp-news-table thead th, .ucp-news-table tbody td {
    padding: 5px 10px;
    margin: 0px;
}

.ucp-news-table thead th {
    background-color: var(--v4grey2);
}

.ucp-news-table tbody tr {
    background-color: var(--v4grey1);
}

#ucp-new-new-button {
    padding: 10px;
    background: var(--mainColorHex);
    border-radius: 10px;
    margin-bottom: 10px;
}

.ucp-new-new-content {
    font-family: Poppins, sans-serif;
    width: calc(70%);
    min-height: 100vh;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: flex-start;
}

.ucp-new-new-content form {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
}

.new-ucp-input {
    font-family: Poppins, sans-serif;
    padding: 10px;
    outline: none;
    border-width: 0px;
    border-radius: 5px;
    margin: 5px 0px;
    width: 100%;
    background-color: white;
    color: black;
}

.new-ucp-textarea {
    height: 200px;
}

.file-selector {
    text-align: center;
    padding: 10px 0px;
}

.file-selector:hover, .ucp-new-new-button-submit:hover {
    cursor: pointer;
}

.ucp-new-new {
    width: calc(500px);
    background-color: var(--v4dark0);
    border-radius: 10px;
    padding: 0px 15px;
    margin-top: 70px;
    margin-bottom: 40px;
}

.ucp-new-new h2 {
    font-size: 1em;
}

.ucp-new-element-table-div {
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
}

.ucp-new-new-form {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-new-new-button-submit {
    background-color: var(--mainColorHex);
    border-color: transparent;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-family: Poppins, sans-serif;
}

.ucp-new-new-form a {
    font-size: 0.8em;
    margin-bottom: 10px;
    color: var(--v4blue);
}

@media (max-width: 600px) {
    .ucp-new-new {
        width: 280px;
    }
}

p .purple {
    color: var(--v4purple);
}

p .green {
    color: var(--mainColorHex);
}

p .blue {
    color: var(--v4blue);
}

p .red {
    color: var(--v4red);
}

p .gray {
    color: var(--v4midgrey);
}

p .yellow {
    color: var(--v4yellow);
}

p .orange {
    color: var(--v4orange);
}

@media (max-width: 1200px) {
    .ucp-news-table {
        font-size: 0.8em;
    }
}

@media (max-width: 1000px) {
    .ucp-news-content, .ucp-news-head {
        width: calc(85% - 20px);
    }
}

@media (max-width: 800px) {
    .ucp-news-table {
        font-size: 0.6em;
    }
    .ucp-news-content, .ucp-news-head{
        width: calc(100% - 20px);
    }
}

@media (max-width: 600px) {
    .ucp-news-table {
        font-size: 0.5em;
    }
}

@media (max-width: 500px) {
    .ucp-news-table {
        font-size: 0.4em;
    }
}

@media (max-width: 400px) {
    .ucp-news-table {
        font-size: 0.2em;
    }
}

.ucp-account-search-form {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ucp-account-search-input-bg {
    background-color: white;
    color: black;
    display: flex;
    align-items: center;
    background: #f2f2f2;
    padding: 10px 10px;
    border-radius: 5px;
    width: calc(100% - 120px);
}

.ucp-account-search-input-bg span {
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.ucp-account-search-input-bg input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    max-width: calc(100% - 20px);
}

.ucp-search-button-submit {
    background-color: var(--mainColorHex);
    border-color: transparent;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-left: 10px;
    width: 100px;
    font-family: Poppins, sans-serif;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ucp-search-button-submit:hover {
    cursor: pointer;
}

.ucp-admins-content {
    min-height: 0 !important;
    padding-bottom: 40px;
}

.ucp-emailchange-data-container {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 90%;
    border-radius: 10px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ucp-emailchange-data-content {
    border-radius: 10px;
    background-color: var(--v4grey1);
}

.ucp-emailchange-data-list {
    margin: 0px 60px 0px 10px;
    display: flex;
    width: 50%;
    flex-direction: column;
}

.ucp-emailchange-datas-list {
    padding: 10px;
    display: flex;
    background-color: transparent;
}

.ucp-emailchange-data-head {
    padding: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

.ucp-emailchange-data-head span {
    color: var(--v4lightgrey);
}

.ucp-emailchange-data-gray {
    color: var(--v4midgrey);
}

.ucp-emailchange-data-title {
    font-weight: bold;
    background-color: var(--v4dark0);
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ucp-emailchange-data-title a:hover {
    color: var(--v4red);
}

.ucp-emailchange-data-head h2 {
    font-size: 1em;
    margin: 0px;
}

.ucp-emailchange-data-list h5 {
    margin-bottom: 10px;
}

.ucp-emailchange-data-container-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 150vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 900;
}

@media (max-width: 1000px) {
    .ucp-emailchange-datas-list {
        flex-direction: column;
    }
}

.radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    gap: 10px;
    user-select: none;
}

.radio input {
    display: none;
}

/* külső kör */
.radio span {
    width: 18px;
    height: 18px;
    /*border: 2px solid var(--v4midgrey);*/
    background-color: var(--v4grey4);
    border-radius: 50%;
    position: relative;
    transition: all .2s ease;
}

/* belső pötty */
.radio span::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--mainColorHex);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s ease;
}

/* checked állapot */
.radio input:checked + span::after {
    transform: translate(-50%, -50%) scale(1);
}

.ucp-addban-data-container {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 90%;
    border-radius: 10px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ucp-addban-data-content {
    border-radius: 10px;
    background-color: var(--v4grey1);
}

.ucp-addban-data-list {
    margin: 0px 60px 0px 10px;
    display: flex;
    width: 50%;
    flex-direction: column;
}

.ucp-addban-datas-list {
    padding: 10px;
    display: flex;
    background-color: transparent;
}

.ucp-addban-data-head {
    padding: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

.ucp-addban-data-head span {
    color: var(--v4lightgrey);
}

.ucp-addban-data-gray {
    color: var(--v4midgrey);
}

.ucp-addban-data-title {
    font-weight: bold;
    background-color: var(--v4dark0);
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ucp-addban-data-title a:hover {
    color: var(--v4red);
}

.ucp-addban-data-head h2 {
    font-size: 1em;
    margin: 0px;
}

.ucp-addban-data-list h5 {
    margin-bottom: 10px;
}

.ucp-addban-data-container-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 150vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 900;
}

.ucp-addban-datas-list form {
    flex-direction: column !important;
}

@media (max-width: 1000px) {
    .ucp-addban-datas-list {
        flex-direction: column;
    }
}

.grouplist-inactive-group-ucp {
    color: var(--v4midgrey);
}

.grouplist-active-group-ucp {
    color: #ffffff;
}

.text-right {
    text-align: right;
}

.group-topic-content-div {
    width: 100%;
}