@font-face {
    font-family: "Montserrat-VariableFont_wght";
    src: url("../fonts/Montserrat-VariableFont_wght.ttf");
}
*{
    font-family: "Montserrat-VariableFont_wght";
    margin: 0;
    padding: 0;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
*::-webkit-scrollbar{
    display: none;
}
button, a{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.wrapping_block_messagee{
    width: 100%;
    display: flex;
}
#snowflakes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}
.snowflake {
    position: absolute;
    top: -10px;
    width: 20px; /* Установите базовый размер снежинки */
    height: 20px;
    background-image: url('../filles/kindpng_8737.png'); 
    background-size: cover;
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear infinite;
    }

@keyframes fall {
to {
    transform: translateY(100vh);
}
}
.message_block{
    width: 30%;
    margin-left: 20px;
    margin-bottom: 20px;
}
.message_block .message{
    font-size: 16px;
    padding: 10px;
    background: red;
    color: #fff;
}
.message_block .message_access{
    font-size: 16px;
    padding: 10px;
    background: green;
    color: #fff;
}
.formDownloadContacts{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.nameFile{
    padding: 5px;
    width: 100%;
    border: 1px solid #367fa9;
    border-radius: 5px;
    outline: none;
}
.nameFile:focus{
    outline: #367fa9;
}
.wrapping_forms{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.count_phone{
    width: 50%;
    display: flex;
    flex-direction: column;
}
.count_phone span{
    font-size: 40px;
    margin-top: 10px;
    color: green;
}
.count_phone p{
    font-size: 20px;
    margin-top: 40px;
}
.form-group{
    width: 100%;
}
.col-sm-2{
    width: 250px;
}
.all_list_phones{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wr_all_list_phones{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modalWindow{
    width: 40%;
    height: 400px;
    border: 1px solid silver;
    position: absolute;
    z-index: 200;
    background: silver;
    border-radius: 10px;
    left: 22%;
    top: 20px;
    overflow: hidden;
    flex-direction: column;
}
.wr_modal_window{
    width: 100%;
}
.exit{
    right: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: #1faee9;
    padding: 10px;
    color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    float: right;
}

.choicePhone{
    margin-top: 20px;
    width: 100%;
    height: 100%;
    border:none;
    outline: none;
    background: none;
}
.selectpicker{
    margin-top: 20px;
    width: 100%;
    height: 90%;
    outline: none;
    border: none;
    background: none;
}
.selectpicker option{
    font-size: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 10px 0;
    color: #000;
}
/* .buttonRunning{
    padding: 5px;
    border-radius: 5px;
    border: 2px solid #DD4B39;
    font-size: 12px;
} */
.buttonStopping{
    padding: 5px;
    border-radius: 5px;
    border: 2px solid #3965dd;
    font-size: 12px;
}
/* .buttonRunning:hover, .buttonStopping:hover{
    transform: scale(1.1);
} */
.danger{
    background-color: rgba(236, 52, 10, 0.8);
    border:2px solid #EF9400;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.danger .content{
    width: 70%;
}
.danger .icon{
    margin: 10px 0;
}
.danger .close{
    position: absolute;
    right: 0;
    top: 0;
}
#camp_limit, #camp_cps, #camp_retry{
    width: 100px;
}
.wrTableIfo{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.campaigns{
    width: 90%;
}

.box-body{
    width: 100%;
    flex-direction: column;
    display: flex;
    height: 62vh;
}
.box-body-global{
    width: 100%;
    flex-direction: column;
    display: flex;
    height: 82vh;
}
.wrTableIfo{
    width: 70%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;   
}
.search{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.search form{
    margin-right: 20px;
    display: flex;
    align-items: center;
}
.search form input{
    width: 250px;
    margin: 0 10px;
    border: 1px solid #dd4b39;
    outline: none;
    padding: 3px;
    padding-left: 5px;
    font-size: 14px;
    border-radius: 5px;
}
.search form button{
    border: none;
    background: none;
    position: relative;
    right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sess_show{
    display: none;
}
.table .table-bordered .table-striped .dataTable{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.id_table{
    max-width: 80px;
}
.show_table_tableInfo{
    display: none;
}
input[type=checkbox]{
    cursor: pointer;
}
.settings{
    display: flex;
    margin: 10px 20px;
}
.settings .form-check{
    margin: 0 20px;
}
#getMessage{
    padding: 10px;
    background: #e67060;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 10px;
}
#getMessage p{
    font-size: 17px;
}
.modalWindowAccessDelete{
    position: absolute;
    background: #fff;
    top: 40%;
    left: 20%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid silver;
}
.overlay {
    /* display: none; Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный */
    z-index: 1;
}
.modalWindowAccessDelete span{
    margin: 20px;
}
.textError{
    margin-left: 230px;
    height: 93vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(254, 254, 219);
}
.textError svg{
    font-family: "Yeseva One", serif;
    font-weight: 600;
    font-style: normal;

    width: 300px;
    height: 300px;
    margin-top: 40px;
}
.textError span{
    font-size: 50px;
    text-align: center;
}
.content_audio{
    margin-left: 240px;
    height: 92vh;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: hsl(0 0% 50%);
}
.content_audio audio{
    width: 80%;
    background: #b4b0d4;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0 10px 20px;
}
.content_audio audio:hover{
    background: #756eac;
}
.content-wrapper{
    height: 85vh;
}
.blockImage{
    position: absolute;
    margin-top: 10px;
    left: 40%;
}
.blockImage img{
    width: 100%;
    height: 40px;
}
#delAudio{
    display: none;
}
.errorFiles p{
    text-align: center;
    font-size: 40px;
    letter-spacing: 0.2rem;

    font-family: "Yeseva One", serif;
    font-weight: 600;
    font-style: normal;
    margin-top: 80px;
}
.itemElka{
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}
.itemElka img{
    width: 100%;
}
.audioItems{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.audioItems p{
    font-size: 30px;
    margin-top: 10px;
    font-family: "Yeseva One", serif;
}
.delAudio{
    border: none;
}
.form-horizontal{
    height: 60%;
    overflow-y: auto;
}
#addTrunkModalW, #editTrunkModalW{
    border-radius: 20px;
    background: #FDFDFE;
    width: 400px;
    height: 200px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1px 1px 30px rgba(138, 137, 137, 0.695);
    z-index: 99999;
    right: 20px;
    top: 20px;
}
.trunk_input{
    width: 100%;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.trunk_input input{
    width: 90%;
    margin: 10px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 5px;
    font-size: 13px;
}
.trunk_input input:focus{
    outline: none;
    border: 1px solid #0082E9;
}
.join_button{
    width: 100%;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
}
.join_button {
    margin-bottom: 15px;
}
.join_button button{
    width: 25px;
    height: 20px;
    padding: 5px;
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.closeT{
    border: 1px solid red;
    font-size: 28px;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.createT{
    border: 1px solid green;
    font-size: 28px;
    color: green;
    padding-bottom: 5px;
}
.closeT:hover{
    background: red;
    color: white;
}
.createT:hover{
    background: green;
    color: white;
}
.group_btn_trunk button{
    margin: 0 10px;
    color: blue;

}
.group_btn_trunk button:nth-child(even){
    color: red;
}


/*Модальое */
h4 {
font-weight: bold;
color: #fff;
}
.close {
color: #fff;
transform: scale(1.2)
}
.modal-content {
font-weight: bold;
background: linear-gradient(to bottom right,#F87E7B,#B05574);
}

/* .form-control:hover, .form-control:focus {
box-shadow: none;  
border-color: #fff;
} */
.username, .password {
border: none;
border-radius: 0;
box-shadow: none;
border-bottom: 2px solid #eee;
padding-left: 0;
font-weight: normal;
background: transparent;  
}
.form-control::-webkit-input-placeholder {
color: #eee;  
}
.form-control:focus::-webkit-input-placeholder {
font-weight: bold;
color: #fff;
}
.login {
padding: 6px 20px;
border-radius: 20px;
background: none;
border: 2px solid #FAB87F;
color: #FAB87F;
font-weight: bold;
transition: all .5s;
margin-top: 1em;
}
.login:hover {
background: #FAB87F;
color: #fff;
}
.buttonVariable{
width: 100%;
display: flex;
justify-content: space-evenly;
}

.containerBlack{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.blockBlack{
    width: 80%;
    height: 85vh;
    margin: 20px 0;
    overflow-y: scroll;
}
.AddBlackList{
    width: 30%;
}
.dataPhones{
    width: 95%;
    height: 60vh;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #d1cfcf;
    overflow-y: auto;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
    overflow-y: scroll
}
.NoData{
    /* margin-top: 20rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    height: 100%;
    color: rgba(51,51,51, 0.5);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.AddBlackList p{
    color: red;
    margin: 20px 0;
}
.dataPhones tbody tr:hover{
    background: #fcac45;
    cursor: pointer;
}
.contentBlock{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 60px 0;
    font-size: 30px;
}
.modals{
    position: absolute;
    z-index: 10;
    top: 20%;
    display: none;
}
.modalsDel{
    position: absolute;
    z-index: 10;
    top: 20%;
    display: none;
    height: 40vh;
}
.wrappingBlock{
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}
.formingFonts{
    display: flex;
    flex-direction: column;
}
.contentFonts{
    display: flex;
    align-items: center;
    margin: 15px 0;
}
.contentFonts input{
    margin: 0;
    cursor: pointer;
}
.contentFonts label{
    width: 16rem;
    margin-bottom: 0;
    margin-right: 20px;
}
.buttonDontsAccess{
    margin: 20px 0;
}
/* .buttonDontsAccess button{
    width: 15rem;
    padding: 10px;
    background: rgb(43, 176, 43);
    border: none;
    color: #fff;
    border-radius: 5px;
} */
.buttonDontsAccess button {
    width: 15rem;
    padding: 0.5em 1.5em; /* Расстояние от текста до края */
    background: rgb(43, 176, 43);
    color: #fff; /* Белый цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 5px;
    font-size: 1em; /* Размер шрифта */
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3); /* Тень у надписи */
    margin-right: 1rem; /* Расстояние справа */
    transition: background-color 0.4s, box-shadow 0.2s 0.3s; /* Время перехода */
   }
.buttonDontsAccess button:hover {
    background: rgb(43, 176, 43);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(43, 176, 43); /* Тень в виде рамки */
}

.buttonRunning{
    text-align: center;
    width: 10rem;
    padding: 0.5em;
    background: #DD4B39;
    color: #fff; /* Белый цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 5px;
    font-size: 1em; /* Размер шрифта */
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3); /* Тень у надписи */
    margin-right: 1rem; /* Расстояние справа */
    transition: background-color 0.4s, box-shadow 0.2s 0.3s; /* Время перехода */
   }
.buttonRunning:hover {
    background: #DD4B39;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #DD4B39; /* Тень в виде рамки */
}
.block_us{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.block_us nav{
    width: 40%;
    display: flex;
    justify-content: space-evenly;
}
.block_us nav button{
    padding: 10px;
    background: #aec9f9;
    border: none;
    border-radius: 5px;
    color: #fff;
    box-shadow: 1px 2px 2px #8bb1f2;
}
.block_us nav button:hover{
    box-shadow: inset 1px 2px 2px #8bb1f2;
}
.block_us nav button:focus{
    box-shadow: inset 1px 2px 2px #357df8;
    background: #2470f4;

}
.content_us{
    width: 100%;
}
.us_block_online{
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.us_block_offline{
    width: 100%;
    margin-top: 20px;
    padding: 10px;
}
.us_block_privilege{
    width: 100%;
    margin-top: 20px;
    padding: 10px;
}
.us_block_addUsers{
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.us_block_addUsers span{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}
.us_block_addUsers form{
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 295px;
}
.us_block_addUsers form input, .us_block_addUsers form select{
    width: 90%;
    font-size: 13px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 5px;
    outline: none;
    margin: 5px 0;
}
.us_block_addUsers button{
    background: #fff;
    padding: 6px;
    outline: none;
    cursor: pointer;
    border: 1px solid silver;
    border-radius: 5px;
    margin: 10px 0;
}
.us_block_addUsers button:hover{
    background: #2470f4;
    color: #fff;
}
.us_block_addUsers form input:focus{
    border: 1px solid #357df8;
}
.card{
    display: flex;
    flex-direction: column;
    align-items: center;

}
.card img{
    width: 160px;
    height: 160px;
}
.blockInest{
    margin: 10px;
    width: 100%;    
    display: flex;
    justify-content: center;
}
.statusUsers, .uppendUser{
    margin: 20px 5px;
    border: 1px solid rgb(221, 219, 219);
    border-radius: 20px;
    background: #FDFDFE;
}
.statusUsers{
    width: 600px;
}
.statusUsers .nav{
    width: 100%;
    display: flex;
}
.statusUsers .nav button{
    width: 50%;
    border: none;
    padding: 10px;
    background: #F6F6F6;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.statusUsers .nav .active{
    background: #4186fc;
    color: #fff;
    /* box-shadow: inset 1px 1px 1px 2px #216ef3; */
}
.userBlock{
    width: 100%;
    margin-top: 10px;
    height: 350px;
    overflow: hidden;
    overflow-y: scroll;
}
.itemUser{
    margin: 5px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.provileU{
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 20px;
}
.provileU img{
    width: 100%;
    height: 100%;
}
.descriptionU{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15px;
}
.descriptionU h2{
    font-size: 15px;
    margin: 5px 0;
}
.descriptionU span{
    font-size: 13px;
    margin-top: 3px;
}
.roleU{
    width: 30%;
    display: flex;
    justify-content: center;
}
.wrappingRoles{
    padding: 8px;
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 295px;
    overflow: hidden;
    overflow-y: scroll;
}
.blockRole{
    display: flex;
    justify-content: space-between;
}
.blockRole p{
    margin: 5px;
}
.leftBlockRole{
    width: 80%;
    display: flex;
    overflow: hidden;
}   
.rightBlockrole{
    width: 25%;
    display: flex;
    align-items: center;
}
.rightBlockrole .trash {
    display: flex;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    margin: 5px;
    background:rgba(161, 161, 161, 0.3);
}
.rightBlockrole .edit {
    display: flex;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    margin: 5px;
    background:rgba(161, 161, 161, 0.3);
}
.rightBlockrole .edit:hover, .rightBlockrole .trash:hover{
    background:rgba(99, 98, 98, 0.3);
    cursor: pointer;
}

.rightBlockrole .trash svg{
    width: 9px;
    height: 9px;
}

.rightBlockrole .edit svg{
    width: 9px;
    height: 9px;
}
.edit-role-input{
    width: 90%;
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
}
.windowModal-addRoles, .windowModal-TrashRoles{
    width: 300px;
    height: 200px;
    position: absolute;
    margin: auto;
    top: 0; bottom: 0; left: 0; right: 0;
    background: #FDFDFE;
    box-shadow: 1px 2px 10px silver;
}
.footerModal{
    width: 100%;
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: space-evenly;
}
.footerModal button{
    padding: 7px;
    background: none;
    border: none;
    outline: none;
}
.footerModal .accept-btn{
    background: #5492fd;
    color: #fff;
    font-size: 13px;
}
.footerModal .cancel-btn{
    background: #f94a4d;
    color: #fff;
    font-size: 13px;
}
.footerModal .accept-btn:hover{
    background: #2b79ff;
}
.footerModal .cancel-btn:hover{
    background: #f6272a;
}
.windowModal-addRoles form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.windowModal-addRoles span, .windowModal-TrashRoles span{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10px 0;
    font-size: 15px;
    font-weight: 600;
}
.windowModal-addRoles form input{
    font-size: 13px;
    border: none;
    border-bottom: 1px solid #000;
    margin-top: 10px;
    outline: none;
    letter-spacing: 0.5em;
}
.content_access_role{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
.user-model-window{
    margin: 20px 5px;
    border: 1px solid rgb(146, 142, 132);
    border-radius: 20px;
    background: #FDFDFE;
    width: 400px;
    height: 400px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1px 1px 30px rgba(102, 102, 102, 0.695);
    z-index: 99999;
}
.wrapping-user-window{
    width: 80%;
}
.image-model-user{
    position: relative;
    left: 35%;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    margin: 20px 0;
    box-shadow: 1px 1px 10px silver;
}
.image-model-user img{
    cursor: pointer;
}
.close-button{
    position: absolute;
    bottom: 30px;
}
.delete-button{
    position: absolute;
    bottom: 30px;
    right: 40px;
}
.close-button button{
    padding: 6px;
    font-size: 12px;
    background: #fff;
    border: 1px solid silver;
    border-radius: 5px;
}
.close-button button:hover{
    background: #e0dfdf;
}
.delete-button button{
    padding: 6px;
    font-size: 12px;
    background: #f37373;
    border: 1px solid silver;
    border-radius: 5px;
    color: #fff;
}
.delete-button button:hover{
    background: rgb(252, 59, 59);
}

.wrapping-edit-user{
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin: 5px 0; */
    padding: 4px;
}
.wrapping-edit-user svg{
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.change-user-window{
    margin: auto;
    top: 0; bottom: 0; left: 0; right: 0;
    border: 1px solid rgb(221, 219, 219);
    border-radius: 20px;
    background: #FDFDFE;
    width: 300px;
    height: 200px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1px 1px 10px rgba(118, 217, 247, 0.695);
    z-index: 999991;
}
.conten-window{
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.change-user-window .conten-window form{
    width: 100%;
}
.change-user-window .conten-window input, select{
    width: 100%;
    padding: 6px;
    border-radius: 7px;
    width: 100%;
    border: 1px solid silver;
    outline: none;
}
.change-user-window .conten-window input:focus, .change-user-window .conten-window select:focus{
    border: 1px solid #357df8;
}
.errors_block{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 100px;
    background: #f86969;
    padding: 15px;
    border-top-left-radius: 10px;
    box-shadow: 1px 2px 10px #f80404;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
.access_blick{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 100px;
    background: #85e175;
    padding: 15px;
    border-top-left-radius: 10px;
    box-shadow: 1px 2px 10px #68f150;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
.wrap_errors{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrap_errors span{
    font-weight: 600;
    color: #e6c9c9;
}
.wrap_errors svg{
    width: 20px;
    height: 20px;
}
.content_errors_block{
    width: 100%;
    margin-top: 10px;
    font-weight: 400;
    color: #e6c9c9; 
}
.loading{
    width: 100%;
    height:100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;  
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 1px 2px 10px #ccdff5db;
    z-index: 99999;
    backdrop-filter: blur(5px);
}
.wrap_load{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    top: 0;
    left: 0;  
    bottom: 0;
    right: 0;
}
.wrap_load span{
    margin-top: 40px;
    font-size: 30px;
    font-weight: 600;
    color:rgba(0, 0, 0, 0.3)
}
.wrap_load svg:hover{
    cursor: pointer;
}

.notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    z-index: 1000;
}

.notification {
    background-color: #4caf4fcc; /* Зеленый для успеха */
    color: white;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
}

.notification.error {
    background-color: #f44336; /* Красный для ошибок */
}
.notification.success {
    background-color: #3cf436; /* Красный для ошибок */
}

.notification.show {
    opacity: 1;
    transform: translateY(0);
}
.no_data_users{
    width: 100%;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.no_data_users span{
    font-size: 30px;
    color: rgb(31,31,31, 0.4);
}
.updateName:hover, .updateEmail:hover, .updateRole:hover{
    background: rgb(229, 229, 229);
    cursor: pointer;
}

.content_error{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.error_block{
    width: 600px;
    height: 600px;
    /* background-image: url("../../image/configuration_error.png"); */
    background-repeat: no-repeat;
    background-size: cover;
}
.message_block{
    width: 100%;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.message_block p{
    font-size: 29px;
    letter-spacing: 0.5rem;
    font-weight: bold;
    color:#3b3a3a;
}
.message_block span{
    font-size: 19px;
    letter-spacing: 0.5rem;
    font-weight: normal;
    color:#3b3a3a;
    margin-top: 20px;
}

.error_body{
    font-family: 'Roboto', sans-serif;
    background: #0f0f1a;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
.error-container {
    text-align: center;
    max-width: 500px;
    padding: 2rem;
    position: relative;
}

.error-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #ff4d4d;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards 0.5s;
}

.error-message {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #aaa;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards 1s;
}

.retry-button {
    background: #4a6bff;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards 1.5s;
}

.retry-button:hover {
    background: #3a5bef;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 107, 255, 0.4);
}

/* Анимация микросхемы и проводов */
.circuit-animation {
    width: 200px;
    height: 150px;
    margin: 0 auto 2rem;
    position: relative;
}

.chip {
    width: 60px;
    height: 60px;
    background: #2a2a40;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border: 2px solid #4a6bff;
    animation: chipGlow 2s infinite alternate;
}

.wire {
    position: absolute;
    background: #4a6bff;
    height: 4px;
    border-radius: 2px;
    animation: wirePulse 2s infinite alternate;
}

.wire-1 {
    width: 80px;
    top: 40%;
    left: 0;
    transform: rotate(20deg);
}

.wire-2 {
    width: 80px;
    top: 60%;
    right: 0;
    transform: rotate(-20deg);
}

.sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ff4d4d;
    border-radius: 50%;
    opacity: 0;
    animation: sparkFlash 1s infinite;
}

.spark:nth-child(1) {
    top: 20%;
    left: 30%;
    animation-delay: 0.3s;
}

.spark:nth-child(2) {
    top: 70%;
    left: 60%;
    animation-delay: 0.7s;
}

.spark:nth-child(3) {
    top: 40%;
    left: 80%;
    animation-delay: 1.1s;
}
.camp_stat_box{
    height: 92%;
    overflow-y: auto;
}
/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chipGlow {
    from { box-shadow: 0 0 10px rgba(74, 107, 255, 0.5); }
    to { box-shadow: 0 0 30px rgba(74, 107, 255, 0.9); }
}

@keyframes wirePulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

@keyframes sparkFlash {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.5); }
}











@media screen and (min-width: 766px) and (max-width: 1066px){
    /* .box-body{
        align-items: center;
    } */
}
@media screen and (min-width: 420px) and (max-width: 766px){
    .search{
        display: flex;
        justify-content: flex-start;
    }
    .search form{
        width: 60%;
        margin: 10px 0;
        margin-right: 0;
    }
    .search form input{
        width: 100%;
        font-size: 12px;
    }
    .search form button{
        position: absolute;
        right: 43vw;
    }
    .box-body{
        flex-direction: column;
        display: flex;
        align-items: center;
    }
    .wrTableIfo{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wrTableIfo table{
        width: 95%;
    }
    .wrTableIfo table thead{
        width: 100%;
        display: flex;
    }
    .wrTableIfo table tbody{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .wrTableIfo tr{
        font-size: 13px;
        display: flex;
        align-items: center;
    }

    .buttonRunning{
        font-size: 13px;
    }
    .btn-group, .btn-group-vertical{
        font-size: 13px;
    }
    .current, .statusTh{
        display: none;
    }
    .tdList{
        width: 100px;
        text-align: left;
    }
    .id_table{
        width: 30px;
    }
    #name_camp{
        width: 62px;
    }   
}

@media screen and (min-width: 220px) and (max-width: 420px) {
    .content_audio{
        margin-left: 0;
    }
    
    .search form{
        width: 100%;
        margin: 10px 0;
        margin-right: 0;
    }
    .search form input{
        width: 100%;
        font-size: 12px;
    }
    .search form button{
        position: absolute;
        right: 20px;
    }
    .wrTableIfo{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wrTableIfo table{
        width: 95%;
    }
    .wrTableIfo table thead{
        width: 100%;
        display: flex;
    }
    .wrTableIfo table tbody{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .wrTableIfo tr{
        width: 100%;
        font-size: 10px;
        display: flex;
        align-items: center;
    }

    .buttonRunning{
        font-size: 10px;
    }
    .btn-group, .btn-group-vertical{
        font-size: 10px;
    }
    .current, .statusTh{
        display: none;
    }
    .tdList{
        width: 80px;
        text-align: left;
    }
    .id_table{
        width: 30px;
    }
    #name_camp{
        width: 62px;
    }
    .form-horizontal{
        width: 100%;
    }
    .col-sm-2{
        width: 100%;
    }
    select{
        width: 90%;
        font-size: 10px;
    }
    option{
        width: 90%;
        font-size: 10px;
    }
    .message_block{
        width: 90%;
    }
    .modalWindow{
        width: 90%;
        position: absolute;
        left: 20px;
    }
    .selectpicker{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .selectpicker option{
        width: 100%;
    }
}