@import "variables";

#roles {

    .main-info-container {
        
        &--btn {
            min-width: 95px;
            max-width: 100px;
            padding: 1.1rem;
            @media only screen and (max-width: 1399px) {
                padding: 1.1rem 0rem;
                width: 33%;
                text-align: center;
            }
        }

        .dropdown1-content {
            @media only screen and (max-width: 1300px) {
                left: -19px !important;
            }
            @media only screen and (max-width: 1200px) {
                left: -17px !important;
            }
            @media only screen and (max-width: 1100px) {
                left: -15px !important;
            }
            @media only screen and (max-width: 1000px) {
                left: -13px !important;
            }
            @media only screen and (max-width: 900px) {
                left: -11px !important;
            }
        }
    }

    /*Column width classes*/
    
    .number {
        width: 8%;
    }
    
    .name {
         width: 22%;

         @media only screen and (max-width: 1399px) {
            width: 16%;
        }
    }
    
    .description {
        width: 38%;
    }
    
    .view-name {
        width: 20%;
        @media only screen and (max-width: 1100px) {
            width: 16%;
        }
    }
    
    .action {
        width: 12%;
    }
}