@font-face {
    font-family: 'sf-pro-display-semibold';
    src: url(/assets/fonts/pro-display/SF-Pro-Display-Semibold.otf);
    font-weight: 600;
}
@font-face {
    font-family: 'sf-pro-display-medium';
    src: url(/assets/fonts/pro-display/SF-Pro-Display-Medium.otf);
    font-weight: 500;}
@font-face {
    font-family: 'sf-pro-display-regular';
    src: url(/assets/fonts/pro-display/SF-Pro-Display-Regular.otf);
    font-weight: 600;
}
@font-face {
    font-family: 'sf-pro-display-light';
    src: url(/assets/fonts/pro-display/SF-Pro-Display-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: 'sf-pro-display-ultralight';
    src: url(/assets/fonts/pro-display/SF-Pro-Display-Ultralight.otf);
    font-weight: 200;
}
@font-face {
    font-family: 'Better';
    src: url(/assets/fonts/better.ttf);
    font-weight: 100;
    font-style: normal;
}

.--header {
    background-color: var(--header);
}

.--header-color-1{
    color: var(--header-color-1);
}

.--header-color-1 svg{
    fill: var(--header-color-1);
}

.--header-color-2{
    color: var(--header-color-2);
}

.--header-color-3{
    color: var(--header-color-3);
}

.--header-color-3 svg{
    fill: var(--header-color-3);
    margin-left: -7px;
    margin-right: -6px;
}

.--header-color-4{
    color: var(--header-color-4);
    margin-right: 15px;
}

.--header-color-4 svg {
    margin-left: -7px;
    margin-right: -6px;
    stroke: var(--header-color-4);
}

.--header-background-color-1 {
    background-color: var(--header-background-color-1);
}

.--header-background-color-2 {
    background-color: var(--header-background-color-2);
}

.--header-background-color-3 {
    background-color: var(--header-background-color-3);
}

.--header-background-color-4 {
    background-color: var(--header-background-color-4);
}

.--header-color-2, .--header-color-3, .--header-color-4 {
    font-size: 15px;
    border-radius: 12px;
    font-family: 'sf-pro-display-semibold', sans-serif;
    transition: filter 0.3s;
    filter: brightness(0.9); 
}

.--header-background-color-2:hover, .--header-background-color-3:hover, .--header-background-color-4:hover {
    filter: brightness(1.0); 
}

.--header-border-1 {
    border: 1px solid var(--header-border-1);
}

.--header-border-2 {
    border: 1px solid var(--header-border-2);
}

.--header-border-3 {
    border: 1px solid var(--header-border-3);
}

.--header-border-4 {
    border: 1px solid var(--header-border-4);
}

.--header-border-1, .--header-border-2, .--header-border-3, .--header-border-4 {
    border-radius: 12px;
}

.--header-border-hover-1:hover {
    border: 1px solid var(--header-border-hover-1)
}

.--header-border-hover-2:hover {
    border: 1px solid var(--header-border-hover-2)
}

.--header-border-hover-3:hover {
    border: 1px solid var(--header-border-hover-3)
}

.--header-border-hover-4:hover {
    border: 1px solid var(--header-border-hover-4)
}

.--sider-bar-color-1 a {
    color: var(--sider-bar-color-1);
    font-size: 17px;
    font-family: 'sf-pro-display-medium', sans-serif;
    line-height: 130%;
}

.rrs svg {
    margin-top: 2px;
    margin-left: 1px;
    margin-right: 1px;
}

.mingcute_message svg {
    margin-top: 3px;
    margin-left: 1px;
}

.globe svg{
    margin-right: -3px;
    margin-left: -1px;
}

.star-filled svg{
    margin-right: -3px;
    margin-top: 1px;
}

.flowbite svg {
    margin-right: -4px;
    margin-left: -1px;
}

.--sider-bar-hover-1 a:hover {
    background-color: var(--sider-bar-hover-1);
}

.--sider-bar-footer-color-1 a {
    color: var(--sider-bar-footer-color-1);
    line-height: 130%;
    font-size: 17px;
    font-family: 'sf-pro-display-regular', sans-serif;
}

.--sider-bar-footer-hover-1 a:hover {
    color: var(--sider-bar-footer-hover-1);
}

.--sider-bar-footer-c li {
    color: var(--sider-bar-footer-c);
    font-size: 12px;
    font-family: 'sf-pro-display-regular', sans-serif;
}




































.search-icon svg {
    stroke-width: var(--header-color-1);
}

.modal-content {
    transform: scale(.9);
    opacity: 0;
    animation: modalOpen 0.3s forwards ease-out;
}

@keyframes modalOpen {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'sf-pro-display-light', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    background-color: var(--body);
}

header {
    width: 100%;
    height: 80px;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: fixed;
    z-index: 99999999 !important;
}

.windows {
    margin-top: 80px;
    width: calc(100% - 600px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

.selectel {
    position: fixed;
    top: 100px;
    width: calc(100% - 600px);
    display: flex;
    flex-wrap: wrap;
    height: auto;
    gap: 20px;
    padding: 20px;
    left: 300px;
}

.selectel a {
    color: var(--text-color);
    font-size: 18px;
}

.rew {
  position: relative;
  display: inline-block; /* или другой display по необходимости */
  text-decoration: none;
  color: #000;
  cursor: pointer; /* курсор для активной кнопки */
}

/* Изначально линию скрываем */
.rew::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%; /* изначально не видно */
  height: 2px;
  background: black;
  border-radius: 2px;
  transition: .1s ease-in-out; /* плавное расширение */
  opacity: 0;
}

/* При наведении расширяем линию */
.rew:hover::after {
  width: 100%;
  opacity: 0.5;
  transition: .1s ease-in-out;
}

.rew.rewrite::after {
  width: 100%;
  opacity: 1;
  transition: .1s ease-in-out;
}

.locker {
    width: 100%;
    height: 80px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 25px;
    padding-right: 25px;
}

.namelogo {
    cursor: pointer;
    display: flex;
    font-size: 18px;
    font-family: 'Better', sans-serif;
    color: var(--text-color-header);
    margin-left: -9px;
}

.simvolesa {
    margin-top: 5px;
}

.selectolecolor, .simvolesa {
    color: var(--main-color);
    display: inline-block;
    transition: transform 0.3s ease;
}

.namelogo:hover .selectolecolor {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: translateX(2px);
}

.namelogo:hover .selectolecolor {
  transform: translateX(3px);
}

.simvolesa {
    font-size: 16px;
    font-weight: 550;
    padding-left: 2px;
    padding-right: 2px;
}

a {
    text-decoration: none;
}

.search-container {
    position: relative;
    width: 46px;
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
}

.search-container:focus-within {
    width: 350px;
    border: solid 1px var(--btn-focus-border);
}

.search-container:focus-within .search-icon {
  display: none;
  transition: .3 ease-in-out;
}

.search-container:focus-within .search-hint {
    display: none;
}

.search-hint {
    display: none;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

input[type="text"],input[type="password"], input[type="date"] {
    width: 100%;
    padding: 5px 20px 5px 40px;
    font-size: 16px;
    border: 1px solid var(--btn-outlined-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 40px;
}

input.search-box-et[type="text"] {
    width: 100%;
    padding: none;
    font-size: 16px;
    border: none;
    border-radius: none;
    outline: none;
    transition: border-color 0.3s;
    background-color: rgba(0, 0, 0, 0);
    color: var(--text-color);
    height: 47px;
    cursor: pointer;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus {
    border-color: var(--main-color);
}

.sunvin {
    height: 47px;
    width: 47px;
    position: relative;
    display: flex;
    justify-content: center; /* по горизонтали по центру */
    align-items: flex-start; /* по вертикали к верху */
}

.sunvin svg {
    margin-top: 7px !important;
}

.search-container svg {
    margin-top: 1px !important;
}

.search-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: var(--text-tertiary-color);
    transition: color 0.3s;
    background-color: var(--main-header-bg);
    border-radius: 8px;
    padding: 4px 8px;
}

input[type="text"]:focus + .search-hint {
    color: #007BFF;
}

.search-icon {
    position: absolute;
    left: 19px;
    top: 23px;
    transform: translateY(-50%);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

#clearIcon {
  pointer-events: auto;
  cursor: pointer;
  font-size: 16px;
}

#searchIcon svg {
    fill: none;
    stroke: var(--text-color-header);
    stroke-linecap: var(--text-color-header);
}

#searchInput::placeholder {
    color: var(--text-tertiary-color);
    opacity: 1;
    font-size: 16px;
}

.headering {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
    font-size: 22px;
    display: flex;
    justify-content: flex-end;
    z-index: 99999999999;
}

.icon-head {
    margin-right: -7px;
    margin-left: -5px;
    color: #007BFF;
}

.profile-e {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 20px 13px 20px;
}

.righttohubabuba {
    float: right;
    height: auto;
    margin-top: 0;
    display: inline-flex;
    align-items: center; /* Центрирование по вертикали */
    gap: 11px;
}

.fa-user-e {
    padding: 0;
    width: 47px;
    height: 47px;
    border-radius: 30px;
    overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.user-ava img {
    width: 47px;
    height: auto;
    object-fit: contain;
}

.coloco {
    padding-right: 5px;
}

.fa-bell {
    font-size: 24px;
}

.gal {
    transform: rotate(0deg);
    font-size: 12px;
}

.fake-headere {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: static;
}

.createted {
    max-width: 210px;
    margin-left: calc(100% - 215px);
}

.menunu {
    max-width: 195px;
    margin-left: calc(100% - 195px);
}

.dropdown-menu {
    margin-top: -15px;
    display: none;
    background-color: var(--menu-bar);
    font-size: 14px;
    border-radius: 9px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: 'sf-pro-display-medium', sans-serif;
}

.dropdown-menu a {
    padding: 15px;
    text-decoration: none;
    display: block; 
    transition: .1s ease-in-out;
    border-radius: 9px;
    color: var(--menu-bar-a);
    font-size: 14px;
    line-height: 130%;
}

span.pt {
    color: var(--menu-bar-a);
    font-size: 14px;
    line-height: 130%;
    display: inline-flex;
    gap: 5px;
    margin-bottom: 4px;
}

span.pn {
    color: var(--menu-bar-span);
    font-size: 12px;
    line-height: 130%;
    padding-top: 5px;
}

.dropdown-menu a:hover {
    background-color: var(--menu-bar-a-hover);
    transition: .1s ease-in-out;
}

.profile-e:hover > .gal {
    color: var(--text-color);
    transition: .3s ease-in-out;
    transform: rotate(180deg);
}

.profile-e.active > .gal {
    color: #007BFF;
    transition: .1s ease-in-out;
    transform: rotate(360deg);
    font-size: 18px;
}

.profile-e > .gal {
    transition: .3s ease-in-out;
    color: var(--text-secondary-color);
}

.border {
    border: solid 1px var(--btn-outlined-border);
    border-radius: 12px;
}

.faq {
    color: var(--faq);
}

.borderes {
    background-color: #01BB80;
    color: white;
    opacity: .9;
}

.borderesses {
    background-color: #3C9AF5;
    color: white;
    opacity: .9;
}

.borderes:hover {
    opacity: 1;
}

.borderesses:hover {
    opacity: 1;
}

.bore {
    border-radius: 12px;
}

.logo-icon {
    width: 100%;
    max-width: 40px;
    height: auto;
    display: block;
}
.modal-content {
    margin: 10% auto;
    padding: 20px;
    width: 550px;
    height: 700px;
}

.step {
    position: absolute;
    width: 100%;
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: 50px;
}

.steper {
    padding: 70px;
}

#nextStepBtn {
    position: absolute;
    right: 0;
    margin-top: -50px;
}

#prevStepBtn {
    position: absolute;
    left: 0;
    margin-top: -50px;
}

button.StepBtn {
   background: none;
   border: none;
   font-size: 24px;
   font-weight: 700;
   color: var(--text-color);
   cursor: pointer;
}

#form-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

.engioar {
    color: var(--text-color);
    font-size: 30px;
}

button.enqluados {
    width: 370px;
    font-size: 16px;
    border: 2px solid var(--background-color);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    color: #adadad;
    background-color: var(--btn-filled-disabled);
    padding: 18px;
    text-align: center;
}

select.enqluados {
    width: 100%;
    font-size: 16px;
    border: 2px solid var(--background-color);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    color: #adadad;
    background-color: var(--btn-filled-disabled);
    padding: 18px;
    text-align: center;
}

input.enqluados {

    background-color: var(--main-header-bg);
    border-radius: 8px;
    width: 100%;
    padding: 28px 12px;
    font-size: 14px;
    font-weight: 500;
    appearance: none;
    height: auto;
}

.form {
    margin-top: 30px;
    height: 570px;
}

.enqluados {
    margin-top: 10px;
}

.ecubator {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  color: var(--text-color);
  padding: 15px 15px;
  border-radius: 8px;
  border: solid 1px var(--btn-outlined-border);
  transition: transform 0.2s; 
}

.ecubator:active, .ecubator.clicked {
  transform: scale(0.95); 
}

.spinner:before {
  transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateBefore infinite linear reverse;
}

.spinner:after {
  transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateAfter infinite linear;
}

.spinner:before, .spinner:after {
  box-sizing: border-box;
  content: '';
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -10em;
  margin-left: -10em;
  width: 20em;
  height: 20em;
  transform-style: preserve-3d;
  transform-origin: 50%;
  transform: rotateY(50%);
  perspective-origin: 50% 50%;
  perspective: 340px;
  background-size: 20em 20em;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
}
@keyframes rotateBefore {
  from {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
  }
}
@keyframes rotateAfter {
  from {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
  }
}

.birthdate {
    color: var(--text-color);
    font-weight: 550;
}

.enqluados:focus {
    box-shadow: 0 0 8px rgba(0,123,255,0.3);
    outline: none;
}

.profileTrigger {
    width: 48px;
    aspect-ratio: 1 / 1;
    font-size: 48px;
}

.logout {
    width: 100%;
    transition: .1s ease-in-out;
}

.logout:hover {
    background-color: var(--btn-outlined-border);
    transition: .1s ease-in-out;
}

button.btn-logout{
    all: unset;
    width: 100%;
    color: var(--text-color);
    padding: 15px;
    font-size: 16px;
}

hr {
    height: .3px;
    border: 1px solid #EDEDED;
}

.funless {
    float: right;
    height: auto;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 16px;
    margin-right: 20px;
}

.sidermegabox {
  position: fixed;
  width: 300px;
  height: 100%;
  margin-top: 80px;
  transition: background-color 0.3s ease, color 0.3s ease;
  transition: .3s ease-in-out;
  background-color: var(--sider-bar);
}

.sidermegabox.show {
  transition: .3s ease-in-out;
}

.selectionbar {
    width: 100%;
    margin-top: 50px;
    gap: 10px;
}

.hubamutagen {
    width: 240px;
    margin-left: auto;
    margin-right: auto;
    padding: 8.5px !important;
    display: flex;
    gap: 10px;
    margin-top: 10px;
    border-radius: 10px;
    transition: .3s ease-in-out;
    cursor: pointer;
    font-family: 'sf-pro-display-regular', sans-serif;
}

.infobuba {
    position: fixed;
    width: 300px;
    bottom: 100px;
}

.bumbaumba {
    margin-top: 10px !important;
}

.infobuba li {
    text-decoration: none;
    list-style: none;
    margin-left: 30px;
}

.infobuba a {
    transition: .3s ease-in-out;
}

.infobuba a:hover{
    transition: .3s ease-in-out;
}

.social {
    display: flex;
    margin-left: 30px;
    margin-top: 40px;
    gap: 10px;
}

footer {
    position: relative;
}

.nomeses li {
    bottom: 120px;
    position: absolute;
    left: 30px;
    list-style: none;
}

.stares {
    margin-right: -2px;
}

.setting-set {
    width: 100%;
    height: auto;
}

.set1 span {
    font-size: 28px;
}

.set2 span {
    font-size: 18px;
}

.set2 {
    margin-top: 20px;
}

.del-account button {
  all: unset;
  display: inline-block;
  cursor: pointer; 
  color: #7c7c7c;
  font-size: 16px;
  margin-top: 30px;
}

.set3 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 20px;
    margin-top: 80px;
}

