@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
    --zenith-orange: #f6bb42;
    --base-50-light: rgba(26, 26, 26, 0.05);
    --base-00-light-primary: #FFF;
    --base-400-dark: rgba(255, 255, 255, 0.40);
    --base-600-light: rgba(26, 26, 26, 0.60);
    --base-600-dark: rgba(255, 255, 255, 0.6);
    --base-700-light-tertiary: rgba(26, 26, 26, 0.7);
    --base-700-dark-tertiary: rgba(255, 255, 255, 0.70);
    --base-800-dark: rgba(255, 255, 255, 0.80);
    --base-900-light: #1A1A1A;
    --yellow-500-light: rgba(231, 176, 8, 1);
    --red-500-light: #EF4343;
}

.impact-font{
    font-family: 'Anton', sans-serif !important;
}

.cursor-pointer {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p, a {
    color: #000000;
    /*color: #666666;*/
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -0.8px;
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="radio"]:focus,
input[type="file"]:focus,
input[type="checkbox"]:focus {
    border-color: rgb(246, 187, 66, 0.6) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgb(246, 187, 66, 0.6) !important;
    outline: 0 none !important;
}

.form-check-input:checked {
    background-color: var(--zenith-orange);
}

#bg-img {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("/assets/image/bg-pattern.png");
    width: 100%;
    height: 900px;
    z-index: -2;
    overflow: auto;
}

#bg-noise {
    position: fixed;
    background-image: url("/assets/image/noise-and-texture.png");
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#full-page-preloader {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#full-page-preloader i {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
    color: var(--zenith-orange);
    font-size: 48px;
}

.modal-loader-spin {
    color: var(--zenith-orange);
    font-size: 48px;
}

body {
    font-family: 'Inter', serif;
    color: #000000;
    /*color: #666666;*/
    font-size: 16px !important;
    line-height: 24px !important;
    background-color: #FBF8F5;
    touch-action: manipulation;
}

.p-20 {
    padding: 20px;
}

.home {
    background-image: url("/assets/image/bg-shape-circle-v-girl4.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

@media (max-width: 576px) {
    .home {
        background-image: url("/assets/image/bg-shape-circle-boy4.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
    }
}

#home-logo img {
    max-width: 220px;
}

.btn-home {
    transition: all 300ms ease;
    border: 1px solid transparent;
    user-select: none;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    text-decoration: none !important;
    background-image: url('/assets/image/button_1_tr.svg');
    background-repeat: no-repeat;
    background-color: #a1a1a1;
    background-position: center;
    background-size: cover;
    color: white !important;
    padding: 10px 20px 10px 20px !important;
    border-radius: 30px !important;
}

.btn-home:hover {
    opacity: 90%;
}

.home-a {
    text-decoration: none !important;
}

.home-img-erettsegi-book {
    max-width: 132px;
    border: 1px solid #040404;
    border-radius: 3px;
    box-shadow: 3px 3px 3px #444444;
}

#home-social {
    font-size: 30px;
}

#home-social a, footer a, .terms a, .privacy a, .checkin a {
    color: #666666;
    text-decoration: underline !important;
}

#home-social a:hover, footer a:hover, .terms a:hover, .privacy a:hover, .checkin a:hover {
    color: var(--zenith-orange);
}

#home-lang a {
    color: #666666;
    font-size: 12px;
    text-decoration: none !important;
}

#home-lang a:hover {
    color: black;
}


.box a {
    font-size: 0.8rem;
    color: grey;
}

footer {
    border: 1px solid var(--base-50-light);
    background: var(--base-400-dark);
    backdrop-filter: blur(20px);
    height: 160px;
}

.bg-white-op-80 {
    background: rgba(255, 255, 255, 0.3);
}

.rounded-l {
    border-radius: 30px !important;
}
.rounded-s {
    border-radius: 8px !important;
}

.terms a, .privacy a {
    word-wrap: break-word
}

.checkin .form-check-label {
    font-size: 11pt;
}

header nav {
/*    background-color: rgba(255, 255, 255, .7);*/
/*    border-bottom: var(--bs-modal-border-width) solid var(--bs-modal-border-color);*/
/*    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);*/
}

.section-with-top-margin {
    margin-top: 60px !important;
}

