@import "reset.css";

@font-face{
    font-family: "Roboto";
    font-display: swap;
    src: url("../fonts/RobotoCondensed.woff2") format("woff2"), url("../fonts/RobotoCondensed.woff") format("woff");
}

@font-face{
    font-family: "mont";
    font-display: swap;
    src: url("../fonts/montserrat.woff2") format("woff2");
}

.all_shadow{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    display: none;
}

.notice_error, .notice_success, .notice_message {
    position: fixed;
    max-width: 350px;
    left: -350px;
    padding: 20px 40px;
    top: 15%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: "mont", serif;
    text-transform: uppercase;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 20;
}

.notice_error p span, .notice_success p span, .notice_message p span{
    font-size: 12px;
}

.notice_error img,
.notice_success img{
    width: 20px;
    margin-right: 7px;
}

.notice_error{
    background: #ffcdcd;
}

.notice_success, .notice_message{
    background: #bfffc3;
}

#door{
    min-height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "mont", serif;
    position: relative;
}

#door form{
    width: 500px;
    background: #fafafa;
    border: 2px solid #f1f1f1;
    min-width: 30%;
    max-width: 90%;
    padding: 30px;
    border-radius: 10px;
    position: relative;
}

.logo_engross{
    position: absolute;
    bottom: 105%;
    left: 50%;
    margin-left: -50px;
    width: 100px;
}

.title_door{
    font-size: 30px;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
}

#door form p{
    margin-top: 15px;
}

#door form p:first-child{
    margin-top: 0;
}

#door form p label{
    font-size: 18px;
    letter-spacing: 1.3px;
}

#door form input[type='text'],
#door form input[type='password']
{
    display: block;
    width: 100%;
    padding: 15px 20px;
    margin-top: 8px;
    border-radius: 5px;
    border: 1px solid #eee;
    font-size: 20px;
    background: #f2f2f2;
}

#door form input[type='password']{
    letter-spacing: 3px;
}

.submit_form{
    text-align: right;
    margin-top: 30px!important;
}

.submit_form input{
    background: #fdfdfd;
    padding: 12px 45px;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 5px;
    color: #000;
    border: 1px solid #000;
    transition: 0.2s ease;
}

.submit_form input:hover{
    background: #000;
    color: #fff;
}


/* -----  РАБОЧАЯ ПАНЕЛЬ  -----*/

main{
    padding: 80px 0 40px;
}

.menu_item{
    position: absolute;
    top: 20px;
    margin-left: 5%;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    padding: 12px 25px;
    border-radius: 20px;
    font-family: "mont", serif;
}

#container{
    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
}

#top_container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#top_container a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 25px;
    background: #eee;
    text-transform: uppercase;
    font-family: "mont", serif;
    color: #000;
    font-size: 16px;
    border-radius: 5px;
    transition: 0.3s ease;
}

#top_container a:hover{
    background: #ccc;
}

#top_container a img{
    width: 20px;
    margin-right: 5px;
}

#top_container h1{
    margin-left: 30px;
    font-family: "mont", serif;
    font-size: 24px;
}

#top_container h1 span{
    color: #2965be;
}

#functions{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

#functions a{
    display: block;
    width: 24%;
    /*background: #f9f9f9;*/
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #aaa;
    color: #000;
    text-decoration: none;
    font-family: "mont", serif;
    font-size: 17px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.hide_func_a{
    padding: 0!important;
    border: none!important;
    margin: 0;
}

#functions a:hover{
    background: #eee;
}

#functions a img{
    display: block;
    width: 40%;
    margin: 0 auto 30px;
}

/* Таблица распределения работников */

#work_diary{
    width: 100%;
    font-family: "mont", serif;
    margin-top: 40px;
}

#dates_diary{
    display: flex;
    justify-content: center;
}

.yesterday, .today{
    width: 200px;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    border: 2px solid #ddd;
    background: #eee;
    color: #aaa;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;;
}

#active_date{
    border: 2px solid #e3b650;
    background: #e3b650;
    color: #fff;
    box-shadow: 0 0 3px 2px #e3b650;
    position: relative;
}

#active_date:before{
    position: absolute;
    top: -25px;
    left: 0;
    color: #999;
    content: 'Выбрано';
    width: 100%;
    text-align: center;
}

.today{
    margin-left: 35px;
}

#table_work_diary{
    margin-top: 30px;
}

.worker_element{
    /*margin-top: 15px;*/
}

.worker_element form{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.diary_name{
    width: 25%;
    border-right: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    padding: 15px 10px;
}

.fill_name_worker{
    background: #eee;
}

.project_diary{
    width: 28%;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

.partic_diary{
    width: 28%;
    border-bottom: 1px solid #aaa;
}

.worker_element:first-child .diary_name,
.worker_element:first-child .partic_diary,
.worker_element:first-child .project_diary,
.worker_element:first-child .sub_diary
{
    border-top: 1px solid #aaa;
}

.partic_diary select, .project_diary select, .sub_diary input{
    width: 100%;
    padding: 15px 10px;
    transition: 0.3s ease;
    cursor: pointer;
}

.partic_diary select:hover, .project_diary select:hover{
    background: #ddd;
}

.fill_project, .fill_participation{
    height: 100%;
    width: 100%;
    background: #eee;
    justify-content: center;
    color: #000;
    align-items: center;
    display: flex;
    padding: 15px 10px;
    text-align: center;
}

.sub_diary{
    width: 19%;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name_ceo_diary, .fill_name_ceo{
    height: 100%;
    width: 100%;
    background: #ddd;
    justify-content: center;
    color: #000;
    align-items: center;
}

.fill_name_ceo{
    display: flex;
}

.name_ceo_diary{
    display: none;
}

.sub_diary .loading{
    width: 35px;
}

.sub_diary input{
    background: #1b64ff;
    display: block;
    height: 100%;
    color: #fff;
    transition: 0.3s ease;
}

.sub_diary input:hover{
    color: #0039cc;
    background: #8bb0ff;
}

/* СПИСОК ПРОЕКТОВ ДЛЯ РУКОВОДЯЩИХ ПРОЕКТОМ */

#project_list_panel{
    margin-top: 50px;
}

.project_panel{
    display: flex;
    color: #000;
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    font-family: "mont", serif;
    transition: 0.2s ease;
    font-size: 17px;
}

.project_panel:first-child{
    background: #f1f1f1;
    border: 1px solid #ccc;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.project_panel:hover{
    background: #f1f1f1;
}

.project_panel p{
    border-left: 1px solid #ccc;
    padding: 20px;
}

.project_panel p:nth-child(1){
    width: 20%;
    border-left: none;
}

.project_panel p:nth-child(2){
    width: 40%;
}

.project_panel p:nth-child(3){
    width: 20%;
}

.project_panel p:nth-child(4){
    width: 20%;
}

.project_panel span{
    display: none;
}

.calc_rp{
    text-align: center;
    margin-top: 50px;
}

.calc_rp a{
    padding: 15px 30px;
    background: #2965be;
    color: #fff;
    font-size: 16px;
    font-family: "mont", serif;
    text-transform: uppercase;
    border-radius: 30px;
    transition: 0.3s ease;
}

.calc_rp a:hover{
    background: #066096;
}

/* Список заявок на расчет */

#list_calculations{
    margin-top: 40px;
}

#application_calculations{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.calculation_element{
    width: 100%;
    display: flex;
    color: #000;
    font-family: "mont", serif;
    transition: 0.2s ease;
    font-size: 18px;
    overflow: hidden;
    border-top: none!important;
}