.set3 a {
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    height: 200px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 25px 25px 25px 25px;
    border: solid 1px var(--btn-outlined-border-rgb);
}

.set3 span {
    flex: 1 1 calc(100% - 20px);
    max-width: calc(100% - 20px);
}

.setting1,.setting3 {
    color: var(--footer);
}

.setting2 {
    color: var(--text-color);
    font-size: 18px;
}

@media (max-width: 1600px) {

    .set3 a {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    }
    
}

@media (max-width: 1300px) {

    .set3 a {
    flex: 1 1 calc(100% - 20px);
    max-width: calc(100% - 20px);
    }

}

.recuter {
    margin-top: 80px;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
}

.ava-123 {
    width: 240px;
    height: 240px;
    padding: 20px;
}

.pr-09 {
    height: 240px;
    width: 250px;
    padding: 10px;
    display: flex;
    align-items: center; /* вертикальное выравнивание по центру */
}

.recu-11 {
    height: 240px;
    width: 350px;
    padding: 20px;
}

.ava-321 {
    display: flex;
    width: 200px;
    height: 200px;
    border-radius: 300px;
    overflow: hidden;
    background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.pr-90 {
    padding: auto;
    width: 240px;
    height: auto;
}

.pr-ref {
    padding: 6px;
}

.recu-111 {
    width: 310px;
    height: 200px;
    border-radius: 10px;
    border: 1px solid #7C7D86;
}

.name-f {
    font-size: 20px;
}

.role-f {
    font-size: 16px;
}

.level-f {
    font-size: 14px;
}

#openFileDialog {
    margin-top: 20px;
    width: 350px;
    padding: 10px;
    border-radius: 10px;
    font-size: 18px;
    transition: .1s ease-in-out;
}