.gradient-magenta {
    background-image: linear-gradient(to bottom, #AC92EC, #967ADC);
}
.gradient-brown {
    background-image: linear-gradient(to bottom, #BAA286, #AA8E69);
}
.gradient-gray {
    background-image: linear-gradient(to bottom, #e2e5ea, #AAB2BD);
}
.gradient-blue {
    background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
}
.gradient-yellow {
    background-image: linear-gradient(to bottom, #FFCE54, #F6BB42);
}
.gradient-orange {
    background-image: linear-gradient(to bottom, #FC6E51, #E9573F);
}
.gradient-red {
    background-image: linear-gradient(to bottom, #ED5565, #DA4453);
}
.gradient-green {
    background-image: linear-gradient(to bottom, #A0D468, #8CC152);
}
.gradient-mint {
    background-image: linear-gradient(to bottom, #48CFAD, #37BC9B);
}
.gradient-teal {
    background-image: linear-gradient(to bottom, #A0CECB, #7DB1B1);
}
.gradient-pink {
    background-image: linear-gradient(to bottom, #EC87C0, #D770AD);
}

#menuModal ul a {
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
}
#menuModal ul a i {
    margin-right: 10px;
    text-align: center;
    width: 34px;
    height: 34px;
}

#menuModal ul li:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.font-oswald {
    font-family: 'Oswald', sans-serif !important;
}

.font-10 {font-size: 10px !important;}
.font-11 {font-size: 11px !important;}
.font-12 {font-size: 12px !important;}
.font-13 {font-size: 13px !important;}
.font-14 {font-size: 14px !important;}
.font-15 {font-size: 15px !important;}
.font-16 {font-size: 16px !important;}
.font-20 {font-size: 20px !important;}
.font-28 {font-size: 28px !important;}
.font-32 {font-size: 32px !important;}
.font-48 {font-size: 48px !important;}

.color-black {
    /*color: #666666 !important;*/
    color: #000000 !important;
}
.color-yellow-dark {
    color: var(--zenith-orange) !important;
}
.color-green-dark {
    color: #8CC152 !important;
}
.color-red-dark {
    color: #DA4453 !important;
}

.bg-yellow-dark {
    background-color: var(--zenith-orange) !important;
    color: #FFF !important;
}

.item-format-word {
    padding: 2px 5px;
    border-radius: 6px;
    font-weight: 800;
}

.dashboard-box {
    border: 1px dotted gray;
    padding: 15px;
    border-radius: 5px;
    background-color: white;
}

#dashboard-welcome-box-alignment {
    float: right;
}

@media (max-width: 767px) {
    #dashboard-welcome-box-alignment {
        float: unset;
        margin-right: auto;
        margin-left: auto;
    }
    #dashboard-title-text-box {
        margin-left: 1em;
    }
}

#repetition-box-section {
    background-color: black;
    min-height: 100px;
}

#articles-section {
    min-height: 100px;
}

#drills-section {
    min-height: 100px;
}

#results-section {
    min-height: 100px;
}

#calendar-section {
    min-height: 100px;
}

.d_article_new .article-subject_rank{
    font-size: 0.7rem !important;
    line-height: 0.7rem !important;
    margin: 0;
    padding: 0;
}

.new-dashboard-article-search {
    display: inline;
    margin: 3px;
    padding: 10px 10px;
    white-space: nowrap;
    font-size: 0.8rem;
    background-color: #ffffff;
    color: #666666;
    border-radius: 7px;
    border: 1px solid rgb(100, 100, 100);
}

.btn-items {
    padding: 16px;
    border-radius: 24px;
    border: 1px solid var(--base-50-light);
    background: var(--base-600-dark);
    backdrop-filter: blur(20px);
}

.btn-items:hover {
    background-color: #cacaca;
}

.btn-items-active {
    border: 1px solid #f6bb42;
}

.progress-bar2 {
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.7) !important;
    color: black;
}

.progress-left-border {
    border-radius: 0 0 16px 0;
}

.drill-local-menu {
    display: none;
    position: absolute;
    top: 13px;
    right: 30px;
    background-color: #4d4d4d;
    z-index: 1000;
    border-radius: 10px;
    opacity: 90%;
    padding: 4px;
}

.drill-local-menu div {
    margin: 0;
    border-bottom: 1px white solid;
    cursor: pointer;
}

.drill-local-menu div:hover {
    background-color: #3d3d3d;
}

.drill-local-menu div:last-child {
    border-bottom: none;
}

.color-dark-dark {
    color: #434A54 !important;
}

.item-p-headline {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 13px 0 9px 0;
}

.item-p-italic {
    font-style: italic;
    margin: 5px 0 5px 13px;
}

.item-text-italic {
    font-style: italic;
}

.item-p-ref {
    font-size: .8em;
    text-decoration: underline;
}

.item-table table {
    border-collapse: collapse;
}

.item-table td {
    border: 1px solid;
    padding: 4px;
}

.rep_box_bg_0_transp {background-color: rgba(200, 200, 200, 0.5);}
.rep_box_bg_1_transp {background-color: rgba(255, 253, 198, 0.5);}
.rep_box_bg_2_transp {background-color: rgba(255, 229, 199, 0.5);}
.rep_box_bg_3_transp {background-color: rgba(255, 194, 198, 0.5);}
.rep_box_bg_4_transp {background-color: rgba(197, 253, 211, 0.5);}

.rep_box_bg_0 {background-color: rgb(200, 200, 200);}
.rep_box_bg_1 {background-color: rgb(255, 253, 198);}
.rep_box_bg_2 {background-color: rgb(255, 229, 199);}
.rep_box_bg_3 {background-color: rgb(255, 194, 198);}
.rep_box_bg_4 {background-color: rgb(197, 253, 211);}
.rep_box_bg_5 {background-color: rgb(198, 231, 255);}

.rep_box_border_0 {border: 3px solid rgb(200, 200, 200);}
.rep_box_border_1 {border: 3px solid rgb(255, 253, 198);}
.rep_box_border_2 {border: 3px solid rgb(255, 229, 199);}
.rep_box_border_3 {border: 3px solid rgb(255, 194, 198);}
.rep_box_border_4 {border: 3px solid rgb(197, 253, 211);}
.rep_box_border_5 {border: 3px solid rgb(198, 231, 255);}

