@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?4754");

/* ===================================================================== */

/*  The following CSS was created using Theme Editor.                    */

/*  To modify this CSS, click "Open Theme Editor".                       */

/* ===================================================================== */



/* ===================================================================== */

/*  Root - CSS Variables                                                 */

/* ===================================================================== */



:root {

    /* Color - Brand */

    --color-primary: #99459a;

    --color-secondary: #99459a;



    --color-primary-hover: #733474;

    --color-primary-selected: rgba(153, 69, 154, .12);



    /* Color - Extended */

    --color-red-lightest: #faeaea;

    --color-red-lighter: #e9aaaa;

    --color-red-light: #d96a6a;

    --color-red: #c92a2a;

    --color-red-dark: #ab2424;

    --color-red-darker: #8d1d1d;

    --color-red-darkest: #6f1717;



    --color-pink-lightest: #fbebf0;

    --color-pink-lighter: #efadc4;

    --color-pink-light: #e27098;

    --color-pink: #d6336c;

    --color-pink-dark: #b62b5c;

    --color-pink-darker: #96244c;

    --color-pink-darkest: #761c3b;



    --color-grape-lightest: #f7ecfa;

    --color-grape-lighter: #dfb2e9;

    --color-grape-light: #c678d9;

    --color-grape: #ae3ec9;

    --color-grape-dark: #9435ab;

    --color-grape-darker: #7a2b8d;

    --color-grape-darkest: #60226f;



    --color-violet-lightest: #f1edfd;

    --color-violet-lighter: #c6b6f6;

    --color-violet-light: #9b7fef;

    --color-violet: #7048e8;

    --color-violet-dark: #5f3dc5;

    --color-violet-darker: #4e32a2;

    --color-violet-darkest: #3e2880;



    --color-indigo-lightest: #eceffd;

    --color-indigo-lighter: #b3c1f7;

    --color-indigo-light: #7b92f1;

    --color-indigo: #4263eb;

    --color-indigo-dark: #3854c8;

    --color-indigo-darker: #2e45a5;

    --color-indigo-darkest: #243681;



    --color-blue-lightest: #e8f2fa;

    --color-blue-lighter: #a3c9ea;

    --color-blue-light: #5fa1db;

    --color-blue: #1a79cb;

    --color-blue-dark: #1667ad;

    --color-blue-darker: #12558e;

    --color-blue-darkest: #0e4370;



    --color-cyan-lightest: #e7f2f4;

    --color-cyan-lighter: #9eccd3;

    --color-cyan-light: #56a6b2;

    --color-cyan: #0d8091;

    --color-cyan-dark: #0b6d7b;

    --color-cyan-darker: #095a66;

    --color-cyan-darkest: #074650;



    --color-teal-lightest: #e6f2ef;

    --color-teal-lighter: #9cccbd;

    --color-teal-light: #52a58c;

    --color-teal: #087f5b;

    --color-teal-dark: #076c4d;

    --color-teal-darker: #065940;

    --color-teal-darkest: #044632;



    --color-green-lightest: #ebf7ed;

    --color-green-lighter: #afe0b8;

    --color-green-light: #73c982;

    --color-green: #37b24d;

    --color-green-dark: #2f9741;

    --color-green-darker: #267d36;

    --color-green-darkest: #1e622a;



    --color-lime-lightest: #f1f8e8;

    --color-lime-lighter: #c7e3a2;

    --color-lime-light: #9ecd5c;

    --color-lime: #74b816;

    --color-lime-dark: #639c13;

    --color-lime-darker: #51810f;

    --color-lime-darkest: #40650c;



    --color-orange-lightest: #fef0e6;

    --color-orange-lighter: #fcc29c;

    --color-orange-light: #f99551;

    --color-orange: #f76707;

    --color-orange-dark: #d25806;

    --color-orange-darker: #ad4805;

    --color-orange-darkest: #883904;



    --color-yellow-lightest: #fef5e5;

    --color-yellow-lighter: #fbd999;

    --color-yellow-light: #f8bc4c;

    --color-yellow: #f59f00;

    --color-yellow-dark: #d08700;

    --color-yellow-darker: #ac6f00;

    --color-yellow-darkest: #875700;



    /* Color - Neutral */

    --color-neutral-0: #ffffff;

    --color-neutral-1: #f8f9fa;

    --color-neutral-2: #f1f3f5;

    --color-neutral-3: #e9ecef;

    --color-neutral-4: #dee2e6;

    --color-neutral-5: #ced4da;

    --color-neutral-6: #adb5bd;

    --color-neutral-7: #868e96;

    --color-neutral-8: #5c656d;

    --color-neutral-9: #343a40;

    --color-neutral-10: #15181a;



    /* Color - Semantic */

    --color-error-light: #fceaea;

    --color-error: #e03131;



    --color-warning-light: #fdf6e5;

    --color-warning: #e9a100;



    --color-success-light: #eaf3eb;

    --color-success: #2a843c;



    --color-info-light: #e5f5fc;

    --color-info: #009dde;



    /* Elevation / Shadow */

    --shadow-none: none;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);

    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);

    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);

    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);

    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);



    /* App Settings */

    --side-menu-size: 300px;

}



.btn,

.Button {

    color: var(--color-primary);

}



.tag,

.badge,

.btn.Is_Default, 

.Button.Is_Default {

    color: #fff;

}