#openFileDialog:hover {
    transform: scale(.9);
    transition: .1s ease-in-out;
}

.error {
    position: absolute;
    bottom: 150px;
    left: 50px;
    z-index: 5;
    background-color: rgba(255, 0, 0, 0.712);
    border-radius: 12px;
    padding: 20px 20px 0 20px;
    max-width: 450px;
    /* max-height: 150px; */ /* закомментируйте, если хотите расширение */
    overflow-y: auto; /* или remove, если хотите расширение без ограничения */
    word-wrap: break-word;
    white-space: normal;
}

.progress-bar {
    margin-top: 15px;
    height: 4px;
    background-color: #c5c5c5;
    transition: width 5s linear;
    margin-left: -20px;
    margin-right: -20px;
}

.create_block {
    width: 100%;
    height: auto;
    padding: 50px;
    padding-left: 150px;
    position: relative;
}

.create_title input[type="text"] {
    width: 870px;
    font-size: 32px;
    border: none;
    font-family: 'sf-pro-display-medium' sans-serif !important;
    padding: 0 !important;
    background-color: #ffffff00;
    color: var(--create-form-title);
    line-height: 130%;
}

.create_img input[type="file"] {
    width: 870px;
    height: 400px;
    background-color: var(--create-form-img);
    margin-top: 20px;
    transition: .1s ease-in-out;
}

