html {
    height: 100%;
    font-size: 15px
}

html body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #0079bf;
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

html body .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 10px
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
    margin: 0
}

::-webkit-scrollbar {
    height: 12px;
    width: 8px
}

::-webkit-scrollbar-track:horizontal {
    background: #0067a2;
    border-radius: 4px;
    margin: 0px 20px
}

::-webkit-scrollbar-thumb:horizontal {
    background: #66a3c7;
    border-radius: 4px
}

::-webkit-scrollbar-track:vertical {
    background: #d8dbe2;
    border-radius: 4px;
    margin: 0px 20px
}

::-webkit-scrollbar-thumb:vertical {
    background: #bfc2cd;
    border-radius: 4px
}

.header {
    background-color: rgba(0, 0, 0, .1490196078);
    padding: 10px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #fff
}

.board {
    display: flex;
    padding-top: 40px;
    color: #484848;
    align-items: start;
    overflow-x: auto;
    flex-grow: 1
}

.board::after {
    content: "";
    padding: 10px
}

.list {
    background-color: #f5f5f5;
    border-radius: 3px;
    margin-left: 20px;
    /* padding-bottom: 30px; */
    max-width: 300px;
    min-width: 300px;
    padding-right: 5px
}

.list .list-title {
    padding: 14px 16px;
    padding-right: 36px;
    font-weight: bold
}

.list .list-content {
    padding: 0 14px;
    padding-right: 9px;
    max-height: 75vh;
    overflow-y: auto
}

.card {
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(9, 30, 66, .25)
}

.card .card-cover {
    height: 150px;
    background-position: center center;
    background-size: cover;
    border-radius: 3px 3px 0 0
}

.card .card-content {
    padding: 12px 16px;
    font-size: 14px
}

.card .card-content .label-group {
    display: flex;
    margin-bottom: 10px
}

.card .card-content .label-group .label {
    /* width: 40px;
    height: 7px; */
    border-radius: 5px;
    margin-right: 10px
}

.card .card-content .label-group .label.label-blue {
    background-color: #1c2cab
}

.card .card-content .label-group .label.label-orange {
    background-color: #cb7e13
}

.card .card-content .label-group .label.label-green {
    background-color: #1c874e
}

.card .card-content .label-group .label.label-purple {
    background-color: #ff78cb
}

.card .card-content .card-title {
    margin-bottom: 10px
}

.card .card-content .card-details {
    display: flex;
    align-items: center;
    color: #8a8a8a;
    font-size: 13px
}

.card .card-content .card-details .watching {
    margin-right: 12px
}

.card .card-content .card-details .due-date {
    background-color: #f2d600;
    color: #fff;
    padding: 4px 6px;
    border-radius: 3px;
    margin-right: 12px
}

.card .card-content .card-details .due-date.complete {
    background-color: #61bd4f
}

.card .card-content .card-details .due-date.overdue {
    background-color: #ec9488
}

.card .card-content .card-details .comments {
    margin-right: 12px
}

/*# sourceMappingURL=style.css.map */

   /* Custom scrollbar for activity feed */
        .activity-feed-scroll::-webkit-scrollbar {
            width: 8px;
        }
        .activity-feed-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        .activity-feed-scroll::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        .activity-feed-scroll::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Custom styling for the text editor toolbar icons */
        .toolbar-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .toolbar-icon:hover {
            background-color: #e2e4e6;
        }
        .toolbar-icon.active {
            background-color: #d2d4d6;
        }

        /* Custom styling for the due date "Due soon" badge */
        .due-soon-badge {
            background-color: #ffe4cc; /* Light orange */
            color: #7a5229; /* Darker orange text */
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem; /* text-xs */
            font-weight: 600; /* font-semibold */
            display: inline-block;
        }

        /* Custom styling for the member avatar */
        .member-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #d2d4d6; /* Default gray background */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #172b4d; /* Dark text */
            font-size: 0.875rem; /* text-sm */
        }

        /* Custom styling for activity feed avatars */
        .activity-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #ebecf0; /* Light gray background */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #172b4d;
            font-size: 0.875rem;
            flex-shrink: 0; /* Prevent shrinking in flex container */
        }
        .activity-avatar.hp {
            background-color: #ebecf0; /* Default background */
            color: #172b4d;
        }
        .activity-avatar.mk {
            background-color: #ffe4cc; /* Orangeish background */
            color: #7a5229;
        }
        .activity-avatar.rs {
            background-color: #ebecf0; /* Default background */
            color: #172b4d;
        }
        .label {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.50rem; /* text-sm equivalent */
    font-weight: 500;
    color: white; /* Or a contrasting color */
    display: inline-block; /* To ensure padding works */
    white-space: nowrap; /* Prevent text wrap */
}

/* Define your label colors */
.label-green { background-color: #10B981; } /* Tailwind green-500 */
.label-yellow { background-color: #F59E0B; } /* Tailwind yellow-500 */
.label-red { background-color: #EF4444; }   /* Tailwind red-500 */
.label-blue { background-color: #3B82F6; }  /* Tailwind blue-500 */
.label-purple { background-color: #8B5CF6; } /* Tailwind purple-500 */
.label-orange { background-color: #F97316; } /* Tailwind orange-500 */
/* Add more as needed based on your modal.html color options */

/* Styles for the label color options in the new label form within the modal */
.label-color-option {
    cursor: pointer;
    border: 2px solid transparent; /* Default border */
    transition: border-color 0.2s ease-in-out; /* Smooth transition for hover/selection */
}

/* Style for when a color option is selected */
.label-color-option.selected {
    border-color: #3B82F6; /* Blue border to indicate selection */
}

.mt-30{
    margin-top: 30px;
}

/* In your style.css or similar */
.priority-board-badge {
    /* Basic styling for board card priority badge */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem; /* px-2 py-0.5 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
}

/* Colors for priority */
.priority-board-badge.bg-red-500 { background-color: #ef4444; }
.priority-board-badge.bg-orange-500 { background-color: #f97316; }
.priority-board-badge.bg-yellow-500 { background-color: #eab308; }
.priority-board-badge.bg-green-500 { background-color: #22c55e; }
.priority-board-badge.text-white { color: #ffffff; }
.priority-board-badge.text-gray-800 { color: #1f2937; }


.float-r{float: right;}