@media screen and (max-width: 840px) {
    .action-text {
        margin-left: 8px;
    }
}

@media screen and (max-width: 750px) {
    .settings-container, .raw-data-container {
        width: 600px;
        left: calc(50% - 300px);
    }
}

@media screen and (max-width: 740px) {
    .action-text {
        margin-left: 8px;
    }

    .editor-wrapper {
        display: none;
    }

    .notes-wrapper {
        width: calc(100% - 50px);
    }

    .search-wrapper {
        width: calc(100% - 50px);
    }
}

@media screen and (max-width: 660px) {
    .settings-container {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 0;
    }

    .raw-data-container {
        width: 400px;
        left: calc(50% - 200px);
    }
}

@media screen and (max-width: 580px) {
    .settings-note-wrapper-date {
        width: calc(100% - 100px);
    }
}

@media screen and (max-width: 500px) {
    .help-container, .note-lock-container, .user-confirmation-container {
        width: 300px;
        left: calc(50% - 150px);
    }
}

@media screen and (max-width: 460px) {
    .settings-note-wrapper-date {
        display: none;
    }

    .login-container, .raw-data-container {
        width: 300px;
        left: calc(50% - 150px);
    }

    .note-title-edit-container {
        width: 300px;
        height: 210px;
        left: calc(50% - 150px);
        top: calc(50% - 105px);
    }
}

@media screen and (max-width: 405px) {
    .actions-wrapper-right {
        width: 35%;
    }

    .actions-wrapper-left {
        width: 65%;
    }
}

@media screen and (max-width: 335px) {
    .login-container, .raw-data-container, .note-lock-container, .user-confirmation-container {
        width: 220px;
        left: calc(50% - 110px);
    }
}

@media screen and (max-width: 240px) {
    .login-container {
        width: 180px;
        left: calc(50% - 90px);
    }
}

@media screen and (max-height: 670px) {
    .help-container {
        height: 400px;
        top: calc(50% - 200px);
    }

    .help-content-wrapper {
        height: calc(60% - 40px);
    }
}

@media screen and (max-height: 670px) and (min-width: 660px) {
    .settings-container {
        height: 400px;
        top: calc(50% - 200px);
    }
}

@media screen and (max-height: 500px) {
    .sidebar-middle {
        display: none;
    }
}