/*  GENERAL   */

.wrapBlock {
    display: inline-block;
    white-space: nowrap;
}

.padBottom {
    margin-bottom: 48px;
}

.responsiveList {
    height: 600px;
    overflow-y: scroll;
}

.tw-table-grid table {
    border: 1px solid LightSteelBlue;
}

.tw-table-grid td {
    border-right: 1px solid LightSteelBlue;
}

.tw-table-grid th {
    border-bottom: 1px solid LightSteelBlue;
}

/* KENDO UI */
.k-listview {
    border: none;
    box-shadow: none;
}

.k-grid td {
    padding: .3em .3em;
}

    .k-grid td a {
        cursor: pointer;
    }

tr.k-state-selected  {
    /*color: #fff;*/
    background-color: rgba(123, 210, 246, 0.25) !important;
}

tr.k-alt.k-state-selected {
    /*color: #fff;*/
    background-color: rgba(123, 210, 246, 0.25) !important;
}

.k-listview-item.k-state-selected {
    background-color: rgba(123, 210, 246, 0.25) !important;
}

.k-grid-header th a.k-state-active,
.k-grid-header th a.k-active {
    background-color: yellow;
}

/* reduce padding in kendo-tabs & pop-ups */
.k-panelbar .k-tabstrip > .k-content, .k-tabstrip > .k-content {
    padding: 1px;
}

.k-rpanel-left, .k-rpanel-right
{
    height:88%;
}

.modal-body {
    padding: 3px 15px 3px 15px
}

/* for bigger days on calendar 
.k-scheduler-monthview .k-scheduler-table td {
    height: 102px !important;
}
*/
/*ViewAvail.cshtml*/
.k-scheduler-timelineWeekview .k-scheduler-table tr {
    height: 5px !important;
}

.k-scheduler-timelineview .k-scheduler-table tr {
    height: 5px !important;
}

.k-scheduler div.k-event {
    font-size: .95em !important;
    overflow-x: hidden;
}

.k-scheduler .k-event .k-event-top-actions,
.k-scheduler .k-event .k-event-bottom-actions {
    left: auto;
    right: 0;
    width: auto;
}

.k-scheduler div.k-event .cpack-title {
    color: #000;
}

.agenda-time {
    display: none;
}

/* Hide save button on popup*/
.k-scheduler-update {
    display: none;
}

.twCalPop {
    height: 100%;
    padding: 3px;
    border: 1px solid #666;
}

.k-event {
   
}

.k-scheduler div.k-event .twCal-title {
    color: #000;
}

ul.k-scheduler-views {
    z-index: 1050 !important;
}

.twCalEvent div {
    line-height: 1.2em;
}

/*  
    Seems backwards, but Kendo inserts cells when grouping.  These are always inserted at left.
    So, by counting columns from the RIGHT to hide, we're not hiding different columns based on grouping.
    When css4 has an "nth-of-class" we can probably rework.    
*/


.tw-responsive-grid .btn {
    padding: 3px 6px;
}

@media only screen and (max-width: 992px) {

    .responsiveList {
        height: 240px;
        overflow-y: scroll;
    }

    /* For hiding columns when medium */
    .tw-hide-last-col1 thead th:nth-last-of-type(1),
    .tw-hide-last-col1 td:nth-last-of-type(1),
    .tw-hide-last-col2 thead th:nth-last-of-type(2),
    .tw-hide-last-col2 td:nth-last-of-type(2),
    .tw-hide-last-col3 thead th:nth-last-of-type(3),
    .tw-hide-last-col3 td:nth-last-of-type(3),
    .tw-hide-last-col4 thead th:nth-last-of-type(4),
    .tw-hide-last-col4 td:nth-last-of-type(4),
    .tw-hide-last-col5 thead th:nth-last-of-type(5),
    .tw-hide-last-col5 td:nth-last-of-type(5),
    .tw-hide-last-col6 thead th:nth-last-of-type(6),
    .tw-hide-last-col6 td:nth-last-of-type(6),
    .tw-hide-last-col7 thead th:nth-last-of-type(7),
    .tw-hide-last-col7 td:nth-last-of-type(7),
    .tw-hide-last-col8 thead th:nth-last-of-type(8),
    .tw-hide-last-col8 td:nth-last-of-type(8),
    .tw-hide-last-col9 thead th:nth-last-of-type(9),
    .tw-hide-last-col9 td:nth-last-of-type(9),
    .tw-hide-last-col10 thead th:nth-last-of-type(10),
    .tw-hide-last-col10 td:nth-last-of-type(10),
    .tw-hide-last-col11 thead th:nth-last-of-type(11),
    .tw-hide-last-col11 td:nth-last-of-type(11),
    .tw-hide-last-col12 thead th:nth-last-of-type(12),
    .tw-hide-last-col12 td:nth-last-of-type(12) {
        display: none;
    }
}

