.grid-container.pc{
       box-shadow: var(--shadow_sm);
    /*border: 1px solid var(--border_primary);*/
    /*border-radius: var(--radius_lg);*/
    overflow-x: auto;
    min-height: 75%;
    max-height: calc(100vh - var(--main_header_height) - var(--buttons_row_height, 70px) - var(--submodule_inline_filter_panel_height, 0px) - 20px );
    max-width: calc(100vw - var(--main_navigation_width) - 20px);
    width: 100%;
    transition: all var(--transition_smooth);
    background: var(--bg_primary);
    margin: 0 auto;
}

.expand .grid-container.pc{
    max-width: 90vw;
}
.meter {
    height: 20px;  /* Can be anything */
    position: relative;
    background: #555;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
    -ms-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.grid-container.pc .grid-main{
    padding: var(--spacing_xs) 0px;
    width: 100%;
    overflow-x: auto;
}
.grid-container.pc #grid{
    border-top: 1px solid var(--border_secondary);
    width: 100%;
    padding: var(--spacing_sm) 0px;
    /*table-layout: fixed;*/
    table-layout: auto;
}
.grid-container.pc #grid > tbody > tr:hover td{
    /*background: var(--bg_hover);*/
    /*transition: all var(--transition_fast);*/
}

.grid-container.pc #grid > tbody > tr:not(.grid_no_data_row):hover {
    background: var(--bg_hover);
}


.grid-container.pc #grid > tbody > tr:active{
    transform: scale(0.99);
    transition: all 0.1s ease;
    /*background: var(--bg_hover);*/

    & > td{
        /*background: var(--bg_hover);*/
        /*border-color: transparent !important;*/
        border-right: none;
    }
}

.grid-container.pc #grid > thead {
    background: var(--bg_secondary);
    border-radius: var(--radius_sm);
}
.grid-container.pc #grid > thead .th-group{
    border-bottom: 1px solid black;
    font-weight: bold;
    text-align: center;
    padding-bottom: 2px;
}
.grid-container.pc #grid > thead > tr > th{
    padding: 3px 3px;
    --tw-bg-opacity: 1;
    /*background-color: rgb(249 250 251 / var(--tw-bg-opacity));*/
    /* border-bottom: 2px solid rgba(195, 195, 195, 0.65);
    border-right: 1px solid rgba(195, 195, 195, 0.20); */
    font-weight: bold;
}
.grid-container.pc #grid > thead > tr > th{
    text-align: left;
    line-height: 1.3;
    padding: var(--spacing_md) var(--spacing_lg);
    text-transform: capitalize;
    /*font-weight: var(--font_weight_semibold);*/
    font-size: var(--font_size_base);
    color: var(--text_primary);
    letter-spacing: -0.01em;
    font-weight: 400;
}
.grid-container.pc #grid > tbody > tr > td{
    font-family: var(--font_family);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: var(--font_weight_normal);
    padding: var(--spacing_sm) var(--spacing_lg);
    border-top: 1px solid var(--border_secondary);
    /*border-right: 1px solid transparent;*/
    border-right: none;
    color: var(--text_primary);
    font-size: var(--font_size_base);
    line-height: 1.5;
    transition: background var(--transition_fast);
}

.grid-container.pc #grid > thead > tr > th[data-column-max-width="small"] > div{
    max-width: 50px;
}
.grid-container.pc #grid > tbody > tr > td[data-column-max-width="small"] > div{
    max-width: 50px;
}

.grid-container.pc #grid > thead > tr > th[data-column-max-width="medium"] > div{
    max-width: 90px;
}
.grid-container.pc #grid > tbody > tr > td[data-column-max-width="medium"] > div{
    max-width: 90px;
}

.grid-container.pc #grid > thead > tr > th[data-column-max-width="large"] > div{
    max-width: 145px;
}
.grid-container.pc #grid > tbody > tr > td[data-column-max-width="large"] > div{
    max-width: 145px;
}

