.sh_app * {
    font-size: 0.8vw;
}

.sh_app h1 {
    font-size: 1.6vw;
}

* {
    scrollbar-width: thin;
}

 *::-webkit-scrollbar {
        width: 12px;
    }

 *::-webkit-scrollbar-thumb {
        border-radius: 20px;
        border: 3px solid;
    }

  .sh_app .btn {
    background-color: inherit;
    color: inherit;
    border-color:inherit;
}

.table thead th,.table tfoot th {
    background-color: var(--table-header-bg-color);
    color: var(--table-header-fg-color);
}

.sh_database_recorddetail .table thead th,
.sh_database_recorddetail .table tfoot th {
    background-color: white;
    color: black;
}

.table thead th {
    border-top: 1px solid rgb(222, 226, 230);
}

/*

.sh_database_recorddetail thead tr {
    border:1px solid gray;
}

.table thead th {
    background-color: var(--table-header-bg-color);
    color: var(--table-header-fg-color);
    border-top: none;
}

.table tfoot th {
    background-color: var(--table-footer-bg-color);
    color: var(--table-footer-fg-color);
}

.buttonsPanel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    display:flex;
}

   .buttonsPanel button {
        margin-right: 0.5vw;
        margin-bottom: 0.5vw;
    }

    .buttonsPanel.right {
        margin-left: 0.5vw;
        margin-right: 0;
        right: 0;
        left: auto;
}*/





.sh_app li span {
    font-size: 0.8vw;
}

h5 {
    clear: both;
    color: darkorange;
}



img.logo {
    width: var(--sidebar-width);
    padding-top: 2vw;
    padding-right: 1vw;
    padding-left: 1vw;
    /*opacity: 0.125;*/
    cursor: pointer;
}

input, select, textarea, object {
    border: 1px solid gray;
    outline-color: steelblue;
}

    input:invalid,
    select:invalid, textarea:invalid {
        border-color: red;
    }

    /*
*[required] {
    background-color: #fff8f4;
    color: black;
}
    */



    input[readonly], textarea[readonly], select[readonly] {
        background-color: lavender;
        /*background-color: transparent;*/
        color: inherit;
    }

/*select[required] > option:not([value]) {
    color: gray;
}*/


.sh_app {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.sh_sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
}

    .sh_sidebar div.license {
        position: absolute;
        /*height: 2vw;*/
        bottom: 0;
        left: 5px;
        right: 0;
        font-size: 0.5vw;
        right: 5px;
        text-align: center;
    }

        .sh_sidebar div.license > div:first-child {
            font-size: 0.5vw;
            opacity: 0.5;
        }

.sh_sessionbar {
    position: absolute;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 2vw;
}




.sh_app > .css_main_content {
    position: absolute;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    top: 2vw;
    /*display: none;*/
    display: flex;
}



.css_main_content {
    margin: 1vw 1vw 0 1vw;
    background-color: inherit;
    display: flex;
    flex-direction: column;
}

    .css_main_content > div:first-child {
        height: 7.4vw;
    }

    .css_main_content > div:nth-child(2) {
        flex: 1;
        overflow: hidden;
    }


.sh_database_listview.css_main_content > div:nth-child(2) {
    display: flex;
}





.css_main_content > div:first-child > div:first-child {
    height: 4.9vw;
}

.css_main_content .close_button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: orange;
    color: white;
    width: 2.5em;
    height: 2.5em;
}





.sh_database_recordtab {
    width: auto;
}

    .sh_database_recordtab > div {
        display: block;
    }

        .sh_database_recordtab > div:first-child {
            padding: 0.5vw;
            overflow: hidden;
            height: 2vw;
            background-color: var(--table-header-bg-color);
            color: var(--table-header-fg-color);
            
            /*
            */
        }

        .sh_database_recordtab > div:nth-child(2) {
            display: flex;
            flex-wrap: wrap;
            align-content: stretch;
            /*padding: 1vw;*/
        }




.sh_database_recordpanel, sh_database_recorddetail {
    display: block;
    border: 1px solid lightgray;
    border-radius: 0.5vw;
    /*    background-color: pink;*/
    flex: 1;
}

.sh_database_recordpanel {
    margin: 0.75vw;
    padding: 0.75vw;
    min-width: 46%;
}

    .sh_database_recordpanel > span:first-child {
        position: relative;
        top: -1.9em;
        text-transform: uppercase;
    }

    .sh_database_recordpanel > div {
        padding-bottom: 2em;
    }

