/*Постоянные переменные*/

:root {
    --color-primary: #6c54dd;
    --color-danger: #ff7782;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-dark: #363949;
    --color-light: #e9eaf5;
    --color-background: #f6f6f9;
    --color-info-dark: #7d8da1;
    --color-info-light: #dce1eb;
    --color-primary-variant: #111e88;
    --color-dark-variant: #677483;

    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;

    --card-padding: 1.8rem;
    --padding-1: 1.2rem;

    --box-shadow: 0 2rem 3rem var(--color-light)
}

.dark-theme-variables {
    --color-background: #181a1e;
    --color-white: #202528;
    --color-dark: #edeffd;
    --color-dark-variant: #a3bdcc;
    --color-light: rgba(0, 0, 0, 0.4);
    --box-shadow: 0 2rem 3rem var(--color-light);
}

* {
    margin:0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    
}

#overlay img { display: none; }

#overlay.currently-loading img { 
    display: block; 
    width: 100%;
    height: 100%;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: poppins, sans-serif;
    font-size: 0.88rem;
    background: var(--color-background);
    user-select: none;
    overflow-x: hidden;
    color: var(--color-dark)
}

.container1 {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 23rem;
}
a {
    color: var(--color-dark);
}

img {
    display: block;
    width: 100%;
}

h1 {
    font-weight: 800;
    font-size: 1.5rem;
    white-space: nowrap;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

h2 {
    font-size: 1.4rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

h3 {
    font-size: 0.87rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h4 {
    font-size: 0.8em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h5 {
    font-size: 0.77em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

small {
    font-size: 0.7em;
}

.profile-photo {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
}

.text-muted {
    color: var(--color-info-dark);
}

p {
    color: var(--color-dark-variant);
}

b {
    color: var(--color-dark);
}

.primary {
    color: var(--color-primary)
}

.danger {
    color: var(--color-danger)
}
.danger_baground {
    background: rgb(166,79,197,0.1);
    border-radius: var(--border-radius-2);

}
.success {
    color: var(--color-success)
}

.warning {
    color: var(--color-warning)
}

aside {
    height: 100vh;
}

aside .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.4rem;
}

aside .logo {
    display: flex;
    gap: 0.8rem;
}

aside .logo1 {
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


aside .logo {
    width: 2rem;
    height: 2rem;
}

aside .close {
    display: none;

}

.cont_help {
    width: 100%;
    position: relative;
    
}
.cont_help .help {
    position:absolute;
    right: -10px;
    top: -10px;
    font-size: 1.5rem;
    color: var(--color-white);
    border-radius: 50%;
    padding: 1px;
    background: var(--color-info-dark)
}
.help:hover {
    transform: scale(1.1);
    cursor: pointer;
    background: var(--color-dark)
}
/*------------------------- BASE -------------------------*/
.base_main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60rem;
    background: linear-gradient(
        #FF928B,
        #FFAC81
    );
}
body .base_main h1{
    
    font-weight: 600;
    font-size: 6rem;
}
/*------------------------- LOGIN -------------------------*/
.login {

    display: flex; 
    align-items: center; 
    justify-content: center;
    height: 100vh;
}
.loginForm {

    width: 300px;
    padding: 32px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    letter-spacing: 1px;
}

.form_input,
.form_button {
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
}

.loginForm .form_title {
    text-align: center;
    margin-bottom: 32px;
    font-weight: normal;
}

.form_group {
    position: relative;
    margin-bottom: 32px;
    
}

.form_label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #9e9e9e;
    transition: all 300ms ease;
}


.loginForm .form_input {
    width: 100%;
    padding-bottom: 10px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background-color: transparent;
    outline: none;
    transition: all 300ms ease;
}

.loginForm .b_login {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}


.loginForm small {
    cursor: pointer;
    font-size: 1rem;
}

.loginForm small:hover {
    color: var(--color-dark);
    transform: scale(1.4);
}


.form_input:focus {
    border-bottom: 1px solid #1a73a8;
}

.form_button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
    background-color: var(--color-primary);
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

.form_button:hover {
    transform: scale(1.1); /* Увеличиваем масштаб */
}

.form_input:focus ~ .form_label,
.form_input:not(:placeholder-shown) ~ .form_label {
    top: -18px;
    font-size: 12px;
    color: #e0e0e0;
}

/*------------------------- SELECT COMPANY -------------------------*/
.select_company {

    display: flex; 
    align-items: center; 
    justify-content: center;
    height: 100vh;
    padding: 2rem;
}

main h2 {
    margin: 0;
    font-weight: 100;
}




/*------------------------- SIDEBAR -------------------------*/

aside .sidebar {

    display: flex;
    flex-direction: column;
    height: 86vh;
    position: relative;
    top: 3rem;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-3);
}

aside h3 {
    font-weight: 500;
}

aside .sidebar a {
    display: flex;
    color: var(--color-info-dark);
    margin-left: 2rem;
    gap: 1rem;
    align-items: center;
    position: relative;
    height: 3.7rem;
    transition: all 300ms ease;
}

aside .sidebar a span {
    font-size: 1.6rem;
    transition: all 300ms ease;
}

aside .sidebar a:last-child {
    position: absolute;
    bottom: 2rem;
    width: 100%;
}

aside .sidebar a.active {
    background: var(--color-light);
    color: var(--color-primary);
    margin-left: 0;
}


aside .sidebar a.active:before{
    content: " ";
    width: 6px;
    height: 100%;
    background: var(--color-primary);
}

aside .sidebar a.active span {
    color: var(--color-primary);
    margin-left: calc(1rem - 3px);
}

aside .sidebar a:hover {
    color: var(--color-primary);
}

aside .sidebar a:hover span {
    margin-left: 1rem;
}

aside .sidebar .message-count {
    background-color: var(--color-danger);
    color: var(--color-white);
    padding: 2px 10px;
    font-size: 11px;
    border-radius: var(--border-radius-1);
}

/*========================SALES_REC==============================*/

.container_sales_rec {
    display: flex;
    width: 100%;
    height: 120%;
    margin: 0 auto;
    background: var(--color-background);  
    justify-content: center;
    align-items: center;

}
.container_sales_rec .main{
    display: flexbox;
    min-width: 80%;
    min-height: 80%;
    max-width: 80%;
    max-height: 100%;
    background: var(--color-white);   
    border-radius: var(--card-border-radius);
    border: 0.5px solid  #FFAC81; 
    box-shadow: var(--box-shadow);
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.container_sales_rec .main h3{
    text-align: center;
    font-size: 28px;
    color: var(--color-dark);
    padding: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
}
.container_sales_rec .main h4{
    text-align: left;
    font-size: 16px;
    color: var(--color-dark);
    padding: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.container_sales_rec .main .header span{
    padding: 1rem;
    font-size: 2rem;
    color: var(--color-info-light);
}
.container_sales_rec .main .header span:hover{
    color: var(--color-dark);
    cursor: pointer;
}

.container_sales_rec .main .top {
    display: flex;
    padding: var(--card-padding);
    width: 100%;
    justify-content: center;
    align-items: center;

}

.container_sales_rec .main  .card_sales_variant{
    height: 160px;
    min-width: 250px;
    /* max-width: 250px; */
    background: linear-gradient(
        #FF928B,
        #FFAC81
    );
    border-radius: var(--border-radius-3);
    margin: 2.5rem 0.5rem 2.5rem 0.5rem;
    border: var(--color-dark);
    cursor: pointer;
    overflow: auto;
    justify-content: center;
    align-items: center;
    
       
}

.container_sales_rec .main  .card_sales_variant:hover{
    transform: scale(1.05);
    box-shadow: var(box-shadow);
    transition: all 500ms;
    
    
}


.container_sales_rec .main  .card_sales_variant h1 {
    
    color: var(--color-white);
    padding: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
   
  
    
}

.container_sales_rec .main  .card_sales_variant h2 {
    color: var(--color-white);
    padding: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
   
    
}


.container_sales_rec .recomend_upgrade:hover {
    transform: scale(1.05);
    cursor: pointer;
    transition: all 500ms;
    box-shadow: var(--box-shadow);
}

.container_sales_rec .main .mid {
    display: inline-flex;
    min-width:95%;
    padding: var(--card-padding);
    margin: 0 2rem 0 2rem;
    overflow-y: scroll;
    justify-content: center;
    align-items: center;
}
.container_sales_rec .main .mid .mid_insight{
    display: inline-flex;
    width:0;
    min-width:90%;
    padding: var(--card-padding);
    margin: 0;
    overflow-y: scroll;
}
.container_sales_rec .main span   {
    font-size: 5rem;
    font-weight: 300;
    color: var(--color-info-light);
    
}
/*========================SALES==============================*/
.container_sales {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}

.container_sales .middle{
    max-width: 100%;  
    display: flex;
    flex-direction: column;
}
.container_sales .middle .select{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.container_sales .middle .select .but{
    padding: var(--card-padding);
    margin: 2rem  2rem 0  2rem;
    border-radius: var(--card-border-radius);
    cursor: pointer;
}
.container_sales .middle .select .but.active{
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    transition: all 200ms ease;
}

.gradient {
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }

.container_sales .middle .loss_detail {
    display: none;
}
.container_sales .middle .loss_detail.active {
    display: block;
}

.container_sales .insights {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
    max-height: 100%;

}
.container_sales .insights_table {

    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    margin-top: 2rem;
    box-shadow: var(--box-shadow);
    max-height: 34rem;
    overflow: scroll;
    width: 100%;
}
.container_sales .insights_table .table {
    display: block;
    overflow: scroll;
    max-width: 80vw;
}

.container_sales .insights_table .table.table_converse  th{
    min-width: 10rem;
    max-width: 10rem;
    color: var(--color-dark);
    font-weight: 600;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: var(--border-radius-1);
    font-size: 12px;
}
.container_sales .insights_table .table.table_converse  td{
    color: var(--color-dark);
    font-weight: 200;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: var(--border-radius-1);
    font-size: 12px;
}

.container_sales .insights_table td{
    border: 0.5px solid var(--color-info-dark);
    padding:  0.5rem 0.1rem 0.5rem 0.1rem;
    min-width: 5rem;
    max-width: 5rem;
}
.container_sales .insights_table th{
    min-width: 5rem;
    max-width: 5rem;
    border: 0.5px solid var(--color-info-dark);
    padding:  0.3rem 0.1rem 0.3rem 0.1rem;
    justify-content: center;
}
.container_sales .insights_block {
   
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    max-height: 100%;
}

.container_sales .insights_block:hover {
    cursor: pointer;
}
.container_sales .insights_block h3 {
    color: var(--color-info-dark);
    font-weight: 300;
    letter-spacing: 1px;
    padding: 5px 2px 5px 2px; 
}
.container_sales .insights_block h1 {
    padding: 3px 1px 3px 1px;
    /* font-size: 30px; */
    font-size: calc(2px + 1vw);
    font-weight: 500;
}
.container_sales .right1 h2, .right2 h2 {
    color: var(--color-dark);
    font-weight: 600;
    letter-spacing: 1px;
    padding: 1px;
    margin: 0 auto;
    font-size: 14px;
}
.container_sales .right1 h3, .right2 h3 {
    color: var(--color-info-dark);
    font-weight: 300;
    letter-spacing: 1px;
    padding: 4px;
    display: flex;
    align-items: center;
    margin: 0.5rem 0 0 0.5rem;
}

.container_sales .right1 span {
    margin-right: 3px;
}

.container_sales .right1 .inp {
    display: inline-block;
    margin-bottom: 0.5rem;
    top: 0;

}
.container_sales .right1 input {
    background-color: var(--color-info-light);
    border-radius: var(--border-radius-1);
    width: 60%;
    vertical-align: middle;
    padding: 5px 1px 5px 10px;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 300;
    font-size: 12px;
}
.container_sales .right1 .add_val  {
    width: 100%;
}
.container_sales .right1 button {
    background-color: var(--color-white);
    border-radius: var(--border-radius-1);
    width: 100%;
    margin: 0.5rem 0 0 0 ;
    border: 0.5px solid var(--color-dark);
    color: var(--color-dark);
}

.container_sales .right1 button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.container_sales .right1 input:hover {
    border: 0.5px solid var(--color-dark);

}
.container_sales .right1 {
    background: var(--color-white);
    padding: var(--padding-1);
    border-radius: var(--card-border-radius);
    margin-top: 2rem;
    overflow-y: scroll;
    height: 34rem;
}
.container_sales .right2 {
    background: var(--color-white);
    padding: var(--padding-1);
    border-radius: var(--card-border-radius);
    margin-top: 5.6rem;
    overflow-y: scroll;
    height: 208px;
}
.container_sales .right3 {
    margin-top: 2rem;
}

.container_sales .right1 .del:hover {
    color: var(--color-danger);
    cursor: pointer;
    transform: scale(1.1);
    transition: all 300ms ease;
}
.container_sales .right1 .add, .right2 .add {
    color: var(--color-success);
    cursor: pointer;
}
.container_sales .right1 .add:hover {
    transform: scale(1.1);
    cursor: pointer;
    transition: all 300ms ease;
}

.container_sales .right1 textarea {
    cursor: pointer;
    background: var(--color-light);
    padding: 4px 0 4px 10px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin-left: 1px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px; 
}

.container_sales .right1 textarea:hover {
    transform: scale(1.1);
    transition: all 300ms ease;
}

.container_sales .right2 .form_button_select {
    padding: 0;
    margin: 0;
}
.container_sales .right2 button {
    padding: 0;
    margin-top: 0;
    border: 0.5px solid var(--color-info-dark);
    border-radius:  var(--border-radius-2);
    width: 148px;
    background-color: var(--color-white);   
    color: var(--color-dark);
}

.container_sales .right2 button:hover {
    
    transform: scale(1.05);
    cursor: pointer;
    background-color: var(--color-primary);
    color: var(--color-white);
    
}

.container_sales .right2 .but {
    display: inline-block;
    margin-top: 0.6rem;

}

.container_sales .right2 .butt {
   
    margin-bottom: 1rem;
}

.container_sales .right2 .butt select{
    background-color: var(--color-primary);
    padding: var(--padding-1);
    border-radius: var(--border-radius-2);
    box-shadow: var(--box-shadow);
    color: var(--color-white);
    height: 2rem;
    width: 148px;
    margin-bottom: 0.5rem;
}


.container_sales .right2 .butt input{
    background: var(--color-primary);
    padding: var(--padding-1);
    border-radius: var(--card-border-radius);
    color: var(--color-dark);
    height: 1rem;
    width: 160px;
    margin-bottom: 1rem;
    font-size: 12px;
}   
.container_sales .insights_block .insights_block_mid span{
    display: inline-block;
}
.container_sales .insights_block .insights_block_mid .table{
    height: 5rem;
}

.container_sales .insights_block .insights_block_mid .table.converse_chart{
    height: 8rem;
}
.container_sales .insights_block .insights_block_mid table{
    max-height:100%; 
}

.container_sales .insights_block .insights_block_mid .data{
    color: var(--color-info-dark);
    font-size: 8px;
}


.container_sales th,td {
    padding: 5px;
    /* border-bottom: 1px solid var(--color-info-light);  */
    text-align: center;
}

.container_sales th, td {
    color: var(--color-info-dark);
}

.container_sales .form_radio_group {
	display: inline-block;
	
}
.container_sales .form_radio_group-item {
	display: inline-block;
    float: left;    
}
.container_sales .form_radio_group input[type=radio] {
	display: none;
}
.container_sales .form_radio_group label {
	display: inline-block;
	cursor: pointer;
	padding: 7px;
	line-height: 20px;
	border: 0.5px solid var(--color-info-dark);
    font-weight: 200;
    font-size: 14px;
    letter-spacing: 0.5px;
    background-color: var(--color-white);
	
}
 
/* .container_sales .form_radio_group .form_radio_group-item:first-child label {
	border-radius: var(--border-radius-2) 0 0 var(--border-radius-2);
} */
/* .container_sales .form_radio_group .form_radio_group-item:last-child label {
	border-radius:  0 var(--border-radius-2) var(--border-radius-2) 0;
	border: 1px solid var(--color-info-dark);
} */
 
/* Checked */
.container_sales .form_radio_group input[type=radio]:checked + label {
	background: var(--color-primary);
    color: var(--color-white);
}
 
/* Hover */
.container_sales .form_radio_group label:hover {
	color: #666;
}
 
/* Disabled */
.container_sales .form_radio_group input[type=radio]:disabled + label {
	background: #efefef;
	color: var(--color-info-dark);
}

.container_sales .label {
    font-size: 8px;
    color: var(--color-dark);
    font-weight: 200;
  }

.container_sales .insights_block td {
    border-radius:  var(--border-radius-1)  var(--border-radius-1) 0 0;
	border: 0.5px solid var(--color-info-dark);
}

.container_sales .middle form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0 3rem 0;
}

.container_sales .middle input {
    width: 15rem;
    padding: 1rem;
    margin: 0 0.5rem 0 0;
    font-size: 14px;
    height: 2.5rem;
    border: 0.5px solid var(--color-info-dark);
}




.container_sales .middle .form_radio_group {
    padding: 0 ;
    margin: 0 auto;
}


.container_sales .middle .form_radio_group .form_radio_group-item label {
    border: 0.5px solid var(--color-info-dark);  
    width: 5.2rem;
    text-align: center;
}
.container_sales .middle .form_radio_group2 .form_radio_group-item label {
    width: 10rem;
}
.container_sales .middle .form_radio_group-item label:hover {
    border: 0.5px solid var(--color-primary);  
}

.container_sales .middle #multipleSelect {
    padding: 0 ;
    margin: 0 auto;
    width: 17rem;
}


.container_sales .middle button{
    width: 6rem;
    height: 2.5rem;
    border-radius: 0;
    border: 0.5px solid var(--color-info-dark);
    background-color: var(--color-white);
    color: var(--color-dark);
    margin: 0;
    font-size: 14px;
    font-weight: 200;

}

.container_sales .middle button:hover{
    background-color: var(--color-primary);
    color: var(--color-white);
}
/*========================PlanningSkilss2=======================*/
.container_planningSkills2 #title .btn-group .btn{
    border: 0.5px solid var(--color-info-dark);
    color: var(--color-info-dark);
    font-weight: 600;
    font-size: 14px;
    padding: 1rem;
    margin: 0;
}

.container_planningSkills2 #title .btn:hover{
    background-color: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
}

.container_planningSkills2 #title .btn:checked{
    background-color: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
}
.container_planningSkills2 #title .btn-check:checked + .btn-outline-primary, 
.btn-check:active + .btn-outline-primary, .btn-outline-primary:active, 
.btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show{
    background-color: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
}


