body,
body * {
    transition: background 0.2s, color 0.1s;
    font-family: Marr Sans;
    font-feature-settings: normal;
    font-style: normal;
}
body{
    overflow: hidden;
}

@font-face{
    font-family: 'Marr Sans';
    src: url(/MarrSans-Regular.woff2) format('woff2');
}

div#board{
    background: #FFFAF3;
}

body.dark {
    color-scheme: dark;
    background: #1D1636;
    color: white;
}

.card {
    max-height: 200px;
    min-height: 130px;
    /* max-width: 120px;     */
    background: #FFFAF3;
    margin: 2px 5px;
    border-radius: 0;
    cursor: pointer;
    transition: border-radius 0.2s;
}

.card-row:first-child .card{
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.card-row:last-child .card{
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.card-row.drag-above::before{
    content: '';
    width: 100%;
    border-top: 1px solid #FD4B14;
    border-radius: 2px;
}

.card-row.drag-below::after{
    content: '';
    width: 100%;
    border-top: 1px solid #FD4B14;
    border-radius: 2px;
}

.card-row.drag-above .card{
    margin: 1px 5px 2px 5px;
}

.card-row.drag-below .card{
    margin: 2px 5px 1px 5px;
}

.issue-name{
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.card .details span {
    font-size: 0.9rem;
    font-weight: lighter;
}

.card .details .ref {
    float: right;
}

.card .details .sprint {
    float: left;
}


    .card.TV {
        border-left: 3px solid #ff3f34;

        i {
            color: #ff3f34
        }
    }

    .issue-modal.TV {
        border-left: 12px solid #ff3f34;
    }

    .issue-modal.TV #type-icon {
        color: #ff3f34;
    }

    i.TV{
        color: #ff3f34;
    }

    .card.Socials {
        border-left: 3px solid #4bcffa;

        i {
            color: #4bcffa
        }
    }

    .issue-modal.Socials {
        border-left: 12px solid #4bcffa;
    }

    .issue-modal.Socials #type-icon {
        color: #4bcffa;
    }

    i.Socials{
        color: #4bcffa;
    }

    .card.Phone {
        border-left: 3px solid #ffd32a;

        i {
            color: #ffd32a
        }
    }

    .issue-modal.Phone {
        border-left: 12px solid #ffd32a;
    }

    .issue-modal.Phone #type-icon {
        color: #ffd32a;
    }

    i.Phone{
        color: #ffd32a;
    }

.card .details {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.icon-button {
    font-family: "Font Awesome 7 Free";
    border-radius: 100%;
    background: #1D1636;
    color: white;
    border: 1px solid black;
    height: 30px;
    width: 30px;
    padding: 0;
}

.icon-button.toggle-darkmode {
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 100;
}

.icon-button.settings {
    position: fixed;
    top: 5px;
    right: 40px;
    font-weight: 900;
    transition: 0.2s;
}

.icon-button.fab{
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: 60px;
    height: 60px;
    font-weight: 900;
    font-size: 1.5rem;
    transition: 0.2s;
}

.icon-button.create {
    font-size: 1.2rem;
}

.icon-button.create:hover{
    transform: scale(1.1);
}

.icon-button.toggle-darkmode::before {
    content: "\f186";
}
.icon-button.settings::before {
    content: "\f013";
}

.icon-button.settings.open{
    transform: rotate(27.5deg);
}

.icon-button.create::before {
    content: "\2b";
}

#modalHolder {
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000a0;
    display: none;
}
#modalHolder.active{
    display: block;
}

#popupHolder {
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000a0;
    display: none;
}
#popupHolder.active{
    display: block;
}

#modal, 
#modal * {
    transition: 0.2s;
}

#modal {
    position: relative;
}

.issue-modal {
    width: 60vw;
    height: 90vh;
    top: 5vh;
    left: 20vw;
    background-color: #d2dae2;
    border-radius: 12px;
    padding: 10px 5px 10px 5px;
}

.settings-modal{
    width: 60vw;
    height: 90vh;
    top: 5vh;
    left: 20vw;
    background-color: #d2dae2;
    border-radius: 12px;
    padding: 10px 5px 10px 5px;
}

.issue-modal .body{
    padding: 20px;
    height: 98%;
}

#modal .container{
    overflow: auto;
    white-space: nowrap;
    height: 94%;
    scrollbar-width: thin;
}

