.editable-row__actions {
    font-size: 1.3rem;
    text-align: right;
    padding-right: 24px;
}
.editable-row__actions a {
    margin: 0 6px;
    color: #2196F3;
    border: 1px solid #ddd;
    padding: 4px;
    border-radius: 4px;
}
.editable-row__actions a:hover {
    background-color: #2196F3;
    color: white;
}

.expandable--toggle {
    display: block;
    border: 1px solid #ddd;
    padding: 8px 4px;
    color: var(--primary-button-color);
    cursor: pointer;
}

.expandable--toggle span, .expandable--toggle strong {
    color: var(--primary-button-color); /* light.css is overriding the child color somehow */
}

.expandable--toggle .expandable--icon {
    float: right;
    padding: 2px;
}

.expandable--header {
    flex: 1;
}

.grid-column-header__sort-direction {
    display: inline-block;
    margin: 0 4px;
}

.group-grid {
    --grid-columns: 48px repeat(auto-fit, minmax(48px, 1fr));
    --border: 1px solid #ddd;
    --padding: 8px;
}

.group-grid--header, .group-grid--footer > .footer-row {
    display: grid;
    grid-template-columns: var(--grid-columns);
    padding: 8px 0 8px 32px;
    border: var(--border);
}

.group-grid--row {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: 4px;
    padding: var(--padding);
    border: var(--border);
    border-bottom: none;
    border-right: none;
    background-color: white;
}

.grouped-grid--group {
    border: var(--border);
    border-top: none;
    padding: 8px 0 0 24px;
    background-color: #eee;
}

.group-grid .expandable--toggle {
    border: none;
    padding: 0 0 8px 0;
}

.group-grid .expandable--icon {
    float: left;
    margin-left: -20px;
}

.grouped-grid--group.hide-header .expandable--toggle {
    display: none;
}

.grouped-grid--group.hide-header {
    padding-top: 4px;
}

.pager {
    padding: 12px;
}

.pager a {
    padding: 8px 8px;
    margin-right: 4px;
    color: #2196F3;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.pager .selected {
    background-color: #2196F3;
    color: white;
}

.pager--count {
    float: right;
    font-style: italic;
}

.draggable {
    display: flex;
}

.draggable--anchor {
    padding: 8px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
}

.draggable--content {
    flex: 1;
}

.dragging {
    opacity: 0.7;
}

.move-up {
    position: relative;
    animation-name: moveUp;
    animation-iteration-count: 1;
    animation-duration: .25s;
    transition-timing-function: cubic-bezier(0,1.5,0.5,1);
}

.move-down {
    position: relative;
    animation-name: moveDown;
    animation-iteration-count: 1;
    animation-duration: .25s;
    transition-timing-function: cubic-bezier(0,1.5,0.5,1);
}

@keyframes moveUp {
     0% {
         transform: translateY(100%);
     }
     100% {
         transform: translateY(0);
     }
 }

@keyframes moveDown {
     0% {
         transform: translateY(-100%);
     }
     100% {
         transform: translateY(0);
     }
 }

.spinner {
    border: 8px solid silver;
    border-top: 8px solid #337AB7;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 700ms linear infinite;
}

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

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

.loading-message {
    display: flex;
    align-items: center;
    margin: 12px;
}

.loading-message .spinner {
    margin-right: 12px;
}