.container_planningSkills2 {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
    background-color: var(--color-background);
}
.container_planningSkills2   {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
    background-color: var(--color-background);
}

.container_planningSkills2 main{
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-top: 6.6rem;
    height:  100%;
}

.container_planningSkills2 #grid {
    padding: var(--card-padding);
    display: grid;
    gap: 1rem;
    /* grid-template-columns: 50% auto; */
    grid-template-rows: 5rem 10rem 40rem ;
    grid-template-areas: "navigation"
                        "board"
                        "title"
                      
                        
                        ;
}

/* указывает позиции блоков в сетке с помощью координат */
.container_planningSkills2 #navigation {
    grid-column: 2; 
    grid-row: 1; 
    margin: 1rem;

}
.container_planningSkills2 #title {
    grid-column: 2; 
    grid-row: 2; 
    margin: 1rem;
}
.container_planningSkills2 #title .stats_mini {
    min-height: 40rem;
    max-height: 40rem;
    margin: 1rem;
    overflow: scroll;
}

.container_planningSkills2 #title .stats_mini #add_skill:hover {
    background: linear-gradient(
        #FF928B,
        #FFAC81);
    color: var(--color-white)
}
.container_planningSkills2 #title .stats_mini .stats_mini {
    min-height: 1rem;

}
.container_planningSkills2 #title .min {
    box-shadow: none;
    border: none;
    border-bottom: 0.5px solid var(--color-info-dark);
}
.container_planningSkills2 #title .stats_mini table {
    width: 100%;
}
.container_planningSkills2 #navigation    { 
    grid-area: navigation; 
    align-self: center;
    display: grid;
    grid-template-columns: 1rem auto 1rem;
}

.container_planningSkills2 #navigation  a:nth-child(1)  { 
    float: left;
    align-self: center;
} 
.container_planningSkills2 #navigation  a:nth-last-child(1) {
    float: right;
    align-self: center;
}

.container_planningSkills2 #title    {
    grid-area: title;  
    margin: 1rem; 
    align-self: center;
    justify-self: center;
    text-align: center;
    width: 95%;
}
.container_planningSkills2 #title button    {
    width: 15rem;
    height: 100%;
    padding: 0.7rem;
    margin: 0.2rem;
    border: 0.5px solid var(--color-info-dark);
    border-radius: 2px;
    background-color: var(--color-white);
    color: var(--color-info-dark);
    font-weight: 500;
    font-size: 14px;
}

.container_planningSkills2 #title button:hover    {
    background-color: var(--color-primary);
    color: var(--color-white);

}
.container_planningSkills2 #title   h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.container_planningSkills2 #title   small {
    font-size: 1rem;
    color: var(--color-info-dark);
}
.container_planningSkills2   .orange {
    color: #FFAC81;
}
.container_planningSkills2 #board    { 
    grid-area: board;  
    grid-column: 1,2,3,4,5; 
    grid-row: 2; 
    /* margin-left: 3rem; */
    border-radius: var(--border-radius-1);
    grid-template-columns: auto auto;
    display: grid;
    gap: 2rem;

    margin: 1rem;
    padding: var(--card-padding);

    overflow-y: scroll;
    max-height: 100%;

}
.container_planningSkills2 #board  select  { 
    border: 0.5px solid var(--color-info-dark);
    font-size: 1rem;
    letter-spacing: 0.2px;
    color: var(--color-info-dark);
    padding: 1rem;
    /* background-color: var(--color-warning); */
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);
   
}
.container_planningSkills2 #board  form  { 
    margin-top: 1rem;
    display: grid;
    grid-template-rows: 3rem 3rem 3rem;
    row-gap: 1rem;
   
}
.container_planningSkills2 #board  form h1 { 
    text-align: center;
}
.container_planningSkills2 #board  input  { 
    
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.2px;
    height: 3rem;
    border-radius: var(--border-radius-1);
    border: solid 0.5px black;
    

}
.container_planningSkills2 #board  button  { 
    margin: 0;
    padding: 1rem;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.2px;
    width: 100%;
    border-radius: var(--border-radius-1);
}

.container_planningSkills2 #board  button:hover  { 
    transform: scale(1.1);
    transition: all 300ms ease;
}
.container_planningSkills2 #stats    { 
    grid-area: stats; 
    display: grid;
    margin: 1rem;
    padding: var(--card-padding);
    grid-template-columns: repeat(5, 1fr);
    overflow-y: scroll;
    max-height: 100%;
    gap: 1rem;
}

.container_planningSkills2 .modal-body .radar_graph .player__radar {
    max-width: 10rem;
    height: 10rem;
}

.container_planningSkills2 #stats dt{
    font-weight: 100;
    font-size: 10px;
}
.container_planningSkills2 .stats_mini    { 

    box-shadow:  2px 3px  6px 3px var(--color-info-light);
    border: 0.5px solid var(--color-info-dark);
    border-radius: 5px;
    padding: 10px;
    justify-content: center;
    text-align: center;
}
.container_planningSkills2 .stats_mini  h5  { 

    color: var(--color-primary);
    margin: 1rem;
}
.container_planningSkills2 #stats  h2  { 
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}
.container_planningSkills2 #stats  .info  { 
    font-size: 2rem;
    text-align: center;
    margin: 6rem 0 6rem 0;
    font-weight: 200;
    color: var(--color-info-dark);
}

.container_planningSkills2 #stats  h3  { 
    padding-bottom: 0;
    font-size: 17px;
    text-align: center;
    font-weight: 550;
    letter-spacing: 1px;
    border-bottom: solid 0.5px  var(--color-info-dark);
}
.container_planningSkills2 #board  span  { 
    color: var(--color-dark);
    font-weight: 300;
}

.container_planningSkills2 #board  h2  { 
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}
.container_planningSkills2 #stats  span  { 
    color: var(--color-dark);
    font-weight: 300;
}
.container_planningSkills2 #stats  .but  { 
    display: grid;
    /* grid-template-columns: 50% 50%; */
    gap: 5px;
    
    
}
.container_planningSkills2 #stats  button     { 
    
    border-radius: var(--border-radius-1);
    background-color: var(--color-white);
    color: var(--color-dark);
    border: 0.5px solid var(--color-info-dark);
    padding: 15px;
    margin-bottom: 1rem;
    width: 100%;
    height: 5rem;
}

.container_planningSkills2 #stats  .num_but     { 
    
    color:var(--bs-primary);
    font-weight: 800;
    font-size: 32px;
}
.container_planningSkills2 #stats  button:hover    { 

    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow:  2px 3px  6px 3px var(--color-info-light);
    border: 0.5px solid var(--color-info-dark);
}

.container_planningSkills2 #stats  .btn-close  { 
    box-sizing: content-box;
    width: 1em;
    height: 1em;
}
.container_planningSkills2 #stats  .show  { 
    background: var(--color-dark);
    opacity: 0.85;
}
.container_planningSkills2 #stats  .modal-content  { 
    margin-top: 20rem;
}
.container_planningSkills2 #stats  .left  { 
    background-color: var(--color-info-light);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
}
.container_planningSkills2 #stats  .left:hover { 
    background: linear-gradient(
                #FF928B,
                #FFAC81);
    color: var(--color-white);
}
.container_planningSkills2 #stats  .right:hover { 
    box-shadow: var(--box-shadow);
    transform: scale(1.02);
    transition: all 300ms ease;
}

.container_planningSkills2 .skills_block {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    border: 0.5px solid var(--color-info-dark);
    margin-top: 1.4rem;
    margin-bottom: 1rem;
    position: relative;
}

.container_planningSkills2 .skills_block input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity:0;
    visibility: 0;
  }
.container_planningSkills2 .skills_block h1{
    position: relative;
  }
.container_planningSkills2 .skills_block label::before{
    content:"";
    display: inline-block;
    border: 15px solid transparent;
   
  }
.container_planningSkills2 .skills_block label{
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
  } 

  .container_planningSkills2 .skills_block:hover{
    color: var(--color-dark);
    /* border: 1px solid var(--color-primary); */
    box-shadow: 3px  3px  #41f1b6;
    cursor: pointer;
  } 

.container_planningSkills2 .skills_block .skills_block_main{
    max-height:0px;
    overflow: hidden;
    transition:max-height 0.5s;
    background-color: white;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-2);
  }
.container_planningSkills2 .skills_block input:checked  ~ .skills_block_main{
    max-height:100%;
  }
.container_planningSkills2 .skills_block h3{
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    
}
.container_planningSkills2 .skills_block small{
    color:var(--color-info-dark);
    font-size: 0.7rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.container_planningSkills2 .skills_block_main small{
    color:var(--color-info-dark);
    font-size: 0.7rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.container_planningSkills2 .skills_block_main:hover{
    cursor: pointer;
}
/*========================PlanningSkilss=======================*/

.container_planningSkills {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
    background-color: var(--color-background);
}
.container_planningSkills   {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
    background-color: var(--color-background);
}

.container_planningSkills main{
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-top: 6.6rem;
    height:  100%;
}

.container_planningSkills .radar_graph{
    width: 40rem;
    height: 10rem;
}
.container_planningSkills .radar_graph section{
    padding: 0;
    
}
.container_planningSkills  .radar_graph .player__radar{
    max-width: 30rem;
    height: 30rem;
    
}

.container_planningSkills  .radar_graph .player__ratings dt {
    color: var(--color-dark);
    font-family: poppins, sans-serif;
    font-weight: 100;
    font-size: clamp(1.3rem, calc(3.5vw + .5rem), 0.55rem);
    
    
    
}

.container_planningSkills #grid {
    padding: var(--card-padding);
    display: grid;
    gap: 1rem;
    grid-template-columns: 50% auto;
    grid-template-rows: 15rem 10rem 28rem ;
    height: 100vh;
    grid-template-areas: "navigation navigation "
                        "title stats "
                        "board  stats"
                        ;
}

/* указывает позиции блоков в сетке с помощью координат */
.container_planningSkills #navigation {
    grid-column: 2; 
    grid-row: 1; 
    margin: 1rem;

}
.container_planningSkills #title {
    grid-column: 2; 
    grid-row: 2; 
    margin: 1rem;

}
.container_planningSkills #navigation    { 
    grid-area: navigation; 
    align-self: center;
    display: grid;
    grid-template-columns: 1rem auto 1rem;
}

