:root{
  --orangeButtonColor:linear-gradient(90deg, rgba(238,91,51,1) 0%, rgba(201,71,43,1) 47%, rgba(113,55,51,1) 100%);
  --orangeButtonActiveColor:linear-gradient(90deg, rgb(240, 76, 31) 0%, rgb(209, 56, 22) 47%, rgb(112, 48, 43) 100%);

  --orangeBrightColor:#ea3200;
  --redGradientColor: linear-gradient(135deg, rgb(185, 8, 8) 0%, rgba(213, 40, 40, 1) 35%, rgba(255, 114, 114, 1) 100%);

  --greyStrongColor:#434343;
  --greyMediumColor:#a8a8a8;
  --greyEasyColor:#f2f2f2;
  --whiteClearColor:#fff;
  /*--siteWidth: 1460px;  - minus padding 10px/10px = 1440px */
  --siteWidth: 100%;
  --defaultBorderRadius: 5px;

  --greenBrightColor:#32d74b;
  --yellowBusyColor:#B4E100;
  --greyOfflineColor:rgb(202, 202, 202);
}

html, body{
  height:100%;
  margin:0;
  padding:0;
}

html{
  box-sizing: border-box;
  font-family: 'Inter-Regular', sans-serif;
  font-size: 16px;
  color:var(--greyStrongColor);
}


*, *:before, *:after {
  box-sizing:border-box; /* говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента */
}

h1, h2, h3, h4, h5, h6, p, img, ul, li, input, select, button{
  margin:0;
  padding:0;
}

h1 {
  font-size: 36px;
  font-family: 'Inter-Medium';
  line-height: 1.2;
}

h2 {
  font-size: 30px;
  font-family: 'Inter-Medium';
  line-height: 1.3;
}

h3 {
  font-size: 24px;
  font-family: 'Inter-Regular';
  line-height: 1.4;
}

h4 {
  font-size: 20px;
  font-family: 'Inter-Regular';
  line-height: 1.5;
}

h5 {
  font-size: 16px;
  font-family: 'Inter-Regular';
  line-height: 1.6;
}

h6 {
  font-size: 14px;
  font-family: 'Inter-Regular';
  line-height: 1.7;
}

ul{
 list-style:none;
}

button{
 border:none;
 outline:none;
 cursor:pointer;
}

a{
  outline: none;
  text-decoration: none;
  color: var(--greyStrongColor);
  cursor: pointer;
}

input, select, textarea{
  outline: none;
  border: none;
}

input::placeholder{
  color: var(--greyMediumColor);
}

/* global scroll */

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: #E9E9E9;
  width:2px;
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb {
  background-color: #434343;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .3s ease-in-out;
}
*::-webkit-scrollbar-thumb:hover{
  background-color: black;
}
*::-webkit-scrollbar-thumb:active{
  background-color: #EA3200;
}

/* global scroll */

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

/*.boxShadowStack{
  box-shadow: 4px 4px 19px 7px rgba(0,0,0,0.07);
}

.boxShadowBorder{
  box-shadow: 0px 6px 19px 7px rgba(0,0,0,0.07);
}
*/
.boxShadowStack{
  box-shadow: 4px 4px 19px 7px rgba(0,0,0,0.07);
}

.boxShadowBorder{
  box-shadow: 0px 6px 19px 7px rgba(0,0,0,0.07);
}

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

.bcEasyGrey{
  background-color: var(--greyEasyColor);
}

.fcGrey{
  color:#8D8D8D;
}

.fcDefault{
  color:var(--greyStrongColor);
}

.fcOrange{
  color:var(--orangeBrightColor);
}

.fcOnline{
  color:var(--greenBrightColor);
}

.fcBusy{
  color:var(--yellowBusyColor);
}


.fcOffline{
  color:var(--greyOfflineColor);
}

.placeholderOrange::placeholder{
  color:var(--orangeBrightColor);
}

.orangeSVG{
  filter: invert(34%) sepia(85%) saturate(7438%) hue-rotate(16deg) brightness(103%) contrast(101%); /* fill svg image to orange color */
}
.orangeByClick:active{
  filter: invert(34%) sepia(85%) saturate(7438%) hue-rotate(16deg) brightness(103%) contrast(101%); /* fill svg image to orange color on :active event */
}
.redSVG{
  filter: invert(35%) sepia(85%) saturate(7490%) hue-rotate(353deg) brightness(95%) contrast(129%); /* fill svg image to red color */
}


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

.ffLight{
  font-family:'Inter-Light' !important;
}
.ffRegular{
  font-family:'Inter-Regular' !important;
}
.ffMedium{
  font-family:'Inter-Medium' !important;
}
.ffSemibold{
  font-family:'Inter-SemiBold' !important;
}
.ffBold{
  font-family:'Inter-Bold' !important;
}

/*---------------------------------------------------------------*/
.orangeGradientButton{
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--orangeButtonColor);
  border:1.5px solid #a9a9a9;
  color:white;
  cursor:pointer;
}
.orangeGradientButton:active{
  background: var(--orangeButtonActiveColor);
}

.orangeGradientButton:disabled{
  opacity:0.5;
  pointer-events: none;
}

.whiteButton{
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--whiteClearColor);
  border:1.5px solid var(--orangeBrightColor);
  color:var(--orangeBrightColor);
  cursor:pointer;
}

.whiteButton:active{
  background: var(--orangeBrightColor);
  border:1.5px solid var(--orangeBrightColor);
  color:var(--whiteClearColor);
}

.counter{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--orangeBrightColor);
  color:white;
  border-radius: 50%; 
  cursor: pointer;
}

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

.toggle-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle {
    position: relative;
    display: inline-block;
    /*
    width: 60px;
    height: 34px;
    */
  }
  
  .toggle input {display:none;}
  
  .slider { /* input field  */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before { /* circle  */
    position: absolute;
    content: "";
    height: var(--toggleCircleHeight, 0);
    width: var(--toggleCircleWidth, 0);
    left: var(--toggleCirclePositionLeft, 0);
    bottom: var(--toggleCirclePositionBottom, 0);
    border-radius: 50%;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--greenBrightColor);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--greenBrightColor);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX( var(--toggleCircleOffset, 0) );
    -ms-transform: translateX( var(--toggleCircleOffset, 0) );
    transform: translateX( var(--toggleCircleOffset, 0) );
  }
  
  /* Rounded sliders 
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
  */
/*---------------------------------------------------------------*/

.radioButtons-wrapper{
  display: flex;
  flex-direction: column;
}

.radioButton-wrapper{
/*  margin-top: var(--radioButtonMarginTop, 0); */
  margin-top:20px;
}

.radioButton-wrapper:first-child{
  margin-top: 0;
}

.radioButton {
  position: relative;
  display: inline-block;
  padding-left: var(--radioButtonTitlePaddingLeft, 0);
  margin-bottom: 0px;

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

.radioButton:first-child{
  margin-top: 0px;
}

/* Hide the browser's default radio button */
.radioButton input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  display: none;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: var(--radioButtonCheckmarkPositionTop, 0);
  left: 0;
  height: var(--radioButtonCheckmarkHeight, 0);
  width: var(--radioButtonCheckmarkWidth, 0);
  background-color: #ccc;
  border-radius: 50%;

}

/* On mouse-over, add a grey background color */
.radioButton:hover input ~ .checkmark {
  background-color: #c0c0c0;
}

/* When the radio button is checked, add a blue background */
.radioButton input:checked ~ .checkmark {

}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  /*display: none;*/
}

/* Show the indicator (dot/circle) when checked */
.radioButton input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioButton input:checked ~ .checkmark:after {
 	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background: var(--orangeBrightColor);
}
 
/*---------------------------------------------------------------*/

.inputRange {
  appearance: none;
/*    border: 1px solid #000000; */
  border-radius: 15px;
  background: linear-gradient(90deg, #ea3200 30%, #ccc 30%);
  cursor: pointer;
}
  
/* Thumb: for Chrome, Safari, Edge */
.inputRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
/*  border: 1px solid #000000; */
  border-radius: 50%;
  background: white;
  box-shadow: 0px 0px 5px 3px rgba(234, 50, 0, 0.5);
}

.inputRange::-webkit-slider-thumb:active{
  box-shadow: 0px 0px 5px 4px rgba(234, 35, 0, 0.5);
}
  
  /* Thumb: for Firefox */
.inputRange::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ea3200;
  box-shadow: none;
}
/*---------------------------------------------------------------*/

.wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  margin:0 auto;
  width: 100%; 
  height: 100vh; /* min-height:100%; */
  transition: filter 0.1s ease-in-out;
}


.header-wrapper{
  width: 100%;
  height: 90px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  background-color: var(--whiteClearColor);
}

.logoName{
  color:var(--orangeBrightColor);
  font-family: 'Inter-SemiBold';
  font-size: 22px;
}

.roomData-wrapper{
 
}
.userArea-wrapper{
/*  width: 250px; */
}

.avatar-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.userAvatar{
  border-radius: 50%; 
  overflow: hidden;
  display: block;
}

.userAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.userStatus{
  position: absolute;
  bottom: -3px;
  right: 0;
  display: block;
  border-radius: 50%;
}


.header-wrapper .userStatus{
  width: 20px;
  height: 20px;
  border: 3px solid var(--whiteClearColor);
  bottom: -5px;
  right: -4px;
}

.userProfile-wrapper .userStatus{
  width: 30px;
  height: 30px;
  border: 3px solid var(--whiteClearColor);
  bottom: 5px;
  right: 15px;
}

.userProfile-wrapper .userStatus.online{
	background-color: rgb(50, 215, 75);
}

.userProfile-wrapper .userStatus.offline{
	background-color: rgb(202, 202, 202);
}

.userProfile-wrapper .userStatus.busy{
	background-color: #B4E100;
}

.header-wrapper .userData-wrapper h5{
  font-family:'Inter-Light';
}

/*---------------------------------------------------------------------------------------*/
.groupProfile-wrapper{
  position: absolute;
  background-color: var(--whiteClearColor);
  border-radius: var(--defaultBorderRadius);
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
  width: 470px;
  top:15px;
  left:calc((100% - 470px)/2);
  z-index: 1000;
}

