body {
    color: #153B62;
}
* {
    font-family: 'Roboto';
    font-weight: 300;
    user-select: none;
    -webkit-user-select: none;
}
div {
    box-sizing: border-box;
    display: block;
}
input, input:focus, select:focus, textarea {
    font-size: 16px;
    outline: none;
    user-select: initial!important;
    -webkit-user-select: initial!important;
}
#myapp {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('/static/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}
/* Login screen */
.login-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* user-select: none;
     */
    opacity: 0;
    transition: 0.6s;
}
.login-screen.shown {
    opacity: 1;
}
.login-screen img {
    width: 198px;
    max-width: min(100%, 329px);
    left: 50%;
    transform: translate(-50%, -10px);
    position: absolute;
    top: 23px;
    transition: 0.3s;
}
.login-screen img.profile-pic {
    
border-radius: 50%;width: 80px;height: 80px;object-fit: cover;border: 1px solid #2f7b69;padding: 6px;}
.login-screen.shown img {
    transform: translate(-50%, 0);
}
.login-screen .forgot-password {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
}
.login-screen .forgot-password a {
    text-decoration: none!important;
    color: inherit;
}

.login-screen .forgot-password span {
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 87%;
}
.login-screen .content {
    position: absolute;
    top: 237px;
    transform: translate(0, -50%);
    width: 100%;
    padding: 23px;
    box-sizing: border-box;
}
.login-screen .content.profile {

top: 291px;}
.login-screen .content .title {
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 22px;
    transform: translateY(-15px);
    transition: 0.3s;
    opacity: 0;
    transition-delay: 0.1s;
}
.login-screen.shown .content .title {
    transform: translateY(0);
    opacity: 1;
}
.login-screen .content .input-row {
    margin-bottom: 22px;
display: block;}
.login-screen .content input {
    width: 100%;
    display: block;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    background-color: #fff!important;
    border-radius: 4px;
    transition: 0.2s;
/* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */}
.login-screen .content .input-row.first {
    transition-delay: 0.2s;
    transition: 0.3s;
    opacity: 0;
    transform: translateY(-10px);
}
.login-screen.shown .content .input-row.first {
    transform: translateY(0);
    opacity: 1;
}
.login-screen .content .input-row.second {
    transition-delay: 0.3s;
    transition: 0.3s;
    opacity: 0;
    transform: translateY(-10px);
}
.login-screen.shown .content .input-row.second {
    transform: translateY(0);
    opacity: 1;
}
.login-screen .content .input-row label {
    display: block;
    font-weight: 400;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.login-screen .content button {
    border: none;
    background: rgb(67,95,124);
    background: linear-gradient(90deg, rgba(67,95,124,1) 0%, rgba(43,128,101,1) 100%);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border-radius: 4px;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 15px;
    opacity: 0;
    transition: 0.3s;
    transition-delay: 0.25s;
    transform: translateY(-15px);
}
.login-screen .content button.secondary-button {

background: none;border: 2px solid #153B62;color: #153B62;margin-top: 20px;}
.login-screen.shown .content button {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="password"] {
        font-family: Verdana;
        letter-spacing: 0.2em;
    }
}

.login-screen .error {
color: #C3186B;
width: calc(100% - 10px);position: absolute;left: 5px;background-color: #fff;padding: 2px;display: block;top: 5px;z-index: 6;box-sizing: border-box;padding: 21px;letter-spacing: 1px;border-radius: 6px;font-size: 90%;box-shadow: 0 0 12px #0000000d;opacity: 0.95;transform: translateY(calc(-100% - 26px));transition: 0.4s;opacity: 0;}

.login-screen .error.shown {
    opacity: 0.95;
    transform: translateY(0);
}

.login-screen .success {
    color: #2b8065;
    font-size: 110%;
    width: calc(100% - 10px);position: absolute;left: 5px;background-color: #fff;padding: 2px;display: block;top: 5px;z-index: 6;box-sizing: border-box;padding: 21px;letter-spacing: 1px;border-radius: 6px;font-size: 90%;box-shadow: 0 0 12px #0000000d;opacity: 0.95;transform: translateY(calc(-100% - 26px));transition: 0.4s;opacity: 0;}

.login-screen .success.shown {
    opacity: 0.95;
    transform: translateY(0);
}

.login-screen p {
    font-size: 85%;
    letter-spacing: 1px;
}

/* Dashboard */

.dashboard {

display: block;width: 100%;top: 0;height: 100%;left: 0;/* background-color: #fff; */position: absolute;z-index: 5;}

.dashboard .content {

position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 66px);overflow-y: auto;}

#menu {

background-color: rgb(255 255 255 / 36%);position: absolute;bottom: 0;width: 100%;display: flex;/* padding: 12px 0; *//* box-shadow: 1px 1px #ddd; *//* border-top: 1px solid #153B62; */
opacity: 0;
    transform: translateY(70px);
    transition: 0.3s;
}

#menu .bubble {

background-color: #D03535;width: 15px;height: 15px;line-height: 15px;display: inline-block;color: #fff;position: absolute;border-radius: 50%;font-size: 70%;right: 12px;top: 9px;}

#menu.shown {
    opacity: 1;
    transform: translateY(0);
/* visibility: visible; */}

#menu .item {

width: 20%;text-align: center;padding: 10px 0;display: block;
    text-decoration: none;
    color: inherit;/* color: #ddd; */position: relative;}

