/*
----------------
Стиль версии WEB
----------------
*/

body {
  
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  margin: auto;
  color: #3C4549;
  max-width: 1150px;
  background-color: #F7F8F8;
  position: relative;

}

body a{
  
  text-decoration: none;

}

div {
  
  overflow-wrap: normal;
  word-break: normal;
  line-break: auto;
  hyphens: manual;
  word-wrap: break-word;
  
}

textarea {
  
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  resize: vertical;

}

/*-----Добавлено с версии 1.1.2------*/

.fa-heart {
  
  display: inline-block;
  transform-origin: 50% 50% 0;
  vertical-align: middle;
  line-height: 27px !important;

}

.heartwrap span {
  
  text-align: center;

}

.heartwrap:hover > span i {
  
  animation: 1500ms ease 0s normal none 1 running pulse;

}

@keyframes pulse {
0% {
    transform: scaleX(1) scaleY(1);
}
10% {
    transform: scaleX(0.85) scaleY(0.85);
}
20% {
    transform: scaleX(1) scaleY(1);
}
30% {
    transform: scaleX(0.85) scaleY(0.85);
}
40% {
    transform: scaleX(1) scaleY(1);
}
50% {
    transform: scaleX(0.85) scaleY(0.85);
}
60% {
    transform: scaleX(1) scaleY(1);
}
70% {
    transform: scaleX(0.85) scaleY(0.85);
}
80% {
    transform: scaleX(1) scaleY(1);
}
90% {
    transform: scaleX(0.85) scaleY(0.85);
}
100% {
    transform: scaleX(1) scaleY(1);
}
}

.rating_progress {
  
  position: absolute;
  width: 160px;
  z-index: 1;
  top: 20%;
  left: 115px;
  transform: translateY(-0%);
  
}

.rating_progress2 {
  
  border-radius: 10px;
  padding: 4px;
  background-color: #3B3F44;
  color: white;
  font-size: 9px;
  position: relative;
  
}

