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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

button {
    cursor: pointer;
}
/*Сброс настроик по умолчанию*/
ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
p {
    margin: 0;
}
a {
    text-decoration: none;
}
/*Основной раздел*/

:root {
    --Main-White: #FFF;
    --Dark-Blue-Dark-Blue-50: #F8F9FE;
    --Dark-Blue-Dark-Blue-100: #EBEFFF;
    --Dark-Blue-Dark-Blue-200: #D7DEFF;
    --Dark-Dark-1000: #0A0C3C;
    --Dark-Dark-200: #CECED8;
    --Dark-Dark-300: #B6B7C5;
    --Purple-Purple-1000: #7E6CFF;
    --Purple-Purple-800: #8B7BFF;
    --Orange-Orange-1000: #FFB53D;
    --Green-Green-100: #EAFAFB;
    --Green-Green-1000: #2BC4D5;
    --primary-color: #7E6CFF;
    --text-color: #0A0C3C;
    --text-secondary: #B6B7C5;
    --border-color: #CECED8;
    --bg-light: #F8F9FE;
    --bg-white: #FFFFFF;
    --bg-button-secondary: #EBEFFF;
    --base-font-size: 16px;
    --spacing-unit: 0.25rem;
}


body {
    background: var(--Dark-Blue-Dark-Blue-50);
    font-family: Montserrat;
    margin: 0;
}
button {
    font-family: Montserrat;
}

input, textarea {
    font-family: Montserrat;
}

main {
    margin: 1.25rem 1.25rem 1.25rem 6.75rem;
    min-height: calc(100vh - 27.5rem);
}

