@font-face {
  font-family: DaysOne-Regular;
  src: url('fonts/DaysOne-Regular.woff2');
}

/* ------------------------ */

:root {
    --color-danger: rgb(255, 102, 102);
    --color-green-1: rgb(18, 78, 102);
    --color-green-2: rgb(59, 152, 148);
    --color-green-3: rgb(157, 203, 201);
    --color-green-4: rgb(206, 229, 228);
    --color-green-2-alpha-1: rgba(59, 152, 148, 0.2);
    --color-grey-1: rgb(33, 33, 33);
    --color-grey-5: rgb(150, 150, 150);
    --color-grey-6: rgb(180, 180, 180);
    --color-inform: rgb(255, 252, 204);
    --color-primary: rgb(0, 140, 186);
    --color-secondary: rgb(59, 152, 148);
    --color-success: rgb(0, 140, 186);
    --color-yellow-2: rgb(255, 254, 224);
    --color-white-02: rgba(255, 255, 255, 0.2);
    --color-white-05: rgba(255, 255, 255, 0.5);

    --color-brown-1: rgb(109, 80, 58);
    --color-slate-1: rgb(112, 128, 144);
    --color-slate-005: rgba(112, 128, 144, 0.05);
    --color-slate-01: rgba(112, 128, 144, 0.1);
    --color-slate-03: rgba(112, 128, 144, 0.3);
    --color-slate-05: rgba(112, 128, 144, 0.5);
    --color-slate-07: rgba(112, 128, 144, 0.7);
    --color-teal-1: rgb(10, 126, 140);
    --color-teal-07: rgba(10, 126, 140, 0.7);
    --color-teal-05: rgba(10, 126, 140, 0.5);
    --color-teal-03: rgba(10, 126, 140, 0.3);
    --color-teal-01: rgba(10, 126, 140, 0.1);

    --font-awesome: 'Font Awesome 5 Free';

  /*--color-success: rgb(50, 129, 126);*/
}

/* ------------------------ */

body {
    max-width: 1320px;
    margin: auto;
}

/* Általános osztályok */

.tt-green-1 {color: var(--color-green-1) !important;}
.tt-green-2 {color: var(--color-green-2) !important;}

.tt-bg-green-1 {background-color: var(--color-green-1) !important;}
.tt-bg-green-2 {background-color: var(--color-green-2) !important;}
.tt-bg-green-3 {background-color: var(--color-green-3) !important;}
.tt-bg-green-4 {background-color: var(--color-green-4) !important;}
.tt-bg-teal-1 {background-color: var(--color-teal-1) !important;}
.tt-bg-teal-07 {background-color: var(--color-teal-07) !important;}
.tt-bg-teal-05 {background-color: var(--color-teal-05) !important;}
.tt-bg-teal-03 {background-color: var(--color-teal-03) !important;}
.tt-bg-teal-01 {background-color: var(--color-teal-01) !important;}

.tt-bg-yellow-2, .tt-bg-yellow-2:focus {background-color: var(--color-yellow-2); -webkit-box-shadow: 0 0 0 100px var(--color-yellow-2) inset;}

.tt-shadow-green-2 {text-shadow: 0 0 2px var(--color-green-2);}

.font-size-small-1 {font-size: 95%;}

.bold {font-weight: bold;}
.v-middle {vertical-align: middle;}
.pointer {cursor: pointer !important;}

.width-100 {width: 100px;}
.width-115 {width: 115px;}
.width-210 {width: 210px;}
.width-225 {width: 225px;}
.width-290 {width: 290px;}
.width-320 {width: 320px;}
.width-390 {width: 390px;}
.width-30-pc {width: 30%;}
.width-full {width: 100%;}
.max-width-210 {max-width: 210px;}

.flex-grow-maximum {flex-grow: 9999999 !important;}
.flex-grow-0 {flex-grow: 0 !important;}
.align-items-flex-end {align-items: flex-end !important;}

.column-gap-20 {column-gap: 20px;}

.hidden {display: none !important;}
.nowrap {white-space: nowrap !important;}
.flip-h {transform: scale(-1, 1);}

.email-address {
    word-break: break-all;
}

.link-with-hand::before {
    content: '\f0a4';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
}

/* ---------------------- */

p:last-child {
    margin-bottom: 0;
}

.grid-x p:last-child {
    margin-bottom: 1rem;
}

.auto-width {width: auto;}
.inline-block {display: inline-block;}

.margin-0 {margin: 0 !important;}