.calculation_element:first-child{
    background: #f1f1f1;
    border-top: 1px solid #999!important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    text-align: center;
}

.calculation_element:first-child p{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.calculation_element p{
    border: 1px solid #999;
    border-left: none;
    border-top: none;
    padding: 20px 15px;
}

.calculation_element p:nth-child(1){
    width: 20%;
    border-left: 1px solid #999;
}

.calculation_element p:nth-child(2){
    width: 20%;
}

.calculation_element p:nth-child(3){
    width: 40%;
}

.calculation_element p:nth-child(4){
    width: 20%;
}

.calculation_element span{
    display: none;
}

.response_calc{
    background: #f1f1f1;
}

.response_calc:hover{
    background: #ddd;
}

.response_calc_true{
    background: #e3fde3;
}

.response_calc_false{
    background: #ffe8cc;
}

.response_calc_true:hover{
    background: #c9ffc9;
}

.response_calc_false:hover{
    background: #f3c78a;
}

#list_calculations > p{
    text-align: right;
    margin-bottom: 30px;
    margin-top: 50px;
}

.add_new_application, #list_calculations > p a{
    padding: 15px 30px;
    background: #2965be;
    color: #fff;
    font-family: "mont", serif;
    border-radius: 5px;
    cursor: pointer;
}

#list_calculations > p a{
    margin-left: 10px;
}

#add_new_application_form{
    width: 600px;
    display: none;
    max-width: 100%;
    margin: 0 auto;
    font-family: "mont", serif;
}

#add_new_application_form p{
    margin-top: 16px;
}

#add_new_application_form p label{
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
}

#add_new_application_form input[type='text'],
#add_new_application_form textarea,
#add_new_application_form input[type='date']{
    font-size: 17px;
    width: 100%;
    padding: 14px;
    background: #f1f1f1;
    resize: none;
    border-radius: 5px;
}

.add_application_sub{
    text-align: right;
    margin-top: 20px;
}

.add_application_sub input{
    padding: 15px 35px;
    text-transform: uppercase;
    border-radius: 3px;
    color: #fff;
    background: #c01213;
}

/* ----- СТРАНИЦА УПРАВЛЯЮЩИХ -----*/

#container_user{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

#add_user > p{
    text-align: center;
}

.slide_add_user{
    font-family: "mont", serif;
    font-size: 17px;
    text-decoration: underline;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    color: #000;
    transition: 0.3s ease;
}

#add_user_form{
    margin-top: 20px;
    display: none;
}

#add_user_form div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#add_user_form div p{
    display: block;
    width: 32%;
    margin-top: 30px;
}

#add_user_form div p label{
    display: inline-block;
    font-family: "mont", serif;
    font-size: 18px;
}

#add_user_form div:first-child p input,
#add_user_form div:first-child p select{
    padding: 15px;
    font-family: "mont", serif;
    width: 100%;
    margin-top: 5px;
    border: 1px solid #eee;
    font-size: 18px;
    border-radius: 4px;
}

#add_user_form div:first-child p select{
    cursor: pointer;
}

#add_user_form div:last-child p{
    margin: 40px auto 0;
    text-align: center;
}

.loading{
    width: 50px;
    display: none;
}

#add_user_form div:last-child p input[type='submit']{
    padding: 15px 40px;
    font-family: "mont", serif;
    font-size: 20px;
    color: #fff;
    border-radius: 4px;
    background: #1b64ff;
    width: 100%;
}

#list_ceo{
    margin-top: 40px;
    font-family: "mont", serif;
}

#list_ceo section{
    margin-top: 20px;
}

#list_ceo section h2{
    padding: 15px;
    background: #eee;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.user_ceo{
    padding: 25px;
    font-size: 19px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left_user_ceo{
    width: 87%;
}

.left_user_ceo p{
    margin-top: 8px;
}

.left_user_ceo p:first-child{
    margin-top: 0;
}

.rights_ceo_calc a, .super_rp a, .rights_ceo_logistic a{
    padding: 5px 10px;
    margin-left: 10px;
    background: #efefef;
    color: #000;
    border-radius: 4px;
    transition: 0.2s ease;
}

.super_rp, .rights_ceo_logistic{
    margin-top: 18px!important;
}

.rights_ceo_calc a:hover, .super_rp a:hover, .rights_ceo_logistic a:hover{
    background: #ddd;
}

.yes_right_calc, .yes_super_rp, .yes_right_logistic{
    color: #0a790a;
}

.no_right_calc, .no_super_rp, .no_right_logistic{
    color: #b40519;
}

.right_user_ceo p, .super_rp p{
    margin-top: 8px;
}

.right_user_ceo p:first-child, .super_rp p:first-child{
    margin-top: 0;
}

.right_user_ceo p a, .right_user_ceo p span, .super_rp p a, .super_rp p span{
    display: block;
    text-align: center;
    padding: 10px 15px;
    font-size: 17px;
    border-radius: 7px;
    background: #1281c4;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

.right_user_ceo p a:hover, .right_user_ceo p span:hover, .super_rp p a:hover, .super_rp p span:hover{
    background: #066096;
}

/* Форма изменения руководителя */

#form_edit_ceo{
    position: fixed;
    max-height: 80vh;
    overflow-y: scroll;
    top: 50%;
    left: 50%;
    width: 700px;
    max-width: 90%;
    min-width: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    z-index: 11;
    border-radius: 5px;
    display: none;
}

