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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

html{
  scrollbar-width: none;
}

a{
    text-decoration: none;
    color: #fff;
}

h2{
    color: white;
    text-align: center;
    font-weight: 500;
    font-size: 35px;
}

span.file {
    font-weight: 700;
  }

body{

    background-color: #99a7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Уберите следующую строку */
    /* overflow: hidden; */
}

.container{
    display: contents;
    justify-content: center;
    overflow-y: auto;
    max-width: 90%;
    margin: 0; /* Центрирование контейнера на странице */
    
}
.glass-container{
    display: block;
    max-width: 72vw;
    width: 70vw;
    margin-top: 10vh;
    margin-bottom: 30px;
    background: rgba(0, 0, 0, 0.56);
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(11.6px);
    -webkit-backdrop-filter: blur(11.6px);
}

.logo{
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    margin-top: -10px;
}

ul.nav-links{
    margin: 0;
    float: right;
    display: flex;
    list-style: none;
}

li.nav-link{
    display: inline-block;
    margin-left: 30px;
    font-size: 17px;
    font-weight: 300;
}

.content{
    display: flex;
    width: 100%;
}

.main{
    margin-top: 10vh;
    display: inline-block;
    padding: 20px;
}

.main h2{
    font-size: 35px;
}

.main p{
    font-size: 16px;
    line-height: 23px;
}

.image-wrapper{
    display: flex;
    margin-top: 5vh;
    position: relative;
}

.image-wrapper img{
    max-width: 500px;
}

.attrebute{
    position: absolute;
    bottom: 20px;
    right: 0;
    font-size: 12px;
}

@media screen and (max-width: 1075px) {
    .content{
        flex-direction: column;
    }
}

@media screen and (max-width: 720px) {
    .logo{
        font-size: 22px;
    }
    li.nav-link{
        font-size: 13px;
    }
    .main h2{
        font-size: 28px;
    }
    .main p{
        font-size: 15px;
    }
    button{
        font-size: 13px;
    }
    .image-wrapper img{
        max-width: 400px;
    }
}

/* Стили консоли */

@media (min-width: 1024px) {
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
}

.flex {
    display: flex;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.style-module_RcP2_Fvj {
    display: flex;
    width: 100%;
    flex-direction: column;
}
.relative {
    position: relative;
}
*, ::before, ::after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
    --tw-ring-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: hsl(210, 16%, 82%);
}




