@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.otf');
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html {
    line-height: normal;
    color: #000;
}

#preload{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#preload img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

.limbo-logo{
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin: 200px auto; */
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-form form {
    /* margin-top: 10px; */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-form input {
    width: 100%;
    margin: 3px auto;
    height: 40px;
    border-radius: 5px;
    border: solid 2px #5fa8d3;
    padding: 22px 5px;
}

.login-form input:focus {
    outline: none;
}

.login-inputs {
    margin-top: 30px;
    /* margin-bottom: 10px; */
}

.password-reset {
    margin: 0;
    margin-top: 15px;
    margin-bottom: 15px;
}

.login-form .ctn {
    font-weight: bold;
}

.login-form .ctn:hover {
    cursor: pointer;
}

.login-forgot-pass {
    width: 100px;
    margin: 8px 0;
    padding: 0;
    color: gray;
    font-weight: 800;
    font-size: 11px;
    margin-left: 220px;
}

.login-forgot-pass:hover {
    color: #5fa8d3;
    font-weight: 800;
    cursor: pointer;
}

.login-form li a {
    color: #5fa8d3;
    font-weight: bold;
}

.login-form li {
    margin-top: 5px;
    width: 100%;
    padding: 0;
    text-decoration: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form li a {
    background-color: whitesmoke;
    width: 100%;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.login-form li a:hover {
    background-color: #3f6f8b;
    font-weight: bold;
    border: 2px solid #5fa8d3;
    color: whitesmoke;
    font-weight: 800;
}

.ctn {
    padding: 15px 20px;
    background: #5fa8d3;
    border: 2px solid #5fa8d3;
    border-radius: 5px;
    color: whitesmoke;
}

.ctn:hover {
    background-color: #3f6f8b;
    font-weight: bold;
    border: 2px solid #5fa8d3;
}

.button {
    width: 25%;
    margin-top: 20px;
    position: relative;
    background-color: #5fa8d3;
    border: none;
    font-size: 14px;
    color: #FFFFFF;
    padding: 10px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button::after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active::after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span::after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span {
    padding-right: 25px;
}

.button:hover span::after {
    opacity: 1;
    right: 0;
}


/*MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS 
MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS 
MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS 
MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS 
MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS MODAL WINDOWS */


.modal-title {
    margin-top: 15px;
    margin-bottom: 20px;
    color: grey;
}

.modal-name {
    -moz-appearance: textfield;
    outline: none;
}

.modal-number {
    width: 90%;
    padding: 12px 2px;
    margin: 10px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: grey;
}

.modal-name, select {
    width: 90%;
    padding: 12px 2px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: grey;
}

.modal-textarea, .modal-shot-textarea {
    font-size: 14px;
    height: 150px;
    overflow-y: scroll;
    resize: none;
}

.modal-bg-project, .modal-bg-edit-project, .modal-bg-asset, .modal-bg-user-assignee, 
.modal-bg-edit-asset, .modal-bg-user, .modal-bg-update, .modal-bg-task, .modal-bg-shot, 
.modal-bg-edit-shot, .modal-bg-shot-task, .modal-bg-user-shot-assignee, .modal-kanban-status-change,
.modal-bg-task-details, .modal-bg-edit-budget, .modal-bg-edit-priority, .modal-bg-multishot,
.modal-kanban-order-change, .modal-bg-project-details, .modal-bg-settings {
    z-index: 2; 
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s opacity 0.5s;
}

.bg-active {
    visibility: visible;
    opacity: 1;
}

.modal {
    position: relative;
    background-color: white;
    width: 40%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 4px;
    /* overflow: scroll; */
}

.modal-resolution-fps {
    overflow: hidden;
    display: flex;
    width: 90%;
    margin: 10px 0;
    align-items: center;
    justify-content: space-between;
    color: grey;
}

.modal-res-fps {
    padding: 12px 2px;
    width: 30%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: grey;
    outline: none;
}

.modal-user {
    transition: all ease-out 0.1s;
    height: 70%;
}

.modal-add-user-toggle, .modal-add-settings-toggle {
    margin-bottom: 10px;
}

.modal-add-user-tabs-container {
    width: 100%;
}

.modal-user-add-new, .modal-user-add-existing, .modal-settings-users, .modal-settings-projects {
    margin: auto;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal-user-add-new .modal-name {
    width: 100%;
}

.modal-user-add-new .modal-button {
    width: 100%;
}

.modal-user-add-new select {
    width: 100%;
}

.modal-user-add-existing .modal-name {
    width: 100%;
}

.modal-user-add-existing .modal-button {
    width: 100%;
}

[data-user-content], [data-settings-content] {
    display: none;
}

.modal-add-user-toggle, .modal-settings-toggle {
    font-size: 11px;
    color: grey;
}

.active[data-user-content], .active[data-settings-content] {
    display: block;
}

.user-tab.active, .settings-tab.active {
    color: #5fa8d3;
    cursor: pointer;
}

.user-tab:hover, .settings-tab:hover {
    color: #5fa8d3;
    cursor: pointer;
    border-bottom: solid 1px #5fa8d3;
    font-weight: 800;
}

.modal-user-assignee, .modal-user-shot-assignee, .modal-edit-budget, .modal-edit-priority {
    height: 25%;
}

.modal-user-assignee button, .modal-user-shot-assignee button,
.modal-edit-budget button, .modal-edit-priority button {
    margin-top: 15px;
}

.modal-asset {
    height: 50%;
}

.modal-settings {
    height: 80%;
}

.modal-shot {
    height: 55%;
}

.modal-multishot {
    height: 65%;
}

.modal-shot-select {
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 92%;
    overflow: hidden;
}

.modal-shot-select div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 8px;
    width: 100%;
}

.radio-lbl {
    font-size: 10px;
    color: gray;
}

.new-job-name, .new-seq-name {
    display: none;
}

#job-current:checked ~ .new-job-name {
    display: block;
}

#job-current:checked ~ .job-name-class {
    display: none;
}

#seq-current:checked ~ .new-seq-name {
    display: block;
}

#seq-current:checked ~ .seq-name-class {
    display: none;
}

.modal-edit-asset, .modal-edit-shot {
    height: 55%;
}

.modal-edit-project {
    height: 75%;
}

.modal-user button {
    margin-top: 15px;
}

.modal-update {
    height: 85%;
}

.modal-task, .modal-shot-task {
    height: 35%;
}

.modal-task button, .modal-shot-task button {
    margin-top: 15px;
}

.modal-file {
    margin-top: 10px;
    color: grey;
    height: 50px;
    width: 90%;
    border: solid;
    border-color: lightgrey;
    border-width: 1px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    padding-top: 15px;
}

.modal-file:hover {
    cursor: pointer;
}

.modal-button {
    height: 50px;
    width: 90%;
    position: relative;
    background-color: #5fa8d3;
    border: none;
    font-size: 14px;
    color: #FFFFFF;
    padding: 10px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.modal-button::after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.modal-button:active::after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

.modal-button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.modal-button span::after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.modal-button:hover span {
    padding-right: 25px;
}

.modal-button:hover span::after {
    opacity: 1;
    right: 0;
}

.modal-button:disabled {
    background-color: lightgray;
    color: white;
}

.modal-close, .modal-edit-project-close, .modal-task-user-assignee-close, .modal-asset-close, 
.modal-edit-asset-close, .modal-shutup, .modal-update-close, .modal-task-close, 
.modal-shot-close, .modal-edit-shot-close, .modal-shot-task-close,.modal-shot-user-assignee-close,
.modal-close-task-details, .modal-edit-budget-close, .modal-edit-priority-close, .modal-multishot-close,
.modal-close-project-details, .modal-settings-close {
    font-size: 32px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    color: lightgrey;
}

.modal-close:hover, .modal-edit-project-close:hover, .modal-task-user-assignee-close:hover, 
.modal-asset-close:hover, .modal-edit-asset-close:hover, .modal-shutup:hover, .modal-update-close:hover, 
.modal-task-close:hover, .modal-shot-close:hover, .modal-edit-shot-close:hover, 
.modal-shot-task-close:hover, .modal-shot-user-assignee-close:hover, .modal-close-task-details:hover,
.modal-edit-budget-close:hover, .modal-edit-priority-close:hover, .modal-multishot-close:hover,
.modal-close-project-details:hover, .modal-settings-close:hover {
    font-weight: 500;
    font-size: 32px;
    color: grey;
}

.modal img {
    border-radius: 10px;
}

.inputfile {
    color: grey;
    width: 90%;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}

input[type="file"] {
    border: dotted;
    border-radius: 6px;
    border-color: lightgrey;
    margin-bottom: 15px;
    margin-top: 5px;
}

.inputfile-edit-project {
    display: none;
}

.label-edit-project-image, .label-edit-project-doc, .label-create-project-image {
    height: 45px;
    width: 90%;
    color: rgb(140, 140, 140);
    background-color: #e7e7e7;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px rgb(190, 190, 190) solid;
    margin-bottom: 15px;
    margin-top: 5px;
}

.label-edit-project-image:hover, .label-edit-project-doc:hover, .label-create-project-image:hover {
    color: white;
    background-color: #acacac;
}

.modal-delete_item {
    display: none;
}

/* TASK DESCRIPTION MODAL START */

.modal-task-details {
    position: relative;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 60%;
    height: 95%;
    border-radius: 4px;
    /* overflow: scroll; */
}

.modal-task-details-header, .modal-settings-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 20px;
}

.modal-task-details-toggle {
    margin-bottom: 20px;
    font-size: 11px;
    color: grey;
}

.modal-settings-tabs-container {
    width: 100%;
}

.settings-users-upper-body {
    flex-direction: column;
    display: flex;
    align-content: center;
    align-items: center;
    width: 90%;
    margin-bottom: 10px;
}

.settings-users-stats {
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 12px;
    color: gray;
}

.settings-projects-upper-body {
    width: 90%;
    display: none;
    flex-direction: column;
    border: solid 1px lightgray;
    border-radius: 5px;
}

.settings-storage-info {
    display: flex;
    flex-direction: row;
    padding: 5px;
}

.settings-storage-info img {
    margin-top: 3px;
    border-radius: 50%;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    object-fit: cover;
    padding: 5px;
    background-color: rgb(236, 236, 236);
}

.settings-projects-stats {
    width: 100%;
    margin-left: 10px;
    margin-top: 0px;
    font-size: 12px;
    color: gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 3px;
}

.settings-capacity-title {
    font-size: 10px;
    font-weight: bold;
}

.settings-capacity-data {
    font-size: 12px;
}

.settings-projects-stats progress {
    width: 100%;
}

.projects-data-container {
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
}

.project-data-item {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 2fr 1fr;
    width: 100%;
    border-width: 90%;
    border-bottom: 1px solid lightgray;
    color: gray;
}

.project-data-item img {
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
}

.pd-name {
    align-self: center;
    justify-self: left;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
}

.pd-cheaps {
    align-self: center;
    padding: 5px;
    margin: 0 5px;
    text-align: center;
    border-radius: 10px;
    font-size: 10px;
    width: 80px;
    color: white;
}

.pd-capacity {
    align-self: center;
    text-align: center;
    justify-self: center;
    padding: 5px;
    margin: 0 5px;
    font-size: 14px;
    font-weight: bold;
}

.pd-delete {
    align-self: center;
    justify-self: right;
    text-align: center;
    padding: 10px;
    margin: 0 5px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    background-color: rgb(175, 41, 41);
    border-radius: 10px;
}

.pd-delete:hover {
    background-color: rgb(114, 20, 20);
    cursor: pointer;
}

.pd-delete-modal {
    margin: 0;
    padding: 0;
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #000000eb;
}

.pd-delete-content {
    text-align: center;
    background-color: white;
    margin: 20% auto;
    padding: 20px;
    width: 250px;
    border-radius: 5px;
}

.pd-delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-delete-icon-container {
    margin: 0;
    padding: 0;
    width: 48px;
    height: 48px;
    background-color: rgba(189, 21, 21, 0.548);
    border: solid 1px rgb(189, 21, 21);
    border-radius: 50%;
    margin-left: 12px;
}

.pd-delete-icon-x {
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    background-color: rgb(189, 21, 21);
    text-align: center;
    color: white;
    transform: translateX(-35px);
}

.pd-delete-content h4 {
    margin-top: 10px;
    padding: 0;
}

.pd-delete-text {
    margin: 0;
    padding: 0;
    font-size: 12px;
    margin-bottom: 20px;
}

.pd-delete-content input {
    padding: 5px 10px;
    width: 100%;
    border: solid 2px #5fa8d3;
    border-radius: 5px;
}

.pd-delete-content input:focus {
    outline: none;
}

.pd-delete-btn-block {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.pd-delete-btn {
    background-color: #5fa8d3;
    border-radius: 5px;
    width: 100px;
    padding: 5px 15px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.pd-delete-btn:hover {
    cursor: pointer;
}

.pdc-disabled {
    border-radius: 5px;
    width: 100px;
    padding: 5px 15px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    background-color: #c6c7c9;
}

.pdc-cancel {
    background-color: #686a70;
}

.pdc-cancel:hover {
    background-color: #3f4046;
}

.pdc-delete {
    background-color: rgba(189, 21, 21, 0.548);
}

.pdc-delete:hover {
    background-color: rgba(189, 21, 21, 1);
}

.settings-plan-details {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    color: gray;
    font-size: 12px;
}

.settings-plan-order {
    padding: 0;
    margin: 0;
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.settings-plan-order p {
    color: gray;
}

.settings-plan-order form {
    display: flex;
    width: 60%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.plan-from-radio {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
}

.plan-from-option label {
    color: gray;
    font-size: 10px;
}

#order-btn {
    border-radius: 5px;
    margin-top: 20px;
}

.modal-task-details-body, .modal-settings-body {
    display: flex;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-height: 95%;
    overflow-y: auto;
    flex: 1;
}

.modal-task-details-grid {
    padding: 20px;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow-y: auto;
    width: 100%;
    max-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: (repeat(), 4fr);
    gap: 10px;
}

[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: grid;
}

.task-details-tab.active {
    color: #5fa8d3;
    cursor: pointer;
}

.task-details-tab:hover {
    color: #5fa8d3;
    cursor: pointer;
    border-bottom: solid 1px #5fa8d3;
    font-weight: 800;
}


.description-line {
    max-width: 90%;
    font-size: 14px;
    align-items: center;
    align-self: center;
    justify-self: center;
    grid-row: 1/2;
}

.modal-task-picture {
    align-self: center;
    justify-self: center;
    grid-row: 2/3;
    padding: 30px;
    width: 100%;
}

.task-details-picture {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 40%;
    object-fit: cover;  
}

.task-video-thumb {
    display: block;
    margin-left: auto;
    margin-right: auto;  
}

.modal-task-details-info {
    align-items: center;
    justify-content: center;
    width: 80%;
    display: grid;
    grid-template-columns: (repeat(), 3fr);
    grid-row: 3/4;
    gap: 200px;
}

.modal-task-details-info-left {
    padding: 5px;
    grid-column: 1/2;
}

.modal-task-details-info-right {
    padding: 5px;
    grid-column: 2/3;
}

.reference-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
}

.reference-gallery .reference-card {
    height: 250px;
    width: 350px;
    border: 3px solid #FFF;
    border-radius: 5px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    overflow: hidden;
}

.reference-img {
    height: 250px;
    width: 350px;
    object-fit: cover;
    object-position: center;
    transition: .3s ease-out;
}

.reference-img:hover {
    transform: scale(1.03);
}

.modal-desc-upload {
    width: 80px;
    height: 80px;
    font-size: 40px;
    text-align: center;
    color: #FFF;
    border: 2px solid #FFF;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    background-color: #319d5e;
    position: absolute;
    bottom: -5px;
    right: -5px;
    cursor: pointer;
    padding-top: 12px;
    transition: .15s linear;
    z-index: 1;
}

.modal-desc-upload:hover {
    background-color: #1a7540;
    transform: scale(1.05);
}

.drop-section {
    width: 450px;
    height: 260px;
    border: 1px dashed #A8B3E3;
    background-image: linear-gradient(180deg, white, #F1F6FF);
    margin: 5px 35px 35px 35px;
    border-radius: 12px;
    position: relative;
    text-align: center;
    font-size: 14px;
}

.drop-section div.col:first-child {
    opacity: 1;
    visibility: visible;
    transition-duration: 0.2s;
    transform: scale(1);
    width: 200px;
    margin: auto;
}

.drop-section div.col:last-child {
    font-size: 40px;
    font-weight: 700;
    color: #c0cae1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 200px;
    height: 55px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.6);
    transition-duration: 0.2s;
}

.drag-over-effect div.col:first-child {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.1);
}

.drag-over-effect div.col:last-child {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.drop-section .cloud-icon {
    margin-top: 25px;
    margin-bottom: 20px;
}

.drop-section span, .drop-section button {
    display: block;
    margin: auto;
    color: #707EA0;
    margin-bottom: 10px;
}

.drop-section button {
    color: white;
    background-color: #5fa8d3;
    border: none;
    outline: none;
    padding: 7px 20px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: rgba(50,50,93,0.25) 0px 13px 27px -5px, rgba(0,0,0,0.3) 0px 8px 16px -8px;
}

.drop-section button:hover {
    background-color: rgb(18, 120, 157);
}

.upload-btn-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

#upload-ref-btn {
    width: 125px;
    height: 30px;
    color: white;
    background-color: #5fa8d3;
    border: none;
    outline: none;
    padding: 7px 20px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: rgba(50,50,93,0.25) 0px 13px 27px -5px, rgba(0,0,0,0.3) 0px 8px 16px -8px;
    margin-bottom: 10px;
}

#upload-ref-btn:hover {
    background-color: rgb(18, 120, 157);
}

#upload-ref-btn:disabled {
    background-color: #595f6e;
    color: white;
    pointer-events: none;
    cursor: default;
}