.margin-bottom-0 {margin-bottom: 0 !important;}
.margin-bottom-10 {margin-bottom: 10px !important;}
.margin-bottom-20 {margin-bottom: 20px !important;}
.margin-bottom-30 {margin-bottom: 30px !important;}
.margin-bottom-40 {margin-bottom: 40px !important;}

.margin-left-5 {margin-left: 5px !important;}
.margin-left-10 {margin-left: 10px !important;}
.margin-left-20 {margin-left: 20px !important;}
.margin-left-30 {margin-left: 30px !important;}
.margin-left-40 {margin-left: 40px !important;}
.margin-left-auto {margin-left: auto;}

.margin-top-0 {margin-top: 0 !important;}
.margin-top-10 {margin-top: 10px !important;}
.margin-top-20 {margin-top: 20px !important;}
.margin-top-30 {margin-top: 30px !important;}
.margin-top-40 {margin-top: 40px !important;}

/* Flex input container */

.flex-input-container {
    align-items: center;
    column-gap: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
}

.flex-input-container > div {
    flex-grow: 1;
    max-width: 100%;
    position: relative;
}

.flex-input-container input, .flex-input-container select, .flex-input-container .select2-container, .flex-input-container textarea {
    max-width: 100%;
    width: 100%;
}

.flex-input-container .button {
    margin: 0.5rem 0 0 0;
}

/* Page */

.page-title-holder {
    align-items: center;
    column-gap: 20px;
    display: flex;
    flex-direction: row;
    margin-bottom: 1.125rem;
}

.page-title-holder > h3 {
    flex-grow: 1;
}

/* modal */

.modal-dialog > .modal-content {
}

.modal-dialog.modal-xl > .modal-content {
    height: calc(100vh - 3.5rem);
}

.modal-dialog .modal-body {
    overflow: auto;
}

.modal-dialog .bootbox-body {
    /*margin-top: 3rem;*/
}

/* snackbar */

.snackbar-container.success {
    background: var(--color-success);
}

.snackbar-container.inform {
    background: var(--color-inform);
}

.snackbar-container.danger {
    background: var(--color-danger);
}

/* Üzenetek modal */

#messages-list .message-line:not(:first-of-type) {
    margin-top: 0.5em;
}

#messages-list .message-line-header {
    background-color: var(--color-green-2);
    color: white;
    display: flex;
    column-gap: 2em;
    padding: 0.5em 1.5em;
}

#messages-list .message-line-subject {
    flex-grow: 1;
}

#messages-list .message-line-body {
    background-color: var(--color-green-4);
    padding: 1em 1.5em;
    white-space: pre-line;
}

/* fejléc */

#header {
    background-color: var(--color-green-3);
    box-shadow: 0 0 8px 2px var(--color-green-1);
    height: 86px;
    left: 0;
    padding: 9px 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}

#header > #header-content {
    display: block;
    font-size: 0;
    margin: 0 auto;
    max-width: 1320px;
    position: relative;
}

#header > #header-content > #header-brand-holder {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    float: left;
    font-family: 'DaysOne-Regular', sans-serif;
    height: 68px;
    margin: 0;
    overflow: hidden;
    padding: 4px 0;
    vertical-align: top;
    white-space: nowrap;
    width: auto;
}

body:not(.loggedin) #header > #header-content > #header-brand-holder {
    width: 100%;
}

#header > #header-content > #header-brand-holder > img {
    height: 60px;
}

#header > #header-content > #header-brand-holder #header-site-name {
    color: var(--color-green-1);
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 1.2em;
}

#header > #header-content > #header-brand-holder #header-site-name > span {
    color: var(--color-green-2);
}

#header > #header-content > #header-brand-holder #header-site-info {
    color: var(--color-green-1);
    font-size: 1.05rem;
    font-weight: bold;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

#header > #header-content > #menu-toggle {
    background-color: var(--color-green-3);
    cursor: pointer;
    display: none;
    font-size: 2rem;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: 12px;
    width: 48px;
}

#header > #header-content > #menu-holder {
    display: inline-block;
    float: right;
    font-size: 1rem;
    height: 40px;
    margin: 14px 0;
    vertical-align: top;
    width: 694px;
}

#header > #header-content > #menu-holder > .top-bar-left {
    float: left;
}

#header > #header-content > #menu-holder > .top-bar-right {
    float: right;
}

#header > #header-content > #menu-holder .menu > li[data-id="notification"] {
    margin-right: 1em;
}

#header > #header-content > #menu-holder .menu > li > a {
    color: rgb(40, 40, 40);
    position: relative;
}

