h1 {
    font-size: 24px;
    font-weight: 100;
}

html, body {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
}

h2 {
    font-size: 20px;
    font-weight: 100;
}

h3 {
    font-size: 18px;
    font-weight: 100;
}

h1, h2, h3 {
    margin-top: 0;
}

a {
    cursor: pointer;
}

table tbody tr:hover:not(:last-child) {
    background: rgba(135,206,250, 0.2) !important;
}

.table-container .table {
    width: max-content;
    min-width: 100% !important;
    max-width: none;
    margin-bottom: 0px !important;
}

.table-resizing td {
    min-width: 150px !important;
}

.table-resizing th {
    min-width: 150px !important;
}

.table-sticky {
    position: relative;
}

.table-sticky thead {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.scroll-box {
    overflow: auto;
}
.scroll-box::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
}

/* .note-editable table {
    width: auto !important;
} */

.order-status-td {
    min-width: 150px !important;
    width: min-content;
}

.part-panel-body {
    padding: 0px;
}

form input, form select, form textarea {
    margin-bottom: 10px;
}

.btn-close-modal {
    margin-right: 20px;
}

.login-form-block {
    padding: 50px 30% 0px;
}

.not-required {
    font-weight: 100;
}

.table-head-btn {
    padding: 0px 5px;
}

.input-cleaner {
    position: relative;
}

.input-cleaner span {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0px 8px;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
}



.input-cleaner input {
    padding-right: 28px !important;
}

.input-cleaner input:invalid ~ span {
    display: none !important;
}

#print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}

@media (max-width: 768px){
    .login-form-block {
        padding: 50px 5% 0px;
    }
    .login-form-block .form-group {
        margin: 15px 20px;
        flex-direction: column;
        display: flex;
    }
    .add-voice-record.active {
        transform: scale(4) !important;
        padding: 10px;
        width: 70px;
        height: 70px;
    }
    .message-tool-btn {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 5px !important;
    }
    .menu-col-design {
        margin-left: -60px;
    }
    .menu-col-design .menu-block.show-all {
        margin-left: 60px;
    }
}

/*=================== Global-Block =========================*/

.global-block{
    padding: 0px;
    display: flex;
}

.content-col-design{
    padding: 20px 20px 50px 20px;
    flex: 1 1 auto;
    height: 100vh;
    overflow-y: auto;
}

.content-col-design::-webkit-scrollbar {
    width: 7px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

.content-col-design::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

.scroll-container {
    width: 100%;
    overflow-x: auto;
}

.scroll-container::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
    cursor: pointer;
} 

/* .table-container-scroll {
    position: sticky;
    bottom: 0;
    bottom: 0px;
    width: 100%;
    height: 20px;
    background-color: rgba(0, 0, 0, .05);
    overflow-x: auto;
}

.table-container-scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

.table-container-scroll::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
} */

/* .table-wrapper-scroll::-webkit-scrollbar {
    width: 20px;      
    height: 40px;      
    border: 1px solid lightskyblue;
    border-radius: 5px;
}

.table-wrapper-scroll::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 5px;
    cursor: pointer;
} */
  
  /* Внутрішній блок, що «розтягується» під ширину таблиці */
  /* .scrollbar-content {
    height: 40px;
    width: 20px;
    background-color: red;
  } */


.table-container::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    display: none;
}

.table-container::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
    display: none;
}

.table-container-in-modal::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    display: block !important;
}

.table-container-in-modal::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
    display: block !important;
    cursor: pointer;
}



/*=================== menu-col-design =========================*/

.menu-col-design {
    height: 100vh;
    z-index: 3;
}

.menu-col-design .menu-block {
    width: 60px;
    height: 100vh;
    overflow: hidden;
    padding: 10px 0px 10px 10px;
    background: lightskyblue;
    transition: all 0.3s;
    z-index: 99999;
    box-shadow: 7px 0px 7px rgba(255, 255, 255, 1);
}

.block-show-long {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
}

.show-long-menu-style {
    border: none;
}

.show-long-menu-style:focus, .show-long-menu-style:active {
    outline: none;
    background: #fff;
}

.menu-col-design .menu-block.show-all {
    width: 200px;
}

.menu-col-design .ul-menu-items {
    padding: 0px;
    list-style: none;
    margin-top: 40px;
}

button:disabled {
  cursor: not-allowed;
}

.ul-menu-items .item-menu-col-design {
    display: flex;
    margin-top: 5px;
    padding: 10px 0px 10px 10px;
    font-size: 16px;
    color: #fff;
    line-height: 1em;
    transition: all 0s;
    cursor: pointer;
    transition: 0.1s all;
}

.ul-menu-items .item-menu-col-design span, .ul-menu-items .item-menu-col-design i {
    z-index: 2;
}

.ul-menu-items .item-menu-col-design:hover:not(.active) {
    border-left: 3px solid #fff;
}

.ul-menu-items a {
    text-decoration: none;
}

.ul-menu-items a li:not(.active) {
    position: relative;
    z-index: 1;
}

.menu-block .ul-menu-items .item-menu-col-design .menu-item-title {
    margin-left: 22px;
    opacity: 0;
    transition: all 0.3s;
    z-index: 2;
}

.menu-block.show-all .ul-menu-items .item-menu-col-design .menu-item-title {
    opacity: 1;
}

.ul-menu-items .item-menu-col-design.active {
    position: relative;
    background: #fff;
    color: #000;
    border-radius: 10px 0px 0px 10px;
}

.ul-menu-items .item-menu-col-design.active .active-top {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    top: -20px;
    background: #fff;
    z-index: 0;
}

.ul-menu-items .item-menu-col-design.active .active-top:after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    background: lightskyblue;
    border-radius: 15px;
    width: 40px;
    height: 40px;
    z-index: 0;
}

.ul-menu-items .item-menu-col-design.active .active-bottom {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    bottom: -20px;
    background: #fff;
    z-index: 0;
}

.ul-menu-items .item-menu-col-design.active .active-bottom:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    background: lightskyblue;
    border-radius: 15px;
    width: 40px;
    height: 40px;
    z-index: 0;
}

.item-menu-col-design-out {
    display: flex;
    margin-top: 5px;
    padding: 10px 0px 10px 10px;
    font-size: 16px;
    color: #fff;
    line-height: 1em;
    transition: all 0s;
    cursor: pointer;
    transition: 0.1s all;
}

.item-menu-col-design-out span, .item-menu-col-design-out i {
    z-index: 2;
}

.item-menu-col-design-out:hover:not(.active) {
    border-left: 3px solid #fff;
}

.item-menu-col-design-out-a {
    text-decoration: none !important;
}

.item-menu-col-design-out-a li:not(.active) {
    position: relative;
    z-index: 1;
}

.item-menu-col-design-out .menu-item-title {
    margin-left: 24px;
    opacity: 0;
    transition: all 0.3s;
    z-index: 2;
}

.item-menu-col-design-out .menu-item-title {
    opacity: 1;
}

.item-menu-col-design-out.active {
    position: relative;
    background: #fff;
    color: #000;
    border-radius: 10px 0px 0px 10px;
}

.item-menu-col-design-out.active .active-top {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    top: -20px;
    background: #fff;
    z-index: 0;
}

.item-menu-col-design-out.active .active-top:after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    background: lightskyblue;
    border-radius: 15px;
    width: 40px;
    height: 40px;
    z-index: 0;
}

.item-menu-col-design-out.active .active-bottom {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    bottom: -20px;
    background: #fff;
    z-index: 0;
}

.item-menu-col-design-out.active .active-bottom:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    background: lightskyblue;
    border-radius: 15px;
    width: 40px;
    height: 40px;
    z-index: 0;
}

 .ul-menu-items hr {
    margin-right: 10px;
    margin-top: 11px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
 }

/*=================== Right-Col-Design =========================*/

.block-right-col-design {
    width: 22%;
    float:left;
    position: relative;
    height: 100vh;
}

.right-col-design{
    width: 100%;
    float:left;
    background: lightskyblue;
    height: 100vh;
    right: 0;
    display: flex;
    padding: 0px 10px;
    flex-direction: column;
    overflow-y: scroll;
    padding-bottom: 150px;
}

.right-col-design::-webkit-scrollbar {
    display: none;
}

.right-col-design .item-right-col {
    padding: 10px;
    margin: 5px 0px;
    background: aliceblue;
    box-shadow: 2.5px 2.5px 5px #69a8d0;
    border-radius: 10px;
}

.content-col-design .item-right-col {
    padding: 10px;
    margin: 5px 0px;
    background: aliceblue;
    box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.item-right-col h4 {
    font-size: 16px;
}

.item-right-col h3 {
    margin-top: 0px;
    text-align: center;
    font-weight: 600;
    font-size: 17px;
}

.item-right-col:empty{
    display: none;
}

.top-head {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-right-col .top-head {
    margin: 0px;
}

.languages {
    display: flex;
    list-style: none;
    margin-bottom: 0px;
}

.languages li {
    padding: 0px 5px;
    font-weight: bold;
}

.languages li a {
    color: #5cb85c;
}

.languages li a.selected {
    color: #c4c4c4;
    font-weight: 100;
}

.languages li:first-child{
    border-right: 1px solid #c4c4c4;
}

.btn-archive {
    border: 1px solid #c7c7c7;
    color: #444;
    font-weight: 600;
    margin-right: 10px;
}

.item-right-col .sidebar-nav {
    margin-top: 0px;
    margin-bottom: 0px;
}

.sidebar-nav {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.sidebar-nav li {
    margin-right: 10px;
}

.copy-click {
    transition: 0.3s;
    position:relative;
    margin-right: 22px;
}

.copy-click:after {
    content: '';
    position: absolute;
    /* background: url(../images/copy-solid.svg); */
    background-color: rgb(108, 170, 208);
    -webkit-mask-image: url(../images/copy-solid.svg);
    mask-image: url(../images/copy-solid.svg);
    -webkit-mask-repeat: no-repeat;
    width: 16px;
    height: 15px;
    right: -20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.copy-icon-order {
    transition: 0.3s;
    position:relative;
    margin-right: 22px;   
    cursor: pointer;
}
.copy-icon-order::after {
    content: '';
    position: absolute;
    /* background: url(../images/copy-solid.svg); */
    background-color: rgb(108, 170, 208);
    -webkit-mask-image: url(../images/copy-solid.svg);
    mask-image: url(../images/copy-solid.svg);
    -webkit-mask-repeat: no-repeat;
    width: 16px;
    height: 15px;
    right: -20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}



.call-number-style {
    color: #44649D;
    cursor: pointer;
}

span.silver-span.phone-n {
    color: #337ab7;
    cursor: pointer;
    font-weight: bolder;
}

span.silver-span.call-on-click {
    color: #337ab7;
    cursor: pointer;
    font-weight: bolder;
}

.viber-link {
    width: 34px;
    height: 34px;
    padding: 0px;
    background: transparent;
    border: none;
}

.telegram-link {
    width: 33px;
    height: 33px;
    padding: 0px;
    background: transparent;
    border: none;
}

.viber-dropdown,.telegram-dropdown {
    display: inline-block;
}

ul.dropdown-left {
    right: 0;
    left: auto;
}

.viber-link img {
    width: 100%;
    height: auto;
}

.telegram-link img {
    width: 100%;
    height: auto;
    border-radius: 7px;
}

/*=================== Comment Chat =========================*/

.comments {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 7px;
}

.comments::-webkit-scrollbar {
    width: 7px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.comments::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 10px;
}

.item-comments {
    background: #fff;
    border-radius: 10px;
    padding: 7px 17px;
    margin-bottom: 7px;
    border: 1px solid #e7e7e7;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    padding: 7px 0px;
    font-size: 18px;
}

.comment-user {
    font-weight: 600;
    color: #337ab7;
}

.text-comment {
    font-size: 16px;
}

/* .comment-chat-pad {
    background: #fff;
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
} */

button.btn-send-comment-chat {
    background-color: #6CB0DA;
    color: #fff;
}

button.btn-send-comment-chat:hover {
    background-color: #438fbf;
    color: #fff;
}

textarea.text-comment:focus {
    box-shadow: none;
    border-color: none;
}
textarea.text-comment {
    margin-right: 10px;
    resize: none;
    height: 77px;
    border: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.message-tool-btn span, .message-tool-btn i {
    color: #999;
}

.message-tool-btn.btn {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

.add-voice-record {
    border-radius: 100%;
    transition: all .2s;
}

.voice-message-item {
    position: relative;
}

.voice-message-item .load-voice {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* record btn */

.add-voice-record.active {
    background-color: #f56a6a;
    transform: scale(1.5);
    box-shadow: none;
}

.add-voice-record.active i {
    color: #fff;
}

.add-voice-record.active .pulse-button__rings {
    border: 1px solid #f56a6a;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
    width: auto;
    border-radius: 50%;
    animation-duration: 2.0s;
    animation-name: pulse_1;
    animation-iteration-count: infinite;
    z-index: -1;
}

.add-voice-record.active .pulse-button__rings:nth-child(2) {
    animation-name: pulse_2;
    animation-delay: 1s;
    box-shadow: inset 0px 0px 10px #f56a6a;
}

.add-voice-record.active .pulse-button__rings:nth-child(3) {
    animation-name: pulse_3;
    box-shadow: inset 0px 0px 10px #f56a6a;
}

.remove-voice {
    width: 40px;
    display: flex;
    justify-content: center;
}

@keyframes pulse_2 {
    from {
        opacity: 1;
        transform: scale(1, 1);
    }

    to {
        opacity: 0;
        transform: scale(1.7, 1.7);
    }
}

@keyframes pulse_3 {
    from {
        opacity: 1;
        transform: scale(1, 1);
    }

    to {
        opacity: 0;
        transform: scale(1.7, 1.7);
    }
}

.voice-message-item {
    width: 100%;
}
.voice-message-item audio {
    height: 30px;
}

/* end record btn */

.loaded-files-comment:empty {
    display: none;
}

.loaded-files-comment {
    width: 100%;
    padding: 4px;
    border-top: 1px solid #f1f1f1;
    background: #fff;
    border-radius: 10px;
}

.loaded-files-comment .item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0px 5px;
    color: #6CB0DA;
    opacity: 0.8;
    overflow: hidden;
}

.file-item-comment-style i {
    font-size: 30px;
}

/*=================== Message pulse ====================*/
.pulse-message {
    position: absolute;
    border-radius: 50%;
    background: #f56a6a;
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

.pulse-message::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #f56a6a;
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    box-shadow: inset 0px 0px 10px #f56a6a;
    animation-name: pulse_message;
    animation-duration: 1.0s;
    animation-iteration-count: infinite;
}

.pulse-number,.pulse-number-today {
    position: relative;
    display: inline-block !important;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #d9534f;
    border-radius: 10px;
    z-index: 2;
}

.notify-number {
    position: relative;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #d9534f;
    border-radius: 10px;
    z-index: 2;

}

.pulse-number.no-show,.pulse-number-today.no-show {
    display: none !important;
}

.pulse-number::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #f56a6a;
    width: 100%;
    height: 100%;
    top: 0%;
    z-index: -1;
    right: 0%;
    transform: translate3d(-50%,-50%,0);
    box-shadow: inset 0px 0px 10px #f56a6a;
    animation-name: pulse_message;
    animation-duration: 1.0s;
    animation-iteration-count: infinite;
}

.pulse-number-today::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #f56a6a;
    width: 100%;
    height: 100%;
    top: 0%;
    z-index: -1;
    right: 0%;
    transform: translate3d(-50%,-50%,0);
    box-shadow: inset 0px 0px 10px #f56a6a;
    animation-name: pulse_message;
    animation-duration: 1.0s;
    animation-iteration-count: infinite;
}
@keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5); /* Збільшення розміру на середині анімації */
    }
    100% {
      transform: scale(1);
    }
}


@keyframes pulse_message {
    from {
        opacity: 1;
        transform: scale(1, 1);
    }

    to {
        opacity: 0;
        transform: scale(2, 2);
    }
}

/*=================== Auth Modal =========================*/

.custom-center-modal-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.pass-mechanic-style {
    width: 150px;
}

/*==============================================*/

.popup-products-for-service {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    z-index: 6;
    display:none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
}

.popup-products-for-service .popup-content {
    border: 1px solid #f3f3f3;
    border-radius: 8px;
    background: #fff;
    padding: 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.popup-products-for-service .list-popup-content ul {
    text-align: left;
}

.list-popup-content ul ul {
    list-style: disc;
    padding-left: 15px;
}

.list-popup-content {
    width: 100%;
}

.list-popup-content ul {
    padding-left: 0px;
    width: 100%;
}

.list-popup-content ul {
    list-style-type: decimal;
}

.popup-products-for-service .list-popup-content li {
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    min-height: 32px;
    position: relative;
    padding: 4px 5px 4px 5px;
    display: flex;
}

.popup-products .list-popup-content li, .popup-content .list-popup-content li {
    grid-template-columns: 26px calc(100% - 96px) 50px;
    grid-column-gap: 10px;
}

.popup-services .list-popup-content li {
    grid-template-columns: calc(100% - 96px) 50px 26px;
    grid-column-gap: 10px;
}

.box-for-btn {
    margin-left: auto;
}

.btn-sticky {
    position: sticky;
    bottom: 10px;
    left: 0px;
}

.list-opener-wrapper {
    overflow:hidden; 
    position:relative;
    overflow-y: auto;
    height:280px; 
}

.list-opener-wrapper-list {
    height: 210px;
    overflow-y: auto;
}

.list-opener-wrapper-list::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 9em;
}

.list-opener-wrapper-list::-webkit-scrollbar-thumb {
    background-color: rgba(13%, 19%, 23%, 0.3);
    border-radius: 9em;
}

.list-opener-wrapper::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 9em;
}