.cont_edit .title_edit{
    padding: 30px;
    text-align: center;
    font-family: "mont", serif;
    background: #f2f2f2;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 18px;
    transition: 0.2s ease;
}

.cont_edit .title_edit:hover{
    background: #ddd;
}

.cont_edit:last-child .title_edit{
    border-bottom: none;
}

.cont_edit > div{
    display: none;
}

.cont_edit > div > div{
    padding: 25px 20px;
    display: flex;
    justify-content: center;
}

.cont_edit > div > div input[type='text'],
.cont_edit > div > div input[type='email'],
.cont_edit > div > div input[type='tel'],
.cont_edit > div > div input[type='password']
{
    padding: 15px 20px;
    border: 1px solid #1111af;
    border-radius: 3px;
    font-size: 18px;
    font-family: "mont", serif;
    color: #1111af;
    width: 100%;
}

.cont_edit > div > div p{
    flex: 1;
}

.cont_edit > div > div input::-webkit-input-placeholder,
.cont_edit > div > div input::placeholder{
    color: #a0a0ff;
}

.cont_edit > div > div input[type='submit']{
    display: flex;
    align-items: center;
    font-family: "mont", serif;
    text-transform: uppercase;
    padding: 15px 35px;
    background: #1111af;
    color: #fff;
    border-radius: 3px;
    margin-left: 10px;
    transition: 0.2s ease;
}

.cont_edit > div > div input[type='submit']:hover{
    background: #000;
}


/* ----- СТРАНИЦА РАБОТНИКОВ ----- */

#container_workers{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

#add_worker > p{
    text-align: center;
}

.slide_add_worker{
    font-family: "mont", serif;
    font-size: 17px;
    text-decoration: underline;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    color: #000;
    transition: 0.3s ease;
}

#add_worker_form{
    margin-top: 20px;
    display: none;
}

#add_worker_form div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#add_worker_form div p{
    display: block;
    width: 32%;
    margin-top: 30px;
}

#add_worker_form div p label{
    display: inline-block;
    font-family: "mont", serif;
    font-size: 18px;
}

#add_worker_form div:first-child p input,
#add_worker_form div:first-child p select{
    padding: 15px;
    font-family: "mont", serif;
    width: 100%;
    margin-top: 5px;
    border: 1px solid #eee;
    font-size: 18px;
    border-radius: 4px;
}

#add_worker_form div:first-child p select{
    cursor: pointer;
}

#add_worker_form div:last-child p{
    margin: 40px auto 0;
    text-align: center;
}

#add_worker_form div:last-child p input[type='submit']{
    padding: 15px 40px;
    font-family: "mont", serif;
    font-size: 20px;
    color: #fff;
    border-radius: 4px;
    background: #1b64ff;
    width: 100%;
}

#list_workers{
    margin-top: 40px;
    font-family: "mont", serif;
}

#list_workers > p{
    margin: 20px 0;
}

#list_workers > p a{
    color: #e75858;
    font-size: 18px;
    font-family: "mont", sans-serif;
}

#list_workers > p a:hover{
    text-decoration: underline;
}

#list_workers h2{
    padding: 15px;
    background: #eee;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.worker{
    padding: 25px;
    font-size: 19px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left_worker{
    width: 87%;
}

.left_worker p{
    margin-top: 8px;
}

.left_worker p:first-child{
    margin-top: 0;
}

.right_worker p{
    margin-top: 8px;
}

.right_worker p:first-child{
    margin-top: 0;
}

.right_worker p a, .right_worker p span{
    display: block;
    text-align: center;
    padding: 10px 15px;
    font-size: 17px;
    border-radius: 7px;
    background: #1281c4;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

.right_worker p a:hover, .right_worker p span:hover{
    background: #066096;
}

/* ----- СТРАНИЦА ПРОЕКТОВ ----- */

#projects_container{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

#projects_list h2{
    text-align: center;
    font-family: "mont", serif;
    font-size: 30px;
}

#projects_list > p{
    margin-top: 20px;
}

#projects_list > p a{
    color: #e75858;
    font-size: 18px;
    font-family: "mont", sans-serif;
}

#projects_list > p a:hover{
    text-decoration: underline;
}

#projects{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 20px;
}

#new_project_div{
    margin-top: 50px;
}

#new_project_div > p{
    text-align: right;
}

.slide_add_project{
    padding: 15px 30px;
    background: #2965be;
    color: #fff;
    font-family: "mont", serif;
    border-radius: 5px;
    cursor: pointer;
}

#add_project_form{
    display: none;
    width: 600px;
    max-width: 100%;
    margin: 40px auto 0;
    font-family: "mont", serif;
}

#add_project_form p{
    margin-top: 20px;
}

#add_project_form label{
    font-size: 20px;
}

#add_project_form input[type='text'],
#add_project_form textarea,
#add_project_form select,
#add_project_form input[type='date']{
    display: block;
    width: 100%;
    border: 1px solid #999;
    padding: 10px;
    margin-top: 3px;
    border-radius: 3px;
    font-size: 19px;
    resize: none;
}

.add_project_sub{
    text-align: right;
    margin-top: 40px!important;
}

.add_project_sub input{
    padding: 15px 30px;
    background: #c01213;
    border-radius: 5px;
    color: #fff;
    font-size: 17px;
}

.project_element{
    display: block;
    color: #000;
    width: 32%;
    margin-left: 1%;
    padding: 30px;
    background: #f1f1f1;
    border: 1px solid #ddd;
    font-family: "mont", serif;
    margin-top: 20px;
    transition: 0.2s ease;
}

.project_element:hover{
    background: #ddd;
}

.title_project{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.description_project{
    margin-bottom: 15px;
}

.description_project span{
    display: block;
    font-weight: bold;
}

.ceo_project span{
    font-weight: bold;
}

/* СТРАНИЦА ПРОЕКТА */

#container_project{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    font-family: "mont", serif;
}

#container_project h1{
    text-align: center;
    font-size: 24px;
}

#information_project section{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 50px;
}

.cont_ip{
    width: 55%;
    padding: 20px;
    margin-right: 20px;
    background: #f3f3f3;
    border-radius: 4px;
}