.sh_database_recordfield {
    display: flex;
    padding: 0.14vw;
    flex-direction: row;
    flex: 1 1 0;
    /*    min-width: 300px;*/
}

    .sh_database_recordfield label {
        text-align: right;
        min-width: 11vw;
        padding-right: 0.5vw;
        white-space: nowrap;
        /*text-transform: uppercase;*/
    }

    .sh_database_recordfield > *:not(label):not(button):not(div):not(img) {
        padding-left: 0.5em;
    }

    .sh_database_recordfield > *:nth-child(2) {
        flex: 1;
    }

    .sh_database_recordfield button.lkpbtn,
    .sh_database_recordfield > .sh_recordlookupbutton {
        margin-left: 0.2vw;
        width: 1.4vw;
        border-radius: 0.25rem;
        border: 1px solid gray;
        height: 1.4vw;
        aspect-ratio: 1/1;
    }

        .sh_database_recordfield button.lkpbtn::content,
        .sh_database_recordfield > .sh_recordlookupbutton::content {
            margin-left: 0.2vw;
            width: 1.63vw;
        }

    .sh_database_recordfield input[type="checkbox"] {
        margin-top: 8px;
        display: block;
        text-align: left;
        flex: 0;
    }

.sh_accordion {
    padding: 1em;
    overflow-x: auto;
}

    .sh_accordion span {
        display: inline-block;
        padding: 0.5vw;
    }


    .sh_accordion li {
        display: block;
    }

.sh_accordiontabbutton {
    cursor: pointer;
}

.sh_accordion li > span:first-child {
    width: 100%;
    cursor: pointer;
    /*text-transform: uppercase;*/
}

.sh_accordiontab {
    width: 100%;
}

    .sh_accordiontab ul {
        display: none;
        padding-left: 1vw;
        margin: 0;
    }

    .sh_accordiontab.open ul {
        display: block;
    }

input[type="file"] {
    display: none;
}

object {
    /*height: 18vw;*/
    overflow: auto;
    width: 100%;
}

span.link {
    color: #007bff;
    cursor: pointer
}

    span.link:hover {
        text-decoration: underline;
    }

.shdb_input_control span.link {
    width: 100%;
    text-align: right;
    display: inline-block;
}
/* The Modal (background) */
.sh_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* Modal Content/Box */
.sh_modal_contentpanel {
    position: absolute;
    top: 4vw;
    bottom: 4vw;
    left: 8vw;
    right: 8vw;
    background-color: var(--main-bg-color);
    padding: 1vw;
    /*padding-top: 3vw;*/
    border: 1px solid gray;
    border-radius: 0.5vw;
    overflow-x: auto;
}

    .sh_modal_contentpanel > .css_main_content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }


.sh_modal_closebutton {
    position: absolute;
    right: 7vw;
    background-color: orange;
    color: white;
    top: 3vw;
    width: 2.5em;
    height: 2.5em;
}

.sh_table td button {
    /*width: 5em;*/
    aspect-ratio: 1/1;
}


.sh_app .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    z-index: 9999999;
    display: none;
}

.action_panel {
    width: 100%;
    height: 2vw;
    display: flex;
    gap: 0.5vw;
    margin-bottom: 0.25vw;
}

    .action_panel .filler {
        flex: 1
    }

    /*
    .action_panel button {
        aspect-ratio: 1/1;
    }
    */
    
    button.sh-text-button{
        min-width:8vw;
    }
    
     .action_panel button.square {
        aspect-ratio: 1/1;
    }

        .action_panel button:hover {
            background-color: rgb(37,126,156) !important;
            color: white !important;
        }



.sh_accordiontabbutton img {
    width: 56px;
    display: inline-block;
}

.sh_accordiontabbutton img {
    width: 3vw;
    display: inline-block;
    filter: invert(100%);
    /*display: none;*/
}

img.large-icon {
    width: 6vw;
    float: left;
}

.sh_filterbar {
    display: none;
    padding-left: 1vw;
    width: var(--sidebar-width);
    /*transition: width 1s;*/
}



.filterbar_visible .sh_filterbar {
    display: block;
    /*transition: width 1s display 1s*/
}


.sh_fieldfilter > button {
    width: 100%;
    border-bottom-color: transparent;
    border-radius: 0;
    text-transform: uppercase;
}

    .sh_fieldfilter > button:hover {
        background-color: orange !important;
        color: white !important;
    }


.sh_fieldfilter:last-child > button,
.sh_fieldfilter.open > button {
    border-bottom-color: steelblue;
}


.sh_fieldfilter > div {
    display: none;
    padding-top: 0.25vw;
}

    .sh_fieldfilter > div input,
    .sh_fieldfilter > div select {
        width: 100%;
        margin-bottom: 0.25vw;
    }