div {
    display: block;
    unicode-bidi: isolate;
}
.relative.style-module_1AMtO9lt input {
    background: none;
    background-color: var(--pageSecondaryHover);
}
.style-module_RcP2_Fvj .style-module_3TDo--Tn {
    border-width: 0px;
    border-bottom-width: 2px;
    border-color: transparent;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
}
.style-module_RcP2_Fvj .style-module_3TDo--Tn {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
@media (min-width: 640px) {
    .style-module_RcP2_Fvj .style-module_3TDo--Tn {
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }
}
.style-module_RcP2_Fvj .style-module_3TDo--Tn {
    position: relative;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: hsla(210, 24%, 16%, var(--tw-bg-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2.5rem;
    padding-right: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: hsla(214, 15%, 91%, var(--tw-text-opacity));
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
.style-module_RcP2_Fvj .style-module_1qLigd7O {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    display: flex;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
}
.active\:text-cyan-400:active {
  --tw-text-opacity: 1;
  color: rgba(34, 211, 238, var(--tw-text-opacity));
}

/* */
@media (min-width: 1024px) {
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
}

@media (min-width: 1024px) {
    .lg\:order-none {
        order: 0;
    }
}
@media (min-width: 768px) {
    .md\:gap-4 {
        gap: 1rem;
    }
}
.gap-2 {
    gap: 0.5rem;
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid {

}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.order-last {
    order: 9999;
}
div.style-module_2Vp6MaXq.bg-gray-600 {
    margin-top: 10px;
    width: 450px;
    height: 100px;
    background-color: #1b1b1b;
}
@media (min-width: 1024px) {
    .style-module_2Vp6MaXq {
        padding: 1rem;
    }
}
@media (min-width: 2000px) {
  div.style-module_2Vp6MaXq.bg-gray-600 {
      width: 195%;
  }
}
@media (min-width: 768px) {
    .style-module_2Vp6MaXq {
        padding: 0.75rem;
    }
}
.style-module_2Vp6MaXq {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
@media (min-width: 1024px) {
    .style-module_2Vp6MaXq {
        grid-column: span 6 / span 6;
    }
}
@media (min-width: 768px) {
    .style-module_2Vp6MaXq {
        grid-column: span 2 / span 2;
    }
}
.style-module_2Vp6MaXq {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
    grid-column: span 3 / span 3;
}
.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: hsla(209, 14%, 37%, var(--tw-bg-opacity));
    div.style-module_2Vp6MaXq.bg-gray-600 {
        background-color: var(--pageSecondary);
    }
    @media (min-width: 1024px) {
        .style-module_2Vp6MaXq {
            padding: 1rem;
        }
    }
    @media (min-width: 768px) {
        .style-module_2Vp6MaXq {
            padding: 0.75rem;
        }
    }
    .style-module_2Vp6MaXq {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    @media (min-width: 1024px) {
        .style-module_2Vp6MaXq {
            grid-column: span 6 / span 6;
        }
    }
    @media (min-width: 768px) {
        .style-module_2Vp6MaXq {
            grid-column: span 2 / span 2;
        }
    }
    .style-module_2Vp6MaXq {
        position: relative;
        display: flex;
        align-items: center;
        border-radius: 0.25rem;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
        box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
        grid-column: span 3 / span 3;
    }
    .bg-gray-600 {
        --tw-bg-opacity: 1;
        background-color: hsla(209, 14%, 37%, var(--tw-bg-opacity));
    }
    *, ::before, ::after {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
        --tw-ring-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow-colored: 0 0 rgba(0,0,0,0);
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
    }
    *, ::before, ::after {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: hsl(210, 16%, 82%);
    }
    таблица стилей агента пользователя
    div {
        display: block;
        unicode-bidi: isolate;
    }
    body, body.bg-neutral-800 {
        padding-left: 75px;
        color: #fff;
        background-color: var(--pageBackground);
    }
    .bg-neutral-800 {
        --tw-bg-opacity: 1;
        background-color: hsla(209, 20%, 25%, var(--tw-bg-opacity));
    }
    body {
        margin: 0;
        line-height: inherit;
    }
    :root {
        --sidebarPrimary: #9aa5b1;
        --sidebarPrimaryHover: #b0bac4;
        --sidebarSecondary: #1b1b1b;
        --sidebarSecondaryHover: #262626;
        --sidebarSecondaryActive: #3a3a3a;
        --sidebarSecondarySelected: #474747;
        --pagePrimary: #9aa5b1;
        --pagePrimaryHover: #b0bac4;
        --pageSecondary: #1b1b1b;
        --pageSecondaryHover: #262626;
        --pageSecondaryActive: #3a3a3a;
        --pageSecondarySelected: #474747;
        --sidebarBackground: #0c090a;
        --pageBackground: #141414;
    }
    html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    *, ::before, ::after {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
        --tw-ring-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow-colored: 0 0 rgba(0,0,0,0);
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
    }
    ::before, ::after {
        --tw-content: '';
    }
    *, ::before, ::after {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: hsl(210, 16%, 82%);
    }
    *, ::before, ::after {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
        --tw-ring-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow-colored: 0 0 rgba(0,0,0,0);
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
    }
    ::before, ::after {
        --tw-content: '';
    }
    *, ::before, ::after {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: hsl(210, 16%, 82%);
    }
}
.ContentContainer-sc-x3r2dw-0.PageContentBlock___StyledContentContainer-sc-kbxq2g-0.jyeSuy.HeRWk.fade-appear-done.fade-enter-done div.bg-gray-700, .bg-gray-700, div.ContentContainer-sc-x3r2dw-0:nth-child(2) {
    background: none;
    background-color: none;
    transition: none;
    animation: none;
    border: none;
    border-color: #00000000;
}
div.style-module_2Vp6MaXq.bg-gray-600 div.style-module_1DtraXMW.bg-gray-700 {
    background-color: var(--pageSecondaryHover);
}
@media (min-width: 640px) {
    .style-module_2Vp6MaXq > .style-module_1DtraXMW {
        margin-right: 1rem;
        display: flex;
    }
}
.style-module_2Vp6MaXq > .style-module_1DtraXMW {
    display: none;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}
.bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: hsla(209, 18%, 30%, var(--tw-bg-opacity));
}
.overflow-hidden {
    overflow: hidden;
}
.justify-center {
    justify-content: center;
}
.flex-col {
    flex-direction: column;
}
.w-full {
    width: 100%;
}
.flex {
    display: flex;
}
@media (min-width: 768px) {
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: hsla(210, 16%, 82%, var(--tw-text-opacity));
}
.leading-tight {
    line-height: 1.25;
}
.text-xs {
  font-size: 25px;
  line-height: 2.1rem;
}
.font-header {
    font-family: "IBM Plex Sans", "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
}
.text-gray-50 {
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
}
.font-semibold {
    font-weight: 600;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w-full {
    width: 100%;
}
.h-\[1\.75rem\] {
  font-size: 220%;
}
/* */

.text-gray-100 {
    --tw-text-opacity: 1;
    color: hsla(214, 15%, 91%, var(--tw-text-opacity));
}
.button-stop{
    --tw-bg-opacity: 1;
    background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
    border: 1px solid #cd2424;
    width: 100px;
}

.delete-button{
    --tw-bg-opacity: 1;
    background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
    border: 1px solid #cd2424;
    width: 100px;
}

.delete-button {
    transition: transform 0.3s ease-in-out; /* Время перехода и функция сглаживания */
  }
  
  .delete-button:hover {
    transform: scale(1.05); /* Увеличение на 10% */
  }


  button:hover:disabled{
    transform: translateY(-0px); 
}

.button-stop:disabled {
    cursor: not-allowed;
    border:rgba(191, 219, 254, 0.75);
    background-color: #cd2424db;
    color: rgba(191, 219, 254, 0.75);
}

.button-start{
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
    border: rgba(37, 99, 235, var(--tw-bg-opacity));
    width: 100px;
}

.button-start:disabled {
    cursor: not-allowed;
    background-color: rgba(59, 130, 246, 0.75);
    color: rgba(191, 219, 254, 0.75);
}

.button-admin{
    --tw-bg-opacity: 1;
    background-color: black;
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
    border: rgba(37, 99, 235, var(--tw-bg-opacity));
    width: 100px;
}

.button-mute{
    --tw-bg-opacity: 1;
    background-color: #5800d3;
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
    border: rgba(37, 99, 235, var(--tw-bg-opacity));
    width: 100px;
}

.button-ban{
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsla(216, 33%, 97%, var(--tw-text-opacity));
    border: rgba(37, 99, 235, var(--tw-bg-opacity));
    width: 100px;
}

.browser-mockup {
  width: 100%;
  height: 30px;
  color: black;
  border-top: 2em solid #f8f9fa;
  box-shadow: 0 .1em .4em 0 rgba(0, 0, 0, .2);
  position: relative;
  border-radius: 3px 3px 0 0;
  margin: 0;
  -webkit-box-flex: 1;
  flex: 1;
  }
  
  .browser-title {
    left: 93%; 
    font-weight: 600;
    position: absolute;
    font-size: medium;
    top: 10%; /* Изменили на 10% */
    left: 45%;
    transform: translate(-20%, -130%);
  }

.browser-mockup:before {
    display: block;
    position: absolute;
    content: "";
    top: -1.25em;
    left: 1em;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background-color: #f44;
    box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #fb5, 3em 0 0 2px #9b3;
}

/* Всплывающие сообщения */
.toast{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    max-width: 90%; /* Установите желаемую максимальную ширину */
    margin: 10px auto; /* Центрируем по горизонтали и добавляем отступы */
    max-width: 100%;
    width: auto;
    top: 25px;
    right: 30px;
    border-radius: 12px;
    background: #fff;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-left: 6px solid #ff3838;
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    z-index: 9999;
}

.toast.active{
    transform: translateX(0%);
}

.toast-content .check{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    background-color: #ff3838;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
}

.message .text{
    font-size: 20px;
    font-weight: 400;
    color: #666666;
}

.message .text.text-1{
    font-weight: 600;
    color: #333;
}

.toast .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.toast .close:hover{
    opacity: 1;
}

.toast .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.progress.active:before{
    animation: progress 5s linear forwards;
}

@keyframes progress {
    100%{
        right: 100%;
    }
}

.toast-start{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    max-width: 90%; /* Установите желаемую максимальную ширину */
    margin: 10px auto; /* Центрируем по горизонтали и добавляем отступы */
    max-width: 100%;
    width: auto;
    top: 25px;
    right: 30px;
    border-radius: 12px;
    background: #fff;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-left: 6px solid #1dc918;
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    z-index: 9999; 
}

.toast-start.active{
    transform: translateX(0%);
}

.toast-content-start .check{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    background-color: #1dc918;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
}


.toast-start .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-start .close:hover{
    opacity: 1;
}

.toast-start .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.progress-start.active:before{
    animation: progress 5s linear forwards;
}

@keyframes progress-start {
    100%{
        right: 100%;
    }
}

.toast-command{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    max-width: 90%; /* Установите желаемую максимальную ширину */
    margin: 10px auto; /* Центрируем по горизонтали и добавляем отступы */
    max-width: 100%;
    width: auto;
    top: 25px;
    right: 30px;
    border-radius: 12px;
    background: #fff;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-left: 6px solid #1dc918;
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    z-index: 9999; 
}

.toast-command.active{
    transform: translateX(0%);
}

.toast-content-command .check{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    background-color: #1dc918;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
}


.toast-command .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-command .close:hover{
    opacity: 1;
}

.toast-command .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.progress-command.active:before{
    animation: progress 5s linear forwards;
}

@keyframes progress-start {
    100%{
        right: 100%;
    }
}

.sortable-list {
    width: 37vw;
    padding: 25px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  .sortable-list .item {
    height: 60px;
    list-style: none;
    position: relative; /* Обеспечиваем позиционирование элемента */
    background: #fff;
    border-radius: 5px;
    padding: 10px 13px;
    margin-bottom: 11px;
    border: 1px solid #ccc;
  }
  
  .item {
    display: flex;
  }
  
  .item .details {
    display: flex;
    align-items: center;
  }
  
  .item .details img {
    height: 43px;
    width: 43px;
    pointer-events: none;
    margin-right: 12px;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .item .details span {
    font-size: 1.13rem;
    flex: 1;
  }
  
  .item i {
    color: #474747;
    font-size: 1.13rem;
  }
  
  .item .delete-button {
    position: absolute; /* Позиционируем кнопку абсолютно внутри блока */
    top: 50%; /* Располагаем ее по вертикали посередине элемента */
    right: 5px; /* Располагаем ее справа внутри элемента */
    transform: translateY(-50%); /* Корректируем положение по вертикали */
    background-color: #ff0000;
    color: #fff;
    padding: 5px 10px;
    border: 0px solid;
  }



.alert_box,
.show_button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}
.show_button{
  height: 55px;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  outline: none;
  border: none;
  color: #fff;
  line-height: 55px;
  background: #2980b9;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.show_button:hover{
  background: #2573a7;
}
.background{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.alert_box{
  position: fixed;
  padding: 30px;
  display: flex;
  background: #fff;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 450px;
  width: 100%;
  border-radius: 5px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50% , -50%) scale(0.97);
  transition: all 0.3s ease;
}
#check:checked ~ .alert_box{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50% , -50%) scale(1);
}
#check:checked ~ .background{
  opacity: 1;
  pointer-events: auto;
}
#check{
  display: none;
}
.alert_box .icon{
  height: 100px;
  width: 100px;
  color: #f23b26;
  border: 3px solid #f23b26;
  border-radius: 50%;
  line-height: 97px;
  font-size: 50px;
}
.alert_box header{
  font-size: 35px;
  font-weight: 500;
  margin: 10px 0;
}
.alert_box p{
  font-size: 20px;
}
.alert_box .btns{
  margin-top: 20px;
}
.btns label{
  display: inline-flex;
  height: 55px;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  line-height: 55px;
  outline: none;
  margin: 0 10px;
  border: none;
  color: #fff;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.btns label:first-child{
  background: #2980b9;
}
.btns label:first-child:hover{
  background: #2573a7;
}
.btns label:last-child{
  background: #f23b26;
}
.btns label:last-child:hover{
  background: #d9210d;
}

.file-uploader {
    float: right;
    display: inline-block;
    width: 40vw;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .file-uploader .uploader-header {
    display: flex;
    padding: 20px;
    background: #5145BA;
    align-items: center;
    border-radius: 5px 5px 0 0;
    justify-content: space-between;
  }
  .uploader-header .uploader-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  .uploader-header .file-completed-status {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
  }
  .file-uploader .file-list {
    list-style: none;
    width: 100%;
    padding-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-color: #999 transparent;
    scrollbar-width: thin;
  }
  .file-uploader .file-list:has(li) {
    padding: 20px;
  }
  .file-list .file-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
  }
  .file-list .file-item:last-child {
    margin-bottom: 0px;
  }
  .file-list .file-item .file-extension {
    height: 50px;
    width: 50px;
    color: #fff;
    display: flex;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #5145BA;
  }
  .file-list .file-item .file-content-wrapper {
    flex: 1;
  }
  .file-list .file-item .file-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .file-list .file-item .file-name {
    font-size: 1rem;
    font-weight: 600;
  }
  .file-list .file-item .file-info {
    display: flex;
    gap: 5px;
  }
  .file-list .file-item .file-info small {
    color: #5c5c5c;
    margin-top: 5px;
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .file-list .file-item .file-info .file-status {
    color: #5145BA;
  }
  .file-list .file-item .cancel-button {
    align-self: center;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    font-size: 1.4rem;
  }
  .file-list .file-item .cancel-button:hover {
    color: #E3413F;
  }
  .file-list .file-item .file-progress-bar {
    width: 100%;
    height: 3px;
    margin-top: 10px;
    border-radius: 30px;
    background: #d9d9d9;
  }
  .file-list .file-item .file-progress-bar .file-progress {
    width: 0%;
    height: inherit;
    border-radius: inherit;
    background: #5145BA;
  }
  .file-uploader .file-upload-box {
    margin: 10px 20px 20px;
    border-radius: 5px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #B1ADD4;
    transition: all 0.2s ease;
  }
  .file-uploader .file-upload-box.active {
    border: 2px solid #5145BA;
    background: #F3F6FF;
  }
  .file-uploader .file-upload-box .box-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #626161;
  }
  .file-uploader .file-upload-box.active .box-title {
    pointer-events: none;
  }
  .file-upload-box .box-title .file-browse-button {
    color: #5145BA;
    cursor: pointer;
  }
  .file-upload-box .box-title .file-browse-button:hover {
   text-decoration: underline;
  }

  .container2{    
    margin-bottom: 20px;
    float: left;
    width: 100%;
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
  }
  .container2 .title{
    font-size: 25px;
    font-weight: 500;
    position: relative;
  }
  .container2 .title::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    border-radius: 5px;
    background: linear-gradient(135deg, #71b7e6, #9b59b6);
  }
  .content form .user-details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 12px 0;
  }
  form .user-details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
  }
  form .input-box span.details{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
  }
  .user-details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
  }
  .user-details .input-box input:focus,
  .user-details .input-box input:valid{
    border-color: #9b59b6;
  }
   form .gender-details .gender-title{
    display: flex;
    font-size: 28px;
    font-weight: 500;
   }
   form .category{
     display: flex;
     width: 80%;
     margin: 14px 0 ;
     justify-content: space-between;
   }
   form .category label{
    margin-left: 15px;
     display: flex;
     align-items: center;
     cursor: pointer;
   }
   form .category label .dot{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    margin-right: 10px;
    background: #d9d9d9;
    border: 5px solid transparent;
    transition: all 0.3s ease;
  }

   form input[type="radio"]{
     display: none;
   }
   form .button{
     height: 45px;
     margin: 35px 0
   }
   form .button input{
     height: 100%;
     width: 20%;
     border-radius: 5px;
     border: none;
     color: #fff;
     font-size: 18px;
     font-weight: 500;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.3s ease;
     background: #2668db;
   }
   form .button input:hover{
     transform: scale(1.01); 
    }
   @media(max-width: 584px){
   .container2{
    max-width: 100%;
  }
  form .user-details .input-box{
      margin-bottom: 15px;
      width: 100%;
    }
    form .category{
      width: 100%;
    }
    .content form .user-details{
      max-height: 300px;
      overflow-y: scroll;
    }
    .user-details::-webkit-scrollbar{
      width: 5px;
    }
    }
    @media(max-width: 459px){
    .container2 .content .category{
      flex-direction: column;
    }
  }

  .checkbox{
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .checkbox input{
    outline: none;
    height: 35px;
    width: 90px;
    border-radius: 50px;
    -webkit-appearance: none;
    position: relative;
    background: #e6e6e6;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .checkbox input:checked{
    background: #664AFF;
  }
  .checkbox input:before{
    position: absolute;
    content: "";
    left: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(#fff,#f2f2f2,#e6e6e6,#d9d9d9);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    border-radius: 50px;
    transform: scale(0.85);
    transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  input:checked:before{
    left: 50px;
  }
  .checkbox .text:before{
    content: "Закрытый";
    font-size: 25px;
    font-weight: 500;
    color: #bfbfbf;
  }
  input:checked ~ .text:before{
    color: #664AFF;
    font-size: 27px;
    content: "Открытый";
  }