/* Safari */

:root {
    --back-column-hankosh: url('/images/filter/Filter_o_16x16.png');
}

@-webkit-keyframes spinloader {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Animations to fade the light message in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}


.main-page {
    height: 100vh;
    width: 100vw;
}

.t-container-black {
    background-color: darkgray;
}

    .t-container-black .focus-cell {
        background-color: green;
        color: white;
    }

    .t-container-black .active-cell {
        background-color: gray;
    }

.t-container-black th {
    background: linear-gradient(to bottom, #ffffff 0%,#000 100%);
    border: solid 0.5px #fafafa;
    border-radius: 4px;
    border-collapse: collapse;
    border-spacing: 0px;
    color: white;
    text-align: center;
}

    .t-container-black .grid-row {
        height: 40px;
        min-height: 40px;
    }


    .t-container-black .list-row {
        height: auto;
    }





.t-container-default {
    background-color: white;
}


    .t-container-default .focus-cell {
        background-color: Highlight;
        color: white;
        /*outline: dotted 1px black;*/
    }

    .t-container-default .active-cell {
        background-color: gray;
        color: white;
    }
    .t-container-default .selected {
        background-color: lightblue;
        color: black;
    }

    .t-container-default th {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
        background: #ffffff; /* Old browsers */
        background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
        /*background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);*/ /* FF3.6-15 */
        /*background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);*/ /* Chrome10-25,Safari5.1-6 */
        /*background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );*/ /* IE6-9 */
        border: solid 0.5px #DFDFDF;
        border-radius: 4px;
        border-collapse: collapse;
        border-spacing: 0px;
    }

    .t-container-default .grid-row {
        height: 30px;
        min-height: 30px;
    }

    .t-container-default .lookup-row {
        height: 25px;
        min-height: 25px;
    }

    .t-container-default .list-row {
        height: auto;
    }

.columns-header-container {
    flex-basis: 28px;
    width: 28px;
    max-width: 28px;
    overflow: hidden;
    cursor: default;
    user-select: none;
}


.column-header {
    background: #ffffff; /* Old browsers */
    background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%);
    border: solid 0.5px #DFDFDF;
    height: 30px;
    width: 30px;
    max-width: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*.column-header span::after {
        content: '/25BA';*/ /* '\25B6'*/
/*background:inherit;
    }*/

.shgrid-main-contianer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /*height: 100%;*/
    max-height: 100%;
    min-height: 100%;
    position: relative;
}

.shgrid-search-panel {
    width: 100%;
    display: flex;
    flex-direction: row;
    /*background-color: rgb(216,211,210);*/
}

    .shgrid-search-panel .text-find {
        max-width: 100%;
        width: 50%;
        border: 1px solid #e5e5e5;
    }

        .shgrid-search-panel .text-find:focus {
            outline-color: #0fa2eb;
        }


.switch-mark {
    position: relative;
    width: 60px;
    height: 23px;
    margin: 0;
}


    .switch-mark input {
        opacity: 0;
        width: 0;
        height: 0;
    }


.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cacaca;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 23px;
}

    .slider-switch:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider-switch {
    background-color: #2196F3;
    box-shadow: 0 0 1px #2196F3;
}

.switch-mark input:checked + .slider-switch:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.shgrid-page-footer {
    width: 100%;
    background: linear-gradient(to right, #ffffff 0%,rgb(216,211,210) 100%);
    background-color: #f5eeee;
    flex-basis: 30px;
    display: flex;
    max-height: 30px;
    border: inset;
    gap:1px;
}

    .shgrid-page-footer p {
        height: 100%;
        line-height: 1;
        border:solid 1px #ccc;
        padding-inline:3px;
        text-align:center;
    }

.shgrid-and-scroll {
    flex-basis: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
    flex-grow: 1;
}

    .shgrid-and-scroll .scroll {
        flex-basis: 16px;
        width: 17px;
        max-width: 17px;
        /*height: 100%;*/
    }

.shgrid {
    flex-basis: 100%;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    clear: both;
    box-sizing: border-box;
    background-color: white;
    padding-left: 3px;
    /*    height: 100%;
    max-height: 100%;
*/
}

    .shgrid table {
        width: 100px;
        table-layout: fixed;
        font-size: var(--app-font-size);
    }

    .shgrid .hidden-col {
        visibility: collapse;
    }

    .shgrid tr {
        border: none;
        border-width: 0px;
        line-height: 1;
        /*test fixed*/
        height: 30px;
        max-height: 30px;
        min-height: 30px;
        line-height: 1;
    }

    .shgrid th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 30px;
        max-height: 30px;
        min-height: 30px;
        line-height: 1;
        overflow: hidden;
        box-sizing: border-box;
        font-weight: 500;
    }


    .shgrid td {
        display: table-cell;
        text-align: left;
        border-bottom: solid 0.3px #DFDFDF !important;
        border-right: 0.3px solid #DFDFDF;
        border-top: none;
        border-top-width: 0px;
        border-left-width: 0px;
        border-left: none;
        overflow: hidden;
        vertical-align: middle;
        cursor: default;
        padding-left: 3px;
        /*test fixed*/
        height: 30px;
        max-height: 30px;
        min-height: 30px;
        line-height: 1;
    }

        .shgrid td.edit-mode {
            padding: 0px;
            padding-left: 1px;
            /*padding-top:-1px;*/
            /*background-color:inherit;*/
            line-height: 1;
        }

        .shgrid td:first-child {
            border-left: dotted 1px #cbc2e3;
        }

    .shgrid .string-memo-cell {
        white-space: normal;
        text-align: left;
    }

    .shgrid td p {
    }

    .shgrid .string-cell {
        white-space: pre;
        text-align: left;
    }

    .shgrid .number-cell {
        white-space: pre;
        text-align: right;
    }

    .shgrid .check-box {
        white-space: pre;
        text-align: center;
        font-size: 18px;
    }

        .shgrid .check-box input {
            zoom: 1.5;
        }

    .shgrid th {
        padding: 3px;
        cursor: default;
    }