.list-opener-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(13%, 19%, 23%, 0.3);
    border-radius: 9em;
}

.list-opener::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 9em;
}

.list-opener::-webkit-scrollbar-thumb {
    background-color: rgba(13%, 19%, 23%, 0.3);
    border-radius: 9em;
}

.popup-products-for-service .list-popup-content li button {
    float: right;
    margin-left: 10px;
}

.popup-kit {
    border: 1px solid #f3f3f3;
    border-radius: 8px;
    background: #f3f3f3;
    width: 70%;
    display: flex;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    height: 85vh;
    position: relative;
}

.popup-kit .popup-services, .popup-kit .popup-products {
    padding: 20px 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
}

/* *:not(.daterangepicker){
    transition: all 0.4s;
} */

.kit-items.focuses {
    background: #f1f1f1;
}

.popup-kit .popup-services {
    border-radius: 7px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.close-products-for-service {
    border: none;
    border-radius: 7px;
    padding: 5px 26px;
    box-shadow: 3px 4px 10px rgb(0 0 0 / 20%);
}

.login-form {
    text-align: center;
    padding-top: 30px;
}

.box-btn-popup {
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    box-shadow: 0px -2px 14px rgb(0 0 0 / 10%);
}

.popup-services {
    padding-bottom: 50px !important;
}
/*--------------------------------------------------------------
# Таблиця
--------------------------------------------------------------*/

table {
    counter-reset: rowNumber;
}
/* background: #6c7ae0; */

#table-products tbody tr {
    counter-increment: rowNumber;
}

#table-products tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

table caption {
    font-size: 20px;
    text-align: center;
    color: #000;
}

.input-value, .input-value-service, .value-product, .check-service-value, .check-product-value {
    max-width: 50px;
}

table input[type=text], table input[type=number], table input[list] {
    max-height: 24px;
}

.default-connect-product, .default-connect-service {
    width: 50px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    height: 25px;
}

.title-service-connect {
    cursor: pointer;
}

.title-service-connect-short {
    text-wrap: wrap;
    max-width: 150px;
    width: 100%;
    text-align: left;
}

.select-why, .engineer {
    height: 26px;
}

#table-products .select-why {
    float: left;
}

[type="checkbox"].option-add {
    width: 26px !important;
    height: 25px !important;
    margin: 0px !important;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.option-need {
    float: right;
    width: 46px;
    height: 26px;
    margin-top: 0px !important;
}

table thead th, table tbody td {
    font-size: 14px;
}

.modal .table>thead>tr>td,
.modal .table>thead>tr>th,
.modal .table>tbody>tr>td,
.modal .table>tbody>tr>th,
.modal .table>tfoot>tr>td,
.modal .table>tfoot>tr>th {
    padding: 2px;
}
table tbody tr span:not(.input-group-addon){
    float: left;
}

table tbody tr span.input-group-addon {
    padding: 3px 12px;
}

.delete, .addcomment, .add-on-the-list, .add-row-property, .remove-row-property , .remove-row-property-custome {
    font-weight: 600;
    border-radius: .25rem;
    user-select: none;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.add-row-property, .remove-row-property , .remove-row-property-custome{
    padding: 0px 8px;
    height: 26px;
}

.add-row-property-btn {
    padding: 0px 8px;
    height: 26px;
    font-weight: 600;
}

.addcomment {
    float: right;
}

[type="checkbox"]:not(.default-checkbox) { /* .must, .confirm-service, .confirm-proper, .check-ordered, .check-received,  */
    margin: 0px 0px 0px !important; /* 0px 6px 0px !important */
    width: 22px;
    height: 22px;
}

.form-inline .form-control.can-edit-sum_val {
    width: 22px;
}

.musts-row {
    width: 50%;
}

.must-block {
    display: flex;
    align-items: center;
    flex: 1;
}

.discount-style {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #c3c3c3;
    border-radius: 100%;
    cursor: pointer;
}

.discount-order-btn {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    border-radius: 100px;
    background: cornflowerblue;
}

/*--------------------------------------------------------------
# Кінець таблиці
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Пошук
--------------------------------------------------------------*/

.part-search-block .input-group {
    width: 70%;
}

.part-search-block input {
    height: 40px;
}

.part-search-block .btn {
    padding: 9px 16px;
}

.part-search-block .list-opener {
    width: 70%;
    right: 0;
    margin: 40px auto 0px;
}

.products-list {
    position: relative;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.list-opener.filter-menu {
    min-width: 500px;
}

.list-opener {
    overflow-y: scroll;
    position: absolute;
    left: 0;
    display: none;
    z-index: 2;
    transition: all 0.4s;
    max-height: 292px;
    border: 1px solid #f3f3f3;
    border-radius: 7px;
    background: #fff;
    margin-top: 35px;
    text-align: left;
    padding-left: 24px;
    box-shadow: 3px 4px 20px rgb(0 0 0 / 20%);
}
.list-opener-costume {
    overflow-y: scroll;
    position: absolute;
    left: 0;
    z-index: 2;
    transition: all 0.4s;
    max-height: 292px;
    border: 1px solid #f3f3f3;
    border-radius: 7px;
    background: #fff;
    margin-top: 35px;
    text-align: left;
    padding-left: 24px;
    box-shadow: 3px 4px 20px rgb(0 0 0 / 20%);
}

.list-opener li {
    transition: 0.1s all;
}

.list-opener li:hover {
    background: rgba(0, 0, 0, 0.05);
}

.list-opener li.active {
    background: rgba(0, 0, 0, 0.05);
}

.input-no-arr::-webkit-inner-spin-button,
.input-no-arr::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.input-no-arr {
    -moz-appearance: textfield;
} 

#input-product:after {
    content: "<i class="fas fa-search"></i>";
    position: absolute;
    top: 0;
    left: 0;
}

#product-ul {
    padding: 0px 10px;
    margin-top: 7px;
    left: 0px;
    list-style-type: none;
}

#product-ul li {
    cursor: pointer;
    padding: 3px 6px;
    border-radius: .25em;
}

#product-ul li focus{
    background: rgba(174, 232, 255, 0.4);
}

.column-list {
    margin: 10px 0;
}

.mini-comment {
    width: 178px;
}

/*--------------------------------------------------------------
# Кінець пошуку
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Друкування
--------------------------------------------------------------*/

#print-window {
    position: absolute;
    background: #fff;
    margin: auto;
    padding-top: 20px;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    text-align: center;
    display: flex;
    justify-content: center;
}

#print-window table {
    width: 100%;
    margin-bottom: 20px;
}

.print-obl {
    width: 1000px;
}

.print-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 0px;
}

.price-style-default, .print-price, .service-price, .makeprice, .check-product-price, .check-product-total, .enter-total, .enter-property-value, .enter-price {
    width: 70px !important;
    height: 26px;
}


.number-field {
    width: 60px !important;
}

.print-brand {
    width: 115px;
}

.why-td {
    width: 236px;
}

.title-td {
    text-align: right;
}

#print-window .option-need-print {
    width: 20px;
    height: 20px;
    border: 1px solid;
    border-radius: 3px;
    float: right;
}

#print-window .title-td {
    text-align: left;
}

#print-window .title-td span {
    margin-right: 5px;
}

#print-window .print-price{
    width: 60px;
}

#print-window .why-td {
    width: 160px;
}

#print-window .why-td input{
    pointer-events: none;
}

.print-obl h2 {
    margin-top: 0px;
    font-size: 20px;
}

.print-obl h3 {
    margin: 0px 0;
}
.print-obl .meister-tz-table-products tbody tr:last-child {
    display:none;
}

.print-obl input, td {
    height:22px;
    line-height: 1.2em;
}

.print-obl input {
    border: 1px solid #f3f3f3;
    border-top: none;
    border-bottom: none;
    text-align: center;
    margin: 1px 0;
}

.print-order-info{
    display: none;
}

td{
    vertical-align: middle !important;
}

.print-total-all .total-price-all{
    display: none;
}

.print-border {
    border: 1px solid #000;
    padding: 10px; border-radius: 5px;
}

.print-border+.print-border {
    margin-top: 20px;
}

/* Друкування клієнту */
#print-window .client-print-table-products, #print-window .meister-tz-table-products {
    width: 900px;
}

#check-products tr td {
    border-top: none;
}
#check-products tr.calc-number td {
    border-top: 2px solid #c1c1c1;
}

#print-window #check-products input {
    border: none;
}


.employees-salary-show {
    display: none;
}

.employee-hover-item{
    border-radius: 5px;
    padding: 2px;
}
.employee-hover-item:hover {
    background-color: #f1f0f0;
}




@media print{
    body {
        zoom: 80%;
    }
    td{
        padding: 1px 8px !important;
        line-height: 1.1em !important;
    }
    .alert-container {
        display: none;
    }

    .menu-block {
        display: none !important;
        -webkit-display: none !important;
    }

    #telephony {
        display: none !important;
    }

    .container{
        width: 100%;
    }
    .print-order-info{
        display: flex !important;
        margin-bottom: 5px;
    }
    .print-order-info h4{
        font-size: 16px !important;}
    hr{
        margin: 5px 0px;
    }
    .right-col-design{
        display: none;
    }
    .content-col-design{
        width: 100%;
    }
    .container:first-child {
        display: none;
    }
    .head-info div {
        display: none;
    }
    .order-detail-info {
        display: flex !important;
        margin-bottom: 20px;
    }
    #check-products {
        width: 100%;
    }

    .order-modal {
        display: none !important;
    }

  

    .order-container {
        display: none !important;
    }

    .content-col-design  {
        display: none;
    }

    .btn-print {
        display: none;
    }

    .btn-no-difference {
        width: 150px !important;
    }
    
    td:nth-child(2) {
        text-align: left;
    }
    
    .settings-container-box.settings-list {
        display: none !important;
    }

    .samernot-print {
        display: none !important;
    }

    #location {
        display: none !important;
    }

    #print-area {
        display: block !important;
    }

    #chatni {
        display: none !important;
    }

    #subscribe-alert {
        display: none !important;
    }

    #help-button {
        display: none !important;
    }

    /* table>tbody>tr:last-child {
        background-color: #f9f9f9;
        height: 35px;
    }
    input:checked:after {
      content: "\2714";
      background: #5cb85c !important;
      display: inline-block;
      color: #fff !important;
      visibility: visible;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
    }
    [type="checkbox"]{
        margin-top: 3px !important;
    }
    [type="number"], [type="text"]{
        margin-top: 3px !important;
        text-align: center;
    } */
    /* input{
        border: none;
    }
    .print-total-all{
        position: relative;
        justify-content: flex-end;
    }
    .print-total-all .total-price-all{
        display: block;
    }
    .total-price-all, .musts-row{
        display: none;
    }
    table { page-break-inside:auto; }
    tr { page-break-inside:avoid; page-break-before:auto; page-break-after:auto; }
    thead { page-break-inside:auto; }
    .show-print {
        display: block !important;
    } */

}



/*--------------------------------------------------------------
# Кінець друкування
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Сторінка всіх замовлень
--------------------------------------------------------------*/

/*------------ Статуси -------------------------*/

.status, .dop-status {
    color: #fff;
}

span.status, div.status {
    border-radius: 4px;
    padding: 0px 5px;
    white-space: nowrap;
}

span.dop-status, div.dop-status {
    border-radius: 4px;
    padding: 0px 5px;
    white-space: nowrap;
}

.hand-status-order-style {
    background: #fff;
    border-top: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 6%);
}

.status-blinking {
    animation: pulse-status 1s infinite;
}
@keyframes pulse-status {
    0% {

        box-shadow: 0 0 0 0 rgba(250, 0, 0, 0.9);
      }
      50% {

        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
      }
      100% {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
  }

.hand-status {
    color: #fff;
}

.hand-status-menu,.hand-status-menu-main {
    padding: 5px;
    background: #f1f1f1;
}

.hand-status-menu li,.hand-status-menu-main li {
    background: #fff;
    font-weight: 600;
    padding: 1px 10px;
    cursor: pointer;
    border-left: 3px solid;
    border-radius: 3px;
    list-style: none;
}

.hand-status-menu li:not(:last-child) {
    margin-bottom: 5px;
}
.hand-status-menu-main li:not(:last-child) {
    margin-bottom: 5px;
}

/*------------ КІНЕЦЬ - Статуси -------------------------*/

.plus {
    font-weight: bold;
}

/*------------ speed-up стилі -------------------------*/

.check-speed-up-block {
    float: right;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #000;
    display: flex;
    height: 100%;
    align-items: center;
}

.speed-up-mark {
    background: #DA0C0C;
    width: 11px;
    height: 11px;
    float: left;
    border-radius: 10px;
    margin: 5px 5px 0px 0px;
}

/*------------ КІНЕЦЬ - speed-up стилі -------------------------*/

/*------------ Таблиця -------------------------*/

.silver-head thead tr {
    background: #f1f1f1;
}

.silver-dark-head thead tr  {
    background: #e2dede;
}

.silver-head thead tr th:not(:last-child) {
    border-right: 1px solid #fff;
}

tr {
    transition: 0.1s;
}

.td-flex-block {
    display: flex;
    flex-direction: column;
    padding: 3px;
}

span.silver-span {
    color: #888;
    font-size: 11px;
}

span.black-span {
    font-weight: 700;
    font-size: 13px;
}

div.black-span {
    font-weight: 700;
    font-size: 13px;
}

#table-orders td:nth-child(1), #table-orders td:nth-child(2){
    font-weight: 700;
}