.rating_progress5 {
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.rating_progress6 {
  
  background-color: #565D64;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  
}

.rating_progress3 {
  
  background: linear-gradient(45deg, #FF6666, #00BCD4);
  padding: 5px;
  border-radius: 10px;
  color: white;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  
}
                              
.rating_progress4 {
  
  border-radius: 10px 10px 0 0;
  padding: 0px;
  background-color: #3B3F44;
  color: white;
  font-size: 10px;
  width: 80px;
  position: relative;
  top: 1px;
  font-size: 9px;
  
}

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

.list-menu-title {
  
  background-color: #C4DAEC;
  text-transform: uppercase;
  font-weight: bold;
  color: #3E4C57;
  
}

button {
  
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; 

}

@media (max-width: 1000px) {
  
  .left {
    
    display: none;
  
  }
  
}

@media (max-width: 800px) {
  
  .right {
    
    display: none;
  
  }
  
}

.mail-list {
  
  vertical-align: top;
  width: 90%;
  position: relative;
  top: 3px;
  left: 5px;
  
}

.mail-list-avatar {
  
  vertical-align: top;
  width: 20px;
  
}

.mail-mess-send {
  
  margin-top: 5px;
  background-color: #E3EDF1;
  padding: 5px;
  border-radius: 4px;
  
}

.mail-mess-send-o {
  
  margin-top: 5px;
  padding: 5px;
  border-radius: 4px;
  
}

.mail-message-user {
  
  text-align: left;
  padding: 7px;
  
}

.mail-message-user-form {
  
  max-width: 60%;
  background-color: #F0F1F1;
  display: inline-block;
  padding: 6px 1em;
  border-radius: 13px;
  margin: 2px;
  text-align: left;
  position: relative;
  margin-left: 12px;
  vertical-align: top;
  
}

.mail-message-avatar {
  
  position: relative;
  top: 7px;
  
}

.mail-message-eye {
  
  position: relative;
  top: 5px;
  margin: 5px;
  
}

.mail-message-user-form::after {
  
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right: 15px solid #F0F1F1;
  left: -18px;
  top: 7px;

}

.mail-message-my {
  
  text-align: right;
  padding: 7px;
  
}

.mail-message-my-form {
  
  max-width: 60%;
  background-color: #DDECF8;
  display: inline-block;
  padding: 6px 1.5em;
  border-radius: 13px;
  margin: 2px;
  text-align: left;
  position: relative;
  margin-right: 12px;
  vertical-align: top;
  
}

.mail-message-my-form::after {
  
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left: 15px solid #DDECF8;
  right: -18px;
  top: 7px;

}

.mail-time {
  
  font-size: 10px;
  color: #9AA2A8;
  
}

.file_body {
  
  border: 1px #CFD8DC solid;
  border-radius: 4px;
  padding: 7px 0.7em;
  margin-bottom: 10px;
  background-color: white;
  
}

.bb_body {
  
  border: 1px #CFD8DC solid;
  border-radius: 4px;
  padding: 7px 0.7em;
  margin-bottom: 10px;
  background-color: white;
  
}  
  
.bb2 {
  
  border: 1px #CFD8DC solid;
  border-radius: 4px;
  padding: 5px 0.7em;
  margin: 2px;
  background-color: white;
  line-height: 18px;
  color: #555A5C;
  display: inline-block;
  
}

.bb {
  
  border: 1px #CFD8DC solid;
  border-radius: 4px;
  padding: 5px 0.7em;
  margin: 2px;
  background-color: white;
  line-height: 18px;
  color: #555A5C;
  display: inline-block;
  
}

.smiles_body2 {
  
  margin-bottom: 11px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  
} 
  
.smile-spis {
  
  height: 150px;
  border: 2px #7EA2BE solid;
  background-color: white;
  overflow: auto;
  
}  
  
.smile-optimize {
  
  width: 14.2%;
  height: 40px;
  text-align: center;
  overflow: hidden;  
  display: inline-block;
  position: relative;
  margin-bottom: -4px;
  color: #C6D7E4;
  
}

._smile {
  
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
  
}

.smile-optimize:hover {

  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
  
}
  
.smiles_body {
  
  margin-bottom: 11px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  
} 
  
.smiles_section_optimize {

  background-color: #7EA2BE;
  
}

.files-wrapper {    
  
  display: block;
  width: 50%;
  float: left;
  
}
  
.__files {
  
  display: block;
  border: 1px #E0E7EB solid;
  border-radius: 4px;
  position: relative;
  background: #fff;
  margin: 4px;
  color: #474747;
  z-index: 0;
  height: 160px;
  overflow: hidden;
  
}  

@media only screen and (min-width: 420px) {
  
  .files-wrapper {    
    
    width: 33.333%;
  
  }
  
  .__files {    
    
    height: 180px;
  
  }

}    
  
.__files:hover {
  
  background: #F0F5F8;
    
}
  
.files-body {
  
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  margin: 3px;
  
}

.files-like_ {
  
  background: rgba(50, 50, 50, 0.8);
  color: white;
  padding: 5px 0.7em;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 4px 0 4px;
  font-size: 13px;

}
  
.files-or-dir {
  
  font-size: 13px;
  background: rgba(50, 50, 50, 0.8);
  color: white;
  padding: 5px 0.7em;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px 0 4px 0;

}
  
.files-or-dir-text {
  
  background: rgba(50, 50, 50, 0.8);
  color: white;
  padding: 5px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0 0 4px 4px;

}
  
.files-folder {
  
  color: #666C70; 
  position: absolute; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  top: 50%; 
  text-align: center; 
  width: 100%;
  
}
  
.files-folder-status {

  position: absolute; 
  left: 50%; 
  transform: translate(-50%, -40%); 
  top: 40%; 
  text-align: center; 
  width: 100%;
  color: #3B3E41;
  
}

.count-panel-top {
  
  background-color: red;
  font-size: 10px;
  padding: 0px 0.5em;
  line-height: 16px;
  border-radius: 10px;
  display: inline-block;
  color: white;
  position: absolute;
  right: -5px;
  top: 10px;
  z-index: 1;
  border: 1px white solid;

}

.menu-list-text-main {
  
  overflow: hidden;   
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: bold;
  color: #3A474C;
  width: 100%;
  text-align: center;

}

.menu-list-count-main {
  
  overflow: hidden;
  background-color: #7A888D;
  padding: 0 0.8em;
  height: 16px;
  line-height: 16px;
  text-align: center;
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  border-radius: 5px;

}

.menu-icons-main {
  
  overflow: hidden; 
  text-align: center; 
  line-height: 70px; 
  width: 70px; 
  height: 70px; 
  color: white; 
  display: inline-block; 
  border-radius: 100%;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%); 

}

.main-wrapper {    
  
  display: block;
  width: 25%;
  float: left;
  
}
  
.main2 {
  
  display: block;
  border: 1px #E0E7EB solid;
  border-radius: 4px;
  position: relative;
  background: #fff;
  margin: 4px;
  color: #474747;
  z-index: 0;
  height: 130px;
  overflow: hidden;
  
}      
  
.main2:hover {
  
  background: #F0F5F8;
    
}
  
.main-body {
  
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  margin: 3px;
  
}

.input-tumb {
  
  display: none;

}

.tumb {
  
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);

}

.tumb::after {
  
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  top: 2.5px;
  left: 3px;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: white;

}