.grid-container.pc #grid > thead > tr > th[data-column-max-width="xLarge"] > div{
    max-width: 250px;
}
.grid-container.pc #grid > tbody > tr > td[data-column-max-width="xLarge"] > div{
    max-width: 250px;
}

.grid-container.pc #grid > tfoot > tr:first-child > th{
    border-top: 2px solid rgba(206, 189, 189, 1);
}
.grid-container.pc #grid > tfoot > tr > th{
    padding: 3px 6px;
}
.grid-container.pc #grid > tbody > tr:nth-child(even){
    /*background-color: #acb5ba;*/
}
.grid-container.pc #grid > tbody > tr:nth-child(even){
    /*background-color: #faf9f0;*/
}
.grid-container.pc #grid > tbody > tr{
    border-left: 2px solid transparent;
    cursor: pointer; /* need to check if click mode is open form view */
    transition: all var(--transition_fast);
}

.grid-container.pc #grid > tbody > tr.selected{
    background: var(--accent_primary_light);
    border-left: 2px solid var(--accent_primary);
}

.grid-container.pc #grid > tbody > tr.selected td{
    color: var(--text_primary);
}
.grid-container.pc #grid .grid-header-text-sortable{
    display:inline-block;
    min-width: 25px;
    cursor: pointer;
    position: relative;
}
.grid-container.pc #grid .grid-header-text-sortable[data-column-id="id"]:after{
    left: auto;
    right: -8px;
}
.grid-container.pc #grid .grid-header-text-sortable:after{
    position: absolute;
    left: -12px;
    top: 10%;
}

.grid-container.pc #grid .grid-header-text-sortable.sorted-desc:after{
    content: '↓';
}
.grid-container.pc #grid .grid-header-text-sortable.sorted-asc:after{
    content: '↑';
}

.grid-container.pc .grid-no-data-message-row{
    text-align: center;
}
.grid-container.pc #grid > tbody > tr.grid_no_data_row{
    cursor: default;
}
.grid-container.pc #grid > tbody > tr.grid_no_data_row:hover td{
    background: transparent;
}
.grid-container.pc .grid-no-data-message-row{
    padding: 0;
}

.formview-column-holder .grid-container.pc .grid-no-data-message-row .grid_no_data_state{
    min-height: var(--grid_no_data_min_height, 100px);
    max-height: var(--grid_no_data_max_height, 300px);
}

.grid-container.pc .grid-no-data-message-row .grid_no_data_state{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 16px;
    min-height: var(--grid_no_data_min_height, 500px);
    max-height: var(--grid_no_data_max_height, 520px);
    overflow: auto;
    border: 1px dashed var(--border_secondary);
    border-radius: var(--radius_md);
    color: var(--text_secondary);
}
.grid-container.pc .grid-no-data-message-row .grid_no_data_icon{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text_secondary);
    opacity: 0.9;
}
.grid-container.pc .grid-no-data-message-row .grid_no_data_icon svg{
    width: 44px;
    height: 44px;
}
.grid-container.pc .grid-no-data-message-row .grid_no_data_title{
    font-size: var(--font_size_lg, 16px);
    font-weight: 600;
    color: var(--text_primary);
}
.grid-container.pc .grid-no-data-message-row .grid_no_data_sub_title{
    font-size: var(--font_size_sm, 13px);
    color: var(--text_secondary);
}
.grid-container.pc #grid > tbody a{
    text-decoration: underline;
    cursor: pointer;
}
.grid-container.pc #grid > tbody .gridViewEditInDisplayElement{
    /*-webkit-transition: opacity 300ms ease;*/
    /*opacity: 1;*/
}
.grid-container.pc #grid > tbody .gridViewEditInDisplayElement.loading{
    /*opacity: .5;*/
    /*pointer-events: none;*/
}

.grid-container.pc #grid .gridDataRowCellElement{
    position: relative;
}
.grid-container.pc #grid .lookUpViewModeShortCut{
    display: none;
    height: 15px;
    width: 15px;
    cursor: pointer;
    background-size: contain;
    opacity: .5;
    position: absolute;
    right: 10px;
    background-image: url(/images/open.png)
}

