@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    --be-color-value: #000;
    --be-color-default: #ced4da;
    --be-color-hover: #0272cf;
    --be-color-focus: #00569D;
    --be-color-error: #ff0000;
    --be-color-title: #000;
    --be-color-background: #f4f6fa6b;

    --be-error-font-size: 12px;
    --be-control-label-font-size: 14px;
    --be-control-value-font-size: 14px;

    --be-control-border: 2px solid var(--be-color-default);
    --be-control-border-hover: 2px solid var(--be-color-hover);
    --be-control-border-focus: 2px solid var(--be-color-focus);
    --be-control-border-error: 2px solid var(--be-color-error);

    --be-dropzone-border: 2px dashed var(--be-color-default);
    --be-dropzone-border-hover: 2px dashed var(--be-color-hover);
    --be-dropzone-border-error: 2px dashed var(--be-color-error);
    --be-dropzone-border-focus: 2px dashed var(--be-color-focus);
    --be-dropzone-caption-font-size: 18px;
    --be-dropzone-thumb-font-size: 12px;

    --be-border-transition: border-color .1s;
    --be-color-transition: color .1s;
    --be-fill-transition: fill .1s;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0073d1;
    --bs-btn-border-color: #0073d1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0073d1;
    --bs-btn-hover-border-color: #0073d1;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0060af;
    --bs-btn-active-border-color: #0073d1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0073d1;
    --bs-btn-disabled-border-color: #0073d1;
}

.btn-outline-primary {
    --bs-btn-color: #0073d1;
    --bs-btn-border-color: #0073d1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0073d1;
    --bs-btn-hover-border-color: #0073d1;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0073d1;
    --bs-btn-active-border-color: #0073d1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}

.pagination {
    --bs-pagination-active-bg: #0073d1;
    gap: 2px;
}

.pagination .page-link {
    color: #000;
    border: 1px solid #bedeff;
    border-radius: 5px;
}

.pagination .disabled .page-link {
    color: #66666666;
    background: #fff;
}

.pagination .page-link:focus {
    box-shadow: none !important;
}

.pagination .active .page-link {
    color: #fff;
}

.pagination .page-link:hover {
    background-color: #f8fafe;
}

.pagination .active .page-link:hover {
    color: #fff;
    background-color: #0073d1;
}

.pagination .page-link i {
    font-size: 12px;
}


.dropdown-menu {

    border-radius: 5px;
    border: none;
    box-shadow: rgba(58, 59, 69, 0.15) 0px 0.15rem 1.75rem 0px !important;
}

.form-control:focus {
    box-shadow: none;
}

.form-select:focus {
    box-shadow: none;
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230073d1'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230073d1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type=radio] {
    background-color: transparent;
}

.form-check-input[type=checkbox] {
    background-color: transparent;
}

.form-check-input:focus {
    box-shadow: none;
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230073d1'/%3e%3c/svg%3e")
}

body {
    background-color: #b0bdd633;
}

.header {
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15) !important;
    display: flex;
    background-color: #fff;
    height: 3.375rem;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 5px 0px;
    align-items: center;
    position: relative;
}

