/* General */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* backgrounds */
    --color_bg_page: #ffffff;
    --color_bg_header: #ffffff;
    --color_bg_card: #ffffff;
    --color_bg_muted: rgb(240, 240, 240);
    --color_bg_muted_alt: rgb(238, 238, 238);
    --color_bg_subtle: #f2f2f2;
    --color_bg_footer: #0d0d0d;
    --color_bg_alert_box: #f0f0f0;
    --color_bg_achievements: #f2faef;
    --color_bg_achv_nav: #dffad5;
    --color_bg_achv_nav_hover: #cadfc2;
    --color_text_on_achievements: #1a1a1a;
    --color_chip_bg_achievements: rgba(0, 0, 0, 0.07);
    --color_footer_heading: #d3d3d3;
    --color_footer_body: #a7a7a7;
    --color_footer_link: #a8a8a8;
    --color_footer_copy: #888888;

    --color_bg_admin_page: #f5f5f5;
    --color_dark_surface: #1a1a1a;
    --color_dark_surface_border: #2a2a2a;
    --color_dark_surface_text_muted: #555;
    --color_dark_surface_text_faint: #888;
    --color_dark_surface_text_hover: #cccccc;
    --color_badge_active_bg: #EAF3DE;
    --color_badge_inactive_bg: #e4e4e4;
    --color_badge_deleted_bg: #fdecea;
    --color_badge_active_text: #1a7d07;
    --color_badge_inactive_text: #6e6e6e;
    --color_badge_deleted_text: #a32d2d;

    /* text */
    --color_text_primary: #1a1a1a;
    --color_text_secondary: rgb(100, 100, 100);
    --color_text_muted: #555;
    --color_text_faint: #888;
    --color_text_faint_alt: #666;
    --color_text_footer_copy: #444;
    --color_text_strong: rgb(30, 30, 30);
    --color_text_error: #dc3545;

    /* borders */
    --color_border_light: rgb(197, 197, 197);
    --color_border_subtle: rgb(235, 235, 235);
    --color_border_faint: rgb(245, 245, 245);
    --color_border_table: rgb(200, 200, 200);
    --color_border_input: rgb(204, 204, 204);
    --color_border_stat: #1f4010;
    --color_border_stat_empty: #2a2a2a;
    --color_border_footer: #2a2a2a;
    --color_border_emphasis: #000000;

    /* brand / accent (probably stay the same in dark mode, but variable anyway) */
    --color_brand: #1f9108;
    --color_brand_hover: #1a7d07;
    --color_accent_green: #42c920;
    --color_error: #dc3545;
    --color_error_login: #fff0f0;
    --color_dot_off: #737c70;
}

html[data-theme="dark"] {
    --color_bg_page: #121212;
    --color_bg_header: #1a1a1a;
    --color_bg_card: #1e1e1e;
    --color_bg_muted: #2a2a2a;
    --color_bg_muted_alt: #262626;
    --color_bg_subtle: #232323;
    --color_bg_alert_box: #262626;
    --color_bg_footer: #000000;

    --color_text_primary: #f0f0f0;
    --color_text_secondary: rgb(180, 180, 180);
    --color_text_muted: #aaa;
    --color_text_faint: #999;
    --color_text_faint_alt: #b0b0b0;
    --color_text_footer_copy: #c0c0c0;
    --color_text_strong: rgb(230, 230, 230);
    --color_text_error: #f0f0f0;

    --color_border_light: rgb(60, 60, 60);
    --color_border_subtle: rgb(50, 50, 50);
    --color_border_faint: rgb(45, 45, 45);
    --color_border_table: rgb(70, 70, 70);
    --color_border_input: rgb(80, 80, 80);
    --color_border_footer: #333;
    --color_bg_achievements: #16241a;
    --color_bg_achv_nav: #1f3a24;
    --color_bg_achv_nav_hover: #294d31;
    --color_text_on_achievements: #e8f5e0;
    --color_chip_bg_achievements: rgba(255, 255, 255, 0.08);

    --color_error_login: #d11d2f;

    --color_bg_admin_page: #101010;
    --color_badge_active_bg: #1f3a24;
    --color_badge_inactive_bg: #333333;
    --color_badge_deleted_bg: #3a1f1f;
    --color_badge_active_text: #7ed957;
    --color_badge_inactive_text: #b0b0b0;
    --color_badge_deleted_text: #ff8a8a;


}
* {
  -webkit-tap-highlight-color: transparent;
}

/* Chrome/Edge/Safari */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--color_bg_page);
}
::-webkit-scrollbar-thumb {
    background: var(--color_border_input);
    border-radius: 8px;
    border: 3px solid var(--color_bg_page);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color_text_faint);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-attachment: fixed;
    scrollbar-color: var(--color_border_input) var(--color_bg_page);
    scrollbar-width: thin;
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--color_bg_page);
}
input {
  outline: none; 
  border: none;
  box-sizing: border-box;
}
select {
    cursor: pointer;
}
select:focus {
  outline: none;
}
button{
    color: inherit;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid var(--color_border_table);
    padding: 8px 12px;
    text-align: left;
}
th {
    background-color: var(--color_bg_muted);
    font-weight: 500;
}
td {
    max-width: 150px;
    word-wrap: break-word;
}
tr:nth-child(even) {
    background-color: var(--color_bg_muted_alt);
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* Header */
/* Header */
#main_header {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    background: var(--color_bg_header);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.2);
    position: relative;
    z-index: 100;
}
#header_inner {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    padding-right: 22px;
    gap: 16px;
}
#header_logo_block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
#header_logo {
    height: 60px;
    width: auto;
}
.header_logo_sep {
    width: 2px;
    height: 43px;
    background: var(--color_border_light);
}
.header_logo_sep:last-of-type {
    height: 28px;
}
#header_school_name {
    font-size: 18px;
    color: var(--color_text_muted);
    font-weight: 500;
    line-height: 1.3;
    max-width: 170px;
}
#header_nav {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 2px;
    margin-left: auto;
}
.header_nav_link {
    font-size: 18px;
    color: var(--color_text_muted);
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}
.header_nav_link:hover {
    color: var(--color_brand);
    border-bottom-color: var(--color_brand);
}
.header_nav_link:last-of-type{ /* exception for admin_login link */
    border: 0;
}
#header_nav_domov {
    font-size: 18px;
    color: #ffffff;
    background: #1f9108;
    padding: 7px 16px;
    border-radius: 6px;
    margin-left: 8px;
    transition: background 0.2s;
    text-decoration: none;
}
#header_nav_domov:hover {
    background: #1a7d07;
}

