/* TacticSans 2*/
/* Ultimate or something */
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-UltimateItalic.b2b146ff328fe23939b8.ttf) format('truetype');
  font-weight: 10;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Ultimate.18c3f16e67f3827d608f.ttf) format('truetype');
  font-weight: 10;
  font-style: normal;
}
/* Thin 100*/
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-ThinItalic.657beece67293293e349.ttf) format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Thin.957b38a8e2e958665f7b.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
}
/* Light 300 */
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-LightItalic.197dcb6a96e3924d5d46.ttf) format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Light.3520ac9f3b7c0fec295b.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}
/* Regular 400 */
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-RegularItalic.86b1d0065ee4c9b1b8b2.ttf) format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Regular.ee4a8e853fbd4489bb39.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}
/* Medium 500 */
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-MediumItalic.1aea93af8454123081d9.ttf) format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Medium.7568f6b9b5e6f366eed6.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}
/* Bold 700 */
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-BoldItalic.806a6fb775da635e6ca8.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Bold.71b6e66b03590816c275.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}
/* Black 900 */
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-BlackItalic.e1ea4238745fedf69998.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'TacticSans2';
  src: url(/static/media/TacticSans-Black.1ba0e00de690bcef62b1.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
}


/* AvenirNextCyr */
@font-face {
  font-family: 'AvenirNextCyr';
  src: url(/static/media/AvenirNextCyr-Bold.d7a7f3ccfe2942965a98.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
} 
@font-face {
  font-family: 'AvenirNextCyr';
  src: url(/static/media/AvenirNextCyr-Demi.a0d51cdae611e6236949.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
} 
@font-face {
  font-family: 'AvenirNextCyr';
  src: url(/static/media/AvenirNextCyr-Medium.179fa5daa949c68bbece.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
} 
@font-face {
  font-family: 'AvenirNextCyr';
  src: url(/static/media/AvenirNextCyr-Regular.d5515aff04ff81140f75.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
} 


body {
  margin: 0;
  font-family: 'AvenirNextCyr', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.universal-button{
  padding: 0.25rem;
  margin-top: 0px !important;
  font-size: xx-small;
  transition: transform 0.2s ease;
}

.universal-button-add {
  background-color: transparent;
  color: #002f98;
  border: none;
  margin-left: auto;
}

.universal-button:hover {
  transform: scale(1.4);
}

.universal-button-del {
  background-color: transparent;
  color: #dc3545;
  margin-left: 0.25rem;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInElement {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
}

.fadeOutElement {
  opacity: 1;
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.card-header {
  padding: 0.3rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-body {
  flex: 1 1 auto;
  /* padding: 1rem; */
  padding: 0.3rem;
  display: flex;
}

@media (max-width: 450px){
    .filters .card-body{
        padding: 10px 0px;
    }
    .filters .card-body > .filter-item{
        margin-left: 0.3rem;
    }
}

@media(max-width: 430px){
    .universal-button{
        width: 20px;
        height: 20px;
    }
    .universal-button svg{
        width: 19px;
        height: 19px;
    }
}

.btn{
    height: auto;
    /* font-family: GothaProReg; */
    font-family: 'AvenirNextCyr';
    font-size: 16px;
    color: #FFF;
    background: transparent;
    background-color: #002f98;
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.btn_rigth{
    margin-left: auto;
}
.btn-danger{
    background-color: #dc3545;
}
.btn-success{
    background-color: #28a745;
}
.btn:hover{
    opacity: 0.9;
}
@media(max-width: 500px){
	.btn{
        font-size: 16px;
    }
}
.label{
    --tw-text-opacity: 1;
    color: #002f98;
    font-size: .875rem;
    font-weight: 500;
    /*font-family: 'DINPro';*/
    letter-spacing: .1em;
    line-height: 1.25rem;
    margin-bottom: 4px;
    /* text-transform: uppercase; */
    width: 100%; 
    word-wrap: break-word;
}
.modal__child-param{
    height: 100%;
    width:100%;
    box-sizing: border-box;
}
.css-6oqtsu:focus-visible {
    outline: none;
}
.modal__header-btn{
    background-color: rgba(0,0,0,.003) !important;
    color: red;
    border: none;
    margin-left: 1rem;
}
.modal__size-full{
    width: 93% !important;
    height: 93% !important;
}
.modal__header{
    display: flex;
    flex-direction: row;
}
.modal-yes-no__footer{
    display: flex;
}
.modal-yes-no__footer-left, .modal-yes-no__footer-right{
    width: 50%;
}
.modal-yes-no__footer-left{
    text-align: left;
}
.modal-yes-no__footer-right{
    text-align: right;
}

.modal-error{
   display: flex;
}
.modal-error__message{

}
.mdl-app-messages {
    position: fixed;
    top: 5%;
    right: 0;
    width: 250px;
    z-index: 9999;
    display:flex;
    flex-direction: column;
}
.mdl-app-messages__item.show {
    opacity: 1;
    transform: translate(-35px);
  }
.mdl-app-messages__item{
    transform: translate(200px);
    margin-bottom: 0.75rem;
    background-color: rgba(255,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 9999;
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    opacity: 0;
    align-self: end;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    max-width: 100% !important;
}
.mdl-app-messages__item.success{
    background-color: green;
}
.mdl-app-messages__item.error{
    background-color: red;
}
.mdl-app-messages__item.warning{
    background-color: #acac04;
}
.mdl-app-messages__item.info{
    background-color: blue;
}

.content__header {
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
}
.content__header-sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 95px;
    z-index: 9;
}
.content__header-left{
    width: 70%;
    text-align: left;
}
.content__header-rigth{
    width: 30%;
    text-align: right;
}
.content__header-rigth button{
    padding: 0;
}
@media(max-width: 450px){
    .content__header-rigth button svg{
        width: 19px;
        height: 19px;
    }
    .content__header-sticky{
        top: 65px;
    }
}
.modal-yes-no {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 360px;
    max-width: 540px;
    padding: 0;
}

.modal-yes-no__body {
    font-size: 16px;
    line-height: 1.55;
    color: #f1f3f5;
}

.modal-yes-no__footer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.modal-yes-no .modal-yes-no__btn{
    min-width: 120px;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid #3a4149;
    background: #2b3138;
    color: #e9ecf1;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.modal-yes-no .modal-yes-no__btn:hover{
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    border-color: #4a5561;
    background: #333a43;
}

.modal-yes-no .modal-yes-no__btn--danger{
    background: linear-gradient(135deg, #e63950 0%, #c4283c 100%);
    border-color: #f05a70;
    color: #fff;
    box-shadow: 0 12px 26px rgba(230, 57, 80, 0.35);
}

.modal-yes-no .modal-yes-no__btn--danger:hover{
    opacity: 0.93;
    box-shadow: 0 14px 30px rgba(230, 57, 80, 0.45);
}

.yes-no-modal {
    width: auto !important;
    max-width: 560px;
    min-width: 360px;
    height: auto !important;
}

.yes-no-modal .modal__child-param{
    background: rgba(33, 37, 41, 0.94);
    padding: 18px 18px 14px;
    justify-content: flex-end;
}

.yes-no-modal .modal__header{
    background: #212529;
    border-bottom: 1px solid #2f343a;
    color: #f1f3f5;
}

.yes-no-modal .modal__header h3{
    color: #f1f3f5;
}

/* Мобильные устройства */
@media (max-width: 600px) {
    .yes-no-modal {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        min-width: auto !important;
        margin: 0 16px;
    }

    .modal-yes-no {
        min-width: auto;
        max-width: 100%;
        gap: 16px;
    }

    .modal-yes-no__body {
        font-size: 15px;
        line-height: 1.5;
    }

    .yes-no-modal .modal__child-param {
        padding: 16px 14px 12px;
    }

    .modal-yes-no__footer {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .modal-yes-no .modal-yes-no__btn {
        flex: 0 0 auto;
        min-width: 110px;
        padding: 0.65rem 1.1rem;
        font-size: 15px;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .yes-no-modal {
        margin: 0 12px;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }

    .yes-no-modal .modal__child-param {
        padding: 14px 12px 10px;
    }

    .modal-yes-no__body {
        font-size: 14px;
    }

    .modal-yes-no__footer {
        justify-content: center;
        gap: 8px;
    }

    .modal-yes-no .modal-yes-no__btn {
        padding: 0.6rem 0.9rem;
        font-size: 14px;
        min-width: 100px;
    }
}
.content__footer{
    display: flex;
    justify-content: flex-end;
    min-height: 50px;
    position: -webkit-sticky;
    position: sticky;
    bottom: 10px;
    gap: 40px;
}
.content__footer:empty{
    display: none;
}
.content__footer-left{
    text-align: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.content__footer-rigth{
    text-align: right;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
@media(max-width: 450px){
    .content__footer{
        z-index: 12;
    }
    .content__footer-left,
    .content__footer-rigth{
        width: 50%;
    }
    .content__footer{
        justify-content: space-between;
        gap: 0px;
    }
}
.content__loader{
    width: 100%;
    height: 100%;
}
.content__loader-icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 200px;
    z-index: 10;
}
.content__loader-icon div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #002f98;
    border-radius: 50%;
    animation: content__loader-icon 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #002f98 transparent transparent transparent;
}
.content__loader-icon div:nth-child(1) {
    animation-delay: -0.45s;
}
.content__loader-icon div:nth-child(2) {
    animation-delay: -0.3s;
}
.content__loader-icon div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes content__loader-icon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
}
}

.status-message{
    align-self: center;
}
.status-code {
    font-size: 10em;
    color: #adb5bd;
    font-weight: 900;
}
.main-text {
    font-weight: 900;
    font-size:large;
    margin-bottom: 1rem;
}
.status-body {
    display: flex;
    flex-direction: column;
}
.content{
    /* position: relative; */
    min-height: 200px;
    width: auto;
    background: #FFF;
    border-radius: 20px;
}
.content-overflow-visible .content{
    overflow: visible;
}
.content-container {
    padding: 10px 30px 10px 30px;
}
.content-body{
    display: flex;
}

.content-group__item .content{
    padding: 0px;
}
.content-group__main .content{
    padding: 0px;
}
.content-tree__item .content{
    padding: 0px;
}
.tabs {
    /* border-bottom: 1px solid #b4b4b55e; */
    position: -webkit-sticky;
    position: sticky;
    top: 74px;
    z-index: 10;
}
.tabs:empty {
    display: none;
}
.tab-button {
    padding: 0.7rem;
    border: none;
    background-color: #1976d280;
    cursor: pointer;
    color: #fff;
    font-family: 'AvenirNextCyr';
    font-weight: 600;
}
.tab-button.active{
    background-color: rgb(25, 118, 210);
}
.tabs .tab-button:first-child{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.tabs .tab-button:last-child{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
@media(max-width: 450px){
    /* .content{
        padding: 3px 12px;
    } */
    .tabs {
        top: 80px;
    }
    .tab-button {
        width: 50%;
        padding: 0.35rem 0.7rem;
    }
    .tabs .tab-button:first-child{
        border-top-left-radius: 20px;
        border-bottom-left-radius: 0px;
    }
    .tabs .tab-button:nth-child(2){
        border-top-right-radius: 20px;
    }
    .tabs .tab-button:nth-child(3){
        border-bottom-left-radius: 20px;
    }
    .tabs .tab-button:last-child{
        border-top-right-radius: 00px;
        border-bottom-right-radius: 20px;
        /* width: 100%; */
    }
    .content-container{
        padding: 10px 0px 0px 0px;
    }
}
.button-link:link { text-decoration: none; }
.button-link:visited { text-decoration: none; }
.button-link:hover { text-decoration: none; }
.button-link:active { text-decoration: none; }

@media(max-width: 430px){
    .button-link:link svg{
        width: 19px;
        height: 19px;
    }
}
.menu__item {
  margin: 0.25rem;
  border-radius: 0.25rem;
}

.menu__item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu__item--no-hover:hover {
    background: transparent;
  }

.menu__item-link {
  display: flex;
  justify-content: left;
  cursor: pointer;
  padding: 10px;
}

.menu__item-link.center {
  justify-content: center;
}

.menu__item-text {
  color: #f8f9fa;
  transition: opacity 0.4s ease-in-out;
  width: auto;
  overflow: hidden;
  align-self: center;
}

.menu__item-text--hidden {
    display: none;
}

.is-open .menu__item .menu__item-text {
  margin-left: 10px;
}

.is-open .menu__item {
  margin: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.menu__item-icon {
  align-self: center;
}

.isActive,
.menu__item:hover .isActive {
  /* background-color: #0d6efd !important; */
  background-color: #1e88e5 !important;
}

.menu__item--outlined {
  border: 2px solid #6c757d;
  border-radius: 0.5rem;
}

.menu__item--outlined-selected {
  border: 2px solid #6c757d;
  border-radius: 0.5rem;
  background-color: #f8f9fa !important;
  color: #6c757d;
}

.menu__item--outlined-selected .menu__item-text{
  color: #6c757d;
}

.menu__item--outlined-selected .menu__item-icon--mui {
  color: #6c757d;
}

.menu__item-icon--mui {
  color: #f8f9fa;
}

@media screen and (max-width: 600px) {
  .menu__item {
    padding: 2px 4px 2px 4px;
    margin: 0.25rem;
  }

  .menu__item-link{
    padding: 0;
  }
}
.menu{
    width: 50px;
    z-index: 1000;
}
.menu.is-open{
    z-index: 1000;
}
.menu__header{
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color:  #212529;
    z-index: 3;
}
.menu__header_search {
    padding: 0.5rem;
    border-radius: 0.5rem;
    width: 80%;
}
.menu__body{
    width: 100%;
}
.menu__footer{
    width: 100%;
}
.menu__wrapper.is-open .menu__header .menu__header_burger > button::after {
    content: "FlyStation"; 
    position: absolute;
    margin-left: 180px;
    /* margin-bottom: 20px; */
    color: rgb(253, 253, 253); 
    font-style: normal; 
    font-family: 'AvenirNextCyr';
    font-size: 19px;
    font-weight: 600;
}
.menu__header_burger {
    border-radius: 0.5rem;
    z-index: 3;
}
.menu__separator{
    border-bottom: 2px solid #6c757d;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.menu__items-indicator{
    transform: rotate(-270deg); 
    margin-left: 0;
    pointer-events: none;
    transition: transform 0.3s;
}

.menu__items-indicator.rotated {
    transform: rotate(-180deg); 
}

.menu__items-visual{
    color: #f8f9fa;
    cursor: pointer;
    padding: 8px 10px 8px 10px;
    display: flex;
    justify-content: left;
    background-color: #6c757d;
    border-radius: 0.5rem;
    margin: 0.25rem;
    transition: background-color 0.3s ease;
}


.menu__items-visual--active{
    color: #6c757d;
    cursor: pointer;
    padding: 8px 10px 8px 10px;
    display: flex;
    justify-content: left;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    margin: 0.25rem;
}


.menu__items-name {
    color: #f8f9fa;
    transition: opacity 0.4s ease-in-out;
    width: auto;
    overflow: hidden;
    align-self: center;
    transition: color 0.3s ease;
    font-weight: 500;
}

.menu__items-name--active {
    color: #6c757d;
    transition: opacity 0.4s ease-in-out;
    width: auto;
    overflow: hidden;
    align-self: center;
}

.is-open .menu__items .menu__items-name {
    margin-left: 10px;
}

.is-open .menu__items .menu__items-indicator{
    margin-left: auto;
}

.menu__items-icon {
    align-self: center;
  }

.menu__items-visual.center {
    justify-content: center;
}

.menu__wrapper{
    position: fixed;
    width: 50px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background-color:  #212529;
    border-right: 2px solid #212529;
    box-shadow:  2px 0px 15px black;
    overflow-y: scroll;
    transition: width 0.2s ease-in-out;
}

.menu__wrapper::-webkit-scrollbar {
    width: 0;
  }
.menu__wrapper.is-open{
    width: 220px;
}

.is-open .menu__items-visual{
    margin: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.menu__items-visual:hover{
    scale: 1.05
}

.menu__items-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease; /* Плавное появление при открытии */
}

.menu__items-content.open {
    max-height: 1000px; /* Задайте максимальную высоту, которую может достичь элемент */
}

.menu__items-content.close {
    max-height: 0;
    transition: max-height 0.3s; /* Плавное исчезновение при закрытии */
}
.menu__items-visual--outlined{
    background-color: transparent;
    border: 2px solid #6c757d;
}

@media screen and (max-width: 600px) {
    .menu__wrapper{
        width: 40px;
    }
    .menu__header button{
        margin-left: 0px;
    }
    .menu__items-visual{
        padding: 5px 2px 2px 2px;
        margin: 0.2rem;
    }
}
.breadcrumbs__item{
  margin-right: 3px;
}
.breadcrumbs__item--disable {
    pointer-events: none;
    color: #343a40;
}
.breadcrumbs{
    margin: 0 0 20px 0;
}
.breadcrumbs__splitter {
    margin-left: 3px;
}
.page__container{
    overflow: hidden;
    /* padding: 40px 5%; */
    background: #eef5f9;
    background: #c5e6f942;
    width: 100%;
}
.page__container-header{
    border-radius: 20px;
    top: 0px;
    position: relative;
    padding-left: 2%;
    padding-top: 5px;
    background: #FFF;
    margin: 5px 1% 10px 1%;
    padding-bottom: 5px; 
    position: -webkit-sticky; 
    position: sticky;
    top: 10px;
    z-index: 10;
    box-shadow: -1px 2px 8px rgba(0, 0, 0, 0.1);
}
.page__container-header h1{
    margin: 0px;
    font-size: 24px;
    color: #1e88e5;
    font-family: 'TacticSans2';
    font-weight: 600;
}
.page__container-header .breadcrumbs{
    margin-bottom: 0px;
    padding-top: 6px;
    font-family: 'AvenirNextCyr';
    font-weight: 500;
}
.page__container-body{
    display: flex;
    /* overflow: auto; */
    padding: 0px 1%;
}
@media (max-width: 1500px){
    .page__container-header h1{
        font-size: 21px;
    }
}
@media (max-width: 900px){
    .page__container{
        /* padding: 0 50px; */
    }
}
@media (max-width: 650px){
    .page__container{
        padding: 0 10px;
        max-width: 550px;
    }
}
@media (max-width: 450px){
    .page__container-header h1{
        font-size: 17px;
        padding-bottom: 0px;
    }
    .page__container-header .breadcrumbs{
        padding-top: 2px;
    }
    .page__container-header{
        padding-left: 4%;
    }
    .page__container{
        padding: 0 3px;
        max-width: 400px;
        padding-left: 15px;
        padding-left: 0px;
    }
    h1{
        line-height: 1;
        font-size: 21px;
        padding-bottom: 10px;
    }
    h2{
        line-height: 1;
        font-size: 20px;
    }
    h3{
        line-height: 1;
        font-size: 15px;
    }
}
@media (max-width: 350px){
    /* .page__container{
        padding: 0px;
        min-width: 280px;
    } */
}
.layout-default{
    height:100%;
    width: auto;
    /* width: max-content; */
    min-width: 100%;
    min-height: 100vh;
    display: flex;
    background-color: #F0F3F8;
}
.layout-auth {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.layout-default_active-devtools{
    width: 50%;
}

/* .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 999;
    opacity:0;
    transition: opacity 0.4s ease-in-out;
  }
  
  .overlay.visible {
    opacity: 0.5;
  }
  .layout-default__btn-scroll{
    display: grid;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 2;
  } */

/* ДЛЯ ПОСТОЯНСТВА ОТКРЫТОГО МЕНЮ И ВЗАИМОДЕЙСТВИЯ С КОНТЕНТОМ СТРАНИЦЫ */
  .overlay {
    top: 0;
    left: 0;
    width: 15%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 999;
    opacity:0;
    transition: opacity 0.4s ease-in-out;
  }

  .layout-default__btn-scroll{
    display: grid;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 2;
  }

  @media (min-width: 901px){
    .overlay {
       width: 240px;
    }
  }

  @media (min-width: 1200px){
    .overlay {
       width: 220px;
    }
  }

  @media (min-width: 1600px){
    .overlay {
       width: 200px;
    }
  }

  @media (max-width: 900px) {
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(0, 0, 0);
      z-index: 999;
      opacity:0;
      transition: opacity 0.4s ease-in-out;
    }
    
    .overlay.visible {
      opacity: 0.5;
    }
    .layout-default__btn-scroll{
      display: grid;
      position: fixed;
      right: 10px;
      bottom: 10px;
      z-index: 2;
    }
  }
  
.page-shell{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.table__col {
    padding: 5px 15px;
    text-align: center;
    /* border-right: 1px solid #6c757d;
    border-left: 1px solid #6c757d; */
}
.table__col[data-label="Превью"] img{
    max-width: 150px;
    height: auto;
}
@media screen and (max-width: 600px) {
    .table__col{
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
        border-right: 1px solid transparent;
        overflow: hidden;
    }
    .table__row .table__col:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 12px;
    }
}

.list__header-item-search{
    min-width: 50px;
    width: 100%;
    height: auto;
    margin-left: 2rem;
    margin-right: 1.5rem;
}

.list__header-item-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:100%;
    /* padding: 0.35rem; */
}

.list__header-item-label{
    cursor: pointer;
    display: flex;
    font-size: 0.85rem;
}
.list__header-item-label--no-event{
    pointer-events: none;
}

.relative{
    position: relative;
}


/*
.list__header-item-search:hover {
    transform: scale(1.2);
  }
  */

.table {
    overflow-x: scroll;
    border-collapse: collapse;
    font-size: 0.9em;
    /* font-family: sans-serif; */
    font-family: 'AvenirNextCyr', sans-serif;
    width: 100%;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    border-top-left-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-bottom-left-radius: 20px;

    z-index: 7;
    position: relative;
    overscroll-behavior: contain;
    timeline-scope: --scroller;
    /* border-radius: 20px; */
    /* overflow-y: scroll; */
}

.table .table__header .table__header-row .table__col:first-child{
    border-top-left-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-top-left-radius: 20px;
}
.table .table__header .table__header-row .table__col:last-child{
    border-top-right-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-top-right-radius: 20px;
    box-shadow: 10px -10px rgb(174 219 237 / 28%);
}
.table .table__body .table__row .table__col:first-child{
    width: 5%;
}
.table .table__body .table__row:last-child .table__col:first-child{
    border-bottom-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-bottom-left-radius: 20px;
}
.table .table__body .table__row:last-child .table__col:last-child{
    border-bottom-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-bottom-right-radius: 20px;
    box-shadow: 18px 20px #FFF;
}
@media(max-width: 600px){
    .table .table__body .table__row .table__col:first-child{
        width: 88%;
    }
    .mob-width_88{
        width: 88%;
    }
}
@media(max-width: 450px){
    
    .table .table__body .table__row:last-child .table__col:last-child{
        box-shadow: none;
    }
}

/* Start scroll-bar */
::-webkit-scrollbar {
    width: 10px;
    scrollbar-width: thin; 
}
/* html{
    scrollbar-width: thin; 
}  */

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: 2px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
    background-color: #f3f3f3;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(154, 189, 196);
    /* background-color: #0067bc;  
    background-color: #1e88e5;   */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* End scroll-bar */

@media screen and (max-width: 600px) {
    .table {
        border: 0;
        min-width: 300px;
        max-width: 550px;
    }
}
@media (max-width: 450px){
    .table.banners {
        max-width: 400px;
        table-layout: fixed;
        width: 100px;
        min-width: calc(100% - 20px);
    }
    .table__body{
        max-width: 400px;
        table-layout: fixed;
        /* width: 100px; */
        min-width: calc(100% - 20px);
    }
    .table{
        min-width: auto;
    }
}
@media (max-width: 350px){
    .table{
        min-width: 220px;
        /* max-width: 300px; */
    }
}
.table__header{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 12;
    /* box-shadow: 3px -9px #ebf1fa; */
}
.table__filters{
    position: -webkit-sticky;
    position: sticky;
    z-index: 8;
    display: flex;
}
@media screen and (max-width: 600px) {
    .table__header {
        /* display: none; */
    }
    .table__filters{
        top: 17px;
    }
}
@media(max-width: 450px) {
    .table__header {
        top: -1px;
        z-index: 999;
    }
}
.table__header-row{
    background-color: #495057;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
}

.table__header-row .table__col{
    /* border-right: 1px solid black;
    border-left: 1px solid black; */
    border-bottom: 2px solid #212529;
}
.table__header-row{
    background-color: #495057;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
}

.table__header-row .table__col{
    /* border-right: 1px solid black;
    border-left: 1px solid black; */
    border-bottom: 2px solid #212529;
    padding-top: 2px;
    padding-bottom: 2px;
}
.table__header-row .table__col:first-child{
    border-top-left-radius: 20px;
}
.table__header-row .table__col:last-child{
    border-top-right-radius: 20px;
}

@media screen and (max-width: 600px) {
    .table__header-row {
        margin-bottom: 5px;
        display: block;
        border: 1px solid #0d6efd;
    }
    .table__header-row .table__col{
        border-bottom: 0;
        display: none;
    }
    .table__header-row .table__col.create_mobile{
        display: block;
        padding: 0px;
    }
    
}

.table__row{
    border-bottom: 1px solid #dddddd;
}
.table__row:nth-of-type(even) {
    background-color: #f3f3f3;
}
.table__row:last-of-type {
    border-bottom: 2px solid #6c757d;
}
/* .table__row:hover {
    // color: #fff;
    background-color: #cacaca;
} */
.table__body .table__row:last-child .table__col:first-child{
    border-bottom-left-radius: 20px;
}
.table__body .table__row:last-child .table__col:last-child{
    border-bottom-right-radius: 20px;
}
@media screen and (max-width: 600px) {
    .table__row{
        display: block;
        margin-bottom: 10px;
        border: 2px solid #b4b4b4;
    }
}
@media (max-width: 650px){
    .table__row{
        max-width: 550px;
    }
}
@media (max-width: 450px){
    .table__row{
        max-width: 400px;
        border-radius: 20px;
        max-width: none;
    }
}
@media (max-width: 350px){
    .table__row{
        min-width: 250px;
    }
}
.list__pagination{
    display: flex;
    margin: auto;
    justify-content: center;
}
.list__pagination-item{
    margin: 2px;
    /* padding: 2px 5px; */
    padding: 0.15rem 0.65rem;
    background-color: #dee2e6;
    color: #000;
    text-align: left;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
}
.list__pagination-item-skip{
    margin: 2px;
    padding: 2px 5px;
}
.list__pagination-item.current{
    cursor: default;
    background-color: #6c757d;
    color: #ffffff;
}
@media(max-width: 450px){
    .list__pagination-item{
        padding: 0.1rem .5rem;
    }
}
.zoom__box{
    display: flex;
    flex-direction: row;
    /* margin-top: 1.5rem; */
    /* width: 100%; */
    width: auto;
    align-items: center;
}
.zoom__box div:first-child{
    padding-right: 10px;
    font-size: 13px;
}
.zoom__button {
    cursor: pointer;
    color: black;
}

.zoom__button-in {
    margin-left: auto;
}

.zoom__button-out {
    margin-right: 1rem;
}

.filters {
    padding: 2px;
    padding-top: 0px;
    display: flex;
}

.filters input{
    /* min-width: 270px; */
    min-width: 150px;
    max-width: 15%;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
}
.filter-item{
    display: grid;
}
.filters .card {
    width:100%;
    background-color: #f8f9fa;
}

.filters .card-header {
    background-color: #495057;
    color: white;
    font-size: 16px;
    /* font-size: x-large; */
}

.filters .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-item label{
    color:black;
    /* min-width: 150px;
    max-width: 50%; */
    font-size: 13px;
    line-height: 1.2;
    text-transform: inherit;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    /* text-transform: uppercase; */
}

.filters .card-body > .filter-item {
    margin-bottom: 0.1rem;
    margin-left: 1rem;
    /* width: min-content; */
}

@media (max-width: 1400px){
    .filter-item label{
        font-size: 12px;
    }
    .filters input{
        min-width: 110px;
    }
}
@media (max-width: 450px){
    .filters input{
        min-width: 140px;
    }
    .filters .card{
        /* max-width: 280px; */
    }
    .filters .card-header{
        font-size: 13px;
    }
    .filters input{
        padding: 0px;
    }
}

@media (max-width: 430px){
    .filters input{
        min-width: 110px;
        font-size: 13px;
    }
    .filter-item label{
        font-size: 10px;
        min-width: -webkit-fit-content;
        min-width: -moz-fit-content;
        min-width: fit-content;
    }
}
.list-setting{
    display: grid;
    grid-template-columns: 1fr 50px;
    width: fit-content; 
    width: -webkit-fit-content; 
    width: -moz-fit-content; 
    width: -ms-fit-content; 
    position: absolute;
    z-index: 11;
    right: 0px;
    top: 20px;
}

.w-100 {
    width: 100%;
}
.overflow{
    margin: 0px 0px 10px 0px;
    border-top-left-radius: 20px !important;
    -webkit-border-top-left-radius: 20px !important;
    -moz-border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    -webkit-border-top-right-radius: 20px !important;
    -moz-border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    -webkit-border-bottom-right-radius: 20px !important;
    -moz-border-bottom-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    -webkit-border-bottom-left-radius: 20px !important;
    -moz-border-bottom-left-radius: 20px !important;
}
/* For scrolling work with sticky position table header*/
.overflow{
    overflow-y: scroll;
    overflow-x: auto;
    max-height: 65vh;
    /* height: 100vh; */
    contain: inline-size;
    box-shadow: 1px 12px 14px 8px rgb(52 57 59 / 28%);
}
.overflow thead>tr:first-child>th {
    background-color: rgba(90, 8, 156, 0.8) !important;
    z-index: 50;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}
.overflow>table {
    border-collapse: collapse;
    width: 100%;
}
.overflow.overflow-50vh{
    max-height: 53vh;
}
@media(max-width: 1390px){
    .overflow{
        max-height: 74vh;
    }
    .overflow.overflow-50vh{
        max-height: 50vh;
    }
}
@media(max-width: 1000px){
    .list-setting{
        position: relative;
        top: 0px;
        display: flex;
        width: 50%;
    }
}
@media(max-width: 600px){
    .list-setting{
        width: 100%;
    }
    .content__body{
        z-index: 2;
        position: relative;
    }
}
/* End scrolling work */

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

.list-settings__row_action-select{
    margin-right: 1rem;
}

.list-settings__row_action{
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
}

.list-settings__row_action--w-100{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}
.list-settings__row_action--w-100 > .label{
    display: none;
}
.list__result {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}

@media(max-width: 1000px) {
    .list-settings__row{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 120%;
    }
    .list-settings__row_action--w-100{
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 1rem;
    }
    .list-settings__row_action--w-100 .label{
        display: none;
    }
    .list-settings__row_action--w-100 .btn{
        padding: 6px 7px;
        font-size: 13px;
    }
    .list-settings__row_action--w-100 .MuiButtonBase-root{
        padding: 2px 5px;
    }
    .list-settings__row_action--w-100 .MuiButtonBase-root svg{
        width: 26px;
        height: 26px;
    }
    .list-settings__row_action button{
        padding: 0px;
    }
    .list__result{
        font-size: 13px;
    }
}
@media(max-width: 450px){
    .list-settings__row{
        flex-direction: column;
        width: 95%;
        padding-left: 15px;
    }
}
@media(max-width: 430px){
    .list-settings__row_action button{
        width: 20px;
        height: 20px;
    }
    .list-settings__row_action button svg{
        width: 19px;
        height: 19px;
    }
}
.select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
.select[readonly]{
    opacity: 0.7;
    pointer-events: none;
}

.select-wrapper {
    position: relative;
    width: 100%;
    z-index: revert-layer;
}
.filter-item .select-wrapper{
    width: 245px;
}
.filter-item .select-wrapper input{
    width: 230px;
    max-width: inherit;
}

.select__options-dropdown_is-open {
    width:100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 11;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 630px !important;
    overflow-y: auto;
}

.select__options-dropdown_is-open--spreaded {
    width:100%;
    position: relative;
    top: 100%;
    left: 0;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
}

.option-item{
    cursor:pointer;
    /* padding: 0.5rem; */
    padding: 0.3rem 0.1rem;
}

.select__options-dropdown_is-open .option-item:hover{
   background-color: rgb(154, 189, 196);
}
.option-border-none .select__options-dropdown_is-open .option-item,
.option-border-none .select__options-dropdown_is-open--spreaded .option-item
.option-border-none .options-dropdown .option-item{
    border: none;
}
.select-input{
    width:100%;
    box-sizing: border-box;
}

.select__reset-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.select__reset-button--disabled{
    pointer-events: none;
    color: #6c757d;
}
@media(min-width: 1550px){
    .option-item{
        font-size: 0.9rem;
    }
    .select__options-dropdown_is-open,
    .select__options-dropdown_is-open--spreaded
    .options-dropdown {
        max-height: 630px !important;
    }
}
@media(max-width: 450px){
    .list-settings__row_action--w-100 .select-wrapper{
        margin-right: 10px;
        margin-bottom: 0px;
    }
    .filter-item .select-wrapper,
    .filter-item .select-wrapper input{
        width: 200px;
    }
    .select__options-dropdown_is-open,
    .select__options-dropdown_is-open--spreaded,
    .options-dropdown{
        max-height: 220px !important;
    }
}
.input{
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-family: 'AvenirNextCyr';
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input[readonly]{
    opacity: 0.8;
    /* pointer-events: none; */
    background: #b4b4b55e;
}
.input_wf{
    width: 100%;
}
.input[type="file"]{
    display: none;
}
.input__file{
    display: grid;
    grid-template-columns: 1fr 25px;
    cursor: pointer;
}
.input__file_read-only{
    cursor: default;
}
.input[type="datetime-local"] {
    overflow: visible;
    /* margin-right: 14%; */
}
.input__file_read-only{
    opacity: 0.8;
    pointer-events: none;
    background: #b4b4b55e;
}
.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.input-number--hide-arrows  {
  -moz-appearance: textfield;
}


.input-checkbox_read-only{
    pointer-events: none;
}

.input-checkbox_read-only .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase.Mui-checked{
    color:white
}
.select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
.select[readonly]{
    opacity: 0.7;
    pointer-events: none;
}

.select-wrapper {
    position: relative;
    width: 100%;
    z-index: revert-layer;
}

.selected-options-preview {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: calc(100% - 40px);
    overflow: hidden;
}

.selected-tags-preview{
    display: flex;
    font-size: 12px;
    width: 95%;
}

/* Вариант с отображением текста первых двух выбранных опций */
/* .selected-tag {
    background: blue;
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.selected-tag-more {
    display: flex;
    color: #666;
    margin-left: 4px;
    flex-shrink: 0;
    align-items: center;
} */

.selected-tag-count {
    background: blue;
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.options-dropdown {
    /* display: grid;
    grid-template-columns: 50% 50%; */
    width: 110%;
    margin-bottom: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
}

.option-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor:pointer;
    padding: 0.5rem;
    font-size: 0.8rem;
}
/* .options-dropdown .option-item{
    border: none;
} */
.options-w_150 .select__options-dropdown_is-open,
.options-w_150 .select__options-dropdown_is-open--spreaded {
    width: 150% !important;
    right: 0;
    left: auto;
}
.options-w_150-r .select__options-dropdown_is-open,
.options-w_150-r .select__options-dropdown_is-open--spreaded {
    width: 150% !important;
}
.select__options-dropdown_is-open .option-item .css-julti5-MuiSwitch-root,
.select__options-dropdown_is-open--spreaded .option-item .css-julti5-MuiSwitch-root {
    width: 43px !important;
    padding: 5px !important;
    height: 24px !important;
}
.select__options-dropdown_is-open .option-item .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase .MuiSwitch-input,
.select__options-dropdown_is-open--spreaded .option-item .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase .MuiSwitch-input {
    left: -100%;
    width: 300%;
}
.select__options-dropdown_is-open .option-item .css-julti5-MuiSwitch-root .css-jsexje-MuiSwitch-thumb,
.select__options-dropdown_is-open--spreaded .option-item .css-julti5-MuiSwitch-root .css-jsexje-MuiSwitch-thumb{
    width: 16px !important;
    height: 16px !important;
    box-shadow: -1px 2px 6px 3px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
}
.select__options-dropdown_is-open .option-item .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase,
.select__options-dropdown_is-open--spreaded .option-item .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase{
    padding: 4px 0px 0px 5px;
}
.select__options-dropdown_is-open .option-item .MuiSwitch-root,
.select__options-dropdown_is-open--spreaded .option-item .MuiSwitch-root {
    padding: 8px !important;
    height: 24px !important;
    width: 43px !important;
}
.select__options-dropdown_is-open .option-item .MuiButtonBase-root,
.select__options-dropdown_is-open--spreaded .option-item .MuiButtonBase-root{
    padding: 4px 0px 0px 5px;
}
.select__options-dropdown_is-open .option-item .MuiButtonBase-root span.MuiSwitch-thumb,
.select__options-dropdown_is-open--spreaded .option-item .MuiButtonBase-root span.MuiSwitch-thumb{
    width: 14px !important;
    height: 14px !important;
}

.option-item .label{
    width: 0;
    display: none;
}

.select-input{
    width:100%;
    box-sizing: border-box;
    padding-right: 3rem;
}

.select__reset-button {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.select__reset-button--disabled{
    pointer-events: none;
    color: #6c757d;
}
@media(min-width: 1450px){
    .option-item{
        font-size: 0.9rem;
    }
}
@media(max-width: 450px){
    .select-input{
        font-size: 13px;
    }
    .option-item{
        font-size: 13px;
    }
    .select-wrapper{
        z-index: auto;
    }
    .css-julti5-MuiSwitch-root{
        width: 47px !important;
        padding: 12px !important;
        height: 35px !important;
    }
    .css-julti5-MuiSwitch-root .css-jsexje-MuiSwitch-thumb{
        width: 16px !important;
        height: 16px !important;
        box-shadow: -1px 2px 6px 3px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
    }
    .options-w_150 .select__options-dropdown_is-open,
    .options-w_150 .select__options-dropdown_is-open--spreaded,
    .options-w_150-r .select__options-dropdown_is-open,
    .options-w_150-r .select__options-dropdown_is-open {
        right: auto;
        left: auto;
    }
    .select__options-dropdown_is-open,
    .select__options-dropdown_is-open--spreaded{
        grid-template-columns: 100%;
        width: 110% !important;
    }
    .card.modal__day .select__options-dropdown_is-open,
    .card.modal__day .select__options-dropdown_is-open--spreaded{
        grid-template-columns: 100%;
        width: 100% !important;
    }
    .options-w_150 .select__options-dropdown_is-open,
    .options-w_150 .select__options-dropdown_is-open--spreaded,
    .options-w_150-r .select__options-dropdown_is-open,
    .options-w_150-r .select__options-dropdown_is-open--spreaded {
        width: 110% !important;
    }
    .select__options-dropdown_is-open .option-item .css-julti5-MuiSwitch-root,
    .select__options-dropdown_is-open--spreaded .option-item .css-julti5-MuiSwitch-root {
        padding: 8px !important;
    }
    .select__options-dropdown_is-open .option-item .css-julti5-MuiSwitch-root .css-jsexje-MuiSwitch-thumb,
    .select__options-dropdown_is-open--spreaded .option-item .css-julti5-MuiSwitch-root .css-jsexje-MuiSwitch-thumb {
        width: 14px !important;
        height: 14px !important;
    }
}
@media(max-width: 430px){
    .select__reset-button{
        width: 20px;
        height: 20px;
        right: 8px;
    }
    .select__reset-button svg{
        width: 19px;
        height: 19px;
    }
}

.admin-users_column-width{
    width: 11.11%;
}
.admin-bookings_column--nonactive {
    color:#6c757d;
}
@media(max-width: 600px){
    .admin-users_column-width{
        width: 88%;
    }
}
.user__balance {
    cursor: pointer;
}

.user__balance span:hover {
    color: #1e88e5;
}

.user__balance--active {
    cursor: pointer;
    background-color: #1e88e5;
    color: #fff;
}

.balance_user_name {
    margin-top: 0.25rem;
    cursor: pointer;
    color: #1e88e5;
}

.balance_user_name {
    margin-top: 0.25rem;
    cursor: pointer;
    color: #1e88e5;
}
@media(max-width: 600px){
    .admin-users_column-width{
        width: 88%;
    }

    .table .table__body .table__row:last-child .table__col:first-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

    .table .table__body .table__row:last-child .table__col:last-child {
        border-bottom-right-radius: 0px !important;
    }
}
.hide-icon {
    transform: translateX(-36px);
    color:#002f98;
    cursor: pointer;
    opacity: 0.7;
}
.password__input-container {
    display: flex;
    align-items: center;
}
.password__input-container .pages__show-input{
    width: 100%;
}

.input__wrapper{
    display: grid;
    grid-template-columns: 150px 0.5fr 50px;
    align-items: center;
}
.pages__show-item .input__wrapper{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pages__show-item .input__wrapper.img img{
    max-width: 300px;
}
.input__wrapper_full{
    grid-template-columns: 120px 1fr;
}
.input__wrapper.img > div > div{
    text-align: center;
}
@media screen and (max-width: 1150px) {
    .input__wrapper_full {
        display: flex;
        flex-direction: column;
    }
}
@media (max-width: 450px){
    .input__wrapper{
        /* grid-template-columns: 100px 0.9fr 0px;
        justify-items: center; */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 95%;
        padding-left: 10px;
    }
    .pages__show-item .input__wrapper.img img{
        max-width: 200px;
    }
}
@media (max-width: 380px){
    .input__wrapper{
        /* grid-template-columns: 80px 0.9fr 0px; */
    }
}
.json__item-body .input__wrapper .input{
    width:100% !important;
    box-sizing: border-box !important;
}

.checkbox-block__body{
    position: relative;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-y: scroll;
    height: 20rem;
}

.checkbox-block__header-search{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.checkbox-block{
    position: relative;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.5rem;
    padding: 1rem;
}
.pages__show-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-evenly;
}
@media(max-width: 450px){
    .pages__show-wrap{
        flex-direction: column;
    }
}
.pages__show-item{
    display: flex;
    flex-direction: column;
    width: 47%;
}
@media(max-width: 450px){
    .pages__show-item{
        width: 100%;
    }
}
.pages__show-input {
    margin-bottom: 0.5rem;
}

.pages__show-btn-link {
    margin-left: 0.5rem;
}
.header-row__center {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header-row__center svg {
    font-size: medium;
}
.header-row__center_text {
    font-size: small;
    font-weight: 600;
    margin-left: 0.25rem;
}
@media(max-width: 450px){
    .pages__show-input{
        font-size: 13px;
        margin-bottom: 0;
    }
    .input__wrapper .label{
        font-size: 13px;
    }
}
.date__input{
    box-sizing: border-box;
}
.admin-roles_column-width{
    width: 16.6%;
}
@media(max-width: 600px){
    .admin-roles_column-width{
        width: 88%;
    }
}
.is-active_icon--success{
    color: #198754;
}
.is-active_icon--danger{
    color: #dc3545;
}
.admin-categories_column-width {
    width: 16.66%;
}
.admin-categories_name {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.admin-categories_name span {
    margin-right:1rem
}
@media(max-width: 600px){
    .admin-categories_column-width {
        width: 88%;
    }
}
@media(max-width: 430px){
    .is-active_icon--success svg{
        width: 19px;
        height: 19px;
    }
}

.is-active_icon--success{
    color: #198754;
}
.is-active_icon--danger{
    color: #dc3545;
}
.editor-wrapper.height_100px .ql-editor{
    height: 100px !important;
}
/*Editor */
.ql-editor{
  height: 200px !important;
}
.editor-wrapper{
  background: white;
  overflow-x: auto;
}
.editor-wrapper[readonly] {
  opacity: 0.8;
  /* pointer-events: none; */
  background: #b4b4b55e;
  margin-bottom: 18px;
}
.editor-wrapper .label__content-length,
.editor-wrapper .label__warning{
  display: block;
  width: 100%;
}
.editor-wrapper .label__warning{
  color: red;
  font-weight: 600;
}
.editor-wrapper .label__content-length[readonly],
.editor-wrapper .label__warning[readonly]{
  display: none;
}
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-container {
  border: 1px solid #ccc;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

/* Цвета */
 .ql-picker {
  box-sizing: border-box;
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
 .ql-color-picker.ql-background .ql-picker-item {
  box-sizing: border-box;
  background-color: #fff;
}
 .ql-color-picker.ql-color .ql-picker-item {
  box-sizing: border-box;
  background-color: #000;
}
 .ql-picker-label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
 .ql-picker-label::before {
  box-sizing: border-box;
  display: inline-block;
  line-height: 22px;
}
 .ql-picker-options {
  box-sizing: border-box;
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
 .ql-picker-options .ql-picker-item {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
 .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
 .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
 .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
 .ql-picker.ql-expanded .ql-picker-options {
  box-sizing: border-box;
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
 .ql-color-picker,
 .ql-icon-picker {
  box-sizing: border-box;
  width: 28px;
}
 .ql-color-picker .ql-picker-label,
 .ql-icon-picker .ql-picker-label {
  box-sizing: border-box;
  padding: 2px 4px;
}
 .ql-color-picker .ql-picker-label svg,
 .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
 .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
  box-sizing: border-box;
}
 .ql-icon-picker .ql-picker-item {
  box-sizing: border-box;
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
 .ql-color-picker .ql-picker-options {
  box-sizing: border-box;
  padding: 3px 5px;
  width: 134px;
}
 .ql-color-picker .ql-picker-item {
  box-sizing: border-box;
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
 .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  box-sizing: border-box;
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
/* Шрифт */
 .ql-picker.ql-font {
  box-sizing: border-box;
  width: 108px;
}
 .ql-picker.ql-font .ql-picker-label::before,
 .ql-picker.ql-font .ql-picker-item::before {
  box-sizing: border-box;
  content: 'Sans Serif';
}
 .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
 .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  box-sizing: border-box;
  content: 'Serif';
}
 .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
 .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  box-sizing: border-box;
  content: 'Monospace';
}
 .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  box-sizing: border-box;
  font-family: Georgia, Times New Roman, serif;
}
 .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  box-sizing: border-box;
  font-family: Monaco, Courier New, monospace;
}
 /* Heading */
 .ql-picker.ql-header {
  box-sizing: border-box;
  width: 98px;
}
  .ql-picker.ql-header .ql-picker-label::before,
  .ql-picker.ql-header .ql-picker-item::before {
    box-sizing: border-box;
   content: 'Normal';
}
  .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    box-sizing: border-box;
   content: 'Heading 1';
}
 .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  box-sizing: border-box;
  content: 'Heading 2';
}
 .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  box-sizing: border-box;
  content: 'Heading 3';
}
 .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  box-sizing: border-box;
  content: 'Heading 4';
}
  .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  box-sizing: border-box;
  content: 'Heading 5';
 }
  .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    box-sizing: border-box;
    content: 'Heading 6';
 }
  .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    box-sizing: border-box;
   font-size: 2em;
 }
  .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    box-sizing: border-box;
    font-size: 1.5em;
 }
  .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    box-sizing: border-box;
    font-size: 1.17em;
 }
  .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    box-sizing: border-box;
    font-size: 1em;
 }
  .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    box-sizing: border-box;
    font-size: 0.83em;
 }
  .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    box-sizing: border-box;
    font-size: 0.67em;
 }

/* Копирование HTML */
.ql-copyHTML:before {
  box-sizing: border-box;
  font-family: "Material Icons";
  font-size: 14px;
  color: rgb(68 68 68);
  content: "copy"; 
}
.ql-copyHTML:hover::before {
  box-sizing: border-box;
  font-family: "Material Icons";
  font-size: 14px;
  color: #06c;
  content: "copy"; 
}
/* Вставка HTML */
.ql-pasteHTML:before {
  box-sizing: border-box;
  font-family: "Material Icons";
  font-size: 14px;
  color: rgb(68 68 68);
  content: "paste";
}

.ql-pasteHTML:hover::before {
  box-sizing: border-box;
  font-family: "Material Icons";
  font-size: 14px;
  color: #06c;
  content: "paste";
}

/* кнопочная обертка */
.ql-customFormat .ql-picker-label{
  width: 70px;
}
.ql-customFormat .ql-picker-label::before{
  font-family: "Material Icons";
  font-size: 14px;
  color: rgb(68 68 68);
  content: "formats";
}
.ql-customFormat .ql-picker-label:hover::before{
  box-sizing: border-box;
  font-family: "Material Icons";
  font-size: 14px;
  color: #06c;
  content: "formats";
}

.ql-customFormat .ql-picker-item::before{
  font-family: "Material Icons";
  font-size: 14px;
  color: rgb(68 68 68);
  content: "formats";
}
.ql-customFormat .ql-picker-item:hover::before{
  font-family: "Material Icons";
  font-size: 14px;
  color: #06c;
  content: "formats";
}

.ql-customFormat .ql-picker-item[data-value="btn__color_blue"]::before,
.ql-customFormat .ql-picker-label[data-value="btn__color_blue"]::before{
  font-family: "Material Icons";
  font-size: 14px;
  color: rgb(68 68 68);
  content: "btnLink";
}
.ql-customFormat .ql-picker-label[data-value="btn__color_blue"].ql-active::before,
.ql-customFormat .ql-picker-item[data-value="btn__color_blue"]:hover::before{
  font-family: "Material Icons";
  font-size: 14px;
  color: #06c;
  content: "btnLink";
}



/* Выравнивание */
.ql-customAlign .ql-picker-label{
  width: 32px;
}
.ql-customAlign .ql-picker-item::before{
  content: url(/static/media/align-text-left.e01f6324123f9abbcfb7.svg);
  font-size: 12px;
}
.ql-customAlign .ql-picker-label:hover::before{
  content: url(/static/media/align-text-left-blue.10812d3e466b23981982.svg);
  font-size: 12px;
}
.ql-customAlign .ql-picker-label::before{
  content: url(/static/media/align-text-left.e01f6324123f9abbcfb7.svg);
  width: 15px;
  height: 15px;
  margin-top: 2px;
  position: absolute;
  left: 0;
}

.ql-customAlign .ql-picker-item[data-value="r"]::before,
.ql-customAlign .ql-picker-label[data-value="r"]::before{
  content: url(/static/media/align-text-right.9c4998414e30f7faf312.svg);
}
.ql-customAlign .ql-picker-label[data-value="r"].ql-active::before,
.ql-customAlign .ql-picker-item[data-value="r"]:hover::before{
  content: url(/static/media/align-text-right-blue.45adf02800591f43c059.svg);
}

.ql-customAlign .ql-picker-item[data-value="c"]::before,
.ql-customAlign .ql-picker-label[data-value="c"]::before{
  content: url(/static/media/align-text-center.aa6a9a542caf066b81ed.svg);
}
.ql-customAlign .ql-picker-label[data-value="c"].ql-active::before,
.ql-customAlign .ql-picker-item[data-value="c"]:hover::before{
  content: url(/static/media/align-text-center-blue.88d7fa0e96ddf87cc5bb.svg);
}

.ql-customAlign .ql-picker-item[data-value="j"]::before,
.ql-customAlign .ql-picker-label[data-value="j"]::before{
  content: url(/static/media/align-text-justify.a0c06b0a0fa34ba27046.svg);
}
.ql-customAlign .ql-picker-label[data-value="j"].ql-active::before,
.ql-customAlign .ql-picker-item[data-value="j"]:hover::before{
  content: url(/static/media/align-text-justify-blue.7b510a423ffc3a6a6897.svg);
}

/* Размер шрифта */
.ql-size{
  width: 90px;
}
.ql-size .ql-picker-label::before{
   content: "Font-size";
}
.ql-size .ql-picker-item::before{
   content: "12px";
}
.ql-size .ql-picker-item[data-value="10"]::before,
.ql-size .ql-picker-label[data-value='10']::before{
   content: "10px";
}
.ql-size .ql-picker-item[data-value="12"]::before,
.ql-size .ql-picker-label[data-value='12']::before{
   content: "12px";
}
.ql-size .ql-picker-item[data-value="14"]::before,
.ql-size .ql-picker-label[data-value='14']::before{
   content: "14px";
}
.ql-size .ql-picker-item[data-value="16"]::before,
.ql-size .ql-picker-label[data-value='16']::before{
   content: "16px";
}
.ql-size .ql-picker-item[data-value="18"]::before,
.ql-size .ql-picker-label[data-value='18']::before{
   content: "18px";
}
.ql-size .ql-picker-item[data-value="20"]::before,
.ql-size .ql-picker-label[data-value="20"]::before {
   content: "20px";
}
.ql-size .ql-picker-item[data-value="24"]::before,
.ql-size .ql-picker-label[data-value="24"]::before {
   content: "24px";
}

/* toolbar общее */
.ql-toolbar {
  border: 1px solid #ccc;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar .ql-formats {
  margin-right: 15px;
}
.ql-toolbar .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar + .ql-container {
  border-top: 0px;
}
 .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
 .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
 .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
 .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
 .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
 .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
 .ql-tooltip a {
  line-height: 26px;
}
 .ql-tooltip.ql-editing a.ql-preview,
 .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
 .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
 .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-tooltip.ql-editing[data-mode=link]{
  left: 0 !important;
}
.ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-toolbar:after,
 .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-toolbar button,
 .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
 .ql-toolbar button svg,
 .ql-toolbar button svg {
  float: left;
  height: 100%;
}
 .ql-toolbar button:active:hover,
 .ql-toolbar button:active:hover {
  outline: none;
}
 .ql-toolbar input.ql-image[type=file],
 .ql-toolbar input.ql-image[type=file] {
  display: none;
}
 .ql-toolbar button:hover,
 .ql-toolbar button:hover,
 .ql-toolbar button:focus,
 .ql-toolbar button:focus,
 .ql-toolbar button.ql-active,
 .ql-toolbar button.ql-active,
 .ql-toolbar .ql-picker-label:hover,
 .ql-toolbar .ql-picker-label:hover,
 .ql-toolbar .ql-picker-label.ql-active,
 .ql-toolbar .ql-picker-label.ql-active,
 .ql-toolbar .ql-picker-item:hover,
 .ql-toolbar .ql-picker-item:hover,
 .ql-toolbar .ql-picker-item.ql-selected,
 .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-toolbar button:hover .ql-fill,
 .ql-toolbar button:hover .ql-fill,
.ql-toolbar button:focus .ql-fill,
 .ql-toolbar button:focus .ql-fill,
.ql-toolbar button.ql-active .ql-fill,
 .ql-toolbar button.ql-active .ql-fill,
.ql-toolbar .ql-picker-label:hover .ql-fill,
 .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-toolbar .ql-picker-label.ql-active .ql-fill,
 .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-toolbar .ql-picker-item:hover .ql-fill,
 .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
 .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-toolbar button:hover .ql-stroke.ql-fill,
 .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-toolbar button:focus .ql-stroke.ql-fill,
 .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-toolbar button.ql-active .ql-stroke.ql-fill,
 .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
 .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
 .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
 .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
 .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-toolbar button:hover .ql-stroke,
 .ql-toolbar button:hover .ql-stroke,
.ql-toolbar button:focus .ql-stroke,
 .ql-toolbar button:focus .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke,
 .ql-toolbar button.ql-active .ql-stroke,
.ql-toolbar .ql-picker-label:hover .ql-stroke,
 .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
 .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-toolbar .ql-picker-item:hover .ql-stroke,
 .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
 .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-toolbar button:hover .ql-stroke-miter,
 .ql-toolbar button:hover .ql-stroke-miter,
.ql-toolbar button:focus .ql-stroke-miter,
 .ql-toolbar button:focus .ql-stroke-miter,
.ql-toolbar button.ql-active .ql-stroke-miter,
 .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
 .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
 .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
 .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-toolbar button:hover:not(.ql-active),
   .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-toolbar button:hover:not(.ql-active) .ql-fill,
   .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
   .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
   .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
   .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
 .ql-hidden {
  display: none;
}
 .ql-out-bottom,
 .ql-out-top {
  visibility: hidden;
}
 .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
 .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
 .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
 .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
 .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
 .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
 .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
 .ql-fill,
 .ql-stroke.ql-fill {
  fill: #444;
}
 .ql-empty {
  fill: none;
}
 .ql-even {
  fill-rule: evenodd;
}
 .ql-thin,
 .ql-stroke.ql-thin {
  stroke-width: 1;
}
 .ql-transparent {
  opacity: 0.4;
}
 .ql-direction svg:last-child {
  display: none;
}
 .ql-direction.ql-active svg:last-child {
  display: inline;
}
 .ql-direction.ql-active svg:first-child {
  display: none;
}
 .ql-editor h1 {
  font-size: 2em;
}
 .ql-editor h2 {
  font-size: 1.5em;
}
 .ql-editor h3 {
  font-size: 1.17em;
}
 .ql-editor h4 {
  font-size: 1em;
}
 .ql-editor h5 {
  font-size: 0.83em;
}
 .ql-editor h6 {
  font-size: 0.67em;
}
 .ql-editor img {
  max-width: 100%;
}

/* !!Импортировать данный файл если используется вывод html-шаблона quill!! */

/* Выравнивание */
.ql-al-r{
    text-align: right;
}
.ql-al-c{
    text-align: center;
}
.ql-al-j{
    text-align: justify;
}
/* Шрифт */
.ql-font-serif {
   font-family: Georgia, Times New Roman, serif;
}
.ql-font-monospace {
   font-family: Monaco, Courier New, monospace;
}

/* Размер шрифта */
.ql-fs-10{
    font-size: 10px;
 }
 .ql-fs-12{
    font-size: 12px;
 }
 .ql-fs-14{
    font-size: 14px;
 }
 .ql-fs-16{
    font-size: 16px;
 }
 .ql-fs-18{
    font-size: 18px;
 }
 .ql-fs-20{
    font-size: 20px;
 }
 .ql-fs-24{
    font-size: 24px;
 }
 /* ссылка */
 .ql-editor a {
   text-decoration: none;
 }
/* Отступ абзаца + нумерованный(и маркированный) список */
.ql-editor ol li,
.ql-editor ul li {
   padding-left: 1.5em;
 }
.ql-editor ol > li,
.ql-editor ul > li {
   list-style-type: none;
 }
.ql-editor ul > li::before {
   content: '\2022';
 }
.ql-editor ol li {
   counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
   counter-increment: list-0;
 }
.ql-editor ol li:before {
   content: counter(list-0, decimal) '. ';
 }
ol li.ql-tab-1 {
   counter-increment: list-1 !important;
 }
ol li.ql-tab-1:before {
   content: counter(list-1, lower-alpha) '. ' !important;
 }
ol li.ql-tab-1 {
   counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9 !important;
 }
ol li.ql-tab-2 {
   counter-increment: list-2;
 }
ol li.ql-tab-2:before {
   content: counter(list-2, lower-roman) '. ';
 }
ol li.ql-tab-2 {
   counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
ol li.ql-tab-3 {
   counter-increment: list-3;
 }
ol li.ql-tab-3:before {
   content: counter(list-3, decimal) '. ';
 }
ol li.ql-tab-3 {
   counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
 }
ol li.ql-tab-4 {
   counter-increment: list-4;
 }
ol li.ql-tab-4:before {
   content: counter(list-4, lower-alpha) '. ';
 }
ol li.ql-tab-4 {
   counter-reset: list-5 list-6 list-7 list-8 list-9;
 }
ol li.ql-tab-5 {
   counter-increment: list-5;
 }
ol li.ql-tab-5:before {
   content: counter(list-5, lower-roman) '. ';
 }
ol li.ql-tab-5 {
   counter-reset: list-6 list-7 list-8 list-9;
 }
ol li.ql-tab-6 {
   counter-increment: list-6;
 }
ol li.ql-tab-6:before {
   content: counter(list-6, decimal) '. ';
 }
ol li.ql-tab-6 {
   counter-reset: list-7 list-8 list-9;
 }
ol li.ql-tab-7 {
   counter-increment: list-7;
 }
ol li.ql-tab-7:before {
   content: counter(list-7, lower-alpha) '. ';
 }
ol li.ql-tab-7 {
   counter-reset: list-8 list-9;
 }
ol li.ql-tab-8 {
   counter-increment: list-8;
 }
ol li.ql-tab-8:before {
   content: counter(list-8, lower-roman) '. ';
 }
ol li.ql-tab-8 {
   counter-reset: list-9;
 }
ol li.ql-tab-9 {
   counter-increment: list-9;
 }
ol li.ql-tab-9:before {
   content: counter(list-9, decimal) '. ';
 }
.ql-tab-1:not(.ql-direction-rtl) {
   padding-left: 3em;
 }
li.ql-tab-1:not(.ql-direction-rtl) {
   padding-left: 4.5em !important;;
 }
.ql-tab-1.ql-direction-rtl.ql-align-r {
   padding-right: 3em;
 }
li.ql-tab-1.ql-direction-rtl.ql-align-r {
   padding-right: 4.5em;
 }
.ql-tab-2:not(.ql-direction-rtl) {
   padding-left: 6em;
 }
li.ql-tab-2:not(.ql-direction-rtl) {
   padding-left: 7.5em !important;
 }
.ql-tab-2.ql-direction-rtl.ql-align-r {
   padding-right: 6em;
 }
li.ql-tab-2.ql-direction-rtl.ql-align-r {
   padding-right: 7.5em;
 }
.ql-tab-3:not(.ql-direction-rtl) {
   padding-left: 9em;
 }
li.ql-tab-3:not(.ql-direction-rtl) {
   padding-left: 10.5em !important;
 }
.ql-tab-3.ql-direction-rtl.ql-align-r {
   padding-right: 9em;
 }
li.ql-tab-3.ql-direction-rtl.ql-align-r {
   padding-right: 10.5em;
 }
.ql-tab-4:not(.ql-direction-rtl) {
   padding-left: 12em;
 }
li.ql-tab-4:not(.ql-direction-rtl) {
   padding-left: 13.5em !important;
 }
.ql-tab-4.ql-direction-rtl.ql-align-r {
   padding-right: 12em;
 }
li.ql-tab-4.ql-direction-rtl.ql-align-r {
   padding-right: 13.5em;
 }
.ql-tab-5:not(.ql-direction-rtl) {
   padding-left: 15em;
 }
li.ql-tab-5:not(.ql-direction-rtl) {
   padding-left: 16.5em !important;
 }
.ql-tab-5.ql-direction-rtl.ql-align-r {
   padding-right: 15em;
 }
li.ql-tab-5.ql-direction-rtl.ql-align-r {
   padding-right: 16.5em;
 }

 /* кнопочная обертка */
 .ql-btn__color_blue {
   width: 250px;
   font-size: 20px;
   color: #FFFFFF;
   background-color: #1669DF;
   border: 1px solid #0047BC;
   border-radius: 160px;
   font-size: 16px;
   font-weight: 500;
   line-height: 20px;
   font-family: 'RobotoCondensed-Medium';
   padding: 10px 20px;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
   text-decoration: none !important;
}
.ql-btn__color_blue:hover{
	color: #0047BC;
	background-color: #FFF;
}
 /* Цвет текста*/
.ql-cl-red{
    color: #e60000;
 }
 .ql-cl-orange{
    color: #ff9900;
 }
 .ql-cl-yellow{
    color: #ffff00;
 }
 .ql-cl-green{
    color: #008a00;
 }
 .ql-cl-blue{
    color: #0d6efd;
 }
 .ql-cl-pink{
    color: #9933ff;
 }
 .ql-cl-white{
    color: #ffffff;
 }

/* общие каунтеры */
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.is-active_icon--success{
    color: #198754;
}
.is-active_icon--danger{
    color: #dc3545;
}
.is-active_icon--warning{
    color: #ffc107;
}
.is-active_icon--manifest{
    color: #ff9800;
    font-weight: 500;
}
.admin-products_column-width {
    width: 10%;
}
/* .options-dropdown{
    transform: translateX(0) translateY(-100%);
} */
@media(max-width: 600px){
    .admin-products_column-width {
        width: 88%;
    }
}

.modal__textarea {
    width: 100%;
    resize: none;
    border: solid 1px black;
}

.textarea__input_container {
    position: relative;
    display: flex;
    align-items: center;
}

.textarea__input {
    min-width: 100%;
    box-sizing: border-box;
    min-height: 20em;
    resize: none;
    width: 100%;
    padding-right: 45px;
    /* Увеличьте это значение, чтобы сделать место для иконки */
}
.pages__show-item .textarea__input{
    min-height: 10em;
} 
.textarea__button {
    position: absolute;
    top: 8%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}
.pages__show-item .textarea__button{
    top: 15%;
}
.textarea__button-icon {
    color: #6c757d;
    cursor: pointer;
}

.textarea-icon.readonly {
    -webkit-user-select: none;
            user-select: none;
}

.modal-textarea[readonly] {
    pointer-events: none;
}

.textarea__input_container-modal {
    position: relative;
    display: flex;
    width: 100%;
}
.textarea__input-modal {
    min-width: 100%;
    box-sizing: border-box;
    resize: none;
    width: 100%;
    padding-right: 45px;
    /* Увеличьте это значение, чтобы сделать место для иконки */
}
.textarea__button-modal {
    position: absolute;
    top: 1.5rem;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}
@media(max-width: 450px){
    .textarea__input{
        font-size: 13px;
    }
}
.image-dimensions {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.size-warning {
  color: #ff0000;
}
.renderRow_list{
    margin-bottom: 0.25rem;
}
.render-row_extra-product-name__content{
    display: flex !important;
    align-items: center !important;
}
.render-row_extra-product-name__content_text{
    margin-left: 0.25rem;
}
.render-row_extra-product-name__content_icon--success{
    color: #198754;
}
.render-row_extra-product-name__content_icon--danger{
    color: #dc3545;
}
.admin-promocodes_column-width {
    width: 9.33%;
}

.admin-promocodes_column-width:first-child{
    max-width: 1%;
}

.admin-promocodes_promocode-link{
    color: #1e88e5;
    text-decoration: underline;
}

.admin-promocodes_promocode-copy{
    color: #1e88e5;
    font-size: medium !important;
    vertical-align: bottom;
    margin-left: 5px;
}

.admin-promocodes_promocode-copy:hover{
    cursor: pointer;
}

.promocode-input--invalid{
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 1px rgba(220,38,38,0.2);
}

.promocode-input--shake{
    animation: tip-inline-shake 0.4s ease;
}

@media(max-width: 600px){
    .admin-promocodes_column-width {
        width: 88%;
    }
}
.tip-inline{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tip-inline__icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #6B7280; /* thicker border */
  color: #6B7280; /* gray-500 */
  font-size: 12px;
  line-height: 1;
  margin-left: 6px;
  cursor: default; /* simpler cursor */
  -webkit-user-select: none;
          user-select: none;
}

.tip-inline__bubble{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  max-width: 520px; /* wider */
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  color: #6B7280; /* gray text */
  font-size: 12px; /* smaller text */
  line-height: 1.35;
  z-index: 1000;
}

.tip-inline--error .tip-inline__icon{
  border-color: #DC2626;
  color: #DC2626;
}

.tip-inline--error .tip-inline__bubble{
  border-color: #FCA5A5;
  background: #FEF2F2;
  color: #B91C1C;
}

@keyframes tip-inline-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.tip-inline--shake .tip-inline__icon{
  animation: tip-inline-shake 0.4s ease;
}

.tip-inline--shake .tip-inline__bubble{
  animation: tip-inline-shake 0.4s ease;
}



.question-hidden{
    display: none;
}
.question{
    padding-top: 15px;
}

.free_answer__label{
    display: block;
    padding-top: 5px;
}
.free_answer__input{
    display: inline-block;
    margin-top: 10px;
    margin-left: 6px;
}
.free_answer__radio-text{
    margin-right: 10px;
}
.radio__answers input[data-hide = true] {
    display: none;
}

/* Custom radio styles */
.dictionary_answers,
.free_answer__label{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.radio__answers .dictionary_answers{
    padding-top: 5px;
}
.dictionary_answers__radio,
.free_answer__radio{
    position: relative;
    width: 25px;
    height: 25px;
    /* background: #C56FFF; */
    /* box-shadow: inset 0 0 5px rgb(0 0 0 / 0.2); */
    border-radius: 50%;
    border: 1px solid #757373;
    transition: 300ms;
    cursor: pointer;
}
.dictionary_answers__radio-text,
.free_answer__radio-text{
    padding-left: 8px;
    color: #495057;
}
.dictionary_answers__radio::after,
.free_answer__radio::after {
    content: "\2714";
    position: absolute;
    top: -5px;
    left: 2px;
    width: 0px;
    height: 0px;
    font-size: 26px;
    transition: 300ms;
    overflow: hidden;
    /* Для заполнения кружком вместо галочки*/
    top: 4px;
    left: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 49%;
    content: "";
}
.dictionary_answers__radio:checked::after,
.free_answer__radio:checked::after {
    width: 25px;
    height: 25px;
    transition: 300ms;
    /* Для заполнения кружком вместо галочки*/
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #1e88e5;
}
.dictionary_answers__radio:checked:disabled,
.free_answer__radio:checked:disabled {
    background: #ccc;
    border-color: #ccc;
    pointer-events: none;
}
.dictionary_answers__radio:disabled::after,
.free_answer__radio:disabled::after {
    filter: grayscale(100%);
}
.survey__label-info{
    margin-left: 10px;
    color: red;
}
.audio-wrapper {
    width: 100%;
    max-width: 250px;
}

.audio__controls-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 4px;
}

.audio__controls-wrapper button
{
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.audio__range-wrapper {
    width: 100%;
    margin-bottom: 4px;
}

/* Стили для всего ползунка */
.audio__range-input {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    /* Цвет фона полоски */
    border-radius: 2px;
    outline: none;
}

/* Для Firefox: стиль заполненной части (прогресса) */
.audio__range-input::-moz-range-progress {
    background: #0a19ee;
    /* Цвет пройденной части */
    height: 4px;
    border-radius: 2px;
}



.audio__range-input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #0a19ee;
    /* Цвет бегунка */
    border-radius: 50%;
    cursor: pointer;
    border: none;
}


/* Для Chrome/Safari: стиль заполненной части (прогресса) */
.audio__range-input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #0a19ee 0%, #0a19ee var(--progress), #0a19ee var(--progress), #0a19ee 100%);
}

.is-active_icon--success{
    color: #198754;
}
.is-active_icon--danger{
    color: #dc3545;
}
.admin-products_column-width {
    width: 10%;
}
/* .options-dropdown{
    transform: translateX(0) translateY(-100%);
} */
.admin-cdrs-width-250{
    min-width: 250px;
}
@media(max-width: 600px){
    .admin-products_column-width {
        width: 88%;
    }
}

.photo_timeline__time-slots {
    font-family: 'AvenirNextCyr', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.photo_timeline__time-slots h3 {
    margin-bottom: 15px;
    font-family: 'AvenirNextCyr', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.photo_timeline__time-slots .slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px;
    gap: 10px;
    margin-bottom: 20px;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-right: 4px;
}

.photo_timeline__time-slots .time-slot {
    padding: 10px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
    font-family: 'AvenirNextCyr', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.photo_timeline__time-slots .time-slot:hover, .photo_timeline__time-slots .time-slot--active {
    background: #2196f3;
    border-color: #1976d2;
    color: white;
}

.photo_timeline__time-slots .time-slot--active:hover {
    background: #1976d2;
}
.admin-photo-timeline .free-range-picker h3 {
  margin-bottom: 15px;
}

.admin-photo-timeline .free-range-picker form {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.admin-photo-timeline .free-range-picker-inputs {
  display: flex;
  gap: 15px;
}

.admin-photo-timeline .free-range-picker-inputs label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-photo-timeline .free-range-picker-inputs input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.admin-photo-timeline .free-range-picker button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.admin-photo-timeline .free-range-picker button:hover {
  background: #0056b3;
}
.admin-photo-timeline .gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-photo-timeline .selection-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-photo-timeline .selected-count {
    font-weight: bold;
    color: #2196f3;
}

.admin-photo-timeline .download-selected-btn {
    background: #4caf50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.admin-photo-timeline .download-selected-btn:hover {
    background: #45a049;
}

.admin-photo-timeline .select-all-btn,
.admin-photo-timeline .clear-selection-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.admin-photo-timeline .select-all-btn:hover,
.admin-photo-timeline .clear-selection-btn:hover {
    background: #e0e0e0;
}

.admin-photo-timeline .photo-card {
    transition: all 0.2s;
}

.admin-photo-timeline .photo-image{
    width: 100%;
    height: auto;
    cursor: pointer;
}

.admin-photo-timeline .photo-card--selected {
    border-color: #2196f3;
    box-shadow: 0 0 10px rgba(33, 150, 243, 1);
}

.admin-photo-timeline .photo-checkbox {
    top: 5px;
    left: 5px;
    z-index: 2;
}

.admin-photo-timeline .photo-checkbox input {
    cursor: pointer;
    transform: scale(1.5);
}

.admin-photo-timeline .photo-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.admin-photo-timeline .original-badge {
    background: #ff9800;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
}


.admin-photo-timeline .gallery-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-photo-timeline .downloading-indicator {
    background: #ff9800;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.admin-photo-timeline .photo-status {
    top: 5px;
    right: 5px;
    z-index: 2;
}

.admin-photo-timeline .download-indicator,
.admin-photo-timeline .need-download-indicator,
.admin-photo-timeline .ready-indicator {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}

.admin-photo-timeline .download-indicator {
    background: #ff9800;
    color: white;
}

.admin-photo-timeline .ready-indicator {
    background: #4caf50;
    color: white;
}

.admin-photo-timeline .photo-card--downloading {
    opacity: 0.7;
    border-color: #ff9800 !important;
}

.admin-photo-timeline .photo-download {
    cursor: pointer;
    background: #2196f3;
    justify-content: center;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}

.admin-photo-timeline .photo-download:hover {
    background: #45a049;
}

.admin-photo-timeline .download-selected-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-photo-timeline .downloading-indicators {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-photo-timeline .downloading-remote-indicator {
    background: #ff9800;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.admin-photo-timeline .downloading-local-indicator {
    background: #2196f3;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.admin-photo-timeline .download-remote-indicator {
    background: #ff9800;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}

.admin-photo-timeline .download-local-indicator {
    background: #2196f3;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}

.admin-photo-timeline .upload-selected-btn {
    background: #ff9800;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}
.admin-photo-timeline .upload-selected-btn {
    background: #ff9800;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.admin-photo-timeline .upload-selected-btn:hover:not(:disabled) {
    background: #f57c00;
}

.admin-photo-timeline .upload-selected-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.admin-photo-timeline .download-selected-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.admin-photo-timeline .upload-selected-btn:hover:not(:disabled) {
    background: #f57c00;
}

.admin-photo-timeline .upload-selected-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.admin-photo-timeline .download-selected-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.admin-photo-timeline .need-download-indicator {
    background: #ff9800;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}
.admin-photo-timeline .original-file-not-exists{
    background: #f44336;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}

.admin-photo-timeline .ready-indicator {
    background: #4caf50;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
}

.admin-photo-timeline .photos-grid{
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    grid-gap: 10px;
    gap: 10px;
}
.admin-photo-timeline .photo-info-wrap{
    display: flex;
    gap: 5px;
    padding-bottom: 10px;
    align-items: center;
}
@media(max-width: 750px){
    .admin-photo-timeline .photo-card {
        width: 47%;
    }
}
@media(max-width: 390px){
    .admin-photo-timeline .photo-card {
        width: 100%;
    }
}

/* Стили для модального окна */
.admin-photo-timeline .photo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
}

.admin-photo-timeline .photo-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.admin-photo-timeline .modal-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.admin-photo-timeline .modal-image {
    max-width: 100%;
    max-height: calc(90vh - 60px);
    object-fit: contain;
}

.admin-photo-timeline .modal-photo-info {
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.admin-photo-timeline .modal-photo-checkbox {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.admin-photo-timeline .modal-photo-checkbox:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.admin-photo-timeline .modal-photo-checkbox.checked {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
}

.admin-photo-timeline .modal-photo-checkbox.checked:hover {
    background: #1976d2;
    border-color: #1976d2;
}

.admin-photo-timeline .modal-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.admin-photo-timeline .modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.admin-photo-timeline .modal-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.admin-photo-timeline .modal-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.admin-photo-timeline .modal-prev-btn {
    left: 20px;
}

.admin-photo-timeline .modal-next-btn {
    right: 20px;
}

.admin-photo-timeline .photo-modal-content:focus {
    outline: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .admin-photo-timeline .modal-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .admin-photo-timeline .modal-prev-btn {
        left: 10px;
    }
    
    .admin-photo-timeline .modal-next-btn {
        right: 10px;
    }
    
    .admin-photo-timeline .modal-close-btn {
        top: 10px;
        right: 10px;
    }
    
    .admin-photo-timeline .modal-photo-checkbox {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .admin-photo-timeline .modal-photo-info {
        gap: 12px;
    }
}
.admin-photo-timeline .progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.admin-photo-timeline .progress-container {
    background: white;
    padding: 24px;
    border-radius: 12px;
    min-width: 320px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: progress-appear 0.3s ease-out;
}

@keyframes progress-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.admin-photo-timeline .progress-title {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.admin-photo-timeline .progress-chunk-info {
    margin-bottom: 12px;
    font-weight: 500;
    color: #666;
    font-size: 14px;
}

.admin-photo-timeline .progress-bar {
    width: 100%;
    height: 24px;
    background: #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
}

.admin-photo-timeline .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #45a049);
    transition: width 0.4s ease;
    position: relative;
}

.admin-photo-timeline .progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.admin-photo-timeline .progress-text {
    margin-bottom: 16px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.admin-photo-timeline .progress-cancel-btn {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.admin-photo-timeline .progress-cancel-btn:hover {
    background: #d32f2f;
}

.admin-photo-timeline .progress-cancel-btn:active {
    transform: translateY(1px);
}


.admin-photo-timeline {
    align-items: center;
    font-family: 'AvenirNextCyr', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.admin-photo-timeline button, .admin-photo-timeline .date-selector .date__input {
    font-family: 'AvenirNextCyr', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.admin-photo-timeline.light {
    background: white;
    color: #333;
}

.admin-photo-timeline.dark {
    background: #1a1a1a;
    color: white;
}

.admin-photo-timeline .photo-timeline-date-selector {
    margin-bottom: 20px;
}

.admin-photo-timeline .photo-timeline-date-selector label {
    margin-right: 10px;
}

.admin-photo-timeline .photo-timeline-date-selector input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.admin-balances_column-width {
    width: 16.6%;
}
.certificate__email_content{
    display: flex;
    flex-direction: row;
}
.certificate__email {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
}
.admin-certificates_column-width{
    width: 7.69%;
}
.admin-certificates__date--expired {
    color: #dc3545;
}
.admin-certificates__date--valid {
    color: #198754;
}
@media(max-width: 600px){
    .admin-certificates_column-width{
        width: auto;
    }
}
.admin-bookings_column-width{
    width:8.33%;
}
.admin-balances_column-width{
    width: 10%;
}
@media(max-width: 600px){
    .admin-balances_column-width{
        width: 88%;
    }
}
.admin-media_column-width{
    width:8.33%;
}
.admin-balance-diff_column-width {
    width: 16.6%;
}
.admin-times_column-width{
    width: 12.5%;
}
@media(max-width: 600px){
    .admin-times_column-width{
        width: 88%;
    }
}
.admin-bookings_column-width {
    width: 7.14%;
}
.admin-bookings__time-pay-status {
    color:#6c757d;
}
@media(max-width: 600px){
    .admin-bookings_column-width{
        width: 88%;
    }
}
.admin-platforms_column-width {
    width: 16.66%
}
@media(max-width: 600px){
    .admin-platforms_column-width {
        width: 88%
    }
}
.tab_icon--success{
    color: #198754;
}
.tab_icon--danger{
    color: #dc3545;
}
.admin-banners_column-width {
    width: 9%;
}
@media(max-width: 600px){
    .admin-banners_column-width {
        width: 88%;
    }
}
.admin-competitions_column-width {
    width: 6.6%;
}
.admin-competitions_discipline {
    display: flex;
    flex-direction: column;
}
@media(max-width: 600px){
    .admin-competitions_column-width{
        width: 88%;
    }
}
.selectApi {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
.selectApi[readonly]{
    opacity: 0.7;
    pointer-events: none;
}

.selectApi-wrapper {
    position: relative;
    width: 100%;
}

.options-dropdown {
    width:100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
}

.option-item{
    cursor:pointer;
    padding: 0.5rem;
    padding: 0.3rem 0.1rem;
}

/* Start Дублирование стилей из-за неприменяемости на некоторых страницах */
.options-w_150 .options-dropdown{
    width: 150% !important;
    right: 0;
    left: auto;
}
.options-w_150-r .select__options-dropdown_is-open{
    width: 150%;
}
.options-dropdown .option-item .css-julti5-MuiSwitch-root{
    width: 150%;
}
.options-w_200-r .select__options-dropdown_is-open{
    width: 200%;
}
.options-dropdown .option-item .input-checkbox{
    width: 43px !important;
    padding: 5px !important;
    height: 24px !important;
}
.options-dropdown .option-item .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase .MuiSwitch-input{
    left: -100%;
    width: 300%;
}
.options-dropdown .option-item .css-julti5-MuiSwitch-root .css-jsexje-MuiSwitch-thumb{
    width: 16px !important;
    height: 16px !important;
    box-shadow: -1px 2px 6px 3px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
}
.options-dropdown .option-item .css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase{
    padding: 4px 0px 0px 5px;
}
@media(max-width: 1000px){
    .select-input{
        width: 240px;
    }
}
@media(max-width: 900px){
    .options-dropdown .option-item .input-checkbox{
        padding: 8px !important;
    }
    .options-dropdown .option-item .input-checkbox .MuiSwitch-thumb{
        width: 14px !important;
        height: 14px !important;
    }
    .select-input{
        width: 200px;
        font-size: 13px;
    }
    .option-item{
        font-size: 13px;
    }
    .options-w_150 .options-dropdown,
    .options-w_150-r .options-dropdown,
    .options-w_200 .options-dropdown,
    .options-w_200-r .options-dropdown{
        right: auto;
        left: auto;
    }
    .options-dropdown{
        grid-template-columns: 100%;
        width: 110% !important;
    }
    .options-w_150 .options-dropdown,
    .options-w_150-r .options-dropdown{
        width: 110% !important;
    }
    .options-dropdown .option-item .input-checkbox{
        padding: 8px !important;
    }
    .options-dropdown .option-item .input-checkbox .MuiSwitch-thumb{
        width: 14px !important;
        height: 14px !important;
    }
}

@media(max-width: 600px){
    .select-input{
        width: 100%;
    }
}

/* End Дублирование стилей из-за неприменяемости на некоторых страницах */

.selectApi-input{
    width:100%;
    box-sizing: border-box;
}

.selectApi__reset-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.selectApi__reset-button--disabled{
    pointer-events: none;
    color: #6c757d;
}


.day-item{
    display: flex;
    flex-direction: column;
    width:100%;
    max-width: 100%;
    border-radius: 1rem;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: visible;
}
.day-item__header{
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    font-weight: 600;
    border-bottom: 2px solid #949eff;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.day-item__header-date_title{
    word-wrap: break-word;
    flex: 1 1;
    font-family: AvenirNextCyr;
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: .25rem;
    min-width: 0;
    overflow: visible;
    white-space: normal;
}

.day-item__date-desktop{
    display: inline;
}

.day-item__date-mobile{
    display: none;
}

@media (max-width: 1150px) {
    .day-item__date-desktop{
        display: none;
    }
    .day-item__date-mobile{
        display: inline;
    }
    .day-item__header-date_title{
        font-size: 0.82rem;
        font-weight: 500;
        margin-bottom: 0.2rem;
    }
}
.day-item__body{
    padding: 0.25rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.day-item__body-muted{
    padding-top: 0.1rem;
    opacity: 0.6;
    text-align: center;
}

.day-item__body-pills{
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding-top: 0.1rem;
}

.day-item__summary-card{
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 0.35rem;
}

.day-item{
    --pill-bg-order: rgba(255, 193, 7, 0.78);
    --pill-border-order: rgba(255, 193, 7, 0.97);
    --pill-text-order: #1f1400;

    --pill-bg-booking: rgba(23, 162, 184, 0.82);
    --pill-border-booking: rgba(23, 162, 184, 0.98);
    --pill-text-booking: #eaffff;

    --pill-bg-none: rgba(255, 255, 255, 0.10);
    --pill-border-none: rgba(255, 255, 255, 0.30);
}

.day-item__pill{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid var(--pill-border-none);
    background: var(--pill-bg-none);
    color: rgba(255,255,255,0.95);
    box-shadow: 0 8px 22px rgba(0,0,0,0.14);

    /* легкая “техно-текстура” без перегруза */
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 55%),
        none;
}

.day-item__pill-dot{
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}

.day-item__pill--order{
    background: var(--pill-bg-order);
    border-color: var(--pill-border-order);
    color: var(--pill-text-order);
}

.day-item__pill--order .day-item__pill-dot{
    background: rgba(31, 20, 0, 0.95);
}

.day-item__pill--booking{
    background: var(--pill-bg-booking);
    border-color: var(--pill-border-booking);
    color: var(--pill-text-booking);
}

.day-item__pill--booking .day-item__pill-dot{
    background: rgba(234, 255, 255, 0.95);
}

.day-item__categories{
    margin-top: 0.35rem;
}

.day-item__categories-toggle{
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 0.25rem 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.22);
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.day-item__categories-chevron{
    transition: transform 0.2s ease;
}

.day-item__categories-chevron.is-open{
    transform: rotate(180deg);
}

.day-item__categories-list{
    margin: 0.35rem 0 0;
    padding: 0.3rem 0.45rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    scrollbar-width: thin;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, margin-top 0.22s ease, padding 0.22s ease;
    pointer-events: none;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.day-item__categories-list.is-open{
    max-height: 170px;
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.day-item__categories-scroll{
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
    .day-item__categories-list{
        transition: none;
    }
}

.day-item__categories-group + .day-item__categories-group{
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(15, 23, 42, 0.14);
}

.day-item__categories-title{
    font-size: 0.68rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.day-item__categories-items{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.day-item__categories-item{
    font-size: 0.7rem;
    line-height: 1.25;
    color: #0f172a;
    display: block;
    width: 100%;
    padding: 0.22rem 0.4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.34);
    border-left: 2px solid rgba(79, 70, 229, 0.45);
    box-sizing: border-box;
    word-break: break-word;
    text-align: left;
}

.date-range {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-range__inputs {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.date-range__input-wrapper {
    flex: 1 1;
}

.date-range__input {
    width: 100%;
}

.date-range__error {
    color: #d32f2f;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .date-range__inputs {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.day-settings-overlay{
    position: fixed;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    outline: none;
    pointer-events: none;
}

.day-settings-modal{
    background: #ffffff;
    width: min(600px, calc(100vw - 32px));
    max-width: min(640px, calc(100vw - 24px));
    border-radius: 12px;
    border: 0.5px solid rgba(0,0,0,0.18);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 720px);
    min-height: 0;
    pointer-events: auto;
}

@media (min-width: 900px){
    .day-settings-modal{
        width: min(720px, calc(100vw - 48px));
        max-width: min(780px, calc(100vw - 40px));
        max-height: min(90vh, 800px);
    }
}

@media (min-width: 1280px){
    .day-settings-modal{
        width: min(840px, calc(100vw - 64px));
        max-width: min(900px, calc(100vw - 48px));
        max-height: min(92vh, 880px);
    }
}

.day-settings-header{
    padding: 18px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 0.5px solid rgba(0,0,0,0.18);
}

.day-settings-title{
    font-size: 17px;
    font-weight: 500;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 3px;
}

.day-settings-sub{
    font-size: 13px;
    color: rgba(17,24,39,0.65);
    line-height: 1.2;
}

.day-settings-readonly-hint{
    margin: 8px 0 0;
    font-size: 12px;
    color: #92400e;
    line-height: 1.35;
}

.day-settings-modal--readonly .day-settings-section-trigger{
    cursor: default;
}

.day-settings-header-right{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.day-settings-badge{
    background: rgba(0,0,0,0.05);
    color: rgba(17,24,39,0.65);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 0.5px solid rgba(0,0,0,0.18);
}

.day-settings-close-btn{
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(17,24,39,0.65);
    display: flex;
    align-items: center;
    padding: 2px;
}

.day-settings-close-btn:hover{
    color: #111827;
}

.day-settings-body{
    flex: 1 1;
    overflow-y: auto;
    /* изоляция, чтобы z-index секций считался внутри скролла */
    isolation: isolate;
}

/* Ранние секции выше следующих — иначе выпадающий Select перекрывается триггером нижней секции */
.day-settings-body .day-settings-section{
    position: relative;
    z-index: 1;
}

.day-settings-body .day-settings-section:nth-child(1){
    z-index: 3;
}

.day-settings-body .day-settings-section:nth-child(2){
    z-index: 2;
}

.day-settings-body .day-settings-section:nth-child(3){
    z-index: 1;
}

.day-settings-section{
    border-bottom: 0.5px solid rgba(0,0,0,0.18);
}

.day-settings-section:last-child{
    border-bottom: none;
}

.day-settings-section-trigger{
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: #111827;
    text-align: left;
}

.day-settings-section-trigger:hover{
    background: rgba(0,0,0,0.05);
}

.day-settings-trigger-left{
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-settings-chevron{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s;
    color: rgba(17,24,39,0.65);
}

.day-settings-section-info{
    font-size: 13px;
    color: rgba(17,24,39,0.65);
    font-weight: 400;
}

.day-settings-section-body{
    padding: 0 24px 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: max-height 260ms ease, opacity 180ms ease, transform 260ms ease;
}

.day-settings-section-body.open{
    max-height: 2000px; /* достаточно для длинного списка категорий */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow: visible; /* не обрезать position:absolute у Select */
}

.day-settings-select-wrap{
    margin-bottom: 14px;
}

.day-settings-select-wrap select{
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 0.5px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    font-family: 'AvenirNextCyr', 'Arial', 'sans-serif';
}

.day-settings-select-wrap select:focus{
    outline: none;
    border-color: rgba(59,158,245,0.65);
}

.day-settings-matrix{
    margin-bottom: 14px;
}

.day-settings-matrix-filter{
    padding: 0 0 10px;
}

.day-settings-matrix-filter-input{
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 0.5px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-family: 'AvenirNextCyr', 'Arial', 'sans-serif';
}

.day-settings-matrix-filter-input:focus{
    outline: none;
    border-color: rgba(59,158,245,0.65);
}

/* Шапка и строки — одна сетка: подпись категории тянется, колонки переключателей из шапки */
.day-settings-matrix-head,
.day-settings-matrix-row{
    display: grid;
    align-items: center;
    grid-column-gap: 8px;
    column-gap: 8px;
}

/* Узкие экраны: равномерное деление (как раньше) */
.day-settings-matrix[data-matrix-cols="1"] .day-settings-matrix-head,
.day-settings-matrix[data-matrix-cols="1"] .day-settings-matrix-row{
    grid-template-columns: minmax(0, 1fr) auto;
}

.day-settings-matrix[data-matrix-cols="2"] .day-settings-matrix-head,
.day-settings-matrix[data-matrix-cols="2"] .day-settings-matrix-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.day-settings-matrix[data-matrix-cols="3"] .day-settings-matrix-head,
.day-settings-matrix[data-matrix-cols="3"] .day-settings-matrix-row{
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr));
}

/* Шире 700px: первая колонка шире (75% / 66%) */
@media (min-width: 700px){
    .day-settings-matrix[data-matrix-cols="1"] .day-settings-matrix-head,
    .day-settings-matrix[data-matrix-cols="1"] .day-settings-matrix-row{
        grid-template-columns: minmax(0, 6fr) minmax(0, 2fr);
    }

    .day-settings-matrix[data-matrix-cols="2"] .day-settings-matrix-head,
    .day-settings-matrix[data-matrix-cols="2"] .day-settings-matrix-row{
        grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .day-settings-matrix[data-matrix-cols="3"] .day-settings-matrix-head,
    .day-settings-matrix[data-matrix-cols="3"] .day-settings-matrix-row{
        grid-template-columns: minmax(0, 99fr) minmax(0, 17fr) minmax(0, 17fr) minmax(0, 17fr);
    }
}

.day-settings-col-labels,
.day-settings-matrix-cells{
    display: contents;
}

.day-settings-matrix-head{
    padding: 0px 24px 6px 12px;
}

.day-settings-spacer{
    min-width: 0;
}

.day-settings-col-label{
    font-size: 11px;
    color: rgba(17,24,39,0.65);
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    font-family: 'AvenirNextCyr', 'Arial', 'sans-serif';
    min-width: 0;
}

.day-settings-matrix-rows{
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 6px; /* scrollbar offset */
}

.day-settings-matrix-row{
    padding: 10px 12px;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
}

.day-settings-row-label{
    min-width: 0;
    font-size: 14px;
    color: #111827;
    font-family: 'AvenirNextCyr', 'Arial', 'sans-serif';
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.day-settings-matrix-cell{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.day-settings-switch{
    position: relative;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.day-settings-switch input{
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.day-settings-track{
    position: absolute;
    inset: 0;
    background: #d1d1d6;
    border-radius: 10px;
    transition: background 0.2s;
}

.day-settings-thumb{
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.day-settings-switch input:checked + .day-settings-track{
    background: #3b9ef5;
}
.day-settings-switch input:checked ~ .day-settings-thumb{
    transform: translateX(16px);
}

.day-settings-section-actions{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.day-settings-save-btn{
    background: #3b9ef5;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 116px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.day-settings-save-btn:hover{
    background: #2a8fe6;
}

.day-settings-save-btn:disabled{
    opacity: 0.75;
    cursor: default;
}

.day-settings-btn-spinner{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    animation: day-settings-spin 0.8s linear infinite;
}

.day-settings-clear-btn{
    background: #fff;
    color: #334155;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.day-settings-clear-btn:hover{
    background: rgba(0,0,0,0.05);
}

.day-settings-clear-btn:disabled{
    opacity: 0.65;
    cursor: default;
}

@keyframes day-settings-spin{
    to{
        transform: rotate(360deg);
    }
}

.day-settings-footer{
    padding: 14px 24px;
    border-top: 0.5px solid rgba(0,0,0,0.18);
    display: flex;
    justify-content: flex-end;
}

.day-settings-cancel-btn{
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: rgba(17,24,39,0.65);
    padding: 7px 12px;
    border-radius: 6px;
    font-family: 'AvenirNextCyr', 'Arial', 'sans-serif';
}
.day-settings-cancel-btn:hover{
    background: rgba(0,0,0,0.05);
    color: #111827;
}


.calendar {
    font-family: 'AvenirNextCyr', Arial, sans-serif;
    font-size: 0.75rem;
    -webkit-user-select: none;
            user-select: none;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.calendar__months-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: stretch;
    align-items: flex-start;
    align-content: flex-start;
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}
.calendar__month-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    align-self: flex-start;
}

.calendar__loading {
    width: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar__loading-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(25, 118, 210, 0.2);
    border-top-color: #1976d2;
    animation: calendar-spin 0.8s linear infinite;
}

@keyframes calendar-spin {
    to {
        transform: rotate(360deg);
    }
}
.calendar__month-wrapper .calendar-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: visible;
}
.calendar__month-wrapper .calendar-table colgroup,
.calendar__month-wrapper .calendar-table col {
    width: calc(100% / 7) !important;
}
.calendar__month-wrapper .calendar-table th,
.calendar__month-wrapper .calendar-table td {
    width: calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    min-width: calc(100% / 7) !important;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
}
.calendar__month-wrapper .calendar-table tbody {
    height: auto;
    min-height: 0;
}
.calendar__month-wrapper .calendar-table tbody tr {
    height: auto;
    min-height: 0;
}
.calendar__month-wrapper .calendar-table tbody td {
    height: auto;
    min-height: 0;
    max-height: none;
    vertical-align: top;
}
.calendar__month-wrapper .calendar-table tbody td .day-item {
    height: auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}
@media (min-width: 769px) and (max-width: 1023px) {
    .calendar__month-wrapper {
        width: 100%;
        min-width: 600px;
        max-width: 100%;
    }
}
@media (min-width: 1024px) and (max-width: 1399px) {
    .calendar__month-wrapper {
        width: 100%;
        min-width: 700px;
        max-width: 100%;
    }
}
@media (min-width: 1400px) {
    .calendar__month-wrapper {
        width: 100%;
        min-width: 800px;
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .calendar__months-container {
        gap: 2.5rem;
    }
}

.calendar table {
    border-collapse: separate;
    border-spacing: 0.5rem;
    border-radius: 0.25rem;
    table-layout: fixed;
    width: 100%;
}
.calendar th,
.calendar td {
    /* text-align: left !important; */
    border-radius: 0.25rem;
}
.calendar th {
    padding: 12px 10px;
    width: calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    min-width: calc(100% / 7) !important;
}

.calendar th {
    border: none;
}

.calendar td {
    border: none;
    cursor: pointer;
    vertical-align: top;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0.5rem;
    width: calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    min-width: calc(100% / 7) !important;
    box-sizing: border-box;
}
.calendar tr {
    height: auto;
    min-height: 0;
}

.calendar .out-of-month, .calendar .out-of-month::before {
    opacity: 1 !important;
    color: #7a869f !important;
    pointer-events: none;
}

.calendar td.day.out-of-month {
    background-color: #e6ecf6 !important;
    border: 1px dashed rgba(122, 134, 159, 0.45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.12) 0 8px,
        rgba(255, 255, 255, 0) 8px 16px
    );
}

.calendar .is-disabled{
    /* pointer-events: none !important; */
    opacity: 0.6 !important;
    cursor: default;
}
.calendar .is-disabled:hover {
    cursor: default;
}
.calendar .out-of-range {
    opacity: 0.2 !important;
    background-color: #e0e0e0 !important;
    color: #999999 !important;
    /* pointer-events: none; */
    filter: grayscale(100%);
    cursor: default;
}
.calendar .out-of-range:hover {
    cursor: default;
}
.calendar .day{
    background-color: #bcd9ff;
}
.calendar .isWeekend{
    background-color: #ff8c9e !important;
    color: #3b1f24 !important; 
}

.calendar .isClosed{

    background-color: #6c757d !important;
    color:#fff !important;
}

.calendar .active {
    background-color: rgba(22, 105, 223, .7) !important;
    color: white !important;
    -webkit-user-select: none;
            user-select: none;
}

.calendar__header{
    box-sizing: border-box;
    padding: 0.75rem 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    transition: background-color 0.3s;
    position: -webkit-sticky; 
    position: sticky;
    top: 115px;
    z-index: 10;
    min-height: 6rem;
}
.calendar__header-button{
    border: none;
    cursor: pointer;
    background-color: transparent;
    font-size: x-large;
}
.calendar__header_center-date{
    font-weight: 500;
    font-size: large;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}
.calendar__header_center-date .label {
    display: none;
    width: 0;
}
.calendar__header_center-date--reset-button {
    transform: translateX(-30px) rotate(0deg); /* Начальное состояние */
    height: 1.3rem !important;
    color: #fff;
    cursor: pointer;
    /* background-color: rgb(220, 53, 69); */
    background-color: #1976d252;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 1rem;
    transition: transform 0.8s ease; /* Плавный переход для трансформации */
}
.calendar-transition .content-group-box__icon{
    transform: translateX(-30px);
}

.calendar__header_bulk-button:hover {
    background-color: rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.5);
}

.calendar__header_bulk-button:active {
    background-color: rgba(25, 118, 210, 0.3);
}

.calendar__header_bulk-icon {
    color: rgb(25, 118, 210);
    font-size: 1.5rem !important;
}

.calendar__header_bulk-count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: rgba(220, 53, 69, 0.9);
    color: white;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    border: 2px solid white;
}

/* ContentGroupBox для десктопов */
.calendar__header_bulk-desktop {
    display: block;
}

/* На мобильных устройствах показываем кнопку, скрываем ContentGroupBox */
@media (max-width: 768px) {
    .calendar__header_bulk-button--mobile {
        display: flex;
    }
    
    .calendar__header_bulk-desktop {
        display: none;
    }
}
.calendar__header_center-date--reset-button:hover {
    transform: translateX(-30px) rotate(180deg); /* Поворот на 180 градусов при наведении */
    transition: transform 0.5s ease; /* Плавный переход для трансформации */
}

.calendar__header_center-date--reset-button:not(:hover) {
    transform: translateX(-30px) rotate(0deg); /* Возврат в исходное состояние при убирании курсора */
    transition: transform 0.5s ease; /* Плавный переход для трансформации */
}
.calendar__header_center-date-year {
    width: 4rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    outline: none;
}
.calendar__header_center-date-month {
    width: 6rem ;
}
.calendar__header_center-date-month .select-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    padding-right: 0.75rem;
    outline: none;
}
.calendar__header_center-date-month .select__reset-button {
    display: none;
}

.contentGroupBox__calendar-icon--active{
    animation: blink 2s infinite alternate !important;
    color: rgba(22, 105, 223, .7) !important;

}

.contentGroupBox--active{
    pointer-events: all !important;
}

.contentGroupBox__dropdown_cross {
    color: red;
}
.contentGroupBox__dropdown{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
    font-size: larger !important;
}
.calendar__header_range-input-wrapper .label{
    width: auto;
}
.calendar__header_center{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.calendar__header_switch {
    display: flex;
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
    gap: 0.5rem;
}
.calendar__header_switch-content {
    position: relative;
    min-height: 5.5rem; /* достаточно для двух полей по вертикали */
    display: inline-flex;
    align-items: flex-start;
    min-width: 13rem;
    flex-shrink: 0;
    overflow: visible;
}

.calendar__header-bulk-btn {
    margin-left: 0.5rem;
    height: 36px;
    width: 36px;
    padding: 0;
    background-color: rgba(25, 118, 210, 0.1);
    border: 1px solid rgba(25, 118, 210, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    color: rgb(25, 118, 210);
    font-weight: 600;
    font-size: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.calendar__header-bulk-btn:hover {
    background-color: rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.5);
}
.calendar__header-bulk-btn:active {
    background-color: rgba(25, 118, 210, 0.3);
}

.calendar__header-bulk-btn-icon{
    font-size: 1.35rem !important;
}
.calendar__header_switch .calendar__header_center-date {
    transition: opacity 0.2s ease;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    z-index: 1;
}
.calendar__header_switch .calendar__header_range {
    transition: opacity 0.2s ease;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
}

/* Режим одиночного выбора: виден месяц/год, диапазон спрятан */
.calendar__header_switch--single .calendar__header_center-date {
    opacity: 1;
    pointer-events: all;
}
.calendar__header_switch--single .calendar__header_range {
    opacity: 0;
    pointer-events: none;
}

/* Режим диапазона: месяц/год спрятан, виден блок диапазона */
.calendar__header_switch--range .calendar__header_center-date {
    opacity: 0;
    pointer-events: none;
}
.calendar__header_switch--range .calendar__header_range {
    opacity: 1;
    pointer-events: all;
}
.calendar__header_mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: rgba(25, 118, 210, 0.1);
    border: 1px solid rgba(25, 118, 210, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
    margin-top: 0;
}
.calendar__header_mode-toggle:hover {
    background-color: rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.5);
}
.calendar__header_mode-toggle--active {
    background-color: rgba(25, 118, 210, 0.25);
    border-color: rgba(25, 118, 210, 0.8);
}
.calendar__header_mode-icon {
    color: rgb(25, 118, 210);
    font-size: 1.5rem !important;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.calendar__header_range {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-left: 0;
    width: auto;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
}
.calendar__header_range-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.calendar__header_range-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #002f98;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 2rem;
}
.calendar__header_range-input {
    flex: 1 1;
    min-width: 0;
}
.calendar__header_range-input .label {
    display: none;
}
.calendar__header_range-input input,
.calendar__header_range-input .date__input {
    width: 100%;
    min-width: 12rem;
    max-width: 12rem;
}
.contentGroupBox__dropdown_link:hover{
    color:#30578d;
}

.contentGroupBox__dropdown_link {
    cursor: pointer;
}
.contentGroupBox__dropdown--row {
    display: flex;
    flex-direction: row;
}
.contentGroupBox__dropdown--buttons {
    display: flex;
    flex-direction: column;
    color:#dc3545;
    align-content: center;
    margin-top: 0.75rem;
    margin-left: auto;
    padding-right: 0.25rem;
}
.contentGroupBox__dropdown--buttons-success {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    font-size: small !important;
    border-color: #30578d;
}
.contentGroupBox__dropdown--buttons-decline {
    background-color: transparent;
    border-color:#dc3545;
    color:#dc3545;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    font-size: small !important;
    margin-bottom: 0.25rem;
}
.calendar__header_center-list {
    margin-top: 0.5rem;
}
.calendar__save-data_warning {
    padding-bottom: 1rem;
    color: #30578d;
}

 /* Start adaptive mobile */
 @media(max-width:1150px) {
    .calendar-table__days{
        display: none;
    }
    .calendar td.day.out-of-month {
        display: none !important;
    }
    .calendar-row td.day:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
    .calendar-row td.day.out-of-month:before{
        content: none;
    }
    .calendar-row{
        display: grid;
        grid-template-columns: repeat(4, 190px);
        position: relative;
        padding-top: 1.45rem;
    }
    .calendar-row::before{
        content: attr(data-week-label);
        grid-column: 1 / -1;
        position: absolute;
        top: 5px;
        left: 0.35rem;
        right: 0.35rem;
        font-size: 0.68rem;
        font-weight: 700;
        color: #4b5b78;
        letter-spacing: 0.01em;
    }
    /* Отключаем фиксированную ширину для адаптивности */
    .calendar__month-wrapper .calendar-table {
        table-layout: auto;
    }
    .calendar__month-wrapper .calendar-table th,
    .calendar__month-wrapper .calendar-table td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
 }
 @media(max-width:900px) {
    .calendar td.day.out-of-month {
        display: none !important;
    }
    .calendar-table .calendar-row {
        margin-bottom: 10px;
    }
    .calendar-row{
        display: grid;
        grid-template-columns: repeat(2, 46%);
        justify-content: space-evenly;
        border: 2px solid rgb(25, 118, 210);
        border-radius: 20px;
        padding-top: 1.55rem;
    }
    td.day.day{
        border-radius: 10px;
        margin-top: 10px;
    }
    .calendar-row td.day:last-child {
        margin-bottom: 10px;
    }
    /* Отключаем фиксированную ширину для адаптивности */
    .calendar__month-wrapper .calendar-table {
        table-layout: auto;
    }
    .calendar__month-wrapper .calendar-table th,
    .calendar__month-wrapper .calendar-table td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
 }
 @media(max-width: 600px) {
    .calendar-table {
        border: 0;
        table-layout: auto;
    }
    .calendar-table thead {
        display: none;
    }
    .calendar-table .calendar-row {
        margin-bottom: 10px;
        display: block;
        border: 2px solid rgb(25, 118, 210);
        border-radius: 20px;
        position: relative;
        padding-top: 1.55rem;
    }
    .calendar-table .calendar-row::before {
        content: attr(data-week-label);
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: #4b5b78;
    }
    .calendar-row td.day {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
        border-right: 1px solid transparent;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .calendar-row td.day:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-family: 'AvenirNextCyr';
        font-weight: 600;
    }
    .calendar-row td.day:first-child {
        margin-top: 0px;
    }
    .calendar-row td.day:last-child {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom: 0;
        margin-bottom: 0px;
    }
    /* Отключаем фиксированную ширину для адаптивности */
    .calendar__month-wrapper .calendar-table {
        table-layout: auto;
        width: 100%;
    }
    .calendar__month-wrapper .calendar-table th,
    .calendar__month-wrapper .calendar-table td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .calendar__month-wrapper {
        min-width: 0 !important;
    }
}
@media(max-width: 450px) {
    .modal__day {
        width: 300px !important;
    }
    .calendar__header{
        background: rgb(25 118 210 / 29%);
        border-radius: 20px;
        top: 135px;
        padding: 5px !important;
    }
    .step-buy__content-row .calendar__header{
        position: static;
    }
    .calendar__header_center-date-year{
        padding: 5px 8px;
    }
    .calendar__header-button{
        padding: 0px !important;
    }
    .calendar__header_center{
        flex-wrap: wrap;
    }
    .calendar-transition .content-group-box__icon{
        transform: translateX(0px);
    }
    .calendar-transition.content-group-box{
        padding: 0px 0px 0px 5px;
    }
    .calendar__header_center-date{
        position: relative;
    }
    .calendar__header_center-date--reset-button{
        position: absolute;
        right: -20px;
    }
    .contentGroupBox__dropdown_link{
        font-size: 13px;
        margin-right: 10px;
    }
    .calendar__header_mode-toggle {
        margin-left: 0.5rem;
        padding: 0.35rem;
        min-width: 2rem;
        height: 2rem;
    }
    .calendar__header_mode-icon {
        font-size: 1.2rem !important;
    }
    .calendar__header_range {
        margin-left: 0.5rem;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
        margin-top: 0.5rem;
    }
    .calendar__header_range-input {
        max-width: 100%;
        width: 100%;
    }
}
 /* End adaptive mobile */

/* --- Улучшенная адаптивность календаря --- */

/* Крупные ноутбуки / планшеты */
@media (max-width: 1200px) {
    .calendar {
        font-size: 0.7rem;
    }
    .calendar th {
        padding: 6px;
    }
    .calendar table {
        border-spacing: 0.25rem;
    }
}

/* Планшеты и узкие ноутбуки */
@media (max-width: 900px) {
    .calendar {
        font-size: 0.68rem;
    }
    .calendar__header_center-date-month {
        width: 5rem;
    }
    .calendar__header_center-date-year {
        width: 3.5rem;
    }
}

/* Мобильные: добавляем горизонтальный скролл только если не используется grid */
@media (max-width: 768px) {
    .calendar {
        overflow-x: auto;
    }
    .calendar td {
        padding: 0.35rem !important;
    }
    .calendar th {
        padding: 8px 6px !important;
    }
    /* Убираем min-width для таблицы, чтобы grid мог работать */
    .calendar table {
        min-width: 0;
        width: 100%;
    }
    .calendar__month-wrapper {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }
    .calendar__header {
        position: static;
        top: auto;
    }
    .modal__day {
        width: 95% !important;
        max-width: 95vw;
        max-height: 90vh !important;
        min-height: 350px;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .modal__day .card {
        max-height: 90vh;
        width: 100%;
    }
}

/* Маленькие телефоны */
@media (max-width: 480px) {
    .calendar {
        font-size: 0.62rem;
    }
    .calendar td {
        padding: 0.28rem !important;
    }
    .calendar__months-container {
        gap: 1rem !important;
    }
    .calendar__header_center {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .calendar__header_center-date--reset-button {
        transform: translateX(0);
    }
    .modal__day {
        width: 95% !important;
        max-width: 95vw;
        max-height: 90vh !important;
        min-height: 300px;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .modal__day .card {
        max-height: 90vh;
        width: 100%;
    }
}
.admin-calendars_column-width {
    width: 14.28%;
}

.calendar-wrapper {
    display: flex;
    border: 0.15rem black solid;
    border-radius: 1rem;
    padding: 0.5rem;
    background-color: rgba(0,0,0,0.025);
}

@media(max-width: 600px){
    .admin-calendars_column-width {
        width: 88%;
    }
}
.chart-container{
    margin-top: 2rem;
}
.analytics__order_total {
    margin-top: 1rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 5px;
    border: black solid 1px;
    border-radius: 0.5rem;
    background-color: #e9ecef;
    box-sizing: border-box;
}
.analytics__order_total-orders {
    display: flex;
    flex-direction: row;
}
.analytics__order_total-sum {
    display: flex;
    flex-direction: row;
}
.analytics__order_total-orders-value {
    margin-left: 1rem;
    width:125px;
    box-sizing: border-box;
}
.analytics__order_total-sum-value {
    margin-left: 1rem;
    width:125px;
    box-sizing: border-box;
    display: flex;
    align-content: center;
}
.analytics__order_total-sum-value svg {
    height: 15px;
}
.analytics__order_total-orders-label {
    width:60px;
    box-sizing: border-box;
}
.analytics__order_total-sum-label {
    width:60px;
    box-sizing: border-box;
}

.analytics__chart-wrapper {
    margin-bottom: 2rem;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.analytics__mobile-legend {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.analytics__mobile-legend-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.analytics__mobile-legend-toggle-label {
    flex: 1 1;
}

.analytics__mobile-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: min(40vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.analytics__mobile-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics__mobile-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.analytics__mobile-legend-text {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    gap: 0.25rem;
}

.analytics__mobile-legend-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.analytics__mobile-legend-count {
    font-size: 12px;
    color: #007bff;
    font-weight: 500;
}

.analytics__mobile-legend-value {
    font-size: 12px;
    color: #666;
}

@media (min-width: 801px) {
    .analytics__mobile-legend {
        display: none;
    }
}
.analytics-bookings_export-row {
}

.analytics-bookings_export-row .spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Контейнер таблицы */
.table-container {
    width: 100%;
    /* overflow: hidden; */
    position: relative;
    contain: inline-size;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 65vh;
  }
  
  .analytics-table {
      width: 100%;
      border-collapse: collapse; /* Убираем двойные границы */
      margin-top: 20px;
  }
  
  .analytics-table th,
  .analytics-table td {
      border: 1px solid #ddd; /* Границы ячеек */
      padding: 8px;
      text-align: center;
  }
  
  .analytics-table th {
      background-color: #f2f2f2; /* Фон заголовков */
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  }
  
  /* Стили для четных строк */
  .analytics-table tr:nth-child(even) {
      background-color: #f9f9f9;
  }
  
  /* Стиль при наведении */
  .analytics-table tr:hover {
      background-color: #f1f1f1;
  }
  
  /* Стили для таблицы с прокруткой */
  .analytics-table thead {
    /* display: table; */
    width: 100%;
    table-layout: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f2f2f2;
  }
  
  .analytics-table thead tr:last-child{
      border-bottom: 2px solid #000;
  }
  .analytics-table thead tr:first-child th:first-child{
      border-right: 2px solid #000;
  }
  .analytics-table thead tr:first-child th:nth-child(3){
      border-left: 2px solid #000;
      border-right: 2px solid #000;
  }
  .analytics-table thead tr:nth-child(2) th:first-child,
  .analytics-table thead tr:nth-child(2) th:nth-child(4) {
      border-left: 2px solid #000;
  }
  .analytics-table thead tr:last-child th:nth-child(2),
  .analytics-table thead tr:last-child th:nth-child(8) {
      border-right: 2px solid #000;
  }
  
  /* Прокручиваемое тело таблицы */
  .analytics-table tbody {
    /* display: block; */
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
  }
  
  .analytics-table tbody tr {
      /* display: table; */
      width: 100%;
      table-layout: fixed;
  }
  
  .analytics-table tbody tr td:first-child,
  .analytics-table tbody tr td:nth-child(3),
  .analytics-table tbody tr td:nth-child(9){
      border-right: 2px solid #000;
  }
  
  @media(max-width: 1500px){
      .table-container {
          /* max-height: 60vh; */
      }
      .analytics-table th,
      .analytics-table td {
          font-size: 13px;
      }
}
.analytics__deposit_total {
    margin-top: 1rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 15px;
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease-out;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.analytics__deposit_total:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.analytics__deposit_total-deposits {
    display: flex;
    flex-direction: row;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: slideInLeft 0.5s ease-out;
}
.analytics__deposit_total-deposits:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}
.analytics__deposit_total-sum {
    display: flex;
    flex-direction: row;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: slideInLeft 0.5s ease-out 0.1s both;
}
.analytics__deposit_total-sum:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}
.analytics__deposit_total-paid {
    display: flex;
    flex-direction: row;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: slideInLeft 0.5s ease-out 0.15s both;
}
.analytics__deposit_total-paid:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}
.analytics__deposit_total-avg {
    display: flex;
    flex-direction: row;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: slideInLeft 0.5s ease-out 0.2s both;
}
.analytics__deposit_total-avg:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.analytics__deposit_total-deposits-value {
    margin-left: 1rem;
    
    box-sizing: border-box;
    font-weight: 600;
    font-size: 18px;
    color: #007bff;
    animation: countUp 1s ease-out;
}
.analytics__deposit_total-sum-content {
    margin-left: 1rem;
    width:125px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.analytics__deposit_total-sum-value {
    display: flex;
    align-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #28a745;
    animation: countUp 1s ease-out 0.2s both;
}
.analytics__deposit_total-sum-minutes {
    font-weight: 600;
    font-size: 18px;
    color: #28a745;
    animation: countUp 1s ease-out 0.25s both;
}
.analytics__deposit_total-paid-label {
    width:140px;
    box-sizing: border-box;
}
.analytics__deposit_total-paid-content {
    margin-left: 1rem;
    width:125px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.analytics__deposit_total-paid-value {
    display: flex;
    align-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #17a2b8;
    animation: countUp 1s ease-out 0.25s both;
}
.analytics__deposit_total-paid-value svg {
    height: 15px;
}
.analytics__deposit_total-paid-minutes {
    font-weight: 600;
    font-size: 18px;
    color: #17a2b8;
    animation: countUp 1s ease-out 0.3s both;
}
.analytics__deposit_total-avg-value {
    margin-left: 1rem;
    
    box-sizing: border-box;
    display: flex;
    align-content: center;
    font-weight: 600;
    font-size: 16px;
    color: #6c757d;
    animation: countUp 1s ease-out 0.4s both;
}
@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.analytics__deposit_total-sum-value svg,
.analytics__deposit_total-avg-value svg {
    height: 15px;
}
.analytics__deposit_total-deposits-label {
    width:80px;
    box-sizing: border-box;
}
.analytics__deposit_total-sum-label {
    width:60px;
    box-sizing: border-box;
}
.analytics__deposit_total-avg-label {
    width:120px;
    box-sizing: border-box;
}
.analytics__chart-wrapper {
    margin-bottom: 2rem;
}

.analytics__linechart-tabs {
    display: flex;
    gap: 0.75rem;
    margin: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.analytics__linechart-card{
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    padding: 12px 14px;
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.analytics__linechart-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.analytics__linechart-card-title{
    font-weight: 700;
    color: #111827;
}

.analytics__linechart-card-body{
    margin-top: 0.25rem;
}

.analytics__linechart-tab {
    -webkit-appearance: none;
            appearance: none;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.analytics__linechart-tab:hover {
    border-color: #bfc5ca;
}

.analytics__linechart-tab--active {
    border-color: #007bff;
    background: #e7f1ff;
    color: #007bff;
}
.analytics__mobile-legend {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.analytics__mobile-legend-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.analytics__mobile-legend-toggle-label {
    flex: 1 1;
}

.analytics__mobile-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: min(40vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.analytics__mobile-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.analytics__mobile-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}
.analytics__mobile-legend-text {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    gap: 0.25rem;
}
.analytics__mobile-legend-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
.analytics__mobile-legend-count {
    font-size: 12px;
    color: #007bff;
    font-weight: 500;
}
.analytics__mobile-legend-value {
    font-size: 12px;
    color: #666;
}
@media (min-width: 801px) {
    .analytics__mobile-legend {
        display: none;
    }
}

/* Анимации для графиков */
.analytics__chart-wrapper {
    animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.deposit-minutes-table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}

.deposit-minutes-table {
    width: 100%;
    border-collapse: collapse;
}

.deposit-minutes-table th,
.deposit-minutes-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.deposit-minutes-table thead th {
    background-color: #f2f2f2;
}

.deposit-minutes-table__row-name {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.deposit-minutes-table__center {
    text-align: center;
}

.deposit-minutes-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.render-row__amo-code_container{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.render-row__amo-code_icon{
    margin-left: 0.25rem;
}
.amo-column-widthadmin-amo_column-width{
    width: 7.69%;
}
.params__margin-top{
    margin-top: 1rem;
}
.admin-competitions-discipline {
    display:flex;
    flex-direction: column;
}
.account-certificates_column-width {
    width: 12.5%;
}
@media(max-width: 600px){
    .account-certificates_column-width {
        width: 88%;
    }
}
.account__booking-status{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.account__booking-status_icon{
    color: #DC3545;
    margin-left: 0.5rem;
    cursor: pointer;
}

.account__order__column--nonactive {
    color:#6c757d;
}

.account__booking-status_icon:hover{
    scale: 1.12;
}
.account__order-payment-status{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.account__order-payment-status_icon{
    color: #198754;
    margin-left: 0.5rem;
    cursor: pointer;
}
.account__order-payment-status_icon:hover{
    scale: 1.12;
}
.account-bookings_column-width {
    width: 10%;
}
@media(max-width: 600px){
    .account-bookings_column-width {
        width: 88%;
    }
}
.balances_times-icon {
    margin-left: 1rem;
    color: #0000EE;
    cursor: pointer;
}
.balances_times {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.balances_purchase-modal{
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
}
.balances_purchase-modal-content{
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.balances_purchase-modal-content_row{
    margin-bottom: 0.5rem;
}
.balances_purchase-modal-content_row--button{
    margin-top: 0.5rem;
}
.account-balances_column-width {
    width: 25%;
}
@media(max-width: 600px){
    .account-balances_column-width {
        width: 88%;
    }
}
.account-times_column-width {
    width: 12.5%;
}
@media(max-width: 600px){
    .account-times_column-width{
        width: 88%;
    }
}
.account-media-public .media-purchase .media-header ,
.media-public .media-purchase .media-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.account-media-public .media-purchase .media-header__steps ,
.media-public .media-purchase .media-header__steps {
    display: flex;
    align-items: center;
    gap: 40px;
}

.account-media-public .media-purchase .media-header__step ,
.media-public .media-purchase .media-header__step {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.account-media-public .media-purchase .media-header__step.has-line::after ,
.media-public .media-purchase .media-header__step.has-line::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    width: 20px;
    height: 1px;
    background: #dee2e6;
    transform: translateY(-50%);
}

.account-media-public .media-purchase .media-header__step-number ,
.media-public .media-purchase .media-header__step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.account-media-public .media-purchase .media-header__step.active .media-header__step-number ,
.media-public .media-purchase .media-header__step.active .media-header__step-number {
    background: #1669DF;
    color: white;
}

.account-media-public .media-purchase .media-header__step-title ,
.media-public .media-purchase .media-header__step-title {
    font-size: 14px;
    color: #6c757d;
    white-space: nowrap;
}

.account-media-public .media-purchase .media-header__step.active .media-header__step-title ,
.media-public .media-purchase .media-header__step.active .media-header__step-title {
    color: #1669DF;
    font-weight: 500;
}

.account-media-public .media-purchase .media-header__back-btn ,
.media-public .media-purchase .media-header__back-btn {
    background: none;
    border: none;
    color: #1669DF;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.account-media-public .media-purchase .media-header__back-btn:hover ,
.media-public .media-purchase .media-header__back-btn:hover {
    background: #e9ecef;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .account-media-public .media-purchase .media-header ,
.media-public .media-purchase .media-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .account-media-public .media-purchase .media-header__steps ,
.media-public .media-purchase .media-header__steps {
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
    
    .account-media-public .media-purchase .media-header__step.has-line::after ,
.media-public .media-purchase .media-header__step.has-line::after {
        right: -8px;
        width: 8px;
    }
    
    .account-media-public .media-purchase .media-header__step-title ,
.media-public .media-purchase .media-header__step-title {
        font-size: 12px;
        white-space: normal;
        line-height: 1.2;
    }
    
    .account-media-public .media-purchase .media-header__back-btn ,
.media-public .media-purchase .media-header__back-btn {
        font-size: 12px;
        padding: 6px 12px;
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .media-header ,
.media-public .media-purchase .media-header {
        padding: 10px 12px;
    }
    
    .account-media-public .media-purchase .media-header__steps ,
.media-public .media-purchase .media-header__steps {
        gap: 8px;
    }
    
    .account-media-public .media-purchase .media-header__step ,
.media-public .media-purchase .media-header__step {
        flex: 1 1;
        min-width: 0;
    }
    
    .account-media-public .media-purchase .media-header__step.has-line::after ,
.media-public .media-purchase .media-header__step.has-line::after {
        display: none;
    }
    
    .account-media-public .media-purchase .media-header__step-title ,
.media-public .media-purchase .media-header__step-title {
        font-size: 11px;
        display: none;
    }
    
    .account-media-public .media-purchase .media-header__step-number ,
.media-public .media-purchase .media-header__step-number {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

@media (min-width: 375px) and (max-width: 480px) {
    .account-media-public .media-purchase .media-header__step-title ,
.media-public .media-purchase .media-header__step-title {
        display: block;
        font-size: 10px;
    }
}
.account-media-public .media-purchase .form-group ,
.media-public .media-purchase .form-group {
    margin-bottom: 20px;
}

.account-media-public .media-purchase .form-label ,
.media-public .media-purchase .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.account-media-public .media-purchase .form-input ,
.media-public .media-purchase .form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.account-media-public .media-purchase .form-input:focus ,
.media-public .media-purchase .form-input:focus {
    outline: none;
    border-color: #1669DF;
}

.account-media-public .media-purchase .form-input.error ,
.media-public .media-purchase .form-input.error {
    border-color: #dc3545;
}

.account-media-public .media-purchase .error-text ,
.media-public .media-purchase .error-text {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .account-media-public .media-purchase .form-group ,
.media-public .media-purchase .form-group {
        margin-bottom: 16px;
    }
    
    .account-media-public .media-purchase .form-label ,
.media-public .media-purchase .form-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .account-media-public .media-purchase .form-input ,
.media-public .media-purchase .form-input {
        padding: 10px;
        font-size: 16px; /* Предотвращает зум на iOS */
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .form-group ,
.media-public .media-purchase .form-group {
        margin-bottom: 14px;
    }
    
    .account-media-public .media-purchase .form-label ,
.media-public .media-purchase .form-label {
        font-size: 13px;
    }
    
    .account-media-public .media-purchase .form-input ,
.media-public .media-purchase .form-input {
        padding: 10px;
        font-size: 16px;
    }
    
    .account-media-public .media-purchase .error-text ,
.media-public .media-purchase .error-text {
        font-size: 11px;
    }
}
/* Стили для полноэкранного просмотра */
.account-media-public .media-purchase .photo-viewer-overlay ,
.media-public .media-purchase .photo-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.account-media-public .media-purchase .photo-viewer ,
.media-public .media-purchase .photo-viewer {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-media-public .media-purchase .photo-viewer-close ,
.media-public .media-purchase .photo-viewer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.account-media-public .media-purchase .photo-viewer-close:hover ,
.media-public .media-purchase .photo-viewer-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.account-media-public .media-purchase .photo-viewer-nav ,
.media-public .media-purchase .photo-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.account-media-public .media-purchase .photo-viewer-nav:hover ,
.media-public .media-purchase .photo-viewer-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.account-media-public .media-purchase .photo-viewer-prev ,
.media-public .media-purchase .photo-viewer-prev {
    left: 20px;
}

.account-media-public .media-purchase .photo-viewer-next ,
.media-public .media-purchase .photo-viewer-next {
    right: 20px;
}

.account-media-public .media-purchase .photo-viewer-content ,
.media-public .media-purchase .photo-viewer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

.account-media-public .media-purchase .photo-viewer-content img ,
.media-public .media-purchase .photo-viewer-content img {
    max-width: 100%;
    max-height: calc(90vh - 60px);
    object-fit: contain;
}

.account-media-public .media-purchase .photo-viewer-info ,
.media-public .media-purchase .photo-viewer-info {
    color: white;
    padding: 20px;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.account-media-public .media-purchase .photo-viewer-info-text ,
.media-public .media-purchase .photo-viewer-info-text {
    flex: 1 1;
}

.account-media-public .media-purchase .photo-viewer-checkbox ,
.media-public .media-purchase .photo-viewer-checkbox {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.account-media-public .media-purchase .photo-viewer-checkbox:hover ,
.media-public .media-purchase .photo-viewer-checkbox:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.account-media-public .media-purchase .photo-viewer-checkbox.checked ,
.media-public .media-purchase .photo-viewer-checkbox.checked {
    background: #1669DF;
    border-color: #1669DF;
    color: white;
}

.account-media-public .media-purchase .photo-viewer-checkbox.checked:hover ,
.media-public .media-purchase .photo-viewer-checkbox.checked:hover {
    background: #1356b8;
    border-color: #1356b8;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .account-media-public .media-purchase .photo-viewer ,
.media-public .media-purchase .photo-viewer {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .account-media-public .media-purchase .photo-viewer-close ,
.media-public .media-purchase .photo-viewer-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .account-media-public .media-purchase .photo-viewer-nav ,
.media-public .media-purchase .photo-viewer-nav {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .account-media-public .media-purchase .photo-viewer-prev ,
.media-public .media-purchase .photo-viewer-prev {
        left: 10px;
    }
    
    .account-media-public .media-purchase .photo-viewer-next ,
.media-public .media-purchase .photo-viewer-next {
        right: 10px;
    }
    
    .account-media-public .media-purchase .photo-viewer-content img ,
.media-public .media-purchase .photo-viewer-content img {
        max-height: calc(95vh - 60px);
    }
    
    .account-media-public .media-purchase .photo-viewer-info ,
    .media-public .media-purchase .photo-viewer-info {
        padding: 12px;
        font-size: 14px;
        gap: 12px;
    }
    
    .account-media-public .media-purchase .photo-viewer-checkbox ,
    .media-public .media-purchase .photo-viewer-checkbox {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    .account-media-public .media-purchase .photo-viewer {
        max-width: 85vw;
        max-height: 100vh;
        left: 20px;
    }
    
    .account-media-public .media-purchase .photo-viewer-close ,
.media-public .media-purchase .photo-viewer-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    
    .account-media-public .media-purchase .photo-viewer-nav ,
.media-public .media-purchase .photo-viewer-nav {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    
    .account-media-public .media-purchase .photo-viewer-prev ,
.media-public .media-purchase .photo-viewer-prev {
        left: 8px;
    }
    
    .account-media-public .media-purchase .photo-viewer-next ,
.media-public .media-purchase .photo-viewer-next {
        right: 8px;
    }
    
    .account-media-public .media-purchase .photo-viewer-content img ,
.media-public .media-purchase .photo-viewer-content img {
        max-height: calc(100vh - 80px);
    }
    
    .account-media-public .media-purchase .photo-viewer-info ,
    .media-public .media-purchase .photo-viewer-info {
        padding: 10px;
        font-size: 12px;
        gap: 10px;
    }
    
    .account-media-public .media-purchase .photo-viewer-checkbox ,
    .media-public .media-purchase .photo-viewer-checkbox {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}
/* Стили для контейнера с фото */
.account-media-public .media-purchase .photo-selection-modal-overlay .photo-image-container ,
.media-public .media-purchase .photo-selection-modal-overlay .photo-image-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.account-media-public .media-purchase .photo-selection-modal-overlay .photo-image-container img ,
.media-public .media-purchase .photo-selection-modal-overlay .photo-image-container img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.account-media-public .media-purchase .photo-selection-modal-overlay .photo-image-container:hover img ,
.media-public .media-purchase .photo-selection-modal-overlay .photo-image-container:hover img {
    transform: scale(1.05);
}

.account-media-public .media-purchase .photo-selection-modal-overlay .photo-overlay ,
.media-public .media-purchase .photo-selection-modal-overlay .photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-media-public .media-purchase .photo-selection-modal-overlay.photo-image-container:hover .photo-overlay ,
.media-public .media-purchase .photo-selection-modal-overlay.photo-image-container:hover .photo-overlay {
    opacity: 1;
}

.account-media-public .media-purchase .photo-selection-modal-overlay .photo-zoom-icon ,
.media-public .media-purchase .photo-selection-modal-overlay .photo-zoom-icon {
    font-size: 24px;
    color: white;
}
.account-media-public .media-purchase .photo-selection-modal-overlay ,
.media-public .media-purchase .photo-selection-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 40px 16px;
}

.account-media-public .media-purchase .photo-selection-modal ,
.media-public .media-purchase .photo-selection-modal {
    background: white;
    border-radius: 8px;
    width: 85%;
    max-width: 1000px;
    max-height: calc(90vh - 100px);
    display: flex;
    flex-direction: column;
    z-index: 10000;
    position: relative;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.account-media-public .media-purchase .photo-selection-modal__header ,
.media-public .media-purchase .photo-selection-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.account-media-public .media-purchase .photo-selection-modal__header button:hover ,
.media-public .media-purchase .photo-selection-modal__header button:hover {
    cursor: pointer;
    scale: calc(1.2);
}

.account-media-public .media-purchase .modal-close-btn ,
.media-public .media-purchase .modal-close-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 24px;
}

.account-media-public .media-purchase .photo-selection-modal__content ,
.media-public .media-purchase .photo-selection-modal__content {
    flex: 1 1;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.account-media-public .media-purchase .date-selection,
.account-media-public .media-purchase .time-selection ,
.media-public .media-purchase .date-selection,
.account-media-public .media-purchase .time-selection {
    margin-bottom: 20px;
}

.account-media-public .media-purchase .photos-gallery h3 ,
.media-public .media-purchase .photos-gallery h3 {
    margin-bottom: 16px;
}

.account-media-public .media-purchase .loading,
.account-media-public .media-purchase .no-photos ,
.media-public .media-purchase .loading,
.account-media-public .media-purchase .no-photos {
    text-align: center;
    padding: 40px;
    color: #666;
}

.account-media-public .media-purchase .photos-grid ,
.media-public .media-purchase .photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 16px;
    gap: 16px;
}

.account-media-public .media-purchase .photo-item ,
.media-public .media-purchase .photo-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.account-media-public .media-purchase .photo-item:hover ,
.media-public .media-purchase .photo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.account-media-public .media-purchase .photo-item.selected ,
.media-public .media-purchase .photo-item.selected {
    border-color: #1669DF;
}

.account-media-public .media-purchase .photo-item img ,
.media-public .media-purchase .photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.account-media-public .media-purchase .photo-overlay ,
.media-public .media-purchase .photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-media-public .media-purchase .photo-item:hover .photo-overlay ,
.media-public .media-purchase .photo-item:hover .photo-overlay {
    opacity: 1;
}

.account-media-public .media-purchase .photo-item.selected .photo-overlay ,
.media-public .media-purchase .photo-item.selected .photo-overlay {
    opacity: 1;
    background: rgba(22, 105, 223, 0.3);
}

.account-media-public .media-purchase .photo-checkbox ,
.media-public .media-purchase .photo-checkbox {
    width: 32px;
    height: 32px;
    background: #1669DF;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.account-media-public .media-purchase .photo-info ,
.media-public .media-purchase .photo-info {
    padding: 8px;
    background: white;
}

.account-media-public .media-purchase .photo-name ,
.media-public .media-purchase .photo-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.account-media-public .media-purchase .photo-price ,
.media-public .media-purchase .photo-price {
    display: block;
    font-size: 12px;
    color: #666;
}

.account-media-public .media-purchase .photo-selection-modal__footer ,
.media-public .media-purchase .photo-selection-modal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
}

.account-media-public .media-purchase .selected-count ,
.media-public .media-purchase .selected-count {
    font-weight: 500;
}

.account-media-public .media-purchase .modal-actions ,
.media-public .media-purchase .modal-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Стили для превью выбранных фото */
.account-media-public .media-purchase .photo-selection-section ,
.media-public .media-purchase .photo-selection-section {
    margin: 20px 0;
}

.account-media-public .media-purchase .photo-selection-header ,
.media-public .media-purchase .photo-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.account-media-public .media-purchase .btn-outline ,
.media-public .media-purchase .btn-outline {
    background: white;
    color: #1669DF;
    border: 1px solid #1669DF;
}

.account-media-public .media-purchase .selected-photos-preview ,
.media-public .media-purchase .selected-photos-preview {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}

.account-media-public .media-purchase .selected-photos-count ,
.media-public .media-purchase .selected-photos-count {
    margin-bottom: 12px;
    font-weight: 500;
}

.account-media-public .media-purchase .selected-photos-grid ,
.media-public .media-purchase .selected-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 8px;
    gap: 8px;
}

.account-media-public .media-purchase .selected-photo-thumb ,
.media-public .media-purchase .selected-photo-thumb {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
}

.account-media-public .media-purchase .selected-photo-thumb img ,
.media-public .media-purchase .selected-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Перемещаем чекбокс в отдельный контейнер */
.account-media-public .media-purchase .photo-actions ,
.media-public .media-purchase .photo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: white;
}

.account-media-public .media-purchase .photo-checkbox-container ,
.media-public .media-purchase .photo-checkbox-container {
    flex-shrink: 0;
}

.account-media-public .media-purchase .photo-checkbox ,
.media-public .media-purchase .photo-checkbox {
    width: 24px;
    height: 24px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.account-media-public .media-purchase .photo-checkbox.checked ,
.media-public .media-purchase .photo-checkbox.checked {
    background: #1669DF;
    border-color: #1669DF;
    color: white;
}

.account-media-public .media-purchase .photo-checkbox:hover ,
.media-public .media-purchase .photo-checkbox:hover {
    border-color: #1669DF;
}

.account-media-public .media-purchase .photo-info ,
.media-public .media-purchase .photo-info {
    flex: 1 1;
}

.account-media-public .media-purchase .photo-name ,
.media-public .media-purchase .photo-name {
    font-size: 14px;
    font-weight: 500;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .account-media-public .media-purchase .photo-viewer-nav ,
.media-public .media-purchase .photo-viewer-nav {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    
    .account-media-public .media-purchase .photo-viewer-prev ,
.media-public .media-purchase .photo-viewer-prev {
        left: 10px;
    }
    
    .account-media-public .media-purchase .photo-viewer-next ,
.media-public .media-purchase .photo-viewer-next {
        right: 10px;
    }
    
    .account-media-public .media-purchase .photo-viewer-close ,
.media-public .media-purchase .photo-viewer-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* Улучшаем внешний вид выбранных фото */
.account-media-public .media-purchase .photo-item.selected ,
.media-public .media-purchase .photo-item.selected {
    border: 2px solid #1669DF;
    border-radius: 8px;
}

.account-media-public .media-purchase .photo-item.selected .photo-checkbox ,
.media-public .media-purchase .photo-item.selected .photo-checkbox {
    background: #1669DF;
    border-color: #1669DF;
    color: white;
}

/* Кнопка очистки всех фото */
.account-media-public .media-purchase .photos-gallery-header ,
.media-public .media-purchase .photos-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.account-media-public .media-purchase .clear-all-btn ,
.media-public .media-purchase .clear-all-btn {
    background: #dc3545;
    color: white;
    border: none;
}

.account-media-public .media-purchase .clear-all-btn:hover ,
.media-public .media-purchase .clear-all-btn:hover {
    background: #ff0019;
}

/* Стили для превью выбранных фото с кнопкой удаления */
.account-media-public .media-purchase .selected-photo-thumb ,
.media-public .media-purchase .selected-photo-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.account-media-public .media-purchase .selected-photo-thumb img ,
.media-public .media-purchase .selected-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.account-media-public .media-purchase .selected-photo-thumb:hover img ,
.media-public .media-purchase .selected-photo-thumb:hover img {
    opacity: 0.7;
}

.account-media-public .media-purchase .remove-photo-btn ,
.media-public .media-purchase .remove-photo-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-media-public .media-purchase .selected-photo-thumb:hover .remove-photo-btn ,
.media-public .media-purchase .selected-photo-thumb:hover .remove-photo-btn {
    opacity: 1;
}

/* Стили при проверку файлов */
.account-media-public .media-purchase .checking-files-container ,
.media-public .media-purchase .checking-files-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.account-media-public .media-purchase .checking-notice ,
.media-public .media-purchase .checking-notice {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .account-media-public .media-purchase .photo-selection-modal ,
.media-public .media-purchase .photo-selection-modal {
        width: 90%;
        max-height: calc(95vh - 100px);
        border-radius: 8px 8px 0 0;
    }
    
    .account-media-public .media-purchase .photo-selection-modal__header ,
.media-public .media-purchase .photo-selection-modal__header {
        padding: 16px;
    }
    
    .account-media-public .media-purchase .photo-selection-modal__content ,
.media-public .media-purchase .photo-selection-modal__content {
        padding: 16px;
    }
    
    .account-media-public .media-purchase .photos-grid ,
.media-public .media-purchase .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .account-media-public .media-purchase .photo-selection-header ,
.media-public .media-purchase .photo-selection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .account-media-public .media-purchase .selected-photos-grid ,
.media-public .media-purchase .selected-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
    }
    
    .account-media-public .media-purchase .selected-photo-thumb ,
.media-public .media-purchase .selected-photo-thumb {
        width: 70px;
        height: 70px;
    }
    
    .account-media-public .media-purchase .photo-selection-modal__footer ,
.media-public .media-purchase .photo-selection-modal__footer {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .account-media-public .media-purchase .modal-actions ,
.media-public .media-purchase .modal-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .account-media-public .media-purchase .modal-actions button ,
.media-public .media-purchase .modal-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .photo-selection-modal ,
.media-public .media-purchase .photo-selection-modal {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
    }
    
    .account-media-public .media-purchase .photo-selection-modal__header ,
.media-public .media-purchase .photo-selection-modal__header {
        padding: 12px;
    }
    
    .account-media-public .media-purchase .photo-selection-modal__content ,
.media-public .media-purchase .photo-selection-modal__content {
        padding: 12px;
    }
    
    .account-media-public .media-purchase .photos-grid ,
.media-public .media-purchase .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    
    .account-media-public .media-purchase .photo-item img ,
.media-public .media-purchase .photo-item img {
        height: 120px;
    }
    
    .account-media-public .media-purchase .selected-photos-grid ,
.media-public .media-purchase .selected-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 6px;
    }
    
    .account-media-public .media-purchase .selected-photo-thumb ,
.media-public .media-purchase .selected-photo-thumb {
        width: 60px;
        height: 60px;
    }
    
    .account-media-public .media-purchase .selected-photos-preview ,
.media-public .media-purchase .selected-photos-preview {
        padding: 12px;
    }
    
    .account-media-public .media-purchase .photo-selection-modal__footer ,
.media-public .media-purchase .photo-selection-modal__footer {
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .account-media-public .media-purchase .photo-selection-modal-overlay {
        top: 0;
        left: 15px;
        right: -30px;
        bottom: 0;
    }

    .account-media-public .media-purchase .photo-selection-modal{
        width: 80%;
        max-height: calc(85vh - 100px);
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .photos-grid ,
    .media-public .media-purchase .photos-grid {
        grid-template-columns: 1fr;
    }
}
.account-media-public .media-purchase .step-buy-photos ,
.media-public .media-purchase .step-buy-photos {
    padding: 20px;
}

.account-media-public .media-purchase .step-buy-photos__title ,
.media-public .media-purchase .step-buy-photos__title {
    margin-bottom: 24px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
}

.account-media-public .media-purchase .step-buy-photos__form ,
.media-public .media-purchase .step-buy-photos__form {
    margin-bottom: 30px;
    max-width: 500px;
}

.account-media-public .media-purchase .step-buy-photos__actions ,
.media-public .media-purchase .step-buy-photos__actions {
    margin-top: 24px;
}

.account-media-public .media-purchase .step-buy-photos__actions button,
.media-public .media-purchase .step-buy-photos__actions button{
    max-width: 200px;
}

.account-media-public .media-purchase .btn-primary ,
.media-public .media-purchase .btn-primary {
    background: #1669DF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.2s;
}

.account-media-public .media-purchase .btn-primary:hover:not(:disabled) ,
.media-public .media-purchase .btn-primary:hover:not(:disabled) {
    background: #1358b3;
}

.account-media-public .media-purchase .btn-primary:disabled ,
.media-public .media-purchase .btn-primary:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.account-media-public .media-purchase .photo-selection-placeholder ,
.media-public .media-purchase .photo-selection-placeholder {
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
    color: #6c757d;
}
.account-media-public .media-purchase .step-buy-photo-agreement,
.media-public .media-purchase .step-buy-photo-agreement{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top:10px;
    margin-bottom: 20px;
}
.account-media-public .media-purchase .step-buy-photos > .agreement_checkbox ,
.media-public .media-purchase .step-buy-photos > .agreement_checkbox {
    align-self: flex-start;
}

/* Стили для подсказки валидации */
.account-media-public .media-purchase .validation-hint ,
.media-public .media-purchase .validation-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    margin-bottom: 20px;
}

.account-media-public .media-purchase .validation-hint__icon ,
.media-public .media-purchase .validation-hint__icon {
    font-size: 16px;
    color: #856404;
    flex-shrink: 0;
}

.account-media-public .media-purchase .validation-hint__text ,
.media-public .media-purchase .validation-hint__text {
    color: #856404;
    font-size: 14px;
    font-weight: 500;
}

/* Стили для ошибок полей */
.account-media-public .media-purchase .form-input.error ,
.media-public .media-purchase .form-input.error {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.account-media-public .media-purchase .error-text ,
.media-public .media-purchase .error-text {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Отдельные стили для API ошибок */
.account-media-public .media-purchase .api-error ,
.media-public .media-purchase .api-error {
    color: #dc3545;
    font-weight: 500;
}

/* Стили для кнопки */
.account-media-public .media-purchase .btn-primary ,
.media-public .media-purchase .btn-primary {
    background: #1669DF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.2s;
}

.account-media-public .media-purchase .btn-primary:hover:not(:disabled) ,
.media-public .media-purchase .btn-primary:hover:not(:disabled) {
    background: #1358b3;
}

.account-media-public .media-purchase .btn-primary:disabled ,
.media-public .media-purchase .btn-primary:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Плейсхолдер для выбора фото */
.account-media-public .media-purchase .photo-selection-placeholder ,
.media-public .media-purchase .photo-selection-placeholder {
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
    color: #6c757d;
    margin-top: 20px;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .account-media-public .media-purchase .step-buy-photos ,
.media-public .media-purchase .step-buy-photos {
        padding: 16px;
    }
    
    .account-media-public .media-purchase .step-buy-photos__title ,
.media-public .media-purchase .step-buy-photos__title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .account-media-public .media-purchase .step-buy-photos__form ,
.media-public .media-purchase .step-buy-photos__form {
        max-width: 100%;
        margin-bottom: 24px;
    }
    
    .account-media-public .media-purchase .step-buy-photos__actions ,
.media-public .media-purchase .step-buy-photos__actions {
        margin-top: 20px;
    }
    
    .account-media-public .media-purchase .step-buy-photos__actions button ,
.media-public .media-purchase .step-buy-photos__actions button {
        max-width: 100%;
    }
    
    .account-media-public .media-purchase .step-buy-photo-agreement ,
.media-public .media-purchase .step-buy-photo-agreement {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .account-media-public .media-purchase .validation-hint ,
.media-public .media-purchase .validation-hint {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .account-media-public .media-purchase .validation-hint__text ,
.media-public .media-purchase .validation-hint__text {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .step-buy-photos ,
.media-public .media-purchase .step-buy-photos {
        padding: 12px;
    }
    
    .account-media-public .media-purchase .step-buy-photos__title ,
.media-public .media-purchase .step-buy-photos__title {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .account-media-public .media-purchase .step-buy-photos__form ,
.media-public .media-purchase .step-buy-photos__form {
        margin-bottom: 20px;
    }
    
    .account-media-public .media-purchase .step-buy-photo-agreement ,
.media-public .media-purchase .step-buy-photo-agreement {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .account-media-public .media-purchase .photo-selection-placeholder ,
.media-public .media-purchase .photo-selection-placeholder {
        padding: 30px 16px;
        font-size: 14px;
    }
}
.account-media-public .media-purchase .step-preview-wrapper,
.media-public .media-purchase .step-preview-wrapper{
    display: flex;
    flex-direction: column;
    max-width: 600px;
    align-items: stretch;
}
.account-media-public .media-purchase .step-preview-photos__info ,
.media-public .media-purchase .step-preview-photos__info {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 2rem;
    color: #ff2020;
    font-weight: 500;
}

.account-media-public .media-purchase .step-preview-photos__content ,
.media-public .media-purchase .step-preview-photos__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.account-media-public .media-purchase .step-preview-photos__content table ,
.media-public .media-purchase .step-preview-photos__content table {
    border-collapse: separate;
    border-spacing: 1rem 1.5rem;
    width: 100%;
}

.account-media-public .media-purchase .step-preview-photos__content-row_label ,
.media-public .media-purchase .step-preview-photos__content-row_label {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.account-media-public .media-purchase .step-preview-photos__content-row_data ,
.media-public .media-purchase .step-preview-photos__content-row_data {
    color: #1669DF;
    font-weight: 500;
}

/* Стили для сетки фотографий */
.account-media-public .media-purchase .step-preview-photos__photos-grid ,
.media-public .media-purchase .step-preview-photos__photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    margin-top: 12px;
}

.account-media-public .media-purchase .step-preview-photos__photo-thumb ,
.media-public .media-purchase .step-preview-photos__photo-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 2px solid transparent;
}

.account-media-public .media-purchase .step-preview-photos__photo-thumb:hover ,
.media-public .media-purchase .step-preview-photos__photo-thumb:hover {
    transform: scale(1.05);
    border-color: #1669DF;
}

.account-media-public .media-purchase .step-preview-photos__photo-thumb img ,
.media-public .media-purchase .step-preview-photos__photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-media-public .media-purchase .step-preview-photos__photo-overlay ,
.media-public .media-purchase .step-preview-photos__photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.account-media-public .media-purchase .step-preview-photos__photo-thumb:hover .step-preview-photos__photo-overlay ,
.media-public .media-purchase .step-preview-photos__photo-thumb:hover .step-preview-photos__photo-overlay {
    opacity: 1;
}

.account-media-public .media-purchase .step-preview-photos__photo-index ,
.media-public .media-purchase .step-preview-photos__photo-index {
    background: #1669DF;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Стили для кнопок */
.account-media-public .media-purchase .step-preview-photos__actions ,
.media-public .media-purchase .step-preview-photos__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.account-media-public .media-purchase .step-preview-photos__confirm-button ,
.media-public .media-purchase .step-preview-photos__confirm-button {
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    color: white;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.account-media-public .media-purchase .step-preview-photos__confirm-button:hover ,
.media-public .media-purchase .step-preview-photos__confirm-button:hover {
    background-color: #1358b3;
}

.account-media-public .media-purchase .step-preview-photos__confirm-button:disabled ,
.media-public .media-purchase .step-preview-photos__confirm-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Контакты поддержки */
.account-media-public .media-purchase .step-preview-photos__content-row_contacts-block ,
.media-public .media-purchase .step-preview-photos__content-row_contacts-block {
    color: #51709B;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.account-media-public .media-purchase .step-preview-photos__content-row_contacts-data ,
.media-public .media-purchase .step-preview-photos__content-row_contacts-data {
    margin: 0.25rem 0;
    font-weight: 500;
}

.account-media-public .media-purchase .step-preview-photos__content-row_contacts-data:first-child ,
.media-public .media-purchase .step-preview-photos__content-row_contacts-data:first-child {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

/* Адаптивность */
@media (max-width: 768px) {
    .account-media-public .media-purchase .step-preview-wrapper ,
.media-public .media-purchase .step-preview-wrapper {
        max-width: 100%;
        padding: 16px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content ,
.media-public .media-purchase .step-preview-photos__content {
        gap: 1.5rem;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content table ,
.media-public .media-purchase .step-preview-photos__content table {
        border-spacing: 0.75rem 1rem;
        font-size: 14px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content-row_label ,
.media-public .media-purchase .step-preview-photos__content-row_label {
        white-space: normal;
        padding-right: 8px;
        vertical-align: top;
    }
    
    .account-media-public .media-purchase .step-preview-photos__actions ,
.media-public .media-purchase .step-preview-photos__actions {
        flex-direction: column;
    }
    
    .account-media-public .media-purchase .step-preview-photos__confirm-button ,
.media-public .media-purchase .step-preview-photos__confirm-button {
        order: 1;
    }
    
    .account-media-public .media-purchase .step-preview-photos__actions .btn-secondary ,
.media-public .media-purchase .step-preview-photos__actions .btn-secondary {
        order: 2;
    }
    
    .account-media-public .media-purchase .step-preview-photos__photos-grid ,
.media-public .media-purchase .step-preview-photos__photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__photo-thumb ,
.media-public .media-purchase .step-preview-photos__photo-thumb {
        width: 70px;
        height: 70px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__confirm-button ,
.media-public .media-purchase .step-preview-photos__confirm-button {
        height: 3.5rem;
        border-radius: 1.25rem;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content-row_contacts-block ,
.media-public .media-purchase .step-preview-photos__content-row_contacts-block {
        padding: 1rem;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .step-preview-wrapper ,
.media-public .media-purchase .step-preview-wrapper {
        padding: 12px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__info ,
.media-public .media-purchase .step-preview-photos__info {
        font-size: 14px;
        margin-bottom: 1.5rem;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content ,
.media-public .media-purchase .step-preview-photos__content {
        gap: 1rem;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content table ,
.media-public .media-purchase .step-preview-photos__content table {
        border-spacing: 0.5rem 0.75rem;
        font-size: 13px;
        display: block;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content table tbody ,
.media-public .media-purchase .step-preview-photos__content table tbody {
        display: block;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content table tr ,
.media-public .media-purchase .step-preview-photos__content table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content table tr:last-child ,
.media-public .media-purchase .step-preview-photos__content table tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content-row_label ,
.media-public .media-purchase .step-preview-photos__content-row_label {
        font-size: 12px;
        margin-bottom: 4px;
        color: #666;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content-row_data ,
.media-public .media-purchase .step-preview-photos__content-row_data {
        font-size: 14px;
        word-break: break-word;
    }
    
    .account-media-public .media-purchase .step-preview-photos__photos-grid ,
.media-public .media-purchase .step-preview-photos__photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 6px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__photo-thumb ,
.media-public .media-purchase .step-preview-photos__photo-thumb {
        width: 60px;
        height: 60px;
    }
    
    .account-media-public .media-purchase .step-preview-photos__confirm-button ,
.media-public .media-purchase .step-preview-photos__confirm-button {
        height: 3.25rem;
        border-radius: 1.25rem;
    }
    
    .account-media-public .media-purchase .step-preview-photos__content-row_contacts-block ,
.media-public .media-purchase .step-preview-photos__content-row_contacts-block {
        padding: 0.75rem;
        font-size: 13px;
        margin: 1.5rem 0 0.75rem;
    }
}

@media (min-width: 375px) and (max-width: 480px) {
    .account-media-public .media-purchase .step-preview-photos__photos-grid ,
.media-public .media-purchase .step-preview-photos__photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    }
    
    .account-media-public .media-purchase .step-preview-photos__photo-thumb ,
.media-public .media-purchase .step-preview-photos__photo-thumb {
        width: 65px;
        height: 65px;
    }
}
.account-media-public .media-purchase .order__media_step-success ,
.media-public .media-purchase .order__media_step-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.account-media-public .media-purchase .order__media_step-success__icon ,
.media-public .media-purchase .order__media_step-success__icon {
    width: 80px;
    height: 80px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    margin-bottom: 2rem;
    animation: success-appear 0.6s ease;
}

@keyframes success-appear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.account-media-public .media-purchase .order__media_tep-success__title ,
.media-public .media-purchase .order__media_tep-success__title {
    color: #28a745;
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 600;
}

.account-media-public .media-purchase .order__media_tep-success__order-info ,
.media-public .media-purchase .order__media_tep-success__order-info {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 500px;
}

.account-media-public .media-purchase .order__media_tep-success__order-number ,
.media-public .media-purchase .order__media_tep-success__order-number {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
}

.account-media-public .media-purchase .order__media_tep-success__order-summary ,
.media-public .media-purchase .order__media_tep-success__order-summary {
    text-align: left;
    color: #666;
    line-height: 1.6;
}

.account-media-public .media-purchase .order__media_tep-success__order-summary p ,
.media-public .media-purchase .order__media_tep-success__order-summary p {
    margin-bottom: 1rem;
}

.account-media-public .media-purchase .order__media_tep-success__order-summary strong ,
.media-public .media-purchase .order__media_tep-success__order-summary strong {
    color: #333;
}

/* Стили для скачивания */
.account-media-public .media-purchase .order__media_tep-success__downloads ,
.media-public .media-purchase .order__media_tep-success__downloads {
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
    text-align: left;
}

.account-media-public .media-purchase .order__media_tep-success__downloads h3 ,
.media-public .media-purchase .order__media_tep-success__downloads h3 {
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.account-media-public .media-purchase .order__media_tep-success__download-links ,
.media-public .media-purchase .order__media_tep-success__download-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-media-public .media-purchase .order__media_tep-success__download-link ,
.media-public .media-purchase .order__media_tep-success__download-link {
    display: block;
    padding: 1rem;
    background: #e9ecef;
    border-radius: 8px;
    color: #1669DF;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.account-media-public .media-purchase .order__media_tep-success__download-link:hover ,
.media-public .media-purchase .order__media_tep-success__download-link:hover {
    background: #1669DF;
    color: white;
    text-decoration: none;
}

/* Стили для поддержки */
.account-media-public .media-purchase .order__media_tep-success__support ,
.media-public .media-purchase .order__media_tep-success__support {
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
}

.account-media-public .media-purchase .order__media_tep-success__support h4 ,
.media-public .media-purchase .order__media_tep-success__support h4 {
    color: #856404;
    margin-bottom: 1rem;
}

.account-media-public .media-purchase .order__media_tep-success__support-contacts ,
.media-public .media-purchase .order__media_tep-success__support-contacts {
    margin-bottom: 1rem;
    color: #856404;
}

.account-media-public .media-purchase .order__media_tep-success__support-contacts div ,
.media-public .media-purchase .order__media_tep-success__support-contacts div {
    margin: 0.25rem 0;
    font-weight: 500;
}

.account-media-public .media-purchase .order__media_tep-success__support-note ,
.media-public .media-purchase .order__media_tep-success__support-note {
    color: #856404;
    font-size: 0.9rem;
    margin: 0;
}

/* Кнопки действий */
.account-media-public .media-purchase .order__media_tep-success__actions ,
.media-public .media-purchase .order__media_tep-success__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.account-media-public .media-purchase .btn-primary ,
.media-public .media-purchase .btn-primary {
    background: #1669DF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

.account-media-public .media-purchase .btn-primary:hover ,
.media-public .media-purchase .btn-primary:hover {
    background: #1358b3;
}

.account-media-public .media-purchase .btn-outline ,
.media-public .media-purchase .btn-outline {
    background: white;
    color: #1669DF;
    border: 1px solid #1669DF;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.account-media-public .media-purchase .btn-outline:hover ,
.media-public .media-purchase .btn-outline:hover {
    background: #1669DF;
    color: white;
}

/* Адаптивность */
@media (max-width: 768px) {
    .account-media-public .media-purchase .order__media_step-success ,
.media-public .media-purchase .order__media_step-success {
        padding: 1rem;
    }
    
    .account-media-public .media-purchase .order__media_step-success__icon ,
.media-public .media-purchase .order__media_step-success__icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__title ,
.media-public .media-purchase .order__media_tep-success__title {
        font-size: 1.5rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__order-info ,
.media-public .media-purchase .order__media_tep-success__order-info {
        padding: 1.5rem;
        max-width: 100%;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__downloads ,
.media-public .media-purchase .order__media_tep-success__downloads {
        max-width: 100%;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__support ,
.media-public .media-purchase .order__media_tep-success__support {
        max-width: 100%;
        padding: 1.25rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__actions ,
.media-public .media-purchase .order__media_tep-success__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__actions button ,
.media-public .media-purchase .order__media_tep-success__actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .order__media_step-success ,
.media-public .media-purchase .order__media_step-success {
        padding: 12px;
    }
    
    .account-media-public .media-purchase .order__media_step-success__icon ,
.media-public .media-purchase .order__media_step-success__icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 1.5rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__title ,
.media-public .media-purchase .order__media_tep-success__title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__order-info ,
.media-public .media-purchase .order__media_tep-success__order-info {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__order-number ,
.media-public .media-purchase .order__media_tep-success__order-number {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__order-summary ,
.media-public .media-purchase .order__media_tep-success__order-summary {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__downloads ,
.media-public .media-purchase .order__media_tep-success__downloads {
        margin-bottom: 1.5rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__downloads h3 ,
.media-public .media-purchase .order__media_tep-success__downloads h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__download-link ,
.media-public .media-purchase .order__media_tep-success__download-link {
        padding: 0.75rem;
        font-size: 14px;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__support ,
.media-public .media-purchase .order__media_tep-success__support {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__support h4 ,
.media-public .media-purchase .order__media_tep-success__support h4 {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__support-contacts ,
.media-public .media-purchase .order__media_tep-success__support-contacts {
        font-size: 13px;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__support-note ,
.media-public .media-purchase .order__media_tep-success__support-note {
        font-size: 12px;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__actions ,
.media-public .media-purchase .order__media_tep-success__actions {
        gap: 0.75rem;
    }
    
    .account-media-public .media-purchase .order__media_tep-success__actions button ,
.media-public .media-purchase .order__media_tep-success__actions button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (min-width: 375px) and (max-width: 480px) {
    .account-media-public .media-purchase .order__media_step-success ,
.media-public .media-purchase .order__media_step-success {
        padding: 16px;
    }
}
.account-media-public .media-purchase .media-purchase__card ,
.media-public .media-purchase .media-purchase__card {
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.account-media-public .media-purchase ,
.media-public .media-purchase {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.account-media-public .media-purchase .media-purchase__header ,
.media-public .media-purchase .media-purchase__header {
    border-bottom: 1px solid #e0e0e0;
}

.account-media-public .media-purchase .media-purchase__body ,
.media-public .media-purchase .media-purchase__body {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    margin-top: 20px;
    min-height: 400px;
    padding: 0;
    box-sizing: border-box;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .account-media-public .media-purchase ,
.media-public .media-purchase {
        overflow-x: hidden;
    }
    
    .account-media-public .media-purchase .media-purchase__card ,
.media-public .media-purchase .media-purchase__card {
        border-radius: 0;
        box-shadow: none;
        overflow-x: hidden;
    }
    
    .account-media-public .media-purchase .media-purchase__body ,
.media-public .media-purchase .media-purchase__body {
        margin-top: 0;
        min-height: auto;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .account-media-public .media-purchase .media-purchase__body ,
.media-public .media-purchase .media-purchase__body {
        padding: 0;
        overflow-x: hidden;
    }
}

@media (min-width: 375px) and (max-width: 480px) {
    .account-media-public .media-purchase .media-purchase__body ,
.media-public .media-purchase .media-purchase__body {
        padding: 0;
    }
}

.calendar {
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    -webkit-user-select: none;
            user-select: none;
}

.calendar table {
    border-collapse: separate;
    border-spacing: 0.35rem;
    border-radius: 0.25rem;
}

.calendar th,
.calendar td {
    padding: 10px;
    text-align: center;
    border-radius: 0.25rem;
}

.calendar th {
    border: none;
}

.calendar td {
    border: none;
    cursor: pointer;
    border-radius: .25rem;
    padding: 10px;
    text-align: center;
}

.calendar .is-active {
    background-color: #1669DF;
    color: white;
    -webkit-user-select: none;
            user-select: none;
}

.calendar .is-inactive {
    background-color: #bcd9ff !important;
    color: #30578d !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.calendar .is-out-of-month {
    background-color: #c1d7f9 !important;
    color: #000 !important;
    opacity: .4 !important;
    pointer-events: none;
}
.calendar__header{
    box-sizing: border-box;
    padding: 0.5rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.calendar__header-button{
    border: none;
    cursor: pointer;
    background-color: transparent;
}
.calendar__header-date{
    font-weight: 500;
    font-size: large;
}
.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-wrapper__content {
    position: relative;
    top: 100%;
    left: 0;
    z-index: 999;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.dropdown-wrapper__input{
    width: 100%;
    background-color: #EBF1FA;
    border-radius: 0.5rem;
    border: none;
    padding: 10px 16px 10px 16px;
    box-sizing: border-box;
    cursor: pointer;
}

.dropdown-wrapper__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-wrapper__icon {
    position: absolute !important;
    right: 0.8rem !important;
    pointer-events: none !important;
    cursor: pointer !important;
    font-size: medium !important;
    color: #9fb1c7;
}
.dropdown-wrapper__values-wrapper--field{
    box-sizing: border-box;
    width:100%;
    border: 1px solid #1669DF;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
}
.dropdown-wrapper__values-wrapper--empty{
    box-sizing: border-box;
    width:100%;
    border: 1px solid transparent;
    padding: 0.5rem;
    height: 3rem;
    border-radius: 0.5rem;
    background-color: #EBF1FA;
    display: flex;
    align-items: center;
}
.dropdown-wrapper__value{
    padding: 0.5rem;
    text-align: center;
    border-radius: 0.15rem;
    background-color: #1669DF;
    color:white;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
            user-select: none;
    margin-left: 0.25rem;
}
.dropdown-wrapper__placeholder {
    color: #585858;
}
.dropdown-wrapper__value_delete-icon{
    font-size:larger !important;
    margin-left: 0.5rem;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}

.select-item{
    padding: 10px;
    background-color: transparent;
    cursor: pointer;
    transition-duration: .15s;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.select-item.active{
    color: #2116b9;
    background-color: azure;
}
.select-item.disable{
    cursor: not-allowed;
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.25rem;
}
.time-slots {
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    /* max-height: 200px;
    overflow-y: scroll; */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1);
    position: relative; /* Добавлено позиционирование для правильного расчета положения подсказки */
}
/* Стилизация полосы прокрутки */
.time-slots::-webkit-scrollbar {
    width: 2px; /* Ширина полосы прокрутки */
}

/* Стилизация ползунка */
.time-slots::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* Цвет ползунка */
}

.time-slots table {
    border-collapse: separate;
    border-spacing: 0.35rem;
    border-radius: 0.25rem;
}

.time-slots th,
.time-slots td {
    text-align: center;
    border-radius: 0.25rem;
}

.time-slots th {
    border: none;
}

.time-slots td {
    border: none;
    cursor: pointer;
}

.time-slots .active {
    background-color: #1669DF;
}

.time-slots .inactive {
    background-color: #EBF1FA;
}

.time-slots .out-of-date {
    opacity: 0.4;
    background-color: #EBF1FA;

}

.time-slots__days {
    display: none;
}

.time-slots__slot {
    position: relative;
    color: #4c6a93;
    -webkit-user-select: none;
            user-select: none;
}
.time-slots__spinner-container{
    width:230px;
    height:230px
}

.time-slots__slot .time-slots__slot--tooltip {
    visibility: hidden;
    background-color: #2F3D52;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    min-width: 12rem;
    max-width: 16rem;
    position: absolute;
    z-index: 5; /* Ниже tooltip продуктов, чтобы не перекрывать их */
    bottom: calc(100% + 5px); /* Используем calc() для учета положения скроллинга */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 4px;
    pointer-events: auto;
}

/* Расширяем зону hover прозрачной областью под tooltip,
   чтобы при переходе курсора вниз он не "проваливался" на слот ниже */
.time-slots__slot .time-slots__slot--tooltip::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -10px; /* немного ниже самого тултипа */
    background: transparent;
}

/* Убираем стрелку */
.time-slots__slot .time-slots__slot--tooltip::after {
    content: none;
}

.time-slots__slot:hover .time-slots__slot--tooltip,
.time-slots__slot .time-slots__slot--tooltip:hover {
    visibility: visible;
    opacity: 1;
}
.time-slots__slot--tooltip-content{
    display: flex;
    flex-direction: column;
}
.time-slots__slot--tooltip-content-row{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.time-slots__slot--tooltip-content-row-price{
    font-weight: 900;
    margin-right: auto;
}
.time-slots__slot--tooltip-content-row-info{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.time-slots__slot--tooltip-content-row-info-benefit{
    font-size: x-small;
}
.time-slots__slot--tooltip-content-row-info-icon{
    margin-left: 0.25rem;
}
.time-slots__slot--tooltip-content-time-free{
    text-align: left;
    font-size: 0.8rem;
}
.time-slots__slot--tooltip-content-time-free-certificate{
    font-size: 0.75rem;
}

/* Стили для списка продуктов в tooltip */
.time-slots__slot--tooltip-products {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 0.25rem;
    pointer-events: auto; /* Разрешаем прокрутку */
    position: relative;
    z-index: 1; /* Выше родительского tooltip */
}

.time-slots__slot--tooltip-products::-webkit-scrollbar {
    width: 4px;
}

.time-slots__slot--tooltip-products::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.time-slots__slot--tooltip-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.time-slots__slot--tooltip-product-item:last-child {
    border-bottom: none;
}

.time-slots__slot--tooltip-product-minutes {
    font-size: 0.85rem;
    font-weight: 500;
}

.time-slots__slot--tooltip-product-price {
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.time-slots__slot--tooltip-product-old-price {
    font-size: 0.75rem;
    text-decoration: line-through;
    opacity: 0.7;
}


.booking__card-modal{
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    width: -webkit-min-content;
    width: min-content;
    border-radius: 1.5rem;
    min-width: 400px;
    border: 1px solid #0000007a;
    display: flex;
    flex-direction: column;
    margin: 1rem;
    background-color: #fff;
}


.balance__card-modal{
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    width: -webkit-min-content;
    width: min-content;
    border-radius: 1.5rem;
    min-width: 400px;
    border: 1px solid #0000007a;
    display: flex;
    flex-direction: column;
    margin: 1rem;
    background-color: #fff;
    align-self: baseline;
}
.booking-input{
    background-color: #EBF1FA;
    border-radius: 0.5rem;
    border: none;
    padding: 10px 16px 10px 16px;
    box-sizing: border-box;
    padding: 0.5rem;
    height: 3rem;
    font-size: medium;
    width: 100%;
}
.booking-input::placeholder{
    color: #585858;
}
@media (max-width: 650px){
    .booking__card-modal{
        min-width: 300px;
    }
}
@media (max-width: 450px){
    .booking__card-modal{
        padding: 0rem 0.7rem 0rem 0.7rem;
        min-width: calc(100% - 55px);
    }
}

/* Оформление к 14 февраля */
.booking__card-modal.wd-promotion .step-buy__content-header_tabs-button-label--selected{
    color: #bd1920;
    border-bottom-color: #bd1920;
}
.booking__card-modal.wd-promotion .step-buy__tooltip{
    border: 1px solid #e2a6cb;
}
.booking__card-modal.wd-promotion .step-buy__tooltip-data-icon svg{
    fill: #bd1920;
}
.booking__card-modal.wd-promotion .step-buy__content-row-contacts-list{
    color: #bd1920;
}
.booking__card-modal.wd-promotion .certificate-button__search{
    background-color: #e2a6cb;
}
.booking__card-modal.wd-promotion .dropdown-wrapper__value{
    background-color: #bd1920;
}
.booking__card-modal.wd-promotion .products__content-item--selected{
    background-color: #ff41b6;
}
.booking__card-modal.wd-promotion .select-item{
    background-color: #ff41b6;
    color: #FFF;
}
.booking__card-modal.wd-promotion .select-item.disable{
    background-color: #e2a6cb !important;
}

.booking__card-modal.wd-promotion .calendar .out-of-month{
    background-color: #e2a6cb;
}
.booking__card-modal.wd-promotion .calendar .inactive{
    background-color: #ff41b6;
}
.booking__card-modal.wd-promotion .select-item{
    border: 1px solid #e2a6cb;
}

/* Submit кнопка */
/* .booking__card-modal.wd-promotion .step-buy__content-button--disable{
    background-color: #e2a6cb;
}
.booking__card-modal.wd-promotion .step-buy__content-button{
    background-color: #ff41b6;
} */
.booking__card-modal.wd-promotion .step-buy__content-button,
.booking__card-modal.wd-promotion .step-buy__content-button--disable{
    background: url(/static/media/wd26_btn.b15c3284703b33d23765.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 13px 0px;
    border: none;
    transition:  0.5s;
    color: #bd1920;
    font-weight: 600 !important;
}
.booking__card-modal.wd-promotion .step-buy__content-button--disable{
    opacity: 0.5;
}
.booking__card-modal.wd-promotion .step-buy__content-button:hover{
    background: url(/static/media/wd26_btn_hover.d9529e4c457dd313ac58.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 13px 0px;
    border: none;
    color: #bd1920;
}

.booking__card-modal.wd-promotion .step-buy__content-body .step-buy__content-row--agreement a{
    color: #ff41b6;
}
.booking__card-modal.wd-promotion .step-buy__content-body 
.step-buy__content-row--agreement .agreement_checkbox span.css-1nwae30.Mui-checked {
    color: #ff41b6;
}
.step-buy__content-row--agreement {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top:10px;
    margin-bottom: 20px;
}
.agreement_checkbox {
    align-self: flex-start;
}
.step-buy__content-body{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 360px;
}
.step-buy__content-row{
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.step-buy__content-row-contacts_label,
.step-buy__content-row_label{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.step-buy__content-row_item{
    margin-top: 0.5rem;
}
.step-buy__content-row_item--last{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.step-buy__content-button{
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    margin-top: auto;
    margin-bottom: 0.5rem;
    color: #fff;
}
.step-buy__content-button--disable{
    height: 3.5rem;
    background-color: #9fb1c7;
    border-radius: 1.5rem;
    margin-top: auto;
    margin-bottom: 0.5rem;
    color: #fff;
    -webkit-user-select: none;
            user-select: none;
}
.step-buy__content-row_success-label{
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.66;
    letter-spacing: 0.03333em;
    text-align: left;
    margin-top: 3px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    color: #198754;
}
.step-buy__content-header{
    display: flex;
    flex-direction: column;
}
.step-buy__content-header_tabs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.step-buy__content-header_tabs-button {
  position: relative;
  overflow: visible; /* Разрешаем sublabel выходить за границы */
  background: none;
  border: none;
  padding: 2px !important;
  margin: 0 0.5rem;
  cursor: pointer;
}

.step-buy__content-header_tabs-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-buy__content-header_tabs-button-label {
  font-size: medium;
  color: #9fb1c7;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.step-buy__content-header_tabs-button-label:hover {
  border-bottom: 1px solid #9fb1c7;
}

.step-buy__content-header_tabs-button-label--selected {
  color: #1669DF;
  border-bottom-color: #1669DF;
}

.step-buy__content-header_tabs-button-sublabel {
  position: absolute;
  top: 100%; /* Появляется под label */
  left: 0;
  width: 100%;
  background-color: transparent;
  font-size: medium;
  color: #9fb1c7;
  text-align: center;
  
  /* Анимация */
  transform: translateY(-20px); /* Начальное положение (выше) */
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.1s ease;
  pointer-events: none; /* Чтобы не блокировал клики */
}

.step-buy__content-header_tabs-button:hover .step-buy__content-header_tabs-button-sublabel,
.step-buy__content-header_tabs-button-label--selected ~ .step-buy__content-header_tabs-button-sublabel {
  transform: translateY(0); /* Опускается вниз */
  opacity: 1;
}

.tab-sublabel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center
}

.step-buy__content-header_tabs-button {
  border: none;
  background-color: none;
}

.step-buy__content-row_success-label--hidden{
    visibility: hidden;
}
.step-buy__content-row-contacts{
    margin-bottom: 0px;
    margin-top: 1.25rem;
}
.step-buy__content-row-contacts-content--open{
    max-height: 220px;
    overflow: hidden;
    padding: 1px;
    transition: max-height 1s ease;
}

.step-buy__content-row-contacts-content--close{
    max-height: 0;
    overflow: hidden;
    padding: 1px;
    transition: max-height 1s ease;
    transition: max-height 0.3s;
}

.step-buy__content-row-contacts-list-indicator {
    margin-left: 0;
    pointer-events: none;
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

.step-buy__content-row-contacts-list-indicator--rotated {
    transition: transform 0.3s;
    transform: rotate(-180deg); 
}
.step-buy__content-row-contacts-content_item{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.step-buy__content-row-contacts-content_item--inactive {
    pointer-events: none;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    -webkit-user-select: none;
            user-select: none;
}

.step-buy__content-row-contacts-list_label{
    margin-bottom: 0.15rem;
    cursor: pointer !important;
}

.step-buy__content-row-contacts-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #1669DF;
    cursor: pointer !important;
}

@media (max-width: 650px){
    .step-buy__content-header_tabs{
        flex-direction: column;
    }
    .step-buy__content-header_tabs-button:hover .step-buy__content-header_tabs-button-sublabel,
    .step-buy__content-header_tabs-button-label--selected ~ .step-buy__content-header_tabs-button-sublabel {
        transform: translateY(-23px) translateX(90px);
    }
}
.step-buy__tooltip {
    border: 1px solid #9fb1c7;
    border-radius: 0.5rem;
    margin-top: 2.5rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
}
.step-buy__tooltip-data {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.step-buy__tooltip-data-icon {
    margin-right: 0.5rem;
    color: #1669DF;
}

.step-buy__tooltip--success {
    border: 1px solid #2e7d32;
}

.step-buy__tooltip-data-icon--success {
    color: #2e7d32;
}

.step-buy__tooltip--error {
    border: 1px solid #ff4d4f;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-2px); }
    40%, 80% { transform: translateX(2px); }
}
.counter__content{
    display: flex;
    align-items: center;
    border: solid 1px #DBDFE6;
    border-radius: 12px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.counter__content-item{
    padding: 8px 16px 8px 16px;
}
.counter__content-item--button{
    -webkit-user-select: none;
            user-select: none;
    cursor: pointer;
    padding: 8px 12px 8px 12px;
}
.products__content-wrapper {
    display: flex;
    flex-direction: column;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    gap: 1rem;
}

.products__category-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.products__category-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E0E0E0;
}

.products__content-row {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.products__content-item-wrapper {
    position: relative;
    display: inline-block;
}

.products__content-item {
    -webkit-user-select: none;
            user-select: none;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 10px 16px 10px 16px;
    background-color: #EBF1FA;
    cursor: pointer;
    text-align: center;
    color: black;
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.products__content-item:not(.products__content-item--disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.35);
}

.products__content-item--selected {
    -webkit-user-select: none;
            user-select: none;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 10px 16px 10px 16px;
    cursor: pointer;
    text-align: center;
    background-color: #1669DF;
    color: white;
    border-radius: 10px;
    pointer-events: none;
}
.products__content-item--disabled{
    pointer-events: none;
    background-color: #EBF1FA;
    color:#CFD7E2;
}

.products__content-item--promo {
    position: relative;
    border: none;
}

.products__content-item-promo-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, #FDE68A 0%, #F59E0B 60%, #D97706 100%);
    color: #1E293B;
    font-size: 9px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
}

.products__content-item--promo:not(.products__content-item--disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.35)
}

.products__content-item--selected.products__content-item--promo {
    color: #FFFFFF;
    box-shadow:
        0 2px 5px rgba(30, 64, 175, 0.4);
}

/* Tooltip для продуктов (аналогичный слотам) */
.products__content-item-wrapper .products__content-item-tooltip {
    visibility: hidden;
    background-color: #2F3D52;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    min-width: 8rem;
    max-width: 14rem;
    position: absolute;
    z-index: 10; /* Выше tooltip слота, чтобы не перекрывался */
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: auto; /* Разрешаем взаимодействие с tooltip */
}

/* Прозрачная зона под tooltip, чтобы курсор не терял hover при движении вниз */
.products__content-item-wrapper .products__content-item-tooltip::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -10px; /* чуть ниже тултипа */
    background: transparent;
}

.products__content-item-wrapper:hover .products__content-item-tooltip {
    visibility: visible;
    opacity: 1;
}

.products__content-item-tooltip-content {
    display: flex;
    flex-direction: column;
}

.products__content-item-tooltip-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-weight: 700;
    white-space: nowrap;
}

.products__content-item-tooltip-price-new {
    font-weight: 700;
}

.products__content-item-tooltip-price-old {
    font-size: 0.85rem;
    text-decoration: line-through;
    opacity: 0.7;
    margin-left: 0.25rem;
}
.products__content--empty{
    font-size: smaller;
    margin-top: 0.5rem;
    padding: 10px 16px 10px 16px;
    /* font-style: italic; */
}

@media (max-width: 650px){
    .products__content-item{
        /* margin-left: 0.1rem;
        margin-right: 0.1rem; */
        margin-left: 0;
        margin-right: 0;
    }
    .products__content-row{
        flex-wrap: wrap;
        gap: 5px;
    }
}
.step-buy__price-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step-buy__price-old {
  text-decoration: line-through;
  color: #666;
  color: var(--color-text-secondary, #666);
  font-size: 0.95em;
}

.step-buy__price-current {
  font-weight: 600;
}

.step-buy__content-row_final-label {
  font-size: 0.75rem;
  line-height: 1.66;
  margin-top: 3px;
  color: #0D6EFD;
  font-weight: 500;
}

.certificate-input{
    background-color: #EBF1FA;
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    border: none;
    box-sizing: border-box;
    font-size: medium;
    width: 100%
}
.certificate-button__search{
    background-color: #9fb1c7;
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border: none;
    padding: 10px 16px 10px 16px;
    box-sizing: border-box;
    padding: 0.5rem;
    font-size: medium;
    cursor:pointer;
}
.certificate{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.certificate-button__search:hover{
    opacity: 0.85;
}
.certificate .label{
    width:0px !important;
}
.certificate-input .select-input{
    height: 100%
}

.balances__content {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative; /* Добавляем relative для правильного позиционирования tooltip */
}

.balances__content-item {
    -webkit-user-select: none;
            user-select: none;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 10px 16px;
    background-color: #EBF1FA;
    cursor: pointer;
    text-align: center;
    color: black;
    border-radius: 10px;
    position: relative; /* Добавляем relative для правильного позиционирования tooltip */
}

.balances__content-item--selected {
    -webkit-user-select: none;
            user-select: none;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 10px 16px;
    cursor: pointer;
    text-align: center;
    background-color: #1669DF;
    color: white;
    border-radius: 10px;
    position: relative;
}

.balances__content-item--disabled {
    pointer-events: none;
    background-color: #EBF1FA;
    color: #CFD7E2;
}

.balances__content--empty {
    font-size: smaller;
    margin-top: 0.5rem;
    padding: 10px 16px;
    /* font-style: italic; */
}

.balances__content-item .balances__content-item--tooltip {
    visibility: hidden;
    background-color: #2F3D52;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    width: 12rem;
    position: absolute;
    z-index: 1;
    bottom: calc(100% + 5px); /* Используем calc() для учета положения скроллинга */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 4px;
}

.balances__content-item .balances__content-item--tooltip-content {
    display: flex;
    flex-direction: column;
}

/* Убираем стрелку */
.balances__content-item .balances__content-item--tooltip::after {
    content: none;
}

.balances__content-item:hover .balances__content-item--tooltip {
    visibility: visible;
    opacity: 1;
}

.balances__content-item--selected .balances__content-item--tooltip {
    visibility: hidden;
    background-color: #2F3D52;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    width: 12rem;
    position: absolute;
    z-index: 1;
    bottom: calc(100% + 5px); /* Используем calc() для учета положения скроллинга */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 4px;
}

.balances__content-item--selected .balances__content-item--tooltip-content {
    display: flex;
    flex-direction: column;
}

/* Убираем стрелку */
.balances__content-item--selected .balances__content-item--tooltip::after {
    content: none;
}

.balances__content-item--selected:hover .balances__content-item--tooltip {
    visibility: visible;
    opacity: 1;
}


.step-preview__info{
    display: block;
    width:100%;
    text-align: center;
    margin: 0 auto;
    color: #ff2020;
}
.step-preview__content-button{
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    color:white;
    align-self: center;
    width:100%;
    display: flex;
    justify-content: space-between; /* Этот стиль распределяет пространство между детьми равномерно */
    align-items: center;
    position: relative;
}
.step-preview__content-button--loading{
    opacity: 0.85;
    cursor: not-allowed;
}
.step-preview__spinner{
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    margin-left: 12px;
    animation: stepPreviewSpin 0.8s linear infinite;
}
@keyframes stepPreviewSpin {
    to { transform: rotate(360deg); }
}
.step-preview__content-row_data-terms{
    width: 100%;
}
.step-preview__content table {
    border-collapse: separate;
    border-spacing: 0.5rem 1.5rem;
    border-radius: 0.25rem;
}

.step-preview__content-button-container{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;

}

.step-preview__content-button-container_item--centered{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.step-preview__content-button-container_item--end{
    margin-left: auto;
}

.step-preview__content-row_data{
    width: 75%;
    color: #1669DF;
}

.step-preview__content{
    display: flex;
    flex-direction: column;
}
.step-preview__content-row_info{
    word-break: normal;
    max-width: 250px
}
.step-preview__content td{
    text-align: start;
}
.step-preview__content-row_contacts-data{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}
.step-preview__content-row_contacts-block{
    color: #51709B;
    font-size: medium;
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    margin-bottom:1.5rem;
}
.step-afterpay__content-button{
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    color:white;
    align-self: center;
    width:100%;
    margin-top: auto;
}


.step-afterpay__content-row_data{
    width: 75%;
    color: #1669DF;
}

.step-afterpay__content{
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.step-afterpay__content-row_info{
    word-break: normal;
    max-width: 250px
}
.step-afterpay__content-card-row_info-data{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}
.step-afterpay__content-card-row_info-block{
    color: #51709B;
    font-size: medium;
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    margin-bottom:1.5rem;
}
.step-afterpay__content-card-row_contacts-data{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}
.step-afterpay__content-card-row_contacts-block{
    font-size: large;
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
}
.step-afterpay__content_header{
    font-size: large;
    font-weight: 500;
    align-self: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.step-afterpay__content-card{
    padding: 2rem;
    background-color: #EBF1FA;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.booking-header__labell{
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    align-self: center !important;
}
.booking-header__content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between ;
    color:#1C1B1F
}
.booking-header__item--hide{
    visibility: hidden !important;
}
.step-buy__content-body{
    display: flex;
    flex-direction: column;
    height: 95%;
    min-height: 360px;
}
/* .buy_balance__card .step-buy__content-body{
    height: 92%;
} */
.step-buy__content--container {
    height: 100%;
}
.step-buy__content{
    height: 100%;
}
.step-buy__content-row{
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.step-buy__content-row-contacts_label,
.step-buy__content-row_label{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.step-buy__content-row_item{
    margin-top: 0.5rem;
}
.step-buy__content-row_item--last{
    max-width: 400px;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.step-buy__content-button{
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    margin-top: auto;
    margin-bottom: 0.5rem;
    color: #fff;
}
.step-buy__content-row_success-label{
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.66;
    letter-spacing: 0.03333em;
    text-align: left;
    margin-top: 3px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    color: #198754;
}
.step-buy__content-header{
    display: flex;
    flex-direction: column;
}
.step-buy__content-header_tabs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.step-buy__content-header_tabs-button{
    padding: 0.5rem;
    background-color: transparent;
    font-size: medium;
    border:none;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-bottom: solid 1px transparent;
    color:#9fb1c7;
}
.step-buy__content-header_tabs-button--selected{
    padding: 0.5rem;
    background-color: transparent;
    font-size: medium;
    border:none;
    border-bottom: solid 1px #1669DF;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color:#1669DF;
}

.step-buy__content-row_success-label--hidden{
    visibility: hidden;
}
.step-buy__content-row-contacts{
    margin-bottom: 0px;
    margin-top: 1.25rem;
}
.step-buy__content-row-contacts-content--open{
    max-height: 220px;
    overflow: hidden;
    padding: 1px;
    transition: max-height 1s ease;
}

.step-buy__content-row-contacts-content--close{
    max-height: 0;
    overflow: hidden;
    padding: 1px;
    transition: max-height 1s ease;
    transition: max-height 0.3s;
}

.step-buy__content-row-contacts-list-indicator {
    margin-left: 0;
    pointer-events: none;
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

.step-buy__content-row-contacts-list-indicator--rotated {
    transition: transform 0.3s;
    transform: rotate(-180deg); 
}
.step-buy__content-row-contacts-content_item{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.step-buy__content-row-contacts-list_label{
    margin-bottom: 0.15rem;
    cursor: pointer !important;
}

.step-buy__content-row-contacts-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #1669DF;
    cursor: pointer !important;
}
@media (max-width: 1080px){
    .buy_balance__card .step-buy__content-body{
        height: auto;
        min-height: auto;
    }
}
@media (max-width: 650px){
    .step-buy__content-header_tabs{
        flex-direction: column;
    }
    .step-buy__content-row_item--last{
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
}

.step-preview__content-button{
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    color:white;
    align-self: center;
    width:100%;
    display: flex;
    justify-content: space-between; /* Этот стиль распределяет пространство между детьми равномерно */
    align-items: center;
    position: relative;
}

.step-preview__content table {
    border-collapse: separate;
    border-spacing: 0.5rem 1.5rem;
    border-radius: 0.25rem;
}

.step-preview__content-button-container{
    display: flex;
    width: 100%;
}

.step-preview__content-button-container_item--centered{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.step-preview__content-button-container_item--end{
    margin-left: auto;
}

.step-preview__content-row_data{
    width: 75%;
    color: #1669DF;
}

.step-preview__content{
    display: flex;
    flex-direction: column;
}
.step-preview__content-row_info{
    word-break: normal;
    max-width: 250px
}
.step-preview__content td{
    text-align: start;
}
.step-preview__content-row_contacts-data{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}
.step-preview__content-row_contacts-block{
    color: #51709B;
    font-size: medium;
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    margin-bottom:1.5rem;
}

.step-afterpay__content-button{
    height: 3.5rem;
    background-color: #1669DF;
    border-radius: 1.5rem;
    color:white;
    align-self: center;
    width:100%;
    margin-top: auto;
}


.step-afterpay__content-row_data{
    width: 75%;
    color: #1669DF;
}

.step-afterpay__content{
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.step-afterpay__content-row_info{
    word-break: normal;
    max-width: 250px
}
.step-afterpay__content-card-row_info-data{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}
.step-afterpay__content-card-row_info-block{
    color: #51709B;
    font-size: medium;
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    margin-bottom:1.5rem;
}
.step-afterpay__content-card-row_contacts-data{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}
.step-afterpay__content-card-row_contacts-block{
    font-size: large;
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
}
.step-afterpay__content_header{
    font-size: large;
    font-weight: 500;
    align-self: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.step-afterpay__content-card{
    padding: 2rem;
    background-color: #EBF1FA;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.balance-header__labell{
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    align-self: center !important;
}
.balance-header__content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between ;
    color:#1C1B1F
}
.balance-header__item--hide{
    visibility: hidden !important;
}
.buy_balance__card-modal{
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    width: -webkit-min-content;
    width: min-content;
    border-radius: 1.5rem;
    min-width: 400px;
    border: 1px solid #0000007a;
    display: flex;
    flex-direction: column;
    margin: 1rem;
    background-color: #fff;

}

.buy_balance__card {
    height: 100%;
    max-height: 95%;
}
.buy_balance__card-body {
    height: 90%;
    height: 89.5%;
    box-sizing: border-box;
}

.buy_balance-input{
    background-color: #EBF1FA;
    border-radius: 0.5rem;
    border: none;
    padding: 10px 16px 10px 16px;
    box-sizing: border-box;
    padding: 0.5rem;
    height: 3rem;
    font-size: medium;
    width: 100%;
}
.buy_balance-input::placeholder{
    color: #585858;
}
@media (max-width: 650px){
    .buy_balance__card-modal{
        min-width: 300px;
    }
}
@media (max-width: 450px){
    .buy_balance__card-modal{
        padding: 0rem 0.7rem 0rem 0.7rem;
        min-width: calc(100% - 55px);
    }
}

.tile-panel{
    display: grid;
    grid-template-columns: repeat(5, 0.2fr); /* Определяем 3 столбца одинаковой ширины */
    grid-gap: 10px;
    gap: 10px; /* Устанавливаем расстояние между компонентами */
    padding: 1rem;
}
@media(max-width: 1700px){
    .tile-panel{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media(max-width: 1130px){
    .tile-panel{
        grid-template-columns: repeat(3, 1fr);
    }
}@media(max-width: 780px){
    .tile-panel{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 560px){
    .tile-panel{
        grid-template-columns: repeat(1, 1fr);
    }
}
.tool-tip__content {
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
    max-width: 300px;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow-wrap: break-word;
    z-index: 1000;
    transform: translateY(1.25rem);
  }
  
  .tool-tip__icon {
    color: #1669DF;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
  }
  @media(max-width: 450px){
    .tool-tip__icon{
      padding-top: 5px;
    }
  }
.certificate-tile{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #0000007a;
    box-shadow: 0px 1px 0px 0px rgba(44, 48, 53, 0.11);
    justify-content: space-between;
}
.certificate-tile_img {
    display: flex;
    width: 100%;
    padding: 1rem 0rem 1rem 0rem;
    display: none;
}
.certificate-title_btn{
    background-color: #1669DF;
}
.certificate-tile_header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #C9C9C9;
}
.certificate-tile_header-left{
    display: flex;
}
.certificate-tile_header-left{
    display: flex;
    font-family: 'RobotoCondensed-BoldItalic';
}
.certificate-tile_header-left__minutes{
    display: flex;
    align-items: center;
    color: #1669DF;
    font-size: 2rem;
}
.certificate-tile_header-left__title{
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    margin-left: 0.5rem;
}
.certificate-tile_header-right{
    display: flex;
}
.certificate-tile_header-right__price{
    display: flex;
    align-items: center;
    color: #1669DF;
    font-size: 2rem;
}
.certificate-tile_check-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem;
}
.certificate-tile_check-row-icon{
    color: #1669DF;
}
.certificate-tile_check-row-label{
    color: #000;
    font-family: 'RobotoCondensed-Medium';
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

@media(max-width: 1500px){
    .certificate-tile_header{
        font-size: 1.5rem;
    }
    .certificate-tile_header-left__minutes,
    .certificate-tile_header-right__price{
        font-size: 1.6rem;
    }
}
@media(max-width: 900px){
    
    .certificate-tile_header-left__minutes,
    .certificate-tile_header-right__price,
    .certificate-tile_header-left__title{
        font-size: 1.3rem;
    }
}
@media(max-width: 450px){
    .certificate-tile_img{
        width: 70%;
        margin: 0 auto;
    }
    .certificate-tile_header{
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }
    .certificate-tile_header-left__minutes,
    .certificate-tile_header-right__price,
    .certificate-tile_header-left__title{
        font-size: 1.25rem;
    }
    .certificate-tile_check-row-label{
        font-size: 1rem;
    }
}
.agreement_checkbox {
    align-self: flex-start;
}
.home_certificate-buy-modal-agreement {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top:10px;
    margin-bottom: 20px;
}
.home--top-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Два сегмента на больших экранах */
    align-items: start;
    grid-gap: 16px;
    gap: 16px; /* Промежуток между элементами */
    width: 100%;
}
.home--carousel-container{
    max-height: 600px;
    width: 100%;
    display: flex;
    box-sizing: border-box  ;
}
.home_certificate-buy-modal{
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
}
.home_certificate-buy-modal-content{
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    width: 100% !important;
}
.home_certificate-buy-modal-content_row{
    margin-bottom: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}
.home_certificate-buy-modal-content_row--button{
    margin-top: 0.5rem;
}
.home_certificate-buy-modal-content_row--button-disabled {
    background-color: #6c757d;;
}
.home__content-row-certificates{
    margin-bottom: 0px;
    margin-top: 1.25rem;
}
.home__content-row-certificates-content--open{
    max-height: 2200px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    padding: 1px;
    transition: max-height 420ms ease, opacity 280ms ease, transform 320ms ease;
    will-change: max-height, opacity, transform;
}

.home__content-row-certificates-content--close{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    padding: 1px;
    transition: max-height 320ms ease, opacity 220ms ease, transform 260ms ease;
    will-change: max-height, opacity, transform;
}

.home__content-row-certificates-list-indicator {
    margin-left: 0;
    pointer-events: none;
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

.home__content-row-certificates-list-indicator--rotated {
    transition: transform 0.3s;
    transform: rotate(-180deg); 
}
.home__content-row-certificates-content_item{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.home__content-row-certificates-list_label{
    margin-bottom: 0.15rem;
    cursor: pointer !important;
}

.home__content-row-certificates-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #1669DF;
    cursor: pointer !important;
}

.home__content-row-certificates-groups{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home__content-row-certificates-group{
    background: #f7f9ff;
    border: 1px solid #d9e6ff;
    border-radius: 10px;
    padding: 0.65rem;
}

.home__content-row-certificates-group-title{
    font-weight: 600;
    color: #1669DF;
    margin-bottom: 0.45rem;
}

.home__content-row-certificates-group-products{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.home__content-row-certificates-product-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5ecfb;
}

.home__content-row-certificates-product-main{
    min-width: 0;
}

.home__content-row-certificates-product-name{
    font-size: 0.92rem;
    color: #1f2937;
}

.home__content-row-certificates-product-meta{
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.12rem;
}

.home__content-row-certificates-product-actions{
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.home__content-row-certificates-product-price{
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

.home__content-row-certificates-product-buy-btn{
    white-space: nowrap;
}

@media (max-width: 1080px) { /* Для экранов меньше 768px */
    .home--top-container {
        grid-template-columns: 1fr; /* Один сегмент на малых экранах */
    }
}
@media(max-width: 450px){
    .home--top-container{
        justify-content: center;
    }
    .home__content-row-certificates-product-row{
        flex-direction: column;
        align-items: flex-start;
    }
    .home__content-row-certificates-product-actions{
        width: 100%;
        justify-content: space-between;
    }
}

.admin-clients_column-width {
    cursor: pointer;
    width: 11.11%;
}
.admin-bookings_column--nonactive {
    color:#6c757d;
}
.clients tbody tr:hover {
    background-color: rgb(154, 189, 196);
}
.user__balance {
    cursor: pointer;
}

.user__balance span:hover {
    color: #1e88e5;
}

.user__balance--active {
    cursor: pointer;
    background-color: #1e88e5;
    color: #fff;
}

.balance_user_name {
    margin-top: 0.25rem;
    cursor: pointer;
    color: #1e88e5;
}

.balance_user_name {
    margin-top: 0.25rem;
    cursor: pointer;
    color: #1e88e5;
}
.client__role-list {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    overflow-y: scroll;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
}

@media(max-width: 600px){
    .admin-users_column-width{
        width: 88%;
    }
    .admin-clients_column-width{
        width: 88%;
    }
    .table .table__body .table__row:last-child .table__col:first-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

    .table .table__body .table__row:last-child .table__col:last-child {
        border-bottom-right-radius: 0px !important;
    }
}

.admin-cdrs-width-250{
    min-width: 250px;
}
.app > .layout-auth{
    height: auto !important;
}
@media (max-width: 450px) {
    .app > .layout-auth .booking__card-modal {
        min-width: 300px;
    }
    .app  > .layout-auth .mdl-app-messages__item{
        font-size: 13px;
        border-radius: 14px;
    }
}

.auth__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.5rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.auth__card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.auth__input-grid{
    grid-template-columns: 120px 0.5fr 0px;
}

.auth__card-body {
    flex: 1 1 auto;
    padding: 1rem;
    display: flex;
}

.auth__credentials{
    margin-top: 0.5rem;
}
.auth__btn-wrap {
    width:100%;
    display: flex;
    padding: 0.5rem;
}

.auth__login-email {
    width: 200px
}
.auth__login-password {
    width: 200px
}
.auth__botom{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}
.auth__botom_btn_right {
    margin-right: 0.25rem;
}
.auth__botom_btn-wrap {
    display: flex;
    width: 100%;
}
.auth__botom_link {
    display: flex;
    width: 100%;
}
.auth__reset_password {
    margin-top: 0.5rem;
}
.auth__reset {
    grid-template-columns: 0px 0fr 0px;
}
.auth__reset .label {
    width: 0px
}


/*# sourceMappingURL=main.7d4778a0.css.map*/