.groupProfile-header{
  position: relative;
/*  padding: 25px 0; */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.groupProfile-wrapper .userProfile{
  position: relative;
  padding-left:35px;
  padding-right:35px;
  padding-bottom:25px;
  padding-top:25px;
}

.groupProfile-wrapper .groupName{
  margin-top: 15px;
  font-size: 30px;
  word-break: break-word;
  text-align: center;
}

.groupProfile-wrapper .groupMembers{
  margin-top: 5px;
  font-size: 20px;
}


.groupProfile-wrapper .buttons-wrapper{
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.groupProfile-wrapper .button-wrapper{
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  width: 124px; 
  height: 96px; 
  color: white;
  border-radius: 15px;
  background: linear-gradient(135deg, rgb(185, 8, 8) 0%, rgba(213,40,40,1) 35%, rgba(255,114,114,1) 100%);
  margin: 0 4px;
  cursor: pointer;
  font-size:13px;
  text-align:center;
}

.groupProfile-wrapper .button-wrapper:active{
  background: linear-gradient(135deg, rgb(163, 9, 9) 0%, rgb(212, 23, 23) 35%, rgb(250, 103, 103) 100%);
}

.groupProfile-wrapper .addMembersButton-wrapper{
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

.groupProfile-wrapper .addMembersButton-wrapper img {
  width: 25px;
  height: 25px;
}

.groupProfile-wrapper .addMembersButton-wrapper span {
  margin-left: 5px;
  font-size: 18px;
}

.groupProfile-wrapper .users-wrapper{
  max-height: 390px;
  overflow-y: auto; 
}

.groupProfile-wrapper .user-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 65px;
}

.groupProfile-wrapper .interaction-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}

.groupProfile-wrapper .dropdownMenu-wrapper{
  width: 155px;
}


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

.settingBody-wrapper.full[data-settingBody="createNewGroup"]{
  width: 430px;
  height: 725px;
}
.settingBody-wrapper[data-settingBody="createNewGroup"]{
  width: 430px;
  height: 330px;
}


.settingBody-wrapper[data-settingBody="createNewGroup"] .selectImage{
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: block;
  width: 25px;
  height: 25px;
  background-image: url('../images/icons/cameraOrangeBG.svg');
  background-position: center;  
  background-repeat: no-repeat; 
  border: 3px solid var(--whiteClearColor);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
}

.settingBody-wrapper[data-settingBody="createNewGroup"] .createNewGroupInputs-wrapper{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 12px 13px;
}

.createNewGroupInput-wrapper, .createNewGroupInput-wrapper input{
  width: 100% !important;
  height: 25px !important;
  font-size: 18px;
}
 


.createNewGroupInput-wrapper::after{
  display: block;
  content:"";
  width: 100%;
  height: 1px;
  background-color: var(--greyMediumColor);
}

/*
.settingBody[data-body="addGroupMembers"]{
  text-align: center;
}
*/

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

.online{
  background-color: var(--greenBrightColor);
}

.busy{
  background-color: var(--yellowBusyColor);
}

.offline{
  background-color: var(--greyOfflineColor);
}

.userData-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 120px;
  margin-left: 10px;
}
 

.userData-wrapper, .roomData-wrapper{
  color: var(--greyStrongColor);
}

.roomData-wrapper h5{
  font-family:'Inter-Light';
}
/*
.userData-wrapper p, .roomData-wrapper p{
  font-size: 14px;
  font-family: 'Inter-Light';
}
*/

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

.content{
  display: flex;
  width: 100%;
  height: calc(100% - 90px); /* Высота контента равна высоте экрана минус хедер */
  padding:0 10px 0 0;
  padding: 0;
  background-color: var(--greyEasyColor);
}

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

.sidebarMenu-wrapper{
  display: block;
  min-width: 325px;
  padding-top:15px;
/*  width: 18%; */
  background-color: var(--whiteClearColor);
}

.sidebarMenu-wrapper .greyAfterLine{
  margin: 0 auto;
  width: 80%;
}

.sidebarMenuElement{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  width: 100%;
  height: 58px;
  cursor: pointer;
/*  padding: 0 30px; */
  padding-left: 34px;
}


.sidebarMenuElement img{
  min-width:30px;
}

.sidebarMenuElement p{
  font-size:20px;
  font-family: 'Inter-Regular';
  padding-left:18px;
}

.sidebarMenuElement:hover{
  /* background-color: var(--greyEasyColor); */
  background-color: var(--orangeBrightColor);  
  color: var(--whiteClearColor);
}

.sidebarMenuElement:hover > img{
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(42deg) brightness(104%) contrast(103%); /* to white color */
}

.sidebarMenuElement:hover > .counter{
  background-color: var(--whiteClearColor);
  color: var(--orangeBrightColor);
  font-family: 'Inter-Medium';
}


.sidebarMenuElement:active{
  background-color: var(--whiteClearColor);
}

.sidebarMenuElement:active > img{
  filter: invert(34%) sepia(85%) saturate(7438%) hue-rotate(16deg) brightness(103%) contrast(101%); /* fill svg image to white color */
}

.sidebarMenuElement:active > p{
  color: var(--orangeBrightColor);
  font-family: 'Inter-Regular';
}

.sidebarMenuElement:active .counter{
  /*border: 1.5px solid var(--orangeBrightColor);*/
  color: var(--whiteClearColor);
  background-color: var(--orangeBrightColor);
  font-family: 'Inter-Regular';
}

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

.currentSidebarMenuElement, .currentSidebarMenuElement:active{
  background-color: var(--greyEasyColor);
}

.currentSidebarMenuElement:hover{
  background-color: var(--greyEasyColor);  
}

.currentSidebarMenuElement:hover > p{
  color: var(--greyStrongColor);
}

.currentSidebarMenuElement:hover > img{
  filter: none;
}

.currentSidebarMenuElement:hover > .counter{
  background-color: var(--orangeBrightColor);
  color: var(--whiteClearColor);
  font-family: 'Inter-Regular';
}

.currentSidebarMenuElement > p, .currentSidebarMenuElement:active > p{
  color:var(--greyStrongColor);
  font-family: 'Inter-Regular';
}


.currentSidebarMenuElement .counter{
  color: var(--whiteClearColor);
  background-color: var(--orangeBrightColor);
  font-family: 'Inter-Regular';
}

.currentSidebarMenuElement:active .counter{
  color: var(--whiteClearColor);
  background-color: var(--orangeBrightColor);
  font-family: 'Inter-Regular';
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.greyAfterLine{
  content: "";
  display: block;
  height: 1px;
  border-radius: var(--defaultBorderRadius);
  background-color: var(--greyEasyColor);
}

.orangeHorizontalLine{
  content: "";
  display: block;
  margin: 0 auto;
  height: 1px;
  border-radius: var(--defaultBorderRadius);
  background-color: var(--orangeBrightColor);
}
 

.variableContent-wrapper{
  display: block;
/*   */
/*  width: 1140px; */
/*  width: 82%; */
  width: calc(100% - 325px);
  height:calc(100% - 20px);
  margin:10px;
/*  margin:0.55%; */
}

.controlPanel-wrapper{
/*  height: 68px; */
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 20px 15px;
  background-color: var(--whiteClearColor);
  margin-bottom: 10px;
}

.searchInput-wrapper{
  display: flex;
  justify-content: flex-start;
  align-items: center;
/*  padding: 0px 25px; */
}



.unselectedInput{
  position: relative;
}

.selectedInput{
  position: relative;
}

.selectedInput::after{
  content: "";
  bottom: -3px;
  left: 0px;
  position: absolute;
  display: block;
  height: 1px;
  border-radius: 5px;
  width: 100%;
  background-color: var(--greyStrongColor);
}

.searchInput{
  height: 25px;
  font-size: 15px;
  cursor: pointer;
  padding: 0px 26px;
/*  
  font-size: 15px;

  background-color: white;
  background-image: url('../images/icons/search.svg');
  background-position: 10px 10px;  
  background-repeat: no-repeat; 
  padding: 5px 10px; 
  */
}

.searchInput:focus{
  cursor: auto;
}

.searchInput:hover{
  color: var(--orangeBrightColor);
}

.searchInput:hover::placeholder{
  color: var(--orangeBrightColor);
}

.searchInput:focus, .searchInput:focus::placeholder{
  color: var(--greyMediumColor);
}

.searchInput:focus{
  color: var(--greyStrongColor);
}


.searchInput-wrapper:hover img{
  filter: invert(34%) sepia(85%) saturate(7438%) hue-rotate(16deg) brightness(103%) contrast(101%); /* fill svg image to white color */
}

.searchInput:focus ~ img{
  filter: none;
}





.searchButton{
  content: "";
  left: 4px;
  position: absolute;
  display: block;
}

.removeTextButton{
  content: "";
  right: 4px;
  position: absolute;
  /*display: none;*/
}


.selections-wrapper{

}

/*********************************************************************************/
.currentUserStatus-wrapper{
  position: relative;
  display: block;

}

.currentUserStatusTitle-wrapper{
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: inherit;
  cursor: pointer;
}

.currentUserStatusTitle-wrapper span{
  font-size:14px;
}


.currentUserStatusTitle-wrapper img{
  margin-left: 5px;
}

.currentUserStatusDropdownMenu-wrapper{
  position: absolute;
  /*display: none;*/
  background-color: var(--whiteClearColor);
  padding:5px 0;
  color: var(--greyStrongColor);
  border-radius: 5px;
  box-shadow: 0px 4px 15px 1px rgba(194, 194, 194, 0.75);
  z-index: 100;
  font-size: inherit;
}

.currentUserStatusDropdownMenuElement-wrapper{
  display:flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: inherit;
}

.currentUserStatusDropdownMenuElement-wrapper p{
  font-size:14px; 
}

.currentUserStatusDropdownMenuElement-wrapper[data-userStatus="available"]{
  color: var(--greenBrightColor);
}
.currentUserStatusDropdownMenuElement-wrapper[data-userStatus="busy"]{
  color: var(--yellowBusyColor);
}
.currentUserStatusDropdownMenuElement-wrapper[data-userStatus="offline"]{
  color: var(--greyMediumColor);
}

.currentUserStatusDropdownMenuElement-wrapper:hover{
  background-color: var(--greyEasyColor);
}

.currentUserStatusActiveElement{
  color:var(--orangeBrightColor);
}

/*********************************************************************************/
.filter-wrapper{
  position: relative;
  display: block;
  cursor: pointer;
}

.filter-wrapper::after{
  content: "";
  bottom: -8px;
  left: 0px;
  position: absolute;
  display: block;
  height: 1px;
  border-radius: 10px;
  width: 100%;
  background-color: var(--greyStrongColor);
}

.filterTitle-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin: 0 auto;
  font-size: inherit;
}

