html {
    height: 100%;
}

body {
    background-color: #ffffff;
    height: auto;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.7px;
}

a {
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
}

a.non-obvious-action {
    color: #4267b2;
}

a:hover,
a:focus {
    color: #4267b2;
    background-color: transparent;
    text-decoration: none;
}

label {
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.5;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    text-transform: uppercase;
}

label > a {
    font-size: 12px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"] {
    height: 32px;
    width: 100%;
    font-size: 16px;
    color: #4a4a4a;
    background-color: #f4f5f9;
    border: solid 1px #f0f0f0;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="password"]:disabled {
    color: #d3d1d1;
}

textarea {
    height: 112px;
    width: 100%;
    font-size: 16px;
    color: #4a4a4a;
    background-color: #f4f5f9;
    border: solid 1px #f0f0f0;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.4;
}

select {
    height: 32px;
    width: 100%;
    font-size: 16px;
    background-color: #f4f5f9;
    border: solid 1px #f0f0f0;
    padding-left: 16px;
    padding-right: 16px;
}

select:disabled {
    color: #d3d1d1;
}

.select-10 {
    width: 10%;
}

.select-20 {
    width: 20%;
}

.select-33 {
    width: 33.3%;
}

.select-40 {
    width: 40%;
}

.select-auto {
    /* this is used in a case where things get scrunched
       combine this with <br class="visible-xs-inline" />
       to accurately control wrapping if necessary
     */
    width: auto;
}

.select-narrow {
    /* this is used in a case where things get scrunched
       combine this with <br class="visible-xs-inline" />
       to accurately control wrapping if necessary
     */
    padding-left: 0px;
    padding-right: 0px;
}

.primary-content-section {
    padding-left: 15vw;
    padding-right: 15vw;
}