#table-orders,.table-container {
    outline: none;
}

#table-orders:focus-visible,.table-container:focus-visible {
    border: none;
    outline: none;
}

/*------------ КІНЕЦЬ - Таблиця -------------------------*/

/*--------------------------------------------------------------
# КІНЕЦЬ - Сторінка всіх замовлень
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Сторінка створення замовлення
--------------------------------------------------------------*/

.danger-display:empty {
    display: none;
}

table {
    counter-reset: rowNumber;
}

#check-products tbody tr.calc-number {
    counter-increment: rowNumber;
}

.box-general-order tr.calc-number {
    counter-increment: rowNumber;
}

#check-products tr.calc-number td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    /* margin-right: 0.5em; */
}

.box-general-order tr.calc-number td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

#check-products td:nth-child(2), #check-services td:nth-child(2), #table-prop-products td:nth-child(2) {
    text-align: left;
    max-width: 250px;
}

#table-prop-products {
    zoom: 85%;
}

table td .input-group {
    width: min-content;
    margin: auto;
}

.input-group-sku {
    width: 100% !important;
}

#add-order {
    text-align: center;
}

#add-order input{
    margin-bottom: 20px;
}

#add-order button{
    font-size: 18px;
    padding: 5px 30px;
}

#find-client-btn-js {
    border-radius: 0px 4px 4px 0px;
}

#view-objects-client-btn-js {
    display:none;
}

#view-objects-client-btn-js[readonly] {
    cursor: default;
}

.added-object {
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 7px;
    position: relative;
    margin-bottom: 10px;
}

.remove-added-object {
    position: absolute;
    right: 7px;
    top: 7px;
    cursor: pointer;
}

.added-object .input-obj-span {
    white-space: pre;
}

span.val-input-obj {
    white-space: normal;
}

.added-object hr {
    border-top: 1px solid #ccc;
    margin: 5px;
}

#objects-repair option:disabled {
    background: #c3c3c3;
}

.tab-pane {
    padding-top: 20px;
}

form#add-order input {
    display: none;
}

.defect-textarea, .textarea-fixed {
    resize: none;
    height: 77px !important;
}

.done_service_status .popover .arrow {
    top: 26px !important;
}

.done_service_status .popover, .done_service_status .popover-content {
    max-width: 400px;
    width: 400px;
}

.added-performers:not(:empty) {
    padding: 10px 0px;
    border-top: 1px solid #e1e1e1;
}

.performer-item {
    margin-bottom: 10px;
}

/*--------------------------------------------------------------
# КІНЕЦЬ - Сторінка створення замовлення
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Сторінка прорахування запчастин
--------------------------------------------------------------*/

table {
    counter-reset: rowNumber;
}

#table-prop-products tbody tr.calc-number {
    counter-increment: rowNumber;
}

#table-prop-products tr.calc-number td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

.saver {
    margin-left: 10px;
}

.sum-info {
    font-size: 15px;
    display: flex;
    margin-left: 10px;
    align-items: center;
    cursor: default;
}

.sum-info span {
    margin-left: 10px;
    padding: 3px 5px;
    height: 28px;
}

input:checked[disabled]:after {
  content: "\2714";
  background-color: #5cb85c;
  display: inline-block;
  color: #fff;
  visibility: visible;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}

input.calculated:not(:checked):after {
    content: "\2714";
    background-color: #c3ced1;
    display: inline-block;
    color: #fff;
    visibility: visible;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
}

input.confirm-proper-style:not(:checked):after {
    content: "\2716";
    background-color: #fff;
    display: inline-block;
    color: #FF0038;
    visibility: visible;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    border: 1px solid #767676;
}

input.blocked-product:checked[disabled]:after {
    background-color: #FF0038 !important;
}

/* .feature-father{
    position: relative;
}

.feature-father .features-block {
    position: absolute;
} */

.features-block{
    /* left: 0; */
    width: 220px;
    padding: 10px;
    /* background: #f1f1f1;
    border-radius: 7px;
    border: 1px solid #c3c3c3;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
    z-index: 1; */
}

.items-feature {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 10px;
}

.items-feature:not(:first-child) {
    border-top: 1px solid #ccc;
}

.items-feature h4 {
    text-align: left;
    width: 100%;
}

.feature-item-color.active-feature, .feature-item-color.add-this-feature {
    border: 4px solid #c3c3c3;
}

.feature-item-number {
    margin: 7px 2px;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 100px;
    border: 1px solid #c3c3c3;
    padding: 0px 7px;
    background: #fff;
}

.feature-item-number.active-feature, .feature-item-number.add-this-feature {
    background: #555;
    color: #fff;
}

.feature-item-color {
    width: 40px;
    height: 25px;
    margin: 10px 5px;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 100px;
    text-align: center;
}

.feature-item-color-not-hover {
    width: auto;
    min-width: 40px;
    height: 25px;
    margin: 10px 5px;
    cursor: pointer;
    display: inline-block;
    padding:  0 5px;
    transition: 0.2s;
    border-radius: 100px;
    text-align: center;
}

.color-feat-item {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 100px;
}

.color-feat-item.hz-color {
    text-align: center;
    width: auto;
    height: auto;
    background: #fff;
    border: 2px solid #c3c3c3;
    padding: 0px 7px;
}

.number-feat-item {
    padding: 0px 7px;
    margin-left: 5px;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 100px;
    background: #fff;
}

tr div.color-feat-item, tr div.number-feat-item {
    display: inline-block;
    vertical-align: middle;
}

.feature-item-color:hover, .color-feat-item:hover{
    transform: scale(0.9);
}

.feature-item-number:hover {
    background:#555;
    color: #fff;
}

.get-features {
    cursor: pointer;
}

/*--------------------------------------------------------------
# КІНЕЦЬ - Сторінка прорахування запчастин
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Сторінка менеджера запчастин
--------------------------------------------------------------*/
.kunbun-desk {
    overflow-x: auto;
    display: flex;
    min-width: 1000px;
}

.kunbun-col {
    padding: 0px;
}

.wp-150 {
    width: 150px !important;
}

.head-col {
    display: flex;
    justify-content: center;
    padding: 15px;
}

.head-col h2 {
    margin: 0px;
}

.item-kunbun-order {
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 10px;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
}

.item-kunbun-order .date-time {
    display: flex;
    justify-content: space-between;
}

.bottom-item-kunbun {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.bottom-item-kunbun span {
    white-space: break-spaces;
    margin-bottom: 10px;
}

.bottom-item-kunbun div {
    /* text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1 1 auto; */
}

.not-cash {
    padding: 6px 10px;
    border-radius: 7px;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}

.item-kunbun-order .time, .item-kunbun-order .date {
    padding: 3px 7px;
    border-radius: 15px;
}

.item-kunbun-order .date {
    border: 1px solid #f1f1f1;
}

span.date.btn-secondary {
    background: #fff;
    color: #000;
}

/*--------------------------------------------------------------
# КІНЕЦЬ - Сторінка менеджера запчастин
--------------------------------------------------------------*/

/*--------------------------------------------------------------
#  Журнал
--------------------------------------------------------------*/

.journal-item {
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
    overflow: hidden;
}

.journal-item .order-detail-info {
    background: #212529;
    color: #fff;
    padding: 5px 20px;
}

.journal-item table {
    margin-bottom: 0px;
}

/*--------------------------------------------------------------
#  КІНЕЦЬ - Журнал
--------------------------------------------------------------*/

/* ===========  Нумерація таблиці (просто додати клас numeric-table)  =================*/

.numeric-table tbody tr.calc-number {
    counter-increment: rowNumber;
}

.numeric-table tr.calc-number td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

/*--------------------------------------------------------------
#  Сторінка клієнта
--------------------------------------------------------------*/

.client-container {
    padding-top: 10px;
    padding-bottom: 70px;
}

.client-total-all{
    position: relative;
    justify-content: flex-end;
}
.client-total-all .total-price-all{
    display: block;
}

.client-product-value, .client-service-value {
    width: 50px;
}

@media (min-width: 769px){
    .mobile-label {
        display: none;
    }
}

@media (max-width: 768px){
    #table-orders td:nth-child(1) {
        font-size: 16px;
    }
    
    #client-services tr:not(:last-child) td:nth-child(2) {
        text-align: left;
        font-weight: 600;
        padding: 8px 3px;
    }

    #client-services th:nth-child(1) {
        display: none;
    }

    #client-services td:nth-child(1) {
        display: none;
    }

    #client-services td:nth-child(2) {
        color: #333;
    }

    #client-services td input {
        border: none;
        text-align: center;
        background: transparent;
    }

    #client-services input:focus {
        outline: none;
        border: none;
    }

    #client-services thead  {
        display: none;
    }

    #client-services tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #client-services td {
        display: flex;
        flex-direction: column;
        height: auto;
        border: none;
    }

    #client-services tr:not(:first-child){
        border-top: 1px solid #e1e1e1;
    }

    #client-services tr:not(:last-child) td:nth-child(6) {
        padding: 22px 0px 0px 0px;
    }

    #client-services tr:not(:last-child) td:nth-child(2) {
        width: 100%;
    }

    #client-services tr:not(:last-child) td:nth-child(3),
    #client-services tr:not(:last-child) td:nth-child(4),
    #client-services tr:not(:last-child) td:nth-child(5) {
        padding-top: 1px;
    }

    #client-services tr td:nth-child(3),
    #client-services tr td:nth-child(4),
    #client-services tr td:nth-child(5) {
        width: 25%;
    }

    #client-services tr td:nth-child(6) {
        width: 10%;
    }

    /* Таблиця запчастин */
    #client-products thead  {
        display: none;
    }

    #client-products td {
        display: block;
        height: auto;
        border: none;
    }

    #client-products td input {
        border: none;
        text-align: left;
        background: transparent;
    }

    #client-products input:focus {
        outline: none;
        border: none;
    }

    #client-products tbody tr.calc-number {
        border-top: 1px solid #e1e1e1;
    }

    #client-products tbody tr.calc-number:first-child{
        border-top: none;
    }

    #client-products tr:not(:last-child) td:nth-child(1) {
        width: 10%;
        display: none;
    }

    #client-products tr:not(:last-child) td:nth-child(2) {
        width: 80%;
        text-align: left;
        font-weight: 600;
        color: #333;
        padding-top: 19px;
    }

    #client-products tr:not(:last-child) td:nth-child(3) {
        width: 20%;
        float: left;
        padding-top: 1px;
    }

    #client-products tr:not(:last-child) td:nth-child(4) {
        width: 40%;
        padding-top: 19px;
        text-align: left;
    }

    #client-products tr:not(:last-child) td:nth-child(5) {
        width: 25%;
        padding-top: 1px;
    }

    #client-products tr:not(:last-child) td:nth-child(6) {
        width: 25%;
        padding-top: 1px;
    }

    #client-products tr:not(:last-child) td:nth-child(7) {
        width: 10%;
        padding: 12px 0px 0px 0px;
    }

    #client-products tr:not(:last-child) td:nth-child(1),
    #client-products tr:not(:last-child) td:nth-child(2) {
        float: left;
    }

    #client-products tr:not(:last-child) td:nth-child(4),
    #client-products tr:not(:last-child) td:nth-child(5),
    #client-products tr:not(:last-child) td:nth-child(6),
    #client-products tr:not(:last-child) td:nth-child(7) {
        float: left;
    }

    #client-products tr:last-child {
        border-top: 2px solid #e1e1e1;
    }

    #client-products tr:last-child td {
        float: left;
    }

    #client-products tr:last-child td:nth-child(5) {
        width: 50%;
        text-align: right;
    }

    #client-products tr:last-child td:nth-child(6) {
        width: 25%;
        text-align: left;
    }

    #client-products tr:last-child td:nth-child(7) {
        width: 10%;
    }

    #client-products td:empty {
        height: 0px;
        padding: 0px;
    }

    .mobile-label {
        font-size: 11px;
        color: #999;
        font-weight: 600;
        margin-bottom: 1px;
    }
}

/*--------------------------------------------------------------
#  КІНЕЦЬ - Сторінка клієнта
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Об'єкти додані раніше
--------------------------------------------------------------*/

.info-and-btn {
    display: flex;
    justify-content: space-between;
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
}

.left-info {
    width: 300px;
    padding: 0px 8px 6px;
}

.btn-obj-add-style {
    border-radius: 0px;
    height: 100%;
}

.added-old-object {
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 7px;
    position: relative;
    margin-bottom: 10px;
}

.added-old-object .view-client-object {
    position: absolute;
    right: 36px;
    top: 7px;
    cursor: pointer;
}

/*--------------------------------------------------------------
# КІНЕЦЬ - Об'єкти додані раніше
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Підзамовлення блоки
--------------------------------------------------------------*/

.general-pod_order-block {
    border-radius: 5px;
    margin-bottom: 50px;
    overflow: hidden;
    padding: 10px;
}

.general-pod_order-block .navbar {
    margin: -10px;
    background: #20303B;
    border-radius: 4px 4px 0px 0px;
}

.general-pod_order-block .navbar .navbar-brand {
    color: #fff;
}

.general-pod_order-block table {
    border: 1px solid #e1e1e1;
}

.status-pod_order {
    margin-right: 20px;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 16px;
    color: #fff;
    mix-blend-mode: hard-light;
}

.total-price-pod_order {
    margin-right: 20px;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 16px;
    color: #000;
    background: linear-gradient(317.7deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 105.18%), #f1f1f1;
    background-blend-mode: soft-light, normal;
    box-shadow: inset -2.5px -2.5px 5px #FAFBFF, inset 2.5px 2.5px 5px #A6ABBD;
}

.item-pod_order {
    margin: 5px;
    min-width: 250px;
    border-radius: 7px;
    overflow: hidden;
    padding: 0px;
    height: 100%;
    box-shadow: 2.5px 2.5px 5px  rgba(32, 48, 59, 0.2);
    transition: 0.2s;
    z-index: 1;
}

.item-pod_order.active {
    transform: translateY(-15%);
}

.item-pod_order:hover {
    transform: translateY(-5%);
    box-shadow: -10px -10px 20px #FAFBFF, 10px 10px 20px #A6ABBD;
}

.general-link-block {
    display: flex;
    position: relative;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.item-pod_order-head {
    padding: 9px 10px 3px;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-weight: 600;
    border-bottom: 1px solid #e9e9e9;
}

.hat-item-pod_order-head {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 7px;
}

.item-pod_order-body {
    padding: 5px 10px;
    border-top: none;
    border-radius: 0px 0px 7px 7px;
}

a.link-item-pod_order {
    color: #000;
    text-decoration: none;
}

/*--------------------------------------------------------------
# КІНЕЦЬ - Підзамовлення блоки
--------------------------------------------------------------*/

#table-warehouse th {
    vertical-align: middle;
}

#table-warehouse tbody tr {
    cursor: pointer;
}

.arrows span {
    color: #c3c3c3;
    font-size: 10px;
}

th span.active {
    color: blueviolet;
}

.upload-image {
    width: 200px;
    height: 200px;
    position: relative;
    background: #f1f1f1;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #c3c3c3;
    margin: 0px auto 20px;
    overflow: hidden;
}