.sh_filterbar button.lkb {
    margin-left: 0.2vw;
    width: 2vw;
    border-radius: 0.25rem;
    border: 1px solid gray;
    margin-bottom: 0.25vw;
}

.sh_fieldfilter input, .sh_fieldfilter select {
    padding: 0.5rem;
}

.sh_fieldfilter.open > div {
    display: block;
}

.sh_database_listview > div:nth-child(2) > div:first-child {
    overflow: hidden;
    /*border-top: 1px solid lightgray;*/
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .sh_database_listview > div:nth-child(2) > div:first-child > div:nth-child(1) {
        overflow: auto;
        flex: 1;
    }

.sh_database_listview > div:nth-child(2) > div:nth-child(2) {
    width: var(--sidebar-width);
    overflow-y: auto;
}

.sh_database_listview.filterbar_visible {
}


.sh_database_columnsselectionview > div:nth-child(2),
.sh_database_recordview > div:nth-child(2) {
    overflow-y: scroll;
    /*border-top: 1px solid steelblue;*/
}


.sh_database_columnsselectionview fieldset {
    border: 1px solid gray;
    width: 15vw;
    float: left;
    padding: 0.5vw;
    margin: 0.5vw;
    border-radius: 0.5vw;
}

.sh_searchbar {
    display: none;
}

.rows_per_page {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: right;
}

.sh_filterbar > div:first-child label {
    display: none;
}

.sh_filterbar > div:first-child > * {
    width: 100%;
    margin-bottom: 0.5em;
}

.sh_dashboardview ul, .sh_dashboardview input {
    margin-top: 1vw;
}

.sh_database_columnsselectionview fieldset div {
    display: flex;
    align-items: center;
    border-bottom: 0.25vw;
}

    .sh_database_columnsselectionview fieldset div label {
        margin-bottom: auto;
        margin-left: 0.25vw;
    }

/*.sh_database_columnsselectionview fieldset div  *{
    vertical-align:top;
}*/


/************************************************************************/

.sh_pagebar {
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 2px;
    color: dimgray;
    user-select: none;
    /*margin-top:12px;*/
    gap: 0.5em;

}

    .sh_pagebar > span {
 
        /*font-size: x-small;*/
      text-align:right;
       white-space:nowrap;
    }

    .sh_pagebar > span:first-of-type {
        white-space:nowrap;
    }

    .sh_pagebar input[type=number] {
        width: 48px;
        text-align:right;
    }

    .sh_pagebar > * {
      
    }

    .sh_pagebar select {
        flex-grow: 1;
        text-align: right;
    }

    .sh_pagebar > div:first-of-type {
        display: flex;
        width: 100%;
    }

        .sh_pagebar > div:first-of-type > span {
            border: 1px solid gray;
            background-color: white;
            color: dimgray;
            min-width: 2rem;
            text-align: center;
            border-radius: 6px;
            cursor: pointer;
            margin-right: 4px;
        }

            .sh_pagebar > div:first-of-type > span.active {
                background-color: darkorange;
                color: white;
            }
            
.sh_database_listview .sh_pagebar {
    background-color: var(--table-header-bg-color);
    color: var(--table-header-fg-color);
    padding: 0.5em;
    font-weight: normal;
}

/* Disabled inputs (used by date preset range buttons when Custom is active) */
.sh_filter_disabled {
    opacity: 0.35;
    pointer-events: none;
    background: #f0f0f0 !important;
}

/* Date preset button rows: Current/Previous/Custom + Day/Week/Month/Year */
.sh_date_presets {
    margin-bottom: 0.25vw;
}

.sh_date_radio_row {
    display: flex;
    gap: 1px;
    margin-bottom: 2px;
}

.sh_date_radio_btn {
    flex: 1;
    padding: 0.15em 0;
    font-size: 0.7em;
    font-weight: 600;
    border: 1px solid #ccc;
    background: #f8f8f8;
    color: #888;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.sh_date_radio_btn:first-child {
    border-radius: 0.2rem 0 0 0.2rem;
}

.sh_date_radio_btn:last-child {
    border-radius: 0 0.2rem 0.2rem 0;
}

.sh_date_radio_btn:hover:not(.sh_filter_disabled) {
    background: #e0e0e0;
}

.sh_date_radio_btn.active {
    background: steelblue;
    color: white;
    border-color: steelblue;
}

.sh_date_radio_btn.active.sh_filter_disabled {
    background: #b0b0b0 !important;
    border-color: #b0b0b0;
    color: #e8e8e8;
}