.filterDropdownMenu-wrapper{
  position: absolute;
  margin-top:11px;
  /*display: none;*/
  background-color: var(--whiteClearColor);
  color: var(--greyStrongColor);
  border-radius: 5px;
  box-shadow: 0px 4px 15px 1px rgba(194, 194, 194, 0.75);
  z-index: 100;
  font-size: inherit;
  padding:5px 0;
}

.filterDropdownMenuElement-wrapper{
  display:flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  font-size: inherit;
}

.filterDropdownMenuElement-wrapper:hover{
  background-color: var(--greyEasyColor);
}

.activeFilterElement{
  color:var(--orangeBrightColor);
}

.checkMark{
  /*display: none;*/
}

#endSessionsFilter{
  font-size:14px;
}

#endSessionsFilter .filterDropdownMenu-wrapper{
  padding:10px 0;
}

.filterDropdownMenu-wrapper .checkMark{
  width:20px;
  height:auto;
}

/*********************************************************************************/

.cards-wrapper{
  position: relative;
  /*display: none;*/
  width: 100%; 
  height: calc(91.65% - 10px);
  overflow-y: auto;
}

.cards{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  /*padding-top: 10px; */
  width: 100%;
}

.card{
/*  margin: 15px; */
  padding:10px 10px 10px 12.5px; 
  background-color: var(--whiteClearColor);
  border-radius: 5px;
}

.card:nth-last-child(-n+3) {
  margin-bottom: 0; /* убираем отступ у последних двух элементов */

}

.userInfo-wrapper{
  display: flex;
  height: 100%;
}


.interaction-wrapper{
  position: relative;
}

.interaction-wrapper img{
  cursor: pointer;
/*  border: 1px solid black; */
}

.interaction-wrapper .dropdownMenu-wrapper{
  width:195px;
}

.dropdownMenu-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  /*display: none;*/
  background-color: var(--whiteClearColor);
  color: var(--greyStrongColor);
  border-radius: 5px;
  box-shadow: 0px 4px 15px 1px rgba(194, 194, 194, 0.75);
  z-index: 100;

}

.dropdownMenuElement-wrapper{
  display:flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 11px 9.5px 11px 13px;
}

.dropdownMenuElement-wrapper:hover{
  background-color: var(--greyEasyColor);
}


.journal-wrapper{
  /*
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  */
  /*display: none;*/
  width: 100%;
  height: calc(91.65% - 10px);

}

.journalHeader{

  height: 7.3%;
/*  height: 55px;
  padding: 15px; */
  padding: 15px 15px 15px 15px;
  background-color: var(--whiteClearColor);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.journal{
  display: block;
  width: 100%;
  height: 92.7%;
  overflow-y: auto; 
}

.notice{
  position: relative;
  background-color: var(--whiteClearColor);
  padding: 15px;
  height: 7.9%;
  cursor: pointer;
}

.notice:hover{
  background-color: var(--greyEasyColor);
}


/*
.notice:first-child{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
*/

.notice:last-child{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.keyboard-wrapper{
  /*display: none;*/
  position:absolute;
  top: 178px;  /* Центрируем по вертикали */
  left: 58.45%; /* Центрируем по горизонтали */
  transform: translate(-50%, 0%); /* Смещаем элемент на половину его размеров */
  background-color: var(--whiteClearColor);
  width: 450px;
  height: 580px; /* 550px */
  border-radius: var(--defaultBorderRadius);
  z-index: 1000;
}

.enteredNumberDisplayer-wrapper{
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 119px;
  width: 100%;
  text-align: center;
}


.enteredNumberDisplayer{
  width: 73%;
  max-height: 70px;
  font-size: 32px;
  font-family: 'Inter-Regular';
  word-wrap: break-word; /* Разрешает перенос слов, если они не помещаются */
  overflow-wrap: break-word; /* Альтернативное свойство для переноса слов */
  overflow: hidden;  
}

.enteredNumberDisplayer p {
  background-color: orange;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}


.enteredNumberDisplayer-wrapper > img{
  position:absolute;
  top: 15px;
  right: 15px;
}

.keypad-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  height: 300px;
  padding:10%;
}

.keypad{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}

.keypadKey{
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: 'Inter-Medium';
  /* flex-shrink: 0;  Запрещает сжимать элементы */
  width:90px;
  height:45px;
  margin: 10px;
  cursor: pointer;
  color: var(--greyStrongColor);
  z-index: 1;
}

.keypadKey::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgb(152,152,152);
  background: linear-gradient(90deg, rgba(152,152,152,1) 0%, rgba(176,176,176,1) 50%, rgba(203,203,203,1) 100%);
  border-radius: 8px; /* внешнее скругление */
  z-index: -1; 
}

.keypadKey::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: 1px; bottom: 1px;
  background-color: var(--greyEasyColor);
  border-radius: 7.5px; /* внутреннее скругление */
  z-index: -1;
}

.keypadKey:hover::after {
  background-color: #e4e4e4;
}

/*----------------------------------------------*/
.keypadKey:active{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: 'Inter-Medium';
  width:90px;
  height:45px;
  margin: 10px;
  cursor: pointer;
  color: var(--whiteClearColor);
  border-radius: 8px;
}


.keypadKey:active::after{
	 background-color: var(--orangeBrightColor);
	  position: absolute;
	  top: 1px; left: 1px; right: 1px; bottom: 1px;
}
/*----------------------------------------------*/

.features-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 130px;
}

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

.chats-wrapper{
  display: flex;
  align-items: flex-start;
  background-color: var(--whiteClearColor);
/*  width: 65%; */
  width: 85%;
  height: 100%;
  border-radius: 5px;
  margin: 0 auto;
}

.chatsArea-wrapper{
  min-width: 392px; /* 29.5% */
  height: 100%;
}

.chatsAreaHeader-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px 15px 20px;
  height: 60px;
}

.chatsAreaHeader-wrapper p{
  font-family: 'Inter-Regular';
  font-size: 20px;
}



.chatsAreaHeader-wrapper button{
  margin-top: 2.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--orangeBrightColor);
  font-size: 14px;
  font-family: 'Inter-Medium';
  background-color: var(--whiteClearColor);
  height: 30px;
  padding:0 8.5px 0 9.5px;
  border-radius: 2.5px;
  border: 1.5px solid var(--whiteClearColor);
}


.chatsAreaHeader-wrapper button > img{
  margin-left: 5px;
}

.chatsAreaHeader-wrapper button:hover{
  background-color: var(--orangeBrightColor);
  border: 1.5px solid var(--orangeBrightColor);
  color: var(--whiteClearColor);

}

.chatsAreaHeader-wrapper button:active{
  border: 1.5px solid var(--orangeBrightColor);
  color: var(--orangeBrightColor);
  background-color: var(--whiteClearColor);
}

.chatsAreaHeader-wrapper button:hover > img{
/*  filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(224deg) brightness(104%) contrast(102%); */
/*  background-image: url('../images/icons/pencilWhite.svg'); */
  content: url('../images/icons/pencilWhite.svg');
}


.chatsAreaHeader-wrapper button:active > img{
  content: url('../images/icons/pencilOrange.svg');
}


.chatsAreaSearch-wrapper{
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 15px;
}


.chatsList-wrapper{
  height: calc(100% - 60px - 1px - 54px - 1px);
  padding: 10px 0;
  overflow-y:auto;
}

.chat-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 10px 15px 10px 15px;
  cursor: pointer;
}

.chat-wrapper:hover{
  background-color: var(--greyEasyColor);
}

.chatUserMessagePreview{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 45px - 10px - 10px - 45px);
  height: 100%;
  margin:0 10px;
}

.chatUserMessagePreview .username{
  display:flex;
  align-items: center;
}