.upload-image img {
    max-width: 100%;
    max-height: 100%;
}

.btn-group-change-image {
    position: absolute;
    top: 5px;
    right: 5px;

}

.btn-change-image span {
    font-size: 12px !important;
}

.upload-image span {
    font-size: 30px;
}

.product-details textarea {
    resize: none;
}

.vertical-line {
    width: 1px;
    height: 100%;
    background: #f1f1f1;
}

.vertical-line-black {
    background: #ccc;
}

.price-product {
    width: 100px;
}

/* додавання оприбуткування */
.search-block-js {
    position: relative;
}

.block-result-search-products {
    position: absolute;
    top: 0;
    left: -15%;
    width: 130%;
    max-height: 500px;
    overflow-y: scroll;
    padding: 10px;
    margin-top: 58px;
    z-index: 3;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.block-result-search-for-outcome{
    position: absolute;
    top: 0;
    left: -15%;
    width: 130%;
    max-height: 500px;
    overflow-y: scroll;
    padding: 10px;
    margin-top: 58px;
    z-index: 3;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.orders-search-block-list{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    max-height: 500px;
    overflow-y: scroll;
    padding: 10px;
    z-index: 3;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}



.item-result-search-products {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 1px 2px 10px rgb(0, 0, 0, 10%);
    background: #fcfcfc;
    transition: 0.1s all;
}

.item-result-search-products:hover {
    background: rgba(135,206,250, 0.2) !important;
}

.img-block {
    display: flex;
    float: left;
    color: #ddd;
    justify-content: center;
    align-items: center;
    width: 73px;
    height: 55px;
    margin-right: 5px;
}

.item-result-search-products img {
    max-width: 100%;
    max-height: 100%;
}

.item-result-search-products h5 {
    margin: 0px;
}

.item-result-search-products .help-block {
    margin-top: 0px;
}

.item-result-search-products [type="checkbox"] {
    width: 14px;
    height: 14px;
}

.item-result-search-products .stock-block {
    position: relative;
    display: flex;
}

.item-result-search-products .stock-block:hover .stock_popup {
    display: block;
}

.item-result-search-products .stock-block .stock_popup {
    display: none;
    position: absolute;

    transform: translateY(-50%);
    z-index: 100000;
}

.stock_popup-items {
    display: none;
    position: absolute;
    transform: translateY(-50%);
    z-index: 100000;
}
.item-result-search-products .stock-block .stock_popup div {
    width: auto;
}
.stock_popup-items div {
    width: auto;
}

.item-result-search-products .stock-block div {
    color: #000;
    padding: 0px 4px;
}

.stock-block-items div {
    color: #000;
    padding: 0px 4px;
}

.item-result-search-products .stock-block .stock_popup div {
    border-right: none !important;
}
.stock_popup-items div {
    border-right: none !important;
}

.item-result-search-products .stock-block div:not(:last-child) {
    border-right: 1px solid #c1c1c1;
}

.stock-block-items div:not(:last-child) {
    border-right: 1px solid #c1c1c1;
}

.item-result-search-products .item-details {
    width: 100%;
    padding: 5px;
}

.item-result-search-products .stock-block [data-value="0"] {
    background: #ffbebe;
    color: #fff;
}

.item-result-search-products h5, .item-result-search-products .help-block {
    font-size: 12px;
}

.modal .row {
    width: 100%;
    margin: 0px;
}

.new-price label, .old-price label {
    padding-left: 0px;
    padding-right: 0px;
}

.new-price .form-group, .old-price .form-group {
    margin-bottom: 0px;
}

.modal .well {
    padding: 0px;
}

.added-residue .table {
    margin-top: 20px;
    margin-bottom: 0px;
}

.positive {
    color: mediumseagreen;
}

.negative {
    color: red;
}

/* Переміщення */

.item-row-cell-move {
    display: flex;
}

.remove-row-cell-move {
    margin-top: 25px;
    margin-left: 10px;
}

.added-moves table {
    margin-bottom: 0px;
}

/*-------- каса ---------*/
.cashbox-items-col {
    height: calc(100vh - 117px);
    overflow-y: auto;
    padding-bottom: 300px;
    margin-bottom: -50px;
}

.cashbox-items-col::-webkit-scrollbar {
    width: 5px; /* ширина для вертикального скролла */
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 9em;
}

.cashbox-items-col::-webkit-scrollbar-thumb {
    background-color: rgba(13%, 19%, 23%, 0.3);
    border-radius: 9em;
}

.filters-transactions-cashbox {
    padding: 5px 10px 10px;
}

.filters-transactions-cashbox .form-group {
    margin-bottom: 0px;
}

.pager {
    margin: 0px;
}

#cashbox-transactions-table span {
    float: none;
}

tr.deactivate {
    opacity: 0.5;
    text-decoration: line-through;
}

.deactivate {
    opacity: 0.5;
    text-decoration: line-through;
}

.cashbox-menu-item-js {
    opacity: 0.5;
    cursor: pointer;
}

.cashbox-menu-item-js.active {
    opacity: 1;
    border-right: 3px solid #20303B;
}

.block-add-special {
    position: relative;
}

.block-result-search-special-fields {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: scroll;
    padding: 10px;
    z-index: 1;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.item-result-search-special {
    padding-top: 10px;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    transition: 0.3s all;
}

.item-result-search-special:hover {
    background: rgba(135,206,250, 0.2);
}

.item-result-search-special h5 {
    margin-bottom: 0px;
    margin-top: 0px;
}

.added-special:empty {
    display: none;
}

.added-special {
    position: relative;
    padding: 10px;
    border: 1px solid #d1d1d1;
    border-radius: 7px;
    margin-top: 10px;
    background: #eff7ff;
}

.added-special-item {
    position: relative;
}

.added-special .added-special-item:not(:last-child){
    border-bottom: 1px solid;
}

.added-special .delete {
    position: absolute;
    right: -6px;
    top: -7px;
    width: 25px;
    height: 19px;
}

.badge.custom-badge-bg-sum {
    background: #f0ad4e !important;
    margin-top: -4px;
    font-size: 14px;
}

.badge-success {
    background-color: #5cb85c; 
}

.badge-warning {
    background-color: #ff8856; 
}

.transaction-notes-black {
    font-size: 12px;
    font-weight: 600;
}

table.text-align-left tr td, table.text-align-left tr th {
    text-align: left;
}

/*===================================*/

.block-search-items {
    position:relative;
}

.added-properties {
    float: none;
}

.added-properties .item-result-search-products {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 4px 10px;
}

.added-properties .item-result-search-products .img-block {
    width: 46px;
    height: 46px;
}

.added-properties .item-result-search-products [name="price"], .block-result-search-products .item-result-search-products [name="price"] {
    width: 80px;
    padding: 6px;
}

.search-products-load-img {
    width: 23%;
}

.block-add-outcome-props .item-result-search-products, .added-props .item-result-search-products {
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    background: #f5f5f5;
    padding: 2px 10px;
}

.block-add-outcome-props .item-result-search-products .help-block, .added-props .item-result-search-products .help-block {
    margin-bottom: 0px;
}


/*===================================*/

/*================ my blocks ===================*/

.modal-custom-70 {
    width: 70%;
}

.modal-custom-400px {
    width: 400px;
}

/*-- ellipse button --*/
.ellipse-btn {
    font-size: 16px;
    padding: 6px 20px;
    color:#333;
    outline: none;
    border: none;
    border-radius: 100px;
    background-color: #e9e9e9;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 6%);
}

.ellipse-btn-info {
    color: #fff;
    background: lightskyblue;
}

.ellipse-btn-sm {
    height: 44px;
}

@media screen and (max-width: 768px) {
    .ellipse-btn-sm {
        font-size: 14px;
    }
    
}

.ellipse-btn-success {
    background-color: #79e9a2;
    font-weight: 700;
}

/*-- ellipse button --*/
.ellipse-input-group {
    width: min-content;
    padding: 6px 12px;
    color:rgb(117, 135, 167);
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    overflow: hidden;
    border: none;
    border-radius: 100px;
    background: rgb(232, 240, 254);
    box-shadow: 2px 2px 5px rgb(0 0 0 / 6%);
}
.ellipse-input-group .ellipse-input {
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 0px;
}
.ellipse-input-group .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    font-size: 18px;
}
.ellipse-input {
    border-radius: 100px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 6%);
    padding: 6px 12px;
    color:#333;
    background: rgb(232, 240, 254);
    outline: none;
    border: none;
}

/* dropdown backdrop custom blocks */

.dropdown-backdrop-custom {
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.custom-group {
    display: flex;
}

.custom-group *:first-child {
    border-radius: 3px 0px 0px 3px !important;
}

.custom-group *:last-child {
    border-left: none;
    border-radius: 0px 3px 3px 0px !important;
}

.custom-row > *:first-child {
    padding-left: 0px;
}

.custom-row > *:last-child {
    padding-right: 0px;
}

/*===================================*/

@media (max-width: 1634px){
    .media-transaction-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: space-evenly;
        padding: 0px 2px;
    }
    .media-transaction-btns .btn {
        border-radius: 4px !important;
        float: none;
        margin-bottom: 4px;
    }
    .media-transaction-btns .btn:nth-child(1) {
        order: 1;
    }
    .media-transaction-btns .btn:nth-child(2) {
        order: 3;
    }
    .media-transaction-btns .btn:nth-child(3) {
        order: 2;
    }
}

@media(max-width: 991px){
    .content-col-design {
        padding: 20px 15px 50px;
        width: calc(100% - 60px);
    }
    .block-right-col-design {
        position: fixed;
        right: 0;
        width: calc(100vw - 70px);
        z-index: 2;
        transform: translateX(100%);
    }
    .block-right-col-design.active {
        transform: translateX(0%);
    }
}

/* блоки */

.modal-header.alert-info, .modal-header.alert-warning {
    border-radius: 6px 6px 0px 0px;
}

.modal-footer.alert-info, .modal-footer.alert-warning {
    border-radius: 0px 0px 6px 6px;
}

.warning-product-span {
    margin-top: 3px;
    color: red;
}

.block-fix-alert {
    position: fixed;
    z-index: 99999;
    width: 100%;
    left: 50%;
    display: flex;
    justify-content: center;
    /* padding-top: 10px; */
    transition: 0.3s all;
    transform: translateY(0%) translateX(-50%);
}

.block-fix-alert:empty {
    transform: translateY(-100%) translateX(-50%);
}

.fix-alert {
    margin-top: 10px;
}

.outcome-order-item table {
    transform: translateY(0);
}

.outcome-order-item .panel-body {
    padding: 0px 3px;
}

.items-list-block {
    position: relative;
}

.list-items {
    position: absolute;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
    font-size: 16px;
}

.list-items .item {
    padding: 3px 5px;
    background: rgba(250,255,255,0.7);
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 6%);
    transition: 0.2s all;
}

.list-items .item:hover {
    background: rgba(0,0,0,0.05);
}

.list-items .item .phones{
    color: #777;
}

.list-items .item:not(:last-child) {
    margin-bottom: 1rem;
}

/**/

.add-performer-form {
    transition: height 0.3s;
    overflow: hidden;
}

.add-performer-form[data-value="0"] {
    height: 0px;
}

.add-performer-form:not([data-value="0"]) {
    height: 73px;
}

.add-performer-form input, .add-performer-form select {
    height: 24px;
}

.add-performer-form input[type="number"], .added-performers input[type="number"] {
    width: 60px;
}

.performer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.form-control:not([type="range"]) {
    padding: 0.3vh 0.7vh;
    font-size: 1em;
}

.form-control[type="range"] {
    padding: 0.3vh 0px;
}


.form-control-textarea.employeer-comment  {
    height: 30px;
    min-height: 30px;
    max-height: 80px;
    width: 300px;
    max-width: 300px;
}

/**/
.load-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/static/images/load.gif) center no-repeat;
    background-size: 30%;
    backdrop-filter: blur(3px);
}

.lds-dual-ring {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 6px solid lightskyblue;
    border-color: lightskyblue transparent lightskyblue transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }

  .lds-dual-ring-new-costume {
    width:21.5px;
    height:18px;
  
   }

  .lds-dual-ring-new-costume:after  {
   width:21.5px;
   height:18px;
   border: 2px solid lightskyblue;
   border-color: lightskyblue transparent lightskyblue transparent;
  }

  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.lds-dual-ring.min {
    width: 30px;
    height: 30px
}

.lds-dual-ring.min:after {
    width: 30px;
    height: 30px
}

.lds-dual-ring.super-min {
    width: 20px;
    height: 20px;
}

.lds-dual-ring.super-min:after {
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid lightskyblue;
    border-color: lightskyblue transparent lightskyblue transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
  

/* order detail popup */
.popup-grid-form {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-gap: 10px;
}

.popup-grid-form b{
    padding-top: 8px;
}

/* datepicker */
.daterangepicker {
    background-color: rgba(250,255,255,0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px) !important;
}
/* order filter */
.add-client-field {
    float: none !important;
}

#order-filter .well {
    background: rgba(135,206,250, 0.2) !important;
}

.filter-menu,.filter-column {
    min-width: min-content;
    border: none;
    box-shadow: 0 .25rem 1rem .125rem rgba(114,114,114,0.25);
    backdrop-filter: blur(6px); 
    background: hsla(180, 100%, 99%, 0.73);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
}

.filter-menu .filter-menu-scroll,.filter-column .filter-menu-scroll {
    padding: 5px 10px;
    max-height: 300px;
    min-width: 188px;
    overflow-y: auto;
}

.filter-menu .filter-menu-footer,.filter-column .filter-menu-footer {
    display: flex;
    gap:10;
    justify-content: space-between;
    padding: 10px 10px 0px;
    background: transparent;
}

.filter-menu .divider {
    margin: 0px;
}

.filter-column.divider {
    margin: 0px;
}

.filter-menu ul ,.filter-column ul {
    padding: 0px 10px;
}

.filter-menu li ,.filter-column li {
    list-style: none;
}

.filter-menu li [type="checkbox"] {
    position: relative;
    margin-left: 0px;
}

.filter-column li [type="checkbox"] {
    position: relative;
    margin-left: 0px;
}

.filter-menu .checkbox:hover {
    background: rgba(0, 0, 0, 0.05);
}

.filter-column .checkbox:hover {
    background: rgba(0, 0, 0, 0.05);
}

.filter-menu .checkbox, .filter-column .checkbox {
    margin-top: 0px;
    margin-bottom: 4px;
    transition: .2s all;
}

.filter-menu .checkbox label {
    padding-left: 0px;
}

.filter-column .checkbox label {
    padding-left: 0px;
}

.filter-menu .text {
    font-weight: 600;
}

.filter-column .text {
    font-weight: 600;
}

.filter-item[data-key="client"] input {
    border-radius: 0px 3px 3px 0px !important;
    border-left: none;
}

.filter-item .filter-menu {
    width: 100%;
}

.filter-menu .filter-menu-scroll::-webkit-scrollbar {
    width: 15px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.filter-menu .filter-menu-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-shadow: 0 0.25rem 1rem 0.125rem rgb(114 114 114 / 25%);
}

.filter-column .filter-menu-scroll::-webkit-scrollbar {
    width: 7px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.filter-column .filter-menu-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: 0 0.25rem 1rem 0.125rem rgb(114 114 114 / 25%);
    cursor: pointer;
}

/*----------- paid salary -----------*/
.cashbox-list .item {
    flex: 49%;
}

