:root {
    --clm-grey: rgba(211, 211, 211, 0.5);
    --clm-text: #cccccc;
    --clm-black: #0d0d0d;
    --clm-light-bg: #444444;
    --clm-text-dark: #888;
    --clm-content-border: #333;
    --clm-header-bg: #1a1a1a;
    --clm-widget-bg: #9f9a9a;
    --clm-button-red: #c62828;
    --clm-text-green-light: #10b981;
    --clm-red: #FF3C3C;
    --clm-orange: #ff9000;
    --clm-btn:  #c62828;
    --clm-btn-text: #cccccc;
    --clm-btn-hover: #FF3C3C;
    --clm-btn-text-hover: #cccccc;
    --inline-btn-size: 2rem;
    --inline-btn-width: 2rem;
    --clm-background-image: none;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background-color: var(--clm-black);
    color: var(--clm-text);
    display: block;
    margin: 0;
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: Inter;
}

body, html {
    /*overflow-x: scroll; !* или scroll *!*/
}

/* Flexbox layout только для страницы стрима */
body[data-route="games.stream"] {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}
a,
a:visited {
    color: inherit;
}

.hidden {
    visibility: hidden;
    display: none !important;
}

.relative {
    position: relative;
}
.flex {
    display: flex;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-start {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.flex-end {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.gap-05 {
    gap:0.5rem
}

.gap-02 {
    gap:0.2rem
}

.gap-01 {
    gap:0.1rem
}

.gap-1 {
    gap:1rem
}
.gap-2 {
    gap:2rem
}

@media (max-width: 768px) {
    .w-1 {
        width: 100%;
        max-width: 1rem;
    }

    .w-2 {
        width: 100%;
        max-width: 2rem;
    }

    .w-3 {
        width: 100%;
        max-width: 3rem;
    }
    .w-4 {
        width: 100%;
        max-width: 4rem;
    }

    .w-5 {
        width: 100%;
        max-width: 5rem;
    }

    .w-10 {
        width: 100%;
        max-width: 10rem;
    }

    .w-15 {
        width: 100%;
        max-width: 15rem;
    }

    .w-20 {
        width: 100%;
        max-width: 20rem;
    }

    .w-30 {
        width: 100%;
        max-width: 30rem;
    }
    .w-80 {
        width: 100%;
        max-width: 80rem;
    }

    .w-40 {
        width: 100%;
        max-width: 40rem;
    }
    .w-50 {
        width: 100%;
        max-width: 50rem;
    }

}
@media (min-width: 768px) {
    .w-1 {
        width: 1rem;
    }
    .w-2 {
        width: 2rem;
    }
    .w-3 {
        width: 3rem;
    }
    /*.w-4 {
        width: 4rem;
    }
    .w-5 {
        width: 5rem;
    }*/

    .w-10 {
        width: 10rem;
    }

    .w-15 {
        width: 15rem;
    }

    .w-20 {
        width: 20rem;
    }

    .w-30 {
        width: 30rem;
    }
    .w-80 {
        width: 80rem;
    }

    .w-40 {
        width: 40rem;
    }
    .w-50 {
        width: 50rem;
    }

}
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}
/*[class*="w-"] {*/
/*    --width: initial;*/
/*    width: calc(var(--width) * 1rem);*/
/*}*/

/*[class*="w-"] {*/
/*    --width: number(attr(class match "w-(\d+)"));*/
/*}*/
.w100 {
    width: 100%;
}

.center {
    text-align: center;
}

.space-between {
    justify-content: space-between;
    margin-bottom: 5px;
}

[x-cloak] { display: none !important; }

div[class^="col-"] {

    line-height: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: var(--clm-text);
    padding: 1rem 0 1rem 0;
    overflow: hidden;
}
.border-bottom {
    border-bottom: 1px solid var(--clm-content-border);
}

.pretty-input {
    position: relative;
    display: flex;
    align-items: center;
}
.global-settings .pretty-input {
    margin: auto;
}

.dropdwown-menu-arrow {
    position: absolute;
    right: 1rem;
    transition: transform 0.2s;
}

.input-block {
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    margin-bottom: 0.2rem;
    width:100%;
    position: relative;

    & .input-label {
        display: block;
        text-align: left;
        font-size: 1rem;
    }

    & .flex-row {
        gap: 1rem;
    }
    & .styled-input {
        display: block;
        text-align: left;
        font-size: 1rem;
        border-radius: 0.6rem;
        padding-left: 0.6rem;
        background-color: var(--clm-black);
        border: 1px solid var(--clm-content-border);
        color: var(--clm-text);
        box-sizing: border-box;
        height: 3.5rem;
        width: 100%;
    }

    & .styled-input option {
        display: block;
        text-align: left;
        font-size: 1rem;
        border-radius: 0.6rem;
        padding-left: 0.6rem;
        background-color: var(--clm-black);
        border: 1px solid var(--clm-content-border);
        color: var(--clm-text);
        box-sizing: border-box;
        height: 3.5rem;
        width: 100%;
    }
}

.btn {
    padding: 0.5rem 1.25rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    background-color: var(--clm-button-red);
    color: var(--clm-text);
    min-width: 0;
}

.material-symbols-outlined {
    /*font-size: inherit !important;*/
    display: inherit !important;
}

.material-symbols-outlined.hidden {
    display: none !important;
}

.action-btn {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 3.5rem;

    text-align: center;

    padding: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    /*padding: 1rem;*/
    background-color: var(--clm-widget-bg);
    color: var(--clm-text);
    min-width: 0;
    height: 1.5rem;

    z-index: 10;

}

.action-btn.inline-btn {
    font-size: var(--inline-btn-size);
    line-height: var(--inline-btn-size);
    height: var(--inline-btn-size);
    width: var(--inline-btn-width);
    padding: 0.2rem;
}

.action-btn:hover
{
    color: var(--clm-red);
    background-color: var(--clm-text-dark);
    cursor: pointer;
}


header {
    width: 100%;
    position: relative;
    background-color: var(--clm-header-bg);
    /*height: clamp(80px, 7vw, 15vh);*/
    height: 5rem;
    /*overflow: hidden;*/
    display: flex;
    font-size: clamp(14px, 2vw, 36px);
    font-weight: bold;
}

header .home-logo
{
    height: 100%;
    margin: 0.5vw;
    display: flex;
   align-items: center;
    flex: 0 0 auto;
    padding-left: 1rem;

}

header .home-logo img {
    height: 4rem;
    width: 4rem;
}

.action-buttons .login {
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.action-buttons .login a {
    height: 100%;
    display: flex;
    align-items: center;
}

.action-buttons .login img {
    height: calc(100% - 3vw);
}

.action-buttons .lang-switcher {
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

header .main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}

.main-nav span.menu-item {
    padding: clamp(5px, 1vw, 15px);
}

.main-nav span.menu-item {
    border-bottom: solid 0.5vw transparent;
}

.main-nav span.menu-item:hover {
    border-bottom: solid 0.5vw var(--clm-red);
}
.main-nav span.menu-item.active {
    /*background-color: var(--clm-button-red);*/
    border-bottom: solid 0.5vw var(--clm-button-red);
}

.menu-item {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    border-bottom: solid 0.2rem transparent;
}
.menu-item:hover {
    border-bottom: solid 0.2rem var(--clm-red);
    cursor: pointer;
}

.menu-item.active {
    /*background-color: var(--clm-button-red);*/
    border-bottom: solid 0.2rem var(--clm-button-red);
}




.action-buttons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding-right: 1rem;
}

.action-buttons .action-btn {
    width: 2rem;
    height: 2rem;
    font-size: 2rem !important;
}

.btn {
    padding: 0.5rem 1.25rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    background-color: var(--clm-btn);
    color: var(--clm-btn-text);
}

.btn:hover {
    background-color: var(--clm-btn-hover);
    color: var(--clm-btn-text-hover);
    cursor: pointer;
}

.content-layout {
    /*width: 100%;*/
    position: relative;
    min-height: 50vh;
    margin: 0 3vw 0 3vw;
    display: flex;
    /*align-items: center;*/
    align-items: flex-start;
    flex-direction: column;
}

@media (min-width: 768px) {
    .content-layout {
        align-items: center;
    }
}

.content-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    position: relative;
    background-color: var(--clm-header-bg);
    text-align: left;

    box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid var(--clm-content-border);
    box-sizing: border-box;
    padding: 2rem;

    margin-top: 1rem;
    margin-bottom: 1rem;
}

.clm-border {
    box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid var(--clm-content-border);
    box-sizing: border-box;
    padding: 1vw;
    /*overflow: hidden;*/
}

.sidebar {
    /*margin-top: 1rem;*/
}

/* footer */

footer {
    width: 100%;
    position: relative;
    /*height: clamp(313px, 10vw, 20vh);*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    align-items: start;
    justify-content: start;
    box-sizing: border-box;
    /*gap: 155px;*/
    text-align: left;
    color: #fff;
    background-color: var(--clm-red);
    padding: 1.2vw 2.4vw;
    overflow: hidden;
}

footer {
    .group {
        width: 1440px;
        position: absolute;
        margin: 0 !important;
        top: 0px;
        left: 0px;
        height: 313px;
        z-index: 0;
    }
    & .logo-wrapper {
        background: var(--clm-header-bg);
        border-radius: 50%;
        padding: 1px;
        display: inline-flex; /* Change to flex */
        align-items: center; /* Vertical center */
        justify-content: center; /* Horizontal center */
        width: 54px;
        height: 52px;
    }

    & .frame-child {
        width: 50px;
        position: relative;
        height: 50px;
        object-fit: contain;

    }

    & .copyright {
        align-self: stretch;
        position: relative;
        font-size: clamp(14px, 11px, 24px)

    }

    & .group-container {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    /*& .frame-parent {*/
    /*    min-width: 426px;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    align-items: flex-start;*/
    /*    justify-content: flex-start;*/
    /*    gap: 147px;*/
    /*    z-index: 1;*/
    /*}*/

    & .div1 {
        position: relative;
        font-size: 18px;
        line-height: 28px;
        font-weight: 600;
    }

    /*& .div2 {*/
    /*    min-width: 104px;*/
    /*    position: relative;*/
    /*    display: inline-block;*/
    /*}*/

    /*& .auto-layout-vertical {*/
    /*    min-width: 104px;*/
    /*    min-height: 170.3px;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    align-items: flex-start;*/
    /*    justify-content: flex-start;*/
    /*    gap: 10px;*/
    /*    z-index: 2;*/
    /*}*/

    & .span {
        font-weight: 600;
    }

    & .p {
        margin: 0;
    }

    & .p2 {
        margin: 0;
        font-weight: 600;
    }

    & .email-container {
        position: relative;
    }

    & .rectangle1 {
        position: absolute;
        top: calc(50% - 23px);
        left: calc(50% - 216px);
        border-radius: 10px;
        background-color: #fff;
        width: 432px;
        height: 46px;
    }

    & .div7 {
        position: absolute;
        top: calc(50% - 14px);
        left: calc(50% + 96px);
        line-height: 28px;
        font-weight: 600;
    }

    & .email1 {
        position: absolute;
        top: calc(50% - 8px);
        left: calc(50% - 200px);
        font-size: 16px;
        color: #0d0d0d;
        display: inline-block;
        width: 173px;
        height: 16.2px;
    }

    & .line {
        position: absolute;
        top: calc(50% - 23.5px);
        left: calc(50% + 72.5px);
        border-right: 1px solid #252525;
        box-sizing: border-box;
        width: 1px;
        height: 47px;
    }

    & .group1 {
        width: 432px;
        position: relative;
        height: 46px;
        font-size: 18px;
        color: #252525;
    }

    & .email-parent {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 432px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 29px;
    }

    & .group-child {
        position: absolute;
        height: 14.17%;
        width: 41.2%;
        top: 85.83%;
        right: 58.8%;
        bottom: 0%;
        left: 0%;
        max-width: 100%;
        overflow: hidden;
        max-height: 100%;
    }

    /*& .right-group {*/
    /*    min-width: 432px;*/
    /*    position: relative;*/
    /*    min-height: 254px;*/
    /*}*/
}

/* LOGIN */

div#login-form {
    /*width: 100%;*/
    position: relative;
    box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.1);
    border-radius: 1.5vw;
    background-color: var(--clm-header-bg);
    border: 1px solid #333;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2vw 2vw;
    text-align: left;
    /*font-size: 18px;*/
    color: #fff;
    padding: 1vw;
    margin: 1vw 0 1vw 0;
    /*background-color: #706f6c;*/
}