.container_planningSkills #navigation  a:nth-child(1)  { 
    float: left;
    align-self: center;
} 
.container_planningSkills #navigation  a:nth-last-child(1) {
    float: right;
    align-self: center;
}

.container_planningSkills #title    {
    grid-area: title;  
    margin: 1rem; 
    align-self: center;
    justify-self: center;
    text-align: center;
}
.container_planningSkills #title   h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.container_plannincontainer_planningSkillsgSales #title   small {
    font-size: 1rem;
    color: var(--color-info-dark);
}
.container_planningSkills   .orange {
    color: #FFAC81;
}
.container_planningSkills #board    { 
    grid-area: board;  
    grid-column: 1,2; 
    grid-row: 3; 
    margin-left: 3rem;
    border-radius: var(--border-radius-1);
    grid-template-columns: auto auto;
    display: grid;
    gap: 2rem;

}
.container_planningSkills #board  select  { 
    border: 0.5px solid var(--color-info-dark);
    font-size: 1rem;
    letter-spacing: 0.2px;
    color: var(--color-info-dark);
    padding: 1rem;
    /* background-color: var(--color-warning); */
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);
   
}
.container_planningSkills #board  form  { 
    margin-top: 1rem;
    display: grid;
    grid-template-rows: 3rem 3rem 3rem;
    row-gap: 1rem;
   
}
.container_planningSkills #board  form h1 { 
    text-align: center;
}
.container_planningSkills #board  input  { 
    
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.2px;
    height: 3rem;
    border-radius: var(--border-radius-1);
    border: solid 0.5px black;
    

}
.container_planningSkills #board  button  { 
    margin: 0;
    padding: 1rem;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.2px;
    width: 100%;
    border-radius: var(--border-radius-1);
}

.container_planningSkills #board  button:hover  { 
    transform: scale(1.1);
    transition: all 300ms ease;
}
.container_planningSkills #stats    { 
    grid-area: stats; 
    margin: 1rem;
    padding: var(--card-padding);
    border: solid 0.5px black;
    border-radius: var(--border-radius-1);
    overflow-y: scroll;
    max-height: 100%;
}

.container_planningSkills .modal-body .radar_graph .player__radar {
    max-width: 10rem;
    height: 10rem;
}

.container_planningSkills #stats dt{
    font-weight: 100;
    font-size: 10px;
}
.container_planningSkills .stats_mini:hover    { 
    color: var(--color-dark);
    box-shadow:  2px 3px  6px 3px var(--color-info-light);
    cursor: pointer;
}
.container_planningSkills #stats  h2  { 
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}
.container_planningSkills #stats  .info  { 
    font-size: 2rem;
    text-align: center;
    margin: 6rem 0 6rem 0;
    font-weight: 200;
    color: var(--color-info-dark);
}

.container_planningSkills #stats  h3  { 
    padding-bottom: 0;
    font-size: 17px;
    text-align: center;
    font-weight: 550;
    letter-spacing: 1px;
    border-bottom: solid 0.5px  var(--color-info-dark);
}
.container_planningSkills #stats  span  { 
    color: var(--color-dark);
    font-weight: 300;
}
.container_planningSkills #stats  .but  { 
    display: grid;
    /* grid-template-columns: 50% 50%; */
    gap: 5px;
    
    
}
.container_planningSkills #stats  button     { 
    
    border-radius: var(--border-radius-1);
    background-color: var(--color-white);
    color: var(--color-dark);
    border: 0.5px solid var(--color-info-dark);
    padding: 15px;
    margin-bottom: 1rem;
    width: 100%;
}
.container_planningSkills #stats  button:hover    { 

    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow:  2px 3px  6px 3px var(--color-info-light);
    border: 0.5px solid var(--color-info-dark);
}

.container_planningSkills #stats  .btn-close  { 
    box-sizing: content-box;
    width: 1em;
    height: 1em;
}
.container_planningSkills #stats  .show  { 
    background: var(--color-dark);
    opacity: 0.85;
}
.container_planningSkills #stats  .modal-content  { 
    margin-top: 20rem;
}
.container_planningSkills #stats  .left  { 
    background-color: var(--color-info-light);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
}
.container_planningSkills #stats  .left:hover { 
    background: linear-gradient(
                #FF928B,
                #FFAC81);
    color: var(--color-white);
}
.container_planningSkills #stats  .right:hover { 
    box-shadow: var(--box-shadow);
    transform: scale(1.02);
    transition: all 300ms ease;
}

.container_planningSkills .skills_block {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    border: 0.5px solid var(--color-info-dark);
    margin-top: 1.4rem;
    margin-bottom: 1rem;
    position: relative;
}

.container_planningSkills .skills_block input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity:0;
    visibility: 0;
  }
.container_planningSkills .skills_block h1{
    position: relative;
  }
.container_planningSkills .skills_block label::before{
    content:"";
    display: inline-block;
    border: 15px solid transparent;
   
  }
.container_planningSkills .skills_block label{
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
  } 

  .container_planningSkills .skills_block:hover{
    color: var(--color-dark);
    /* border: 1px solid var(--color-primary); */
    box-shadow: 3px  3px  #41f1b6;
    cursor: pointer;
  } 

.container_planningSkills .skills_block .skills_block_main{
    max-height:0px;
    overflow: hidden;
    transition:max-height 0.5s;
    background-color: white;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-2);
  }
.container_planningSkills .skills_block input:checked  ~ .skills_block_main{
    max-height:100%;
  }
.container_planningSkills .skills_block h3{
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    
}
.container_planningSkills .skills_block small{
    color:var(--color-info-dark);
    font-size: 0.7rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.container_planningSkills .skills_block_main small{
    color:var(--color-info-dark);
    font-size: 0.7rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.container_planningSkills .skills_block_main:hover{
    cursor: pointer;
}


/*========================PlanningSales=======================*/

.container_planningSales {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}

.container_planningSales main{
    background: var(--color-background);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    
    margin-top: 6.6rem;
    height:  100%;
}

.container_planningSales #grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 30% 33% 33%;
    grid-template-rows: 8rem 10rem 30rem ;
    height: 100vh;
    grid-template-areas: "navigation navigation navigation"
                        "title  title title"
                        "example board stats"
                        
                        ;


}

/* указывает позиции блоков в сетке с помощью координат */
.container_planningSales #navigation {
    grid-column: 3; 
    grid-row: 1; 
    margin: 1rem;
}

.form_converse {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.form_converse .vscomp-toggle-button {
    margin: 1rem;
    width: 10rem;
}
.form_converse #add {
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: 50%;
    color: var(--color-white);
    width: 2.5rem;
    height: 2.5rem;
    font-weight: 800;
    font-size: 2.5rem;
    text-align: center;
    justify-content: center;
    opacity: 0.8;
}
.form_converse #add:hover {
    transform: scale(1.2);
    cursor: pointer;
    opacity: 1;
}

.container_planningSales #remove {
    
    border-radius: 50%;
    color: var(--color-info-dark);
    width: 2.2rem;
    height: 2.2rem;
    font-weight: 800;
    font-size: 2rem;
    text-align: center;
    justify-content: center;
    opacity: 0.8;
    margin: 1rem;
}
.container_planningSales   #remove:hover {
    transform: scale(1.2);
    cursor: pointer;
    color: var(--color-danger);
    opacity: 1;
}

.container_planningSales  .row_box_plan {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container_planningSales #converse    { 
    grid-column: 2; 
    grid-row: 4; 
    display: flex;
    padding: var(--card-padding);
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    justify-content: start;
    align-items: center;
}
.container_planningSales #converse_result    { 
    grid-column: 3; 
    grid-row: 4; 
    display: flex;
    padding: var(--card-padding);
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    justify-content: start;
    align-items: center;
}
.container_planningSales #converse_result form     { 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container_planningSales #converse_result #output     { 
    width: 100%;
}
.container_planningSales #converse_result .box_btn   { 
    display: flex;
    flex-direction: row;
}

.container_planningSales #converse_result .box_btn .del_converse   { 
    background: var(--color-white);
    color: var(--color-dark);
    border: 0.5px solid var(--color-light);
}

.container_planningSales #converse_result input    { 
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-dark);
    text-align: center;
    height: 3rem;
    width: 100%;
}
.container_planningSales #converse_result button    { 
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    cursor: pointer;
    padding: 0 1rem 0 1rem;
    width: 15rem;
    font-size: 14px;
    height: 3rem;
    margin: 1rem;
    border-radius: var(--border-radius-2);
    color: var(--color-white);
}
.container_planningSales #converse_result button:hover   { 
    transform: scale(1.05);
    transition: all 300ms ease;
    box-shadow: var(--box-shadow);
}

.container_planningSales #example    { 
    grid-area: example; 
    display: flex;
    padding: var(--card-padding);
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    justify-content: space-around;
    align-items: center;
}

.container_planningSales #example h2    { 
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container_planningSales #example .li   { 
    padding: 0.5rem;
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    text-align: center;
    color: var(--color-white);
    font-weight: 400;
    font-size: 1rem;
    margin: 0.2rem;
}
.container_planningSales #example .v_1   { 
    width: 98%;
    
}
.container_planningSales #example .v_2    { 
    width: 90%;
}
.container_planningSales #example .v_3    { 
    width: 82%;
}
.container_planningSales #example .v_4    { 
    width: 72%;
}
.container_planningSales #example .v_5    { 
    width: 65%;
}

.container_planningSales #example .text_voronka    { 
    font-size: 1.6rem;
}


.container_planningSales #navigation    { 
    grid-area: navigation; 
    align-self: center;
    display: grid;
    grid-template-columns: 1rem auto 1rem;
}
.container_planningSales #navigation  .material-icons-sharp  { 
    background-color: white;
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
} 

.container_planningSales #navigation  a:nth-child(1)  { 
    float: left;
    align-self: center;
} 
.container_planningSales #navigation  a:nth-last-child(1) {
    float: right;
    align-self: center;
    margin-left: -2rem;
}
.container_planningSales #navigation  .arrow:hover  { 
    transform: scale(1.1);
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);
    
    transition: all 300ms ease;
} 
   

.container_planningSales #title    {
    grid-area: title;  
    padding: 1.5rem; 
    align-self: center;
    justify-self: center;
    text-align: center;
    border-radius: var(--card-border-radius);
    background-color: var(--color-white);
    width: 100%;
}
.container_planningSales #title   h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    
}
.container_planningSales #title   small {
    font-size: 1rem;
    color: var(--color-info-dark);
}
.container_planningSales   .orange {
    color: #FFAC81;

}

.container_planningSales #board    { 
    grid-area: board;  
    padding: 1rem;
    border-radius: var(--card-border-radius);
    grid-template-columns: auto auto;
    display: grid;
   
    background-color: var(--color-white);
    justify-content: center;

}

.container_planningSales #board  select  { 
    border: 0.5px solid var(--color-info-dark);
    font-size: 1rem;
    letter-spacing: 0.2px;
    color: var(--color-info-dark);
    padding: 1rem;
    /* background-color: var(--color-warning); */
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);
   
}
.container_planningSales #board  form  { 
    margin-top: 1rem;
    display: grid;
    grid-template-rows: 3rem 3rem 3rem;
    row-gap: 1rem;
    width: 100%;
    
   
}
.container_planningSales #board  form h1 { 
    text-align: center;
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
}

.container_planningSales #converse  h1 { 
    text-align: center;
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    width: 100%;
    margin: 2rem;
}
.container_planningSales #converse_result  h1 { 
    text-align: center;
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    width: 100%;
    margin: 2rem;
}

.container_planningSales #board  input  { 
    
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.2px;
    height: 3rem;
    border-radius: var(--border-radius-1);
    border: solid 0.5px black;
    

}
.container_planningSales #board  button  { 
    margin: 0;
    padding: 1rem;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.2px;
    width: 100%;
    border-radius: var(--border-radius-1);
    background-color: var(--color-light);
    border: 0.5px solid var(--color-info-dark);
    color: var(--color-dark);
    
}

.container_planningSales #board  button:hover  { 
    transform: scale(1.01);
    transition: all 300ms ease;
    background-color: var(--color-primary);
    color: var(--color-white);

}
.container_planningSales #stats    { 
    grid-area: stats; 
    padding: var(--card-padding);
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    overflow-y: scroll;
    justify-content: center;
}

.container_planningSales #stats  td:first-child  { 
    width: 1rem;
}
.container_planningSales #stats  td:last-child  { 
    overflow: hidden;
}
.container_planningSales #stats  td  { 
    width: 100%;
}
.container_planningSales #stats  td input { 
    text-align: center;
    vertical-align: middle;
    width: 9rem;
}

.container_planningSales #stats  span  { 
   background-color: var(--color-white);
   box-shadow: none;
   border: none;
   color: var(--color-info-dark);
   padding: 5px;
}
.container_planningSales #stats  span:hover  { 
    color: var(--color-danger)
 }

.container_planningSales #stats  span:hover  { 
    cursor: pointer;
    background-color: var(--color-info-light);
 }

.container_planningSales #stats  h2  { 
    font-size: 2rem;
    text-align: center;
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
}
.container_planningSales #stats  .info  { 
    font-size: 2rem;
    text-align: center;
    margin: 6rem 0 6rem 0;
    font-weight: 200;
    color: var(--color-info-dark);
}

.container_planningSales #stats  h3  { 
    padding-bottom: 0;
    font-size: 14px;
    text-align: center;
    font-weight: 300;
    border-bottom: solid 0.5px  var(--color-info-dark);
}