.tumb::before {
  
  position: absolute;
  content: '';
  width: 38px;
  height: 18px;
  top: 3px;
  left: 4px;
  border-radius: 0.75em;
  transition: 250ms ease-in-out;
  background-color: #B4C1CA;
  
}

.input-tumb:checked + .tumb::before { 
  
  background-color: #15C51D;

}

.input-tumb:checked + .tumb::after {
  
  left: 24px;
  
}

.tumb2 {
  
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
  box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);

}

.tumb2::after {
  
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  top: 2.5px;
  right: 3px;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: white;

}



.tumb2::before {
  
  position: absolute;
  content: '';
  width: 38px;
  height: 18px;
  top: 3px;
  right: 4px;
  border-radius: 0.75em;
  transition: 250ms ease-in-out;
  background-color: #15C51D;
  
}

.input-tumb:checked + .tumb2::before { 
  
  background-color: #B4C1CA;

}

.input-tumb:checked + .tumb2::after {
  
  right: 24px;
  
}

.menu-list-all {
  
  height: 75px;
  width: 75px;
  line-height: 75px;
  background-color: #DFE8EC;
  border-radius: 4px; 
  max-width: 75px; 
  margin: 1px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  
}

.us-info {
  
  width: 89%; 
  vertical-align: middle; 
  position: relative;  
  left: 4px;

}

.us-avatar {
  
  width: 30px; 
  vertical-align: top;
  text-align: center;

}

.h1 {

  padding: 7px 0.8em;
  margin: 2px;
  line-height: 18px;
  color: #546E7A;
  display: inline-block;
  
}

.h {

  border-bottom: 3px solid #28B82D;
  
}

.menu-list-count {
  
  overflow: hidden;
  background-color: #7A888D;
  padding: 0 0.6em;
  height: 16px;
  line-height: 16px;
  text-align: center;
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  border-radius: 5px;

}

.menu-list-text {
  
  overflow: hidden;   
  position: absolute;
  bottom: 2.5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: #3A474C;

}

.menu-list-optimize {
  
  overflow-x: auto;
  padding: 5px;
  width: 600px;
  white-space: nowrap;

}

.menu-list {
  
  overflow: hidden;   
  width: 90px; 
  height: 90px;
  display: inline-block;
  margin-bottom: -4px;
  position: relative;

}

.menu-icons-small {
  
  overflow: hidden; 
  text-align: center; 
  line-height: 26px; 
  width: 26px; 
  height: 26px; 
  color: white; 
  border-radius: 100%;
  display: inline-block; 
  margin-bottom: -8px;

}

.menu-icons-optimize {
  
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: 5px;

}

.menu-icons {
  
  overflow: hidden; 
  text-align: center; 
  line-height: 55px; 
  width: 55px; 
  height: 55px; 
  color: white; 
  display: inline-block; 
  border-radius: 100%;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%); 

}

.count-panel-bottom {
  
  background-color: red;
  font-size: 11px;
  padding: 0px 0.5em;
  line-height: 16px;
  border-radius: 10px;
  display: inline-block;
  color: white;
  position: absolute;
  right: 9px;
  top: 0;
  z-index: 1;
  border: 1px white solid;

}

.count-notif {
  
  background-color: red;
  color: white;
  font-size: 10px;
  padding: 1px 0.5em;
  border-radius: 5px;

}

.icons-notif {
  
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 100%;
  border: 2px white solid;
  position: absolute;
  bottom: -20px;
  right: -1px;
  color: white;
  
}

.notif-info {
  
  width: 100%; 
  vertical-align: top; 
  position: relative; 
  top: 4px; 
  left: 4px;

}

.notif-avatar {
  
  width: 25px; 
  vertical-align: top;
  text-align: center;

}

.avatar-choose {
  
  top: 2px; 
  right: 2px; 
  color: white; 
  z-index: 1; 
  position: absolute; 
  background-color: #39CF3F; 
  line-height: 33px; 
  width: 33px; 
  height: 33px; 
  border-radius: 100%; 
  text-align: center;

}

.avatar-choose:hover {
   
  background-color: #36AD3A; 

}

.photos-wrapper-avatar {    
  
  display: inline-block;
  width: 50%;
  
}
  
.photos-avatar {
  
  display: block;
  border: 1px #E0E7EB solid;
  border-radius: 4px;
  position: relative;
  background: #fff;
  margin: 4px;
  color: #474747;
  z-index: 0;
  height: 100px;
  overflow: hidden;
  
}   
  
.photos-avatar:hover {
  
  background: #F0F5F8;
    
}
  
.photos-body-avatar {
  
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  margin: 3px;
  
}