.grid-container.pc #grid .gridDataRowCellElement:hover .lookUpViewModeShortCut{
    display: inline-block;
    display: none; /* temp disabling lookUpViewModeShortCut option*/
}
.grid-container.pc #grid .lookUpViewModeShortCut:hover{
    opacity: 1;
}

.grid-container.pc #grid .googleMapLink{
    display: none;
    height: 15px;
    width: 15px;
    cursor: pointer;
    background-size: contain;
    opacity: .5;
    position: absolute;
    right: 10px;
    background-image: url(/images/mapMarker.png)
}

.grid-container.pc #grid .gridDataRowCellElement:hover .googleMapLink{
    display: inline-block;
}
.grid-container.pc #grid .googleMapLink:hover{
    opacity: 1;
}


/*body.largeFontSize .grid-container.pc #grid .grid-header-text-sortable{*/
/*font-size: 16px;*/
/*}*/
/*body.largeFontSize .grid-container.pc #grid > tbody .grid-data-item{*/
/*font-size: 16px;*/
/*}*/
/*body.mediumFontSize .grid-container.pc #grid .grid-header-text-sortable{*/
/*font-size: 14px;*/
/*}*/
/*body.mediumFontSize .grid-container.pc #grid > tbody .grid-data-item{*/
/*font-size: 14px;*/
/*}*/
/*body.smallFontSize .grid-container.pc #grid .grid-header-text-sortable{*/
/*font-size: 12px;*/
/*}*/
/*body.smallFontSize .grid-container.pc #grid > tbody .grid-data-item{*/
/*font-size: 12px;*/
/*}*/




.grid-container.mobile{
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin: 5px;
    font-size: 11px;
    max-width: 98vw;
    overflow: auto;
}
.grid-container.mobile .grid-main{
    padding: 4px 0px;
    margin: 5px;
}
.grid-container.mobile #grid{
    border-top: 1px solid rgba(195, 195, 195, 0.65);
    width: 100%;
    padding: 10px 0px;
}
.grid-container.mobile #grid > tbody > tr:hover td{
    background: rgba(221, 221, 221, 0.80);
    color: #69666b;
}
.grid-container.mobile #grid > thead {
    /*background: #7f878c;*/
    border-radius: 5px;
    border: 2px solid #525252;
}
.grid-container.mobile #grid > thead .th-group{
    border-bottom: 1px solid black;
    font-weight: bold;
    text-align: center;
    padding-bottom: 2px;
}
.grid-container.mobile #grid > thead > tr > th{
    padding: 3px 2px;
    border-bottom: 3px solid rgba(195, 195, 195, 0.65);
    font-weight: bold;
}
.grid-container.mobile #grid > tbody > tr > td{
    padding: 4px 2px;
    border-top: 1px solid rgba(195, 195, 195, 0.65);
    /*border-right: 1px solid rgba(195, 195, 195, 0.65);*/

}
.grid-container.mobile #grid > tfoot > tr:first-child > th{
    border-top: 2px solid rgba(206, 189, 189, 1);
}
.grid-container.mobile #grid > tfoot > tr > th{
    padding: 4px 0px;
}
.grid-container.mobile #grid > tbody > tr:nth-child(even){
    /*background-color: #acb5ba;*/
}
.grid-container.mobile #grid > tbody > tr:nth-child(even){
    /*background-color: #faf9f0;*/
}
.grid-container.mobile #grid .grid-header-text-sortable{
    /*display:inline-block;*/
    min-width: 25px;
    cursor: pointer;
}
.grid-container.mobile #grid .grid-header-text-sortable.sorted-desc:after{
    content: '↓';
}
.grid-container.mobile #grid .grid-header-text-sortable.sorted-asc:after{
    content: '↑';
}
.grid-container.mobile #grid > tbody a{
    text-decoration: underline;
    cursor: pointer;
}
.grid-container.mobile .grid-no-data-message-row{
    text-align: center;
}
.grid-container.mobile #grid > tbody > tr.grid_no_data_row{
    cursor: default;
}
.grid-container.mobile #grid > tbody > tr.grid_no_data_row:hover td{
    background: transparent;
}
.grid-container.mobile .grid-no-data-message-row{
    padding: 0;
}
.grid-container.mobile .grid-no-data-message-row .grid_no_data_state{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 10px;
    min-height: var(--grid_no_data_min_height, 160px);
    max-height: var(--grid_no_data_max_height, 260px);
    overflow: auto;
    background: var(--bg_secondary);
    border: 1px dashed var(--border_secondary);
    border-radius: var(--radius_md);
    color: var(--text_secondary);
}
.grid-container.mobile .grid-no-data-message-row .grid_no_data_icon{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text_secondary);
    opacity: 0.9;
}
.grid-container.mobile .grid-no-data-message-row .grid_no_data_icon svg{
    width: 36px;
    height: 36px;
}
.grid-container.mobile .grid-no-data-message-row .grid_no_data_title{
    font-size: 15px;
    font-weight: 600;
    color: var(--text_primary);
}
.grid-container.mobile .grid-no-data-message-row .grid_no_data_sub_title{
    font-size: 12px;
    color: var(--text_secondary);
}