.chatUserMessagePreview .username p{
  display: inline;
  font-size:16px;
  font-family: 'Inter-Regular';
  color: var(--greyStrongColor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.chatUserMessagePreview .messagePreview{
  max-width:190px; 
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;
  font-size:14px;
}


.chatUserMessagePreview[data-state="unmute"] img{
  /*display: none;*/
}
.chatUserMessagePreview[data-state="mute"] img{
  display: block;
}

.chatUserMessagePreview div{
  font-size:12px;
  font-family: 'Inter-Light';
  color:var(--greyMediumColor);
}

.chatMessageNotification{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 45px;
}

.time{
 
}

.greySideLine{
  content: "";
  display: block;
  width: 1px;
  border-radius: var(--defaultBorderRadius);
  background-color: var(--greyEasyColor);
}


.chatArea-wrapper{
  width: calc(100% - 392px - 1px);
  height: 100%;
}

.unselectedChat-wrapper{

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-size: 20px;
  text-align: center;
}


.selectedChat-wrapper{
  position: relative;
  /*display: none;*/
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.goDownButton-wrapper{
  width: 45px;
   height: 45px; 
   border-radius: 50%;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #4e4e4e;
   bottom:220px; 
   right:10px;
   z-index: 500;
   border: 2px solid rgb(177, 177, 177);
   cursor:pointer;
   box-shadow: 0px 0px 14px 4px rgb(211 211 211 / 75%);
}

.goDownButton-wrapper img{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-top: 1px;
}

.goDownButton-wrapper:hover{
  background-color: #5e5e5e;
}

.goDownButton-wrapper:active{
  background-color: var(--orangeBrightColor);
}


.currentChatSearchInput-wrapper{
  position: relative;
  height: 60px;
  /*display: none;*/
  justify-content: flex-start;
  align-items: center;
  padding-left:15px;
}

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

.selectedMessagesActions-wrapper{
  position: relative;
  height: 60px;
  /*display: none;*/
  justify-content: space-between;
  align-items: center;
  padding:0 15px 0 25px;
}

.selectedMessagesActions button{
  min-width: 120px;
  height: 30px;
  background-color: rgb(47, 47, 47);
  color: var(--whiteClearColor);
  font-size: 14px;
  border-radius: 40px;
  padding:0 15px;
}


.selectedMessagesActions button:hover{
  background-color: var(--orangeBrightColor);
}

.selectedMessagesActions button:active{
  background-color: var(--whiteClearColor);
  color: var(--orangeBrightColor);
  font-family: 'Inter-Medium';
  border: 1.99px solid var(--orangeBrightColor);
}

.selectedMessagesActions-wrapper .cancelButton{
  width: 75px;
  height: 30px;
  background-color: var(--whiteClearColor);
  color: var(--orangeBrightColor);
  font-size: 14px;
  font-family: 'Inter-Medium';
  border-radius: 2.5px;
  border: 1.5px solid var(--whiteClearColor);
}

.selectedMessagesActions-wrapper button:hover{
  background-color: var(--orangeBrightColor);
  border: 1.5px solid var(--orangeBrightColor);
  color: var(--whiteClearColor);

}

.selectedMessagesActions-wrapper button:active{
  border: 1.5px solid var(--orangeBrightColor);
  color: var(--orangeBrightColor);
  background-color: var(--whiteClearColor);
}

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

.selectedChatHeader-wrapper{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 60px;
}

.selectedChatName-wrapper{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 65%;
}

.selectedChatName{
  position: relative;
  display: block;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.selectedChatName-title{
  display: flex;
  justify-content: center;
}

.unselectedChat p, .selectedChatName p{
  font-size: 16px;
}
.selectedChatName p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectedChatName span{
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: 12px;
}

.selectedChatName img{
  position: relative;
  top:1px;
  margin-left: 3px;
  /*
  position: absolute;
  top:0;
  right:-20px;
  */
}

.selectedChatName[data-state="unmute"] img{
  /*display: none;*/
}
.selectedChatName[data-state="mute"] img{
  display: block;
}


.selectedChatBody-wrapper{
  height:calc(100% - 60px - 1px - 1px - 190px);
  padding: 0px 16px; 
/*  margin-bottom: 14px;
  padding: 0px 40px; */
  overflow-y: auto;
}

.selectMessagesMode{
/*  padding-left: 16px; 
  padding-right: 40px; */
  padding: 0px 30px;
}


.selectedChatBody{
  height: 100%;
  width: 100%;
}

.selectedChatDay-wrapper{
/*  margin-top: 10px; */
}

.selectedChatDay-wrapper:first-child{
  margin-top: 0px;
}

.selectedChatDate-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.selectedChatDate{
  width: 110px;
  text-align: center;
  font-size: 14px;
  color: var(--orangeBrightColor);
}

.selectedChatDate-wrapper > .orangeHorizontalLine{
  width: calc( (100% - 110px) / 2 );
}

.selectedChatMessages-wrapper{
  display: flex;
  flex-direction: column;
}

.unreadMessages-wrapper{
  width: 100%;
  padding:4px;

 /* background: linear-gradient(90deg, rgba(226,0,0,1) 0%, rgba(250,72,72,1) 49%, rgb(255, 137, 137) 100%); */
  background: linear-gradient(90deg, rgba(226,0,0,1) 0%, rgba(250,72,72,1) 49%, rgb(253, 127, 127) 100%);
  margin-bottom: 5px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--defaultBorderRadius);
  color: var(--whiteClearColor);
}

.message-wrapper{
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 14px;
  padding: 5px;
  cursor: auto;
}

.message-wrapper:last-child{
  margin-bottom: 0;
}


.message-wrapper.incoming{
  justify-content: flex-start;
}

.message-wrapper.outgoing{
  justify-content: flex-end;
}

/*.message-wrapper.outgoing::after{
  content: "seen";
  position:absolute;
  bottom:-21px;
  right: 18.5px;
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 13px;

}
*/

.msgs .seen{
  position:absolute;
  bottom: -20px;
  right: 18.5px;
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 13px;
}


.message-wrapper.outgoing.unselected, 
.message-wrapper.incoming.unselected{
  background-color: none;
}

.message-wrapper.outgoing.selected, 
.message-wrapper.incoming.selected{
  background-color: #E1E1E1;
}


.message-wrapper.incoming.selected{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.message-wrapper.outgoing.selected{
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.message-wrapper.incoming audio{
  border-radius: 30px;
}

.message-wrapper.outgoing audio{
  border: 1px solid #707070;
  border-radius: 30px;
}




.message{
  display: block;
  padding: 10px 15px 15px 15px;
  max-width: 70%;
  min-width: 30%;
  font-size: 14px;
/*  box-shadow: 0px 4px 15px 1px rgba(230, 230, 230, 0.75); */
}

.message-wrapper[data-type="file"] > .message{
  display: flex;
}
.message-wrapper[data-type="file"] .messageData{
  margin-top: 5px;
}

.message-wrapper .messageFileImage-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
}
.message-wrapper.incoming .messageFileImage-wrapper{
  background-color: var(--whiteClearColor);
}
.message-wrapper.outgoing .messageFileImage-wrapper{
  background-color: #4e4e4e;
}
.message-wrapper.incoming .messageFileImage-wrapper:hover{
  background-color: #f8f8f8;
}
.message-wrapper.outgoing .messageFileImage-wrapper:hover{
  background-color: #5e5e5e;
}
.message-wrapper.incoming .messageFileImage-wrapper:active{
  background-color: var(--orangeBrightColor);
}
.message-wrapper.outgoing .messageFileImage-wrapper:active{
  background-color: var(--orangeBrightColor);
}


.messageFileData-wrapper{
  margin-left: 13px;
}

.loadingProcess-wrapper{
  position: absolute;
  /*display: none;*/
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.loadingProcess{
  transform: rotate(-90deg);
}

.loadingProcessCircle{
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  transition: stroke-dashoffset 0.3s linear;
}

.loadingProcess-wrapper:active .loadingProcessCircle{
  stroke: var(--whiteClearColor);
}

.message-wrapper.incoming > .message{
  background-color: #707070;
  color: var(--whiteClearColor);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.message-wrapper.outgoing > .message{
  background-color: #f5f5f5;
  color: var(--greyStrongColor);
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.messageSender{
  font-family: 'Inter-Medium';
}

.messageData{
  margin-top: 4px;
  word-break: break-word;
}

.messageImage{
  overflow: hidden;
}

.messageImage img{
  border-radius: var(--defaultBorderRadius);
  width: 100%;
}

.messageVideo{
  overflow: hidden;
  margin-top: 6px;
}

.messageVideo video{
  border-radius: var(--defaultBorderRadius);
  width: 100%;
}

.messageAudio{
  /*width: 420px; */

}

.messageAudio audio{
  max-width: 100%;
  min-width: 100%;
}

.messageTime{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  font-size: 12px;
  height: 23px;
}

.messageTime p{
  /*display: none;*/
}

.messageTime span{
  margin-left: 3px;

}

.messageCall{
  position: relative;
}

.messageCall .title{
  font-size: 16px;
  font-family: 'Inter-Medium';
}

.messageCall .info{
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.messageCall .info img{
  height: 16px;
}

.messageCall .info .time{
  position: relative;
  margin-top: 0px;
}
.messageCall .info .total{
  position: relative;
  margin-top: 0px;
}

.messageCall .info .time,
.messageCall .info .total{
  margin-left: 5px;
}


.messageCall .handset{
  position: absolute;
  right: 0;
  top:50%;
  transform: translate(0%, -50%); /* Компенсация ширины и высоты */
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.messageCall .handset img{
  width: 100%;
}

.messageCall[data-call="audio"] .handset{
  right: 0;
}
.messageCall[data-call="video"] .handset{
  right: 5px;
}


.seenNotification{
  width:calc(100% - 5px);
  margin: 2.5px 5px 0 0;
  text-align: right;
  font-size: 12px;
  color: var(--greyMediumColor);
}

.messageSelectButton-wrapper{
  /*display: none;*/
  position: absolute;
  right: -25px;
  width: 20px;
  height: 20px;
  z-index: 1000;
}
.messageSelectButton-wrapper img{
  cursor: pointer;
}

.message-wrapper span{
  float:right;
  margin-top:5px;
}

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


.selectedChatMessageСomposer-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 190px;
  padding: 16px;
}

.selectedChatMessageСomposer-wrapper textarea{
  background-color: #e8e8e8;
  padding: 10px 12px;
  width: 100%;
  height: calc(100% - 20px - 30px);
  resize: none;
  font-size: 14px;
  font-family: 'Inter-Regular';
  border-radius: 5px;
}



.messageСomposerButtons-wrapper{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.messageСomposerButtons{
  display: flex;
  align-items: center;
  height: 100%;
}

.messageСomposerButtons-wrapper button{
  height: 100%;
  width: 120px;
  background-color: #2F2F2F;
  color: var(--whiteClearColor);
  border-radius: 40px;
  font-size: 14px;
}

.messageСomposerButtons-wrapper button:hover{
  background-color: var(--orangeBrightColor);
}

.messageСomposerButtons-wrapper button:active{

  background-color: var(--whiteClearColor);
  color: var(--orangeBrightColor);
  font-family: 'Inter-Medium';
  border: 1.99px solid var(--orangeBrightColor);

  /*
  background-color: #2F2F2F;
  color: var(--whiteClearColor);
  */
}

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

.settings-wrapper{
  position: relative;
  margin: 20px auto 0px auto;
  background-color: var(--whiteClearColor);
  border-radius: 5px;

  width: 1020px;
  min-height: 600px;
  padding-bottom: 20px;
  font-size: 20px;
}

.settingsTitles{
  width: calc(100% - 20% - 5%);
  margin: 50px auto 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.settingTitle{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 340px;
  height: 65px;
  margin: 20px;
  cursor: pointer;
  padding-left: 20px;
  border-radius: 5px;
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
}

.settingTitle p{
  margin-left: 12px;
  font-size:18px;
}

.settingTitle:hover{
  box-shadow: 0px 4px 15px 1px rgba(197, 197, 197, 0.75);
}


.settingTitle:active{
  background-color: var(--orangeBrightColor);
  color: var(--whiteClearColor);
}

.settingTitle:active > img{
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(42deg) brightness(104%) contrast(103%); /* to white color */
}

.settingBody-wrapper{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  bottom:0;
  /*display: none;*/
  background-color: var(--whiteClearColor);
  border-radius: var(--defaultBorderRadius);
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
  font-size: 20px;
  z-index:1000;
}


.settingBody-wrapper[data-settingBody="notificationsAndSounds"],
.settingBody-wrapper[data-settingBody="language"],
.settingBody-wrapper[data-settingBody="dataAndStorage"]{
  width: 470px;
}

.settingBody-wrapper[data-settingBody="security"]{
  height:355px;
}

.settingBody-wrapper[data-settingBody="integrity"]{
  height:720px;
  width:900px;
}

.settingBody-wrapper[data-settingBody="generalSettings"]{
  width: 540px;
  height:735px;
}

.settingBody-wrapper[data-settingBody="notificationsAndSounds"]{
  height:530px;
}

.settingBody-wrapper[data-settingBody="devices"]{
  width:470px;
  height:740px;
}


.settingBody-wrapper[data-settingBody="dataAndStorage"]{
  height: 455px;
}

.settingBody-wrapper.keyboardTimeSettings-wrapper{
  height:470px;
}

.settingBody-wrapper[data-settingBody="language"]{
  height:325px;
}



.settingBody-header{
  position: relative;
/*  padding: 25px 0; */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.closeButton{
  position: absolute;
  right:15px;
}

.returnBackButton{
  position: absolute;
  left:15px;
}


.settingBody{
  padding-left:45px;
  padding-right:45px;
  padding-bottom:45px;
  padding-top:25px;
}


.settingBody input{
  width: 100%;
  height: 6px;
}

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

.userProfile-wrapper{
  position: absolute;
  /*display: none;*/
  background-color: var(--whiteClearColor);
  border-radius: var(--defaultBorderRadius);
  z-index: 100;
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
  width: 470px;
  left:50%;
  top:50%;
  margin:0;
   -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index:1000;
}

.userProfile-header{
  position: relative;
/*  padding: 25px 0; */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}


.userProfile{
  position: relative;
  padding-left:45px;
  padding-right:45px;
  padding-bottom:45px;
  padding-top:25px;
}

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

.devicesBody{
  padding-left:0px;
  padding-right:0px;
}

.messageTextSizeInput{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.messageTextSizeInput input{
  width: calc(100% - 25px - 10px) !important;
}

.messageTextSizeCounter{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 20px;
}

/*
.currentUserData div{
  color: #8D8D8D;
}

.currentUserData div span{
  color: var(--greyStrongColor);
}
*/
.chatBackgroundImage-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 135px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--defaultBorderRadius);
  outline: 1px solid var(--greyStrongColor);
}

.chatBackgroundImage-wrapper img{
  border-radius: var(--defaultBorderRadius);
  background-size: cover;
  background-repeat: no-repeat;

}

.currentChatBackgroundImage{
  border-radius: var(--defaultBorderRadius);
  outline: 3px solid var(--orangeBrightColor);
}



/**********************************************/


.activeSessions-wrapper{
  width: 100%;
  height: 250px;
  overflow-y: auto; 
}

.activeSessions{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 35px 19px 45px;
  background-color: #f8f8f8;
}

.activeSessions:hover{
  background-color: var(--greyEasyColor);  
}

.activeSessions div{
  width: calc(100% - 45px);
}

.underlineOrangeButton{
  display: inline-block;
  color:var(--orangeBrightColor);
  text-decoration: underline;
  text-decoration-thickness: 1.4px;
  text-underline-offset: 3px;
  cursor:pointer;
}

.underlineOrangeButton:hover{
  color:red;
}

.underlineOrangeButton:active{
  color:var(--greyStrongColor);
}



.underlineBlackButton{
  display: inline-block;
  color:var(--greyStrongColor);
  text-decoration: underline;
  text-decoration-thickness: 1.4px;
  text-underline-offset: 5px;
  cursor:pointer;
}
.underlineBlackButton:hover{
  color:var(--orangeBrightColor);
}

.pincodeWrapper{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 30px;
  margin-top:10px;
}

#changePincodeButton{
  /*display: none;*/
}

.changePasswordWrapper{
  position: absolute;
  background-color: var(--whiteClearColor);
  width: 540px;
  height:355px;
  /*display: none;*/
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
}

.keyboardTimeSettings-wrapper{
  position: absolute;
  background-color: var(--whiteClearColor);
  width: 540px;
  /*display: none;*/
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
}

.underlineInputsForm-wrapper{
  width: 100%;
}

.underlineInput-wrapper{
  display: flex;
  position: relative;
  width: 100%;
  height: 25px;
  color:var(--greyStrongColor);
  cursor:pointer;
}

.underlineInput-wrapper::after{
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background-color: var(--underlineColor, var(--greyMediumColor));
  border-radius: var(--defaultBorderRadius);
  bottom: -3px;
}

.underlineInput-wrapper input{
  width: 100%;
  height: 100%;
  padding: 0 2.5px;
}

.underlineInput-wrapper input::placeholder{
  color:var(--greyMediumColor);
  font-family: 'Inter-Light';
}

.underlineInput-wrapper img{
/*  filter: invert(24%) sepia(1%) saturate(0%) hue-rotate(258deg) brightness(104%) contrast(94%); */
  filter: invert(82%) sepia(4%) saturate(22%) hue-rotate(314deg) brightness(86%) contrast(75%); 
}

.changePincodeWrapper{
  position: absolute;
  background-color: var(--whiteClearColor);
  width: 540px;
  height:355px;
  /*display: none;*/
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
}

#changePasswordForm input, #changePincodeForm input{
  font-size:16px;
}

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

.alert-wrapper{
  /*display: none;*/
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--defaultBorderRadius);
  background-color: var(--whiteClearColor);
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
  z-index: 1000;
  text-align: center;
  padding: 30px 40px 40px 40px;
}

.alert-wrapper button {
  background-color: var(--whiteClearColor);
/*  width: calc(50% - 0.5px); */
/*  width: 40%; */
  width: 215px; 
  height: 50px;
  font-size: 20px;
  font-family: 'Inter-Regular';
  border-radius: 60px;
  border: 1px solid var(--orangeBrightColor);
}

.alert-wrapper button:hover {
  background-color: var(--orangeBrightColor);
  color: var(--whiteClearColor);
  border: 1px solid var(--orangeBrightColor);
}

.alert-wrapper button:active {
  color: var(--whiteClearColor);
  background-color: var(--greyStrongColor);
  border: 1px solid var(--greyStrongColor);
  background-color: red;
  border: 1px solid red;
}

.confirmButton{

}

.cancelButton{

}

.alert-wrapper[data-type="logout"]{
  width: 530px;
}

.alert-wrapper[data-type="clearHistory"]{
  width: 420px;
}

.alert-wrapper[data-type="createNewGroup"]{
  width: 450px;
}

.alert-wrapper[data-type="deleteChat"]{
  width: 440px;
}

.alert-wrapper[data-type="deleteMessage"]{
  width: 470px;
  text-align: left;
}

.alert-wrapper[data-type="savechanges"]{
  width: 470px;
}

.alert-wrapper[data-type="deleteMessage"] label{
  display: inline-flex;
  cursor: pointer;
}

.alert-wrapper[data-type="deleteMessage"] input[type="checkbox"]{
  transform: scale(1.7); /* увеличиваем чекбокс */
}

.alert-wrapper[data-type="deleteMessage"] label p{
  margin-left: 15px;
  font-size: 18px;

}
/*-------------------------------------------------------------------------------------------------------------------------*/

.userManual-wrapper{
  background-color: var(--whiteClearColor);
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.userManualTitle{
  text-align: center;
  padding: 15px 0 20px 0;
  font-size: 20px;
}


.userManual{
  padding:24px 100px 25px 100px;
}

.userManualElement-wrapper{
  position: relative;
 
}

.userManualElement-wrapper::after{
  position: absolute;
  content: "";
  width: 100%;
  bottom: 0;
  height: 1px;
  background-color: var(--greyEasyColor);
}

.userManualElement-wrapper:last-child:after{
  height: 0;
  /*display: none;*/
}

.userManualElementTitle-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  padding: 15px 5px 15px 3px;
}

 
.userManualElementTitle-wrapper:active{
  color: var(--orangeBrightColor);
}

.userManualElementTitle-wrapper:active > img{
  filter: invert(34%) sepia(85%) saturate(7438%) hue-rotate(16deg) brightness(103%) contrast(101%); /* fill svg image to orange color on :active event */
}


.userManualElementTitle-wrapper img{
  min-width: var(--dropdownContentElementTriangle, 0);
  margin-top: 5px;
  margin-left: 10px;
}

.userManualElementTitle{
  width: 96%;
  word-break: break-all;
}

.userManualElementContent-wrapper{
  display: block;
  padding: 0 3px 15px 3px;
  line-height: 1.4;
}


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

.call{
  position: absolute;
  top:100px;
  right: 30%;
  box-shadow: 0px 6px 19px 7px rgba(0,0,0,0.07);
  
}

.call-wrapper{
  background-color: var(--whiteClearColor);
  width: 680px;
  height: 615px;
  border-radius: var(--defaultBorderRadius);
  position:absolute;
  top: 100px;  /* Центрируем по вертикали */
  left: 58.45%; /* Центрируем по горизонтали */
  transform: translate(-50%, 0%); /* Смещаем элемент на половину его размеров */
  background-color: var(--whiteClearColor);
  border-radius: var(--defaultBorderRadius);
  z-index: 1000;
/*   */
}

.callTitle-wrapper{
  position: relative;
/*  padding: 25px 0; */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.callTitle-wrapper .conciseScreenSwitch{
  position: absolute;
  right: 45px;
}

.callContent-wrapper{
  position: relative;
  width: 100%;
  height: 555px;
/*  padding: 65px 50px 90px 50px; */
}


.callContentUserData-wrapper{
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.callContentUserData-wrapper p{
  font-size: 24px;
}

.callContentUserData-wrapper span{
  margin-top: 10px;
}


.callContentFeatures-wrapper{
  position: absolute;
  left: 107.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 465px;
  height: 150px;
  border-radius: var(--defaultBorderRadius);
  background:  rgba(255, 255, 255, 0.616);
  backdrop-filter: blur(5px);
}

.callContentFeature-wrapper{
  text-align: center;
  cursor: auto;
  margin: 0 12px;
}


.callContentFeature-wrapper img{
  cursor: pointer;
  height: 72px;
}

.callContentFeature-wrapper p{
  font-size: 16px;
  margin-top: 3px;
}


.callContentFeature-wrapper img:hover{
  
}
 

.videoCallSelfAvatar{
  position: absolute;
  top: 15px;
  right: 15px;
  /*
  width: 140px;
  height: 160px;
  */
  width: 131px;
  height: 150px;
}

.videoCallSelfAvatar img{

  background-size: contain;
  background-position: center;  
  background-repeat: no-repeat; 
  width: 100%;
  height: 100%;
  border-radius: var(--defaultBorderRadius);
}



.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"] .callContentUserData-wrapper,
.call-wrapper[data-callType="audio"][data-callStatus="incomingAudioCall"] .callContentUserData-wrapper,
.call-wrapper[data-callType="audio"][data-callStatus="outgoingAudioCall"] .callContentUserData-wrapper,
.call-wrapper[data-callType="video"][data-callStatus="incomingVideoCall"] .callContentUserData-wrapper{
  top:65px;
}
.call-wrapper[data-callType="video"][data-callStatus="conversationVideoCall"] .callContentUserData-wrapper,
.call-wrapper[data-callType="video"][data-callStatus="outgoingVideoCall"] .callContentUserData-wrapper{
  top:305px;
}

.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"] .callContentUserData-wrapper p,
.call-wrapper[data-callType="audio"][data-callStatus="incomingAudioCall"] .callContentUserData-wrapper p,
.call-wrapper[data-callType="audio"][data-callStatus="outgoingAudioCall"] .callContentUserData-wrapper p,
.call-wrapper[data-callType="video"][data-callStatus="incomingVideoCall"] .callContentUserData-wrapper p{
  margin-top: 30px;
}

.call-wrapper[data-callType="video"][data-callStatus="conversationVideoCall"] .callContent-wrapper{
  background-image: url('../images/usersPhotos/someUser.png');
  background-position: center;  
  background-repeat: no-repeat; 
  border-bottom-left-radius: var(--defaultBorderRadius);
  border-bottom-right-radius: var(--defaultBorderRadius);  
}
.call-wrapper[data-callType="video"][data-callStatus="conversationVideoCall"] .callContentUserData-wrapper{
  color: var(--whiteClearColor);
}


.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"] .callContentFeatures-wrapper,
.call-wrapper[data-callType="audio"][data-callStatus="incomingAudioCall"] .callContentFeatures-wrapper,
.call-wrapper[data-callType="audio"][data-callStatus="outgoingAudioCall"] .callContentFeatures-wrapper,
.call-wrapper[data-callType="video"][data-callStatus="incomingVideoCall"] .callContentFeatures-wrapper{
  bottom: 65px;
}
.call-wrapper[data-callType="video"][data-callStatus="conversationVideoCall"] .callContentFeatures-wrapper,
.call-wrapper[data-callType="video"][data-callStatus="outgoingVideoCall"] .callContentFeatures-wrapper{
  bottom: 30px;
}

.call-wrapper[data-callType="video"][data-callStatus="outgoingVideoCall"] .videoCallSelfAvatar{
  background-color: #2b2b2b;
  border-radius: var(--defaultBorderRadius);
}


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

.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"]{
  background-color: #2b2b2b;
  width: 390px;
  height: 200px;
  position:fixed;
  left:15px;
  top:calc(100vh - 215px);
  transform: none;
}
.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callTitle-wrapper{
  height: 0;
}
.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callTitle-wrapper img{
  top: 16px;
  z-index: 100;
}
.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callContent-wrapper{
/*  height: calc(320px - 60px); */
  height: auto;
  margin-top: 15px;
}
.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callContentUserData-wrapper{
  position: static;
  color: var(--whiteClearColor);
}
.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callContentUserData-wrapper p{
  margin-top: 0;
  font-size: 20px;
}
.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callContentUserData-wrapper span{
  margin-top: 5px;
  font-size: 14px;
}

.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callContentFeatures-wrapper{
  background-color: #D9D9D9;
  position: static;
  margin: 15px auto 0 auto;
  width: 350px;
  height: 105px;
}

.call-wrapper[data-callType="audio"][data-callStatus="conversationAudioCall"][data-state="shrink"] .callContentFeatures-wrapper img{
  width: 55px;
  height: 55px;
}

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


.auth-wrapper{
  background-image: url('../images/wallpapers/auth.png');
  background-position: center;  
  background-size: cover; 
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.auth{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 50px 50px 50px;
  width: 450px;
  box-shadow: 0px 6px 19px 7px rgba(0,0,0,0.07);
  border-radius: 15px;
  background-color: var(--whiteClearColor);
  margin-bottom: 150px;
}

.auth p{
  color: var(--orangeBrightColor);
  font-size: 34px;
  font-family: 'Inter-SemiBold';
  margin-top: 15px;
}

.auth a{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth a:active{
  color: var(--orangeBrightColor);
}

#authForm{
  margin-top: 30px;
}

.checkboxContainer{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 15px;
  overflow-y: auto;
}

.checkbox-wrapper{
  font-size: 18px;
}

.checkbox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.checkbox input{
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.checkbox p{
  margin-left: 10px;
}

.messageContextMenu-wrapper{
  position: absolute;
  /*display: none;*/
  bottom: -135px;
  z-index: 100;
  border-radius: var(--defaultBorderRadius);
  color: var(--greyStrongColor);
  box-shadow: 0px 4px 15px 1px rgba(194, 194, 194, 0.75);
  width: 165px;
  font-size: 14px;
  padding: 5px 0;
  background-color: var(--whiteClearColor);
}


.messageContextMenu-wrapper.left{
	left:15px;
}

.messageContextMenu-wrapper.right{
	right:15px;
}

.messageContextMenuElement-wrapper{
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 9.5px 11px 13px;
  cursor: pointer;
}

.messageContextMenuElement-wrapper:hover{
  background-color: var(--greyEasyColor);
}

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

.replyToMessage-wrapper, .editMessage-wrapper{
  /*display: none;*/
  position: absolute;
  top:-85px;
  left:16px;
  background-color: white;
  border-radius: var(--defaultBorderRadius);
  height: 80px;
  width: calc(100% - 32px);
  padding: 15px 50px 15px 15px;
  box-shadow: 0px 4px 15px 1px rgba(194, 194, 194, 0.75);
  z-index: 99;
}

.replyToMessageUsername, .editMessageUsername{
  font-size: 16px;
}

.replyToMessageBody, .editMessageBody{
  margin-top: 10px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}


.replyToMessage-wrapper .closeButton, .editMessage-wrapper .closeButton{
  /*  top:calc((100% - 25px) / 2); */
  height: 20px;
  top:15px;
}

/*--------------------------------------------------------------------------------------*/
.copyMessageToClipboard-wrapper{
  display: block;
  position: absolute;
  top:-53px;
  left:16px;
  background-color: white;
  border-radius: var(--defaultBorderRadius);
  padding: 15px 20px 15px 17px;
  box-shadow: 0px 4px 15px 1px rgba(194, 194, 194, 0.75);
  z-index: 100;
  transition:opacity 0.45s ease-in-out, visibility 0.45s ease-in-out;

}
/*--------------------------------------------------------------------------------------*/

.settingBody-wrapper[data-settingBody="forwardMessages"]{
  width: 450px;
  height: 725px;
  z-index:1000;
}


.settingBody-wrapper[data-settingBody="forwardMessages"] .searchInput{
  height: 25px;
  font-size: 15px;
  cursor: pointer;
  padding: 0px 26px;
}

.forwardMessagesSearch-wrapper{
  display: flex;
  align-items: center;
  height: 60px;
  padding: 10px 15px 10px 15px;
}

.settingBody-wrapper[data-settingBody="forwardMessages"] .settingBody{
  padding: 0 0 45px 0;

}



.settingBody-wrapper[data-settingBody="forwardMessages"] .checkboxContainer{
  display: block;
  height: 460px;
  overflow-y: auto;
}

.settingBody-wrapper[data-settingBody="forwardMessages"] .userWrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 10px 15px;
  border-radius: 0px;
  height: 65px;
  width: 100%;
  cursor: pointer;
  margin-top: 2px;
}

.settingBody-wrapper[data-settingBody="forwardMessages"] .userWrapper[data-state="unselected"]{
  background-color: var(--whiteClearColor);
}
.settingBody-wrapper[data-settingBody="forwardMessages"] .userWrapper[data-state="selected"]{
  background-color: var(--greyEasyColor);
}

.settingBody-wrapper[data-settingBody="forwardMessages"] .checkboxContainer .userWrapper .userArea-wrapper{
  width: 85%;
  height: 100%;
  display: flex;
}

.settingBody-wrapper[data-settingBody="forwardMessages"] .selectButton-wrapper{
  width: 20px;
  height: 20px;
}
3
/*--------------------------------------------------------------------------------------*/
.settingBody-wrapper[data-settingBody="createNewGroup"] {
  width: 450px;
  z-index:1000;
}



.settingBody-wrapper[data-settingBody="createNewGroup"] .settingBody[data-body="addGroupMembers"]{
  padding: 0 0 45px 0;

}

.settingBody-wrapper[data-settingBody="createNewGroup"] .settingBody[data-body="setGroupName"]{
}

.settingBody-wrapper[data-settingBody="createNewGroup"] .searchInput{
  height: 25px;
  font-size: 15px;
  cursor: pointer;
  padding: 0px 26px;
}

.addGroupMembersSearch-wrapper{
  display: flex;
  align-items: center;
  height: 60px;
  padding: 10px 15px 10px 15px;
}



.settingBody-wrapper[data-settingBody="createNewGroup"] .checkboxContainer{
  display: block;
  max-height: 460px;
  overflow-y: auto;
}

.settingBody-wrapper[data-settingBody="createNewGroup"] .userWrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 10px 15px;
  border-radius: 0px;
  height: 65px;
  width: 100%;
  cursor: pointer;
  margin-top: 2px;
}

.settingBody-wrapper[data-settingBody="createNewGroup"] .userWrapper[data-state="unselected"]{
  background-color: var(--whiteClearColor);
}
.settingBody-wrapper[data-settingBody="createNewGroup"] .userWrapper[data-state="selected"]{
  background-color: var(--greyEasyColor);
}


.settingBody-wrapper[data-settingBody="createNewGroup"] .checkboxContainer .userWrapper .userArea-wrapper{
  width: 85%;
  height: 100%;
  display: flex;
}

.settingBody-wrapper[data-settingBody="createNewGroup"] .selectButton-wrapper{
  width: 20px;
  height: 20px;
}


.actionWithMessage-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  cursor: pointer;
  margin: 5px 0 10px 0;
  border-radius: var(--defaultBorderRadius);
}

.verticalLine{
  display: block;
  content: "";
  height: 90%;
  border-radius: var(--defaultBorderRadius);
}


.message-wrapper.outgoing .actionWithMessage-wrapper{
  background-color:#e7e7e7;
  border-top-right-radius: 0px;
  color: #585858;
  padding: 8px 8px 8px 11.5px;
  /* border: 1px solid #505050; */
}

.message-wrapper.incoming .actionWithMessage-wrapper{
  background-color: #919191;
  border-top-left-radius: 0px;
  color: var(--whiteClearColor);
  padding: 8px 8px 8px 11px;
  /* border: 1px solid var(--whiteClearColor); */
}

.message-wrapper.outgoing .actionWithMessage-wrapper:active{
  background-color:#dddddd;
}

.message-wrapper.incoming .actionWithMessage-wrapper:active{
  background-color: #9b9b9b;
}



.message-wrapper.outgoing .verticalLine{
/*  background-color: #434343; */
  background-color: #585858;
  width: 6px;
}

.message-wrapper.incoming .verticalLine{
  background-color: var(--whiteClearColor);
  width: 5px;
}






.actionWithMessage{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  padding: 4px 0 4px 0px;
  margin-left: 8px;
  width: calc(100% - 6px - 8px);
  height: 100%;
}

.actionWithMessageText{
  width: 100%;
  overflow: hidden;  
  text-overflow: ellipsis;
  white-space: nowrap;
}

.globalBlurBlock{
  position: fixed;
  top:0px;
  left:0px;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(6px);
  z-index: 999;
}


.actionWithMessage span{
  margin-top:0;
  margin-left:4px;
  font-family: 'Inter-Medium' !important;
}

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

.settingBody-wrapper[data-settingBody="createNewPool"]{
  width: 450px;
  top: 25px;
  left: calc((100% - 450px) / 2);
}


.settingBody-wrapper[data-settingBody="createNewPool"] .checkboxContainer{
  display: block;
  max-height: 460px;
  overflow-y: auto;
}

.settingBody-wrapper[data-settingBody="createNewPool"] .checkboxItem-wrapper{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor:pointer;
}

.settingBody-wrapper[data-settingBody="createNewPool"] .checkboxItem-wrapper img{
  width:20px;
  height: 20px;
}

.settingBody-wrapper[data-settingBody="createNewPool"] .selectButton-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}

.settingBody-wrapper[data-settingBody="createNewPool"] .checkboxItemTitle{
  margin-left: 10px;
  font-size: 18px;
}


/**/

.settingBody-wrapper[data-settingBody="createNewPool"] .createNewPoolInput-wrapper, .createNewPoolInput-wrapper input{
  width: 100% !important;
  height: 25px !important;
  font-size: 18px;
}

.settingBody-wrapper[data-settingBody="createNewPool"] .createNewPoolInput-wrapper input{
  margin-bottom: 2px;
  padding: 0 25px 0 4px;
}



.settingBody-wrapper[data-settingBody="createNewPool"] .createNewPoolInput-wrapper::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--greyMediumColor);
}


.settingBody-wrapper[data-settingBody="createNewPool"] .answerOptions-wrapper{
  width: 100%;
  margin-top: 7px;
}


.answerOptionItem-wrapper:first-child{
  margin-top: 0px;
}

.answerOptionItem-wrapper{
  position: relative;
  margin-top: 15px;
}

.answerOptionItem-wrapper, .answerOptionItem-wrapper input{
  width: 100% !important;
  height: 25px !important;
  font-size: 18px;
}

.answerOptionItem-wrapper input{
  margin-bottom: 2px;
  padding: 0 25px 0 4px;
}

.answerOptionItem-wrapper img{
  position: absolute;
  top: 2.5px;
  right: 2.5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
 
.answerOptionItem-wrapper::after{
  display: block;
  content:"";
  width: 100%;
  height: 1px;
  background-color: var(--greyMediumColor);
}
/**/



.addOptionButton-wrapper{
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

.addOptionButton-wrapper img{
  width: 25px;
  height: 25px;
}

.addOptionButton-wrapper span{
  margin-left: 5px;
  font-size: 18px;
}


/*-------------------------------------------------------------------------------------*/
.settingBody-wrapper[data-settingBody="poolResults"]{
  display: none;
  width: 450px;
  top: 25px;
  left: calc((100% - 450px) / 2);
}

.settingBody-wrapper[data-settingBody="poolResults"] .settingBody{
  max-height: 840px;
  overflow-y: auto;
}

.settingBody-wrapper[data-settingBody="poolResults"] .votedUsers-wrapper{
  display: block;
  max-height: 400px;
  overflow-y: auto;
  width: 100%;
  padding: 10px 20px 10px 20px;
  background-color: #f5f5f5;
  border-radius: var(--defaultBorderRadius);
}

.settingBody-wrapper[data-settingBody="poolResults"] .userWrapper{
  position: relative;
  height: 60px;
}

.settingBody-wrapper[data-settingBody="poolResults"] .userWrapper::after{
  position: absolute;
  content: "";
  bottom:0;
  width: 100%;
  height: 1px;
  background-color: #cecece;
}

.settingBody-wrapper[data-settingBody="poolResults"] .userWrapper:last-child:after{
  display: none;
}

.settingBody-wrapper[data-settingBody="poolResults"] .userArea-wrapper{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.settingBody-wrapper[data-settingBody="poolResults"] .userData-wrapper{
  font-size: 18px;
  display: block;
}

.noEffects, .noEffects:hover, .noEffects:active{
  cursor: auto !important;
  background-color: none !important;
  box-shadow: none !important;
}

.authTwoFactor, .resetPassword, .authResult{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 6px 19px 7px rgba(0,0,0,0.07);
  border-radius: 15px;
  background-color: var(--whiteClearColor);
}
.authTwoFactor{
  width:500px;
}
.authTwoFactor + .authResult{
  width:700px;
  margin-bottom: 170px;
}
.resetPassword, .authResult {
  width:450px;
  margin-bottom: 170px;
}


.authTwoFactor, .resetPassword{
  margin-bottom: 150px;
}
.authTwoFactor{
  padding: 10px 30px 40px 30px;
}
.resetPassword, .authResult{
  padding: 10px 50px 80px 50px;
}

.authTwoFactor[data-state="default"] + .authResult, .resetPassword[data-state="default"] + .authResult{
  display: none;
}
.authTwoFactor[data-state="success"], .resetPassword[data-state="success"]{
  display: none;
}
.authTwoFactor[data-state="success"] + .authResult, .resetPassword[data-state="success"] + .authResult{
  display: flex;
}


.authTwoFactor .header, .resetPassword .header, .authResult .header{
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.authTwoFactor .returnBackButton, .resetPassword .returnBackButton{
  left:-10px;
}

.authTwoFactor > p[data-text="title"], .resetPassword > p[data-text="title"], .authResult > p[data-text="title"]{
  color: var(--orangeBrightColor);
  font-family: 'Inter-SemiBold';
  margin-top: 15px;
  text-align: center;
}

.authTwoFactor > p[data-text="title"], .resetPassword > p[data-text="title"]{
  font-size: 32px;
}

.authResult > p[data-text="title"]{
  font-size: 24px;
  line-height:1.4;
}

.authTwoFactor + .authResult > p[data-text="title"]{
  color:#404040;
}
.resetPassword + .authResult > p[data-text="title"]{
  color:#EA3200;
}




.authTwoFactor > p[data-text="subtitle"], .resetPassword > p[data-text="subtitle"], .authResult > p[data-text="subtitle"]{
  font-size: 18px;
  text-align: center;
  width: 95%;
  margin-top: 12px;
  line-height:1.5;
}
.authTwoFactor #authForm, .resetPassword #authForm{
  margin-top: 40px;
}

.authTwoFactor .sendButton, .resetPassword .sendButton, .authResult .doneButton{
  height: 50px;
  border-radius: 40px;
  font-family: 'Inter-Regular';
  font-size: 20px;
}
/*.authTwoFactor .sendButton, .resetPassword .sendButton{
  width: 95%;
}
.authResult .doneButton{
  width: 65%;
}
*/
.authTwoFactor .resendButton{
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background:none;
}

.authTwoFactor .resendButton:disabled{
	pointer-events: none;
}


.voiceMessageRecorder-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  background-color: #E8E8E8;
  border-radius: 8px;
  font-size: 16px;
  color: #404040;
  margin-right: 50px;
  margin-left: 16px;
  margin-top:80px;
}

.voiceMessageRecorder-wrapper .time, 
.voiceMessageRecorder-wrapper p, 
.voiceMessageRecorder-wrapper button{
  font-family: 'Arial';
  font-size: inherit;
  color: inherit;
}

.voiceMessageRecorder-wrapper button:active{
  color: #EA3200;
}


.recIndicator{
  position: absolute;
  left: 15px;
  top: 13px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  outline: 2px solid white;
}
.time{
  position: absolute;
  display: block;
/*  left: 35px; */
}

.voiceMessageRecorder-wrapper .time{
  left: 35px;
}

.voiceMessageRecorder-wrapper button{
  background: transparent;
}
.voiceMessageRecorder-wrapper button{
  background: transparent;
}

.voiceMessageRecorder-wrapper[data-state="preprocess"] > .recIndicator{
  display: none;
}
.voiceMessageRecorder-wrapper[data-state="process"] > .recIndicator{
  display: block;
}
.voiceMessageRecorder-wrapper[data-state="preprocess"] > button{
  display: block;
}
.voiceMessageRecorder-wrapper[data-state="preprocess"] > p{
  display: none;
}
/*.voiceMessageRecorder-wrapper[data-state="process"] > button{
  display: none;
}*/
.voiceMessageRecorder-wrapper[data-state="process"] > p{
  display: block;
}

.recordButton{
  position: absolute;
  right: -36px;
  top:-18px;
  display: flex;
}

.recordButton #start,
.recordButton #stop{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #d9d9d9;
  background-color: antiquewhite;
}
.recordButton #start{
  background: linear-gradient(135deg, #9b9b9b 0%, #656565 50%, #1a1a1a 100%);
}
.recordButton #stop{
  background-color: #EA3200;
}

.recordButton #start,
.recordButton #stop{
  display: block;
}
.recordButton #start:disabled,
.recordButton #stop:disabled{
  display: none;
  cursor: auto;
}

.recordButton #start img,
.recordButton #stop img{
  margin-top: 4px;
}

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

.returnBackButton,
.documentsManagementTitle-wrapper .navigation ul li,
.addDocumentButton,
.uploadDocumentButton,
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName span{
  cursor: pointer;
}

.documentsManagementTitle-wrapper .returnBackButton,
.documentsManagementTitle-wrapper .navigation,
.documentsManagementContent-wrapper,
.addDocument-wrapper .uploadFileButton{
  border-radius: var(--defaultBorderRadius)
}

.documentsManagementTitle-wrapper .navigation ul,
.documentsManagementTitle-wrapper .navigation ul li{
  border-radius:8px;
}


.documentsManagementTitle-wrapper .returnBackButton,
.controlPanel-wrapper .addDocumentButton{
  display: flex;
  justify-content: center;
  align-items: center;
}

.documentsManagementTitle-wrapper .returnBackButton,
.documentsManagementTitle-wrapper .navigation ul li{
  font-size: 16px;
}
.addDocumentButton,
.uploadDocumentButton{
  font-size: 18px;
}

.documentsManagementTitle-wrapper .returnBackButton,
.documentsManagementTitle-wrapper .navigation,
.controlPanel-wrapper .addDocumentButton,
.documentsManagementContent-wrapper{
  background-color: var(--whiteClearColor);
}

.documentsManagementTitle-wrapper .navigation ul,
.documentsManagementTitle-wrapper .navigation ul li{
  background-color: var(--greyEasyColor);
}




.documentsManagementTitle-wrapper{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}



.documentsManagementTitle-wrapper .returnBackButton{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
  width: 106px;
  height: 52px;
}





.documentsManagementTitle-wrapper .navigation{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 28px;
  height: 60px;
}


.documentsManagementTitle-wrapper .navigation ul{
  text-align: center;
}

.documentsManagementTitle-wrapper .navigation ul li{
  margin: 0 20px;
  padding: 6px 24px;
  display: inline-block;
}

.documentsManagementTitle-wrapper .navigation ul li[data-state="active"]{
  background: var(--redGradientColor);
  color: white;
}




.documentsManagementTitle-wrapper .navigation ul li:first-child{
  margin-left: 0px;
}
.documentsManagementTitle-wrapper .navigation ul li:last-child{
  margin-right: 0px;
}


.returnBackButton > img{
  margin-right: 10px;
}
.addDocumentButton img{
  margin-right: 4px;
  width: 24px;  
}

.downloadedDocument{
  display: flex;
  align-items: center;
  padding: 14px;
  margin-top: 30px;
  border-radius: var(--defaultBorderRadius);
  border: 1px solid var(--greyMediumColor);
}
.downloadedDocument span{
  margin: 0 6px 0 10px;
  color:var(--greyStrongColor);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px - 6px - 10px - 28px); 
}
.downloadedDocument .removeButton{
  position: relative;
  cursor: pointer;
  width: 25px;
}