.header>.row {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.globalsearch {
    border-radius: 25px !important;
    padding-left: 18px !important;
}

.globalsearchwrapper {
    position: relative;
    width: 100%;
}

.globalsearchwrapper svg {
    width: 17px;
    position: absolute;
    right: 20px;
    top: 12px;
}

.pagewrapper {
    display: flex;
    max-width: 100vw;
    min-width: 320px;
}

.logo_wrapper {
    padding: 20px 20px;
}

.sidebar {
    width: 200px;
    min-height: 100vh;
    color: #fff;
    overflow-x: hidden;
    flex-shrink: 0;
}

.sidebar .navbar-nav {
    width: 200px;
}

.sidebar .nav-link {
    padding: 10px 20px;
}

.sidebar .nav-link:hover {
    background: #00000029;
}

.bg-gradient-primary {
    background-color: #4e73df;
    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    background-size: cover;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.accordion {
    overflow-anchor: none;
}

.sidebar-dark .nav-item .nav-link {
    color: rgba(255, 255, 255, .8);
}

.sidebar-dark .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.caption {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .caption {
        flex-direction: column;
    }
}

.page-header {
    padding-bottom: 40px;
}

.breadcrumb {
    font-size: 14px;
}

.caption_data {
    width: 100%;
}

.caption_logo {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;

}

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

.caption_data .title {
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.caption_data .title .external_link {
    text-decoration: none;
    color: #666;
    font-size: 16px;
}

.caption.panel .caption_data .title .external_link {
    color: #F17400;
}

.panel hr {
    border-color: #bedeff;
}

.caption_data .description {}

.caption_controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
}


@media (max-width: 768px) {
    .header {
        padding: 0px;
    }

    .sidebar {
        width: 0px;
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        z-index: 2;
        transition: width .2s;
    }

    .sidebar.show {
        width: 200px;
    }

    .sidebar_pattern {
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        z-index: 1;
        background: #00000029;
        opacity: 0;
        transition: opacity .2s;
        pointer-events: none;
    }

    .sidebar_pattern.show {

        opacity: 1;
        pointer-events: all;
    }

}

.content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.menubtn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.menubtn a {
    text-decoration: none;
}

.content {
    padding: 10px;

}

.user-nemu-dropdown .dropdown-toggle {
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    row-gap: 5px;
}

.user-nemu-dropdown:hover .dropdown-toggle {
    background-color: #00000007;
}

.user-nemu-dropdown .dropdown-toggle.show {
    background-color: #00000007;
}

.user-node {
    display: flex;
    gap: 10px;
    align-items: center;
}




@media (max-width: 768px) {
    .user-node .user-name {
        display: none;
    }

    .content {
        width: 100vw;
    }

    .content-wrapper {
        width: 100vw;
    }
}

.user-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.panel {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.shadow {
    box-shadow: 0 4px 24px #0000000d, 0 2px 8px #0000000d;
}

.shadow-hover {
    transition: box-shadow .3s;
}

.shadow-hover:hover {
    box-shadow: 0 4px 24px #0000000d, 0 2px 8px #0000000d;
}

.panel-header {
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-radius: 6px 6px 0px 0px;
    justify-content: space-between;
    display: flex;
}

.panel-header-title {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.panel-header-controls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: -10px;
    flex-shrink: 0;
    gap: 10px;
}

.panel-header .pn-btn {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: #666;
}

.panel-header .pn-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.panel.blue.border {
    border: 2px solid #0073d1 !important;
}

.panel.blue .panel-header {
    background: #0073d1;
    color: #fff;
}

.panel.blue .pn-btn {
    color: #fff;
}


.panel.orange.border {
    border: 2px solid #F17400 !important;
}

.panel.orange .panel-header {
    background: #F17400;
    color: #fff;
}

.panel.orange .pn-btn {
    color: #fff;
}

@media (max-width: 768px) {
    .panel {
        padding: 10px;
    }
}

.panel-list {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-item {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 10px;
    transition: background-color .3s;
}


.panel-item:hover {
    background-color: #f8fafe;
}

.panel-item .panel-header {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.panel-item-body-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.panel-item-author {
    display: flex;
    justify-content: end;

}

.panel-item-author .user {
    border: 2px solid transparent;
    padding: 3px 4px;
    padding-right: 10px;
    border-radius: 18px;
    transition: border-color .3s, background-color .3s;
}

.panel-item-author .user .user-name {
    color: #666;
    transition: color .3s;
}

.panel-item-author .user:hover {
    border-color: #0073d1;
    background: #fff;
}

.panel-item-author .user:hover .user-name {
    color: #000
}


.panel-item .dropdown-menu i {
    font-size: 14px;
    color: #0073d1;
}

.panel-item-image {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-item-image img {
    max-width: 100%;
}

.panel-item-image-ava {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-color: #efefef;
    border-radius: 100%;
    flex-shrink: 0;
}

.panel-item-image-ava img {
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.panel-item-image-ava svg {
    width: 20px;
    fill: #ccc;
}



.panel-item-body {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.panel-item-name {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    width: 100%;
}

.panel-item-name a {
    color: #000;
    text-decoration: none;
    display: block;
    width: 100%;
}

.panel-item-subname {
    color: #F17400;
    font-size: 14px;
}

.panel-item-subname a {
    color: #F17400;
}

.panel-item-description {
    font-size: 16px;
}

.panel-item-user .panel-item-description {
    font-size: 14px;
    color: #666;
}

.panel-item-user {
    align-items: center;
    padding: 10px 20px;
}


@media (max-width: 768px) {
    .panel-item {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }

    .panel-item-body-group {
        flex-direction: column;
        gap: 20px;
    }

    .panel-item-image {
        width: 100%;
        justify-content: start;
    }

    .panel-item-image img {
        width: auto;
        max-height: 30px;
    }
}


.button_row {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    gap: 10px;
}

.button_row.right {
    justify-content: right;
}



.styled.tab-content {
    padding: 20px;
    background-color: #fff;
    border-radius: 0px 10px 10px 10px;
}

.styled.nav-tabs {
    border-bottom: 0px;
}

.styled .nav-link.active {
    border-color: #fff;
}

.styled.nav-tabs .nav-link {
    color: #000
}

.styled.nav-tabs .nav-link:hover {
    box-shadow: none;
    border-color: transparent
}


.styled .accordion-header button {
    padding: 10px 20px;
}

.styled .accordion-item {
    border-radius: 0px;
}

.styled .accordion-body {
    padding: 10px;
}

.styled .accordion-button:focus {
    box-shadow: none;
}

.styled .accordion-button:not(.collapsed) {
    background-color: #bedeff4f !important;
    border-radius: 0px;
}

.reportgenerator {
    padding-top: 40px;
}

.reportgenerator .groupinner {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
}


.reportgenerator .group h2 {
    font-size: 18px;
}



h2.mini,
h3.mini {
    font-size: 18px;
}


.frow {
    display: flex;
    gap: 20px;
}

.reportgenerator .form-select {
    min-width: 150px;
}

.reportgenerator .calendar {
    border-radius: 3px;
    border: 2px solid #bedeff;
    margin-bottom: 10px;
    margin-top: 10px;
}

.reportgenerator .calendar .datepicker td,
.reportgenerator .calendar .datepicker th {
    width: 60px !important;
}

.group-remove {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.group-remove svg {
    width: 10px;
}

.groups-wrapper .group:first-child .group-remove {
    display: none;
}


.groups-wrapper-white {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-direction: column;
}

.groups-wrapper-white .group {
    padding: 20px;
    border: 2px solid #efefef;
    border-radius: 10px;
    position: relative;
}

.groups-hosting .group:first-child .group-remove {
    display: block;
}

.groups-hosting .group .group-remove {
    display: block;
    right: 0px;
    top: 10px;
}


.form-control {
    border-radius: 3px;
    border: 2px solid #bedeff;
}


.form-group .dropzone {
    border: var(--bs-border-width) dashed var(--bs-border-color);
    border: var(--be-dropzone-border);
    background-color: var(--be-color-background);
    transition: var(--be-border-transition);
    border-radius: 4px;
    width: 100%;
    align-items: center;
    margin-top: 5px;
    display: block;
}


.form-group .dropzone:hover {
    border: var(--be-dropzone-border-hover);
}

.form-group .dropzone.dropmove {
    border: var(--be-dropzone-border-focus);
}

.form-group .dropzone-caption {
    display: flex;
    justify-content: center;
    padding-top: 13px;
    padding-right: 20px;
    padding-bottom: 13px;
    align-items: center;
    cursor: pointer;
    position: relative;
}


.dropzone-btn {
    color: var(--be-color-default);
    font-size: var(--be-dropzone-caption-font-size);
    transition: var(--be-color-transition);
    padding: 10px;
}

.dropzone-btn svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.dropzone-btn svg path {
    fill: var(--be-color-default);
    transition: var(--be-fill-transition);
}

.form-group .dropzone:hover .dropzone-btn,
.form-group .dropzone.dropmove .dropzone-btn {
    color: var(--be-color-hover);
}

.form-group .dropzone:hover .dropzone-btn svg path,
.form-group .dropzone.dropmove .dropzone-btn svg path {
    fill: var(--be-color-hover);
}

.form-group .dropzone input {
    display: none;
}

.form-group .dropzone-thumb {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.form-group .dropzone-file-name,
.form-group .dropzone-file-size {
    font-size: var(--be-dropzone-thumb-font-size);
    color: var(--be-color-value);
    transition: var(--be-color-transition);
}

.form-group .dropzone-file-name {
    word-break: break-all;
    max-width: calc(100% - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form-group .dropzone-file-name span {
    word-break: break-all;
    width: calc(100% - 26px);
}

.form-group .dropzone-file-name svg {
    width: 16px;
    margin-right: 10px;
}


.form-group .dropzone-file-name svg path {
    fill: var(--be-color-focus);
}

.form-group .thumb-error .dropzone-file-name svg path {
    fill: var(--be-color-error);
}


.form-group .dropzone-controls {
    display: flex;
    align-items: center;
}

.form-group .dropzone-file-remove {
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-left: 7px;
}

.form-group .dropzone-file-remove svg {
    vertical-align: top;
}

.form-group .dropzone-file-remove svg path {
    fill: var(--be-color-default);
}

.form-group .dropzone-file-remove:hover svg path {
    fill: var(--be-color-hover);
}

.form-group .thumb-error .dropzone-file-remove svg path {
    fill: var(--be-color-error);
}

.form-group .thumb-error .dropzone-file-name {
    color: var(--be-color-error);
}







.form-group_dropzone .label {
    font-size: 14px;
}

.form-group .dropzone-images {
    min-height: 224px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-group .dropzone-images .dropzone-caption {
    padding: 0px;
}

.form-group .dropzone-list-images {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.form-group .dropzone-list-images .dropzone-thumb {
    width: 200px;
    border: 1px solid #bedeff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-group .dropzone-list-images .dropzone-thumb.dropzone-thumb-loaded {
    border: 1px solid #ccc;
}

.form-group .dropzone-list-images .dropzone-thumb .dropzone-file-name {
    width: 100%;
    text-align: center;
    max-width: 100%;
}

.form-group .dropzone-list-images .dropzone-thumb .dropzone-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.form-group .dropzone-list-images .dropzone-thumb img {
    max-width: 100%;
    max-height: 100%;
}

.form-group .dropzone-list-images .dropzone-thumb .dropzone-file-remove {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
}

.form-group .dropzone-list-images .dropzone-thumb .dropzone-file-size {
    width: 100%;
    text-align: center;
    font-size: 12px;
}

.form-group .dropzone-list-images .dropzone-thumb .dropzone-file-name span {
    width: 100%;
    font-size: 14px;
    ;
}

.form-group .dropzone-thumb.dropzone-thumb-ava {
    border: none !important;
}

.form-group .dropzone-thumb.dropzone-thumb-ava .dropzone-image {
    width: 100%;
    height: auto;
    display: block;
    background-color: #efefef;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 100%;
}

.form-group .dropzone-thumb.dropzone-thumb-ava .dropzone-image.empty {
    display: flex;
}

.form-group .dropzone-thumb.dropzone-thumb-ava .dropzone-image.empty svg {
    width: 100px;
    fill: #ccc;
}

.form-group .dropzone-thumb.dropzone-thumb-ava .dropzone-image img {
    max-width: none;
    max-height: none;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.dropzone-ava {
    transition: border-color .3s !important;
}

.dropzone-file-crop {
    color: #ccc;
    font-size: 14px;
    text-align: center;
    width: 100%;
    margin-top: 5px;
    cursor: pointer;
    transition: color .3s;
}

.dropzone-file-crop:hover {
    color: #a59595;
}

.dropzone-ava .dropzone-btn {
    transition: color .3s !important;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 16px;
}

.dropzone-ava .dropzone-btn svg path {
    transition: fill .3s !important;
}

.dropzone-ava .dropzone-btn svg {
    width: 12px;
}

.form-select {
    border-radius: 3px;
    border: 2px solid #bedeff;
}

.select2-container--default .select2-selection--multiple {
    border-radius: 3px !important;
    border: 2px solid #bedeff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #bedeff4f !important;
    border: 2px solid #bedeff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none !important;
}






.form-check-input {
    border-radius: 3px;
    border: 2px solid #bedeff;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.form-label {
    font-size: 14px;
    margin-bottom: 3px;
}


.tooltip-success .tooltip-inner {
    background-color: #28a745;
    color: #fff;
}

.tooltip-success[data-popper-placement^=right] .tooltip-arrow:before {
    border-right-color: #28a745;
}

/* Стили для ошибочного тултипа */
.tooltip-error .tooltip-inner {
    background-color: #dc3545;
    /* Красный для ошибки */
    color: #fff;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
    background: #0d6efd !important;
}

.table_wrapper table {
    max-width: 100%;
    width: 100% !important;
}

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

.table-wrapper table {
    max-width: 100%;
    width: 100% !important;
}

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


.btn-group .btn {
    line-height: 26px;
}

.dataTables_wrapper .row {
    padding: 0px;
    margin: 0px;
}




.ui-autocomplete .ui-menu-item small {
    color: #666;
}

.ui-autocomplete .ui-menu-item {
    border-bottom: 1px solid #efefef;
}

.ui-helper-hidden-accessible {
    display: none !important;
}


.card,
.card-header {
    border: none;
}

.card-header {
    font-weight: bold;
    background-color: #f3faff;
}


.params .param {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
}

.params .param .param_title {
    flex-shrink: 0;
}

.params .param .param_value {
    display: flex;
    justify-content: end;
    align-items: end;
    text-align: end;
    border-bottom: 1px dashed #ccc;
    width: 100%;
}

.params .param .param_title>span {
    margin-bottom: -1px;
    display: block;
    background: #fff;
    padding-right: 5px;
    line-height: 20px;
    position: relative;

}

.params .param .param_value>span {
    margin-bottom: -1px;
    display: block;
    background: #fff;
    padding-left: 5px;
    line-height: 20px;
    position: relative;
}

.params .down {
    background-color: #ffd6d6 !important;
    color: red;
    position: relative;
    border-bottom: 1px solid #fff;
    padding-top: 3px;
    padding-right: 20px;
}

.params .up {
    background-color: #e0f0e0 !important;
    color: green;
    position: relative;
    border-bottom: 1px solid #fff;
    padding-top: 3px;
    padding-right: 20px;
}

.params sup,
.params sub {
    padding-left: 5px;
    font-size: 10px;
}

.params .up:before {
    content: "";
    position: absolute;
    top: 0px;
    right: 3px;
    border: 5px solid transparent;
    border-bottom: 5px solid green;
}

.params .down:before {
    content: "";
    position: absolute;
    top: 12px;
    right: 3px;
    border: 5px solid transparent;
    border-top: 5px solid red;
}

.nums {
    display: flex;
    align-items: center;
    justify-content: center;
}

.num {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
}

.num .num_value {
    font-weight: bold;
    font-size: 30px;

}

.num .num_title {
    color: #a59595;
    text-align: center;
    line-height: 18px;
    font-size: 16px;
}



.tree-params .param {
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.tree-params .param .sep {
    border-bottom: 1px dashed #ccc;
    flex: auto;
}

.tree-params .param.has_children {
    flex-direction: column;
    gap: 0px;
    padding-bottom: 10px;
}

.tree-params .tree-params {
    padding-left: 20px;
    padding-right: 20px;
    border-left: 1px solid #ccc;
    margin-left: 5px;
}

.tree-params .param.has_children>.sep {
    display: none;
}

.tree-params .param.has_children>.param_value {
    width: 100%;

}

.tree-params .param_value {
    overflow: hidden;
}

.tree-params .param_value {
    white-space: nowrap;
}

.tree-params .param_title span {
    white-space: nowrap;
}


.param_value_aray {
    max-height: 100px;
    overflow: auto;
}

.param_value .linklist {
    margin: 0px;
    max-height: 300px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #0073d138;
    background-color: #f3faff;
    font-size: 12px;
    overflow: auto;
    margin-bottom: 20px;
}

.param_value .linklist li {
    list-style: none;
    margin-bottom: 2px;
}

.param_value .linklist li a {}





table.dataTable thead>tr>th.sorting:before {
    top: 10px;
    color: #666;
    font-size: 10px !important;
}

table.dataTable thead>tr>th.sorting:after {
    color: #666;
    font-size: 10px !important;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
    background: #0073d1 !important;
}

.ext-profiles {
    display: flex;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 10px;
}

.ext-profiles .account {
    background-color: #b0bdd633;

    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 2px solid transparent;
    transition: border-color .3s, background-color .3s;
    gap: 10px;
    position: relative;
}

.ext-profiles .account-content {
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: #000;

}

.ext-profiles .account:hover {
    border: 2px solid #0073d1;
    background-color: #fff;
}

.ext-profiles .account .ava {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #ccc;
    border-radius: 100%;
}

.ext-profiles .account .ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ext-profiles .account-data {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.ext-profiles .account-name {
    font-size: 16px;
    line-height: 16px;
    text-align: center;
}

.ext-profiles .account-email {
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #F17400;
    text-decoration: underline;
}

.account-type-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-type-icon svg {
    width: 100%;
}

.ext-profiles .account .account_remove {
    position: absolute;
    cursor: pointer;
    right: 2px;
    top: 2px;
    display: flex;
    padding: 7px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ext-profiles .account .account_remove svg {
    width: 12px;
}

.accordion-settings {
    border: none;
    padding: 0px;
}

.accordion-settings .accordion-item {
    border: none;
    padding: 0px;
}

.accordion-settings h2 {
    font-size: 16px !important;
}

.accordion-settings .checkboxList {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
}

.accordion-settings .checkboxList .form-check {}

.accordion-settings .checkboxList .form-check label {
    font-size: 14px;
    line-height: 14px;
}

@media (max-width: 768px) {
    .accordion-settings .checkboxList {
        grid-template-columns: auto;
    }
}




.compare-table tr td sup,
.compare-table tr td sub {
    padding-left: 5px;
    font-size: 10px;
}

.compare-table .up {
    background-color: #0080001f;
    color: green;
    position: relative;
}

.compare-table .down {
    background-color: #ff000029;
    color: red;
    position: relative;
}

.alert {
    padding: 10px 20px;
}

.alert_inner {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    font-size: 14px;
}

.alert_inner .spinner-border {
    width: 15px;
    height: 15px;
    border-width: 2px;
}



.input-group .input-group-append .btn {
    border-radius: 0px 5px 5px 0px;
    height: 100%;
}

.form-subcontrols {
    display: flex;
    align-items: end;
    justify-content: end;
    padding-top: 5px;
}

.serviceform .accordion-body {
    padding: 10px 0px;
}

.placeholder-dropdown .dropdown-toggle {
    display: flex;

    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    border-radius: 3px;


    text-decoration: none;
    color: #666;
}

.placeholder-dropdown .dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.placeholder-dropdown .dropdown-toggle:after {
    display: none;
}

.dropdown-menu ul {
    position: absolute;
    display: none;
    right: 100%;
    background-color: #fff;
    z-index: 999;
    min-width: 200px;
    border: 1px solid #ccc;
    padding: 0px;
    margin: 0px;
    top: 0px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.dropdown-menu ul li {
    list-style: none;
    position: relative;
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu ul li a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    padding: 5px 15px;
    display: block;
    cursor: pointer;
}

.dropdown-menu ul li a:hover {
    background-color: #f8f9fa;
}

.dropdown-menu li:hover>ul {
    display: block;
}

.panel .error {
    color: red;
}

.panel .loader {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.service-perort-body {
    position: relative;
    background: #fff;
    min-height: 60px;
}

.service-perort-body table {
    margin-bottom: 0px;
}

.serviceform {
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-bottom: 20px;
    gap: 10px;

}

.serviceform .form-group {
    margin-bottom: 0px;
}

.serviceform .form-group .form-control {
    padding: 5px 7px;
}

.service-perort-body .loader {
    position: absolute;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-report {
    margin-bottom: 60px;
}

.service-report-header h2 {
    font-size: 18px;
}

.service-report {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.service-perort-body .table {
    font-size: 14px;
    line-height: 16px;
}


@media (max-width:549px) {
    .serviceform {
        flex-direction: column;
    }
}

.h100 {
    height: 100%;
}

h1 {
    font-size: 30px;
}

.fpgroup {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: 1px solid #bedeff;
}

.fpgroup_header {
    width: 30%;
}

.fpgroup_body {
    width: 100%;
}

.fpg_input {
    margin-bottom: 10px;
    width: 100%
}



.form-control:disabled {
    background-color: #e9ecef42;
    color: #ccc;
    opacity: 1;
    border: 2px solid #bfbfbf54;
}


.form-select:disabled {
    background-color: #e9ecef42;
    color: #ccc;
    opacity: 1;
    border: 2px solid #bfbfbf54;
}

.fpgroup .fpgroup {
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
}


.fpgroup-builder {
    padding-top: 20px;
    padding-bottom: 40px;
}

.message {}

.message {
    border-width: 2px;
}

.message .message_header {}

.message .message_title {
    font-size: 12px;
    display: flex;
    gap: 20px;
    padding-bottom: 10px;
}

.message .message_entyti {}

.message .message_test {}

.message .message_date {}

.message .message_body {}

.message .message_text {}

.message_extends {
    margin-top: 10px;
}

.message_extends_header {
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.message_extends_body {
    padding-top: 10px;
    display: none;
}

.message_extends_body.show {
    display: block;
}


.texteditor {
    background: #fff;
    border-radius: 5px;

    border: 2px solid #bedeff;
}


.texteditor .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid #bedeff;
}

.texteditor .ql-container.ql-snow {
    border: none;
}

.texteditor .ql-container {
    height: 100px;
}


.modal-header {
    padding: 10px 10px;
    background-color: #f3faff;
    font-size: 18px;
}

.modal-header .modal-title {
    font-size: 18px;
}

.modal-body p {
    margin: 0px;
}

.progress-bar {
    background: #0073d1;
}

.table-header {
    display: flex;
    flex-direction: row;
    padding-left: 12px;
    padding-right: 12px;
    align-items: center;
}

.table-search {
    width: 100%;
}

.table-search label {
    width: 100%;
    display: flex;
    margin-left: -8px;
}

.table-search label input {
    width: 100% !important;
    height: 40px;
    border-radius: 10px;
    padding-left: 17px;
    font-size: 16px;
}

.alert-error {
    border: 2px solid #f1aeb5;
    background-color: #f8d7da;
}





.widget {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    flex-direction: column;
    gap: 20px;
    position: relative;
}



.widget.dark {
    color: #000;
}

.widget .icon {
    width: 58px;
    height: 58px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.widgets {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .widgets.widgets-mobile-scroll {
        overflow-x: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-bottom: 20px;
        justify-content: start;
    }

    .widgets.widgets-mobile-scroll .widget {
        flex-shrink: 0
    }
}


.widgets .widget {
    min-width: 200px;
    min-height: 200px;
}

.widget.topvisor {
    border: 2px solid #34495E;
    transition: background-color .3s, color .3s;
}

.chart-wrapper {
    height: 400px;
}

.widget.topvisor svg path {
    transition: fill .3s;
}

.widget.topvisor:hover svg path {
    fill: #fff
}

.widget.topvisor:hover {
    background-color: #34495e9d;
    color: #fff;
}

.widget.yandex {
    border: 2px solid #FFD811;
    transition: background-color .3s, color .3s;
}

.widget.yandex:hover {
    background-color: #ffd81175;
}


.widget.project {
    border: 2px solid #0073d1;
    transition: background-color .3s, color .3s;
    font-size: 25px;
    text-transform: uppercase;
}

.widget.project:hover {
    background-color: #0073d1;
    color: #fff;
}

.widgets.small {
    gap: 10px;
}

.widgets.small .widget {
    min-width: 150px;
    min-height: 100px;
    font-size: 16px;
    border: 2px solid transparent;
    transition: border-color .3s, background-color .3s;
    align-items: stretch;
}



.widgets.small .widget:hover {
    border: 2px solid #0073d1;
    background-color: #f3faff;
}

.widgets .subtitle {
    font-size: 12px;
    font-weight: normal;
    color: #a59595;
    left: 10px;
    top: 5px;
    position: absolute;
}


.widgetaddit {
    color: #ccc;
    background: #ffffff80;
    border: 2px dashed #ccc !important;
    transition: all .3s !important;
}

.widgetaddit:hover {
    background: #fff !important;
    border: 2px dashed #0073d1 !important;
    color: #000;
}

.widgetaddit .big_icon {
    font-size: 40px;
}


@media (max-width: 768px) {
    .widgets {
        gap: 10px;
        justify-content: center;
    }

    .widgets .widget {
        min-height: 100px;
        font-size: 16px;
        padding: 10px;
    }

    .widget .icon {
        width: 40px;
        height: 40px;
    }

    .widget .icon svg {
        max-width: 100%;
    }

    .widgets.small .widget {
        min-width: 130px;
        padding: 10px;
        font-size: 14px;
        min-height: 75px;
    }

}

.widgets.small .widget .status {
    position: absolute;
    right: 2px;
    top: 2px;
}

.widgets.small .widget .status .spinner-border {
    width: 15px;
    height: 15px;
    border-width: 2px;
}



.controls {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.controls .control-btn {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: #ccc;
    transition: color .2s, background-color .2s;
}

.controls .control-btn:hover {
    background-color: rgba(0, 0, 0, 0.01);
    color: #a59595;
}

.controls .control-status {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls .control-status .spinner-border {
    width: 15px;
    height: 15px;
    border-width: 2px;
}

.controls.mini .control-btn {
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.controls.mini .control-status {
    width: 20px;
    height: 20px;
}


.widgets .widget .widget-header {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: end;
}

.widgets .widget.has-title .widget-header {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.widgets .widget .widget-header-subtitle {
    font-size: 12px;
    font-weight: normal;
    color: #a59595;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.widgets.small .widget-header {
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
}

.widgets.small .has-header {
    justify-content: space-between;
}

.widgets .widget-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.widgets.small .has-header .widget-body {
    padding: 20px;
    padding-top: 5px;
    margin: -20px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.widgets.small a.widget-body {
    text-decoration: none;
    color: #000;
}

.widgets.small .widget-icon {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
}

.widgets.small .widget-icon img {
    max-width: 100%;
    max-height: 100%;
}

.widgets.small .widget-icon svg {
    max-width: 100%;
    max-height: 100%;
}

.widgets.small .widget-description {
    font-size: 12px;
    font-weight: normal;
}

.widgets.small .widget-body-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.widget.big-icon .widget-body {
    align-items: center;
    justify-content: center;
}

.widget.big-icon .widget-body i {
    font-size: 40px;
    color: #666;
}

@media (max-width: 768px) {
    .widgets.small .widget-header {
        margin-top: -12px;
        margin-left: -5px;
        margin-right: -12px;
    }
}

.widget.opacity {
    background: #ffffff80;
}

.widget.solid {
    border-style: solid !important;
    border-color: #ccc !important;
}

.widget.dashed {
    border-style: dashed !important;
    border-color: #ccc !important;
}


.hover-controls .controls {
    opacity: 0;
    transition: opacity .1s;
}

.hover-controls:hover .controls {
    opacity: 1;
    transition: opacity .1s;
}

.user {
    display: flex;
    flex-direction: row;
    gap: 10px;
    text-decoration: none;
    color: #000;
}

.user-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.user-name {
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

.user-email {
    font-size: 14px;
    color: #F17400;
}

.user-post {
    font-size: 14px;
    color: #666;
}

.user-param {}

.user-ava {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #efefef;
    border-radius: 100%;
    flex-shrink: 0;
}

.user-ava svg {
    fill: #ccc;
    width: 20px;
}

.user.mini {
    line-height: 15px;
    align-items: center;
}

.user.mini .user-name {
    font-size: 12px;
}

.user.mini .user-ava {
    width: 25px;
    height: 25px;
}

.user.mini .user-ava svg {
    width: 13px;
}

.user.big {
    gap: 20px;
}

.user.big .user-ava {
    width: 100px;
    height: 100px;
}

.user.big .user-name {
    font-size: 30px;
}

.user.big .user-email {
    font-size: 16px;
    font-weight: 500;
}

.user.big .user-ava svg {
    width: 50px;
}


.user-roles {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.user-role {
    background-color: #bedeff4f;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #666;
    line-height: 14px;
}

.user-content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.dropdown-toggle .user-name {
    font-size: 14px;
    font-weight: normal;
}

.file {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #0073d138;
    background-color: #f3faff;
    text-decoration: none;
}

.file a {
    text-decoration: none;
}

.file .file-header {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.file .file-header-subtitle {
    font-size: 12px;
    font-weight: normal;
    color: #a59595;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.file .file-body {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.file .file-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.file .file-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.file .file-name {
    font-size: 18px;
    color: #000;
}

.file .file-params {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-top: 5px;
}

.file .file-param {
    font-size: 14px;
    color: #666;
}



.files {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.files.tiles {
    flex-direction: unset;
    flex-wrap: wrap;
}

.files.tiles .file {
    width: calc(20% - 10px);
}

@media (max-width: 1300px) {
    .files.tiles .file {
        width: calc(25% - 10px);
    }
}

@media (max-width: 1100px) {
    .files.tiles .file {
        width: calc(33% - 10px);
    }
}

@media (max-width: 768px) {
    .files.tiles .file {
        width: calc(50% - 10px);
    }
}

@media (max-width: 500px) {
    .files.tiles .file {
        width: 100%;
    }
}

.files.tiles .file .file-body {
    flex-direction: column;
}

.files.tiles .file .file-name {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 14px;
}

.files.tiles .file .file-content {
    text-align: center;
}

.files.tiles .file .file-param {
    font-size: 12px;
}



.file.hover,
.files.hover .file {
    transition: border .3s;
}




.file.hover:hover,
.files.hover .file:hover {
    border: 2px solid #0073d1a1;
    background-color: #f3faff;
}

.file.file-type .file-icon {
    background-image: url('/storage/svg/file/default.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.file-button {
    display: inline-flex;
    padding: 5px 15px;
}

.file-button .file-name {
    font-size: 16px;
}

.big-button {
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 10px;
    border: 2px solid #0073d138;
    background-color: #f3faff;
    text-decoration: none;
    transition: border .3s;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    line-height: 46px;
}

.big-button:hover {
    border: 2px solid #0073d1a1;
    background-color: #f3faff;
}

.big-button-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #0060af;
    font-weight: bold;
}

.big-button-icon svg {
    max-width: 100%;
    max-height: 100%;
}




.file.file-type[href$=".ai"] .file-icon,
.file.file-type[data-href$=".ai"] .file-icon,
.file.file-type .file-icon[data-href$=".ai"],
.file.file-type .file-icon[href$=".ai"] {
    background-image: url('/storage/svg/file/AI.svg');
}

.file.file-type[href$=".avi"] .file-icon,
.file.file-type[data-href$=".avi"] .file-icon,
.file.file-type .file-icon[data-href$=".avi"],
.file.file-type .file-icon[href$=".avi"] {
    background-image: url('/storage/svg/file/AVI.svg');
}

.file.file-type[href$=".bmp"] .file-icon,
.file.file-type[data-href$=".bmp"] .file-icon,
.file.file-type .file-icon[data-href$=".bmp"],
.file.file-type .file-icon[href$=".bmp"] {
    background-image: url('/storage/svg/file/BMP.svg');
}

.file.file-type[href$=".crd"] .file-icon,
.file.file-type[data-href$=".crd"] .file-icon,
.file.file-type .file-icon[data-href$=".crd"],
.file.file-type .file-icon[href$=".crd"] {
    background-image: url('/storage/svg/file/CRD.svg');
}

.file.file-type[href$=".csv"] .file-icon,
.file.file-type[data-href$=".csv"] .file-icon,
.file.file-type .file-icon[data-href$=".csv"],
.file.file-type .file-icon[href$=".csv"] {
    background-image: url('/storage/svg/file/CSV.svg');
}

.file.file-type[href$=".default"] .file-icon,
.file.file-type[data-href$=".default"] .file-icon,
.file.file-type .file-icon[data-href$=".default"],
.file.file-type .file-icon[href$=".default"] {
    background-image: url('/storage/svg/file/default.svg');
}

.file.file-type[href$=".dll"] .file-icon,
.file.file-type[data-href$=".dll"] .file-icon,
.file.file-type .file-icon[data-href$=".dll"],
.file.file-type .file-icon[href$=".dll"] {
    background-image: url('/storage/svg/file/DLL.svg');
}

.file.file-type[href$=".doc"] .file-icon,
.file.file-type[data-href$=".doc"] .file-icon,
.file.file-type .file-icon[data-href$=".doc"],
.file.file-type .file-icon[href$=".doc"] {
    background-image: url('/storage/svg/file/DOC.svg');
}

.file.file-type[href$=".docx"] .file-icon,
.file.file-type[data-href$=".docx"] .file-icon,
.file.file-type .file-icon[data-href$=".docx"],
.file.file-type .file-icon[href$=".docx"] {
    background-image: url('/storage/svg/file/DOCX.svg');
}

.file.file-type[href$=".dwg"] .file-icon,
.file.file-type[data-href$=".dwg"] .file-icon,
.file.file-type .file-icon[data-href$=".dwg"],
.file.file-type .file-icon[href$=".dwg"] {
    background-image: url('/storage/svg/file/DWG.svg');
}

.file.file-type[href$=".eps"] .file-icon,
.file.file-type[data-href$=".eps"] .file-icon,
.file.file-type .file-icon[data-href$=".eps"],
.file.file-type .file-icon[href$=".eps"] {
    background-image: url('/storage/svg/file/EPS.svg');
}

.file.file-type[href$=".exe"] .file-icon,
.file.file-type[data-href$=".exe"] .file-icon,
.file.file-type .file-icon[data-href$=".exe"],
.file.file-type .file-icon[href$=".exe"] {
    background-image: url('/storage/svg/file/EXE.svg');
}

.file.file-type[href$=".flv"] .file-icon,
.file.file-type[data-href$=".flv"] .file-icon,
.file.file-type .file-icon[data-href$=".flv"],
.file.file-type .file-icon[href$=".flv"] {
    background-image: url('/storage/svg/file/FLV.svg');
}

.file.file-type[href$=".giff"] .file-icon,
.file.file-type[data-href$=".giff"] .file-icon,
.file.file-type .file-icon[data-href$=".giff"],
.file.file-type .file-icon[href$=".giff"] {
    background-image: url('/storage/svg/file/GIFF.svg');
}

.file.file-type[href$=".html"] .file-icon,
.file.file-type[data-href$=".html"] .file-icon,
.file.file-type .file-icon[data-href$=".html"],
.file.file-type .file-icon[href$=".html"] {
    background-image: url('/storage/svg/file/HTML.svg');
}

.file.file-type[href$=".iso"] .file-icon,
.file.file-type[data-href$=".iso"] .file-icon,
.file.file-type .file-icon[data-href$=".iso"],
.file.file-type .file-icon[href$=".iso"] {
    background-image: url('/storage/svg/file/ISO.svg');
}

.file.file-type[href$=".java"] .file-icon,
.file.file-type[data-href$=".java"] .file-icon,
.file.file-type .file-icon[data-href$=".java"],
.file.file-type .file-icon[href$=".java"] {
    background-image: url('/storage/svg/file/JAVA.svg');
}

.file.file-type[href$=".jpg"] .file-icon,
.file.file-type[data-href$=".jpg"] .file-icon,
.file.file-type .file-icon[data-href$=".jpg"],
.file.file-type .file-icon[href$=".jpg"] {
    background-image: url('/storage/svg/file/JPG.svg');
}

.file.file-type[href$=".mdb"] .file-icon,
.file.file-type[data-href$=".mdb"] .file-icon,
.file.file-type .file-icon[data-href$=".mdb"],
.file.file-type .file-icon[href$=".mdb"] {
    background-image: url('/storage/svg/file/MDB.svg');
}

.file.file-type[href$=".mid"] .file-icon,
.file.file-type[data-href$=".mid"] .file-icon,
.file.file-type .file-icon[data-href$=".mid"],
.file.file-type .file-icon[href$=".mid"] {
    background-image: url('/storage/svg/file/MID.svg');
}

.file.file-type[href$=".mov"] .file-icon,
.file.file-type[data-href$=".mov"] .file-icon,
.file.file-type .file-icon[data-href$=".mov"],
.file.file-type .file-icon[href$=".mov"] {
    background-image: url('/storage/svg/file/MOV.svg');
}

.file.file-type[href$=".mp3"] .file-icon,
.file.file-type[data-href$=".mp3"] .file-icon,
.file.file-type .file-icon[data-href$=".mp3"],
.file.file-type .file-icon[href$=".mp3"] {
    background-image: url('/storage/svg/file/MP3.svg');
}

.file.file-type[href$=".mp4"] .file-icon,
.file.file-type[data-href$=".mp4"] .file-icon,
.file.file-type .file-icon[data-href$=".mp4"],
.file.file-type .file-icon[href$=".mp4"] {
    background-image: url('/storage/svg/file/MP4.svg');
}

.file.file-type[href$=".mpeg"] .file-icon,
.file.file-type[data-href$=".mpeg"] .file-icon,
.file.file-type .file-icon[data-href$=".mpeg"],
.file.file-type .file-icon[href$=".mpeg"] {
    background-image: url('/storage/svg/file/MPEG.svg');
}

.file.file-type[href$=".pdf"] .file-icon,
.file.file-type[data-href$=".pdf"] .file-icon,
.file.file-type .file-icon[data-href$=".pdf"],
.file.file-type .file-icon[href$=".pdf"] {
    background-image: url('/storage/svg/file/PDF.svg');
}

.file.file-type[href$=".png"] .file-icon,
.file.file-type[data-href$=".png"] .file-icon,
.file.file-type .file-icon[data-href$=".png"],
.file.file-type .file-icon[href$=".png"] {
    background-image: url('/storage/svg/file/PNG.svg');
}

.file.file-type[href$=".ppt"] .file-icon,
.file.file-type[data-href$=".ppt"] .file-icon,
.file.file-type .file-icon[data-href$=".ppt"],
.file.file-type .file-icon[href$=".ppt"] {
    background-image: url('/storage/svg/file/PPT.svg');
}

.file.file-type[href$=".ps"] .file-icon,
.file.file-type[data-href$=".ps"] .file-icon,
.file.file-type .file-icon[data-href$=".ps"],
.file.file-type .file-icon[href$=".ps"] {
    background-image: url('/storage/svg/file/PS.svg');
}

.file.file-type[href$=".psd"] .file-icon,
.file.file-type[data-href$=".psd"] .file-icon,
.file.file-type .file-icon[data-href$=".psd"],
.file.file-type .file-icon[href$=".psd"] {
    background-image: url('/storage/svg/file/PSD.svg');
}

.file.file-type[href$=".pub"] .file-icon,
.file.file-type[data-href$=".pub"] .file-icon,
.file.file-type .file-icon[data-href$=".pub"],
.file.file-type .file-icon[href$=".pub"] {
    background-image: url('/storage/svg/file/PUB.svg');
}

.file.file-type[href$=".rar"] .file-icon,
.file.file-type[data-href$=".rar"] .file-icon,
.file.file-type .file-icon[data-href$=".rar"],
.file.file-type .file-icon[href$=".rar"] {
    background-image: url('/storage/svg/file/RAR.svg');
}

.file.file-type[href$=".raw"] .file-icon,
.file.file-type[data-href$=".raw"] .file-icon,
.file.file-type .file-icon[data-href$=".raw"],
.file.file-type .file-icon[href$=".raw"] {
    background-image: url('/storage/svg/file/RAW.svg');
}

.file.file-type[href$=".rss"] .file-icon,
.file.file-type[data-href$=".rss"] .file-icon,
.file.file-type .file-icon[data-href$=".rss"],
.file.file-type .file-icon[href$=".rss"] {
    background-image: url('/storage/svg/file/RSS.svg');
}

.file.file-type[href$=".svg"] .file-icon,
.file.file-type[data-href$=".svg"] .file-icon,
.file.file-type .file-icon[data-href$=".svg"],
.file.file-type .file-icon[href$=".svg"] {
    background-image: url('/storage/svg/file/SVG.svg');
}

.file.file-type[href$=".tiff"] .file-icon,
.file.file-type[data-href$=".tiff"] .file-icon,
.file.file-type .file-icon[data-href$=".tiff"],
.file.file-type .file-icon[href$=".tiff"] {
    background-image: url('/storage/svg/file/TIFF.svg');
}

.file.file-type[href$=".txt"] .file-icon,
.file.file-type[data-href$=".txt"] .file-icon,
.file.file-type .file-icon[data-href$=".txt"],
.file.file-type .file-icon[href$=".txt"] {
    background-image: url('/storage/svg/file/TXT.svg');
}

.file.file-type[href$=".wav"] .file-icon,
.file.file-type[data-href$=".wav"] .file-icon,
.file.file-type .file-icon[data-href$=".wav"],
.file.file-type .file-icon[href$=".wav"] {
    background-image: url('/storage/svg/file/WAV.svg');
}

.file.file-type[href$=".wma"] .file-icon,
.file.file-type[data-href$=".wma"] .file-icon,
.file.file-type .file-icon[data-href$=".wma"],
.file.file-type .file-icon[href$=".wma"] {
    background-image: url('/storage/svg/file/WMA.svg');
}

.file.file-type[href$=".xml"] .file-icon,
.file.file-type[data-href$=".xml"] .file-icon,
.file.file-type .file-icon[data-href$=".xml"],
.file.file-type .file-icon[href$=".xml"] {
    background-image: url('/storage/svg/file/XML.svg');
}

.file.file-type[href$=".xsl"] .file-icon,
.file.file-type[data-href$=".xsl"] .file-icon,
.file.file-type .file-icon[data-href$=".xsl"],
.file.file-type .file-icon[href$=".xsl"] {
    background-image: url('/storage/svg/file/XSL.svg');
}

.file.file-type[href$=".zip"] .file-icon,
.file.file-type[data-href$=".zip"] .file-icon,
.file.file-type .file-icon[data-href$=".zip"],
.file.file-type .file-icon[href$=".zip"] {
    background-image: url('/storage/svg/file/ZIP.svg');
}

.file.file-type[href$=".sqlite"] .file-icon,
.file.file-type[data-href$=".sqlite"] .file-icon,
.file.file-type .file-icon[data-href$=".sqlite"],
.file.file-type .file-icon[href$=".sqlite"] {
    background-image: url('/storage/svg/file/SQLITE.svg');
}

.tribute-container {
    border: 1px solid #d0d0d0;
    background: #f8f8f8;
}

.tribute-container ul {
    background: transparent !important;
    border-radius: 3px;
    overflow: hidden;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .875em;
}

.tribute-container .tribute-item {}

.tribute-container .tribute-item .desc {
    font-size: 12px;
    color: #666;
}


.tribute-container li strong {
    font-weight: normal;
    color: #999;
}

.tribute-container li strong span {
    color: #d63384;
    font-weight: normal;
}

.tribute-container li.highlight {
    background: #e5ebef !important;
}

.tribute-item-icon {
    color: #ccc;
    display: inline-block;
    margin-right: 0px;
    width: 31px;
    text-align: center;
    font-style: italic;
    font-size: 10px;
    vertical-align: middle;
    font-weight: bold;
}

.tribute-tooltip {
    z-index: 99999999999999999 !important;
    opacity: 1;
}

.tribute-tooltip .tooltip-inner {
    background-color: #28a745;
    color: #efefef;
    color: #000 !important;
    background-color: #fff !important;
    opacity: 1;
    min-width: 400px;
    border: 1px solid #ccc;
}

.tribute-tooltip[data-popper-placement^=right] .tooltip-arrow:before {
    border-right-color: #efefef;
}

.tribute-tooltip[data-popper-placement^=left] .tooltip-arrow:before {
    border-right-color: #efefef;
}

.tribute-tooltip[data-popper-placement^=top] .tooltip-arrow:before {
    border-right-color: #efefef;
}

.tribute-tooltip[data-popper-placement^=bottom] .tooltip-arrow:before {
    border-right-color: #efefef;
}


.tribute-doc {
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    min-width: 400px;
}

.tribute-doc-description {
    color: #555;
    margin: 6px 0;
}

.tribute-doc-args {
    list-style-type: none;
    padding-left: 0;
    margin: 4px 0;
}

.tribute-doc-args li {
    margin-bottom: 3px;
}

.tribute-doc-args code {
    font-weight: 500;
    color: #333;
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

.tribute-doc-example {
    margin-top: 6px;
}

.tribute-doc-example code {
    background: #f9f9f9;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 12px;
    display: inline-block;
}


.rule-group {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #0073d138;
    background-color: #f3faff;
    text-decoration: none;
    position: relative;
}

.group-label {

    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-size: 14px;
}

.group-logic {
    background: #0073d1;
    display: inline-block;
    width: 45px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    text-transform: uppercase;

}


.rule {
    display: flex;
    flex-direction: row;
    position: relative;
    background: #fff;
    padding: 5px 5px;
    border-radius: 5px;
}

.rule-group .rule-node:before {
    content: "";
    position: absolute;
    left: -10px;
    width: 10px;
    height: calc(50% + 4px);
    border-color: #CCC;
    border-style: solid;
    top: -4px;
    border-width: 0 0 2px 2px;
}

.rule-group .rule-node:after {
    content: "";
    position: absolute;
    left: -10px;
    width: 10px;
    height: calc(50% + 10px);
    border-color: #CCC;
    border-style: solid;
    bottom: -10px;
    border-width: 0 0 0px 2px;
}

.rule-group .rule-node:last-child::after {
    border-width: 0 0 0px 0px;
}


.rule_status {}

.rule_inner {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

.rule_field {
    word-wrap: break-word;
    font-size: 14px;
    display: inline-block;
    padding-left: 7px;
    padding-right: 7px;
    color: #000;
    background: #efefef87;
    border-radius: 3px;
}

.rule_operator {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
    word-wrap: break-word;
    font-size: 14px;
    display: inline-block;
    padding-left: 7px;
    padding-right: 7px;
    color: #d63384;
    background: #efefef87;
    border-radius: 3px;
}

.rule_value {
    word-wrap: break-word;
    font-size: 14px;
    display: inline-block;
    padding-left: 7px;
    padding-right: 7px;
    color: #000;
    background: #efefef87;
    border-radius: 3px;
}

.rule-group-inner {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    margin-left: 14px;
    gap: 10px;

}

.rule_status {
    font-size: 14px;
}

.rule-group .status-success {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.rule-group .status-success svg {
    width: 15px;
    height: 15px;
    fill: green;
}

.rule-group .status-success span {
    color: green;
}

.rule-groups .status-fail {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.rule-group .status-fail svg {
    width: 15px;
    height: 15px;
    fill: red;
}

.rule-group .status-fail span {
    color: red;
}

.builder-header {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.builder-content.sm .rule-group{padding: 5px;}
.builder-content.sm .group-label{font-size: 13px;}
.builder-content.sm .group-logic{font-size: 13px; line-height: 20px;}
.builder-content.sm .rule_field{font-size: 13px;}
.builder-content.sm .rule{background-color: transparent; padding: 0px; border-radius: 0px;}
.builder-content.sm .rule_operator{    font-size: 13px;}
.builder-content.sm .rule_value{    font-size: 13px;}
.builder-content.sm .rule_status{font-size: 13px;}
.builder-content.sm .rule_status svg{width:12px; height:12px;}
.builder-content.sm .rule-group-inner{gap: 5px;}