.addEffectsToEditedColumn{
    background: rgba(34, 161, 245, 0.58);
}

.change-grid-data-color{
    color: rgba(245, 245, 245, 0) !important;
}

.gridHeadImageContainer{
    width: 25px;
    height: 25px;
    /* float: left; */
    margin-top: -8px;
    margin-right: 7px;
    display: none;
}

.gridHeadSpan{
    /*float: left;*/
    display: flex;
    align-items: center;
    word-break: break-word;
    white-space: break-spaces;
}

.grid-container.pc #grid .gridDataRowCellElement .grid-data-item p em{
    font-style: italic;
}
.grid-container.pc #grid .gridDataRowCellElement .grid-data-item p strong{
    font-weight: bold;
}
.grid-container.pc #grid .gridDataRowCellElement .grid-data-item ul, .grid-container.pc #grid .gridDataRowCellElement .grid-data-item ol{
    list-style: inherit;
    margin-left: 16px;
}

.columnChooserContainer{
    max-width: 91%;
    min-width: 52%;
    min-height: 17%;
    position: fixed;
    top: 50px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    background: white;
    box-shadow: 0px 0px 4px 1px #898B89;
    text-align: center;
    padding-top: 1.5%;
    padding: 0;
    border: 0;
    padding-bottom: 10px;
}

.columnChooserContainer[open]{
    -webkit-animation: testing 300ms;
    -webkit-animation-delay: 0ms;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes testing{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}



.columnChooserContainer .titleContainer{
    display: inline-block;
    width: 98%;
    padding-top: 1%;
    padding-bottom: 25px;
    text-align: left;
}
.columnChooserContainer .titleContainer .title{
    font-size: 30px;
    font-weight: 500;
}

.columnChooserContainer .headingColumnContainer{
    display: inline-block;
    width: 97%;
    padding-top: 0px;
    padding-bottom: 17px;
    text-align: left;
}
.columnChooserContainer .headingColumnText{
    display: inline-block;
    font-size: 17px;
    padding-right: 13px;
}
.columnChooserContainer .headingColumnValue{
    font-size: 17px;
    /*border-radius: 5px;*/
    /*padding: 6px;*/
    min-width: 30%;
    text-align: left;
    display: block;
    margin-left: 30px;
    margin-top: 10px;
    /*color: rgb(119, 124, 119);*/
}

.columnChooserContainer .columnChooserTitleContainer{
    width: 97%;
    text-align: left;
    font-size: 19px;
    /*background: rgb(242, 242, 242);*/
    padding-top: 10px;
    display: inline-block;
}
.columnChooserContainer .columnChooserTitle{
    display: inline-block;
    /*margin-left: 18px;*/
}

.columnChooserContainer .columnChooser{
    display: inline-block;
    width: 98%;
    padding-top: 1%;
    padding-bottom: 2%;
    /*color: rgb(90, 90, 90);*/
    /*background: rgb(242, 242, 242);*/
    margin-bottom: 25px;
}

.columnChooserContainer .columnChooser div{
    display: inline-block;
    padding: 6px;
    padding-right: 6px;
    /*border: 1px solid rgb(218, 211, 211);*/
    margin-left: 3px;
}
.columnChooserContainer .columnChooser div input{
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}
.columnChooserContainer .columnChooser div span{
    display: inline-block;
    font-size: 15px;
    margin-top: 3px;
    margin-left: 3px;
}
.columnChooserContainer .currentPageOnlyDiv{
    text-align: left;
    font-size: 18px;
    width: 97%;
    display: none;
}
.columnChooserContainer .currentPageOnlyDiv input{
    vertical-align: middle;
}


/* new aki */

.grid-container.pc #grid > thead > tr > th{
    text-align: left;
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--text_secondary, #64748b);
    text-transform: uppercase;
    /*letter-spacing: 0.5px;*/
    /*white-space: nowrap;*/

    &:first-child{
        padding-left: 14px;
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }
    &:last-child{
        padding-right: 14px;
        /*width: 100px;*/
        /*min-width: 100px;*/
        /*max-width: 100px*/
    }

}