.avatar {
  
  position: relative; 
  bottom: 1px; 
  display: inline-block; 
  vertical-align: middle;
  font-weight: bold; 
  color: white; 
  text-align: center; 
  overflow: hidden;
  border-radius: 50%;
  text-transform: uppercase;

}

.tmenu_body {
  
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  margin-bottom: 11px;
  text-align: center;

}

.tmenu-50-o::after {
  
  content: '';
  display: block;
  position: absolute;
  transform: translateX(-50%); 
  width: 0;
  height: 0;
  left: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #28B82D;

}

.tmenu-50 {

  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  background-color: white;
  word-break: break-all;
  width: 49.5%;
  background-color: white;
  text-transform: uppercase;
  font-weight: bold;
  color: #49555F;
  border-left: 1px #E0E6EB solid;

}

.tmenu-50:hover {
  
  background-color: #DAFFDC;

}

.tmenu-33-o::after {
  
  content: '';
  display: block;
  position: absolute;
  transform: translateX(-50%); 
  width: 0;
  height: 0;
  left: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #28B82D;

}

.tmenu-33 {

  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  background-color: white;
  word-break: break-all;
  width: 33%;
  background-color: white;
  text-transform: uppercase;
  font-weight: bold;
  color: #49555F;
  border-left: 1px #E0E6EB solid;

}

.tmenu-33:hover {
  
  background-color: #DAFFDC;

}

.comments-reply-user {
  
  font-size: 12px;
  margin-bottom: 5px;
  color: #6E7479;

}

.comments-reply {
  
  padding: 7px;
  margin: 4px;
  background-color: #EFF2F5;
  border-radius: 4px;

}

.comment-like {
  
  color: #8897A3;
  float: right;
  position: relative;
  top: 2px;
  font-size: 13px;
  font-weight: bold;

}

.comments-reply-no {
  
  color: #E28781;

}

.comments-info {
  
  width: 100%; 
  vertical-align: top; 
  position: relative; 
  top: 4px; 
  left: 4px;

}

.comments-optimize {
  
  padding: 4px;
  position: relative;

}

.comments-avatar {
  
  width: 25px; 
  vertical-align: top;

}

.time {
  
  font-size: 12px; 
  color: #75848B;

}

.btn-send {
  
  width: 38px; 
  height: 38px; 
  line-height: 38px; 
  color: white; 
  border-radius: 100%; 
  border: none; 
  background-color: #68996A;

}

.panel-bottom-comments-send {
  
  text-align: center;  
  display: inline-block; 
  width: 10%;

}

.panel-bottom-comments-bb-files {
  
  width: 13%; 
  display: inline-block; 
  text-align: center; 
  font-size: 19px;
  vertical-align: top;
  position: relative;
  top: 2px;

}

.panel-bottom-comments-text-form {
  
  font-size: 14px; 
  position: relative; 
  border: none;
  top: 5px;
  width: 100%;
  vertical-align: middle;
  resize: none;
  overflow: hidden;

}

.panel-bottom-comments-text {
  
  width: 59%; 
  display: inline-block; 
  text-align: center;

}

.panel-bottom-comments-smiles {
  
  width: 15%; 
  display: inline-block; 
  text-align: center; 
  font-size: 24px;
  vertical-align: top;

}

.panel-bottom-comments {
  
  box-sizing: border-box;
  overflow: hidden; 
  vertical-align: top; 
  padding: 3px;
  background-color: white; 
  display: inline-block; 
  border: 2px #D6D6D6 solid; 
  width: 90%; 
  border-radius: 30px;

}

.panel-bottom-comments-optimize {
   
  box-sizing: border-box;   
  position: relative;
  width: 100%;
  background-color: white;
  margin-bottom: 10px;
  padding: 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);

}

.panel-bottom-title {
  
  font-size: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  
}

.panel-bottom-optimize {
  
  background-color: #F9FCFD;
  position: fixed;
  bottom: 0;
  width: 100vw;
  color: #616A6F;
  max-width: 650px;
  align-items: center;
  justify-content: center;
  display: flex;
  z-index: 2;
  border-top: 1px #D6D6D6 solid;
  border-left: 1px #D6D6D6 solid;
  border-right: 1px #D6D6D6 solid;

}

.panel-bottom-user {
  
  display: inline-block;
  width: 25%;
  height: 50px;
  line-height: 22px;
  color: #616A6F;
  position: relative;
  text-align: center;

}

.panel-bottom-user:hover {
  
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.2);

}

.opacity_message {
  
  border-top: 8px solid transparent; 
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); 
  background-color: rgba(255, 255, 255, 0.5); 
  width: 100%; 
  bottom: 30px; 
  padding: 3px; 
  position: absolute;

}