.documentsManagementContent-wrapper{
  width: 100%;
}
.documentsManagementContent-wrapper[data-state="notfound"],
.documentsManagementContent-wrapper[data-state="clear"]{
  padding: 54px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.documentsManagementContent-wrapper[data-state="notfound"] img,
.documentsManagementContent-wrapper[data-state="clear"] img{
  width: 56px;
}

.documentsManagementContent-wrapper[data-state="notfound"] .title,
.documentsManagementContent-wrapper[data-state="clear"] .title{
  margin-top: 18px;
}

.documentsManagementContent-wrapper[data-state="notfound"] div{
  text-align: center;
}
.documentsManagementContent-wrapper[data-state="notfound"] p{
  font-size: 16px;
}
.documentsManagementContent-wrapper[data-state="notfound"] p:last-child{
  margin-top: 10px;
}

.uploadDocumentButton{
  text-decoration: underline;
  text-underline-offset:6px;
}

.documentsManagementContent-wrapper[data-state="notfound"] div,
.documentsManagementContent-wrapper[data-state="clear"] .uploadDocumentButton{
  margin-top: 16px;
}


/*--*/

.addDocument-wrapper{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--whiteClearColor);
  border-radius: var(--defaultBorderRadius);
  box-shadow: 0px 4px 15px 1px rgba(214, 214, 214, 0.75);
  font-size: 20px;
  z-index: 1000;
  width: 470px;
}