.drop-section input {
    display: none;
}

.references-list {
    display: none;
    text-align: left;
    margin: 0px 35px;
    padding-bottom: 20px;
    overflow-y: auto;
}

.references-list .list-title {
    font-size: 0.95rem;
    color: #707EA0;
}

.references-list li {
    display: flex;
    margin: 15px 0px;
    padding-top: 4px;
    padding-bottom: 2px;
    border-radius: 8px;
    transition-duration: 0.2s;
    width: 90%;
    margin-left: 15px;
}

.references-list li:hover {
    box-shadow: #E3EAF9 0px 0px 4px 0px, #E3EAF9 0px 12px 16px 0px;
}

.references-list li .col {
    flex: .1;
}

.references-list li .col:nth-child(1) {
    flex: .15;
    text-align: center;
}

.references-list li .col:nth-child(2) {
    flex: .75;
    text-align: left;
    font-size: 0.9rem;
    color: #3e4046;
    padding: 8px 10px;
}

.references-list li .col:nth-child(2) div.name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 250px;
    display: inline-block;
}

.references-list li .col .file-name span {
    color: #707EA0;
    float: right;
}

.references-list li .file-progress {
    width: 100%;
    height: 5px;
    margin-top: 8px;
    border-radius: 8px;
    background-color: #dee6fd;
}

.references-list li .file-progress span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 8px;
    background-image: linear-gradient(120deg, #6b99fd, #9385ff);
    transition-duration: 0.4s;
}

.references-list li .col .file-size {
    font-size: 0.75rem;
    margin-top: 3px;
    color: #707EA0;
}

.references-list li .col img.tick {
    fill: #8694d2;
    background-color: #dee6fd;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.references-list li.in-prog img.tick {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.references-list li.complete span,
.references-list li.complete .file-progress,
.references-list li.complete span.cross {
    display: none;
}

.references-list li.in-prog .file-size,
.references-list li.in-prog img.tick {
    display: none;
}


/* TASK DESCRIPTION MODAL END */

.modal-project-details {
    position: relative;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 45%;
    height: 80%;
    border-radius: 4px;
}

.modal-project-details-grid {
    padding: 20px;
    display: grid;
    overflow-y: auto;
    overflow-x: auto;
    max-width: 90%;
    grid-template-columns: (repeat(), 3fr);
    gap: 10px;
}

.modal-project-details-img {
    align-self: center;
    justify-self: center;
    grid-column: 1/4;
    margin-bottom: 20px;
}

.modal-project-details-img img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    object-fit: cover;
}

.modal-project-details-name {
    grid-column: 1/3;
}

.modal-project-details-deadline {
    grid-column: 1/3;
}

.modal-project-details-resolution {
    grid-column: 1/3;
}

.modal-project-details-fps {
    grid-column: 1/3;
}

.modal-project-details-docs {
    grid-column: 3/4;
    grid-row: 2/6;
    align-self: center;
    justify-self: end;
}

.modal-project-details-docs img {
    height: 120px;
    transition: all 0.1s linear;
}

.mpdd-color {
    opacity: 0.8;
    cursor: pointer;
}

.mpdd-item-title {
    font-size: 14px;
    color: gray;
}

.mpdd-color:hover {
    opacity: 1;
}

.mpdd-grayscale {
    opacity: 0.2;
}

/*end modal windows end modal windows end modal windows end modal windows 
end modal windows end modal windows end modal windows end modal windows 
end modal windows end modal windows end modal windows end modal windows 
end modal windows end modal windows end modal windows end modal windows */


/*MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP
MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP 
MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP 
MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP MULTI-MENU-POPUP */

