﻿.grid.row {
    margin-top: 10px;
    justify-content: center !important;
    padding: 0 15px;
}

.grid-wrapper {
    width: 100%;
}

.grid-table {
    width: 100%;
    border-collapse: collapse;
}

.grid-body tr:nth-child(odd) {
    background: #F5F6F5;
}

.grid-body tr:nth-child(even) {
    background: white;
}

.grid-body tr:hover, .grid-body tr:hover a:not(.a-link), .grid-body a:not(.a-link):hover {
    background-color: rgb(191,191,191);
    color: black;
}

.grid-wrapper .grid-body td .btn > i {
    padding-left: 3px !important;
}

@media (min-width: 768px) {
    .grid-body tr:hover .fa:not(.grid-md-break *):not(.grid-xl-break *) {
        color: #333;
    }

    .grid-body tr .fa:hover:not(.grid-md-break *):not(.grid-xl-break *) {
        color: black;
    }

    .grid-body td:not(.grid-md-break *):not(.grid-xl-break *) {
        height: 35px;
    }
}

@media (min-width: 992px) {
    .grid-body tr:hover .fa:not(.grid-xl-break *) {
        color: #333;
    }

    .grid-body tr .fa:hover:not(.grid-xl-break *) {
        color: black;
    }

    .grid-body td:not(.grid-xl-break *) {
        height: 35px;
    }
}

@media (min-width: 1200px) {
    .grid-body tr:hover .fa {
        color: #333;
    }

    .grid-body tr .fa:hover {
        color: black;
    }

    .grid-body td {
        height: 35px;
    }
}

.grid-body td {
    border: 1px solid white;
    padding-left: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
}

    .grid-body td span, .grid-body td i {
        padding-left: 3px;
        padding-right: 3px;
        display: inline-block;
    }
    .grid-body td i {
        font-size: 14px;
    }

.grid-header th {
    padding-top: 1px;
    padding-bottom: 1px;
    vertical-align: bottom;
    font-weight: 600;
}

    .grid-header th:not(:last-child) {
        border-right: 1px dotted lightgray;
    }

tfoot th {
    vertical-align: top;
    font-weight: 600;
}

.grid-action {
    text-align: center;
}

.grid-pad {
    padding-right: 3px;
    padding-left: 3px;
}

.grid-alert {
    text-align: center;
}

.grid-action a {
    margin-right: 4px;
    margin-left: 4px;
}

.info-icon {
    margin-right: 4px;
    margin-left: 4px;
}

.grid-header th, .grid-footer th {
    background: white;
    padding-left: 4px;
}
.grid-footer th {
    padding-right: 1px;
}

.clickable-detail, .grid-column, .grid-header th, .grid-footer th {
    text-overflow: ellipsis;
    overflow: hidden;
}

/*.grid-table th{
    background: #bfbfbf;
}*/
.grid-footer {
    /*font-size: 11px;*/
    /*border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;*/
}

    .grid-footer td {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    .grid-footer table {
        background: #bfbfbf;
    }

.grid-addrow {
}


.edit-mode {
    display: none;
}

.display-mode {
    /*display:none;*/
}

#CurrentPageInput {
    width: 20px;
}

.clickable-detail, .clickable-edit {
    cursor: pointer;
}

.search-select {
    cursor: pointer;
}

.detail-btn {
    height: 15px;
    width: 18px;
    margin-top: -3px;
    line-height: 5px;
}

.grid-body .btn-link,
.grid-body .btn-link:hover,
.grid-body .btn-link:focus,
.grid-body btn-link:active {
    height: auto;
    width: auto;
    font-size: 12px;
    padding: 0;
    border: none;
    margin-top: -3px;
    outline: none;
}

    .grid-body .btn-link .fa {
        color: #333;
    }

    .grid-body .btn-link.btn-details,
    .grid-body .btn-link.btn-details:hover,
    .grid-body .btn-link.btn-details:focus,
    .grid-body btn-link.btn-details:active {
        width: 22px;
    }

