@keyframes slideIn {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
}

    .filters__value-line > p {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  
     ::backdrop{
        background-color: rgba(0, 0, 0,0.6);
    }

    .modal__container {
        display: flex;
        flex-direction: column;
        
        padding: 30px;
        
    }

   
    .modal__controller {
        border-radius: var(--radius-1);
        border: 1px solid transparent;
        
        margin: 40px auto;
        width: 450px;

        animation: slideIn var(--animation-duration) var(--animation-type);

        overflow-y: auto;
        
    }

    .modal__title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        margin-bottom: 15px;
    }

    .modal__close {
        font-style: normal;
        font-weight: var(--font-weight-1);
        font-size: var(--font-size-2);
        color: var(--color-grey-2);

        background-color: var(--color-grey-4);
        border-radius: var(--radius-2);
        border: 1px solid transparent;

        padding: 5px 7px;

        cursor: pointer;
    }

    .modal__close:hover{
        color: var(--radius-1);
    }

    .modal__paragraph {
        font-style: normal;
        font-weight: var(--font-weight-3);
        font-size: var(--font-size-3);
        line-height: 150%;

        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;

    }

    .modal__input {
        display: flex;
        justify-content: row;

        margin-bottom: 15px;
    }

    .modal__input > label {
        font-style: normal;
        font-weight: var(--font-weight-2);
        font-size: var(--font-size-3);
        color: var(--grey-1);

        margin-bottom: 10px;
    }

    .modal__value{
        margin-top: 15px;

        width: 24rem;

        font-style: normal;
        font-weight: var(--font-weight-2);
        font-size: var(--font-size-3);

        color: var(--grey-2);

        border: 1.5px solid #ADB5BD;
        border-radius: var(--radius-1);

        padding: 10px;
    }

    .modal__infos {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

   .modal__infos > p {

        

        font-style: normal;
        font-weight: var(--font-weight-2);
        font-size: var(--font-size-3);

        margin-bottom: 15px;

    }
    
    .modal__radio {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;

        font-style: normal;
        font-weight: var(--font-weight-1);
        font-size: var(--font-size-3);

        

    }


    
    .modal__radio > label {

        display: flex;
        justify-content: center;
        align-items: center;

        border: 1.5px solid #ADB5BD;
        border-radius: var(--radius-1);
        
        padding: 10px;

        margin-bottom: 15px;
        
        cursor: pointer;

        width: 5rem;

    }

    input[type="radio"]:checked + label {
        border-color: 3px solid #522bc7;
        color: var(--color-brand-2);
        background-color: var(--color-grey-4);
    }

    .modal__btn {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0px;
        gap: 15px;
    }

    .modal__btn--value {
        width: 7rem;

        border: 1.5px solid #E9ECEF;
        border-radius: var(--radius-1);

        padding: 10px 0px;

        color: var(--grey-2);
        font-style: normal;
        font-weight: var(--font-weight-1);
        font-size: var(--font-size-3);

        cursor: pointer;

    }

    .modal__btn--value:hover {
        color: var(--color-mode);
        background-color: var(--color-brand-1);

    }

@media (max-width: 768px) { /*tablets maiores e desktops pequenos*/

    .modal__infos {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .modal__radio {
        display: flex;
        flex-direction: row;
    }

    .modal__radio > label {
        width: 5rem;
    }

    .modal__btn {
        display: flex;
        justify-content: flex-end;
       

    }

    .modal__btn--value {
        width: 7rem;
    }

  
}

@media (max-width: 480px){ /*telefones maiores*/

    #filters-value-add {
        width: 24rem;
    }
    .modal__infos {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .modal__radio{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .modal__radio > label {
        width: 100%
    }

    .modal__btn{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal__btn--value {
        width: 12rem;
    }

    .modal__value {
        width: 20.2rem;
}
}

@media (max-width: 380px){
    
    .modal__value {
    width: 16.2rem;
    }
}