#header > #header-content > #menu-holder .menu > li > a::after {
    border-top-color: var(--color-green-1);
    right: 8px;
}

#header > #header-content > #menu-holder .menu > li > a:hover::after {
    right: 7px;
}

#header > #header-content > #menu-holder .menu > li.has-submenu > a {
    padding: 0.7rem 1.8rem 0.7rem 0.7rem;
}

#header > #header-content > #menu-holder .menu > li.has-submenu > a:hover {
    background-color: var(--color-white-05);
    border-color: var(--color-green-3);
    border-style: solid;
    border-width: 0 1px;
    padding: 0.7rem calc(1.8rem - 1px) 0.7rem calc(0.7rem - 1px);
}

#header > #header-content > #menu-holder .menu > li > a > i {
    color: var(--color-green-1);
    font-size: 1.3em;
    margin-right: 0.2em;
    vertical-align: middle;
}

#header > #header-content > #menu-holder .menu > li > a:hover > i::before {
    text-shadow: 0 0 10px white;
}

#header > #header-content > #menu-holder .submenu > .submenu-header {
    background-color: var(--color-green-3);
    color: var(--color-green-1);
    cursor: default;
    font-weight: bold;
    user-select: none;
}

#header > #header-content > #menu-holder .submenu > .submenu-header > i {
    color: white;
}

#header > #header-content > #menu-holder .submenu > li > a > i {
    font-size: 1em;
    margin-right: 0.3em;
}

#header > #header-content > #menu-holder .menu > li > a .icon-badge {
    background-color: rgb(223, 30, 30);
    border-radius: 50%;
    color: rgb(255, 255, 255);
    font-size: 0.7em;
    height: 1.8em;
    left: 2.4em;
    line-height: 1em;
    overflow: hidden;
    padding: 0.4em 0.1em;
    position: absolute;
    text-align: center;
    top: 0.1em;
    width: 1.8em;
    z-index: 1;
}

#header > #header-content > #menu-holder .menu > li > a .icon-badge:empty {
    display: none;
}

#header > #header-content > #menu-holder .submenu > li {
    white-space: nowrap;
}

#header > #header-content > #menu-holder .submenu > li:hover {
    background-color: rgba(23, 121, 186, 0.15);
}

/* lábléc */

#footer {
    align-items: center;
    background-color: var(--color-green-4);
    bottom: 0;
    display: flex;
    flex-direction: row;
    height: 40px;
    left: 0;
    position: fixed;
    right: 0;
}

#footer > * {
    padding: 10px 20px;
}

#footer > #company-holder {
    font-size: 0.9rem;
}

#footer > #company-holder > a {
    color: var(--color-green-1);
    font-weight: bold;
    line-height: 20px;
}

#footer > #version-holder {
    color: var(--color-green-2);
    font-size: 0.75rem;
}

/* -------- */

#page, #admin_page {
    margin: 86px auto 40px auto;
    max-width: calc(100% - 30px);
    padding: 25px 0 20px 0;
}

#main_content > h3 {
    margin-bottom: 25px;
}

.help-box {
    background-color: var(--color-green-4);
    border-color: var(--color-green-3);
    border-radius: 8px;
    padding: 25px;
}

.callout {
    border-radius: 8px;
    padding: 1rem 4rem 1rem 1rem;
}

.callout.success {
    background-color: #fffccc;
}

#validation_errors > ul:last-of-type {
    margin-bottom: 0;
}

.help-text.error {
    color: #cc0000;
}

.btn {
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1;
    padding: .85em 1em;
}

.btn.btn-cancel {
    border: 1px solid rgb(150, 200, 150);
    color: rgb(80, 80, 80);
}

.button {
    background-color: var(--color-primary);
    margin: 0 8px;
}

.button:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 3px 3px var(--color-green-3);
}

.button-group > .button {
    margin: 3px 6px;
}

button.radius, .button.radius {
    border-radius: 4px; 
}

.btn-primary, .btn-primary:hover,
.button.primary, .button.primary:hover {
    background-color: var(--color-primary);
}

.btn-secondary, .btn-secondary:hover,
.button.secondary, .button.secondary:hover {
    background-color: var(--color-secondary);
}

.button.secondary.hollow {
    background-color: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-green-1);
}

.button.danger.hollow {
    background-color: transparent;
    border: 1px solid var(--color-grey-6);
    color: var(--color-green-1);
}

.button.danger.hollow > i {
    color: var(--color-danger);
}

.submit-holder {
    margin-top: 25px;
    text-align: center;
}

[type="submit"].button:not(.secondary) {
    background-color: var(--color-success);
    color: white;
}