.hidden {
    display: none;
}


.hover-row tr:hover {
    background-color: #f0eded;
}
/*--------------------------shscroll------------------------------------*/
.shscroll {
    background-color: rgb(250, 250, 250);
    position: relative;
    width: 100%;
    max-width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

    .shscroll .scroll-content {
        position: relative;
        flex-basis: auto;
        height: calc(100% - 32px);
        background-color: rgb(250, 250, 250);
        border: none;
        margin: 0;
        padding: 0px;
        user-drag: none;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .shscroll .up, .shscroll .down {
        background-color: rgb(239, 236, 236);
        width: 16px;
        flex-basis: 16px;
        max-height: 16px;
        height: 16px;
        border: none;
        outline: none;
        left: 1px;
        text-align: center;
        line-height: 12px;
        user-drag: none;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .shscroll .up {
        top: 0;
    }

        .shscroll .up:hover {
            background-color: rgb(210, 210, 210);
            color: black;
        }

        .shscroll .up:after {
            /*content: '\25B2';*/
            content: '\2B9D';
            border: none;
            margin: 0;
            line-height: var(--app-font-size);
            font-size: var(--app-font-size);
            color: black;
            width: 16px;
        }

    .shscroll .down {
        bottom: 0;
    }

        .shscroll .down:hover {
            background-color: rgb(210, 210, 210);
            color: black;
        }

        .shscroll .down:after {
            content: '\2B9F';
            border: none;
            margin: 0;
            line-height: 12px;
            font-size: var(--app-font-size);
            color: black;
            width: 16px;
        }

    .shscroll .hankoshah {
        position: absolute;
        top: 0px;
        left: 2px;
        right: 2px;
        height: 22px;
        width: 13px;
        background-color: rgb(183, 183, 183);
        border: solid 0px rgb(183, 183, 183);
    }

        .shscroll .hankoshah:hover {
            background-color: rgb(170, 170, 170);
        }


.text-keys {
    outline: none;
    border: none;
    background-color: black;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    width: 1px;
    height: 1px;
    left: 0px;
    top: 0px;
    cursor: default;
    position: absolute;
}

.column-sort-asc {
    padding-right: 10px;
}

    .column-sort-asc:after {
        content: '▴';
        color: darkblue;
        position: absolute;
        right: -2px;
        bottom: 0px;
    }

.column-sort-desc {
}


    .column-sort-desc:after {
        content: '▾';
        color: darkblue;
        position: absolute;
        right: -2px;
        bottom: 0px;
    }

.column-hankoshah {
    background-image: var(--back-column-hankosh);
    background-size: 10px;
    display: none;
    position: absolute;
    border: none;
    outline: none;
    height: 10px;
    width: 10px;
    top: 0px;
    background-repeat: no-repeat;
    right: 3px;
}

.loader-color {
    border: 4px solid #f3f3f3;
    border-top-color: #3bc8d2;
}


.ddm-container {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 1;
    padding-left: 20px;
}

.ddm-item {
    color: black;
    padding: 12px 10px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

    .ddm-item:hover {
        background-color: #ddd;
    }

.popup-child {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

.list-box-container {
    height: 100%;
    /*min-height:100%;*/
    width: 100%;
    display: flex;
    flex-direction: column;
}

/*--------------------------------------popup-container--------------------------*/
.popup-container {
    display: none;
    position: fixed;
    background-color: #fff;
    /*min-width: 160px;*/
    width: 160px;
    /*min-height: 160px;*/
    height: 160px;
    max-height: 100vh;
    max-width: 100vw;
    flex-direction: column;
    border-radius: 4px;
    z-index: 5;
    overflow: hidden;
}

.popup-as-dialog {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 8px;
    border-collapse: separate;
}

.popup-as-list-box {
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 14px;
    box-shadow: none;
    border: solid;
    border-color: gray;
    border-width: 1px;
}

.popup-as-context-menu {
    box-shadow: 0px 20px 32px 0px rgba(0,0,0,0.2);
    padding-top: 4px;
    padding-left: 1px;
    border: solid 1px #e5e5e5;
    border-collapse: separate;
}
/*--------------------------------------shcontext-menu --------------------------*/
.shcontext-menu {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 100px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}


    .shcontext-menu .menu-row {
        width: 100%;
        cursor: default;
        display: flex;
        flex-direction: row;
        padding: 3px;
        padding-right: 12px;
        padding-bottom: 3px;
        font-size: var(--app-font-size);
        min-height: 32px;
        gap: 3px;
        align-items: center;
        user-select:none;
    }

    .shcontext-menu .menu-item {
    }

    .shcontext-menu .focus-row {
        background-color: rgb(210, 210, 210);
        outline: dotted 1px #6898ad;
    }

    .shcontext-menu .menu-row:hover {
        background-color: #f0eded;
    }



    .shcontext-menu .menu-image {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        max-width: 24px;
        max-height: 24px;
        border: none;
        background-position: center;
        background-size: 24px;
    }



/*------------------------------------measure-text-width--------------------------*/
.measure-text-width {
    position: absolute;
    white-space: nowrap;
    width: auto;
}



/*------------------------------------LIGHT MESSAGE--------------------------*/

.light-message {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 16px;
    position: fixed;
    left: 50%;
    bottom: 0px;
    transition: 1s;
}

    .light-message.shown {
        visibility: visible;
        bottom: 130px;
        /*        -webkit-animation: fadein 0.5s, fadeout 0.5s 1.5s;
        animation: fadein 0.5s, fadeout 0.5s 1.5s;
*/
    }

/*------------------------------------sh-datepicker--------------------------*/
.sh-datepicker {
    overflow: hidden;
}

    .sh-datepicker .date-content {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

        .sh-datepicker .date-content .header {
            flex-basis: 30px;
            display: flex;
            flex-direction: row;
            width: 100%;
            background-color: cornflowerblue;
            /* var(--dev-orange);*/
            border-top: 1px solid #c4e2f9;
            border-bottom: 1px solid #c4e2f9;
            color: white;
        }

            .sh-datepicker .date-content .header * {
                padding-left: 3px;
                padding-right: 3px;
                text-align: center;
                border-left: 1px solid #c4e2f9;
                border-right: 1px solid #c4e2f9;
                cursor: default;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .sh-datepicker .date-content .header .pre-year {
                flex-basis: 18px;
            }

            .sh-datepicker .date-content .header .pre-month {
                flex-basis: 18px;
            }

            .sh-datepicker .date-content .header .current-y-m {
                flex-basis: 100%;
            }


            .sh-datepicker .date-content .header .next-month {
                flex-basis: 18px;
            }

            .sh-datepicker .date-content .header .next-year {
                flex-basis: 18px;
            }


    .sh-datepicker table {
        table-layout: fixed;
        width: 100px;
    }

    .sh-datepicker tr {
        height: var(--datecell);
    }

    .sh-datepicker th {
        width: var(--datecell);
        padding: 0;
        margin: 0;
        text-align: center;
        color: rgba(0,0,0,0.5);
        font-weight: 400;
        font-size: 0.8rem;
    }

    .sh-datepicker td {
        line-height: 1em;
        height: var(--datecell);
        width: var(--datecell);
        padding: 0;
        margin: 0;
        display: table-cell;
        text-align: center;
        border: solid 1px #e5e5e5;
        cursor: pointer;
        border-collapse: separate;
        font-size: 0.8rem;
    }

        .sh-datepicker td.active-day {
            background-color: lightblue;
            font-weight: bold;
        }

        .sh-datepicker td.current-day {
            background-color: Highlight;
            color: white;
            /* var(--dev-orange);*/
        }

        .sh-datepicker td:hover {
            background-color: #e5e5e5;
        }

        .sh-datepicker td.out {
            color: rgba(0,0,0,0.2);
        }

.table-viewer{

}
.table-viewer tr:hover{
    background-color:#DFDFDF;
}
    .table-viewer tr:focus {
        background-color: #DFDFDF;
    }