/* Hamburger */
#header_hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: auto;
    padding: 4px;
}
#header_hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color_text_muted);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
#header_hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#header_hamburger.open span:nth-child(2) {
    opacity: 0;
}
#header_hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */
#header_mobile_menu {
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--color_border_subtle);
}
#header_mobile_menu.open {
    display: flex;
}
.header_mobile_link {
    font-size: 14px;
    color: var(--color_text_footer_copy);
    padding: 14px 32px;
    border-bottom: 1px solid var(--color_border_faint);
    text-decoration: none;
}
.header_mobile_link:hover {
    color: var(--color_brand);
}
#header_mobile_domov {
    color: var(--color_brand);
}




/* Index exclusive */
#page_wrapper{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#front_page_wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    min-width: 800px;
    height: 500px;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
    isolation: isolate;
}
#front_page_slides {
    position: absolute;
    inset: 0;
}
.front_page_slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.front_page_slide.active {
    opacity: 1;
}
#front_page_grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
}
#front_page_text_wrapper {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
    color: rgb(255, 255, 255);
}
#front_page_accent_bar {
    width: 40px;
    height: 3px;
    background: var(--color_accent_green);
    border-radius: 2px;
    margin-bottom: 16px;
}
#front_page_heading {
    font-size: 90px;
    line-height: 1;
    text-shadow: none;
}
#front_page_subheading {
    font-size: 36px;
    margin-top: 8px;
    opacity: 0.88;
    text-shadow: none;
}
#front_page_dots {
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 50px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.front_page_dot {
    height: 7px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.35);
    transition: width 0.3s, background 0.3s;
    width: 7px;
    padding: 0;
}
.front_page_dot.on {
    width: 20px;
    background: var(--color_accent_green);
}
.front_page_arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.2s;
    user-select: none;
}
.front_page_arrow:hover {
    background: rgba(255, 255, 255, 0.28);
}
.front_page_arrow.left { left: 16px; }
.front_page_arrow.right { right: 16px; }

#register_info_button {
    color: #ffffff;
    position: relative;
    bottom: 40px;
    font-size: 16px;
    border-radius: 40px;
    border: 0;
    padding: 10px 20px;
    box-shadow: 0 0 20px 1px rgba(0,0,0,0.2);
    cursor: pointer;
    width: fit-content;
}
#register_info_button:active {
    transform: scale(0.93);
}
.course_accent_bar {
    width: 28px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 10px;
}
#course_info_p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 10%;
}

#course_cards_wrapper {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-radius: 16px;
    padding: 20px;
}
#courses_section_header {
    text-align: center;
    width: 100%;
    max-width: 1400px;
    padding: 40px 20px 10px 20px;
}
#courses_section_label {
    color: var(--color_brand);
}
#courses_section_sub {
    font-size: 14px;
    color: var(--color_text_secondary);
    margin-top: 0px;
}
#course_section_com{
    display: none;
    font-size: 12px;
    color: var(--color_text_secondary);
    margin-top: 0px;
}


#course_cards_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 300px);
    grid-auto-rows: auto;
    gap: 36px;
    padding: 20px 0;
    justify-content: center; 
}

@media (max-width: 950px) {
    #course_cards_grid {
        grid-template-columns: repeat(2, 300px);
    }
}

@media (max-width: 650px) {
    #course_cards_grid {
        grid-template-columns: minmax(0, 300px);
        padding: 20px 0px;
    }
}
.course_card_outer {
    perspective: 1000px;
    width: 300px;
    height: 300px;
}
.course_card_inner {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: sca 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s ease-in-out;
    border-radius: 14px;
    z-index: 1;
}
.course_card_outer.flipped .course_card_inner {
    transform: rotateY(180deg);
}
.course_card_face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.4s ease;

}
.course_card_back_face {
    transform: rotateY(180deg);
    color: white;
}
.course_card_top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    flex-shrink: 0;
}
.course_card_top_icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.22);
    color: white;
}
.course_card_top_name {
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin: 0;
}
.course_card_top_teacher {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.course_card_img_area {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.course_card_center_icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: rgba(255,255,255,0.7);
    z-index: 2;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateX(0deg);
}
.course_card_big_icon {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 110px;
    color: rgba(255,255,255,0.1);
    line-height: 1;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateX(0deg);
}
.course_card_bottom {
    display: flex;
    flex-shrink: 0;
    background: rgba(0,0,0,0.18);
}
.course_card_stat {
    flex: 1;
    padding: 10px 14px;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.course_card_stat:last-child {
    border-right: none;
}
.course_card_stat_label {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.course_card_stat_value {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-top: 2px;
}
.course_card_tap_hint {
    display: none;
    text-align: center;
    padding: 6px;
    color: white;
    background: rgba(0,0,0,0.35);
    flex-shrink: 0;
}
.course_card_tap_button{
    text-align: center;
    padding: 6px 12px;
    color: white;
    background: rgba(0, 0, 0, 0.274);
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
}
.course_card_hidden_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 16px;
    pointer-events: none;
}
.course_card_hidden_textbox {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 14px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 70%;
}

.course_card_hidden_text {
    font-size: 17px;
    color: #fff;
    text-align: center;
}

.course_card_hidden_sub {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.course_card_back_desc {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
    align-content: center;
    text-shadow: 0 0 10px rgba(0, 0, 0,0.2)
}
.course_card_back_bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    background: rgba(0,0,0,0.08);
}
.course_card_back_stat {
    flex: 1;
    padding: 10px 14px;
    border-right: 1px solid rgba(0,0,0,0.08);
}
.course_card_back_stat:last-child {
    border-right: none;
}
.course_card_back_stat_label {
    font-size: 10px;
    color: rgba(0,0,0,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.course_card_back_stat_value {
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
}
.course_card_back_actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    flex-shrink: 0;
}
.course_card_reg_btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.course_card_back_btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    color: rgba(0,0,0,0.55);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.course_card_back_btn:hover {
    background: rgba(0,0,0,0.08);
}
@keyframes card_icon_float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-16px); }
}