.cashbox-list .item .panel {
    position: relative;
}

.cash-type-label {
    position: absolute;
    top: 0;
    right: 0;
}

#create-att-modal:not([data-index]) .delete-att-btn {
    display: none;
}


/* icons */

.icon {
    width: 20px;
    height: 100%;
}

.icon-timeline {
    background-image: url(../images/timeline-solid.svg);
    background-repeat: no-repeat;
}

/* timeline */

.timeline-block {
    max-width: 300px;
    margin: 0px auto;
    font-size: 1.2rem;
}

.timeline-item-header {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.timeline-item-title {
    margin-right: auto;
}

.timeline-item-icon {
    border-radius: 3px;
    color: #fff;
    padding: 0rem 4px;
    margin: 0;
}

.timeline-item-body {
    display: flex;
}

.timeline-item-line {
    width: 3px;
    min-width: 3px;
    min-height: 2rem;
    margin: 0px 9px;
}

/* dop status tree */

.timeline-item-line.start-right-tree, .timeline-item-line.finish-right-tree {
    position: absolute;
}

.timeline-item-line.start-right-tree::before {
    content: "";
    width: 15px;
    height: 13px;
    position: absolute;
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: inherit;
    border-radius: 0px 0px 0px 18px;
}

.timeline-item-line.start-right-tree:after {
    content: "";
    width: 14px;
    height: 10px;
    position: absolute;
    border-top: 3px solid;
    border-right: 3px solid;
    border-color: inherit;
    border-radius: 0px 18px 0px 0px;
    margin: 10px 10px 0px 10px;
}

.timeline-item-line-vertical {
    width: 15px;
    height: 3px;
}

.timeline-item-line.start-right-tree-before::after {
display: none !important;
}

.timeline-item-line.finish-right-tree::before {
    content: "";
    width: 15px;
    height: 13px;
    position: absolute;
    border-bottom: 3px solid;
    border-right: 3px solid;
    border-color: inherit;
    margin-left: 9px;
    border-radius: 0px 0px 22px 0px;
}

.timeline-item-line.finish-right-tree:after {
    content: "";
    width: 14px;
    height: 10px;
    position: absolute;
    border-top: 3px solid;
    border-left: 3px solid;
    border-color: inherit;
    border-radius: 18px 0px 0px 0px;
    margin: 10px 10px 0px 0px;
}

/* meister status tree */

.timeline-item-line.start-left-tree, .timeline-item-line.finish-left-tree {
    position: absolute;
}

.timeline-item-line.start-left-tree-nopos, .timeline-item-line.finish-left-tree-nopos {
    position: static !important;
}

.timeline-item-line.margin {
    margin-left: 18px;
    margin-right: 0;
}
.timeline-item-line.margin-2 {
    margin-right: 0px;
    margin-left: 18px;
}

.start-left-tree-nopos {
    margin-left: -12px;
}
.finish-left-tree-nopos {
    margin-left: 30px;
}

.start-left-tree-nopos::before {
    content: "";
    width: 15px;
    height: 13px;
    position: absolute;
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: inherit;
    border-radius: 0px 0px 0px 18px;
}

.start-left-tree-nopos::after {
    content: "";
    width: 14px;
    height: 10px;
    position: absolute;
    border-top: 3px solid;
    border-right: 3px solid;
    border-color: inherit;
    border-radius: 0px 18px 0px 0px;
    margin: 10px 10px 0px 10px;
}

.finish-left-tree-nopos::before {
    content: "";
    width: 15px;
    height: 13px;
    position: absolute;
    border-bottom: 3px solid;
    border-right: 3px solid;
    border-color: inherit;
    margin-left: 9px;
    border-radius: 0px 0px 22px 0px;
}
.finish-left-tree-nopos::after {
    content: "";
    width: 14px;
    height: 10px;
    position: absolute;
    border-top: 3px solid;
    border-left: 3px solid;
    border-color: inherit;
    border-radius: 18px 0px 0px 0px;
    margin: 10px 10px 0px 0px;
}

.timeline-item-line.start-left-tree::before {
    content: "";
    width: 15px;
    height: 13px;
    margin-left: -12px;
    position: absolute;
    border-bottom: 3px solid;
    border-right: 3px solid;
    border-color: inherit;
    border-radius: 0px 0px 15px 0px;
}

.timeline-item-line.start-left-tree:after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    border-top: 3px solid;
    border-left: 3px solid;
    border-color: inherit;
    border-radius: 15px 0px 0px 0px;
    margin: 10px 10px 0px -21px;
}

.timeline-item-line.finish-left-tree::before {
    content: "";
    width: 15px;
    height: 13px;
    position: absolute;
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: inherit;
    margin-left: -21px;
    border-radius: 0px 0px 0px 15px;
}

.timeline-item-line.finish-left-tree:after {
    content: "";
    width: 11px;
    height: 10px;
    position: absolute;
    border-top: 3px solid;
    border-right: 3px solid;
    border-color: inherit;
    border-radius: 0px 15px 0px 0px;
    margin: 10px 10px 0px -8px;
}

/* ----------- Bootstrap ----------- */
.panel-body {
    padding: 1rem;
}

.collapse .well {
    background: #fff;
    border: none;
}

.nav>li>a {
    padding: 0.7rem;
}

.panel-skyblue {
    border-color: lightskyblue;
}

.panel-skyblue>.panel-heading {
    color: #fff;
    background-color: lightskyblue;
    border-color: lightskyblue;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
}
/*-------------- Custom table ---------------*/
.custom-table {
    min-width: max-content;
    overflow: hidden;
}

.custom-table-row > div {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #f1f1f1;
}

.custom-table-row > div:not(:last-child) {
    border-right: 1px solid #f1f1f1;
}

.table-vertical-hover {
	overflow: hidden;
}

.table-vertical-hover th, .table-vertical-hover td {
	position: relative;
}

.table-vertical-hover td:hover {
	background: #fffabe;
}
 
.table-vertical-hover .focuses_cell:before { 
	background-color: rgba(135,206,250, 0.2) !important;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2;
}

.table-vertical-hover td:hover {
	background: #fffabe;
}
 
/* .fc-timeline-slots td {
    z-index: 1000 !important;
} */

.fc-timeline-slots td:hover {
	background: rgba(135,206,250, 0.2) !important;
}

/* .fc-timeline-lane-frame:hover {
	background: rgba(135,206,250, 0.2) !important;
    z-index: 1000 !important;
} */
 

/* .fc-timeline-lane-frame{
    z-index: 1000 !important;
    pointer-events: none;
} */
 

.fc-timeline-slots tbody td .focuses_cell:before { 
	background: rgba(135,206,250, 0.2) !important;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2;
}

.active-show-event {
    background: rgba(135,206,250, 0.2) !important;
}


.hovered_cell:hover {
    background-color: rgba(255, 193, 7, 0.2); /* Легке жовте підсвічування */
    border: 1px solid #ffc107; /* Жовта рамка */
}

.can-edit-att tbody td:not(:first-child) {
    cursor: pointer;
    opacity: 0.7;
}

/* ------ Custom Datalist ------*/

.custom-datalist-list {
    display: none;
    position: absolute;
    border: 1px solid #ececec;
    border-radius: 7px;
    padding: 8px;
    transition: 0.2s all;
    background: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    z-index: 99999;
}

.custom-datalist-list-costume {
    display: none;
    position: absolute;
    border: 1px solid #ececec;
    border-radius: 7px;
    padding: 8px;
    transition: 0.2s all;
    background: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    z-index: 99999;
}

.custom-datalist-list-costume.active {
    display: block;
    overflow-y: auto;
    opacity: 1;
    width: 100%;
    max-width: 350px;
}

.custom-datalist-list.active {
    opacity: 1;
}

.custom-datalist-item {
    padding: 4px;
}

.custom-datalist-item:not(:last-child) {
    border-bottom: 1px solid #f1f1f1;
}

/* ------ END - Custom Datalist ------*/

/* SIZE SCROLL */

.mini-scroll::-webkit-scrollbar {
    width: 2px;               /* ширина всей полосы прокрутки */
}

.mini-scroll::-webkit-scrollbar-track { 
    width: 1px;  
    background-color: #f1f1f1; 
      /* цвет зоны отслеживания */
}

.mini-scroll::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 20%);
}

/* ------ END - SIZE SCROLL ------*/

/* costume-modal */
.costume-modal-box {
    height: 90vh;
    overflow: visible !important;
} 

.costume-modal input {
    position: relative;
    z-index: 999999;
}

.costume-modal.active{
    display: flex;
}
.positon-fixed-custom-box {
    position: relative;
    height: 100%;
    width: 100%;
}

.costume-modal-content {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    max-height: 480px;
    height: 100%;
    overflow-y:auto;
    position: relative;
}


.positon-fixed-custom {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center !important;
    z-index: 1000;
    background-image: linear-gradient(0deg,rgba(53,55,64,0),#f1f1f1 35.85%);
}

.costume-modal-body {
    flex-grow: 1 !important;
    padding: 0 15px !important;
    position: relative;
}


.modal-width-costume  {
    max-width: 90vw;
    width: 100%;
    display: flex;
    justify-content: left;
}

.modal-width-costume .costume-modal {
    max-width: 90vw;
    width: 100%;
}

.modal-left {
    width: 50%;
}


.modal-right {
    width: 50%;
}

.loader-popup {
    position: relative;
    top: 50%;
    z-index: 100;
}
/* end costume-modal */

/* ERROR */
.error {
    border-color: red !important;
    background-color: #ead3d3;
}

.error::placeholder {
    color: #000 !important;
}

.moda-create-order {
    position: relative;
}

.lodader-order {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 1000;
    backdrop-filter: blur(8px) !important;
    border-radius: 2px;
}

.lodader-order img {
    width: 140px;
}

.moda-create-order-wrapper {
    max-width: 600px;
    width: 100%;
}

.wrapper-list {
    max-height: 350px;
    overflow-y: auto;
}

/* ERROR END */

.show-print {
    position: absolute;
    background: #fff;
    margin: auto;
    display: none;
    top: 0;
    left: 0;
    padding-top: 20px;
    width: 100%;
    height: 100vh;
    -webkit-print-color-adjust:exact;
}

.show-print-outfit {
    display: flex !important;
}

@media print {
    .show-print {
        display: block;
    }

    .samernot-print {
        display: none;
    }
}

.custome-block-border {
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
}
.client-loader  {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    backdrop-filter: blur(10px);
}

.client-loader img{
    margin:auto;
    display: block;
    max-width: 200px;
}

/* LOADER TABLE */
.loader-box {
    position: relative;
}
.loader-table {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
}
/* LOADER TABLE  END */

/*  SWITCH  */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-bottom: 0;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f17171;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #5cb85c;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #5cb85c;
  }

  input:disabled + .slider {
    background: #c4c4c4 !important;
    box-shadow: 0 0 1px #c4c4c4 !important;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .search-results {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .search-results li {
    padding: 5px;
    cursor: pointer;
  }
  
  .search-results li:hover {
    background-color: lightgray;
  }
  

  .costume-navbare::after,.costume-navbare::before {
    display: none !important;
  }

  .box-general-order .event-none * {
    pointer-events: auto !important;
  }
  .box-general-order .event-none-general-order * {
    pointer-events: none !important;
  }

  .location-field {
    border: 0;
    outline: none;
    box-shadow: none;
  }

  .location-field:focus {
    box-shadow: none;
  }


  .status-menu {
    display: inline-block;
    position: relative;
  }
  
  .status-item {
    position: relative;
    display: inline-block;
    margin-right: 20px;
  }
  
  .status-title {
    cursor: pointer;
  }
  
  .substatuses {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .substatus {
    display: block;
    padding: 5px 0;
    cursor: pointer;
  }
  
  .status-item:hover .substatuses {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  .location-url {
    position: relative;
  }

  .location-url-marker,.location-url-marker-title {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50px;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
  }

  .location-url-circle,.location-url-circle-title {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50px;
    border: 2px solid transparent;
    left: -19px;
    top: 50%;
    transform: translateY(-50%);
    background-color: inherit;
  }

  .location-marker {
    position: relative;
  }
  

  .location-marker +.location-marker  {
    margin-top: 7px;
  }

  .custom-dropdown-location:hover {
    background-color: transparent;
  }
  .custom-dropdown-location:focus {
    background-color: transparent;
  }
  .custom-dropdown-location:active {
    box-shadow: none !important;
  }

  .custom-dropdown-employeers:hover {
    background-color: transparent;
  }
  .custom-dropdown-employeers:focus {
    background-color: transparent;
  }
  .custom-dropdown-employeers:active {
    box-shadow: none !important;
  }

  .added-special-item-hide {
    opacity: .5;
  }
  .added-special-item-show {
    opacity: 1;
  }

  .view-order-from-transaction {
    float: none !important;
  }


  .status-name {
    background: #fff;
    font-weight: 600;
    padding: 1px 10px;
    cursor: pointer;
    border-left: 3px solid;
    border-radius: 3px;
    list-style: none;
    width: 100%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    border-top: 1px solid #f1f1f1 !important;
    border-right: 1px solid #f1f1f1 !important;
    border-bottom: 1px solid #f1f1f1 !important;
  }
  .non-active {
    opacity: .5;
  }

.box-warehouse:empty + .box-warehouse {
    display: none;
}

.popover-arrow {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 11px;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #fff;
}

.popover-arrow-left {
    right: 0;
    left:-11px;
    transform: rotateY(180deg);
}

.popover-arrow::after {
    right: 1px;
    bottom: -10px;
    content: " ";
    border-right-width: 0;
}

.done_service_status a {
    pointer-events: auto;
}

.done {
    background-color: #d6f8d3 !important;
}


.artificial-row td input {
    max-width: 100px;
    margin: 0 auto;
    height: 26px;
}

.artificial-row td input::placeholder {
   font-size: 11px;
}

.artificial-row td .form-control-link {
    max-width: 100%;
}

.artificial-row td .form-control-commit {
    max-width: 120px;
}


.change-type-select-company .btn-primary  {
    background-color:#85c0fa 
}

.change-type-select-company .btn-primary.active {
    background-color:#4fa8ff !important;
}

.change-type-select-company {display: inline-block !important;}

.has-order-client ,.has-order-company {
    width: 100%;
    max-width: 300px;
}

.has-order-client.only {
    width: 50%;
}

.has-order-client.only .col-sm-6 {
   width: 100%;
}

.radio_name_order_user.only {
    display: block;
}

.number-company-style {
    border:1px solid #ccc; 
    padding:2px;
    border-radius:5px; 
    margin-top: 10px;
    display: inline-block;
}
.number-company-style + .number-company-style {
    margin-left: 10px;
}

.edit-company-box p {
    margin: 0px !important;
}

.edit-company-box h5 {
    margin: 0px !important;
    font-weight: 700;
    margin-bottom: 10px;
}

.edit-company-box-item {
    margin-bottom: 10px;
}

.edit-address-block {
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2.5px 2.5px 5px #ccc;
    border: 1px solid #ccc;
}



.has-order-client .panel:has(input:checked) {
    background: #d9fbd3 !important;
    border: 2px solid #b8dfb1;
    box-shadow: 0px 0px 32px #a4cd9c;
}

.has-order-company .panel:has(input:checked) {
    background: #d9fbd3 !important;
    border: 2px solid #b8dfb1;
    box-shadow: 0px 0px 32px #a4cd9c;
}

.radio-check-client{
    font-size: 20px;
    color: transparent;
    position: absolute;
    top: 5px;
    left: 5px;
}

.has-order-company .panel:has(input:checked) .radio-check-client {
    color: #56d13d !important;
}
.has-order-client .panel:has(input:checked) .radio-check-client {
    color: #56d13d !important;
}


.box-change-info-order {
    position: relative;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.box-change-info-order-cross {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 20px;
    cursor: pointer;
}
.lead-call {
    /* position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 5px;
    border: 0;
    color: #fff;
    background: rgb(98, 151, 188); */
}

.circle-box {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: lightskyblue;
    cursor: pointer;
    transition: all .2s linear;
    color: #fff;
}

.circle-box span {
    left: 1px;
    top: 0;
}

.circle-box:hover {
    box-shadow: 0px 0px 5px #69a8d0;
    transition: all .2s linear;
}

.fc-timegrid-slot-label,.fc-timegrid-slot-lane {
   height: 40px !important;
   max-height: 40px !important;
} 

.sheduler-event .fc-event-title {
    color: #000;
    font-weight: 700;
    font-size: 14px;
    /* height: 50% !important;
    max-height: 50px !important; */
}

/* .sheduler-event .fc-event-title {
    height: 50px;
} */


.scheduler-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00000038;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
 /*
.fc-event-title {
   color: #000;
   font-weight: 700;
   font-size: 14px;
}


.fc-event-title .fc-sticky {
    font-size: 10px;
} */

.fc-event {
    padding: 0px 5px;
}

/* Стилі для суботи */
.fc-sat {
    background-color: #ff0000; /* Змініть кольори на ваш смак */
    color: #ffffff; /* Колір тексту на фоні */
}

/* Стилі для неділі */
.fc-sun {
    background-color: #00ff00; /* Змініть кольори на ваш смак */
    color: #ffffff; /* Колір тексту на фоні */
}

.new-event {
    background: #5cb85c;
    border: 1px solid #000;
}

.column-filter-box {
    border: 1px solid transparent;
    padding: 3px ;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 3px;
    display: flex;
    width: 44px;
    justify-content: space-between;
}

.column-filter-box span {
    padding: 5px 10px;
    padding-left: 3px;
    padding-right: 3px;

}

.filter-column {
    width: 200px;
}

.skeleton-loader {
    height: 100px;
    position: relative;
}

.skeleton-loader::after {
    content: "";
    background: #f0f0f0; /* Колір фону */
    animation: loading 1.5s infinite; /* Анімація нескінченного пульсування */
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
    position: absolute;
}
  
  /* Анімація загрузки */
@keyframes loading {
0% {
    background: #f0f0f0; /* Початковий колір фону */
}
50% {
    background: #e0e0e0; /* Колір фону в середині анімації */
}
100% {
    background: #f0f0f0; /* Знову повертаємося до початкового кольору фону */
}
}
  
  /* Стилі для текстового контенту, якщо потрібно */
  .skeleton-text {
    width: 80%; /* Ширина текстового контенту */
    height: 1em; /* Висота текстового контенту */
    margin: 10px 0; /* Відступи */
    background: #f0f0f0; /* Колір фону текстового контенту */
    animation: loading 1.5s infinite; /* Анімація нескінченного пульсування */
  }

.hide {
    display: none !important;
}

.list-btn-active.active{
    background: #8ac3f4 !important;
    border-radius: 5px;
}
.list-btn-active.active:hover{
    background-color: #d4efff !important;
}
.list-btn-active.active a{
    background: #8ac3f4 !important;
}

[data-event]:hover{
    background-color: #d4efff !important;
}

.table-no-events {
    pointer-events: none !important;
}

.table-no-events .check-received {
    pointer-events: auto !important;
}

.table-events-repairman .confirm-proper {
    pointer-events: auto !important;
}

.table-events-repairman .change-unit {
    pointer-events: auto !important;
}
.table-events-repairman .open-change-unit {
    pointer-events: auto !important;
}

.table-events-repairman .show-info-cart {
    pointer-events: auto !important;
}

.table-events-repairman .check-calculate {
    pointer-events: auto !important;
}
.table-events-repairman .check-ordered {
    pointer-events: auto !important;
}


/* Вимкнути hover-ефекти для інших елементів, наприклад, кнопок */
.fc-scrollgrid-section-body:hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: initial !important;
    cursor: default !important;
}

#edit-order-aggregate-modal .modal-body  input {
    max-width: 500px;
}

#edit-order-aggregate-modal .modal-body  select {
    max-width: 500px;
}

