/*---------- Стили для страниц ----------*/

/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
    background: #0c5866;
}*/
.fa, .fas, .far, .fal {
    font-weight: normal;
}
/*---------- START ----------*/
.zag-start {
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.zagstart-text {
    font-size: 18pt;
}

#frmStart{
    height: 85vh;
}

#frmStart .errtext{
    ont-size: 14pt;
    font-weight: bold;
}

#frmStart .logo {
    background-color: #6ac0f3;
}
#frmStart .logo-img {
    height: 50px;
    margin-left: 30px;
}
#frmStart .start-content {
    position: relative;
    min-height: 390px;
    margin: 30px;
}
#frmStart .time-left {
    display: none;
}
#frmStart .inner-addon {
    position: relative;
}
#frmStart .inner-addon .input-icon {
    position: absolute;
    right: 0px;
    color: #6F727A;
    padding: 10px;
    pointer-events: none;
}
#frmStart .inner-addon .input-icon .user-icon {
    width: 25px;
    height: 20px;
}
#frmStart .inner-addon .input-icon .key-icon {
    width: 25px;
    height: 12px;
}
#frmStart .inner-addon .form-control {
    padding-right: 40px;
}
#frmStart .button-container {
    width: 100%;
}
#frmStart .links-block {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}
#frmStart .links-block-link {
    cursor: pointer;
}
#frmStart .links-block-link:hover {
    color: #00a8ff;
}
#frmStart .app-footer {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    font-size: 10pt;
    color: #a9a9a9;
}
/*---------- Connectsettings ----------*/
#frmConnectsettings .custom-form {
    padding: 5px;
    border: 1px solid #c5d6de;
}
/*---------- Main ----------*/
#frmMain {
    height: 100%;
    border-right: 1px solid #dcdcdc;
}

#frmMain .row-main{
    height: 100%;
}

#frmMain .header {
    width: 100%;
    height: 60px;
    background-color: #6ac0f3;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdcdc;
}
#frmMain .header-search-menu{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    align-items: center;
    /*margin-right: 5px;*/
}

#frmMain .logo{flex: 1;}
#frmMain .logo, #frmMain .zag-main {
    width: 50px;
    height: 60px;
    padding-left: 10px;
    display: flex;
    align-items: center;
}
#frmMain .logo-img {
    width: 150px;
    height: 34px;
}
#frmMain .zagmain-text {
    font-size: 20pt;
}
#frmMain .header-search-menu .btn-menu{
    display: flex;
    align-items: center;
    padding: 0 6px;
}
#frmMain .search-btn-parent{height: 100%;display: flex;align-items: center;}
#frmMain .search-btn {
    color: #ffffff;
    font-size: 16pt;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transition: background 0.3s;
    background: #6ac0f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
#frmMain .search-btn:hover {
    background: #63aeda;
}
#frmMain .main-search-block {
    position: absolute;
    width: 100%;
    top: -5px;
    left: -5px;
    border: none;
    background-color: #ffffff;
    margin: 5px;
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    padding: 10px;
    z-index: 1;
}

#frmMain .spinner {
    margin: 10px;
    width: 20px;
    height: 20px;
    border: 2.5px solid transparent;
    border-left: 2.5px solid #000000;
    border-right: 2.5px solid #000000;
    border-bottom: 2.5px solid #000000;
    border-radius: 10px;
    animation: spin 1s linear infinite;
}
@keyframes spin{
    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
}

#frmMain .connect-header {
    position: absolute;
    /* left: calc(50% - 10vh); */
    display: flex;
    background-color: #f6f6f6;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: center;
}

#frmMain .connect-text {
    /*width: 100px; */
    /* margin: auto; */
    color: black;
    /*font-size: 15pt;*/
}

.btn-cursor{
    cursor: pointer;
}

.search-tags {
    display: flex;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.search-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    background: #fbfbfb;
    cursor: pointer;
}

.group-name{
    width: 100%;
}

.group-send{
    float: right;
    margin-right: 10px;
}

#frmMain .main-search-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 39px;
}

#frmMain .main-search-input input {
    width: 100%;
    border: none;
    font-size: 16px;
}
#frmMain .main-search-input {
    width: 80%;
    color: #919fa9;
}
#frmMain .hamburger {
    color: #ffffff;
    font-size: 16pt;
    width: 30pt;
    height: 30pt;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background 0.3s;
    background: #6ac0f3;
    border: none;
}

#frmMain .btn-icon {
    color: #ffffff;
    padding-top: 5px;
    font-size: 11pt;
    width: 55pt;
    margin-top: 10px;
    height: 37pt;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*border-radius: 50%;*/
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    transition: background 0.3s;
    background: #6ac0f3;
    cursor: pointer;
    border: none;
}

#frmMain .btn-icon i{
    font-size: 14pt;
}

#frmMain .hamburger:hover,#frmMain .btn-icon:hover {
    /*background: #63aeda;*/
    filter: brightness(1.1);
}

#frmMain .cross {
    color: #ffffff;
    font-size: 18pt;
    width: 30pt;
    height: 30pt;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background 0.3s;
    background: #6ac0f3;
    border: none;
}
#frmMain .cross:hover {
    background: #63aeda;
}

#frmMain .menu {
    z-index: 11000;
    width: 50%;
    margin-left: 49%;
    margin-top: -57px;
    background: #FFFFFF;
    position: absolute;
    border: solid 1px #d6d6d6;
    box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.11);
}
#frmMain .menu ul {
    margin: 0;
    padding: 0;
    list-style-type:
    none;
    list-style-image: none;
}

#frmMain .menu li {
    display: block; 
    padding: 6pt 10pt 6pt 10pt;
    color:#000000;
    cursor: default;
    font-size: 10pt;
    cursor: pointer;
}

#frmMain .menu li:hover{
    color:#00a8ff
}

#frmMain .main-menu {
    border-top: 1px solid #dcdcdc;
}
#frmMain .button-container {
    position: relative;
    width: 25%;
    min-width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #6b7a85;
}
#frmMain .button {
    height: 35px;
    padding: 3px;
}
#frmMain .button-img {
    position: relative;
    font-size: 18pt;
}
#frmMain .button-name {
    font-size: 8pt;
}
#frmMain .button-container:hover {
    cursor: pointer;
    color: #00a8ff;
}
#frmMain .button-img:hover {
    color: #00a8ff;
}
#frmMain .button-name:hover {
    color: #00a8ff;
}
#frmMain .small-buttons {
    display: flex;
    padding: 0 5px;
    justify-content: space-between;
    align-items: center;
}
#frmMain .small-button-container {
    width: 49%;
    cursor: pointer;
}
#frmMain .small-button {
    height: 20px;
    color: #4682B4;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #4682B4;
}
#frmMain .small-button:hover {
    color: #00a8ff;
    border: 1px solid #00a8ff;
}
#frmMain .small-button-text {
}
#frmMain .status-button-img {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    right: -10px;
    background-color: #ff4a4a;
    color: white;
    border-radius: 50%;
    display: none;
    justify-content: center;
    font-size: 10pt;
}
#frmMain .small-button-img {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}
#frmMain .online-trigger-1 {
    width: 100%;
    height: 100%;
    background-color: #2ebf00;
    border-radius: 50%;
    border: 2px solid #ffffff;
}
#frmMain .online-trigger-2 {
    width: 100%;
    height: 100%;
    background-color: #FFD700;
    border-radius: 50%;
    border: 2px solid #ffffff;
}
#frmMain .online-trigger-3 {
    width: 100%;
    height: 100%;
    background-color: #C0C0C0;
    border-radius: 50%;
    border: 2px solid #ffffff;
}
#frmMain .status-menu {
    z-index: 100;
    width: 50%;
    margin-left: 49%;
    bottom: 62px;
    background: #FFFFFF;
    position: absolute;
    border: solid 1px #d6d6d6;
    box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.11);
}

