#role-Roles-content input[type="checkbox"] {
    accent-color: #0b9294;
    width: 1rem;
    height: 1rem;
}

#dropDownRoles {
    text-transform: capitalize;
    font-size: 0.8rem;
    padding: 0 0.7rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sds-primary);
    background: var(--sds-primary);
    color: white;
}

#dropDownRoles .dropDownIcon svg {
    width: 2rem;
    height: auto;

}
.delete-role-btn,
.save-role-btn {
    border: 0;
    padding: 3px 12px;
}

div#dropdownDataTable {
    border: 1px solid var(--sds-grey);
    border-radius: 6px !important;
    max-width: 360px !important;
    min-width: 204px !important;
    height: 32px !important;
    padding: 0px 12px !important;
    display: flex;
    font-size: 0.8rem;
}

div#dropdownDataTable .dx-selectbox-container {
    position: relative;
    width: 100%;
}

#role-Roles-content .sds-datatable .dx-datagrid-content .dx-datagrid-table .dx-row > td,
#role-Roles-content .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    text-align: left !important;
    padding-left: 2rem !important;
}
#role-Roles-content  .sds-datatable .dx-column-indicators {
    padding: 0rem!important;
}

#role-Roles-content .delete-role-btn {
    background: var(--sds-critical);
    color: #fff;
}
#role-Roles-content .delete-role-btn * {
    fill: #fff;
}

.delete-role-btn[disabled] {
    opacity: 0.5;
}
@media (max-width: 768px) {
    #role-Roles-content #dropdownDataTable {
        min-width:unset!important
    }
}