p.form_submit {
    margin-top: 1.5rem;
}

p.form_submit > .button, p.form_submit > .btn {
    margin-top: 0.5rem;
}

fieldset.fieldset {
    background-color: var(--color-green-4);
    border-color: var(--color-green-3);
    border-radius: 8px;
}

fieldset.fieldset > legend {
    background-color: var(--color-green-4);
    border-radius: 8px 8px 0 0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 32px;
    padding: 4px 22px;
    position: relative;
}

fieldset.fieldset > legend:after {
    border-color: var(--color-green-3);
    border-radius: 8px 8px 0 0;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    bottom: 50%;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

fieldset.fieldset-no-box {
    margin: 18px;
}

[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search]
, [type=tel], [type=text], [type=time], [type=url], [type=week], select {
    border-radius: 4px;
    height: 32px;
    padding: 4px 8px;
}

.input-group.has-button {
    align-items: flex-start;
    column-gap: 0.75rem;
    flex-direction: row;
    flex-wrap: nowrap;
}

.input-group.has-button > :not(.button) {
    flex-grow: 1;
}

.input-group.has-button > .button {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
}

.input-group-append [data-action] {
    cursor: pointer;
}

.input-with-select-to-clipboard {
    margin-bottom: 0;
}

select.select-to-clipboard {
    background-color: cornsilk;
}

input[readonly], input[readonly]:focus {
    background-color: #e6e6e6;
    border-color: rgb(202, 202, 202);
}

input:last-child, select:last-child, textarea:last-child {
    margin-bottom: 0;
}

select {
    appearance: initial;
    padding: 4px 24px 4px 8px;
}

textarea {
    border-radius: 4px;
    padding: 4px 8px;
}

input[type="checkbox"], input[type="radio"] {
    height: 18px;
    vertical-align: middle;
    width: 18px;
}

input[type="checkbox"].high, input[type="radio"].high {
    margin: 7px 0;
}

p[data-inputtype="checkbox"]:has(+ p[data-inputtype="checkbox"]) {
    margin-bottom: 0;
}

input[type="file"] {
    width: auto;
}

.required_form_element label {
    font-weight: bold;
}

.required_form_element label:after {
    content: ' *';
}

.required_form_element input, .required_form_element select, .required_form_element textarea {
    border-color: var(--color-green-3);
}

/* profilkép */

.profile-photo-upload-holder > .col {
    margin-top: 30px;
}

img.profile-photo {
    box-shadow: 0 0 8px 2px var(--color-green-1);
}

/* tabs */

.nav.nav-tabs {
    column-gap: 6px;
}

.nav.nav-tabs .nav-link:any-link {
    border: 1px solid var(--color-green-3);
    color: #444444;
}

.nav.nav-tabs .nav-link.active:any-link {
    background-color: var(--color-green-2);
    color: white;
}

.nav.nav-tabs .nav-link:hover {
    background-color: var(--color-green-3);
}

/* lista táblák */

nav[aria-label="Pagination"] {
    display: inline-block;
    margin: 0 15px;
}

nav[aria-label="Pagination"] > .pagination > ul {
    border: 1px solid var(--color-green-3);
    margin: 0;
}

nav[aria-label="Pagination"] > .pagination > ul > li {
    background-color: var(--color-green-4);
    border-right: 1px solid var(--color-green-3);
    margin: 0;
    user-select: none;
}

nav[aria-label="Pagination"] > .pagination > ul > li:last-child {
    border-right: 0;
}

nav[aria-label="Pagination"] > .pagination > ul > li > a {
    color: var(--color-grey-1);
}

nav[aria-label="Pagination"] > .pagination > ul > li > a:hover {
    background-color: var(--color-green-2-alpha-1);
    text-decoration: none;
}

nav[aria-label="Pagination"] > .pagination > ul > li > a.current {
    background-color: var(--color-green-3);
    cursor: default;
    font-weight: bold;
}

nav[aria-label="Pagination"] > .pagination > ul > li > a.current:hover {
    background-color: var(--color-green-3);
    text-decoration: none;
}

nav[aria-label="Pagination"] > .pagination > ul > li[role] > a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: relative;
    top: 1px;
}

nav[aria-label="Pagination"] > .pagination > ul > li[role="prev"] > a::before {
    content: '\f104';
}

nav[aria-label="Pagination"] > .pagination > ul > li[role="next"] > a::before {
    content: '\f105';
}

nav[aria-label="Pagination"] > .pagination > ul > li[role="first"] > a::before {
    content: '\f100';
}