#information_project h3{
    text-transform: uppercase;
    font-size: 20px;
}

.hide_h3{
    display: none;
}

.elem_info_project{
    margin-top: 24px;
}

.elem_info_project:first-child{
    margin-top: 0;
}

.elem_info_project > div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.elem_info_project > div p span{
    padding: 2px 5px;
    border: 1px solid #aaa;
    background: #eee;
}

.elem_info_project > div p a{
    color: #2965be;
    text-decoration: underline;
}

.bi_item_summ p{
    margin-bottom: 10px;
    margin-top: 5px;
}

.all_summ, .paid_summ{
    position: relative;
}

.all_summ:before{
    position: absolute;
    top: -17px;
    left: 0;
    font-size: 13px;
    display: inline;
}

.paid_summ:before{
    position: absolute;
    top: -17px;
    left: 0;
    font-size: 13px;
    display: inline;
}

.elem_info_project form{
    width: 100%;
    margin-top: 6px;
    display: none;
}

.elem_info_project form input[type='text'],
.elem_info_project form input[type='date'],
.elem_info_project form textarea
{
    padding: 9px 15px;
    resize: none;
    border-radius: 3px;
    width: 65%;
    background: #fff;
    border: 1px solid #aaa;
}

.elem_info_project form textarea{
    height: 150px;
}

.elem_info_project form input[type='submit']{
    width: 30%;
    background: #2965BEFF;
    border-radius: 3px;
    padding: 10px 0;
    color: #fff;
    margin-left: 5px;
}

.edit_proj{
    cursor: pointer;
    margin-left: 10px;
    width: 22px;
}

.add_proj{
    cursor: pointer;
    margin-left: 5px;
    width: 22px;
}

/* ОБЩИЕ ПРАВИЛА ДЛЯ ДОБАВЛЕНИЯ ПОДРЯДЧИКОВ, ЗАКУПОК, ПРИХОДОВ */

.edit_mat, .edit_contr, .edit_rec{
    cursor: pointer;
    width: 200px;
    padding: 10px 20px;
    border-radius: 25px;
    background: #4f97ff;
    display: block;
    text-align: center;
    margin-left: auto;
    color: #fff;
    margin-top: 15px;
}

.plus_payment_mat, .plus_payment_contr, .plus_payment_rec{
    cursor: pointer;
    width: 200px;
    padding: 10px 20px;
    border-radius: 25px;
    background: #4f97ff;
    display: block;
    text-align: center;
    margin-left: auto;
    color: #FFF;
    margin-top: 15px;
}

.delete_mat, .delete_contr, .delete_rec{
    background: #b41414;
    cursor: pointer;
    width: 200px;
    padding: 10px 20px;
    border-radius: 25px;
    display: block;
    text-align: center;
    margin-left: auto;
    color: #FFF;
    margin-top: 55px;
}

/* ДОПОЛНИТЕЛЬНЫЕ СОГЛАШЕНИЯ */

#supple_agreem{
    width: 800px;
    max-width: 90%;
    max-height: 80%;
    position: fixed;
    border-radius: 5px;
    overflow-y: scroll;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 30px;
    z-index: 11;
    font-family: "mont", serif;
    display: none;
}

#supple_agreem > table{
    width: 100%;
    border-collapse: collapse;
}

#supple_agreem > table tr:first-child{
    background: #eee;
}

#supple_agreem > table td{
    border: 1px solid #ccc;
    padding: 8px;
    width: 33%;
}

#supple_agreem table .operations a{
    display: inline-block;
    text-align: center;
    color: #fff;
    padding: 8px;
    background: #2965BEFF;
    width: 45%;
    border-radius: 4px;
    font-size: 13px;
}

#supple_agreem table .operations a:last-child{
    margin-left: 5%;
    background: #b41414;
}

#supple_agreem > p{
    margin-bottom: 30px;
    text-align: right;
}

#supple_agreem > p .open_add_sa{
    padding: 10px 20px;
    border-radius: 4px;
    background: #c9952e;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

#supple_agreem > p .open_add_sa:hover{
    background: #f6b839;
}

#add_supple_agreem{
    margin-bottom: 20px;
    display: none;
}

#edit_supple_agreem{
    margin-top: 30px;
    display: none;
}

#add_supple_agreem > div, #edit_supple_agreem > div{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

#edit_supple_agreem > p{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

#add_supple_agreem div p, #edit_supple_agreem div p{
    width: 35%;
}

#add_supple_agreem .add_agreem_sub, #edit_supple_agreem .edit_agreem_sub{
    width: 20%;
}

#add_supple_agreem p label, #edit_supple_agreem p label{
    display: block;
    margin-bottom: 5px;
}

#add_supple_agreem p input[type='text'],
#edit_supple_agreem p input[type='text']
{
    border: 1px solid #ddd;
    padding: 12px 8px;
    width: 100%;
    border-radius: 4px;
}

#add_supple_agreem .add_agreem_sub input,
#edit_supple_agreem .edit_agreem_sub input
{
    background: #2965BEFF;
    color: #fff;
    width: 100%;
    padding: 12px;
    font-size: 17px;
    border-radius: 4px;
}

/* Форма добавления платежа */

#receiving{
    width: 95%;
    max-height: 90%;
    overflow-y: scroll;
    position: fixed;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 30px;
    z-index: 11;
    font-family: "mont", serif;
    display: none;
}

#receiving > table{
    width: 100%;
    min-width: 700px;
    overflow-x: scroll;
    border-collapse: collapse;
}

#receiving > table tr:first-child{
    background: #eee;
}

#receiving > table td{
    border: 1px solid #ccc;
    padding: 8px;
    width: 24%;
}

#receiving table .operations a{
    width: 40px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    height: 40px;
}

#receiving > p{
    margin-bottom: 30px;
    text-align: right;
}

#receiving > p .open_add_rec{
    padding: 10px 20px;
    border-radius: 4px;
    background: #c9952e;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

#receiving > p .open_add_rec:hover{
    background: #f6b839;
}

#add_form_rec{
    margin-bottom: 20px;
    display: none;
}

#edit_form_rec{
    margin-top: 30px;
    display: none;
}

#add_form_rec > div, #edit_form_rec > div{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

#edit_form_rec > p{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

#add_form_rec div p, #edit_form_rec div p{
    width: 32%;
    margin-top: 5px;
}

#add_form_rec .add_rec_sub, #edit_form_rec .edit_rec_sub{
    width: 20%;
}