div#login-form {


    & .vector-icon {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0%;
        right: 0%;
        bottom: 0%;
        left: 0%;
        max-width: 100%;
        overflow: hidden;
        max-height: 100%;
    }

    & .icon {
        position: absolute;
        height: 90.93%;
        width: 90.93%;
        top: 4.52%;
        right: 4.52%;
        bottom: 4.55%;
        left: 4.55%;
        max-width: 100%;
        overflow: hidden;
        max-height: 100%;
        object-fit: cover;
    }

    & .vector-icon1 {
        position: absolute;
        height: 89.87%;
        width: 89.87%;
        top: 5.08%;
        right: 5.05%;
        bottom: 5.05%;
        left: 5.08%;
        max-width: 100%;
        overflow: hidden;
        max-height: 100%;
    }

    & .group-icon {
        position: absolute;
        height: 23.07%;
        width: 64.4%;
        top: 38.48%;
        right: 19.14%;
        bottom: 38.46%;
        left: 16.46%;
        max-width: 100%;
        overflow: hidden;
        max-height: 100%;
    }

    & .vector-parent {
        width: 75px;
        position: relative;
        height: 75px;
    }

    & .div {
        position: relative;
        line-height: 28px;
        font-weight: 600;
    }

    & .auto-layout-horizontal1 {
        width: 211px;
        border-radius: 5px;
        background-color: #ff3c3c;
        height: 48px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 8px;
        box-sizing: border-box;
    }

    & .div1 {
        width: 214px;
        position: relative;
        line-height: 28px;
        font-weight: 600;
        color: #ccc;
        display: inline-block;
        flex-shrink: 0;
    }

    & .auto-layout-horizontal {
        align-self: stretch;
        border-radius: 8px;
        background-color: #444;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        gap: 0px;
        text-align: center;
    }

    & .div2 {
        align-self: stretch;
        position: relative;
        line-height: 28px;
        font-weight: 600;
    }

    & .div3 {
        position: relative;
    }

    & input.auto-layout-horizontal2
    {
        align-self: stretch;
        border-radius: 8px;
        background-color: #888;
        border: 1px solid #333;
        box-sizing: border-box;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 15px;
        font-size: 16px;
    }

    & .auto-layout-vertical {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
    }

    & .vector-icon2 {
        width: 15.9px;
        position: relative;
        height: 11.7px;
        z-index: 0;
    }

    & .vector-icon3 {
        width: 25%;
        position: absolute;
        margin: 0 !important;
        height: 25%;
        top: 37.5%;
        right: 37.5%;
        bottom: 37.5%;
        left: 37.5%;
        max-width: 100%;
        overflow: hidden;
        max-height: 100%;
        z-index: 1;
    }

    & .auto-layout-horizontal5 {
        width: 20px;
        height: 20px;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 4px 2px;
        box-sizing: border-box;
        position: relative;
        gap: 0px;
    }

    & .auto-layout-horizontal4 {
        width: 402px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 221px;
    }

    & .rectangle {
        width: 18px;
        position: relative;
        border-radius: 2px;
        background-color: #fff;
        border: 1px solid #666;
        box-sizing: border-box;
        height: 18px;
    }

    & .auto-layout-horizontal7 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    & .div7 {
        position: relative;
        color: #ff3c3c;
        text-align: center;
    }

    & .auto-layout-horizontal6 {
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0px;
        font-size: 16px;
        color: #ccc;
    }

    & .instance-parent {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
    }

    & .login-submit-button {
        align-self: stretch;
        border-radius: 8px;
        background-color: #ff3c3c;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    & .rectangle1 {
        width: 189px;
        position: relative;
        background-color: #444;
        height: 1px;
    }

    & .auto-layout-horizontal9 {
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        font-size: 16px;
        color: #888;
    }

    & .frame-icon {
        width: 20px;
        position: relative;
        height: 20px;
        overflow: hidden;
        flex-shrink: 0;
    }

    & .auto-layout-horizontal11 {
        width: 199px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0px;
    }

    & .auto-layout-horizontal10 {
        align-self: stretch;
        border-radius: 8px;
        background-color: #1a1a1a;
        border: 1px solid #333;
        box-sizing: border-box;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 9px 112px;
    }

    & .auto-layout-horizontal13 {
        width: 222px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0px;
    }

    & .auto-layout-horizontal12 {
        align-self: stretch;
        border-radius: 8px;
        background-color: #1a1a1a;
        border: 1px solid #333;
        box-sizing: border-box;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 9px 99px;
    }

    & .auto-layout-horizontal-parent {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 18px;
        text-align: center;
    }

    & .frame-group {
        width: 435px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
    }
}

.popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.popup.active {
    display: block;
}

.popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    /*cursor: move; !* Add this line *!*/
    /*user-select: none; !* Add this line *!*/
}

/* Специфичные стили для модальных окон на странице редактирования статей */
body[data-route*="articles.edit"] .popup-content,
.article-edit-modal .popup-content {
    max-width: 600px;
    width: 100%;
}

.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: var(--clm-button-red)
}

.popup-body {
    padding: 4rem;
}


/* Calendar grid styles */

/* Date Picker Dropdown */
.date-picker-dropdown {
    position: absolute;
    z-index: 1000; /* High z-index to ensure it's on top */
    top: 100%; /* Position below the input */
    left: 0;
    background: white;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* shadow-lg */
    min-width: 280px;
    margin-top: 0.25rem; /* mt-1 */
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* grid-cols-7 */
    gap: 0.25rem; /* gap-1 (1 = 0.25rem in Tailwind) */
    padding: 0.5rem; /* p-2 (2 = 0.5rem in Tailwind) */
    font-size: 0.75rem; /* text-xs */
    text-align: center; /* text-center */
    color: #6b7280; /* text-gray-500 */
}
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* grid-cols-7 */
    gap: 0.25rem; /* gap-1 (1 = 0.25rem in Tailwind) */
    padding: 0.5rem; /* p-2 (2 = 0.5rem in Tailwind) */
    font-size: 0.75rem; /* text-xs */
    text-align: center; /* text-center */
}
.grid {
    display: grid;
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Date cell styles */
.w-8 {
    width: 2rem;
}
.h-8 {
    height: 2rem;
}

/* Transition for smooth appearance */
[x-transition] {
    transition: all 0.2s ease;
}

.user-row {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    border-bottom: solid 1px var(--clm-content-border);
}

.user-avatar  img{
    height: 5rem;
    width: 5rem;
    object-fit: contain;
    min-width: 0;
    border-radius: 1rem;
    border: none;
    margin: 0.2rem;
}

#user-menu {
    height: 3rem;
}
#user-menu:hover {
    cursor: pointer;
}

