/* Purple-and-cyan-theme */
:root {
    color-scheme: dark;
    --color1: #c0bdfc;
    --color2: #8351f0;
    --color3: #c0bdfc;
    --color4: #2f1960;
    --color5: #5f3dbb9c;
    --color6: #605bbf;
    --color7: #433f8b;
    --color8: var(--color1);
    --color9: var(--color2);
    --color10: var(--color6);
    --color11: #000;
    --color12: #2e252e;
    --color13: #646464;
    --color14: #dddddd;
    --color15: #4c289b;
}

/* Aegean blue theme */
/* :root {
    color-scheme: dark;
    --color1: #46d0d9;
    --color2: var(--color1);
    --color3: var(--color1);
    --color4: #2c4157;
    --color5: #1B2938;
    --color6: var(--color4);
    --color7: var(--color1);
    --color8: #81d0df;
    --color9: #39516a;
    --color10: var(--color1);
    --color11: #000;
    --color12: #26252e;
    --color13: #646464;
} */




/* Storm Cloud Purple */
/* :root {
    color-scheme: dark;
    --color1: #8f46d9;
    --color2: var(--color1);
    --color3: var(--color1);
    --color4: #392c57;
    --color5: #261b38;
    --color6: var(--color4);
    --color7: var(--color1);
    --color8: #a981df;
    --color9: #4c396a;
    --color10: var(--color1);
    --color11: #000;
    --color12: #2e252e;
    --color13: #646464;
} */






/* Ocean Breeze theme */
/* :root {
    color-scheme: dark;
    --color1: #38BDF8;
    --color2: var(--color1);
    --color3: var(--color1);
    --color4: #234E63;
    --color5: #112D3A;
    --color6: #234E63;
    --color7: var(--color1);
    --color8: #7DD3FC;
    --color9: #39637B;
    --color10: var(--color1);
    --color11: #000;
} */





/* Dreary teal */
/* :root {
    color-scheme: dark;
    --color1: #7bdced;
    --color2: #5195A8;
    --color3: var(--color1);
    --color4: #417488;
    --color5: #275668;
    --color6: #3c6b7c;
    --color7: var(--color2);
    --color8: #74cae4;
    --color9: #557a8b;
    --color10: var(--color1);
    --color11: #103540;
} */

/* muted teal */
/* :root {
    color-scheme: dark;
    --color1: #79e7fb;
    --color2: #4bc3e4;
    --color3: var(--color1);
    --color4: #417488;
    --color5: #275668;
    --color6: #3c6b7c;
    --color7: var(--color2);
    --color8: #66dafd;
    --color9: #557a8b;
    --color10: var(--color1);
    --color11: #234857;
} */




body, html {
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--color4) !important;
    color: var(--color1) !important;
}
h1 {
    text-align: center;
    font-size: larger;
}
.content {
    margin: 55px auto 0 auto !important;
    max-width: 1200px;
    padding: 12px 5px;
}
.container {
    max-width: none !important;
}
/* .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
} */
/* .row > * {
padding-right: 0 !important;
padding-left: 0 !important;
} */
  
a {
    color: var(--color2);
}
.center-text { text-align: center !important; }

.form-label {
    font-weight: bold !important;
}
.form-control, .form-control:focus, .form-select, .form-select:focus {
    background-color: #26252e !important;
    color: var(--color1) !important;
    border: 1px solid #646464 !important;
}

@media (min-width: 768px) and (max-width: 1000px) {
    .collapse {
        display: none !important;
    }
 }


.description {
    font-size: 1rem !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--color3);
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--color3);
    color: var(--color8);
}
.jumbotron {
    margin-top: 20px !important;
}
.container {
    padding-right: 0;
    padding-left: 0;
}

tr.fw-normal td {
    line-height: 18px !important;
    padding: 10px 5px !important;
}

tbody.stripes tr.fw-normal:nth-child(even) td {
    background-color: var(--color15) !important;
}

tr.fw-normal td a {
    text-decoration: none !important;
}

h4 a {
    color: var(--color1) !important;
}
.p-4 {
    padding: 5px !important;
    background-color: #000 !important;
    /* border: 1px solid var(--color1); */
}
.p-4 table, .p-4 row, .p-4 th, .p-4 td  {
    background-color: var(--color5);
    color: var(--color1);
}
.p-4 table a, .p-4 a {
    color: var(--color8);
}
.p-4 thead tr {
    margin-bottom: 10px !important;
}
.table>thead {
    margin-bottom: 10px !important;
}

.btn-primary {
    background-color: var(--color6) !important;
    color: var(--color1) !important;

    border: 1px solid var(--color1);
}
.btn-primary:hover {
    background-color: var(--color4) !important;
    color: var(--color1) !important;
    border: 1px solid var(--color1);
}
.btn-info {
    background-color: var(--color2) !important;

    border: 1px solid var(--color1) !important;
    color: black !important;
}
a.btn-info {
    color: black !important;
}
.btn-danger {
    background-color: #880000;
}



