@charset "UTF-8";

/* Переменные */
:root {
    --body: #EFF2FA;
    --blue: #4C87EC;
    --blue-hover: #4c7bd0;
    --green-light: #7CDBB3;
    --green: #27AE60;
    --red: #FE9695;
    --gray: #5E5E5E;
    --orange: #ffb22b;
    --purple: #7460ee;
    --danger: #e36767;
    --container: 1798px;
}

/* Конец - Переменные */
html {
    overflow-x: initial !important;
}

body {
    margin: 0;
    padding: 0 15px 0 calc(70px + 15px);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background-color: var(--body);
    overflow: overlay;
}

@media (max-width: 991px) {
    body {
        padding: 0;
    }
}

#app {
    margin-top: 15px;
}

#app_wrapper {
    display: flex;
    grid-column-gap: 15px;
}

#app_content {
    width: 100%;
}


.custom-scroll {
    overflow-y: overlay;
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 150, 150, 0.5) transparent;
}

.custom-scroll::-webkit-scrollbar {
    height: 12px;
    width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.5);
    border-radius: 5px;
    border: 3px solid transparent;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a.link-dashed {
    border-bottom: 1px dashed var(--blue);
    text-decoration: none !important;
}

a.link-dashed:hover {
    border-bottom: 1px solid var(--blue);
    text-decoration: none !important;
}

.no-scroll {
    overflow: hidden !important;
}

body.no-scroll {
    padding-right: calc(var(--widthScrollBar) + 15px);
}

.icon.danger {
    background-color: var(--danger);
}

textarea {
    font-family: 'Inter', sans-serif
}

/* кнопки */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 9px 15px;
    font-weight: normal;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    width: max-content;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: all 0.1s ease-in-out, transform 0.05s;
}

.btn:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
}

/*.btn:active {*/
/*    transform: scale(0.97);*/
/*}*/

.btn.btn-primary {
    color: #fff;
    background-color: var(--blue);
}

.btn.btn-primary i {
    background-color: #fff;
}

.btn.btn-primary:hover {
    background-color: #4c7bd0;
    color: #fff;
}

.btn.btn-light {
    background-color: #EBF2FF;
    color: var(--blue);
}

.btn.btn-light i {
    background-color: var(--blue);
}

.btn.btn-light:hover {
    background-color: var(--blue);
    color: #fff;
}

.btn.btn-light:hover i {
    background-color: #fff;
}

.btn.btn-light.danger {
    color: #F95F53;
    background-color: #FFF2F1;
    font-weight: 600;
}

.btn.btn-light.danger i {
    background-color: #F95F53;
}

.btn.btn-light.danger:hover {
    color: #fff;
}

.btn.btn-light.danger:hover i {
    background-color: #fff !important;
}

.btn.danger {
    color: #fff;
    background-color: var(--danger);
}

.btn.danger:hover {
    color: #fff;
    background-color: var(--danger);
}

.btn.green {
    color: #fff;
    background-color: var(--green);
}

.btn.green:hover {
    color: #fff;
    background-color: var(--green);
}

.btn.danger {
    color: #fff;
    background-color: var(--danger);
}

.btn.danger:hover {
    color: #fff;
    background-color: #EC4161;
}

.btn.purple {
    color: #fff;
    background-color: var(--purple);
}

.btn.purple:hover {
    color: #fff;
    background-color: var(--purple);
}

.btn.icon-left i {
    margin-right: 5px;
    font-size: 13px;
}

.btn.icon-right i {
    margin-left: 5px;
    font-size: 13px;
}

.btn.btn-outline-primary {
    background-color: #fff;
    color: #30364A;
    border: 1px solid #ccd2d9;
}

.btn.btn-outline-primary i {
    background-color: #30364A;
}

.btn.btn-outline-primary:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.btn.btn-outline-primary:hover i {
    background-color: var(--blue);
}

.btn.btn-outline-primary.danger {
    background-color: #fff;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn.btn-outline-primary.danger:hover {
    background-color: var(--danger);
    color: #fff
}