/* Text alignment classes for grid headers */
.grid-container.pc #grid > thead > tr > th.custom-text-align-left > div {
    display: flex;
    justify-content: flex-start;
    text-align: left;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-left > div > span {
    text-align: left;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-center > div {
    display: flex;
    justify-content: center;
    text-align: center;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-center > div > span {
    text-align: center;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-right > div {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-right > div > span {
    text-align: right;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-justify > div {
    display: flex;
    justify-content: space-between;
    text-align: justify;
}

.grid-container.pc #grid > thead > tr > th.custom-text-align-justify > div > span {
    text-align: justify;
}
.grid-container.pc tbody tr td .custom-erc-static-icons{
    width: 100px;
    min-width: 100px;
    max-width: 100px
}
.grid-container.pc tbody tr:hover .arrow-container .arrow_container_inner > svg{
    color: var(--light_theme_btn_text_color__default_primary);
}
.grid-container.pc tbody tr:hover .arrow-container .arrow_container_inner{
    background: var(--light_theme_btn_bg_color__default_primary);
    transform: translateX(2px);

}
.grid-container.pc #grid > tbody > tr.gridDataRow > td{
    text-align: left;
    padding-left: 8px;
}

.grid-container.pc #grid > thead > tr > th[data-data_type*="decimal"], .grid-container.pc #grid > tbody > tr > td[data-data_type*="decimal"],
.grid-container.pc #grid > thead > tr > th[data-data_type*="int"], .grid-container.pc #grid > tbody > tr > td[data-data_type*="int"]{
    /*text-align: right;*/
    padding-right: 8px;
    text-align: center;

    &[data-column-type="lookUpDropDownList"]{
        text-align: left;
    }

}
.grid-container.pc #grid > tbody > tr.gridDataRow > td[data-data_type*="decimal"], .grid-container.pc #grid > tbody > tr.gridDataRow > td[data-data_type*="int"] {
    /*padding-left: 15px;*/
    & .grid-data-item{
        display: inline-block;
        min-width: 50px;
        text-align: center;
        /*text-align: right;*/
    }

    &[data-column-type="lookUpDropDownList"]{
        /*text-align: left;*/

        & .grid-data-item{
            text-align: left;
            /*text-align: right;*/
            display: flex;
        }
    }
}



/*.grid-container.pc #grid > tbody > tr.gridDataRow > td[data-column-type="decimal"]{*/
/*    text-align: right;*/
/*    padding-right: 8px;*/
/*}*/

.grid-container.pc #grid > tfoot > tr > th{
    text-align: right;
    padding-right: 8px;

}