.container_planningSales #stats  .but  { 
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
}
.container_planningSales #stats  button     { 
    justify-self: center;
    width: 100%;
    border-radius: var(--border-radius-1);
    box-shadow: none;
    color: var(--color-info-light);
    font-size: 1rem;
}
.container_planningSales #stats tr  { 
    cursor: move;
}
.container_planningSales #stats .move  { 
    display: flex;
    width: 0.5rem;
    height: 0.5rem;
    margin-right:1rem ;
    color: var(--color-info-light);
    align-items: center;

}
.container_planningSales #stats .move:hover  { 
    background: none;
    color: var(--color-info-dark);
    cursor: move;
}

.container_planningSales #stats .over {
    opacity: 0.6;
    background-color: var(--color-white);
  }


.container_planningSales #stats  .left  { 
    background-color: var(--color-info-light);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
    margin-left: 0.3rem;
}

.container_planningSales #stats  .right  { 
    margin-left: 0.3rem;
}

.container_planningSales #stats  .left:hover { 
    background: linear-gradient(
                #FF928B,
                #FFAC81);
    color: var(--color-white);
}
.container_planningSales #stats  .right:hover { 
    box-shadow: var(--box-shadow);
    transform: scale(1.02);
    transition: all 300ms ease;
}

/* STEP  */


.step-wizard {
    margin: 0 auto;
}
.step-wizard-list{
    margin: 1rem;
    
    color: #333;
    list-style-type: none;
    border-radius: 10px;
    display: flex;
    padding: 20px 10px;
    position: relative;
    z-index: 10;
}

.step-wizard-item{
    padding: 0 20px;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive:1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 170px;
    position: relative;
}
.step-wizard-item + .step-wizard-item:after{
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    background: var(--color-primary);
    width: 100%;
    height: 2px;
    transform: translateX(-50%);
    z-index: -10;
}
.progress-count{
    height: 40px;
    width:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index:10;
    color: transparent;
}
.progress-count:after{
    content: "";
    height: 40px;
    width: 40px;
    background: var(--color-primary);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}
.progress-count:before{
    content: "";
    height: 10px;
    width: 20px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
    transform-origin: center center;
}
.progress-label{
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}
.current-item .progress-count:before,
.current-item ~ .step-wizard-item .progress-count:before{
    display: none;
}
.current-item ~ .step-wizard-item .progress-count:after{
    height:10px;
    width:10px;
}
.current-item ~ .step-wizard-item .progress-label{
    opacity: 0.5;
}
.current-item .progress-count:after{
    background: #fff;
    border: 2px solid var(--color-primary);
}
.current-item .progress-count{
    color: var(--color-primary);
}

/* ==================================== planing_sales2 ========================= */
.container_planningSales2 {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}

.container_planningSales2 main{
    background: var(--color-background);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    
    margin-top: 6.6rem;
    height:  100%;
}

.container_planningSales2 #grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 32% 32% 32%;
    grid-template-rows: 8rem 10rem 27rem ;
    height: 100vh;
    grid-template-areas: "navigation navigation navigation"
                        "title title title"
                        "stats stats board"
                        ;


}

/* указывает позиции блоков в сетке с помощью координат */
.container_planningSales2 #navigation {
    grid-column: 3; 
    grid-row: 1; 
    margin: 1rem;
    
    

}
.container_planningSales2 #navigation    { 
    grid-area: navigation; 
    align-self: center;
    display: grid;
    grid-template-columns: 1rem auto 1rem;
    margin: 0;  
}

.container_planningSales2 #navigation  .material-icons-sharp  { 
    background-color: white;
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container_planningSales2 #navigation  a:nth-child(1)  { 
    float: left;
    align-self: center;
} 
.container_planningSales2 #navigation  a:nth-last-child(1) {
    float: right;
    align-self: center;
    margin-left: -2rem;  
}

.container_planningSales2 #navigation  .arrow:hover  { 
    transform: scale(1.1);
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);
    
    transition: all 300ms ease;
} 



.container_planningSales2 #title    {
     
    grid-area: title;  
    width: 100%;
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    padding: 1rem;
}
.container_planningSales2 #title   h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.container_planningSales2 #title   small {
    font-size: 1rem;
    color: var(--color-info-dark);
}
.container_planningSales2 #board    { 
    grid-area: board;  
    border-radius: var(--card-border-radius);
    grid-template-columns: auto auto;
    display: grid;
    background-color: var(--color-white);
    justify-content: center;
    box-shadow: var(--box-shadow);
    
}



.container_planningSales2 #board  select  { 
    border: 0.5px solid var(--color-info-dark);
    font-size: 1rem;
    letter-spacing: 0.2px;
    color: var(--color-info-dark);
    padding: 1rem;
    /* background-color: var(--color-warning); */
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);
   
}
.container_planningSales2 #board  form  { 
    margin-top: 2rem;
    display: grid;
    grid-template-rows: 3rem 3rem 3rem;
    row-gap: 1rem;
    align-items: center;
   
}
.container_planningSales2 #board  form h1 { 
    text-align: center;
}
.container_planningSales2 #board  input  { 
    
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.2px;
    height: 3rem;
    border-radius: var(--border-radius-1);
    border: solid 0.5px black;
}

.container_planningSales2 #board  input:hover  { 

    border: solid 0.5px var(--color-primary);
}

.container_planningSales2 #board  button  { 
    margin: 0;
    padding: 1rem;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.2px;
    width: 100%;
    border-radius: var(--border-radius-1);
    
}

.container_planningSales2 #board  button:hover  { 
    transform: scale(1.02);
    transition: all 300ms ease;

}
.container_planningSales2 #stats    { 
    grid-area: stats; 
    background-color: var(--color-white);
    margin: 0;
    padding: var(--card-padding);
    box-shadow: var(--box-shadow);
    border-radius: var(--card-border-radius);
    overflow-y: scroll;
}
.container_planningSales2 #stats form h2  { 
    margin: 0 1rem 0 0;

}


.container_planningSales2 .form_radio_group {
	display: inline-block;
	
}
.container_planningSales2 .form_radio_group-item {
	display: inline-block;
    float: left;    
}
.container_planningSales2 .form_radio_group input[type=radio] {
	display: none;
}
.container_planningSales2 .form_radio_group label {
	display: inline-block;
	cursor: pointer;
	padding: 7px;
	line-height: 20px;
	border: 0.5px solid var(--color-info-dark);
    font-weight: 200;
    font-size: 14px;
    letter-spacing: 0.5px;
    background-color: var(--color-white);
	
}
 
 
/* Checked */
.container_planningSales2 .form_radio_group input[type=radio]:checked + label {
	background: var(--color-primary);
    color: var(--color-white);
}
 
/* Hover */
.container_planningSales2 .form_radio_group label:hover {
	color: #666;
}
 
/* Disabled */
.container_planningSales2 .form_radio_group input[type=radio]:disabled + label {
	background: #efefef;
	color: var(--color-info-dark);
}

.container_planningSales2 .label {
    font-size: 8px;
    color: var(--color-dark);
    font-weight: 200;
  }


.container_planningSales2  .form_radio_group {
    display: flex;
    padding: 2rem;
    margin-top: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container_planningSales2 .help {
    position: relative;
    right: 10;
    top: 0;
    font-size: 1.5rem;
    color: var(--color-white);
    border-radius: 50%;
    padding: 1px;
    background: var(--color-info-dark)
}
.container_planningSales2  .form_radio_group  .cont_help{
    width: 1rem;
}

.container_planningSales2 .help:hover {
    transform: scale(1.1);
    cursor: pointer;
    background: var(--color-dark)
}


.container_planningSales2  .form_radio_group .form_radio_group-item label {
    border: 0.5px solid var(--color-info-dark);  
    width: 5.2rem;
    text-align: center;
}
.container_planningSales2 .form_radio_group2 .form_radio_group-item label {
    width: 6rem;
}
.container_planningSales2  .form_radio_group-item label:hover {
    border: 0.5px solid var(--color-primary);  
}



.container_planningSales2 #stats input    { 
    padding: 10px;
    width: 6rem;
    text-align: center;
}
.container_planningSales2 #stats th    { 
    color: var(--color-info-dark);
    font-size: 0.7rem;
    font-weight: 400;
}
.container_planningSales2 #stats td    { 
    height: 2rem;
    margin: 0;
    padding: 1px;
    max-width: 25rem;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 200;
    color: black;
}

.container_planningSales2 #stats .header_button    { 
    width: 12rem;
    height: 35px;
    margin: 0 1rem 1rem 1rem;
    background-color: var(--color-white);
    border: 0.5px solid var(--color-info-dark);
    border-radius: var(--card-border-radius);

}

.container_planningSales2 #stats .header_button:hover   { 
    cursor: pointer;
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81
);  
}

.container_planningSales2 #stats .sel   { 
    background: rgb(65, 241, 182,0.8);
    color: var(--color-dark);
}
.container_planningSales2 #stats .sel:hover   { 
    background: rgb(65, 241, 182,1);
}

.container_planningSales2 #stats table    { 
    width: 100%;
    
}
.container_planningSales2 .man_plan { 
    display: grid;
    border-radius: var(--border-radius-2);
    background-color: var(--color-white);
    padding: 1rem; 
    align-items: start;
    justify-self: start;
}
.container_planningSales2 .man_plan input{ 
    font-size: 12px;
    text-align: center;
}


.container_planningSales2 #stats  h2  { 
    font-size: 1rem;
    font-weight: 100;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-primary);

}

.container_planningSales2 #stats  .info  { 
    font-size: 2rem;
    text-align: center;
    margin: 6rem 0 6rem 0;
    font-weight: 200;
    color: var(--color-info-dark);
}

.container_planningSales2 #stats  h3  { 
    font-size: 1rem;
    align-self: center;
    font-weight: 100;
    justify-self: center;

}

.container_planningSales2 #stats  .but  { 
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 5px;
    
    
}
.container_planningSales2 #stats  button     { 
    justify-self: center;
    width: 100%;
    border-radius: var(--border-radius-1);
} 

.container_planningSales2 #stats  .delete_man     { 
    background-color: var(--color-white);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
    height: 2rem;
    
    width: 2rem;
}

.container_planningSales2 #stats  .delete_man:hover     { 
    background: linear-gradient(
        #FF928B,
        #FFAC81);
    color: var(--color-white);
    cursor: pointer;
    transition: all 300ms ease;
}

.container_planningSales2 #stats  .left  { 
    background-color: var(--color-info-light);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
}
.container_planningSales2 #stats  .left:hover { 
    background: linear-gradient(
                #FF928B,
                #FFAC81);
    color: var(--color-white);
}
.container_planningSales2 #stats  .right:hover { 
    box-shadow: var(--box-shadow);
    transform: scale(1.02);
    transition: all 300ms ease;
}

/* STEP  */


.container_planningSales2 .step-wizard {
    margin: 0 auto;
}
.container_planningSales2 .step-wizard-list{
    margin: 1rem;
    
    color: #333;
    list-style-type: none;
    border-radius: 10px;
    display: flex;
    padding: 20px 10px;
    position: relative;
    z-index: 10;
}

.container_planningSales2 .step-wizard-item{
    padding: 0 20px;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive:1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 170px;
    position: relative;
}
.container_planningSales2 .step-wizard-item + .step-wizard-item:after{
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    background: var(--color-primary);
    width: 100%;
    height: 2px;
    transform: translateX(-50%);
    z-index: -10;
}
.container_planningSales2 .progress-count{
    height: 40px;
    width:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index:10;
    color: transparent;
}
.container_planningSales2 .progress-count:after{
    content: "";
    height: 40px;
    width: 40px;
    background: var(--color-primary);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}
.container_planningSales2 .progress-count:before{
    content: "";
    height: 10px;
    width: 20px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
    transform-origin: center center;
}
.container_planningSales2 .progress-label{
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}
.container_planningSales2 .current-item .progress-count:before,
.current-item ~ .step-wizard-item .progress-count:before{
    display: none;
}
.container_planningSales2 .current-item ~ .step-wizard-item .progress-count:after{
    height:10px;
    width:10px;
}
.container_planningSales2 .current-item ~ .step-wizard-item .progress-label{
    opacity: 0.5;
}
.container_planningSales2 .current-item .progress-count:after{
    background: #fff;
    border: 2px solid var(--color-primary);
}
.container_planningSales2 .current-item .progress-count{
    color: var(--color-primary);
}

/* ==================================== planing_sales3 ========================= */
.container_planningSales3 {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}

.container_planningSales3 main{
    
    padding: var(--card-padding);
    margin-top: 1rem;
    margin-top: 6.6rem;
    height:  100%;
}

.container_planningSales3 #grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 33% 33% 32%;
    grid-template-rows: 8rem 10rem 45rem ;
    height: 100vh;
    grid-template-areas: "navigation navigation navigation"
                        "title title title"
                        "stats stats stats"
                        ;


}

/* указывает позиции блоков в сетке с помощью координат */
.container_planningSales3 #navigation {
    grid-column: 3; 
    grid-row: 1; 
    margin: 1rem;
    
    

}
.container_planningSales3 #navigation    { 
    grid-area: navigation; 
    
    align-self: center;
    display: grid;
    grid-template-columns: 1rem auto 1rem;
}

.container_planningSales3 #navigation  a:nth-child(1)  { 
    float: left;
    align-self: center;
} 
.container_planningSales3 #navigation  a:nth-last-child(1) {
    float: right;
    align-self: center;
}


.container_planningSales3 #title    {
    grid-area: title;  
    margin: 1rem; 
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    width: 100%;
    padding: 2rem;
}
.container_planningSales3 #title   h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.container_planningSales3 #title   small {
    font-size: 1rem;
    color: var(--color-info-dark);
}
.container_planningSales3 #board    { 
    grid-area: board;  
    grid-column: 1,2; 
    grid-row: 3; 
    margin-left: 3rem;
    border-radius: var(--border-radius-1);
    grid-template-columns: auto auto;
    display: grid;
    gap: 2rem;

}

.container_planningSales3 #board  select  { 
    border: 0.5px solid var(--color-info-dark);
    font-size: 1rem;
    letter-spacing: 0.2px;
    color: var(--color-info-dark);
    padding: 1rem;
    /* background-color: var(--color-warning); */
    color: white;
    background: linear-gradient(
                #FF928B,
                #FFAC81);
}

