.cnd-notes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.cnd-note {
    background: #fff8c6; /* Default yellow color */
    margin: 0 auto 20px; /* Add vertical spacing between notes */
    max-width: 80%;     /* Ensure note doesn't exceed the viewport width */
    width: 200px;
    height: 250px;
    padding: 20px;
    padding-bottom: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 5px;
    position: relative;
    font-family: 'Courier New', Courier, monospace;

  /* Initial tilted position */
    transform: rotateX(5deg) rotateY(5deg) rotateZ(3deg); /* Adjust these values as you like for the default tilt */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */

    /* Shadow for the tilted state */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), 
                -5px -5px 15px rgba(255, 255, 255, 0.3);
    /* Smooth transition for hover effects */
    transition: transform 0.5s, box-shadow 0.5s; 
        /* ... existing styles ... */
    overflow: hidden;  /* Ensures the bent part doesn't go outside the note boundary */

}



.cnd-note:hover {
    /* When hovered, note aligns straight */
    transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg);

    /* Shadow for the straight state */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), 
                -2px -2px 10px rgba(255, 255, 255, 0.3);
}

.cnd-note > *:first-child {
    margin: 0;
    padding: 0;
}


@media (min-width: 768px) {
    .cnd-notes-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* Style for the delete icon inside the note */
.cnd-note a.cnd-delete-note {
    position: absolute;   /* Position it relative to the note */
    top: 10px;            /* Position it 10px from the top */
    right: 10px;          /* Position it 10px from the right */
    text-decoration: none;
    opacity: 0.1;

    color: black;         /* Base color */
}

/* Hover effect for the delete icon */
.cnd-note a.cnd-delete-note:hover {
    color: red;           /* Change color to red on hover */
}




.cnd-note-datetime {
    position: absolute;
    bottom: 5px; 
    right: 10px;
    font-size: 10px;  /* Adjust size as needed */
    color: #000;     /* You can adjust the color as required */
}






/* Container for the visibility toggle icon */
.cnd-visibility-container {
    display: inline-block;     /* Align it next to datetime */
    vertical-align: bottom;   /* Center it vertically relative to the adjacent div */
    margin-right: 10px;       /* Some spacing between this container and datetime */
    position: relative;       /* Allow the absolute positioning of children elements */
}

/* Base styles for the icons */
.cnd-visibility-icon {
    font-size: 18px;           /* Adjust the size of the icon as needed */
    cursor: pointer;           /* Show pointer cursor to indicate it's clickable */
    transition: color 0.3s;    /* Smooth transition for hover effects */
    opacity: 0.3;

}

/* Style for the locked state */
.cnd-visibility-icon.dashicons-lock {
    color: #d9534f;           /* Dark red to represent locked/private state */
}

/* Style for the unlocked state */
.cnd-visibility-icon.dashicons-unlock {
    color: #5cb85c;           /* Green to represent unlocked/public state */
}

/* Hover effect */
.cnd-visibility-icon:hover {
    color: #333;              /* Dark color for hover effect */
}


.cnd-datetime-visibility-wrapper {
    display: flex;
    align-items: flex-end;
}





.cnd-clipboard-icon {
    font-size: 20px;      /* Set the icon size */
    color: black;         /* Base color */
    transition: color 0.5s; 

    position: absolute;
    bottom: 5px;
    left: 5px;
    cursor: pointer;
    opacity: 0.1;

}

.cnd-clipboard-icon:hover {
    color: red;           /* Change color to red on hover */
    transition: color 0.5s; 


}

.cnd-decor {
    position: absolute;
    z-index: 10;
    pointer-events: none; /* Ensure the decoration doesn't interfere with any interactions on the note */
}

.cnd-decor-top-left {
    top: 0px;
    left: 10px;
}

.cnd-decor-top-right {
    top: 0px;
    right: 10px;
}

.cnd-decor-center-top {
    top: 0px;
    left: 100px;
}

.cnd-note .cnd-decor {
    overflow: visible; /* Explicitly allow overflow for the decoration, but this won't work in standard CSS */
    /* This might require a different approach, like positioning the decoration outside the .cnd-note container */
}