#frmMain .status-menu li {
    display: flex;
    align-items: center;
    color: #000;
    cursor: pointer;
    padding: 6pt 10pt 6pt 10pt;
    font-size: 10pt;
}
#frmMain .status-menu li:hover {
    color: #00a8ff;
}
#frmMain .list-box {
    position: relative;
    height: calc(100vh - 120px);
    background-color: #fff;
    /*overflow-y: auto;*/
/*    padding: 0 10px 0;*/
}
#frmMain .show-warn{
    height: calc(100vh - 120px - 50pt);
}
#frmMain .contact-box {
    position: relative;
    padding: 5px;
    display: flex;
    align-items: center;
}
#frmMain .mismatchVersion {
    display: none;
    background-color: #fed859;
    align-items: center;
    height: 50pt;
}
#frmMain .mismatchVersion i{
    font-size: 25pt;
    margin: 0px 10pt;
}
#frmMain .mismatchText {
    font-weight: 400;
    font-size: 11pt;
}
#frmMain .mismatchTitle {
    font-weight: 600;
}

/*КЛАССЫ ДЛЯ СПИСКА КОНТАКТОВ НА ТЕЛЕФОНЕ*/
.mobile-contact .contactbox-avatar{
    height: 30px!important;
    width: 30px!important;
}

.mobile-contact .contactbox-user-name{
    font-size: 14pt;
    font-weight: 400;
}

.mobile-contact .group-name{
    font-size: 14pt;
}
/*----------------*/

#frmMain .contact-box:hover {
    background-color: #f2f6f9;
    cursor: pointer;
}
#frmMain .contact-box .selected {
    background-color: #f2f6f9;
}
#frmMain .contactbox-avatar {
    position: relative;
    min-width: 20px;
    width: 20px;
    height: 20px;
    background-color: #6ac0f3;
    margin-right: 7pt;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmMain .first-letter {
    font-size: 10pt;
    font-weight: bold;
    /*margin-top: -3pt;*/
    color: #ffffff;
}
#frmMain .online {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 9px;
    left: 42px;
}
#frmMain .online-0 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 0px;
    right: 0px;
    background-color: none;
    border-radius: none;
    border: none;
}
#frmMain .online-1 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 0px;
    right: 0px;
    background-color: #2ebf00;
    border-radius: 50%;
    border: 2px solid #fff;
}

#frmMain .online-2 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 0px;
    right: 0px;
    background-color: #FFD700;
    border-radius: 50%;
    border: 2px solid #fff;
}

#frmMain .online-3 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 0px;
    right: 0px;
    background-color: #C0C0C0;
    border-radius: 50%;
    border: 2px solid #fff;
}

.contactbox-user-data {
    flex-grow: 1;
    overflow: hidden;
}

.contactbox-user-name {
    font-size: 10pt; /*11*/
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contactbox-user-post {
    color: #919fa9;
    font-size: 10pt;
    line-height: 0.9;
    font-weight: normal; 
    margin-top: 2pt;
    padding-bottom: 2pt;
    display: none;
}

.icon-user-type{
    margin-right: 15px;
}

#frmMain .contactbox-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#frmMain .info-time {
    color: #919fa9;
    font-size: 9pt;
    padding-bottom: 2pt;
    display: none;
}

#frmMain .info-count {
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    text-align: center;
    min-width: 18px; 
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    background-color: #ff232c;
    display: none;
    width: fit-content! important;
    font-size: 9pt;
}

/*---------- Contact ----------*/
#frmContact {
    position: relative;
    /*height: 100vh;*/
}
#frmContact .header-pages {
    position: relative;
    justify-content: space-between;
}
#frmContact	.avatar-data-box{display: flex;flex-grow: 1;white-space: nowrap;overflow: hidden;}
#frmContact .header-pages-avatar-box {padding: 0 10px 0;}
#frmContact .header-pages-avatar {
    width: 50px;
    height: 50px;
    background-color: #6ac0f3;
    border-radius: 50%;
    overflow: hidden;
}
#frmContact .header-pages-avatar .img-box {
    width: 100%;
    height: 100%;
    background-color: #6ac0f3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
#frmContact .header-pages-avatar .first-letter {
    font-size: 20pt;
    font-weight: bold;
    color: #ffffff;
}
#frmContact .header-pages-data {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#frmContact .data-name {
    height: 22px;
    font-weight: bold;
    display: flex;
}
#frmContact .header-pages .activity {
    width: 100%;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10pt;
}
#frmContact .header-pages .btn-search-box{display: flex;flex: 1;justify-content: flex-end;}
#frmContact .header-pages .btn-menu {padding: 0 5px 0 0;display: flex;}
#frmContact .header-pages .btn-menu .btn-menu-btn {
    color: #ffffff;
    font-size: 16pt;
    width: 28pt;
    height: 28pt;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background 0.3s;
    background: #6ac0f3;
}
#frmContact .header-pages .btn-menu .btn-menu-btn:hover {
    background: #63aeda;
}
/*Submenu*/
#frmContact .submenu {
    position: absolute;
    z-index: 100;
    width: 30%;
    top: 3px;
    right: 3px;
    background: #FFFFFF;
    border: solid 1px #d6d6d6;
    box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.11);
}
#frmContact .submenu ul {
    margin: 0;
    padding: 0;
    list-style-type:
    none;
    list-style-image: none;
}
#frmContact .submenu li {
    display: block; 
    padding: 6pt 10pt 6pt 10pt;
    color:#000000;
    cursor: default;
    font-size: 10pt;
    cursor: pointer;
}
#frmContact .submenu li:hover{
    color:#00a8ff
}

#frmContact .filebox-command {
    color: #00a0ff;
}
#frmContact .filebox-command a {
    color: #00a0ff;
}
#frmContact .data-info-text {
    border-right: 1px solid #c5d6de;
}
#frmContact .content-block-contact {
    /*height: calc(100vh - 60px);*/
    padding: 0;
    background-color: #d5e7e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#frmContact .messages-list-box {
    background: url(../img/background3.jpg);
    background-size: 150pt;
    overflow-y: scroll;
    height: calc(100vh - 124px);
}

