@charset "utf-8";
/*кнопки*/

button {
    appearance: none;
    -webkit-appearance: none;
}

button, .button {
    display: flex;
    font-size: 0.8125rem;
    font-family: inherit;
    padding: 0.5rem;
    /*! max-width: 12rem; */
    text-align: center;
    /*! margin: 1rem; */
    align-items: center;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    /*! border-radius: var(--radius); */
    /*! min-width: 8rem; */
    /*! justify-content: center; */
    white-space: nowrap;
    background: white;
    border: solid 1px var(--grey_04);
    color: var(--primary);
    border-radius: var(--radius-big);
    margin: 0.5rem;
    font-weight: 400;
    overflow: hidden;
}

button:hover, .button:hover {
    /*! filter: brightness(1.05); */
    background: var(--primary);
    /*! box-shadow: var(--shadow-small); */
    /*! top: -1px; */
    /*! position: relative; */
    /*! transition: ease-in-out 0.3s; */
    border: solid 1px white;
    color: white;
}

button:disabled, button[disabled], .button.disabled {
    cursor: no-drop;
    opacity: 0.6;
    /*! color: var(--grey); */
    /*! opacity: 0.75; */
    /*! background: var(--color_03); */
}

button.icon .material-icons, .button.icon .material-icons{}
 
button.icon.text .material-icons, .button.text.icon .material-icons {
    padding: 0 0.5rem 0 0;
    /*! margin-right: -0.25rem; */
}

.button.icon.text, button.icon.text {
    padding-right: 1rem;
    /*! font-weight: 500; */
    /*! padding: 0.75rem 1rem; */
}


.item .button.red .material-icons {
    color: var(--red);
    /*! background: white; */
}

.button.red .material-icons {
    color: var(--red);
    /*! background: white; */
}

.button.red:hover .material-icons {
    color: white;
}

.item .button.red .material-icons:hover {
    color: white;
    /*! background: var(--red); */
}

.pop_up .pop_up_body .group .item.stated .button.red:hover {

    background: var(--red);
    border: solid 1px white;
}

.green {
    color: white;
    background: var(--green);
}

.blue{
    color:white;
    background: var(--primary);
}

.green:hover {
    background: var(--green);
    color: white;
    filter: brightness(1.1);
}

.item .button.green .material-icons {
    color: white;
    /*! background: var(--green); */
}

button.red {
    color: white;
    background: var(--red);
}



.red:hover {
    background: var(--red);
    color: white;
    filter: brightness(1.1);
}

.button.icon.active {
  /*! transform: rotateX(180deg);*/
  background: var(--primary);
  color: white;
  border: solid 1px var(--grey_02);
}