:root {
    /* Color - Brand */
    --color-primary: #9c479b;
    --color-secondary: #753574;
    --side-menu-size: 260px;
    color-scheme: normal !important;
}

.ServiceStudioBigWidth {
    
    
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #9c479b; /*primary-color*/
}


.checkbox-hierarchy{
    font-size: 100%;
    height: 24px;
    margin-bottom: -6px;
    transform: scale(.5);
    width: 24px;
    margin-left: 0;
}

.menu-icon-custom{
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-10);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-right: var(--space-m);
    width: 24px;
}

.desktop-small .menu-icon-custom,
.desktop-big .menu-icon-custom,
.desktop-hd .menu-icon-custom,
.desktop .menu-icon-custom {
    display: flex;
    cursor: pointer;
}

.layout.layout-side .navigation {
    background-color: #5F226E;
}

.desktop-small .layout.layout-side .navigation,
.desktop-big .layout.layout-side .navigation,
.desktop-hd .layout.layout-side .navigation,
.desktop .layout.layout-side .navigation {
    background-color: #5F226E;
}

.desktop-small .layout-top .is--hidden .Menu_TopMenus, 
.desktop-big .layout-top .is--hidden .Menu_TopMenus, 
.desktop-small .layout-side .is--hidden.navigation,
.desktop-big .layout-side .is--hidden.navigation,
.desktop-hd .layout-top .is--hidden .Menu_TopMenus, 
.desktop .layout-top .is--hidden .Menu_TopMenus, 
.desktop-hd .layout-side .is--hidden.navigation,
.desktop .layout-side .is--hidden.navigation {
    width: 56px;
    background-color: #5F226E;
    z-index: 99;
}

.desktop .layout-side .is--hidden.navigation:hover{
    width:var(--side-menu-size);
}

.desktop-small .layout-side .is--hidden.navigation .navigation-menu,
.desktop-big .layout-side .is--hidden.navigation .navigation-menu,
.desktop-hd .layout-side .is--hidden.navigation .navigation-menu,
.desktop .layout-side .is--hidden.navigation .navigation-menu{
    overflow: hidden;
}

.desktop-small .layout-side .is--hidden.navigation .navigation-menu:hover,
.desktop-big .layout-side .is--hidden.navigation .navigation-menu:hover,
.desktop-hd .layout-side .is--hidden.navigation .navigation-menu:hover,
.desktop .layout-side .is--hidden.navigation .navigation-menu:hover {
    overflow: auto;
}

.desktop-small .layout-top .is--visible .Menu_TopMenus, 
.desktop-big .layout-top .is--visible .Menu_TopMenus, 
.desktop-small .layout-side .is--visible.navigation,
.desktop-big .layout-side .is--visible.navigation,
.desktop-hd .layout-top .is--visible .Menu_TopMenus, 
.desktop .layout-top .is--visible .Menu_TopMenus, 
.desktop-hd .layout-side .is--visible.navigation,
.desktop .layout-side .is--visible.navigation{
    width: var(--side-menu-size);
    background-color: #5F226E;
    z-index: 99;
}


.desktop-hd .layout.layout-side .main.main-left-open {
    margin-left: var(--side-menu-size);
    margin-right: 0px;
}

.desktop-big .layout.layout-side .main.main-left-open{
    margin-left: var(--side-menu-size);
    margin-right: 0px;
}

.layout.layout-side .main.main-left-open{
    margin-left: var(--side-menu-size);
    margin-right: 0px;
}

.desktop-small .layout.layout-side .main.main-left-open{
    margin-left: var(--side-menu-size);
    margin-right: 0px;
}

.desktop-hd .layout.layout-side .main.main-right-open {
    margin-left: 57px;
    margin-right: 400px;
}

.desktop-big .layout.layout-side .main.main-right-open {
    margin-left: 57px;
    margin-right: 400px;
}

.layout.layout-side .main.main-right-open {
    margin-left: 57px;
    margin-right: 400px;
}

.desktop-small .layout.layout-side .main.main-right-open {
    margin-left: 57px;
    margin-right: 400px;
}

.desktop-hd .layout.layout-side .main.main-both-open {
    margin-left: var(--side-menu-size);
    margin-right: 400px;
}

.desktop-big .layout.layout-side .main.main-both-open  {
    margin-left: var(--side-menu-size);
    margin-right: 400px;
}

.layout.layout-side .main.main-both-open  {
    margin-left: var(--side-menu-size);
    margin-right: 400px;
}

.desktop-small .layout.layout-side .main.main-both-open  {
    margin-left: var(--side-menu-size);
    margin-right: 400px;
}

.desktop-hd .layout.layout-side .main.main-both-closed {
    margin-left: 57px;
    margin-right: 0px;
}

.desktop-big .layout.layout-side .main.main-both-closed {
    margin-left: 57px;
    margin-right: 0px;
}

.layout.layout-side .main.main-both-closed {
    margin-left: 57px;
    margin-right: 0px;
}

.desktop-small .layout.layout-side .main.main-both-closed {
    margin-left: 57px;
    margin-right: 0px;
}


.right-menu-visible{
    transform: translateX(0%);
    background-color: white;
    position: fixed;
    top: 50px;
    width: 400px;
    padding: 8px;
    left: calc(100vw - 400px);
    overflow:auto;
    z-index: 25;
    height: 95vh;
}