#frmContact .message-box {
    display: block;
}
#frmContact .message-author {
    margin: 5px;
    font-size: 10pt;
    color: #6ac0f3;
}
#frmContact .message-my {
    position: relative;
    float: right;
    width: auto;
    min-width: 100px;
    max-width: calc(100% - 20px);
    background-color: #e1ffc7;
    border-radius: 8px 8px 0 8px;
    border: 1px solid #acd8d5;
    margin: 2px 10px;
    overflow: hidden;
}
#frmContact .message-contact {
    position: relative;
    float: left;
    width: auto;
    min-width: 100px;
    max-width: calc(100% - 20px);
    background-color: #ffffff;
    border-radius: 0 8px 8px 8px;
    border: 1px solid #acd8d5;
    margin: 2px 10px;
    overflow: hidden;
}
#frmContact .message-contact .voiceMessage {
    background-color: #c5c5c5;
}
#frmContact .message-text {
    color: #636363;
    font-size: 14px;
    word-break: break-all;
    margin: 5px 5px 3px 5px;
}
#frmContact .message-file {
    border-radius: 8px;
    padding: 10px;
}
#frmContact .message-my .message-file {
    background-color: #C9E6B2;
}
#frmContact .message-contact .message-file {
    background-color: #e9e9e9;
}
#frmContact .message-file .file-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200pt;
}
#frmContact .message-file .filebox-avatar {
    
}
#frmContact .message-file .filebox-img {
    width: 30pt;
    height: 30pt;
    background-color: #919fa9;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 25pt;
}
#frmContact .message-file .filebox-data {
    margin-left: 10px;
    color: #484747;
    width: calc(100% - 51pt);
}
#frmContact .message-file .filebox-data .filebox-name-size {
    display: flex;
}
#frmContact .message-file .filebox-name {
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    height: 15pt;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
    max-width: calc(100% - 3pt);
}
#frmContact .message-file .filebox-size {
    margin-left: 10px;
    color: #919fa9;
}
#frmContact .filebox-available {
    margin-top: 5px;
}
#frmContact .filebox-picture {
    max-width: 650px;
    /*min-width: 220pt;*/
    min-width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
}
#frmContact .filebox-picture img {
    width: auto;
    height: auto;
    max-height: 300px;
    border-radius: 5px;
}
#frmContact .message-info {
    float: right;
    align-items: center;
}
#frmContact .message-time {
    color: #b6b6b6;
    font-size: 13px;
    margin-right: 5px;
}
#frmContact .message-img {
    width: 20px;
    height: 20px;
    margin-left: 3px;
    margin-top: -5px;
}
#frmContact .zagruzit {
    width: 50%;
    height: 25px;
    margin: 10px auto;
    border-radius: 8px;
    background-color: #6b7a85;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}
#frmContact .zagruzit-text {
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#frmContact .messages-end {
    height: 2vh;
    min-height: 25px;
    background-color: #6ca5b3;
    color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;
    opacity: 0;
    -webkit-transition: opacity 3s;
    transition: opacity 3s;
}
#frmContact .message-block {
    background: url(../img/background3.jpg);
    background-size: 150pt;
    position: relative;
    background-color: #dcf3f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

#frmContact .message-block .left-block {
    position: relative;
    flex-grow: 1;
    margin: 16px 10px 16px 10px;
}

#frmContact .message-block .add-files {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}
#frmContact .add-files{
    color: silver;
}
#frmContact .message-block .add-files .button-container .fas {
    font-size: 20px;
    color: #b6b6b6;
}
#frmContact .message-block .add-files .button-container:hover .fas {
    color: #00a8ff;
}
#frmContact .message-block .right-block {
    width: 30px;
    margin-right: 10px;
}
#frmContact .message-block textarea.form-control {
    width: 100%;
    height: 32px;
    border-radius: 8px;
}
#frmContact .message-block .emoji-box {
    position: absolute;
    left: 1px;
    top: -210px;
    z-index: 999;
    width: 332px;
    padding: 7px;
    margin-top: 5px;
    overflow: hidden auto;
    background: rgb(255, 255, 255);
    height: 200px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#frmContact .message-block .emoji-imgbox {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 5px;
    cursor: pointer;
}
#frmContact .message-block .emoji-imgbox img {
    height: auto;
    max-height: 100%;
}
#frmContact .buttons-block {
    margin: 5px;
}
#frmContact .button {
    height: 25px;
    min-height: 25px;
}
#frmContact .btn-send {
    width: 30px;
    height: 100%;
    background: url(../img/send1.png) no-repeat;
    filter: brightness(0.5);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#frmContact .message-block .right-block:hover #frmContact .btn-send {
    background: url(../img/send2.png) no-repeat;
}
#frmContact .btn-send .button-text {
    font-size: 20pt;
    color: #4682B4;
    color: #fff;
}
#frmContact .button-container:hover .button-text {
    color: #00a8ff;
}
#frmContact .select-file {
    margin: 5px;
    padding: 5px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #c5d6de;
}
#frmContact .contact-search-btn {
    color: #ffffff;
    font-size: 16pt;
    border-radius: 50%;
    transition: background 0.3s;
    background: #6ac0f3;
    padding: 0 7px 0;
    display: flex;
    align-items: center;
}
#frmContact .contact-search-btn:hover {
    background: #63aeda;
}
#frmContact .contact-search-block {
    position: absolute;
    width: 100%;
    top: -5px;
    left: -5px;
    border: none;
    background-color: #ffffff;
    margin: 5px;
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    padding: 10px;
    z-index: 1;
}
#frmContact .search-tags {
    display: flex;
    max-height: calc(100vh - 120px);
    overflow: auto;
}
#frmContact .search-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    padding: 2px 8px;
    background: #fbfbfb;
    cursor: pointer;
}
#frmContact .contact-search-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 39px;
}
#frmContact .contact-search-input {
    width: 80%;
    color: #919fa9;
}
#frmContact .contact-search-input input {
    width: 100%;
    border: none;
    font-size: 16px;
}
.ulMessages .highlighted{
    background-color: rgba(0, 168, 255, 0.24);
}
ed {
    font-size: 9pt;
    color: #5e93b2;
}

.msg-reply {
    font-size: 9pt;
    color: #5e93b2;
    margin-bottom: 5px;
}

#frmContact .message-loader .filebox-name-size {
    display: flex;
    margin: 0 10px;
}
#frmContact .message-loader .filebox-name {
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmContact .message-loader .filebox-size {
    margin-left: 10px;
    color: #919fa9;
    min-width: 100pt;
    text-align: right;
}
#frmContact .load-indicator {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmContact .ch-loader {
    height: 5px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #e6e6e6;
    margin: 5px 10px;
}
/*---------- Organizations ----------*/
#frmOrganizations .org-box {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #f9f9f9;;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
#frmOrganizations .org-group-box {
    width: calc(100% - 40pt);
    display: flex;
    justify-content: space-between;
}
#frmOrganizations .org-box-expand {
    margin: 0px 15px;
    transform: rotate(0deg);
    transition: transform 0.2s;
    font-size: 18pt; 
}
#frmOrganizations .org-box-expand-active {
    transform: rotate(90deg);
}

#frmOrganizations .org-box-users {
    width: 95%;
    margin-left: 42pt;
}

#frmOrganizations .org-users {
    align-items: center;
    display: flex;
    padding: 5px 0;
}

#frmOrganizations .org-box-data {
    display: flex;
    flex-direction: column;
    width: calc(100% - 40pt);
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmOrganizations .org-box-data .name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
#frmOrganizations .org-box-data .contacts {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #949494;
}
#frmOrganizations .org-users-data {
    width: 90%;
    display: flex;
}
#frmOrganizations .org-users-data .name {
    width: 40%;
    word-wrap: break-word;
}
#frmOrganizations .org-users-data .post {
    width: 60%;
    word-wrap: break-word;
    color: #949494;
}
/*---------- Reminders ----------*/
#frmReminders .tabl-header {
    height: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c6e8f1;
    font-size: 12px;
    font-weight: bold;
}
#frmReminders .tabl-name {
    width: 45%;
    text-align: center;
}
#frmReminders .tabl-date {
    width: 20%;
    text-align: center;
}
#frmReminders .tabl-time {
    width: 16%;
    text-align: center;
}
#frmReminders .tabl-box-menu {
    width: 18%;
    text-align: center;
}
#frmReminders .rmd-box {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmReminders .rmd-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmReminders .rmd-date-time {
    display: flex;
    color: #919fa9;
}
#frmReminders .rmd-date {
    text-align: center;
}
#frmReminders .rmd-time {
    margin-left: 20px;
    text-align: center;
}
#frmReminders .rmd-box-menu {
    width: 100px;
}
#frmReminders .button-edit, #frmReminders .button-del {
    width: 22px;
    height: 22px;
}
#frmReminders .tabl-box-menu .button-edit, #frmReminders .tabl-box-menu .button-del {
    color: #343434;
}
#frmReminders .rmd-box-menu .button-edit {
    color: #48D1CC;
}
#frmReminders .rmd-box-menu .button-edit:hover {
    color: #006400;
}
#frmReminders .rmd-box-menu .button-del {
    color: #8B2929;
}
#frmReminders .rmd-box-menu .button-del:hover {
    color: #FF0000;
}
/*---------- EditOrg ----------*/

