:root {
            --header-height: 32px; /*blue darken-3*/
        }

        html { overflow-y:auto; }
        html, body { font-size: 14px; /*background-color:var(--bg-side);*/ }
        main, #datacell { background-color:var(--bg-main); }

        .no-mobile   { display:none !important; }
        .hide-mobile { display:none; }
        .mobile, .show-mobile    { display:initial !important; }
        .mobile-block,  .mob-block, .m-block { display:block !important; }
        .mobile-iblock, .mob-iblock          { display:inline-block !important; }
        .mobile-flex,   .mob-flex            { display:flex !important; }

        .mob-o1, .mo1 { order:1 !important; }
        .mob-o2, .mo2 { order:2 !important; }
        .mob-o3, .mo3 { order:3 !important; }
        .mob-o4, .mo4 { order:4 !important; }
        .mob-o5, .mo5 { order:5 !important; }
        .mob-o6, .mo6 { order:6 !important; }
        .mob-o7, .mo7 { order:7 !important; }
        .mob-o8, .mo8 { order:8 !important; }
        .mob-o9, .mo9 { order:9 !important; }

        .mob-w10 { width:10% !important; }
        .mob-w15 { width:15% !important; }
        .mob-w20 { width:20% !important; }
        .mob-w25 { width:25% !important; }
        .mob-w30 { width:30% !important; }
        .mob-w33 { width:33.333333% !important; }
        .mob-w40 { width:40% !important; }
        .mob-w45 { width:45% !important; }
        .mob-w50 { width:50% !important; }
        .mob-w60 { width:60% !important; }
        .mob-w70 { width:70% !important; }
        .mob-w75 { width:75% !important; }

        .mob-w10.c, .mob-w15.c, .mob-w20.c, .mob-w25.c,
        .mob-w30.c, .mob-w33.c, .mob-w40.c, .mob-w45.c, .mob-w50.c { padding-left:0; padding-right:0; }

        .mob-text-right  { text-align: right !important;}
        .mob-text-left   { text-align: left !important;}
        .mob-text-center { text-align: center !important;}

        #header{
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            /*
            z-index:95;
            */
            padding: 0 .25rem;
            height:32px;
            height:var(--header-height);
            overflow: visible;
            border-bottom: 1px solid #00000020;
        }
        #header h2 { padding:2px 0 0; }

        #header nav {

            top:32px; height:600px; background:#90CAF9;

            position:absolute;
            left: -500px;
            top: var(--header-height);
            height: calc( 100vh - var(--header-height) );
            z-index: 95;
            background: var(--bg-head-def);
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            transition: left .28s .05s ease-in-out;
            overflow: auto;

            line-height: 1.8rem;

        }
        .director #header nav {
            background: # 90CAF9;
            background: var(--bg-head-dir);
        }
        #header nav.expanded {
            left:0 !important;
        }


        #header nav .tab {
            display:block;
            padding:5px 20px;
            margin:0;
            border: none;
            border-radius:0;
            border-bottom: 1px dotted rgba(0,0,0,.15) !important;
        }
        #header nav .tab.tab-index { display:block; }



        #frmBar,
        #bar {
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            /*
            z-index:94;
            */
            top:32px;
            top:var(--header-height);

            overflow-y: hidden;
            max-height: 2.2rem;
            transition: height .28s .05s ease-in-out;

            border-bottom:1px solid lightgray;
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);

            display: block;
            display:flex;

            /**/
            padding-right: 2rem !important;
            width: calc( 100% - 2.5rem );
            flex-wrap:wrap;
            justify-content: center;
        }
        ul#bar li.vr {
            border-right:none;
            padding-right:0;
            margin-right:0;
        }
        #bar:after {
            font-family: FontAwesome;
            content: "\f142"; /*"\f078";*/
            position: absolute;
            top:1px;
            right: 5px;
            font-size: 1.3rem;
            color: var(--border-input);
            transition: transform .28s 0.05s ease-in-out;
        }

        #bar.expanded {
            height:auto !important;
            max-height:100% !important;
            -ms-overflow-style: none;
            scrollbar-width: none;
            scrollbar-height: none;
        }
        #bar.expanded ::-webkit-scrollbar { width:0; height:0; }

        #bar.expanded:after {
            /*
            transform: rotate3d(1, 0, 0, 180deg);
            transition-delay:0;
            */
        }


        ul#bar li { order:5; margin-bottom:3px; }
        ul#bar li:last-child { margin-bottom:5px; }
        ul#bar li[wide] { width:1em; }

        /*
        ul#bar li.pull-right { order:10; }
        ul#bar li:first-child {
            order: 9;
            order: 11;
            border-right: none;
            border-left: 1px solid #e5e5e5;
            margin-left: 5px;
        }
        */

        ul#bar li input[type=search],
        ul#bar li select {
            max-width: 150px;
            margin-right:2px;
        }

        main,#datacell,aside {
            position: static !important;
        }

        main, #datacell {
            z-index:11;
            top: auto;
            height: auto;
            width:100%;
            padding: 1rem 0.5rem 4rem;
        }
        main footer.pagination.sticky {
            position: fixed;
            bottom: 0;
            margin: 0;
            left: 0;
            right: 0;
            box-sizing: border-box;
            padding: .5rem;
            background-color: var(--bg-side);
            border-top-color: var(--border-input);
        }
        main footer.pagination.sticky .btn {
            /*background-color: var(--bg-main);*/
            border-color: var(--border-input);
        }
        main footer.pagination.sticky .items-container {
            margin:0;
        }


        #loginBox {
            z-index: 97;
            font-size: 0;
            position:static;
            margin:2rem 0 6rem;

        }
        #loginBox span {
            display:block;
            font-size: .75rem;
            line-height: 1.33rem;
            padding: 5px 20px;
            border-bottom: 1px dotted rgba(0,0,0,.15) !important;
        }
        #loginBox span:last-of-type {
            border-bottom: none !important;
        }

        aside {
            min-width: unset !important;
            width:100%;
            top:auto;
            float: none !important;
            padding-bottom:3rem;
        }
        aside.pull-left  {
            border-right: none;
            border-bottom: 1px solid var(--border-light);
            padding-bottom:1rem;
        }
        aside.pull-right {
            border-left: none;
            border-top: 1px solid var(--border-light);
            padding-bottom:35vh;
        }
        aside:empty { display:none; }
        aside .aside-collapser { display:none; }

        aside.sticky-side { /*position: relative;*/ }
        aside.sticky-side.pull-right {
            border-left:none;
            border-top:1px solid lightgray;
            border-top:1px solid var(--border-light);
        }

        aside.sidebar {
            position: fixed;
            bottom: auto;
            top: 32px;
            z-index: 94;
            /*
            width: auto;
            background: #fff;
            */

            overflow-x: auto;
            padding: 10px 12px 0;
            height: 1.7rem;
            white-space: nowrap;

            border-bottom: 1px solid lightgray;
            border-bottom: 1px solid var(--border-light);
        }

        aside.sidebar.sticky-side.pull-left {
            /*margin-top: calc(var(--bar-height) + var(--header-height));*/
        }

        aside.sidebar.sticky-side:before,
        aside.sidebar.sticky-side:after {
            font-family: FontAwesome;
            position: fixed;
            background: #fff;
            padding-top: 2px;
            color:#999;
            top: calc( var(--header-height) + 7px );
        }
        aside.sidebar.sticky-side:before {
            content:'\f053';
            left:0; padding-left:3px;
        }
        aside.sidebar.sticky-side:after {
            content:'\f054';
            right:0; padding-right:3px;
        }

        aside.sidebar.sticky-side a.tile {
            padding: 0 1rem;
            line-height: 1.3rem;
            margin: 0 0 0.3rem;
            display: inline-block;
            border-radius: 0;
            border-right: 1px solid var(--border-light);
        }
        aside.sidebar.sticky-side a.tile:last-of-type {
            border-right:none !important;
        }
        aside.sidebar.sticky-side a.tile.active {
            position:relative;
            font-weight: normal;
            background:transparent;
            border:none;
            border-right: 1px solid var(--border-light);
        }
        aside.sidebar.sticky-side a.tile.active:after {
            content: '';
            position: absolute;
            width: 100%;
            width: calc(100% - 8px);
            left: 4px;
            bottom: -5px;
            border-bottom: 3px solid;
            border-color: #90CAF9;
            border-color: var(--bg-head-dir);
        }

        aside figure.foto {
            height: 75px;
            float: left;
            margin: -1rem;
            margin-right: .75rem;
        }


        table.responsive {
            margin:10px 0 40px !important;
            border-top: 1px solid var(--border-light);
            width: 100%;
        }

        table.responsive thead { display:none; }/**/

        table.responsive tr,
        table.striped.responsive tr:nth-child(even) {
            display:block;
            display:flex;
            flex-wrap:wrap;
            align-items: center;
            position:relative;
            padding: .75rem 0 1.5rem .75rem;
            margin:0;
            border-bottom: 1px dotted lightgray;
            border-bottom: 1px dotted var(--border-light);
            background-color: var(--bg-main);
        }
        table.responsive tr:hover { background-color:#E8F5E9; }
        table.responsive tr.selected { border-bottom: 1px solid #fff !important; }

        table.responsive tr.nob,
        table.responsive td.nob,
        table.responsive tr.nob td {
            background:transparent !important;
        }
        table.responsive tr.nob,
        table.responsive tr.nob td {
            margin:0; padding:0px;
            /*line-height:3rem;*/
        }

        table.responsive tr td {
            border:none;
            display:inline-block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:normal;
            height:auto;
            padding: 0.15rem 1rem 0.15rem 0;
            order:5;
            min-height: 1.2em;
        }
        table.responsive table tr.spacer:last-child { border:none; }/**/
        table.responsive tr.spacer td[colspan] { width:calc( 100% - 1rem); }

        /*
        table.responsive tr td.o1,.o1 { order:1 !important; }
        table.responsive tr td.o2,.o2 { order:2 !important; }
        table.responsive tr td.o3,.o3 { order:3 !important; }
        table.responsive tr td.o4,.o4 { order:4 !important; }
        table.responsive tr td.o5,.o5,
        table.responsive tr td.main,
        table.responsive tr td.oMain,
        table.responsive tr td.oM     { order:5 !important; padding: 0.35rem 0.75rem; }
        table.responsive tr td.o6,.o6 { order:6 !important; }
        table.responsive tr td.o7,.o7 { order:7 !important; }
        table.responsive tr td.o8,.o8 { order:8 !important; }
        table.responsive tr td.o9,.o9,
        table.responsive tr td        { order:9 !important; }
        */

        table.responsive .item-title,
        table.responsive tr td.main,
        table.responsive tr td.oMain,
        table.responsive tr td.oM {
            order:3;
            min-width:unset !important;
            width:100%;
            font-size: 1.25rem;
            line-height: 1.5rem;
            padding: 5px 0;
            color:darkblue;
        }
        table.responsive tr td h3 {
            font-size: 1.5rem;
            margin-top:1.5rem;
        }

        table.responsive tr td.controls {
            position:absolute;
            right:0;
            top:5px;
            width:30px;
            background:transparent !important;
        }

        /* td.cell-count */

        table.responsive td.cell-count {
            border: 1px dotted var(--border-light);
            text-align: center !important;
            padding: 0;
            min-width: 35px;
            min-height: 2.8em;
            margin: -.8em 3px -1em;
            margin: -.2em 1px -1em;
        }
        table.responsive td.cell-count.pull-left {
            margin-left:auto;
        }

        table.responsive td.cell-count:empty { display:none; }
        table.responsive td.cell-count a {
            display: inline-block;
            width: 100%;
            padding-top: 1.6em;
            margin-top: -1.6em;
        }
        table.responsive td.cell-count:has(a):not(.bg-red) {
            /*color:var(--color-link);*/
            border-bottom:1px solid var(--color-link);
            /*border-bottom:2px solid var(--bg-head-dir);*/
        }

        table.responsive td.cell-count:before {
            display:block;
            font: normal normal normal .8em / 1.6em FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
        table.responsive td.cell-cities:before   { content: "\f041"; }
        table.responsive td.cell-players:before  { content: "\f0c0"; } /* .fa-users */
        table.responsive td.cell-referies:before { content: "\f2c0"; } /* .fa-user-o */
        /* table.responsive td.cell-referies:before { content: "\f19d"; } /* .fa-graduation-cap */
        table.responsive td.cell-venues:before   { content: "\f19c"; } /* .fa-university */
        table.responsive td.cell-events:before   { content: "\f0e8"; transform: rotate(90deg); }
        table.responsive td.cell-users:before    { content: "\f2c1"; } /* .fa-id-badge */

        table.responsive td.mobile.pull-left,
        table.responsive td.cell-count.first {
            margin-left:auto;
        }
        table.responsive tr td.cell-count:first-of-type {
            margin-left:auto;
        }

        /* #tblEvents */

        table.responsive tr td.o1,
        #tblEvents tr td:first-child,
        #tblEvents tr td:nth-child(2),
        #tblEvents tr td[data-user] {
            order:1;
            background:transparent !important;
        }
        #tblEvents tr td[data-user] { line-height:1.2rem; }
        #tblEvents tr td[onchange]  { order:1; border: 1px dotted lightgray; }

        #tblEvents tr td:nth-last-child(3) {
            font-size:1rem!important;
            position:absolute;
            right:10px;
            bottom:10px;
        }
        #tblEvents tr td:nth-last-child(3):not(:empty):after {
            font-family: FontAwesome;
            content: "\f0c0";
            display:inline-block;
            font-size:.8rem;
            color:#444;
            margin-left:3px;
        }



        form.-responsive { /* deprecated */

        }
        form.-responsive fieldset{
            /*border-bottom:1px solid var(--border-light);*/
        }
        form.-responsive fieldset.mobile-flex{
            display:flex;
            flex-wrap:wrap;
        }
        form.-responsive label,
        form.-responsive div.label {
            width:100% !important;
            margin:0;
            margin-bottom:1rem !important;
            text-align:left !important;
            font-size:.8rem;
            line-height:1rem;
        }
        form.-responsive div.label label { margin-bottom:0 !important; }

        form.-responsive select,
        form.-responsive input:not([type=checkbox]){
            font-size:1rem;
            /*margin:0;*/
            float:none;
            border-color:darkgray;
        }
        form.-responsive select {
            height:22px;
        }
        form.-responsive select:not([style]) {
            width:100% !important;
        }
        form.-responsive input:not([type=checkbox],[style]){
            width:calc( 100% - 22px ) !important;
        }
        form.-responsive .itemBox-wrapper {
            width:100% !important;
        }



        form.responsive {
            display:flex;
            flex-wrap:wrap;
            justify-content: space-between;
            margin:0;
            padding: 1rem;
            max-width:calc( 100% - 2rem);
            box-shadow:none;
            outline:none;
            border:none;
        }
        form.responsive >*  {
            order:5;
        }
        form.responsive label {
            width:100%;
            margin:0;
            margin-bottom:0 !important;
            text-align: left /*!important*/;
            font-size: .8rem;
            line-height: 1rem;
            text-align: left !important;
        }
        form.responsive select:not(.f80) {
            /*height: calc( 22px + .6rem );*/
            height: 28px;
        }
        form.responsive input,
        form.responsive select,
        form.responsive textarea,
        form.responsive .gpsNavigator-item-wrapper,
        form.responsive .itemBox-wrapper {
            width: 100%;
            margin-bottom: 1rem;
        }
        form.responsive > div {
            width: 100%;
        }
        /*form.responsive > div select {
            margin-bottom: 0 !important;
        }*/
        /*
        form.responsive .buttongroup {
            flex-wrap: wrap;
        }*/
        form.responsive .buttongroup input {
            margin-bottom:0;
        }

        form.responsive header h2 div:first-child {
            height: 1.2rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        form.responsive #FAB {
            flex-direction: row-reverse;
            left: 1rem;
            right: 1rem;
            width: auto;
            max-width: unset;
            /*
            */
            display: block;
            text-align: right;
            padding: .35rem 1rem;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-side);
            background: rgba(240,240,240,.9);
            border-top: 1px solid var(--border-light);
        }


        /*.ts-dialog-newest form.responsive */

        .ts-dialog-newest form.responsive .mob-w50 { display:inline-block; width:50%; }
        .ts-dialog-newest form.responsive .mob-w40 { display:inline-block; width:40%; }

        .ts-dialog-newest form.responsive input,
        .ts-dialog-newest form.responsive select,
        .ts-dialog-newest form.responsive textarea {
            /*width: calc(100% - 20px);
            max-width: calc(100% - 20px);*/
        }

        .ts-dialog-newest form.responsive .gpsNavigator-item-wrapper {
            width:100%;
            height:28px;
        }

        .ts-dialog-newest form.responsive .gpsNavigator-item-wrapper select,
        .ts-dialog-newest form.responsive .gpsNavigator-item-wrapper span.custom-combobox{
            width:100%; max-width:100%; margin-bottom:0 !important;
        }
        .ts-dialog-newest form.responsive .gpsNavigator-item-wrapper input {
            /*
            width:calc(100% - 22px) !important;
            max-height: 28px !important;
            */
        }
        .ts-dialog-newest form.responsive .gpsNavigator-item-wrapper a.combo-show {
            position: absolute !important;
            right: 1px;
            top: 0;
        }



        .nav-tabs {
            display: flex;
            overflow-x: scroll;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
            scrollbar-height: none;
            border-bottom: 1px solid var(--bg-head-dir);
        }
        .nav-tabs::-webkit-scrollbar { width:0; height:0; }
        .nav-tabs:after { content:''; }

        .nav-tabs li { margin-right:5px;  }
        .nav-tabs li a { white-space: nowrap; border:none; border-bottom: 4px solid transparent; }
        .nav-tabs li a:hover { border-bottom-color:var(--bg-head-dir); }
        .nav-tabs li a.active {
            white-space: nowrap;
            border-bottom: 4px solid var(--bg-head-dir);
        }

        .items-list{
            margin-left:0;
            margin-right:0;
        }
        .items-container {
            margin: 0 auto 1rem;
        }

        .item-row{
            padding-left:0;
            padding-right:0;
            overflow-x: hidden;
        }
        .item-row:hover > .b-edit {
            display:none;
        }

        .item-row > div ul {
            padding-left: 1.6rem;
        }

        .events .item-row > div > a {
            max-height: 5.6rem;

        }

        .ts-dialog {}
        .ts-dialog #searchBar tr {
            display: flex;
            flex-wrap: wrap;
        }
        .ts-dialog .buttons  {
            position: sticky;
            bottom: -1rem;
            background: whitesmoke;
            width: calc( 100% + 2rem );
            margin: 0 -1rem -.5rem;
            padding-bottom: .75rem;
        }

        .ts-dialog.ui-widget label {
            width:100% !important;
            float:none;
            font-size:.8rem !important;
            text-align: left !important;
        }
        .ts-dialog.ui-widget label.mob-text-right { text-align: right !important;}
        .ts-dialog.ui-widget label.mob-text-left  { text-align: left !important;}

        .ts-dialog textarea { width:100%;}


        .app-buttonset .inline-flex {
            display:flex;
            flex-wrap:wrap;
        }
        .app-buttonset .btn {
            margin:0 auto 1rem;
            width: calc( 100% - 4rem);
            min-width: auto !important;
            justify-content: center;
        }
        .app-buttonset .btn > * {
            max-width: 100%;
            min-width: auto !important;
        }

        #FAB {
            right:15px;
            bottom:15px;
        }

        #language-menu {
            position: fixed;
            top: 0;
            right: 3px;
            width: 52px;
            z-index: 97;
            margin: 4px !important;
            height: 1.8rem;
        }
        #language-menu #languages a {
            padding-left:5px;
        }
        #language-menu #languages > div {
            border-color:transparent;
        }
        #language-menu #languages div > a {
            margin:0;
            height:1.8rem;
            width:100%;
            opacity:.85;
            font-size:.8rem;
        }
        #language-menu #languages div > a img {
            height:9px;
            min-width: unset;
        }
        #language-menu #languages div > a:after {
            top:.6rem;
            right: 12px;
            font-size:.6rem;
        }
        #language-menu #languages div > ul {
            margin:0;
            top:1.8rem;
        }

        #language-menu img { margin:0 }


        #tblWordbook,
        #tblWordbook tbody {
            display:block;
            max-width: 95%;
            margin:0 auto 2rem;
        }
        #tblWordbook tr {
            display:flex;
            width: 100%;
            max-width: 100%;
            flex-wrap:wrap;
            margin: 1em 0;
            background-color:var(--bg-main);
            overflow:hidden;
        }
        #tblWordbook td {
            display:block;
            max-width:unset;
            width:100%;
            height:1.2rem;
            transition: background-color .28s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #tblWordbook td[ln] {
            display:inline-block;
            width:calc(100% - 60px);
            margin-left: auto;
            margin-right: 10px;
            overflow: visible;
            text-overflow: ellipsis;
            display:none;
            height:0;
            border-top: none;
            border:none;
            border-bottom: 1px dotted var(--border-input);
        }

        #tblWordbook td[ln]:before{
            content:attr(ln);
            display:inline-block;
            /*border:1px dotted red;*/
            width:20px;
            left: -25px;
            position: absolute;
            text-align: right;
            font-style: italic;
            opacity: .65;
        }

        /* focused */
        #tblWordbook.expand tr,
        #tblWordbook tr:focus,
        #tblWordbook qtr:hover,
        #tblWordbook tr:focus-within {
            padding-bottom:1em;
        }
        #tblWordbook tr:focus-within td.doubleright,
        #tblWordbook tr:hover td.doubleright {
            background-color: #DCEDC8; /* lightgreen 100 */
        }

        #tblWordbook.expand td[ln],
        #tblWordbook tr:focus td[ln],
        #tblWordbook qtr:hover td[ln],
        #tblWordbook tr:focus-within td[ln]
        {
            display:block;
            height:1.2rem;
        }




        }