@media (max-width: 767px) {
    /*XS*/
    .primary-content-section {
        padding-left: 0vw;
        padding-right: 0vw;
    }
    select {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /*SM*/
    .primary-content-section {
        padding-left: 0vw;
        padding-right: 0vw;
    }
    select {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /*MD*/
    .primary-content-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    /*MD - LG*/
    .primary-content-section {
        padding-left: 10vw;
        padding-right: 10vw;
    }
}

/* abcdefg filters are very picky. removing padding to give maximum
   room before wrapping occurs.
 */
.abcfilterrow {
    /* nothing at the moment, used to be display: flex */
}
.abcfilterrow-left {
    padding-right: 0px;
}
.abcfilterrow-right {
    padding-left: 0px;
}
.abcfilterrow-center {
    padding-left: 0px;
    padding-right: 0px;
}
/* end: abcfilterrow */

.devHeader {
    width: 100%;
    background-color: #cf0008;
    color: #000;
    font-weight: bold;
    padding: 10px;
    padding-top: 5px;
}

.demoHeader {
    width: 100%;
    background-color: #2c3d6b;
    color: #000;
    font-weight: bold;
    padding: 5px 10px 10px 10px;
}

.devHeader a {
    color: #000;
}

.site-header {
    margin-top: 24px;
    margin-bottom: 24px;
}

.site-footer-copyright,
.site-footer-copyright a {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.1px;
    text-align: left;
    color: #d8d8d8;
    margin-top: 32px;
    margin-bottom: 16px;
}

.page-header {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: solid 1px #efefef;
    height: 64px;
}

.page-header-link {
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
    line-height: 2.5;
    text-align: right;
}

.nav-pills-plain {
    margin-top: 0;
}

.nav-pills {
    margin-top: 0;
}

.nav-pills > li > a {
    border-radius: 0;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 0px;
    margin-right: 56px;
    font-weight: bold;
    line-height: 2.5;
}

/* BEGIN using flexbox to fix nav pill layout at lower resolutions */
ul.nav.nav-pills.nav-pills-flex-fill-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.nav.nav-pills.nav-pills-flex-fill-horizontal > li > a {
    margin-right: 0px;
}
@media (max-width: 500px) {
    /* This is a cusotm break, at which point the menu wraps to two lines */
    ul.nav.nav-pills.nav-pills-flex-fill-horizontal {
        justify-content: center;
    }

    .nav-pills > li > a {
        padding-left: 4px;
        padding-right: 4px;
        margin-right: 4px;
        border-bottom: 2px solid transparent;
    }
}

/* END using flexbox to fix nav pill layout at lower resolutions */

.nav-pills > li.active > a {
    color: #4267b2;
    border-bottom: 2px solid #256fc3;
    background-color: transparent;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: transparent;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #4267b2;
    background-color: transparent;
}

.nav-pills-right-align {
    text-align: right;
    display: block;
}

.nav-pills-right-align > li {
    float: none;
    display: inline-block;
}

.nav-pills-right-align > li:last-of-type > a {
    padding-right: 0;
    margin-right: 0;
}

.header-sub-menu {
    border-top: solid 1px #efefef;
    border-bottom: solid 1px #efefef;
    margin-bottom: 28px;
    position: sticky;
    width: 100%;
    top: 0;
    background: #ffffff;
    z-index: 1200;
}

.page-title {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    margin-bottom: 24px;
}

.section-header {
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    text-transform: uppercase;
    border-top: solid 1px #d8d8d8;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;

    margin-bottom: 16px;
}

.form-group input,
.form-group select {
    margin-bottom: 13px;
}

.form-group input.validation-error,
.form-group select.validation-error,
.form-group input.requiredErr {
    margin-bottom: 0;
}

.form-group .form-select-150 {
    max-width: 50%;
}

.form-sticky-icon-right {
    position: absolute;
    bottom: 18px;
    right: 22px;
    font-size: 22px;
    color: #4a4a4a;
}

.form-sticky-icon-right-inline {
    position: absolute;
    top: -3px;
    right: 12px;
    font-size: 22px;
    color: #4a4a4a;
}

input[type="text"].form-group-input-sticky-icon-right {
    padding-right: 32px;
}

input.validation-error,
input.requiredErr {
    border: solid 1px #ed5851;
}

.validation-error-message {
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #ed5851;
    display: block;
}

.form-input-toggle-option {
    width: 100px;
    height: 32px;
    border-radius: 25px;
    border: solid 1px #979797;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #4a4a4a;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-block;
    margin-right: 8px;
    cursor: pointer;
}

.form-input-toggle-option:hover {
    background-color: #5d8ffc;
    color: #ffffff;
}

.form-input-toggle-option:last-of-type {
    margin-right: 0;
}

.form-input-toggle-option.active {
    background-color: #5d8ffc;
    border: none;
    color: #ffffff;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 4px !important;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: #2c2c2c;
    font-family: "Open Sans", sans-serif;
    vertical-align: middle;
}
.table > tbody > tr > td a {
    /* links inside tables do NOT get overridden to 14px */
    /* They also get a slightly different color until hovered */
    font-size: 12px;
    color: #4267b2;
}
.table > tbody > tr > td a:hover {
    /* links inside tables do NOT get overridden to 14px */
    /* They also get a slightly different color until hovered */
    font-size: 12px;
    color: #29487d;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
    /* 10/2/2018 feedback: Headers for tables have a darker background to make them pop more */
    border-top: 0;
    background: #999ea6;
    color: #ffffff;
    font-weight: bold;
}

.table > thead:first-child > tr:first-child > td > a {
    /* 10/2/2018 feedback: links in the header of a table  are sized same as other headers */
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}

.table tr > th:first-child,
.table tr > td:first-child {
    /* once we added darker shading to the table, first column was too close to the left edge */
    padding-left: 8px;
}

.table > tbody + tbody {
    border-top: 2px solid #dddddd;
}

.table .table {
    background-color: #ffffff;
}

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

/* All about rounded tables */
table.table-rounded {
    border-collapse: separate;
}

table.table-rounded > thead:first-child > tr:first-child > th:first-child {
    border-top-left-radius: 4px;
}

table.table-rounded > thead:first-child > tr:first-child > th {
    border-top: solid 1px #eeeeee;
}

table.table-rounded > thead:first-child > tr:first-child > th:last-child {
    border-top-right-radius: 4px;
}

table.table-rounded tr > td:first-child {
    border-left: solid 1px #eeeeee;
}

table.table-rounded tr > td,
table.table-rounded tr > th {
    border-bottom: solid 1px #eeeeee;
}

table.table-rounded tr > td:last-child {
    border-right: solid 1px #eeeeee;
}

table.table-rounded > tbody:last-child > tr:last-child > td:first-child {
    border-bottom-left-radius: 4px;
}

table.table-rounded > tbody:last-child > tr:last-child > td {
    border-bottom: solid 1px #eeeeee;
}

table.table-rounded > tbody:last-child > tr:last-child > td:last-child {
    border-bottom-right-radius: 4px;
}
/* end rounded tables */

table col[class*="col-"] {
    position: static;
    float: none;
    display: table-column;
}

table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    float: none;
    display: table-cell;
}

.table-responsive {
    overflow-x: auto;
    min-height: 0.01%;
}

.table > thead {
    border-right: 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.table-flyout > thead {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-right: 0;
    border-left: 0;
}

.table > thead > tr > th {
    text-transform: uppercase;
    color: #aaaaaa;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 12px;
    letter-spacing: 0.7px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    text-align: left;
}

.table > thead > tr > th > a {
    text-transform: uppercase;
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 12px;
    letter-spacing: 0.7px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    text-align: left;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #eeeeee;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #ffffff;
}

/* These are used for the specific striping in client data
   grid in /admin/client/listby.   The stripes are per PARENT
   not per row.
 */
.table-odd-multi-row {
    /* slightly darker so that the #eeeeee border has a chance to show */
    background-color: #e5e5e5 !important;
}

.table > tbody > tr.client-grid-active > td {
}

.table > tbody > tr.client-grid-inactive > td {
    color: #777777;
}

.table > tbody > tr > td > span.client-grid-shiftcount-danger {
    color: #ed5851;
}

/* end client grid */

.table-action-link-container a {
    font-size: 12px;
    line-height: 1;
}

.material-icon-in-table-text {
    font-size: 14px;
}

.find-shifts-client-filter-open-shift-highlight {
    font-size: 14px;
    color: #4267b2;
}

.find-shifts-client-filter-open-shift-bluelight {
    padding-bottom: 3px;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #dddddd;
    }

    .table-responsive > .table {
        margin-bottom: 0;
    }

    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }

    .table-responsive > .table-bordered {
        border: 0;
    }

    .table-responsive > .table-bordered > thead > tr > th:first-child,
    .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .table-responsive > .table-bordered > thead > tr > td:first-child,
    .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }

    .table-responsive > .table-bordered > thead > tr > th:last-child,
    .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .table-responsive > .table-bordered > thead > tr > td:last-child,
    .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }

    .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
    .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0;
    }
}