.chevron {
  
  text-align: center;
  font-size: 18px;
  color: #616A6F;

}

.icons {
  
  color: #616A6F;

}

.btn-size-photo {
  
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  left: 50%;
  color: white;
  padding: 5px 2.5em;
  text-align: center;
  border-radius: 0 0 14px 14px;
  z-index: 1;
  border-left: 2px white solid;
  border-right: 2px white solid;
  border-bottom: 2px white solid;
  transform: translateX(-50%); 

}

.btn-request-likes-photo {
  
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 100%;
  z-index: 1;
  border: 2px white solid;

}

.btn-request-likes-photo:hover {
  
  background-color: rgba(0,0,0,0.8);  

}

.td-file2 {
  
  vertical-align: top;
  position: relative;
  top: 2px;
  left: 3px;
  word-break: break-all;
  overflow: hidden;
  
}

.td-file {
  
  width: 60px;
  vertical-align: top;
  position: relative;
  text-align: center;
  
}

.photos-wrapper {    
  
  display: block;
  width: 50%;
  float: left;
  
}
  
.photos {
  
  display: block;
  border: 1px #E0E7EB solid;
  border-radius: 4px;
  position: relative;
  background: #fff;
  margin: 4px;
  color: #474747;
  z-index: 0;
  height: 160px;
  overflow: hidden;
  
}  

@media only screen and (min-width: 420px) {
  
  .photos-wrapper {    
    
    width: 33.333%;
  
  }
  
  .photos {    
    
    height: 180px;
  
  }

}    
  
.photos:hover {
  
  background: #F0F5F8;
    
}
  
.photos-body {
  
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  margin: 3px;
  
}

.photos-like_ {
  
  background: rgba(50, 50, 50, 0.8);
  color: white;
  padding: 5px 0.7em;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 4px 0 4px;
  font-size: 13px;

}
  
.photos-or-dir {
  
  font-size: 13px;
  background: rgba(50, 50, 50, 0.8);
  color: white;
  padding: 5px 0.7em;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px 0 4px 0;

}
  
.photos-or-dir-text {
  
  background: rgba(50, 50, 50, 0.8);
  color: white;
  padding: 5px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0 0 4px 4px;

}
  
.photos-folder {
  
  color: #666C70; 
  position: absolute; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  top: 50%; 
  text-align: center; 
  width: 100%;
  
}
  
.photos-folder-status {

  position: absolute; 
  left: 50%; 
  transform: translate(-50%, -40%); 
  top: 40%; 
  text-align: center; 
  width: 100%;
  color: #3B3E41;
  
}

.proccess-load {
  
  padding: 3px;
  -webkit-transition: width .4s ease-in-out;
  -moz-transition: width .4s ease-in-out;
  -ms-transition: width .4s ease-in-out;
  -o-transition: width .4s ease-in-out;
  transition: width .4s ease-in-out;
  
}

.animate-load .proccess-load {
  
  background-color: #B1D6B3;

}

.stripes-load .proccess-load{
  
  -webkit-background-size: 30px 30px;
  -moz-background-size: 30px 30px;
  background-size: 30px 30px;
  background-image: -webkit-gradient(linear, left top, right bottom,
  color-stop(.25, rgba(255, 255, 255, 1.10)), color-stop(.25, transparent),
  color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, 1.10)),    
  color-stop(.75, rgba(255, 255, 255, 1.10)), color-stop(.75, transparent),
  to(transparent));
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%, transparent 25%,
  transparent 50%, rgba(255, 255, 255, 1.10) 50%, rgba(255, 255, 255, 1.10) 75%,
  transparent 75%, transparent);
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%, transparent 25%,
  transparent 50%, rgba(255, 255, 255, 1.10) 50%, rgba(255, 255, 255, 1.10) 75%,
  transparent 75%, transparent);
  background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%, transparent 25%,
  transparent 50%, rgba(255, 255, 255, 1.10) 50%, rgba(255, 255, 255, 1.10) 75%,
  transparent 75%, transparent);
  background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%, transparent 25%,
  transparent 50%, rgba(255, 255, 255, 1.10) 50%, rgba(255, 255, 255, 1.10) 75%,
  transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%, transparent 25%,
  transparent 50%, rgba(255, 255, 255, 1.10) 50%, rgba(255, 255, 255, 1.10) 75%,
  transparent 75%, transparent);            
  -webkit-animation: animate-stripes 3s linear infinite;
  -moz-animation: animate-stripes 3s linear infinite;
  
}

@-webkit-keyframes animate-stripes {
  
  0% {background-position: 0 0;} 100% {background-position: 60px 0;}
  
}

@-moz-keyframes animate-stripes {
  
  0% {background-position: 0 0;} 100% {background-position: 60px 0;}

}