@keyframes card_pattern_breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.7; }
}

.course_card_outer:not(.hidden_card):hover .course_card_center_icon,
.course_card_outer:not(.hidden_card):hover .course_card_big_icon {
    animation: card_icon_float 2.5s ease-in-out infinite;
}
.course_card_outer:not(.hidden_card):hover .course_card_img_area > div,
.course_card_outer:not(.hidden_card):hover .course_card_back_pattern {
    animation: card_pattern_breathe 3s ease-in-out infinite;
}
.course_card_outer:not(.hidden_card):hover .course_card_face:not(.course_card_back_face) {
    cursor: pointer;
    background-color: hsl(from var(--hover_color) h s 20%) !important;
}

.course_card_outer.hidden_card:hover .course_card_face:not(.course_card_back_face) {
    background-color: hsl(from var(--hover_color) h s 10%) !important;
}

#about_wrapper {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0px 40px;
    margin-top: 0px;
}
#about_label {
    color: var(--color_brand);
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 0;
}
#about_accent_bar {
    width: 38px;
    height: 4px;
    background: var(--color_brand);
    border-radius: 2px;
    z-index: 0;
}
#about_top {
    display: flex;
    gap: 2rem;
    align-items: stretch;
}
#about_img_main {
    flex: 1;
    max-width: 680px;
    min-width: 280px;
    position: relative;
}
#about_img_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,40,10,0.55) 0%, transparent 55%);
    border-radius: 12px;
    pointer-events: none;
}
.about_text {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
#about_text_pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.about_text > *:not(#about_text_pattern) {
    position: relative;
    z-index: 1;
}
#about_title {
    font-size: 26px;
    color: var(--color_text_primary);
    line-height: 1.3;
}
.about_p {
    font-size: 14px;
    color: var(--color_text_secondary);
    line-height: 1.8;
}

/* tiles */
#about_tiles {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.about_tile {
    flex: 1;
    min-width: 160px;
    border-radius: 12px;
    border: 1px solid var(--color_border_light);
    background-color: var(--color_bg_subtle);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
.about_tile_pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.about_tile_content {
    position: relative;
    z-index: 1;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.about_tile_icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.about_tile_title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color_text_strong);
}
.about_tile_p {
    font-size: 13px;
    color: var(--color_text_secondary);
    line-height: 1.6;
}

/* photos */
#about_photos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
#about_img_secondary {
    flex: 2;
    min-width: 200px;
    min-height: 180px;
}
#about_img_tertiary {
    flex: 1;
    min-width: 140px;
    min-height: 180px;
}
.about_img_placeholder {
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color_bg_muted);
    border: 1px solid var(--color_border_light);
    max-height: 400px;
}
.about_img_placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* stats */
#about_stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.about_stat {
    flex: 1;
    min-width: 100px;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    background: #0d1a0d;
    border: 1px solid #1f4010;
    position: relative;
    overflow: hidden;
}
.about_stat_glow {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: -20px;
    right: -20px;
    opacity: 0.18;
    pointer-events: none;
}
.about_stat_value {
    font-size: 26px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.about_stat_label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.about_stat_empty {
    background: #141414;
    border-color: #2a2a2a;
    border-style: dashed;
    opacity: 0.4;
}
.about_stat_empty .about_stat_value {
    font-size: 16px;
    color: #ffffff4d;
}

/* breathing animations */
@keyframes about_breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes about_breathe_slow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.6; }
}
.about_breathe {
    transform-origin: center;
    transform-box: fill-box;
    animation: about_breathe 3s ease-in-out infinite;
}
.about_breathe_slow {
    transform-origin: center;
    transform-box: fill-box;
    animation: about_breathe_slow 4s ease-in-out infinite;
}

/* reveal */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

#achievements_section_header {
    width: 100%;
    max-width: 1400px;
    margin-bottom: 30px;
    text-align: center;
}
#achievements_label {
    color: var(--color_brand);
    margin-top: 0px;
}
#achievements_sub {
    font-size: 14px;
    color: var(--color_text_secondary);
    margin-top: 6px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
#achievements_wrapper {
    width: 100%;
    max-width: 900px;
    background: var(--color_bg_achievements);
    border-radius: 16px;
    padding: 40px 48px 32px;
    margin-bottom: 60px;
    box-sizing: border-box;
}
#achievements_list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 100px;
    transition: opacity 0.25s ease;
}
#achievements_list:first-child{
    border-radius: 20px 20px 0 0;
}
.achievement_row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 10px;
    transition: background 0.2s ease-out;
}
.achievement_row:hover{
    background-color: rgba(var(--ach-hover), 0.1);
    border-left: solid 3px black;
}
.achievement_row:hover .achievement_row_icon{
    animation: achievement_icon_pulsing 2.5s ease-in-out infinite;
}
@keyframes achievement_icon_pulsing{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }

}
.achievement_row_icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}
.achievement_row_text {
    flex: 1;
}
.achievement_row_name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color_text_on_achievements);
    margin: 0 0 3px 0;
}
.achievement_row_desc {
    font-size: 12px;
    color: var(--color_text_on_achievements);
    line-height: 1.5;
    margin: 0;
}
.achievement_row_date {
    font-size: 12px;
    color: var(--color_text_on_achievements);
    background: var(--color_chip_bg_achievements);
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    text-align: right;
    min-width: fit-content;
    align-self: center;
}
.ach_icon_green { background: rgba(66,201,32,0.3); color: #42c920; }
.ach_icon_blue  { background: rgba(55,138,221,0.3); color: #378ADD; }
.ach_icon_pink  { background: rgba(212,83,126,0.3); color: #D4537E; }
.ach_icon_amber { background: rgba(239,159,39,0.3); color: #EF9F27; }
#achievements_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
#achievements_prev, #achievements_next {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--color_text_on_achievements);
    background: var(--color_bg_achv_nav);
    transition: background 0.2s;
}
#achievements_prev:hover, #achievements_next:hover {
    background: var(--color_bg_achv_nav_hover);
}
#achievements_dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.achievement_dot {
    height: 6px;
    width: 6px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    background: var(--color_dot_off);
    transition: width 0.3s, background 0.3s;
    padding: 0;
}
.achievement_dot.on {
    width: 18px;
    background: var(--color_accent_green);
}
/* Footer */
#main_footer {
    width: 100%;
    background-color: var(--color_bg_footer);
    margin-top: 40px;
    flex: 1;
    overflow-y: hidden;
}
#footer_top_bar {
    width: 100%;
    height: 5px;
    margin-top: 10px;
    background-color: var(--color_brand);
}
#footer_inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 60px 32px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: flex-start;
}
#footer_brand {
    flex: 2;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#footer_logo {
    width: 35px;
    opacity: 0.8;
    
}
#footer_brand_desc {
    font-size: 13px;
    color: var(--color_footer_body);
    line-height: 1.7;
    max-width: 240px;
    margin: 0;
}
.footer_col {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer_col_title {
    font-size: 11px;
    color: var(--color_footer_heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px 0;
}
.footer_link {
    font-size: 13px;
    color: var(--color_footer_link);
    text-decoration: none;
}
.footer_link:hover {
    color: var(--color_accent_green);
}
#footer_bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 60px;
    border-top: 1px solid var(--color_border_footer);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
#footer_copy {
    font-size: 12px;
    color: var(--color_footer_copy);
    margin: 0;
}
#footer_bottom_links {
    display: flex;
    gap: 16px;
    align-items: center;
}
.footer_bottom_link {
    font-size: 12px;
    color: var(--color_footer_link);
    text-decoration: none;
}
.footer_bottom_link:hover {
    color: var(--color_accent_green);
}