#edit-order-aggregate-modal .modal-body  textarea {
    max-width: 500px;
}

#edit-order-detail-modal .modal-body  input{
    max-width: 300px;
}

#edit-order-detail-modal .modal-body  input{
    max-width: 300px;
}

#edit-order-detail-modal .modal-body  select{
    max-width: 300px;
}

.number-menu {
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

#table_tds_print tbody .table_tds_print-item {
    counter-increment: rowNumber;
}


#table_tds_print .table_tds_print-item td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

.panel-default.active {
    background-color: #f1f0f0;
}

.panel-default-reports:hover {
    background-color: #f1f0f0;
}

.height-block-cashbox {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}

.height-wrapper-cashbox {
    height: calc(100vh - 130px);
    /* БУЛО 107px */
    /* overflow: hidden; */
}

.cashbox-no-padding {
    margin-bottom: -50px;
}

.fotter-cashbox {
    position: sticky;
    bottom: 0px;
    left: 0;
    width: 100%;
    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#cashbox-transactions-table.margin-bottom {
    margin-bottom: 160px;
}

#cashbox-transactions-table thead tr {
    position: sticky;
    top: 0px; /* Задайте бажаний фон для останнього рядка */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 2; /* Додайте тінь, якщо потрібно */
    background: #f1f1f1 !important;
}

#cashbox-transactions-table tr:last-child {
    position: sticky;
    bottom: 0;
    background: white; /* Задайте бажаний фон для останнього рядка */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
  }
  
  .container{
    padding-top:50px;
    margin: auto;
  }

.btn-paymend {
    background-color: #000;
    color: #fff;
    border: none;
}

.btn-order {
    background-color: #5cb85c;
    color: #fff;
    border: none;
}

.btn-order:hover,.btn-order.active {
    background-color: #8cdc8cf9;
    opacity: .5;
    color: #fff;
}

.btn-order:focus,.btn-paymend:focus {
    color: #fff;
}

.btn-paymend:hover,.btn-paymend.active {
    background-color: #585858;
    opacity: .5;

    color: #fff;
}



/* ORDER-MODAL */

.order-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    visibility: hidden; /* Замініть display: none; на visibility: hidden; */
    justify-content: flex-end;
    background: rgba(0, 0, 0, .7);
    transition: opacity .2s linear, visibility 0s linear .2s; /* Додайте transition для visibility */
    opacity: 0;
    display: flex;
    z-index: 4;
    justify-content: flex-end;
}


.order-modal-header {
    background-color: #e8eaed;
    display: flex;
    justify-content: flex-end;
    width: calc(100%+10px);
    padding: 5px 20px;
    margin:0px -10px;
    margin-bottom: 20px;
}

.order-modal.active {
    visibility: visible; /* Замініть display: flex; на visibility: visible; */
    opacity: 1;
  
}



.order-container {
    width: 0;
    background-color: #fff;
    height: 100%;
    transition: all .3s linear;
    display: flex;
}

.order-modal.active .order-container {
    width: 90%;
}



@media (max-width:648px) {
    .order-modal.active .order-container {
        width: 100%;
    }

   
}

.order-block-content {
    padding: 0px 10px;
    overflow-y: auto;
    
}

@media(min-width: 991px){
    .order-block-content {
        width: 80%;
    }
}

@media (max-width:648px) {
    .order-container .block-right-col-design {
        display: none;
    }
}

.order-block-mobile {
    display: none;
}

.order-block-mobile-wrapper {
    width: 100% !important;
}

@media (max-width:648px) {
    .order-block-mobile {
        display: block;
    }
}

.order-loader-wrapper{
    width:100%; 
    height:100%;
    position:absolute;
    z-index: 200;
    left:0px;
    top:0px;
    background: #fff;
    visibility: visible;
    transition: all .2s linear;
}

.order-loader-wrapper.active {
    visibility: hidden;
}

#alone-order-nav.hide {
    display: none !important;
}

.order-content {
    position: relative;
}

.order-content-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fff;
    visibility: hidden;
}

.order-content-loader.active {
    visibility: visible;
}

.auth-mechanic-box {
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.block-result-search-products-wrapper {
    max-height: 350px;
    overflow-y: scroll;
    padding: 20px 10px;
}

.client-cachbox:hover {
    text-decoration: underline;
}

.pop-up {
    width: 500px;
    border-radius: 10px;
    background-color: #d9fbd3;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
    padding: 10px;
    min-height: 150px;
}

@keyframes blink {
    0%, 50%, 100% {
     transform: scale(1.1);
     
    }
    
    25%, 75% {
        transform: scale(1);
    }
}
  
.pop-up +.pop-up  {
    margin-top: 20px;
}

.pop-up-title {
    color: #337ab7;
    cursor: pointer;
    font-size: 25px;
}

.pop-up-text {
    font-size: 16px;
}

.pop-up-wrapper {
    position: fixed;
    right: 20px;
    bottom: -200%;
    z-index: 20;
    transition: all .5s linear;
}
.pop-up-wrapper.show {
    transition: all .5s linear;
    bottom: 20px;
}

.pop-up-enter-active, .pop-up-leave-active {
    transition: transform 0.3s;
}
  
.pop-up-enter, .pop-up-leave-to {
    transform: translateX(100%);
}

.pop-up-leave-to {
    transform: translateX(100%);
}

.pop-up-enter-active,
.pop-up-leave-active {
    
}

.table-events-kassa .non-events-in-kassa {
    pointer-events: auto !important;
}

.table-no-events [data-action="calculate"], .table-no-events [data-action="select-products"],.table-no-events .bi-truck ,.table-no-events .bi-box-seam-fill{
    pointer-events: auto !important;
}


.table-events-repairman .non-events-in-kassa {
    pointer-events:all !important;
}

#order-list-table tbody td span,#order-list-table tbody td .td-flex-block,#order-list-table tbody td .span-elipses{
    text-overflow: ellipsis;
    overflow: hidden;
    float: none;
}
.line {
    height: 106%;
    width: 2px;
    background-color: #b4adad;
    position: relative;
    margin: 0 auto;
}

.line-default{
  position: relative;
}

.line-default::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 30px;
  width: 2px;
  background-color: #b4adad;
}

.line-default.left-plus::after {
    left: 52%;
}

.bi-circle-fill{
  color: #b4adad;
  font-size: 9px;
}
.fa-arrows-split-up-and-left{
  color: #286090;
}
.no-line {
    height: 0%;
    width: 0px;
    background-color: #b4adad;
    position: relative;
    margin: 0 auto;
    opacity: 0;
}

.whithout-line::after{
  display: none;
}

.line::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 10px;
    height: 2px;
    background-color: #b4adad;
}


.line.last{
    height: 75%;
    top: -26%;
}
.line-calculate.last{
    height: 50%;
    top: 0;
}

.line.last::after{
    top: 100%;
    transform: translateY(-50%);
}

.separation-main td{
    height: 30px !important;
    background: #eee !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important ;
}

.dropdown-separation {
    transform: translateX(-48%);
    border: none;
    border-radius:0;
    box-shadow: none;
    height: 86px;
    background: transparent;
}

.dropdown-content {
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background: #fff;
    height: 75px;
    padding: 5px 0;
}
  

.dropdown-separation ul {
    float: left;
    min-width: 160px;
    padding:0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    position: relative;
}

.dropdown-separation ul li a {
    text-decoration: none;
    padding: 0px 5px;
    color: #333;
}

.dropdown-separation ul li a {
    text-decoration: none;
    color: #333;
}

.dropdown-separation ul li:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}


.dropdown-separation.open{
    display: block;
}

.triangle {
    position: absolute;
    bottom: -15px;
    left: 48%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent; /* Ширина та колір лівого бордюра */
    border-right: 5px solid transparent; /* Ширина та колір правого бордюра */
    border-top: 10px solid #fff; /* Ширина та колір нижнього бордюра (трикутник) */
}

.select-product.select {
    background: #ccc;
    padding: 0 10px;
    border-radius: 5px;
    margin: 5px 0;
}

#closet-order-modal {
    padding: 4px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #fff;
    box-shadow: 0px 0px 5px #0003;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-code {
    color: #6caad0;
    cursor: pointer;
}

.order-code-copy {
    font-size: 16px;
    padding: 3px;
    border-radius: 5px;
    background: #f1f1f1;
    box-shadow: 0px 0px 5px #0005;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employees-select {
    font-size: 0.8em !important;
    line-height: 25px !important;
    height: 25px !important;
}

.employee-report-item {
    min-width: 150px;
    text-align: right;
}

.width-td-calculate {
    width: 130px;
}
.panel-services-item {
   background-color: #e7f5fe; 
   box-shadow: 0px 0px 10px #0003;
}

.table-stiky {
    position: relative;
}

.table-stiky tbody tr:last-child {
    position: sticky;
    bottom: 0px;
    left: 0px;
    background-color: rgb(243, 242, 242);
    height: 70px;
}

.table-stiky-bottom-0 tbody tr:last-child {
    position: sticky;
    bottom: 0px;
    left: 0px;
    background-color: rgb(243, 242, 242);
}


#count-load-file {
    font-size: 16px;
    min-width:250px;
    height:100px;
    border-radius: 10px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000000;
    padding: 10px;
    background: #dff0d8;
    top: -100%; 
    transition: all .2s linear;
    opacity: 0;
    border-color: #d6e9c6;
}

#count-load-file.show {
    top: 30px;
    opacity: 1;
    transition: all .2s linear;
}

/*cloud*/

.cloud{
    width: 4px;
    height: 10px;
    opacity: 0.5;
    position: relative;
    box-shadow: 6px 0px 0px 0px rgba(0,0,0,1),
                12px 0px 0px 0px rgba(0,0,0,1),
                18px 0px 0px 0px rgba(0,0,0,1),
                24px 0px 0px 0px rgba(0,0,0,1),
                30px 0px 0px 0px rgba(0,0,0,1),
                36px 0px 0px 0px rgba(0,0,0,1);
    
    -webkit-animation: rain 1s linear infinite alternate;
       -moz-animation: rain 1s linear infinite alternate;
            animation: rain 1s linear infinite alternate;
}
.cloud:after{
    width: 40px;
    height: 10px;
    position: absolute;
    content: "";
    background-color: rgba(0,0,0,1);
    top: 0px;
    opacity: 1;
    -webkit-animation: line_flow 2s linear infinite reverse;
       -moz-animation: line_flow 2s linear infinite reverse;
            animation: line_flow 2s linear infinite reverse;
}