.create_img_1 {
    width: 870px;
    height: 400px;
    background-color: var(--create-form-img);
    margin-top: 20px;
    display: flex;        
    flex-direction: column;    
    align-items: center;  
    justify-content: center;  
    text-align: center;       
    padding: 20px;        
    box-sizing: border-box; 
    color: #00000000;
    stroke: #585858;
    transition: .1s ease-in-out;
    border-radius: 10px;
}

 .create_img_1:hover {
    color: #0066FF;
    stroke: #ffffff;
    transition: .1s ease-in-out;
}

.create_img_1:hover circle {
    border: 3px solid #0066FF;
    border-radius: 300px;
    filter: inset 0 0 10px #0066FF;
    fill: #0066FF;
    stroke-dasharray: none;
    transition: .3s ease-in-out;
}

.create_img_1 svg {
    margin-top: -30px;
}

.create_img_1 p {
    display: block; 
    margin-top: 10px; 
    width: 230px;
    margin-top: 30px;
    color: #585858;
}

.create_articles input[type="text"] {
    width: 870px;
    font-size: 18px;
    border: none;
    background-color: #ffffff00;
    font-family: 'sf-pro-display-medium' sans-serif;
    padding: 0;
    margin-top: 20px;
}

.ck-rounded-corners, .ck-reset_all {
    width: 870px !important; 
}