@media only screen and (max-width: 768px) {

    .k-scheduler-views {
        line-height: 1.8em;
    }

    .panel-heading {
        padding: 8px 12px;
    }

    /* === SCHEDULER SETTINGS === */
    .k-scheduler-table {
        font-size: .82em;
    }

    .k-scheduler-toolbar {
        font-size: .82em;
        padding: 0px;
    }

    .k-scheduler-fullday {
        font-size: .82em;
        padding: 0px;
    }

    .tw-responsive-grid th,
    .tw-responsive-grid tbody td,
    .tw-responsive-grid tfoot td {
        font-size: .94em;
    }

    /*.tw-responsive-grid .k-footer-template { display:table-row;}*/

    .col-xs-12 {
        position: static;
    }

    /* from claimShift, tradeOffer, tradeOfferMake */
    .k-grid .k-group-col {
        width: 100%;
    }
}

@media only screen and (max-width: 780px) {
    .tw-responsive-grid th,
    .tw-responsive-grid tbody td,
    .tw-responsive-grid tfoot td {
        font-size: .86em;
    }
}

.k-sm-date-format {
    font-weight: bold;
}

@media only screen and (max-width : 780px) {

    .k-tabstrip-item {
        font-size: .85em;
        padding: 0px;
    }

    .k-button {
        font-size: .85em;
        padding: 3px;
    }

    .responsiveList {
        height: 160px;
        overflow-y: scroll;
    }

    /* show the calendar month/year - is hidden by default */
    .k-sm-date-format {
        display: inline !important;
        font-size: .8em;
    }

    .k-scheduler-toolbar .k-link, .k-scheduler-footer .k-link {
        display: inline-block;
        padding: 0 6px !important;
    }

    .k-scheduler-table td:first-child, .k-scheduler-header {
        font-size: .7em;
        font-weight: normal;
    }

    .k-scheduler-toolbar .k-nav-current {
        margin: 0 4px;
    }


    /* === SCHEDULER === */
    /* DWF: these might be annoying but they provide very valuable visual information*/
    /*.k-scheduler .k-event .k-event-top-actions,
    .k-scheduler .k-event .k-event-bottom-actions {
        display:none;
    }*/


    .k-scheduler-timecolumn {
        display: none !important;
    }

    .agenda-time {
        display: inline !important;
    }

    .twCal-title {
        display: none;
    }

    /* For hiding columns when small */
    .tw-hide-last-col1-sm thead th:nth-last-of-type(1),
    .tw-hide-last-col1-sm td:nth-last-of-type(1),
    .tw-hide-last-col2-sm thead th:nth-last-of-type(2),
    .tw-hide-last-col2-sm td:nth-last-of-type(2),
    .tw-hide-last-col3-sm thead th:nth-last-of-type(3),
    .tw-hide-last-col3-sm td:nth-last-of-type(3),
    .tw-hide-last-col4-sm thead th:nth-last-of-type(4),
    .tw-hide-last-col4-sm td:nth-last-of-type(4),
    .tw-hide-last-col5-sm thead th:nth-last-of-type(5),
    .tw-hide-last-col5-sm td:nth-last-of-type(5),
    .tw-hide-last-col6-sm thead th:nth-last-of-type(6),
    .tw-hide-last-col6-sm td:nth-last-of-type(6),
    .tw-hide-last-col7-sm thead th:nth-last-of-type(7),
    .tw-hide-last-col7-sm td:nth-last-of-type(7),
    .tw-hide-last-col8-sm thead th:nth-last-of-type(8),
    .tw-hide-last-col8-sm td:nth-last-of-type(8),
    .tw-hide-last-col9-sm thead th:nth-last-of-type(9),
    .tw-hide-last-col9-sm td:nth-last-of-type(9),
    .tw-hide-last-col10-sm thead th:nth-last-of-type(10),
    .tw-hide-last-col10-sm td:nth-last-of-type(10),
    .tw-hide-last-col11-sm thead th:nth-last-of-type(11),
    .tw-hide-last-col11-sm td:nth-last-of-type(11),
    .tw-hide-last-col12-sm thead th:nth-last-of-type(12),
    .tw-hide-last-col12-sm td:nth-last-of-type(12) {
        display: none;
    }

    /* === GRID SETTINGS === */
    .k-grid .k-grid-pager a {
        font-size: .92em;
    }

    .k-grid .k-grid-pager span {
        padding-left: 0;
        padding-right: .4em;
    }

    .k-grid .k-pager-sizes {
        font-size: .72em;
    }

    .k-grid .k-pager-sizes {
        visibility: collapse;
    }

        .k-grid .k-pager-sizes .k-dropdown {
            visibility: visible;
            /*  float: right;*/
        }

    .k-grid .k-pager-info {
        font-size: .72em;
    }

    .k-grid td .btn,
    .k-grid td .btn-sm {
        padding: 3px 6px;
    }

    .k-grouping-header {
        font-size: .72em;
    }

    .k-grouping-row {
        background-color: #daecf4;
    }

        .k-grouping-row td {
            width: 90% !important;
            text-align: left !important;
        }

    .k-group-cell {
        display: none !important;
    }
    /* tbody tr.k-grouping-row  td { display:inline !important;}
   tbody tr.k-grouping-row  p { width:100% !important;}
   */

    /*NOTES:
        From this example:  http://css-tricks.com/responsive-data-tables/
        I HAD to give the grid an id="searchGrid" or the KendoUI style would trump the responsive style below.  Some worked, but the data and headers were overlayed.
        Using the id made the style below *more specific* than the KendoUI style.
        Might want to include this extra CSS in the grid template?  Especially if its an include?  (Will it work that way?)
    */

    /* Force table to not be like tables anymore */
    /**/

    .tw-responsive-grid table,
    .tw-responsive-grid tbody,
    .tw-responsive-grid thead,
    /* .tw-responsive-grid tfoot,
    .tw-responsive-grid tfoot tr*/
    .tw-responsive-grid thead th,
    .tw-responsive-grid tbody tr,
    .tw-responsive-grid tbody td {
        empty-cells: hide;
        display: block;
    }

        .tw-responsive-grid thead tr th,
        .tw-responsive-grid tfoot tr td,
        .tw-responsive-grid .k-grouping-row td {
            text-align: left !important;
        }

    .tw-responsive-grid tr {
        border: 2px solid #ccc;
    }

    .tw-responsive-grid tbody td:empty,
    .tw-responsive-grid tfoot td:empty {
        display: none;
        border-style: none;
    }


    .tw-responsive-grid tbody td:before {
        position: absolute;
        text-align: left;
        padding-right: 10px;
        white-space: nowrap;
    }

    .tw-responsive-grid tbody td[title],
    .tw-responsive-grid .k-group-header td[title],
    .tw-responsive-grid .k-group-footer td[title],
    .tw-responsive-grid .k-group-header td {
        position: relative;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 38% !important;
        text-align: left !important;
    }

        .tw-responsive-grid tbody td[title]::before {
            content: attr(title) ":";
            font-weight: 700;
            left: 6px;
            text-align: right;
            white-space: initial;
            width: 35%;
        }

    .tw-responsive-grid tbody td[title="No Title"]::before {
        content: "";
    }

    .tw-responsive-grid .k-group-footer td[title="No Title"]::before {
        content: "";
    }

    .tw-responsive-grid td .btn-link {
        padding: 0px 0px;
    }

    /**/
    .tw-responsive-grid .k-grouping-header,
    .tw-responsive-grid .k-grid-header,
    .tw-responsive-grid .k-group-footer,
    .tw-responsive-grid thead {
        display: none;
    }
}