.word_rank_1 {border-bottom: 3px double rgb(120, 120, 120);}
.word_rank_2 {border-bottom: 1px solid rgb(120, 120, 120);}
.word_rank_3 {border-bottom: 1px dashed  rgb(120, 120, 120);}

.word_rank_button_1 {border-bottom: 3px double rgb(255, 255, 255);}
.word_rank_button_2 {border-bottom: 1px solid rgb(255, 255, 255);}
.word_rank_button_3 {border-bottom: 1px dashed rgb(255, 255, 255);}

.input-ext-text {
    position: relative;
    left: -5px;
    display: inline;
    text-align: center;
    padding: 7px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 14px;
}

#desktop-word-image {
    background-color: white;
}

.desktop-word-image-item {
    position: fixed;
    max-width: 379px;
    top: 70px;
}

/*
#toplist-step, #chart-steps, #calendar-container-box {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.3);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}*/

.results_details_row {
    margin-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn-chart-w {
    color: Black;
    border-radius: 5px;
    padding: 8px 9px 8px 9px;
    cursor: pointer;
    text-align: center;
    margin: 0;
    font-size: 0.9em;
    line-height: 1rem;
    border: 0;
    background-color: white;
}

.btn-chart-w-green:hover {
    background-color: #5bbda9;
}
.btn-chart-w-green-active {
    color: White;
    background-color: #00a07f;
}
.btn-chart-w-green-active:hover {
    background-color: #00a07f;
}

.btn-chart-w-blue {
    text-transform:uppercase;
    font-weight: bold;
}
.btn-chart-w-blue:hover {
    background-color: #b6cff8;
    text-transform:uppercase;
    font-weight: bold;
}
.btn-chart-w-blue-active {
    color: White;
    background-color: #8ab4f8;
    text-transform:uppercase;
    font-weight: normal;
}
.btn-chart-w-blue-active:hover {
    background-color: #8ab4f8;
    text-transform:uppercase;
    font-weight: normal;
}

.btn-item-operations {
    background-color: #cccccc;
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
}

.btn-item-operations:hover {
    background-color: #f5ba4e;
    color: white;
}

.btn-item-operations:last-child {
    margin-right: 0;
}

.btn-item-operations-active {
    background-color: #FFCE54 !important;
    color: white;
}

#item-header-landscape #item_operations_tags_recom .btn-item-operations {
    background-color: white;
    -webkit-filter: none;
    filter: none;
}

#item-header-landscape #item_operations_tags_recom .btn-item-operations:hover {
    background-color: #f5ba4e;
    -webkit-filter: none;
    filter: none;
}


#drill-books {
    margin-top: 10px;
    background-color: white;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

#drill-selected-book-bg {
    background-color: #e6e6e6;
    border-radius: 20px;
    padding: 10px;
}

.drillFilterButtons {
    cursor: pointer;
    background-color: #b3b3b3;
    padding: 10px;
    margin-right: 2px;
}

.drillFilterButtons:hover {
    background-color: #F6BB42;
}

.filter-btn-yellow {
    background-color: #FFCE54;
}

.filter-items {
    cursor: pointer;
    display: inline-block;
    color: rgba(26, 26, 26, 1);
    font-size: 12px;
    text-align: center;
    background-color: rgba(26, 26, 26, 0.1);
    padding: 2px 10px;
    border-radius: 8px;
    margin: 2px;
    border: 1px solid rgba(26, 26, 26, 0.1);
}

.filter-items:hover {
    /*background-color: #4d4d4d;*/
}

.filter-items:active  {
    background-color: #FFCE54;
}

.filter-items-active {
    background-color: #FFCE54;
}

#item-header h2 {
    font-size: 28px;
    line-height: 28px;
}


#item-header #item-header-portrait #item-header-portrait-mainpic {
    border-radius: 40px;
    /*-webkit-filter: grayscale(100%);*/
    /*filter: grayscale(100%);*/
    margin-top: 4px;
    margin-left: 4px;
}

#item-header #item-header-portrait-frame {
    position: absolute;
    top: 0;
    left: 15px;
}

#item-header-landscape {
    min-height: 400px;
    /*-webkit-filter: grayscale(100%);*/
    /*filter: grayscale(100%);*/
    position: relative;
    /*z-index: 1000;*/
}

@keyframes scale-animation {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.05, 1.05);
    }
    0% {
        transform: scale(1, 1);
    }
}

.scale-box {
    animation: scale-animation 1.5s;
    animation-iteration-count: infinite;
}

/* */

#dashboard-container {

}

#header-nav-container {
    max-width: 1680px;
    padding: 8px 24px;
    border-radius: 8px;
    border:1px solid var(--base-50-light);
    background: var(--base-600-dark);
    backdrop-filter: blur(20px);
}

.dashboard-title {
    color: var(--base-900-light);
    font-family: "Inter", serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
}

.dashboard-text {
    color: var(--base-900-light);
    font-family: "Inter", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.dashboard-contact {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--base-50-light);
    background: var(--base-00-light-primary);
}

.btn-dashboard {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    text-align: center;
    color: var(--base-700-light-tertiary);
    font-size: 16px;
    font-family: "Inter", serif;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
}
.btn-dashboard:hover {
    color: var(--base-700-light-tertiary);
    background: rgba(231, 176, 8, .5);
}
.btn-dashboard-active {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    text-align: center;
    font-size: 16px;
    font-family: "Inter", serif;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
    color: #FDFDFD;
    background: #E7B008;
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-flex;
}