/*---------- FILES ----------*/
#frmFiles .header-pages-content {
    flex-grow: 1;
    margin-left: 0;
}
#frmFiles .header-pages-zag {
    font-size: 16px;
    color: #fff;
}
#frmFiles .header-pages-link {
    margin-right: 20px;
    font-size: 16px;
    color: #0000FF;
    text-decoration: underline;
    cursor: pointer;
}
#frmFiles .header-pages-link:hover {
    font-size: 16px;
    color: #00a8ff;
}
#frmFiles .content-block {
    height: calc(100vh - 60px);
}
#frmFiles .nav-tabs li a {
    border-radius: 0;
}
#frmFiles .nav-tabs li a:hover {
    background: rgb(231, 240, 253);
}
#frmFiles .nav-tabs li.active a {
    color: #6ac0f3;
    border: none;
    border-bottom: 3px solid #6ac0f3;
}
#frmFiles .list li:hover {
    background: #E7F0FD;
}
#frmFiles .media-list {
    display: flex;
    flex-wrap: wrap;
}
#frmFiles .media-list li {
    width: 33%;
}
#frmFiles .media-box {
    position: relative;
    min-height: 60px;
    height: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#frmFiles .mediabox-avatar {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-right: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
#frmFiles .mediabox-avatar img {
    object-fit: cover;
}
#frmFiles .mediabox-avatar .file-img {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    font-size: 50px;
    color: #6ac0f3;
    top: 0;
    left: 0;
    margin: -10px 0 0 10px;
    z-index: 1;
}
#frmFiles .mediabox-avatar .media-img .fas {
    font-weight: 900;
}
#frmFiles .mediabox-avatar .media-extension {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 5pt;
    margin-left: 8px;
    color: #ffffff;
    z-index: 2;
}
#frmFiles .mediabox-data {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmFiles .mediabox-date {
    display: flex;
    flex-direction: column;
    font-size: 8pt;
    align-items: center;
}
#frmFiles .mediabox-name {
    height: 15px;
    font-size: 8pt;
    color: #0000FF;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmFiles .file-box {
    position: relative;
    min-height: 60px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    align-items: center;
}
#frmFiles .filebox-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmFiles .filebox-avatar .file-img {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    font-size: 50px;
    color: #6ac0f3;
    top: 0;
    left: 0;
    margin: -10px 0 0 10px;
    z-index: 1;
}
#frmFiles .filebox-avatar .file-img .fas {
    font-weight: 900;
}
#frmFiles .filebox-avatar .file-extension {
    font-size: 10pt;
    font-weight: bold;
     margin-top: 5pt;
     margin-left: 8px;
    color: #ffffff;
    z-index: 2;
}
#frmFiles .filebox-data {
    width: 60%;
    flex-grow: 1;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmFiles .filebox-date {
    display: flex;
    flex-direction: column;
    font-size: 10pt;
}
#frmFiles .filebox-name {
    font-size: 16px;
    color: #0000FF;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*---------- TASKS ----------*/
#frmTasks .task-box-content {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
}
#frmTasks .task-box-main {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
}
#frmTasks .taskbox-main-content {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}
#frmTasks .task-box-menu{
    width: 21pt;
}
#frmTasks .task-box-data {
    padding: 5px;
    overflow: hidden;
}
#frmTasks .task-box-data .task-box-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
#frmTasks .task-box-data .task-box-descr {
    height: 20px;
    margin-top: 5px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTasks .button-edit, #frmTasks .button-del, #frmTasks .button-view {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}
#frmTasks .task-box-date {
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
#frmTasks .taskboxdate-title {
    font-size: 14px;
    font-weight: bold;
}
#frmTasks .taskboxdate-icon {
    font-size: 20px;
}
#frmTasks .taskboxdate-date {
    margin-left: 5px;
    font-size: 14px;
}
#frmTasks .no-tasks {
    display: flex;
    justify-content: center;
}
.task-tag {
    padding: 3px;
    margin-right: 5px;
    border-radius: 4px;
    font-size: 12px;
}
#frmTasks .tag-personal {
    background-color: #0000FF;
}
#frmTasks .tag-important {
    background-color: #FF0000;
}
#frmTasks .tag-working {
    background-color: #FF8C00;
}
#frmTasks .task-box-tags {
    margin-top: 5px;
}
#frmTasks .task-box-status {
    min-width: 115px;
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
#frmTasks .status-icon {
    width: 25px;
    height: 25px;
}
#frmTasks .status-text {
    font-style: italic;
    margin-left: 5px;
}
#frmTasks .files-title {
    margin-top: 10px;
}
#frmTasks .files-title-text {
    font-size: 14px;
    font-weight: bold;
}
#frmTasks .ul-files {
    display: flex;
    flex-wrap: wrap;
}
#frmTasks .ul-files li {
    width: 25%;
}
#frmTasks .file-box {
    padding: 5px;
    margin: 5px;
    border-radius: 4px;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
#frmTasks .file-box:hover {
    background: #E7F0FD;
}
#frmTasks .filebox-img {
    position: relative;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
#frmTasks .filebox-img img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}
#frmTasks .filebox-data {
    max-width: 100%;
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmTasks .filebox-link {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTasks .filebox-avatar {
    position: relative;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmTasks .filebox-avatar .file-img {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    font-size: 8vh;
    color: #6ac0f3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
#frmTasks .filebox-avatar .file-img .fas {
    font-weight: 900;
}
#frmTasks .filebox-avatar .file-extension {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 5pt;
    color: #ffffff;
    z-index: 2;
}
#frmTasks .filebox-date {
    display: flex;
    flex-direction: column;
    font-size: 10pt;
}
#frmTasks .filebox-name {
    width: 100%;
    font-size: 8pt;
    white-space: nowrap;
    color: #484747;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTasks .filebox-name:hover {
    color: #6ac0f3;
}
#frmTasks .filebox-author {
    font-size: 9pt;
}
#frmTasks .bottom-buttons-box {
    display: flex;
    align-items: center;
}
#frmTasks .comments-button-content {
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
#frmTasks .comments-button-content:hover {
    color: #16b4fc;
}
#frmTasks .comments-button-content .comments-button-icon {
    font-size: 20px;
}
#frmTasks .comments-button-content .comments-button-icon .fas {
    font-weight: normal;
}
#frmTasks .comments-button-content .comments-button-text {
    margin-left: 5px;
    font-size: 14px;
}
#frmTasks .comments-button-content .indicator-box {
    width: 25px;
    height: 20px;
    margin-left: 5px;
}
#frmTasks .comments-button-content .comments-button-indicator {
    width: 25px;
    height: 20px;
    font-size: 14px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF4A4A;
    color: #fff;
    cursor: pointer;
}
#frmTasks .comments-button-content .comments-button-indicator:hover {
    background-color: #fb6067;
}
#frmTasks .status-button-content {
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
#frmTasks .status-button-content:hover {
    color: #16b4fc;
}
#frmTasks .status-button-content .status-button-icon {
    font-size: 20px;
}
#frmTasks .status-button-content .status-button-text {
    margin-left: 5px;
    font-size: 14px;
}
#frmTasks .fantom-button {
    width: 30px;
    height: 30px;
}
#frmTasks .change-status-panel {
    margin: 10px 0;
}
#frmTasks .status-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmTasks .status-list li {
    width: 30%;
}
#frmTasks .status-box {
    background-color: #6ac0f3;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#frmTasks .status-box:hover {
    background-color: #16b4fc;
}
#frmTasks .status-box-text {
    color: #fff;
}
/*---------- TASK ----------*/
#frmTask .modal-querybox .custom-form {
    margin-top: 0;
}
#frmTask .form-label {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    margin-bottom: 5px;
}
#frmTask .formlabel-text {
    font-weight: 500;
    margin-right: 10px;
}
#frmTask .form-control[disabled] {
    background-color: #fff;
}
#frmTask .btn-add-small {
    color: #6ac0f3;
    font-size: 11pt;
    cursor: pointer;
}
#frmTask .btn-add-small:hover {
    color: #63aeda;
}
#frmTask .custom-form .list-box {
    min-height: 37px;
    border: 1px solid #ccc;
}
#frmTask .user-box {
    position: relative;
    padding: 5px;
    margin: 5px;
    border-radius: 4px;
    background-color: #F6F6F6;
    display: flex;
    align-items: center;
}
#frmTask .user-box:hover {
    background-color: #f2f6f9;
}
#frmTask .userbox-avatar {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 5px;
}
#frmTask .userbox-avatar .img-box {
    width: 30px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
