.project_wrapper .project_block{
    border-top: 4px solid var(--text-color);
}

.project_wrapper .project_block .block_head{
    padding: 0.5em 0 0 0;
    
}

.project_wrapper .project_block .block_body{
    padding: 0 0 0.5em 0;
}

.project_wrapper .grid{
    gap: 0 1em;
}

.project_block{
    padding-top: 0.5em;
    margin-top: 0.5em; 
    border-top: 4px solid var(--text-color);
}


.dark .project_block{
    color: var(--light-grey);
    border-top: 4px solid var(--light-grey);
}


.project_block .feature_box{
    padding: 10px;
    background: var(--primary-color);
    border-radius: 5px;
}

.project_block .feature_box.highlight{
    background: var(--text-color);
    color: white;
}

.jobs_labels{
    margin-top: 1em;
    border-top: 4px solid var(--text-color);
    padding: 5px 10px;
    display: grid; 
    grid-template-columns: 1fr 80px 80px;
    align-items: center;
    grid-gap: 1em;
}

.jobs_labels p{font-size: 12px;}

.jobs_wrapper{display: block;}

.jobs_wrapper .job_item{
    display: block; 
    width: 100%; 
    margin-bottom: 1em;
    border: 1px solid var(--text-color);
    border-radius: 10px;
    background: white;
    position: relative;
}

.dark .jobs_wrapper .job_item{background: var(--dark-grey2);}

.jobs_wrapper.jobs_check .job_item{
    margin-left: 30px; 
    width: calc(100% - 30px);
}

.jobs_wrapper.jobs_check .job_item .check_job, .list_block .file_item .check_job{
    position: absolute; 
    top: 0; left: -30px; 
    width: 20px; height: 20px; 
    border: 1px solid var(--text-color);
    border-radius: 5px; 
    cursor: pointer; 
}

.jobs_wrapper.jobs_check .job_item .check_job::after, .list_block .file_item  .check_job::after{
    content: "";
    width: 80%; height: 80%; 
    background: var(--primary-color); 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    border-radius: 5px; 
    opacity: 0; 
    transition-duration: 0.25s;
}

.jobs_wrapper.jobs_check .job_item .check_job.checked::after, .list_block .file_item  .check_job.checked::after{
    opacity: 1;
}

.jobs_wrapper .job_item .job_head{
    padding: 10px; 
    display: grid; 
    grid-template-columns: 1fr 80px 80px;
    align-items: center;
    grid-gap: 1em;
    background: #333;
    border-radius: 10px;
}

.jobs_wrapper .job_item .job_head .job_title, .jobs_wrapper .job_item .job_head p.small, .jobs_wrapper .job_item .job_head .job_deadline, .jobs_wrapper .job_item .job_head p.job_headline, .jobs_wrapper .job_item .job_head a{color: white;}
.jobs_wrapper .job_item .job_head .action_button span, .jobs_wrapper .job_item .job_head .expand_button span{color: var(--text-color);}
.jobs_wrapper .job_item .job_head .list_button p.small, .jobs_wrapper .job_item .job_head a.button{color: var(--text-color);}

.jobs_wrapper .job_item .job_head .list_button p.small.dark:hover, .jobs_wrapper .job_item .job_head a.button.dark:hover{color: white;}

.box_2 .jobs_wrapper .job_item .job_head, .box_2 .jobs_wrapper .sub_item .head{
    background: rgba(0,0,0,0.2);
}

a.inline_button{
    width: 20px; height: 20px; 
    background: #CCC; 
    border-radius: 50%; 
    position: relative;
    display: inline-block; 
    border: 1px solid #CCC;
    transition-duration: 0.25s;
    cursor: pointer;
}

a.inline_button:hover{
    background: transparent; 
}

.dark a.inline_button{background: var(--dark-grey); border: 1px solid var(--dark-grey);}

a.inline_button > span{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateY(-50%) translateX(-50%);
    font-size: 12px;
}


.box_2 .jobs_wrapper .job_item{
    background: transparent;
}

.jobs_head{margin-top: 0.5em; padding: 0.5em 0.5em 0 0.5em; border-top: 1px solid var(--text-color); display: grid; grid-gap: 1em;}

.jobs_wrapper .job_item .job_head.extended, .jobs_head.extended{
    grid-template-columns: 1fr 100px 150px 80px 80px;
}

.jobs_wrapper .job_item .job_head.deliverable, .jobs_head.deliverable{
    grid-template-columns: 1fr 80px 150px 150px 150px;
}



.jobs_wrapper .job_item .job_head a.expand_button{display: inline-block; width: 20px; text-align: center; position: relative; transition-duration: 0.25s;}