.multi-menu-popup{
    display: flex;
    justify-content: center;
    align-self: center;
    width: 400px;
    height: 60px;
    background: #f9fbfd;
    border-radius: 4px;
    border-left: 4px solid #5fa8d3;
    position: fixed;
    top: -30%;
    left: 50%;
    text-align: center;
    padding: 3px;
    z-index: 10;
    transform: translate(-50%,-1%);
    transition: transform 0.4s, top 0.4s;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
}

.show-multi-menu-popup{
    top: 1%;
    transform: translate(-50%,-1%);
}

.multi-menu-icon-container{
    padding: 10px;
    margin: 6px;
}

.multi-menu-icon-container:hover{
    cursor: pointer;
}

.multi-menu-popup-img{
    height: 24px;
    width: 24px;
    opacity: 0.5;
    object-fit: cover;
}

.multi-menu-popup-img:hover {
    opacity: 1;
}

.multi-menu-popup-btn{
    background-color: #5fa8d3;
    border: none;
    color: white;
    padding: 4px 3px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    transform: translateY(-5px);
    display: inline;
}

.multi-menu-popup-btn:hover {
    background-color: #3589ba;
}

.multi-submenu-status-container{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    position: fixed;
    width: 80px;
    height: 230px;
    background: #f9fbfd;
    border-radius: 6px;
    padding: 5px;
    z-index: 10;
    overflow: scroll;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
    display: none;
    overflow: auto;
}

.multi-submenu-status{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font-size: 10px;
    text-align: center;
    width: 100%;
    color: #fff;
    border-radius: 50px;
    padding: 3px;
    margin-top: 3px;
    cursor: pointer;
    opacity: 0.65;
}

.multi-submenu-assign-container{
    display: flex;
    align-items: start;
    justify-content: start;
    align-self: self-start;
    flex-direction: column;
    position: fixed;
    width: 180px;
    height: 150px;
    background: #f9fbfd;
    border-radius: 6px;
    padding: 5px;
    z-index: 10;
    overflow: scroll;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
    display: none;
    overflow: auto;
}

.multi-submenu-assign{
    display: flex;
    align-items: center;
    justify-content: start;
    align-self: center;
    font-size: 10px;
    text-align: center;
    width: 100%;
    color: #545454;
    border-radius: 50px;
    padding: 3px;
    margin-top: 3px;
    cursor: pointer;
    opacity: 0.65;
}

.multi-submenu-assign img {
    margin-right: 3px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.multi-submenu-priority-container{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    position: fixed;
    width: 90px;
    height: 145px;
    background: #f9fbfd;
    border-radius: 6px;
    padding: 5px;
    z-index: 10;
    overflow: scroll;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
    display: none;
    overflow: auto;
}

.multi-submenu-priority{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font-size: 10px;
    text-align: center;
    width: 100%;
    color: #fff;
    border-radius: 50px;
    padding: 3px;
    margin-top: 3px;
    cursor: pointer;
    opacity: 0.65;
}

.multi-submenu-budget-container{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    position: fixed;
    width: 90px;
    height: 75px;
    background: #f9fbfd;
    border-radius: 6px;
    padding: 5px;
    z-index: 10;
    overflow: scroll;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
    display: none;
    overflow: auto;
}

.multi-submenu-budget-value {
    -moz-appearance: textfield;
    padding: 5px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: grey;
    height: 28px;
    width: 100%;
    color: gray;
    outline: none;
}

.multi-submenu-budget-value:invalid {
    background-color: #b10e0e;
    color: white;
}

.multi-submenu-budget{
    background-color: #5fa8d3;
    border: none;
    color: white;
    padding: 4px 3px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    display: inline;
    width: 100%;
    margin-top: 3px;
}

.multi-submenu-budget:hover {
    background-color: #3589ba;
}

.multi-submenu-note-container{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    position: fixed;
    width: 210px;
    height: 75px;
    background: #f9fbfd;
    border-radius: 6px;
    padding: 5px;
    z-index: 10;
    overflow: scroll;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
    display: none;
    overflow: auto;
}

.multi-submenu-note-value {
    color: grey;
    font-size: 13px;
    padding: 5px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 28px;
    width: 100%;
    color: gray;
    outline: none;
}

.multi-submenu-note{
    background-color: #5fa8d3;
    border: none;
    color: white;
    padding: 4px 3px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    display: inline;
    width: 100%;
    margin-top: 3px;
}

.multi-submenu-note:hover {
    background-color: #3589ba;
}

.multi-submenu-status:hover, .multi-submenu-assign:hover,
.multi-submenu-priority:hover{
    opacity: 1;
}

.show-multi-submenu{
    display: block;
}

#status-marker{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: fixed;
    transform: translate(16px,-3px);
    opacity: 1;
    z-index: 50;
}

#assign-marker{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: fixed;
    transform: translate(16px,-3px);
    opacity: 1;
    z-index: 50;
}

#priority-marker{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: fixed;
    transform: translate(16px,-3px);
    opacity: 1;
    z-index: 50;
}

#budget-marker{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: fixed;
    transform: translate(16px,-3px);
    opacity: 1;
    z-index: 50;
}

#note-marker{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: fixed;
    transform: translate(16px,-3px);
    opacity: 1;
    z-index: 50;
}


/* END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP 
END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP 
END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP 
END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP 
END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP END MULTI-MENU-POPUP  */

.burger {
    margin-top: 2px;
    padding: 10px;
    cursor: pointer;
}

.line{
    width: 25px;
    height: 2px;
    background-color: grey;
    margin: 5px;
}

.burger-content {
    display: none;
    margin-top: 10px;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 1;
}

.burger:hover .burger-content {
    right: auto;
    left: 0;
    margin-left: 3px;
    display: block;
    z-index: 1000;
}

.burger-content a:hover {
    background-color: #5fa8d3;
    color: white;
}

.nav-limbo-logo img{
    margin-bottom: -20px;
    transform: translate(-5px, -12px);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FAFAFA;
    box-shadow: 0px 1px 4px grey;
    z-index: 998;
}

ul li {
    float: left;
}

ul li a {
    display: block;
    color: grey;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: 100;
    font-size: 14px;
}

ul li.nav-right {
    float: right;
}

.nav-drop-item {
    display: block;
    color: grey;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: 100;
    font-size: 14px;
    cursor: pointer;
}

.nav-drop-item:hover {
    background-color: #5fa8d3;
    color: white;   
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 1;
}

.nav-right:hover .dropdown-content {
    left: auto;
    right: 0;
    margin-right: 3px;
    display: block;
    z-index: 999;
}

.dropdown-content a:hover {
    background-color: #5fa8d3;
    color: white;
}

.dropbtn-text {
    visibility: hidden;
}

.nav-right img {
    float: right;
    transform: translate(-10px, -5px);
    cursor: pointer;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    object-fit: cover;
}

@media screen and (max-width: 600px) {
.nav-limbo-logo img{
    width: 64px;
    margin-bottom: -20px;
    transform: translate(-5px, -8px);
    }

.dropdown-content {
    padding: 15px;
    margin: 3px 0px;
    width: 100%;
  }
}

ul li.nav-bell {
    float: right;
    cursor: pointer;
    transform: translate(55px, 0px);
}

.nav-project {
    margin-top: 3px;
}

.nav-project-title {
    display: block;
    color: grey;
    text-align: center;
    text-transform: uppercase;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: 100;
    font-size: 15px;
    cursor: pointer;
}

.nav-project-title:hover {
    font-weight: 1000;
    color: #5fa8d3;
}

.nav-project-label {
    cursor:pointer;
    float: left;
    display: block;
    color: grey;
    text-align: center;
    padding: 14px 16px;
    font-weight: 100;
    font-size: 14px;
}

.nav-project-label:hover {
    color: #5fa8d3;
}
    
.nav-project-input {
    display: none;
}
.nav-project-input:checked + .nav-project-label{
    color: #5fa8d3;
    border-bottom: solid 4px #5fa8d3;
}

.nav-project-input:checked + .nav-project-label {
    color: #5fa8d3;
    border-bottom: solid 4px #5fa8d3;
}
    
.nav-project-input[id="nav-p-tab-1"]:checked ~ .nav-project-content .nav-p-tab-1, 
.nav-project-input[id="nav-p-tab-2"]:checked ~ .nav-project-content .nav-p-tab-2, 
.nav-project-input[id="nav-p-tab-3"]:checked ~ .nav-project-content .nav-p-tab-3 {
    display: block;
}

.versions-filtering-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.json-container {
    position: absolute;
    top: 65px;
    left: 40px;
}