nav[aria-label="Pagination"] > .pagination > ul > li[role="last"] > a::before {
    content: '\f101';
}

/* table */

thead {
    background-color: var(--color-green-3);
    border-color: var(--color-green-2);
    border-style: solid;
    border-width: 1px 1px;
}

thead th {
    height: 35px;
    line-height: 21px;
    padding: 6px 8px;
}

thead th.icon-header-cell {
    width: 40px;
}

tbody {
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 0 1px;
}

tbody > tr {
    border-bottom: 1px solid rgb(221, 221, 221) !important;
}

tbody > tr[data-active="0"] {
    color: #888888;
}

tbody > tr:not([data-parity]):not(.table-row-details-holder):nth-child(odd), tbody > tr[data-parity="odd"] {
    background-color: rgb(253, 253, 253);
}

tbody > tr:not([data-parity]):not(.table-row-details-holder):nth-child(even), tbody > tr[data-parity="even"] {
    background-color: rgb(245, 245, 245);
}

tbody > tr.inactive {
    background-color: rgb(245, 205, 205);
}

tbody > tr[data-member-has-free-membership] {
    background-color: rgb(235, 235, 245);
}

tbody > tr:hover, tbody > tr:has(+ tr.table-row-details-holder:hover) {
    background-color: var(--color-green-2-alpha-1);
    text-shadow: 0 0 2px var(--color-green-2);
}

tbody td {
    height: 35px;
    line-height: 21px;
    padding: 6px 8px;
}

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

tbody td.ordinal-cell {
    text-align: center;
}

tbody td.icon-cell {
    padding: 0;
    position: relative;
    width: 40px;
}

tbody td.icon-cell:hover {
    background-color: var(--color-green-2-alpha-1);
}

tbody td a, tbody td a:hover {
    color: var(--color-green-1);
}

tbody td a.phone-icon-link {
    color: var(--color-green-2);
}

tbody td a.phone-icon-link > i {
    transform: scale(-1, 1);
}

tbody td.icon-cell > a {
    align-items: center;
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 0 1px;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

tbody td.icon-cell:first-child > a {
    border-left-width: 0;
}

tbody td.icon-cell:last-child > a {
    border-right-width: 0;
}

tbody td.icon-cell + td.icon-cell > a {
    border-left-width: 0;
}

.icon-link {
    cursor: pointer;
    padding: 8px;
}

.icon-link:hover {
    text-decoration: none;
}

.icon-link.success {
    color: var(--color-green-2);
}

.icon-link.primary {
    color: var(--color-primary);
}

.icon-link.secondary {
    color: var(--color-green-1);
}

.icon-link.alert {
    color: #ff6666;
    margin-bottom: 0;
}

tbody [data-action="toggleDetails"] {
    cursor: pointer;
}

tbody tr.table-row-details-holder {
    display: none;
}

tbody tr[data-parity="odd"] + tr.table-row-details-holder {
    background-color: rgb(253, 253, 253);
}

tbody tr[data-parity="even"] + tr.table-row-details-holder {
    background-color: rgb(245, 245, 245);
}

tbody tr:hover + tr.table-row-details-holder, tbody tr.table-row-details-holder:hover {
    background-color: var(--color-green-2-alpha-1) !important;
    text-shadow: none;
}

tbody tr[data-detailsvisible="1"] + tr.table-row-details-holder {
    display: table-row;
}

tbody tr.table-row-details-holder > td {
    line-height: 1.35;
    padding: 0;
}

tbody tr.table-row-details-holder > td > .view-holder {
    width: 100%;
}

tbody tr.table-row-details-holder > td > .view-holder > .grid-x > .cell {
    padding: 20px 20px;
}

tbody tr.table-row-details-holder .memberships-section-holder {
    border-left: 1px solid rgb(221, 221, 221);
}

tbody tr.table-row-details-holder img.profile-photo {
    box-shadow: none;
}

/* wrap-table */

table.wrapped {
    display: block;
}

table.wrapped > thead {
    display: none;
}

table.wrapped > tbody {
    border-top-width: 1px;
    display: block;
}

table.wrapped > tbody > tr:not(.table-row-details-holder) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 50px;
    padding: 6px 3px;
    position: relative;
}

table.wrapped > tbody > tr > td {
    height: auto;
}

table.wrapped > tbody > tr > td:not(.icon-cell, .ordinal-cell) {
    display: flex;
    padding: 2px 5px;
    position: relative;
    text-align: left !important;
    width: 100%;
}

table.wrapped > tbody > tr > td.icon-cell {
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}