#theme_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color_border_light);
    color: var(--color_text_muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#theme_toggle:hover {
    border-color: var(--color_brand);
    color: var(--color_brand);
}

#register_modal {
    z-index: 5;
    visibility: hidden;
}
#page_wrapper_register {
    width: 100vw;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
#form_box {
    width: 90%;
    min-width: 300px;
    max-width: 420px;
    border-radius: 12px;
    background-color: var(--color_bg_card);
    overflow: hidden;
}
#form_header {
    background-color: rgb(6, 115, 189);
    padding: 1.2rem 1.5rem;
}
#form_title {
    font-size: 20px;
    font-weight: 500;
    color: white;
    margin: 0;
}
#form_subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 0 0;
}
#form_box form {
    padding: 1.2rem 1.5rem;
}
.form_field {
    margin-bottom: 10px;
}
.form_field label {
    display: block;
    font-size: 12px;
    color: var(--color_text_secondary);
    margin-bottom: 4px;
}
.form_field input,
.form_field select {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--color_border_input);
    padding: 0 10px;
    font-size: 14px;
    background: var(--color_bg_card);
    color: var(--color_text_strong);
    box-sizing: border-box;
}
.form_field input:focus,
.form_field select:focus {
    outline: none;
    border-color: rgb(6, 115, 189);
}
#form_name_box {
    display: flex;
    gap: 10px;
}
#form_name_box .form_field {
    flex: 1;
}
#email_error{
    color: var(--color_error);
    display: none;
}
.shake_error {
  color: var(--color_error);
  font-size: 14px;
  margin-top: 5px;
  display: block;
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
#form_buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1rem;
}
#form_buttons button {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--color_border_input);
    background: transparent;
    color: var(--color_text_secondary);
    font-size: 13px;
    cursor: pointer;
}
#form_buttons button:hover {
    background: var(--color_bg_muted);
}
#form_submit {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    background: rgb(6, 115, 189);
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: auto;
    width: auto;
}
#form_submit:hover {
    background: rgb(5, 100, 165);
}
#form_submit:active {
    transform: scale(0.95);
}
#email_notification_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform 0.6s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color_bg_card);
    color: var(--color_text_primary);
    overflow: hidden;
    padding: 1rem;
    gap: 0.5rem;
    box-sizing: border-box;
}
#email_notif_icon_ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    align-self: center;
    flex-shrink: 0;
}
#email_notif_icon {
    font-size: 2em;
    color: white;
}

#email_notification_title {
    font-size: 1.6em;
    font-weight: bold;
}

#email_notif_alert_box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color_bg_alert_box);
}
#email_notif_alert_icon {
    font-size: 1.1em;
    margin-top: 3px;
    flex-shrink: 0;
}
#email_notif_alert_text_box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#email_notif_alert_label {
    font-size: 1em;
    font-weight: bold;
}
#email_notification_subtitle {
    font-size: 0.9em;
    color: var(--color_text_footer_copy);
}
#email_notif_address {
    font-weight: bold;
}

#email_notif_close_btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1em;
    cursor: pointer;
    margin-top: 0.25rem;
}
#email_notif_resend_btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color_border_input);
    background: transparent;
    color: var(--color_text_faint_alt);
    font-size: 0.85em;
    cursor: pointer;
}
.email_notificaton_hide{
    transform: translateY(-100%);
}


/* Admin_login exclusive */
#admin_bod {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#admin_page_wrapper {
    width: 100vw;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color_bg_page);
}
#login_header {
    width: 100%;
    background: var(--color_bg_card);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 10;
}

#login_header_inner {
    max-width: 1700px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 16px;
}

#login_header_back {
    margin-right: auto;
    font-size: 17px;
    color: var(--color_brand);
    text-decoration: none;
}

#login_header_back:hover {
    text-decoration: underline;
}

#admin_form_box {
    width: 90%;
    min-width: 300px;
    max-width: 380px;
    border-radius: 12px;
    background: var(--color_bg_achievements);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
#admin_form_header {
    background: var(--color_bg_footer);
    padding: 1.4rem 1.6rem;
    display: flex;
    align-items: center; 
    gap: 12px;
    border-bottom: 3px solid var(--color_brand);
}
#admin_form_header_logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    flex-shrink: 0;
}
#admin_form_title {
    font-size: 15px;
    color: #ffffff;
    margin: 0;
}
#admin_form_subtitle {
    font-size: 12px;
    color: var(--color_text_faint);
    margin: 2px 0 0 0;
}
#admin_form_body {
    padding: 1.6rem;
}
#admin_form {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#admin_form_field {
    margin-bottom: 1rem;
}
#admin_form_field label {
    display: block;
    font-size: 12px;
    color: var(--color_text_strong);
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.admin_login_input {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--color_border_input);
    padding: 0 12px;
    font-size: 14px;
    background: var(--color_bg_card);
    color: var(--color_text_strong);
    transition: border-color 0.2s;
}   
.admin_login_input:focus {
    outline: none;
    border-color: rgb(6, 115, 189);
}
#admin_submit {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: none;
    background: #1f9108;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