#add_form_rec p label, #edit_form_rec p label{
    display: block;
    margin-bottom: 5px;
}

#add_form_rec p input[type='text'],
#edit_form_rec p input[type='text']
{
    border: 1px solid #ddd;
    padding: 12px 8px;
    width: 100%;
    border-radius: 4px;
}

#add_form_rec .add_rec_sub input,
#edit_form_rec .edit_rec_sub input
{
    background: #2965BEFF;
    color: #fff;
    width: 100%;
    padding: 12px;
    font-size: 17px;
    border-radius: 4px;
}



/* Форма добавления подряда */

#contractors{
    width: 95%;
    max-height: 90%;
    overflow-y: scroll;
    position: fixed;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 30px;
    z-index: 11;
    font-family: "mont", serif;
    display: none;
}

#contractors > table{
    width: 100%;
    min-width: 700px;
    overflow-x: scroll;
    border-collapse: collapse;
}

#contractors > table tr:first-child{
    background: #eee;
}

#contractors > table td{
    border: 1px solid #ccc;
    padding: 8px;
    width: 24%;
}

#contractors table .operations a{
    width: 40px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    height: 40px;
}

#contractors > p{
    margin-bottom: 30px;
    text-align: right;
}

#contractors > p .open_add_contr{
    padding: 10px 20px;
    border-radius: 4px;
    background: #c9952e;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

#contractors > p .open_add_contr:hover{
    background: #f6b839;
}

#add_form_contractor{
    margin-bottom: 20px;
    display: none;
}

#edit_form_contractor{
    margin-top: 30px;
    display: none;
}

#add_form_contractor > div, #edit_form_contractor > div{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

#edit_form_contractor > p{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

#add_form_contractor div p, #edit_form_contractor div p{
    width: 32%;
    margin-top: 5px;
}

#add_form_contractor .add_contractor_sub, #edit_form_contractor .edit_contractor_sub{
    width: 20%;
}

#add_form_contractor p label, #edit_form_contractor p label{
    display: block;
    margin-bottom: 5px;
}

#add_form_contractor p input[type='text'],
#edit_form_contractor p input[type='text']
{
    border: 1px solid #ddd;
    padding: 12px 8px;
    width: 100%;
    border-radius: 4px;
}

#add_form_contractor .add_contractor_sub input,
#edit_form_contractor .edit_contractor_sub input
{
    background: #2965BEFF;
    color: #fff;
    width: 100%;
    padding: 12px;
    font-size: 17px;
    border-radius: 4px;
}


/* Форма добавления закупки */

#materials{
    width: 95%;
    max-height: 90%;
    overflow-y: scroll;
    position: fixed;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 30px;
    z-index: 11;
    font-family: "mont", serif;
    display: none;
}

#materials > table{
    width: 100%;
    min-width: 700px;
    overflow-x: scroll;
    border-collapse: collapse;
}

#materials > table tr:first-child{
    background: #eee;
}

#materials > table td{
    border: 1px solid #ccc;
    padding: 8px;
    width: 24%;
}

.plus_materials{
    cursor: pointer;
    width: 200px;
    padding: 10px 20px;
    border-radius: 25px;
    background: #4f97ff;
    display: block;
    text-align: center;
    margin-left: auto;
    color: #FFF;
    margin-top: 15px;
}

#materials table .operations{
    text-align: center;
}

#materials table .operations a{
    width: 40px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    height: 40px;
}

/* Панель заявки */

#material_panel, #receiving_panel, #contractors_panel{
    width: 95%;
    height: 90%;
    overflow-y: scroll;
    position: fixed;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 50px 30px 30px 30px;
    z-index: 12;
    font-family: "mont", serif;
    display: none;
}

#material_panel h4, #receiving_panel h4, #contractors_panel h4{
    text-align: center;
    font-weight: 600;
    font-size: 20px;
}

.instruments_panel{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.instruments_panel p{
    margin: 15px 0;
    padding: 12px;
    border-radius: 25px;
    background: #f2f2f2;
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.instruments_panel p span{
    margin-top: 5px;
    font-weight: bold;
}

/* Конец панели заявки */

#materials > p{
    margin-bottom: 30px;
    text-align: right;
}

#materials > p .open_add_mat{
    padding: 10px 20px;
    border-radius: 4px;
    background: #c9952e;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

#materials > p .open_add_mat:hover{
    background: #f6b839;
}

#add_form_material{
    margin-bottom: 20px;
    display: none;
}

#edit_form_material{
    margin-top: 30px;
    display: none;
}

.plus_payment{
    margin-top: 30px;
}

#plus_payment_material, #plus_payment_contractors, #plus_payment_receiving{
    display: none;
}

#add_form_material > div, #edit_form_material > div, .plus_payment > div{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

#edit_form_material > p, .plus_payment > p{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

#add_form_material div p, #edit_form_material div p, .plus_payment div p{
    width: 32%;
    margin-top: 5px;
}

#add_form_material .add_material_sub, #edit_form_material .edit_material_sub{
    width: 20%;
}

#add_form_material p label, #edit_form_material p label, .plus_payment p label{
    display: block;
    margin-bottom: 5px;
}

#add_form_material p input[type='text'],
#edit_form_material p input[type='text'],
.plus_payment p input[type='text']
{
    border: 1px solid #ddd;
    padding: 12px 8px;
    width: 100%;
    border-radius: 4px;
}

#add_form_material .add_material_sub input,
#edit_form_material .edit_material_sub input,
.plus_payment .payment_sub input
{
    background: #2965BEFF;
    color: #fff;
    width: 100%;
    padding: 12px;
    font-size: 17px;
    border-radius: 4px;
}

#edit_rp_project{
    margin-left: 5%;
    margin-top: 40px;
    font-family: "mont", serif;
}

#edit_rp_project label{
    display: block;
}

#edit_rp_project select{
    padding: 15px 45px;
    background: #f1f1f1;
    transition: 0.2s ease;
    margin-top: 10px;
}

#edit_rp_project select:hover{
    background: #ddd;
}

#edit_rp_project input[type='submit']{
    padding: 10px 20px;
    background: #2965BEFF;
    color: #fff;
    margin-top: 10px;
    border-radius: 4px;
    transition: 0.2s ease;
}

#edit_rp_project input[type='submit']:hover{
    background: #1e56a8;
}