#frmTask .userbox-user-name {
    font-size: 10pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTask .userbox-user-post {
    font-size: 9pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTask .form-group .button-del {
    width: 15px;
    height: 15px;
    margin-left: 5px;
    font-size: 15px;
    color: #8B2929;
    border-radius: 50%;
    overflow: hidden;
}
#frmTask .form-group .button-del:hover {
    color: #FF0000;
}
#frmTask .ul-files {
    display: flex;
    flex-wrap: wrap;
}
#frmTask .ul-files li {
    width: 25%;
}
#frmTask .file-box {
    padding: 5px;
    margin: 5px;
    border-radius: 4px;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
#frmTask .file-box:hover {
    background: #E7F0FD;
}
#frmTask .filebox-img {
    position: relative;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
#frmTask .filebox-img img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}
#frmTask .filebox-data {
    max-width: 100%;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmTask .filebox-link {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTask .filebox-avatar {
    position: relative;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmTask .filebox-avatar .file-img {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    font-size: 8vh;
    color: #6ac0f3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
#frmTask .filebox-avatar .file-img .fas {
    font-weight: 900;
}
#frmTask .filebox-avatar .file-extension {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 5pt;
    color: #ffffff;
    z-index: 2;
}
#frmTask .filebox-date {
    display: flex;
    flex-direction: column;
    font-size: 10pt;
}
#frmTask .filebox-name {
    width: 100%;
    font-size: 8pt;
    white-space: nowrap;
    color: #484747;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmTask .filebox-name:hover {
    color: #6ac0f3;
}
#frmTask .filebox-author {
    font-size: 9pt;
}
#frmTask .tag-box {
    padding: 5px;
    margin: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
#frmTask .task-tag {
    border-radius: 4px;
    font-size: 12px;
}
#frmTask .tag-personal {
    background-color: #0000FF;
}
#frmTask .tag-important {
    background-color: #FF0000;
}
#frmTask .tag-working {
    background-color: #FF8C00;
}
#frmTask .error-text {
    color: #FF0000;
    font-size: 12px;
}
#frmTask .taskDateBlock {
    display: flex;
    justify-content: space-between;
}
#frmTask .formGroupStartDate, #frmTask .formGroupDate {
    width: 48%;
}
/*---------- TaskTags ----------*/
.modal-querybox .content-box {
    min-height: 0;
}
#frmTasktags .ul-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#frmTasktags .task-tag {
    padding: 5px;
    margin: 5px;
    border-radius: 4px;
    font-size: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
/*---------- MAIL ----------*/
#frmMail .header-pages-content {
    flex-grow: 1;
}
/*---------- Reminder ----------*/

/*---------- ProblemMessagebox ----------*/
#frmProblemMessagebox .header-pages-img .fa {
    color: #FF0000;
}
#frmProblemMessagebox .message-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmProblemMessagebox .messagecontent-data {
    display: flex;
}
#frmProblemMessagebox .data-text {
    font-size: 20px;
    color: #005766;
    text-align: center;
}
/*---------- Connection ----------*/
#frmConnection {
    z-index: 1500;
}
#frmConnection .content-box {
    position: relative;
    min-height: 20vh;
    background-color: #ebeef0;
    margin: 5px;
    overflow: hidden;
    border: 1px solid #FF0000;
}
#frmConnection .header-pages {
    background: none;
}
#frmConnection .header-pages-img {
    width: 50px;
    margin: 20px;
}
#frmConnection .header-pages-img .fa {
    font-size: 20px;
    color: #FF0000;
}
#frmConnection .header-pages-title {
    font-size: 20px;
    color: #17394d;
}
#frmConnection .button-close {
    width: 32px;
    height: 32px;
    margin: 20px;
}
#frmConnection .button-close .fa {
    font-size: 32px;
    color: #798d99;
}
#frmConnection .button-close:hover .fa {
    font-size: 32px;
    color: #FF0000;
}
#frmConnection .message-block {
    padding: 5px;
    background-color: #fff;
}
#frmConnection .message-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmConnection .messagecontent-data {
    display: flex;
}
#frmConnection .data-text {
    font-size: 16px;
    color: #005766;
    text-align: center;
}
#frmConnection .button-container {
    width: 30%;
    min-width: 90px;
}
/* Настройка чата*/

#frmChatedit .contactbox-user-post {
    display: flex;
}

#frmEditusers .contactbox-user-post {
    display: flex;
}