#admin_submit:hover {
    background: #1a7d07;
}
#admin_submit:active {
    transform: scale(0.98);
}
#wrong_password_box {
    margin-bottom: 0;
}
#wrong_password {
    font-size: 13px;
    color: var(--color_text_error);
    background: var(--color_error_login);
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

/* Admin exclusive */
.hide_layer_control {
    transform: translateX(101%);
}
 
#admin_body {
    display: none;
    overflow: hidden;
}
 
#admin_layout {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}
 
/* Sidebar */
#head_bar {
    width: 200px;
    min-width: 200px;
    background: var(--color_dark_surface);
    border-right: 3px solid var(--color_brand);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    flex-shrink: 0;
}
#sidebar_logo {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color_dark_surface_border);
    display: flex;
    align-items: center;
    gap: 10px;
}
#sidebar_logo_img {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    flex-shrink: 0;
}
#sidebar_logo_text_box {
    display: flex;
    flex-direction: column;
}
#sidebar_logo_title {
    font-size: 13px;
    color: #ffffff;
    line-height: 1.2;
}
#sidebar_logo_sub {
    font-size: 11px;
    color: var(--color_dark_surface_text_muted);
}
#sidebar_nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
}
.sidebar_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--color_dark_surface_text_faint);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    width: 100%;
}
.sidebar_btn:hover {
    background: #242424;
    color: var(--color_dark_surface_text_hover);
}
.sidebar_btn.active {
    color: #ffffff;
    background: #222222;
    border-left-color: var(--color_brand);
}
.sidebar_btn i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}
#sidebar_domov_btn {
    margin-top: auto;
    border-top: 1px solid var(--color_dark_surface_border);
    color: var(--color_dark_surface_text_muted);
    font-size: 12px;
}
#sidebar_domov_btn:hover {
    color: var(--color_dark_surface_text_faint);
    background: transparent;
}
.selected_tab{
    background-color: #000000;
}
 
#sidebar_theme_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 16px;
    padding: 8px 0;
    border-radius: 6px;
    border: 1px solid var(--color_dark_surface_border);
    background: transparent;
    color: var(--color_dark_surface_text_faint);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
#sidebar_theme_toggle:hover {
    border-color: var(--color_brand);
    color: var(--color_brand);
}
 
#admin_wrapper {
    flex: 1;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    background: var(--color_bg_admin_page);
}
#registers_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    position: absolute;
    transition: transform 1s ease-in-out;
    background: var(--color_bg_admin_page);
}
#filter_box {
    width: 100%;
    height: 56px;
    background: var(--color_bg_card);
    border-bottom: 2px solid var(--color_border_subtle);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    flex-shrink: 0;
    
}
#filter_box .fa-filter {
    color: var(--color_brand);
    font-size: 15px;
}
#filter_box > .fa-filter {
    padding-right: 10px;
    border-right: 1px solid var(--color_border_light);
    margin-right: 2px;
}
.filter_select_boxes {
    height: 100%;
    display: none;
    align-items: center;
}
#filter_type_box {
    display: flex;
}
#filter_type_box select,
#filter_kurz_box select {
    height: 32px;
    border: 1px solid var(--color_border_light);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    background: var(--color_bg_muted);
    color: var(--color_text_strong);
    outline: none;
    cursor: pointer;
}
#filter_type_box select:focus,
#filter_kurz_box select:focus {
    border-color: var(--color_brand);
}
#filter_date_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 100%;
}
.filter_date_select_boxes {
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter_date_select_boxes span {
    font-size: 12px;
    color: var(--color_text_faint);
}
#filter_date_box input[type="date"] {
    height: 32px;
    border: 1px solid var(--color_border_light);
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    background: var(--color_bg_muted);
    color: var(--color_text_strong);
    outline: none;
    cursor: pointer;
}
#filter_date_box input[type="date"]:focus {
    border-color: var(--color_brand);
}
.search_bar_register {
    display: none;
    height: 32px;
    border: 1px solid var(--color_border_light);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
    background: var(--color_bg_muted);
    color: var(--color_text_strong);
    outline: none;
    min-width: 200px;
    max-width: 400px;
}
.search_bar_register:focus {
    border-color: var(--color_brand);
}
.filter_button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--color_border_light);
    background: var(--color_bg_muted);
    color: var(--color_text_muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.filter_button:hover {
    background: var(--color_border_light);
}
#download {
    background: var(--color_brand);
    color: white;
    border-color: var(--color_brand);
}
#download:hover {
    background: var(--color_brand_hover);
}
#delete_all{
    color: white;
    background-color: #aa0f0f;
    display: none;
}
#delete_all:hover{
    background-color: #800909;
}
#register_del_notification{
    height: 32px;
    padding: 0 10px;
    text-align: center;
    display: none;
    flex-direction: column;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #ff6666;
    background-color:#e45160;
    color: #ffffff;
    font-size: 14px;
    transition: background 0.15s;
    
}
.notification_show{
    animation: notification_pop 1.5s infinite linear;
}
 
@keyframes notification_pop{
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}
#registers_info_box {
    flex: 1;
    overflow: auto;
    padding: 16px;
}
#registers_table {
    width: 100%;
    background: var(--color_bg_card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    font-size: 13px;
    border-collapse: collapse;
}
#registers_table thead th {
    background: var(--color_dark_surface);
    color: var(--color_dark_surface_text_faint);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    text-align: left;
    border: none;
}
#registers_table thead th.header_selectable:hover {
    color: #ffffff;
    cursor: pointer;
    background: #333333;
}
#registers_table tbody td {
    padding: 9px 12px;
    color: var(--color_text_strong);
    border-bottom: 1px solid var(--color_border_faint);
    border-right: none;
    border-left: none;
    border-top: none;
    max-width: 150px;
    word-wrap: break-word;
}
#registers_table tbody tr:last-child td {
    border-bottom: none;
}
#registers_table tbody tr:hover td {
    background: var(--color_bg_muted_alt);
}
#delete_button {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgb(240, 200, 200);
    background: var(--color_error_login);
    color: var(--color_error);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
