* {
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;    
    outline: none!important;
    box-shadow: none!important;
    scrollbar-width: thin;    
    /* scrollbar-color: #c8d4e6 #00000000; */
}

select option {
    font-family: 'Manrope', sans-serif!important;
}

[name="project-select"], [name="period-select"], [name="status"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

[name="deadline"][value=""] {    
    opacity: 0.25;
}

.is-empty {    
    opacity: 0.1!important;
}

[name="project-select"]:has(option[value=""]:checked), [name="period-select"]:has(option[value=""]:checked) {     
    color: red;
}

a {
    text-decoration: none;
}

.hover:hover {
    background-color: #ebecee52;    
}

#tasks-panel table tr:has(select:hover) {
    /* background-color: red!important; */
}

table {
    border-collapse: collapse!important;
}

.h-1 {
    height: 1px;
}

.w-1 {
    width: 1px;
}

.extrasmall {
    font-size: 0.675em;
}

.pointer {
    cursor: pointer!important;
}

.dashed {
    border-style: dashed!important;
}

.edit-project {
    display: none;
}

.project:hover, .plan:hover {
    background-color: #ebecee;
    cursor: pointer;
}

.project:hover .edit-project {
    display: block;
}

.score-0 {
    background-color: #ebeef1;
    color: #000000;
    border-left: 3px solid #c7c7c7;
}

.score-1 {
    background-color: #ef5350;
    color: #ffffff;
    border-left: 3px solid #b71c1c;
}

.score-2 {
    background-color: #f16967;
    color: #ffffff;
    border-left: 3px solid #b71c1c;
}

.score-3 {
    background-color: #f48481;
    color: #ffffff;
    border-left: 3px solid #b71c1c;
}

.score-4 {
    background-color: #ffc107;
    color: #4a3800;
    border-left: 3px solid #b8860b;
}

.score-5 {
    background-color: #43a047;
    color: #ffffff;
    border-left: 3px solid #1b5e20;
}

.tasks tr td {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

td.title {
    width: 400px; 
    max-width: 400px!important;
}

td.description {
    width: 300px; 
    max-width: 300px!important;
}

td.status {
    width: min-content; 
    max-width: min-content!important; 
}

td.action {
    width: 1px;     
}

.task-badge-new {
    background-color: #c8d4e6;
    color: #000000;
}

.task-badge-todo {
    background-color: #e6d8c8;
    color: #000000;
}

.task-badge-in_progress {
    background-color: #f5e6a3;
    color: #000000;
}

.task-badge-done {
    background-color: #c8e6cf;
    color: #000000;
}



select[data-status="new"] {   
    background-color: #0010f12c; 
    color: #1823bb;
}

select[data-status="todo"] {    
    background-color: #e282042c; 
    color: #a86b1c;
}

select[data-status="in_progress"] {    
    background-color: #d100002c; 
    color: #a51515;
}

select[data-status="done"] {
    background-color: #04bd412c; 
    color: #116e30;
}

#super-modal .modal-dialog {
    position: fixed;
    margin: 0;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%; 
    max-width: 50%;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

#super-modal.show .modal-dialog {
    transform: translateX(0);
}

#super-modal .modal-content {
    height: 100%;
    border-radius: 0;
}

.spinner {	
	animation-name: rotation;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes rotation {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}