.addDocument-wrapper .header{
  position: relative;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.addDocument-wrapper .body{
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 45px;
  padding-top: 25px;
}

.addDocument-wrapper .body .inner{
  padding: 0 10px;
}

.addDocument-wrapper  .documentName-wrapper{
  position: relative;
  display: block;
}


.addDocument-wrapper  .documentName{
  height: 23px;
  margin-top: 7px;
}

.addDocument-wrapper  .documentName input{
  margin-top: 0;
  height: 100%;
  background-color: transparent;
  width:100%; 
  padding: 0 5px; 
  font-size: 18px;
  color: var(--greyStrongColor);
}
.addDocument-wrapper  .documentName input::placeholder{
  color: #c5c5c5;
}

.addDocument-wrapper .documentName::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  background-color: var(--greyStrongColor);
  width: 100%;
  height: 1px;
}

.addDocument-wrapper .uploadFileButton{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  width: 100%;
  height: 120px;
  font-size: 14px;
  letter-spacing:.2px;
  background-color: #f4f4f4;
  padding: 28px 0;
}

.addDocument-wrapper img{
  width: 36px;
}

.addDocument-wrapper .uploadFileButton span{
  font-family: 'Inter-SemiBold';
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-left: 2px;
}

.addDocument-wrapper #addButton{
  margin-top: 56px;
}