#delete_button:hover {
    background: var(--color_error);
    color: white;
}
#delete_button:active {
    transform: scale(0.92);
}

#delete_button i{
    color: var(--color_text_primary);
}
 
/* Kurzy + Achievements shared panel styles */
#kurzy_box {
    width: 100%;
    height: 100dvh;
    position: absolute;
    transition: transform 1s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color_bg_admin_page);
}
#achievements_box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100dvh;
    position: absolute;
    transition: transform 1s ease-in-out;
    overflow: hidden;
    background: var(--color_bg_admin_page);
}
.content_header {
    width: 100%;
    height: 56px;
    background: var(--color_bg_card);
    color: white;
    border-bottom: 1px solid var(--color_border_subtle);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    overflow-x: auto;
    flex-shrink: 0;
}
#kurzy_header button {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.content_header button:hover {
    opacity: 0.85;
}
.header_new {
    background: #1ea803;
    color: #ffffff;
}
.header_creating {
    background: rgb(180, 0, 180);
    color: #ffffff;
    display: none;
}
.content_wrapper {
    display: none;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    overflow-y: scroll;
}
.content_data_box {
    width: 50%;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    background: var(--color_bg_card);
    border-right: 1px solid var(--color_border_subtle);
}
.data_field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.data_label {
    font-size: 11px;
    color: var(--color_text_faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.data_input {
    width: 100%;
    border: 1px solid var(--color_border_light);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    background: var(--color_bg_muted);
    color: var(--color_text_strong);
    outline: none;
    box-sizing: border-box;
}
.data_input:focus {
    border-color: var(--color_brand);
    background: var(--color_bg_card);
}
textarea.data_input {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}
#hue_slider {
    width: 100%;
    background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
    -webkit-appearance: none;
    height: 16px;
    border-radius: 8px;
}
#hue_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #333;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#hue_slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #333;
    cursor: pointer;
}
#color_wrapper {
    display: none;
    flex-direction: column;
    gap: 8px;
}
#kurzy_content_data_box input[type="color"] {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--color_border_light);
    cursor: pointer;
    background: transparent;
    padding: 2px;
}
#checkbox_container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkbox_admin{
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color_brand);
}
.checkbox_admin_lab {
    font-size: 13px;
    color: var(--color_text_muted);
    cursor: pointer;
}
#kurzy_action_buttons,
#achievements_action_buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.admin_delete_button {
    display: none;
    width: 100%;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: var(--color_error);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.admin_delete_button:hover {
    background: rgb(200, 20, 30);
}
.admin_delete_button:active {
    transform: scale(0.97);
}
.admin_show_preview_button {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--color_border_light);
    background: var(--color_bg_muted);
    color: var(--color_text_muted);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.admin_show_preview_button:hover {
    background: var(--color_border_light);
}
.content_preview_box {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    background: var(--color_bg_admin_page);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.preview_section_label {
    font-size: 11px;
    color: var(--color_text_muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
#centering_form_wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
}
#kurzy_preview_action_buttons,
#achievements_preview_action_buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.course_buttons {
    display: none;
    width: 100%;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: var(--color_brand);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-align: center;
}
.course_buttons:hover {
    background: var(--color_brand_hover);
}
.course_buttons:active {
    transform: scale(0.97);
}
.green_admin_text {
    color: var(--color_brand);
    font-size: 14px;
    display: none;
    padding: 10px 16px;
}
.red_admin_text {
    color: var(--color_error);
    font-size: 14px;
    display: none;
    padding: 10px 16px;
}
#achievement_date.data_input {
    cursor: pointer;
}
#achievements_header {
    display: flex;
    flex-direction: row;
    height: 100dvh;
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
}
#ach_list_panel {
    width: 240px;
    min-width: 240px;
    background: var(--color_bg_card);
    border-right: 1px solid var(--color_border_subtle);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: scroll;
}
#ach_list_header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color_border_subtle);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
#ach_list_label {
    font-size: 11px;
    color: var(--color_text_muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
}
.ach_list_item {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: none;
}
.ach_list_item:hover {
    filter: brightness(0.92);
}
.ach_item_name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color_text_primary);
}
.ach_item_date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}
 
#achievements_content {
    flex: 1;
    overflow: hidden;
}
 
@media (max-width: 700px) {
    .content_wrapper {
        flex-direction: column;
        overflow-y: auto;
    }
    .content_data_box {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color_border_subtle);
    }
    .content_preview_box {
        width: 100%;
        height: auto;
    }
 
    /* achievements list becomes hamburger on mobile */
    #achievements_header {
        width: auto;
        height: auto;
        position: fixed;
        top: 48px;
        left: 0;
        width: 240px;
        height: calc(100dvh - 48px);
        z-index: 199;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #achievements_box {
        flex-direction: column;
    }
    #achievements_content {
        height: calc(100dvh - 48px);
    }
    #ach_mobile_toggle {
        display: flex;
    }
    #achievements_header.mobile_open {
        transform: translateX(0);
    }
}
 
#ach_mobile_toggle {
    display: none;
    height: 40px;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color_border_subtle);
    background: var(--color_dark_surface);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
 
/* Mobile top bar */
#admin_mobile_bar {
    display: none;
    height: 48px;
    background: var(--color_dark_surface);
    border-bottom: 3px solid var(--color_brand);
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}
#admin_mobile_bar_logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
}
#admin_mobile_logo_img {
    height: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
#admin_mobile_ham {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
}
#admin_mobile_ham span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color_dark_surface_text_faint);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
#admin_mobile_ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#admin_mobile_ham.open span:nth-child(2) { opacity: 0; }
#admin_mobile_ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 
#head_bar.mobile_open { transform: translateX(0); }
 