.right-menu-hidden{
     transform: translateX(100%);
     background-color: white;
     position: fixed;
     top: 50px;
     width: 400px;
     padding: 8px;
     left: calc(100vw - 400px);
     overflow:auto;
     z-index: 25;
     height: 95vh;
}

.Form input[type="text"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="password"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="datetime"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="datetime-local"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="date"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="month"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="time"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="week"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="number"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="email"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="url"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="search"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="tel"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="color"]:focus{
    border-color: var(--color-primary);
}

.Form input[type="checkbox"]:focus{
    border-color: var(--color-primary);
}

textarea:focus{
    border-color: var(--color-primary);
}

.Form select:focus{
    border-color: var(--color-primary);
}

.input:focus, 
.textarea:focus, 
.select:focus {
    border: var(--border-size-s) solid var(--color-primary);
}

.select2-container-active{
    border-color: var(--color-primary) !important;
    border-width:1px !important;
    border-style:solid !important;
}

.select2-container-disabled{
    background-color:#f4f4f4 !important;
}

.select2-choice:after{
    color: var(--color-neutral-7);
    content: '\f107';
    font: normal normal normal 24px/1 FontAwesome;
    font-family: 'FontAwesome';
    position: absolute;
    right: 16px;
    top: 8px;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    transform-origin: center;
}


.layout .Form .input.ReadOnly:not(.Not_Valid)[readonly='readonly'], .layout .Form .select.ReadOnly:not(.Not_Valid)[disabled='disabled'] {
    color: var(--color-neutral-10);
}


.Menu_TopMenu > div a, .Menu_TopMenu > div a:visited {
   color: var(--color-primary);
}

.navigation .Menu_TopMenu:hover {
    background-color: var(--color-primary);
    color:white;
}

.Menu_TopMenu:hover > div .fa, .Menu_TopMenu:hover > div a, .Menu_TopMenu:hover > div a:visited {
    color: white;
}

.Menu_DropDownArrow:before {
    background-color: var(--color-primary);
}

.Menu_DropDownArrow:after {
    background-color: var(--color-primary);
}

.Menu_TopMenu:hover > div .Menu_DropDownArrow:before, .Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: white;
}

.Menu_DropDownPanel a, .Menu_DropDownPanel a:link, .Menu_DropDownPanel a:visited {
    color: var(--color-primary);
}

.Menu_DropDownPanel a.Menu_SubMenuItemActive {
    background: var(--color-primary) var(--color-primary-lightest);
}

.Menu_DropDownPanel a.Menu_SubMenuItemActive:hover {
    color: var(--color-primary) !important;
}

.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    background-color: var(--color-primary);
    color:white;
}

/* Custom Menu Styling Start */

.Menu_TopMenu:hover > div .fa, .Menu_TopMenu:hover > div a, .Menu_TopMenu:hover > div a:visited {
    color: #DEB1E9;
}

.Menu_TopMenuActive > div a, .Menu_TopMenuActive > div a:visited, .Menu_TopMenuActive > div a:hover, .Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: #FFFFFF;
}