.menu-avatar  img{
    height: 3rem;
    width: 3rem;
    object-fit: contain;
    min-width: 0;
    border-radius: 50%;
    border: none;
    /*margin: 0.2rem;*/
}
.club-avatar-wrapper .menu-avatar{
    position: relative;
    left: 85%;
    top: -102%;
    width: 50px;
}



.user-details {
    /*width: 172px;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
}

.request-actions {
    display: flex;
    position: relative;
    flex-direction: row;
    margin-left: auto;
    gap: 0.5rem;
    align-items: center;
}


.sidebar-menu-wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.sidebar-menu-item {
    display: flex;
    flex-direction: row;
    height: 2rem;
    gap:0.5rem;
    font-weight: 600;
    width: 100%;
    border-bottom: 0.1rem solid var(--clm-text);
}

.sidebar-menu-item:hover {
    cursor: pointer;
    /*background-color: var(--clm-button-red);*/
    color: var(--clm-red);
    border-bottom: 0.1rem solid var(--clm-text-dark);
}

.sidebar-menu-item.active {
    color: var(--clm-red);
    border-bottom: 0.1rem solid var(--clm-red);
}

.sidebar-menu-chevron {
    opacity: 0; /* Hidden by default */
    transform: translateX(-10px); /* Start slightly left */
    transition: all 0.2s ease;
    margin-left: auto;
}

