:root{
    --menu-module-btn-bgr: #25364c;

    --white: white;
    --black: black;

    --red-rgb: 235, 38, 0;
    --red: #EB2600FF;

    --dark-blue-rgb: 25,36,51;
    --dark-blue: #192433;

    --blue-rgb: 10, 102, 194;
    --blue: #0A66C2FF;

    --btn-color-primary-rgb: 0, 84, 166;
    --btn-color-primary: #0054a6;

    --avatar-bacground-rgb: 146, 157, 171;
    --avatar-bacground: #929dab;

    --light-gray-rgb: 218, 224, 232;
    --light-gray: #DAE0E8FF;

    --icon-gray:#667382;
    --gray: rgb(146, 157, 171);
    --gray2: #e4e4e4;


    --bgr-hdr-table: #f6f8fb;

    --bgr-card-hdr-rgb: 0, 128, 255;
    --bgr-card-hdr: #0080FF;

    --bs-card-cap-bg: #fcfdfe;

    --radius-modal: 8px;
    --radius-btn: 4px;
    --hight-header: 56px;

    --color-table-header-bgr: #f6f8fb;

    --green-succes: #2fb344;
}

:root{
    --bs-backdrop-bg: #00000040;

    --bs-body-font-size: 14px;

    --bs-border-radius: var(--radius-btn);
    --bs-border-radius-sm: var(--radius-btn);
    --bs-border-radius-lg: var(--radius-btn);
    --bs-border-radius-xl: var(--radius-btn);
    --bs-border-radius-xxl: var(--radius-btn);

    --bs-modal-border-radius: var(--radius-modal);


}

html {
    font-size: 14px;
    /*user-select: none;*/
}

.body{
    font-family: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02rem;
    line-height: normal;

    display: flex;
    min-height: 100dvh;
    max-height: 100dvh;

    color: var(--dark-blue);
    background-color: var(--light-gray);
}

.no-user-select{
    user-select: none;
}

h5{
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.iconItem{
    color: var(--btn-color-primary);
}


.d-desktop{display: inherit !important;}
.d-mobile{display: none !important;}

.dropdown-toggle::after{border: none}

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

h2.page-title a{color: black;}
h2.page-title a.headerseparator{font-weight: bold}
h2.page-title {
    display: flex;
    gap: 10px;
    font-weight: bold;
    font-size: 20px;
}

.avatar {
    --avatar-size:2.5rem;
    --avatar-font-size:1rem;
    --avatar-icon-size:1.5rem;
    --avatar-bacground: var(--gray);
    --avatar-color:1.5rem;
    position:relative;
    width:var(--avatar-size);
    height:var(--avatar-size);
    font-size:var(--avatar-font-size);
    font-weight:500;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--dark-blue);
    text-align:center;
    text-transform:uppercase;
    vertical-align:bottom;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background: var(--avatar-bacground) no-repeat center/cover;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(4, 32, 69, 0.14);
}

.alert-danger{
    --bs-alert-bg: var(--red);
    --bs-alert-color: var(--red)
}

.alert-success {
    --bs-alert-bg: var(--green-succes);
    --bs-alert-color: var(--green-succes)
}

.alert{
    border: 1px solid rgba(4, 32, 69, .14);
    border-left: .3rem solid var(--bs-alert-bg);
    background-color: var(--white);
    box-shadow: rgba(24,36,51,.04) 0 2px 4px 0;
}

.alert-title {
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--bs-alert-bg);
}

.avatar-xs {
    --avatar-size: 1.25rem;
    --avatar-font-size: 0.625rem;
    --avatar-icon-size: 1rem;
    --avatar-bacground: #f6f8fb;
}
/*#f6f8fb*/
.curPoint{cursor: pointer;}



.leftPanel,
.rightPanel{
    flex: 0 0 64px;
    max-width: 384px;
}

.mainPage{
    flex: 1 1 auto;
    display: flex;
    justify-content: left;
    height: 100dvh;
    overflow-y: scroll;
    padding: 20px 10px;
}

.badge:empty{padding: 0}

.badge.point{display: flex; width: 5px; height: 5px;}

.bg-gray{background: var(--light-gray)}
.bg-black{background: var(--black)}
.bg-red{background: var(--red)}

.badge-notification {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%,-50%);
    z-index: 1;
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding: 1px;
}

.container{max-width: unset !important}

.nav.nav-tabs .nav-link{
    --bs-nav-link-hover-color: black;
    --bs-nav-link-color: rgb(102, 115, 130);
    font-size: 14px;
    font-weight: 400;
    min-height: 2.5rem;
}

.nav.nav-tabs .nav-link.active{
    --bs-nav-link-color: black;
}

.card-header .card-title{font-size: 20px;margin: 0}
.card-header {
    font-size: 20px;
    margin: 0;
    background-color: rgba(var(--bgr-card-hdr-rgb), 0.03);
}

.dropdown-item{font-size: 14px}

.dropdown-item:active{
    --bs-dropdown-link-active-color: var(--black);
    --bs-dropdown-link-active-bg: var(--white);
}

.form-switch  {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    flex-wrap: nowrap;
}

.form-switch .form-check-input {
    height: 1.5rem;
    width: 3rem;
    margin: 0;
}