.issue-modal .issue-left,
.issue-modal .issue-right {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.issue-modal .issue-left{
    border-right: 1px solid #1D1636;
}

.issue-modal .value{
    font-size: .9rem;
    font-weight: lighter;
}

.column-select {
    border-radius: 5px;
    padding: 5px;
    background-color: #d2dae2;
}

button.modal-button{
    border-radius: 100%;
    height: 30px;
    width: 30px;
    padding: 0;
    background: none;
    border: 1px solid;
    transition: 0.2s;
    opacity: 0.2;
}

button.modal-button:hover{
    opacity: 1;
}

div.logo{
    padding: 2rem 3rem;
}

.logo img.dark{
    display: none;
}

.dark {

    .logo img.dark{
        display: block;
    }

    .logo img.light{
        display: none;
    }

    .icon-button {
        background: white;
        color: black;
    }

    #board{
        background: #1D1636;
    }

    .toggle-darkmode::before {
        content: "\f185";
    }

    .card {
        color: white;
        background-color: #453d61;
    }

    .list-group-item {
        color: white;
    }

    #modal {
        background-color: #1D1636;
    }

    .column-select {
        background-color: #1D1636;
    }
    
    .issue-modal .issue-left{
        border-right: 1px solid #d2dae2;
    }    
    .list-group,
    .list-group-item {        
        background: #49435C;
    }

    div.popup{
        background-color: #1D1636;
    }

    .drag-col {
        background-color: #FFFAF3;
    }
}

.assignee{
    float: inline-end;
    border-radius: 100%;
    padding: 5px;
    width: 2em;
    height: 2em;
    text-align: center;
    font-weight: bold;
    background: #FD4B14;
}


.drag-col{    
    border-radius: 12px;
    transition: 0.1s;
    background-color: #0000003d;
    border: 2px solid #00000000;
    height: 80vh;
    overflow: auto;
    scrollbar-width: none;
}

.drag-col.invalid-target{
    pointer-events: none;
}

.drag-col.valid-target {
    border: 2px solid #FD4B14;
}

#ghostImage{
    width: 150px;
    position: absolute;
    transform: translateX(-200%);
}

input[type='text'],
input[type='number'] { 
    background: none;
    border-width: 0;
    border-bottom-width: 2px;
    outline: none;
}

.list-group,
.list-group-item {
    background: #ffffff;
}

.list-group{
    width: fit-content;
}

.list-group-item.new{
    display: none;
}

.drag-list{
    width: 90%;
}

.drag-list .list-group-item *:last-child{
    float: right;
}

.drag-list input[type=text] {
    width: 92%;
}

textarea.description {
    background: #FFFAF3;
    border-radius: 5px;    
    width: 100%;
    height: 98%;
    resize: none;
    color: black;
}

.settings-list{
    z-index: 0;
    position: relative;
}

.settings-list li .delete-icon {
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    background: #ff3f34;
    height: 100%;
    top: 0;
    right: 0;
    text-align: center;
    padding-top: 1.25%;
    border-radius: 0 6px 6px 0;
    padding-left: 25px;
    padding-right: 20px;
    transition: 0.6s;
    color: white;
    z-index: -1;
}

.settings-list li .delete-icon::after{
    content: "\f2ed";
}

.settings-list li:hover .delete-icon{
    transform: translateX(53px);
    transition: 0.2s;
}

.drag-handle{
    cursor: pointer;
}

.drag-above::before{
    content: '';
    width: 102%;
    border-top: 1px solid #FD4B14;
    border-radius: 2px;
    position: relative;
    top: 0;
    left: -1%;
}

.drag-below::after{
    content: '';
    width: 102%;
    border-top: 1px solid #FD4B14;
    border-radius: 2px;
    position: relative;
    bottom: 0;
    left: -1%;
}

div.popup{
    z-index: 2;
    width: 350px;
    height: 150px;
    background-color: #d2dae2;
    border-radius: 5px;
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 175px);
}

.createdDate{
    font-size: 0.7rem;
}
.pensionProviders{
    font-size: 0.7rem;
}

table.providers{
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    .center{
        text-align: center;
    }
    
}

table.providers,
table.providers tbody,
table.providers thead,
table.providers tr,
table.providers tr td,
table.providers tr th{
    table-layout: fixed;
}

select.issue-input{
    width: 100%;
}


.col:has(#cFilter){
    margin-top: auto;
}

#cFilter{
    width: 10vw;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
}
#cFilter option{
    color: black;
}