.navigation .Menu_TopMenu{
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    color:#DEB1E9;
    padding-right: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.navigation .Menu_TopMenu a{
    color: #DEB1E9;
}

.Menu_TopMenuActive > div a {
    color: #FFFFFF;
}


.navigation .Menu_TopMenu a:hover{
    color: #DEB1E9;

}

.navigation .Menu_TopMenu:hover {
    background-color: #792B8C; 
    color: #DEB1E9;
    border-radius: 4px;
}

.navigation .Menu_TopMenuActive{
    background-color: #792B8C;
    color: #FFFFFF;
    border-radius: 4px;
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
    position: relative;
}

.navigation .Menu_TopMenuActive a {
    color:white;
}

.Menu_TopMenu .fa {
    text-align: center;
    width: 1.28571429em;
    color: #DEB1E9;
    margin-right: 0px;
    margin-top: 0px;
}

.navigation .Menu_SubMenuItem {
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    color: #DEB1E9;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.navigation .Menu_SubMenuItem:hover {
    background-color: #792B8C; 
    color: #DEB1E9;
    border-radius: 4px;
}

.navigation .Menu_SubMenuItemActive {
    color: #FFFFFF;
    border-radius: 4px;
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.navigation .Menu_SubMenuItemActive:hover {
    background-color: #792B8C;
    color: #FFFFFF;
    border-radius: 4px;
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.navigation .Menu_SubMenuItemActive:before{
    content: "•";
    
}

.menu-arrow {
    position: absolute;
    width: 24px !important;
    height: 24px !important;
    left: 200px;
    top: 10px;
}

.menu-arrow .fa-lg {
    vertical-align: -10%;
}

.Menu_TopMenus.OSInline a img{
    vertical-align: -3px;
}

.Menu_SubMenuItemActive span {
    margin-left: 34px !important;
}

/* Custom Menu Styling End */

/*.layout-side .content .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: var(--space-l);
    width: 100%;
    max-width: none;
} ----removed by CH 10/20------ */

.layout-side .content .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: 0px;
    width: 100%;
    max-width: none;
}

.TableRecords .TableRecords_OddLinesmall,
.TableRecords .TableRecords_EvenLinesmall
{
    height: 32px;
    padding: 2px 10px;
    font-size: 12px;
}
.TableRecords .TableRecords_Headersmall{
    height: 32px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}

.modal-top{
    background-color: var(--color-primary);
    padding-top: 10px;
    padding-bottom: 15px;
}

.modal-wrapper {

    border-radius: 32px;
    max-width:75%;
    max-height:100%;
    overflow-y: hidden; 

}

.Button:disabled, Button[disabled]{
    opacity: .5;
    cursor: not-allowed;
    
}

.DetailScreenTabs {
    background-color: #F7ECF9;
    color: #9c479b;
}

/*.content-top{
    position: sticky;
    top: 55px;
    z-index: 20;
    background-color:var(--color-background-body);
} ------removed CH 10/20-------*/

.content-top {
    position: sticky;
    top: 56px;
    z-index: 75;
    background-color: white;
    padding-left: 16px;
    padding-right: 16px;
}


.List-Navigation-List-Screen  {
    position: sticky;
    top: 125px;
    z-index: 18;
    background-color: var(--color-background-body);
}

.statuspill {
    border-radius: 45px;
    font-size: 100%;
    padding: 2px 15px 4px 15px;
    width:100%;
    text-align: center;
}

.ListScreenFilterButtons {
    text-align: center;
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
}

.AccordionItemList{
    font-size: 12px;   
}

.SortColumns_Sorted{
    font-weight: bold;
    color: var(--color-primary);
}

.SortColumns_Sortable{
    font-weight: bold;
    color: black;
    
}

.ListScreenDetailForm {
    background-color: var(--color-neutral-4);
    padding: 10px;
}

.dropdown .dropdown-content .dropdown-content-list a:not(.Button)[disabled="disabled"] {
    background-color: transparent;
    border: none;
    color: var(--color-neutral-6);
    pointer-events: none;
}


.dropdown .dropdown-content .dropdown-content-list a {
    color: var(--color-primary);
}

.Table_Scrollable_Wrapper {
    max-height: 75vh;
    overflow: auto;
}

.Table_HorizontalScroll {
    width: max-content;   
}

.navigation-top {
    padding:0px;
    margin-right:20px;
}

/* Make grid not run off the screen when it is too wide, also set max height to see bottom content at all times */
.GridCont {
    display: table;
    table-layout: fixed;
}

/* color cell text, align text to the left, and center the text in the row */
.wj-flexgrid .wj-cells .wj-row .wj-align-center{
    color: var(--color-neutral-8);
    display: flex;
    justify-content: left;
    align-items: center;
}

/* make headers left aligned */
.wj-flexgrid .wj-cell.wj-align-center.wj-header div {
    text-align: left;
}

/* Checked rows */
.wj-row.wj-checked .wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    background: #E8f1f9;
}

/* Checked row with multi-select */
 .wj-row.wj-checked .wj-cell.wj-state-multi-selected {
    background: #A3C9EA;
 }
 
  /* Non checked row with multi-select */
.wj-cells .wj-cell.wj-state-multi-selected {
    background: #E8F1F9;
}

.wj-cells .wj-cell.wj-state-multi-selected, .wj-row.wj-checked .wj-cell, .wj-cells .wj-cell.wj-state-multi-selected.cell-dirty {
    background-image: linear-gradient(45deg, rgba(232,241,249, 0.6), rgba(232,241,249, 0.6));
}

/* Selected Cell */
.wj-cells .wj-cell.wj-state-selected {
    background: #E8F1F9;
    border: 3px solid #1A79CB;
    box-sizing: border-box;
}


/* Moves the dropdown select column icon to the right of the column  */
.wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph.wj-right:nth-child(1), .wj-flexgrid .wj-cell .wj-viewer .wj-control .wj-btn-glyph.wj-right.wj-applybutton:nth-child(1), .wj-viewer .wj-control .wj-flexgrid .wj-cell .wj-btn-glyph.wj-right.wj-applybutton:nth-child(1) {
    position: absolute;
    right: 7px;
}

/* Center the dropdown select column icon  */
.wj-btn.wj-btn-glyph.wj-elem-dropdown .wj-glyph-down {
    top: 0px;
}

/* Links color when selected */
.extended-selection a,
.extended-selection a:link,
.extended-selection a:visited {
    color: var(--color-neutral-8) !important;
}

/* Checkbox Styling in Grid

.wj-flexgrid .wj-cell.wj-header.wj-align-center .single-select [type="checkbox"].single-check,
.wj-flexgrid .wj-cell.wj-header.is-select div [type="checkbox"].select-all{
    appearance:none;
}

.wj-flexgrid .wj-cell.wj-header.wj-align-center .single-select [type="checkbox"].single-check:before,
.wj-flexgrid .wj-cell.wj-header.is-select div [type="checkbox"].select-all:before{
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-8);;
    content: '';
    display: block;
    height: 12px;
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    width: 12px;
    border-radius: var(--border-radius-soft);
}

.wj-flexgrid .wj-cell.wj-header.wj-align-center .single-select [type="checkbox"].single-check:after{
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
    content: '';
    display: block;
    height: 4px;
    left: 14px;
    opacity: 0;
    position: absolute;
    top: 22px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    width: 7px;
     font-weight: 200;
}


.wj-flexgrid .wj-cell.wj-header.is-select div [type="checkbox"].select-all:after{
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
    content: '';
    display: block;
    height: 4px;
    left: 14px;
    opacity: 0;
    position: absolute;
    top: 9px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    width: 7px;
}

.wj-flexgrid .wj-cell.wj-header.wj-align-center .single-select [type="checkbox"].single-check:checked:before,
.wj-flexgrid .wj-cell.wj-header.is-select div [type="checkbox"].select-all:checked:before{
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
}

.wj-flexgrid .wj-cell.wj-header.wj-align-center .single-select [type="checkbox"].single-check:checked:after,
.wj-flexgrid .wj-cell.wj-header.is-select div [type="checkbox"].select-all:checked:after{
    opacity: 1;
}

*/

.GridButton{
    width: 24px;
    height: 24px;
    color: var(--color-neutral-8);
    text-align: center;
    margin-left: 10px;
    border: none;
}

.GridButton:hover{
    color: var(--color-primary);
    background-color: white;
    box-shadow: none;
    filter: none;
}

.ActionsMenuButton{
    border:none !important;
    color: var(--color-neutral-9) !important;
    pointer-events: visible !important;
    background-color: white !important;
}

.ActionsMenuButtonDisabled{
    border:none !important;
    background-color: white !important;
    color: var(--color-neutral-6) !important;
    pointer-events: none !important;
}

.ModalSimple{
    width: 500px;
    height: 262px;
    border-radius: 4px;
}

.ModalSimple .modal-top{
    background-color:white;
}

.FGTabs{
    
}

.FGTabs .tabs-header{
    background-color: white;
    padding-left: 32px;
    padding-right: 32px;
    position: sticky;
    top: 166px;
    z-index: 60;
}

.FGTabs .tabs-content{
    padding-left: 32px;
    padding-right: 32px;    
}

.DataGridFilterButtons {
    background-color: white;
    margin-top: 10px;
    position: sticky;
    bottom: 0px;
    text-align: center;
    padding: 16px 16px 16px 0px;
    border-top: 1px #E9ECEF solid;
}

.TableOverflow {
    overflow: auto;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

/* added CH 10/20 below */

.content-top.display-flex.align-items-center {
    box-shadow: none;
}

.content-breadcrumbs {
    margin-bottom: 7px;
    margin-left: 20px;
    padding-top: 24px;
    
}

.content-top-title {
    margin-bottom: 16px;
}


.WideSidebar {
    width: 750px;
}

.GridWrapperSmall {
    max-height: calc(100vh - 450px);
}

.GridWrapperBig {
    max-height: calc(100vh - 370px);
}

.OptionsDropdown {

}

.OptionsDropdown .dropdown-header {
    width: 36px;
    height: 32px;
    justify-content: center;
    border: 1px solid #ADB5BD;
    border-radius: 4px;
}

.OptionsDropdown .dropdown-icon {
    display: none;   
}

.OptionsDropdown .dropdown-content .dropdown-content-list {
    width: 250px;
    margin-left: -100px;
}

.NewButton {
    background-color: #99459a;
    color: #fff !important;
    height: 32px;
    border-radius: 4px;
    width: 138px;
    font-size: 12px;
}

.NewButton:hover {
    color: white;   
}

.AppliedFilter {
    background: #DEE2E6;
    border-radius: 45px;
    margin-top: 5px;
    padding: 0px 4px 0px 8px;
    width: auto;
    margin-left: 8px;
    font-weight: bold;
}

.breadcrumbs-item .icon .fa-fw {
    font-size: 16px;
}

.breadcrumbs-item .icon.ph {
    margin-left: 16px;
    margin-right: 16px;
}

.OverlayWrapper {
    margin-top: 0px !important;
}

.flex-center {
    align-items: center;
}

.flex-grow {
    flex-grow: 1;
}

.modal-wrapper.confirmation-modal {    
    max-width: 600px;        
}

.move-to-right span{
    margin-top: 4px;
}

.move-to-right{
    background: #FFFFFF;
    border: 1px solid #9C479B;
    border-radius: 4px;
    display: inline-block;
    height: 32px;
    width: 32px;
    margin-top: 3px!important;
    margin-left: 5px;
}

.ECT_FeedbackContainer .FeedbackInitial {
    top: 12px;
    right: 450px!important;
    bottom: inherit;
    height: 40px;
    width: 40px;
}


.ECT_FeedbackContainer .FeedbackMessage {
    top: 12px;
    right: 450px!important;
    bottom: inherit;
}

.ECT_FeedbackContainer .FeedbackBox{
    top: 12px;
    right: 450px!important;
    bottom: inherit;
}

.bold {
    font-weight: var(--font-bold);
}

/* ============================================
   OUTSYSTEMS READ-ONLY MODE - THEME CSS
   ============================================
   
   Add this to your theme's CSS file.
   This provides comprehensive styling for read-only mode
   across all OutSystems applications.
   
   Usage: Add class "readonly-mode" to your layout container
   ============================================ */

/* ==========================================
   VISUAL INDICATOR
   ========================================== */

/* Read-only banner at top of page */
.readonly-mode::before {
    content: "READ-ONLY MODE";
    position: fixed;
    /* bottom: 5px; */
    /* left: 0; */
    right: -62px;
    top: 50%;
    background-color: #ff9800;
    color: white;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 12px;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    width: 150px;
    margin: auto;
    border-radius: 6px;
    transform: rotate(270deg);
}

/* Adjust page padding for banner */
.readonly-mode {
    
}


/* Optional: Remove banner if you don't want visual indicator */
/*
.readonly-mode::before {
    display: none;
}
.readonly-mode {
    padding-top: 0;
}
*/


/* ==========================================
   FORM INPUTS
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable all text-based inputs (except allowed ones) */
.readonly-mode input[type="text"]:not(.allow-readonly):not(.allow-readonly-container input[type="text"]):not(.toggle-button input),
.readonly-mode input[type="email"]:not(.allow-readonly):not(.allow-readonly-container input[type="email"]):not(.toggle-button input),
.readonly-mode input[type="password"]:not(.allow-readonly):not(.allow-readonly-container input[type="password"]):not(.toggle-button input),
.readonly-mode input[type="number"]:not(.allow-readonly):not(.allow-readonly-container input[type="number"]):not(.toggle-button input),
.readonly-mode input[type="tel"]:not(.allow-readonly):not(.allow-readonly-container input[type="tel"]):not(.toggle-button input),
.readonly-mode input[type="date"]:not(.allow-readonly):not(.allow-readonly-container input[type="date"]):not(.toggle-button input),
.readonly-mode input[type="datetime-local"]:not(.allow-readonly):not(.allow-readonly-container input[type="datetime-local"]):not(.toggle-button input),
.readonly-mode input[type="time"]:not(.allow-readonly):not(.allow-readonly-container input[type="time"]):not(.toggle-button input),
.readonly-mode input[type="search"]:not(.allow-readonly):not(.allow-readonly-container input[type="search"]):not(.toggle-button input),
.readonly-mode input[type="url"]:not(.allow-readonly):not(.allow-readonly-container input[type="url"]):not(.toggle-button input),
.readonly-mode input[type="month"]:not(.allow-readonly):not(.allow-readonly-container input[type="month"]):not(.toggle-button input),
.readonly-mode input[type="week"]:not(.allow-readonly):not(.allow-readonly-container input[type="week"]):not(.toggle-button input),
.readonly-mode textarea:not(.allow-readonly):not(.allow-readonly-container textarea):not(.toggle-button textarea) {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: black !important;
    cursor: not-allowed !important;
    opacity: 0.9;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Disable select dropdowns (except allowed ones and those inside .choices) */
.readonly-mode select:not(.allow-readonly):not(.allow-readonly-container select):not(.choices select) {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: black !important;
    cursor: not-allowed !important;
    opacity: 0.9;
}

/* Disable checkboxes and radio buttons (except allowed ones) */
.readonly-mode input[type="checkbox"]:not(.allow-readonly):not(.allow-readonly-container input[type="checkbox"]):not(.toggle-button input),
.readonly-mode input[type="radio"]:not(.allow-readonly):not(.allow-readonly-container input[type="radio"]):not(.toggle-button input) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Disable file uploads (except allowed ones) */
.readonly-mode input[type="file"]:not(.allow-readonly):not(.allow-readonly-container input[type="file"]) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.5;
    background-color: #f5f5f5 !important;
}

/* Disable range sliders (except allowed ones) */
.readonly-mode input[type="range"]:not(.allow-readonly):not(.allow-readonly-container input[type="range"]) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Disable color pickers (except allowed ones) */
.readonly-mode input[type="color"]:not(.allow-readonly):not(.allow-readonly-container input[type="color"]) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}


/* ==========================================
   OUTSYSTEMS WIDGETS
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable OutSystems Switch widget (except allowed ones) */
.readonly-mode .switch:not(.allow-readonly):not(.allow-readonly-container .switch),
.readonly-mode .OSSwitch:not(.allow-readonly):not(.allow-readonly-container .OSSwitch),
.readonly-mode .switch-wrapper:not(.allow-readonly):not(.allow-readonly-container .switch-wrapper) {
    pointer-events: none !important;
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* Disable Toggle Button widget (except allowed ones) - but NOT inputs inside */
.readonly-mode .toggle-button:not(.allow-readonly):not(.allow-readonly-container .toggle-button) {
    pointer-events: none !important;
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #f5f5f5 !important;
}

/* Disable OutSystems Dropdown widget (except allowed ones) */
.readonly-mode .dropdown:not(.allow-readonly):not(.allow-readonly-container .dropdown),
.readonly-mode .dropdown-toggle:not(.allow-readonly):not(.allow-readonly-container .dropdown-toggle),
.readonly-mode .choices:not(.allow-readonly):not(.allow-readonly-container .choices),
.readonly-mode .choices__inner:not(.allow-readonly-container .choices__inner) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.9;
    background-color: #f5f5f5 !important;
}

/* Disable Reactive Dropdown Search (except allowed ones) */
.readonly-mode .osui-dropdown-search:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-search),
.readonly-mode .osui-dropdown-search input:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-search input),
.readonly-mode .osui-dropdown-search button:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-search button),
.readonly-mode .osui-dropdown-search .osui-dropdown__trigger:not(.allow-readonly-container .osui-dropdown__trigger),
.readonly-mode .osui-dropdown__dropdown-list:not(.allow-readonly-container .osui-dropdown__dropdown-list),
.readonly-mode .osui-dropdown__option:not(.allow-readonly-container .osui-dropdown__option) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.9;
    background-color: #f5f5f5 !important;
}