.container_planningSales3 #board  form  { 
    margin-top: 1rem;
    display: grid;
    grid-template-rows: 3rem 3rem 3rem;
    row-gap: 1rem;
   
}
.container_planningSales3 #board  form h1 { 
    text-align: center;
}
.container_planningSales3 #board  input  { 
    
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.2px;
    height: 3rem;
    border-radius: var(--border-radius-1);
    border: solid 0.5px black;
    

}
.container_planningSales3 #board  button  { 
    margin: 0;
    padding: 1rem;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.2px;
    width: 100%;
    border-radius: var(--border-radius-1);
    
}

.container_planningSales3 #board  button:hover  { 
    transform: scale(1.1);
    transition: all 300ms ease;

}
.container_planningSales3 #stats    { 
    grid-area: stats; 
    /* background-color: var(--color-background); */
    padding: 0;
    width: 100%;
    border-radius: var(--card-border-radius);
    overflow-y: scroll;
}
.container_planningSales3 #stats .man_plan_block    { 
    display: flex;
    overflow: scroll;

}

.container_planningSales3 #stats  th  { 
    font-size: 0.7rem;
    font-weight: 300;
    color: black;
    letter-spacing: 0.5px; 
}

.container_planningSales3 #stats  td  { 
    font-size: 1rem;
    font-weight: 200;
    color: var(--color-info-dark);
    letter-spacing: 0.5px; 
    
}

.container_planningSales3 #stats  input  { 
    text-align: center;
    padding: 0.5rem;
    border: 0.5px solid var(--color-info-dark);
    border-radius: var(--border-radius-2);
    
}

.container_planningSales3 .man_plan { 
    display: grid;
    border-radius: var(--card-border-radius);
    background-color: var(--color-white);
    padding: 1rem; 
    align-self: start;
    justify-self: center;
    margin: 1rem 1rem 1rem 0;
}


.container_planningSales3 #stats  h2  { 
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.container_planningSales3 #stats  .info  { 
    font-size: 2rem;
    text-align: center;
    margin: 6rem 0 6rem 0;
    font-weight: 200;
    color: var(--color-info-dark);
}

.container_planningSales3 #stats  h3  { 
    font-size: 1rem;
    align-self: center;
    font-weight: 100;
    justify-self: center;

}

.container_planningSales3 #stats  .but  { 
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 5px;
    
    
}
.container_planningSales3 #stats  button   { 
    margin: 2rem 0 1rem 0;
    width: 15rem;
    height: 3rem;
    border-radius: var(--card-border-radius);
    background-color: rgb(65, 241, 182,0.7);
    color: var(--color-dark);
    font-size: 1rem;
    border: 0.5px solid var(--color-info-dark);
} 

.container_planningSales3 #stats  form   { 
    
    justify-content: center;
    align-items: center;
} 

.container_planningSales3 #stats  button:hover   { 

    background-color: rgb(65, 241, 182,1);
    color: var(--color-white);
} 

.container_planningSales3 #stats  .delete_man     { 
    background-color: var(--color-white);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
    height: 1.5rem;
    margin: 1rem;
}

.container_planningSales3 #stats  .delete_man:hover     { 
    background: linear-gradient(
        #FF928B,
        #FFAC81);
    color: var(--color-white);
    cursor: pointer;
    transition: all 300ms ease;
}

.container_planningSales3 #stats  .left  { 
    background-color: var(--color-info-light);
    color: var(--color-dark);
    border: 0.5px solid var(--color-dark);
}
.container_planningSales3 #stats  .left:hover { 
    background: linear-gradient(
                #FF928B,
                #FFAC81);
    color: var(--color-white);
}
.container_planningSales3 #stats  .right:hover { 
    box-shadow: var(--box-shadow);
    transform: scale(1.02);
    transition: all 300ms ease;
}

/* STEP  */


.container_planningSales3 .step-wizard {
    margin: 0 auto;
}
.container_planningSales3 .step-wizard-list{
    margin: 1rem;
    background-color: var(--color-background);
    color: #333;
    list-style-type: none;
    border-radius: 10px;
    display: flex;
    padding: 20px 10px;
    position: relative;
    z-index: 10;
}

.container_planningSales3 .step-wizard-item{
    padding: 0 20px;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive:1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 170px;
    position: relative;
}
.container_planningSales3 .step-wizard-item + .step-wizard-item:after{
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    background: var(--color-primary);
    width: 100%;
    height: 2px;
    transform: translateX(-50%);
    z-index: -10;
}
.container_planningSales3 .progress-count{
    height: 40px;
    width:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index:10;
    color: transparent;
}
.container_planningSales3 .progress-count:after{
    content: "";
    height: 40px;
    width: 40px;
    background: var(--color-primary);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}
.container_planningSales3 .progress-count:before{
    content: "";
    height: 10px;
    width: 20px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
    transform-origin: center center;
}
.container_planningSales3 .progress-label{
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}
.container_planningSales3 .current-item .progress-count:before,
.current-item ~ .step-wizard-item .progress-count:before{
    display: none;
}
.container_planningSales3 .current-item ~ .step-wizard-item .progress-count:after{
    height:10px;
    width:10px;
}
.container_planningSales3 .current-item ~ .step-wizard-item .progress-label{
    opacity: 0.5;
}
.container_planningSales3 .current-item .progress-count:after{
    background: #fff;
    border: 2px solid var(--color-primary);
}
.container_planningSales3 .current-item .progress-count{
    color: var(--color-primary);
}

/*========================AUDIT==============================*/

.container_audit {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}

/* .container_audit .vscomp-toggle-button {
    margin-top: 2rem;
    border-radius: var(--border-radius-2);
} */

/* .container_audit main button {
    margin: 2rem 0 0 2rem;
    border-radius: var(--border-radius-2);
    padding: 0;
    width: 10rem;
    background-color: var(--color-white);
    border: 0.5px solid var(--color-info-dark);
    color: black;
} */

.container_audit main button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);

}
.container_audit .skills_block {

    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    margin: 1rem;
    margin-bottom: 1rem;
    margin-left: 0;
    width: 81vw;
    height: 30rem;
    overflow: scroll;
}

.container_audit .sales_block{
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-bottom: 1rem;
    
}

.container_audit .insights {
    display: grid;
    width: 98%;
    grid-template-columns: 50% 50%;
    width: 80vw;
   
}
.container_audit .close {
    
    
    overflow-y: scroll;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 50rem;
   
}
.container_audit .can_close {
    
    
    overflow-y: scroll;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 50rem;
}

.container_audit .header {
    font-weight: 500;
    font-size: 10px;
    height: 2rem;
    width: 6rem;
    text-align:center;
    color: black;
    background-color: var(--color-primary);
    padding: 0.2rem;
    border-radius: var(--border-radius-1);
}
.container_audit td {
    border-radius: var(--border-radius-1);
    text-align:center;
    color: var(--color-info-dark);
    border: 0.5px solid var(--color-info-dark);
}
.container_audit th {
    border-radius: var(--border-radius-1);
    border: 0.5px solid var(--color-info-dark);
    color: var(--color-dark);
}

.container_audit h4 {
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 1px;
}
.container_audit .small {
    color: var(--color-info-dark);
    margin: 0 0 1rem 0;
}
.container_audit .success {
    background-color: var(--color-success);
    opacity: 0.6;
    color: black;
}

.container_audit .danger {
    background-color: var(--color-danger);
    opacity: 0.6;
    color: black;
}

.container_audit .primary {
    /* background: linear-gradient(90deg,#a64fc5,#4f54e6); */
    background: var(--color-white);
    color: var(--color-dark);
    

}
.container_audit  th {
    min-width: 5rem;
    max-width: 5rem;

    overflow-x: scroll;

}    

.container_audit  .header {
    color: var(--color-dark);
    font-weight: 200;
    font-size: 14px;
}
.container_audit .sales {
    display: flex;
    /* height: 24rem; */
    padding: 1rem 0 1rem 1rem;
    overflow: scroll;
    justify-content: start;
    align-items: center;
    border-bottom: 0.5px solid var(--color-info-light);
}

.container_audit form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--card-padding);
}

.container_audit .box button {
    margin: 0 1rem 0 1rem;
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    width: 15rem;
    height: 100%;
    color: var(--color-white);
    font-weight: 500;
    font-size: 14px;
    padding: 0.6rem;
    text-align: center;
}

.between_date {
    margin: 0 0 0 1rem;
    width: 15rem;
    height: 100%;
    color: var(--color-dark);
    font-weight: 500;
    font-size: 14px;
    padding: 0.6rem;
    text-align: center;
    border-radius: var(--border-radius-2);
    border: 0.5px solid var(--color-dark);
}
.container_audit .box .between_date:focus, .between_date:hover {
    cursor: pointer;
    border: 0.5px solid var(--color-info-light);
}

.container_audit .box .vscomp-toggle-button {
    margin: 0 1rem 0 1rem;
    width: 15rem;
    height: 100%;
    color: var(--color-dark);
    font-weight: 500;
    font-size: 14px;
    padding: 0.6rem;
    text-align: center;
    border-radius: var(--border-radius-2);
    border: none;
}



/*------------------------- ОТЧЕТ МЕНЕДЖЕРОВ -------------------------*/
.page_managers {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}
.page_managers main {
    margin: 0 auto;
    width: 100%;
}

.page_managers .header-warning {
    margin: 2rem 0 0rem 0;
    padding: 1rem;
    border: 0.5px solid var(--color-info-dark);
    border-radius: var(--border-radius-2);
   
    background: linear-gradient(
        #FF928B,
        #FFAC81
    );
    color: var(--color-dark);
    max-width: 100%;
    
}
.page_managers .header-warning h1{
    white-space: normal;
    font-weight: 300;
    max-width: 90%;
    
}
.page_managers .login {
    display: grid; 
    align-items: flex-start; 
    justify-content: start;
    width: 100%;
    height: 100vh;
    grid-template-columns: 40% auto;
    gap: 2rem;
    margin: 0 auto;
    margin-top: 5rem;
 
}
   

.page_managers .loginForm { 
    width: 100%;
    padding: 2rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    letter-spacing: 1px;
    background-color: var(--color-white);
    margin: 0 auto;
}
.page_managers .loginForm .progress{ 
    font-size:  1.2rem;
    color: var(--color-primary);
    font-weight: 600;
}
.page_managers .loginForm .progress_success{ 
    font-size:  1.2rem;
    color: var(--color-success);
    font-weight: 600;
}
.page_managers .loginForm .progress_danger{ 
    font-size:  1.2rem;
    color: var(--color-danger);
    font-weight: 600;
}

.page_managers .form_input {
    margin: 0.5rem;
    font-size: 12px;
}    

.page_managers form {
    align-self: flex-start;
    justify-self: start;
} 


.form_input,
.form_button {
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
}

.loginForm .form_title {
    text-align: center;
    margin-bottom: 32px;
    font-weight: 1000;
    font-size: 2.2rem;
    background-image: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.form_group {
    position: relative;
    margin-bottom: 32px;
    
}

.form_label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #9e9e9e;
    transition: all 300ms ease;
}


.page_managers .loginForm .form_input {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background-color: transparent;
    outline: none;
    transition: all 300ms ease;
}

.page_managers .loginForm .vscomp-toggle-button {
    max-width: 110%;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background-color: transparent;
    outline: none;
    transition: all 300ms ease;
    font-size: 12px;
    font-weight: 500;
    margin: 0.5rem;
}

.page_managers .loginForm .vscomp-ele{
    max-width: 110%;
}
.page_managers .loginForm .vscomp-arrow {
    width: 10px;

    
}


.form_input:focus {
    border-bottom: 1px solid #1a73a8;
}

