@media (max-width: 1200px) {
    /* Styles here will apply to screens that are 1200px wide or narrower */
    a.home-button.agent {
        padding: 5px;
        top: 0;
        margin-top: -177px;
        float: left;
        border-radius: 0;
        margin-left: -10px;
        left: 115px;
    }
}
@media (max-width: 821px) {
    a.home-button.agent {
        margin-top: -177px;
    }
}
@media (max-width: 869px) {
    a.home-button.agent {
        margin-top: -12px;
    }
}
/* Provider picker: a scrollbar a finger can drag. Phones only show a thin overlay line while
   swiping, which cannot be grabbed, so pcpstuff.js draws its own under the table on touch screens */
.drag-scrollbar {
    display: none;
    position: relative;
    height: 22px;
    margin: 6px 0;
    border-radius: 11px;
    background: #e3e7ee;
    touch-action: none;
    user-select: none;
}

/* a mouse has the browser's own scrollbar; only a finger needs this one */
@media (pointer: coarse) {
    .drag-scrollbar {
        display: block;
    }
}

.drag-scrollbar[hidden] {
    display: none;
}

.drag-scrollbar-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    min-width: 44px;
    border-radius: 8px;
    background: #22407a;
    cursor: grab;
}