/* Apply background specifically to vscomp-toggle-button for dropdown search */
.readonly-mode .osui-dropdown-search:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-search) .vscomp-toggle-button {
    background-color: #f5f5f5 !important;
}

/* Disable Reactive Dropdown Server Side (except allowed ones) */
.readonly-mode .osui-dropdown-serverside:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-serverside),
.readonly-mode .osui-dropdown-serverside input:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-serverside input),
.readonly-mode .osui-dropdown-serverside button:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-serverside button),
.readonly-mode .osui-dropdown-serverside .osui-dropdown__trigger:not(.allow-readonly-container .osui-dropdown__trigger),
.readonly-mode .osui-dropdown-serverside .osui-dropdown__dropdown-list:not(.allow-readonly-container .osui-dropdown__dropdown-list),
.readonly-mode .osui-dropdown-serverside .osui-dropdown__option:not(.allow-readonly-container .osui-dropdown__option),
.readonly-mode .osui-dropdown-serverside .osui-dropdown__clear-button:not(.allow-readonly-container .osui-dropdown__clear-button),
.readonly-mode .osui-dropdown-serverside .osui-dropdown__loading:not(.allow-readonly-container .osui-dropdown__loading) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.9;
    background-color: #f5f5f5 !important;
}

/* Apply background specifically to selected-values-wrapper for dropdown serverside */
.readonly-mode .osui-dropdown-serverside:not(.allow-readonly):not(.allow-readonly-container .osui-dropdown-serverside) .osui-dropdown-serverside__selected-values-wrapper {
    background-color: #f5f5f5 !important;
}