.form_button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(90deg,#a64fc5,#4f54e6);

    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

.form_button:hover {
    transform: scale(1.1); /* Увеличиваем масштаб */
}

.form_input:focus ~ .form_label,
.form_input:not(:placeholder-shown) ~ .form_label {
    top: -18px;
    font-size: 12px;
    color: #e0e0e0;
}

/*========================GENERATE TASKS==============================*/
.container_generate_task {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}

.container_generate_task main {
    margin: 7rem 0 0 3rem;

}
.container_generate_task .skills_block {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.container_generate_task .skills_block2 {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.container_generate_task .sales_block{
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.container_generate_task .insights {
    
    display: grid;
    grid-template-columns: repeat(4, 20fr);
    gap: 1rem;
}

.container_generate_task .insights_mid {
    display: grid;
    grid-template-columns: repeat(2, 20fr);
    gap: 1rem;
}

.container_generate_task .insights_mid .skills_block2 button {
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: 5px;
    width: 100%;
    margin: 1rem 0 1rem 0 ;
    height: 100%;
    font-size: 1.4rem;
    font-weight: 200;
    padding: 0.5rem;
}
.container_generate_task .insights_mid .skills_block button {
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: 5px;
    margin-bottom: 1rem;
    width: 100%;
    margin: 0;
    height: 100%;
    font-size: 1.4rem;
    font-weight: 200;
    padding: 0.5rem;
}
.container_generate_task .insights_mid .skills_block2 button:hover {
    
    transform: scale(1.02);
}
.container_generate_task .insights_mid .skills_block button:hover {
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    transform: scale(1.02);
}

.container_generate_task .insights_mid .skills_block2 select {
    background-color: var(--color-info-light);
    border-radius: 5px;
    margin-bottom: 1rem;
    width: 15rem;
    height: 2.7rem;
}
.container_generate_task .insights_mid .skills_block2 select:hover {
    background-color: var(--color-background);
    cursor: pointer;
}

.container_generate_task .insights_mid .skills_block2 .text_task {
    
    border-radius: var(--border-radius-3);
    padding: 1rem;
    height: 26rem;
}

.container_generate_task .sales {
    cursor: pointer;
}
.container_generate_task .sales .top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.container_generate_task .sales .top h2 {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 1rem;
    color: var(--color-info-dark);
}

.container_generate_task .insights  h3 {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    color: var(--color-info-dark);
}


.container_generate_task .insights_mid  h3 {
    font-size: 14px;
    margin-bottom: 1rem;
    font-weight: 400;
    display: flex;
    color: var(--color-info-dark);
}


.container_generate_task .sales span {
    font-size: 1.5rem;
}
.container_generate_task .sales span:hover {
    transform: scale(1.1);
    transition: all 300ms ease;
}

.container_generate_task label,
textarea {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--color-info-dark);
    font-weight: 300;
}

.container_generate_task label {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 400;
    color: var(--color-dark);
}
.container_generate_task textarea {
    padding: 10px;
    max-width: 100%;
    line-height: 1.5;
    border-radius: 5px;
    border: 0.5px solid var(--color-info-light);
    margin-bottom: 1rem;
    
}
.container_generate_task textarea:hover,
.container_generate_task textarea:focus
 {
    cursor: text;
    border: 0.5px solid var(--color-dark);
    border-style: solid;
}

.container_generate_task label {
    display: block;
    margin-bottom: 10px;
}

/*========================TRACKING TASKS==============================*/

.container_tracking_tasks {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto;
}


.container_tracking_tasks .skills_block {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    margin-top: 1.4rem;
    margin-bottom: 1rem;
    position: relative;
}

.container_tracking_tasks .skills_block input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity:0;
    visibility: 0;
  }
.container_tracking_tasks .skills_block h1{
    position: relative;
  }
.container_tracking_tasks .skills_block label::before{
    content:"";
    display: inline-block;
    border: 15px solid transparent;
   
  }
.container_tracking_tasks .skills_block label{
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
  } 
.container_tracking_tasks .skills_block label:hover{
    transform: scale(1.05);
    color: var(--color-primary);
    transition: all 300ms ease;
  } 

.container_tracking_tasks .skills_block .skills_block_main{
    max-height:0px;
    overflow: hidden;
    transition:max-height 0.5s;
    background-color: white;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-2);
  }


.container_tracking_tasks .skills_block input:checked  ~ .skills_block_main{
    max-height:100%;
  }


.container_tracking_tasks .skills_block h3{
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    
}
.container_tracking_tasks .skills_block small{
    color:var(--color-info-dark);
    font-size: 0.7rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.container_tracking_tasks .skills_block_main {
    display: grid;
    grid-template-columns: 20rem auto 20rem;
}

.container_tracking_tasks .skills_block_header {
    margin: 1rem;
    display: flex;
}

.container_tracking_tasks .manager_tasks_left span {
    background: var(--color-primary);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 3rem;
    margin-left: 40%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    
}


.container_tracking_tasks .manager_tasks_left  {
    padding: 2rem;
}


.container_tracking_tasks .manager_tasks_center span {
    background: var(--color-danger);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 3rem;
    margin-left: 45%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}


.container_tracking_tasks .manager_tasks_center  {

    border-left: 0.5px solid var(--color-dark-variant);
    border-right: 0.5px solid var(--color-dark-variant);
    padding: 2rem;
}


.container_tracking_tasks .manager_tasks_right span {
    background: var(--color-success);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 3rem;
    margin-left: 40%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.container_tracking_tasks .manager_tasks_right  {
    padding: 2rem;
}
.container_tracking_tasks main{
    margin-top: 5.5rem;
}

/* ===========================MAIN===========================*/



.container1 form {
    margin: 0 auto;
    padding: 1rem 0 0 0;
}

.container1 .vscomp-toggle-button {
    border-radius: var(--border-radius-2);
}
.container1 button {
    border-radius: var(--border-radius-2);
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid #ddd;
    color: var(--color-info-dark);
    padding: 7px 7px 7px 7px;
    width: 6rem;
    height: 2.5rem; 
    box-shadow: var(--box-shadow);
}

.container1 button:hover {
    background-color: var(--color-primary);
    cursor: pointer;
    color: var(--color-white);
    box-shadow: none;
}

.container1 main  {
    margin-top: 0.7rem;
}


main .index_date .select_man {
    color: none;
    border: none;
    font-size: 14px;
    display: inline-block;
    
    border-radius: var(--border-radius-1);
    margin-top: 3rem;
    padding: 2rem;
}


main .index_date input[type='date'] {
    background: transparent;
    color: var(--color-dark);
    padding: 1rem;
}

main .insights {
    
    display: grid;
    grid-template-columns: repeat(3, 20fr);
    gap: 1.6rem;
    /* margin-top: 2.7rem; */

}

main .insights > div {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    /* margin-top: 1rem; */
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    
}

main .insights > div:hover {
    box-shadow: none;

}

main .insights > div span {
    background: var(--color-primary);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 2rem;
}

main .insights > div.expenses span {
    background: var(--color-danger);
}

main .insights > div.income span {
    background: var(--color-success);
}

main .insights > div .middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main .insights h3 {
    margin: 1rem 0 0.6rem;
    font-size: 1rem;
}




main .insights .progress {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius:var(--border-radius-2);
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    color: var(--color-white);
    justify-content: space-around;
    align-items: center;

    width: 7rem;
    height: 5rem;
}
main .insights .progress h3 {
    font-size: 0.9rem;
    padding: 0;
    margin: 0 auto;
}
main .insights .progress small {
    margin: 0 auto;
}

main .insights .progress_man {
    position: relative;
    width: 15px;
    height: 15px;
    
    border-radius: 10%;
}

main .insights svg {
    width: 7rem;
    height: 7rem;
}


main .insights svg circle {
    width: 7rem;
    height: 7rem;
}

main .insights svg circle {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 14;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: 110;
    stroke-dashoffset: 92;
}

main .insights .sales svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 10;
}

main .insights .expenses svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 20;
}

main .insights .income svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 30;
}