.btn-dashboard-club {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    text-align: center;
    font-size: .8em;
    font-family: "Inter", serif;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
    color: #FDFDFD;
    background: rgba(0, 0, 0, 0.4);
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-flex;
}

.full-access-box {
    color: var(--base-600-light) !important;
    border-radius: 8px;
    background: var(--base-800-dark);
    min-height: 125px;
}

.dashboard-subs-btn {
    /*color: var(--base-00-light-primary);
    font-weight: 700;*/
    font-weight: 500;
    color:  black;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--base-50-light);
    background: var(--yellow-500-light);
    backdrop-filter: blur(20px);
}

.p-24 {
    padding: 24px;
}

.white-rounded-bg {
    border-radius: 18px;
    border: 1px solid var(--base-50-light);
    background: var(--base-700-dark-tertiary);  
    padding:1.3em;
    margin:0px auto 0px auto;
    width:95%;
}

.gradient1 {
    color: var(--base-900-light);
    font-size: 12px;
    line-height: 16px;
    padding: 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, #E7B008 -24.22%, #F7E5AF 2.09%, #FFF 42.59%, #F7E5AF 100.65%);
}

.gradient2 {
  color: var(--base-900-light);
  font-size: 12px;
  line-height: 16px;
  padding: 8px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(198, 231, 255, 1) 0%,
    rgba(230, 245, 255, 1) 60%,
    rgba(255, 255, 255, 1) 100%
  );
}


.btn_memorized {
    color: #FEFDFC;
    border-radius: 8px;
    background: #0F8015;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
}

.welcome-container {
    border-radius: 24px;
    border: 1px solid var(--base-50-light);
    background: var(--base-700-dark-tertiary);
}

.articles-box {
    position: relative;
    width: 277px;
    height: 385px;
}

.articles-box-bg {
    position: absolute;
    width: 277px;
    height: 369px;
    left: 0;
    top: 16px;
    background: rgba(255, 255, 255, 0.80);
    border-radius: 24px;
    backdrop-filter: blur(40px);
}

.articles-img-shadow {
    position: absolute;
    width: 245px;
    height: 245px;
    left: 16px;
    top: 32px;
    border-radius: 24px;
}

.articles-img {
    position: absolute;
    width: 245px;
    height: 245px;
    left: 16px;
    top: 0;
    box-shadow: 0 0 40px rgba(42, 125, 169, 0.40);
    border-radius: 24px;
}

.articles-img-bg {
    position: absolute;
    width: 245px;
    height: 245px;
    left: 24px;
    top: 8px;
    background: white;
    border-radius: 24px
}

.articles-box-title {
    align-self: stretch;
    color: #1A1A1A;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    word-wrap: break-word;
    text-align: left;
}

.articles-box-subject-display {
    align-self: stretch;
    color: #1A1A1A;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    word-wrap: break-word;
    text-align: left;
}

