/* CSS for Overview tab */

.mo_keycloak_header_container {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.mo_keycloak_header_container_left {
    width: 100%;
    height: 100%;
    margin: 0 2em;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    text-align: justify;
}

.mo_keycloak_header_container_right {
    width: 100%;
    margin: 0 2em 0 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mo_keycloak_header_container_right_video {
    width: 102%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

.mo-guides-floating {
    float: right;
}

.mo_keycloak_highlight_background {
    background-color: #e0e0e0;
    border-radius: 4px;
    width: 97%;
    padding: 0.55em;
    text-align: justify;
}

table.mo_configure_keycloak_configuration td > .form-item{
    display: block;
    width: 100%;
}

table.mo_configure_keycloak_configuration td > .form-item .description{
    display: block;
    margin-top: 0.5em;
    clear: both;
}

.mo_keycloak_text_center {
    text-align: center;
}

table.mo_keycloak_provisioning_types td {
    width: 33%;
    border: 1px solid grey;
}

table.mo_keycloak_provisioning_types tr:hover {
    background-color: white;
}
table.mo_keycloak_provisioning_types {
    border-spacing: 2em 0;
    border-collapse: separate;
}

.mo_keycloak_sync_text_center {
    text-align: center;
}

.scim_client_know_more_hidden {
    visibility: hidden;
    width: 30%;
    background-color: #ffffff;
    border: groove;
    color: black;
    font-size: 60%;
    text-align: center;
    border-radius: 6px;
    padding: 1%;
    position: absolute;
    top: 50%;
    left: 30%;
}

.scim_client_know_more {
    height: 12%;
    width: 9%;
}

.scim_client_know_more:hover + .scim_client_know_more_hidden {
    visibility: visible;
    opacity: 1;
}

.scim_client_know_more1 {
    height: 5%;
    width: 2%;
}

.mo_keycloak_background_note {
    background-color: #e0e0e0;
    border-radius: 4px;
    padding: 0.55em;
    width: 98%;
}

.keycloak_sync_checkboxes {
    display: inline-flex;
    gap: 20px;
    flex-wrap: wrap;
}

.mo_keycloak_step_1_img {
    cursor: pointer;
    border: black;
}

.mo_keycloak_text_center {
    text-align: center;
}

.mo_keycloak_sync_gif {
    border: 1px black solid;
    object-fit: fill;
    width: 100%;
}

.keycloak_sync_checkboxes {
    display: inline-flex;
    gap: 20px;
    flex-wrap: wrap;
}

.mo-mapping-actions-container{
    margin-left: 25px;
}

.mapping_tab_attribute_button_container {
    text-align: right;
    width: 100%;
    margin-bottom: 10px;
}

/* Upgrade Plans Form */
.current-plan-section {
    border: 1px solid #ccc;
    padding: 12px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.rest-text-center {
    text-align: center;
}

.section-container {
    border: 1px solid #ccc;
    padding: 12px 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.feature-box {
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

h3, h5{
    margin: 8px 0px !important;
}

.product-description {
    min-height: 150px;
    display: block;
    flex-grow: 1;
    margin-bottom: 10px;
}

.feature-image {
    width: 100%;
    height: 180px !important;
    object-fit: fill;
    border-radius: 4px;
}

.feature-box .button {
    margin-top: auto;
    align-self: flex-start;
    text-align: center;
    min-width: 120px;
}
.endpoint-box{
    background: #f7f7f7;
    padding: 10px;
    border-left: 4px solid #337ab7;
}
.response-box{
    background: #f1f1f1;
    padding: 10px; font-family: monospace;
    color: #333; border-radius: 4px;
}

.attr_received_from_keycloak_btn{
    margin-bottom: -30px;
    margin-top: -40px;
}

/* Premium Feature Styling */
.premium-badge {
    background: #fff;
    color: #0066cc;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    border: 1px solid #0066cc;
}

table.mo_keycloak_attributes_table,
table.mo_keycloak_test_data {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 13pt;
    background-color: #ededed;
}

table.mo_keycloak_attributes_table tr,
table.mo_keycloak_test_data tr {
    text-align: center;
}

table.mo_keycloak_attributes_table td,
table.mo_keycloak_test_data td {
    border: 1px solid #949090;
}

table.mo_keycloak_attributes_table td + td,
table.mo_keycloak_test_data td + td {
    word-break: break-all;
    width: 100%;
    border: 1px solid #949090;
}

/* Dark theme */
.gin--dark-mode {
    .mo_keycloak_header_container,
    .mo_keycloak_background_note,
    .mo_keycloak_highlight_background,
    .mo_user_provisioning_highlight_background {
        background-color: #2c2c2c;
        color: white;
    }
    .premium-badge{
        background: none;
    }
    .mo-success-message{
        background-color: #2c2c2c;
        color: white;
        border: 1px solid #666;
    }
    table.mo_keycloak_test_data,
    table.mo_keycloak_attributes_table,
    table.mo_keycloak_provisioning_types {
        background-color: #2c2c2c;
        color: white;
    }
    table.mo_keycloak_test_data tr td,
    table.mo_keycloak_attributes_table tr td {
        border: 1px solid #555;
    }
    table.mo_keycloak_test_data tr:hover,
    table.mo_keycloak_attributes_table tr:hover,
    table.mo_keycloak_provisioning_types tr:hover,
    table.step1_how_to_sync td:hover {
        background-color: #444;
    }
}