table.wrapped > tbody > tr > td.icon-cell > a.icon-link {
    border-width: 0;
}

table.wrapped > tbody > tr > td.ordinal-cell {
    display: none;
}

table.wrapped > tbody > tr > td > .wrap-cell-label {
    padding: 0 4px;
    white-space: normal;
    width: 30%;
    word-break: break-all;
}

table.wrapped > tbody > tr > td > .wrap-cell-value {
    padding: 0 4px;
    white-space: normal;
    width: 70%;
    word-break: break-all;
}

table.wrapped > tbody > tr > td.icon-cell > a.icon-link > i {
    font-size: 2rem;
}

table.wrapped > tbody > tr[data-detailsvisible="1"] + tr.table-row-details-holder {
    display: block;
}

table.wrapped > tbody > tr.table-row-details-holder > td > .view-holder > .grid-x > .cell {
    padding: 10px 10px;
}

table.wrapped > tbody > tr.table-row-details-holder .memberships-section-holder {
    border-left: 0;
}

table.wrapped > tbody > tr.table-row-details-holder > td > .view-holder > .grid-x > .cell > .grid-x > .text-right {
    text-align: left !important;
}

/* tagok listájában a tag részleteinél a befizetések */

.membership-list-item-holder [data-action="membership-details"] {
    cursor: pointer;
}

.membership-list-item-holder .membership-list-details-holder {
    padding: 3px 5px;
}

.membership-list-item-holder:not(.details-visible) .membership-list-details-holder {
    display: none;
}

/* DataTables */

div.dt-container .dt-length > label {
    font-weight: bold;
}

div.dt-container .dt-length select {
    appearance: auto;
    background-color: white;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    width: auto;
}

div.dt-container div.dt-buttons > .dt-button {
    background: none;
    background-color: var(--color-teal-05);
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.42857143;
    margin: 0;
    padding: 6px 12px;
}

div.dt-container div.dt-buttons > .dt-button + .dt-button {
    margin-left: 4px;
}

div.dt-container div.dt-buttons > .dt-button:hover {
    background: none;
    background-color: var(--color-teal-07);
    border: 0;
}

div.dt-container .dt-search > label {
    display: inline-block;
    font-weight: bold;
}

div.dt-container .dt-search > input {
    background-color: white;
    display: inline-block;
    margin-left: 8px;
    width: auto;
}

div.dt-container .custom-header-content {
    padding: 0 10px;
}

div.dt-container .custom-header-content label {
    margin-bottom: 0;
}

table.dataTable > thead > tr {
    background-color: slategray;
    color: white;
}

table.dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc span.dt-column-order::after {
    color: rgb(204, 204, 204);
    font-family: var(--font-awesome);
    font-size: 1.3em;
    font-weight: bold;
    line-height: 0.05;
    opacity: 1;
}

table.dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc span.dt-column-order::before {
    content: '\f0de';
}

table.dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc span.dt-column-order::after {
    content: '\f0dd';
}

table.dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc span.dt-column-order::after {
    color: gold;
}

th[data-id="_select_item"] > .dt-column-order::before {
    content: '' !important;
}

table.dataTable tbody > tr > .datetime-cell {
    font-size: 0.85em;
    min-width: 130px;
    padding-top: 12px;
}

table.dataTable tbody > tr[data-no-edit="true"] .btn-edit,
table.dataTable tbody > tr[data-no-edit="true"] .btn-delete,
table.dataTable tbody > tr[data-no-edit="true"] .btn-undelete {
    cursor: default;
}

table.dataTable tbody > tr[data-no-edit="true"] .btn-edit:hover,
table.dataTable tbody > tr[data-no-edit="true"] .btn-delete:hover,
table.dataTable tbody > tr[data-no-edit="true"] .btn-undelete:hover {
    background-color: transparent;
}

table.dataTable tbody > tr[data-no-edit="true"] .btn-edit .fa-pen::before,
table.dataTable tbody > tr[data-no-edit="true"] .btn-delete .fa-times::before,
table.dataTable tbody > tr[data-no-edit="true"] .btn-undelete .fa-undo::before {
    color: var(--color-slate-07);
    content: '\f023';
}

/* ---------------------- */
/*         gridek         */
/* ---------------------- */

th.button-column, td.button-column {
    width: 4px;
}

td.button-column {
    text-align: center;
    cursor: pointer;
}

td.button-column:hover {
    background-color: #fffaaa;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border: 0;
}

li.button-column {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
}