.jobs_wrapper .job_item .job_head a.expand_button::before{
    content: "";
    width: 20px; height: 20px; 
    background: #DDD;
    border-radius: 50%; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    transition-duration: 0.25s;
}

a.action_button{display: inline-block; width: 20px; text-align: center; position: relative; transition-duration: 0.25s;}

a.action_button::before{
    content: "";
    width: 20px; height: 20px; 
    background: #DDD;
    border-radius: 50%; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    transition-duration: 0.25s;
}


.jobs_wrapper .job_item .job_head a:hover::before{
    background: var(--text-color);
}

.jobs_wrapper .job_item .job_head a:hover span{
    color: white;
}

.jobs_wrapper .job_item .job_head a span{z-index: 1; position: relative;}

.jobs_wrapper .job_item .job_body{
    padding: 10px; 
    
}

.jobs_wrapper .job_item .job_body .job_form{
    display: grid; 
}

.sub_task_wrapper{padding-left: 2em; position: relative;}

/* .sub_task_wrapper::before{
    content: "";
    background: #151515;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 10px;
    width: 2em; height: calc(100% + 10px); 
    position: absolute; 
    top: 0; left: 0; 
    transform: translateX(-10px);
} */

.sub_tasks_form{
    padding: 10px;
}

.sub_tasks_form .grid{}

.jobs_wrapper .sub_item{border: 1px solid var(--text-color);
    border-radius: 10px;
}


.jobs_wrapper .sub_tasks_head, .jobs_wrapper .sub_item .item_form{
    display: none;
}

.sub_tasks_form .sub_tasks_form_grid{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    
}


.sub_tasks_form.new_task{
    display: none;
    padding: 10px;
    border: 1px solid #CCC; 
    border-radius: 10px;
    margin-bottom: 10px;
}



.sub_tasks_form .form_field input[type=text], .sub_tasks_form .form_field input, .total_line .form_field select{padding: 5px; font-size: 14px;}

.total_line, .commission_line_line_wrapper{padding-right: 40px;}

.total_line .form_field{padding: 0; margin: 0;}

.jobs_wrapper p.label{font-size: 12px;}