@media (max-width: 700px) {
    #admin_mobile_bar { display: flex; }
    #admin_layout { flex-direction: column; padding-top: 48px; }
    #head_bar {
        position: fixed;
        top: 48px;
        left: 0;
        width: 240px;
        height: calc(100dvh - 48px);
        z-index: 199;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #admin_wrapper { height: calc(100dvh - 48px); }
    #ach_list_panel {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 48px;
        left: 0;
        width: 240px;
        height: calc(100dvh - 48px);
        z-index: 199;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #ach_list_panel.mobile_open { transform: translateX(0); }
    #achievements_header { position: relative; }
}
#ach_mobile_toggle {
    display: none;
    height: 36px;
    width: 100%;
    border: none;
    background: var(--color_dark_surface);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
@media (max-width: 700px) {
    #ach_mobile_toggle { display: flex; align-items: center; justify-content: center; gap: 8px; }
}
 
/* Icon picker */
#icon_picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.icon_option {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid var(--color_border_light);
    background: var(--color_bg_card);
    cursor: pointer;
    font-size: 15px;
    color: var(--color_text_secondary);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon_option:hover {
    border-color: var(--color_brand);
    color: var(--color_brand);
}
.icon_option.selected {
    border-color: var(--color_brand);
    background: var(--color_badge_active_bg);
    color: var(--color_brand);
}
 
/* Modal */
#admin_modal {
    visibility: hidden;
}
#delete_modal_window {
    width: 340px;
    background: var(--color_bg_card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
#modal_header_bar {
    background: var(--color_dark_surface);
    border-bottom: 3px solid var(--color_error);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#modal_warning_icon {
    color: var(--color_error);
    font-size: 16px;
}
#modal_header_title {
    font-size: 14px;
    color: #ffffff;
}
#modal_text {
    padding: 16px;
    font-size: 13px;
    color: var(--color_text_footer_copy);
    line-height: 1.5;
}
#delete_button_box {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
}
#delete_button_no {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--color_border_light);
    background: var(--color_bg_muted);
    color: var(--color_text_muted);
    font-size: 13px;
    cursor: pointer;
}
#delete_button_no:hover {
    background: var(--color_border_light);
}
#delete_button_yes {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: var(--color_error);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}
#delete_button_yes:hover {
    background: rgb(200, 20, 30);
}
#password_checking_box{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
}
#password_label_check{
    color: var(--color_text_primary);
}
 
/* Statistics */
#statistics_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    position: absolute;
    transition: transform 1s ease-in-out;
    background: var(--color_bg_admin_page);
}
#stats_filter_box {
    width: 100%;
    height: 56px;
    background: var(--color_bg_card);
    border-bottom: 2px solid var(--color_border_subtle);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    flex-shrink: 0;
}
#stats_filter_box .fa-chart-bar {
    color: var(--color_brand);
    font-size: 15px;
    padding-right: 10px;
    border-right: 1px solid var(--color_border_light);
    margin-right: 2px;
}
#stats_title {
    font-size: 13px;
    color: var(--color_text_strong);
    font-weight: 600;
}
#stats_content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#stats_summary_cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stats_card {
    background: var(--color_bg_card);
    border: 1px solid var(--color_border_light);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stats_card_label {
    font-size: 11px;
    color: var(--color_text_faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stats_card_value {
    font-size: 24px;
    color: var(--color_text_primary);
    line-height: 1.1;
}
.stats_card_sub {
    font-size: 11px;
    color: var(--color_text_muted);
    margin-top: 2px;
}
.green_stat { color: var(--color_brand); }
.blue_stat { color: #1877c6; }
 
#stats_section_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.stats_section_title {
    font-size: 12px;
    color: var(--color_text_muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    white-space: nowrap;
}
.stats_section_line {
    flex: 1;
    height: 1px;
    background: var(--color_border_light);
}
#stats_table_wrap {
    background: var(--color_bg_card);
    border: 1px solid var(--color_border_light);
    border-radius: 8px;
    overflow: hidden;
}
#stats_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
#stats_table thead th {
    background: var(--color_dark_surface);
    color: var(--color_dark_surface_text_faint);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    text-align: left;
}
#stats_table tbody td {
    padding: 11px 14px;
    color: var(--color_text_strong);
    border-bottom: 1px solid var(--color_bg_muted);
    vertical-align: middle;
}
#stats_table tbody tr:last-child td { border-bottom: none; }
#stats_table tbody tr:hover td { background: var(--color_bg_muted); }
#stats_empty_row {
    text-align: center;
    color: var(--color_text_muted);
    padding: 30px;
}
.stats_course_name_cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stats_course_dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stats_course_name_text {
    font-weight: 600;
    color: var(--color_text_primary);
    font-size: 13px;
}
.stats_course_teacher_text {
    font-size: 11px;
    color: var(--color_text_muted);
    margin-top: 1px;
}
.stats_deleted .stats_course_name_text {
    color: var(--color_text_muted);
    text-decoration: line-through;
}
.stats_badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
}
.stats_badge.active { background: var(--color_badge_active_bg); color: var(--color_badge_active_text); }
.stats_badge.inactive { background: var(--color_badge_inactive_bg); color: var(--color_badge_inactive_text); }
.stats_badge.deleted { background: var(--color_badge_deleted_bg); color: var(--color_badge_deleted_text); }
.stats_badge .fa-circle { font-size: 7px; }
.stats_progress_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stats_progress_bg {
    flex: 1;
    height: 6px;
    background: var(--color_bg_muted);
    border-radius: 99px;
    overflow: hidden;
}
.stats_progress_fill {
    height: 100%;
    border-radius: 99px;
    background: var(--color_brand);
}
.stats_progress_fill.blue { background: #1877c6; }
.stats_progress_fill.red { background: var(--color_error); }
.stats_progress_val {
    font-size: 12px;
    color: var(--color_text_muted);
    min-width: 24px;
    text-align: right;
    font-weight: 600;
}
.stats_na {
    color: var(--color_border_light);
}
 
@media (max-width: 700px) {
    #stats_summary_cards {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* Confirm and Cancel exclusive */
.activation_body {
    background: var(--color_bg_admin_page);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.activation_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.activation_brand {
    text-align: center;
}
.activation_brand_name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color_brand);
}
.activation_brand_sub {
    font-size: 12px;
    color: var(--color_text_muted);
    margin-top: 2px;
}
.activation_brand_logo{
    max-width: 100px;
}
.activation_card {
    background: var(--color_bg_card);
    border-radius: 16px;
    border: 1px solid var(--color_border_light);
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
}
.activation_icon {
    font-size: 40px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color_bg_muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}
.activation_title {
    font-size: 22px;
    font-weight: 600;
    color: var(--color_text_strong);
    margin-bottom: 8px;
}
.activation_subtitle {
    font-size: 14px;
    color: var(--color_text_faint_alt);
    line-height: 1.6;
}
.activation_btn {
    margin-top: 1.5rem;
    display: inline-block;
    padding: 10px 24px;
    border-radius: 40px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: var(--color_brand);
    color: white;
    text-decoration: none;
}
.activation_footer {
    font-size: 12px;
    color: var(--color_text_muted);
}
 
#communications_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    position: absolute;
    transition: transform 1s ease-in-out;
    overflow: hidden;
    background: var(--color_bg_admin_page);
}
#communication_header{
    height: 80px;
    overflow-y: scroll;
}
.communication_btn {
    border-radius: 12px;
    transition: filter 0.15s ease, transform 0.1s ease;
    border: 0;
    padding: 5px 10px;
    min-height: 65px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.communication_btn:hover {
    transform: translateY(-1px);
}
.student_count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.18);
    border-radius: 20px;
    padding: 3px 9px 3px 7px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    margin-top: 8px;
}
#email_type_header{
    background-color: var(--color_bg_muted);
    display: none
}
.email_type_btn{
    border-radius: 20px;
    transition: filter 0.15s ease, transform 0.1s ease;
    border: 0;
    padding: 5px 15px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #272727;
}
.selected_email_type_btn{
    background-color: var(--color_brand);
}
#email_preview{
    width:100%;
    height:90%;
}
#email_course,
#email_reciever {
    background: var(--color_badge_active_bg);
    border: none;
    border-left: 3px solid var(--color_brand);
    border-radius: 0 6px 6px 0;
    color: var(--color_text_strong);
    font-weight: 600;
    font-size: 14px;
}
#email_sending_notification{
    height: 32px;
    padding: 0 15px;
    margin-top: 50px;
    text-align: center;
    display: none;
    gap: 15px;
    justify-content: left;
    align-items: center;
    border-radius: 6px;
    border: 1px solid #9c9c9c;
    background-color:#7c7c7c;
    color: #ffffff;
    font-size: 18px;
    transition: background 0.15s;
}
#email_sending_notification i{
    font-size: 22px;
}
#email_send_notification{
    height: 32px;
    padding: 0 15px;
    margin-top: 50px;
    text-align: center;
    display: none;
    flex-direction: column;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #23a708;
    background-color: var(--color_brand);
    color: #ffffff;
    font-size: 18px;
    transition: background 0.15s;
    
}
#email_err_notification{
    height: 32px;
    padding: 0 15px;
    margin-top: 50px;
    text-align: center;
    display: none;
    flex-direction: column;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #ff6666;
    background-color:#e45160;
    color: #ffffff;
    font-size: 18px;
    transition: background 0.15s;
    
}