.pager-link {
    background-color: white;
    padding: 2px 5px;
    border: 1px solid white;
    border-radius: 2px;
}

    .pager-link:hover {
        color: white !important;
        border: 1px solid #111;
        background-color: #585858;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
        background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
        background: -moz-linear-gradient(top, #585858 0%, #111 100%);
        background: -ms-linear-gradient(top, #585858 0%, #111 100%);
        background: -o-linear-gradient(top, #585858 0%, #111 100%);
        background: linear-gradient(to bottom, #585858 0%, #111 100%)
    }

.grid-btn-paging {
    padding-left: 4px;
    padding-right: 4px;
}

    .grid-btn-paging.grid-btn-previous, .grid-btn-paging.grid-btn-next {
        padding-left: 2px;
        padding-right: 2px;
    }

.grid-number {
    text-align: right;
}

.grid-center-text {
    text-align: center;
}

.grid-checkbox {
    text-align: center;
}

/************************ Card support ************************/
@media (max-width: 767px) {
    .grid.row {
        padding: 0;
    }
    /* Force table to not be like tables anymore */
    .grid-wrapper table, .grid-wrapper thead, .grid-wrapper tbody, .grid-wrapper th, .grid-wrapper td, .grid-wrapper tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        .grid-wrapper thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .grid-wrapper tr {
        margin: 0 0 1rem 0;
        height: max-content;
    }

        .grid-wrapper tr:nth-child(odd) {
            background: #ccc;
        }


    .grid-wrapper td:before {
        position: absolute;
        top: 0;
        left: 2px;
        width: 10%;
        padding-right: 5px;
        white-space: nowrap;
        font-weight: 600;
    }

    .grid-wrapper .grid-action, .grid-wrapper .grid-checkbox {
        text-align: left;
    }

    .grid-wrapper tr {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
        width: 97.25%;
        padding: 5px 2px;
        background-color: #FAFAFA;
        margin-bottom: 15px;
        margin-left: 5px;
        margin-right: 5px;
        border: none;
        border-radius: 4px;
    }

    .grid-wrapper .grid-body tr, .grid-body tr:nth-child(even), .grid-body tr:hover, .grid-body tr:hover a, .grid-body a:hover {
        background-color: white;
        color: black;
    }

    .grid-wrapper .grid-addrow.out {
        display: none;
    }

    .grid-wrapper td, .grid-wrapper tr {
/*        overflow: hidden;
        white-space: nowrap;
*/    }

    .desktop-only-footer {
        display: none;
    }

    .grid.row {
        padding: 0;
    }

    .grid-number {
        text-align: left;
    }

    .grid-center-text {
        text-align: left;
    }

    .grid-checkbox {
        text-align: left;
    }
}

@media (max-width: 991.9px) {
    .grid-md-break.grid.row {
        padding: 0;
    }
    /* Force table to not be like tables anymore */
    .grid-md-break .grid-wrapper table, .grid-md-break .grid-wrapper thead, .grid-md-break .grid-wrapper tbody, .grid-md-break .grid-wrapper th, .grid-md-break .grid-wrapper td, .grid-md-break .grid-wrapper tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        .grid-md-break .grid-wrapper thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .grid-md-break .grid-wrapper tr {
        margin: 0 0 1rem 0;
        height: max-content;
    }

        .grid-md-break .grid-wrapper tr:nth-child(odd) {
            background: #ccc;
        }


    .grid-md-break .grid-wrapper td:before {
        position: absolute;
        top: 0;
        left: 2px;
        width: 10%;
        padding-right: 5px;
        white-space: nowrap;
        font-weight: 600;
    }

    .grid-md-break .grid-wrapper .grid-action, .grid-md-break .grid-wrapper .grid-checkbox {
        text-align: left;
    }

    .grid-md-break .grid-wrapper tr {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
        width: 97.25%;
        padding: 5px 2px;
        background-color: #FAFAFA;
        margin-bottom: 15px;
        margin-left: 5px;
        margin-right: 5px;
        border: none;
        border-radius: 4px;
    }

    .grid-md-break .grid-wrapper .grid-body tr, .grid-body tr:nth-child(even), .grid-md-break .grid-body tr:hover, .grid-md-break .grid-body tr:hover a, .grid-md-break .grid-body a:hover {
        background-color: white;
        color: black;
    }

    .grid-md-break .grid-wrapper .grid-addrow.out {
        display: none;
    }

    .grid-md-break .grid-wrapper td, .grid-md-break .grid-wrapper tr {
/*        overflow: hidden;
        white-space: nowrap;
*/    }

    .grid-md-break .desktop-only-footer {
        display: none;
    }

    .grid-md-break .grid.row {
        padding: 0;
    }

    .grid-md-break .grid-number {
        text-align: left;
    }

    .grid-md-break .grid-center-text {
        text-align: left;
    }

    .grid-md-break .grid-checkbox {
        text-align: left;
    }

}

@media (max-width: 1199px) {
    .grid-xl-break.grid.row {
        padding: 0;
    }
    /* Force table to not be like tables anymore */
    .grid-xl-break .grid-wrapper table, .grid-xl-break .grid-wrapper thead, .grid-xl-break .grid-wrapper tbody, .grid-xl-break .grid-wrapper th, .grid-xl-break .grid-wrapper td, .grid-xl-break .grid-wrapper tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        .grid-xl-break .grid-wrapper thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .grid-xl-break .grid-wrapper tr {
        margin: 0 0 1rem 0;
        height: max-content;
    }

        .grid-xl-break .grid-wrapper tr:nth-child(odd) {
            background: #ccc;
        }


    .grid-xl-break .grid-wrapper td:before {
        position: absolute;
        top: 0;
        left: 2px;
        width: 10%;
        padding-right: 5px;
        white-space: nowrap;
        font-weight: 600;
    }

    .grid-xl-break .grid-wrapper .grid-action, .grid-xl-break .grid-wrapper .grid-checkbox {
        text-align: left;
    }

    .grid-xl-break .grid-wrapper tr {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
        width: 97.25%;
        padding: 5px 2px;
        background-color: #FAFAFA;
        margin-bottom: 15px;
        margin-left: 5px;
        margin-right: 5px;
        border: none;
        border-radius: 4px;
    }

    .grid-xl-break .grid-wrapper .grid-body tr, .grid-body tr:nth-child(even), .grid-xl-break .grid-body tr:hover, .grid-xl-break .grid-body tr:hover a, .grid-xl-break .grid-body a:hover {
        background-color: white;
        color: black;
    }

    .grid-xl-break .grid-wrapper .grid-addrow.out {
        display: none;
    }

    .grid-xl-break .grid-wrapper td, .grid-xl-break .grid-wrapper tr {
        /*        overflow: hidden;
        white-space: nowrap;
*/
    }

    .grid-xl-break .desktop-only-footer {
        display: none;
    }

    .grid-xl-break .grid.row {
        padding: 0;
    }

    .grid-xl-break .grid-number {
        text-align: left;
    }

    .grid-xl-break .grid-center-text {
        text-align: left;
    }

    .grid-xl-break .grid-checkbox {
        text-align: left;
    }
}
.sticky-banner {
    position: -webkit-sticky;
    position: sticky;
    z-index: 9;
}

.sticky-vertical-space {
    width: 100%;
    z-index: 9;
    background-color: white;
}

.collapse-section-desktop {
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
}

    .collapse-section-desktop:focus, .collapse-section-desktop:hover {
        text-decoration: none;
    }


textarea.auto-grow {
    height: 34px;
    margin-top: 2px;
    transition: all 0.5s ease;
}

    textarea.auto-grow:focus {
        height: 85px;
    }