.mt-1 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 1rem;
}
.mb-06 {
    margin-bottom: 0.6rem;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.ta-center {
    text-align: center;
}

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

.sidebar-menu-item:hover .sidebar-menu-chevron {
    opacity: 1; /* Show on hover */
    transform: translateX(0); /* Move to final position */
}

.dropdwown-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: var(--clm-light-bg);
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    padding: 0.3rem;
}

.select-option {
    padding: 0.3rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 0.5rem;
}

.select-option:hover {
    background-color: var(--clm-text);
    color: var(--clm-light-bg);

}

.pretty-input .styled-input {
    display: flex;
    align-items: center; /* Vertical centering */

}

.prop-line {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    /*color: #555;*/
    width: 100%;
    border-bottom: solid 1px transparent;

}

.prop-line:hover {
    border-bottom: solid 1px var(--clm-text);
    color: white;
}

.prop-label {
    display: flex;
    font-weight: bold;
}

.prop-value {
    display: flex;
}


.club-avatar {
    width: inherit;
    height: inherit;
}

.club-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' based on your needs */
    object-position: center; /* optional - centers the image */
    border-radius: 0.5rem;
}

.dashboard-view {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.text-xs {
    font-size: 0.75rem;
}

.index-line {
    min-height: 2rem;
    padding: 1rem 0 1rem 0;
}

.tournament-banner {
    background-image: var(--clm-background-image);
    background-size: 100% auto; /* Full width, maintain aspect ratio */
    background-position: top center; /* Position at top */
    background-repeat: no-repeat; /* Show only once */

}

.data-wrapper {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.5rem;
    padding: 0.5rem;

}

.pagination {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.pagination li {
    display: inline-block;
    min-width: 1rem;
    background-color: var(--clm-header-bg);
    text-align: center;
}

.pagination li:hover {
    color: var(--clm-header-bg);
    background-color: var(--clm-text);
}


.success {
    /*color: var(--clm-text-green-light);*/
    background-color:  var(--clm-text-green-light);
}


.switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
}

.switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clm-widget-bg);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.2rem;
    width: 1.2rem;
    left: 0.2rem;
    bottom: 0.15rem;
    background-color: white;
    transition: .4s;
}