@media only screen and (max-width : 360px) {

    .k-scheduler-table {
        font-size: .66em;
    }

    .k-scheduler div.k-event .cpack-title {
        font-size: .72em !important;
    }
}






/* REMOVE blue background in day, week views of scheduler */
.k-nonwork-hour, .k-scheduler-dayview .k-today.k-nonwork-hour, .k-scheduler-timelineview .k-today.k-nonwork-hour {
    background-color: transparent;
}

.k-scheduler-table .k-today, .k-today > .k-scheduler-datecolumn, .k-today > .k-scheduler-groupcolumn {
    background-color: transparent;
}


/*Pager in the sidebar*/


.k-rpanel .k-widget .k-pager-info {
    /*float: left;*/
    display: inline-block;
    clear: both
}

/*Hide toolbars and pager when exporting PDF*/
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap {
    display: none;
}

.k-pager-wrap.k-pager-sm .k-pager-info,
.k-pager-wrap.k-pager-md .k-pager-info,
.k-pager-wrap.k-pager-sm .k-pager-sizes {
    display: inline;
}

.list-group-item.k-listview-item {
    padding: 6px 9px;
    border-width: 1px;
}

.k-i-sort-desc-sm, .k-i-sort-asc-sm, .k-sort-icon {
    background-color: yellow; color:black !important;
}