p {
    color: var(--Dark-Dark-400, #9D9EB1);    
    font-family: Montserrat;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.page:has(.active-menu) main {
    margin: 1.25rem 1.25rem 1.25rem 14.75rem;
}

.btn {
    display: flex;
    padding: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border: none;
    cursor:pointer;
}
.btn:disabled {
    opacity: .5;
}
.btn-dark-blue-100 {    
    background: var(--Dark-Blue-Dark-Blue-100, #EBEFFF);
}

    .btn-dark-blue-100:hover {       
        background: var(--Dark-Blue-Dark-Blue-200, #D7DEFF);
    }

.btn-purple-1000 {
    background: var(--Purple-Purple-1000);
    color: var(--Main-White);
    border-color: var(--Purple-Purple-1000);
}
.btn-outline-Purple-1000 {
    border: 1px solid var(--Purple-Purple-1000);
    color: var(--Dark-Dark-1000);
    background: none;
}
    .btn-outline-Purple-1000:hover {
        background: var(--Purple-Purple-200, #D9D3FF);
    }
.btn-purple-1000:hover {
    border-color: var(--Purple-Purple-800);
    background: var(--Purple-Purple-800);
}

.button-blue-100 {
    border: var(--Dark-Blue-Dark-Blue-100);
    background: var(--Dark-Blue-Dark-Blue-100);
}
    .button-blue-100:hover {
        border: var(--Dark-Blue-Dark-Blue-200, #D7DEFF);
        background: var(--Dark-Blue-Dark-Blue-200, #D7DEFF);
    }

.btn-orange-1000 {
    background: var(--Orange-Orange-1000);
}
.btn-with,
.btn-main-white {
    background: var(--Main-White);
}

.btn-with {
    color: var(--Purple-Purple-1000, #7E6CFF);
}

.btn-outline-with {
    border: 1px solid var(--Main-White);
    color: var(--Main-White, #FFF);
    background: none;
}

.btn-with:hover {
    background: rgba(255, 255, 255, 0.50);
}

    .btn-link {
        display: flex;
        padding: 0.75rem 0;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        color: var(--Purple-Purple-1000);
        font-family: Montserrat;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

.row {
    display: flex;
}


.container {
    max-width: 1320px;
    margin: 0 auto;
}
h3 {
    color: var(--Dark-Dark-1000);
    font-family: Montserrat;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
h4 {
    color: var(--Dark-Dark-1000);
    font-family: Montserrat;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}
h5 {
    overflow: hidden;
    color: var(--Dark-Dark-1000, #0A0C3C);
    text-overflow: ellipsis;    
    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin:0;
}
h6 {
    color: var(--Dark-Dark-1000, #0A0C3C);    
    font-family: Montserrat;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin:0;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6,1fr);
}
.text-muted,
.mute {
    color: var(--Dark-Dark-300, #B6B7C5);
}



.button-arrow-block {
    display:flex;
    gap:.5rem;
}

    .button-arrow-block .btn {
        border: none;       
        background: var(--Dark-Blue-Dark-Blue-100);
    }
        .button-arrow-block .btn:hover {
            background: var(--Dark-Blue-Dark-Blue-200);
        }

section .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.button-filter-list {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

    .button-filter-list button {
        display: flex;
        padding: 0.5rem 1rem;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        border-radius: 2.5rem;
        background: var(--Dark-Blue-Dark-Blue-100, #EBEFFF);
        color: var(--Dark-Dark-1000, #0A0C3C);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border: none;
        white-space: nowrap;
        cursor: pointer;
    }

        .button-filter-list button:hover {          
            background: var(--Purple-Purple-200, #D9D3FF);
        }

        .button-filter-list button.active {
            background: var(--Purple-Purple-1000, #7E6CFF);
            color: var(--Main-White, #FFF);
        }

.checkbox .form-label {
    display: flex;
    align-items: center;
    color: var(--Dark-Dark-400, #9D9EB1);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    gap: .5rem;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;   
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

    input[type="checkbox"] + label {
        position: relative;
        padding-left: 1.5rem; /* Adjust as needed for your custom box size */
        cursor: pointer;
        display: inline-block; /* Or block, depending on layout */
    }

        input[type="checkbox"] + label::before {
            content: '';
            position: absolute;
            background-image: url('svg/check-off.svg');
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1rem;
            height: 1rem;
            border: none;
            border-radius: .25rem;
            background-color: #fff;
        }

    input[type="checkbox"]:checked + label::before {
        background: none; /* Checked background color */
        border-color: var(--Purple-Purple-1000, #7E6CFF);
    }

    input[type="checkbox"]:checked + label::after {
        content: ' '; /* Or use a background-image for a custom checkmark */
        background-image: url('svg/check.svg');
        background-repeat:no-repeat;
        position: absolute;
        left: 0; /* Adjust position of checkmark */
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        color: #fff;
        width: 1.125rem;
        height: 1.125rem;
        border-color: var(--Purple-Purple-1000, #7E6CFF);
    }
    input[type="checkbox"] + label:hover::before {
        border-color: var(--Purple-Purple-1000, #7E6CFF);
    }

    input[type="checkbox"]:focus + label::before {
        box-shadow: none;
    }

    input[type="checkbox"]:disabled + label::before {
        background: none;        
        cursor: not-allowed;
    }


.list-card {
    display: flex;
    gap: 1.25rem;
    overflow-y: auto;
    scrollbar-width: none;
}


.color-1 svg path {
    fill: #2BC4D5;
}

.color-2 svg path {
    fill: #7E6CFF;
}

.color-3 svg path {
    fill: #13A5FF;
}

.color-4 svg path {
    fill: #FFB53D;
}

.color-1 .btn-outline {
    border: 1px solid #2BC4D5;
}

.color-2 .btn-outline {
    border: 1px solid #7E6CFF;
}

.color-3 .btn-outline {
    border: 1px solid #13A5FF;
}

.color-4 .btn-outline {
    border: 1px solid #FFB53D;
}

.color-4 label,
label.color-4 {
    background: var(--Orange-Orange-1000, #FFB53D);
}
label.color-1,
.color-1 label {
    background: var(--Green-Green-1000, #2BC4D5);
}
label.color-3,
.color-3 label {
    background: var(--Blue-Blue-1000, #13A5FF);
}
label.color-2,
.color-2 label {
    background: var(--Purple-Purple-1000, #7E6CFF);
}

.swiper-pagination {
    display: flex;
}
.btn-arrow {
    display: flex;
    height: 2.75rem;
    padding: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.75rem;
    background: var(--Dark-Blue-Dark-Blue-100, #EBEFFF);
    border: none;
}
    .btn-arrow:hover {
        background: var(--Dark-Blue-Dark-Blue-200, #D7DEFF);
    }
.form-group,
.form-floating {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.form-label {
    color: var(--Dark-Dark-300, #B6B7C5);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.form-control {
    display: flex;
    padding: 0.75rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.75rem;
    border: 1px solid var(--Dark-Dark-200, #CECED8);
    background: var(--Main-White, #FFF);
    color: var(--Dark-Dark-1000, #0A0C3C);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

    .form-control:focus-visible {
        border: 1px solid var(--Green-Green-700, #6BD6E2);
        outline: none;
    }

.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg:;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex);
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(7px);
}
.modal-card {
    display: flex;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    border-radius: 1.25rem;
    background: var(--Main-White, #FFF);
    height: fit-content;
    margin: auto;
    width: min-content;
    position: relative;
}

.modal-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;
    text-wrap: nowrap;
}
.footer-modal {
   display: flex;
   gap: .75rem;
}
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.btn-close-modal {
    display: flex;
    padding: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    position: absolute;
    right: -4rem;
    top: 0;
    border-radius: 0.75rem;
    background: var(--Main-White, #FFF);
    border: none;
    cursor: pointer;
}

.btn-close-modal:hover {
    background: rgba(255, 255, 255, 0.50);

}

.modal-card .footer-card {
    display: flex;
    gap: .75rem;
}

.select-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}
.checkbox-round label,
.select-block label {
    color: var(--Dark-Dark-300, #B6B7C5);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.checkbox-round {
    display: flex;   
    padding: 0.75rem 1rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 0.75rem;
    border: 1px solid var(--Dark-Dark-100, #E7E7EC);
    background: var(--Main-White, #FFF);
    cursor:pointer
}

.checkbox-round div {
    position:relative;
}

    .checkbox-round div svg:first-child path {
        opacity: 1;
    }
    .checkbox-round .active svg:first-child path {
        opacity: .5;
    }

    .checkbox-round div svg:last-child {
        position: absolute;
        top: -3px;
        right: -5px;
        animation: slideRight .25s linear infinite alternate;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .checkbox-round div.active svg:last-child {
        animation: slideLeft .25s linear infinite alternate;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

@keyframes slideLeft {
    from {
        transform: translateX(0); /* Starting position (right) */
    }

    to {
        transform: translateX(-17px); /* Ending position (left) */
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-17px); /* Starting position (right) */
    }

    to {
        transform: translateX(0); /* Ending position (left) */
    }
}

.progress {
    height: 0.5rem;
    align-self: stretch;
    background: #F3F1FF;
    border-radius: 2rem;
}

.progress div {
        background: #7E6CFF;
        height: 0.5rem;
        align-self: stretch;
        border-radius: 2rem;
    }
.btn-mob {
    display: none;
}

textarea {
    max-width: 100%;
    resize: none;
    border: none;
    background: no-repeat;
}
    textarea:focus-visible,
    textarea:focus {
        border: none;
        outline: none;
    }

.mob-view {
    display: none !important;
}

.mob-off {
    display: flex;
}

.text-comment,
.text-comment .input-coment {
    width: 100%;
}

@media (max-width: 640.98px) {
    main {
        margin: 0;
    }

    section .title {
        padding: 0 .75rem;
    }

    .button-filter-list {
        padding: 0 0 0 .75rem;
        flex-wrap: nowrap;
        overflow-y: auto;
        scrollbar-width: none;
    }

    h4 {
        font-size: 1.125rem;
    }

    .btn-mob {
        display: flex;
    }

    .btn-title-list {
        display: flex;
        gap: .75rem;
    }

    .section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1.25rem .75rem;
        border-radius: .75rem;
    }

        .section-title .btn-title {
            color: var(--Dark-Dark-1000, #0A0C3C);
            font-family: Montserrat;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            display: flex;
            padding: 0.75rem 1rem;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            border-radius: 0.75rem;
            background: var(--Dark-Blue-Dark-Blue-100, #EBEFFF);
        }

    .list-card {
        padding: 0 .75rem;
    }

    .mob-view {
        display: flex !important;
    }

    .mob-off {
        display: none !important;
    }
    .m-75 {
        margin: 0 .75rem;
    }
}

.card-footer-card {
    display: flex;
    flex: 1;
    padding: .75rem;
    background: #fff;
    border-radius: .75rem;
    justify-content: space-between;
}

    .card-footer-card div:first-child {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }