/*body {background-color: #e0e0ff}*/
/*noinspection ALL*/
body {
    background-color: Canvas;
    color:            CanvasText;
    color-scheme:     light dark;
}

:root {

    --gh-light-navbar: #000000;

    --gh-light-0:     hsl(0 0% 0%);
    --gh-light-50:     hsl(0 0% 95%);
    --gh-light-80:     hsl(0 0% 92%);
    --gh-light-100:    hsl(0 0% 90%);
    --gh-light-150:    hsl(0 0% 85%);
    --gh-light-200:    hsl(0 0% 80%);
    --gh-light-300:    hsl(0 0% 70%);
    --gh-light-400:    hsl(0 0% 60%);
    --gh-light-500:    hsl(0 0% 50%);
    --gh-light-600:    hsl(0 0% 40%);
    --gh-light-700:    hsl(0 0% 20%);
    --gh-light-800:    hsl(0 0% 10%);
    --gh-light-900:    hsl(0 0% 0%);

    --gh-dark-navbar: #000000;

    --gh-dark-0:      hsl(0 0% 0%);
    --gh-dark-50:      hsl(0 0% 5%);
    --gh-dark-80:      hsl(0 0% 8%);
    --gh-dark-100:     hsl(0 0% 10%);
    --gh-dark-150:     hsl(0 0% 15%);
    --gh-dark-200:     hsl(0 0% 20%);
    --gh-dark-300:     hsl(0 0% 30%);
    --gh-dark-400:     hsl(0 0% 40%);
    --gh-dark-500:     hsl(0 0% 50%);
    --gh-dark-600:     hsl(0 0% 60%);
    --gh-dark-700:     hsl(0 0% 70%);
    --gh-dark-800:     hsl(0 0% 80%);
    --gh-dark-900:     hsl(0 0% 100%);


    --gh-red-light-1: hsl(0 100% 80%);
    --gh-red-light-2: hsl(0 100% 90%);

    --gh-red-dark-1: hsl(0 100% 30%);
    --gh-red-dark-2: hsl(0 100% 20%);

    --gh-green-1: hsl(120 100% 10%);
    --gh-green-2: hsl(120 100% 20%);
    --gh-green-3: hsl(120 100% 30%);
    --gh-green-4: hsl(120 100% 40%);
    --gh-green-5: hsl(120 100% 50%);

    --gh-red-1: hsl(0 100% 10%);
    --gh-red-2: hsl(0 100% 20%);
    --gh-red-3: hsl(0 100% 30%);
    --gh-red-4: hsl(0 100% 40%);
    --gh-red-5: hsl(0 100% 50%);

}

/* ------- MAIN APP --------- */
#mainApp { position: absolute; left: 0; right: 0; top: 0; bottom: 0}

.body--dark .appHeader {background-color: black;
}

.body--light .mainMenu {background-color: var(--gh-light-80) !important;}
.body--dark .mainMenu {background-color: var(--gh-dark-50) !important;}

.mainMenu .q-drawer__content {overflow-y: auto !important; overflow-x: hidden !important;}

.q-page {display: flex;flex-direction: column;}
.q-tab-panels {flex:1;display: flex;flex-direction: column;}
.q-panel {flex:1;display: flex;flex-direction: column;}
.q-tab-panel {flex:1;display: flex;flex-direction: column;}

.q-toolbar__title:first-child {padding-left: 12px;}

.q-toggle__inner--falsy {color: red !important;}
.q-toggle__inner--falsy .q-toggle__thumb:after {background-color: red !important;}
.q-toggle__inner--falsy .q-toggle__thumb:before {background-color: red !important;}

#mainPanel { position: absolute; top: 0; left: 0; bottom: 0; right:0; padding: 0;
    background-image: url('/public/images/imerc/imerc.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain !important;
    display: flex;
    overflow: auto;
}

.body--light #mainPanel {background-color:var(--gh-light-50); }
.body--dark #mainPanel {background-color:var(--gh-dark-100); }


.body--light #mainPanel > div:nth-of-type(1) {background-color: var(--gh-light-50);}
.body--dark #mainPanel > div:nth-of-type(1) {background-color: var(--gh-dark-100);}
.body--light .q-panel {background-color: var(--gh-light-50) !important;}
.body--dark .q-panel {background-color: var(--gh-dark-100) !important;}

.vviewer-toolbar ul li { width: 26px !important; height: 26px !important; padding: 0 !important; margin: 0 5px !important;}
.vviewer-toolbar ul li:before { margin: 8px 14px !important}

.userInfo { padding: 8px 8px 8px 16px; min-height: 32px; display: flex; flex-direction: row; align-items: center;}
.userInfo .left { padding: 8px 16px 8px 0;}
.userInfo .cont { flex: 1 1 0;}
.userInfo .cont:hover { color: gray;}
.userInfo .right { padding: 8px; border: 1px solid gray; border-radius: 4px; margin: 0 0 0 8px;}
.userInfo .right:hover { color: yellow;}

/* ------- VUE, QUASAR UI -------- */
.appBtn {min-width: 140px;max-width: 140px;min-height: 140px;white-space: normal !important;}

.gFit {flex: 1 1 0 !important;display: flex; flex-direction: column;flex-wrap: nowrap !important;}
.gScroll {flex: 1 1 0 !important;display: flex; flex-direction: column;overflow: auto;position:relative;}

.q-toolbar {padding: 0 0 !important;}

.q-table__searchbar {}
.q-table__searchbar tr.q-table__searchbar {height: 28px !important;}
.q-table__searchbar tr.q-table__searchbar th {padding: 0 !important;height: 28px !important;}
.q-table__searchbar tr.q-table__searchbar th .q-field__native {padding: 0 0 0 16px !important;}
.q-table__searchbar tr.q-table__searchbar th .q-field__control {height: 28px !important;}
.q-table__searchbar tr.q-table__searchbar .q-field__marginal {height: 28px !important;font-size: 18px;padding: 0;}

.q-table__summary {}
.q-table__summary tr.q-table__summary {height: 28px !important;}
.q-table__summary tr.q-table__summary th {height: 28px !important;background-color: var(--q-info) !important;color: black;}

.GHGrid {background: transparent;}
.GHGrid .cardActions {}

.body--light .GHGrid {background: var(--gh-light-50);}
.body--light .GHGrid td {color: var(--gh-light-800);}
.body--light .GHGrid th {color: var(--gh-light-900);background-color: var(--gh-light-80) !important;}
.body--light .q-table__searchbar tr.q-table__searchbar th {background-color: var(--gh-light-200) !important;}
.body--light .GHGrid th.sortable {background-color: var(--gh-light-300) !important;}
.body--light .GHGrid th.sortable:hover {background-color: var(--gh-light-100) !important;}
.body--light .GHGrid td.sticky {background: var(--gh-light-100);}
.body--light .GHGrid .q-table__bottom {background: var(--gh-light-300);}
/*.body--light .GHGrid thead tr:last-child th {border-bottom: 1px solid var(--gh-light-50) !important;}*/
.body--light .GHGrid .sticky.last {border-right: 1px solid var(--gh-light-50);}

.body--dark .GHGrid {background: var(--gh-dark-200);}
.body--dark .GHGrid td {color: var(--gh-dark-800);}
.body--dark .GHGrid th {color: var(--gh-dark-800);background-color: var(--gh-dark-80) !important;}
.body--dark .q-table__searchbar tr.q-table__searchbar th {background-color: var(--gh-dark-100) !important;}
.body--dark .GHGrid th.sortable {background-color: var(--gh-dark-80) !important;}
.body--dark .GHGrid th.sortable:hover {background-color: var(--gh-dark-100) !important;}
.body--dark .GHGrid td.sticky {background: var(--gh-dark-150);}
.body--dark .GHGrid .q-table__bottom {background: var(--gh-dark-80);}
/*.body--dark .GHGrid thead tr:last-child th {border-bottom: 1px solid var(--gh-dark-50) !important;}*/
.body--dark .GHGrid .sticky.last {border-right: 1px solid var(--gh-dark-50);}

.GHGrid table {position: relative;}
.GHGrid thead {position: relative;}
.GHGrid thead tr {border: none !important;}
.GHGrid th {white-space: normal !important;font-weight: 500 !important; vertical-align: top;}
.GHGrid th.sortable {padding: 7px 22px 7px 16px !important;position: relative;}
.GHGrid th.sortable i.q-table__sort-icon {position: absolute; top: 8px; right: 2px;}

/*
.GHGrid th.ssortable:before { font-family: "Material Icons"; content: "\e5d7";color: #888888; font-size: 13px;float: left;margin: 0 -5px 0 -15px;}
*/
/*.GHGrid thead tr:last-child th {border-bottom: 1px solid black !important;}*/

.GHGrid td {white-space: normal !important;font-weight: 400 !important;}

.GHGrid .q-table__container {background: transparent;}
.GHGrid .q-table__middle { box-sizing: border-box !important;}
.GHGrid .q-table__top { flex: 0 0 65px; flex-wrap: nowrap;padding: 4px 12px 4px 4px;}
.GHGrid .q-table__bottom { flex: 0 0 60px;border-top: none;}
.GHGrid .q-table__middle { flex: 1 1 100px !important;background: transparent;}
.GHGrid .q-table__middle:empty {flex: 0;display: none;}
.GHGrid .q-table__grid-content {flex: 1 1 100px !important;overflow: auto;background: transparent;}
.GHGrid thead th { z-index: 2;}
.GHGrid thead th.sticky { z-index: 3;position: sticky;}
.GHGrid td.sticky {position: sticky; z-index: 1;}
.GHGrid .topSelect .q-field__native {min-height: 28px !important;max-height: 28px !important;overflow: hidden;}
.GHGrid .topSelect .q-field__control {min-height: 28px !important;max-height: 28px !important;}
.GHGrid .topSelect input[type=search] {width: 100% !important;}
.GHGrid .btnBlank {width: 32px;height: 32px;}
.GHGrid tbody img.clickable {cursor: pointer;}
.GHGrid td.imageset div {display: flex;justify-content: space-around;align-content: center;}
.GHGrid td.imageset img {border: 1px solid rgba(0, 0, 0, 0.5)}
.GHGrid td.expanded {padding: 0 !important;}
.GHGrid td.expanded thead th {z-index: auto !important;}
.GHGrid td.bold {font-weight: bold !important;}
.GHGrid td.italic {font-style: italic !important;}
.GHGrid td.underline {text-decoration: underline !important;}
.GHGrid td.strike {text-decoration: line-through !important;}
.GHGrid .q-pagination__content {}
.GHGrid .q-pagination__content button {margin: 0 !important;max-width: 50px;}

.GHGrid .gridItem {width:100%;padding:0;}
.GHGrid .gridItem header {display:flex;align-items: center;justify-content: space-between;padding:8px 16px;}
.GHGrid .gridItem header b {font-size:16px;font-weight:500;}
.GHGrid .gridItem header aside {}
.GHGrid .gridItem section {display: grid; grid-template-columns: 1fr 3fr;grid-gap: 4px;padding:8px 16px;white-space: normal;}
.GHGrid .gridItem section > * {padding:0;margin:0;}
.GHGrid .gridItem section dt {}
.GHGrid .gridItem section dd {}

.body--light .GHGrid .gridItem header {background-color: var(--gh-light-300);}
.body--dark .GHGrid .gridItem header {background-color: var(--gh-dark-300);}
.body--light .GHGrid .gridItem section dt {color: var(--gh-light-600);}
.body--dark .GHGrid .gridItem section dt {color: var(--gh-dark-600);}

.GHGridNoHeader th { border: none !important; height: 60px !important;}
.GHGridNoHeader thead tr:last-child th {border-bottom: none !important;}
.GHGridNoHeader .q-table__top { flex: 0 0 60px; flex-wrap: nowrap;padding: 4px 12px 4px 4px;}
.GHGridNoHeader .q-table__bottom { flex: 0 0 60px;}

.body--light .GHGridNoHeader {background: var(--gh-light-50) !important;}
.body--light .GHGridNoHeader th {background: var(--gh-light-100) !important;}
.body--light .GHGridNoHeader .q-table__bottom {background: var(--gh-light-100);}

.body--dark .GHGridNoHeader {background: var(--gh-dark-100) !important;}
.body--dark .GHGridNoHeader th {background: var(--gh-dark-80) !important;}
.body--dark .GHGridNoHeader .q-table__bottom {background: var(--gh-dark-80);}





.viewer-title#viewerTitle1 {font-size: 1.5em !important;}

.clickableRows tbody tr { cursor: pointer;}

.formGrid {
    width:                 100%;
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap:              8px;
    padding-bottom:        10px;
}

.formGridCol {
    width:                 100%;
    align-self:            start;
    display:               grid;
    grid-template-columns: 1fr;
    grid-gap:              8px;
}

.blinker { animation: blinker 3s cubic-bezier(.5, 0, 1, 1) infinite alternate;}

@keyframes blinker {
    50% {
        opacity: 0.3;
    }
}

fieldset {border: 1px solid green;border-radius: 4px;}
fieldset legend {padding: 0 8px;}