table.dataTable > tbody > tr.child ul.dtr-details > li.button-column > .dtr-title {
    display: none;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:not(.button-column) > .dtr-title:after {
    content: ':';
}

li.button-column > .dtr-data > .btn-grid {
    line-height: 26px;
}

.btn-grid .fa-pen {
    color: #337ab7;
}

.btn-grid .fa-times {
    color: #dd0000;
}

.button-column.disabled .btn-grid .fa-times {
    color: #cccccc;
}

/* Howto */

#howto > .howto_subscriptions > li {
    position: relative;
}

#howto > .howto_subscriptions > li > a {
    position: absolute;
    top: -120px;
}

/* select2 */

.select2-container .select2-selection {
    border-color: var(--color-green-3);
    height: 32px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.select2-container:has(+ .input-group-append) .select2-selection {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* select2 multiple */

.select2-container .select2-selection--multiple {
    line-height: 24px;
    padding: 4px 8px;
}

.select2-container .select2-selection--multiple::after {
    content: attr(data-count-of-selected-choices-text);
    display: none;
    left: 0;
    overflow-x: hidden;
    padding: 4px 8px;
    position: absolute;
    right: 0;
    font-style: italic;
    top: 0;
    white-space: nowrap;
}

.select2-container .select2-selection--multiple.select2-selection--clearable {
    padding-right: 30px;
}

.select2-container .select2-selection--multiple.select2-selection--clearable::after {
    right: 30px;
}

.select2-container.choices-do-not-fit-in .select2-selection--multiple::after {
    display: block;
}

.hidden .select2-container .select2-selection--multiple::after {
    display: none;
}

.select2-container .select2-selection--multiple .select2-selection__clear {
    color: var(--color-danger);
    font-size: 1.5em;
    line-height: 24px;
    margin: 0 4px 0 0;
    padding: 0 4px;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    line-height: 24px;
    margin: 0;
}

.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background: none;
    border: 0;
    line-height: 24px;
    margin: 0;
}

.select2-container.choices-do-not-fit-in .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice + .select2-selection__choice {
    margin-left: 5px;
}

.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
    border: 0;
    border-radius: 4px;
    color: var(--color-grey-5);
    display: inline-block;
    font-size: 1.5em;
    line-height: 24px;
    vertical-align: middle;
}

.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:hover {
    background: none;
    filter: brightness(0.7);
}

.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__display {
    display: inline-block;
    line-height: 24px;
    vertical-align: middle;
}

.select2-container .select2-selection--multiple .select2-search {
    display: none;
}

.select2-container .select2-results__option {
    margin: 3px 3px 0 3px;
    padding: 2px 10px;
}

.select2-container .select2-results__option:last-child {
    margin-bottom: 3px;
}

.select2-container .select2-results__option--selected {
    background-color: var(--color-green-3);
}

.select2-container .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-success);
    color: white;
}

/* filter select */

.filter-multi-select > .dropdown-menu > .filter {
    display: none;
}

.filter-multi-select > .viewbar {
    padding: 5px 12px;
}

.filter-multi-select > .viewbar > .selected-items > .item {
    background-color: transparent;
    border: 1px solid var(--color-slate-03);
    color: black;
    column-gap: 0.5em;
    height: fit-content;
    line-height: 1.15em;
    margin: .125rem .4rem .125rem 0;
    padding: 3px 8px;
    vertical-align: middle;
}

.filter-multi-select > .viewbar > .selected-items > .item > button {
    color: var(--color-grey-5);
    font-size: 1.2em;
    padding-top: 2px;
}

.filter-multi-select > .dropdown-menu > .items > .dropdown-item:first-child {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 5px;
}

/* CKE editor */

#cke_message #cke_top_message {
    padding-right: 34px;
    position: relative;
}

#cke_message #cke_top_message > .cke_toolbox_collapser {
    align-items: center;
    background-color: white;
    background-image: none;
    border: 0;
    display: flex;
    font-size: 18px;
    height: 32px;
    margin: 0;
    padding: 3px 8px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 2px;
    width: 32px;
}

#cke_message #cke_top_message > .cke_toolbox_collapser::before {
    color: black;
    content: '\f0dd';
    font-family: var(--font-awesome);
    font-weight: bold;
}

#cke_message #cke_top_message > .cke_toolbox_collapser:hover::before {
    color: var(--color-teal-1);
}

#cke_message #cke_top_message > .cke_toolbox_collapser_min {
    padding-top: 11px;
}

#cke_message #cke_top_message > .cke_toolbox_collapser_min::before {
    content: '\f0de';
}

/* ---------------------- */
/*      ajax loader       */
/* ---------------------- */

[data-name="ajax-loader-container"] {
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
}