.btn.btn-square {
    aspect-ratio: 1 / 1;
    padding: 0;
}

.text-color-blue {
    color: var(--blue) !important;
}

.text-color-blue i {
    background-color: var(--blue) !important;
}

.text-color-red {
    color: var(--danger) !important;
}

.text-color-red i {
    background-color: var(--danger) !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(0px * -1);
    margin-right: calc(30px / -2);
    margin-left: calc(30px / -2);
    /*max-width: calc(100% - 330px);*/
}

.row .col {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    align-items: stretch;
    max-width: 100%;
    padding: calc(30px / 2);
}

.card-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem 1.15rem;
    min-width: 0;
    height: max-content;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, .125);
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(76, 135, 236, 0.15);
}

.card-body.lr-size {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(76, 135, 236, 0.15);
    border-radius: 10px;
    margin-top: 20px;
}

.card-body .title-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-body .title-card .right-col {
    display: flex;
    align-items: center;
}

.card-body .title-card .title {
    font-weight: 500;
    font-size: 15px;
    color: #455A64;
}

.card-body .title-card .left-col {
    margin-right: 30px;
}

.card-body .title-card .right-col {

}

.card-body .title-card .desc {
    font-weight: normal;
    font-size: 14px;
    color: #A1AAB2;
    margin-top: 2px;
}

.uk-dropdown {
    /*position: fixed !important;*/
    width: max-content !important;
    background: #fff;
    box-shadow: 0 7px 30px rgba(110, 130, 160, 0.35);
    border-radius: 10px;
    padding: 10px 0;
}

.uk-dropdown a {
    text-decoration: none !important;
}

.uk-dropdown li {
    display: flex;
    align-items: center;
    /*padding: 10px 15px;*/
    font-size: 14px;
    cursor: pointer;
    color: #30364A;
}

.uk-dropdown hr {
    margin: 0;
}

.uk-dropdown li:hover,
.uk-dropdown li:hover a,
.uk-dropdown > a:hover,
.uk-dropdown li:hover button {
    background-color: #F2F4F8;
    color: var(--blue);
    cursor: pointer;
}

.uk-dropdown li:hover i.icon {
    background-color: var(--blue);
}

.uk-dropdown li i.icon {
    font-size: 20px;
    margin-right: 20px;
    background-color: #6C6C6C;
}

.uk-dropdown li .icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 20px;
}

.uk-dropdown li a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 13px;
    color: #30364A;
}

li.color-red,
li.color-red a {
    color: var(--danger) !important;
}

li.color-red i {
    background-color: var(--danger) !important;
}

li.color-red:hover i {
    background-color: var(--danger) !important;
}

.uk-dropdown li button {
    padding: 0;
    font-size: 14px;
    color: #6C6C6C;
    background-color: transparent;
    border: none;
}


/* Модальное окно */
.uk-modal.uk-open {
    display: flex !important;
    background-color: rgba(37, 45, 57, 0.5);
    z-index: 1300;
}

.uk-modal .uk-modal-dialog {
    width: min-content;
    min-width: 400px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 0;
    height: max-content;
    margin: auto;
}

.uk-modal .uk-modal-dialog.modal-toggle-hide > .header {
    border: none !important
}

.uk-modal .uk-modal-dialog.modal-toggle-hide > .header i {
    display: none;
}

.uk-modal .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    border-bottom: 1px solid #EFEFF5;
}