.switch-input:checked + .slider {
    background-color: var(--clm-red);
}

.switch-input:checked + .slider:before {
    transform: translateX(1.5rem);
}

.slider.round {
    border-radius: 1.5rem;
}

.slider.round:before {
    border-radius: 50%;
}


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


/* Toast Styles */
.toast-container {
    position: fixed;
    top: 5rem;
    right: 5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 300px;
}

.toast {
    background-color: var(--clm-header-bg);
    color: var(--clm-text);
    border: 1px solid var(--clm-content-border);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.1);
    animation: slideInRight 0.3s ease-out;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast.fade-out {
    opacity: 0;
    transform: translateX(100%);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--clm-red);
    width: 100%;
    animation: progress 5s linear forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}
.clear-button {
    position: absolute;
    right: 1rem;
    transition: transform 0.2s;
}

.pretty-input {
    position: relative;
}


.slot-selector-display {
    width: 50px;
    height: 50px;
    border: 2px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.slot-selector-display:hover {
    border-color: #666;
}

.slot-selector-display.selected {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #3b82f6;
}

.slot-selector-display.has-options:hover {
    border-color: #3b82f6;
}

.slot-selector-panel {
    /*position: absolute;*/
    background: var(--clm-text-dark);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 3px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /*z-index: 1000;*/
    display: flex;
    gap: 2px;
    margin-top: 5px;
}

.slot-option {
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid #e5e7eb;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.2s;
}

.slot-option.available {
    cursor: pointer;
    border-color: #e5e7eb;
}

.slot-option.available:hover {
    border-color: #9ca3af;
    background-color: #f9fafb;
    color: var(--clm-red);
}

.slot-option.active {
    border-color: var(--clm-red);
    background-color: var(--clm-red);
    color: white;
    /*width: 1.5rem;*/
    /*height: 1.5rem;*/
    transform: scale(1.2);
}

.slot-option.active.don,
.slot-option.active.mafia
{
    border-color: var(--clm-black);
    background-color: var(--clm-black);
}

.slot-option.active.sheriff
{
    background-color: darkgreen;
    border-color: darkgreen;
    color: gold;
}

.slot-option.unavailable {
    cursor: not-allowed;
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
    opacity: 0.6;
}

.clear-option {
    border-color: #ef4444 !important;
    color: #ef4444;
}

.clear-option:hover {
    background-color: #fef2f2 !important;
    border-color: #dc2626 !important;
}

.clear-option.active {
    background-color: #ef4444 !important;
    color: white !important;
}
/* Стили для заголовков в таблице игр турнира - НЕ применять на странице стрима */
body:not([data-route*="stream"]) #tournament-games-data .data-title,
body[data-route*="tournaments"] #tournament-games-data .data-title {
    color: #ff3c3c;
    font-weight: bold;
    font-size: 20px;
    margin: 10px 0px;
}