.ck-powered-by {
    display: none;
}

.create_istocherese {
    width: 870px;
    line-height: 130%;
    font-family: 'sf-pro-display-medium' sans-serif;
    margin-top: 50px;
}

.create_istocherese input[type="text"] {
    width: 870px;
    border: 1px solid #E3E3E3;
    background-color: #F9F9F9;
    padding: 10px;
    margin-top: 15px;
}

.create_tag {
    width: 870px;
    line-height: 130%;
    font-family: 'sf-pro-display-medium' sans-serif;
    margin-top: 30px;
}

.create_tag input[type="text"] {
    width: 870px;
    border: 1px solid #E3E3E3;
    background-color: #F9F9F9;
    padding: 10px;
    margin-top: 15px;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 870px !important;
    border: none;
}

.tox .tox-toolbar__group {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 0 !important;
    padding: 0 3px 0 3px !important;
    border: 1px solid #E3E3E3;
}

.tox-tinymce {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: "sf-pro-display-medium", sans-serif !important; 
    overflow: hidden !important;
    position: relative !important;
    visibility: inherit !important;
    width: 870px !important;
}

.tox-tbtn {
    border: none !important;
    border-radius: none !important;
    padding: 0 !important;
}

.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {
    background-attachment: local !important;
    background-color: #fff !important;
    background-image: none !important;
    background-position: center top 40px !important;
    background-repeat: no-repeat !important;
    background-size: calc(100% - 11px * 2) calc(100% - 41px) !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    padding: 0 0 !important;
    transform: perspective(1px) !important;
}