/* Disable Select2 dropdowns (except allowed ones) */
.readonly-mode .select2-container:not(.allow-readonly):not(.allow-readonly-container .select2-container) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.9;
}

/* Disable DatePicker widget (except allowed ones) */
.readonly-mode .datepicker:not(.allow-readonly):not(.allow-readonly-container .datepicker),
.readonly-mode .datepicker-toggle:not(.allow-readonly):not(.allow-readonly-container .datepicker-toggle),
.readonly-mode .flatpickr-input:not(.allow-readonly):not(.allow-readonly-container .flatpickr-input) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    background-color: #f5f5f5 !important;
}

/* Disable RangeSlider widget (except allowed ones) */
.readonly-mode .range-slider:not(.allow-readonly):not(.allow-readonly-container .range-slider),
.readonly-mode .noUi-target:not(.allow-readonly-container .noUi-target) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Disable Upload widget (except allowed ones) */
.readonly-mode .upload-widget:not(.allow-readonly):not(.allow-readonly-container .upload-widget),
.readonly-mode .file-upload:not(.allow-readonly):not(.allow-readonly-container .file-upload),
.readonly-mode .ThemeGrid_UploadFile:not(.allow-readonly):not(.allow-readonly-container .ThemeGrid_UploadFile) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.5;
}