/*---------- EditUsers ----------*/
#frmEditusers .user-box {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmEditusers .user-box-expand {
    width: 30px;
    height: 30px;
    margin: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    color: #5F9EA0;
    border: 1px solid #5F9EA0;
    border-radius: 8px;
}
#frmEditusers .user-box-expand:hover {
    color: #00a8ff;
    border: 1px solid #00a8ff;
}
#frmEditusers .user-box-data {
    display: flex;
    flex-direction: column;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmEditusers .user-box-data .name {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmEditusers .user-box-data .post {
    font-size: 14px;
    color: #919fa9;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*---------- EditProfile ----------*/
#frmEditprofile .form-control {
    height: 34px;
}
/*---------- Groups ----------*/
#frmGroups .group-box {
    min-height: 40px;
    height: auto;
    padding: 3px 6px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmGroups .group-box-expand {
    width: 30px;
    height: 30px;
    margin: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    color: #5F9EA0;
    border: 1px solid #5F9EA0;
    border-radius: 8px;
}
#frmGroups .group-box-expand:hover {
    color: #00a8ff;
    border: 1px solid #00a8ff;
}
#frmGroups .group-box-data {
    display: flex;
    flex-wrap: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmGroups .group-box-data .name {
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmGroups .button-edit, #frmGroups .button-del {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}
/*---------- Jobs ----------*/
#frmJobs .job-box {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmJobs .job-box-expand {
    width: 30px;
    height: 30px;
    margin: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    color: #5F9EA0;
    border: 1px solid #5F9EA0;
    border-radius: 8px;
}
#frmJobs .job-box-expand:hover {
    color: #00a8ff;
    border: 1px solid #00a8ff;
}
#frmJobs .job-box-data {
    display: flex;
    flex-wrap: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmJobs .job-box-data .name {
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmJobs .button-edit, #frmJobs .button-del {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}
/*---------- Settings ----------*/
#frmSettings .user-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#frmSettings .box-avatar {
    height: 100px;
    width: 100px;
    overflow: hidden;
    margin-right: 15px;
    border: 1px solid #c5d6de;
}
#frmSettings .box-about {
    width: 65%;
    height: 100px;
    border: 1px solid #c5d6de;
    background-color: #ebeef0;
}
#frmSettings .info-block-name {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
}
#frmSettings .settings-align {
    display: flex;
    align-items: center;
}
#frmSettings .button-play {
    height: 40px;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: justify;
    align-items: center
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    overflow: hidden;
    cursor: pointer;
}
#frmSettings .button-play .button-img {
    margin-right: 10px;
}
#frmSettings .button-play .button-img .fa {
    font-weight: 900;
}
#frmSettings .button-play .button-text {
    margin: 0;
    text-transform: uppercase;
}
#frmSettings .overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.5s ease;
}
#frmSettings .box-avatar:hover {
    cursor: pointer;
}
#frmSettings .box-avatar:hover .overlay {
    display: block;
    background: rgba(0, 0, 0, .5);
}
#frmSettings .hover-block {
    position: absolute;
    width: 100%;
    height: 25%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 11px;
    opacity: 0;
    transition: opacity .35s ease;
}
#frmSettings .box-avatar:hover .hover-block {
    opacity: 1;
}
#frmSettings .hover-block-img .fas {
    font-weight: 900;
}
/*---------- Hello ----------*/
#frmHello .content-block {
    height: calc(100vh - 70px);
}
#frmHello .welcome-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#frmHello .welcomebox-zag {
    font-size: 30px;
    margin: 20px;
}
#frmHello .welcomebox-avatar {
    position: relative;
}
#frmHello .welcomebox-avatar-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
#frmHello .online {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 15px;
    left: 155px;
    background-color: #2ebf00;
    border-radius: 50%;
    border: 2px solid #fff;
}
#frmHello .welcomebox-message {
    margin: 20px;
    font-size: 16px;
}
#frmHello .welcomebox-data {
    font-size: 16px;
}
#frmHello .welcomebox-data-username {
    font-family: 'Verdana Bold';
    font-style: italic;
}
/*---------- Chatedit ----------*/
#frmChatedit .content-block {
    /*height: calc(100vh - 60px);*/
    overflow: hidden;
}
#frmChatedit .list-box {
    /*height: calc(100vh - 230px);*/
    margin: 10px 0;
    padding: 5px;
    background-color: #fff;
    overflow-y: scroll;
}
#frmChatedit .contact-box {
    position: relative;
    height: 60px;
    padding: 5px;
    border-bottom: 1px solid #c5d6de;
    display: flex;
    align-items: center;
}
#frmChatedit .contact-box:hover {
    background-color: #f2f6f9;
}
#frmChatedit .contact-box .selected {
    background-color: #f2f6f9;
}
#frmChatedit .contact-box .checkbox-block {
    margin-left: 10px;
}
#frmChatedit .contactbox-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 20px 0 15px;
}
#frmChatedit .contactbox-avatar .img-box {
    width: 50px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
#frmChatedit .online {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 2px;
    left: 40px;
    background-color: #2ebf00;
    border-radius: 50%;
    border: 2px solid #fff
}
#frmChatedit .online-0 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 2px;
    left: 40px;
    background-color: none;
    border-radius: none;
    border: none;
}
#frmChatedit .online-1 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 2px;
    left: 40px;
    background-color: #2ebf00;
    border-radius: 50%;
    border: 2px solid #fff;
}
#frmChatedit .online-2 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 2px;
    left: 40px;
    background-color: #FFD700;
    border-radius: 50%;
    border: 2px solid #fff;
}
#frmChatedit .online-3 {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 2px;
    left: 40px;
    background-color: #C0C0C0;
    border-radius: 50%;
    border: 2px solid #fff;
}
#frmChatedit .in-chat-check {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
    font-size: 20px;
    color: #adb7be;
    border: 1px solid #adb7be;
    border-radius: 8px;
}
#frmChatedit .check-off {
    color: #adb7be;
    border: 1px solid #adb7be;
}
#frmChatedit .check-on {
    color: #00a8ff;
    border: 1px solid #00a8ff;
}
#frmChatedit .info-time {
    color: #919fa9;
}
#frmChatedit .info-count {
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    text-align: center;
    min-width: 18px;
    border-radius: 9px;
    color: #fff;
    font-weight: 600;
    background-color: #fa424a;
    display: none;
}
#frmChatedit .content-block .button-container {
    width: 20%;
    min-width: 90px;
}

#frmChatedit .control-label{
    margin-left: 5px;
}

.chat-settings {
    display: flex;
    padding: 5px;
}

.chat-type {
    width: 30%;
    margin-left: 5px;
}
/*---------- Popupmessage ----------*/
#frmPopupmessage {
    z-index: 5000;
}
#frmPopupmessage .popup-box{
    height: 60px;
    background-color: rgba(255, 200, 24, 0.8);
    overflow: hidden;
}
#frmPopupmessage .popup-background {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 200, 24, 0.8);
    border-radius: 8px;
    overflow: hidden;
}
#frmPopupmessage .popup-content{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
#frmPopupmessage .popupbox-avatar {
    width: 60px;
    height: 60px;
}
#frmPopupmessage .popupbox-message {
    width: 65%;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    margin-left: 10px;
}
#frmPopupmessage .btn-close {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmPopupmessage .btn-close .fa {
    color: rgba(255, 200, 24, 0.8);
    font-size: 30px;
}
/*---------- NOTES ----------*/
#frmNotes {
}
#frmNotes .content-block {
    background-color: #d5e7e6;
}
#frmNotes .note-box {
    margin-top: 5px;
    min-height: 40px;
    padding: 3px;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #dcdcdc;
}
#frmNotes .note-menu {
    margin-top: 3px;
    display: flex;
    justify-content: flex-end;
}
#frmNotes .button-edit, #frmNotes .button-del {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}
#frmNotes .no-notes {
    display: flex;
    justify-content: center;
}
/*---------- StartVideo ----------*/
#frmStartVideo .content-block {
    height: calc(100% - 60px);
}
#frmStartVideo .message-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmStartVideo .messagecontent-data {
    display: flex;
}
#frmStartVideo .data-text {
    font-size: 20px;
    color: #005766;
    text-align: center;
}
/*---------- Messagebox ----------*/
#frmMessagebox .modal-querybox .content-box {
    margin: 30vh 5px 80px;
}
#frmMessagebox .header-pages-img .fa {
    color: #798d99;
}
#frmMessagebox .message-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmMessagebox .messagecontent-data {
    display: flex;
}
#frmMessagebox .data-text {
    font-size: 20px;
    color: #005766;
    text-align: center;
}
.load-indicator {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*---------- VideoInvite ----------*/
#frmVideoInvite {
    z-index: 10000;
}
#frmVideoInvite .header-pages-img {
    height: 26px
}
#frmVideoInvite .header-pages-title {
    color: #fff;
}

#frmVideoInvite .content-block {
    height: calc(100% - 60px);
}

