.fs-1 {
    font-size: 4rem;
}

.fs-2 {
    font-size: 2.4rem;
}

.bg-1 {
    background-color: #FDF5E6;
    /* Almond Cream */
}

.bg-2 {
    background-color: chocolate;
    /* Beige Blush */
    color: #ffffff;
}

.bg-3 {
    background-color: #FAF0E6;
    /* Linen Mist */
}

.bg-4 {
    background-color: #FFF8E7;
    /* Warm Sand Whisper */
}

.bp-bg-image {
    background-size: cover;
}


.note {
    position: relative;
    min-height: 200px;
    background-color: rgb(39, 39, 29);
    background-image: linear-gradient(to bottom, #fffff1 calc(1em - 1px), #ccc calc(1em - 1px), #ccc 1em, #fff 1em);
    background-position: 0% 1em;
    background-size: 100% 1em;
    background-repeat: repeat-y;
    box-shadow: 5px 5px 25px #111111;
}

.note:hover {
    scale: 1.1;
}

.note-new {
    background-image: linear-gradient(to bottom, #ffffff calc(1em - 1px), #ccc calc(1em - 1px), #ccc 1em, #fff 1em);
}

.note-open {
    background-image: linear-gradient(to bottom, #fafaf2 calc(1em - 1px), #ccc calc(1em - 1px), #ccc 1em, #fff 1em);
}

.note-active {
    background-image: linear-gradient(to bottom, #f2f2fa calc(1em - 1px), #ccc calc(1em - 1px), #ccc 1em, #fff 1em);
}

.note-completed {
    background-image: linear-gradient(to bottom, #f2faf2 calc(1em - 1px), #ccc calc(1em - 1px), #ccc 1em, #fff 1em);
}

.note-board {
    background: url("/Images/Modules/3d/Floor1.jpg") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.bp-pin {
    width: 2.7rem;
    position: absolute;
    z-index: 101;
    top: 0rem;
    right: 0rem;
    font-size: 3rem;
    color: #ff0000;
    overflow: visible;
}

.bp-thumb {
    border: solid #dddddd 0.25rem;
    border-radius: 0.25rem;
}

.bp-thumb:hover {
    zoom: 0.75;
}

.masonry-columns {
    column-count: 4;
    column-gap: 1rem;
}

.masonry-columns>div {
    break-inside: avoid;
}

.bp-img-rounded {
    border: solid 1px #000000;
    box-shadow: 5px 5px 5px #111111;
}

.bp-task-wrapper {
    border-right: solid 0.1em #212121;
}

.bp-task-header {}

.bp-task-children {
    box-shadow: inset 2px 2px 10px #aaaaaa;
    border-top: solid 0.1em #111111;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 1rem;
    scale: 0.8;
}


/* Status Colours */
.sta_new {
    background-color: white;
}

.sta_act {
    background-color: yellow;
}

.sta_sus {
    background-color: red;
}

.sta_don {
    background-color: greenyellow;
}

/* glass */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* for Safari */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: #fff;
    /* Optional: make text visible on dark backgrounds */
}

.text-justify {
    text-align: justify;
    text-align-last: left;
}

.text-shadow {
    text-shadow: 1px 1px 1px #111111;
}

/* Page message */

.page-message {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 100;
    top: 20%;
    background-color: red;
    color: #eeeeee;
    padding: 2rem;
}

.page-message-content {
    font-size: 2rem;
}

/* Close button styling */
.close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background: none;
    border: none;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover {
    color: #fff;
    /* Highlight on hover */
}

/* Edit form */
#edit-form 
{
    max-width : 750px;
}

.highlite {
    color : #007bff;
    font-weight : bolder;
}