/* ==========================================
   BUTTONS
   Excludes: .allow-readonly, .allow-readonly-container *, and tab header items
   ========================================== */

/* Disable all buttons by default (except allowed ones and tab headers) */
.readonly-mode button:not(.allow-readonly):not(.allow-readonly-container button):not(.osui-tabs__header-item),
.readonly-mode .btn:not(.allow-readonly):not(.allow-readonly-container .btn):not(.osui-tabs__header-item),
.readonly-mode .ThemeGrid_Button:not(.allow-readonly):not(.allow-readonly-container .ThemeGrid_Button):not(.osui-tabs__header-item),
.readonly-mode input[type="button"]:not(.allow-readonly):not(.allow-readonly-container input[type="button"]),
.readonly-mode input[type="submit"]:not(.allow-readonly):not(.allow-readonly-container input[type="submit"]),
.readonly-mode input[type="reset"]:not(.allow-readonly):not(.allow-readonly-container input[type="reset"]) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.5;
    background-color: #e0e0e0 !important;
    border-color: #cccccc !important;
    color: #999 !important;
}


/* ==========================================
   LINKS
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable JavaScript/action links (except allowed ones) */
.readonly-mode a[href="javascript:void(0)"]:not(.allow-readonly):not(.allow-readonly-container a[href="javascript:void(0)"]),
.readonly-mode a[href="#"]:not(.allow-readonly):not(.allow-readonly-container a[href="#"]),
.readonly-mode a[onclick]:not(.allow-readonly):not(.allow-readonly-container a[onclick]) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    text-decoration: none;
    color: #999 !important;
}