/* Уведомления */
.clm-notification {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 600px;
    padding: 1.25rem 1.5rem;
    background-color: var(--clm-content-bg, #1a1a1a);
    border: 1px solid var(--clm-content-border);
    border-radius: 0.6rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.clm-notification.warning {
    border-left: 4px solid #ff9000;
}

.clm-notification.warning > .material-symbols-outlined:first-child {
    color: #ff9000;
    font-size: 1.75rem;
    margin-top: 0.125rem;
}

.clm-notification.success {
    border-left: 4px solid #10b981;
}

.clm-notification.success > .material-symbols-outlined:first-child {
    color: #10b981;
    font-size: 1.75rem;
    margin-top: 0.125rem;
}

.notification-content {
    flex: 1;
    color: var(--clm-text);
}

.notification-content strong {
    display: block;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--clm-text);
}

.notification-content p {
    margin: 0;
    line-height: 1.5;
    color: var(--clm-text-muted, #999);
}

.notification-close {
    background: none;
    border: none;
    color: var(--clm-text-muted, #999);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.notification-close:hover {
    color: var(--clm-text);
}

.notification-close .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Тултипы */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    padding: 0.5rem 0.75rem;
    background-color: var(--clm-black, #0d0d0d) !important;
    color: var(--clm-text) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    border: 1px solid var(--clm-content-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 10000;
    font-family: Inter, sans-serif;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--clm-content-border);
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 10000;
}

[data-tooltip]:hover::before {
    opacity: 1 !important;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

[data-tooltip]:hover::after {
    opacity: 1 !important;
    visibility: visible;
}

.cancel-participation-info{
    width: 100%;
}
#cancel-participation-form{
    width: 100%;
    padding-right: 20px;
}

/* Фиксированные размеры для элементов, которые не должны изменяться в медиа-запросах */
.w-4-fixed {
    width: 1rem !important;
}

.w-5-fixed {
    width: 1.25rem !important;
}