.btn-avatar {
  
  background-color: #577CA5;
  position: absolute;
  bottom: -45px;
  right: -5px;
  color: white;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 100%;
  border: 3px white solid;
  vertical-align: center;

}

.btn-avatar:hover {
  
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);  

}

.status {
  
 position: relative;
 background-color: #E5EDF5;
 padding: 8px;
 color: #222;
 border-radius: 3px;
 margin: 8px;
 color: #696E74;
 font-size: 12px;
  
}

.status::after {
  
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 11px solid #E5EDF5;
  left: 50px;
  top: -18px;

}

.login-info {
  
  position: relative; 
  left: 28px; 
  font-size: 17px; 
  padding: 5px; 
  width: 270px;

}

.img {
  
  border: 1px #EAEFF5 solid;
  padding: 3px;
  border-radius: 4px;

}

.file-upload-progress {
  
  margin-top: 12px;
  border-radius: 4px;
  background-color: white;
  color: #596066;
  padding: 10px;
  font-size: 13px;
  border: 1px #EAEFF5 solid;

}

.file-upload-progress-ind-green {
  
  border-radius: 2px;
  background: #4BBB62;
  color: white;
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  box-sizing: border-box;
  font-weight: bold;

}

.file-upload-progress-ind {
  
  border-radius: 2px;
  background-color: #78A2CC;
  color: white;
  font-size: 12px;
  padding: 2px;
  font-weight: bold;
  height: 15px;
  line-height: 15px;
  box-sizing: border-box;

}

.file-upload-progress-ind-o {

  border-radius: 2px;
  background-color: #D2DCE6;
  position: relative;
  text-align: center;

}

.file-upload-progress-pr {
  
  top: 50%;
  left: 0;
  right: 0;
  position: absolute;
  transform: translateY(-50%);

}

.count {

  background-color: #AAB6C2;
  font-size: 11px;
  padding: 0px 0.8em;
  line-height: 20px;
  border-radius: 10px;
  display: inline-block;
  color: white;
  
}

.btn-modal-close {

  text-align: center;
  color: #73777C;
  padding: 1px 0.1em;
  background-color: #fff;
  line-height: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 4px;
  border: 1px #C2C5C9 solid;
  position: relative; 
  float: right;
  
}

.btn-modal-close:hover {

  background-color: #F3F3F3;
  
}

.btn-screensaver {
  
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 12px;
  right: 12px;
  color: white;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100%;

}

.btn-screensaver:hover {
  
  background-color: rgba(0,0,0,0.8);  

}

.file-upload {
  
  border-radius: 2px;
  background: #45565E;
  color: #CFD8DC;
  text-align: center;
  padding: 0px 1.2em;

}

.file-label{
  
  line-height: 2.7;

}

.file-upload:hover {
  
  background: #344046;

}

.file-form {
  
  display: none;
  
}

.left {
  
  width: 250px;
  vertical-align: top;
  
}

.left-optimize {
  
  margin-right: 10px;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  margin-bottom: 11px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: -1;
  word-break: break-all;

}

.left-title {
  
  padding: 10px;
  background-color: #E3E8EB;
  text-transform: uppercase;
  font-weight: bold;

}

.right-title {
  
  padding: 10px;
  background-color: #E3E8EB;
  text-transform: uppercase;
  font-weight: bold;

}

.middle {
  
  width: 600px;
  vertical-align: top;
  
}

.right {
  
  width: 300px;
  vertical-align: top;
  
}

.right-optimize {
  
  margin-left: 10px;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  margin-bottom: 11px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: -1;
  word-break: break-all;

}

.avatar-choose {
  
  top: 2px; 
  right: 2px; 
  color: white; 
  z-index: 1; 
  position: absolute; 
  background-color: #39CF3F; 
  line-height: 33px; 
  width: 33px; 
  height: 33px; 
  border-radius: 100%; 
  text-align: center;

}

.form-control-100:focus {
  
  border: 3px #9CDD9F solid;
  background-color: #EEFDEE;
  
}

.form-control-95:focus {
  
  border: 3px #9CDD9F solid;
  background-color: #EEFDEE;
  
}

.form-control-50:focus {
  
  border: 3px #9CDD9F solid;
  background-color: #EEFDEE;
  
}

.form-control-30:focus {
  
  border: 3px #9CDD9F solid;
  background-color: #EEFDEE;
  
}

.form-control-20:focus {
  
  border: 3px #9CDD9F solid;
  background-color: #EEFDEE;
  
}

.time_loading {
  
  position: absolute;
  top: 0;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  background-color: #52AAF0;
  color: white;
  -webkit-animation: err_msg 600ms;
  animation: err_msg 600ms;
  animation-fill-mode: both; 
  -webkit-animation-fill-mode: both;
  text-align: center;
  
}