/* Allow navigation links (except javascript and # links) */
.readonly-mode a[href]:not([href="javascript:void(0)"]):not([href="#"]):not([href=""]) {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ==========================================
   RICH TEXT EDITORS
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable Quill editor (except allowed ones) */
.readonly-mode .ql-editor:not(.allow-readonly-container .ql-editor),
.readonly-mode .ql-container:not(.allow-readonly-container .ql-container) {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* Disable TinyMCE editor (except allowed ones) */
.readonly-mode .tox-edit-area:not(.allow-readonly-container .tox-edit-area),
.readonly-mode .mce-content-body:not(.allow-readonly-container .mce-content-body) {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* Disable CKEditor (except allowed ones) */
.readonly-mode .cke_editable:not(.allow-readonly-container .cke_editable),
.readonly-mode .cke_wysiwyg_frame:not(.allow-readonly-container .cke_wysiwyg_frame) {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* Disable OutSystems RichTextEditor (except allowed ones) */
.readonly-mode .OSInline_RichText:not(.allow-readonly):not(.allow-readonly-container .OSInline_RichText),
.readonly-mode .richtext-editor:not(.allow-readonly):not(.allow-readonly-container .richtext-editor) {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    opacity: 0.9;
}


/* ==========================================
   TABLES & GRIDS
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable table row actions (except allowed ones) */
.readonly-mode .table-row-action:not(.allow-readonly):not(.allow-readonly-container .table-row-action),
.readonly-mode .action-link:not(.allow-readonly):not(.allow-readonly-container .action-link),
.readonly-mode .TableRecords .action-button:not(.allow-readonly):not(.allow-readonly-container .action-button) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.5;
}

/* Disable inline edit in tables (except allowed ones) */
.readonly-mode .editable-cell:not(.allow-readonly-container .editable-cell),
.readonly-mode .inline-edit:not(.allow-readonly-container .inline-edit) {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Allow table sorting and pagination */
.readonly-mode .table th.sortable,
.readonly-mode .pagination,
.readonly-mode .pagination a {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ==========================================
   DRAG & DROP
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable all draggable elements (except allowed ones) */
.readonly-mode [draggable="true"]:not(.allow-readonly-container [draggable="true"]),
.readonly-mode .draggable:not(.allow-readonly-container .draggable),
.readonly-mode .sortable-item:not(.allow-readonly-container .sortable-item) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.9;
}


/* ==========================================
   MODALS & POPUPS
   Excludes: .allow-readonly and .allow-readonly-container *
   ========================================== */

/* Disable buttons in modals (except allowed ones) */
.readonly-mode .popup-dialog button:not(.allow-readonly):not(.allow-readonly-container button),
.readonly-mode .modal button:not(.allow-readonly):not(.allow-readonly-container button),
.readonly-mode .Popup .Popup-Content button:not(.allow-readonly):not(.allow-readonly-container button) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.5;
}

/* Allow modal close buttons */
.readonly-mode .popup-dialog .close,
.readonly-mode .modal .close,
.readonly-mode .popup-close,
.readonly-mode .modal-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}


/* ==========================================
   NAVIGATION (ALLOW)
   ========================================== */

/* Ensure menu navigation works */
.readonly-mode .menu,
.readonly-mode .menu a,
.readonly-mode .navigation,
.readonly-mode .navigation a,
.readonly-mode .nav,
.readonly-mode .nav a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure breadcrumbs work */
.readonly-mode .breadcrumbs,
.readonly-mode .breadcrumbs a,
.readonly-mode .breadcrumb,
.readonly-mode .breadcrumb a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ===== TABS - TRADITIONAL (WEB) ===== */
/* Allow traditional tabs (div-based) */
.readonly-mode .tabs,
.readonly-mode .tabs-header,
.readonly-mode .tabs-header-item,
.readonly-mode .tabs-header-item.allow-readonly,
.readonly-mode .tabs-header-item.allow-readonly-container,
.readonly-mode .tabs-header .allow-readonly,
.readonly-mode .tabs-header .allow-readonly-container {
    pointer-events: auto !important;
    cursor: pointer !important;   
}

/* ===== TABS - REACTIVE ===== */
/* Allow reactive tabs (button-based) */
.readonly-mode .osui-tabs,
.readonly-mode .osui-tabs__header,
.readonly-mode .osui-tabs__header-item,
.readonly-mode button.osui-tabs__header-item,
.readonly-mode .osui-tabs__header button,
.readonly-mode .osui-tabs__header-item *,
.readonly-mode .osui-tabs__header button * {
    pointer-events: auto !important;
    cursor: pointer !important;   
}

/* Ensure ALL elements in header tags work (tab headers, etc) */
.readonly-mode header,
.readonly-mode header *,
.readonly-mode header a,
.readonly-mode header button {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Ensure sidebar navigation works */
.readonly-mode .sidebar a,
.readonly-mode .sidebar-menu a {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ==========================================
   REPORTS & EXPORTS (ALLOW)
   ========================================== */

/* Allow export/download buttons with specific class */
.readonly-mode .export-button,
.readonly-mode .download-button,
.readonly-mode .print-button,
.readonly-mode button[class*="export"],
.readonly-mode button[class*="download"],
.readonly-mode button[class*="print"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}


/* ==========================================
   CUSTOM OVERRIDES
   ========================================== */

/* Add your application-specific overrides below */

/* Example: Allow specific widget to be editable
.readonly-mode .my-special-input {
    pointer-events: auto !important;
    cursor: text !important;
    opacity: 1 !important;
    background-color: white !important;
}
*/

/* Example: Hide specific buttons instead of disabling
.readonly-mode .delete-button:not(.allow-readonly-container .delete-button) {
    display: none !important;
}
*/


/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
    .readonly-mode::before {
        font-size: 11px;
        padding: 6px;
    }
    
    .readonly-mode {
        padding-top: 30px;
    }
}


/* ==========================================
   ACCESSIBILITY
   ========================================== */

/* Ensure disabled state is announced to screen readers */
.readonly-mode input:disabled,
.readonly-mode button:disabled,
.readonly-mode select:disabled {
    cursor: not-allowed !important;
}

/* Maintain focus visibility for keyboard navigation */
.readonly-mode a:focus,
.readonly-mode button.allow-readonly:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}


/* ==========================================
   PRINT STYLES
   ========================================== */

/* Hide read-only banner when printing */
@media print {
    .readonly-mode::before {
        display: none !important;
    }
    
    .readonly-mode {
        padding-top: 0 !important;
    }
}


.readonly-mode .hide-in-readonly{
    display: none;
}