/* Chosen */
.text-bg-primary {
    background-color: #9069ca !important;
    border: 1px solid #b794eb !important;
}
.text-bg-primary a {
    color: #f0f0f0 !important;
    text-decoration: none !important;
}

/* Backlog */
.text-bg-secondary {
    background-color: #647caf !important;
    border: 1px solid #8ba4dc !important;
}
.text-bg-secondary a {
    color: #f0f0f0 !important;
    text-decoration: none !important;
}

/* Doing */
.text-bg-success {
    background-color: var(--color6) !important;
    border: 1px solid var(--color1) !important;
}
.text-bg-success a {
    color: #f0f0f0 !important;
    text-decoration: none !important;
}

.text-bg-info {
    color: var(--color1) !important;
    background-color: var(--color6) !important;
    border: 1px solid var(--color1) !important;
}
.text-bg-info a {
    color: var(--color1) !important;
    text-decoration: none !important;
}

.text-bg-dark {
    border: 1px solid #f0f0f0 !important;
}
.text-bg-dark a {
    color: #f0f0f0 !important;
    text-decoration: none !important;
}

.container-fluid {
    --bs-gutter-x: 0 !important;
}

nav > .container-fluid {
    max-width: 1200px;
    padding: 0 5px;
}

.navbar {
    background-color: #000000 !important;
    color: var(--color1) !important;
    height: 55px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    /* border-bottom: 1px solid #2d2d2d; */
    box-shadow: #0000002f 0 3px 15px;
}

.navbar-brand {
    color: var(--color1) !important;
    line-height: 1em;
    margin: 0 2px;
    padding: 8px;
}

.navbar form {
    /* height: 24px !important; */
    padding: 30px 10px; line-height: 28px;
}

.navbar-toggler {
    margin-right: 5px;
}

.navbar-toggler-icon {
    background-image: none !important;
    color: var(--color1);
}

.navbar-toggler-icon svg path {
    transform: scale(1.2);
}

li.nav-item {
    list-style: none !important;
}
.nav-link {
    color: var(--color1) !important;
    white-space: nowrap;
}
a.nav-link {
    margin: 0 2px !important;
}

a.nav-link.last {
    padding: 0 5px !important;
    margin: 0 !important
}

.nav-link.btn-secondary {
    background-color: #5c5c5c !important;
    margin: 0 5px;
    border: 1px solid #48448e;
}

.navbar .btn-outline-success {
    border: 1px solid var(--color2) !important;
    color: var(--color2) !important;
}
.navbar .btn-outline-success:hover {
    order: 1px solid var(--color2) !important;
    background-color: var(--color2) !important;
    color: #000 !important;
}

.dropdown-menu {
    background-color: #000;
}
 /* For when the main menu is expanded */
 @media (min-width: 576px) {
    
    .dropdown-menu {
        position: fixed !important;
        top: 55px !important;
        right: 0 !important;
    }
}

/* For when the main menu collapses into the hamburger */
@media (max-width: 575px) {
    a.nav-link {
        margin: 2px 0 !important;
        height: 40px !important;      
    }

    .navbar {
        padding: 0px!important;
    }

    .navbar-collapse {
        background-color: #000000;
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid var(--color1);
        box-shadow: #000000b2 0 10px 20px;
    }

    .navbar-icons {
        flex-direction: row;
    }

    .navbar-icons a.nav-link {
        height: 40px !important;
    }

    .btn-outline-success {
        background-color: black;
        border: 1px solid var(--color1);
    }

}


.card {
    margin: 12px 0;
    background-color: black;
    color: var(--color3) !important;
    border-radius: 0;
    border: 1px solid #aea7bc; 
}
.card.first {
    margin: 0 0 12px 0 !important;
}






.tasks.card {
    margin: 12px 0;
    background-color: #605bbf !important;
    color: var(--color3) !important;
    border: 1px solid #000;
}
.tasks.card.first {
    margin: 0 0 12px 0 !important;
}
.tasks .card-header {
    background-color: var(--color11) !important;
    color: var(--color3);
    padding: 0;
    text-align: center;
}
.tasks .card-header h5 {
    margin: 8px 0 !important;
}
.card-header:first-child {
    border-radius: 0;
}
.tasks .card-body {
    background-color: var(--color11) !important;
    padding: 1px !important;
}
.tasks .table {
    margin-bottom: 0;
}
.task-id {
    color: var(--color14) !important;
}

form {
    margin-bottom: 0 !important;
}



.list-group, .list-group-item {
    background-color: var(--color12) !important;
    color: var(--color8) !important;
    border-color: var(--color13) !important;
}

.comment-text strong {
    color: var(--color1);
}



.attachment-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
}
.delete-attachment {
    text-align: center;
    margin-top: 5px;
}