#finish_project{
    margin-left: 5%;
    margin-top: 40px;
}

#finish_project input[type='submit']{
    padding: 16px 45px;
    background: #b70000;
    color: #fff;
    font-family: "mont", serif;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 30px;
    transition: 0.3s ease;
}

#finish_project input[type='submit']:hover{
    background: #790000;
}


/* ПРОСМОТР ПЛАТЕЖЕЙ */

.payments_popup{
    position: fixed;
    display: none;
    right: 0;
    top: 0;
    height: 100%;
    overflow-y: scroll;
    padding: 70px 30px 30px;
    background: #fff;
    width: 100%;
}

.payments_popup > p{
    text-align: center;
    font-size: 17px;
    margin-bottom: 30px;
}

.payments_popup::-webkit-scrollbar {
    width: 2px;
    background-color: #f9f9fd;
}

.payments_popup::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #18aaaa;
}

.payments_popup::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    border-radius: 0;
    background-color: #f9f9fd;
}

.payments_popup > div{
    margin: 0 auto;
    display: none;
    justify-content: space-between;
    max-width: 100%;
}

.payments_popup > div p{
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
    width: 33.3333%;
    padding: 15px;
}

.payments_popup > div p:first-child{
    border-left: 1px solid #aaa;
}

.payments_popup > div p:last-child a{
    color: #9f0000;
    text-transform: uppercase;
    display: block;
    text-align: center;
}

.payments_popup > div:nth-child(3) p{
    border-top: 1px solid #aaa;
}

.close_payment{
    padding: 14px 25px;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #000;
    cursor: pointer;
    border-radius: 30px;
}

.close_form_top{
    display: inline-block;
    background: #ffb4b4;
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    margin-bottom: 15px;
}

/* СТРАНИЦА ОТЧЕТА ПО РАБОТНИКАМ */

#container_reports{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    font-family: "mont", serif;
}

#choice_year{
    position: fixed;
    height: 100%;
    width: 200px;
    background: #fff;
    left: -200px;
    top: 0;
    padding: 20px;
    z-index: 15;
}

#choice_year p{
    margin-top: 20px;
    padding: 15px 5px;
    background: #f2f2f2;
    cursor: pointer;
    font-family: "mont", serif;
    font-size: 20px;
    text-align: center;
    transition: 0.3s ease;
    border-radius: 3px;
}

#choice_year p:hover{
    background: #ffde9d;
}

.active_year{
    background: #f5c981!important;
}

#container_reports h1{
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
}

#container_reports h1 span{
    color: #e3b34a;
    padding-left: 5px;
}

#year_reports{
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 18px;
}

#year_reports p span{
    padding: 5px 10px;
    border: 2px solid #aaa;
    background: #eee;
    font-weight: bold;
    border-radius: 8px;
}

.choice_year{
    background: #f6b839;
    color: #fff;
    margin-left: 20px;
    cursor: pointer;
    padding: 8px 25px;
    border-radius: 8px;
    transition: 0.3s ease;
}

#year_reports form{
    margin-left: 15px;
    max-width: 300px;
}

#year_reports form select{
    width: 100%;
    background: #f6b839;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 8px 25px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.choice_year:hover, #year_reports form select:hover{
    background: #ce941c;
}

.every_days_reports{
    margin-left: auto;
}

.every_days_reports a{
    padding: 8px 20px;
    text-transform: uppercase;
    color: #000;
    font-size: 15px;
    border: 2px solid #000;
    transition: 0.3s ease;
}

.every_days_reports a:hover{
    background: #000;
    color: #fff;
}

#month_reports{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#month_reports a{
    margin-top: 10px;
    text-align: center;
    border-radius: 6px;
    padding: 8px 15px;
    width: 15%;
    display: block;
    background: #5c92ff;
    color: #fff;
    transition: 0.3s ease;
}

#month_reports a:hover{
    background: #0148d5;
}

#table_report{
    margin-top: 35px;
}

#table_report > p{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.titles_table_report{
    display: flex;
    justify-content: space-between;
}

.titles_table_report p{
    width: 25%;
    text-align: center;
    border-left: 1px solid #999;
    padding: 20px 10px;
    border-top: 1px solid #999;
    background: #ddd;
    text-transform: uppercase;
}

.titles_table_report p:last-child{
    border-right: 1px solid #999;
}

.worker_report_tr{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.worker_report_tr p{
    width: 25%;
    padding: 20px 10px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

.worker_report_tr p:last-child{
    border-right: 1px solid #999;
}

.worker_report_tr:nth-child(2) p{
    border-top: 1px solid #999;
}

.name_worker_report a{
    color: #000;
    padding: 5px;
    background: #f2f2f2;
    transition: 0.2s ease;
}

.name_worker_report a:hover{
    background: #ffd482;
}


/* СТРАНИЦА ЕЖЕДНЕВНЫХ ОТЧЕТОВ */

#container_day_report{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    font-family: "mont", serif;
}

#container_day_report h1{
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
}

#container_day_report h1 span{
    color: #e3b34a;
    padding-left: 5px;
}

#overtime_choice{
    position: fixed;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    max-width: 90%;
    padding: 30px;
    z-index: 12;
    display: none;
}

#overtime_form{
    display: flex;
    flex-direction: column;
}

#overtime_form select{
    width: 100%;
    background: #f1f1f1;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    transition: 0.3s ease;
}

#overtime_form select:hover{
    background: #ddd;
}

#overtime_form input[type='submit']{
    width: 100%;
    margin-top: 15px;
    text-align: center;
    background: #2965BEFF;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    text-transform: uppercase;
}

#day_report_form{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;
}

#day_report_form input[type='date']{
    border: 1px solid #aaa;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
}

.submit_day_report{
    margin-left: 10px;
}

.submit_day_report input{
    padding: 8px 12px;
    background: #2965BEFF;
    color: #fff;
    text-transform: uppercase;
    border-radius: 6px;
    transition: 0.3s ease;
}

.submit_day_report input:hover{
    background: #0c4186;
}

#table_day_report{
    margin-top: 35px;
}

.titles_day_report{
    display: flex;
    justify-content: space-between;
}

.titles_day_report p{
    width: 25%;
    text-align: center;
    border-left: 1px solid #999;
    padding: 20px 10px;
    border-top: 1px solid #999;
    background: #ddd;
    text-transform: uppercase;
}

.titles_day_report p:last-child{
    border-right: 1px solid #999;
}

