.wrapper{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #F0F2F5;
}

.left .top, .left .center, .left .bottom,
.right .top, .right .center, .right .bottom
{
    padding: 24px;
}
.right .top,  .right .bottom
{
    display: flex;
    gap: 16px;
    padding-left: 0px;
    padding-right: 0px;
}

.panel{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;

}

.panel .left{
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.panel .right{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.panel .left .center, .panel .right .center{
    flex-grow: 1;
}

.panel .right .bottom{
    display: none;
}
.panel .right .center{
    overflow-y: auto;
    padding-left: 0px;
}

.link-group{
margin-bottom: 32px;
}
.link-group a, .link-group span {

}
.link-group span{
    display: block;

}
.link-group a{
    display: block;
    color: #0C7BF4;
    text-decoration: none;
}
.addflybutton{
        border: 1px solid #cbe2cb;
        color: #83a37a;
        cursor: pointer;
        font-size: 14px;
        padding: 0px 12px;
        line-height: 32px;
        display: inline-block;
        border: none;
        border-radius: 50px;
}
.addflybutton:hover{
    background-color: #2893280f;
}

.button, input[type=submit]{
    background-color: #0C7BF4;
    color: #fff;
    cursor: pointer;
    
    font-size: 14px;
    padding: 0px 20px;
    line-height: 40px;
    display: inline-block;
    border-radius: 4px;
    border: none;
}
.button.round{
    border-radius: 30px;
}
.button.small{
    line-height: 30px;
}

.button.iconed{
    padding-left:40px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px;
}


.button.lgreen{
    background-color: #dae2c7;
    color: #424242;
}
.button.lgreen:hover{
    background-color: #cfddae;
}
.button.lgray{
    background-color: #ececec;
    color: #424242;
}

.button.lgray:hover{
    background-color: #e2e2e2;
}
.button.iconed.edit{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %235b5b5b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.27px; %7D .cls-2 %7B fill: rgba(134, 161, 173, 0); %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-2' width='40' height='40'/%3E%3Cg%3E%3Cpath class='cls-1' d='m9.76,30.47l7.45-2.56c.61-.21,1.17-.56,1.63-1.01l9.77-9.77c.62-2.9-3.05-6.86-5.95-5.95l-9.67,9.67c-.52.52-.9,1.17-1.09,1.88-.65,2.36-2.13,7.74-2.13,7.74Z'/%3E%3Cpath class='cls-1' d='m12.95,21.15c3.33.51,5.12,2.5,5.67,5.67'/%3E%3C/g%3E%3C/svg%3E");
}

.button.lred {
    background-color: #f4e3e4;
    color: #c15d5d;
}
.button.lred:hover {
    background-color: #efd7d8;
}
.button.iconed.delete{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23c15d5d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.27px; %7D .cls-2 %7B fill: rgba(134, 161, 173, 0); %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-2' width='40' height='40'/%3E%3Cg%3E%3Cpath class='cls-1' d='m14.2,16.51v12.07c0,.43.35.78.78.78h11.31c.43,0,.78-.35.78-.78v-12.07'/%3E%3Cg%3E%3Cline class='cls-1' x1='18.75' y1='18.39' x2='18.75' y2='25.13'/%3E%3Cline class='cls-1' x1='22.51' y1='18.39' x2='22.51' y2='25.13'/%3E%3C/g%3E%3Cline class='cls-1' x1='11.78' y1='13.22' x2='29.49' y2='13.22'/%3E%3Cline class='cls-1' x1='17.74' y1='10.24' x2='23.53' y2='10.24'/%3E%3C/g%3E%3C/svg%3E");
}

.fr{
    float: right;
}
.popup_view .action{
    margin-top: 30px;
}
/******************************************************************
/* Placeholders  */

.float-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.float-wrapper input {
    padding: 10px;
    border: 1px solid #ccc;
    width: 250px;
}
.float-label {
    position: absolute;
    left: 10px;
    top: 10px;
    color: #777;
    transition: 0.2s;
    pointer-events: none;
}
.float-wrapper.focused .float-label,
.float-wrapper:not(.empty) .float-label {
    top: -18px;
    left: -6px;
    font-size: 11px;
    color: #a3a3a3;
    padding: 0px 7px;
    border-radius: 4px;
    font-family: 'Inter regular';
}

/**********************************************/

.droplist{
    background-color: #fff;
    margin-bottom: 16px;
    border-radius: 8px;
}
/***********************************************/
.boxlink_wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 32px;
}
.boxlink{
    display: flex;
    width: 220px;
    height: 220px;
    background-color: #fff;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    box-sizing: border-box;
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    background-position: 32px 32px;
    background-size: 48px;
    background-repeat: no-repeat;
}

.boxlink.materials{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Cg%3E%3Cpolyline class='cls-2' points='1.95 16.1 1.95 30.1 9.21 30.1'/%3E%3Cpolyline class='cls-2' points='11.32 1.9 1.95 1.9 1.95 16.1 9.14 16.1'/%3E%3Cpolyline class='cls-2' points='20.66 1.9 11.32 1.9 11.32 9.29'/%3E%3Cpolyline class='cls-2' points='30.01 9.29 30.01 1.9 20.66 1.9 20.66 9.29'/%3E%3Cg%3E%3Crect class='cls-2' x='9.21' y='9.29' width='20.81' height='20.81'/%3E%3Cg%3E%3Crect x='11.32' y='11.55' width='1.64' height='1.64'/%3E%3Crect x='11.32' y='18.87' width='1.64' height='1.64'/%3E%3Crect x='11.32' y='26.2' width='1.64' height='1.64'/%3E%3Crect x='18.79' y='11.55' width='1.64' height='1.64'/%3E%3Crect x='26.26' y='11.55' width='1.64' height='1.64'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.boxlink.staff{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Cg%3E%3Cg%3E%3Ccircle class='cls-2' cx='20.92' cy='4.65' r='2.81'/%3E%3Cpath class='cls-2' d='m17.72,20.47h-.89c-1.49,0-2.7-1.21-2.7-2.7v-5.74c0-1.02.83-1.85,1.85-1.85h4.93'/%3E%3Cpath class='cls-2' d='m19.42,30.16h-.03c-.83,0-1.5-.67-1.5-1.5v-8.19'/%3E%3Cpath class='cls-2' d='m23.88,20.47h1.06c1.49,0,2.7-1.21,2.7-2.7v-5.74c0-1.02-.83-1.85-1.85-1.85h-4.93'/%3E%3Cpath class='cls-2' d='m22.35,30.16h.03c.83,0,1.5-.67,1.5-1.5v-8.19'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-2' cx='10.4' cy='5.94' r='2.45'/%3E%3Cpath class='cls-2' d='m7.76,20.48h-1.06c-1.3,0-2.35-1.05-2.35-2.35v-5c0-.89.72-1.62,1.62-1.62h4.82'/%3E%3Cpath class='cls-2' d='m9.1,28.92h-.03c-.72,0-1.31-.58-1.31-1.31v-7.13'/%3E%3Cpath class='cls-2' d='m11.71,28.92h.03c.72,0,1.31-.58,1.31-1.31v-5.02'/%3E%3C/g%3E%3Cline class='cls-2' x1='11.73' y1='28.92' x2='9.1' y2='28.92'/%3E%3Cline class='cls-2' x1='22.35' y1='30.16' x2='19.42' y2='30.16'/%3E%3Cline class='cls-2' x1='7.76' y1='20.48' x2='7.76' y2='16.52'/%3E%3Cline class='cls-2' x1='17.89' y1='20.47' x2='17.89' y2='15.48'/%3E%3Cline class='cls-2' x1='23.88' y1='20.47' x2='23.88' y2='15.48'/%3E%3C/g%3E%3C/svg%3E");
}
.boxlink.contactor{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Cg%3E%3Cpath class='cls-2' d='m22.02,14.39c0,3.32-2.69,6.02-6.02,6.02s-6.02-2.69-6.02-6.02'/%3E%3Cline class='cls-2' x1='9.98' y1='14.39' x2='9.98' y2='11.02'/%3E%3Cline class='cls-2' x1='22.02' y1='14.39' x2='22.02' y2='11.02'/%3E%3Cpath class='cls-2' d='m18.39,3.3c2.45.9,4.25,3.16,4.49,5.86'/%3E%3Cpath class='cls-2' d='m9.12,9.17c.24-2.7,2.04-4.96,4.49-5.86'/%3E%3Cpath class='cls-2' d='m13.61,6.24v-3.64c0-.36.29-.65.65-.65h3.49c.36,0,.65.29.65.65v3.64'/%3E%3Cpath class='cls-2' d='m12.52,21.38c.26-.57.41-1.13.45-1.7'/%3E%3Cpath class='cls-2' d='m16,26.06c-1.58-.45-2.74-1.66-3.48-3.6'/%3E%3Cpath class='cls-2' d='m4.21,30.34c0-6.68,2.5-8.08,8.31-8.96'/%3E%3Cpath class='cls-2' d='m19.48,21.38c-.26-.57-.41-1.13-.45-1.7'/%3E%3Cpath class='cls-2' d='m16,26.06c1.58-.45,2.74-1.66,3.48-3.6'/%3E%3Cpath class='cls-2' d='m4.21,30.34h23.58c0-6.68-2.5-8.08-8.31-8.96'/%3E%3Cline class='cls-2' x1='11.36' y1='30.34' x2='11.36' y2='29.05'/%3E%3Cline class='cls-2' x1='21.6' y1='30.34' x2='21.6' y2='29.05'/%3E%3Cline class='cls-2' x1='7.88' y1='11.02' x2='24.12' y2='11.02'/%3E%3Cline class='cls-2' x1='22.88' y1='9.17' x2='22.88' y2='11.02'/%3E%3Cline class='cls-2' x1='9.12' y1='9.17' x2='9.12' y2='11.02'/%3E%3C/g%3E%3C/svg%3E");
}
.boxlink.clients{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Ccircle class='cls-2' cx='12.89' cy='19.1' r='7.27'/%3E%3Cpath class='cls-2' d='m23.46,14.12c.71,1.51,1.11,3.2,1.11,4.98,0,6.45-5.23,11.68-11.68,11.68S1.22,25.55,1.22,19.1,6.45,7.42,12.89,7.42c1.9,0,3.69.45,5.27,1.25'/%3E%3Cpath class='cls-2' d='m7.63,24.11c.68-1.42,2.03-2.39,3.68-2.76'/%3E%3Cpath class='cls-2' d='m14.48,21.35c1.65.37,3,1.34,3.68,2.76'/%3E%3Ccircle class='cls-2' cx='12.89' cy='18.72' r='3.07'/%3E%3Cline class='cls-2' x1='18.16' y1='13.83' x2='23.87' y2='8.13'/%3E%3Cline class='cls-2' x1='23.82' y1='8.18' x2='23.82' y2='4.71'/%3E%3Cline class='cls-2' x1='27.3' y1='4.69' x2='27.3' y2='1.22'/%3E%3Cline class='cls-2' x1='23.82' y1='4.71' x2='27.3' y2='1.23'/%3E%3Cline class='cls-2' x1='23.83' y1='8.19' x2='27.3' y2='8.19'/%3E%3Cline class='cls-2' x1='27.31' y1='4.7' x2='30.78' y2='4.7'/%3E%3Cline class='cls-2' x1='27.3' y1='8.19' x2='30.78' y2='4.7'/%3E%3C/svg%3E");
}
.boxlink.estimate{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Cg%3E%3Cpath class='cls-2' d='m18.98,29.33H5.06c-1.78,0-3.23-1.45-3.23-3.23V8.2c0-1.78,1.45-3.23,3.23-3.23h10.86c1.78,0,3.23,1.45,3.23,3.23v6.72'/%3E%3Crect class='cls-2' x='5.24' y='8.37' width='10.51' height='4.52' rx='.84' ry='.84'/%3E%3Cline class='cls-2' x1='5.52' y1='16.88' x2='6.39' y2='16.88'/%3E%3Cline class='cls-2' x1='10.06' y1='16.88' x2='10.93' y2='16.88'/%3E%3Cline class='cls-2' x1='5.52' y1='20.85' x2='6.39' y2='20.85'/%3E%3Cline class='cls-2' x1='10.06' y1='20.85' x2='10.93' y2='20.85'/%3E%3Cline class='cls-2' x1='5.52' y1='24.82' x2='6.39' y2='24.82'/%3E%3Cline class='cls-2' x1='10.06' y1='24.82' x2='10.93' y2='24.82'/%3E%3Ccircle class='cls-2' cx='22.77' cy='22.37' r='7.93'/%3E%3Cg%3E%3Cline class='cls-2' x1='21.69' y1='17.98' x2='21.69' y2='26.44'/%3E%3Cg%3E%3Cpath class='cls-2' d='m23.71,17.98c1.15,0,2.08.93,2.08,2.08s-.93,2.08-2.08,2.08'/%3E%3Cline class='cls-2' x1='23.71' y1='17.98' x2='21.69' y2='17.98'/%3E%3Cline class='cls-2' x1='23.71' y1='22.15' x2='21.69' y2='22.15'/%3E%3C/g%3E%3Cline class='cls-2' x1='20.41' y1='24.8' x2='24.01' y2='24.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.boxlink.docs{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Cg%3E%3Cpolyline class='cls-2' points='20.65 2.11 5.04 2.11 5.04 29.89 26.96 29.89 26.96 8.41'/%3E%3Cline class='cls-2' x1='20.65' y1='2.11' x2='26.96' y2='8.41'/%3E%3Cline class='cls-2' x1='20.65' y1='2.11' x2='20.65' y2='8.41'/%3E%3Cline class='cls-2' x1='26.96' y1='8.41' x2='20.65' y2='8.41'/%3E%3Cg%3E%3Cpolyline class='cls-2' points='19.21 17.73 23.2 19.89 16 23.79 8.8 19.89 12.79 17.73'/%3E%3Cpolygon class='cls-2' points='23.2 15.58 16 19.47 8.8 15.58 16 11.68 23.2 15.58'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.boxlink span:nth-child(1), .boxlink span:nth-child(2){
    font-size: 13px;
    line-height: 21px;
    font-family: 'Inter Regular';
    color: #8f8f8f;
}
.boxlink span:nth-child(1) b, .boxlink span:nth-child(2) b{
    color: #313131;
}
.boxlink span:nth-child(3){
    font-size: 22px;
    margin-top: 8px;

}


.right .top a{
    font-size: 14px;
    font-family: 'inter Regular';
    color: #383838;
    text-decoration: none;
    border: 1px solid #e0e0e000;
    padding: 0px 12px;
    border-radius: 33px;
    line-height: 32px;
    display: inline-block;
    
}
.right .top a:hover{
    color: #000000;
    border: 1px solid #e0e0e0;
    background-color:#00000005;
}
.right .top a.set{
    background-color: #0C7BF4;
    border-color: #0C7BF4;
    color: #fff;
}
/***************************************************************/

.content_section{
    background-color: #E2E7EB;
    padding: 20px;
    padding-left: 50px;
    margin-bottom: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.content_subsection{
    background-color: #F0F2F5;
    padding: 20px;
    padding-left: 50px;
    margin-bottom: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.content_job{
    background-color: #FFFFFF;
    padding: 20px;
    padding-left: 50px;
    margin-bottom: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.addsection{
    background-color: #465f7217;
    border-radius: 50px;
    color:rgba(0,0,0,.5);
}
.addsubsection{
    background-color: #465f7217;
    border-radius: 50px;
    color:rgba(0,0,0,.5);
}
.addjob{
    background-color: #465f7217;
    border-radius: 50px;
    color:rgba(0,0,0,.5);
}
.addresource{
    background-color: transparent;
    color: rgba(0, 0, 0, .5);
    border: 1px solid #E2E7EB;
    font-size: 12px;
    line-height: 32px;
    padding: 0px 16px;
    margin-right: 4px;
}
.addresource:hover{
    color: rgba(0, 0, 0, .55);
    border: 1px solid #d3dbe0;
    background-color: rgba(0, 0, 0, .01);
}
.content_section .title{
    line-height: 40px;
}
.content_section.white{
    background-color: #fff;
}
.content_section input[type=text]{
    background: transparent;
    border: none;
    font-size: 24px;
    
}
.content_section input[type=text]:focus{
    background: rgba(255,255,255,.3);
    border: none;
}
.content_subsection input[type=text]{
    background: transparent;
    border: none;
    font-size: 20px;
}
.content_subsection input[type=text]:focus{
    background: rgba(255,255,255,.3);
    border: none;
}
.content_job input[type=text]{
    background: transparent;
    border: none;
    font-size: 17px;
}
.content_job input[type=text]:focus{
    background: rgba(255,255,255,.3);
    border: none;
}


.slideupdownblock{
    padding-top: 10px;
}
.slideupdown{
    content: "";
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke: %231c1c1b; stroke-miterlimit: 10; stroke-width: 1.5px; %7D .cls-1, .cls-2 %7B fill: none; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-2' width='40' height='40'/%3E%3Cpolyline class='cls-1' points='25.74 17.13 20 22.87 14.26 17.13'/%3E%3C/svg%3E");
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    margin-left: -40px;
    transition-duration: .1s;
}
.slideupdown.collapse{
    transform: rotateZ(-90deg);

}
/***************************************************/

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 25px;
    column-gap: 10px;
  }
  
.grid .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
.grid  .item.col2 {
    grid-column: span 2; /* занимает 2 колонки */
  }
  .grid  .item.col3 {
    grid-column: span 3; /* занимает 3 колонки */
  }

.content_section .title{
    font-size: 24px;

}
.table-grid{
    display: grid;
    gap: 0px;
}
.dropblock .table-grid{
    margin-left: -30px;
    margin-top: 16px;
}
.table-grid div{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 28px;
    border-top: 1px solid #0000000f;
    font-family: 'Inter Regular';
    font-size: 15px;
}
.table-grid div>span{
    display: flex    ;
        align-content: flex-start;
        flex-wrap: nowrap;
        height: 100%;
        flex-direction: column;
        justify-content: center;
}
.table-grid.col4{ grid-template-columns: repeat(4, 1fr); }

.table-row {
    display: contents;
    
}
.table-row:hover div {
    background-color: #1a138007;
    cursor: pointer;
}

.table-grid .small{
    font-size: 12px;
    color: #00000085;
}

.view_title {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 20px;
}

.view_title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #00000017;
    margin-left: 15px;
}

.empty{
    color: #3aa7a7;
    font-family: 'Inter Regular';
}

.popup_view table{
    font-size: 15px;
    line-height: 24px;
    font-family: 'Inter Regular';
    color: #000000b0;
}
.popup_view a{
    color: #0C7BF4;
    text-decoration: none;
}
.popup_view a:hover{
    text-decoration: underline;
}
.popup_view table td{
    padding-right: 24px;
}
/***************************************************************/
.table_estimate{
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    width: 100%;
    border-collapse: collapse;

}
.table_estimate thead {
    border: 1px solid #dee2e6;
}

.table_estimate thead th {
    text-align: left;
    border-right: 1px solid #dee2e6;
    background-color: #f7f7f7;
    font-weight: normal;
    font-family: 'Inter-Regular';
    font-size: 14px;
    color: #727272;
    padding: 5px 10px;
}
.table_estimate tbody td {
    text-align: left;
    border-right: 1px solid #dee2e6;
    background-color: #f7f7f7;
    font-weight: normal;
    font-family: 'Inter-Regular';
    font-size: 14px;
    color: #727272;
    padding: 0px;
}
.table_estimate tbody td.fix {
    font-size: 14px;
    padding: 5px;
    line-height: 14px;
    height: auto;
    white-space: nowrap;
}

.table_estimate input[type=text]{
    font-size: 14px;
    padding: 5px;
    line-height: 14px;
    height: auto;
}

.droppanel{
    position: absolute;
    padding: 40px;
    width: 40%;
    color: #fff;
    box-sizing: border-box;
    right: 0px;
    top: 0px;
    bottom: 0px;
    -webkit-box-shadow: -45px 0px 155px 16px rgb(31 43 72 / 47%);
    -moz-box-shadow:    -45px 0px 155px 16px rgba(31, 43, 72, 0.47);
    
    background-color: #1f2b48;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}

.droppanel .title{
    margin-bottom: 16px;
    opacity: .3;
    font-family: 'Inter-Regular';
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}
.droppanel .search input[type=text]{
    background: transparent;
    border: 1px solid #ffffff1f;
    background-color: #00000021;
    color: #fff;
    font-size: 22px;
    height: 48px;
    padding-left: 48px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_Слой_1' data-name='Слой 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.23 28.23'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; %7D %3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='11.39' cy='11.39' r='9.39'/%3E%3Cline class='cls-1' x1='18.53' y1='18.53' x2='26.23' y2='26.23'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 15px center;
}
    
.droppanel .list{
    
} 

.droppanel .list>div{
    font-family: 'Inter-Regular';
    background-color: rgba(255, 255, 255, .1);
    padding: 8px 12px;
    border-bottom: 1px solid #ffffff0f;
    cursor: pointer;
    color: #ffffff73;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
}
.droppanel .list>div:hover{
    background-color: rgb(255 255 255 / 15%);
}

.droppanel .list div span{
    color: #d5e621;
    font-family: 'Inter-Medium';
}
/*******************************************************/

.radiobutton {
    display: none;
}
.radiobutton + label {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #00000008;
    cursor: pointer;
    line-height: 32px;
    padding: 0px 16px;
    border-radius: 30px;
    color: #0000008f;
    white-space: nowrap;
}
.radiobutton:checked + label{
    background: #f0df2a;
    color: #000000e0;
}

.radiobutton.err + label{
    background-color: #efd5d5;
    color: #902626;
}
/*****/

.custradio + label {
    display: block;
    margin: 5px 0;
    padding: 5px 5px 5px 30px;
    cursor: pointer;
    position: relative;
    color: #0000008f;
    font-size: 15px;
}

.custradio {
    display: none;
}

.custradio + label::before {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #00000026;
    border-radius: 50%;
    background: #00000008;
}

.custradio:checked + label {
    color: #000000e0;
}

.custradio:checked + label::before {
    background: #f0df2a;
    border-color: #f0df2a;
    border: 1px solid #0000001a;
}

.custradio:checked + label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: #3e3e3ec9;
    border-radius: 50%;
}

.custradio.err + label {
    color: #902626;
}
.custradio.err + label::before {
    background-color: #efd5d5;
}
/******/

.form_title{
    font-size: 16px;
    color: #000;
    margin: 16px 0px;
}
/***************************************************************/
.content_wrapper{
    background-color: #E2E7EB;
    border-radius: 10px;
    padding: 20px;
}
.content_table{
    margin-top: 20px;
    width: 100%;
    font-size: 14px;
    font-family: 'Inter-Regular';
    border-spacing: 0px;
    border-collapse: collapse;
}
.content_table thead tr{
    background-color: #F0F2F5;
}

.content_table tbody tr{
    background-color: #fff;
    border-bottom: 1px solid #e3e6e9;
}

.content_table tbody tr.new{
    background-color: #bdf5de;
}
.content_table td{
    padding: 20px 30px;
}

/***********************************************/
/* POPUP ***************************************/
/***********************************************/

.popup-wrapper{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	bottom:0px;
	right:0px;
	left:0px;
	background-color: rgb(36 56 77 / 50%);
	z-index:2000;
	display:none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.popup-holder{
	width:100%;
	height:100%;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	perspective: 500px;
	-webkit-perspective: 500px;
}
.popup{
	background-color:#f8f8f9;
	display:inline-block;
	width:700px;
	
	opacity:0;
	transform:scale(.3);
	transition-duration:.2s;
	overflow: auto;
    border-radius: 10px;
}

.popup-wrapper .popup-scroller {
	max-height: 100vh;
	overflow: auto;
}

.popup-wrapper.show .popup{
	margin-top:0px;
	transform:  scale(1);
	opacity:1;

}
.popup-wrapper .close{
    display: flex;
    float: right;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: relative;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    margin-right: 28px;
	
}
.popup-wrapper .close:hover div{
	background-color:#000;
}
.popup-wrapper .close div{
	width: 24px;
    height: 3px;
    border-radius: 5px;
    position: absolute;
	background-color:#1960fa;
	transition-duration:.3s;
}
.popup-wrapper .close div:nth-child(1) {
    transform: rotate(45deg);

}
.popup-wrapper .close div:nth-child(2) {
    transform: rotate(-45deg);

}
.popup-wrapper .popup-content{
	text-align:left;
    padding: 40px;
}

.popup-wrapper .title{
    font-size: 20px;
    margin-bottom: 30px;
}
.popup-wrapper .title.big{
    font-size: 32px;
    line-height: 34px;
}

.mt1{
    margin-top: 24px;
}



.tags{
    font-size: 15px;
    color: #000000a1;
    border: 1px solid #0000001f;
    border-radius: 5px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}
.tags .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #0000001f;
    padding-bottom: 10px;
    font-size: 16px;
    color: #000;
}

.tags.edit .header .icon{
    display: none;
}
.tags.select .header .icon{
    display: inline-block;
}

.tags.edit .header .button{
    display: inline-block;
}
.tags.select .header .button{
    display: none;
}

.tags.select .icon.color, .tags.select .icon.pictogram, .tags.select .icon.delete{
    display: none;
}
.tags.edit .icon.color, .tags.edit .icon.pictogram, .tags.edit .icon.delete{
    display: block;
}
.tags.edit .item_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.tags.edit .item_box{
    border-bottom: 1px solid #0000001f;
}
.tags.edit .item_box:last-child{
    border: none;
}
.tags.select .list{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.tags .list {
    margin-top: 10px;;
}
.tags .list .item{
    line-height: 25px;
    margin: 10px;
    border-radius: 31px;
    padding-left: 25px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    padding-right: 10px;
    font-family: 'Inter-Medium';
    background-size: 17px;
    background-position: 5px center;
    background-repeat: no-repeat;
}
.tags.select .list .item{
    cursor:pointer;
}
.tags .list .action{
    display: flex;
    align-items: center;
}
.tags .list .action .icon{
    margin-left: 10px;
}

.tags .icon.color{
    opacity: 1;
}
.tags .icon.pictogram{
    opacity: 1;
}

.tags .icon.pictogram{
    opacity: 1;
    background-color: #424242;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}


.item_wrapper.deleted{
    opacity: .5;
    background-color: #bababa;
}

.item_wrapper.deleted .icon {
    display: none !important;
}
.item_wrapper .recover {
    display: none;
    padding: 4px 8px;
    border-radius: 20px;
    margin-right: 10px;
    background-color: #ffffff85;
    cursor: pointer;
}
.item_wrapper .recover:hover {
    background-color: #ffffffb8;
    color: #000;
}

.item_wrapper.deleted .recover {
    display: inline-block;
}

.tags .list .tag_color_0 { background-color: #8a8a8a; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_1 { background-color: #424242; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_2 { background-color: #cd0a0a; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_3 { background-color: #db1cc7; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_4 { background-color: #7f0eea; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_5 { background-color: #1c1cf2; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_6 { background-color: #088ce0; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_7 { background-color: #08b35c; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_8 { background-color: #aac300; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_9 { background-color: #e4bc00; outline: 8px solid #00000000; color: #FFF;}
.tags .list .tag_color_10{ background-color: #ef8f06; outline: 8px solid #00000000; color: #FFF;}

.tags.select .list .tag_color_0.set { outline: 8px solid #8a8a8a50;}
.tags.select .list .tag_color_1.set { outline: 8px solid #42424250;}
.tags.select .list .tag_color_2.set { outline: 8px solid #cd0a0a50;}
.tags.select .list .tag_color_3.set { outline: 8px solid #db1cc750;}
.tags.select .list .tag_color_4.set { outline: 8px solid #7f0eea50;}
.tags.select .list .tag_color_5.set { outline: 8px solid #1c1cf250;}
.tags.select .list .tag_color_6.set { outline: 8px solid #088ce050;}
.tags.select .list .tag_color_7.set { outline: 8px solid #08b35c50;}
.tags.select .list .tag_color_8.set { outline: 8px solid #aac30050;}
.tags.select .list .tag_color_9.set { outline: 8px solid #e4bc0050;}
.tags.select .list .tag_color_10.set{ outline: 8px solid #ef8f0650;}

.tags .list .tag_icon_0  { background-image: url('../img/tagsicon/icon_0.svg');}
.tags .list .tag_icon_1  { background-image: url('../img/tagsicon/icon_1.svg');}
.tags .list .tag_icon_2  { background-image: url('../img/tagsicon/icon_2.svg');}
.tags .list .tag_icon_3  { background-image: url('../img/tagsicon/icon_3.svg');}
.tags .list .tag_icon_4  { background-image: url('../img/tagsicon/icon_4.svg');}
.tags .list .tag_icon_5  { background-image: url('../img/tagsicon/icon_5.svg');}
.tags .list .tag_icon_6  { background-image: url('../img/tagsicon/icon_6.svg');}
.tags .list .tag_icon_7  { background-image: url('../img/tagsicon/icon_7.svg');}
.tags .list .tag_icon_8  { background-image: url('../img/tagsicon/icon_8.svg');}
.tags .list .tag_icon_9  { background-image: url('../img/tagsicon/icon_9.svg');}
.tags .list .tag_icon_10 { background-image: url('../img/tagsicon/icon_10.svg');}
.tags .list .tag_icon_11 { background-image: url('../img/tagsicon/icon_11.svg');}

/* color picker */
.tags .tag-config-color{
    display: none;
    right: 20px;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 12px 37px -12px rgba(34, 60, 80, 0.83);
    -moz-box-shadow: 0px 12px 37px -12px rgba(34, 60, 80, 0.83);
    box-shadow: 0px 12px 37px -12px rgba(34, 60, 80, 0.83);
}

.tags .tag-panel-color{
    display: flex;
        border-radius: 5px;
        position: relative;
        z-index: 1;
        justify-content: flex-end;
}


.tags .color-piker{
    width: 20px;
    height: 20px;
    border: 3px solid #00000000;
    margin: 4px;
    border-radius: 5px;
    cursor: pointer;
}
.tags .color-piker.set{
    border: 3px solid #000;
}
/* icon picker */
.tags .tag-config-icon{
    display: none;
    right: 20px;
    position: absolute;
    z-index: 1;
    background-color: #424242;
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 12px 37px -12px rgba(34, 60, 80, 0.83);
    -moz-box-shadow: 0px 12px 37px -12px rgba(34, 60, 80, 0.83);
    box-shadow: 0px 12px 37px -12px rgba(34, 60, 80, 0.83);
}

.tags .tag-panel-icon{
    display: flex;
        border-radius: 5px;
        position: relative;
        z-index: 1;
        justify-content: flex-end;
}


.tags .icon-piker{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center;
}
.tags .icon-piker.set{
    background-color: #ffffff2e;
}


.icon { 
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;;
    opacity: .5;
}
.icon:hover { 
    opacity: .6;
    background-color: rgba(0,0,0,.05);
}
.icon.gear { 
    background-image: url('../img/icon_gear.svg');
}
.icon.delete { 
    background-image: url('../img/icon_trash.svg');
}

input[type=text], input[type=number]{
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 12px;
    gap: 10px;
    width: 100%;
    height: 40px;
    background-color: rgba(255,255,255,.5);
    border-radius: 5px;
    align-self: stretch;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    border: 1px solid #0000001f;
    color: rgb(51, 51, 51);
    opacity: 1;
    font-family: 'Inter-Regular';
    font-family: 'Inter-Medium';
}

input[type=text].err, input[type=number].err{
    background-color: #efd5d5;
    color: #902626;
}
span.err{
    color: #b56c6c;
    font-family: 'Inter Regular';
    font-size: 12px;
    display: inline-block;
    margin-top: 4px;
    flex-basis: 100%;
}

input[type=text]::-moz-placeholder, 				input[type=number]::-moz-placeholder 				    { font-size:18px; font-family: 'Inter-Regular', sans-serif; color:rgb(0 0 0 / 29%); font-size: 15px;}
input[type=text]::-webkit-input-placeholder, 		input[type=number]::-webkit-input-placeholder 		{ font-size:18px; font-family: 'Inter-Regular', sans-serif; color:rgb(0 0 0 / 29%); font-size: 15px;}
input[type=text]:-ms-input-placeholder, 			input[type=number]:-ms-input-placeholder 			    { font-size:18px; font-family: 'Inter-Regular', sans-serif; color:rgb(0 0 0 / 29%); font-size: 15px;}
input[type=text]::-ms-input-placeholder, 			input[type=number]::-ms-input-placeholder 			{ font-size:18px; font-family: 'Inter-Regular', sans-serif; color:rgb(0 0 0 / 29%); font-size: 15px;}
input[type=text]::placeholder, 						input[type=number]::placeholder 						{ font-size:18px; font-family: 'Inter-Regular', sans-serif; color:rgb(0 0 0 / 29%); font-size: 15px;} 

input[type=text]:focus, input[type=number]:focus{
    outline: none;
    background-color: #fff;
    border: 1px solid #00000042;
}
div.err {
    padding: 8px 16px;
    background-color: #efdada;
    border-radius: 8px;
}
.fe{
    margin: 15px 0px;
    font-size: 15px;
    color: #000000a1;
}
.fe span{
    color: #c97878;
    display: none;
}

.fe input[type=text]{
    margin: 3px 0px;
}

.fe.err input[type=text]{
    background-color: #c978782f;
    border: 1px solid #c97878;
    color:#c97878;
}
.fe.err span{
    display: block;
}

.fe.err input[type=text]::-moz-placeholder 				    { color:#c9787880; }
.fe.err input[type=text]::-webkit-input-placeholder 		{ color:#c9787880; }
.fe.err input[type=text]:-ms-input-placeholder 			    { color:#c9787880; }
.fe.err input[type=text]::-ms-input-placeholder 			{ color:#c9787880; }
.fe.err input[type=text]::placeholder 						{ color:#c9787880; } 


.table {
    display: flex;
        flex-direction: column;
        margin: 36px 0px;
        gap: 24px;
}
.table .row{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 16px;
}
.table .row .col{
 flex:1;

}

.table.mat .row .col:nth-child(1){
    flex: 2;
}

/* drop menu */
.custom-select {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.select-button {
    width: 100%;
    padding: 12px 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    text-align: left;
}

.select-button:hover {
    border-color: #aaa;
}

.select-button:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 10;
    max-height: 250px;
    overflow-y: auto;
}

.custom-select.active .select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #eee;
    outline: none;
    font-size: 14px;
}

.select-options {
    max-height: 200px;
    overflow-y: auto;
}

.select-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.select-option:hover, .select-option.highlighted {
    background-color: #f0f0f0;
}

.select-option.selected {
    background-color: #e0e0e0;
    font-weight: 500;
}

.select-arrow {
    transition: transform 0.3s ease;
}

.custom-select.active .select-arrow {
    transform: rotate(180deg);
}

.original-select {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}

.no-results {
    padding: 12px 16px;
    color: #999;
    text-align: center;
}