.addDocument-wrapper #addButton:disabled{
  opacity: 0.4;
  cursor: auto;
}


/*--*/

.documentsManagementContent-wrapper[data-state="documents"]{
  height: calc(100% - 60px - 10px - 70px - 10px);
}
.documentsManagementContent-wrapper[data-state="documents"] .header{
  height: 56px;
  border-top-left-radius: var(--defaultBorderRadius);
  border-top-right-radius: var(--defaultBorderRadius);
  font-size:18px;
  font-family:'Inter-Medium';
}

.documentsManagementContent-wrapper[data-state="documents"] .header,
.documentsManagementContent-wrapper[data-state="documents"] .content .notice-wrapper .notice{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}


.documentsManagementContent-wrapper[data-state="documents"] .content .notice-wrapper{
  position: relative;
}
.documentsManagementContent-wrapper[data-state="documents"] .content .notice-wrapper .notice::after{ /* grey afterline */
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: "";
  border-radius: var(--defaultBorderRadius);
  background-color: var(--greyEasyColor);
}

.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="name"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="name"]{
  width: 31.5%;
  padding-right:30px;
}
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="section"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="section"]{
  width: 10%;
  padding-right:25px;
}
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="type"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="type"]{
  width: 14.5%;
  padding-right:15px; 
}
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="date"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="date"]{
  width: 12%; 
  padding-right:15px;
}
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="author"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="author"]{
  width: 13.5%;  
  padding-right:25px;
}
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="access"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="access"]{
  padding-right:18px;
  max-width: 172px;
  width: 11%;
}
.documentsManagementContent-wrapper[data-state="documents"] .header .columnName[data-value="action"],
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="action"]{
  max-width: 104px;
  width: 7.5%;
}