/* General classes */
.bold{
    font-weight: 800;
}
.font{
    font-family: "Inter", Arial, sans-serif;
}
.section_title_size{
    font-size: 3em;
}
.border{
    border: 1px solid black;
}
.modal{
    position: fixed;
    width: 100%;
    height: 100dvh;
    background-color: rgb(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.section_separator {
    width: 100%;
    max-width: 1400px;
    height: 1px;
    background-color: var(--color_text_faint);
    margin: 70px 0;
}
.center_wrapper{
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}




/*#main_info_wrapper{
    width: 75%;
    aspect-ratio: 3 / 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.main_info_box{
    width: 48%;
    height: 100%;
    padding: 10px 10px 10px 10px;
    border-radius: 40px;
    box-sizing: border-box;
    color: rgb(247, 247, 247);
}
#main_info_box1{
    background-color: rgb(68, 150, 30);
}
#main_info_box2{
    background-color: rgb(83, 83, 83);
    
}
#main_info_title{
    font-size: 40px;
}
#main_info_p{
    font-size: 20px;
    max-width: 700px;
    text-shadow: 0 0 30px rgb(0, 0, 0, 0.7);

}*/

/* this is for mobile version */

@media (max-width: 768px) {
    #header_nav {
        display: none;
    }
    .header_nav_link{
        display: none;
    }
    #header_hamburger {
        display: flex;
    }

    #page_wrapper {
        width: 100%;
    }
    #front_page_wrapper {
        min-width: unset;
        height: 380px;
        border-radius: 0;
        width: 100%;
    }
    #front_page_text_wrapper {
        left: 24px;
    }
    #front_page_heading {
        font-size: 52px;
    }
    #front_page_subheading {
        font-size: 22px;
    }
    #front_page_accent_bar {
        margin-bottom: 10px;
    }
    #front_page_dots {
        left: 24px;
    }
    .front_page_arrow {
        display: none;
    }

    #course_section_com{
        display: block;
    }

    .course_card {
        flex: 1 1 100%;
        min-width: unset;
        max-width: unset;
        height: auto;
    }
    .course_card_body {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .course_card_divider {
        width: 100%;
        height: 1px;
        margin: 4px 0;
    }
    .course_card_stats {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
    }
    .course_card_tap_hint {
        display: block;
    }
    .course_card_info {
        width: 100%;
        min-width: unset;
    }
    .course_card_register_btn {
        display: block;
    }

    #about_top{
        flex-wrap: wrap;

    }
    .about_text{
        padding: 0 15px;
    }
    #about_photos{
        flex-direction: column;
    }

    #achievements_section_header{
        width: 100%;
    }
    .achievements_page {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}
@media (max-width: 600px) {
    #achievements_wrapper {
        padding: 24px 20px 24px;
    }
    .achievement_row_date {
        display: none;
    }
}
@media (max-width: 1350px) {
    #about_top{
        flex-wrap: wrap;

    }
    .about_text{
        padding: 0 15px;
    }
}

@media (max-width: 1000px) {
    .about_sep{
        display: none;
    }
}