@-webkit-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(0,0,0,1),
                12px 0px 0px 0px rgba(0,0,0,0.9),
                18px 0px 0px 0px rgba(0,0,0,0.7),
                24px 0px 0px 0px rgba(0,0,0,0.6),
                30px 0px 0px 0px rgba(0,0,0,0.3),
                36px 0px 0px 0px rgba(0,0,0,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(0,0,0,0.2),
                12px 0px 0px 0px rgba(0,0,0,0.3),
                18px 0px 0px 0px rgba(0,0,0,0.6),
                24px 0px 0px 0px rgba(0,0,0,0.7),
                30px 0px 0px 0px rgba(0,0,0,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}
@-moz-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(0,0,0,1),
                12px 0px 0px 0px rgba(0,0,0,0.9),
                18px 0px 0px 0px rgba(0,0,0,0.7),
                24px 0px 0px 0px rgba(0,0,0,0.6),
                30px 0px 0px 0px rgba(0,0,0,0.3),
                36px 0px 0px 0px rgba(0,0,0,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(0,0,0,0.2),
                12px 0px 0px 0px rgba(0,0,0,0.3),
                18px 0px 0px 0px rgba(0,0,0,0.6),
                24px 0px 0px 0px rgba(0,0,0,0.7),
                30px 0px 0px 0px rgba(0,0,0,0.9),
                36px 0px 0px 0px rgba(0,0,0,1);
        opacity: 1;
    }
}
@keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(0,0,0,1),
                12px 0px 0px 0px rgba(0,0,0,0.9),
                18px 0px 0px 0px rgba(0,0,0,0.7),
                24px 0px 0px 0px rgba(0,0,0,0.6),
                30px 0px 0px 0px rgba(0,0,0,0.3),
                36px 0px 0px 0px rgba(0,0,0,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(0,0,0,0.2),
                12px 0px 0px 0px rgba(0,0,0,0.3),
                18px 0px 0px 0px rgba(0,0,0,0.6),
                24px 0px 0px 0px rgba(0,0,0,0.7),
                30px 0px 0px 0px rgba(0,0,0,0.9),
                36px 0px 0px 0px rgba(0,0,0,1);
        opacity: 1;
    }
}

@-webkit-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@-moz-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}

.sort-head.active-down .glyphicon-triangle-bottom {
    color: blueviolet;
}
.sort-head.active-up .glyphicon-triangle-top {
    color: blueviolet;
}

.highlight {
    background-color: yellow;
  }

.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
opacity: 0;
}

.flip-list-move {
    transition: transform 1s;
}

.dragging {
    transition: all 0.3s ease; /* Анімація для класу, що перетягується */
}

.custom-tip {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 10px #e7f5fe;
}

.custom-tip.custom-tip-left {
    border-left: 4px solid lightskyblue !important;;
}

.custom-tip.custom-tip-right {
    border-right: 4px solid lightskyblue !important;
}

.table-container .table-resizing {
    width: auto;
    min-width: auto !important;
}

.table-container .table-resizing.min-size {
    /* width: auto  !important; */
}

#myTable thead th:first-child, #myTable thead td:first-child {
    width: 50px; /* або інше бажане значення */
    min-width: 50px;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-resizing {
    overflow-y: auto;
    max-width: none;
}

.table-resizing { 
    table-layout: fixed;
    border-collapse: collapse;
    white-space: nowrap;
    margin: 0;
}

.table-resizing th{ 
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    min-width: 50px !important;
    z-index: 3;
}

.table-resizing td{ 
    margin: 0;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.table-resizing td div:not(.no-resize-element){ 
    margin: 0;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.table-resizing td span:not(.no-resize-element){ 
    margin: 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    float: none !important;
}

@media (max-width:768px) {
    .functions-box {
        flex-wrap: wrap;
    }
}

/* Settings */

.settings {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.settings-container {
    height: 100%;
}

.settings-container-box {
    height: 100%;
}

.settings-list {
    background-color: #87cefa33;;
    width: 245px;
}

.settings-content {
    width: 86%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
}

.settings-content::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

.settings-content::-webkit-scrollbar-thumb {
    background-color: rgb(193, 223, 242);
    border-radius: 10px;
}

.settings-list-item {
   font-size: 16px;
   font-weight: 600;
   padding: 5px;
   padding-left: 15px;
   cursor: pointer;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
}
.settings-list-item.active {
    background-color: #0090e963;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    transition: all .2s linear;
}

.settings-list-item:hover {
    background-color: #89caf263;
    transition: all .2s linear;
}


.settings-warehouse {
    /* width: 50%; */
}

.location-url-circle-warhouse{
    left: 50% !important;
    top: 50% !important;
    transform: translate3d(-50%,-50%,0) !important;
}

.location-url-marker-warhouse {
    left: 50% !important;
    top: 50% !important;
    transform: translate3d(-50%,-50%,0) !important;
}

.table-line-test {
    position: absolute;
    top: -51%;
    left: 12px;
    height: 100%;
    width: 2px;
    background-color: #b4adad;
    overflow: visible;
}

.table-line-test-index{
    left: 30px;
}

.padding-left {
    padding-left: 53px !important;
}

.horizontal-line {
    position: relative;
}
.horizontal-line::after {
    content: "";
    position: absolute;
    background-color: #b4adad;
    bottom: -1px;
    left: 0;
    width: 19px;
    height: 2px;
}

.horizontal-line-smoll::after {   
    width: 10px;
}
.fa-circle-transparent {
    color: transparent !important;
}

.edits-menu {
    position: absolute;
    top:10px;
    right: 10px;
}

.drag {
    transition: all linear .3s;
    cursor: move;
}

.drag.dragging {
    background: #e9e9e9;
    opacity: .8;
}

.drag-over{
    border-top: 2px solid #0090e963;
}

.drag-left{
    border-left: 2px solid #0090e963;
}
  

.custom-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 9em;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(13%, 19%, 23%, 0.3);
    border-radius: 9em;
}

.color-box {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
}

.color-box.active {
    border:3px solid #000;
}

.pulse-btn {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
      }
      50% {

        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
      }
      100% {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
  }

  .rules-item {
    cursor: pointer;
    transition: all .3s linear;
  }

  .rules-item:hover {
    background-color: #f2efef;
    box-shadow: 0px 0px 10px #bab0b0;
  }

  .role-menu{
    box-shadow: 0px 5px 20px #1412124f;
    width: 30%;
    background-color: #87cefa33;
    padding-top: 7px;
  }

  .role-content-list-item {
    padding-left: 20px;
  }
  .role-content-list-item-subtitle {
    padding-left: 40px;
  }

  .role-content {
    width: 70%;
    padding-left: 20px !important;
  }

  .role-menu-list{
    list-style-type: none;
    padding: 0px;
  }

  .role-menu-list-item{
    font-size: 20px;
  }

    .role-menu-list-item {
        font-size: 16px;
        font-weight: 600;
        padding: 3px;
        padding-left: 22px;
        cursor: pointer;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent; 
    }

    .role-menu-list-item-subtitle {
        font-size: 14px;
        font-weight: 600;
        padding: 3px;
        padding-left: 35px;
        cursor: pointer;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent; 
    }

    .role-menu-list-item.active {
        background-color: #0090e963;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        transition: all .2s linear;
    }

    .role-menu-list-item:hover {
        background-color: #89caf263;
        transition: all .2s linear;
    }

    .block-search{
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        max-height: 500px;
        overflow-y: scroll;
        padding: 10px;
        margin-top: 58px;
        z-index: 3;
        border: 1px solid #ddd;
        border-radius: 7px;
        box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1);
        display: none;
        background: #fff;
    }

    .thumbnail-search-item:hover{
        background-color: #f2efef;
    }
    
    .thumbnail-search-item.active{
        background-color: #ddf3d9;
    }

    .text-overflow{
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        float: none;
        width: 300px !important;
        white-space: nowrap;
    }

    .integration-item {
        border-radius: 5px;
        border: 1px solid #ddd;
    }
    
    .integration-img{
        max-width: 100px;
    }
    .integration-img img{
        width: 100%;
        display: block;
    }

    .vertical-line-cust {
        width: 1px;
        height: 40px;
        background: #ddd;
    }

    .script-item {
        border-radius: 5px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border: 1px solid #ddd;
        display: inline-block;
    }

    .script-plus {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #89caf263;
        cursor: pointer;
    }

    .script-box {
        border-radius: 5px;
        border: 1px solid #ddd; 
    }

    .caption .tooltip-inner {
        white-space: nowrap;
    }

    .plug-page {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
    }

    .plug-page h2 {
        font-size: 64px;
        color: #0090e963;
        font-weight: 700;
        text-transform: uppercase;
    }
    .plug-page h5 {
        font-size: 30px;
        color: #000;
        font-weight: 700;
        text-transform: uppercase;
    }

    .opacity-item {
        opacity: 0.5;
    }

    .list-scenario-role {
        max-height: 350px;
        width: 250px;
        overflow-y: auto;
        bottom: 100%;
        left: 0;
    }

    .list-scenario-role.active{
        opacity: 1;
        display: block;
    }

.non-active-cashbox {
   opacity: 0.5; 
}

.modal-costum-size {
    width: 1000px;
}

.no-active-order {
    background: #c4c4c4;
}

.small-input {
    width: 15px !important;
    height: 15px !important;
}
.loading-field {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.7);
}
.table-resizing .tooltip .tooltip-inner {
    width: auto !important;
    max-width: 100% !important;
}

/* Skeledon */
.loading-skeledon { 
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeHolderShimmer;
    -webkit-animation-timing-function: linear;
    background: #f6f7f8;
    background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
    background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    border-radius: 20px;
  }
@-webkit-keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.btn-active {
    color: #333;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #adadad;
}

#loading-window {
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 30%;
    transform: translate3d(-50%,-50%,0);
    min-width: 300px;
    opacity: 0;
    visibility: hidden;    height: 200px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 4px 4px 10px #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: all .4s linear;
}

#loading-window.active {
    opacity: 1;
    visibility: visible;
}

.loading-wrapper-modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: #fff;
    opacity: .6;
}

.loading-wrapper-modal.active {
    display: block;
}

.form-legend {
    margin: 0;
    border: 0;
    font-size: 14px;
    width: auto;
}

.form-fieldset {
    border-radius: 4px;
    border: 1px solid #ccc;
}

.form-fieldset input {
    box-shadow: none !important;
    padding-top: 0;
    border-bottom: 0;
    height: 30px;
}

/* INPUT */

.input-bx{
    position: relative;
    height: 34px;
}

.input-bx input{
    width: 100%;
    padding: 10px;
    padding-right: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    transition: 0.2s;
    height: 34px;
}

.input-bx-costume {
    height: 44px;
}


.input-bx-costume input{
    width: 100%;
    padding: 10px;
    padding-right: 30px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    transition: 0.2s;
    height: 44px;
    color: #6b6a6a;
    gap: 10px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 6%);
}

.input-group-addon-costume {
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    transition: 0.2s;
    height: 34px;
    gap: 10px;
    border-radius: 100px;
    background: #fff;
    color: #6b6a6a;
}

.input-bx-costume-big {
    max-width: 300px;
    width: 100%;
}

.input-bx-costume-small {
    width: 100%;
}

.input-bx span{
    position: absolute;
    left: 0;
    padding: 10px;
    font-size: 13px;
    pointer-events: none;
    transition: 0.2s;
}

#checking_mail {
    width: max-content;
    white-space: nowrap;
}

.input-bx-costume span{
    position: absolute;
    left: 0;
    top: 3px;
    padding: 10px;
    font-size: 13px;
    pointer-events: none;
    transition: 0.2s;
}

.input-bx-costume span {
    font-weight: 700;
    color: #6b6a6a;
}

.input-bx input:valid ~ span,
.input-bx input:focus ~ span{
    transform: translateX(10px) translateY(-7px);
    font-size: 8px;
    font-weight: 600;
    padding: 0 5px;
    background: #f1f1f1;
    letter-spacing: 0.1rem;
}

.input-bx-costume input:valid ~ span,
.input-bx-costume input:focus ~ span{
    transform: translateX(10px) translateY(-7px);
    font-size: 12px;
    font-weight: 600;
    padding: 0 5px;
    background: transparent !important;
    letter-spacing: 0.1rem;
}



.input-bx input:focus{
    outline: 0;
}

/* tooltipe */

.tooltipe-costum {
    width: auto;
    min-width: 150px;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    position: fixed;
    z-index: 100000;
    display: none;
    
}

.tooltipe-costum p {
    text-align: center;
}

.tooltipe-costum.eve {
    background-color: #fff;
    border-radius: 5px;
    min-width: 250px;
    box-shadow: 0px 0px 10px #dfd9d9;
    padding: 7px 15px !important;
    width: min-content;
}

.tooltipe-costum.eve p {
    text-align: left;
    color: #000;
    max-width: 400px;
    margin: 0px;
}

.tooltipe-costum img {
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 200px;
    border-radius: 5px;
    margin: 0 auto;
    margin-bottom: 10px;
}

#tooltip {
    border-radius: 5px;
    padding: 5px;
}
#tooltip.tooltip-top::after {
    content: '▼';
    position: absolute;
    color: #000;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}

#tooltip.tooltip-bottom::after {
    content: '▲';
    position: absolute;
    color: #000;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
}

.trigger-tooltip-box {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.details-agregate-items {
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
}

.details-agregate-items.active {
    box-shadow: 0px 0px 15px rgba(98, 150, 188, 0.466);
    border-color: rgb(98, 151, 188);
}

/* .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid #000 !important;
    padding: 2px !important;
}*/

.table-bordered span {
    float: none !important;
} 

.table-no-bordered span {
    float: none !important;
}
.table-no-bordered>tbody>tr>td,.table-no-bordered>tfoot>tr>td,.table-no-bordered>thead>tr>td {
    border: none !important;
}

ul li {
    list-style: none;
}

.active-orders-box {
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.2);
    max-height: 100px;
    padding: 10px;
    overflow-y: auto;
}

.active-orders-item {
    color:rgb(98, 151, 188);
    text-decoration: underline;
    cursor: pointer;
    font-size: 16px;
}

.decrement-increment {
    width: 140px !important;
}


#tidio-chat{
    opacity: .4;
    position: absolute;
    bottom: 20px;
    right: 9px;
    height: 50px;
    cursor: pointer;
    z-index: 100000 !important;
    padding: 10px;
}

#tidio-chat-moved{
    background: linear-gradient(135deg, rgb(41, 50, 60), rgb(72, 85, 99));
    box-shadow: rgba(41, 50, 60, 0.5) 0px 2px 16px;
    border-radius: 25px;
    z-index: 9999999999999999 !important;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tidio-chat:hover{
    opacity: 1;
}

.tidio-chat-text {
    font-size: 16px;
    font-weight: 700;
    color: white !important;
}

.alert-container {
    transition: top 0.5s ease, opacity 0.5s ease;
}

.fc-today-button,.fc-next-button ,.fc-prev-button{
    background: #31b0d5 !important;
    /* color: #000 !important; */
    border: none !important;
    /* box-shadow: inset 0px 0px 5px #5bc0de; */
    font-weight:bold;
}


.fc-today-button:disabled {
    /* background: #ccc !important; */
}

/* .fc-myCustomSelect-button {
    z-index: -1 !important;
    position: absolute !important;
    opacity: 0 !important;
} */

.fc-myCustomSelect-button, .fc-timelineBtn-button, .fc-resourceBtn-button {
    z-index: -1 !important;
    position: absolute !important;
    opacity: 0 !important;
}

.fc-view-harness {
    /* height: auto !important;
    min-height: 200px; */
}

.current-time-highlight{
    border-radius: 0 !important;
}

.fc-event{
    border-radius: 5px;
}

.model-center {
    display: flex !important;
    align-items: center;
}