#frmVideoInvite .invite-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmVideoInvite .invite-avatar {
    width: 100px;
}
#frmVideoInvite .invite-avatar .img-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}
#frmVideoInvite .invite-data {
    display: flex;
    flex-direction: column;
}
#frmVideoInvite .data-text {
    font-size: 20px;
    color: #005766;
    text-align: center;
}
/*---------- Photo ----------*/
#frmPhoto .modal-querybox {
    z-index: 1200;
    background: rgba(0,0,0,0.7);
    pointer-events: auto;
    overflow-y: scroll;
}
#frmPhoto .modal {
    padding-top: 10vh;
}
#frmPhoto .title {
    height: 5vh;
    min-height: 45px;
}
#frmPhoto .title .button-close {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #005766;
}
#frmPhoto .title .fa {
    color: #438fa2;
    font-size: 30px;
}
#frmPhoto .photo-content {
    display: flex;
    padding: 10px;
}
#frmPhoto .photocontent-img {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
#frmPhoto .photocontent-img img {
    width: 100%;
}
/*---------- Toast ----------*/
#frmToast .toast-box {
    z-index: 1200;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 60vh;
}
#frmToast .content-box {
    width: 100%;
    max-width: 350px;
    margin: 15px auto;
    padding: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
}
#frmToast .message-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmToast .message-text {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
#frmToast .obj-content {
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
#frmToast .obj-text {
    font-size: 18px;
    text-align: center;
}
/*---------- Calendar ----------*/
#frmCalendar .content-block {
    height: calc(100vh - 60px);
}
/*---------- Events ----------*/
#frmEvents .button-back {
    display: block;
    padding: 0 10px 0;
}
#frmEvents .header-pages-content {
    margin-left: 0;
}
#frmEvents .events-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    font-size: 20px;
}
#frmEvents .event-box {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmEvents .event-box-data {
    flex-grow: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmEvents .event-box-data .event-box-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
#frmEvents .event-box-data .event-box-noty {
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmEvents .button-edit, #frmEvents .button-del {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}
#frmEvents .no-events {
    display: flex;
    justify-content: center;
}
#frmEvents .event-time {
    font-size: 20px;
    font-weight: bold;
    color: #c1c1c1;
}
/*---------- Event ----------*/
#frmEvent .modal-querybox .custom-form {
    margin-top: 0;
}
#frmEvent .modal-querybox .content-block .button-container {
    width: 25%;
    min-width: 130px;
}
#frmEvent .button-link {
    cursor: pointer;
}
#frmEvent .button-link:hover {
    color: #6ac0f3;
}
#frmEvent .inputErrorLbl {
    font-size: 9pt;
    color: red;
    display:none;
}
#frmEvent .inputError {
    border-color: red;
}
/*---------- Eventslist ----------*/
#frmEventslist .button-back {
    display: block;
    padding: 0;
    margin-left: 10px;
}
#frmEventslist .events-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    font-size: 20px;
}
#frmEventslist .event-box-content {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmEventslist .event-box-data {
    flex-grow: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmEventslist .event-box-data .event-box-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
#frmEventslist .event-box-data .event-box-noty {
    overflow: hidden;
    text-overflow: ellipsis;
}
#frmEventslist .button-edit, #frmEventslist .button-del {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}
#frmEventslist .datestartbox {
    margin: 5px auto 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#frmEventslist .datestartbox-text {
    background: #dedede;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10pt;
}
#frmEventslist .event-time {
    font-size: 20px;
    font-weight: bold;
    color: #c1c1c1;
}
#frmEventslist .no-events {
    display: flex;
    justify-content: center;
}
/*---------- TasksFilter ----------*/
#frmTasksfilter .modal-querybox .custom-form {
     margin-top: 0; 
}
#frmTasksfilter .form-label {
    display: flex;
    align-items: center;
}
#frmTasksfilter input[type="checkbox"] {
    margin-top: -2px;
}
#frmTasksfilter .formlabel-text {
    font-weight: 500;
    margin-left: 10px;
}
#frmTasksfilter .formlabel-text1 {
    font-weight: 500;
    margin-left: 2px;
}
#frmTasksfilter .form-group-fl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmTasksfilter .filter-ot, .filter-do {
    width: 49%;
}
#frmTasksfilter .error-text {
    color: #FF0000;
    font-size: 12px;
}
/*---------- Imageviewer ----------*/
#frmImageviewer .modal-querybox {
    z-index: 1200;
    background: rgba(0,0,0,0.6);
    pointer-events: auto;
    overflow: hidden;
}
#frmImageviewer .modal-querybox .modal-dialog {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#frmImageviewer .modal-querybox .content-box {
    background: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
}
#frmImageviewer .modal-querybox .content-block {
    background: none;
    width: auto;
    height: auto;
    max-width: 95%;
    max-height: 95%;
    padding: 0;
    display: flex;
    justify-content: center;
    min-width: 90%;
    min-height: 200pt;
}
#frmImageviewer .button-close {
    position: absolute;
    width: 35px;
    height: 35px;
    right: 5px;
    top: 5px;
    border-radius: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    margin: 0;
}
#frmImageviewer .button-close .backgr-field {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.3);
}
#frmImageviewer .button-close .fa {
    z-index: 2;
    font-size: 25px;
}
#frmImageviewer .photocontent-img {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
}
#frmImageviewer .photocontent-img img {
    object-fit: contain;
}
#frmImageviewer .photocontent-button-box {
    position: absolute;
    width: 100%;
    bottom: 5px;
    left: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#frmImageviewer .photocontent-button a {
    position: relative;
    height: 35px;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    padding: 0 25px;
    cursor: pointer;
}
#frmImageviewer .photocontent-button .backgr-field {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.3);
}
#frmImageviewer .photocontent-button .photocontent-button-data {
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
}
#frmImageviewer .photocontent-button .photocontent-button-data:hover {
    color: #6ac0f3;
}
#frmImageviewer .photocontent-button .photocontent-button-text {

}
#frmImageviewer .photocontent-button .photocontent-button-img {
    margin-left: 20px;
}
/*---------- Query ----------*/
#frmQuery .message-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
#frmQuery .modal-querybox .header-pages-img {
    width: 25px;
    height: 25px;
    margin: 15px;
}
#frmQuery .modal-querybox .header-pages-img .fa {
    font-size: 25px;
    color: #fff;
}
#frmStatistic .btn-report{flex-grow: 1;display: flex;justify-content: flex-end;}
    #frmStatistic .btn-report .fa-file-alt{font-size: 18pt;color: white;margin: 0 10px 0 0;}

.site-query-btn{display: flex;flex-direction: column;}
    .site-query-btn .name-site-query-btn{display: flex;align-items: baseline;}
    .site-query-btn .name-site-query-btn >div{padding: 0 0 0 5px;}

#frmTaskReport .header-date{min-height: 60px;background-color: #6ac0f3;display: flex;align-items: center;padding: 5px 10px;flex-wrap: wrap;justify-content: center;color: white;}
    #frmTaskReport .header-date .btn-print{color: white;}