.json-link {
    color: rgb(229, 229, 229);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.json-link:hover {
    color: gray;
}

.toggle-container {
    margin-top: 25px;
    margin-right: 30px;
    display: flex;
    float: right;
}

.toggle-versions-container {
    margin-top: 25px;
    margin-right: 30px;
    display: flex;
}

.projects-toggle {
    width: 70px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance: none;
    border-radius: 20px;
    outline: none;
    transition: 0.4s;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.projects-toggle:checked {
    background: #fff;
}

.projects-toggle:before {
    z-index: 1;
    position: absolute;
    content: "";
    left: -2px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 50%;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
    bottom: 2px;
}

.projects-toggle:checked::before {
    left: 45px;
}

.toggle {
    position: relative;
    display: inline;
}

.onbtn, .offbtn {
    top: 2px;
    position: absolute;
    color: gray;
    font-weight: 600;
    font-size: 12px;
    pointer-events: none;
}

.onbtn {
    left: 15px;
}

.offbtn {
    right: 7px;
    color: gray;
}

main {
    display: grid;
    grid-template-columns: 1fr repeat(12, minmax(auto, 60px)) 1fr;
    grid-gap: 40px;
    padding: 60px 0;
}

a {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    text-decoration: none;
    color: white;
}

.cards {
    grid-column: 2 / span 12;
    display: grid;
    grid-template-columns: repeat(12, minmax(auto, 60px));
    grid-gap: 40px;
}

.card {
    grid-column-end: span 4;
    display: flex;
    flex-direction: column;
    background-color: #FAFAFA;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 4px 5px 10px 0px rgba(0,0,0,0.4);
    background-color: #ECECEC;
}

.card_image-container {
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    position: relative;
}

.card_image-container img {
    height: 101%;
    width: 101%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.9;
    filter: grayscale(50%);
    transition: all 0.3s ease;
}

.card_image-container img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.card_title {
    margin-top: 10px;
    padding: 10px 10px;
    width: 100%;
    position: absolute;
    text-transform: uppercase;
    top: 8px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(120, 120, 120, 0.5);
    text-align: center;
    border-bottom: solid;
    border-color: white;
    border-width: 1px;
}

.card_title:hover {
    color: white;
}

.card-chips {
    font-size: 12px;
    position: absolute;
    text-transform: uppercase;
    padding: 4px 15px;
    color: white;
    bottom: 15px;
    border-radius: 4px;
}

.card_status {
    right: 10px;
}

.card_edit {
    right: 10px;
    bottom: 50px;
    background-color: rgba(10, 120, 60, 0.5);
}

.card_edit:hover {
    background-color: rgba(10, 120, 60, 0.75);
    cursor: pointer;
}

.card_type {
    left: 10px;
}

.flash-msg-center-box {
    position: fixed;
    top: -5%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1010;
    animation-name: flash-msg-animation;
    animation-duration: 3s;
}

.flash-msg-center-box div {
    width: 400px;
    height: 50px;
    overflow: hidden;
    margin: 8px 0;
    border-radius: 5px;
}

.flash-msg-center-box span {
    float: left;
    width: 40px;
    height: 60px;
    font-size: 30px;
    text-align: center;
    transform: translateY(0px);
    color: white;
}

.flash-msg-center-box img {
    transform: translateY(4px);
}

.flash-msg-center-box p {
    float: left;
    text-align: center;
    margin: 0;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 200;
    line-height: 50px;
    color: white;
}

.flash-msg-m1 {
    background: rgb(220,60,60);
}

.flash-msg-m1 span {
    background: #c0392b;    
}

.flash-msg-m2 {
    background: rgb(68,190,115);
}

.flash-msg-m2 span {
    background: #27ae60;    
}

@keyframes flash-msg-animation {
    0% {top: -5%;}
    10% {top: 5%;}
    90% {top: 5%;}
    100% {top: -5%;}
}

@media only screen and (max-width: 1500px) {
    .home-form {
        width: 40%;
    }
    .button {
        width: 40%;
    }
    .toggle-container {
        position: fixed;
        left: 46%;
        transform: translate(0,-50%);
    }
}

@media only screen and (max-width: 1000px) {
    .card {
        grid-column-end: span 6;
    }
    .modal {
        width: 60%
    }
    .home-form {
        width: 50%;
    }
    .button {
        width: 50%;
    }
}

@media only screen and (max-width: 700px) {
    main {
        grid-gap: 20px;
    }
    .card {
        grid-column-end: span 12;
    }
    .modal {
        width: 70%
    }
    .toggle-container {
        position: fixed;
        left: 40%;
        transform: translate(0,-50%);
    }
}

@media only screen and (max-width: 550px) {
    main {
        grid-template-columns: 10px repeat(6, 1fr) 10px;
        grid-gap: 10px;
    }
    .cards {
        grid-column: 2 / span 6;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
    }
    .card {
        grid-column-end: span 6;
    }
    .modal {
        width: 90%
    }
    .home-form {
        width: 80%;
    }
    .button {
        width: 80%;
    }
    .flash-msg-center-box div {
        width: 280px;
    }
    .flash-msg-center-box p {
        font-size: 11px;
    }
    .nav-project-title {
        display: none;
    }
    .nav-project-label {
        font-size: 12px;
    }
}

@media only screen and (max-width: 415px) {
    .nav-project-label {
        font-size: 10px;
    }
}

@media only screen and (max-width: 365px) {
    .nav-project-label {
        font-size: 8px;
    }
}


/* --> START SHARED REVIEW POPUP STYLE START SHARED REVIEW POPUP STYLE   */
/* --> START SHARED REVIEW POPUP STYLE START SHARED REVIEW POPUP STYLE   */
/* --> START SHARED REVIEW POPUP STYLE START SHARED REVIEW POPUP STYLE   */
/* --> START SHARED REVIEW POPUP STYLE START SHARED REVIEW POPUP STYLE   */
/* --> START SHARED REVIEW POPUP STYLE START SHARED REVIEW POPUP STYLE   */

.save-shared-review-popup{
    display: flex;
    justify-content: space-evenly;
    align-self: center;
    width: 400px;
    height: 60px;
    background: #f9fbfd;
    border-radius: 4px;
    border-left: 4px solid #5fa8d3;
    position: fixed;
    top: -30%;
    left: 50%;
    text-align: center;
    padding: 5px;
    z-index: 10;
    transform: translate(-50%,-1%);
    transition: transform 0.4s, top 0.4s;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
}

.show-save-shared-review-popup{
    top: 1%;
    transform: translate(-50%,-1%);
}

.show-save-shared-review-popup input[type=text] {
    align-self: center;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 0;
}

.show-save-shared-review-popup input[type=text]:focus {
    outline: none;
}

.share-save-btn, .share-all-btn {
    padding: 10px 10px;
    height: 40px;
    margin-top: 5px;
    background: #5fa8d3;
    border: 1px solid #5fa8d3;
    border-radius: 5px;
    color: whitesmoke;
}

.share-save-btn:hover, .share-all-btn:hover {
    background-color: whitesmoke;
    color: #5fa8d3;
    font-weight: bold;
    border: 1px solid #5fa8d3;
    cursor: pointer;
}

.project-shares-table-container {
    overflow-x: auto;
}

.share-link-container {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share-link-container p {
    width: 90%;
    margin: 0;
    background-color: #888;
    color: #fff;
    font-size: 10px;
    border-radius: 5px;
    padding: 6px;
}

.share-link, .share-name {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.share-name a:hover {
    cursor: pointer;
    color: #3589ba;
}

.share-name a {
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: grey;
    font-size: 13px;
    font-weight: bold;
}

.project-members-header.share-active {
    text-align: center;
}

.modal-bg-guest {
    z-index: 2; 
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(8px);
}

.modal-bg-guest .modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 650px;
    width: 480px;
}

.modal-bg-guest .modal .limbo-logo {
    margin: 0;
    margin-bottom: 20px;
}

.modal-bg-guest .modal .login-inputs {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 3px;
}

.modal-bg-guest .modal .login-inputs input {
    width: 100%;
    margin: 3px auto;
    height: 40px;
    border-radius: 5px;
    border: solid 2px #5fa8d3;
    padding: 22px 5px;
}

.modal-bg-guest .modal .login-inputs input:focus {
    outline: none;
}

.modal-bg-guest .modal .ctn {
    width: 300px;
    cursor: pointer;
}

.modal-bg-guest .modal .modal-title {
    color: #000;
    font-weight: bold;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.modal-bg-guest .modal p {
    margin-top: 15px;
    margin-bottom: 0px;
    text-align: center;
    width: 55%;
    font-size: 12px;
}

.modal-bg-guest .modal a {
    font-size: 12px;
    color: #5fa8d3;
}

.modal-bg-guest .modal a:hover {
    font-weight: bold;
}

/* --> END SHARED REVIEW POPUP STYLE END SHARED REVIEW POPUP STYLE   */
/* --> END SHARED REVIEW POPUP STYLE END SHARED REVIEW POPUP STYLE   */
/* --> END SHARED REVIEW POPUP STYLE END SHARED REVIEW POPUP STYLE   */
/* --> END SHARED REVIEW POPUP STYLE END SHARED REVIEW POPUP STYLE   */
/* --> END SHARED REVIEW POPUP STYLE END SHARED REVIEW POPUP STYLE   */


/* --> START PROJECT TEAM TABLE START PROJECT TEAM TABLE START PROJECT TEAM TABLE  */
/* --> START PROJECT TEAM TABLE START PROJECT TEAM TABLE START PROJECT TEAM TABLE  */
/* --> START PROJECT TEAM TABLE START PROJECT TEAM TABLE START PROJECT TEAM TABLE  */
/* --> START PROJECT TEAM TABLE START PROJECT TEAM TABLE START PROJECT TEAM TABLE  */
/* --> START PROJECT TEAM TABLE START PROJECT TEAM TABLE START PROJECT TEAM TABLE  */
/* --> START PROJECT TEAM TABLE START PROJECT TEAM TABLE START PROJECT TEAM TABLE  */

.project-members-select-user {
    max-width: 80%;
    margin: 30px auto;
    color: grey;
    font-size: 13px;
    display: grid;
    grid-template-columns: 60% 30% 10%;
    column-gap: 10px;
    /* background-color: #1a7540; */
}

/* --> CUSTOM DROPDOWN CUSTOM DROPDOWN CUSTOM DROPDOWN  CUSTOM DROPDOWN  CUSTOM DROPDOWN   */
/* --> CUSTOM DROPDOWN CUSTOM DROPDOWN CUSTOM DROPDOWN  CUSTOM DROPDOWN  CUSTOM DROPDOWN   */

.project-members-dropdown, .task-assign-dropdown,
.shot-task-assign-dropdown, .forum-status-dropdown,
.shot-forum-status-dropdown, .project-roles-dropdown,
.act-forum-status-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    width: 100%;
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
    /* border: 1px solid lightgray; */
}

.task-assign-dropdown, .shot-task-assign-dropdown {
    width: 90%;
    box-shadow: 0 0px 0px rgba(0,0,0,0);
    border: 1px solid lightgray;
    color: gray;
    padding: 8px;
}

.forum-status-dropdown, .shot-forum-status-dropdown,
.act-forum-status-dropdown {
    border: 1px solid lightgray;
    box-shadow: none;
    padding: 2px;
    border-radius: 4px;
    width: 100%;
}

.project-members-wrapper, .task-assign-wrapper,
.shot-task-assign-wrapper, .forum-status-wrapper,
.shot-forum-status-wrapper, .project-roles-wrapper,
.act-forum-status-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.forum-status-wrapper, .shot-forum-status-wrapper,
.act-forum-status-wrapper {
    width: 80%;
    text-align: center;
}

.project-members-selected-img, .project-members-select-img,
.task-assign-selected-img, .task-assign-select-img,
.shot-task-assign-selected-img, .shot-task-assign-select-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.project-members-list, .task-assign-list,
.shot-task-assign-list, .forum-status-list,
.shot-forum-status-list, .project-roles-list,
.act-forum-status-list {
    background-color: #fff;
    position: absolute;
    top: 40px;
    left: 0;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    display: none;
}

.project-members-list-show, .task-assign-list-show,
.shot-task-assign-list-show, .forum-status-list-show,
.shot-forum-status-list-show, .project-roles-list-show,
.act-forum-status-list-show {
    display: block;
    z-index: 999;
    top: 45px;
}

.forum-status-list, .shot-forum-status-list,
.act-forum-status-list {
    border-radius: 5px;
}

.forum-status-list-show, .shot-forum-status-list-show,
.act-forum-status-list-show {
    width: 130%;
    transform: translateX(-8px);
    max-height: 400px;
    top: 35px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.7);
}

.forum-status-icon {
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    border: 2px solid;
}

.project-members-item, .task-assign-item,
.shot-task-assign-item, .forum-status-item,
.shot-forum-status-item, .project-roles-item,
.act-forum-status-item {
    display: flex;
    align-items: center;
    padding: 5px;
    gap: 0.5rem;
}

.task-assign-item, .shot-task-assign-item {
    padding: 8px;
}

.forum-status-item, .shot-forum-status-item,
.act-forum-status-item {
    transform: scale(0.9);
    width: 100%;
    border-radius: 5px;
    color: #333;
    font-size: 14px;
    padding: 6px;
}

.project-members-details, .project-members-selected-details,
.task-assign-details, .task-assign-selected-details,
.shot-task-assign-details, .shot-task-assign-selected-details,
.project-roles-selected-details {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.project-members-selected-details,
.project-roles-selected-details,
.task-assign-selected-details,
.shot-task-assign-selected-details {
    margin-right: 20px;
}

.project-members-role, .project-members-selected-role, 
.task-assign-role, .task-assign-selected-role,
.shot-task-assign-role, .shot-task-assign-selected-role,
.project-roles-selected-role {
    font-size: 10px;
}

.project-members-text, .project-members-selected-text,
.task-assign-text, .task-assign-selected-text,
.shot-task-assign-text, .shot-task-assign-selected-text,
.forum-status-text, .forum-status-selected-text,
.shot-forum-status-text, .shot-forum-status-selected-text,
.project-roles-selected-text, .project-roles-text,
.act-forum-status-selected-text, .act-forum-status-text {
    flex: 1;
}

.forum-status-selected-text, .shot-forum-status-selected-text,
.act-forum-status-selected-text {
    font-size: 12px;
    padding: 4px;
    border-radius: 8px;
    color: #fff;
}

.project-members-item:hover, .task-assign-item:hover,
.shot-task-assign-item:hover, .forum-status-item:hover,
.shot-forum-status-item:hover, .project-roles-item:hover,
.act-forum-status-item:hover {
    background-color:#ebebeb;
}

.project-role-id {
    opacity: 0;
}

.forum-status-item:hover .forum-status-icon,
.shot-forum-status-item:hover .forum-status-icon,
.act-forum-status-item:hover {
    border-width: 5px;
}

.project-members-add-btn-div {
    justify-self: start;
}

/* .project-members-dropdown {
    grid-column: 1/3;
}

.project-roles-dropdown {
    grid-column: 2/3;
} */

.project-members-add-form, .project-members-add {
    border: none;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
}

.project-members-add-disabled, .task-assign-btn-disabled,
.shot-task-assign-btn-disabled {
    border: none;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    background-color: rgb(190, 190, 190);
    width: 55px;
    height: 34px;
}

.task-assign-btn-disabled, .shot-task-assign-btn-disabled {
    height: 20%;
    width: 90%;
}

.task-assign-btn, .shot-task-assign-btn {
    background-color: rgb(80, 180, 120);
    height: 20%;
    width: 90%;
}

.project-members-add {
    background-color: rgb(80, 180, 120);
    width: 55px;
    height: 34px;
}

.project-members-add:hover,
.task-assign-btn:hover, .shot-task-assign-btn:hover {
    background-color: rgb(60, 160, 100);    
}

.project-members-main {
    overflow-x: auto;
}

.project-members-table {
    font-size: 13px;
    margin-top: 50px;
    margin-left:auto; 
    margin-right:auto;
    color: grey;
    border-collapse: collapse;
    width: 95%;
}

.settings-users-table {
    font-size: 13px;
    margin: 0px;
    width: 100%;
    overflow: scroll;
}

.users-settings-list {
    overflow-y: auto;
}

/*.project-members-header {
    background-color: #5fa8d3;
    color: white;
    font-weight: 100;
    font-size: 13px;
}*/

.project-members-header, .project-members-column {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.project-members-column {
    min-width: 100px;
    overflow: hidden;
    position: relative;
}

.users-settings-column-img {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    min-width: 40px;
}

.users-settings-column {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    min-width: 40px;
}

.project-members-row:hover {
    background-color:#f5f5f5;
}

.project-members-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.modal-settings img {
    border-radius: 50%;
}

.users-settings-image {
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    object-fit: cover; 
}

.project-members-remove, .project-members-delete {
    border: none;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    transform: translate(10px, -2px);
    height: 28px;
}

.project-members-remove {
    background-color: rgb(255, 80, 70);
    width: 55px;
}

.project-members-remove:hover {
    background-color: rgb(255, 50, 20); 
}

/* --> END PROJECT TEAM TABLE */

.reports-select-container {
    max-width: 80%;
    margin: 30px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: grey;
}

.reports-select-container .project-members-dropdown {
    height: 40px;
    margin-right: 15px;
}

.show-reports-btn-disabled {
    padding: 10px 10px;
    height: 40px;
    margin-top: 5px;
    background: #b6b6b6;
    border: 1px solid #b6b6b6;
    border-radius: 5px;
    color: whitesmoke;
    margin-right: 15px;
    transform: translateY(-2px);
}

.show-reports-btn {
    padding: 10px 10px;
    height: 40px;
    margin-top: 5px;
    background: #5fa8d3;
    border: 1px solid #5fa8d3;
    border-radius: 5px;
    color: whitesmoke;
}
    
.show-reports-btn:hover {
    background-color: whitesmoke;
    color: #5fa8d3;
    font-weight: bold;
    border: 1px solid #5fa8d3;
    cursor: pointer;
}

.excel-disabled {
    padding: 10px 10px;
    height: 40px;
    margin-top: 5px;
    background: #b6b6b6;
    border: 1px solid #b6b6b6;
    border-radius: 5px;
    color: whitesmoke;
    transform: translateY(-2px);
}

.excel {
    padding: 10px 10px;
    height: 40px;
    margin-top: 5px;
    background: #007816;
    border: 1px solid #007816;
    border-radius: 5px;
    color: whitesmoke;
    transform: translateY(-2px);
}
    
.excel:hover {
    background-color: whitesmoke;
    color: #007816;
    font-weight: bold;
    border: 1px solid #007816;
    cursor: pointer;
}


/* --> START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW  */
/* --> START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW  */
/* --> START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW  */
/* --> START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW  */
/* --> START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW  */
/* --> START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW START MULTILEVEL TREEVIEW  */

.items-block {
    margin-top: 10px;
    /* height: 100vh; */
    /* overflow-y: auto; */
    /* transition: 0.2s; */
}

.item {
    /*margin-top: 5px;*/
    padding: 2px;
}

.item ul, .item-top[type="checkbox"], .expandable {
    display: none;
}

.item .item-top:checked ~ .expandable {
    display: block;
}

.assets-gear, .seq-icon, .task-icon, .thumb {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    float: left;
    margin-top: 7px;
    margin-right: 2px;
}

.search-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 6px;
    top: 7px;
}

.table-filter {
    position: relative;
    margin: 2px;
}

.table-filter input {
    width: 100%;
    padding: 12px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    color: grey;
    height: 28px;
    padding-left: 30px;
}

.thumb{
    margin-right: 3px;
    width: 75px;
    height: 58px;
    margin-top: 0px;
    cursor: pointer;
    object-fit: cover;
    object-position: center;
}

.seq-icon {
    margin-right: 8px;
}

/* add "label" into classes to see adaptive label!!! */
.item ul, .item li, .item-title {
    line-height: 30px;
    list-style: none;
    text-decoration: none;
    font-weight: 100;
    width: 100%;
    z-index: 0;
}

.item-title:hover {
    cursor: pointer;
}

.item-title {
    text-transform: uppercase;
    color: white;
    width: 100%;
    display: block;
    position: relative;
    padding-top: 4px;
    padding-bottom: 2px;
    font-size: 15px;
    background-color: #5fa8d3;
    transform: translateY(-3px);
}

.seq {
    background-color: #5fa8d3;
    /* border: solid #7e6ccc 1px; */
}

.item-stats {
    float: right;
    margin-right: 10px;
}

.arrow {
    position: relative;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    float: left;
    margin-top: 10px;
    margin-right: 5px;
    z-index: 1;
}

.item input + .arrow {
    transform: rotate(-90deg);
    transition: 0.1s;
}
.item input:checked + .arrow {
    transform: rotate(0deg);
    transition: 0.1s;
}

/* shift list items to look like treeview */
.item ul {
    padding: 0 0em;
    padding-bottom: 0px;
}

.global-task {
    border-collapse: collapse;
    width: 100%;
}

.global-task td, .global-task th {
    border: 1px solid #ddd;
    padding: 4px;
}

.global-task tr:nth-child(even){
    background-color: #f2f2f2;
}

.global-task-selected {
    position: relative;
    overflow: hidden;
    background-color: #8cb3c7;
}

.global-task tr:hover {
    background-color: #c4c7df;
    transition: all 0.1s linear;
}

.global-task th {
    padding: 4px;
    text-align: left;
    /* background-color: #5fa8d3; */
    background-color: #8cb3c7;
    color: white;
    font-weight: 100;
    font-size: 13px;
}

.seq {
    background-color: #8cb3c7;
}

.global-task-thumb {
    width: 50px;
}

.global-task-name {
    min-width: 80px;
    width: 100px;
}

.asset-table-name, .asset-table-desc, .shot-table-name, .shot-table-desc {
    font-size: 14px;
    cursor: default;
}

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

.asset-table-desc p, .shot-table-desc p {
    margin: 0;
    width: 100%;
    height: 100%;
}

.copy-desc {
    height: 24px;
    width: 24px;
    cursor: pointer;
    opacity: 0.3;
}

.copy-desc:hover {
    opacity: 1;
}

.global-task-description {
    min-width: 450px;
}

.task-cell {
    position: relative;
    width: 115px;
    height: 67px;
    overflow: hidden;
}

.flagged-cell {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    content: '';
    width: 60px;
    height: 60px;
    background-color: rgb(150, 0, 0);
    border-style: 0px solid;
    right: -30px;
    bottom: -60px;
    position: absolute;
    transform: rotate(-45deg);
}

.global-task-task {
    min-width: 115px;
    width: 50px;
}

.global-task-edit {
    min-width: 130px;
    width: 50px;
}

.global-task-empty {
    display: none;
}

.task-status-cheaps, .task-shot-status-cheaps {
    padding: 3px;
    border: none;
    background-color: orange;
    color: white;
    border-radius: 25px;
    font-size: 12px;
    cursor: pointer;
    transform: translate(0px, 5px);
    float: left;
    margin: 2px;
}

.task-asignee-cheaps, .shot-task-asignee-cheaps {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: translate(0px, 0px);
    float: right;
    margin: 2px;
}

.task-asignee-cheaps img, .shot-task-asignee-cheaps img {
    width: 32px;
    height: 32px;
    z-index: 0;
    border-radius: 50%;
    object-fit: cover;
}

.task-button, .task-button-delete-form, .update-burndown-form {
    border: none;
    color: white;
    padding: 4px 3px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    transform: translateY(-5px);
    display: inline;
}

.task-button-add-task, .task-button-add-shot-task {
    transform: translate(1px, -2px);
    background-color: rgb(10, 150, 40);
    font-size: 11px;
    width: 40px;
    height: 20px;
    margin: 0;
    padding: 0;
}

.task-button-add-task:hover, .task-button-add-shot-task:hover {
    background-color: rgb(5, 90, 20);
}

.task-button-edit, .task-button-shot-edit {
    transform: translate(1px, 1px);
    background-color: rgb(0, 130, 200);
    width: 40px;
}

.task-button-edit:hover, .task-button-shot-edit:hover {
    background-color: rgb(0, 80, 200);
}

.task-button-delete {
    transform: translate(1px, 1px);
    background-color: rgb(255, 80, 70);
    width: 55px;
}

.task-button-delete:hover {
    background-color: rgb(255, 50, 20); 
}

.tasks-table-container {
    overflow-x: auto;
    overflow-y: hidden;
    /*overflow: scroll;*/
}

.activity-tooltip-container {
    min-width: 963px;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    top: 0;
    z-index: 1;
    display: none;
}

.activity-tooltip-thumb,
.activity-tooltip-name,
.activity-tooltip-description,
.activity-tooltip-item,
.activity-tooltip-edit {
    padding: 4px;
    text-align: left;
    font-size: 13px;
    border-right: 1px solid #ddd;
    background-color: #8cb3c7;
    color: #fff;
}

.activity-tooltip-thumb {
    min-width: 85px;
}

.activity-tooltip-name {
    width: 100px;
    min-width: 80px;
}

.activity-tooltip-description {
    min-width: 450px;
    flex: 1;
}

.activity-tooltip-item {
    min-width: 115px;
}

.activity-tooltip-edit {
    min-width: 130px;
    color: #8cb3c7;
}

/*hidden tags*/
.task-assignee-id, .task-thumb-img, .task-asset-name, .task-activity-name, 
.task-status-color, .shot-task-assignee-id, .task-shot-status-color, 
.task-shot-name, .task-shot-activity-name, .task-shot-thumb-img, 
.shot-task-assignee-id, .table-description, .task-default-category,
.shot-task-default-category, .task-priority-name-fetch,
.task-priority-color-fetch, .shot-id, .asset-id, .sequence-id, .task-shot-priority-color-fetch,
.task-shot-priority-name-fetch, .multi-submenu-status-id, .multi-submenu-assign-id,
.multi-submenu-priority-id, .project-members-id, .task-assign-id, .shot-task-assign-id,
.forum-status-id, .forum-status-color, .shot-forum-status-id, .shot-forum-status-color,
.act-forum-status-id, .act-forum-status-color {
    display: none;
}


/* --> END MULTILEVEL TREEVIEW */


/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */
/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */
/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */
/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */
/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */
/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */
/* --> START DASHBOARD  START DASHBOARD START DASHBOARD START DASHBOARD  */

.burndown-update-btn {
    display: none;
}

.dashboard-flexbox {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.dashboard-card {
    width: 30%;
    margin: 10px;
    text-align: center;
    color: grey;
}

.dashboard-card-dt-left {
    /*background-color: #f4f4f4;*/
    display: flex;
    width: 100%;
    padding: 5px;
    border: solid;
    border-color: lightgray;
    border-radius: 4px;
    border-width: 1px;
    overflow: hidden;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 45px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
}

.dashboard-card-tile {
    /*background-color: #f4f4f4;*/
    font-size: 13px;
    width: 100%;
    text-align: left;
    border: solid;
    border-color: lightgray;
    color: grey;
    padding: 5px;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
}

.dt-left-value {
    font-size: 30px;
    position: relative;
    left: 15%;
}

.dt-left-text {
    font-size: 13px;
    position: relative;
}

@media only screen and (max-width: 1280px){
    .dashboard-card {
        width: 46%;
    }
    .dashboard-card-dt-left {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 900px){
    .dashboard-card {
        width: 95%;
    }
}



/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */
/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */
/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */
/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */
/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */
/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */
/* START SIDE FORUM STYLING START SIDE FORUM STYLING START SIDE FORUM STYLING  */

.storage-limit-reached {
    background-color: #791d1d;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.side-forum {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    background-color: #f4f4f4;
    overflow-x: hidden;
    box-shadow: 4px 5px 10px 0px rgba(0,0,0,0.6);
    transition: 0.2s;
}

.side-forum-title {
    display: grid;
    grid-template-columns: 10fr 1fr;
    grid-auto-rows: 54px;
    border-bottom: solid;
    border-color: #b6b6b6;
    border-width: 3px;
    margin-top: -4px;
}

.side-forum-title-name, .shot-forum-title-name, .kanban-forum-title-name {
    padding-top: 20px;
    padding-left: 10px;
    color: gray;
}

.btn-close-forum, .btn-close-shot-forum, .btn-close-kanban-forum {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 32px;
    color: lightgrey;
    padding-right: 10px;
    transform: translateY(-12px);
}

.btn-close-forum:hover, .btn-close-shot-forum:hover, .btn-close-kanban-forum:hover {
    cursor: pointer;
    color: grey;
}

.side-forum-about {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 0.5fr;
    grid-gap: 1em;
    border-bottom: solid;
    border-color: #b6b6b6;
    border-width: 1px;
}

.side-forum-about-thumb {
    grid-row: 1/5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

.side-forum-about-thumb img {
    max-width: 150px;
    height: 120px;
    object-fit: cover;
}

.kanban-forum-about-status-name, .side-forum-about-status-name,
.shot-forum-about-status-name {
    grid-column: 3/5;
}

.forum-about-budget-edit, .forum-about-priority-edit,
.shot-forum-about-priority-edit, .forum-about-important-set {
    display: flex;
    align-items: center;
}

.forum-about-budget-edit img, .forum-about-priority-edit img,
.shot-forum-about-priority-edit img, .forum-about-important-set img,
.kanban-about-important-set img, .shot-about-important-set img {
    opacity: 0.8;
    cursor: pointer;
}

.kanban-about-budget-edit, .kanban-about-priority-edit {
    font-size: 0;
}

.side-forum-about-status-title, .side-forum-about-status-name,
.side-forum-about-budget-title, .side-forum-about-budget-value,
.shot-forum-about-budget-value, .shot-forum-about-status-name,
.kanban-forum-about-budget-value, .kanban-forum-about-status-name,
.side-forum-about-priority-title, .side-forum-about-priority-name,
.shot-forum-about-priority-name, .kanban-priority-name
{
    color: gray;
    align-self: center;
    font-size: 11px;
}

.side-forum-about-status-name, .shot-forum-about-status-name,
.kanban-forum-about-status-name, .side-forum-about-priority-name,
.kanban-priority-name, .shot-forum-about-priority-name {
    padding: 3px;
    align-content: center;
    color: white;
    text-align: center;
}

.side-forum-about-activity-title, .side-forum-about-activity-name,
.shot-forum-about-activity-name, .kanban-forum-about-activity-name {
    font-size: 11px;
    color: gray;
}

.side-forum-notepad {
    /*margin-top: 10px;*/
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    border-bottom: solid;
    border-color: #b6b6b6;
    border-width: 1px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
}

.side-forum-notepad-text {
    height: 30px;
    grid-column: 1/10;
}

#text-area1, #text-area2, #text-area3 {
    font-size: 13px;
    height: 90px;
    padding: 2px;
}

.notepad-attachment[type=file]  {
    color: grey;
    height: 30px;
    border: solid;
    border-color: lightgrey;
    border-width: 1px;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    padding: 2px;
    grid-column: 1/10;
}

.notepad-attachment:hover {
    cursor: pointer;
}

.hr-check-toggle {
    display: flex;
    gap: 5px;
    grid-column: 1/4;
    height: 30px;
    transform: translate(10px, -8px);
    justify-content: flex-start;
}

.hr-check-label {
    color: grey;
    font-size: 13px;
    text-align: center;
    align-self: center;
}

.notepad-set-status-label {
    color: grey;
    font-size: 13px;
    /*grid-column: 3/4;*/
    text-align: center;
    align-self: center;
    transform: translate(-2px, -9px);
}

.side-forum-select-status {
    grid-column: 2/4;
    height: 30px;
    transform: translateY(-8px);
}

.side-forum-notepad-status-dropdown {
    cursor: pointer;
    padding: 0px;
    margin: 0px;
    height: 28px;
}

.notepad-hours-label{
    grid-column: 4/5;
    color: grey;
    font-size: 13px;
    text-align: center;
    align-self: center;
    transform: translate(-2px, -9px); 
}

.side-forum-set-hours {
    grid-column: 5/7;
    height: 30px;
    transform: translateY(-8px);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.side-forum-set-hours input {
    -moz-appearance: textfield;
    padding: 5px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: grey;
}

.set-task-spent-hours {
    height: 28px;
    width: 70px;
    color: gray;
}

.set-task-spent-hours:invalid {
    background-color: #b10e0e;
    color: white;
}

.side-forum-notepad-btn {
    border: none;
    color: white;
    padding: 5px 4px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    height: 28px;
    background-color: rgb(0, 130, 200);
    transform: translateY(-8px);
    grid-column: 7/10;
}

.side-forum-notepad-btn:hover {
    background-color: rgb(0, 80, 200);
}

.side-forum-notepad-btn:disabled {
    background-color: lightgray;
    color: white;
}

.side-forum-messages, .shots-forum-messages, .kanban-forum-messages {
    padding: 2px;
}

.comment-container {
    margin-top: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.comment-body {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    border: solid;
    border-color: #b6b6b6;
    border-width: 1px;  
    /*border-radius: 4px;*/
    background-color: white;
    /*box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);*/
    word-break: break-word;
}

.comment-author-avatar {
    grid-row: 1/4;
}

.comment-author-avatar img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
    /*box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);*/
}

.comment-author-name {
    color: grey;
    font-size: 10px;
    grid-column: 1/3;
}

.comment-budget-spent {
    color: grey;
    font-size: 10px;
    justify-content: center;
    grid-column: 3/4;
}

.comment-date-time {
    color: grey;
    font-size: 10px;
    grid-column: 4/6;   
}

.side-forum-kebab {
    position: relative;
    text-align: center;
    transform: translateY(-4px);
    cursor: pointer;
    grid-column: 6/7;
}

.comment-text-data {
    grid-column: 1/7;
    border-top: solid;
    border-bottom: solid;
    border-color: #b6b6b6;
    border-width: 1px;
    align-self: start;
    font-size: 13px;
}

.comment-attach-file {
    grid-column: 1/6;
    cursor: pointer;
}

/*START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD
START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD
START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD
START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD
START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD
START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD START KANBAN BOARD*/

.kanban-board-top-class {
    margin-top: 15px;
    display: flex;
    width: 100%;
    min-height: 20vh;
    height: 100%;
    flex-flow: column;
    justify-content: center;
}

.kanban-lists {
    display: flex;
    flex: 1;
    width: 100%;
    overflow-x: auto;
}

.kanban-list-title {
    padding-bottom: 30px;
    pointer-events: none;
    font-size: 14px;
}

.kanban-list {
    color: grey;
    text-align: left;
    border-radius: 4px;
    display: flex;
    flex-flow: column;
    flex: 1;
    width: 100%;
    min-width: 320px;
    height: 100%;
    min-height: 85vh;
    /*background-color: rgba(0,0,0,0.1);*/
    margin: 0 5px;
    padding:  10px;
    transition: all 0.2s linear;
}

.kanban-list-hovered {
    background-color: #c4c7df;
    border: solid grey 1px;
    border-style: dashed;
}

.kanban-list-item {
    background-color: rgb(248, 248, 248);
    text-align: center;
    margin: 5px 0px;
    color: grey;
    font-size: 13px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    max-height: 108px;
    transition: all 0.1s linear;
}

.kanban-list-item:hover {
    background-color: rgb(225, 225, 225);
}

.kanban-list-item-hold {
    transform: rotate(3deg);
}

.kanban-card-placeholder {
    width: 100%;
    height: 108px;
    background-color: #5fa8d3;
    border-radius: 3px;
    opacity: 0.55;
}

.kanban-card-thumb {
    grid-row: 1/4;
    justify-self: start;
}

.kanban-card-thumb img {
    width: 120px;
    height: 100px;
    object-fit: cover;
}

.kanban-card-task {
    color: #5fa8d3;
    padding: 3px;
    margin-left: 5px;
    align-self: center;
    grid-column: 2/3;
    grid-row: 1/2;
    width: 100%;
    text-align: left;
}

/*this class should be uncommented when the unread function will be realised*/
/*this class should be uncommented when the unread function will be realised*/
/*this class should be uncommented when the unread function will be realised*/
.kanban-card-notify {
    font-size: 12px;
    position: relative;
    padding: 3px;
    margin-right: 5px;
    justify-self: end;
    align-self: center;
    width: 20px;
    height: 20px;
    grid-column: 7/8;
    grid-row: 1/2;
    text-align: center;
    /* background-color: grey; */
    background-color: #5fa8d3;
    color: white;
    border-radius: 50%;
    top: -15px;
    right: -15px;
    display: none;
}

.kanban-card-name {
    color: #000;
    font-size: 14px;
    padding: 3px;
    margin-left: 5px;
    align-self: center;
    grid-column: 2/3;
    grid-row: 2/3;
    width: 100%;
    text-align: left;
}

.kanban-card-category {
    padding: 3px;
    margin-left: 5px;
    align-self: center;
    grid-column: 2/3;
    grid-row: 3/4;
    width: 100%;
    text-align: left;
}

.kanban-card-priority {
    position: relative;
    right: 5px;
    color: white;
    font-size: 10px;
    padding: 3px;
    align-self: center;
    grid-column: 7/8;
    grid-row: 3/4;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
}

/*kanban hidden classes for js*/
.kanban-task-id, .kanban-item-id, 
.kanban-status-name, .kanban-data-type,
.kanban-task-img, .kanban-status-color,
.task-budget-fetch, .task-shot-budget-fetch,
.kanban-task-budget, .kanban-task-priority-name,
.kanban-task-priority-color, .kanban-task-description {
    display: none;
}

/*END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN
END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN
END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN
END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN
END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN
END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN BOARD END KANBAN*/


/*START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING
START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING
START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING
START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING
START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING
START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING START REVIEW STYLING*/

.review-container-main {
    display: flex;
    justify-content: space-around;
}

.canvas-review {
    margin-top: 5px;
    padding: 10px;
    flex: 1;
    /*box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);*/
}

.canvas-container {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    background-color: rgb(220, 220, 220);
    border-bottom: solid 2px rgb(220, 220, 220);
}

.canvas-image {
    position: absolute;
    max-width: 100%;
    height: auto;
}

.canvas-video {
    position: absolute;
    width: 100%;
}

.canvas {
    position: relative;
    z-index: 1;
}

.canvas:hover {
    cursor: none;
}

.content-controls {
    position: relative;
    margin-top: 3px;
    border: solid 1px grey;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px;
}

.seek-bar-head {
    grid-column: 1;
    height: 3px;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: solid 2px lightgrey;
    grid-column: 1/8;
    cursor: pointer;
}

.seek-bar-body {
    height: 3px;
    width: 0%;
    background-color: #5fa8d3;
}

.seek-bar-search {
    height: 3px;
    width: 0%;
    background-color: orange;
}

.playpause-div {
    position: relative;
    grid-column: 2;
    grid-column: 1/2;
    transform: translateY(5px);
    align-self: start;
    justify-self: start;
}

.playpause {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    display: block;
    width: 0;
    height: 12px;
    border-color: transparent transparent transparent grey;
    transition: 100ms all ease;
    cursor: pointer;
    /* play state*/
    border-style: solid;
    border-width: 6px 0 6px 10px;
    outline: none;
}

.playpause.paused {
    border-style: double;
    border-width: 0px 0 0px 10px;
    outline: none;
}

.time-indicator {
    color: grey;
    grid-column: 3;
    grid-row: 2;
    grid-column: 2/3;
    font-size: 13px;
    align-self: start;
    justify-self: end;
    position: absolute;
    left: 40px;
    transform: translate(-100px, 2px);
}

.tools-div {
    grid-column: 3;
    align-self: start;
    justify-self: end;
    transform: translateX(25px);
}

.review-canvas-cursor {
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}

.pen {
    padding: 3px;
    cursor: pointer;
}

.eraser {
    padding: 3px;
    cursor: pointer;
}

.pen:hover {
    border: solid 1px grey;
}

.pen-selected {
    padding: 3px;
    border: solid 1px grey;
}

.eraser:hover {
    border: solid 1px grey;
}

.eraser-selected {
    padding: 3px;
    border: solid 1px grey;
}

#colors {
    margin-top: 2px;
    justify-self: end;
    grid-column: 4/7;
    display: inline-block;
}

.fullscreen-div {
    grid-column: 7;
    align-self: start;
    justify-self: end;
}

.download-btn {
    margin-right: 5px;
    padding: 3px;
    cursor: pointer;
}

.fullscreen-btn {
    padding: 3px;
    cursor: pointer;
}

.swatch {
    width: 18px;
    height: 18px;
    border-radius: 15px;
    /*box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);*/
    display: inline-block;
    margin-left: 10px;
}

.swatch.active {
    border: 2px solid white;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.comment-input-div {
    position: relative;
    margin-top: 5px;
    border: solid 1px grey;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.review-comment-input {
    width: 90%;
    height: 28px;
    padding: 12px 2px;
    margin: 10px 0;
    border: none;
    border-bottom: 1px solid grey;
    color: black;
}

.review-comment-btn-form, .review-comment-btn {
    border: none;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    transform: translateY(0px);
}

.review-comment-btn {
    font-size: 11px;
    background-color: #5fa8d3;
    width: 100px;
}

.review-comment-btn:hover {
    background-color: #1da1d1;  
}

.review-comment-btn:disabled {
    background-color: lightgray;
    color: white;
}

.review-forum {
    margin-top: 5px;
    padding: 15px;
    flex: 0.4;
}

.tab-menu-list {
    padding: 5px;
    color: grey;
    font-size: 18px;  
}

.tabs {
    margin: 0;
    padding: 3px;
    border-bottom: 1px solid lightgray;
    height: 40px;
}

.tab {
    font-size: 14px;
    cursor: pointer;
}

.tab.tab-active {
    color: #5fa8d3;
}

.tab:hover {
    font-weight: 600;
    color: #5fa8d3;
}

.tab-content {
    padding-top: 20px;
}

[data-tab-content] {
    display: none;
}

.tab-active[data-tab-content] {
    display: block;
}

.review-forum-title {
    margin-top: 5px;
    padding: 5px;
    color: black;
    font-size: 16px;
}

.review-forum-version-description {
    font-size: 14px;
    margin-top: 10px;
    padding: 5px;
    pointer-events: none;
}

.review-forum-title-text {
    pointer-events: none;
}

.review-forum-feedback {
    pointer-events: none;
    padding: 5px;
    margin-top: 20px;
    color: grey;
    font-size: 13px;
    font-weight: 100;
    border-bottom: solid 1px lightgrey;
}

.message-clickable {
    cursor: pointer;
    transition: all 0.15s ease;
}

.message-clickable:hover {
    background-color: rgba(125, 125, 125, 0.3);
}

.time-tag-text {
    color: #5fa8d3;
    font-size: 13px;
}

.review-forum-close {
    display: block;
    color: gray;
    float: right;
    font-size: 20px;
    text-align: center;
    border-radius: 50px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border: solid gray 1px;
    transform: translateY(-6px);
    transition: all 0.1s linear;
}

.review-forum-close:hover {
    pointer-events: default;
    cursor: pointer;
    color: white;
    border-color: white;
    background-color: #5fa8d3;
}

.review-version-card {
    background-color: rgb(248, 248, 248);
    text-align: center;
    margin: 10px 0px;
    color: grey;
    font-size: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 100px;
    min-width: 200px;
    transition: all 0.1s linear;
}

.review-version-card:hover {
    background-color: rgb(225, 225, 225);
}

.review-version-card-thumb {
    grid-row: 1/4;
    justify-self: start;
}

.review-version-card-thumb img {
    max-width: 120px;
    height: 100px;
    object-fit: cover;
}

.review-version-card-entity {
    grid-row: 1/2;
    grid-column: 2/6;
    padding: 3px;
    margin-left: 5px;
    align-self: center;
    width: 100%;
    text-align: left;
    pointer-events: none;
}

.review-version-card-name {
    grid-row: 2/3;
    grid-column: 2/6;
    color: #000;
    font-size: 14px;
    padding: 3px;
    margin-left: 5px;
    align-self: center;
    width: 100%;
    text-align: left;
    pointer-events: none;
}

.review-version-card-activity {
    grid-row: 3/4;
    grid-column: 2/6;
    padding: 3px;
    margin-left: 5px;
    align-self: center;
    width: 100%;
    text-align: left;
    color: #5fa8d3;
    pointer-events: none;
}

.review-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
}

.review-modal-content {
    background-color: white;
    margin: 22% auto;
    width: 15%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5), 0 7px 20px 0 rgba(0, 0, 0, 0.5);
}

.keep-btn {
    width: 100%;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    background-color: rgb(120, 120, 120);
}

.keep-btn:hover {
    cursor: pointer;
    background-color: rgb(70, 70, 70);
}

.approve-btn {
    width: 100%;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    background-color: rgba(0, 180, 40, 1);
}

.approve-btn:hover {
    cursor: pointer;
    background-color: rgba(0, 120, 20, 1);
}

.rework-btn {
    width: 100%;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    background-color: rgba(160, 0, 255, 1);
}

.rework-btn:hover {
    cursor: pointer;
    background-color: rgba(120, 0, 180, 1); 
}

@media only screen and (max-width: 1280px) {
    .review-container-main {
        display: block;
        margin-top: 60px;
    }

    .tab-menu-list {
        position: absolute;
        width: 95%;
        top: 75px;
        left: 10px;
    }

    .tabs {
        border: none;
    }

    .tab {
        font-size: 14px;
    }

    .review-modal-content {
        margin: 40% auto;
        width: 30%;
    }
}

@media only screen and (max-width: 600px) {
    .review-modal-content {
        margin: 75% auto;
        width: 40%;
    }

    .content-controls {
        position: relative;
        margin-top: 3px;
        border: solid 1px grey;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
        padding: 10px;
    }

    .time-indicator {
        transform: translate(-120px, 2px);
    }

    .tools-div {
        transform: translate(-5px, 0px);
    }
    
}

@media only screen and (max-width: 400px) {

    .time-indicator {
        display: none;
    }

    .tools-div {
        transform: translate(-35px, 0px);
    }

    #colors {
        transform: translate(-25px, 0px);
    }
    
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: #5fa8d3;
    color: #fff;
    text-align: center;
    font-size: 13px;
    border-radius: 4px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    transform: translateY(-5px);
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #5fa8d3 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/*END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING 
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING 
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING 
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING 
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING */


/*START VERSIONS STYLING START VERSIONS STYLING START VERSIONS STYLING 
START VERSIONS STYLING START VERSIONS STYLING START VERSIONS STYLING 
START VERSIONS STYLING START VERSIONS STYLING START VERSIONS STYLING 
START VERSIONS STYLING START VERSIONS STYLING START VERSIONS STYLING 
START VERSIONS STYLING START VERSIONS STYLING START VERSIONS STYLING */

.versions-filter, .settings-users-filter {
    display: flex;
    justify-content: center;
    flex: 1;
}

.settings-users-filter {
    width: 100%;
    margin-bottom: 15px;
}

.versions-filter input, .settings-users-filter input {
    margin-top: 30px;
    width: 90%;
    padding: 12px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    color: grey;
}

.settings-users-filter input {
    padding: 6px 5px;
    margin-top: 0px;
    width: 100%;
}

.version-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: gray;
}

.version-box {
    max-width: 200px;
    min-width: 200px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    margin: 10px;
    background-color: rgb(248, 248, 248);
    transition: all 0.1s linear;
}

.version-image {
    position: relative;
}

.version-checker {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
}

.version-image img{
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: center;
}

.version-box:hover {
    background-color: rgb(225, 225, 225);
}

.version-data {
    font-size: 10px;
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}

.version-text {
    padding: 3px;
    font-size: 13px;
}

.version-status {
    padding: 2px;
    color: white;
    text-align: center;
    width: 100%;
}

.version-maininfo {
    color: black;
}

.version-midinfo {
    color: #5fa8d3;
}

.version-subinfo {
    font-size: 10px;
    padding: 5px;
}

@media only screen and (max-width: 450px) {

    .version-box {
        max-width: 150px;
        min-width: 150px;
        margin: 5px;
    }
    
}

/* END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING
END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING END REVIEW STYLING */


/* START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING
START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING
START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING
START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING START ACTIVITY PAGE STYLING*/

.loaded_items_info {
    padding: 50px;
    width: 80%;
    /* background-color: #eb7863; */
    margin: auto;
    text-align: center;
    color: gray;
    font-size: 12px;
}

.activity-filter {
    /* background-color: #c0392b; */
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 20px;
    transform: translateY(-25px);
}

.activity-filter input {
    width: 60%;
    font-size: 10px;
    padding: 6px 5px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    color: grey;
}

.activity-card-container {
    width: 80%;
    /* background-color: #807a79; */
    margin: auto;
    cursor: default;
    border-top: solid 1px lightgray;
}

.activity-card-elements {
    padding: 10px;
    /* background-color: #85554d; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr 1fr;
    margin-bottom: 10px;
    color: gray;
    font-size: 12px;
    text-align: center;
    border-bottom: solid 1px lightgray;
}

.activity-text-data {
    align-self: center;
}


.activity-status-cell {
    position: relative;
    display: grid;
    align-content: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

.act-stat-name {
    margin: 0;
}

.activity-status-cheaps {
    text-align: center;
    border: none;
    color: white;
    border-radius: 25px;
    font-size: 11px;
    float: left;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
}

.activity-image-thumb img {
    width: 100px;
    height: 50px;
    object-fit: cover;
}

.activity-user-avatar {
    display: grid;
    align-content: center;
    justify-content: center;
    padding: 0px;
    margin: 0px; 
}

.activity-user-avatar img {
    justify-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 2px;
    object-fit: cover;
}

.activity-user-avatar p {
    justify-self: center;
    font-size: 10px;
    color: grey;
    text-align: center;
    margin: 0;
}

.activity-user-avatar .act-ttl {
    color: rgb(168, 168, 168);
    font-size: 10px;
    margin: 0;
}

/* END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING
END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING
END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING
END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING END ACTIVITY PAGE STYLING


/* START EMPTY PAGE STYLING START EMPTY PAGE STYLING START EMPTY PAGE STYLING
START EMPTY PAGE STYLING START EMPTY PAGE STYLING START EMPTY PAGE STYLING
START EMPTY PAGE STYLING START EMPTY PAGE STYLING START EMPTY PAGE STYLING
START EMPTY PAGE STYLING START EMPTY PAGE STYLING START EMPTY PAGE STYLING */

.empty-data-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empty-data-icon {
    padding: 25px;
    width: 256px;
    opacity: 50%;
}

.empty-data-description {
    color: #999;
}

.empty-feedback-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empty-feedback-icon {
    padding: 25px;
    width: 180px;
    opacity: 50%;
}

.empty-feedback-msg {
    color: #999;
    font-size: 12px;
}

@media only screen and (max-height: 500px) {
    .empty-data-container {
        top: 62%;
    }
}

@media only screen and (max-height: 340px) {
    .empty-data-container {
        top: 65%;
    }

    .empty-data-icon {
        width: 164px;
    }

    .empty-data-description {
        font-size: 12px;
    }
}

@media only screen and (max-height: 250px) {
    .empty-data-container {
        top: 70%;
    }

    .empty-data-icon {
        width: 146px;
    }

    .empty-data-description {
        font-size: 12px;
    }
}

/* END EMPTY PAGE STYLING END EMPTY PAGE STYLING END EMPTY PAGE STYLING
END EMPTY PAGE STYLING END EMPTY PAGE STYLING END EMPTY PAGE STYLING
END EMPTY PAGE STYLING END EMPTY PAGE STYLING END EMPTY PAGE STYLING
END EMPTY PAGE STYLING END EMPTY PAGE STYLING END EMPTY PAGE STYLING */

/* SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING
 SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING
  SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING
 SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING SETTINGS PAGE STYLING */

.settings-main-container{
    display: flex;
    align-items: start;
    justify-content: center;
    /* background: #c5e4d2; */
}

.settings-activities-sortable-list{
    margin-top: 30px;
    background: #FAFAFA;
    width: 400px;
    border-radius: 6px;
    padding: 30px 35px 20px;
    margin-left: 30px;
}

.settings-activities-list-title{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-bottom: 10px;
    color: grey;
}

.settings-activities-sortable-list .settings-activities-list-item{
    width: 100%;
    list-style: none;
    display: flex;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 11px;
    padding: 10px 13px;
    align-items: center;
    justify-content: space-between;
    background: #ebebeb;
}

.settings-activities-list-item {
    cursor: grab;
}

.settings-activities-list-item .settings-item-details {
    display: flex;
    align-items: center;
}

.settings-activities-list-item .settings-item-details img{
    width: 24px;
    height: 24px;
    margin-right: 12px;
    object-fit: cover;
    border-radius: 50%;
}

.settings-activities-list-item .settings-item-details span {
    font-size: 14px;
}

.settings-activities-list-item b {
    color: #b10e0e;
    font-size: 20px;
    display: none;
}

.settings-activities-list-item.dragging :where(.settings-item-details, b) {
    opacity: 0;
}

.settings-activities-input-btn-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    justify-content: space-between;
    padding-top: 13px;
    padding-bottom: 13px;
}

.settings-activities-dropdown {
    width: 100%;
}

.settings-activities-dropdown select {
    padding: 0px;
    margin: 0px;
    text-indent: 2px;
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
}

.settings-activities-radio-select {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

.settings-radio-select {
    display: flex;
    padding: 5px 5px;
    cursor: pointer;
}

.settings-activities-radio-select label {
    font-size: 11px;
    margin-left: 1px;
    padding: 5px;
    color: grey;
    cursor: pointer;
}

.settings-activities-input {
    width: 100%;
}

.settings-activities-input input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    border: solid 1px grey;
    border-radius: 4px;
    padding: 5px;
}

.settings-activities-btn-div {
    padding-left: 5px;
}

.settings-activities-btn {
    border: none;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #2ea660;
    width: 40px;
    height: 40px;
    transition: all 0.05s ease-in;
}

.settings-activities-btn:hover {
    background-color: #1a7540;
}

.settings-item-form-btn {
    border: none;
    color: #a73939;;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 8px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;
    width: 40px;
    height: 30px;
    transition: all 0.05s ease-in;
}

.settings-item-form-btn:hover {
    background-color: #b10e0e;
    color: #FFF;
}

.modal-settings-button {
    background-color: #5fa8d3;
    cursor: pointer;
    height: 50px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    transition: all 0.05s ease-in;
}

.modal-settings-button:hover {
    background-color: #4181a5;
}


/* BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING
BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING
BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING
BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING BLURRED LAZY IMAGES STYLING */

.blurred-project-thumb-placeholder{
    position: absolute;
    width: 101%;
    height: 101%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
}

.blurred-thumb-placeholder{
    width: 75px;
    height: 58px;
    background-size: cover;
    background-position: center;
}

.blurred-review-thumb-placeholder{
    width: 120px;
    height: 100px;
    background-size: cover;
    background-position: center;
}

.blurred-kanban-thumb-placeholder{
    width: 120px;
    height: 100px;
    background-size: cover;
    background-position: center;
}

.blurred-version-thumb-placeholder{
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
}

.blurred-project-thumb-placeholder.loaded > img {
    opacity: 1;
}

.blurred-project-thumb-placeholder > img {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.blurred-thumb-placeholder.loaded > img {
    opacity: 1;
}

.blurred-thumb-placeholder > img {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.blurred-kanban-thumb-placeholder.loaded > img {
    opacity: 1;
}

.blurred-kanban-thumb-placeholder > img {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.blurred-version-thumb-placeholder.loaded > img {
    opacity: 1;
}

.blurred-version-thumb-placeholder > img {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}