.articles-box-rank-display {
    padding: 4px;
    border-radius: 200px;
    backdrop-filter: blur(40px);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    color: var(--base-900-light, #1A1A1A);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.articles-box-btn {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    background: rgba(26, 26, 26, 0.05);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;

    text-align: right;
    color: #1A1A1A;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    word-wrap: break-word;
}

.articles-box-btn:hover {
    background: #a1a1a1;
}

.articles-box-text-box {
    position: absolute;
    width: 229px;
    height: 92px;
    left: 24px;
    top: 261px;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    display: inline-flex;
}

.btn-orange {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    text-align: center;
    font-size: 16px;
    font-family: "Inter", serif;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
    color: #FDFDFD;
    background: #E7B008;
    border: 0;
}
.btn-orange:hover {
    color: var(--base-700-light-tertiary);
    background: rgba(231, 176, 8, .5);
}

.section-divider{
    width: 100%; 
    height: 100%; 
    padding: 24px; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    display: inline-flex;
    margin-top:2em;
    margin-bottom:2em;
}
.section-divider-line{
    width: 100% ;/*229px; */
    height: 0; 
    border: 1px rgba(26, 26, 26, 0.80) solid;
}
.calendar-container {
    font-family: Arial, sans-serif;
    max-width: 400px;
    margin: auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-header h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day-name {
    font-weight: bold;
    text-align: center;
    color: #555;
}

.day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    color: black;
    background: #f0f0f0;
}

.day[data-effort="0"] {
    background: #eeeeee;
}

/* Múltbeli tanulás effort szintek */
.day[data-effort="1"][data-type="past"] {
    background: var(--green-200-light, #BBF7D0);
}

.day[data-effort="2"][data-type="past"] {
    background: var(--green-300-light, #85EFAC);
}

.day[data-effort="3"][data-type="past"] {
    background: var(--green-400-light, #4ADE80);
}

.day[data-effort="4"][data-type="past"] {
    background: var(--green-500-light, #1AC057);
}

.day[data-effort="5"][data-type="past"] {
    background: var(--green-600-light, #16A249);
}

/* Tervezett tanulás effort szintek */
.day[data-effort="1"][data-type="planned"] {
    background: var(--yellow-200-light, #FEF08B);
}

.day[data-effort="2"][data-type="planned"] {
    background: var(--yellow-300-light, #FDE047);
}

.day[data-effort="3"][data-type="planned"] {
    background: var(--yellow-400-light, #FACC14);
}

.day[data-effort="4"][data-type="planned"] {
    background: var(--yellow-500-light, #E7B008);
}

.day[data-effort="5"][data-type="planned"] {
    background: var(--yellow-600-light, #CA9604);
}


.empty {
    background: none;
}

.list-view-container {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.date-container {
    text-align: center;
    flex: 0 0 50px;
    background: #f8f8f8;
    border-radius: 5px;
    padding: 5px;
}

.date-container .day {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.date-container .month-day {
    font-size: 12px;
    color: #666;
}

.date-container .time {
    font-size: 14px;
    font-weight: bold;
    color: #999;
    margin-top: 5px;
}

.items-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    width:100%;
    max-width: 300px;
    text-align: left;
    margin-left:.7em;
}

.item-image img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.progress-container {
    text-align: center;
    padding:.3em;
    /*flex: 0 0 50px;*/
}

.progress-container .progress-pct {
    font-size: 0.8em;
    font-weight: bold;
}
.day-num{
    font-size: 1.3em;
    font-weight: bold;
    
}

.demo-tag{
/* section header */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: .8em;
gap: .8em;
color: #1a1a1a;
font-size: .8em;
line-height: .8em;

/* $base/00 [light] primary$ */
background: #FFFFFF;
/* $base/50 [light] */
border: 1px solid rgba(26, 26, 26, 0.1);
/* blur/blur-lg [light] */
backdrop-filter: blur(20px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 8px;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
margin_:0px 0px 3px 0px;
}
.demo-tag-selected{
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: .8em;
gap: .8em;
color: #1a1a1a;
font-size: .8em;
line-height: .8em;

color:white;
background: #E7B008;
/* $base/50 [light] */
border: 1px solid rgba(26, 26, 26, 0.1);
/* blur/blur-lg [light] */
backdrop-filter: blur(20px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 8px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
margin:0px 0px 3px 0px;

}

#fixed-demo-container {
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 1000;
}

.red-alert-new {
    background: var(--red-500-light);
}

.faded-gradient {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, 
                                                  rgba(0, 0, 0, 0.3) 70%, 
                                                  rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, 
                                           rgba(0, 0, 0, 0.3) 70%, 
                                           rgba(0, 0, 0, 0) 100%);
}

#theModal .modal-content {
    border-radius: 16px;
    border: 1px solid var(--zenith-orange);
}

.svg_rep_box_bg{
    
            width: 100%;
            height: 100px;
            border-collapse: collapse;
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20700%2050%22%20fill%3D%22none%22%20width%3D%22700%22%20height%3D%2250%22%3E%3Crect%20x%3D%220.701172%22%20width%3D%22699%22%20height%3D%2250%22%20rx%3D%228%22%20fill%3D%22url(%23paint0_linear_670_8485)%22%3E%3C/rect%3E%3Cline%20x1%3D%2236%22%20y1%3D%221%22%20x2%3D%2236%22%20y2%3D%2250%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.1%22%3E%3C/line%3E%3Cline%20x1%3D%2279%22%20y1%3D%221%22%20x2%3D%2279%22%20y2%3D%2250%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.1%22%3E%3C/line%3E%3Cline%20x1%3D%22156%22%20y1%3D%221%22%20x2%3D%22156%22%20y2%3D%2250%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.1%22%3E%3C/line%3E%3Cline%20x1%3D%22290%22%20y1%3D%221%22%20x2%3D%22290%22%20y2%3D%2250%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.1%22%3E%3C/line%3E%3Cline%20x1%3D%22458%22%20y1%3D%221%22%20x2%3D%22458%22%20y2%3D%2250%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.1%22%3E%3C/line%3E%3Crect%20x%3D%221.20117%22%20y%3D%220.5%22%20width%3D%22698%22%20height%3D%2249%22%20rx%3D%227.5%22%20stroke%3D%22%231A1A1A%22%20stroke-opacity%3D%220.1%22%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_670_8485%22%20x1%3D%220.701172%22%20y1%3D%2220%22%20x2%3D%22775.624%22%20y2%3D%2220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.0268008%22%20stop-color%3D%22%23D9D9D9%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.0564366%22%20stop-color%3D%22%23FFFDC6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.0957584%22%20stop-color%3D%22%23FFFDC6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.113848%22%20stop-color%3D%22%23FFE5C6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.186393%22%20stop-color%3D%22%23FFE5C6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.218259%22%20stop-color%3D%22%23FFC2C6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.305719%22%20stop-color%3D%22%23FFC2C6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.356568%22%20stop-color%3D%22%23FFC2C6%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.395307%22%20stop-color%3D%22%23C5FDD3%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.578107%22%20stop-color%3D%22%23C5FDD3%22%3E%3C/stop%3E%3Cstop%20offset%3D%220.597931%22%20stop-color%3D%22%23C6E7FF%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");            
            text-align: center;    
            background-size: 100% 100%;
    
}

   
    .new_rep_box_bg {
        border: 1px solid #1A1A1A; /* Szegély megadása */
        border-radius: 5px; /* Lekerekített sarkak */
        overflow: hidden; /* A belső elemek ne lógjanak ki */
        position: relative; /* Biztosítja, hogy a szegély helyesen jelenjen meg */
    }

    .new_rep_box_bg td {
        border: none; /* A belső cellák ne vigyenek be saját szegélyt */
        border-radius: inherit; /* Örökli a szülő border-radius értékét */
        text-align: center;
        vertical-align: middle;
    }

    .new_rep_box_bg table {
        width: 100%; /* A belső táblázat szélessége */
        border-collapse: collapse; /* Az elemek egymás melletti helyes illesztése */
    }
    
    .simple_learn_red_bg{
        border:1px solid #ffffff;
        border-radius: 5px;
        background-color: #EF4343;
        padding:3px;
        color:white;
    }
    .simple_learn_green_bg{
        border:1px solid #0F8015;
        border-radius: 5px;
        background-color: #1AC057;/*#0F8015*/
        color:white;
        padding:3px;
        
    }
    .simple_learn_black_bg{
        border:1px solid #ffffff;
        border-radius: 5px;
        background-color: #1a1a1a;
        color:white;
        padding:3px;
    }
    .simple_learn_blue_bg{
        border:1px solid #ffffff;
        border-radius: 5px;
        padding:3px;
        background-color: #E7B008;
        color:#ffffff;
    }
    .simple_learn_neutral_bg{
        border:1px solid grey;
        border-radius: 5px;
        padding:3px;
    }
    
    .green-button-new{
        box-sizing: border-box;

        justify-content: space-between;
        align-items: center;
        padding: 12px 18px;
        gap: 8px;

        font-size:1.0em;
        line-height: 1.3em;
        font-weight: bold;

        /* green/400 [light] */
        background: #4ADE80;
        /* $base/50 [light] */
        border: 1px solid rgba(26, 26, 26, 0.05);
        /* blur/blur-lg [light] */
        backdrop-filter: blur(20px);
        /* Note: backdrop-filter has minimal browser support */
        border-radius: 18px;

        /* Inside auto layout */
        flex: none;
        order: 7;
        flex-grow: 0;        
    }


    .mini-rep-box table{
        margin: auto;
        font-size: 10px;
        border: 1px solid rgba(26, 26, 26, 0.1);
        border-radius: 10px;
        border-collapse: collapse;
        overflow: hidden;
        width: 100%;
        height: 33px;
        max-width: 400px;
    }
   
    .mini-rep-box td, .mini-rep-box th {
        padding: 3px;
        border: .4px solid rgba(26, 26, 26, 0.1);
        text-align: center;        
    }
    
    .dashboard-actions-container {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 140px;
    }
    
a {
    text-decoration: none;
}   

.image-div-icon {
    cursor:pointer;
    position: absolute; 
    top:0px; 
    right: 19px; 
    z-index: 10; 
    font-size: 0.6em;
    display: flex; 
    width: 25px; 
    height: 25px; 
    padding: 8px 0px 8px 3px; 
    align-items: center; 
    gap: 8px; 
    flex-shrink: 0; 
    border-radius: 0px 0px 8px 8px; 
    background: var(--base-50-dark, rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(50px);
    opacity:.9
}

.image-div-icon-active {
    cursor:pointer;
    position: absolute; 
    top:0px; 
    right: 19px; 
    z-index: 10; 
    font-size: 0.6em;
    display: flex; 
    width: 25px; 
    height: 25px; 
    padding: 8px 0px 8px 3px; 
    align-items: center; 
    gap: 8px; 
    flex-shrink: 0; 
    border-radius: 0px 0px 8px 8px; 
    /*background: var(--base-50-dark, rgba(231, 176, 8, 0.8));*/
    backdrop-filter: blur(50px);
    opacity:.9
}

.simple-list-item-active {
    cursor:pointer;
    background: var(--base-50-dark, rgba(231, 176, 8, 0.8));
    backdrop-filter: blur(50px);
    opacity:.9
}

.simple-list-item {
    cursor:pointer;
    background: var(--base-50-dark, rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(50px);
    opacity:.9
}

.nice-green-btn{
    
    box-sizing: border-box;

    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    gap: 8px;

    font-size:1.25em;
    line-height: 1.3em;
    font-weight: bold;

    /* green/400 [light] */
    background: #4ADE80;
    /* $base/50 [light] */
    border: 1px solid rgba(26, 26, 26, 0.05);
    /* blur/blur-lg [light] */
    backdrop-filter: blur(20px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 9px;

    /* Inside auto layout */
    flex: none;
    order: 7;
    flex-grow: 0;    
}

.actions-new-box{
    width: 244px !important;
    height: 340px;
    left: 0.03px;
    top: 0px;
    margin-right: .25rem !important;
    margin-left: .25rem !important;
    border-radius: 13px !important;
    border: 1px solid #1A1A1A0D;
}

.actions-new-box-title{
    font-weight:bold;
    margin: 9px 5px 0px 9px;
    border: 1px solid #1A1A1A0D;
    border-radius:7px;
    background-color: #ffffff;
    color:black;
    padding: 5px 5px 5px 11px;
    font-size: .9em;
    text-align:left;
}


.actions-new-box-words{
    font-weight: normal;
    font-size:.7em;
}

.actions-new-box-info{
/* icon */

box-sizing: border-box;

/* Auto layout */
display: inline-block;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;

margin: 0 auto;
width: 22px;
height: 23px;
color:#ffffff;
padding:1px 1px 1px 3px;

/* $base/900 [light] $ */
background: #1A1A1A;
/* $base/50 [light] */
border: 1px solid rgba(26, 26, 26, 0.05);
/* blur/blur-lg [light] */
backdrop-filter: blur(20px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 4px;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
    float:right;
}

.actions-info-icon{
    width: 12px;
    height: 12px;
    gap: 3.94px;

}

.actions-new-box-container{
    margin:9px 5px 5px 5px;
    font-size:0.8rem;
    line-height:0.9rem;
    max-height:234px;
    overflow-x: hidden;
    overflow-y: auto;
}

.actions-new-box-message{
    font-size:.7em;
    line-height:.85em;
    margin:9px;
}

.tutorial_small{
    font-size:10px;
    line-height:12px;
}

.tutorial_big{
    font-size:18px;
    font-weight:bold;
}

.scoreboard-chart-table{
    
    caption-side: bottom;
    border-collapse: collapse;    
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    border-collapse: separate;
    border-spacing: 7px; /* Növeli az oszlopok közötti térközt */
    
}

.scoreboard-chart-table tr{
    
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    
}

.scoreboard-chart-table td {
    padding: 5px 8px; /* Növelt oldalsó térköz */
}

.scoreboard-chart-table td div {
    margin: auto;
    margin-left: 5px;
    margin-right: 5px;
}

.scoreboard-period{
    color: #1A1A1A66;
}

.results_details_box{
    text-align:center;
    min-height:124px;
    /*max-width:124pxpx;*/
    background-color:rgb(255,255,255,0.7);
    border-radius:15px;background-size: 100% ;
    background-opacity:1;
    position: relative; 
    overflow-y: hidden;
    border: 1px solid #1A1A1A0D;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.results_details_measure{
    font-size:.3em;
    font-weight: 300;
}
.scoreboard-icon-frame{
    background: #FACC14;
    border-radius:50%;
    width:1.2em;
    height:1.2em;
    text-align:center;
    line-height:.8em;
    padding:3px 0px 0px 0px;
    margin:0px 0px 3px 0px;
}

.card {
  -webkit-transform: translate3d(0, 0, 0);
  background-size: cover;
  border: 0px !important;
  max-height: 150000px;
  margin-bottom: 30px;
  background-position: center center !important;
}

.cover-slider .card {
  margin-bottom: 0px !important;
}

[data-card-height="cover"].card {
  margin-bottom: 0px !important;
}

.card-style {
  overflow: hidden;
  margin: 0px 15px 30px 15px;
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

.card-style .card-body {
  padding: 15px;
}

.card-style .card-overlay {
  border-radius: 20px;
}

.card-style-full {
  margin-left: 0px;
  margin-right: 0px;
}

.chat-window {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: #fff;
    padding: 10px !important;
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}

.chat-window-input {
    background: #fff !important;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

.theme-selector-with-image img, .theme-selector-with-image-active img {
    height: 30px;
}

/*-Pageapp Chat-*/
.speech-left {
  max-width: 320px;/*240px volt*/
  float: right;
  border-bottom-right-radius: 0px !important;
  color: #FFF;
}

.speech-right {
  max-width: 320px;/*240px volt*/
  float: left;
  border-bottom-left-radius: 0px !important;
}

.speach-image {
  padding: 0px !important;
}

.speach-image img {
  margin: 0px;
}

.speech-last {
  margin-bottom: 0px !important;
}

.speech-bubble {
  position: relative;
  border-radius: 17px;
  padding: 10px 15px;
  margin-bottom: 15px;
  line-height: 22px;
  /*font-size: 13px;*/
  background-color: #dee2e6;
  overflow: hidden;
}

.speech-bubble:after {
  content: '';
  display: block;
  clear: both;
}

#chat-container .speech-bubble {
    line-height: normal;
}

.arriveFromRight {
    animation-name: example2;
    animation-duration: 1s;
    animation-fill-mode: backwards;
    position: relative;
    opacity: 1.0;
    float: right;
}
@keyframes example2 {
    from { right: -200px; }
    to { right: 0;}
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.arriveFromLeft{
  animation-name: example;
  animation-duration: 1s;  
  /*animation-delay: 1s;*/
  animation-fill-mode: backwards; 
  position: relative;
    opacity: 1.0  ;
}
@keyframes example {
    from {left: -200px; }
    to {left: 0px;}
    0% {opacity:0;}
    100% {opacity:1;}  
}


.bg-green-dark {
  background-color: #E7B008 !important; /*#8CC152 !important;*/
  color: #FFF !important;
}

.green-button-svg{
    background-image: url('/assets/images/button_1_tr.svg') ;
    background-repeat: no-repeat;
    background-color: #E7B008; /* #a1a1a1 #5f4b88 #355C7D */
    background-position: center;
    background-size: cover; 
    color:white !important;
    padding:10px 15px 10px 15px !important;
    border-radius: 13px !important;    
}

.opacity0{
    opacity:0;
}
.opacity1{
    opacity:1;
}
.opacity1slow{
  animation-name: slowlyappear;
  animation-duration: 1s;  
  animation-delay: 1s;/**/
  animation-fill-mode: backwards; 
  position: relative;
}

@keyframes slowlyappear {
    0% {opacity:0;}
    100% {opacity:1;}  
}


.menu-box-left {
  left: 0px;
  top: 0px !important;
  width: 250px;
  height: 100%;
  bottom: 0px;
  transform: translate3d(-100%, 0, 0);
}

.menu-box-right {
  display: none;
  right: 0px;
  transform: translateX(100%);
  top: 0px !important;
  height: 100%;
  bottom: 0px;
  width: 250px;
}

.menu-box-top {
  transform: translate3d(0, -115%, 0);
  top: 0px;
  left: 0px;
  right: 0px;
  height: 300px;
}

.menu-box-bottom {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 300px;
  transform: translate3d(0, 110%, 0);
}

.menu-box-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  opacity: 0;
  pointer-events: none;
  transition: all 200ms ease;
}

 
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse-box {
  animation: pulse 2s infinite;
}
.nd-bg-red{
    background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #FFA2A2 100.46%); border: 1px solid #1A1A1A0D;
}
.nd-bg-orange{
    background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #FFE1A2 100.46%);border: 1px solid #1A1A1A0D;
}
.nd-bg-green{
    background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #B5FFA2 100.46%);border: 1px solid #1A1A1A0D;
}
.nd-bg-grey{
    background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #CDCDCD 100.46%);border: 1px solid #1A1A1A0D;
}
.nd-bg-blue{
    background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #A2FFFF 100.46%);border: 1px solid #1A1A1A0D;
}  
.nd-bg-purple {
  background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #D6A2FF 100.46%);
  border: 1px solid #1A1A1A0D;
}
.nd-bg-pink {
  background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #FFCCE1 100.46%);
  border: 1px solid #1A1A1A0D;
}
.nd-bg-yellow {
  background: linear-gradient(209.05deg, rgba(217, 217, 217, 0) 17.85%, #FFF9A2 100.46%);
  border: 1px solid #1A1A1A0D;
}

.new-actions-title{
    margin: 20px 10px 10px 20px; z-index: 2; line-height: .8em; text-align: left;
    font-size:.6em;font-weight:300;
}
.new-actions-items{
    padding: 15px 0px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height:300px;
}
.new-actions-container{
    margin: 0px 0px 10px 0px;
    display: flex;
    flex-direction: column;
}
.row.g-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.calculator-block img{
    width:180px;
}
.calculator-block {
    font-weight:normal;
    size:1em;;
}

#query_history_info, #query_history_info_not_mine, #answer_history {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 300px;
    text-align:left;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* --- Group feed panel finomhangolás --- */
@media (min-width: 992px){
  .group-form-sticky { position: sticky; top: 16px; }
}

.group-form-card{
  border: 1px solid var(--base-50-light);
  background: var(--base-00-light-primary);
  border-radius: 18px;
  backdrop-filter: blur(20px);
}

.feed-list .message-card{
  border: 1px solid var(--base-50-light);
  background: var(--base-00-light-primary);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}

.feed-list .message-card:hover{
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.feed-meta{
  color: var(--base-600-light);
  font-size: 12px;
}

.feed-actions .btn-like,
.feed-actions .btn-reply{
  border: 1px solid var(--base-50-light);
  background: rgba(255,255,255,.6);
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
}

.feed-actions .btn-like.active{
  background: #FFF3D1; /* finom kiemelés a sárga világosával */
  border-color: var(--yellow-500-light);
}

@media (min-width: 992px){
  .group-form-sticky { position: sticky; top: 16px; }
}

/* Lista kártya kozmetika – a te tokenjeiddel */
.groups-grid .group-card{
  border: 1px solid var(--base-50-light);
  background: var(--base-00-light-primary);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}
.groups-grid .group-card:hover{
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.groups-grid .group-title{
  font-weight: 700;
  margin-bottom: 4px;
}
.groups-grid .group-sub{
  color: var(--base-600-light);
  font-size: 12px;
  margin-bottom: 8px;
}
.groups-grid .group-actions .btn{
  border: 1px solid var(--base-50-light);
  background: rgba(255,255,255,.6);
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
  margin-right: 6px;
}
/* Előző konténer-görgetés felülírása: ne a teljes doboz görögjön */
#messages-section #group-feed-container,
#community-section #community-container {
  max-height: none !important;
  overflow: visible !important;
}

/* Csak a feed LISTA görögjön – üzenőfal (dashboard) */
#messages-section #group-feed-list {
  max-height: 420px;                 /* igény szerint: 360–480px */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* simább mobil scroll */
  padding-right: 6px;                /* scrollbar helye */
}

/* Csak a csoportok LISTA görögjön – közösség (dashboard) */
#community-section #groups-list {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

/* Opcionális: bal oldali űrlapkártya maradjon a helyén (nem görget, "tapad") */
#messages-section .group-form-sticky,
#community-section .group-form-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;     /* hogy ne üssön át alatta a feed */
  border-radius: 8px;
}

/* Mobilon lehet kényelmesebb, ha nem vágjuk le a feedet */
@media (max-width: 768px) {
  #messages-section #group-feed-list,
  #community-section #groups-list {
    max-height: none;
  }
}

#act-feed {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
}