#menu .item .icon {
    opacity: 1;
font-size: 134%;display: block;margin-bottom: 5px;color: #878787;}

#menu .item .caption {

font-size: 79%;/* font-weight: 600; */color: #878787;}

#menu .item.active .icon {
    opacity: 1;
color: #153B62;}


#menu .item.active .caption {
    font-weight: 400;
color: #153B62;}

.news-screen {

position: absolute;left: 0;top: 0;width: 100%;overflow-y: auto;height: calc(100% - 65px);}

.news-screen .inner-content {

padding: 15px;}

.news-screen .news-item {

}

.news-screen .news-item .photo {

width: 100%;display: block;padding-bottom: 33.33%;position: relative;background-color: #eff4f3;margin-bottom: 19px;}

.news-screen .news-item .photo img {

background-color: #ddd;position: absolute;left: 0;width: 100%;top: 0;height: 100%;object-fit: cover;}

.news-screen .news-item .photo .new {

position: absolute;right: 0;top: 0;background-color: #D03535;text-transform: uppercase;color: #fff;font-weight: 400;letter-spacing: 1px;padding: 3px 6px;font-size: 69%;}

.news-screen .news-item .title {

font-size: 120%;font-weight: 600;margin-bottom: 9px;;display: block;}

.news-screen .news-item .date {

font-size: 80%;opacity: 0.85;margin-bottom: 16px;}

.news-screen .news-item .lead {

line-height: 132%;}
.news-screen .separator {

background-color: #ddd;height: 5px;width: 80px;margin: 41px auto;}

.news-screen .separator:last-child {
    
display: none;}



.full-screen-news {
transition: 0.4s;
position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);/* background-color: #fff; */background-color: #f1f1f1;visibility: hidden;opacity: 0;overflow-y: auto;transform: scale(0.95) translateY(-20px);}

.full-screen-news.shown {
    opacity: 1;
    transform: none;
visibility: visible;}

.full-screen-news .photo {

    width: 100%;display: block;/* padding-bottom: 33.33%; */position: relative;background-color: #000000;/* margin-bottom: 19px; */}

.full-screen-news .photo img {

    /* background-color: #ddd; *//* position: absolute; *//* left: 0; *//* width: 100%; *//* top: 0; *//* height: 100%; *//* object-fit: cover; */width: 100%;}

.full-screen-news .photo .new {

    position: absolute;right: 0;top: 0;background-color: #D03535;text-transform: uppercase;color: #fff;font-weight: 400;letter-spacing: 1px;padding: 3px 6px;font-size: 69%;}

.full-screen-news .title {

    font-size: 120%;font-weight: 600;/* margin-bottom: 9px; */;display: block;padding: 8px 13px;/* position: sticky; *//* top: 0; *//* background-color: #fff; *//* z-index: 5; */}

.full-screen-news .date {

    font-size: 80%;opacity: 0.85;/* margin-bottom: 16px; */padding: 13px;padding-top: 0;}

.full-screen-news .lead {

    line-height: 132%;padding: 15px;}

.full-screen-news .inner-content {
    
/* background-color: #f1f1f1; */}

.full-screen-news .inner-content {

}

.full-screen-news .back {
    
/* padding: 5px 13px; *//* padding-top: 16px; */margin-left: 6px;/* margin-top: 10px; */font-size: 113%;position: sticky;
    top: 6px;
    background-color: rgb(241 241 241 / 88%);
    z-index: 5;width: 35px;height: 35px;border-radius: 50%;text-align: center;line-height: 37px;}

.notifications-screen {

padding: 15px;position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);overflow-y: auto;}

.notifications-screen .inner-content {

}

.notifications-screen .separator:first-child {
margin-top: 0;;}
.notifications-screen .separator {

text-align: center;font-weight: 400;margin-bottom: 11px;margin-top: 30px;font-size: 83%;}

.notifications-screen .notification {

background-color: #fff;border-radius: 5px;padding: 13px;box-shadow: 0px 2px 12px 3px #00000014;margin-bottom: 10px;}

.notifications-screen .notification.not-seen {

font-weight: 400;}

.notifications-screen .notification .time {

font-size: 79%;position: relative;top: -1px;margin-right: 3px;display: inline-block;font-weight: 400;}
.notifications-screen .notification.not-seen .time {

font-weight: 400;}

.chat-screen {position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);overflow-y: auto;}

.chat-screen .inner-content {}

.chat-screen .search {padding: 15px;position: relative;}
.chat-screen .search .icon {position: absolute;left: 27px;top: 25px;font-size: 15px;pointer-events: none;}
.chat-screen .search input {width: 100%;border-radius: 37px;border: none;display: block;box-sizing: border-box;padding: 7px 34px;box-shadow: 1px 4px 6px rgb(0 0 0 / 9%);}
.chat-screen .search .close {position: absolute;right: 23px;top: 23px;width: 20px;height: 20px;background-color: #153b62;border-radius: 50%;color: #fff;text-align: center;line-height: 20px;transform: scale(0.8);}
.chat-screen .rooms {padding: 16px;box-sizing: border-box;width: 100%;padding-top: 0;margin-top: 19px;}
.chat-screen .room {border-bottom: 1px solid #d7d7d7;display: flex;padding-bottom: 11px;margin-bottom: 17px;;}
.chat-screen .room .photo {width: 50px;position: relative;text-align: center;}
.chat-screen .room .photo img {width: 100%;width: 50px;height: 50px;border-radius: 50%;object-fit: cover;}
.chat-screen .room .photo .bubble {position: absolute;right: 0;top: 0;width: 15px;height: 15px;background-color: #D03535;color: #fff;text-align: center;font-size: 71%;border-radius: 50%;font-weight: 400;}
.chat-screen .room .photo .group {

width: 50px;height: 50px;background-color: #ddd;border-radius: 50%;padding-top: 10px;}
.chat-screen .room .photo .group .icon {

margin-bottom: 2px;color: #153b62;font-size: 92%;}
.chat-screen .room .photo .group .caption {

text-align: center;text-transform: uppercase;letter-spacing: 1px;font-size: 43%;font-weight: 400;}
.chat-screen .room .name-and-last-message {

width: calc(100% - 50px);padding-left: 15px;padding-top: 2px;}

.chat-screen .room .name-and-last-message .name {

font-weight: 400;margin-bottom: 6px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.chat-screen .room .name-and-last-message .last-message {



overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;font-size: 90%;}

.chat-screen .room:last-child {
    
border: none;}

.chat-screen .room.not-seen {

}


.chat-screen .room.not-seen .name {

font-weight: 600;}

.chat-screen .room.not-seen .last-message {

font-weight: 600;}

.room-screen {
transition: 0.25s;
position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);overflow-y: auto;display: flex;flex-direction: column;/* height: 100%; */z-index: 5;}


.room-screen.focused {
    height: 100%;
}

.room-screen .messages small {
    display: block;
    margin-bottom: 6px;
}

.room-screen .messages small b {
    font-weight: 400;
}


.room-screen .messages .separator {
    
font-weight: 400;text-align: center;margin: 19px 0;font-size: 80%;}

.room-screen .messages {

/* padding-bottom: 65px; */padding: 14px;/* padding-bottom: 63px; */height: 100%;overflow-y: scroll;}


.room-screen .input-row {

width: 100%;display: flex;padding: 15px;background-color: rgb(227 234 235);align-items: end;/* background-color: #eff4f3; */}


.room-screen .input-row .send-icon {

width: 34px;height: 34px;background-color: #153b62;color: #ffffff;border-radius: 50%;text-align: center;line-height: 34px;font-size: 82%;background: linear-gradient(90deg, rgba(67,95,124,1) 0%, rgba(43,128,101,1) 100%);/* margin-left: 8px; */box-shadow: 0px 0px 15px #0000001a;}

.room-screen .input-row .input {

width: calc(100% - 34px);padding-right: 10px;}

.room-screen .input-row textarea {

width: 100%;border: none;border-radius: 31px;padding: 10px 13px;display: block;box-sizing: border-box;font-size: 85%;box-shadow: 0px 0px 15px #0000001a;}

.room-screen .messages .my-message {

/* width: 50%; */margin-bottom: 18px;text-align: right;}
.room-screen .messages .my-message .bubble {
    
display: inline-block;background-color: #153b62;width: auto;
    max-width: 68%;
    /* padding-left: 13px; */
    display: inline-block;
    border: 1px solid #153b62;
    padding: 12px;
    border-radius: 11px;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 15px;
    font-size: 85%;color: #fff;text-align: left;}
.room-screen .messages .other-message {

margin-bottom: 16px;max-width: 70%;display: flex;align-items: end;}

.room-screen .messages .other-message .photo {

width: 40px;height: 33px;}
.room-screen .messages .other-message .photo img {

width: 33px;height: 33px;border-radius: 50%;}

.room-screen .messages .other-message .text {

width: auto;max-width: calc(100% - 40px);/* padding-left: 13px; */display: inline-block;border: 1px solid #153b62;padding: 12px;border-radius: 11px;border-bottom-left-radius: 7px;border-top-left-radius: 15px;font-size: 85%;}

.room-screen .room-name {

display: flex;padding: 10px 16px;background-color: rgb(227 234 235);background-color: #eff4f3;/* backdrop-filter: blur(2px); */box-shadow: -1px 4px 15px #0000000d;}

.room-screen .room-name .back {

}

.room-screen .room-name .back a {

color: inherit;}


.room-screen .room-name .name {

padding-left: 12px;font-weight: 400;text-transform: uppercase;letter-spacing: 1px;font-size: 76%;position: relative;top: 2px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}


.projects-screen {

position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);display: flex;flex-direction: column;}

.projects-screen .search {padding: 15px;position: relative;height: 65px;}
.projects-screen .search .icon {position: absolute;left: 27px;top: 25px;font-size: 15px;pointer-events: none;}
.projects-screen .search input {width: 100%;border-radius: 37px;border: none;display: block;box-sizing: border-box;padding: 7px 34px;box-shadow: 1px 4px 6px rgb(0 0 0 / 9%);}
.projects-screen .search .close {position: absolute;right: 23px;top: 23px;width: 20px;height: 20px;background-color: #153b62;border-radius: 50%;color: #fff;text-align: center;line-height: 20px;transform: scale(0.8);}
.projects-screen .content {

height: calc(100% - 65px);overflow-y: auto;padding-top: 5px;}
.projects-screen .content .inner-content {

padding: 16px;}


.projects-screen .section {

margin-bottom: 35px;;}


.projects-screen   .separator {

font-weight: 600;text-transform: uppercase;letter-spacing: 1px;font-size: 81%;padding-left: 11px;margin-bottom: 9px;}
.projects-screen .separator .nr {

background-color: rgb(207 216 217);padding: 1px 7px;border-radius: 15px;font-size: 79%;position: relative;top: -1px;margin-left: 3px;display: inline-block;font-weight: 400;}

.projects-screen .table {

/* background-color: rgb(247 250 249 / 69%); */border-radius: 8px;overflow: hidden;/* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */}

.projects-screen .row {

display: flex;padding: 10px 11px;margin-bottom: 2px;background-color: #f6f9f8;align-items: center;}

.projects-screen .row.no-left-icon {

}
.projects-screen .row.no-left-icon .left-icon {

}
.projects-screen .row .left-icon {

width: 25px;text-align: center;}
.projects-screen .row .text {

width: calc(100% - 65px);padding-left: 6px;white-space: nowrap;overflow: hidden;/* padding-right: 3px; */text-overflow: ellipsis;}
.projects-screen  .row .right-icon {

color: #ababab;width: 40px;text-align: right;font-size: 78%;white-space: nowrap;}

.projects-screen .row.no-left-icon .left-icon {

}
.projects-screen .row.no-left-icon .text {

width: calc(100% - 25px);padding-left: 0;}
.projects-screen  .row.no-left-icon .right-icon {

width: 25px;}


.projects-screen  .check {
    
border: 1px solid #153b62;border-radius: 50%;width: 21px;height: 21px;display: inline-block;line-height: 23px;font-size: 79%;opacity: 0.75;}

.projects-screen  .row.checked .check {

background-color: #91f5d7;border-color: #91f5d7;color: #115e47;}


.projects-screen  .row.checked .text {

text-decoration: line-through;opacity: 0.6;}

.projects-screen .no-content {

padding-left: 10px;font-size: 84%;/* font-style: italic; */}

.search-results {
    padding: 16px;
}

.search-results .project-tag {
    padding: 2px 4px;
display: inline-block;background-color: #b145a6;color: #fff;/* text-transform: uppercase; *//* letter-spacing: 1px; */font-size: 74%;border-radius: 3px;font-weight: 400;position: relative;top: -1px;margin-right: 6px;}

.search-results .file-tag {
    /* padding: 16px; */
/* padding: 16px; */
    padding: 2px 4px;
    display: inline-block;
    background-color: #b14545;
    color: #fff;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
    font-size: 74%;
    border-radius: 3px;
    font-weight: 400;
    position: relative;
    top: -1px;
    margin-right: 6px;}

.search-results .task-tag {
    /* padding: 16px; */
padding: 2px 4px;
    display: inline-block;
    background-color: #45b1a0;
    color: #fff;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
    font-size: 74%;
    border-radius: 3px;
    font-weight: 400;
    position: relative;
    top: -1px;
    margin-right: 6px;}

.search-results .table {
    box-shadow: 0px 0 20px rgb(0 0 0 / 8%);
}

.search-results .table.no-shadow {
    box-shadow: none;
}

.projects-screen .row:last-child {
    margin-bottom: 0;
}

.file-view {

position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 5;background-color: rgb(167 167 167 / 91%);/* color: #fff; */opacity: 0;visibility: hidden;transition: 0.3s;transform: translateX(-100%);display: flex;flex-direction: column;z-index: 50;}

.file-view.shown {

opacity: 100%;
    visibility: visible;
    
    transform: translateX(0);}

.file-view .top {

/* height: 30px; */display: flex;align-items: center;padding: 12px;background-color: #eff4f3;
    /* backdrop-filter: blur(2px); */
    box-shadow: 0px 3px 15px #00000024;}


.file-view .top .filename {

width: calc(100% - 50px);/* padding: 13px; */font-weight: 400;font-size: 82%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}


.file-view .top .size{

width: 50px;text-align: right;font-size: 80%;white-space: nowrap;}

.file-view .content {
position: relative;
height: calc(100% - 95px);}

.file-view .content img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.file-view .content iframe {
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* object-fit: contain; */
/* border: none; */width: 100%;/* height: 1050px; */flex: 1 1 auto;min-height: 640px;}

.file-view .bottom {

height: 65px;display: flex;
    align-items: center;
    /* padding: 12px; */
    background-color: #eff4f3;
    /* backdrop-filter: blur(2px); */
    box-shadow: 1px -4px 15px #0000000d;}


.file-view .bottom .left {

}

.file-view .bottom .right {

}

.file-view .menu {

}


.file-view .bottom .item {

    width: 16.66%;text-align: center;padding: 0px 0;display: block;
    text-decoration: none;
    color: inherit;/* color: #ddd; */;position: relative;top: 1px;}

.file-view .bottom .item .icon {
    opacity: 1;
    font-size: 116%;display: block;margin-bottom: 5px;color: #153B62;}

.file-view .bottom .item .caption {

    font-size: 68%;/* font-weight: 600; */color: #153B62;}

.project-view {

position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);display: flex;flex-direction: column;}

.project-view .content {

/* padding: 16px; */height: calc(100% - 39px);overflow-y: auto;}

.project-view .inner-content {

padding: 16px;}

.project-view .tabs {

display: flex;margin-bottom: 8px;margin-top: 0px;overflow-y: auto;background-color: #eff4f3;box-shadow: -1px 4px 15px #0000000d;/* position: absolute; *//* left: 0; */position: sticky;top: 0;z-index: 5;}

.project-view .tabs .tab {

/* background-color: #eff4f3; *//* border-radius: 36px; */text-align: center;padding: 10px 0;/* margin-right: 10px; */width: 33.33%;border-bottom: 3px solid #ddd;font-size: 80%;/* text-transform: uppercase; *//* letter-spacing: 1px; *//* border-right: 1px solid #ddd; */text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

.project-view .tabs .tab.active {

/* background-color: #153b62; *//* color: #fff; */font-weight: 400;border-bottom: 3px solid rgba(43,128,101,1);color: rgba(43,128,101,1);}

.project-view .tasks {
    
}

.project-view  .project-name {

    display: flex;padding: 10px 16px;background-color: rgb(227 234 235);background-color: #eff4f3;/* backdrop-filter: blur(2px); */box-shadow: -1px 4px 15px #0000000d;}

.project-view  .project-name .back {

}

.project-view  .project-name .back a {

    color: inherit;}
.project-view  .project-name .name {

    padding-left: 12px;font-weight: 400;text-transform: uppercase;letter-spacing: 1px;font-size: 89%;position: relative;top: 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}



.project-view .table {

    /* background-color: rgb(247 250 249 / 69%); */border-radius: 8px;overflow: hidden;/* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */}

.project-view .row {

    display: flex;padding: 10px 11px;margin-bottom: 2px;background-color: #f6f9f8;align-items: center;}

.project-view .row.no-left-icon {

}
.project-view .row.no-left-icon .left-icon {

}
.project-view .row .left-icon {

    width: 25px;text-align: center;}
.project-view .row .text {

    width: calc(100% - 74px);padding-left: 6px;white-space: nowrap;overflow: hidden;/* padding-right: 3px; */text-overflow: ellipsis;}
.project-view  .row .right-icon {

    color: #ababab;width: 49px;text-align: right;font-size: 78%;white-space: nowrap;/* overflow: hidden; *//* text-overflow: ellipsis; */}

.project-view .row.no-left-icon .left-icon {

}
.project-view .row.no-left-icon .text {

    width: calc(100% - 25px);padding-left: 0;}
.project-view  .row.no-left-icon .right-icon {

    width: 25px;}


.project-view  .check {

    border: 1px solid #153b62;border-radius: 50%;width: 21px;height: 21px;display: inline-block;line-height: 23px;font-size: 79%;opacity: 0.75;}

.project-view  .row.checked .check {

    background-color: #91f5d7;border-color: #91f5d7;color: #115e47;}


.project-view  .row.checked .text {

    text-decoration: line-through;opacity: 0.6;}

.project-view .no-content {

    padding-left: 10px;font-size: 84%;/* font-style: italic; */}



.project-view .row:last-child {
    margin-bottom: 0;
}

.project-view .file-upload {

border: 2px dashed #d3d3d3;text-align: center;padding: 22px;border-radius: 14px;margin-top: 35px;}

.project-view .file-upload .icon {

font-size: 171%;margin-bottom: 7px;}

.project-view .file-upload .caption {

text-transform: uppercase;left: 1px;font-size: 82%;font-weight: 400;}

.project-view .milestones {

}

.project-view .milestones .milestone {

/* margin-bottom: 19px; *//* background-color: #f6f9f8; */border-left: 3px solid #ddd;padding-left: 18px;padding-bottom: 12px;padding-top: 13px;}


.project-view .milestones .milestone .date {

margin-bottom: 6px;font-size: 84%;font-weight: 400;position: relative;padding-bottom: 3px;padding-left: 0px;}


.project-view .milestones .milestone .dot {

width: 17px;height: 17px;background-color: #2b8065;border-radius: 50%;position: absolute;left: -28px;top: 1px;/* box-shadow: 0 0 3px #0000001c; */border: 4px solid #e2e7ea;}


.project-view .milestones .milestone .box {

background-color: #fff;border-radius: 7px;padding: 11px;background-color: #f6f9f8;box-shadow: 0px 0 20px rgb(0 0 0 / 8%);}


.project-view .milestones .title {

font-weight: 400;font-size: 100%;}

.project-view .milestones .description {

font-size: 90%;margin-top: 8px;}

.task-view {

    position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 65px);z-index: 5;background-color: rgb(167 167 167 / 91%);/* color: #fff; */opacity: 0;visibility: hidden;transition: 0.3s;transform: translateX(-100%);display: flex;flex-direction: column;background-image: url(/static/bg.png);
    background-repeat: no-repeat;
    background-size: cover;}

.task-view.shown {

    opacity: 100%;
    visibility: visible;

    transform: translateX(0);}

.task-view .task-name {

display: flex;padding: 15px;background-color: #eff4f3;
    backdrop-filter: blur(2px);
    box-shadow: -1px 4px 15px #0000000d;border-bottom: 1px solid #d7d7d7;/* width: calc(100% - 30px); *//* margin-left: 14px; */}


.task-view .task-name .check {

    border: 1px solid #153b62;border-radius: 50%;width: 21px;height: 21px;display: inline-block;line-height: 23px;font-size: 79%;opacity: 0.75;text-align: center;}

.task-view .task-name.checked .check {

    background-color: #91f5d7;border-color: #91f5d7;color: #115e47;}

.task-view .task-name .name {

padding-left: 9px;padding-top: 2px;width: calc(100% - 43px);text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

.task-view .task-name.checked .name {

text-decoration: line-through;opacity: 0.6;}

.task-view .task-name.close {

}


.task-view .content {

height: calc(100% - 116px);overflow-y: auto;display: block;box-sizing: border-box;padding: 16px;padding-top: 25px;}

.task-view .close {
    
width: 20px;text-align: right;font-size: 29px;line-height: 20px;opacity: 0.65;}

.task-view .input-row {

    width: 100%;display: flex;padding: 15px;background-color: rgb(227 234 235 / 56%);align-items: center;}


.task-view .input-row .send-icon {

    width: 34px;height: 34px;background-color: #153b62;color: #ffffff;border-radius: 50%;text-align: center;line-height: 36px;font-size: 82%;background: linear-gradient(90deg, rgba(67,95,124,1) 0%, rgba(43,128,101,1) 100%);/* margin-left: 8px; */box-shadow: 0px 0px 15px #0000001a;}

.task-view .input-row .input {

    width: calc(100% - 34px);padding-right: 10px;}

.task-view .input-row textarea {

    width: 100%;border: none;border-radius: 31px;padding: 10px 13px;display: block;box-sizing: border-box;font-size: 85%;box-shadow: 0px 0px 15px #0000001a;}

.task-view .details {

}

.task-view .detail {

display: flex;margin-bottom: 18px;}

.task-view .detail .name {

width: 110px;font-weight: 400;font-size: 83%;position: relative;top: 2px;opacity: 0.5;}

.task-view .detail .value {

white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

.task-view .detail .assignee {

display: flex;align-items: center;}


.task-view .detail .assignee img {

width: 20px;height: 20px;object-fit: cover;border-radius: 50%;margin-right: 5px;}


.task-view .detail .priority {

border-radius: 11px;padding: 2px 9px;font-size: 83%;background-color: #eff4f3!important;/* box-shadow: 0 2px 3px #0000000d; */}




.task-view .table {

    /* background-color: rgb(247 250 249 / 69%); */border-radius: 8px;overflow: hidden;/* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */}

.task-view .row {

    display: flex;padding: 10px 11px;margin-bottom: 2px;background-color: #f6f9f8;align-items: center;}

.task-view .row.no-left-icon {

}
.task-view .row.no-left-icon .left-icon {

}
.task-view .row .left-icon {

    width: 25px;text-align: center;}
.task-view .row .text {

    width: calc(100% - 65px);padding-left: 6px;white-space: nowrap;overflow: hidden;/* padding-right: 3px; */text-overflow: ellipsis;}
.task-view  .row .right-icon {

    color: #ababab;width: 40px;text-align: right;font-size: 78%;white-space: nowrap;/* overflow: hidden; *//* text-overflow: ellipsis; */}

.task-view .row.no-left-icon .left-icon {

}
.task-view .row.no-left-icon .text {

    width: calc(100% - 25px);padding-left: 0;}
.task-view  .row.no-left-icon .right-icon {

    width: 25px;}


.task-view  .check {

    border: 1px solid #153b62;border-radius: 50%;width: 21px;height: 21px;display: inline-block;line-height: 23px;font-size: 79%;opacity: 0.75;}

.task-view  .row.checked .check {

    background-color: #91f5d7;border-color: #91f5d7;color: #115e47;}


.task-view  .row.checked .text {

    text-decoration: line-through;opacity: 0.6;}

.file-view .no-preview {

text-align: center;top: 50%;position: absolute;left: 50%;transform: translate(-50%, -50%);color: #fff;text-shadow: 0px 3px 11px #00000040;}


.file-view .no-preview .icon {

font-size: 254%;}


.file-view .no-preview .text {

text-transform: uppercase;letter-spacing: 2px;margin-top: 13px;}

.task-view .comments {

}

.task-view .comments .comment {

border-bottom: 1px solid #ddd;padding: 12px 0;}

.task-view .comments .comment:last-child {

border-bottom: 0;}

.task-view .comments .comment .author {

margin-bottom: 8px;font-size: 91%;font-weight: 400;}


.task-view .comments .comment .author img {
    width: 16px;
    height: 16px;
    object-fit: cover;
border-radius: 50%;position: relative;top: 2px;}


.task-view .comments .comment .author .date {

font-size: 71%;margin-left: 4px;position: relative;top: -1px;}

.task-view .section {

margin-bottom: 25px;}

.task-view .section-title {
    
font-size: 83%;font-weight: 400;margin-bottom: 11px;opacity: 0.5;}

.iframe-wrap {
    position: absolute;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
overflow-y: scroll;}