@import "variables";

#permissions {

    .activation-phase-view-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main-info-container {

        &--row{
            align-items: stretch;
            & > *{
                display: flex;
                align-items: center;
            }
        }



        &--btn {

            @media only screen and (max-width: 1399px) {
                padding: 1.1rem 0rem;
                width: 50%;
                text-align: center;
            }
        }
    }

    /*Column width classes*/

    .number {
        width: 7%;
     }

     .name {
         width: 18%;
     }

     .description {
         width: 33%;
     }

     .view-name {
         width: 28%;
     }

     .action {
         width: 25%;
     }

    .status{
        text-align: center;
        span {
            width: 20px;
            height: 20px;

        }

        &.isActive span{
            background-color: green;
        }
        &.isInactive span{
            background-color: red;
        }

    }


   .user-phase-table{
       .number{
           flex: 70px 0 0;
       }

       .status{
           flex: 125px 0 0;
       }

       .name {
           flex: 1 0 0;
       }

       .roles {
           flex: 200px 0 0;
       }

       .action a{
           background-color: $main-color;
           color: white;
           display: block;
           height: 41px;
           padding: 10px 15px;
       }
   }
}