.error_loading {

  position: absolute;
  top: 0;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  background-color: #F86E5B;
  color: white;
  -webkit-animation: err_msg 600ms;
  animation: err_msg 600ms;
  animation-fill-mode: both; 
  -webkit-animation-fill-mode: both;
  text-align: center;
  
}

@keyframes err_msg {
  
  from {
    
    height: 0;
    
  }
  
  to {
    
    height: 18px;
    padding: 5px;
    
  }
  
}

/*-------------Обновлено с версии 1.2.2----------*/

.optimize {
  
  width: 610px;
  
}

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

.captcha {
  
  background-color: #FCE6DF;
  padding: 5px 1em;
  margin: 3px;
  line-height: 20px;
  
}

.overlay {
  
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
  
}

.overlay.open {
  
  opacity: 1;
  pointer-events: inherit;
  
}

.form-control-select {
  
  padding: 9px;
  width: 50%;
  border-radius: 4px;
  border: 1px #CFD7DD solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;

}

.form-control-95 {
  
  padding: 9px;
  width: 95%;
  border-radius: 4px;
  border: 1px #CFD7DD solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;

}

.form-control-page {
  
  padding: 6px;
  width: 100px;
  border-radius: 4px;
  border: 1px #CFD7DD solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;

}

.form-control-100 {
  
  padding: 9px;
  width: 100%;
  border-radius: 4px;
  border: 1px #CFD7DD solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;

}

.form-control-30 {
  
  padding: 9px;
  width: 30%;
  border-radius: 4px;
  border: 1px #CFD7DD solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;

}

.modal {
  
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
  opacity: 0;
  width: 300px;
  height: 400px;
  pointer-events: none;
  transition: 0.5s ease-in-out;
  max-height: 100vh;
  z-index: 99999;
  /*max-width: 100vh;*/
  
}

.modal-optimize {

  width: 300px;
  height: 340px;
  overflow-y: auto;
  box-sizing: border-box;
  
}

.modal-title {
  
  border-bottom: 1px #E2E8EC solid;
  background-color: #E7EAEE;
  padding: 8px;
  color: #3F4549;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 20px;

}

.btn-registration {

  text-align: center;
  color: white;
  background-color: #68996A;
  padding: 0px;
  height: 37px;
  line-height: 37px;
  border-radius: 4px;
  width: 100%;
  border: none;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}

.btn-registration:hover {

  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
  
}

.btn-login {

  text-align: center;
  color: white;
  background-color: #577CA5;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  border: none;
  font-size: 14px;
  margin-bottom: 17px;
  
}

.btn-login:hover {

  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
  
}

.btn-page {

  text-align: center;
  color: #fff;
  padding: 0 1.1em;
  background-color: #68996A;
  line-height: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 4px;
  border: none;
  margin-top: 5px;
  margin-left: 2px;
  
}

.btn-page:hover {

  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
  
}

.btn-page-o {

  text-align: center;
  color: #fff;
  padding: 0 1.1em;
  background-color: #fff;
  line-height: 28.95px;
  height: 28.95px;
  display: inline-block;
  border-radius: 4px;
  margin-top: 5px;
  margin-left: 2px;
  border: 1px #C2C5C9 solid;
  font-weight: bold;
  color: black;
  
}

.btn-o {

  text-align: center;
  color: #73777C;
  padding: 2.1px 1.2em;
  background-color: #fff;
  line-height: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 4px;
  border: 1px #C2C5C9 solid;
  margin: 2px;
  
}

.btn-o:hover {

  background-color: #F3F3F3;
  
}

.btn-big {

  text-align: center;
  color: #fff;
  padding: 0 1.5em;
  background-color: #68996A;
  line-height: 35px;
  height: 35px;
  display: inline-block;
  border-radius: 4px;
  border: none;
  
}

.btn-big:hover {

  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
  
}

.btn {

  text-align: center;
  color: #fff;
  padding: 3px 1.2em;
  background-color: #68996A;
  line-height: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 4px;
  margin: 2px;
  
}

.btn:hover {

  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
  
}

.overlay .modal.open {
  
  opacity: 1;
  pointer-events: inherit;
  
}

.hover{}

.hover:hover {
  
  background-color: #DEEAF1;

}

/*-----Обновлено с версии 1.1.2-----*/

.list {
  
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  margin-bottom: 11px;
  background-color: white;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
  padding: 10px;
  box-sizing: border-box;
  overflow-wrap: normal;
  word-break: normal;
  line-break: auto;
  hyphens: manual;
  word-wrap: break-word;

}

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