.documentsManagementContent-wrapper[data-state="documents"] .header .columnName span{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column{
  display: flex;
  align-items: center;
}

.documentsManagementContent-wrapper[data-state="documents"] .header .columnName img{
  height: 15px;
  margin-left: 4px;
}

/*--*/

.documentsManagementContent-wrapper[data-state="documents"] .content{
  display: block;
  height: calc(100% - 1px - 56px);
  overflow-y: auto;
  font-size: 16px;
}

/* -- */

.documentsManagementContent-wrapper[data-state="documents"] .header,
.documentsManagementContent-wrapper[data-state="documents"] .content .notice-wrapper .notice{
  padding: 0 0 0 16px;
  background-color: white;
}

.documentsManagementContent-wrapper[data-state="documents"] .content .notice-wrapper .notice{
  height: 60px;
}
.documentsManagementContent-wrapper[data-state="documents"] .content .notice-wrapper .notice:hover{
  background-color: var(--greyEasyColor);
  border-radius: var(--defaultBorderRadius);
}

.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column .documentImage{
  height: 34px;
  margin-right: 10px;
}

.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="action"] img{
  padding: 0;
  margin: 0;
  height: 22px;
}
.documentsManagementContent-wrapper[data-state="documents"] .content .notice .column[data-value="action"] img:not(:first-child){
  margin-left:10px;
}