#frmTaskReport .content-block{height: calc(100vh - 120px);overflow: hidden;}
        #frmTaskReport .date-box{flex-shrink: 1;padding: 5px;display: flex;justify-content: center;align-items: center;}
            #frmTaskReport .date-box input{margin: 0 0 0 5px;border-radius: 5px;color: black;content: attr(placeholder);}
        #frmTaskReport .btn{padding: 6px 20px;background: #71beec;color: white;height: auto;min-height: fit-content;margin: 5px;border: 1px solid;flex-shrink: 1;}
        #frmTaskReport .source{width: 100%;height: 100%;position: relative;overflow-y: auto;overflow-x: hidden;}
            #frmTaskReport .s-head{display: flex;justify-content: center;}
            #frmTaskReport .s-body{display: flex;border: 1px solid;flex-wrap: nowrap;}
                #frmTaskReport .s-body > div{flex: 1;display: flex;flex-direction: column;border-right: 1px solid;}
                #frmTaskReport .s-body > div:last-child{border-right: none;}
                    #frmTaskReport .d-name{position: sticky;top: 0;background: white;}
                    #frmTaskReport .s-body > div > div{display: flex;justify-content: center;border-bottom: 1px solid;}
                    #frmTaskReport .s-body > div > div:last-child{border-bottom: none;}
            #frmTaskReport .d-body{display: flex;flex-direction: column;border: 1px solid;flex-wrap: nowrap;}
                #frmTaskReport .d-body > div{display: grid;border-bottom: 1px solid;grid-template-columns: repeat(5,1fr);}
                #frmTaskReport .d-body > div:last-child{border-bottom: none;}
                    #frmTaskReport .d-body > div > div{flex: 1; display: flex;justify-content: center;align-items: center;border-right: 1px solid;overflow: hidden;word-break: break-word;padding: 2px;}
                    #frmTaskReport .d-body > div > div:last-child{border-right: none;}

  /*---------- Frame Tree Users ----------*/
#frameTreeUsers .group-box {
    min-height: 40px;
    height: auto;
    padding: 5px;
    border-bottom: 1px solid #c6e8f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#frameTreeUsers .group-box-expand {
    width: 24px;
    height: 24px;
    /*margin: 5px;*/
    /*margin: 0px 20px;*/
    margin-right: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    color: #5F9EA0;
    border: 1px solid #5F9EA0;
    border-radius: 8px;
    flex-shrink: 0;
}
#frameTreeUsers .group-box-expand:hover {
    color: #00a8ff;
    border: 1px solid #00a8ff;
}
#frameTreeUsers .group-box-data {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}
#frameTreeUsers .group-box-data .name {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
#frameTreeUsers .group-box-data .post {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: grey;
    font-size: 10pt;
}
#frameTreeUsers .button-edit, #frameTreeUsers .button-del {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 3px;
}

#frameTreeUsers .parents {margin-left: 14pt;}
#frameTreeUsers .ulGroups {margin-left: 20px;}
/*анимация*/
/*#frameTreeUsers .parents>li>div>div{
    height:0;
    transition: 0.2s;
}
#frameTreeUsers .parents>li{
    height:0;
    transition: 0.2s;
}
#frameTreeUsers ul>li:hover .parents>li>div>div {
    height:50px;
}

#frameTreeUsers ul>li:hover .parents>li {
    height:50px;
}*/

#frameTreeUsers .counter {
    display: none;
    /* background-color: #6ac0f3; */
    border-radius: 50%;
    width: 20pt;
    height: 20pt;
    color: #9e9e9e;
    font-size: 12pt;
    margin-right: 5pt;
}
  
  .color-checked {
    background-color: #6ac0f3;
  }

/*---------- Медиа запросы всегда в конце ----------*/
/*---------- MEDIA ---------*/
@media only screen  and (min-width: 992px) {
    #frmStart, #frmConnectsettings {
        font-size: 12pt;
    }
    #frmFiles .media-list li {
        width: 20%;
    }
}
@media only screen  and (max-width: 1300px) {
    #frmMain .zagmain-text {
        font-size: 16pt;
    }
}

@media only screen  and (max-width: 768px) {
    .button-back {display: block;flex-shrink: 1;}
    .header-pages-content {
        margin-left: 10px;
    }
    #frmContact .header-pages-avatar {
        margin-left: 0;
        width: 40px;
        height: 40px;
    }
    #frmContact .header-pages-avatar-box{padding: 0 10px 0 0;}
    #frmContact .header-pages-data {
        font-size: 11pt;
    }

    #frmMain .zagmain-text {
        font-size: 20pt;
    }
    .header-pages-title {
        font-size: 20px;
    }
    .modal-querybox .header-pages-title {
        font-size: 14px;
    }
    #frmOrganizations .org-box-data {
        flex-wrap: wrap;
    }
    #frmOrganizations .org-box-data .name{
        max-width: 100%;
        min-width: 100%;
    }
    #frmOrganizations .org-users-data {
        flex-wrap: wrap;
    }
    #frmOrganizations .org-users-data .name{
        width: 100%;
    }
    #frmOrganizations .org-users-data .post{
        width: 90%;
    }
    #frmReminders .tabl-box-menu {
        width: 25%;
    }
    #frmReminders .rmd-box-menu {
        width: 25%;
    }
    #frmFiles .filebox-data {
        width: 55%;
        font-size: 11pt;
    }
    #frmFiles .filebox-name {
        font-size: 14px;
    }
    #frmSettings .sittings-align {
        display: block;
    }
    #frmFiles .filebox-date {
        width: 27%;
    }

    #frmTaskReport .date-box:nth-child(3){width: 100%;}
    #frmTaskReport .d-body > div{grid-template-columns: repeat(4,1fr);}
        #frmTaskReport .d-body > div > div:nth-child(1){grid-column-start: 1;grid-column-end: 5;color: black;border-right: none;}
        #frmTaskReport .d-body > div > div{flex: auto;flex-grow: 1;text-align: center;color: white;}
        #frmTaskReport .d-body > div > div:nth-child(2){background: rgb(5, 146, 229);}
        #frmTaskReport .d-body > div > div:nth-child(3){background: rgb(124, 187, 131);}
        #frmTaskReport .d-body > div > div:nth-child(4){background: rgb(97, 108, 156);}
        #frmTaskReport .d-body > div > div:nth-child(5){color: black;}
       /* #frmTaskReport .d-body > div > div:nth-child(6){background: rgb(255, 87, 34);}*/
}
@media print {
    #main{display: none;}
    #frmTaskReport .header-date{display: none;}
    #frmTaskReport .content-block{height: calc(100vh - 120px);overflow: hidden;font-size: 10pt;}
            #frmTaskReport .date-box{flex-shrink: 1;padding: 5px;display: flex;justify-content: center;align-items: center;}
                #frmTaskReport .date-box input{margin: 0 0 0 5px;border-radius: 5px;color: black;content: attr(placeholder);}
            #frmTaskReport .btn{padding: 6px 20px;background: #71beec;color: white;height: auto;min-height: fit-content;margin: 5px;border: 1px solid;flex-shrink: 1;}
            #frmTaskReport .source{width: 100%;height: 100%;position: relative;overflow-y: auto;overflow-x: hidden;}
                #frmTaskReport .s-head{display: flex;justify-content: center;}
                #frmTaskReport .s-body{display: flex;border: 1px solid;flex-wrap: nowrap;}
                    #frmTaskReport .s-body > div{flex: 1;display: flex;flex-direction: column;border-right: 1px solid;}
                    #frmTaskReport .s-body > div:last-child{border-right: none;}
                        #frmTaskReport .d-name{position: sticky;top: 0;background: white;}
                        #frmTaskReport .s-body > div > div{display: flex;justify-content: center;border-bottom: 1px solid;}
                        #frmTaskReport .s-body > div > div:last-child{border-bottom: none;}
                #frmTaskReport .d-body{display: flex;flex-direction: column;border: 1px solid;flex-wrap: nowrap;}
                    #frmTaskReport .d-body > div{display: grid;border-bottom: 1px solid;grid-template-columns: repeat(5,1fr);}
                    #frmTaskReport .d-body > div:last-child{border-bottom: none;}
                        #frmTaskReport .d-body > div > div{flex: 1; display: flex;justify-content: center;align-items: center;border-right: 1px solid;overflow: hidden;word-break: break-word;padding: 2px;}
                        #frmTaskReport .d-body > div > div:last-child{border-right: none;}
}