.report_element{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
}

.report_element p{
    width: 25%;
    padding: 20px 10px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

.report_element p:last-child{
    border-right: 1px solid #999;
}

.report_element:nth-child(2) p{
    border-top: 1px solid #999;
}

.report_element p a{
    color: #000;
    padding: 5px;
    background: #f2f2f2;
    transition: 0.2s ease;
}

.report_element p a:hover{
    background: #ffd482;
}

.delete_diary{
    position: absolute;
    width: 36px;
    right: -40px;
    top: 50%;
    transform: translate(0,-50%);
}

.overtime_diary{
    position: absolute;
    width: 36px;
    right: 5px;
    top: 50%;
    transform: translate(0,-50%);
}

.p_new_article_wd{
    margin-top: 50px;
    text-align: center;
    font-size: 20px;
}

#add_article_diary{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#add_article_diary p{
    width: 25%;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
}

#add_article_diary p:nth-child(5){
    border-left: 1px solid #aaa;
}

#add_article_diary p .worker_choice{
    display: block;
    cursor: pointer;
    padding: 20px 10px;
    text-align: center;
    background: #ffeccc;
    text-transform: uppercase;
    transition: 0.3s ease;
    height: 100%;
}

#add_article_diary p .worker_choice:hover{
    background: #eabd62;
}

#add_article_diary p select{
    padding: 20px 10px;
    cursor: pointer;
    width: 100%;
    transition: 0.3s ease;
}

#add_article_diary p select:hover{
    background: #eee;
}

.sub_add_article{
    padding: 20px 10px;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    background: #2965BEFF!important;
    color: #fff;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.sub_add_article:hover{
    background: #16509b!important;
}

#list_workers_choice{
    max-height: 80%;
    max-width: 90%;
    overflow-y: scroll;
    display: none;
    width: 500px;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    z-index: 15;
}

#list_workers_choice .choice_item_worker{
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #eee;
    text-align: center;
    font-size: 19px;
    background: #f2f2f2;
    cursor: pointer;
    transition: 0.3s ease;
}

#list_workers_choice .choice_item_worker:hover{
    background: #ffe1a6;
    border: 1px solid #ffe1a6;
}

/* СТРАНИЦА РАБОТНИКА */

#worker_container{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    font-family: "mont", serif;
}

#worker_container h1{
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
}

#resume_cart{
    width: 550px;
    max-width: 100%;
    margin: 35px auto 0;
    background: #f1f1f1;
    padding: 30px;
}

#resume_cart p{
    margin-top: 15px;
    font-size: 17px;
}

#resume_cart p span{
    background: #ddd;
    padding: 3px 5px;
}

#resume_cart p:first-child{
    margin-top: 0;
}

.statistic{
    margin-top: 30px;
}

.statistic p{
    margin-top: 20px;
    font-size: 17px;
}

.statistic p:first-child{
    margin-top: 0;
}

.statistic p span{
    padding: 6px 15px;
    font-weight: bold;
    background: #f5ca70;
}

#table_diary_worker{
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#table_diary_worker tr:first-child{
    background: #ddd;
    text-align: center;
    text-transform: uppercase;
}

#table_diary_worker td{
    border: 1px solid #aaa;
    padding: 20px 10px;
    width: 33.33%;
}

/* СТРАНИЦА ЗАЯВОК НА РАСЧЕТ */

#container_calculation, #calculations_container{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    font-family: "mont", serif;
}

#container_calculation > p{
    text-align: center;
    text-transform: uppercase;
}

.open_chat{
    font-size: 18px;
    padding: 20px 40px;
    background: #2965BEFF;
    display: inline-block;
    color: #c9deff;
    cursor: pointer;
    border-radius: 30px;
    transition: 0.3s ease;
}

.open_chat:hover{
    color: #2965BEFF;
    background: #c9deff;
}

#container_calculation h1, #calculations_container h1{
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
}

#application_calculations{
    margin-top: 40px;
}

#information_calculation{
    width: 600px;
    max-width: 95%;
    margin: 30px auto 40px;
    padding: 30px;
    background: #f1f1f1;
}

.calculation_info_element{
    margin-top: 15px;
}

.calculation_info_element:first-child{
    margin-top: 0;
}

.calculation_info_element div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.edit_calc_element{
    display: none;
    margin-top: 10px;
}

.edit_calc_element input[type='text']{
    background: #fff;
    padding: 10px;
    width: 65%;
}

.edit_calc_element input[type='submit']{
    width: 30%;
    padding: 10px;
    background: #2965BEFF;
    color: #fff;
}

/* Страница заявок на логистику */

#types_logistics{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
}

#types_logistics a{
    padding: 15px 30px;
    font-size: 18px;
    background: #f1f1f1;
    border-radius: 30px;
    text-align: center;
    transition: 0.3s ease;
}

#types_logistics a{
    margin-right: 15px;
    color: #000;
}

#types_logistics a:hover{
    background: #ddd;
}

#types_logistics a:last-child{
    margin-right: 0;
}

/* Формы добавления заявок на логистику */

#container_logistic{
    width: 90%;
    max-width: 1500px;
    margin: 60px auto 0;
}

.open_form_logistic{
    text-align: right;
}

.open_form_logistic span{
    padding: 15px 35px;
    font-family: 'mont', sans-serif;
    cursor: pointer;
    border-radius: 30px;
    background: #2965BEFF;
    color: #fff;
    transition: 0.3s ease;
}

.open_form_logistic span:hover{
    background: #12499b;
}

.form_logistic{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    font-family: 'mont', sans-serif;
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    background: #fff;
    transform: translate(-50%,-50%);
    padding: 30px;
}

.close_form_logistic{
    text-align: right;
    margin-bottom: 30px;
}

.close_form_logistic span{
    cursor: pointer;
    padding: 10px 20px;
}

.form_logistic h3{
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
}

.form_logistic::-webkit-scrollbar {
    width: 2px;
    background-color: #86b4d9;
}

.form_logistic::-webkit-scrollbar-thumb {
    background-color: #ecf8ff;
}