.table tr {
    height: 48px;
    /* Note - with table-rounded, this no longer works, have to redo per cell */
    border: 1px solid #eeeeee;
}

.table th tr {
    height: 48px;
    /* Note - with table-rounded, this no longer works, have to redo per cell */
    border: 1px solid #eeeeee;
}

.table-footer-row {
    background-color: #eeeeee;
}

.btn {
    border-radius: 3px;
    font-size: 12px;
    border: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.btn-primary {
    background-color: #4267b2;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #29487d;
    color: #ffffff;
}

.btn-danger {
    background-color: #d9534f;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c9302c;
    color: #ffffff;
}

.btn-primary-white {
    background-color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    color: #4267b2;
    border: solid 1px #4267b2;
}

.btn-primary-white:hover,
.btn-primary-white:focus {
    background-color: #eeeeee;
}

.btn-form-submit {
    width: 100%;
    margin-top: 54px;
}

.btn-inline {
    vertical-align: top;
}

.btn-sm {
    font-size: 12px;
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.no-horizontal-margin {
    margin-left: 0;
    margin-right: 0;
}

.mt0 {
    margin-top: 0;
}

.mt2 {
    margin-top: 2px;
}

.mt8 {
    margin-top: 8px;
}

.mt12 {
    margin-top: 12px;
}

.mt16 {
    margin-top: 16px;
}

.mt24 {
    margin-top: 24px;
}

.mt30 {
    margin-top: 30px;
}

.mt36 {
    margin-top: 36px;
}

.mt40 {
    margin-top: 40px;
}

.mb0 {
    margin-bottom: 0;
}

.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb32 {
    margin-bottom: 32px;
}

.ml8 {
    margin-left: 8px;
}

.ml20 {
    margin-left: 20px;
}

.pb16 {
    padding-bottom: 16px;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.img-top {
    vertical-align: top;
}

.blue-link {
    color: #689bff;
    text-decoration: underline;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.14;
    letter-spacing: 0.1px;
    text-align: left;
    color: #4a4a4a;
    text-transform: none;
    cursor: pointer;
}

input[type="checkbox"]:checked + label {
    font-weight: 600;
}

input[type="checkbox"] + label span.fancy-checkbox {
    display: inline-block;
    width: 27px;
    height: 27px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url("../images/kle_checkbox.svg") 0 top no-repeat;
    cursor: pointer;
}

input[type="checkbox"] + label:hover span.fancy-checkbox {
    background: url("../images/kle_checkbox_hover.svg") 0 top no-repeat;
}

input[type="checkbox"]:checked + label span.fancy-checkbox {
    background: url("../images/kle_checkbox_checked.svg") 0 top no-repeat;
}

input[type="checkbox"]:checked + label:hover span.fancy-checkbox {
    background: url("../images/kle_checkbox_checked_hover.svg") 0 top no-repeat;
}

input[type="checkbox"]:disabled + label span.fancy-checkbox {
    background: url("../images/kle_checkbox_disabled.svg") 0 top no-repeat;
}

input[type="checkbox"]:disabled:checked + label span.fancy-checkbox {
    background: url("../images/kle_checkbox_disabled_checked.svg") 0 top
        no-repeat;
}

.no-horizontal-padding-row {
    padding-left: 0;
    padding-right: 0;
}

.find-shifts-filter-column {
    padding: 0 16px 16px 16px;
    border-right: solid 1px #efefef;
}

.find-shifts-filter-column-datepicker {
    width: 100%;
    min-height: 255px;
}

.find-shifts-filter-column-datepicker .datepicker {
    width: 100%;
}

.find-shifts-filter-column-datepicker table {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*max-width: 232px;*/
    width: 100%;
}

.find-shifts-filter-column-clients-label {
    color: #4a4a4a;
    font-weight: bold;
    font-size: 14px;
}

.find-shifts-filter-column-view-all {
    text-align: right;
    padding-right: 0;
}

.find-shifts-filter-column-view-all a {
    background: transparent;
    cursor: pointer;
    color: #5890ff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: normal;
}

.find-shifts-filter-column-job-count {
    color: #9b9b9b;
    font-size: 12px;
    text-align: right;
    padding-left: 0;
}

.find-shifts-filter-column-client-list {
    color: #222222;
    line-height: 1.86;
    font-size: 14px;
}

.find-shifts-filter-column hr {
    border-top: solid 2px #efefef;
    margin-bottom: 12px;
    margin-left: 0;
    margin-top: 4px;
    width: 95%;
}

.find-shifts-client-filter,
.find-shifts-client-filter a {
    line-height: 16px;
    margin-bottom: 8px;
    letter-spacing: 0.4px;
    font-size: 12px;
}

.find-shifts-client-filter a:focus {
    color: #4a4a4a;
}

.find-shifts-client-filter.active a {
    color: #5890ff;
}

.find-shifts-client-filter.active a:focus {
    color: #5890ff;
}

.find-shifts-client-filter-shift-count {
    color: #98a3c4;
    font-weight: 400;
}

.find-shifts-client-filter.active a .find-shifts-client-filter-shift-count {
    color: #6b9cff;
}

.find-shifts-client-filter.active
    a:focus
    .find-shifts-client-filter-shift-count {
    color: #6b9cff;
}

.find-shifts-client-filter-client-name {
}

.find-shifts-list-empty-container {
    text-align: center;
    opacity: 0.8;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0.8px;
    color: #1e1e1e;
    padding-top: 152px;
    margin-right: 320px;
}

#find-shifts-filters-toggle {
    cursor: pointer;
    color: #4267b2;
    font-size: 14px;
    font-weight: bold;
    padding-right: 15px;
    padding-left: 15px;
}
#find-shifts-filters-toggle:after {
    /* symbol for "opening" panels */
    font-family: "Glyphicons Halflings"; /* essential for enabling glyphicon */
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: grey; /* adjust as needed */
}
#find-shifts-filters-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

@media (max-width: 767px) {
    /*XS*/
    #find-shifts-filters-toggle {
        margin-bottom: 16px;
    }
    .find-shifts-list-empty-container {
        margin-right: 0;
    }
    .find-shifts-filter-column.in,
    .find-shifts-filter-column.collapsing {
        display: block !important;
    }
    .find-shifts-filter-column-client-list {
        max-height: 250px;
        overflow-y: auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /*SM*/
    .find-shifts-list-empty-container {
        margin-right: 0;
    }
    .find-shifts-filter-column {
        display: block !important;
        visibility: visible !important;
    }
}

@media (min-width: 992px) {
    /*MD & LG*/
    .find-shifts-list-item-details-row-action img {
        float: left !important;
    }
    .find-shifts-filter-column {
        display: block !important;
        visibility: visible !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /*MD*/
    .find-shifts-list-empty-container {
        margin-right: 0;
    }
}

.find-shifts-list-item-container {
    margin-bottom: 27px;
}

.find-shifts-list-item-container:last-of-type {
    margin-bottom: 0;
}

.find-shifts-list-day {
    color: #4a4a4a;
    font-size: 12px;
    opacity: 0.5;
}

.find-shifts-list-date {
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 700;
}

.snug-toggle-option {
    width: 100px;
    height: 32px;
    border: solid 1px #4267b2;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #4267b2;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-block;
    margin-right: 0;
    cursor: pointer;
    background-color: #ffffff;
}

.snug-toggle-option:hover {
    background-color: #4267b2;
    border: solid 1px #4267b2;
    color: #ffffff;
}

.snug-toggle-option.active {
    background-color: #4267b2;
    border: solid 1px #4267b2;
    color: #ffffff;
}

.snug-toggle-option:first-of-type {
    border-radius: 3px 0 0 3px;
}

.snug-toggle-option:last-of-type {
    border-radius: 0 3px 3px 0;
}

.find-shifts-list-item-details-row {
    padding-left: 25px;
    display: flex;
    padding-top: 8px;
    padding-bottom: 8px;
    border: solid 1px #ffffff;
}

.find-shifts-list-item-details-row:hover {
    border: solid 1px #98a3c4;
    cursor: pointer;
}

@media (max-width: 767px) {
    /*XS*/
    .find-shifts-list-item-details-row {
        display: block;
    }
}

.find-shifts-list-item-details-row-requested {
    opacity: 0.6;
}

.find-shifts-list-item-details-row:nth-child(odd) {
    background-image: linear-gradient(to right, #ffffff, #eeeeee 96%);
}

.find-shifts-list-item-details-row-time {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4267b2;
}

.find-shifts-list-item-details-row-requested
    .find-shifts-list-item-details-row-time {
    color: #222222;
}

.find-shifts-list-item-details-row-assigned
    .find-shifts-list-item-details-row-time {
    color: #34ab75;
}

.find-shifts-list-item-details-row-client {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    display: block;
}

.find-shifts-list-item-details-row-location {
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #9b9b9b;
    display: block;
    margin-bottom: 4px;
}

.find-shifts-list-item-details-row-pay {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    margin-right: 34px;
}

.find-shifts-list-item-details-row-pay-suffix {
    font-size: 12px;
}

.find-shifts-list-item-details-row-car-icon {
    line-height: 0.5;
    vertical-align: top;
}

.find-shifts-list-item-details-row-position {
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    margin-left: 34px;
    padding-top: 1px;
}

.find-shifts-list-item-details-row-action {
    align-self: center;
}

.find-shifts-list-item-details-row-action i {
    font-size: 18px;
}

.find-shifts-list-item-details-row-requested
    .find-shifts-list-item-details-row-action
    i {
    opacity: 0.5;
}

.find-shifts-list-item-details-row-assigned
    .find-shifts-list-item-details-row-action
    i {
    color: #34ab75;
}

.shift-details-header {
    border-bottom: 8px solid #4267b2;
    color: #4267b2;
    padding-top: 4px;
    padding-bottom: 24px;
    font-weight: bold;
    font-size: 14px;
}

.shift-details-header-available {
    border-bottom: 8px solid #4267b2;
    color: #4267b2;
}

.shift-details-header-requested {
    border-bottom: 8px solid #8f9bbf;
    color: #8f9bbf;
}

.shift-details-header-assigned {
    border-bottom: 8px solid #34ab75;
    color: #34ab75;
}

.shift-details-header-back-link {
    color: #9b9b9b;
    display: inline-block;
    vertical-align: bottom;
    line-height: 2.3;
}

.shift-details-header-back-link:hover,
.shift-details-header-back-link:focus {
    color: #9b9b9b;
}

.shift-details-header-back-icon {
    position: relative;
    top: 8px;
    line-height: 0;
    margin-right: -8px;
}

.shift-details-header-title {
    font-size: 22px;
    line-height: 1.5;
    padding-left: 6px;
    letter-spacing: normal;
}

.shift-details-header-title i {
    position: relative;
    top: 4px;
    opacity: 0.5;
}

.shift-details-header-toggle-favorite-link {
    vertical-align: bottom;
    display: inline-block;
    position: relative;
    bottom: 5px;
    padding-left: 16px;
}

.shift-details-content {
    padding: 8px;
    margin-top: 8px;
    font-size: 14px;
    color: #222222;
    line-height: 1.2;
}

.shift-details-header-cancellation-note {
    opacity: 0.8;
    font-size: 10px;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.4px;
    text-align: right;
    color: #4a4a4a;
}

.shift-details-content-address-container {
    line-height: 1.2;
}

.shift-details-content-distance {
    font-size: 12px;
    opacity: 0.7;
}

.shift-details-content-attribute-container {
    line-height: 1.3;
}

.shift-details-content-attribute-container img {
    margin-right: 6px;
    vertical-align: top;
}

.shift-details-content-officers-header {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    cursor: pointer;
}

.shift-details-content-officers-header-icon {
    color: #5890ff;
    font-size: 18px;
    vertical-align: top;
}

.shift-details-content-officers-header-toggle-icon {
    vertical-align: middle;
    font-size: 16px;
}

.shift-details-content-officers-time-period-header {
    color: #4a4a4a;
    text-transform: uppercase;
    font-size: 12px;
    opacity: 0.5;
    margin-top: 16px;
    margin-bottom: 0;
}

.shift-details-content-officers-row {
    margin-bottom: 8px;
}

.shift-details-content-officers-row-supervisor {
    font-weight: bold;
}

.shift-details-content-officers-row:last-of-type {
    margin-bottom: 0;
}

.shift-details-content-officers-name {
    line-height: 1.9;
}

.shift-details-content-officers-row-phone-icon {
    font-size: 22px;
    vertical-align: bottom;
}

.shift-details-content-officers-communication-button {
    background-color: #5890ff;
    border-radius: 4px;
    color: #ffffff;
    border: none;
    height: 24px;
    width: 24px;
    padding: 1px;
}

.shift-details-content-officers-communication-button i {
    font-size: 22px;
}

.shift-details-content-separator {
    height: 2px;
    opacity: 0.5;
    border: none;
    color: #979797;
    background-color: #979797;
    margin-top: 0;
    margin-bottom: 0;
}

.shift-details-content-files-container {
    margin-top: 16px;
    margin-bottom: 8px;
}

.shift-details-content-file-download-icon {
    color: #5890ff;
}

.shift-details-content-description {
    line-height: 1.57;
}

.shift-details-cancel-pending-shift-button {
    background-color: #8f9bbf;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.shift-details-cancel-pending-shift-button:hover,
.shift-details-cancel-pending-shift-button:focus {
    background-color: #a6b3db;
    color: #ffffff;
}

.my-shifts-calendar-header {
    line-height: 2.5;
}

.my-shifts-calendar-header-icon {
    position: relative;
    top: 6px;
}

.large-calendar-day {
    width: 14.342%;
    height: 150px;
    border: solid 1px #f0f0f0;
    display: inline-block;
    margin-right: -5px;
    margin-bottom: -1px;
    padding: 8px;
    vertical-align: top;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 680px) {
    .large-calendar-day {
        width: 100%;
        height: auto;
    }
}

.large-calendar-day-name {
    text-transform: uppercase;
    color: #9b9b9b;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.large-calendar-day-number {
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 500;
}

.large-calendar-day-shift {
    font-size: 10px;
    color: #4a4a4a;
    letter-spacing: 0.1px;
    line-height: 1;
    margin-bottom: 4px;
    display: block;
}

.large-calendar-day-shift a {
    font-size: 10px;
}

.large-calendar-day-shift-icon-container {
    margin-right: 4px;
}

.large-calendar-day-shift-icon-container i {
    font-size: 12px;
    color: #4a90e2;
}

.large-calendar-day-assigned .large-calendar-day-shift-icon-container i {
    color: #34ab75;
}

.large-calendar-day-requested .large-calendar-day-shift-icon-container i {
    color: #edb451;
}

.large-calendar-day-available .large-calendar-day-shift-icon-container i {
    color: #2948d7;
}

.large-calendar-day-scheduled .large-calendar-day-shift-icon-container i {
    color: #979797;
}

.large-calendar-day-shift-client {
    font-weight: 500;
}

.alphabet-filter a {
    font-size: 18px;
    color: #2c3d6b;
}

@media (max-width: 767px) {
    /*XS*/
    .alphabet-filter a {
        font-size: 14px;
    }
}

.list-filters-container {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 16px;
    padding-left: 0;
}

.list-filter-date-part-dropdown {
    width: 25%;
    min-width: 135px;
    max-width: 165px;
}

@media (max-width: 767px) {
    /*XS*/
    .list-filter-date-part-dropdown {
        width: 100%;
        max-width: unset;
    }
}

.hoverFormDiv {
    background: #ffffff;
    position: absolute;
    z-index: 1201;
    border: 1px solid #aaa;
    font-size: 12px;
    line-height: 1.2;
    padding: 16px;
    display: block;
    pointer-events: all;
}

.hoverFormDiv[name="hoverDiv"] {
    min-width: 400px !important;
}

.hoverFormDiv input[type="checkbox"] + label,
.hoverFormDiv input,
.hoverFormDiv textarea {
    font-size: 12px;
}

.alert {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success-modal,
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    margin-bottom: 16px;
    width: 100%;
}

.alert-primary-icon {
    vertical-align: middle;
}

.input-group-addon:first-child {
    border-right: 0;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control,
.input-group-addon,
.input-group-btn {
    display: table-cell;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(204, 204, 204);
    border-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    vertical-align: middle;
}

.input-group-addon-btn {
    cursor: pointer;
}

.input-group-addon-primary {
    background-color: #4267b2;
    color: #ffffff;
}

.input-group-addon-primary:hover {
    background-color: #29487d;
    color: #ffffff;
}

.input-10 {
    width: 10% !important;
}

.global-loading-display-overlay {
    background: rgba(216, 216, 216, 0.5);
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*opacity: 0.5;*/
    z-index: 99;
}

.global-loading-display-container {
    width: 72px;
    height: 72px;
    position: fixed;
    top: 45%;
    left: 45%;
    z-index: 99;
    opacity: 1;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    padding: 16px;
}

.agency_restrictions_table {
    font-size: 12px;
}

.jurisdiction_table {
    display: inline-block;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 8px;
}

.jurisdiction_table .jurisdiction_heading {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #d8d8d8;
}

.jurisdiction_table .jurisdiction_name {
    font-size: 14px;
}

.jurisdiction_table .jurisdiction_controls {
    text-align: right;
}

.jurisdiction_table .jurisdiction_controls > span {
    margin-right: 4px;
    cursor: pointer;
}

.jurisdiction_table input[type="checkbox"] + label {
    font-size: 12px;
}

.jurisdiction_inputs {
    display: inherit;
    width: 100%;
}

/* BEGIN use flexbox to force wrapping in jurisdiction lists */
tr.jurisdiction_inputs > td > label {
    display: flex;
    align-items: center; /* label and text are vertically centered */
    /* these are the defaults but do apply */
    justify-content: flex-start; /* label and text hang out left */
    flex-direction: row; /* spreading things across the row */
    flex-wrap: nowrap; /* don't wrap text to next line, instead shrink in place */
    /* when things wrap, it gets very cluttered, so try to keep things vertically apart */
    padding-bottom: 2px;
}
tr.jurisdiction_inputs > td > label > span.fancy-checkbox {
    flex: 0 0 auto; /* don't ever change size */
}
tr.jurisdiction_inputs > td > label > span.jurisdiction_department_label {
    flex: 0 1 auto; /* if you were too wide, shrink */
}
/* END use flexbox to force wrapping in jurisdiction lists */

.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
    color: #fff;
    background-color: #5890ff;
    border-color: #5890ff;
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus {
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    background: transparent;
    color: #9b9b9b;
}

.datepicker .clear {
    background: transparent;
    cursor: pointer;
    color: #5890ff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: normal;
}

.datepicker .clear:hover {
    color: #4267b2;
}

.datepicker .datepicker-switch {
    text-align: left;
    text-transform: uppercase;
    cursor: default;
}

.datepicker .datepicker-switch:hover {
    background-color: transparent;
}

.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
    padding: 0px 4.5px;
}

.datepicker table tr td,
.datepicker table tr th {
    width: 14.285714%;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: transparent;
}

.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-menu > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-menu > li > a:hover {
    background-color: #efefef;
}

.report-summary-header {
    border: solid thin #eeeeee;
    border-radius: 4px;
    line-height: 1.6;
    margin-top: 16px;
}

.report-summary-header-title {
    font-weight: 700;
    background-color: #eeeeee;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.mass-messaging-confirmation-message-body {
    padding: 8px;
    min-height: 300px;
    border: solid thin #eeeeee;
}

.officer-revenue-report-summary-header {
    min-height: 165px;
}

.officer-shift-activity-report-list-reminder {
    background-color: #ffff00;
}

.hover-header {
    border-bottom: solid 1px #eeeeee;
}

.hover-title {
    font-size: 14px;
}

.hover-close-button i {
    line-height: 0.5;
}

.cursor-pointer {
    cursor: pointer;
}

.form-text {
    line-height: 1.8;
    font-size: 16px;
}

.form-text-input-small {
    display: inline-block;
    height: 32px;
    margin-bottom: 13px;
    line-height: 2;
}

.yui-calcontainer {
    border: none !important;
}

#jobForm a,
#jobForm .jurisdiction_table .jurisdiction_controls span,
.hyperlink,
.hyperlink:visited,
.transfer-icon-row i {
    color: #4267b2;
}

#jobForm a:hover,
#jobForm .jurisdiction_table .jurisdiction_controls span:hover,
.hyperlink:focus,
.hyperlink:hover,
.transfer-icon-row i:hover {
    color: #29487d;
}

#clientForm a,
#clientForm .jurisdiction_table .jurisdiction_controls span,
.hyperlink,
.hyperlink:visited,
.transfer-icon-row i {
    color: #4267b2;
}

#clientForm a:hover,
#clientForm .jurisdiction_table .jurisdiction_controls span:hover,
.hyperlink:focus,
.hyperlink:hover,
.transfer-icon-row i:hover {
    color: #29487d;
}

.transfer-icon-row i.vertical-icon {
    display: none;
}

@media (max-width: 1199px) {
    /*XS - MD*/
    .transfer-icon-row i.horizontal-icon {
        display: none;
    }

    .transfer-icon-row i.vertical-icon {
        display: initial;
    }

    .transfer-icon-add,
    .transfer-icon-remove {
        display: inline-block;
    }

    .transfer-icon-remove {
        margin-left: 15px;
    }
}

@media (min-width: 1200px) {
    /*LG-XL*/
    .transfer-icon-row {
        padding-top: 30px;
    }
    .transfer-icon-row-tall {
        padding-top: 50px;
    }

    .transfer-icon-remove {
        margin-top: 10px;
    }
}

/*Legacy Styles*/

.jobAvailableLink {
    color: #ff0000;
    font-weight: normal !important;
}

.jobAssignedLink {
    color: #00f;
    font-weight: bold !important;
}

.cal {
    height: 490px;
    border: 1px solid #111;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
}

.calHeader {
    background-color: #000000;
    height: 25px;
    font-size: 10pt;
    color: #ffffff;
}

.calHeader th {
    text-align: center;
}

.cal-shift-column-header {
    color: #000000;
    background-color: #ffffff;
}

.calWeekend {
    background-color: lightgrey;
    width: 10%;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-top: 1px solid #111;
    padding: 3px;
}

.calWeekday {
    background-color: lightgrey;
    width: 10%;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-top: 1px solid #111;
    padding: 3px;
}

.calShiftTime {
    background-color: #ffffff;
    text-align: left;
    width: 10%;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-top: 1px solid #999;
    padding: 3px;
}

.calShiftEntry {
    background-color: #ffffff;
    text-align: center;
    width: 10%;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-top: 1px solid #999;
}

.calShiftEntryItem {
    background-color: #ffffff;
    text-align: center;
    padding: 3px 0px;
}

.calDeadDay {
    background-color: lightgrey;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-top: 1px solid #111;
}

.calShiftDay {
    background-color: #ffffff;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-top: 1px solid #111;
}

tr:nth-of-type(odd).unpublishedJob {
    background-color: #c8e8f0 !important;
}

tr:nth-of-type(even).unpublishedJob {
    background-color: #afced6 !important;
}

/* End Legacy Styles*/

.payroll-report-totals-row {
    background-color: #eeeeee;
}

.payroll-report-subtotals-row {
    background-color: #dddddd;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.modal-title {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
    margin-bottom: 24px;
}

.btn-primary-disabled {
    opacity: 0.4;
    cursor: default !important;
}

.btn-primary-disabled:hover,
.btn-primary-disabled:focus {
    background-color: #4267b2;
}

.page-action-link-add > i {
    display: inline-block;
    vertical-align: -7px;
}

.page-action-link-add > span {
    display: inline-block;
    vertical-align: 0px;
}

.page-action-link-remove-filter > i {
    display: inline-block;
    vertical-align: -7px;
}

.page-action-link-remove-filter > span {
    display: inline-block;
    vertical-align: 0px;
}

/* Trick to control wrapping in Responsiveness */
span.keep-together {
    display: inline-block;
}

.ui-draggable-handle {
    cursor: grab;
}

@media (max-width: 680px) {
    .my-shifts-view-container .visible-xs {
        display: block !important;
    }

    .my-shifts-view-container .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 681px) {
    .my-shifts-view-container .visible-xs {
        display: none !important;
    }

    .my-shifts-view-container .hidden-xs {
        display: block !important;
    }
}

@media (min-width: 681px) and (max-width: 767px) {
    .find-shifts-container .visible-xs {
        display: none !important;
    }

    .find-shifts-container .hidden-xs {
        display: block !important;
    }

    .find-shifts-container .col-sm-2 {
        width: 16.66666667%;
        float: left;
    }

    .find-shifts-container .col-sm-4 {
        width: 33.33333333%;
        float: left;
    }

    .find-shifts-container .col-sm-8 {
        width: 66.66666667%;
        float: left;
    }

    .find-shifts-container .col-sm-10 {
        width: 83.33333333%;
        float: left;
    }
}
.section-empty-list {
    text-align: center;
    font-family: "Roboto";
    font-style: normal;
    border: 1px solid rgba(179, 179, 179, 0.25);
    border-radius: 0px 0px 8px 8px;
    line-height: 14px;
}

.close-button {
    position: absolute;
    top: 5px;
    right: 20px;
}

.lh-2-5 {
    line-height: 2.5;
}

.chosen-container {
    width: 100% !important;
}

.impersonatedHeader {
    width: 100%;
    background-color: #fefc41;
    color: #000;
    font-weight: bold;
    padding: 10px;
    padding-top: 5px;
}

.impersonatedHeader a {
    color: #337ab7;
}

.impersonatedHeader b {
    color: #cf0008;
    text-transform: uppercase;
}