main .insights .progress .number {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

main .insights small {
    margin-top: 1.3rem;
    display: block;
}


/* ===========================MAIN MANAGERS===========================*/

main {
    margin-top: 1.4rem;
}

.page_manager{
    filter: blur(10px);
}

main .insights_managers {
    display: grid;
    grid-template-columns: repeat(4, 10fr);
    gap: 1.6rem;
    

}

main .insights_managers > div {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    
}

main .insights_managers > div:hover {
    box-shadow: none;
    
}

main .insights_managers > div span {
    background: var(--color-primary);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 2rem;
}

main .insights_managers > div.expenses span {
    background: var(--color-danger);
}

main .insights_managers > div.income span {
    background: var(--color-success);
}

main .insights_managers > div .middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main .insights_managers .h4{
    margin: 1rem 0 0.6rem;
}

main .insights_managers h3 {
    margin: 1rem 0 0.6rem;
    font-size: 1rem;
    font-weight: 400;
}

main .insights_managers h2 {
    margin: 1rem 0 0.9rem;
    font-size: 2rem;
}

main .insights_managers .name_manager {
    display: flex;
    gap: 1rem;
}
main .insights_managers .progress {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    margin-top: 1.7rem;
    margin-left: 1.7rem;
}


/* main .insights_managers svg {
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: var(--border-radius-3);
} */


/* main .insights_managers svg circle {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: 110;
    stroke-dashoffset: 92;
}

main .insights_managers .sales svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 10;
}

main .insights_managers .expenses svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 20;
}

main .insights_managers .income svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 30;
} */

main .insights_managers .progress .number {
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: var(--border-radius-3);
    height: 100%;
    width: 10rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
main .insights_managers .progress .number h1 {
    color: var(--color-white)
}
main .insights_managers .progress .number h1 {
    font-weight: 600;
}

main .insights_managers .add_managers  {

    border: 2px dashed var(--color-primary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

main .insights_managers .add_managers .add{
    display: flex;
    margin: 2rem auto;
    gap: 0.7rem;
}

main .insights_managers .add_managers .add h3{
    color: var(--color-primary)
}

main .insights small {
    margin-top: 1.3rem;
    display: block;
}

main .insights small:hover {
    color: var(--color-dark);
    cursor: pointer;
    margin-left: 1rem;
    transition: all 300ms ease;

}

/*=====================SCORE SKILLS==================*/

.container_score_skills {

        display: grid;
        width: 96%;
        margin: 0 auto;
        background: var(--color-background);
        gap: 1.8rem;
        grid-template-columns: 14rem auto 13rem;
}

.container_score_skills .right .recent-updates{

    margin-top: 5rem;
    display: flex;
    height: 400px;
}
.container_score_skills .right .recent-updates h2{

    font-weight: 400;
}

.container_score_skills .right .recent-updates .updates{
    margin-top: 0.5rem;
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 270px;
    
}

.container_score_skills .right .recent-updates .filter_box{

    margin: 0 auto;
    padding: 0.5rem;
}

.container_score_skills .right .recent-updates .filter_box .select_man {
    margin-top: 0 auto;
    width: 100%;
    height: 2rem;
    background: var(--color-light);
}

.container_score_skills .right .recent-updates .filter_box .select_man:hover {
    cursor: pointer;
    background: white;
    transform: scale(1.02);
}


.scoreSkills {
    position: relative;
    width: 100%;
    display: inline-block;
    height: 730px;
}

.scoreSkills h2 {
    margin-bottom: 0.8rem;
}

.scoreSkills table {
    
    background: var(--color-white);
    text-align: center;
    transition: all 300ms ease;
    
    width: 100%;
    table-layout: fixed;
    margin-top: 0.8rem;
    padding-top: 50px;

    border-spacing: 4px 4px;

}

.scoreSkills table:hover {
    box-shadow: none;
}

.scoreSkills table tbody td {
    height: 150%;
    border-bottom: 1px solid var(--color-light);
    border-spacing: 0;
    
    text-align: center;
    padding: 1px 1px;
  
}
.scoreSkills table tr{
    text-align: right;
    
  
}
.scoreSkills table thead th{
    height: 20px;
    transform: rotate(270deg);
    white-space: nowrap;
    font-weight: 400;
    font-size: 12px; 
    padding: 1rem;  
}

.scoreSkills table thead th:first-child{
    transform: rotate(0deg);
}

.scoreSkills table tbody tr:last-child td {
    border: none;  
}

.container1 .scoreSkills {
  
    padding: 0.5rem 0.5rem 0.5rem 0; 
}

.container1 .scoreSkills h2{
  
    margin: 1.5rem; 
}


/*=====================Recent Orders==================*/



main .recent-orders {
    margin-top: 2rem;  
}

main .recent-orders .help{
    margin-top: 2rem;  
    right: 10px;
    top: -15px;
}

main .recent-orders h2 {
    margin-bottom: 0.8rem;
    
}

main .recent-orders table {
    background: var(--color-white);
    width: 100%;
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    max-height: 30rem;
    overflow-y: scroll;  
}
main .recent-orders  {

    
    overflow-y: scroll;  
    border-radius: var(--card-border-radius);
}

main .recent-orders table:hover {
    box-shadow: none;
}

main table tbody td {
    height: 2.8rem;
    border-bottom: 1px solid var(--color-light);
    color: var(--color-dark-variant);
    
}

/* main table tbody tr:last-child td {
    border: none;  
} */

main .recent-orders a {
    text-align: center;
    display: block;
    margin: 1rem auto;
    color: var(--color-primary)
}


/*===================== Right ==================*/



.right {
    margin-top: 1.4rem;
    align-items: center;
}

.right .top {
    display:flex;
    align-items: center;
    gap: 2rem;
    
}

.right .top button {
    display: relative;
    width: 10rem;
    background: linear-gradient(
        #FF928B,
        #FFAC81
    );
    color: var(--color-dark);
    font-size: 16px;
}
.right .top button:hover {
    transform: scale(1.02);
    color: var(--color-white);
    transition: all 300ms ease;
}

.right .theme-toggler {
    background: var(--color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.6rem;
    width: 4.2rem;
    cursor: pointer;
    border-radius: var(--border-radius-1);
}

.right .theme-toggler span{
    font-size: 1.2rem;
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right .theme-toggler span.active {
    background: var(--color-primary);
    color: white;
    border-radius: var(--border-radius-1);
}

.right .top .profile {
    display: flex;
    gap: 2rem;
    text-align: right;
}

/*===================== Новости ==================*/

.right .recent-updates {
    margin-top: 1.6rem;

    
}

.right .recent-updates h2{
    margin-bottom: 1rem;
    
}

.right .recent-updates .updates {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 205px;

    overflow-y: scroll;
}

.right .recent-updates .updates:hover {
    box-shadow: none;

}

.right .recent-updates .updates .update {
    display: grid;
    grid-template-columns: 2.6rem auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

/*===================== Уровни навыков ==================*/

.right .sales-analytics {
    margin-top: 2rem;
}

.right .sales-analytics h2 {
    margin-bottom: 0.8rem;
}

.right .sales-analytics .item {
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    padding: 1.4rem var(--card-padding);
    border-radius: var(--border-radius-3);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

.right .sales-analytics .item:hover {
    box-shadow: none;
}

.right .sales-analytics .item .right {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 0;
    width: 100%;
}

.right .sales-analytics .item .icon {
    padding: 0.6rem;
    color: var(--color-white);
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
}

.right .sales-analytics .item.offline .icon {
    background: var(--color-danger);
}

.right .sales-analytics .item.customers .icon {
    background: var(--color-success);
}

.right .sales-analytics .add-product {
    background-color: transparent;
    border: 2px dashed var(--color-primary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.right .sales-analytics .add-product div{
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.right .sales-analytics .add-product div h3 {
    font-weight: 600;
}

/*===================== Уровни этапов SKILLS ==================*/


main .sales-analytics .item {
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    padding: 1.4rem var(--card-padding);
    border-radius: var(--border-radius-3);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

.cards {
    display: flex;


    /* Put a card in the next row when previous cards take all width */
    flex-wrap: wrap;

    margin-left: -8px;
    margin-right: -8px;
}

.cards__item {
    /* There will be 4 cards per row */
    flex-basis: 25%;

    padding-left: 8px;
    padding-right: 8px;
}

/*===================== PROGRESS BAR  SKILLS MAIN PAGE==================*/


.container_skills{
    margin-top: 3rem;
    width: 100%;
    height: 86vh;
    padding: var(--card-padding);
    background: var(--color-white);
    border: 2px solid rgba(255,255,255,0.06);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(10px);
   
    
    overflow-y: scroll;


}


.container1 .main_chart {
    margin-bottom: 2.5rem;
    height: 15rem;
    /* background: var(--color-white); 
    border: 2px solid rgba(255,255,255,0.06); 
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(10px);
    padding: var(--padding-1); */
    
}

.container1 .main_chart .h-64 {
    height: 25rem;
}

.container1 .main_chart .h-64 .canvas {
    height: 25rem;
}

.container_skills *{
    
    
    font-weight: 500;
}
.container_skills h2{
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 14px;
    color: var(--color-info-dark);
    text-align: center;
    vertical-align: middle;
}
.container_skills h4{
    padding: 0.2rem;
    margin-bottom: 0.5rem;
    color: var(--color-info-dark);
}
.container_skills span{
    vertical-align: middle;
    font-size: 32px;
    font-weight: 800;
}
.container_skills .recomend_upgrade {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var(--color-danger);
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: var(--border-radius-3);
    margin: 2.5rem 0 2.5rem 1rem;
    height: 10rem;
}
.container_skills .recomend_upgrade h1 {
    color: var(--color-white);
    
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    font-size: 1rem;
    padding: 10px;
}

.container_skills .recomend_upgrade h2 {
    color: var(--color-white);
    padding: 5px;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 18px;
    text-align: center;
}

.container_skills .recomend_upgrade:hover {
    transform: scale(1.05);
    cursor: pointer;
    transition: all 500ms;
    box-shadow: var(--box-shadow);
}
.skills:not(:last-child){
    margin-bottom: 15px;
}
.details{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}
progress{
    position: relative;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    backdrop-filter: blur(10px);
}
progress{

    width: 98%;
    height: 10px;
    border-radius: 10px;
    background-color: var(--color-white);
    
}
progress:hover{
    cursor: pointer;
    box-shadow: 0 0 5px var(--color-primary);
}

progress::-webkit-progress-value {
    background: var(--color-primary);
  }
  
progress::-webkit-progress-bar {
    background: var(--color-white);
  }  
  /*===================== TASKS PAGE==================*/
.container_page_tasks {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 14rem;
}

.container.container_page_tasks main .insights  { 
    margin-top: 0;
}
.container.container_page_tasks main .insights .income  { 
    border: 1px solid var(--color-success);
}

.container.container_page_tasks main .insights .expenses {
    border: 1px solid var(--color-danger);
}

.container.container_page_tasks main .insights .primary {
    border: 1px solid var(--color-primary);
}

.container.container_page_tasks main .insights .header_card  {  
    display: inline-block;
    overflow-y: scroll;
    width: 17rem;
    height: 500px;
    position: relative;
}
.container.container_page_tasks main .insights .header_card form {  
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.container.container_page_tasks main .insights .header_card .filter_box {  
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.container.container_page_tasks main .insights .header_card textarea {  
    background-color: var(--color-light);
    border-radius: var(--border-radius-2);
    margin: 1rem 0 1rem 0;
    height: 80%;
    width: 100%;
    padding: 10px;
}
.container.container_page_tasks  textarea {  
    background-color: var(--color-light);
    border-radius: var(--border-radius-2);
    margin: 1rem 0 1rem 0;
    height: 5rem;
    width: 100%;
    padding: 10px;
} 

.container.container_page_tasks  .chat_text {  
    background-color: var(--color-light);
    border-radius: var(--border-radius-2);
    margin: 1rem 0 1rem 0;
    height: 5rem;
    width: 100%;
    padding: 10px;
}
.container.container_page_tasks main .insights .header_card button {  
    margin: 0 auto;
    position: absolute;
    bottom: 0px;
    margin-left: 5rem;
    margin-right: 5rem;
    
   
}

.container.container_page_tasks main .insights .header_card h3  {  
    font-weight: 300;
}

.container_page_tasks .right .recent-updates .filter_box .select_man {
    margin-top: 0 auto;
    width: 100%;
    height: 2rem;
    background: var(--color-light);
}

.container_page_tasks .right .recent-updates .filter_box .select_man:hover {
    cursor: pointer;
    background: white;
    transform: scale(1.02);
}
.container_page_tasks .right .recent-updates .filter_box{

    margin: 0 auto;
    padding: 0.5rem;
}

.container_page_tasks .right .recent-updates .updates{
    margin-top: 2.5rem;
}
.container_page_tasks  .recent-updates .updates2{ 
    margin-top: 1rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 26rem;

}

.container_page_tasks  .recent-updates .updates2 .box_date_tasks{ 

    height: 280px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, 2fr);
    gap: 0.5rem;
    overflow-y: scroll;
    margin: 2rem 0 2rem 0;
}



.container_page_tasks  .recent-updates .box_date_tasks div{ 
    background-color: var(--color-light);
    /* Размещаем контейнеры по центру */
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: var(--border-radius-2);
}

.container_page_tasks  .recent-updates .box_date_tasks div h4{ 
    font-weight: 200;
}

.container_page_tasks  .recent-updates .box_date_tasks  .success_date{ 
    border: 2px solid var(--color-success);
}

.container_page_tasks  .recent-updates .box_date_tasks  .danger_date{ 
    border: 2px solid var(--color-danger);
}
.container_page_tasks  .recent-updates .updates2  h2{ 
    color: var(--color-info-dark);
    font-size: 18px;
    font-weight: 400;
}
.container_page_tasks  .recent-updates .box_date_tasks div:hover{ 
    transform: scale(1.05);
    cursor: pointer;
}
.container_page_tasks .right .recent-updates .filter_box input{
    background-color: var(--color-light);
    padding: 1rem;
    width: 10rem;
    height: 20px;
    margin: 0 auto;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-1);
}
.container_page_tasks .right .recent-updates .filter_box input:hover{
    cursor: pointer;
    transform: scale(1.05);
}

/*==================PERSON TASK PAGE=====================*/
/*===================== TASKS PAGE==================*/
.container_page_person_tasks {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 14rem;
}

.container.container_page_person_tasks main .insights  { 
    margin-top: 0;
}
.container.container_page_person_tasks main .insights .income  { 
    border: 1px solid var(--color-success);
}

.container.container_page_person_tasks main .insights .expenses {
    border: 1px solid var(--color-danger);
}

.container.container_page_person_tasks main .insights .primary {
    border: 1px solid var(--color-primary);
}

.container.container_page_person_tasks main .insights .header_card  {  
    display: inline-block;
    overflow-y: scroll;
    width: 17rem;
    height: 500px;
    position: relative;
}
.container.container_page_person_tasks main .insights .header_card form {  
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.container.container_page_person_tasks main .insights .header_card .filter_box {  
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.container.container_page_person_tasks main .insights .header_card textarea {  
    background-color: var(--color-light);
    border-radius: var(--border-radius-2);
    margin: 1rem 0 1rem 0;
    height: 80%;
    width: 100%;
    padding: 10px;
}
.container.container_page_person_tasks  textarea {  
    background-color: var(--color-light);
    border-radius: var(--border-radius-2);
    margin: 1rem 0 1rem 0;
    height: 3rem;
    width: 100%;
    padding: 10px;
} 

.container.container_page_person_tasks  .chat_text {  
    background-color: var(--color-light);
    border-radius: var(--border-radius-2);
    margin: 1rem 0 0 0;
    height: 10rem;
    width: 100%;
    padding: 5px;
    overflow-y: scroll;
}

.container.container_page_person_tasks .right .form_button_select {  
    background-color: var(--color-primary);
    border-radius: var(--border-radius-2);
    margin: 0 auto;
    width: 100%;
   
}
.container.container_page_person_tasks main .insights .header_card button {  
    margin: 0 auto;
    position: absolute;
    bottom: 0px;
    margin-left: 5rem;
    margin-right: 5rem;
}

.container.container_page_person_tasks main .insights .header_card h3  {  
    font-weight: 300;
}
.container_page_person_tasks .right .recent-updates {
    height: 100%;
}
.container_page_person_tasks .right .recent-updates .filter_box .select_man {
    margin-top: 0 auto;
    width: 100%;
    height: 2rem;
    background: var(--color-light);
}

.container_page_person_tasks .right .recent-updates .filter_box .select_man:hover {
    cursor: pointer;
    background: white;
    transform: scale(1.02);
}
.container_page_person_tasks .right .recent-updates .filter_box{

    margin: 0 auto;
    padding: 0.5rem;
}

.container_page_person_tasks .right .recent-updates .updates{
    margin-top: 2.5rem;
    height: 23rem;
    padding: 10px;
}

.container_page_person_tasks  .recent-updates .updates2{ 
    margin-top: 1rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 26rem;

}

.container_page_person_tasks  .recent-updates .updates2 .box_date_tasks{ 

    height: 280px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, 2fr);
    gap: 0.5rem;
    overflow-y: scroll;
    margin: 2rem 0 2rem 0;
}



.container_page_person_tasks  .recent-updates .box_date_tasks div{ 
    background-color: var(--color-light);
    /* Размещаем контейнеры по центру */
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: var(--border-radius-2);
}

.container_page_person_tasks  .recent-updates .box_date_tasks div h4{ 
    font-weight: 200;
}

.container_page_person_tasks  .recent-updates .box_date_tasks  .success_date{ 
    border: 2px solid var(--color-success);
}

.container_page_person_tasks  .recent-updates .box_date_tasks  .danger_date{ 
    border: 2px solid var(--color-danger);
}
.container_page_person_tasks  .recent-updates .updates2  h2{ 
    color: var(--color-info-dark);
    font-size: 18px;
    font-weight: 400;
}
.container_page_person_tasks  .recent-updates .box_date_tasks div:hover{ 
    transform: scale(1.05);
    cursor: pointer;
}
.container_page_person_tasks .right .recent-updates .filter_box input{
    background-color: var(--color-light);
    padding: 1rem;
    width: 10rem;
    height: 20px;
    margin: 0 auto;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-1);
}
.container_page_person_tasks .right .recent-updates .filter_box input:hover{
    cursor: pointer;
    transform: scale(1.05);
}
  /*===================== SKILLS PAGE==================*/
.container_page_skills {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 19rem;
} 
.container_page_skills main{
    display: flex;
    justify-content: center;
    align-items: flex-start;
} 

.container_page_skills main .left_arrow, .right_arrow{
    justify-self: center;
    align-self: center;
    color: var(--color-info-dark);
}
.container_page_skills main .material-icons-sharp{
    font-size: 5rem;
    font-weight: 200;
}




  

.container_page_skills .skills_page .insights_managers .table-body {
    display: none;
    
}

/* CSS to change height of opened table */
.container_page_skills .skills_page .insights_managers .table-body.open {
    display: block;
}


.container_page_skills .skills_page .insights_managers .expand-btn {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.container_page_skills .skills_page .insights_managers {
    margin-top: 4.5rem;
    margin-right: 0rem;
    border-radius: var(--card-border-radius);
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, 30fr);
} 

.container_page_skills .skills_page .insights_managers .income{
    display: flex;
    scroll-snap-align: start;
    margin-bottom: 0;
    /* max-height: 100%; */
    flex-direction: column;
}

.container_page_skills .skills_page .insights_managers .income .name_manager_header{
    display: flex;
    gap: 1rem;
}
.container_page_skills .skills_page .insights_managers .income .name_manager_header .progress{
    width: 100%;
    height: 5rem;
    
}

.container_page_skills .skills_page .insights_managers .dynamic_score_good {
    color: var(--color-success);
    font-weight: 900;
} 
.container_page_skills .skills_page .insights_managers .dynamic_score_bad {
    color: var(--color-danger);
}

.container_page_skills  .recent-updates{ 
    margin-top: 6.5rem;
    margin-right: 1rem;

    
}
.container_page_skills  .recent-updates .updates{ 
    margin-top: 0.5rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 180px;
    overflow-y: scroll;
    
}
.container_page_skills  .recent-updates .updates2{ 
    margin-top: 1rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 500px;
    overflow-y: scroll;
}

.container_page_skills  .recent-updates .updates2 .name_manager {
    display: flex;
    gap: 1rem;
}
.container_page_skills  .recent-updates .updates2 .progress {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    
}

.container_page_skills  .recent-updates .updates2 svg {
    width: 7rem;
    height: 7rem;
}


.container_page_skills  .recent-updates .updates2 svg circle {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: 110;
    stroke-dashoffset: 92;
}




.container_page_skills  .recent-updates .updates2  .income svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 30;
}

.container_page_skills  .recent-updates .updates2 .progress .number {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container_page_skills table tbody td {
    height: 100%;
    border-bottom: 1px solid var(--color-light);
    border-spacing: 0;
    padding:5px;
    margin-left: 1rem;
  
}
.container_page_skills .updates .text_page_tracking {
    display: inline-block;

}
.container_page_skills .updates .text_page_tracking p{
    display: inline-block;
    border-bottom: 1px solid var(--color-light);
    font-size: 12px;
    font-weight: 400;
    overflow-y: scroll;
    padding: 5px;
    max-width: 10rem;
}



.container_page_skills  .recent-updates .updates:hover{
    box-shadow: None;
}

.container_page_skills  .recent-updates .filter_box{

    margin: 0 auto;
    padding-top: 0.5rem;
}

.container_page_skills  .recent-updates .filter_box .select_man {
    margin-top: 0 auto;
    width: 100%;
    height: 2rem;
    background: var(--color-light);
}
.container_page_skills  .recent-updates button {
    margin: 2rem 0rem 0rem 0rem;
    width: 100%;
    height: 2rem;
    background: var(--color-primary);
    
}

.container_page_skills  .recent-updates .filter_box .select_man:hover {
    cursor: pointer;
    background: white;
    transform: scale(1.02);
}

.container_page_skills .skills_page .insights_managers span{
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-success);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1rem;
    margin-left: 1rem;
}
.container_page_skills .skills_page .insights_managers tr, td{
    width: 5rem;
    padding: 5px;
}

.container_page_skills .skills_page .insights_managers  td{
    height: 0;
    margin: 0 auto;
}

.container_page_skills .skills_page .insights_managers  .bal_score{
    background: linear-gradient(90deg,#a64fc5,#4f54e6);
    border-radius: var(--border-radius-1);
    color: var(--color-white);
}


.container_page_skills .skills_page .insights_managers .name_manager{
    display: flex;
    flex-direction: column;
}

.container_page_skills .skills_page .insights_managers .name_manager button{
    background: var(--color-white);
    border-radius: var(--border-radius-3);
    border: 0.5px solid var(--color-info-light);
    color: var(--color-dark);
    height: 3rem;
    cursor: pointer;
    margin: 2rem;
}

.container_page_skills .skills_page .insights_managers .name_manager button:hover{
    background: var(--color-white);
    color: var(var(--color-dark));
    box-shadow: var(--box-shadow);
}

.container_page_skills .skills_page .insights_managers .name_manager .progress{
    display: flex;
    margin: 0;
}
.container_page_skills .skills_page  .text_header_skills{
    flex-direction: column;
    height: 100%; 
}

.container_page_skills .recent-updates .updates2 .text_header_skills h3{
    font-weight: 100;
    font-size: 10px;
    padding: 0.5rem;
}
.container_page_skills .recent-updates .updates2 .text_header_skills h1{
    font-weight: 500;
    font-size: 18px;
    padding: 4px;
}

.container_page_skills .skills_page .insights_managers .name_manager h1{
    padding-right: 5px;
}
.container_page_skills .skills_page .insights_managers .name_manager h2{
    display: flex;
    text-align: center;
    margin: 0rem;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    align-items: flex-start;
    padding-bottom: 5px ;
}
.container_page_skills .skills_page  h3{
    display: flex;
    text-align: start;
    margin: 0rem;
    font-size: 10px;
    font-weight: 300;
    align-items: flex-start;
    letter-spacing: 1px;

    padding: 5px 0 5px 0;
}



/*===================== STAGE PAGE==================*/

.container_page_stage{
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 15rem;

}
.container_stage {
    display: grid;
    width: 96%;
    height: 600px;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    
}
.container_page_stage main .container_stage  .insights{
    display: flex;
    margin-top: 4.4rem;
    overflow-x: scroll ;
    height: 850px;
}

.container_page_stage main .container_stage  .insights .income{
    width: 270px;
    min-width: 270px;
    height: 100%;
}
.container_page_stage main .container_stage  .insights .income h1{
    width: 3rem;
    font-weight: 400;
    white-space: break-spaces;
    color: var(--color-info-dark);
}

.container_page_stage main .container_stage  .insights .income h2{
   
    font-weight: 400;
    white-space: break-spaces;
    color: var(--color-info-dark);
    margin: 1rem 0 1rem 0;
    padding: 1rem 0 1rem 0;
    color: var(--color-dark);
    border-image: linear-gradient(to right, var(--color-primary), var(--color-primary)) 47% 0%;
    border-bottom: 3px solid var(--color-primary);
}

.container_page_stage .stage_right .recent-updates  .updates{ 
    margin-top: 6rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 180px;
    overflow-y: scroll;   
}
.container_page_stage .stage_right .recent-updates  .updates select{ 
    
        margin-top: 1rem;
        width: 100%;
        height: 2rem;
        background: var(--color-light);
        
    }
.container_page_stage  .stage_right .recent-updates  .updates button {
        margin: 2rem 0rem 0rem 0rem;
        width: 100%;
        height: 2rem;
        background: var(--color-primary);
        font-size: 14px;

    
}
.container_page_stage .stage_right .recent-updates  .updates2{ 
    margin-top: 1rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 500px;
    overflow-y: scroll;
}

.container_page_stage  .stage_right .recent-updates .index_date select{
    width: 15rem;
    height: 3rem;
    font-size: 18px;
    font-weight: 100;
    background-color: var(--color-info-light);
}

.container_page_stage  .stage_right .recent-updates .index_date select{
    cursor: pointer;
}

.container_page_stage  .stage_right .recent-updates .form_button_select{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    width: 15rem;
    height: 3rem;
    font-size: 18px;
   
}

.container_page_stage .container_stage span {
    font-size: 1rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;   
}
.container_page_stage .recent-updates .updates2 .text_header_skills h3{
    font-weight: 100;
    font-size: 10px;
    padding: 0.5rem;
}
.container_page_stage .recent-updates .updates2 .text_header_skills h1{
    font-weight: 500;
    font-size: 18px;
    padding: 4px;
}
  /*===================== TRACKING PAGE==================*/

.container_page_tracking {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 23rem;
} 
.container_page_tracking .insights_managers {
    margin-top: 4.5rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(1, 30fr);
    height: 720px;
    overflow-y: scroll;
} 
.container_page_tracking .name_manager .progress {
    display: flex;
    margin: 0; 
}

.container_page_tracking  .income {
    padding: 1rem;
    width: 100%;
}

.container_page_tracking  .income td {
    
    width: 2rem;
   padding: 0 1rem 0 1rem;
    align-items: center;
    justify-content: center;

}

.container_page_tracking .name_manager h2 {
    padding: 2rem 0 2rem 0 ;
    margin: 0; 
    letter-spacing: 1px;
    font-weight: 500;
}

.container_page_tracking .name_manager p {
    font-size: 18px;
    font-weight: 800;
    padding-right: 2px;
}

.container_page_tracking .insights_managers h3 {
    font-size: 1rem;
}

.container_page_tracking .insights_managers span  {
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);
    
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1rem;
    
}

.container_page_tracking .insights_managers .num_progress  {

    margin-left: 1rem;

}
.container_page_tracking main{
    width: 100%;
}

.container_page_tracking .right {
    margin-top: 4.5rem;
}

.container_page_tracking .right .container_skills h2 {
    color: var(--color-info-dark);
    display: flex;
    justify-content: left;
    width: 100%;
    font-size: 12px;
}
.container_page_tracking .right .container_skills h3 {
    color: var(--color-info-dark);
    display: flex;
    justify-content: left;
    width: 100%;
    font-size: 10px;
    
  
    
   
}

.container_page_tracking .right .container_skills .text_lvl{
    display: flex;
    flex-direction: row;
    margin: 0.5rem;
  
}



.container_page_tracking .item.online.page_skill{
    width: 100px;
    height: 100px;
    padding: 1rem;
   
    display: block;

}
.container_page_tracking .item.online.page_skill .icon{
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;

}
.container_page_tracking .updates{
    margin-top: 2.4rem;
}

.container_page_tracking .updates .text_page_tracking {
    margin-top: 0.5rem;
}
.container_page_tracking .updates .text_page_tracking p{
    display: inline-block;
    border-bottom: 1px solid var(--color-light);
    font-size: 16px;
    font-weight: 400;
    overflow-y: scroll;
    padding: 5px;
}

/*===================== INPUT CHECKBOX ==================*/

.form_button_select {
    margin: 1rem 1rem 2rem 2rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 10px;
    color: #fff;
    background-color: var(--color-primary);
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}


.container_sales .right1 .switchh  {
    display: flex;
    position: relative;
    margin: 0 auto;
  }
.container_sales .right1 .switchh  h5 {
    display: flex;
    justify-content: center ;
    align-items: center;
    letter-spacing: 0.5px;
    font-weight: 200;
    align-items: left;
  }

.updates label {

    margin: 2rem;
    
  }
.container_sales .right1 input[type="checkbox"] {
    position: relative;
    width: 40px;
    height: 20px;
    -webkit-appearance: none;
    outline: none;
    background: var(--color-danger);
    border-radius: 10px;
    transition: .5s;
    box-shadow: inset 0 0 5px rgba(0,0,0,.2);
    margin: 0 auto;
    cursor: pointer;

  }
  
.container_sales .right1 input:checked[type="checkbox"] {
    background: #40e551
  }
  
.container_sales .right1 input[type="checkbox"]:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #fff;
    transition: .5s;
    
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
  }
  
.container_sales .right1 input:checked[type="checkbox"]:before {
    left: 20px;
  }

/*===================== TASKS PAGE ==================*/
.container_tasks {
    display: grid;
    width: 96%;
    margin: 0 auto;
    background: var(--color-background);
    gap: 1.8rem;
    grid-template-columns: 14rem auto 23rem;
}

.container.container_page_skills .right .recent-updates .updates{ 
    margin-top: 0.5rem;
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
    height: 180px;
    overflow-y: scroll;
    
}



/*===================== MEDIA QUERIES ==================*/



@media screen and (max-width: 1200px){
    .container{
        width: 100%;
        grid-template-columns: 7rem auto 23rem;
    }

    aside .logo h2 {
        display: none;
    }

    aside .sidebar h3 {
        display: none;
    }

    aside .sidebar a {
        width: 5.6rem;
    }

    aside .sidebar a:last-child {
        position: relative;
        margin-top: 1.8rem;
    }
}



/*====================RADAR CHART=============*/

.radar_graph , .radar_graph :before, .radar_graph::after { margin: 0; padding: 0;  box-sizing: border-box; }


/* 
 * I placed some comments below in case you are
 * interested in the code.
 */

 .radar_graph  {
    height: 250px;
 }
.radar_graph aside {
   font-family: Montserrat;
   font-size: clamp(1rem, calc(3.5vw + .5rem), 1.75rem);
   line-height: 1.6;
   color: var(--color-dark-variant);
   text-align: center;
}


.radar_graph .player__radar {
   --size: 220px;   
   padding: 2rem;
   max-width: var(--size);
   height: min(100vw, var(--size));
   margin: 2rem auto 0 auto;
   position: relative;
   filter: drop-shadow(1px 1px 2px #c2c7d4);
}

.radar_graph .player__radar::after{
   content: '';
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 1;
   z-index: 1;
   font-weight: 400;
   font-size: 1.8em;
   color: #fff;
   text-shadow: 1px 1px 4px #6C90AC;
   transition: opacity .5s 0s;
}


.radar_graph .player__ratings {
   height: 100%;
   width: 100%;
   position: relative;
   display: flex;
   
   --bg: transparent calc(50% - 1px), 
         #fff 50%, transparent calc(50% + 1px);
}

.radar_graph .player__ratings::before,
.radar_graph .player__ratings::after {
   width: inherit;
   height: inherit;
   content: '';
}

.radar_graph .player__ratings::after {
   z-index: 1;
   position: absolute;
   background: #41f1b6;
   opacity: 0.4;
   transition: clip-path .33s ease-in-out;
}


.radar_graph .player__ratings dt {
   position: absolute;
   z-index: 2;
   text-align: center;
   line-height: 1;
   font-weight: 400;
   font-size: clamp(1rem, calc(3.5vw + .5rem), 0.55rem);
}

.radar_graph .player__ratings dt::after { 
   content: ''; 
   display: block; 
   font-weight: 300; 
   font-size: .88em;
   opacity: 1;
   transition: opacity .5s 0s;   
}

.radar_graph .player[id] .player__ratings dt::after { 
   content: counter(value, decimal-leading-zero); 
   opacity: 1;
}

/* I'm printing the values of the variables 
 * around the radar 
 */

 .radar_graph .player__ratings dd  {
   position: absolute;
   clip: rect(0,0,0,0);
}


/* pentagonal shape style */


.radar_graph .player__radar--5 .player__ratings::before {
   /* This creates the pentagonal shape */
   clip-path: polygon(50% 10%, 88% 38%, 74% 82%, 
                      26% 82%, 12% 38%);
   
   
   /* the 5 white lines and a light gray gradient 
    * over the shape 
    */
   background:
      linear-gradient(90deg,     var(--bg)),     
      linear-gradient(18deg,     var(--bg)), 
      linear-gradient(-53deg,    var(--bg)), 
      linear-gradient(-126.5deg, var(--bg)), 
      linear-gradient(162deg,    var(--bg)), 
      linear-gradient(135deg, #f2f2f8, #c5c4c9);
   
   background-position: 50% 0, 0 0, 0 100%, 100% 100%, 100% 0;
   background-size    : auto 50%, 50% 84.5%, 62.5% 50%, 
                        63% 50%, 50% 84.5%, auto;
   background-repeat  : no-repeat, no-repeat, no-repeat, 
                        no-repeat, no-repeat;
}

.radar_graph .player__radar--5 .player__ratings::after {
   /* At the initial state the polygon is collapsed 
    * in the center of the radar */
   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 
                      50% 50%, 50% 50%);
}


.radar_graph .player__radar--5::after {
   counter-reset: value var(--ove);
   content: counter(value);
   opacity: 1;

}

.radar_graph .player__radar--5 .player__ratings::after {
   
   /* when an ID has been set on the .player container
    * the polygon changes their coordinates
    */
   clip-path: polygon(
     /* point 1 */
     50% calc(50% - calc(40% * var(--pac) / 100)), 
     
      /* point 2 */
     calc(50% + calc(38% * var(--sho) / 100))
     calc(50% - calc(12% * var(--sho) / 100)),

     /* point 3 */
     calc(50% + calc(24% * var(--pas) / 100)) 
     calc(50% + calc(32% * var(--pas) / 100)),
     
     /* point 4 */
     calc(50% - calc(24% * var(--dri) / 100)) 
     calc(50% + calc(32% * var(--dri) / 100)),
     
     /* point 5 */
     calc(50% - calc(38% * var(--def) / 100))
     calc(50% - calc(12% * var(--def) / 100))
   )
}


/* positioning all the properties 'pac', 'sho', ...    
 * around the radar 
 */

 .radar_graph .player__radar--5 dt::after,
 .radar_graph .player__radar--5::after {
   opacity: 1 !important;
}

.radar_graph .player__radar--5 dt:nth-of-type(1) { 
   top: -5%; left: 50%; 
   transform: translateX(-50%);
}

.radar_graph .player__radar--5 dt:nth-of-type(2) { 
   top: 38%; left: 92%; 
   transform: translateY(-50%); 
}

.radar_graph .player__radar--5 dt:nth-of-type(3) { 
   top: 88%; left: 74%; 
   transform: translateX(-50%);
}

.radar_graph .player__radar--5 dt:nth-of-type(4) { 
   top: 88%; left: 26%; 
   transform: translateX(-50%);
}

.radar_graph .player__radar--5 dt:nth-of-type(5) { 
   top: 38%; right: 93%; 
   transform: translateY(-50%); 
}



/* I'm printing the values of the variables 
 * around the radar 
 */

 .radar_graph .player__radar--5 dt:nth-of-type(1)::after { 
   counter-reset: value var(--pac_text); 
}

.radar_graph .player__radar--5 dt:nth-of-type(2)::after { 
   counter-reset: value var(--sho_text); }

.radar_graph .player__radar--5 dt:nth-of-type(3)::after {  
    counter-reset: value var(--pas_text); }

.radar_graph .player__radar--5 dt:nth-of-type(4)::after { 
    counter-reset: value var(--dri_text); }

.radar_graph .player__radar--5 dt:nth-of-type(5)::after { 
    counter-reset: value var(--def_text); }