.form_logistic div{
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form_logistic div > p{
    width: 48%;
    margin-top: 25px;
}

.form_logistic div > p label{
    display: block;
    margin-bottom: 8px;
    padding-left: 10px;
}

.form_logistic h4{
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    position: relative;
}

.form_logistic h4 span{
    padding: 0 15px;
    background: #fff;
    z-index: 2;
    position: relative;
}

.form_logistic h4:before{
    position: absolute;
    width: 100%;
    height: 2px;
    display: block;
    content: '';
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    background: #f5f5f5;
    z-index: 1;
}

.form_logistic div > p input, .form_logistic div > p textarea{
    background: #f5f5f5;
    border: 1px solid #dedede;
    width: 100%;
    border-radius: 35px;
}

.form_logistic div > p input{
    padding: 15px;
}

.form_logistic div > p textarea{
    padding: 20px;
    resize: none;
}

.submit_logistic_form{
    margin-top: 20px!important;
    width: 100%!important;
    text-align: right;
}

.submit_logistic_form input{
    width: auto!important;
    background: #2965BEFF!important;
    color: #fff;
    padding: 15px 40px!important;
    transition: 0.3s ease;
}

.submit_logistic_form input:hover{
    background: #12499b!important;
}

.custom-radio{
    margin-top: 10px;
}

/* для элемента input c type="radio" */
.custom-radio>input {
    position: absolute;
    height: 0;
    width: 0;
    z-index: -1;
    opacity: 0;
}

/* для элемента label связанного с .custom-radio */
.custom-radio>span {
    display: inline-flex;
    align-items: center;
    user-select: none;
}

/* создание в label псевдоэлемента  before со следующими стилями */
.custom-radio>span::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

/* стили при наведении курсора на радио */
.custom-radio>input:not(:disabled):not(:checked)+span:hover::before {
    border-color: #b3d7ff;
}

/* стили для активной радиокнопки (при нажатии на неё) */
.custom-radio>input:not(:disabled):active+span::before {
    background-color: #b3d7ff;
    border-color: #b3d7ff;
}

/* стили для радиокнопки, находящейся в фокусе */
.custom-radio>input:focus+span::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.custom-radio>input:focus:not(:checked)+span::before {
    border-color: #80bdff;
}

/* стили для радиокнопки, находящейся в состоянии checked */
.custom-radio>input:checked+span::before {
    border-color: #0b76ef;
    background-color: #0b76ef;
}

/* стили для радиокнопки, находящейся в состоянии disabled */
.custom-radio>input:disabled+span::before {
    background-color: #e9ecef;
}

/* Список заявок */

#list_logistics{
    margin: 40px 0;
    font-family: 'mont', sans-serif;
}

.line_logistic_table{
    display: flex;
    justify-content: space-between;
    color: #000;
    transition: 0.3s ease;
}

.line_logistic_table:first-child{
    background: #f5f5f5;
    text-align: center;
}

.line_logistic_table:first-child p{
    justify-content: center;
    border-top: 1px solid #aaa;
}

.line_logistic_table p{
    padding: 15px;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

.line_logistic_table p:nth-child(1){
    width: 20%;
}

.line_logistic_table p:nth-child(2){
    width: 35%;
}

.line_logistic_table p:nth-child(3){
    width: 25%;
}

.line_logistic_table p:nth-child(4){
    width: 20%;
    border-right: 1px solid #aaa;
}

/* Страница заявки */

.table_applications{
    margin: 40px 0;
    width: 100%;
    border-collapse: collapse;
}

.table_applications td{
    border: 1px solid #ccc;
    padding: 15px 40px 15px 15px;
    position: relative;
}

.edit_logistic_img{
    width: 20px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 5px;
}

.table_applications tr{
    background: #fcfcfc;
}

.table_applications tr td:first-child{
    width: 30%;
}

.table_applications tr td form{
    display: none;
    width: 100%;
}

.table_applications tr td form input{
    padding: 10px;
    border-radius: 25px;
    margin-top: 10px;
}

.table_applications tr td form input[type='text'],
.table_applications tr td form input[type='date']{
    background: #fff;
    border: 1px solid #ddd;
    margin-right: 10px;
    width: 70%;
    min-width: 150px;
}

.table_applications tr td form input[type='submit']{
    background: #2965be;
    color: #fff;
}

/* ЧАТ */

#chat{
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px 0 0;
    background: #f1f1f1;
    overflow-y: scroll;
    font-family: "mont", serif;
}

#chat::-webkit-scrollbar {
    width: 2px;
    background-color: #f9f9fd;
}

#chat::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #18aaaa;
}

#chat::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    border-radius: 0;
    background-color: #f9f9fd;
}

#messages{
    width: 80%;
    margin: 0 auto 280px;
}

#messages > div{
    width: 70%;
    margin-top: 20px;
}

#messages > div:first-child{
    margin-top: 0;
}

.sender_message{
    margin-left: auto;
}

.date_name_message{
    display: flex;
    justify-content: space-between;
    color: #666;
    padding-right: 5px;
}

.text_message{
    padding: 15px;
    border-radius: 8px;
    margin-top: 4px;
}

.sender_message .text_message{
    background: #bad8ff;
}

.recepient .text_message{
    background: #fff;
}

.file_message{
    margin-top: 10px;
    margin-right: 5px;
}

.file_message a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    margin-left: auto;
    padding: 8px 0;
    width: 100px;
    border-radius: 25px;
    background: #ecba55;
    color: #fff;
    transition: 0.2s ease;
}

.file_message a:hover{
    background: #cea82b;
}

.file_message a img{
    width: 25px;
    margin-right: 4px;
}

.event_message{
    text-align: center;
    color: #888;
    margin-top: 25px;
}

#add_chat_message{
    width: 100%;
    padding: 20px 0;
    position: fixed;
    left: 0;
    bottom: -325px;
    box-sizing: border-box;
    background: #fff;
}

.close_chat{
    position: absolute;
    top: -30px;
    text-align: right;
    right: 30px;
    width: 180px;
}

.close_chat span{
    cursor: pointer;
    text-decoration: underline;
    text-transform: uppercase;
    background: #fff;
    padding: 10px 20px 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#add_message_form{
    width: 90%;
    margin: 0 auto;
}

#add_message_form textarea{
    display: block;
    background: #fff;
    width: 100%;
    padding: 20px;
    border: 1px solid #ddd;
    resize: none;
    font-size: 17px;
    border-radius: 10px;
}

#add_message_form div{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

#add_message_form input[type='submit']{
    background: #2965BEFF;
    color: #fff;
    padding: 14px 30px;
    text-transform: uppercase;
    border-radius: 30px;
}

#add_message_form input[type='file']{
    padding: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
}