.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

.tag{
    border: 1px solid var(--light-gray);
    display: inline-flex;
    align-items: center;
    height: 2rem;
    border-radius: var(--radius-btn);
    padding: 0 .5rem;
    background: var(--white);
    gap: .5rem;
}

/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-------------------------------МОДАЛЬНИК-------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
.modal{
    --bs-modal-border-radius: var(--radius-modal);
    --bs-modal-inner-border-radius: var(--radius-modal);
    --bs-modal-border-color: var(--light-gray);
}

.modal-content{
    border: none;
}

.modal-header{
    padding: 0 4rem 0 2rem;
    min-height: 4rem;
    align-items: center;
    background: #192433;
    color:white;
}
.modal-header .modal-title{
    font-weight: 600;
    font-size: 16px;
}

.modal-header .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    height: 4rem;
    margin: 0;
    padding: 0;
    z-index: 10;
    color: white;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
}

.modal-body{
    padding: 1.5rem;
    font-size: 1rem;
}

.modal-backdrop {
    --bs-backdrop-bg: var(--dark-blue);
    --bs-backdrop-opacity: 0.24;
    background-color: var(--bs-backdrop-bg);
    backdrop-filter: blur(4px);
}

#modalDialog{
    backdrop-filter: blur(4px);
}

.tag.simlink.sendmessage{
    background: rgb(0, 84, 166) !important;
    color: #fff;
    height: 30px;
    width: 38px;
    padding: 12px;
    border: 0;
    position: relative;
}

.tag.simlink.sendmessage i{;
    color: #fff !important;
}

/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

.btn:hover{
    --bs-btn-border-color: var(--black);
}

.groupBtnState{flex-wrap: nowrap}
.groupBtnState .btn{text-wrap: nowrap}

.btn{
    --bs-btn-border-color: var(--light-gray);
    padding: 0.5625rem 1rem;
    border: 1px solid var(--bs-btn-border-color);
}

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

.btn-primary:hover,
.btn-primary{
    --bs-btn-bg: var(--blue);
    --bs-btn-bgr: var(--blue);
    --bs-btn-border-color: none;
}

/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

.ts-wrapper{
    padding: 0;
}

.ts-control{
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: none;
    gap: 3px;
    min-height: 2.4rem;
    font-size: 1rem;
}

.ts-wrapper.single .ts-control .item .remove {
    display: none;
}
.ts-wrapper.single .ts-control .item {
    border: none;
}


.ts-wrapper.multi .ts-control .item,
.ts-wrapper .ts-control .item{
    background: none;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-btn);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left: none;
    margin-left: 0;
}

.ts-dropdown{
    font-size: 1rem;
}
.ts-dropdown .optgroup-header{
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
    color: var(--icon-gray);
    background: var(--light-gray);
}


.select-multi{
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-btn);
    padding: 0.7rem;
    position: relative;
}

.select-multi .sel-cont{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.select-multi .sel-cont .item{
    background: none;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-btn);
    padding: 5px;
}

.select-multi.show .form-select{
    display: block;
}

.select-multi .form-select{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
}

.col-form-label.required::after, .form-label.required::after {
    content: "*";
    margin-left: .25rem;
    color: #d63939;
}

.input-group-text {
    color: var(--icon-gray);
}

.selIcon{
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}


 .fade-enter-active, .fade-leave-active {
     transition: opacity 0.3s ease;
 }
.fade-enter, .fade-leave-to {
    opacity: 0;
}



.modal.show{
    display: block;
}


.tableAndPanel{
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: calc(100dvh - 80px);
    --bs-gutter-x: 0;  /*  параметр отступа для строки в бутстрапе  */
}

.right_panel .nav.nav-pills{
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}
.right_panel .card-header{
    min-width: 60px;
    padding: 0;
    padding-top: 5px;
}

.tableAndPanel .right_panel .card{
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
}


.right_panel .card .nav-item{
    display: flex;
    justify-content: center;
}


.btnSidebar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 41px;
}


.checker {
    color: var(--btn-color-primary) !important;
    height: 1rem;
    width: 1rem;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
    cursor: pointer;
    position: relative;
    font-size: 17px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .checker:before {content: "\f096";}

 .gray .checker:before,
 .checker.gray:before {
    content: "\f14a";
    color: var(--btn-color-primary) !important;
}

 .checked .checker:before,
 .checker.checked:before {
    font-weight: 900;
    content: "\f14a";
}

.listRowsCheckAll {
    display: inline-block;
    margin: 2px 10px 2px 16px;
}

.listRowsCheckAll .checker {
    color: var(--btn-color-primary) !important;
    height: 6px;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
    display: inline-block;
    padding: 2px 0px;
    cursor: pointer;
    position: relative;
    font-size: 17px;
    font-style: normal;
}

.listRowsCheckAll .checker:before {
    bottom: 3px;
    display: inline-block;
    content: "\f096";
    position: absolute;
    top: -6px;
    left: -6px;
}

.listRowsCheckAll .checker.grey:before {
    content: "\f14a";
}

.listRowsCheckAll .checker.checked:before {
    font-weight: 900;
    content: "\f14a";
}