.k-picker  {
    max-width:300px;
}

.k-numerictextbox {
    max-width: 8em;
}

.k-grid a {
    color: #0065c8; /*#0074eb;*/
}

.k-grid a.btn-primary, .k-grid a.btn-success {
    color: #fff; /*#0074eb;*/
}

.k-grid-md td, .k-grid-md th, .k-grid-md .k-table-td, .k-grid-md .k-table-th {
    padding: 4px;
    padding-block: 4px;
    padding-inline: 4px;
}

.k-pager .k-grid-pager .k-pager-md {
    padding-block: 4px;
    padding-inline: 4px;
    gap: 4px;
}

.k-grid-md .k-grouping-header {
    padding: 6px;
    padding-block: 6px;
    padding-inline: 6px;
    gap: 6px;
}
 .k-toolbar-md {
    padding: 4px;
    padding-block: 4px;
    padding-inline: 4px;
    gap: 4px;
}

.k-pager-md .k-pager-sizes .k-dropdownlist{
    width:8em;
}
.k-timepicker, .k-datepicker {
    max-width: 10em;
}
.k-datetimepicker {
    max-width: 16em;
}

.k-grid tbody tr:hover,
.k-grid tbody.k-table-tbody > .k-table-row:not(.k-detail-row):hover, .k-grid tbody.k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
    background-color: revert;
    outline: rgba(0, 123, 255, 0.3) solid 3px;
    outline-offset: -3px;
}
/*Firefox fix*/
.k-grid-content {
    padding: 1px;
}
/*Firefox fix*/
.k-grid-header-wrap {
    padding: 1px;
}

.table:not(.no-hover) tr:hover {
    background-color: revert;
    outline: rgba(0, 123, 255, 0.3) solid 3px;
    outline-offset: -3px;
}

li.list-group-item:not(.no-hover):hover,
div.list-group-item:not(.no-hover):hover {
    background-color: revert;
    outline: rgba(0, 123, 255, 0.3) solid 3px;
    outline-offset: -3px;
}