.ember-movenium-form-report-action-bar {

    display: flex;
    justify-content: flex-end;
    span {
        margin: 0px 2px;
        vertical-align: middle;

        svg {
            fill: #6D6D6D;
        }
    }
    .lock-button { visibility: visible;}
    span:hover > svg, span.move:hover {
        fill: blue;
        color: blue;
    }
    span.move { font-size: 16px; }
    .edit-button:hover > svg, span.move-Pencil:hover { fill: green; color: green; }
    .remove-button:hover > svg, span.move-Delete:hover { fill: red; color: red; }
}

.ember-movenium-form-report-actions {
    display: flex;
    margin-top: 10px;

    .report-actions.actions-right{
        margin-left: auto;
    }
    .report-actions.actions-right ~ .report-actions{
        margin-left: 3px;
    }
    .inline-edit {
        display: flex;
        align-content: center;
        height: 34px;
        label {
            margin-bottom: 0px;
        }
    }
}

.ember-movenium-more-button {
    a {
        color: #333; // Can be removed when QR code creator doesn't have a tag in it anymore
    }
    li > div, b, a { // a can be removed for same reason as above
        padding: 3px 0px;
    }
    hr {
        margin: 10px 0px;
    }
}

.ember-movenium-export-more-button {
    li > div {
        padding: 3px 0px;
    }
}
.ember-movenium-form-report-more {
    .disabled {
        pointer-events: none;
        opacity: 0.6;
    }

}

ul.column-selector-dropdown {
    span {
        color: $dark-grey;
    }
}

.ember-movenium-form-report-add-plus-button {
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 2px;

    svg {
        fill: $add-button-color;
    }
}

.ember-movenium-form-report-table {

    th {
        top: 0px !important;
    }

    .et-cell-container {
        display: flex;

        // input {
        //     margin: 0 3px 0 3px;
        // }
        .et-cell-container {
            padding: 4px;
        }
    }
    .locked-row {
        background-color: #e6e6e6;
    }

    .et-toggle-select {
        padding: 0px 4px 0px 4px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .ember-table {
        height: 100%;
    }
    .removed-rows {
        box-shadow: 0px 0px 0px 1px $color-red;
    }
    .inline-edit.is-first-column div.et-cell-content{
        width:100%
    }

    tbody, thead {
        input[type='checkbox'] {
            opacity: 0.001;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            margin: 0px;
            height: 100%;
            width: 100%
        }

        input[type='checkbox']+* {
            display: block;
        }

        &:empty:before,
        input[type='checkbox']+*:before {
            content: '';
            display: block;

            width: 14px;
            height: 14px;
            background-color: white;
            border: gray solid 1px;
        }

        &:empty:after,
        input[type='checkbox']+*:after {
            display: none;
            content: '';

            opacity: 0.75;

            height: 13px + abs(-2px);
            width: 13px + abs(4px);

            // If offset is negative, then adding height/width is all we need to do,
            // so use max to set position to 0.
            background-position: max(0, 4) max(0, -2);
            background-size: 13px;
            background-image: url('/img/checkmark.svg');
            background-repeat: no-repeat;

            position: absolute;
            top: 55%;
            left: 60%;
            transform: translateY(-50%) translateX(-50%);
        }

        &:focus {
            outline: none;
        }

        &:focus:before,
        input[type='checkbox']:focus+*:before {
            border: darkgray solid 1px;
        }

        &:checked:after,
        input[type='checkbox']:checked+*:after {
            display: block;
        }
    }

    thead input[type='checkbox'] {
        z-index: 2;
    }

    .clickable:hover {
        text-decoration: none;
    }
}
.ember-movenium-table {

    max-height: 64vh;

    th, td {
        background-color: white;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    // grey background for hovered row
    tbody > tr:hover td {
        background-color: #f6f6f6;
    }

    th {
        text-transform: uppercase;
        font-weight: bold;
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;

        white-space: normal;

        color: #6d6e71;

        .et-cell-container {
            max-height: 35px;
        }
    }

    .th-text-wrapper {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td {

        vertical-align: middle;
        border-top: 1px solid #ddd;
        color: black;
        div {
            border-bottom: unset;
        }
        div.row-actions {
            text-align: right;
        }

        .uneditable-field {
            cursor: not-allowed;
            background: repeating-linear-gradient(
                    45deg,
                    #f5f5f5,
                    #f5f5f5 10px,
                    white 10px,
                    white 20px
            );
            opacity: 0.6;
        }


    }

    .row-actions {
        visibility:hidden;
    }

    tr{
        &:hover .row-actions {
        visibility:visible;
        }

        &.unsaved-record td {
            background: $alert-warning-bg;
        }

        &.inflight-record {
            opacity:0.3
        }

        .is-first-column {
            border-left: 5px solid transparent;
        }

        &.ember-movenium-modified-since-today > td.is-first-column {
            border-left: 5px solid rgba(45, 201, 40, 0.43);
        }

        &.ember-movenium-modified-since-0 > td.is-first-column,
        &.ember-movenium-modified-since-1 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,1);
        }

        &.ember-movenium-modified-since-2 > td.is-first-column,
        &.ember-movenium-modified-since-3 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.9);
        }

        &.ember-movenium-modified-since-4 > td.is-first-column,
        &.ember-movenium-modified-since-5 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.8);
        }

        &.ember-movenium-modified-since-6 > td.is-first-column,
        &.ember-movenium-modified-since-7 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.7);
        }

        &.ember-movenium-modified-since-8 > td.is-first-column,
        &.ember-movenium-modified-since-9 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.6);
        }

        &.ember-movenium-modified-since-10 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.5);
        }

        &.ember-movenium-modified-since-11 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.4);
        }

        &.ember-movenium-modified-since-12 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.3);
        }

        &.ember-movenium-modified-since-13 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.2);
        }

        &.ember-movenium-modified-since-14 > td.is-first-column {
            border-left: 5px solid rgba(255,126,0,0.1);
        }

    }
    tr:last-of-type td {
        border-bottom: 1px solid #ddd;
    }

    .ember-movenium-modified-row {
        height: 25px;
        width: 10px;
        position: absolute;
        left: 0;
    }

    .checkedbox, .row-actions {
        font-size: 1.4em;
        color: #6D6D6D;
    }

    .clickable-icon:hover {
        color: rgb(12, 157, 88);
    }

    .et-sort-indicator:before{display:inline-block;border:none;line-height:1;font-size:1.5em;transform:rotate(0);content:'\25be'}
    .et-sort-indicator.is-ascending:before{transform:rotate(180deg)}
}