.uk-modal .header .title {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.uk-modal .header .icon.close {
    cursor: pointer;
}

.uk-modal .header .icon.close:hover {
    background-color: var(--blue);
}

.uk-modal .content-modal {
    padding: 30px 30px 0;
}

.uk-modal .content-modal .confirmation-content {
    display: grid;
    justify-content: center;
    text-align: center;
}

.uk-modal .content-modal .confirmation-content img {
    margin: 0 auto;
    margin-bottom: 20px;
}

.uk-modal .content-modal .confirmation-content i {
    margin: 0 auto;
    font-size: 120px;
    background-color: var(--danger);
    margin-bottom: 20px;
}

.uk-modal .content-modal .confirmation-content .title {
    font-size: 16px;
}


.G-modal-delete .modal-header,
.G-modal-delete .modal-footer {
    border: none !important;
}

.G-modal-delete .modal-content {
    padding-top: 0 !important;
}

.G-modal-delete .confirmation-content {
    display: grid;
    justify-content: center;
    text-align: center;
}

.G-modal-delete .confirmation-content img {
    margin: 0 auto;
    margin-bottom: 20px;
}

.G-modal-delete .confirmation-content .icon {
    margin: 0 auto;
    font-size: 120px;
    background-color: var(--danger);
    margin-bottom: 20px;
}

.G-modal-delete .confirmation-content .title {
    font-size: 16px;
}

.G-modal-delete .modal-footer .btn {
    flex: 1;
}

.G-modal-delete .modal-footer .cancel {
    color: var(--danger);
    background-color: rgba(233, 86, 86, 0.1);;
}

.G-modal-delete .modal-footer .submit {
    background-color: var(--danger);
}


.G-modal-confirm .modal-header,
.G-modal-confirm .modal-footer {
    border: none !important;
}

.G-modal-confirm .modal-content {
    padding-top: 0 !important;
}

.G-modal-confirm .confirmation-content {
    display: grid;
    justify-content: center;
    text-align: center;
}

.G-modal-confirm .confirmation-content img {
    margin: 0 auto;
    margin-bottom: 20px;
}

.G-modal-confirm .confirmation-content .icon {
    margin: 0 auto;
    font-size: 120px;
    background-color: var(--danger);
    margin-bottom: 20px;
}

.G-modal-confirm .confirmation-content .title {
    font-size: 16px;
}

.G-modal-confirm .modal-footer .btn {
    flex: 1;
}

.G-modal-confirm .modal-footer .submit {
    color: #fff;
    background-color: var(--blue) !important;
}

.G-modal-confirm .modal-footer .cancel {
    background-color: #EBF2FF !important;
    color: var(--blue);
}


.uk-modal .content-modal .index-input {
    width: 100%;
    height: 50px;
    border: 1px solid var(--blue);
    border-radius: 5px;
    font-size: 20px;
    line-height: normal;
    padding: 0 10px;
    margin-bottom: 30px;
}

.uk-modal .content-modal .container-parameters {
    display: grid;
    grid-gap: 10px;
    padding: 0 10px;
}

.uk-modal .content-modal .container-parameters .item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.uk-modal .content-modal .container-parameters .item .title {
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #7C7C7C;
}

.uk-modal .content-modal .textarea-block {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 16px;
    font-weight: normal;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.02em;
    background: rgba(244, 246, 249, 0.8);
    color: #000;
    resize: none;
    transition: all 0.2s;
}

.uk-modal .content-modal .textarea-block:focus {
    border-color: var(--blue);
}

.uk-modal .content-modal .textarea-block::placeholder {
    color: #7C7C7C !important;
}

.uk-modal .content-modal .textarea-block::placeholder {
    color: #5E5E5E;
}

.option-grid .row-container {
    display: grid;
    align-items: center;
    margin-bottom: 20px;
}

.option-grid .quicks label {
    display: flex;
    align-items: center;
}

.option-grid .row-container:hover > p.title {
    color: var(--blue);
}

.option-grid:last-child label {
    margin-bottom: 0;
}

.option-grid .row-container > .title:empty {
    display: none;
}

.option-grid[valid] .title:after {
    content: '*';
    color: var(--danger);
    margin-left: 5px;
}

.option-grid input[type="text"],
.option-grid select {
    width: 100%;
    min-width: 200px;
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
    background: rgba(244, 246, 249, 1);
    border-radius: 8px;
    letter-spacing: 0.02em;
    border: 1px solid #e9e9e9;
    cursor: pointer;
    transition: 0.05s !important;
    z-index: 1;
}

.option-grid input.error {
    border: 1px solid red !important;
}


input:hover,
select:hover {
    border: 1px solid #b0c0d1;
}

input:focus,
select:focus {
    border: 1px solid var(--blue) !important;
    background: rgba(244, 246, 249, 1);
    z-index: 1;
}

.option-grid input.input-arrow {
    background-image: url(/assets/icons/arrow-bottom.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: calc(100% - 10px) center;
    padding-right: 30px;
}

.option-grid textarea {
    width: 100%;
    min-height: 100px;
    font-size: 15px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(244, 246, 249, 0.8);
    color: #000;
    border: 1px solid #e9e9e9;
    cursor: pointer;
    transition: all 0.2s;
}

.option-grid textarea:focus {
    border: 1px solid var(--blue) !important;
    background: rgba(244, 246, 249, 0.3);
}

.option-grid textarea:hover {
    border: 1px solid #b0c0d1;
}


.option-grid.error-required input,
.option-grid.error-required textarea,
.option-grid.error-required .select2.select2-container {
    border-color: red;
}

.option-grid.error-required label > .title {
    color: red;
}

.select2 {
    min-width: 200px;
    width: 100% !important;
    height: 40px;
    background: rgba(244, 246, 249, 0.8);
    border: 1px solid #e9e9e9;
    padding: 0 34px 0 16px !important;
    border-radius: 10px;
    transition: 0.1s !important;
}

.select2-container .check-stroke {
    opacity: 0;
}

.select2-container .verified .check-stroke {
    background-color: #A1E194 !important;
    opacity: 1 !important;
}

.select2-container--open {
    border-radius: 10px 10px 0 0 !important;
    border-color: var(--blue) !important;
}

.select2-container:hover {
    border-color: #9FB0C1FF;
}

.select2-selection__rendered {
    font-size: 15px !important;
    padding: 0 !important;
}

.select2-selection--single {
    height: 100%;
    display: flex;
    align-items: center;
}

.select2-selection__arrow {
    top: 0 !important;
    right: 10px !important;
    height: 100% !important;
}

.option-grid select.select2-hidden-accessible {
    display: none !important;
}

.uk-modal .modal-content .uk-tab {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-bottom: 20px;
}

.uk-modal .modal-content .uk-tab li {
    padding: 0 !important;
}

.uk-modal .modal-content .uk-tab li.uk-active a {
    color: var(--blue) !important;
    border-color: var(--blue) !important;
}

.uk-modal .modal-content .uk-tab li a {
    padding: 0 10px 10px !important;
    text-transform: initial !important;
}

.uk-modal .modal-content .input-search {
    width: 100%;
    background: #FAFAFA;
    border: 1px solid #4C87EC;
    border-radius: 10px;
    padding: 0 20px;
    height: 40px;
    color: #000;
    font-size: 16px;
}

.select2-search__field {
    outline: none !important;
    border-radius: 0.85rem !important;
    border: 1px solid #e7e7e7 !important;
    padding: 0.5rem 1rem !important;
}

.select2-dropdown {
    z-index: 1301 !important;
}

.select2-dropdown--below {
    background: #FFFFFF !important;
    box-shadow: 0 20px 50px 0 rgba(82, 63, 105, 0.2);
    border-radius: 0 0 10px 10px !important;
    border: 1px solid #d5d5d5 !important;
    border-top: none !important;
}

.select2-search--dropdown {
    padding: 10px 14px !important;
}

.select2-results__option {
    padding: 8px 13px !important;
}

.select2-results__option:hover {
    background: #EBEDF3 !important;
    color: #3F4254 !important;
}

.uk-modal .footer-modal {
    position: sticky;
    bottom: -50px;
    z-index: 99999;
    display: flex;
    justify-content: flex-end;
    align-content: center;
    padding: 30px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    /*border-top: 1px solid #EFEFF5;*/
}

.uk-modal .footer-modal.center {
    justify-content: center;
}

.uk-modal .footer-modal .btn {
    margin-right: 10px;
}

.uk-modal .footer-modal .btn:last-child {
    margin-right: 0;
}

.uk-modal .title-content {
    font-weight: 500;
    font-size: 28px;
    line-height: 33px;
    text-align: center;
    color: #000000;
    margin: 30px 0;
}

.modal-content .content-task-info {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.modal-content .gris-task-desc .title {
    font-size: 14px;
    color: #7C7C7C;
    margin-bottom: 3px;
}

.modal-content .gris-task-desc .desc {
    font-weight: 500;
    font-size: 14px;
    color: #000000;
}

.modal-content .gris-task-desc .desc span {
    color: var(--blue);
    cursor: pointer;
}

.modal-content .gris-task-desc .desc span:hover {
    text-decoration: underline;
}

.uk-modal .close-modal-task {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.uk-modal .close-modal-task i {
    background-color: #444;
}

.select2 .selection {
    display: block;
    height: 100% !important;
}

.select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100% !important;
}

.select2-selection {
    height: 100% !important;
    background-color: transparent !important;
    border: none !important;
}

.select2-selection input {
    width: 100% !important;
}

.select2-selection input::placeholder {
    color: #000 !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid transparent !important;
    border-radius: 5px;
}

.select2-container--focus .select2-selection--multiple {
    border-color: var(--blue) !important;
}

.select2-selection .select2-selection__choice {
    display: flex;
    align-items: center;
    border-radius: 50px !important;
    background-color: #F3F6F9 !important;
    color: #000 !important;
    border: none !important;
    padding: 3px 10px !important;
}

.select2-selection .select2-selection__choice .select2-selection__choice__remove {
    color: var(--red);
    line-height: 0;
    font-size: 18px;
}

.grid-label-two fieldset {
    background: #FCFCFC;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    padding: 20px;
}

.grid-label-two fieldset.hidden {
    display: none;
}

.grid-label-two fieldset legend {
    font-size: 13px;
    color: var(--blue)
}

.grid-label-two fieldset ul li {
    justify-content: space-between;
}

.grid-label-two fieldset ul li i.trash {
    background-color: var(--danger);
}

.grid-label-two fieldset ul li i {
    min-width: 16px;
    margin-left: 10px;
}


/* Уведомления */

.uk-notification {
    border-radius: 10px;
    z-index: 9999;
}

.uk-notification-message {
    padding: 0;
    background: transparent;
}

.uk-notification-message .container.success {
    background: var(--green-light);
}

.uk-notification-message .container.mistake {
    background: var(--red);
}

.uk-notification-message .container.alert {
    background: #FAB24C;
}

.uk-notification-message .container {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

.uk-notification-message .container i.icon {
    font-size: 25px;
    background-color: #fff;
    margin-right: 20px;
}

.uk-notification-message .container .text {
    font-size: 15px;
    letter-spacing: 0.04em;
}

/* Конец- Уведомления */


.right-menu {
    position: fixed;
    z-index: 1300;
    min-width: 200px;
    max-width: 300px;
    padding: 3px 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: 0px 6px 25px rgba(0, 7, 22, 0.06);
    -webkit-transform: translate(0, 15px) scale(.95);
    transform: translate(0, 15px) scale(.95);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

.right-menu.show-menu {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}

.right-menu ul li {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    cursor: pointer;
    color: #6C6C6C;
}

.right-menu ul li.line-top {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.right-menu ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 13px;
    color: #30364A;
}


.right-menu ul li:hover {
    background-color: #F2F4F8;
    color: var(--blue);
}

.right-menu ul li:hover a {
    background-color: #F2F4F8;
    color: var(--blue);
}

.right-menu li:hover i.icon {
    background-color: var(--blue);
}

.right-menu li i.icon {
    font-size: 20px;
    margin-right: 20px;
    background-color: #6C6C6C;
}