.cursor-pointer {
    cursor: pointer;
}

   .loader {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
   }

   .loader span {
        display: inline-block;
        height: 15px;
        width:15px;
        background:#f0f8ff;
   }

   .loader span:nth-child(1) {
    animation: temp 1s 0.05s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(2) {
    animation: temp 1s 0.1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(3) {
    animation: temp 1s 0.15s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(4) {
    animation: temp 1s 0.2s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(5) {
    animation: temp 1s 0.25s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(6) {
    animation: temp 1s 0.3s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(7) {
    animation: temp 1s 0.35s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(8) {
    animation: temp 1s 0.4s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(9) {
    animation: temp 1s 0.45s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(10) {
    animation: temp 1s 0.5s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(11) {
    animation: temp 1s 0.55s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(12) {
    animation: temp 1s 0.6s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(13) {
    animation: temp 1s 0.65s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(14) {
    animation: temp 1s 0.7s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(15) {
    animation: temp 1s 0.75s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(16) {
    animation: temp 1s 0.8s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(17) {
    animation: temp 1s 0.85s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(18) {
    animation: temp 1s 0.9s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(19) {
    animation: temp 1s 0.95s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  .loader span:nth-child(20) {
    animation: temp 1s 1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
    width: 7.5px;
    height: 7.5px;
    margin: 0 2px;
  }
  
  @keyframes temp {
    50% {
      transform: scale(1, 5);
      background: #87cefa;
    }
  }

  .appearance {
    font-size:30px;
    /* height:32px; */
  }

  .appearance-box {
    border-radius: 5px;
  }

  .appearance-box.active{
    background: #ddd;
    padding: 5px 15px;
  }

  .event-date-order-item {
    min-height: 30px;
    
  }
  
  .resize-line {
    position: absolute;
    top: 0;
    width: 10px;
    right: -1px;
    cursor: col-resize;
    height: 100%;
  }

  .event-date-order-item .fc-event-main {
    min-height: 30px;
    
  }

  .box-calendar {
    position: relative;
  }

  .box-calendar-loader {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    height: 95%;
    background: rgba(204, 204, 204, 0.1);
    backdrop-filter: blur(5px);
    z-index: 4;
    transition: all .3s linear;
  }

  .box-calendar-loader.dop-class {
    top: -15px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active до версії Vue 2.2.0 */ {
    opacity: 0;
  }
  
  .fc-event.current-time-highlight {
    pointer-events: none !important;
  }

  .big-modal{
    max-width: 1200px !important;
    width: 100% !important;
  }

  .big-modal .modal-content {
    max-width: 1200px ;
    width: 100%;
  }

  .calendar-gradation {
    padding: 5px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    /* border: 1px solid lightskyblue; */
    cursor: pointer;
    box-shadow: 0px 0px 10px #00000038;
  }

  .calendar-gradation.active { 
    background: lightskyblue;
    color: #fff;
    border: none;
  }

  @keyframes pulse-event {
    0% {

        box-shadow: 0 0 0 0 rgba(250, 0, 0, 0.9);
      }
      50% {

        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
      }
      100% {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
  }

  .open-order-event {
    position: relative; /* на всяк випадок */
    z-index: 2;
  }


  .open-order-event::after {
    /* необхідно, щоб псевдоелемент відображався */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* формуємо коло розширення */
    width: 100%;
    height: 100%;
    z-index: 1;    
    /* анімація */
    border-radius: 5px;
    animation: pulse-event 2s infinite;
    pointer-events: none; /* щоб не заважати клікам по батьку */
  }

  .hover-resource {
    background-color: rgba(173, 216, 230, 0.2); /* Напівпрозорий блакитний фон */
    transition: background-color 0.2s;
  }
  
  /* Підсвічуємо всі клітинки тієї ж дати/часу (стовпець) */
  .hover-time {
    background-color: rgba(255, 165, 0, 0.2); /* Напівпрозорий помаранчевий фон */
    transition: background-color 0.2s;
  }

  .fc-tday-button {
    margin-right: 10px !important;
    background: #31b0d5 !important;
    border-top-right-radius: 3.5px !important;
    border-bottom-right-radius: 3.5px !important;
  }

  .fc-prev-button {
    border-top-left-radius: 3.5px !important;
    border-bottom-left-radius: 3.5px !important;
  }

  .fc-timeline-slots tbody tr:hover {
    background-color: transparent !important;
  }

  /* Задаємо загальні параметри для смуги прокрутки */
    tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(3) .fc-scroller-harness .fc-scroller::-webkit-scrollbar {
        width: 20px;       /* ширина скролу */
        height: 40px;      /* якщо є горизонтальний скрол */
        border: 1px solid lightskyblue;
        border-radius: 5px;
    }

    tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(3) .fc-scroller-harness .fc-scroller.active::-webkit-scrollbar {
        background: repeating-linear-gradient(
            to right, 
            transparent, 
            transparent calc(100% / 7 - 2px), /* Розмір однієї частини */
            lightskyblue calc(100% / 7 - 2px), /* Лінія */
            lightskyblue calc(100% / 7)
        );
    }



    tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(1) .fc-scroller-harness .fc-scroller::-webkit-scrollbar {
        display: none !important;
    }

    tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(3) .fc-scroller-harness .fc-scroller {
        margin: 0 auto !important;
        transform: scaleX(.5);
    }
    
    tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(1) {
        background: rgba(0, 0, 0, 0) !important;
    }

    tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(3) {
        background: rgba(0, 0, 0, .02) !important;
        bottom: -50px !important;
    }
  
  /* Задаємо колір або фон для «треку» (доріжки) */
  tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(3) .fc-scroller-harness .fc-scroller::-webkit-scrollbar-track {
    background: transparent !important; 
    border-color:lightskyblue; 
    
  }
  
  /* Задаємо основний колір/стиль самого бігунка */
  tfoot .fc-scrollgrid-section [role="presentation"]:nth-child(3) .fc-scroller-harness .fc-scroller::-webkit-scrollbar-thumb {
    background-color:lightskyblue;   /* колір скрол-Thumb */
    border-radius: 5px;       /* радіус заокруглення */
    cursor: pointer;
  }



  /* Смуга прокрутки */
  #tableWrapperScroll {
    position: sticky;
    bottom: -40px;
    overflow: hidden;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0);
    height: 40px;  /* приблизна висота нативного скролла в більшості браузерів */
    border: 1px solid lightskyblue;
    border-radius: 5px;

  }
  
  /* Повзунок (thumb) */
  #scrollbarContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background-color: lightskyblue;
    border-radius: 5px;
    cursor: pointer;
  }

    .highlight-slot {
        border: 1px solid red !important;
        position: relative;
    }

    /* .highlight-slot::after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
    }

    .highlight-slot::before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: red;
        position: absolute;
        bottom: 0;
        left: 0;
    } */

/* .custom-border {
    border: 3px solid red;
    padding: 5px;
    border-radius: 5px;
} */


/* authorization */
.wrapper-authorization {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.authorization-right,.authorization-left {
    width: 100%;
    height: 100%;
    position: relative;
}

.authorization-left{
    /* border-right:1px solid #000 ; */
    /* box-shadow: inset -5px 0 20px rgba(0, 0, 0, 0.1);
    background: #e7f5fe63; */
    display: none !important;
}   

.authorization-left::before {
    content: "";
    top: 0;
    left: -437px;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: url(../images/bg-sto.png);
    background-repeat: no-repeat;
    background-position: 38px 127px;
    transform: rotateZ(63deg);
    background-size: 100%;
}

.authorization-right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    right: -300px;
    top: 0;
    background: url('../images/blur-0002.png');
    z-index: 1;
}

.authorization-right-box {
    position: relative;
    z-index: 2;
}

.authorization-logo {
    position: absolute;
    top:40px;
    left:40px;
    max-width: 260px;
    width: 100%;
}

.authorization-sto {
    max-width: 1000px;
    width: 100%;
    animation: levitate 3s ease-in-out infinite;

}

@keyframes levitate {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
  

.authorization-title {
    font-size: 44px;
    font-weight: 600;
    color:#484646;
}

.authorization,.registration {
    display: none;
}

.authorization.active, .registration.active {
    display: block;
}

@media screen and (min-width:768px) {
    .authorization-left {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .authorization-right,.authorization-left {
        width: 50%;
        height: 100%;
    }

}

@media screen and (max-width:768px) {
    .authorization-right {
        display: flex !important;
        align-items: center !important;
        justify-content: start !important;
        flex-direction: column !important;
        overflow: hidden;
        overflow-y:auto;
        
    }

    /* .authorization-right-box {
        padding-top: 40px;
    } */

    /* .input-bx-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        width: 100%;
    } */

    .input-bx-box .input-bx{
        width: 100% !important;
    }


    .registration  {
        width: 100%;
    }
}

.authorization-btn{
    background: rgb(232, 240, 254);
    color:rgb(117, 135, 167);
    font-weight: 700;
    border: none;
}

.authorization-btn.active {
    color: #fff !important;
    background: lightskyblue !important;
    box-shadow: none;
    font-weight: 700 !important;
    border: none;
}

.authorization-btn:hover, .authorization-btn:focus {
    color: #fff !important;
    background: lightskyblue !important;
    box-shadow: none;
    font-weight: 700 !important;
    border: none;

}

.authorization-btn:hover {
    color: #fff !important;
    background: lightskyblue !important;
    box-shadow: none;
}


.form-registration-costume {
    width: 100%;
    max-width: 430px;
    /* height: 430px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width:768px) {
    .form-registration-costume {
        width: 430px !important;
        /* height: 400px !important; */
    }

}

.mobile-logo {
    margin-bottom: 10px;
}

.mobile-logo img {
    max-width: 200px;
    width: 100%;
}

@media screen and (min-width:768px) {
    .mobile-logo {
        display: none !important;
    }
}

.authorization-subtitle {
    font-size:28px;
    font-weight:700; 
    color:#484646;
    margin-bottom:30px;
    display: none;
    text-align: center;
}

.authorization-subtitle.active {
    display: block;
}

@media screen and (min-width:768px) {
    .authorization-subtitle {
        font-size:34px;
    }
}


.input-fix-number {
    width: 45px !important;
    max-width: 45px !important;
    -moz-appearance: textfield;
}

.input-fix-number::-webkit-inner-spin-button,
.input-fix-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-fix-value {
    width: 60px !important;
    max-width: 60px !important;
    -moz-appearance: textfield;
    margin: 0 auto;
}

.input-fix-value-number {
    width: 60px !important;
    max-width: 60px !important;
    -moz-appearance: textfield;
    margin: 0 auto;
    padding: 0.3vh 0.4vh !important;
}

.input-fix-value::-webkit-inner-spin-button,
.input-fix-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.reset-wrapper {
    margin:  auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding:  0 20px;
}

.reset-logo {
    max-width: 300px;
    margin-bottom: 50px;
}

.reset-logo-mobile {
    max-width: 300px;
    margin-bottom: 50px;
}

@media screen and (min-width:768px) {
    .reset-logo {
        position: absolute;
        max-width: 300px;
        top: 40px;
        left: 40px;
    }

}

.reset-wrapper form , .reset-wrapper a {
    position: relative;
    z-index: 10;
}

.reset-wrapper a:hover {
    color: #fff;
}

.reset-wrapper::before {
    content: "";
    top: 0;
    left: -437px;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: url(../images/bg-sto.png);
    background-repeat: no-repeat;
    background-position: 38px 127px;
    transform: rotateZ(63deg);
    background-size: 100%;
}


.reset-wrapper::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 100%;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    background: url('../images/blur-0002.png');
    background-repeat: no-repeat;
    z-index: 1;
}

.reset-label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.reset-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}

.reset-subtitle {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.reset-description {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

@media (max-width:768px) {
    .reset-wrapper::before {
       display: none;
    }

    .reset-title {
        font-size: 26px;
    }
    
    .reset-subtitle {
        font-size: 18px;

    }
    
    .reset-description {
        font-size: 14px;
    }

}

.reset-wrapper form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.errorlist {
    padding-left: 0px;
}

.errorlist li {
    font-weight: 600;
}
/* */



#alert-wrapper .alert.alert-success {
    width: 200px !important;
    padding: 10px !important;
}

#alert-wrapper .alert.alert-success p {
    text-align: center !important;
}

#alert-wrapper .alert {
    margin-bottom: 0px !important;
}

#alert-wrapper .alert-container + .alert-container {
    margin-top: 10px !important;
} 

.alert-unpaid {
    background: #86cefa !important;
    color: #fff !important;
}

@media screen and (max-width:1300px) {
    .orders-search-block  {
        flex: 1;
    }

    .orders-search-block .input-cleaner {
        flex: 1;
    }
}

.unpaid-img {
    display: block;
    width: 100%;
}

.modal-dialog-centered {
    height: 100%;
    display: flex;
    align-items: center;
}

.carousel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.carousel-box {
    width: 100%;
    position: relative;
    overflow-y: auto;
    max-height: 300px;
    padding: 10px;
}

.carousel-box-img {
    margin: 10px 0px;
    margin-right: 10px;
    border-radius: 5px;
    min-width: 80px;
    height: 70px;
    display: block;
    position: relative;
}

.carousel-box-img:hover .carousel-box-img-remove {
    opacity: 1;
}

.carousel-box-img-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
    background: rgba(255, 255, 255, .8);
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: all .3 linear;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.carousel-box-img img {
    scroll-snap-align: center;
    max-width: 80px !important;
    width: 100%;
    height: 100%;
    min-height: 70px;
    display: block;
}

@media (max-width:768px) {
    .carousel-box-img {
        min-width: auto;
    }

    .carousel-box-img img {
        min-height: 40px;
    }
}

.img-popup {
    max-height: 500px !important;
}

.img-popup img {
    max-height: 500px !important;
}

.carousel-arrow {
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
    line-height: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-arrow span {
    width: 14px;
    height: 12px;
    line-height: .5;
}

.add-new-photo {
    width: 80px;
    border:1px solid #c4c4c4;
    height: 70px;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;

    /* margin-bottom: 30px; */
}

/* .add-new-photo {
    
} */

.carousel-left-arrow {
    left: -5px;
}

.carousel-right-arrow {
    right: -5px;
}

.draggable-image {
    cursor: move;
    transition: transform 0.2s;
}

.draggable-image.dragging {
    opacity: 0.5;
}

#chatni {
    display: none;
}

/* Add this to your styles */
@media (max-width: 768px) {
    [draggable="true"] {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    
    #touch-drag-clone {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background-color: white;
    }
    
    .custom-tip {
        position: relative;
    }
    
    .custom-tip-left::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #007bff;
    }
    
    .custom-tip-right::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #007bff;
    }
}

.radio-pay {
  accent-color: black;
}

.imp-payment-type {
    width: 50px;
}

#subscribe-alert {
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}


.opacity {
    opacity: .6;
}

.cw-100 {
    width: 100px !important;
}

.cw-150 {
    width: 150px !important;
}


.cw-170 {
    width: 170px !important;
}

.cw-180 {
    width: 170px !important;
}

.cw-70 {
    width: 70px !important;
}

.cw-20 {
    width: 20px !important;
}

.overflow {
    white-space: nowrap;     
    overflow: hidden;    
    text-overflow: ellipsis; 
    max-width: 0;
    position: relative;
}

.overflow-width {
    white-space: nowrap;     
    overflow: hidden;    
    text-overflow: ellipsis; 
    position: relative;
    width: 90%;
}

.m-cw-250 {
    min-width: 250px;
}

.input-red {
    background: #ffc6c5;
}

.alert-warning-absolute {
    position: absolute;
    top: 0px;
    left: 0px;
}

.position-relative {
    position: relative;
}

.fz-16 {
    font-size: 16px;
}