.openid-config-popup .dx-popup-title{
    padding: 16px 24px;
}
.openid-config-popup .dx-toolbar.dx-popup-bottom{
    padding: 16px 24px;

}
.openidconfigform{
    display: flex;
    flex-direction: column;
    padding: 24px;
    font-size: 14px;
}
.opend-id-config-wrapper{
    padding: 0px !important;
}
.opend-id-config-wrapper .nav-tabs{
    padding-top: 0px ;
    padding-left: 24px !important;
    padding: 0 24px;
}
.opend-id-config-wrapper .nav-wrapper{
    padding-top: 10px;
    background-color: #FBFBFB;
}

.openidconfigform .sds-form-section-divider{
    background: var(--sds-grey-400);
    height: 1px;
    width: 100%;
    margin: 12px 0;
}
.config-row{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.config-row-element{
    display: flex;
    width: 48%;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 0;
}
.client-secret-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

#toggle-secret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.openidconfigform input{
    width: 100%;
    height: 32px;
    border-radius: 5px;
    border: 1px solid silver;
    padding: 1px 5px;
}
.openidconfigform input:focus {
    outline: none;
}
/* CUSTOM ATTRIBUTES */
.custom-attributes-wrapper{
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0 56px;
}

.custom-attributes-nodata{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 240px;
    text-align: center;
}

.custom-attributes-wrapper .no-data-header, .no-data-button button{
    font-size: 14px;
    font-weight: 600;
}
.custom-attributes-wrapper .no-data-text{
    font-size: 12px;
}
.no-data-button i{
    font-size: 14px;
}

.custom-attributes-wrapper .sds-datatable-container{
    box-shadow: none;
}
.custom-attributes-wrapper .sds-datatable-container .dx-datagrid-header-panel .dx-collection{
    padding: 0;
    padding-bottom: 36px;
}



/* GRID STARTS FROM HERE */
.custom-attributes-grid{
    width: 100%;
    height: 40vh;
}
.custom-attributes-wrapper .dx-datagrid-header-panel label{
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-attributes-header-title{
    font-weight: bold;
}
.custom-attributes-content{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.custom-attributes-content-row{
    display: flex;
    font-size: 14px;
    font-weight: 500;
    justify-content: space-between;
}
.custom-attributes-icons{
    display: flex;
}
.custom-attributes-icons > div{
    margin: 5px;
}
.custom-attributes-update{
    cursor: pointer;
}





/* QUALITY RULES TO OPENID */
#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-header-panel .dx-toolbar {
    padding: 0;
}

#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-header-panel .dx-toolbar .sds-btn-primary {
    font-family: Inter;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    /* line-height: 18px; */
    padding: 6px 12px;
}
#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-header-panel .dx-toolbar .sds-btn-primary svg{
    height: 16px;
    width: 16px;
}

#custom-attributes-datagrid-wrapper .dx-datagrid-header-panel .dx-toolbar-items-container{
    font-size: 14px;
    font-weight: 600;
}

#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link.delete-button,
#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link.cancel-button,
#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link.edit-button {
    color: var(--sds-grey-700);
}

#custom-attributes-datagrid-wrapper .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link.save-button {
    color: var(--sds-primary-500);
}

#custom-attributes-datagrid-wrapper .dx-command-edit-with-icons .dx-link {
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    width: 20px;
    margin-left: 8px;
}

#custom-attributes-datagrid-wrapper .dx-datagrid-headers+.dx-datagrid-rowsview {
    border-top: none;
}

#custom-attributes-datagrid-wrapper .dx-datagrid .dx-row-lines>td {
    border-bottom: 1px solid var(--sds-grey-300);
    padding: 16px 0;
    color: var(--sds-grey-900);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    vertical-align: middle;
}

#custom-attributes-datagrid-wrapper .dx-datagrid-rowsview .dx-row.dx-edit-row {
    border: none;
    border-radius: 6px;
}

#custom-attributes-datagrid-wrapper .dx-datagrid-rowsview .dx-row.dx-edit-row td {
    border: 1px solid var(--sds-grey-500);
}

#custom-attributes-datagrid-wrapper .dx-datagrid-rowsview .dx-row.dx-edit-row td:first-child {
    border-right: none;
    border-radius: 6px 0px 0px 6px;
}

#custom-attributes-datagrid-wrapper .dx-datagrid-rowsview .dx-row.dx-edit-row td:last-child {
    border-left: none;
    border-radius: 0px 6px 6px 0px;
}

#custom-attributes-datagrid-wrapper .dx-datagrid-rowsview .dx-row.dx-edit-row td {
    padding-top: 2px;
    padding-bottom: 0px;
}

.sds-delete-icon,
.sds-edit-icon {
    background: var(--sds-grey-700);
}

.sds-delete-icon {
    -webkit-mask-image: url(/Assets/Images/icons/delete.svg);
    mask-image: url(/Assets/Images/icons/delete.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sds-edit-icon {
    -webkit-mask-image: url(/Assets/Images/icons/edit.svg);
    mask-image: url(/Assets/Images/icons/edit.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#manage-custom-attributes-container input{
    outline: none;
    border: none;
}



@media screen and (max-width: 900px) {
    .openidconfigform input{
        width: 100%;
      
    }
    .config-row{
        flex-direction: column;
    }
    .config-row-element{
        width: 100%;
    }
    .custom-attributes-wrapper{
        padding: 0 5px;
    }
  }