.jobs_wrapper .sub_tasks_body{border-top: 2px solid var(--text-color); background: #DDD; padding: 5px; margin-bottom: 5px;}

.jobs_wrapper .sub_tasks_head, .jobs_wrapper .sub_item{
    margin-bottom: 10px;
    
}

#net_earnings_total .grid{padding-top: 10px;}

.jobs_wrapper .sub_item{
    background: #f3f3f3;
}


.jobs_wrapper .sub_tasks_head, .jobs_wrapper .sub_item .head{
    display: grid; 
    grid-template-columns: 2fr 1fr 100px;
    align-items: center;
    padding: 10px;
    
    
}

.jobs_wrapper .sub_item .head{
    background: #d7d7d7;
    border-radius: 10px;
}

.dark .jobs_wrapper .sub_item .head{background: var(--dark-grey);}

.jobs_wrapper .sub_item .head .grid{align-items: center;}

.jobs_wrapper .sub_tasks_head, .jobs_wrapper .sub_item .head p{
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.jobs_wrapper .sub_tasks_head, .jobs_wrapper .sub_item .head p span{
    font-size: 16px;
    z-index: 1;
    position: relative;
    transform: translateY(3px);
}

.jobs_wrapper .sub_item .head .sub_detail.nav{text-align: right;}

.jobs_wrapper .sub_item .head p a{
    display: inline-block;
    width: 20px;
    text-align: center;
    position: relative;
    transition-duration: 0.25s;
}

.jobs_wrapper .sub_item .head p a:hover::before{
    background: var(--text-color);
}

.jobs_wrapper .sub_item .head p a:hover{
    color: white;
}

.jobs_wrapper .sub_item .head p a::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #DDD;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    transition-duration: 0.25s;
}

@media(min-width: 840px){
    .jobs_wrapper .job_item .job_body .job_form{
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .jobs_wrapper .job_item .job_body .form_field, .new_line_item .job_body .form_field{grid-column: span 2; padding: 0.5em 0 0 0;}
    .sub_tasks_form .form_field{padding: 0;}
    .jobs_wrapper .job_item .job_body .form_field.half_width{grid-column: span 1; padding: 0;}
    .jobs_wrapper .job_item .job_body .form_field.full_width{grid-column: span 4;}
}




.jobs_wrapper .job_item .job_head p{font-size: 12px;}
.jobs_wrapper .job_item .job_head p span{font-size: 16px; transform: translateY(2px);}

.jobs_wrapper .job_item .job_head h3, .jobs_wrapper .job_item .job_head p{margin: 0; padding: 0;}

.file_block{
    padding: 2em 0 150px 0;
}

.list_block{
    padding: 0.5em 0;
    border-top: 1px solid var(--text-color);
    
}

.dark .list_block{
    border-top: 1px solid var(--light-grey);
}

.list_block.jobs_check{
    margin-left: 30px;
    width: calc(100% - 30px);
    position: relative;
}

.list_block .file_item{
    padding: 5px 0;
    display: grid;
    grid-template-columns: 70px 1fr 155px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    font-size: 0.7em; 
    gap: 1em;
    position: relative;
    overflow-wrap:break-word;
}



.list_block .file_item .item_icon{
    display: block; 
    width: 35px; height: 35px; 
    background-size: cover!important; 
    background-position: center!important;
    border: 1px solid rgba(50,50,50,0.3); 
    border-radius: 5px;
}

.list_block.big_thumb .file_item .item_icon{width: 50px; height: 50px;}

.check_all{
    display: grid; 
    grid-template-columns: 30px 1fr;
    align-items: center;
}

.check_all .check_job{
    width: 20px;
    height: 20px;
    border: 1px solid var(--text-color);
    border-radius: 5px;
    cursor: pointer;
    position: relative; 

}

.check_all .check_job::after{
    content: "";
    width: 80%;
    height: 80%;
    background: var(--primary-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 5px;
    opacity: 0;
    transition-duration: 0.25s;
}

.check_all .check_job.checked::after{
    opacity: 1;
}

.check_all p{transform: translateY(5px);}



@media(min-width: 1200px){
    .project_type_grid{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.total_line{padding: 1em 10px 0 0;}
.total_line .grid_1_1{padding-right: 40px;}

.proposals_grid{
    
    grid-template-columns: 3fr 1fr 2fr;
    grid-gap: 0.5em;
}

.total_line .top_line.double_top_line{
    padding: 10px 0;
}

.payment_schedule{
    padding: 0 0 10px 0;
}

.team_grid{
    grid-template-columns: 2fr 1fr 2fr;
}

.messages_box{
    padding: 10px; 
    border: 1px solid var(--text-color); 
    border-radius: 10px;

}

.message_wrapper{
    padding: 10px; 
    border: 1px solid var(--light-grey); 
    border-radius: 10px;
    height: 200px;
    margin-bottom: 10px;
}

textarea.new_message_input{
    height: 45px; 
    width: calc(100% - 12px);
    min-height: 30px;
    transition: height 0.3s;
    font-size: 12px;
    padding: 5px;
    border-radius: 10px;
}

.new_message_files{
    padding: 10px; 
    border: 1px solid #CCC;
    border-radius: 10px; 
    margin-bottom: 5px; 
    display: none;
}

.new_message_files .file_item, .message_attachments .file_item{
    border-bottom: 1px solid #CCC; 
    padding: 5px 0;

}

.grid_file_item{
    display: grid; 
    grid-template-columns: 40px 1fr 80px;
    align-items: center;
}

.grid_file_item .thumb.thumb_pdf{background: url(../images/backgrounds/format-icon-acrobat.png) no-repeat;}
.grid_file_item .thumb.thumb_doc, .item_icon.icon_doc, .grid_file_item .thumb.thumb_docx, .grid_file_item .thumb.thumb_docx{background: url(../images/backgrounds/format-icon-word.png) no-repeat;}
.grid_file_item .thumb.thumb_zip{background: url(../images/backgrounds/format-icon-zip.png) no-repeat;}
.grid_file_item .thumb.thumb_tar{background: url(../images/backgrounds/format-icon-tar.png) no-repeat;}
.grid_file_item .thumb.thumb_psd{background: url(../images/backgrounds/format-icon-photoshop.png) no-repeat;}
.grid_file_item .thumb.thumb_ai,  .grid_file_item .thumb.thumb_ai, .grid_file_item .thumb.thumb_eps, .grid_file_item .thumb.thumb_eps{background: url(../images/backgrounds/format-icon-illustrator.png) no-repeat;}
.grid_file_item .thumb.thumb_xls, .grid_file_item .thumb.thumb_xlsx{background: url(../images/backgrounds/format-icon-excel.png) no-repeat;}





.grid_file_item .thumb{
    width: 30px; 
    height: 30px; 
    background-size: cover!important; 
    background-position: center!important;
}

.button span.material-symbols-outlined{
    position: relative;
    top: initial; left: initial; transform: initial;
}

.is_editable{
    position: relative;
}

.is_editable .action_button{
    position: absolute; 
    top: 5px; right: 15px;
    transition-duration: 0.25s;
    transform: scale(1);
}

.is_editable .action_button:before{
    border: 1px solid var(--text-color);
    
}

.dark .is_editable .action_button:before{
    border: 1px solid var(--light-grey);
    
}

.is_editable:hover .action_button{
    transform: scale(1.1);
}

.is_editable .action_button span{position: relative; 
    color: var(--text-color);
    font-size: 16px;
    transform: translateY(2px);
    position: relative;
    z-index: 2;
}

.dark .is_editable .action_button span{color: var(--light-grey);}

.list_table{}

.list_table .list_item{
    padding: 5px 0; 
    border-bottom: 1px solid var(--text-color);
}

.user_avatar_name_grid{
    
    grid-template-columns: 45px 1fr;
}

.user_avatar_name_grid .user_avatar{width: 45px; height: 45px; border-radius: 50%;}
.user_avatar_name_grid p{line-height: 1em;}

#confidential_block{padding: 1em 0;}

.agree_form{
    margin: 1em 0;
    padding: 20px; 
    border-radius: 15px; 
    background: white;
}

.dark .agree_form{
    background: var(--text-color);
}

.make_proposal_box{
    padding: 20px; 
    border-radius: 15px; 
    background: white;
    margin: 0 0 10px 0;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
}

.dark .make_proposal_box{
    background: var(--text-color);
}

.form_head{padding-right: 20px;}

.form_head, .invoice_line, .commission_line{
    grid-template-columns: 1fr 80px 80px 90px;
    align-items: end;
        
}

#dashboard .grid .box.box_2, body.dark #dashboard .grid .box.box_2{background: var(--primary-color)!important; color: var(--text-color)!important;}
body.dark #dashboard .grid .box.box_2 h1, body.dark #dashboard .grid .box.box_2 h2, body.dark #dashboard .grid .box.box_2 h3, body.dark #dashboard .grid .box.box_2 h4, body.dark #dashboard .grid .box.box_2 p{color: var(--text-color);}

body.dark #dashboard .grid .box.box_2 .button.button_2{
    color: var(--text-color); 
    border: 2px solid var(--text-color);
}


.invoice_line_wrapper, .commission_line_wrapper{
    position: relative;
    padding-right: 20px;
    margin-bottom: 1px;
    display: grid; 
    grid-template-columns: 1fr 20px;
    align-items: center;
}

.invoice_line_wrapper .delete_item{font-size: 11px; display: block; padding-left: 10px; color: var(--text-color);}

.invoice_line_wrapper .delete_item span{font-size: 14px;}

.invoice_line_wrapper:nth-child(1) .delete_item{display: none;}

.invoice_line{align-items: center;
    background: white;
    border-radius: 5px; 
    overflow: hidden;
}

.invoice_line.no_form{background: rgba(255,255,255,0); border-bottom: 1px solid var(--text-color); border-radius: 0;}

.invoice_line.no_form p.small{padding: 0.5em 0.3em;}



.commission_line.transparent{background: none;}

.commission_line.top_line{padding: 10px 0; border-top: 1px solid var(--text-color); border-radius: 0;}
.top_line.double_top_line{border-top: 4px solid var(--text-color)!important;}




.invoice_line > div{
    border-right: 1px solid var(--light-grey);
}

.invoice_line.no_form > div{border: 0px none;}

.invoice_line > div:last-child{border-right: 0px none;}



.invoice_line input{
    width: calc(100% - 21px); 
    height: 100%;
    background: white;
    border: 0px none;
    padding: 10px; 
    margin: 0;
    text-align: right;
    font-size: 14px;
    color: var(--text-color);
}

.dark .invoice_line input{
    
    color: var(--text-color);
}

.invoice_line input.error{border: 1px solid red;}


.invoice_line input:focus{
    outline: none; /* Removes the default focus outline */
    border: none; /* Removes any border */
}

.invoice_line > div:nth-child(1) input{text-align: left;}

.invoice_line_wrapper h4{padding-bottom: 0!important; margin: 0!important; font-weight: 700;}
.invoice_line_wrapper  .user_avatar_name_grid{
    background: rgba(0,0,0,0.1);
    padding: 10px; 
    margin: 0 0 10px 0; 
    border-radius: 10px; 
    width: calc(100% - 30px);
}

.proposal_item_list{
    margin-bottom: 10px;
}

.total_line .button{margin: 0 2px 4px 0!important; display: inline-block;}

/* textarea.new_message_input:focus{
    height: 180px;
} */