.grid-container.pc #grid > tbody > tr.gridDataRow > td{

    &:first-child{
        padding-left: 14px;
    }
    &:last-child{
        padding-right: 14px;
    }

    &.column_value_rounded_style{

        & .gridDataRowCellElement{
            background-color: var(--column_value_rounded_style_bg_color);
            color: var(--column_value_rounded_style_text_color);
            text-align: center;
            border-radius: 20px;
            padding: 6px 14px;
            font-weight: 500;
            font-size: 12px;
            letter-spacing: 0.3px;
            width: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: auto;
            border: 1px solid color-mix(in srgb, var(--column_value_rounded_style_text_color) 20%, transparent);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            transition: all 0.15s ease;

            & .grid_view_choice_element{
               justify-content: center;
            }

            /* Modern filled dot indicator */
            & .grid_view_choice_element_icon {
                width: 8px;
                height: 8px;
                min-width: 8px;
                border-radius: 50%;
                background-color: var(--column_value_rounded_style_text_color);
                display: inline-block;
                
                /* Hide the lucide SVG icon and show as solid dot */
                & svg {
                    display: none;
                }
            }
        }

    }
}


.gridViewDocumentElement {
    width: 40px;
    height: 30px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* URL Link Element Wrapper */
.gridViewSingleLineURLWrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.gridViewSingleLineURLElement {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--accent_primary_alpha, rgba(59, 130, 246, 0.08));
    color: var(--accent_primary, #3b82f6);
    border-radius: var(--radius_sm, 4px);
    font-size: var(--font_size_sm, 13px);
    font-weight: var(--font_weight_medium, 500);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.gridViewSingleLineURLElement:hover {
    background: var(--accent_primary, #3b82f6);
    color: var(--text_on_accent, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

.gridViewSingleLineURLElement:active {
    transform: translateY(0);
}

.gridViewSingleLineURLElement .url_link_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gridViewSingleLineURLElement .url_link_icon svg {
    width: 13px;
    height: 13px;
}

.gridViewSingleLineURLElement .url_link_label {
    line-height: 1;
}

/* URL Tooltip with Copy Button */
.url_tooltip {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg_surface_dark, #1f2937);
    padding: 6px 8px 6px 12px;
    border-radius: var(--radius_md, 6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    z-index: 1000;
    pointer-events: none;
}

.url_tooltip::after {
    /*content: '';*/
    /*position: absolute;*/
    /*top: 100%;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    /*border: 6px solid transparent;*/
    /*border-top-color: var(--bg_surface_dark, #1f2937);*/
}

.url_tooltip_text {
    color: var(--text_on_dark, #f9fafb);
    font-size: var(--font_size_xs, 12px);
    font-weight: var(--font_weight_normal, 400);
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url_tooltip_copy_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius_sm, 4px);
    color: var(--text_on_dark, #f9fafb);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.url_tooltip_copy_btn svg {
    width: 14px;
    height: 14px;
}

.url_tooltip_copy_btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.url_tooltip_copy_btn:active {
    transform: scale(0.9);
}

.url_tooltip_copy_btn.copied {
    background: var(--success_bg, #16a34a);
    color: #ffffff;
}

/* Show tooltip on wrapper hover */
.gridViewSingleLineURLWrapper:hover .url_tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

/* Keep tooltip visible when hovering over it */
.url_tooltip:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Timestamp Element (for Integer columns with isTimestampInUtc) */
.gridViewTimestampElement {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    /*background: var(--timestamp_bg, rgba(139, 92, 246, 0.08));*/
    border-radius: var(--radius_sm, 4px);
    font-size: var(--font_size_sm, 13px);
    white-space: nowrap;
    cursor: default;
}

.gridViewTimestampElement .timestamp_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--timestamp_icon_color, #0000004a);
    padding-right: 3px;
    padding-top: 0;
    vertical-align: top;
}

.gridViewTimestampElement .timestamp_icon svg {
    width: 14px;
    height: 14px;
}

.gridViewTimestampElement .timestamp_date {
    color: var(--text_primary, #374151);
    font-weight: var(--font_weight_medium, 500);
}

.gridViewTimestampElement .timestamp_time {
    color: var(--text_secondary, #6b7280);
    font-size: var(--font_size_xs, 12px);
    padding-left: 6px;
    border-left: 1px solid var(--border_light, #e5e7eb);
}

/* Empty state */
.gridViewTimestampElement:has(.timestamp_date:empty) {
    display: none;
}

.grid_view_choice_element {
    display: flex;
    gap: 7px;
    align-items: center;
    /*justify-content: center;*/
}
.grid_view_choice_element .grid_view_choice_element_icon{
}

.grid_view_choice_element .grid_view_choice_element_icon:empty {
    display: none;
}

.grid_view_lookup_drop_down_list_element{
    display: flex;
    align-items: center;
    gap: 7px;
}

.grid_view_lookup_drop_down_list_element{

    &.image_only{
        justify-content: center;
    }

    & .grid_view_lookup_drop_down_list_element_image{
        width: 25px;
        height: 25px;
        object-fit: cover;
        border-radius: 50%;
        transition: all .2s ease-in-out;
    }

    &.image_only .grid_view_lookup_drop_down_list_element_image{
        /*width: 50px;*/
        width: auto;
        height: 30px;
        object-fit: contain;
        border-radius: 2px;
    }

    &.image_only .grid_view_choice_element_display_value_span_element{
        display: none;
    }

    &.round_image_only .grid_view_lookup_drop_down_list_element_image{
        /*width: 50px;*/
        width: auto;
        height: 25px;
        object-fit: contain;
        border-radius: 5px;
    }

    &.round_image_only .grid_view_choice_element_display_value_span_element{
        display: none;
    }



}
.grid_view_lookup_drop_down_list_element .grid_view_lookup_drop_down_list_element_image:hover{
    cursor: pointer;
    transform: scale(1.2);
}
.grid_view_lookup_drop_down_list_element .grid_view_choice_element_display_value_span_element{
    text-align: left;
}
/*.grid_view_lookup_drop_down_list_element .grid_view_lookup_drop_down_list_element_image:empty{*/
/*    display: none;*/
/*}*/
.grid_view_lookup_drop_down_list_element .grid_view_choice_element_display_value_span_element:empty{
    display: none;
}




.grid-container.with_sub_module_custom_layout {
    background: transparent;

    & .grid-main{
        display: none;
    }
}

.grid-container.with_sub_module_custom_layout_pager_only {
    background: transparent;

    & #grid{
        display: none;
    }
}

.grid-container.pc.styling_mode {
    border: 1px dashed #ff000063;
    animation: styling_mode_indication 800ms ease infinite forwards alternate;
}

@keyframes styling_mode_indication {
    from{
        border-color: #ff000010;
    }
    to{
        border-color: #ff000090;

    }
}

/* Grid Row Actions Button */
body.pc .grid-row-selector-td {
    position: relative;
    /*display: flex;*/
    align-items: center;
    gap: 4px;
}

body.pc .grid-row-selector-td button.grid-row-actions-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text_secondary, #6b7280);
    opacity: 0;
    /*background: white;*/
    position: absolute;
    right: -10px;
    top: calc(50% - 13px);
    transition: background-color 0.15s ease;

    & svg {
        width: 16px;
        height: 16px;
    }
}



/* Show on row hover */
.grid-container.pc #grid > tbody > tr.gridDataRow:hover .grid-row-actions-btn {
    display: inline-flex;
    opacity: 0.6;
}

.grid-container.pc #grid > tbody > tr.gridDataRow .grid-row-actions-btn:hover {
    opacity: 1;
    background: var(--bg_secondary, #f3f4f6);
    color: var(--text_primary, #374151);
}

.grid-container.pc #grid > tbody > tr.gridDataRow .grid-row-actions-btn:active {
    background: var(--bg_tertiary, #e5e7eb);
}

/* Always show when row is selected */
.grid-container.pc #grid > tbody > tr.gridDataRow.selected .grid-row-actions-btn {
    display: inline-flex;
    opacity: 0.7;
}

/* Hide in view-only mode */
.subModule-container.viewOnlyMode .grid-row-actions-btn {
    display: none !important;
}