.char-count-container {
    position: absolute !important;
    height: auto !important;
    bottom: 0 !important;
    font-size: 16px;
}

.char-count-container::before {
    content: "";
    display: block;
    width: 870px;
    height: 1px; 
    background-color: #EDEDED; 
    margin-bottom: 20px; 
    z-index: 99999999;
}

.spacer {
    margin-top: 10px;
}

.publ_artic {
    position: absolute;
    top: 110px;
    left: 1040px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.chewckboxsesss label input[type="radio"] {
    margin-right: 8px; 
}

.publ_artic p {
    margin: 25px;
    margin-left: 0;
}

.chewckboxsesss {
    display: flex;
    margin-top: -10px;
    flex-direction: column;
    gap: 7px !important;
}

.publicses, .type_artic {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px #88888821;
    padding: 25px;
}

.publ_artic span {
    font-size: 20px;
    display: flex;
}

.chewckboxsesss input[type="radio"] {
  display: none;
}

.chewckboxsesss label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

.chewckboxsesss label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #0447AB;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chewckboxsesss input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background-color: #ffffff;
  border-radius: 50%;
}

.chewckboxsesss label:hover::before {
  border-color: #007bff;
}

.publ_artic button {
    margin-top: 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0066FF;
    width: 220px;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    color: #fff;
    transition: .1s ease-in-out;
}

.publ_artic button:hover {
    background-color: #0052CC;
    transition: .1s ease-in-out
}

button {
    all: unset;
    cursor: pointer;
}

.tox .tox-edit-area {
    padding: 0 !important;
    margin-left: -17px;
    height: calc(100% - 30px);
}