.list-body {
  
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  margin-bottom: 11px;
  background-color: white;
  box-sizing: border-box;
  overflow: hidden;
  z-index: -1;
  overflow-wrap: normal;
  word-break: normal;
  line-break: auto;
  hyphens: manual;
  word-wrap: break-word;

}

.list-menu {
  
  border-top: 1px #E2E8EC solid;
  padding: 10px;
  color: #3F4549;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  top: -1px;
  bottom: -1px;
  overflow-wrap: normal;
  word-break: normal;
  line-break: auto;
  hyphens: manual;
  word-wrap: break-word;

}

.list-menu + .list-menu {margin: -1px 0;}

.success {
  
  background-color: #84C087;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  color: white;
  margin-bottom: 11px;
  text-align: center;
  
}

.error {
  
  background-color: #ECA49D;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  color: white;
  margin-bottom: 11px;
  text-align: center;
  
}

.title {
  
  background-color: white;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  
}

.navigation {
  
  background-color: white;
  padding: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  color: #777A7C;
  margin-bottom: 11px;
  
}

.navigation a {
  
  color: #7696AF;

}

.navigation a:hover {
  
  color: #4E6F8A;
  
}

.panel-top-optimize {
  
  background-color: #577CA5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 5;

}

.panel-top-right {
  
  display: inline-block;
  width: 24%;
  text-align: center;
  height: 51px;
  line-height: 51px;
  vertical-align: top;

}

/*.panel-top-right:hover {
  
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);

}*/

.panel-top-left {
  
  display: inline-block;
  width: 22%;
  text-align: center;
  height: 51px;
  line-height: 51px;
  vertical-align: top;

}

.panel-top-left:hover {
  
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);

}

.panel-top-middle {
  
  display: inline-block;
  width: 12%;
  text-align: center;
  height: 51px;
  line-height: 51px;
  position: relative;
  vertical-align: top;

}

.panel-top-middle:hover {
  
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);

}

.panel-top-icons {
  
  font-size: 10px;
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  
}

.panel-top-title {
  
  font-size: 10px;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  
}

.panel-top-optimize a{
  
  color: white;

}

.bar-progress_num1 {
  
  height: 4px;
  display: block;
  background-color: #72E477;
  -webkit-animation: progressbar_num1 700ms;
  animation: progressbar_num1 700ms;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: both; 
  -webkit-animation-fill-mode: both;
    
}

@-webkit-keyframes progressbar_num1 { 
    
  from {
    width: 0;
  }
  
  to {
    width: 50%;
  }
  
}

@keyframes progressbar_num1 {
  
  from {
    width: 0;
  }
    
  to {
    width: 50%;
  }
  
}

.bar-progress_num2 {
  
  height: 4px;
  display: block;
  background-color: #72E477;
  -webkit-animation: progressbar_num2 700ms;
  animation: progressbar_num2 700ms;
  animation-fill-mode: both; 
  -webkit-animation-fill-mode: both;
  
}

@-webkit-keyframes progressbar_num2 { 
    
  from {
    
    width: 50%;
    
  }
  
  to {
    
    width: 100%;
    
  }
  
}

@keyframes progressbar_num2 {
  
  from {
    
    width: 50%;
    
  }
  
  to {
    
    width: 100%;
    
  }
  
}

.indicator_loading {
  
  position: absolute;
  top: 0;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  
}

.foot {
  
  padding: 10px;
  text-align: center;
  margin-top: -7px;
  color: #777C80;
  
}

.foot a{

  color: #5986AA;
  
}

.custom-checkbox>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.custom-checkbox>span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #b3d7ff;
}

.custom-checkbox>input:not(:disabled):active+span::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.custom-checkbox>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-checkbox>input:focus:not(:checked)+span::before {
  border-color: #80bdff;
}

.custom-checkbox>input:checked+span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox>input:disabled+span::before {
background-color: #e9ecef;
}

.custom-radio>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-radio>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.custom-radio>span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-radio>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #b3d7ff;
}

.custom-radio>input:not(:disabled):active+span::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.custom-radio>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-radio>input:focus:not(:checked)+span::before {
  border-color: #80bdff;
}

.custom-radio>input:checked+span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio>input:disabled+span::before {
  background-color: #e9ecef;
}

a{
  
  color: #5986AA;
  
}

/*-----Добавлено с версии 1.1.3------*/

.online {
  
  padding: 5px;
  text-align: center;
  background-color: #C8DAE9;
  
}

.onlineg {
  
  padding: 5px 0.8em;
  text-align: center;
  display: inline-block;
  border: 1px #99B6CE solid;
  border-radius: 4px;
  background-color: white;
  color: black;
  font-size: 13px;  
  
}

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