.ContentEditable__root {
    height: calc(100vh - 188px) !important;
}

@media screen and (max-width:768px) {
    .ContentEditable__root {
        height: calc(100vh - 208px) !important;
    }

    #root {
        min-height: calc(100vh - 161px);
    }
}

.action-button.lock,
.action-button.share {
    display: none !important;
}

.action-button.upload-btn,
.action-button.download-btn {
    display: inline-flex;
}

.actions {
    display: flex;
    z-index: 1;
    bottom: -60px !important;
}

@media screen and (max-width: 768px) {
    .actions {
        bottom: 0px !important;
    }
}


:root.dark {

    .action-button>img,
    .action-button>i {
        filter: invert(1) brightness(0.8);
    }

    .action-button:hover {
        background-color: var(--gray-gradient);
    }

    .Modal__content>div>button:last-child {
        background-color: var(--bg-gray);
        &:hover {
            background-color: var(--color-light-bg);
        }
    }

    .dateTimePicker {
        background: var(--color-white);
        border-color: var(--color-gray-light);
    }

}

.info-container {
    position: absolute;
    bottom: 12px;
    left: 16px;
    font-size: 14px;
    padding: 18px 16px;
    background: var(--color-white);
    border-radius: 10px;
    width: calc(100% - 42px);
    
    .info {
        color: var(--color-paragraph);
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    @media screen and (max-width: 768px) {
        bottom: 64px;
    }
}

@media (width <= 768px) {
    .d-md-none {
        display: none !important;
    }    
}