.loading-container {
    width: 49px;
    height: 49px;
    text-align: center;
    margin: 17px;
}

.loading-container.small {
    width: 28px;
    height: 28px;
    margin: 3px 5px;
}

.loading-wheel {
    width: 49px;
    height: 49px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid rgb(0,102,153);
    border-left-color: transparent;
    border-right-color: transparent;
    animation: cssload-spin 575ms infinite linear;
    -o-animation: cssload-spin 575ms infinite linear;
    -ms-animation: cssload-spin 575ms infinite linear;
    -webkit-animation: cssload-spin 575ms infinite linear;
    -moz-animation: cssload-spin 575ms infinite linear;
}

.loading-wheel.small {
    height: 28px;
    width: 28px;
}

.loading-wheel.fullscreen {
    height: 150px;
    left: calc(50% - 75px);
    position: fixed;
    top: calc(50% - 75px);
    width: 150px;
    z-index: 20000;
}

@keyframes cssload-spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
    100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
    100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
    100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

/* vegyes (feldolgozandók) */

.pagination {margin-bottom: 0;}
.data-action span {display: none;}
#main_content {
    margin-top: 30px;
}
#footer {text-align: right;}
nav ul {
    margin-left: 0;
}

/* DESKTOP */

@media only screen and (min-width: 1280px) {

    .mobile-only {
        display: none !important;
    }

}

/* MOBIL */

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

    .desktop-only {
        display: none !important;
    }

    #page, #admin_page {
        margin: 86px auto 0 auto;
    }

    #header > #header-content > #header-brand-holder {
    }

    body:not(.loggedin) #header > #header-content > #header-brand-holder {
        width: 100%;
    }

    #header > #header-content > #menu-toggle {
        display: block;
    }

    #header > #header-content > #menu-holder {
        background-color: white;
        box-shadow: 0 0 8px 2px grey;
        display: none;
        height: auto;
        width: 100%;
    }

    #header > #header-content > #menu-holder.open {
        display: block;
    }

    #header > #header-content > #menu-holder > .top-bar-left {
        float: none;
    }

    #header > #header-content > #menu-holder > .top-bar-right {
        float: none;
    }

    #header > #header-content > #menu-holder .menu {
        flex-direction: column;
    }

    #header > #header-content > #menu-holder .menu .submenu {
        left: auto;
        right: 24px;
        top: 0;
    }

    #footer {
        display: none;
    }

    .button-group a.button span {display: none;}

    /* Üzenetek modal */

    #messages-list .message-line:not(:first-of-type) {
        margin-top: 0.4em;
    }

    #messages-list .message-line-header {
        display: block;
        font-size: 0.9em;
        padding: 0.5em 0.8em;
        position: relative;
    }

    #messages-list .message-line-from-type {
        padding-left: 0.5em;
        background-color: rgb(23, 121, 186);
        position: absolute;
        top: 0.5em;
        right: 0.8em;
        z-index: 1;
    }

    #messages-list .message-line-body {
        line-height: 1.3em;
        padding: 0.5em 0.8em;
    }

}

/* ------ MAX 1024 ------ */

@media only screen and (max-width: 1024px) {
}

/* ------ MAX 599 ------ */

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

    #page, #admin_page {
        margin: 70px auto 0 auto;
        padding: 15px 0 10px 0;
    }

    #header {
        height: 70px;
    }

    #header > #header-content > #header-brand-holder {
        height: 52px;
    }

    #header > #header-content > #header-brand-holder > img {
        height: 40px;
    }

    #header > #header-content > #header-brand-holder #header-site-name {
        font-size: calc(18px + 0.5vw);
    }

    #header > #header-content > #header-brand-holder #header-site-info {
        font-size: calc(12px + 0.5vw);
    }

    #header > #header-content > #menu-toggle {
        right: -10px;
        top: 4px;
    }

    .input-group.has-button {
        flex-direction: column;
        row-gap: 8px;
    }

}

/* ------ MAX 575 (bootstrap kicsi méret) ------ */

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

    /* modal */

    .modal-dialog.modal-xl > .modal-content {
        height: calc(100vh - 1rem);
    }

}

/* ------ MAX 419 ------ */

@media (max-width: 419px) {

    #header > #header-content > #header-brand-holder {
        width: calc(100% - 48px);
    }

    body.loggedin #header > #header-content > #header-brand-holder > img {
        display: none;
    }

}

/* ------ MAX 359 ------ */

@media (max-width: 359px) {

    #header > #header-content > #header-brand-holder > img {
        display: none;
    }

}