div.no-content {
    height: 30em;
    width: 100%;

    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;

    .icon {
        font-size: 150px;
        color: $border-light;
    }

    .text {
        font-size: 20px;
        color: $text-secondary;
        margin-bottom: 5px;
    }

    .small {
        font-size: 12px;
    }
}
.ember-movenium-table-container {
    border: 1px solid #ddd;
    padding: 0 15px 15px 15px;

    div.content {
        box-shadow: 2px 2px 5px 0px #757575;
        width: 100%;

        padding: 1em;

        overflow: auto;
    }
    .total-rows {
        margin-top: 10px;
    }
}

.dropdown-menu > li > div {
    padding: 3px 20px;
}

.template-selector-trigger {
    margin-left: 3px;
}
.ember-movenium-report-template-selector {
    display: inline-flex;
    // margin-top: 10px;
    // margin-left: 10px;
    .filter-menu {
        width: 300px;

        li {
            margin-top: 5px;
            margin-right: 25px;
            font-size: 12px;
            color: $text-secondary;
        }

        hr {
            margin: 5px 15px 5px 0;
        }

        h5 {
            font-weight: bold;
            margin: 0px;
        }
    }
    > span {
        margin-top: 5px;
        margin-right: 5px;
    }

    .template-container {
        display: flex;
        align-items: flex-end;
        margin-right: 25px;

        li {
            width: 100%;

            &.active {
                color: $accent1-primary;
            }
        }
    }
}

.flex-filter {
    flex: 1 1 20%;
    min-width: 200px;
    max-width: 350px;
    padding: 0 5px 5px 0;

    &.clear-btn {
        padding-top: 16px;
    }
}

.filter-label {
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: bottom;
    white-space: normal;
    color: #6d6e71;
}

.dropdown-box-trigger {
    display: flex;
    border: 1px solid $border-light;
    padding: 3px 12px;
    // display: inline-block;
    height: 100%;
    min-height: 33px;
    white-space: nowrap;
    align-items: center;
    p {
        padding-left: 3px;
        padding-right: 3px;
    }
    svg, p, span {
        align-self: center;
        display: inline-block;
        margin-bottom: 0px;
    }
    svg {
        vertical-align: middle;
    }
}
.dropdown-box-content {
    ul {
        list-style-type: none;
        padding-left: 0px;
    }
    .disabled {
        pointer-events: none;
        opacity: 0.6;
    }
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,.15);
    padding: 3px 20px;

    &.ember-movenium-report-template-selector {
        padding: 5px;
    }
}

.ember-movenium-mass-edit-popup {
    width: 35vw;
}

.ember-movenium-form-report-form-add-modal {
    & .ember-modal-dialog {
        min-width: 500px;
    }
    @media(max-width: 768px) {
        & .ember-modal-dialog {
            min-width: initial;
        }
    }
}